{"version":3,"sources":["jsdelivr-header.js","/npm/@repo01/ninja-keys@1.2.7/src/ninja-header.ts","/npm/@repo01/ninja-keys@1.2.7/src/ninja-action.ts","/npm/@repo01/ninja-keys@1.2.7/src/ninja-footer.ts","/npm/@repo01/ninja-keys@1.2.7/src/base-styles.ts","/npm/@repo01/ninja-keys@1.2.7/src/ninja-keys.ts"],"names":[],"mappings":"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","file":"/npm/@repo01/ninja-keys@1.2.7/dist/ninja-keys.js/+esm","sourceRoot":"","sourcesContent":["/**\n * Bundled by jsDelivr using Rollup v2.79.2 and Terser v5.39.0.\n * Original file: /npm/@repo01/ninja-keys@1.2.7/dist/ninja-keys.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","import {LitElement, html, css, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {ref, createRef} from 'lit/directives/ref.js';\n\n@customElement('ninja-header')\nexport class NinjaHeader extends LitElement {\n static override styles = css`\n :host {\n flex: 1;\n position: relative;\n }\n .search {\n padding: 1.25em;\n flex-grow: 1;\n flex-shrink: 0;\n margin: 0px;\n border: none;\n appearance: none;\n font-size: 1.125em;\n background: transparent;\n caret-color: var(--ninja-accent-color);\n color: var(--ninja-text-color);\n outline: none;\n font-family: var(--ninja-font-family);\n }\n .search::placeholder {\n color: var(--ninja-placeholder-color);\n }\n .breadcrumb-list {\n padding: 1em 4em 0 1em;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n justify-content: flex-start;\n flex: initial;\n }\n\n .breadcrumb {\n background: var(--ninja-secondary-background-color);\n text-align: center;\n line-height: 1.2em;\n border-radius: var(--ninja-key-border-radius);\n border: 0;\n cursor: pointer;\n padding: 0.1em 0.5em;\n color: var(--ninja-secondary-text-color);\n margin-right: 0.5em;\n outline: none;\n font-family: var(--ninja-font-family);\n }\n\n .search-wrapper {\n display: flex;\n border-bottom: var(--ninja-separate-border);\n }\n `;\n\n @property()\n placeholder = '';\n\n @property({type: Boolean})\n hideBreadcrumbs = false;\n\n @property()\n breadcrumbHome = 'Home';\n\n @property({type: Array})\n breadcrumbs: string[] = [];\n\n private _inputRef = createRef();\n\n override render() {\n let breadcrumbs: TemplateResult<1> | '' = '';\n if (!this.hideBreadcrumbs) {\n const itemTemplates = [];\n for (const breadcrumb of this.breadcrumbs) {\n itemTemplates.push(\n html` this.selectParent(breadcrumb)}\n class=\"breadcrumb\"\n >\n ${breadcrumb}\n `\n );\n }\n breadcrumbs = html`
\n this.selectParent()}\n class=\"breadcrumb\"\n >\n ${this.breadcrumbHome}\n \n ${itemTemplates}\n
`;\n }\n\n return html`\n ${breadcrumbs}\n
\n \n
\n `;\n }\n\n setSearch(value: string) {\n if (this._inputRef.value) {\n this._inputRef.value.value = value;\n }\n }\n\n focusSearch() {\n requestAnimationFrame(() => this._inputRef.value!.focus());\n }\n\n private _handleInput(event: Event) {\n const input = event.target as HTMLInputElement;\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {search: input.value},\n bubbles: false,\n composed: false,\n })\n );\n }\n\n private selectParent(breadcrumb?: string) {\n this.dispatchEvent(\n new CustomEvent('setParent', {\n detail: {parent: breadcrumb},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n override firstUpdated() {\n this.focusSearch();\n }\n\n _close() {\n this.dispatchEvent(\n new CustomEvent('close', {bubbles: true, composed: true})\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ninja-header': NinjaHeader;\n }\n}\n","import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {unsafeHTML} from 'lit/directives/unsafe-html.js';\nimport {join} from 'lit/directives/join.js';\nimport '@material/mwc-icon';\n\nimport {INinjaAction} from './interfaces/ininja-action.js';\n\n@customElement('ninja-action')\nexport class NinjaAction extends LitElement {\n static override styles = css`\n :host {\n display: flex;\n width: 100%;\n }\n .ninja-action {\n padding: 0.75em 1em;\n display: flex;\n border-left: 2px solid transparent;\n align-items: center;\n justify-content: start;\n outline: none;\n transition: color 0s ease 0s;\n width: 100%;\n }\n .ninja-action.selected {\n cursor: pointer;\n color: var(--ninja-selected-text-color);\n background-color: var(--ninja-selected-background);\n border-left: 2px solid var(--ninja-accent-color);\n outline: none;\n }\n .ninja-action.selected .ninja-icon {\n color: var(--ninja-selected-text-color);\n }\n .ninja-icon {\n font-size: var(--ninja-icon-size);\n max-width: var(--ninja-icon-size);\n max-height: var(--ninja-icon-size);\n margin-right: 1em;\n color: var(--ninja-icon-color);\n margin-right: 1em;\n position: relative;\n }\n\n .ninja-title {\n flex-shrink: 0.01;\n margin-right: 0.5em;\n flex-grow: 1;\n font-size: 0.8125em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ninja-hotkeys {\n flex-shrink: 0;\n width: min-content;\n display: flex;\n }\n\n .ninja-hotkeys kbd {\n font-family: inherit;\n }\n .ninja-hotkey {\n background: var(--ninja-secondary-background-color);\n padding: 0.06em 0.25em;\n border-radius: var(--ninja-key-border-radius);\n text-transform: capitalize;\n color: var(--ninja-secondary-text-color);\n font-size: 0.75em;\n font-family: inherit;\n }\n\n .ninja-hotkey + .ninja-hotkey {\n margin-left: 0.5em;\n }\n .ninja-hotkeys + .ninja-hotkeys {\n margin-left: 1em;\n }\n `;\n\n @property({type: Object})\n action!: INinjaAction;\n\n @property({type: Boolean})\n selected = false;\n\n /**\n * Display hotkey as separate buttons on UI or as is\n */\n @property({type: Boolean})\n hotKeysJoinedView = true;\n\n /**\n * Scroll to show element\n */\n ensureInView() {\n requestAnimationFrame(() => this.scrollIntoView({block: 'nearest'}));\n }\n\n override click() {\n this.dispatchEvent(\n new CustomEvent('actionsSelected', {\n detail: this.action,\n bubbles: true,\n composed: true,\n })\n );\n }\n\n constructor() {\n super();\n this.addEventListener('click', this.click);\n }\n\n override updated(changedProperties: Map) {\n if (changedProperties.has('selected')) {\n if (this.selected) {\n this.ensureInView();\n }\n }\n }\n\n override render() {\n let icon;\n if (this.action.mdIcon) {\n icon = html`${this.action.mdIcon}`;\n } else if (this.action.icon) {\n icon = unsafeHTML(this.action.icon || '');\n }\n\n // const hotkey = this.action.hotkey\n // ? html`
${this.action.hotkey}
`\n // : '';\n let hotkey;\n if (this.action.hotkey) {\n if (this.hotKeysJoinedView) {\n hotkey = this.action.hotkey.split(',').map((hotkeys) => {\n const keys = hotkeys.split('+');\n const joinedKeys = html`${join(\n keys.map((key) => html`${key}`),\n '+'\n )}`;\n\n return html`
\n ${joinedKeys}\n
`;\n });\n } else {\n hotkey = this.action.hotkey.split(',').map((hotkeys) => {\n const keys = hotkeys.split('+');\n const keyElements = keys.map(\n (key) => html`${key}`\n );\n return html`${keyElements}`;\n });\n }\n }\n\n const classes = {\n selected: this.selected,\n 'ninja-action': true,\n };\n\n return html`\n \n ${icon}\n
${this.action.title}
\n ${hotkey}\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ninja-action': NinjaAction;\n }\n}\n","import {html} from 'lit';\n\nexport const footerHtml = html`
\n \n \n \n \n\n to select\n \n \n \n \n \n \n \n \n \n \n to navigate\n \n \n esc\n to close\n \n \n \n \n \n move to parent\n \n
`;\n","import {css} from 'lit';\n\nexport const baseStyles = css`\n :host {\n --ninja-width: 640px;\n --ninja-backdrop-filter: none;\n --ninja-overflow-background: rgba(255, 255, 255, 0.5);\n --ninja-text-color: rgb(60, 65, 73);\n --ninja-font-size: 16px;\n --ninja-top: 20%;\n\n --ninja-key-border-radius: 0.25em;\n --ninja-accent-color: rgb(110, 94, 210);\n --ninja-secondary-background-color: rgb(239, 241, 244);\n --ninja-secondary-text-color: rgb(107, 111, 118);\n\n --ninja-selected-background: rgb(248, 249, 251);\n\n --ninja-icon-color: var(--ninja-secondary-text-color);\n --ninja-icon-size: 1.2em;\n --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n --ninja-modal-background: #fff;\n --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;\n\n --ninja-actions-height: 300px;\n --ninja-group-text-color: rgb(144, 149, 157);\n\n --ninja-footer-background: rgba(242, 242, 242, 0.4);\n\n --ninja-placeholder-color: #8e8e8e;\n\n font-size: var(--ninja-font-size);\n\n --ninja-z-index: 1;\n }\n\n :host(.dark) {\n --ninja-backdrop-filter: none;\n --ninja-overflow-background: rgba(0, 0, 0, 0.7);\n --ninja-text-color: #7d7d7d;\n\n --ninja-modal-background: rgba(17, 17, 17, 0.85);\n --ninja-accent-color: rgb(110, 94, 210);\n --ninja-secondary-background-color: rgba(51, 51, 51, 0.44);\n --ninja-secondary-text-color: #888;\n\n --ninja-selected-text-color: #eaeaea;\n --ninja-selected-background: rgba(51, 51, 51, 0.44);\n\n --ninja-icon-color: var(--ninja-secondary-text-color);\n --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n --ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);\n\n --ninja-group-text-color: rgb(144, 149, 157);\n\n --ninja-footer-background: rgba(30, 30, 30, 85%);\n }\n\n .modal {\n display: none;\n position: fixed;\n z-index: var(--ninja-z-index);\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background: var(--ninja-overflow-background);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-backdrop-filter: var(--ninja-backdrop-filter);\n backdrop-filter: var(--ninja-backdrop-filter);\n text-align: left;\n color: var(--ninja-text-color);\n font-family: var(--ninja-font-family);\n }\n .modal.visible {\n display: block;\n }\n\n .modal-content {\n position: relative;\n top: var(--ninja-top);\n margin: auto;\n padding: 0;\n display: flex;\n flex-direction: column;\n flex-shrink: 1;\n -webkit-box-flex: 1;\n flex-grow: 1;\n min-width: 0px;\n will-change: transform;\n background: var(--ninja-modal-background);\n border-radius: 0.5em;\n box-shadow: var(--ninja-modal-shadow);\n max-width: var(--ninja-width);\n overflow: hidden;\n }\n\n .bump {\n animation: zoom-in-zoom-out 0.2s ease;\n }\n\n @keyframes zoom-in-zoom-out {\n 0% {\n transform: scale(0.99);\n }\n 50% {\n transform: scale(1.01, 1.01);\n }\n 100% {\n transform: scale(1, 1);\n }\n }\n\n .ninja-github {\n color: var(--ninja-keys-text-color);\n font-weight: normal;\n text-decoration: none;\n }\n\n .actions-list {\n max-height: var(--ninja-actions-height);\n overflow: auto;\n scroll-behavior: smooth;\n position: relative;\n margin: 0;\n padding: 0.5em 0;\n list-style: none;\n scroll-behavior: smooth;\n }\n\n .group-header {\n height: 1.375em;\n line-height: 1.375em;\n padding-left: 1.25em;\n padding-top: 0.5em;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n font-size: 0.75em;\n line-height: 1em;\n color: var(--ninja-group-text-color);\n margin: 1px 0;\n }\n\n .modal-footer {\n background: var(--ninja-footer-background);\n padding: 0.5em 1em;\n display: flex;\n /* font-size: 0.75em; */\n border-top: var(--ninja-separate-border);\n color: var(--ninja-secondary-text-color);\n }\n\n .modal-footer .help {\n display: flex;\n margin-right: 1em;\n align-items: center;\n font-size: 0.75em;\n }\n\n .ninja-examplekey {\n background: var(--ninja-secondary-background-color);\n padding: 0.06em 0.25em;\n border-radius: var(--ninja-key-border-radius);\n color: var(--ninja-secondary-text-color);\n width: 1em;\n height: 1em;\n margin-right: 0.5em;\n font-size: 1.25em;\n fill: currentColor;\n }\n .ninja-examplekey.esc {\n width: auto;\n height: auto;\n font-size: 1.1em;\n }\n .ninja-examplekey.backspace {\n opacity: 0.7;\n }\n`;\n","import {LitElement, html, TemplateResult, PropertyValues} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {live} from 'lit/directives/live.js';\nimport {createRef, ref} from 'lit-html/directives/ref.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport hotkeys from 'hotkeys-js';\n\nimport './ninja-header.js';\nimport './ninja-action.js';\nimport {INinjaAction} from './interfaces/ininja-action.js';\nimport {NinjaHeader} from './ninja-header.js';\nimport {NinjaAction} from './ninja-action.js';\nimport {footerHtml} from './ninja-footer.js';\nimport {baseStyles} from './base-styles.js';\n\n@customElement('ninja-keys')\nexport class NinjaKeys extends LitElement {\n static override styles = [baseStyles];\n\n /**\n * Search placeholder text\n */\n @property({type: String}) placeholder = 'Type a command or search...';\n\n /**\n * If true will register all hotkey for all actions\n */\n @property({type: Boolean}) disableHotkeys = false;\n\n /**\n * Show or hide breadcrumbs on header\n */\n @property({type: Boolean}) hideBreadcrumbs = false;\n\n /**\n * Open or hide shorcut\n */\n @property() openHotkey = 'cmd+k,ctrl+k';\n\n /**\n * Navigation Up hotkey\n */\n @property() navigationUpHotkey = 'up,shift+tab';\n\n /**\n * Navigation Down hotkey\n */\n @property() navigationDownHotkey = 'down,tab';\n\n /**\n * Close hotkey\n */\n @property() closeHotkey = 'esc';\n\n /**\n * Go back on one level if has parent menu\n */\n @property() goBackHotkey = 'backspace';\n\n /**\n * Select action and execute handler or open submenu\n */\n @property() selectHotkey = 'enter'; // enter,space\n\n /**\n * Show or hide breadcrumbs on header\n */\n @property({type: Boolean}) hotKeysJoinedView = false;\n\n /**\n * Disable load material icons font on connect\n * If you use custom icons.\n * Set this attribute to prevent load default icons font\n */\n @property({type: Boolean}) noAutoLoadMdIcons = false;\n\n /**\n * Array of actions\n */\n @property({\n type: Array,\n hasChanged() {\n // Forced to trigger changed event always.\n // Because of a lot of framework pattern wrap object with an Observer, like vue2.\n // That's why object passed to web component always same and no render triggered. Issue #9\n return true;\n },\n })\n data = [] as Array;\n\n /**\n * Public methods\n */\n\n /**\n * Show a modal\n */\n open(options: {parent?: string} = {}) {\n this._bump = true;\n this.visible = true;\n this._headerRef.value!.focusSearch();\n if (this._actionMatches.length > 0) {\n this._selected = this._actionMatches[0];\n }\n this.setParent(options.parent);\n }\n\n /**\n * Close modal\n */\n close() {\n this._bump = false;\n this.visible = false;\n }\n\n /**\n * Navigate to group of actions\n * @param parent id of parent group/action\n */\n setParent(parent?: string) {\n if (!parent) {\n this._currentRoot = undefined;\n // this.breadcrumbs = [];\n } else {\n this._currentRoot = parent;\n }\n this._selected = undefined;\n this._search = '';\n this._headerRef.value!.setSearch('');\n }\n\n /**\n * Show or hide element\n */\n @state() visible = false;\n /**\n * Temproray used for animation effect. TODO: change to animate logic\n */\n @state()\n private _bump = true;\n\n @state()\n private _actionMatches = [] as Array;\n\n @state()\n private _search = '';\n\n @state()\n private _currentRoot?: string;\n\n /**\n * Array of actions in flat structure\n */\n @state() _flatData = [] as Array;\n\n @state()\n private get breadcrumbs() {\n const path: string[] = [];\n let parentAction = this._selected?.parent;\n if (parentAction) {\n path.push(parentAction);\n while (parentAction) {\n const action = this._flatData.find((a) => a.id === parentAction);\n if (action?.parent) {\n path.push(action.parent);\n }\n parentAction = action ? action.parent : undefined;\n }\n }\n return path.reverse();\n }\n\n @state()\n private _selected?: INinjaAction;\n\n override connectedCallback() {\n super.connectedCallback();\n\n if (!this.noAutoLoadMdIcons) {\n document.fonts.load('24px Material Icons', 'apps').then(() => {});\n }\n\n this._registerInternalHotkeys();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this._unregisterInternalHotkeys();\n }\n\n private _flattern(members: INinjaAction[], parent?: string): INinjaAction[] {\n let children = [] as Array;\n if (!members) {\n members = [];\n }\n return members\n .map((mem) => {\n const alreadyFlatternByUser =\n mem.children &&\n mem.children.some((value: any) => {\n return typeof value == 'string';\n });\n const m = {...mem, parent: mem.parent || parent};\n if (alreadyFlatternByUser) {\n return m;\n } else {\n if (m.children && m.children.length) {\n parent = mem.id;\n children = [...children, ...m.children];\n }\n m.children = m.children ? m.children.map((c: any) => c.id) : [];\n return m;\n }\n })\n .concat(children.length ? this._flattern(children, parent) : children);\n }\n\n override update(changedProperties: PropertyValues) {\n if (changedProperties.has('data') && !this.disableHotkeys) {\n this._flatData = this._flattern(this.data);\n\n this._flatData\n .filter((action) => !!action.hotkey)\n .forEach((action) => {\n hotkeys(action.hotkey!, (event) => {\n event.preventDefault();\n if (action.handler) {\n action.handler(action);\n }\n });\n });\n }\n super.update(changedProperties);\n }\n\n private _registerInternalHotkeys() {\n if (this.openHotkey) {\n hotkeys(this.openHotkey, (event) => {\n event.preventDefault();\n this.visible ? this.close() : this.open();\n });\n }\n\n if (this.selectHotkey) {\n hotkeys(this.selectHotkey, (event) => {\n if (!this.visible) {\n return;\n }\n event.preventDefault();\n this._actionSelected(this._actionMatches[this._selectedIndex]);\n });\n }\n\n if (this.goBackHotkey) {\n hotkeys(this.goBackHotkey, (event) => {\n if (!this.visible) {\n return;\n }\n if (!this._search) {\n event.preventDefault();\n this._goBack();\n }\n });\n }\n\n if (this.navigationDownHotkey) {\n hotkeys(this.navigationDownHotkey, (event) => {\n if (!this.visible) {\n return;\n }\n event.preventDefault();\n if (this._selectedIndex >= this._actionMatches.length - 1) {\n this._selected = this._actionMatches[0];\n } else {\n this._selected = this._actionMatches[this._selectedIndex + 1];\n }\n });\n }\n\n if (this.navigationUpHotkey) {\n hotkeys(this.navigationUpHotkey, (event) => {\n if (!this.visible) {\n return;\n }\n event.preventDefault();\n if (this._selectedIndex === 0) {\n this._selected = this._actionMatches[this._actionMatches.length - 1];\n } else {\n this._selected = this._actionMatches[this._selectedIndex - 1];\n }\n });\n }\n\n if (this.closeHotkey) {\n hotkeys(this.closeHotkey, () => {\n if (!this.visible) {\n return;\n }\n this.close();\n });\n }\n }\n\n private _unregisterInternalHotkeys() {\n if (this.openHotkey) {\n hotkeys.unbind(this.openHotkey)\n }\n\n if (this.selectHotkey) {\n hotkeys.unbind(this.selectHotkey)\n }\n\n if (this.goBackHotkey) {\n hotkeys.unbind(this.goBackHotkey)\n }\n\n if (this.navigationDownHotkey) {\n hotkeys.unbind(this.navigationDownHotkey)\n }\n\n if (this.navigationUpHotkey) {\n hotkeys.unbind(this.navigationUpHotkey)\n }\n\n if (this.closeHotkey) {\n hotkeys.unbind(this.closeHotkey)\n }\n }\n\n\n private _actionFocused(index: INinjaAction, $event: MouseEvent) {\n // this.selectedIndex = index;\n this._selected = index;\n ($event.target as NinjaAction).ensureInView();\n }\n\n private _onTransitionEnd() {\n this._bump = false;\n }\n\n private _goBack() {\n const parent =\n this.breadcrumbs.length > 1\n ? this.breadcrumbs[this.breadcrumbs.length - 2]\n : undefined;\n this.setParent(parent);\n }\n\n private _headerRef = createRef();\n\n override render() {\n const classes = {\n bump: this._bump,\n 'modal-content': true,\n };\n\n const menuClasses = {\n visible: this.visible,\n modal: true,\n };\n\n const actionMatches = this._flatData.filter((action) => {\n const regex = new RegExp(this._search, 'gi');\n const matcher =\n action.title.match(regex) || action.keywords?.match(regex);\n\n if (!this._currentRoot && this._search) {\n // global search for items on root\n return matcher;\n }\n\n return action.parent === this._currentRoot && matcher;\n });\n\n const sections = actionMatches.reduce(\n (entryMap, e) =>\n entryMap.set(e.section, [...(entryMap.get(e.section) || []), e]),\n new Map()\n );\n\n this._actionMatches = [...sections.values()].flat();\n\n if (this._actionMatches.length > 0 && this._selectedIndex === -1) {\n this._selected = this._actionMatches[0];\n }\n if (this._actionMatches.length === 0) {\n this._selected = undefined;\n }\n\n const actionsList = (actions: INinjaAction[]) =>\n html` ${repeat(\n actions,\n (action) => action.id,\n (action) =>\n html`\n this._actionFocused(action, event)}\n @actionsSelected=${(event: CustomEvent) =>\n this._actionSelected(event.detail)}\n .action=${action}\n >`\n )}`;\n\n const itemTemplates: TemplateResult[] = [];\n sections.forEach((actions, section) => {\n const header = section\n ? html`
${section}
`\n : undefined;\n itemTemplates.push(html`${header}${actionsList(actions)}`);\n });\n\n return html`\n
\n
\n ) =>\n this.setParent(event.detail.parent)}\n @close=${this.close}\n >\n \n
\n
${itemTemplates}
\n
\n ${footerHtml} \n
\n
\n `;\n }\n\n private get _selectedIndex(): number {\n if (!this._selected) {\n return -1;\n }\n return this._actionMatches.indexOf(this._selected);\n }\n\n private _actionSelected(action?: INinjaAction) {\n // fire selected event even when action is empty/not selected,\n // so possible handle api search for example\n this.dispatchEvent(\n new CustomEvent('selected', {\n detail: {search: this._search, action},\n bubbles: true,\n composed: true,\n })\n );\n\n if (!action) {\n return;\n }\n\n if (action.children && action.children?.length > 0) {\n this._currentRoot = action.id;\n this._search = '';\n }\n\n this._headerRef.value!.setSearch('');\n this._headerRef.value!.focusSearch();\n\n if (action.handler) {\n const result = action.handler(action);\n if (!result?.keepOpen) {\n this.close();\n }\n }\n\n this._bump = true;\n }\n\n private async _handleInput(event: CustomEvent<{search: string}>) {\n this._search = event.detail.search;\n await this.updateComplete;\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {search: this._search, actions: this._actionMatches},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _overlayClick(event: Event) {\n if ((event.target as HTMLElement)?.classList.contains('modal')) {\n this.close();\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ninja-keys': NinjaKeys;\n }\n}\n"]}