@nuralyui/dropdown 0.0.9 → 0.0.15

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

@@ -1,34 +0,0 @@
-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);
-        font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */
-
-    }
-    hy-icon {
-        display: flex;
-    }
-    :host(:not([disabled])) div:hover {
-        background-color: var(--hybrid-dropdown-hovered-background-color);
-        margin-left: -1px;
-    }
-    :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

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownItemStyle = css`\n    div {\n        padding: var(--hybrid-dropdown-padding);\n        cursor: pointer;\n        background-color: var(--hybrid-dropdown-background-color);\n        display: flex;\n        align-items: center;\n        color: var(--hybrid-dropdown-text-color);\n        font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */\n\n    }\n    hy-icon {\n        display: flex;\n    }\n    :host(:not([disabled])) div:hover {\n        background-color: var(--hybrid-dropdown-hovered-background-color);\n        margin-left: -1px;\n    }\n    :host([disabled]) div {\n        background-color: var(--hybrid-dropdown-disabled-background-color);\n        cursor: not-allowed;\n        color: var(--hybrid-dropdown-disabled-text-color);\n    }\n\n    :host(:not([icon])) .option-label {\n        padding-left: var(--hybrid-dropdown-only-text-padding-left);\n    }\n    :host([icon]) .option-label {\n        padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n    }\n`;\n\nexport const styles = [dropdownItemStyle];"]}

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

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,UAAU,EAAG,WAAW,CAAC;IAEzB,QAAQ,UAAS;IAEjB,IAAI,EAAG,MAAM,CAAC;IAEd,KAAK,EAAG,MAAM,CAAC;IAEf,SAAS,EAAG,iBAAiB,CAAC;IAE9B,YAAY,UAAS;IAEZ,YAAY,IAAI,IAAI;IAK7B,gBAAgB,aAEd;IACF,gBAAgB,aAEd;IACF,WAAW,CAAC,cAAc,EAAE,KAAK;IAIxB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAWhB"}

package/templates/hy-dropdown-menu.js

@@ -1,70 +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, 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 @mousedown=${this.onClickMenu}>
-      ${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}
-      <hy-label class="menu-label"> ${this.label}</hy-label>
-      <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

@@ -1 +0,0 @@
-{"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,WAAW;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;sCACnC,IAAI,CAAC,KAAK;;gBAEhC,IAAI,CAAC,SAAS,yCAA2B,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;;;6BAG3D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WACtD,CAAC;IACV,CAAC;CACF,CAAA;AA7CiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,KAAK,CAAC;kDACY;AAEzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,KAAK,EAAE;oDACa;AAbV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;SA9CY,cAAc","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown-menu.style.js';\nimport { DropDownDirection } from '../dropdown.types';\n@customElement('hy-dropdown-menu')\nexport class HyDropdownMenu extends LitElement {\n  static override styles = styles;\n  @query('div')\n  menuOption!: HTMLElement;\n  @property({reflect: true, type: Boolean})\n  disabled = false;\n  @property({reflect: true, type: String})\n  icon!: string;\n  @property()\n  label!: string;\n  @property({reflect: true})\n  direction!: DropDownDirection;\n  @state()\n  showChildren = false;\n\n  override firstUpdated(): void {\n    this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);\n    this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);\n  }\n\n  onMouseEnterMenu = () => {\n    if (!this.disabled) this.showChildren = true;\n  };\n  onMouseLeaveMenu = () => {\n    if (!this.disabled) this.showChildren = false;\n  };\n  onClickMenu(menuClickEvent: Event) {\n    menuClickEvent.stopPropagation();\n  }\n\n  override disconnectedCallback(): void {\n    this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);\n    this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);\n  }\n\n  override render() {\n    return html`<div @mousedown=${this.onClickMenu}>\n      ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n      <hy-label class=\"menu-label\"> ${this.label}</hy-label>\n      <hy-icon\n        name=\"${this.direction == DropDownDirection.Right ? 'caret-right' : 'caret-left'}\"\n        id=\"caret-icon\"\n      ></hy-icon>\n      <slot style=\"display:${this.showChildren ? 'block' : 'none'}\"></slot>\n    </div>`;\n  }\n}\n"]}

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

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

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

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

@@ -1,49 +0,0 @@
-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

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

@@ -1,4 +0,0 @@
-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

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

@@ -1,132 +0,0 @@
-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

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