@eui/eds 23.0.0-alpha.6 → 23.0.0-alpha.7

package/fesm2022/eui-eds-eds-language-selector.mjs

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, HostListener, Component } from '@angular/core';
+import { UpperCasePipe } from '@angular/common';
+import * as i1 from '@eui/eds/eds-icon';
+import { EDS_ICON } from '@eui/eds/eds-icon';
+
+class EdsLanguageSelector {
+    constructor() {
+        this.el = inject(ElementRef);
+        /** Available languages. */
+        this.languages = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+        /** Currently selected language code. */
+        this.selectedLanguage = input('en', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : /* istanbul ignore next */ []));
+        /** Aria label for accessibility. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Emits the selected language code when user picks a language. */
+        this.languageChange = output();
+        this.isOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.currentLanguage = computed(() => {
+            const langs = this.languages();
+            const selected = this.selectedLanguage();
+            return langs.find(l => l.code === selected) ?? langs[0] ?? { code: 'en', label: 'EN' };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentLanguage" }] : /* istanbul ignore next */ []));
+        this.computedAriaLabel = computed(() => {
+            if (this.ariaLabel())
+                return this.ariaLabel();
+            return `Change Language - Current: ${this.currentLanguage().label}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    }
+    onDocumentClick(event) {
+        if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    toggle() {
+        this.isOpen.update(v => !v);
+    }
+    selectLanguage(lang) {
+        this.isOpen.set(false);
+        this.languageChange.emit(lang.code);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsLanguageSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsLanguageSelector, isStandalone: true, selector: "eds-language-selector", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selectedLanguage: { classPropertyName: "selectedLanguage", publicName: "selectedLanguage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<button\n  class=\"language-toggle\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  (click)=\"toggle()\">\n  <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" edsSizeS />\n</button>\n\n@if (isOpen()) {\n  <ul class=\"language-dropdown\" role=\"listbox\">\n    @for (lang of languages(); track lang.code) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        role=\"option\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semi-bold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semi-bold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;right:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease}.eui-21 :host .language-option:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semi-bold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semi-bold);min-width:2rem}.eui-21 :host .option-label{flex:1}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsLanguageSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-language-selector', imports: [UpperCasePipe, ...EDS_ICON], template: "<button\n  class=\"language-toggle\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  (click)=\"toggle()\">\n  <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" edsSizeS />\n</button>\n\n@if (isOpen()) {\n  <ul class=\"language-dropdown\" role=\"listbox\">\n    @for (lang of languages(); track lang.code) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        role=\"option\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semi-bold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semi-bold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;right:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease}.eui-21 :host .language-option:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semi-bold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semi-bold);min-width:2rem}.eui-21 :host .option-label{flex:1}\n"] }]
+        }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], selectedLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLanguage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/** Convenience array for importing eds-language-selector. */
+const EDS_LANGUAGE_SELECTOR = [EdsLanguageSelector];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_LANGUAGE_SELECTOR, EdsLanguageSelector };
+//# sourceMappingURL=eui-eds-eds-language-selector.mjs.map

package/fesm2022/eui-eds-eds-language-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-language-selector.mjs","sources":["../../eds-language-selector/eds-language-selector.ts","../../eds-language-selector/eds-language-selector.html","../../eds-language-selector/index.ts","../../eds-language-selector/eui-eds-eds-language-selector.ts"],"sourcesContent":["import { Component, input, output, signal, computed, ElementRef, inject, HostListener } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\nexport interface EdsLanguage {\n  /** Language code (e.g. 'en', 'fr', 'de'). */\n  code: string;\n\n  /** Display label (e.g. 'English', 'Français'). */\n  label: string;\n}\n\n@Component({\n  selector: 'eds-language-selector',\n  imports: [UpperCasePipe, ...EDS_ICON],\n  templateUrl: './eds-language-selector.html',\n  styleUrl: './eds-language-selector.scss',\n})\nexport class EdsLanguageSelector {\n  private el = inject(ElementRef);\n\n  /** Available languages. */\n  languages = input<EdsLanguage[]>([]);\n\n  /** Currently selected language code. */\n  selectedLanguage = input<string>('en');\n\n  /** Aria label for accessibility. */\n  ariaLabel = input<string>('');\n\n  /** Emits the selected language code when user picks a language. */\n  languageChange = output<string>();\n\n  isOpen = signal(false);\n\n  currentLanguage = computed(() => {\n    const langs = this.languages();\n    const selected = this.selectedLanguage();\n    return langs.find(l => l.code === selected) ?? langs[0] ?? { code: 'en', label: 'EN' };\n  });\n\n  computedAriaLabel = computed(() => {\n    if (this.ariaLabel()) return this.ariaLabel();\n    return `Change Language - Current: ${this.currentLanguage().label}`;\n  });\n\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {\n      this.isOpen.set(false);\n    }\n  }\n\n  toggle(): void {\n    this.isOpen.update(v => !v);\n  }\n\n  selectLanguage(lang: EdsLanguage): void {\n    this.isOpen.set(false);\n    this.languageChange.emit(lang.code);\n  }\n}\n","<button\n  class=\"language-toggle\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  (click)=\"toggle()\">\n  <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" edsSizeS />\n</button>\n\n@if (isOpen()) {\n  <ul class=\"language-dropdown\" role=\"listbox\">\n    @for (lang of languages(); track lang.code) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        role=\"option\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n","import { EdsLanguageSelector } from './eds-language-selector';\n\nexport { EdsLanguageSelector };\nexport { EdsLanguage } from './eds-language-selector';\n\n/** Convenience array for importing eds-language-selector. */\nexport const EDS_LANGUAGE_SELECTOR = [EdsLanguageSelector] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-eds-eds-menu.mjs

@@ -0,0 +1,90 @@
+import * as i0 from '@angular/core';
+import { input, output, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2 from '@eui/eds/eds-icon';
+import { EDS_ICON } from '@eui/eds/eds-icon';
+
+class EdsMenuItemComponent {
+    constructor() {
+        /** The menu item data. */
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        /** Whether to show icon. */
+        this.hasIcon = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+        /** Whether the menu is in collapsed/icon-only mode. */
+        this.isCollapsed = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        /** Whether to show label under icon in collapsed mode. */
+        this.hasCollapsedLabel = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCollapsedLabel" }] : /* istanbul ignore next */ []));
+        /** Emits when this item is clicked. */
+        this.itemClick = output();
+        /** Emits when a child item is clicked. */
+        this.childClick = output();
+    }
+    onClick() {
+        const i = this.item();
+        if (!i.isDisabled && !i.children?.length) {
+            if (i.command) {
+                i.command();
+            }
+            this.itemClick.emit(i);
+        }
+    }
+    onChildClick(child) {
+        if (child.command) {
+            child.command();
+        }
+        this.childClick.emit(child);
+    }
+    toggleExpand() {
+        const i = this.item();
+        i.isExpanded = !i.isExpanded;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsMenuItemComponent, isStandalone: true, selector: "eds-menu-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, hasIcon: { classPropertyName: "hasIcon", publicName: "hasIcon", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, hasCollapsedLabel: { classPropertyName: "hasCollapsedLabel", publicName: "hasCollapsedLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", childClick: "childClick" }, ngImport: i0, template: "@if (isCollapsed()) {\n  <!-- Collapsed: parent with children -->\n  @if (item().children && item().children!.length) {\n    <button\n      class=\"menu-link icon-only\"\n      [class.with-label]=\"hasCollapsedLabel()\"\n      [class.disabled]=\"item().isDisabled\"\n      [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n      (click)=\"toggleExpand()\">\n      @if (item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n      } @else {\n        <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n      }\n      @if (hasCollapsedLabel()) {\n        <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n      }\n    </button>\n\n    @if (item().isExpanded) {\n      <div class=\"collapsed-children\">\n        @for (child of item().children!; track child.label) {\n          @if (child.url && !child.command) {\n            <a\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [routerLink]=\"child.url\"\n              routerLinkActive=\"active\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </a>\n          } @else {\n            <button\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  } @else {\n    <!-- Collapsed: leaf item -->\n    @if (item().url && !item().command) {\n      <a\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [routerLink]=\"item().url\"\n        routerLinkActive=\"active\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </a>\n    } @else {\n      <button\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </button>\n    }\n  }\n} @else if (item().children && item().children!.length) {\n  <!-- Expanded: Parent item with children -->\n  <button\n    class=\"menu-link parent\"\n    [class.expanded]=\"item().isExpanded\"\n    [class.disabled]=\"item().isDisabled\"\n    (click)=\"toggleExpand()\"\n    [attr.aria-expanded]=\"item().isExpanded\">\n    @if (hasIcon() && item().icon) {\n      <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n    }\n    <span class=\"menu-label\">{{ item().label }}</span>\n    <eds-icon class=\"menu-chevron\" [icon]=\"item().isExpanded ? 'caret-down' : 'caret-right'\" edsSizeS />\n  </button>\n\n  @if (item().isExpanded) {\n    <ul class=\"eds-submenu\">\n      @for (child of item().children!; track child.label) {\n        <li>\n          <eds-menu-item\n            [item]=\"child\"\n            [hasIcon]=\"hasIcon()\"\n            [isCollapsed]=\"false\"\n            [hasCollapsedLabel]=\"false\"\n            (itemClick)=\"onChildClick($event)\"\n            (childClick)=\"onChildClick($event)\">\n          </eds-menu-item>\n        </li>\n      }\n    </ul>\n  }\n} @else {\n  <!-- Expanded: Leaf item -->\n  @if (item().url && !item().command) {\n    <a\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      [routerLink]=\"item().url\"\n      routerLinkActive=\"active\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </a>\n  } @else {\n    <button\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </button>\n  }\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-submenu{list-style:none;margin:0;padding:0;padding-left:var(--eds-sp-m);overflow:hidden;animation:expandDown .25s ease forwards}.eui-21 :host .menu-link{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-l);font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtle);text-decoration:none;border:none;background:none;width:100%;text-align:left;cursor:pointer;border-left:3px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}.eui-21 :host .menu-link.icon-only{justify-content:center;align-items:center;padding:var(--eds-sp-xs) 0;border-left:none;border-radius:var(--eds-br-s);margin:var(--eds-sp-3xs) 0;width:100%}.eui-21 :host .menu-link.icon-only.with-label{flex-direction:column;gap:var(--eds-sp-4xs)}.eui-21 :host .menu-link:hover{background:var(--eds-c-surface-elevation-sunken);color:var(--eds-c-foreground-primary)}.eui-21 :host .menu-link.active{background:var(--eds-c-surface-primary-subtle);color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semi-bold);border-left-color:var(--eds-c-border-primary)}.eui-21 :host .menu-link.parent{font-weight:var(--eds-f-w-medium)}.eui-21 :host .menu-link.disabled{opacity:var(--eds-op-40);pointer-events:none}.eui-21 :host .menu-icon{flex-shrink:0;width:var(--eds-is-xs)}.icon-only .eui-21 :host .menu-icon{width:auto}.eui-21 :host .menu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .menu-initial{font:var(--eds-f-label-m-semi-bold);width:var(--eds-is-xs);text-align:center}.eui-21 :host .menu-collapsed-label{font:var(--eds-f-microcopy-2xs);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}.eui-21 :host .collapsed-children{display:flex;flex-direction:column;padding-left:var(--eds-sp-3xs);overflow:hidden;animation:expandDown .25s ease forwards}.eui-21 :host .collapsed-children .menu-link.child{padding:var(--eds-sp-3xs);margin:var(--eds-sp-4xs) 0}@keyframes expandDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.eui-21 :host .child-initial{font:var(--eds-f-microcopy-xs);width:var(--eds-is-2xs);text-align:center}.eui-21 :host .menu-chevron{flex-shrink:0;margin-left:auto;transition:transform .25s ease}\n"], dependencies: [{ kind: "component", type: EdsMenuItemComponent, selector: "eds-menu-item", inputs: ["item", "hasIcon", "isCollapsed", "hasCollapsedLabel"], outputs: ["itemClick", "childClick"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-menu-item', imports: [RouterModule, ...EDS_ICON], template: "@if (isCollapsed()) {\n  <!-- Collapsed: parent with children -->\n  @if (item().children && item().children!.length) {\n    <button\n      class=\"menu-link icon-only\"\n      [class.with-label]=\"hasCollapsedLabel()\"\n      [class.disabled]=\"item().isDisabled\"\n      [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n      (click)=\"toggleExpand()\">\n      @if (item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n      } @else {\n        <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n      }\n      @if (hasCollapsedLabel()) {\n        <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n      }\n    </button>\n\n    @if (item().isExpanded) {\n      <div class=\"collapsed-children\">\n        @for (child of item().children!; track child.label) {\n          @if (child.url && !child.command) {\n            <a\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [routerLink]=\"child.url\"\n              routerLinkActive=\"active\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </a>\n          } @else {\n            <button\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  } @else {\n    <!-- Collapsed: leaf item -->\n    @if (item().url && !item().command) {\n      <a\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [routerLink]=\"item().url\"\n        routerLinkActive=\"active\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </a>\n    } @else {\n      <button\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </button>\n    }\n  }\n} @else if (item().children && item().children!.length) {\n  <!-- Expanded: Parent item with children -->\n  <button\n    class=\"menu-link parent\"\n    [class.expanded]=\"item().isExpanded\"\n    [class.disabled]=\"item().isDisabled\"\n    (click)=\"toggleExpand()\"\n    [attr.aria-expanded]=\"item().isExpanded\">\n    @if (hasIcon() && item().icon) {\n      <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n    }\n    <span class=\"menu-label\">{{ item().label }}</span>\n    <eds-icon class=\"menu-chevron\" [icon]=\"item().isExpanded ? 'caret-down' : 'caret-right'\" edsSizeS />\n  </button>\n\n  @if (item().isExpanded) {\n    <ul class=\"eds-submenu\">\n      @for (child of item().children!; track child.label) {\n        <li>\n          <eds-menu-item\n            [item]=\"child\"\n            [hasIcon]=\"hasIcon()\"\n            [isCollapsed]=\"false\"\n            [hasCollapsedLabel]=\"false\"\n            (itemClick)=\"onChildClick($event)\"\n            (childClick)=\"onChildClick($event)\">\n          </eds-menu-item>\n        </li>\n      }\n    </ul>\n  }\n} @else {\n  <!-- Expanded: Leaf item -->\n  @if (item().url && !item().command) {\n    <a\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      [routerLink]=\"item().url\"\n      routerLinkActive=\"active\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </a>\n  } @else {\n    <button\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </button>\n  }\n}\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-submenu{list-style:none;margin:0;padding:0;padding-left:var(--eds-sp-m);overflow:hidden;animation:expandDown .25s ease forwards}.eui-21 :host .menu-link{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-l);font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtle);text-decoration:none;border:none;background:none;width:100%;text-align:left;cursor:pointer;border-left:3px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}.eui-21 :host .menu-link.icon-only{justify-content:center;align-items:center;padding:var(--eds-sp-xs) 0;border-left:none;border-radius:var(--eds-br-s);margin:var(--eds-sp-3xs) 0;width:100%}.eui-21 :host .menu-link.icon-only.with-label{flex-direction:column;gap:var(--eds-sp-4xs)}.eui-21 :host .menu-link:hover{background:var(--eds-c-surface-elevation-sunken);color:var(--eds-c-foreground-primary)}.eui-21 :host .menu-link.active{background:var(--eds-c-surface-primary-subtle);color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semi-bold);border-left-color:var(--eds-c-border-primary)}.eui-21 :host .menu-link.parent{font-weight:var(--eds-f-w-medium)}.eui-21 :host .menu-link.disabled{opacity:var(--eds-op-40);pointer-events:none}.eui-21 :host .menu-icon{flex-shrink:0;width:var(--eds-is-xs)}.icon-only .eui-21 :host .menu-icon{width:auto}.eui-21 :host .menu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .menu-initial{font:var(--eds-f-label-m-semi-bold);width:var(--eds-is-xs);text-align:center}.eui-21 :host .menu-collapsed-label{font:var(--eds-f-microcopy-2xs);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}.eui-21 :host .collapsed-children{display:flex;flex-direction:column;padding-left:var(--eds-sp-3xs);overflow:hidden;animation:expandDown .25s ease forwards}.eui-21 :host .collapsed-children .menu-link.child{padding:var(--eds-sp-3xs);margin:var(--eds-sp-4xs) 0}@keyframes expandDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.eui-21 :host .child-initial{font:var(--eds-f-microcopy-xs);width:var(--eds-is-2xs);text-align:center}.eui-21 :host .menu-chevron{flex-shrink:0;margin-left:auto;transition:transform .25s ease}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], hasIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIcon", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], hasCollapsedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCollapsedLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], childClick: [{ type: i0.Output, args: ["childClick"] }] } });
+
+class EdsMenu {
+    constructor() {
+        /** Array of menu items to render. */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Whether to show icons alongside labels. */
+        this.hasIcons = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasIcons" }] : /* istanbul ignore next */ []));
+        /** Whether the menu is in collapsed/icon-only mode. */
+        this.isCollapsed = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        /** Whether to show labels underneath icons in collapsed mode. */
+        this.hasCollapsedLabels = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCollapsedLabels" }] : /* istanbul ignore next */ []));
+        /** Emits when a menu item is clicked. */
+        this.itemClick = output();
+    }
+    onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsMenu, isStandalone: true, selector: "eds-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hasIcons: { classPropertyName: "hasIcons", publicName: "hasIcons", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, hasCollapsedLabels: { classPropertyName: "hasCollapsedLabels", publicName: "hasCollapsedLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul class=\"eds-menu-list\" [class.collapsed]=\"isCollapsed()\">\n  @for (item of items(); track item.label) {\n    <li>\n      <eds-menu-item\n        [item]=\"item\"\n        [hasIcon]=\"hasIcons()\"\n        [isCollapsed]=\"isCollapsed()\"\n        [hasCollapsedLabel]=\"hasCollapsedLabels()\"\n        (itemClick)=\"onItemClick($event)\"\n        (childClick)=\"onItemClick($event)\">\n      </eds-menu-item>\n    </li>\n  }\n</ul>\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-menu-list{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "component", type: EdsMenuItemComponent, selector: "eds-menu-item", inputs: ["item", "hasIcon", "isCollapsed", "hasCollapsedLabel"], outputs: ["itemClick", "childClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-menu', imports: [EdsMenuItemComponent], template: "<ul class=\"eds-menu-list\" [class.collapsed]=\"isCollapsed()\">\n  @for (item of items(); track item.label) {\n    <li>\n      <eds-menu-item\n        [item]=\"item\"\n        [hasIcon]=\"hasIcons()\"\n        [isCollapsed]=\"isCollapsed()\"\n        [hasCollapsedLabel]=\"hasCollapsedLabels()\"\n        (itemClick)=\"onItemClick($event)\"\n        (childClick)=\"onItemClick($event)\">\n      </eds-menu-item>\n    </li>\n  }\n</ul>\n", styles: [".eui-21 :host{display:block}.eui-21 :host .eds-menu-list{list-style:none;margin:0;padding:0}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIcons", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], hasCollapsedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCollapsedLabels", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/** Convenience array for importing eds-menu components. */
+const EDS_MENU = [EdsMenu, EdsMenuItemComponent];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_MENU, EdsMenu, EdsMenuItemComponent };
+//# sourceMappingURL=eui-eds-eds-menu.mjs.map

package/fesm2022/eui-eds-eds-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-menu.mjs","sources":["../../eds-menu/eds-menu-item.ts","../../eds-menu/eds-menu-item.html","../../eds-menu/eds-menu.ts","../../eds-menu/eds-menu.html","../../eds-menu/index.ts","../../eds-menu/eui-eds-eds-menu.ts"],"sourcesContent":["import { Component, input, output } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EdsMenuItem } from './eds-menu-item.model';\n\n@Component({\n  selector: 'eds-menu-item',\n  imports: [RouterModule, ...EDS_ICON],\n  templateUrl: './eds-menu-item.html',\n  styleUrl: './eds-menu-item.scss',\n})\nexport class EdsMenuItemComponent {\n  /** The menu item data. */\n  item = input.required<EdsMenuItem>();\n\n  /** Whether to show icon. */\n  hasIcon = input<boolean>(false);\n\n  /** Whether the menu is in collapsed/icon-only mode. */\n  isCollapsed = input<boolean>(false);\n\n  /** Whether to show label under icon in collapsed mode. */\n  hasCollapsedLabel = input<boolean>(false);\n\n  /** Emits when this item is clicked. */\n  itemClick = output<EdsMenuItem>();\n\n  /** Emits when a child item is clicked. */\n  childClick = output<EdsMenuItem>();\n\n  onClick(): void {\n    const i = this.item();\n    if (!i.isDisabled && !i.children?.length) {\n      if (i.command) {\n        i.command();\n      }\n      this.itemClick.emit(i);\n    }\n  }\n\n  onChildClick(child: EdsMenuItem): void {\n    if (child.command) {\n      child.command();\n    }\n    this.childClick.emit(child);\n  }\n\n  toggleExpand(): void {\n    const i = this.item();\n    i.isExpanded = !i.isExpanded;\n  }\n}\n","@if (isCollapsed()) {\n  <!-- Collapsed: parent with children -->\n  @if (item().children && item().children!.length) {\n    <button\n      class=\"menu-link icon-only\"\n      [class.with-label]=\"hasCollapsedLabel()\"\n      [class.disabled]=\"item().isDisabled\"\n      [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n      (click)=\"toggleExpand()\">\n      @if (item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n      } @else {\n        <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n      }\n      @if (hasCollapsedLabel()) {\n        <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n      }\n    </button>\n\n    @if (item().isExpanded) {\n      <div class=\"collapsed-children\">\n        @for (child of item().children!; track child.label) {\n          @if (child.url && !child.command) {\n            <a\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [routerLink]=\"child.url\"\n              routerLinkActive=\"active\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </a>\n          } @else {\n            <button\n              class=\"menu-link icon-only child\"\n              [class.with-label]=\"hasCollapsedLabel()\"\n              [class.active]=\"child.isActive\"\n              [class.disabled]=\"child.isDisabled\"\n              [attr.title]=\"!hasCollapsedLabel() ? child.label : null\"\n              (click)=\"onChildClick(child)\">\n              @if (child.icon) {\n                <eds-icon class=\"menu-icon\" [icon]=\"child.icon!\" edsSizeS />\n              } @else {\n                <span class=\"menu-initial child-initial\">{{ child.label.charAt(0) }}</span>\n              }\n              @if (hasCollapsedLabel()) {\n                <span class=\"menu-collapsed-label\">{{ child.label }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  } @else {\n    <!-- Collapsed: leaf item -->\n    @if (item().url && !item().command) {\n      <a\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [routerLink]=\"item().url\"\n        routerLinkActive=\"active\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </a>\n    } @else {\n      <button\n        class=\"menu-link icon-only\"\n        [class.with-label]=\"hasCollapsedLabel()\"\n        [class.active]=\"item().isActive\"\n        [class.disabled]=\"item().isDisabled\"\n        [attr.title]=\"!hasCollapsedLabel() ? item().label : null\"\n        (click)=\"onClick()\">\n        @if (item().icon) {\n          <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" />\n        } @else {\n          <span class=\"menu-initial\">{{ item().label.charAt(0) }}</span>\n        }\n        @if (hasCollapsedLabel()) {\n          <span class=\"menu-collapsed-label\">{{ item().label }}</span>\n        }\n      </button>\n    }\n  }\n} @else if (item().children && item().children!.length) {\n  <!-- Expanded: Parent item with children -->\n  <button\n    class=\"menu-link parent\"\n    [class.expanded]=\"item().isExpanded\"\n    [class.disabled]=\"item().isDisabled\"\n    (click)=\"toggleExpand()\"\n    [attr.aria-expanded]=\"item().isExpanded\">\n    @if (hasIcon() && item().icon) {\n      <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n    }\n    <span class=\"menu-label\">{{ item().label }}</span>\n    <eds-icon class=\"menu-chevron\" [icon]=\"item().isExpanded ? 'caret-down' : 'caret-right'\" edsSizeS />\n  </button>\n\n  @if (item().isExpanded) {\n    <ul class=\"eds-submenu\">\n      @for (child of item().children!; track child.label) {\n        <li>\n          <eds-menu-item\n            [item]=\"child\"\n            [hasIcon]=\"hasIcon()\"\n            [isCollapsed]=\"false\"\n            [hasCollapsedLabel]=\"false\"\n            (itemClick)=\"onChildClick($event)\"\n            (childClick)=\"onChildClick($event)\">\n          </eds-menu-item>\n        </li>\n      }\n    </ul>\n  }\n} @else {\n  <!-- Expanded: Leaf item -->\n  @if (item().url && !item().command) {\n    <a\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      [routerLink]=\"item().url\"\n      routerLinkActive=\"active\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </a>\n  } @else {\n    <button\n      class=\"menu-link\"\n      [class.active]=\"item().isActive\"\n      [class.disabled]=\"item().isDisabled\"\n      (click)=\"onClick()\">\n      @if (hasIcon() && item().icon) {\n        <eds-icon class=\"menu-icon\" [icon]=\"item().icon!\" edsSizeM />\n      }\n      <span class=\"menu-label\">{{ item().label }}</span>\n    </button>\n  }\n}\n","import { Component, input, output } from '@angular/core';\nimport { EdsMenuItemComponent } from './eds-menu-item';\nimport { EdsMenuItem } from './eds-menu-item.model';\n\n@Component({\n  selector: 'eds-menu',\n  imports: [EdsMenuItemComponent],\n  templateUrl: './eds-menu.html',\n  styleUrl: './eds-menu.scss',\n})\nexport class EdsMenu {\n  /** Array of menu items to render. */\n  items = input<EdsMenuItem[]>([]);\n\n  /** Whether to show icons alongside labels. */\n  hasIcons = input<boolean>(false);\n\n  /** Whether the menu is in collapsed/icon-only mode. */\n  isCollapsed = input<boolean>(false);\n\n  /** Whether to show labels underneath icons in collapsed mode. */\n  hasCollapsedLabels = input<boolean>(false);\n\n  /** Emits when a menu item is clicked. */\n  itemClick = output<EdsMenuItem>();\n\n  onItemClick(item: EdsMenuItem): void {\n    this.itemClick.emit(item);\n  }\n}\n","<ul class=\"eds-menu-list\" [class.collapsed]=\"isCollapsed()\">\n  @for (item of items(); track item.label) {\n    <li>\n      <eds-menu-item\n        [item]=\"item\"\n        [hasIcon]=\"hasIcons()\"\n        [isCollapsed]=\"isCollapsed()\"\n        [hasCollapsedLabel]=\"hasCollapsedLabels()\"\n        (itemClick)=\"onItemClick($event)\"\n        (childClick)=\"onItemClick($event)\">\n      </eds-menu-item>\n    </li>\n  }\n</ul>\n","import { EdsMenu } from './eds-menu';\nimport { EdsMenuItemComponent } from './eds-menu-item';\n\nexport { EdsMenu };\nexport { EdsMenuItemComponent };\nexport { EdsMenuItem } from './eds-menu-item.model';\n\n/** Convenience array for importing eds-menu components. */\nexport const EDS_MENU = [EdsMenu, EdsMenuItemComponent] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-eds-eds-overlay.mjs

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, computed, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i1$1 from '@eui/eds/eds-icon-button';
+import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
+
+class EdsOverlay {
+    constructor() {
+        /** Controls the visibility and active state of the overlay. */
+        this.isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */
+        this.position = input('right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */
+        this.width = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /** Fixed width value (overrides responsive width). */
+        this.fixedWidth = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fixedWidth" }] : /* istanbul ignore next */ []));
+        /** Enables automatic closing when clicking outside the overlay. */
+        this.hasClosedOnClickOutside = input(false, { ...(ngDevMode ? { debugName: "hasClosedOnClickOutside" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Applies highlighted visual styling. */
+        this.isHighlighted = input(false, { ...(ngDevMode ? { debugName: "isHighlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Emitted when the overlay's active state changes (typically false for close requests). */
+        this.activeState = output();
+        this.hostClasses = computed(() => {
+            return [
+                'eds-overlay',
+                `eds-overlay--${this.position()}`,
+                this.isActive() ? 'eds-overlay--active' : '',
+                this.width() ? `eds-overlay--width-${this.width()}` : '',
+                this.isHighlighted() ? 'eds-overlay--highlighted' : '',
+            ].join(' ').trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    }
+    onEscape() {
+        if (this.isActive()) {
+            this.activeState.emit(false);
+        }
+    }
+    onBackdropClick() {
+        if (this.hasClosedOnClickOutside()) {
+            this.activeState.emit(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsOverlay, isStandalone: true, selector: "eds-overlay", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null }, hasClosedOnClickOutside: { classPropertyName: "hasClosedOnClickOutside", publicName: "hasClosedOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, isHighlighted: { classPropertyName: "isHighlighted", publicName: "isHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeState: "activeState" }, host: { attributes: { "role": "dialog" }, listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class": "hostClasses()", "attr.aria-hidden": "!isActive()", "attr.inert": "!isActive() ? true : null" } }, ngImport: i0, template: "@if (isActive()) {\n  <div class=\"eds-overlay-backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"eds-overlay-panel\"\n  [style.width]=\"fixedWidth() || null\"\n  [cdkTrapFocus]=\"isActive()\"\n  [cdkTrapFocusAutoCapture]=\"true\">\n  <ng-content select=\"eds-overlay-header\"></ng-content>\n  <ng-content select=\"eds-overlay-content\"></ng-content>\n  <ng-content select=\"eds-overlay-footer\"></ng-content>\n  <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;display:flex}.eui-21 :host.eds-overlay--active{pointer-events:auto}.eui-21 :host.eds-overlay--right{justify-content:flex-end}.eui-21 :host.eds-overlay--left{justify-content:flex-start}.eui-21 :host.eds-overlay--top{align-items:flex-start}.eui-21 :host.eds-overlay--top .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(-100%)}.eui-21 :host.eds-overlay--top.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host.eds-overlay--bottom{align-items:flex-end}.eui-21 :host.eds-overlay--bottom .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(100%)}.eui-21 :host.eds-overlay--bottom.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host:not(.eds-overlay--active){visibility:hidden}.eui-21 :host:not(.eds-overlay--active) .eds-overlay-panel{transform:translate(100%)}.eui-21 :host:not(.eds-overlay--active).eds-overlay--left .eds-overlay-panel{transform:translate(-100%)}.eui-21 :host.eds-overlay--highlighted .eds-overlay-panel{border-left:3px solid var(--eds-c-border-primary)}.eui-21 :host .eds-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--eds-c-alpha-backdrop)}.eui-21 :host .eds-overlay-panel{position:relative;display:flex;flex-direction:column;height:100%;background:var(--eds-c-surface-elevation-overlay);box-shadow:var(--eds-sh-4);overflow:hidden;transition:transform .3s cubic-bezier(.25,.8,.25,1);width:400px;max-width:100vw}.eui-21 :host.eds-overlay--width-small .eds-overlay-panel{width:320px}.eui-21 :host.eds-overlay--width-medium .eds-overlay-panel{width:480px}.eui-21 :host.eds-overlay--width-large .eds-overlay-panel{width:640px}.eui-21 :host.eds-overlay--width-xlarge .eds-overlay-panel{width:800px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlay, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [A11yModule], host: {
+                        '[class]': 'hostClasses()',
+                        role: 'dialog',
+                        '[attr.aria-hidden]': '!isActive()',
+                        '[attr.inert]': '!isActive() ? true : null',
+                    }, template: "@if (isActive()) {\n  <div class=\"eds-overlay-backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"eds-overlay-panel\"\n  [style.width]=\"fixedWidth() || null\"\n  [cdkTrapFocus]=\"isActive()\"\n  [cdkTrapFocusAutoCapture]=\"true\">\n  <ng-content select=\"eds-overlay-header\"></ng-content>\n  <ng-content select=\"eds-overlay-content\"></ng-content>\n  <ng-content select=\"eds-overlay-footer\"></ng-content>\n  <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;display:flex}.eui-21 :host.eds-overlay--active{pointer-events:auto}.eui-21 :host.eds-overlay--right{justify-content:flex-end}.eui-21 :host.eds-overlay--left{justify-content:flex-start}.eui-21 :host.eds-overlay--top{align-items:flex-start}.eui-21 :host.eds-overlay--top .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(-100%)}.eui-21 :host.eds-overlay--top.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host.eds-overlay--bottom{align-items:flex-end}.eui-21 :host.eds-overlay--bottom .eds-overlay-panel{width:100%;max-height:80vh;transform:translateY(100%)}.eui-21 :host.eds-overlay--bottom.eds-overlay--active .eds-overlay-panel{transform:translateY(0)}.eui-21 :host:not(.eds-overlay--active){visibility:hidden}.eui-21 :host:not(.eds-overlay--active) .eds-overlay-panel{transform:translate(100%)}.eui-21 :host:not(.eds-overlay--active).eds-overlay--left .eds-overlay-panel{transform:translate(-100%)}.eui-21 :host.eds-overlay--highlighted .eds-overlay-panel{border-left:3px solid var(--eds-c-border-primary)}.eui-21 :host .eds-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--eds-c-alpha-backdrop)}.eui-21 :host .eds-overlay-panel{position:relative;display:flex;flex-direction:column;height:100%;background:var(--eds-c-surface-elevation-overlay);box-shadow:var(--eds-sh-4);overflow:hidden;transition:transform .3s cubic-bezier(.25,.8,.25,1);width:400px;max-width:100vw}.eui-21 :host.eds-overlay--width-small .eds-overlay-panel{width:320px}.eui-21 :host.eds-overlay--width-medium .eds-overlay-panel{width:480px}.eui-21 :host.eds-overlay--width-large .eds-overlay-panel{width:640px}.eui-21 :host.eds-overlay--width-xlarge .eds-overlay-panel{width:800px}\n"] }]
+        }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fixedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWidth", required: false }] }], hasClosedOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClosedOnClickOutside", required: false }] }], isHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHighlighted", required: false }] }], activeState: [{ type: i0.Output, args: ["activeState"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class EdsOverlayHeader {
+    constructor() {
+        /** Emitted when the built-in close button is clicked. */
+        this.closeClick = output();
+    }
+    onClose() {
+        this.closeClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayHeader, isStandalone: true, selector: "eds-overlay-header", outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"header-labels\">\n  <ng-content select=\"eds-overlay-header-label\"></ng-content>\n  <ng-content select=\"eds-overlay-header-sublabel\"></ng-content>\n</div>\n<ng-content select=\"eds-overlay-header-action-items\"></ng-content>\n<button edsIconButton icon=\"x\" ariaLabel=\"Close overlay\" (click)=\"onClose()\"></button>\n", styles: [".eui-21 :host{display:flex;align-items:center;justify-content:space-between;padding:var(--eds-sp-m) var(--eds-sp-l);border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);flex-shrink:0}.eui-21 :host .header-labels{display:flex;flex-direction:column;gap:var(--eds-sp-3xs);min-width:0;flex:1}.eui-21 :host .header-actions{display:flex;align-items:center;gap:var(--eds-sp-xs);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: i1$1.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-header', imports: [...EDS_ICON_BUTTON], template: "<div class=\"header-labels\">\n  <ng-content select=\"eds-overlay-header-label\"></ng-content>\n  <ng-content select=\"eds-overlay-header-sublabel\"></ng-content>\n</div>\n<ng-content select=\"eds-overlay-header-action-items\"></ng-content>\n<button edsIconButton icon=\"x\" ariaLabel=\"Close overlay\" (click)=\"onClose()\"></button>\n", styles: [".eui-21 :host{display:flex;align-items:center;justify-content:space-between;padding:var(--eds-sp-m) var(--eds-sp-l);border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);flex-shrink:0}.eui-21 :host .header-labels{display:flex;flex-direction:column;gap:var(--eds-sp-3xs);min-width:0;flex:1}.eui-21 :host .header-actions{display:flex;align-items:center;gap:var(--eds-sp-xs);flex-shrink:0}\n"] }]
+        }], propDecorators: { closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
+
+class EdsOverlayHeaderLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayHeaderLabel, isStandalone: true, selector: "eds-overlay-header-label", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-21 :host{display:block;font:var(--eds-f-heading-s);color:var(--eds-c-foreground)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderLabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-header-label', template: '<ng-content></ng-content>', styles: [".eui-21 :host{display:block;font:var(--eds-f-heading-s);color:var(--eds-c-foreground)}\n"] }]
+        }] });
+
+class EdsOverlayHeaderSublabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderSublabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayHeaderSublabel, isStandalone: true, selector: "eds-overlay-header-sublabel", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-21 :host{display:block;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderSublabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-header-sublabel', template: '<ng-content></ng-content>', styles: [".eui-21 :host{display:block;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}\n"] }]
+        }] });
+
+class EdsOverlayHeaderActionItems {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderActionItems, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayHeaderActionItems, isStandalone: true, selector: "eds-overlay-header-action-items", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-xs);flex-shrink:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayHeaderActionItems, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-header-action-items', template: '<ng-content></ng-content>', styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-xs);flex-shrink:0}\n"] }]
+        }] });
+
+class EdsOverlayContent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayContent, isStandalone: true, selector: "eds-overlay-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-21 :host{display:block;flex:1;padding:var(--eds-sp-l);overflow-y:auto;min-height:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-content', template: '<ng-content></ng-content>', styles: [".eui-21 :host{display:block;flex:1;padding:var(--eds-sp-l);overflow-y:auto;min-height:0}\n"] }]
+        }] });
+
+class EdsOverlayFooter {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EdsOverlayFooter, isStandalone: true, selector: "eds-overlay-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-m) var(--eds-sp-l);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);flex-shrink:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsOverlayFooter, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-overlay-footer', template: '<ng-content></ng-content>', styles: [".eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-m) var(--eds-sp-l);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);flex-shrink:0}\n"] }]
+        }] });
+
+/** Convenience array for importing all eds-overlay components. */
+const EDS_OVERLAY = [
+    EdsOverlay,
+    EdsOverlayHeader,
+    EdsOverlayHeaderLabel,
+    EdsOverlayHeaderSublabel,
+    EdsOverlayHeaderActionItems,
+    EdsOverlayContent,
+    EdsOverlayFooter,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_OVERLAY, EdsOverlay, EdsOverlayContent, EdsOverlayFooter, EdsOverlayHeader, EdsOverlayHeaderActionItems, EdsOverlayHeaderLabel, EdsOverlayHeaderSublabel };
+//# sourceMappingURL=eui-eds-eds-overlay.mjs.map

package/fesm2022/eui-eds-eds-overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-overlay.mjs","sources":["../../eds-overlay/eds-overlay.ts","../../eds-overlay/eds-overlay.html","../../eds-overlay/eds-overlay-header.ts","../../eds-overlay/eds-overlay-header.html","../../eds-overlay/eds-overlay-header-label.ts","../../eds-overlay/eds-overlay-header-sublabel.ts","../../eds-overlay/eds-overlay-header-action-items.ts","../../eds-overlay/eds-overlay-content.ts","../../eds-overlay/eds-overlay-footer.ts","../../eds-overlay/index.ts","../../eds-overlay/eui-eds-eds-overlay.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n  selector: 'eds-overlay',\n  templateUrl: './eds-overlay.html',\n  styleUrl: './eds-overlay.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [A11yModule],\n  host: {\n    '[class]': 'hostClasses()',\n    role: 'dialog',\n    '[attr.aria-hidden]': '!isActive()',\n    '[attr.inert]': '!isActive() ? true : null',\n  },\n})\nexport class EdsOverlay {\n  /** Controls the visibility and active state of the overlay. */\n  isActive = input(false, { transform: booleanAttribute });\n\n  /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n  position = input<EdsOverlayPosition>('right');\n\n  /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n  width = input<string>('');\n\n  /** Fixed width value (overrides responsive width). */\n  fixedWidth = input<string>('');\n\n  /** Enables automatic closing when clicking outside the overlay. */\n  hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n  /** Applies highlighted visual styling. */\n  isHighlighted = input(false, { transform: booleanAttribute });\n\n  /** Emitted when the overlay's active state changes (typically false for close requests). */\n  activeState = output<boolean>();\n\n  hostClasses = computed(() => {\n    return [\n      'eds-overlay',\n      `eds-overlay--${this.position()}`,\n      this.isActive() ? 'eds-overlay--active' : '',\n      this.width() ? `eds-overlay--width-${this.width()}` : '',\n      this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n    ].join(' ').trim();\n  });\n\n  @HostListener('document:keydown.escape')\n  onEscape(): void {\n    if (this.isActive()) {\n      this.activeState.emit(false);\n    }\n  }\n\n  onBackdropClick(): void {\n    if (this.hasClosedOnClickOutside()) {\n      this.activeState.emit(false);\n    }\n  }\n}\n","@if (isActive()) {\n  <div class=\"eds-overlay-backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"eds-overlay-panel\"\n  [style.width]=\"fixedWidth() || null\"\n  [cdkTrapFocus]=\"isActive()\"\n  [cdkTrapFocusAutoCapture]=\"true\">\n  <ng-content select=\"eds-overlay-header\"></ng-content>\n  <ng-content select=\"eds-overlay-content\"></ng-content>\n  <ng-content select=\"eds-overlay-footer\"></ng-content>\n  <ng-content></ng-content>\n</div>\n","import { Component, output } from '@angular/core';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n@Component({\n  selector: 'eds-overlay-header',\n  templateUrl: './eds-overlay-header.html',\n  styleUrl: './eds-overlay-header.scss',\n  imports: [...EDS_ICON_BUTTON],\n})\nexport class EdsOverlayHeader {\n  /** Emitted when the built-in close button is clicked. */\n  closeClick = output<void>();\n\n  onClose(): void {\n    this.closeClick.emit();\n  }\n}\n","<div class=\"header-labels\">\n  <ng-content select=\"eds-overlay-header-label\"></ng-content>\n  <ng-content select=\"eds-overlay-header-sublabel\"></ng-content>\n</div>\n<ng-content select=\"eds-overlay-header-action-items\"></ng-content>\n<button edsIconButton icon=\"x\" ariaLabel=\"Close overlay\" (click)=\"onClose()\"></button>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'eds-overlay-header-label',\n  template: '<ng-content></ng-content>',\n  styleUrl: './eds-overlay-header-label.scss',\n})\nexport class EdsOverlayHeaderLabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'eds-overlay-header-sublabel',\n  template: '<ng-content></ng-content>',\n  styleUrl: './eds-overlay-header-sublabel.scss',\n})\nexport class EdsOverlayHeaderSublabel {}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'eds-overlay-header-action-items',\n  template: '<ng-content></ng-content>',\n  styleUrl: './eds-overlay-header-action-items.scss',\n})\nexport class EdsOverlayHeaderActionItems {}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'eds-overlay-content',\n  template: '<ng-content></ng-content>',\n  styleUrl: './eds-overlay-content.scss',\n})\nexport class EdsOverlayContent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'eds-overlay-footer',\n  template: '<ng-content></ng-content>',\n  styleUrl: './eds-overlay-footer.scss',\n})\nexport class EdsOverlayFooter {}\n","import { EdsOverlay, EdsOverlayPosition } from './eds-overlay';\nimport { EdsOverlayHeader } from './eds-overlay-header';\nimport { EdsOverlayHeaderLabel } from './eds-overlay-header-label';\nimport { EdsOverlayHeaderSublabel } from './eds-overlay-header-sublabel';\nimport { EdsOverlayHeaderActionItems } from './eds-overlay-header-action-items';\nimport { EdsOverlayContent } from './eds-overlay-content';\nimport { EdsOverlayFooter } from './eds-overlay-footer';\n\nexport {\n  EdsOverlay,\n  EdsOverlayPosition,\n  EdsOverlayHeader,\n  EdsOverlayHeaderLabel,\n  EdsOverlayHeaderSublabel,\n  EdsOverlayHeaderActionItems,\n  EdsOverlayContent,\n  EdsOverlayFooter,\n};\n\n/** Convenience array for importing all eds-overlay components. */\nexport const EDS_OVERLAY = [\n  EdsOverlay,\n  EdsOverlayHeader,\n  EdsOverlayHeaderLabel,\n  EdsOverlayHeaderSublabel,\n  EdsOverlayHeaderActionItems,\n  EdsOverlayContent,\n  EdsOverlayFooter,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}