@nuralyui/dropdown 0.0.1

package/demo/hy-dropdowns-demo.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../hy-dropdown.component';
+import { IOption } from '../dropdown.types';
+export declare class ElButtonDemoElement extends LitElement {
+    static styles: import("lit").CSSResult[];
+    options: IOption[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-dropdwon-demo': ElButtonDemoElement;
+    }
+}
+//# sourceMappingURL=hy-dropdowns-demo.d.ts.map

package/demo/hy-dropdowns-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdowns-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/demo/hy-dropdowns-demo.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAC,OAAO,EAAC,MAAM,mBAAmB,CAAC;AAE1C,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,4BAuBpB;IAEF,OAAO,EAAE,OAAO,EAAE,CAyChB;IACO,MAAM;CA+GhB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,mBAAmB,CAAC;KACzC;CACF"}

package/demo/hy-dropdowns-demo.js

@@ -0,0 +1,205 @@
+/* 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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdowns-demo.js","sourceRoot":"","sources":["../../../../src/components/dropdown/demo/hy-dropdowns-demo.ts"],"names":[],"mappings":"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","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

@@ -0,0 +1,16 @@
+export interface IOption {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    icon?: string;
+    children?: IOption[];
+}
+export declare const enum TriggerMode {
+    Click = "click",
+    Hover = "hover"
+}
+export declare const enum DropDownDirection {
+    Right = "right",
+    Left = "left"
+}
+//# sourceMappingURL=dropdown.types.d.ts.map

package/dropdown.types.d.ts.map

@@ -0,0 +1 @@
+{"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;CACtB;AAED,0BAAkB,WAAW;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AACD,0BAAkB,iBAAiB;IACjC,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}

package/dropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown.types.js.map

package/dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IOption {\n  label: string;\n  value?: string;\n  disabled?: boolean;\n  icon?: string;\n  children?: IOption[];\n}\n\nexport const enum TriggerMode {\n  Click = 'click',\n  Hover = 'hover',\n}\nexport const enum DropDownDirection {\n  Right = 'right',\n  Left = 'left',\n}\n"]}

package/hy-dropdown.component.d.ts

@@ -0,0 +1,29 @@
+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>;
+    isDropDownVisited: boolean;
+    dropDownDirection: DropDownDirection;
+    firstUpdated(): void;
+    onTriggerClick: () => Promise<void>;
+    calculatePosition: () => void;
+    initPosition(): void;
+    onClickOutside: (onClickEvent: Event) => void;
+    onMouseEnterTriggerElement: () => Promise<void>;
+    onMouseLeaveTriggerElement: () => void;
+    onMouseEnterDropDown: () => void;
+    onMouseLeaveDropDown: () => void;
+    onOptionClick(): void;
+    disconnectedCallback(): void;
+    display(options: IOption[]): any;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=hy-dropdown.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;AACzE,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEhC,cAAc,EAAG,WAAW,CAAC;IAE7B,iBAAiB,EAAG,WAAW,CAAC;IAEhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,UAAS;IAEb,OAAO,cAAqB;IAE5B,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAI5B,iBAAiB,UAAS;IAE1B,iBAAiB,oBAA2B;IAEnC,YAAY,IAAI,IAAI;IAa7B,cAAc,sBAIZ;IACF,iBAAiB,aAoBf;IACF,YAAY;IAKZ,cAAc,iBAAiB,KAAK,UAMlC;IACF,0BAA0B,sBAIxB;IACF,0BAA0B,aAKxB;IACF,oBAAoB,aAElB;IACF,oBAAoB,aAIlB;IACF,aAAa;IAIJ,oBAAoB;IAc7B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,GAAG;IAsBvB,MAAM;CAQhB"}

package/hy-dropdown.component.js

@@ -0,0 +1,182 @@
+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 } 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.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;
+            const availableLeftSpace = triggerClientRect.right;
+            this.dropDownContainer.style.position = 'fixed';
+            if (dropDownHeight > availableBottomSpace) {
+                this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;
+            }
+            else {
+                this.dropDownContainer.style.top = `${triggerClientRect.top + triggerClientRect.height}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 = (onClickEvent) => {
+            const outsideClick = !onClickEvent.composedPath().includes(this);
+            if (outsideClick && this.show) {
+                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) => {
+            if (option.children) {
+                return 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>`;
+            }
+            else {
+                return html `<hy-dropdown-item
+          .disabled=${option.disabled}
+          .icon=${option.icon}
+          .label=${option.label}
+          .value=${option.value}
+        ></hy-dropdown-item>`;
+            }
+        });
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <div class="dropdown-container" @click-item=${this.onOptionClick}>
+      ${this.template ? html `${this.template}` : 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()
+], 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()
+], HyDropdownComponent.prototype, "template", 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

@@ -0,0 +1 @@
+{"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} 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  @query('slot')\n  triggerElement!: HTMLElement;\n  @query('.dropdown-container')\n  dropDownContainer!: HTMLElement;\n  @property()\n  options!: IOption[];\n  @property({type: Boolean, reflect: true})\n  show = false;\n  @property()\n  trigger = TriggerMode.Click;\n  @property()\n  template!:TemplateResult<1>;\n\n\n  @state()\n  isDropDownVisited = false;\n  @state()\n  dropDownDirection = DropDownDirection.Right;\n\n  override firstUpdated(): void {\n    document.addEventListener('scroll', this.calculatePosition);\n    window.addEventListener('resize', this.calculatePosition);\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  onTriggerClick = async () => {\n    this.show = !this.show;\n    await this.updateComplete;\n    this.calculatePosition();\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;\n    const availableLeftSpace = triggerClientRect.right;\n    this.dropDownContainer.style.position = 'fixed';\n    if (dropDownHeight > availableBottomSpace) {\n      this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n    } else {\n      this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height}px`;\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  initPosition() {\n    this.dropDownContainer.style.removeProperty('top');\n    this.dropDownContainer.style.removeProperty('position');\n    this.dropDownContainer.style.removeProperty('right');\n  }\n  onClickOutside = (onClickEvent:Event) => {\n    const outsideClick = !onClickEvent.composedPath().includes(this)\n    if (outsideClick && this.show){\n      this.show = false;\n      this.initPosition();\n    }\n  };\n  onMouseEnterTriggerElement = async () => {\n    this.show = true;\n    await this.updateComplete;\n    this.calculatePosition();\n  };\n  onMouseLeaveTriggerElement = () => {\n    const waitIsDropDownVisited = 50;\n    setTimeout(() => {\n      if (!this.isDropDownVisited) this.show = false;\n    }, waitIsDropDownVisited);\n  };\n  onMouseEnterDropDown = () => {\n    this.isDropDownVisited = true;\n  };\n  onMouseLeaveDropDown = () => {\n    this.isDropDownVisited = false;\n    this.show = false;\n    this.initPosition();\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    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[]): any {\n    return options.map((option) => {\n      if (option.children) {\n        return html`<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      } else {\n        return html`<hy-dropdown-item\n          .disabled=${option.disabled}\n          .icon=${option.icon}\n          .label=${option.label}\n          .value=${option.value}\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.template}`: this.display(this.options)}\n      </div>\n    `;\n  }\n}\n"]}

package/hy-dropdown.style.d.ts

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

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

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

package/hy-dropdown.style.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+const dropdownStyle = css `
+  .dropdown-container {
+    display: none;
+    z-index:1;
+  }
+  :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-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: #e0e0e0;
+    --hybrid-dropdown-hovered-background-color: #8d8d8d;
+    --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: 10px;
+    --hybrid-dropdown-menu-children-offset: 5px;
+    --hybrid-dropdown-menu-children-z-index: 2;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --hybrid-dropdown-background-color: #393939;
+      --hybrid-dropdown-hovered-background-color: #4c4c4c;
+      --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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,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  }\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-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: #e0e0e0;\n    --hybrid-dropdown-hovered-background-color: #8d8d8d;\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: 10px;\n    --hybrid-dropdown-menu-children-offset: 5px;\n    --hybrid-dropdown-menu-children-z-index: 2;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-dropdown-background-color: #393939;\n      --hybrid-dropdown-hovered-background-color: #4c4c4c;\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

@@ -0,0 +1,2 @@
+export * from './hy-dropdown.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

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

package/index.js

@@ -0,0 +1,2 @@
+export * from './hy-dropdown.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './hy-dropdown.component.js';\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/dropdown",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,3 @@
+import { HyDropdownComponent } from './hy-dropdown.component.js';
+export declare const HyDropdown: import("@lit-labs/react").ReactWebComponent<HyDropdownComponent, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"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/react.js

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyDropdownComponent } from './hy-dropdown.component.js';
+export const HyDropdown = createComponent({
+    tagName: 'hy-dropdown',
+    elementClass: HyDropdownComponent,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyDropdownComponent} from './hy-dropdown.component.js';\nexport const HyDropdown = createComponent({\n  tagName: 'hy-dropdown',\n  elementClass: HyDropdownComponent,\n  react: React,\n  events: {},\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown-item.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI9C,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,IAAI,EAAG,MAAM,CAAC;IAEd,QAAQ,UAAS;IAEjB,KAAK,EAAG,MAAM,CAAC;IAEf,KAAK,EAAG,MAAM,CAAC;IAEf,OAAO,CAAC,cAAc,EAAE,KAAK;IAMpB,MAAM;CAKhB"}

package/templates/hy-dropdown-item.js

@@ -0,0 +1,41 @@
+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) {
+        clickItemEvent.stopPropagation();
+        if (!this.disabled)
+            this.dispatchEvent(new CustomEvent('click-item', { detail: { value: this.value }, composed: true, bubbles: true }));
+    }
+    render() {
+        return html `<div @click=${this.onClick}>${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}<span class="option-label">${this.label}<span></li>`;
+    }
+};
+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);
+HyDropdownItem = __decorate([
+    customElement('hy-dropdown-item')
+], HyDropdownItem);
+export { HyDropdownItem };
+//# sourceMappingURL=hy-dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;IAiBnB,CAAC;IAXC,OAAO,CAAC,cAAqB;QAC3B,cAAc,CAAC,eAAe,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,OAAO,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAC5D,8BAA8B,IAAI,CAAC,KAAK,aAAa,CAAC;IACxD,CAAC;CACF,CAAA;AArBiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,EAAE;6CACI;AATJ,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsB1B;SAtBY,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  @property({reflect: true, type: String})\n  icon!: string;\n  @property({reflect: true, type: Boolean})\n  disabled = false;\n  @property()\n  label!: string;\n  @property()\n  value!: string;\n\n  onClick(clickItemEvent: Event) {\n    clickItemEvent.stopPropagation();\n    if (!this.disabled)\n      this.dispatchEvent(new CustomEvent('click-item', {detail: {value: this.value}, composed: true, bubbles: true}));\n  }\n\n  override render() {\n    return html`<div @click=${this.onClick}>${\n      this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing\n    }<span class=\"option-label\">${this.label}<span></li>`;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}

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

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+const dropdownItemStyle = css `
+  div {
+    padding: var(--hybrid-dropdown-padding);
+    cursor: pointer;
+    background-color: var(--hybrid-dropdown-background-color);
+    display: flex;
+    align-items: center;
+    color: var(--hybrid-dropdown-text-color);
+  }
+  hy-icon {
+    display: flex;
+  }
+  :host(:not([disabled])) div:hover {
+    background-color: var(--hybrid-dropdown-hovered-background-color);
+  }
+  :host([disabled]) div {
+    background-color: var(--hybrid-dropdown-disabled-background-color);
+    cursor: not-allowed;
+    color: var(--hybrid-dropdown-disabled-text-color);
+  }
+
+  :host(:not([icon])) .option-label {
+    padding-left: var(--hybrid-dropdown-only-text-padding-left);
+  }
+  :host([icon]) .option-label {
+    padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);
+  }
+`;
+export const styles = [dropdownItemStyle];
+//# sourceMappingURL=hy-dropdown-item.style.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5B,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  }\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];\n"]}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { DropDownDirection } from '../dropdown.types';
+export declare class HyDropdownMenu extends LitElement {
+    static styles: import("lit").CSSResult[];
+    menuOption: HTMLElement;
+    disabled: boolean;
+    icon: string;
+    label: string;
+    direction: DropDownDirection;
+    showChildren: boolean;
+    firstUpdated(): void;
+    onMouseEnterMenu: () => void;
+    onMouseLeaveMenu: () => void;
+    onClickMenu(menuClickEvent: Event): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=hy-dropdown-menu.d.ts.map

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

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

package/templates/hy-dropdown-menu.js

@@ -0,0 +1,70 @@
+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, query, state } from 'lit/decorators.js';
+import { styles } from './hy-dropdown-menu.style.js';
+let HyDropdownMenu = class HyDropdownMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.showChildren = false;
+        this.onMouseEnterMenu = () => {
+            if (!this.disabled)
+                this.showChildren = true;
+        };
+        this.onMouseLeaveMenu = () => {
+            if (!this.disabled)
+                this.showChildren = false;
+        };
+    }
+    firstUpdated() {
+        this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);
+        this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);
+    }
+    onClickMenu(menuClickEvent) {
+        menuClickEvent.stopPropagation();
+    }
+    disconnectedCallback() {
+        this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);
+        this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);
+    }
+    render() {
+        return html `<div @click=${this.onClickMenu}>
+      ${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}
+      <span class="menu-label"> ${this.label}</span>
+      <hy-icon
+        name="${this.direction == "right" /* DropDownDirection.Right */ ? 'caret-right' : 'caret-left'}"
+        id="caret-icon"
+      ></hy-icon>
+      <slot style="display:${this.showChildren ? 'block' : 'none'}"></slot>
+    </div>`;
+    }
+};
+HyDropdownMenu.styles = styles;
+__decorate([
+    query('div')
+], HyDropdownMenu.prototype, "menuOption", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HyDropdownMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], HyDropdownMenu.prototype, "icon", void 0);
+__decorate([
+    property()
+], HyDropdownMenu.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HyDropdownMenu.prototype, "direction", void 0);
+__decorate([
+    state()
+], HyDropdownMenu.prototype, "showChildren", void 0);
+HyDropdownMenu = __decorate([
+    customElement('hy-dropdown-menu')
+], HyDropdownMenu);
+export { HyDropdownMenu };
+//# sourceMappingURL=hy-dropdown-menu.js.map

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

@@ -0,0 +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,eAAe,IAAI,CAAC,WAAW;QACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;kCACvC,IAAI,CAAC,KAAK;;gBAE5B,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 @click=${this.onClickMenu}>\n      ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n      <span class=\"menu-label\"> ${this.label}</span>\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"]}

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

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

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

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

package/templates/hy-dropdown-menu.style.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+const dropdownMenuStyle = css `
+  div {
+    padding: var(--hybrid-dropdown-padding);
+    position: relative;
+    cursor: pointer;
+    background-color: var(--hybrid-dropdown-background-color);
+    display: flex;
+    align-items: center;
+  }
+  hy-icon {
+    display: flex;
+  }
+  #caret-icon {
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+
+  :host(:not([disabled])) div:hover {
+    background-color: var(--hybrid-dropdown-hovered-background-color);
+  }
+  :host([disabled]) div {
+    cursor: not-allowed;
+    background-color: var(--hybrid-dropdown-disabled-background-color);
+    color: var(--hybrid-dropdown-disabled-text-color);
+  }
+
+  ::slotted(*) {
+    z-index: var(--hybrid-dropdown-menu-children-z-index);
+    top: var(--hybrid-dropdown-menu-children-top);
+    cursor: pointer;
+  }
+  :host([direction='left']) ::slotted(*) {
+    right: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));
+  }
+
+  :host([direction='right']) ::slotted(*) {
+    left: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));
+  }
+
+  :host(:not([icon])) .menu-label {
+    padding-left: var(--hybrid-dropdown-only-text-padding-left);
+  }
+  :host([icon]) .menu-label {
+    padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);
+  }
+`;
+export const styles = [dropdownMenuStyle];
+//# sourceMappingURL=hy-dropdown-menu.style.js.map

package/templates/hy-dropdown-menu.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown-menu.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownMenuStyle = css`\n  div {\n    padding: var(--hybrid-dropdown-padding);\n    position: relative;\n    cursor: pointer;\n    background-color: var(--hybrid-dropdown-background-color);\n    display: flex;\n    align-items: center;\n  }\n  hy-icon {\n    display: flex;\n  }\n  #caret-icon {\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n\n  :host(:not([disabled])) div:hover {\n    background-color: var(--hybrid-dropdown-hovered-background-color);\n  }\n  :host([disabled]) div {\n    cursor: not-allowed;\n    background-color: var(--hybrid-dropdown-disabled-background-color);\n    color: var(--hybrid-dropdown-disabled-text-color);\n  }\n\n  ::slotted(*) {\n    z-index: var(--hybrid-dropdown-menu-children-z-index);\n    top: var(--hybrid-dropdown-menu-children-top);\n    cursor: pointer;\n  }\n  :host([direction='left']) ::slotted(*) {\n    right: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));\n  }\n\n  :host([direction='right']) ::slotted(*) {\n    left: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));\n  }\n\n  :host(:not([icon])) .menu-label {\n    padding-left: var(--hybrid-dropdown-only-text-padding-left);\n  }\n  :host([icon]) .menu-label {\n    padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n  }\n`;\n\nexport const styles = [dropdownMenuStyle];\n"]}

package/test/hy-dropdown_test.d.ts

@@ -0,0 +1,4 @@
+import '../hy-dropdown.component';
+import '../templates/hy-dropdown-item';
+import '../templates/hy-dropdown-menu';
+//# sourceMappingURL=hy-dropdown_test.d.ts.map

package/test/hy-dropdown_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown_test.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/test/hy-dropdown_test.ts"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAC;AAIlC,OAAO,+BAA+B,CAAC;AAEvC,OAAO,+BAA+B,CAAC"}

package/test/hy-dropdown_test.js

@@ -0,0 +1,132 @@
+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());
+    });
+};
+import { html, fixture, expect } from '@open-wc/testing';
+import '../hy-dropdown.component';
+import '../templates/hy-dropdown-item';
+import '../templates/hy-dropdown-menu';
+const options = [
+    { label: 'option1', value: 'value1' },
+    { label: 'option4', value: 'value4', icon: 'bomb', disabled: true },
+    {
+        label: 'option8',
+        value: 'value8',
+        children: [
+            {
+                label: 'option9',
+                value: 'value9',
+                icon: 'bolt',
+                children: [{ label: 'option10', value: 'value10' }],
+            },
+        ],
+    },
+];
+suite('HyDropdownComponent', () => {
+    test('should show dropdown on click when trigger is click', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-dropdown .trigger=${"click" /* TriggerMode.Click */} .options=${options}></hy-dropdown>`);
+        const slot = el.shadowRoot.querySelector('slot');
+        slot.click();
+        expect(el.show).to.be.true;
+        slot.click();
+        expect(el.show).to.be.false;
+    }));
+    test('should show dropdown on hover when trigger is hover', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-dropdown .trigger=${"hover" /* TriggerMode.Hover */} .options=${options}></hy-dropdown>`);
+        const slot = el.shadowRoot.querySelector('slot');
+        expect(el.show).to.be.false;
+        slot.dispatchEvent(new Event('mouseenter'));
+        expect(el.show).to.be.true;
+    }));
+    test('should hide dropdown on click outside when trigger is click', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-dropdown .show=${true} .trigger=${"click" /* TriggerMode.Click */} .options=${options}></hy-dropdown>`);
+        expect(el.show).to.be.true;
+        window.dispatchEvent(new Event('click'));
+        expect(el.show).to.be.false;
+    }));
+    test('should hide dropdown on mouseleave dropdown', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-dropdown .show=${true} .options=${options}></hy-dropdown>`);
+        const dropDownContainer = el.shadowRoot.querySelector('.dropdown-container');
+        expect(el.show).to.be.true;
+        dropDownContainer.dispatchEvent(new Event('mouseleave'));
+        expect(el.show).to.be.false;
+    }));
+    test('should hide dropdown on option click event', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `
+      <hy-dropdown .show=${true} .options=${options}></hy-dropdown>
+    `);
+        const dropDownContainer = el.shadowRoot.querySelector('.dropdown-container');
+        expect(el.show).to.be.true;
+        dropDownContainer.dispatchEvent(new Event('click-item'));
+        expect(el.show).to.be.false;
+    }));
+    suite('hy-dropdown-item', () => {
+        test('dropdown item with icon and label', () => __awaiter(void 0, void 0, void 0, function* () {
+            const iconName = 'bomb';
+            const labelText = 'label';
+            const el = yield fixture(html `<hy-dropdown-item icon="${iconName}" label="${labelText}"></hy-dropdown-item>`);
+            const icon = el.shadowRoot.querySelector('hy-icon');
+            const label = el.shadowRoot.querySelector('.option-label');
+            expect(icon).to.exist;
+            expect(icon.getAttribute('name')).to.equal(iconName);
+            expect(label).to.exist;
+            expect(label.textContent).to.equal(labelText);
+        }));
+        test('should dispatch click-item ', () => __awaiter(void 0, void 0, void 0, function* () {
+            const el = yield fixture(html `<hy-dropdown-item label="Test Label" value="test-value"></hy-dropdown-item>`);
+            let clickItemDispatched = false;
+            el.addEventListener('click-item', () => {
+                clickItemDispatched = true;
+            });
+            el.shadowRoot.querySelector('div').click();
+            expect(clickItemDispatched).to.be.true;
+        }));
+        test('should not dispatch click-item event when disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+            const el = yield fixture(html `<hy-dropdown-item label="Test Label" value="test-value" disabled></hy-dropdown-item>`);
+            let clickItemDispatched = false;
+            el.addEventListener('click-item', () => {
+                clickItemDispatched = true;
+            });
+            el.shadowRoot.querySelector('div').click();
+            expect(clickItemDispatched).to.be.false;
+        }));
+    });
+    suite('hy-dropdown-menu', () => {
+        test('should show menu children on mouse enter and hide on mouse leave', () => __awaiter(void 0, void 0, void 0, function* () {
+            const el = yield fixture(html `<hy-dropdown-menu label="Test Label"><div>Child Item</div></hy-dropdown-menu>`);
+            const div = el.shadowRoot.querySelector('div');
+            expect(el.showChildren).to.be.false;
+            expect(el.shadowRoot.querySelector('slot')).to.have.style('display', 'none');
+            div.dispatchEvent(new Event('mouseenter'));
+            yield el.updateComplete;
+            expect(el.showChildren).to.be.true;
+            expect(el.shadowRoot.querySelector('slot')).to.have.style('display', 'block');
+            div.dispatchEvent(new Event('mouseleave'));
+            expect(el.showChildren).to.be.false;
+        }));
+        test('should not show children if disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+            const el = yield fixture(html `<hy-dropdown-menu label="Test Label" disabled></hy-dropdown-menu>`);
+            const div = el.shadowRoot.querySelector('div');
+            expect(el.shadowRoot.querySelector('slot')).to.have.style('display', 'none');
+            div.dispatchEvent(new Event('mouseenter'));
+            expect(el.showChildren).to.be.false;
+            expect(el.shadowRoot.querySelector('slot')).to.not.have.style('display', 'block');
+        }));
+        test('should stop event propagation on click', () => __awaiter(void 0, void 0, void 0, function* () {
+            const el = yield fixture(html `<hy-dropdown-menu label="Test Label"></hy-dropdown-menu>`);
+            const div = el.shadowRoot.querySelector('div');
+            let eventStopped = true;
+            window.addEventListener('click', () => {
+                eventStopped = false;
+            });
+            div.click();
+            expect(eventStopped).to.be.true;
+        }));
+    });
+});
+//# sourceMappingURL=hy-dropdown_test.js.map

package/test/hy-dropdown_test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown_test.js","sourceRoot":"","sources":["../../../../src/components/dropdown/test/hy-dropdown_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport '../hy-dropdown.component';\nimport {HyDropdownComponent} from '../hy-dropdown.component';\nimport {TriggerMode} from '../dropdown.types';\nimport {HyDropdownItem} from '../templates/hy-dropdown-item';\nimport '../templates/hy-dropdown-item';\nimport {HyDropdownMenu} from '../templates/hy-dropdown-menu';\nimport '../templates/hy-dropdown-menu';\n\nconst options = [\n  {label: 'option1', value: 'value1'},\n  {label: 'option4', value: 'value4', icon: 'bomb', disabled: true},\n  {\n    label: 'option8',\n    value: 'value8',\n    children: [\n      {\n        label: 'option9',\n        value: 'value9',\n        icon: 'bolt',\n        children: [{label: 'option10', value: 'value10'}],\n      },\n    ],\n  },\n];\nsuite('HyDropdownComponent', () => {\n  test('should show dropdown on click when trigger is click', async () => {\n    const el: HyDropdownComponent = await fixture(\n      html`<hy-dropdown .trigger=${TriggerMode.Click} .options=${options}></hy-dropdown>`\n    );\n    const slot = el.shadowRoot!.querySelector('slot')!;\n    slot.click();\n    expect(el.show).to.be.true;\n    slot.click();\n    expect(el.show).to.be.false;\n  });\n\n  test('should show dropdown on hover when trigger is hover', async () => {\n    const el: HyDropdownComponent = await fixture(\n      html`<hy-dropdown .trigger=${TriggerMode.Hover} .options=${options}></hy-dropdown>`\n    );\n    const slot = el.shadowRoot!.querySelector('slot')!;\n    expect(el.show).to.be.false;\n    slot.dispatchEvent(new Event('mouseenter'));\n    expect(el.show).to.be.true;\n  });\n\n  test('should hide dropdown on click outside when trigger is click', async () => {\n    const el: HyDropdownComponent = await fixture(\n      html`<hy-dropdown .show=${true} .trigger=${TriggerMode.Click} .options=${options}></hy-dropdown>`\n    );\n    expect(el.show).to.be.true;\n    window.dispatchEvent(new Event('click'));\n    expect(el.show).to.be.false;\n  });\n  test('should hide dropdown on mouseleave dropdown', async () => {\n    const el: HyDropdownComponent = await fixture(html`<hy-dropdown .show=${true} .options=${options}></hy-dropdown>`);\n    const dropDownContainer = el.shadowRoot!.querySelector('.dropdown-container') as HTMLElement;\n    expect(el.show).to.be.true;\n    dropDownContainer.dispatchEvent(new Event('mouseleave'));\n    expect(el.show).to.be.false;\n  });\n\n  test('should hide dropdown on option click event', async () => {\n    const el: HyDropdownComponent = await fixture(html`\n      <hy-dropdown .show=${true} .options=${options}></hy-dropdown>\n    `);\n    const dropDownContainer: HTMLElement = el.shadowRoot!.querySelector('.dropdown-container')!;\n    expect(el.show).to.be.true;\n    dropDownContainer.dispatchEvent(new Event('click-item'));\n    expect(el.show).to.be.false;\n  });\n\n  suite('hy-dropdown-item', () => {\n    test('dropdown item with icon and label', async () => {\n      const iconName = 'bomb';\n      const labelText = 'label';\n      const el: HyDropdownItem = await fixture(\n        html`<hy-dropdown-item icon=\"${iconName}\" label=\"${labelText}\"></hy-dropdown-item>`\n      );\n      const icon = el.shadowRoot!.querySelector('hy-icon');\n      const label = el.shadowRoot!.querySelector('.option-label');\n      expect(icon).to.exist;\n      expect(icon!.getAttribute('name')).to.equal(iconName);\n      expect(label).to.exist;\n      expect(label!.textContent).to.equal(labelText);\n    });\n\n    test('should dispatch click-item ', async () => {\n      const el: HyDropdownItem = await fixture(\n        html`<hy-dropdown-item label=\"Test Label\" value=\"test-value\"></hy-dropdown-item>`\n      );\n      let clickItemDispatched = false;\n      el.addEventListener('click-item', () => {\n        clickItemDispatched = true;\n      });\n      el.shadowRoot!.querySelector('div')!.click();\n      expect(clickItemDispatched).to.be.true;\n    });\n    test('should not dispatch click-item event when disabled', async () => {\n      const el: HyDropdownItem = await fixture(\n        html`<hy-dropdown-item label=\"Test Label\" value=\"test-value\" disabled></hy-dropdown-item>`\n      );\n      let clickItemDispatched = false;\n      el.addEventListener('click-item', () => {\n        clickItemDispatched = true;\n      });\n      el.shadowRoot!.querySelector('div')!.click();\n      expect(clickItemDispatched).to.be.false;\n    });\n  });\n  suite('hy-dropdown-menu', () => {\n    test('should show menu children on mouse enter and hide on mouse leave', async () => {\n      const el: HyDropdownMenu = await fixture(\n        html`<hy-dropdown-menu label=\"Test Label\"><div>Child Item</div></hy-dropdown-menu>`\n      );\n      const div = el.shadowRoot!.querySelector('div')!;\n      expect(el.showChildren).to.be.false;\n      expect(el.shadowRoot!.querySelector('slot')).to.have.style('display', 'none');\n      div.dispatchEvent(new Event('mouseenter'));\n      await el.updateComplete;\n      expect(el.showChildren).to.be.true;\n      expect(el.shadowRoot!.querySelector('slot')).to.have.style('display', 'block');\n      div.dispatchEvent(new Event('mouseleave'));\n      expect(el.showChildren).to.be.false;\n    });\n\n    test('should not show children if disabled', async () => {\n      const el: HyDropdownMenu = await fixture(html`<hy-dropdown-menu label=\"Test Label\" disabled></hy-dropdown-menu>`);\n      const div = el.shadowRoot!.querySelector('div')!;\n      expect(el.shadowRoot!.querySelector('slot')).to.have.style('display', 'none');\n      div.dispatchEvent(new Event('mouseenter'));\n      expect(el.showChildren).to.be.false;\n      expect(el.shadowRoot!.querySelector('slot')).to.not.have.style('display', 'block');\n    });\n\n    test('should stop event propagation on click', async () => {\n      const el: HyDropdownMenu = await fixture(html`<hy-dropdown-menu label=\"Test Label\"></hy-dropdown-menu>`);\n      const div = el.shadowRoot!.querySelector('div')!;\n      let eventStopped = true;\n      window.addEventListener('click', () => {\n        eventStopped = false;\n      });\n      div.click();\n      expect(eventStopped).to.be.true;\n    });\n  });\n});\n"]}