@nuralyui/dropdown 0.0.9 → 0.0.15

package/demo/hy-dropdowns-demo.js

@@ -1,205 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import '../hy-dropdown.component';
-let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.options = [
-            { label: 'option1', value: 'value1', icon: 'bomb' },
-            {
-                label: 'option2',
-                value: 'value2',
-                children: [
-                    { label: 'option3', value: 'value3', icon: 'car' },
-                    { label: 'option13', value: 'value13', icon: 'car' },
-                ],
-            },
-            { label: 'option4', value: 'value4', icon: 'bomb', disabled: true },
-            {
-                label: 'option5',
-                value: 'value5',
-                children: [
-                    {
-                        label: 'option6',
-                        value: 'value6',
-                        icon: 'car',
-                        disabled: true,
-                        children: [{ label: 'option7', value: 'value7', icon: 'cog' }],
-                    },
-                ],
-            },
-            {
-                label: 'option8',
-                value: 'value8',
-                icon: 'book',
-                children: [
-                    {
-                        label: 'option9',
-                        value: 'value9',
-                        icon: 'bolt',
-                        children: [
-                            { label: 'option10', value: 'value10', icon: 'bell', disabled: true },
-                            { label: 'option11', value: 'value11', icon: 'bell' },
-                        ],
-                    },
-                ],
-            },
-            { label: 'option12', value: 'value12', disabled: true },
-        ];
-    }
-    render() {
-        return html ` 
-    <h3>With template</h3>
-    <hy-dropdown .template=${html `<div style='color:red;'>hello</div>`}>
-    <span>click me</span>
-    </hy-dropdown>
-      <div id="centered">
-        <h3>Centered trigger</h3>
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <div style="overflow-y:scroll;max-height:100px;width:100px"> hover meee, hover meeehover meeehover meeehover meeehover meeehover meeehover meee</div>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-      </div>
-      <div id="left">
-        <h3>Left trigger</h3>
-
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-      </div>
-      <div id="right">
-        <h3>Right trigger</h3>
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-
-        <br /><br />
-
-        <hy-dropdown
-          trigger="click"
-          .options=${this.options}
-          @click-item=${(e) => console.log('value clicked', e.detail)}
-        >
-          <span> click me</span>
-        </hy-dropdown>
-        <br /><br />
-        <hy-dropdown .options=${this.options} @click-item=${(e) => console.log('value clicked', e.detail)}>
-          <span> hover me</span>
-        </hy-dropdown>
-      </div>
-    `;
-    }
-};
-ElButtonDemoElement.styles = [
-    css `
-      #centered {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        gap: 30px;
-      }
-      #left {
-        display: flex;
-        align-items: start;
-        flex-direction: column;
-        gap: 10px;
-        margin-left: 50px;
-      }
-      #right {
-        display: flex;
-        align-items: end;
-        flex-direction: column;
-        gap: 10px;
-        margin-right: 50px;
-      }
-    `,
-];
-__decorate([
-    state()
-], ElButtonDemoElement.prototype, "options", void 0);
-ElButtonDemoElement = __decorate([
-    customElement('hy-dropdwon-demo')
-], ElButtonDemoElement);
-export { ElButtonDemoElement };
-//# sourceMappingURL=hy-dropdowns-demo.js.map

package/demo/hy-dropdowns-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdowns-demo.js","sourceRoot":"","sources":["../../../../src/components/dropdown/demo/hy-dropdowns-demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,0BAA0B,CAAC;AAIlC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QA0BE,YAAO,GAAc;YACnB,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAC;YACjD;gBACE,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE;oBACR,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC;oBAChD,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAC;iBACnD;aACF;YACD,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC;YACjE;gBACE,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE;oBACR;wBACE,KAAK,EAAE,SAAS;wBAChB,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,KAAK;wBACX,QAAQ,EAAE,IAAI;wBACd,QAAQ,EAAE,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,CAAC;qBAC7D;iBACF;aACF;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,KAAK,EAAE,SAAS;wBAChB,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,MAAM;wBACZ,QAAQ,EAAE;4BACR,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAC;4BACnE,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAC;yBACpD;qBACF;iBACF;aACF;YACD,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAC;SACtD,CAAC;IAgHJ,CAAC;IA/GU,MAAM;QACb,OAAO,IAAI,CAAA;;6BAEc,IAAI,CAAA,qCAAqC;;;;;gCAKtC,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;gCAOtF,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;gCAMtF,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;qBAQjG,IAAI,CAAC,OAAO;wBACT,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;gCAKlD,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC;;;;KAIjH,CAAC;IACJ,CAAC;CACF,CAAA;AAlLiB,0BAAM,GAAG;IACvB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBF;CACD,CAAA;AAEF;IADC,KAAK,EAAE;oDA0CN;AAnES,mBAAmB;IAD/B,aAAa,CAAC,kBAAkB,CAAC;GACrB,mBAAmB,CAmL/B;SAnLY,mBAAmB","sourcesContent":["/* 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, css, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\nimport '../hy-dropdown.component';\nimport {IOption} from '../dropdown.types';\n\n@customElement('hy-dropdwon-demo')\nexport class ElButtonDemoElement extends LitElement {\n  static override styles = [\n    css`\n      #centered {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n        gap: 30px;\n      }\n      #left {\n        display: flex;\n        align-items: start;\n        flex-direction: column;\n        gap: 10px;\n        margin-left: 50px;\n      }\n      #right {\n        display: flex;\n        align-items: end;\n        flex-direction: column;\n        gap: 10px;\n        margin-right: 50px;\n      }\n    `,\n  ];\n  @state()\n  options: IOption[] = [\n    {label: 'option1', value: 'value1', icon: 'bomb'},\n    {\n      label: 'option2',\n      value: 'value2',\n      children: [\n        {label: 'option3', value: 'value3', icon: 'car'},\n        {label: 'option13', value: 'value13', icon: 'car'},\n      ],\n    },\n    {label: 'option4', value: 'value4', icon: 'bomb', disabled: true},\n    {\n      label: 'option5',\n      value: 'value5',\n      children: [\n        {\n          label: 'option6',\n          value: 'value6',\n          icon: 'car',\n          disabled: true,\n          children: [{label: 'option7', value: 'value7', icon: 'cog'}],\n        },\n      ],\n    },\n    {\n      label: 'option8',\n      value: 'value8',\n      icon: 'book',\n      children: [\n        {\n          label: 'option9',\n          value: 'value9',\n          icon: 'bolt',\n          children: [\n            {label: 'option10', value: 'value10', icon: 'bell', disabled: true},\n            {label: 'option11', value: 'value11', icon: 'bell'},\n          ],\n        },\n      ],\n    },\n    {label: 'option12', value: 'value12', disabled: true},\n  ];\n  override render() {\n    return html` \n    <h3>With template</h3>\n    <hy-dropdown .template=${html`<div style='color:red;'>hello</div>`}>\n    <span>click me</span>\n    </hy-dropdown>\n      <div id=\"centered\">\n        <h3>Centered trigger</h3>\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <div style=\"overflow-y:scroll;max-height:100px;width:100px\"> hover meee, hover meeehover meeehover meeehover meeehover meeehover meeehover meee</div>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n      </div>\n      <div id=\"left\">\n        <h3>Left trigger</h3>\n\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n      </div>\n      <div id=\"right\">\n        <h3>Right trigger</h3>\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n\n        <br /><br />\n\n        <hy-dropdown\n          trigger=\"click\"\n          .options=${this.options}\n          @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}\n        >\n          <span> click me</span>\n        </hy-dropdown>\n        <br /><br />\n        <hy-dropdown .options=${this.options} @click-item=${(e: CustomEvent) => console.log('value clicked', e.detail)}>\n          <span> hover me</span>\n        </hy-dropdown>\n      </div>\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-dropdwon-demo': ElButtonDemoElement;\n  }\n}\n"]}

package/dropdown.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB;AAED,0BAAkB,WAAW;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AACD,0BAAkB,iBAAiB;IACjC,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}

package/hy-dropdown.component.d.ts

@@ -1,30 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { DropDownDirection, IOption, TriggerMode } from './dropdown.types';
-import './templates/hy-dropdown-item.js';
-import './templates/hy-dropdown-menu.js';
-export declare class HyDropdownComponent extends LitElement {
-    static styles: import("lit").CSSResult;
-    triggerElement: HTMLElement;
-    dropDownContainer: HTMLElement;
-    options: IOption[];
-    show: boolean;
-    trigger: TriggerMode;
-    template: TemplateResult<1>;
-    always: boolean;
-    isDropDownVisited: boolean;
-    dropDownDirection: DropDownDirection;
-    firstUpdated(): void;
-    onTriggerClick: () => Promise<void>;
-    calculatePosition: () => void;
-    initPosition(): void;
-    onClickOutside: (event: Event) => void;
-    onMouseEnterTriggerElement: () => Promise<void>;
-    onMouseLeaveTriggerElement: () => void;
-    onMouseEnterDropDown: () => void;
-    onMouseLeaveDropDown: () => void;
-    onOptionClick(): void;
-    disconnectedCallback(): void;
-    display(options: IOption[]): TemplateResult[];
-    render(): TemplateResult<1>;
-}
-//# sourceMappingURL=hy-dropdown.component.d.ts.map

package/hy-dropdown.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAGhE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEjB,cAAc,EAAG,WAAW,CAAC;IACd,iBAAiB,EAAG,WAAW,CAAC;IAEnC,OAAO,EAAG,OAAO,EAAE,CAAC;IACH,IAAI,UAAS;IAC7C,OAAO,cAAqB;IACZ,QAAQ,EAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACb,MAAM,UAAS;IAElD,iBAAiB,UAAS;IAC1B,iBAAiB,oBAA2B;IAE5C,YAAY,IAAI,IAAI;IAe7B,cAAc,sBAIZ;IAEF,iBAAiB,aAqBf;IAEF,YAAY;IAMZ,cAAc,UAAW,KAAK,UAM5B;IAEF,0BAA0B,sBAIxB;IAEF,0BAA0B,aAKxB;IAEF,oBAAoB,aAElB;IAEF,oBAAoB,aAIlB;IAEF,aAAa;IAIJ,oBAAoB;IAe7B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE;IAyBpC,MAAM;CAQhB"}

package/hy-dropdown.component.js

@@ -1,183 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { styles } from './hy-dropdown.style.js';
-import './templates/hy-dropdown-item.js';
-import './templates/hy-dropdown-menu.js';
-let HyDropdownComponent = class HyDropdownComponent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.show = false;
-        this.trigger = "click" /* TriggerMode.Click */;
-        this.always = false;
-        this.isDropDownVisited = false;
-        this.dropDownDirection = "right" /* DropDownDirection.Right */;
-        this.onTriggerClick = () => __awaiter(this, void 0, void 0, function* () {
-            this.show = !this.show;
-            yield this.updateComplete;
-            this.calculatePosition();
-        });
-        this.calculatePosition = () => {
-            var _a, _b;
-            const triggerClientRect = this.shadowRoot.querySelector('slot').assignedElements()[0].getBoundingClientRect();
-            const dropDownWidth = (_a = this.dropDownContainer) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            const dropDownHeight = (_b = this.dropDownContainer) === null || _b === void 0 ? void 0 : _b.clientHeight;
-            const availableBottomSpace = window.visualViewport.height - triggerClientRect.bottom;
-            const availableRightSpace = window.visualViewport.width - triggerClientRect.left - triggerClientRect.width;
-            const availableLeftSpace = triggerClientRect.right;
-            this.dropDownContainer.style.position = 'fixed';
-            if (dropDownHeight > availableBottomSpace) {
-                this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;
-            }
-            if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {
-                this.dropDownContainer.style.right = `${availableRightSpace}px`;
-                this.dropDownDirection = "left" /* DropDownDirection.Left */;
-            }
-            else {
-                this.dropDownDirection = "right" /* DropDownDirection.Right */;
-                this.dropDownContainer.style.removeProperty('right');
-            }
-        };
-        this.onClickOutside = (event) => {
-            const outsideClick = !event.composedPath().includes(this);
-            if (outsideClick && this.show && !this.always) {
-                this.show = false;
-                this.initPosition();
-            }
-        };
-        this.onMouseEnterTriggerElement = () => __awaiter(this, void 0, void 0, function* () {
-            this.show = true;
-            yield this.updateComplete;
-            this.calculatePosition();
-        });
-        this.onMouseLeaveTriggerElement = () => {
-            const waitIsDropDownVisited = 50;
-            setTimeout(() => {
-                if (!this.isDropDownVisited)
-                    this.show = false;
-            }, waitIsDropDownVisited);
-        };
-        this.onMouseEnterDropDown = () => {
-            this.isDropDownVisited = true;
-        };
-        this.onMouseLeaveDropDown = () => {
-            this.isDropDownVisited = false;
-            this.show = false;
-            this.initPosition();
-        };
-    }
-    firstUpdated() {
-        document.addEventListener('scroll', this.calculatePosition);
-        window.addEventListener('resize', this.calculatePosition);
-        if (this.trigger === "hover" /* TriggerMode.Hover */) {
-            this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);
-            this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);
-            this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);
-            this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);
-        }
-        else {
-            this.triggerElement.addEventListener('click', this.onTriggerClick);
-            window.addEventListener('click', this.onClickOutside);
-        }
-    }
-    initPosition() {
-        this.dropDownContainer.style.removeProperty('top');
-        this.dropDownContainer.style.removeProperty('position');
-        this.dropDownContainer.style.removeProperty('right');
-    }
-    onOptionClick() {
-        this.show = false;
-    }
-    disconnectedCallback() {
-        document.removeEventListener('scroll', this.calculatePosition);
-        window.removeEventListener('resize', this.calculatePosition);
-        if (this.trigger === "hover" /* TriggerMode.Hover */) {
-            this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);
-            this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);
-            this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);
-            this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);
-        }
-        else {
-            this.triggerElement.removeEventListener('click', this.onTriggerClick);
-            window.removeEventListener('click', this.onClickOutside);
-        }
-    }
-    display(options) {
-        return options.map((option) => option.children
-            ? html `
-            <hy-dropdown-menu
-              .direction=${this.dropDownDirection}
-              .disabled=${option.disabled}
-              .icon=${option.icon}
-              .label=${option.label}
-            >
-              <div class="dropdown-container">${this.display(option.children)}</div>
-            </hy-dropdown-menu>
-          `
-            : html `
-            <hy-dropdown-item
-              .disabled=${option.disabled}
-              .icon=${option.icon}
-              .label=${option.label}
-              .value=${option.value}
-              .additionalData=${option.additionalData}
-            ></hy-dropdown-item>
-          `);
-    }
-    render() {
-        return html `
-      <slot></slot>
-      <div class="dropdown-container" @click-item=${this.onOptionClick}>
-        ${this.template ? html `${this.show ? this.template : nothing}` : this.display(this.options)}
-      </div>
-    `;
-    }
-};
-HyDropdownComponent.styles = styles;
-__decorate([
-    query('slot')
-], HyDropdownComponent.prototype, "triggerElement", void 0);
-__decorate([
-    query('.dropdown-container')
-], HyDropdownComponent.prototype, "dropDownContainer", void 0);
-__decorate([
-    property({ type: Array })
-], HyDropdownComponent.prototype, "options", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], HyDropdownComponent.prototype, "show", void 0);
-__decorate([
-    property()
-], HyDropdownComponent.prototype, "trigger", void 0);
-__decorate([
-    property({ type: Object })
-], HyDropdownComponent.prototype, "template", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], HyDropdownComponent.prototype, "always", void 0);
-__decorate([
-    state()
-], HyDropdownComponent.prototype, "isDropDownVisited", void 0);
-__decorate([
-    state()
-], HyDropdownComponent.prototype, "dropDownDirection", void 0);
-HyDropdownComponent = __decorate([
-    customElement('hy-dropdown')
-], HyDropdownComponent);
-export { HyDropdownComponent };
-//# sourceMappingURL=hy-dropdown.component.js.map

package/hy-dropdown.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { LitElement, TemplateResult, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown.style.js';\nimport { DropDownDirection, IOption, TriggerMode } from './dropdown.types';\nimport './templates/hy-dropdown-item.js';\nimport './templates/hy-dropdown-menu.js';\n\n@customElement('hy-dropdown')\nexport class HyDropdownComponent extends LitElement {\n  static override styles = styles;\n\n  @query('slot') triggerElement!: HTMLElement;\n  @query('.dropdown-container') dropDownContainer!: HTMLElement;\n\n  @property({ type: Array }) options!: IOption[];\n  @property({ type: Boolean, reflect: true }) show = false;\n  @property() trigger = TriggerMode.Click;\n  @property({ type: Object }) template!: TemplateResult<1>;\n  @property({ type: Boolean, reflect: true }) always = false;\n\n  @state() isDropDownVisited = false;\n  @state() dropDownDirection = DropDownDirection.Right;\n\n  override firstUpdated(): void {\n    document.addEventListener('scroll', this.calculatePosition);\n    window.addEventListener('resize', this.calculatePosition);\n\n    if (this.trigger === TriggerMode.Hover) {\n      this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);\n      this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n      this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);\n      this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);\n    } else {\n      this.triggerElement.addEventListener('click', this.onTriggerClick);\n      window.addEventListener('click', this.onClickOutside);\n    }\n  }\n\n  onTriggerClick = async () => {\n    this.show = !this.show;\n    await this.updateComplete;\n    this.calculatePosition();\n  };\n\n  calculatePosition = () => {\n    const triggerClientRect = this.shadowRoot!.querySelector('slot')!.assignedElements()[0].getBoundingClientRect();\n    const dropDownWidth = this.dropDownContainer?.clientWidth;\n    const dropDownHeight = this.dropDownContainer?.clientHeight;\n    const availableBottomSpace = window.visualViewport!.height - triggerClientRect.bottom;\n    const availableRightSpace = window.visualViewport!.width - triggerClientRect.left - triggerClientRect.width;\n    const availableLeftSpace = triggerClientRect.right;\n\n    this.dropDownContainer.style.position = 'fixed';\n\n    if (dropDownHeight > availableBottomSpace) {\n      this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n    }\n\n    if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {\n      this.dropDownContainer.style.right = `${availableRightSpace}px`;\n      this.dropDownDirection = DropDownDirection.Left;\n    } else {\n      this.dropDownDirection = DropDownDirection.Right;\n      this.dropDownContainer.style.removeProperty('right');\n    }\n  };\n\n  initPosition() {\n    this.dropDownContainer.style.removeProperty('top');\n    this.dropDownContainer.style.removeProperty('position');\n    this.dropDownContainer.style.removeProperty('right');\n  }\n\n  onClickOutside = (event: Event) => {\n    const outsideClick = !event.composedPath().includes(this);\n    if (outsideClick && this.show && !this.always) {\n      this.show = false;\n      this.initPosition();\n    }\n  };\n\n  onMouseEnterTriggerElement = async () => {\n    this.show = true;\n    await this.updateComplete;\n    this.calculatePosition();\n  };\n\n  onMouseLeaveTriggerElement = () => {\n    const waitIsDropDownVisited = 50;\n    setTimeout(() => {\n      if (!this.isDropDownVisited) this.show = false;\n    }, waitIsDropDownVisited);\n  };\n\n  onMouseEnterDropDown = () => {\n    this.isDropDownVisited = true;\n  };\n\n  onMouseLeaveDropDown = () => {\n    this.isDropDownVisited = false;\n    this.show = false;\n    this.initPosition();\n  };\n\n  onOptionClick() {\n    this.show = false;\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('scroll', this.calculatePosition);\n    window.removeEventListener('resize', this.calculatePosition);\n\n    if (this.trigger === TriggerMode.Hover) {\n      this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);\n      this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n      this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);\n      this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);\n    } else {\n      this.triggerElement.removeEventListener('click', this.onTriggerClick);\n      window.removeEventListener('click', this.onClickOutside);\n    }\n  }\n\n  display(options: IOption[]): TemplateResult[] {\n    return options.map((option) =>\n      option.children\n        ? html`\n            <hy-dropdown-menu\n              .direction=${this.dropDownDirection}\n              .disabled=${option.disabled}\n              .icon=${option.icon}\n              .label=${option.label}\n            >\n              <div class=\"dropdown-container\">${this.display(option.children)}</div>\n            </hy-dropdown-menu>\n          `\n        : html`\n            <hy-dropdown-item\n              .disabled=${option.disabled}\n              .icon=${option.icon}\n              .label=${option.label}\n              .value=${option.value}\n              .additionalData=${option.additionalData}\n            ></hy-dropdown-item>\n          `\n    );\n  }\n\n  override render() {\n    return html`\n      <slot></slot>\n      <div class=\"dropdown-container\" @click-item=${this.onOptionClick}>\n        ${this.template ? html`${this.show ? this.template : nothing}` : this.display(this.options)}\n      </div>\n    `;\n  }\n}"]}

package/hy-dropdown.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown.style.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,MAAM,yBAAgB,CAAC"}

package/hy-dropdown.style.js

@@ -1,47 +0,0 @@
-import { css } from 'lit';
-const dropdownStyle = css `
-  .dropdown-container {
-    display: none;
-    z-index:1;
-      border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));
-      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;);
-  }
-  :host {
-    cursor: pointer;
-  }
-
-  :host([show]) .dropdown-container {
-    display: block;
-    position: absolute;
-    width: var(--hybrid-dropdown-width);
-    box-shadow: var(--hybrid-dropdown-box-shadow);
-  }
-  :host {
-    --hybrid-icon-color: #5d5d5d;
-    --hybrid-dropdown-width: 150px;
-    --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
-    --hybrid-dropdown-padding: 10px;
-    --hybrid-dropdown-background-color: #f4f4f4;
-    --hybrid-dropdown-hovered-background-color: #e4e3e3;
-    --hybrid-dropdown-text-color: #000000;
-    --hybrid-dropdown-disabled-background-color: #f4f4f4;
-    --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);
-    --hybrid-dropdown-only-text-padding-left: 18px;
-    --hybrid-dropdown-icon-and-text-padding-left: 4px;
-    --hybrid-dropdown-menu-children-top: 0px;
-    --hybrid-dropdown-menu-children-offset: 0px;
-    --hybrid-dropdown-menu-children-z-index: 2;
-      --hybrid-dropdown-font-size-local: 13px;
-      --hybrid-dropdown-border-radius   : 0px;
-  }
-  @media (prefers-color-scheme: dark) {
-    :host {
-      --hybrid-dropdown-background-color: #232323;
-      --hybrid-dropdown-hovered-background-color: #2b2b2b;
-      --hybrid-dropdown-disabled-background-color: #6f6f6f;
-      --hybrid-dropdown-text-color: #f4f4f4;
-    }
-  }
-`;
-export const styles = dropdownStyle;
-//# sourceMappingURL=hy-dropdown.style.js.map

package/hy-dropdown.style.js.map

@@ -1 +0,0 @@
-{"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/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,eAAO,MAAM,UAAU,sEAKrB,CAAC"}

package/templates/hy-dropdown-item.d.ts

@@ -1,12 +0,0 @@
-import { LitElement } from 'lit';
-export declare class HyDropdownItem extends LitElement {
-    static styles: import("lit").CSSResult[];
-    icon: string;
-    disabled: boolean;
-    label: string;
-    value: string;
-    additionalData: any;
-    onClick(clickItemEvent: Event): void;
-    render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=hy-dropdown-item.d.ts.map

package/templates/hy-dropdown-item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown-item.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAGhC,IAAI,EAAG,MAAM,CAAC;IAGd,QAAQ,UAAS;IAGjB,KAAK,EAAG,MAAM,CAAC;IAGf,KAAK,EAAG,MAAM,CAAC;IAGf,cAAc,EAAG,GAAG,CAAC;IAErB,OAAO,CAAC,cAAc,EAAE,KAAK;IAepB,MAAM;CAQhB"}

package/templates/hy-dropdown-item.js

@@ -1,55 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styles } from './hy-dropdown-item.style.js';
-let HyDropdownItem = class HyDropdownItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-    }
-    onClick(clickItemEvent) {
-        console.log(this.additionalData, 'clickItemEvent');
-        clickItemEvent.stopPropagation();
-        if (!this.disabled) {
-            this.dispatchEvent(new CustomEvent('click-item', {
-                detail: { value: this.value, additionalData: this.additionalData },
-                composed: true,
-                bubbles: true,
-            }));
-        }
-    }
-    render() {
-        return html `
-      <div @click=${this.onClick}>
-        ${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}
-        <hy-label class="option-label">${this.label}</hy-label>
-      </div>
-    `;
-    }
-};
-HyDropdownItem.styles = styles;
-__decorate([
-    property({ reflect: true, type: String })
-], HyDropdownItem.prototype, "icon", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HyDropdownItem.prototype, "disabled", void 0);
-__decorate([
-    property()
-], HyDropdownItem.prototype, "label", void 0);
-__decorate([
-    property()
-], HyDropdownItem.prototype, "value", void 0);
-__decorate([
-    property()
-], HyDropdownItem.prototype, "additionalData", void 0);
-HyDropdownItem = __decorate([
-    customElement('hy-dropdown-item')
-], HyDropdownItem);
-export { HyDropdownItem };
-//# sourceMappingURL=hy-dropdown-item.js.map

package/templates/hy-dropdown-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAOE,aAAQ,GAAG,KAAK,CAAC;IAkCnB,CAAC;IAvBC,OAAO,CAAC,cAAqB;QAC3B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;QACnD,cAAc,CAAC,eAAe,EAAE,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAClE,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;SACH;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO;UACtB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;yCAClC,IAAI,CAAC,KAAK;;KAE9C,CAAC;IACJ,CAAC;CACF,CAAA;AAxCiB,qBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAC1B;AAGjB;IADC,QAAQ,EAAE;6CACI;AAGf;IADC,QAAQ,EAAE;6CACI;AAGf;IADC,QAAQ,EAAE;sDACU;AAhBV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAyC1B;SAzCY,cAAc","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown-item.style.js';\n\n@customElement('hy-dropdown-item')\nexport class HyDropdownItem extends LitElement {\n  static override styles = styles;\n\n  @property({ reflect: true, type: String })\n  icon!: string;\n\n  @property({ reflect: true, type: Boolean })\n  disabled = false;\n\n  @property()\n  label!: string;\n\n  @property()\n  value!: string;\n\n  @property()\n  additionalData!: any;\n\n  onClick(clickItemEvent: Event) {\n    console.log(this.additionalData, 'clickItemEvent');\n    clickItemEvent.stopPropagation();\n\n    if (!this.disabled) {\n      this.dispatchEvent(\n        new CustomEvent('click-item', {\n          detail: { value: this.value, additionalData: this.additionalData },\n          composed: true,\n          bubbles: true,\n        })\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <div @click=${this.onClick}>\n        ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n        <hy-label class=\"option-label\">${this.label}</hy-label>\n      </div>\n    `;\n  }\n}"]}

package/templates/hy-dropdown-item.style.d.ts

@@ -1,2 +0,0 @@
-export declare const styles: import("lit").CSSResult[];
-//# sourceMappingURL=hy-dropdown-item.style.d.ts.map

package/templates/hy-dropdown-item.style.d.ts.map

@@ -1 +0,0 @@
-{"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"}