@nuralyui/menu 0.0.1

package/templates/hy-menu-link.js

@@ -0,0 +1,123 @@
+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 HyMenuLink_1;
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './menu-link.style.js';
+import { EMPTY_STRING } from '../menu.constants.js';
+import { ICON_POSITION } from './menu-link.contants.js';
+import '../../dropdown/hy-dropdown.component.js';
+let HyMenuLink = HyMenuLink_1 = class HyMenuLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = EMPTY_STRING;
+        this.disabled = false;
+        this.icon = EMPTY_STRING;
+        this.iconPosition = ICON_POSITION.LEFT;
+        this.selected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.optionPath = this.getAttribute('data-path').split('-').map((stringValue) => +stringValue);
+        const isTheFirstOption = this.optionPath.filter((path) => path != 0).length == 0;
+        if (isTheFirstOption) {
+            HyMenuLink_1.index = 0;
+        }
+        this.linkPosition = HyMenuLink_1.index;
+        HyMenuLink_1.index++;
+    }
+    firstUpdated() {
+        if (this.selected) {
+            this._clickLink();
+        }
+    }
+    _clickLink(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) != 'action-icon') {
+            this.dispatchEvent(new CustomEvent('selected-link', {
+                detail: { index: this.linkPosition, value: this.text },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    onActionClick(e) {
+        this.dispatchEvent(new CustomEvent('action-click', { detail: { value: e.detail.value, path: this.optionPath }, composed: true, bubbles: true }));
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <li tabindex="0" @click=${!this.disabled ? this._clickLink : nothing}>
+      <div class="icon-container" >
+        ${this.icon
+            ? html `${!this.text
+                ? html `
+                  <div id="icon-only">
+                    <hy-icon name="${this.icon}"></hy-icon>
+                  </div>
+                `
+                : html `<hy-icon name="${this.icon}"></hy-icon>`} `
+            : nothing}
+         
+        </div>
+        ${this.text
+            ? html `
+          <div class="action-text-container">
+              <div id="text-container">
+                <span>${this.text}</span>
+              </div>
+              <div class="icon-container" >
+              ${((_a = this.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
+              <hy-icon name=${this.status.icon} class="status-icon"></hy-icon>
+                ` : nothing}
+              ${((_b = this.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
+                <hy-dropdown .options=${this.menu.actions} .trigger=${'hover'} @click-item=${this.onActionClick}>
+                  <hy-icon name="${this.menu.icon}" id="action-icon" ></hy-icon>
+                </hy-dropdown>
+                  ` : nothing}
+              </div>
+                
+          </div>
+            `
+            : nothing}
+      </li>
+    `;
+    }
+};
+HyMenuLink.styles = styles;
+__decorate([
+    state()
+], HyMenuLink.prototype, "linkPosition", void 0);
+__decorate([
+    property({ reflect: true })
+], HyMenuLink.prototype, "text", void 0);
+__decorate([
+    property()
+], HyMenuLink.prototype, "link", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HyMenuLink.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], HyMenuLink.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], HyMenuLink.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HyMenuLink.prototype, "selected", void 0);
+__decorate([
+    property()
+], HyMenuLink.prototype, "menu", void 0);
+__decorate([
+    property()
+], HyMenuLink.prototype, "status", void 0);
+HyMenuLink = HyMenuLink_1 = __decorate([
+    customElement('hy-menu-link')
+], HyMenuLink);
+export { HyMenuLink };
+//# sourceMappingURL=hy-menu-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-menu-link.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-menu-link.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AAEtD,OAAO,yCAAyC,CAAA;AAGhD,IAAa,UAAU,kBAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAOE,SAAI,GAAG,YAAY,CAAC;QAMpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,YAAY,CAAC;QAGpB,iBAAY,GAAG,aAAa,CAAC,IAAI,CAAC;QAGlC,aAAQ,GAAG,KAAK,CAAC;IAoFnB,CAAC;IAzEU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAC,EAAE,CAAA,CAAC,WAAW,CAAC,CAAC;QAE5F,MAAM,gBAAgB,GAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,EAAC,EAAE,CAAA,IAAI,IAAE,CAAC,CAAC,CAAC,MAAM,IAAE,CAAC,CAAA;QACxE,IAAI,gBAAgB,EAAE;YACpB,YAAU,CAAC,KAAK,GAAG,CAAC,CAAC;SACtB;QACD,IAAI,CAAC,YAAY,GAAG,YAAU,CAAC,KAAK,CAAC;QACrC,YAAU,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEQ,YAAY;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,UAAU,CAAC,KAAY;;QACrB,IAAG,CAAA,MAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAsB,0CAAE,EAAE,KAAG,aAAa,EAAC;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAC;gBACpD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;SACH;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAC,EAAC,MAAM,EAAC,EAAC,KAAK,EAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAC,IAAI,EAAC,IAAI,CAAC,UAAU,EAAC,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,CAAC,CAAA;IACrI,CAAC;IAEQ,MAAM;;QACb,OAAO,IAAI,CAAA;gCACiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;;UAEhE,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,GAAG,CAAC,IAAI,CAAC,IAAI;gBACf,CAAC,CAAC,IAAI,CAAA;;qCAEiB,IAAI,CAAC,IAAI;;iBAE7B;gBACH,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,cAAc,GAAG;YACtD,CAAC,CAAC,OAAO;;;UAGT,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;;;wBAGQ,IAAI,CAAC,IAAI;;;gBAGjB,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAA,CAAC,CAAA,IAAI,CAAA;8BACR,IAAI,CAAC,MAAM,CAAC,IAAI;iBAC7B,CAAA,CAAC,CAAA,OAAO;gBACT,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAA,CAAC,CAAA,IAAI,CAAA;wCACC,IAAI,CAAC,IAAI,CAAC,OAAO,aAAa,OAAO,gBAAgB,IAAI,CAAC,aAAa;mCAC5E,IAAI,CAAC,IAAI,CAAC,IAAI;;mBAE9B,CAAA,CAAC,CAAA,OAAO;;;;aAId;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,iBAAM,GAAG,MAAO,CAAA;AArGhC;IADC,KAAK,EAAE;gDACsB;AAG9B;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCACN;AAGpB;IADC,QAAQ,EAAE;wCACG;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCACN;AAGpB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;gDACQ;AAGlC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CACxB;AAGjB;IADC,QAAQ,EAAE;wCAC0B;AAGrC;IADC,QAAQ,EAAE;0CACuB;AA5BvB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA0GtB;SA1GY,UAAU","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './menu-link.style.js';\nimport {EMPTY_STRING} from '../menu.constants.js';\nimport {ICON_POSITION} from './menu-link.contants.js';\nimport { IAction } from '../menu.types.js';\nimport '../../dropdown/hy-dropdown.component.js'\n\n@customElement('hy-menu-link')\nexport class HyMenuLink extends LitElement {\n  static index: number;\n\n  @state()\n  private linkPosition!: number;\n\n  @property({reflect: true})\n  text = EMPTY_STRING;\n\n  @property()\n  link!: string;\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({reflect: true})\n  icon = EMPTY_STRING;\n\n  @property({reflect: true})\n  iconPosition = ICON_POSITION.LEFT;\n\n  @property({type: Boolean, reflect: true})\n  selected = false;\n\n  @property()\n  menu!:{icon:string,actions:IAction[]}\n\n  @property()\n  status!:{icon:string,label:string}\n\n  optionPath!:number[];\n\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.optionPath=this.getAttribute('data-path')!.split('-').map((stringValue)=>+stringValue);\n\n    const isTheFirstOption=this.optionPath.filter((path)=>path!=0).length==0\n    if (isTheFirstOption) {\n      HyMenuLink.index = 0;\n    }\n    this.linkPosition = HyMenuLink.index;\n    HyMenuLink.index++;\n  }\n\n  override firstUpdated(): void {\n    if (this.selected) {\n      this._clickLink();\n    }\n  }\n\n  _clickLink(event?:Event) {\n    if((event?.target as HTMLElement)?.id !='action-icon'){\n      this.dispatchEvent(\n        new CustomEvent('selected-link', {\n          detail: {index: this.linkPosition, value: this.text},\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  onActionClick(e:CustomEvent){\n    this.dispatchEvent(new CustomEvent('action-click',{detail:{value:e.detail.value,path:this.optionPath},composed:true,bubbles:true}))\n  }\n\n  override render() {\n    return html`\n      <li tabindex=\"0\" @click=${!this.disabled ? this._clickLink : nothing}>\n      <div class=\"icon-container\" >\n        ${this.icon\n          ? html`${!this.text\n              ? html`\n                  <div id=\"icon-only\">\n                    <hy-icon name=\"${this.icon}\"></hy-icon>\n                  </div>\n                `\n              : html`<hy-icon name=\"${this.icon}\"></hy-icon>`} `\n          : nothing}\n         \n        </div>\n        ${this.text\n          ? html`\n          <div class=\"action-text-container\">\n              <div id=\"text-container\">\n                <span>${this.text}</span>\n              </div>\n              <div class=\"icon-container\" >\n              ${this.status?.icon?html`\n              <hy-icon name=${this.status.icon} class=\"status-icon\"></hy-icon>\n                `:nothing}\n              ${this.menu?.actions?html`\n                <hy-dropdown .options=${this.menu.actions} .trigger=${'hover'} @click-item=${this.onActionClick}>\n                  <hy-icon name=\"${this.menu.icon}\" id=\"action-icon\" ></hy-icon>\n                </hy-dropdown>\n                  `:nothing}\n              </div>\n                \n          </div>\n            `\n          : nothing}\n      </li>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { IAction } from '../menu.types.js';
+export declare class HySubMenu extends LitElement {
+    text: string;
+    icon: string;
+    disabled: boolean;
+    highlighted: boolean;
+    isOpen: boolean;
+    menu: {
+        icon: string;
+        actions: IAction[];
+    };
+    status: {
+        icon: string;
+        label: string;
+    };
+    optionPath: number[];
+    connectedCallback(): void;
+    _toggleMenu(event: Event): void;
+    toggleIcon(): void;
+    _handleSelectedChild(): void;
+    onActionClick(e: CustomEvent): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=hy-sub-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI9C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,qBACa,SAAU,SAAQ,UAAU;IAEvC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,SAAgB;IAGpB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,MAAM,UAAS;IAGf,IAAI,EAAE;QAAC,IAAI,EAAC,MAAM,CAAC;QAAA,OAAO,EAAC,OAAO,EAAE,CAAA;KAAC,CAAA;IAGrC,MAAM,EAAE;QAAC,IAAI,EAAC,MAAM,CAAC;QAAA,KAAK,EAAC,MAAM,CAAA;KAAC,CAAC;IAEnC,UAAU,EAAE,MAAM,EAAE,CAAC;IAEZ,iBAAiB,IAAI,IAAI;IAKlC,WAAW,CAAC,KAAK,EAAC,KAAK;IAcvB,UAAU;IAIV,oBAAoB;IAIpB,aAAa,CAAC,CAAC,EAAC,WAAW;IAIlB,MAAM;IAsBf,OAAgB,MAAM,0BAAU;CACjC"}

package/templates/hy-sub-menu.js

@@ -0,0 +1,96 @@
+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, state } from 'lit/decorators.js';
+import { styles } from './sub-menu.style.js';
+import { EMPTY_STRING } from '../menu.constants.js';
+let HySubMenu = class HySubMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = EMPTY_STRING;
+        this.disabled = false;
+        this.highlighted = false;
+        this.isOpen = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.optionPath = this.getAttribute('data-path').split('-').map((stringValue) => +stringValue);
+    }
+    _toggleMenu(event) {
+        var _a, _b;
+        if ((((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.className) != 'action-icon') && (((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) != 'toggle-icon')) {
+            if (!this.isOpen) {
+                this.isOpen = !this.isOpen;
+            }
+            this.dispatchEvent(new CustomEvent('select-menu', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.text, path: this.optionPath },
+            }));
+            this.highlighted = true;
+        }
+    }
+    toggleIcon() {
+        this.isOpen = !this.isOpen;
+    }
+    _handleSelectedChild() {
+        this.highlighted = true;
+    }
+    onActionClick(e) {
+        this.dispatchEvent(new CustomEvent('action-click', { detail: { value: e.detail.value, path: this.optionPath }, composed: true, bubbles: true }));
+    }
+    render() {
+        var _a, _b;
+        return html `
+    <ul tabindex="0">
+        <div @click=${!this.disabled ? this._toggleMenu : nothing}>
+          ${this.icon ? html `<hy-icon id="text-icon" name="${this.icon}"></hy-icon>` : nothing}
+          <span>${this.text}</span>
+          <div class="icons-container">
+          ${((_a = this.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
+              <hy-icon name=${this.status.icon} class="status-icon" ></hy-icon>
+            ` : nothing}
+          ${((_b = this.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
+            <hy-dropdown .options=${this.menu.actions} @click-item=${this.onActionClick} .trigger=${"hover"}>
+              <hy-icon name="${this.menu.icon}" class="action-icon"></hy-icon>
+            </hy-dropdown>
+            ` : nothing}
+            <hy-icon id="toggle-icon" name="${this.isOpen ? 'angle-up' : 'angle-down'}" @click=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>
+          </div>
+        </div>
+        <slot @select-menu=${this._handleSelectedChild} @selected-link=${this._handleSelectedChild} style="display:${this.isOpen ? nothing : 'none'};"></slot>
+      </ul>
+    `;
+    }
+};
+HySubMenu.styles = styles;
+__decorate([
+    property()
+], HySubMenu.prototype, "text", void 0);
+__decorate([
+    property({ reflect: true })
+], HySubMenu.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySubMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySubMenu.prototype, "highlighted", void 0);
+__decorate([
+    state()
+], HySubMenu.prototype, "isOpen", void 0);
+__decorate([
+    property()
+], HySubMenu.prototype, "menu", void 0);
+__decorate([
+    property()
+], HySubMenu.prototype, "status", void 0);
+HySubMenu = __decorate([
+    customElement('hy-sub-menu')
+], HySubMenu);
+export { HySubMenu };
+//# sourceMappingURL=hy-sub-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-sub-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/hy-sub-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './sub-menu.style.js';\nimport {EMPTY_STRING} from '../menu.constants.js';\nimport { IAction } from '../menu.types.js';\n\n@customElement('hy-sub-menu')\nexport class HySubMenu extends LitElement {\n  @property()\n  text!: string;\n\n  @property({reflect: true})\n  icon = EMPTY_STRING;\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  highlighted = false;\n\n  @state()\n  isOpen = false;\n\n  @property()\n  menu!:{icon:string,actions:IAction[]}\n\n  @property()\n  status!:{icon:string,label:string};\n  \n  optionPath!:number[];\n  \n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.optionPath=this.getAttribute('data-path')!.split('-').map((stringValue)=>+stringValue);\n  }\n\n  _toggleMenu(event:Event) {\n    if(((event?.target as HTMLElement)?.className !='action-icon') &&((event?.target as HTMLElement)?.id !='toggle-icon')){\n    if(!this.isOpen){\n      this.isOpen = !this.isOpen;\n    }\n    this.dispatchEvent(new CustomEvent('select-menu', {\n      bubbles: true,\n      composed: true,\n      detail: {value:this.text,path:this.optionPath},\n    }));\n    this.highlighted = true\n  }\n  }\n\n  toggleIcon(){\n    this.isOpen = !this.isOpen\n  }\n\n  _handleSelectedChild() {\n    this.highlighted = true;\n  }\n  \n  onActionClick(e:CustomEvent){\n    this.dispatchEvent(new CustomEvent('action-click',{detail:{value:e.detail.value,path:this.optionPath},composed:true,bubbles:true}))\n  }\n\n  override render() {\n    return html`\n    <ul tabindex=\"0\">\n        <div @click=${!this.disabled ? this._toggleMenu : nothing}>\n          ${this.icon ? html`<hy-icon id=\"text-icon\" name=\"${this.icon}\"></hy-icon>` : nothing}\n          <span>${this.text}</span>\n          <div class=\"icons-container\">\n          ${this.status?.icon?html`\n              <hy-icon name=${this.status.icon} class=\"status-icon\" ></hy-icon>\n            `:nothing}\n          ${this.menu?.actions?html`\n            <hy-dropdown .options=${this.menu.actions} @click-item=${this.onActionClick} .trigger=${\"hover\"}>\n              <hy-icon name=\"${this.menu.icon}\" class=\"action-icon\"></hy-icon>\n            </hy-dropdown>\n            `:nothing}\n            <hy-icon id=\"toggle-icon\" name=\"${this.isOpen ? 'angle-up' : 'angle-down'}\" @click=${!this.disabled ? this.toggleIcon : nothing}></hy-icon>\n          </div>\n        </div>\n        <slot @select-menu=${this._handleSelectedChild} @selected-link=${this._handleSelectedChild} style=\"display:${this.isOpen ? nothing : 'none'};\"></slot>\n      </ul>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

package/templates/menu-link.contants.d.ts

@@ -0,0 +1,5 @@
+export declare enum ICON_POSITION {
+    LEFT = "left",
+    RIGHT = "right"
+}
+//# sourceMappingURL=menu-link.contants.d.ts.map

package/templates/menu-link.contants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link.contants.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.contants.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/templates/menu-link.contants.js

@@ -0,0 +1,6 @@
+export var ICON_POSITION;
+(function (ICON_POSITION) {
+    ICON_POSITION["LEFT"] = "left";
+    ICON_POSITION["RIGHT"] = "right";
+})(ICON_POSITION || (ICON_POSITION = {}));
+//# sourceMappingURL=menu-link.contants.js.map

package/templates/menu-link.contants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link.contants.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.contants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,8BAAa,CAAA;IACb,gCAAe,CAAA;AACjB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB","sourcesContent":["export enum ICON_POSITION {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n"]}

package/templates/menu-link.style.d.ts

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

package/templates/menu-link.style.d.ts.map

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

package/templates/menu-link.style.js

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+const menuLinkStyle = css `
+  :host([disabled]) li {
+    color: var(--hybrid-menu-disabled-link-color);
+    cursor: not-allowed;
+  }
+
+  :host(:not([disabled]):not([selected])) li {
+    background-color: var(--hybrid-menu-link-background-color);
+  }
+
+  :host(:not([disabled]):not([selected])) li:hover {
+    background-color: var(--hybrid-menu-hover-link-background-color);
+    color: var(--hybrid-menu-hover-link-color);
+  }
+
+  :host([selected]) li:not(:focus) {
+    background-color: var(--hybrid-menu-selected-link-background-color);
+    color: var(--hybrid-menu-selected-color);
+    border-left: var(--hybrid-menu-selected-link-border);
+  }
+
+  :host(:not([disabled])) li {
+    color: var(--hybrid-menu-link-color);
+  }
+
+  :host([text='']) li {
+    width: var(--hybrid-menu-link-icon-only-width);
+  }
+  hy-icon {
+    --hybrid-icon-color: var(--hybrid-menu-link-icon-color);
+  }
+   .icon-container{
+    display:flex;
+    align-items:center;
+    position:relative;
+   }
+   
+   .status-icon{
+    padding-right:0px;
+   }
+
+  li {
+    list-style: none;
+    display: flex;
+    cursor: pointer;
+    padding-bottom: var(--hybrid-menu-link-padding-y);
+    padding-top: var(--hybrid-menu-link-padding-y);
+  }
+  .action-text-container{
+    width:100%;
+    display:flex;
+    justify-content:space-between;
+  }
+
+  :host([iconPosition='right']) li {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  :host(:not([disabled])) li:focus {
+    border: var(--hybrid-menu-focus-border);
+    color: var(--hybrid-menu-focus-color);
+  }
+
+  :host(:not([disabled]):not([selected])) li:active {
+    color: var(--hybrid-menu-active-color);
+    background-color: var(--hybrid-menu-active-background-color);
+  }
+
+  :host([icon='']) #text-container {
+    padding-left: var(--hybrid-menu-link-empty-icon-padding-left);
+  }
+  :host([icon=''][iconPosition='right']) #text-container {
+    margin-right: auto;
+  }
+
+  :host([iconPosition='right']) #text-container,
+  :host([iconPosition='right']) #icon-only {
+    padding-left: var(--hybrid-menu-link-icon-right-padding-left);
+  }
+
+  #link-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  hy-icon {
+    display: flex;
+    align-items: center;
+    padding-right: var(--hybrid-menu-link-icon-padding-right);
+    padding-left: var(--hybrid-menu-link-icon-padding-left);
+  }
+`;
+export const styles = menuLinkStyle;
+//# sourceMappingURL=menu-link.style.js.map

package/templates/menu-link.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/menu-link.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import {css} from 'lit';\nconst menuLinkStyle = css`\n  :host([disabled]) li {\n    color: var(--hybrid-menu-disabled-link-color);\n    cursor: not-allowed;\n  }\n\n  :host(:not([disabled]):not([selected])) li {\n    background-color: var(--hybrid-menu-link-background-color);\n  }\n\n  :host(:not([disabled]):not([selected])) li:hover {\n    background-color: var(--hybrid-menu-hover-link-background-color);\n    color: var(--hybrid-menu-hover-link-color);\n  }\n\n  :host([selected]) li:not(:focus) {\n    background-color: var(--hybrid-menu-selected-link-background-color);\n    color: var(--hybrid-menu-selected-color);\n    border-left: var(--hybrid-menu-selected-link-border);\n  }\n\n  :host(:not([disabled])) li {\n    color: var(--hybrid-menu-link-color);\n  }\n\n  :host([text='']) li {\n    width: var(--hybrid-menu-link-icon-only-width);\n  }\n  hy-icon {\n    --hybrid-icon-color: var(--hybrid-menu-link-icon-color);\n  }\n   .icon-container{\n    display:flex;\n    align-items:center;\n    position:relative;\n   }\n   \n   .status-icon{\n    padding-right:0px;\n   }\n\n  li {\n    list-style: none;\n    display: flex;\n    cursor: pointer;\n    padding-bottom: var(--hybrid-menu-link-padding-y);\n    padding-top: var(--hybrid-menu-link-padding-y);\n  }\n  .action-text-container{\n    width:100%;\n    display:flex;\n    justify-content:space-between;\n  }\n\n  :host([iconPosition='right']) li {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  }\n\n  :host(:not([disabled])) li:focus {\n    border: var(--hybrid-menu-focus-border);\n    color: var(--hybrid-menu-focus-color);\n  }\n\n  :host(:not([disabled]):not([selected])) li:active {\n    color: var(--hybrid-menu-active-color);\n    background-color: var(--hybrid-menu-active-background-color);\n  }\n\n  :host([icon='']) #text-container {\n    padding-left: var(--hybrid-menu-link-empty-icon-padding-left);\n  }\n  :host([icon=''][iconPosition='right']) #text-container {\n    margin-right: auto;\n  }\n\n  :host([iconPosition='right']) #text-container,\n  :host([iconPosition='right']) #icon-only {\n    padding-left: var(--hybrid-menu-link-icon-right-padding-left);\n  }\n\n  #link-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  hy-icon {\n    display: flex;\n    align-items: center;\n    padding-right: var(--hybrid-menu-link-icon-padding-right);\n    padding-left: var(--hybrid-menu-link-icon-padding-left);\n  }\n`;\nexport const styles = menuLinkStyle;\n"]}

package/templates/sub-menu.style.d.ts

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

package/templates/sub-menu.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAgFA,eAAO,MAAM,MAAM,yBAAe,CAAC"}

package/templates/sub-menu.style.js

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+const subMenuStyle = css `
+  :host([disabled]) ul > div {
+    color: var(--hybrid-sub-menu-disabled-color);
+    cursor: not-allowed;
+  }
+  :host(:not([disabled])[highlighted]) ul > div {
+    background: var(--hybrid-sub-menu-highlighted-background-color);
+    color: var(--hybrid-sub-menu-highlighted-color);
+  }
+  :host(:not([disabled])) {
+    color: var(--hybrid-sub-menu-color);
+  }
+
+  :host([icon]) span {
+    margin-right: auto;
+    padding-left: var(--hybrid-sub-menu-padding-left-text);
+  }
+
+  .icons-container{
+    display:flex;
+    align-items:center;
+    position:relative;
+  }
+  .action-icon{
+    margin-right:1px;
+    --hybrid-icon-color: var(--hybrid-sub-menu-action-icon-color);
+  }
+  .status-icon{
+    margin-right:10px;
+    --hybrid-icon-color: var(--hybrid-sub-menu-status-icon-color);
+  }
+
+  #text-icon {
+    --hybrid-icon-color: var(--hybrid-sub-menu-text-icon-color);
+  }
+  #toggle-icon {
+    --hybrid-icon-color: var(--hybrid-sub-menu-toggle-icon-color);
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--hybrid-sub-menu-margin-y);
+    margin-top: var(--hybrid-sub-menu-margin-y);
+    padding-left: 0px;
+  }
+
+  :host([icon]) ::slotted(*) {
+    padding-left: var(--hybrid-sub-menu-children-padding-left);
+  }
+
+  :host([icon='']) span {
+    padding-left: var(--hybrid-sub-menu-empty-icon-padding-left-text);
+  }
+
+  ul > div {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    padding-top: var(--hybrid-sub-menu-padding-y);
+    padding-bottom: var(--hybrid-sub-menu-padding-y);
+    padding-left: var(--hybrid-sub-menu-padding-left);
+  }
+
+  :host(:not([disabled])) ul > div:focus {
+    border: var(--hybrid-sub-menu-focus-border);
+    color: var(--hybrid-sub-menu-focus-color);
+  }
+
+  :host(:not([disabled])) ul > div:hover {
+    background-color: var(--hybrid-sub-menu-hover-background-color);
+    color: var(--hybrid-sub-menu-hover-color);
+  }
+  :host(:not([disabled])) ul > div:active {
+    background-color: var(--hybrid-sub-menu-active-background-color);
+    color: var(--hybrid-sub-menu-active-color);
+  }
+`;
+export const styles = subMenuStyle;
+//# sourceMappingURL=sub-menu.style.js.map

package/templates/sub-menu.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu.style.js","sourceRoot":"","sources":["../../../../src/components/menu/templates/sub-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EvB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst subMenuStyle = css`\n  :host([disabled]) ul > div {\n    color: var(--hybrid-sub-menu-disabled-color);\n    cursor: not-allowed;\n  }\n  :host(:not([disabled])[highlighted]) ul > div {\n    background: var(--hybrid-sub-menu-highlighted-background-color);\n    color: var(--hybrid-sub-menu-highlighted-color);\n  }\n  :host(:not([disabled])) {\n    color: var(--hybrid-sub-menu-color);\n  }\n\n  :host([icon]) span {\n    margin-right: auto;\n    padding-left: var(--hybrid-sub-menu-padding-left-text);\n  }\n\n  .icons-container{\n    display:flex;\n    align-items:center;\n    position:relative;\n  }\n  .action-icon{\n    margin-right:1px;\n    --hybrid-icon-color: var(--hybrid-sub-menu-action-icon-color);\n  }\n  .status-icon{\n    margin-right:10px;\n    --hybrid-icon-color: var(--hybrid-sub-menu-status-icon-color);\n  }\n\n  #text-icon {\n    --hybrid-icon-color: var(--hybrid-sub-menu-text-icon-color);\n  }\n  #toggle-icon {\n    --hybrid-icon-color: var(--hybrid-sub-menu-toggle-icon-color);\n  }\n\n  ul {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--hybrid-sub-menu-margin-y);\n    margin-top: var(--hybrid-sub-menu-margin-y);\n    padding-left: 0px;\n  }\n\n  :host([icon]) ::slotted(*) {\n    padding-left: var(--hybrid-sub-menu-children-padding-left);\n  }\n\n  :host([icon='']) span {\n    padding-left: var(--hybrid-sub-menu-empty-icon-padding-left-text);\n  }\n\n  ul > div {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    padding-top: var(--hybrid-sub-menu-padding-y);\n    padding-bottom: var(--hybrid-sub-menu-padding-y);\n    padding-left: var(--hybrid-sub-menu-padding-left);\n  }\n\n  :host(:not([disabled])) ul > div:focus {\n    border: var(--hybrid-sub-menu-focus-border);\n    color: var(--hybrid-sub-menu-focus-color);\n  }\n\n  :host(:not([disabled])) ul > div:hover {\n    background-color: var(--hybrid-sub-menu-hover-background-color);\n    color: var(--hybrid-sub-menu-hover-color);\n  }\n  :host(:not([disabled])) ul > div:active {\n    background-color: var(--hybrid-sub-menu-active-background-color);\n    color: var(--hybrid-sub-menu-active-color);\n  }\n`;\nexport const styles = subMenuStyle;\n"]}

package/test/menu-link_test.d.ts

@@ -0,0 +1,2 @@
+import '../templates/hy-menu-link';
+//# sourceMappingURL=menu-link_test.d.ts.map

package/test/menu-link_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link_test.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/test/menu-link_test.ts"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/test/menu-link_test.js

@@ -0,0 +1,85 @@
+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 '../templates/hy-menu-link';
+import { ICON_POSITION } from '../templates/menu-link.contants';
+suite('HyMenuLinkComponent', () => {
+    test('init menu link', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d;
+        const text = 'link text';
+        const link = 'url';
+        const icon = 'pencil';
+        const el = yield fixture(html `<hy-menu-link text="${text}" link=${link} icon=${icon}></hy-menu-link>`);
+        const templateIcon = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('hy-icon');
+        const templateLink = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a');
+        const templateText = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('span');
+        const templateLinkIcon = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#link-icon');
+        expect(el.text).to.equal(text);
+        expect(el.link).to.equal(link);
+        expect(el.icon).to.equal(icon);
+        expect(el.iconPosition).to.equal(ICON_POSITION.LEFT);
+        expect(el.disabled).to.be.false;
+        expect(el.selected).to.be.false;
+        expect(templateIcon).to.have.attribute('name', icon);
+        expect(templateLink).to.have.attribute('href', link);
+        expect(templateText === null || templateText === void 0 ? void 0 : templateText.textContent).to.equal(text);
+        expect(templateLinkIcon).to.not.exist;
+    }));
+    test('icon only', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g;
+        const link = 'url';
+        const icon = 'pencil';
+        const el = yield fixture(html `<hy-menu-link link=${link} icon=${icon}></hy-menu-link>`);
+        const templateText = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('span');
+        const templateLinkIcon = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('#link-icon');
+        const anchors = (_g = el.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelectorAll('a');
+        expect(templateText).not.exist;
+        expect(templateLinkIcon).to.exist;
+        expect(templateLinkIcon).to.have.attribute('href', link);
+        expect(templateLinkIcon === null || templateLinkIcon === void 0 ? void 0 : templateLinkIcon.children[0]).to.have.attribute('name', icon);
+        expect(anchors).to.have.length(1);
+    }));
+    test('text only', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _h, _j;
+        const link = 'url';
+        const text = 'this is a text';
+        const el = yield fixture(html `<hy-menu-link link=${link} text=${text}></hy-menu-link>`);
+        const templateText = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('span');
+        const templateLinkIcon = (_j = el.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('#link-icon');
+        const templateAnchor = el.shadowRoot.querySelectorAll('a');
+        expect(templateText).exist;
+        expect(templateLinkIcon).not.to.exist;
+        expect(templateAnchor).to.exist;
+        expect(templateAnchor).to.have.length(1);
+        expect(templateAnchor[0]).to.have.attribute('href', link);
+        expect(templateAnchor[0].children[0].textContent).to.equal(text);
+    }));
+    test('enabled link', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-menu-link> </hy-menu-link>`);
+        const container = el.shadowRoot.querySelector('li');
+        let selectedLinkDispatch = false;
+        el.addEventListener('selected-link', () => {
+            selectedLinkDispatch = true;
+        });
+        container.click();
+        expect(selectedLinkDispatch).to.be.true;
+    }));
+    test('disabled link', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<hy-menu-link disabled=${true}> </hy-menu-link>`);
+        const container = el.shadowRoot.querySelector('li');
+        let selectedLinkDispatch = false;
+        el.addEventListener('selected-link', () => {
+            selectedLinkDispatch = true;
+        });
+        container.click();
+        expect(selectedLinkDispatch).to.be.false;
+    }));
+});
+//# sourceMappingURL=menu-link_test.js.map

package/test/menu-link_test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link_test.js","sourceRoot":"","sources":["../../../../src/components/menu/test/menu-link_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport {HyMenuLink} from '../templates/hy-menu-link';\nimport '../templates/hy-menu-link';\nimport {ICON_POSITION} from '../templates/menu-link.contants';\n\nsuite('HyMenuLinkComponent', () => {\n  test('init menu link', async () => {\n    const text = 'link text';\n    const link = 'url';\n    const icon = 'pencil';\n    const el: HyMenuLink = await fixture(html`<hy-menu-link text=\"${text}\" link=${link} icon=${icon}></hy-menu-link>`);\n    const templateIcon = el.shadowRoot?.querySelector('hy-icon');\n    const templateLink = el.shadowRoot?.querySelector('a');\n    const templateText = el.shadowRoot?.querySelector('span');\n    const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n    expect(el.text).to.equal(text);\n    expect(el.link).to.equal(link);\n    expect(el.icon).to.equal(icon);\n    expect(el.iconPosition).to.equal(ICON_POSITION.LEFT);\n    expect(el.disabled).to.be.false;\n    expect(el.selected).to.be.false;\n    expect(templateIcon).to.have.attribute('name', icon);\n    expect(templateLink).to.have.attribute('href', link);\n    expect(templateText?.textContent).to.equal(text);\n    expect(templateLinkIcon).to.not.exist;\n  });\n\n  test('icon only', async () => {\n    const link = 'url';\n    const icon = 'pencil';\n    const el: HyMenuLink = await fixture(html`<hy-menu-link link=${link} icon=${icon}></hy-menu-link>`);\n    const templateText = el.shadowRoot?.querySelector('span');\n    const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n    const anchors = el.shadowRoot?.querySelectorAll('a');\n    expect(templateText).not.exist;\n    expect(templateLinkIcon).to.exist;\n    expect(templateLinkIcon).to.have.attribute('href', link);\n    expect(templateLinkIcon?.children[0]).to.have.attribute('name', icon);\n    expect(anchors).to.have.length(1);\n  });\n  test('text only', async () => {\n    const link = 'url';\n    const text = 'this is a text';\n    const el: HyMenuLink = await fixture(html`<hy-menu-link link=${link} text=${text}></hy-menu-link>`);\n    const templateText = el.shadowRoot?.querySelector('span');\n    const templateLinkIcon = el.shadowRoot?.querySelector('#link-icon');\n    const templateAnchor = el.shadowRoot!.querySelectorAll('a')!;\n    expect(templateText).exist;\n    expect(templateLinkIcon).not.to.exist;\n    expect(templateAnchor).to.exist;\n    expect(templateAnchor).to.have.length(1);\n    expect(templateAnchor[0]).to.have.attribute('href', link);\n    expect(templateAnchor[0].children[0].textContent).to.equal(text);\n  });\n\n  test('enabled link', async () => {\n    const el: HyMenuLink = await fixture(html`<hy-menu-link> </hy-menu-link>`);\n    const container = el.shadowRoot!.querySelector('li')!;\n    let selectedLinkDispatch = false;\n    el.addEventListener('selected-link', () => {\n      selectedLinkDispatch = true;\n    });\n    container.click();\n    expect(selectedLinkDispatch).to.be.true;\n  });\n  test('disabled link', async () => {\n    const el: HyMenuLink = await fixture(html`<hy-menu-link disabled=${true}> </hy-menu-link>`);\n    const container = el.shadowRoot!.querySelector('li')!;\n    let selectedLinkDispatch = false;\n    el.addEventListener('selected-link', () => {\n      selectedLinkDispatch = true;\n    });\n    container.click();\n    expect(selectedLinkDispatch).to.be.false;\n  });\n});\n"]}

package/test/menu_test.d.ts

@@ -0,0 +1,2 @@
+import '../menu.component';
+//# sourceMappingURL=menu_test.d.ts.map

package/test/menu_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu_test.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/test/menu_test.ts"],"names":[],"mappings":"AACA,OAAO,mBAAmB,CAAC"}