@nuralyui/menu 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/menus-demo.d.ts.map +1 -1
- package/demo/menus-demo.js +20 -10
- package/demo/menus-demo.js.map +1 -1
- package/menu.component.d.ts.map +1 -1
- package/menu.component.js.map +1 -1
- package/menu.style.js +1 -1
- package/menu.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-menu-link.js +2 -2
- package/templates/hy-menu-link.js.map +1 -1
- package/templates/hy-sub-menu.d.ts +2 -0
- package/templates/hy-sub-menu.d.ts.map +1 -1
- package/templates/hy-sub-menu.js +13 -3
- package/templates/hy-sub-menu.js.map +1 -1
package/demo/menus-demo.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menus-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/demo/menus-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"menus-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/demo/menus-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAE5C,IAAI,EAAG,MAAM,EAAE,CAAC;IAEhB,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,EAAE,CA2CZ;IAEF,MAAM,EAAE,KAAK,EAAE,CA4Bb;IAEF,MAAM,EAAE,KAAK,EAAE,CAab;cAEiB,MAAM;CA4C1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}
|
package/demo/menus-demo.js
CHANGED
|
@@ -22,20 +22,28 @@ let ElMeenuElement = class ElMeenuElement extends LitElement {
|
|
|
22
22
|
text: 'First Menu',
|
|
23
23
|
selected: true,
|
|
24
24
|
children: [
|
|
25
|
-
{
|
|
25
|
+
{
|
|
26
|
+
text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }
|
|
26
27
|
},
|
|
27
|
-
{
|
|
28
|
+
{
|
|
29
|
+
text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' },
|
|
28
30
|
children: [
|
|
29
|
-
{
|
|
31
|
+
{
|
|
32
|
+
text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'circle-exclamation', label: 'error' }
|
|
30
33
|
},
|
|
31
|
-
{
|
|
34
|
+
{
|
|
35
|
+
text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' },
|
|
32
36
|
children: [
|
|
33
|
-
{
|
|
37
|
+
{
|
|
38
|
+
text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'circle-exclamation', label: 'error' }
|
|
34
39
|
},
|
|
35
|
-
{
|
|
40
|
+
{
|
|
41
|
+
text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }
|
|
36
42
|
},
|
|
37
|
-
],
|
|
38
|
-
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
]
|
|
46
|
+
},
|
|
39
47
|
],
|
|
40
48
|
disabled: false,
|
|
41
49
|
icon: 'bug',
|
|
@@ -61,10 +69,12 @@ let ElMeenuElement = class ElMeenuElement extends LitElement {
|
|
|
61
69
|
text: 'First Menu',
|
|
62
70
|
children: [
|
|
63
71
|
{ text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right' },
|
|
64
|
-
{
|
|
72
|
+
{
|
|
73
|
+
text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', children: [
|
|
65
74
|
{ text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right' },
|
|
66
75
|
{ text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree' },
|
|
67
|
-
],
|
|
76
|
+
],
|
|
77
|
+
},
|
|
68
78
|
],
|
|
69
79
|
disabled: false,
|
|
70
80
|
},
|
package/demo/menus-demo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menus-demo.js","sourceRoot":"","sources":["../../../../src/components/menu/demo/menus-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport '../menu.component';\nimport {IMenu} from '../menu.types';\n\n@customElement('hy-menu-demo')\nexport class ElMeenuElement extends LitElement {\n @state()\n path!: number[];\n @state()\n value!: string;\n items: IMenu[] = [\n {\n text: 'First Menu',\n selected:true,\n children: [\n {text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'warning',label:'warning'}\n },\n {text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'warning',label:'warning'}\n ,children: [\n {text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'circle-exclamation',label:'error'}\n },\n {text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'warning',label:'warning'}\n ,children: [\n {text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'circle-exclamation',label:'error'}\n },\n {text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},status:{icon:'warning',label:'warning'}\n },\n ],},\n ]},\n ],\n disabled: false,\n icon:'bug',\n menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]},\n status:{icon:'warning',label:'warning'}\n },\n {\n text: 'Second Menu',\n children: [\n {text: 'Submenu 2-1', link: 'Submenu 2-1 link', icon: 'cloud',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]}},\n {text: 'Submenu 2-2', link: 'Submenu 2-2 link', icon: 'wifi',menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]}},\n \n ],\n link: '',\n menu:{icon:'bars',actions:[{label:'Delete',value:'delete'},{label:'Rename',value:'rename'}]}\n },\n ];\n\n items2: IMenu[] = [\n {\n text: 'First Menu',\n disabled: false,\n },\n {\n text: 'First Menu',\n children: [\n {text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right'},\n {text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', children: [\n {text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right'},\n {text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree'},\n ],},\n \n ],\n disabled: false,\n },\n {\n text: 'Second Menu',\n children: [\n {text: 'Submenu 2-1', link: 'Submenu 2-1 link', icon: 'cloud'},\n {text: 'Submenu 2-2', link: 'Submenu 2-2 link', icon: 'wifi'},\n \n ],\n link: '',\n },\n ];\n\n items3: IMenu[] = [\n {\n text: 'Submenu 0-0', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n \n },\n {\n text: 'Submenu 0-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n \n }, {\n text: 'Submenu 0-2', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n \n },\n \n ];\n\n protected override render() {\n return html`\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items}\n @action-click=${(e:CustomEvent)=>{\n console.log('action name',e.detail.value)\n console.log('option path',e.detail.path)\n }}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n path: ${this.path?.join('-')} value: ${this.value}\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items2}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items3}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-menu-demo': ElMeenuElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menus-demo.js","sourceRoot":"","sources":["../../../../src/components/menu/demo/menus-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport '../menu.component';\nimport { IMenu } from '../menu.types';\n\n@customElement('hy-menu-demo')\nexport class ElMeenuElement extends LitElement {\n @state()\n path!: number[];\n @state()\n value!: string;\n items: IMenu[] = [\n {\n text: 'First Menu',\n selected: true,\n children: [\n {\n text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }\n },\n {\n text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }\n , children: [\n {\n text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'circle-exclamation', label: 'error' }\n },\n {\n text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }\n , children: [\n {\n text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'circle-exclamation', label: 'error' }\n },\n {\n text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }, status: { icon: 'warning', label: 'warning' }\n },\n ],\n },\n ]\n },\n ],\n disabled: false,\n icon: 'bug',\n menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] },\n status: { icon: 'warning', label: 'warning' }\n },\n {\n text: 'Second Menu',\n children: [\n { text: 'Submenu 2-1', link: 'Submenu 2-1 link', icon: 'cloud', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] } },\n { text: 'Submenu 2-2', link: 'Submenu 2-2 link', icon: 'wifi', menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] } },\n\n ],\n link: '',\n menu: { icon: 'bars', actions: [{ label: 'Delete', value: 'delete' }, { label: 'Rename', value: 'rename' }] }\n },\n ];\n\n items2: IMenu[] = [\n {\n text: 'First Menu',\n disabled: false,\n },\n {\n text: 'First Menu',\n children: [\n { text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right' },\n {\n text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree', children: [\n { text: 'Submenu 1-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right' },\n { text: 'Submenu 1-2', link: 'Submenu 1-2 link', icon: 'tree' },\n ],\n },\n\n ],\n disabled: false,\n },\n {\n text: 'Second Menu',\n children: [\n { text: 'Submenu 2-1', link: 'Submenu 2-1 link', icon: 'cloud' },\n { text: 'Submenu 2-2', link: 'Submenu 2-2 link', icon: 'wifi' },\n\n ],\n link: '',\n },\n ];\n\n items3: IMenu[] = [\n {\n text: 'Submenu 0-0', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n\n },\n {\n text: 'Submenu 0-1', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n\n }, {\n text: 'Submenu 0-2', link: 'Submenu 1-1 link', icon: 'globe', iconPosition: 'right',\n\n },\n\n ];\n\n protected override render() {\n return html`\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items}\n @action-click=${(e: CustomEvent) => {\n console.log('action name', e.detail.value)\n console.log('option path', e.detail.path)\n }}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n path: ${this.path?.join('-')} value: ${this.value}\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items2}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n\n <h3>Treeview</h3>\n <hy-menu\n .items=${this.items3}\n @change=${(e: CustomEvent) => {\n this.path = e.detail.path;\n this.value = e.detail.value;\n }}\n ></hy-menu>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-menu-demo': ElMeenuElement;\n }\n}\n"]}
|
package/menu.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAO,CAAC,oBAAoB,CAAU;IAEtC,UAAU,EAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAGrC,UAAU,EAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAGrC,KAAK,EAAG,KAAK,EAAE,CAAC;IAEP,YAAY,IAAI,IAAI;IAI7B,oBAAoB;IAKpB,mBAAmB,CAAC,uBAAuB,EAAE,WAAW;IAoBxD,sBAAsB;IAOtB,WAAW,CAAC,eAAe,EAAC,WAAW;IAWvC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,GAAE,MAAM,EAAO,GAAG,GAAG;IAkCzC,MAAM;IAQf,OAAgB,MAAM,8BAAY;CACnC"}
|
package/menu.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAEvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, html} from 'lit';\nimport {customElement, property, queryAll} from 'lit/decorators.js';\nimport {styles} from './menu.style.js';\nimport {IMenu} from './menu.types.js';\nimport './templates/hy-menu-link.js';\nimport './templates/hy-sub-menu.js';\n@customElement('hy-menu')\nexport class HyMenuComponent extends LitElement {\n private _currentSelectedLink!: number;\n @queryAll('hy-menu-link')\n _menuLinks!: NodeListOf<HTMLElement>;\n\n @queryAll('hy-sub-menu')\n _subMenues!: NodeListOf<HTMLElement>;\n\n @property()\n items!: IMenu[];\n\n override firstUpdated(): void {\n this._getPreSelectedIndex();\n }\n\n _getPreSelectedIndex() {\n const listOfLinks = [...this._menuLinks.values()];\n this._currentSelectedLink = listOfLinks.findIndex((element) => element.hasAttribute('selected'));\n }\n\n _updateSelectedLink(updateSelectedLinkEvent: CustomEvent) {\n this._handleInitHighlighted();\n const newSelectedIndex = updateSelectedLinkEvent.detail.index;\n const value = updateSelectedLinkEvent.detail.value;\n if (this._currentSelectedLink >= 0) this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n this._menuLinks[newSelectedIndex].setAttribute('selected', 'true');\n this._currentSelectedLink = newSelectedIndex;\n const pathToOption = this._menuLinks[newSelectedIndex]\n .getAttribute('data-path')\n ?.split('-')\n .map((valueString) => +valueString);\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: {path: pathToOption, value},\n })\n );\n }\n\n _handleInitHighlighted() {\n this._subMenues.forEach((element) => {\n if (element.hasAttribute('highlighted')) {\n element.removeAttribute('highlighted');\n }\n });\n }\n _selectMenu(selectMenuEvent:CustomEvent){\n if (this._currentSelectedLink >= 0) \n {\n this._menuLinks[this._currentSelectedLink].removeAttribute('selected');\n this._currentSelectedLink = -1;\n }\n\n this._handleInitHighlighted()\n this.dispatchEvent(new CustomEvent('change',{bubbles:true,composed:true,detail:{path:selectMenuEvent.detail.path,value:selectMenuEvent.detail.value}}));\n }\n\n _display(items: IMenu[], path: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...path, index].join('-');\n if (menu.children) {\n return html`\n <hy-sub-menu \n .menu=${menu} \n .text=${menu.text} \n .icon=${menu.icon} \n .disabled=${menu.disabled} \n .status=${menu.status}\n .highlighted=${menu.selected}\n data-path=${currentPath} \n @select-menu=${this._selectMenu}>\n ${this._display(menu.children, [...path, index])}\n </hy-sub-menu>\n `;\n } else {\n return html` <hy-menu-link\n data-path=${currentPath}\n icon=${menu.icon}\n .menu=${menu.menu}\n .status=${menu.status}\n text=${menu.text}\n link=${menu.link}\n iconposition=${menu.iconPosition}\n ?selected=${menu.selected}\n ?disabled=${menu.disabled}\n @selected-link=${this._updateSelectedLink}\n ></hy-menu-link>`;\n }\n });\n }\n\n override render() {\n return html`\n <ul>\n ${this._display(this.items)}\n </ul>\n `;\n }\n\n static override styles = [styles];\n}\n"]}
|
package/menu.style.js
CHANGED
|
@@ -49,7 +49,7 @@ const menuStyle = css `
|
|
|
49
49
|
--hybrid-sub-menu-padding-y: 8px;
|
|
50
50
|
--hybrid-sub-menu-margin-y: 0px;
|
|
51
51
|
--hybrid-sub-menu-padding-left: 10px;
|
|
52
|
-
--hybrid-sub-menu-padding-left-text:
|
|
52
|
+
--hybrid-sub-menu-padding-left-text: 5px;
|
|
53
53
|
--hybrid-sub-menu-empty-icon-padding-left-text: 29px;
|
|
54
54
|
--hybrid-sub-menu-children-padding-left: 15px;
|
|
55
55
|
}
|
package/menu.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFpB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst menuStyle = css`\n ul {\n width: var(--hybrid-menu-width);\n padding: var(--hybrid-menu-padding);\n border: var(--hybrid-menu-border);\n font-size: var(--hybrid-menu-font-size);\n font-family: var(--hybrid-menu-font-family)\n }\n :host {\n --hybrid-menu-font-size:13px;\n --hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-menu-padding: 2px;\n --hybrid-menu-width: 45%;\n --hybrid-menu-border: 1px solid #f4f4f4;\n --hybrid-menu-link-color: #000000;\n --hybrid-menu-link-icon-color: #525252;\n --hybrid-menu-disabled-link-color: #c6c6c6;\n --hybrid-menu-focus-border: 1px solid #0f62fe;\n --hybrid-menu-focus-color: #000000;\n --hybrid-menu-active-color: #000000;\n --hybrid-menu-active-background-color: #c6c6c6;\n --hybrid-menu-hover-link-background-color: #f4f4f4;\n --hybrid-menu-hover-link-color: #000000;\n --hybrid-menu-selected-link-background-color: #e0e0e0;\n --hybrid-menu-selected-link-border: 3px solid #0f62fe;\n --hybrid-menu-selected-color: #000000;\n --hybrid-menu-link-background-color: transparent;\n --hybrid-menu-link-padding-y: 8px;\n --hybrid-menu-link-empty-icon-padding-left: 39px;\n --hybrid-menu-link-icon-padding-right: 15px;\n --hybrid-menu-link-icon-padding-left: 10px;\n --hybrid-menu-link-icon-right-padding-left: 39px;\n --hybrid-menu-link-icon-only-width: 42px;\n --hybrid-sub-menu-color: #000000;\n --hybrid-sub-menu-disabled-color: #c6c6c6;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #0f62fe;\n --hybrid-sub-menu-hover-background-color: #f4f4f4;\n --hybrid-sub-menu-hover-color: #161616;\n --hybrid-sub-menu-active-background-color: #c6c6c6;\n --hybrid-sub-menu-active-color: #000000;\n --hybrid-sub-menu-highlighted-color: #000000;\n --hybrid-sub-menu-highlighted-background-color: #e2e2e2;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-action-icon-color:#525252;\n --hybrid-sub-menu-status-icon-color:#525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n --hybrid-sub-menu-padding-y: 8px;\n --hybrid-sub-menu-margin-y: 0px;\n --hybrid-sub-menu-padding-left: 10px;\n --hybrid-sub-menu-padding-left-text:
|
|
1
|
+
{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFpB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst menuStyle = css`\n ul {\n width: var(--hybrid-menu-width);\n padding: var(--hybrid-menu-padding);\n border: var(--hybrid-menu-border);\n font-size: var(--hybrid-menu-font-size);\n font-family: var(--hybrid-menu-font-family)\n }\n :host {\n --hybrid-menu-font-size:13px;\n --hybrid-menu-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-menu-padding: 2px;\n --hybrid-menu-width: 45%;\n --hybrid-menu-border: 1px solid #f4f4f4;\n --hybrid-menu-link-color: #000000;\n --hybrid-menu-link-icon-color: #525252;\n --hybrid-menu-disabled-link-color: #c6c6c6;\n --hybrid-menu-focus-border: 1px solid #0f62fe;\n --hybrid-menu-focus-color: #000000;\n --hybrid-menu-active-color: #000000;\n --hybrid-menu-active-background-color: #c6c6c6;\n --hybrid-menu-hover-link-background-color: #f4f4f4;\n --hybrid-menu-hover-link-color: #000000;\n --hybrid-menu-selected-link-background-color: #e0e0e0;\n --hybrid-menu-selected-link-border: 3px solid #0f62fe;\n --hybrid-menu-selected-color: #000000;\n --hybrid-menu-link-background-color: transparent;\n --hybrid-menu-link-padding-y: 8px;\n --hybrid-menu-link-empty-icon-padding-left: 39px;\n --hybrid-menu-link-icon-padding-right: 15px;\n --hybrid-menu-link-icon-padding-left: 10px;\n --hybrid-menu-link-icon-right-padding-left: 39px;\n --hybrid-menu-link-icon-only-width: 42px;\n --hybrid-sub-menu-color: #000000;\n --hybrid-sub-menu-disabled-color: #c6c6c6;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #0f62fe;\n --hybrid-sub-menu-hover-background-color: #f4f4f4;\n --hybrid-sub-menu-hover-color: #161616;\n --hybrid-sub-menu-active-background-color: #c6c6c6;\n --hybrid-sub-menu-active-color: #000000;\n --hybrid-sub-menu-highlighted-color: #000000;\n --hybrid-sub-menu-highlighted-background-color: #e2e2e2;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-action-icon-color:#525252;\n --hybrid-sub-menu-status-icon-color:#525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n --hybrid-sub-menu-padding-y: 8px;\n --hybrid-sub-menu-margin-y: 0px;\n --hybrid-sub-menu-padding-left: 10px;\n --hybrid-sub-menu-padding-left-text: 5px;\n --hybrid-sub-menu-empty-icon-padding-left-text: 29px;\n --hybrid-sub-menu-children-padding-left: 15px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-menu-border: 1px solid #ffffff;\n --hybrid-menu-link-color:#ffffff;\n --hybrid-menu-focus-border: 1px solid #ffffff;\n --hybrid-menu-focus-color: #ffffff;\n --hybrid-menu-hover-link-background-color: #333333;\n --hybrid-menu-hover-link-color: #ffffff;\n --hybrid-menu-active-color: #ffffff;\n --hybrid-menu-active-background-color: #242424;\n --hybrid-menu-selected-link-border: 3px solid #ffffff;\n --hybrid-menu-selected-link-background-color: #3a3a3a;\n --hybrid-menu-selected-color:#ffffff;\n --hybrid-menu-disabled-link-color: #525252;\n --hybrid-sub-menu-color: #ffffff;\n --hybrid-sub-menu-disabled-color: #525252;\n --hybrid-sub-menu-focus-border: 1px solid #ffffff;\n --hybrid-sub-menu-focus-color: #525252;\n --hybrid-sub-menu-hover-background-color: #333333;\n --hybrid-sub-menu-hover-color: #ffffff;\n --hybrid-sub-menu-active-background-color: #242424;\n --hybrid-sub-menu-active-color: #ffffff;\n --hybrid-sub-menu-highlighted-color: #ffffff;\n --hybrid-sub-menu-highlighted-background-color: #3a3a3a;\n --hybrid-sub-menu-text-icon-color: #525252;\n --hybrid-sub-menu-toggle-icon-color: #525252;\n }\n }\n`;\nexport const styles = [menuStyle];\n"]}
|
package/package.json
CHANGED
|
@@ -74,7 +74,7 @@ let HyMenuLink = HyMenuLink_1 = class HyMenuLink extends LitElement {
|
|
|
74
74
|
<hy-icon name=${this.status.icon} class="status-icon"></hy-icon>
|
|
75
75
|
` : nothing}
|
|
76
76
|
${((_b = this.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
|
|
77
|
-
<hy-dropdown .options=${this.menu.actions} .trigger=${'
|
|
77
|
+
<hy-dropdown .options=${this.menu.actions} .trigger=${'click'} @click-item=${this.onActionClick}>
|
|
78
78
|
<hy-icon name="${this.menu.icon}" id="action-icon" ></hy-icon>
|
|
79
79
|
</hy-dropdown>
|
|
80
80
|
` : nothing}
|
|
@@ -110,7 +110,7 @@ __decorate([
|
|
|
110
110
|
property({ type: Boolean, reflect: true })
|
|
111
111
|
], HyMenuLink.prototype, "selected", void 0);
|
|
112
112
|
__decorate([
|
|
113
|
-
property()
|
|
113
|
+
property({ reflect: true })
|
|
114
114
|
], HyMenuLink.prototype, "menu", void 0);
|
|
115
115
|
__decorate([
|
|
116
116
|
property()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-menu-link.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"hy-menu-link.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './menu-link.style.js';\nimport {EMPTY_STRING} from '../menu.constants.js';\nimport {ICON_POSITION} from './menu-link.contants.js';\nimport { IAction } from '../menu.types.js';\n\n@customElement('hy-menu-link')\nexport class HyMenuLink extends LitElement {\n static index: number;\n\n @state()\n private linkPosition!: number;\n\n @property({reflect: true})\n text = EMPTY_STRING;\n\n @property()\n link!: string;\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({reflect: true})\n icon = EMPTY_STRING;\n\n @property({reflect: true})\n iconPosition = ICON_POSITION.LEFT;\n\n @property({type: Boolean, reflect: true})\n selected = false;\n\n @property({reflect: true})\n menu!:{icon:string,actions:IAction[]}\n\n @property()\n status!:{icon:string,label:string}\n\n optionPath!:number[];\n\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.optionPath=this.getAttribute('data-path')!.split('-').map((stringValue)=>+stringValue);\n\n const isTheFirstOption=this.optionPath.filter((path)=>path!=0).length==0\n if (isTheFirstOption) {\n HyMenuLink.index = 0;\n }\n this.linkPosition = HyMenuLink.index;\n HyMenuLink.index++;\n }\n\n override firstUpdated(): void {\n if (this.selected) {\n this._clickLink();\n }\n }\n\n _clickLink(event?:Event) {\n if((event?.target as HTMLElement)?.id !='action-icon'){\n this.dispatchEvent(\n new CustomEvent('selected-link', {\n detail: {index: this.linkPosition, value: this.text},\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n onActionClick(e:CustomEvent){\n this.dispatchEvent(new CustomEvent('action-click',{detail:{value:e.detail.value,path:this.optionPath},composed:true,bubbles:true}))\n }\n\n override render() {\n return html`\n <li tabindex=\"0\" @mousedown=${!this.disabled ? this._clickLink : nothing}>\n <div class=\"icon-container\" >\n ${this.icon\n ? html`${!this.text\n ? html`\n <div id=\"icon-only\">\n <hy-icon name=\"${this.icon}\"></hy-icon>\n </div>\n `\n : html`<hy-icon name=\"${this.icon}\"></hy-icon>`} `\n : nothing}\n \n </div>\n ${this.text\n ? html`\n <div class=\"action-text-container\">\n <div id=\"text-container\">\n <span>${this.text}</span>\n </div>\n <div class=\"icon-container\" >\n ${this.status?.icon?html`\n <hy-icon name=${this.status.icon} class=\"status-icon\"></hy-icon>\n `:nothing}\n ${this.menu?.actions?html`\n <hy-dropdown .options=${this.menu.actions} .trigger=${'click'} @click-item=${this.onActionClick}>\n <hy-icon name=\"${this.menu.icon}\" id=\"action-icon\" ></hy-icon>\n </hy-dropdown>\n `:nothing}\n </div>\n \n </div>\n `\n : nothing}\n </li>\n `;\n }\n static override styles = styles;\n}\n"]}
|
|
@@ -6,10 +6,12 @@ export declare class HySubMenu extends LitElement {
|
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
highlighted: boolean;
|
|
8
8
|
isOpen: boolean;
|
|
9
|
+
hovered: boolean;
|
|
9
10
|
menu: {
|
|
10
11
|
icon: string;
|
|
11
12
|
actions: IAction[];
|
|
12
13
|
children: any;
|
|
14
|
+
menu: any;
|
|
13
15
|
};
|
|
14
16
|
status: {
|
|
15
17
|
icon: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hy-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,qBACa,SAAU,SAAQ,UAAU;IAEvC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,SAAgB;IAGpB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,MAAM,UAAS;IAGf,OAAO,UAAS;IAGhB,IAAI,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAG;QAAC,IAAI,EAAG,GAAG,CAAA;KAAC,CAAC;IAGxE,MAAM,EAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAEzC,UAAU,EAAG,MAAM,EAAE,CAAC;IAEb,iBAAiB,IAAI,IAAI;IAWlC,WAAW,CAAC,KAAK,EAAE,KAAK;IAcxB,UAAU;IAIV,oBAAoB;IAIpB,aAAa,CAAC,CAAC,EAAE,WAAW;IAInB,MAAM;IAsBf,OAAgB,MAAM,0BAAU;CACjC"}
|
package/templates/hy-sub-menu.js
CHANGED
|
@@ -15,10 +15,17 @@ let HySubMenu = class HySubMenu extends LitElement {
|
|
|
15
15
|
this.disabled = false;
|
|
16
16
|
this.highlighted = false;
|
|
17
17
|
this.isOpen = false;
|
|
18
|
+
this.hovered = false;
|
|
18
19
|
}
|
|
19
20
|
connectedCallback() {
|
|
20
21
|
super.connectedCallback();
|
|
21
22
|
this.optionPath = this.getAttribute('data-path').split('-').map((stringValue) => +stringValue);
|
|
23
|
+
this.addEventListener('mouseenter', () => {
|
|
24
|
+
this.hovered = true;
|
|
25
|
+
});
|
|
26
|
+
this.addEventListener('mouseleave', () => {
|
|
27
|
+
this.hovered = false;
|
|
28
|
+
});
|
|
22
29
|
}
|
|
23
30
|
_toggleMenu(event) {
|
|
24
31
|
var _a, _b;
|
|
@@ -54,9 +61,9 @@ let HySubMenu = class HySubMenu extends LitElement {
|
|
|
54
61
|
${((_a = this.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
|
|
55
62
|
<hy-icon name=${this.status.icon} class="status-icon" ></hy-icon>
|
|
56
63
|
` : nothing}
|
|
57
|
-
${((_b = this.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
|
|
58
|
-
<hy-dropdown .options=${this.menu.actions} @click-item=${this.onActionClick} .trigger=${"
|
|
59
|
-
<hy-icon name="${this.menu.icon}" class="action-icon"></hy-icon>
|
|
64
|
+
${(this.highlighted || this.hovered) && ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.menu.actions) ? html `
|
|
65
|
+
<hy-dropdown .options=${this.menu.menu.actions} @click-item=${this.onActionClick} .trigger=${"click"}>
|
|
66
|
+
<hy-icon name="${this.menu.menu.icon}" class="action-icon"></hy-icon>
|
|
60
67
|
</hy-dropdown>
|
|
61
68
|
` : nothing}
|
|
62
69
|
${this.menu.children.length ? html `<hy-icon id="toggle-icon" name="${this.isOpen ? 'angle-up' : 'angle-down'}" @mousedown=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>` : nothing}
|
|
@@ -83,6 +90,9 @@ __decorate([
|
|
|
83
90
|
__decorate([
|
|
84
91
|
state()
|
|
85
92
|
], HySubMenu.prototype, "isOpen", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
state()
|
|
95
|
+
], HySubMenu.prototype, "hovered", void 0);
|
|
86
96
|
__decorate([
|
|
87
97
|
property()
|
|
88
98
|
], HySubMenu.prototype, "menu", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './sub-menu.style.js';\nimport { EMPTY_STRING } from '../menu.constants.js';\nimport { IAction } from '../menu.types.js';\n\n@customElement('hy-sub-menu')\nexport class HySubMenu extends LitElement {\n @property()\n text!: string;\n\n @property({ reflect: true })\n icon = EMPTY_STRING;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n highlighted = false;\n\n @state()\n isOpen = false;\n\n @state()\n hovered = false;\n\n @property()\n menu!: { icon: string, actions: IAction[], children: any , menu : any};\n\n @property()\n status!: { icon: string, label: string };\n\n optionPath!: number[];\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.optionPath = this.getAttribute('data-path')!.split('-').map((stringValue) => +stringValue);\n this.addEventListener('mouseenter', () => {\n this.hovered = true\n });\n this.addEventListener('mouseleave', () => {\n this.hovered = false\n });\n }\n\n _toggleMenu(event: Event) {\n if (((event?.target as HTMLElement)?.className != 'action-icon') && ((event?.target as HTMLElement)?.id != 'toggle-icon')) {\n if (!this.isOpen) {\n this.isOpen = !this.isOpen;\n }\n this.dispatchEvent(new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: { value: this.text, path: this.optionPath },\n }));\n this.highlighted = true\n }\n }\n\n toggleIcon() {\n this.isOpen = !this.isOpen\n }\n\n _handleSelectedChild() {\n this.highlighted = true;\n }\n\n onActionClick(e: CustomEvent) {\n this.dispatchEvent(new CustomEvent('action-click', { detail: { value: e.detail.value, path: this.optionPath }, composed: true, bubbles: true }))\n }\n\n override render() {\n return html`\n <ul tabindex=\"0\">\n <div @mousedown=${!this.disabled ? this._toggleMenu : nothing}>\n ${this.icon ? html`<hy-icon id=\"text-icon\" name=\"${this.icon}\"></hy-icon>` : nothing}\n <span>${this.text}</span>\n <div class=\"icons-container\">\n ${this.status?.icon ? html`\n <hy-icon name=${this.status.icon} class=\"status-icon\" ></hy-icon>\n `: nothing}\n ${(this.highlighted || this.hovered) && this.menu?.menu.actions ? html`\n <hy-dropdown .options=${this.menu.menu.actions} @click-item=${this.onActionClick} .trigger=${\"click\"}>\n <hy-icon name=\"${this.menu.menu.icon}\" class=\"action-icon\"></hy-icon>\n </hy-dropdown>\n `: nothing}\n ${this.menu.children.length ? html`<hy-icon id=\"toggle-icon\" name=\"${this.isOpen ? 'angle-up' : 'angle-down'}\" @mousedown=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>` : nothing}\n </div>\n </div>\n <slot @select-menu=${this._handleSelectedChild} @selected-link=${this._handleSelectedChild} style=\"display:${this.isOpen ? nothing : 'none'};\"></slot>\n </ul>\n `;\n }\n static override styles = styles;\n}\n"]}
|