@nuralyui/dropdown 0.0.7 → 0.0.9

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.
@@ -29,7 +29,7 @@ const dropdownStyle = css `
29
29
  --hybrid-dropdown-only-text-padding-left: 18px;
30
30
  --hybrid-dropdown-icon-and-text-padding-left: 4px;
31
31
  --hybrid-dropdown-menu-children-top: 0px;
32
- --hybrid-dropdown-menu-children-offset: -2px;
32
+ --hybrid-dropdown-menu-children-offset: 0px;
33
33
  --hybrid-dropdown-menu-children-z-index: 2;
34
34
  --hybrid-dropdown-font-size-local: 13px;
35
35
  --hybrid-dropdown-border-radius : 0px;
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownStyle = css`\n .dropdown-container {\n display: none;\n z-index:1;\n border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));\n font-family: var(--hybrid-dropdown-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 }\n :host {\n cursor: pointer;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: absolute;\n width: var(--hybrid-dropdown-width);\n box-shadow: var(--hybrid-dropdown-box-shadow);\n }\n :host {\n --hybrid-icon-color: #5d5d5d;\n --hybrid-dropdown-width: 150px;\n --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);\n --hybrid-dropdown-padding: 10px;\n --hybrid-dropdown-background-color: #f4f4f4;\n --hybrid-dropdown-hovered-background-color: #e4e3e3;\n --hybrid-dropdown-text-color: #000000;\n --hybrid-dropdown-disabled-background-color: #f4f4f4;\n --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);\n --hybrid-dropdown-only-text-padding-left: 18px;\n --hybrid-dropdown-icon-and-text-padding-left: 4px;\n --hybrid-dropdown-menu-children-top: 0px;\n --hybrid-dropdown-menu-children-offset: -2px;\n --hybrid-dropdown-menu-children-z-index: 2;\n --hybrid-dropdown-font-size-local: 13px;\n --hybrid-dropdown-border-radius : 0px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-dropdown-background-color: #232323;\n --hybrid-dropdown-hovered-background-color: #2b2b2b;\n --hybrid-dropdown-disabled-background-color: #6f6f6f;\n --hybrid-dropdown-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = dropdownStyle;\n"]}
1
+ {"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownStyle = css`\n .dropdown-container {\n display: none;\n z-index:1;\n border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));\n font-family: var(--hybrid-dropdown-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 }\n :host {\n cursor: pointer;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: absolute;\n width: var(--hybrid-dropdown-width);\n box-shadow: var(--hybrid-dropdown-box-shadow);\n }\n :host {\n --hybrid-icon-color: #5d5d5d;\n --hybrid-dropdown-width: 150px;\n --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);\n --hybrid-dropdown-padding: 10px;\n --hybrid-dropdown-background-color: #f4f4f4;\n --hybrid-dropdown-hovered-background-color: #e4e3e3;\n --hybrid-dropdown-text-color: #000000;\n --hybrid-dropdown-disabled-background-color: #f4f4f4;\n --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);\n --hybrid-dropdown-only-text-padding-left: 18px;\n --hybrid-dropdown-icon-and-text-padding-left: 4px;\n --hybrid-dropdown-menu-children-top: 0px;\n --hybrid-dropdown-menu-children-offset: 0px;\n --hybrid-dropdown-menu-children-z-index: 2;\n --hybrid-dropdown-font-size-local: 13px;\n --hybrid-dropdown-border-radius : 0px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-dropdown-background-color: #232323;\n --hybrid-dropdown-hovered-background-color: #2b2b2b;\n --hybrid-dropdown-disabled-background-color: #6f6f6f;\n --hybrid-dropdown-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = dropdownStyle;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/dropdown",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}
1
+ {"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}
@@ -15,6 +15,7 @@ const dropdownItemStyle = css `
15
15
  }
16
16
  :host(:not([disabled])) div:hover {
17
17
  background-color: var(--hybrid-dropdown-hovered-background-color);
18
+ margin-left: -1px;
18
19
  }
19
20
  :host([disabled]) div {
20
21
  background-color: var(--hybrid-dropdown-disabled-background-color);
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownItemStyle = css`\n div {\n padding: var(--hybrid-dropdown-padding);\n cursor: pointer;\n background-color: var(--hybrid-dropdown-background-color);\n display: flex;\n align-items: center;\n color: var(--hybrid-dropdown-text-color);\n font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */\n\n }\n hy-icon {\n display: flex;\n }\n :host(:not([disabled])) div:hover {\n background-color: var(--hybrid-dropdown-hovered-background-color);\n }\n :host([disabled]) div {\n background-color: var(--hybrid-dropdown-disabled-background-color);\n cursor: not-allowed;\n color: var(--hybrid-dropdown-disabled-text-color);\n }\n\n :host(:not([icon])) .option-label {\n padding-left: var(--hybrid-dropdown-only-text-padding-left);\n }\n :host([icon]) .option-label {\n padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n }\n`;\n\nexport const styles = [dropdownItemStyle];"]}
1
+ {"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownItemStyle = css`\n div {\n padding: var(--hybrid-dropdown-padding);\n cursor: pointer;\n background-color: var(--hybrid-dropdown-background-color);\n display: flex;\n align-items: center;\n color: var(--hybrid-dropdown-text-color);\n font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */\n\n }\n hy-icon {\n display: flex;\n }\n :host(:not([disabled])) div:hover {\n background-color: var(--hybrid-dropdown-hovered-background-color);\n margin-left: -1px;\n }\n :host([disabled]) div {\n background-color: var(--hybrid-dropdown-disabled-background-color);\n cursor: not-allowed;\n color: var(--hybrid-dropdown-disabled-text-color);\n }\n\n :host(:not([icon])) .option-label {\n padding-left: var(--hybrid-dropdown-only-text-padding-left);\n }\n :host([icon]) .option-label {\n padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n }\n`;\n\nexport const styles = [dropdownItemStyle];"]}
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AACpD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,UAAU,EAAG,WAAW,CAAC;IAEzB,QAAQ,UAAS;IAEjB,IAAI,EAAG,MAAM,CAAC;IAEd,KAAK,EAAG,MAAM,CAAC;IAEf,SAAS,EAAG,iBAAiB,CAAC;IAE9B,YAAY,UAAS;IAEZ,YAAY,IAAI,IAAI;IAK7B,gBAAgB,aAEd;IACF,gBAAgB,aAEd;IACF,WAAW,CAAC,cAAc,EAAE,KAAK;IAIxB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAWhB"}
1
+ {"version":3,"file":"hy-dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,UAAU,EAAG,WAAW,CAAC;IAEzB,QAAQ,UAAS;IAEjB,IAAI,EAAG,MAAM,CAAC;IAEd,KAAK,EAAG,MAAM,CAAC;IAEf,SAAS,EAAG,iBAAiB,CAAC;IAE9B,YAAY,UAAS;IAEZ,YAAY,IAAI,IAAI;IAK7B,gBAAgB,aAEd;IACF,gBAAgB,aAEd;IACF,WAAW,CAAC,cAAc,EAAE,KAAK;IAIxB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAWhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,WAAW;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;sCACnC,IAAI,CAAC,KAAK;;gBAEhC,IAAI,CAAC,SAAS,yCAA2B,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;;;6BAG3D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WACtD,CAAC;IACV,CAAC;CACF,CAAA;AA7CiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,KAAK,CAAC;kDACY;AAEzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,KAAK,EAAE;oDACa;AAbV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;SA9CY,cAAc","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown-menu.style.js';\nimport {DropDownDirection} from '../dropdown.types';\n@customElement('hy-dropdown-menu')\nexport class HyDropdownMenu extends LitElement {\n static override styles = styles;\n @query('div')\n menuOption!: HTMLElement;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property({reflect: true, type: String})\n icon!: string;\n @property()\n label!: string;\n @property({reflect: true})\n direction!: DropDownDirection;\n @state()\n showChildren = false;\n\n override firstUpdated(): void {\n this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n onMouseEnterMenu = () => {\n if (!this.disabled) this.showChildren = true;\n };\n onMouseLeaveMenu = () => {\n if (!this.disabled) this.showChildren = false;\n };\n onClickMenu(menuClickEvent: Event) {\n menuClickEvent.stopPropagation();\n }\n\n override disconnectedCallback(): void {\n this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n override render() {\n return html`<div @mousedown=${this.onClickMenu}>\n ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n <hy-label class=\"menu-label\"> ${this.label}</hy-label>\n <hy-icon\n name=\"${this.direction == DropDownDirection.Right ? 'caret-right' : 'caret-left'}\"\n id=\"caret-icon\"\n ></hy-icon>\n <slot style=\"display:${this.showChildren ? 'block' : 'none'}\"></slot>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,WAAW;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;sCACnC,IAAI,CAAC,KAAK;;gBAEhC,IAAI,CAAC,SAAS,yCAA2B,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;;;6BAG3D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WACtD,CAAC;IACV,CAAC;CACF,CAAA;AA7CiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,KAAK,CAAC;kDACY;AAEzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,KAAK,EAAE;oDACa;AAbV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;SA9CY,cAAc","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown-menu.style.js';\nimport { DropDownDirection } from '../dropdown.types';\n@customElement('hy-dropdown-menu')\nexport class HyDropdownMenu extends LitElement {\n static override styles = styles;\n @query('div')\n menuOption!: HTMLElement;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property({reflect: true, type: String})\n icon!: string;\n @property()\n label!: string;\n @property({reflect: true})\n direction!: DropDownDirection;\n @state()\n showChildren = false;\n\n override firstUpdated(): void {\n this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n onMouseEnterMenu = () => {\n if (!this.disabled) this.showChildren = true;\n };\n onMouseLeaveMenu = () => {\n if (!this.disabled) this.showChildren = false;\n };\n onClickMenu(menuClickEvent: Event) {\n menuClickEvent.stopPropagation();\n }\n\n override disconnectedCallback(): void {\n this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n override render() {\n return html`<div @mousedown=${this.onClickMenu}>\n ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n <hy-label class=\"menu-label\"> ${this.label}</hy-label>\n <hy-icon\n name=\"${this.direction == DropDownDirection.Right ? 'caret-right' : 'caret-left'}\"\n id=\"caret-icon\"\n ></hy-icon>\n <slot style=\"display:${this.showChildren ? 'block' : 'none'}\"></slot>\n </div>`;\n }\n}\n"]}