@educarehq/solaris-ui 0.2.0 → 0.3.0

package/esm2022/lib/components/interaction/dropdown-menu/component/dropdown-menu.component.js

@@ -0,0 +1,105 @@
+import { Component, input, contentChildren, signal, computed, viewChild, TemplateRef, } from '@angular/core';
+import { SOLARIS_DROPDOWN_NAVIGABLE_ITEM, } from '../model/dropdown-menu-navigation';
+import * as i0 from "@angular/core";
+let nextId = 0;
+export class SolarisDropdownMenuComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    navigableItems = contentChildren(SOLARIS_DROPDOWN_NAVIGABLE_ITEM, ...(ngDevMode ? [{ debugName: "navigableItems" }] : /* istanbul ignore next */ []));
+    contentTemplate = viewChild.required('contentTmpl', {
+        read: TemplateRef,
+    });
+    panelId = `solaris-dropdown-menu-${++nextId}`;
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    enabledNavigableItems = computed(() => {
+        return this.navigableItems().filter((item) => !item.disabled());
+    }, ...(ngDevMode ? [{ debugName: "enabledNavigableItems" }] : /* istanbul ignore next */ []));
+    focusFirstItem() {
+        const enabled = this.enabledNavigableItems();
+        if (enabled.length > 0) {
+            const idx = this.navigableItems().indexOf(enabled[0]);
+            this.focusedIndex.set(idx);
+            enabled[0].focus();
+        }
+    }
+    focusLastItem() {
+        const enabled = this.enabledNavigableItems();
+        const last = enabled.at(-1);
+        if (last) {
+            const idx = this.navigableItems().indexOf(last);
+            this.focusedIndex.set(idx);
+            last.focus();
+        }
+    }
+    focusNextItem() {
+        const items = this.navigableItems();
+        const enabled = this.enabledNavigableItems();
+        if (enabled.length === 0)
+            return;
+        const currentFocused = this.focusedIndex();
+        const currentFocusedItem = currentFocused >= 0 ? items[currentFocused] : null;
+        let currentEnabledIndex = -1;
+        if (currentFocusedItem) {
+            currentEnabledIndex = enabled.indexOf(currentFocusedItem);
+        }
+        const nextEnabledIndex = (currentEnabledIndex + 1) % enabled.length;
+        const nextItem = enabled[nextEnabledIndex];
+        const nextItemIndex = items.indexOf(nextItem);
+        this.focusedIndex.set(nextItemIndex);
+        nextItem.focus();
+    }
+    focusPreviousItem() {
+        const items = this.navigableItems();
+        const enabled = this.enabledNavigableItems();
+        if (enabled.length === 0)
+            return;
+        const currentFocused = this.focusedIndex();
+        const currentFocusedItem = currentFocused >= 0 ? items[currentFocused] : null;
+        let currentEnabledIndex = -1;
+        if (currentFocusedItem) {
+            currentEnabledIndex = enabled.indexOf(currentFocusedItem);
+        }
+        const prevEnabledIndex = currentEnabledIndex <= 0 ? enabled.length - 1 : currentEnabledIndex - 1;
+        const prevItem = enabled[prevEnabledIndex];
+        const prevItemIndex = items.indexOf(prevItem);
+        this.focusedIndex.set(prevItemIndex);
+        prevItem.focus();
+    }
+    focusItemByLabel(label) {
+        const enabled = this.enabledNavigableItems();
+        const lowerLabel = label.toLowerCase();
+        const match = enabled.find((item) => {
+            const itemLabel = item.label();
+            return itemLabel?.toLowerCase().startsWith(lowerLabel);
+        });
+        if (match) {
+            const idx = this.navigableItems().indexOf(match);
+            this.focusedIndex.set(idx);
+            match.focus();
+        }
+    }
+    activateFocusedItem() {
+        const items = this.navigableItems();
+        const idx = this.focusedIndex();
+        if (idx >= 0 && idx < items.length) {
+            const item = items[idx];
+            if (!item.disabled()) {
+                item.handleClick();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SolarisDropdownMenuComponent, isStandalone: true, selector: "solaris-dropdown-menu", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "panelId", "attr.role": "\"menu\"", "attr.data-size": "size()", "attr.data-density": "density()" } }, queries: [{ propertyName: "navigableItems", predicate: SOLARIS_DROPDOWN_NAVIGABLE_ITEM, isSignal: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTmpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #contentTmpl>\n  <div class=\"solaris-dropdown-menu__wrapper\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{--solaris-dropdown-menu-min-width: calc( var(--solaris-spacing-24) + var(--solaris-spacing-10) + var(--solaris-spacing-1) );--solaris-dropdown-menu-max-width: calc( var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) + var(--solaris-spacing-2) );display:none}.solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-gap: var(--solaris-spacing-1);--solaris-dropdown-menu-padding: var(--solaris-spacing-2);display:flex;outline:none;-webkit-user-select:none;user-select:none;flex-direction:column;box-sizing:border-box;gap:var(--solaris-dropdown-menu-gap);padding:var(--solaris-dropdown-menu-padding);min-width:var(--solaris-dropdown-menu-min-width);max-width:var(--solaris-dropdown-menu-max-width)}.solaris-dropdown-menu__wrapper ::ng-deep solaris-divider{margin-inline:calc(-1 * var(--solaris-dropdown-menu-padding));width:calc(100% + 2 * var(--solaris-dropdown-menu-padding))}::ng-deep solaris-dropdown-menu-group{display:flex;flex-direction:column;padding-block:var(--solaris-spacing-1)}::ng-deep solaris-dropdown-menu-group:first-child{padding-block-start:0}::ng-deep solaris-dropdown-menu-group:last-child{padding-block-end:0}::ng-deep solaris-dropdown-menu-label{display:flex;cursor:default;-webkit-user-select:none;user-select:none;align-items:center;letter-spacing:.05em;text-transform:uppercase;color:var(--solaris-text-muted);font-weight:var(--solaris-font-weight-semibold);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}[data-size=sm] .solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-min-width: calc( var(--solaris-dropdown-menu-min-width) - var(--solaris-spacing-5) );--solaris-dropdown-menu-max-width: calc( var(--solaris-dropdown-menu-max-width) - var(--solaris-spacing-5) )}[data-size=lg] .solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-min-width: calc( var(--solaris-dropdown-menu-min-width) + var(--solaris-spacing-5) );--solaris-dropdown-menu-max-width: calc( var(--solaris-dropdown-menu-max-width) + var(--solaris-spacing-5) )}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dropdown-menu', standalone: true, host: {
+                        '[id]': 'panelId',
+                        '[attr.role]': '"menu"',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-density]': 'density()',
+                    }, template: "<ng-template #contentTmpl>\n  <div class=\"solaris-dropdown-menu__wrapper\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{--solaris-dropdown-menu-min-width: calc( var(--solaris-spacing-24) + var(--solaris-spacing-10) + var(--solaris-spacing-1) );--solaris-dropdown-menu-max-width: calc( var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) + var(--solaris-spacing-2) );display:none}.solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-gap: var(--solaris-spacing-1);--solaris-dropdown-menu-padding: var(--solaris-spacing-2);display:flex;outline:none;-webkit-user-select:none;user-select:none;flex-direction:column;box-sizing:border-box;gap:var(--solaris-dropdown-menu-gap);padding:var(--solaris-dropdown-menu-padding);min-width:var(--solaris-dropdown-menu-min-width);max-width:var(--solaris-dropdown-menu-max-width)}.solaris-dropdown-menu__wrapper ::ng-deep solaris-divider{margin-inline:calc(-1 * var(--solaris-dropdown-menu-padding));width:calc(100% + 2 * var(--solaris-dropdown-menu-padding))}::ng-deep solaris-dropdown-menu-group{display:flex;flex-direction:column;padding-block:var(--solaris-spacing-1)}::ng-deep solaris-dropdown-menu-group:first-child{padding-block-start:0}::ng-deep solaris-dropdown-menu-group:last-child{padding-block-end:0}::ng-deep solaris-dropdown-menu-label{display:flex;cursor:default;-webkit-user-select:none;user-select:none;align-items:center;letter-spacing:.05em;text-transform:uppercase;color:var(--solaris-text-muted);font-weight:var(--solaris-font-weight-semibold);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}[data-size=sm] .solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-min-width: calc( var(--solaris-dropdown-menu-min-width) - var(--solaris-spacing-5) );--solaris-dropdown-menu-max-width: calc( var(--solaris-dropdown-menu-max-width) - var(--solaris-spacing-5) )}[data-size=lg] .solaris-dropdown-menu__wrapper{--solaris-dropdown-menu-min-width: calc( var(--solaris-dropdown-menu-min-width) + var(--solaris-spacing-5) );--solaris-dropdown-menu-max-width: calc( var(--solaris-dropdown-menu-max-width) + var(--solaris-spacing-5) )}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], navigableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SOLARIS_DROPDOWN_NAVIGABLE_ITEM), { isSignal: true }] }], contentTemplate: [{ type: i0.ViewChild, args: ['contentTmpl', { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
+//# sourceMappingURL=dropdown-menu.component.js.map

package/esm2022/lib/components/interaction/dropdown-menu/component/dropdown-menu.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/dropdown-menu/component/dropdown-menu.component.ts","../../../../../../../../../packages/angular/src/lib/components/interaction/dropdown-menu/component/dropdown-menu.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  input,\n  contentChildren,\n  signal,\n  computed,\n  viewChild,\n  TemplateRef,\n} from '@angular/core';\n\nimport {\n  SOLARIS_DROPDOWN_NAVIGABLE_ITEM,\n  type SolarisDropdownNavigableItem,\n} from '../model/dropdown-menu-navigation';\n\nimport type {\n  SolarisDropdownMenuSize,\n  SolarisDropdownMenuDensity,\n} from '../model/dropdown-menu.types';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'solaris-dropdown-menu',\n  standalone: true,\n  templateUrl: './dropdown-menu.component.html',\n  styleUrls: ['./dropdown-menu.component.scss'],\n  host: {\n    '[id]': 'panelId',\n    '[attr.role]': '\"menu\"',\n    '[attr.data-size]': 'size()',\n    '[attr.data-density]': 'density()',\n  },\n})\nexport class SolarisDropdownMenuComponent {\n  readonly size = input<SolarisDropdownMenuSize>('md');\n  readonly density = input<SolarisDropdownMenuDensity>('comfortable');\n\n  readonly navigableItems = contentChildren<SolarisDropdownNavigableItem>(\n    SOLARIS_DROPDOWN_NAVIGABLE_ITEM,\n  );\n\n  readonly contentTemplate = viewChild.required('contentTmpl', {\n    read: TemplateRef,\n  });\n\n  readonly panelId = `solaris-dropdown-menu-${++nextId}`;\n\n  readonly focusedIndex = signal(-1);\n\n  readonly enabledNavigableItems = computed(() => {\n    return this.navigableItems().filter((item) => !item.disabled());\n  });\n\n  focusFirstItem(): void {\n    const enabled = this.enabledNavigableItems();\n    if (enabled.length > 0) {\n      const idx = this.navigableItems().indexOf(enabled[0]);\n      this.focusedIndex.set(idx);\n      enabled[0].focus();\n    }\n  }\n\n  focusLastItem(): void {\n    const enabled = this.enabledNavigableItems();\n    const last = enabled.at(-1);\n    if (last) {\n      const idx = this.navigableItems().indexOf(last);\n      this.focusedIndex.set(idx);\n      last.focus();\n    }\n  }\n\n  focusNextItem(): void {\n    const items = this.navigableItems();\n    const enabled = this.enabledNavigableItems();\n    if (enabled.length === 0) return;\n\n    const currentFocused = this.focusedIndex();\n    const currentFocusedItem =\n      currentFocused >= 0 ? items[currentFocused] : null;\n\n    let currentEnabledIndex = -1;\n    if (currentFocusedItem) {\n      currentEnabledIndex = enabled.indexOf(currentFocusedItem);\n    }\n\n    const nextEnabledIndex = (currentEnabledIndex + 1) % enabled.length;\n    const nextItem = enabled[nextEnabledIndex];\n    const nextItemIndex = items.indexOf(nextItem);\n    this.focusedIndex.set(nextItemIndex);\n    nextItem.focus();\n  }\n\n  focusPreviousItem(): void {\n    const items = this.navigableItems();\n    const enabled = this.enabledNavigableItems();\n    if (enabled.length === 0) return;\n\n    const currentFocused = this.focusedIndex();\n    const currentFocusedItem =\n      currentFocused >= 0 ? items[currentFocused] : null;\n\n    let currentEnabledIndex = -1;\n    if (currentFocusedItem) {\n      currentEnabledIndex = enabled.indexOf(currentFocusedItem);\n    }\n\n    const prevEnabledIndex =\n      currentEnabledIndex <= 0 ? enabled.length - 1 : currentEnabledIndex - 1;\n    const prevItem = enabled[prevEnabledIndex];\n    const prevItemIndex = items.indexOf(prevItem);\n    this.focusedIndex.set(prevItemIndex);\n    prevItem.focus();\n  }\n\n  focusItemByLabel(label: string): void {\n    const enabled = this.enabledNavigableItems();\n    const lowerLabel = label.toLowerCase();\n    const match = enabled.find((item) => {\n      const itemLabel = item.label();\n      return itemLabel?.toLowerCase().startsWith(lowerLabel);\n    });\n    if (match) {\n      const idx = this.navigableItems().indexOf(match);\n      this.focusedIndex.set(idx);\n      match.focus();\n    }\n  }\n\n  activateFocusedItem(): void {\n    const items = this.navigableItems();\n    const idx = this.focusedIndex();\n    if (idx >= 0 && idx < items.length) {\n      const item = items[idx];\n      if (!item.disabled()) {\n        item.handleClick();\n      }\n    }\n  }\n}\n","<ng-template #contentTmpl>\n  <div class=\"solaris-dropdown-menu__wrapper\">\n    <ng-content />\n  </div>\n</ng-template>\n"]}

package/esm2022/lib/components/interaction/dropdown-menu/component/dropdown-submenu-trigger.component.js

@@ -0,0 +1,95 @@
+import { Component, ElementRef, HostListener, inject, input, computed, forwardRef, } from '@angular/core';
+import { SolarisIconComponent } from '../../../icon';
+import { SOLARIS_DROPDOWN_NAVIGABLE_ITEM } from '../model/dropdown-menu-navigation';
+import { SolarisDropdownSubmenuComponent } from './dropdown-submenu.component';
+import * as i0 from "@angular/core";
+export class SolarisDropdownSubmenuTriggerComponent {
+    elementRef = inject(ElementRef);
+    submenu = inject(SolarisDropdownSubmenuComponent, {
+        optional: true,
+    });
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelKey = input(undefined, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    isSubmenuOpen = computed(() => {
+        return this.submenu?.isOpen() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isSubmenuOpen" }] : /* istanbul ignore next */ []));
+    submenuPanelId = computed(() => {
+        return this.submenu?.nestedMenuPanelId() ?? null;
+    }, ...(ngDevMode ? [{ debugName: "submenuPanelId" }] : /* istanbul ignore next */ []));
+    hasLeadingContent = computed(() => !!this.icon(), ...(ngDevMode ? [{ debugName: "hasLeadingContent" }] : /* istanbul ignore next */ []));
+    handleClick() {
+        if (this.disabled())
+            return;
+        this.submenu?.toggle();
+    }
+    onMouseEnter() {
+        if (this.disabled())
+            return;
+        this.submenu?.onTriggerHover();
+    }
+    onMouseLeave() {
+        if (this.disabled())
+            return;
+        this.submenu?.onTriggerLeave();
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.submenu?.toggle();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.submenu?.open();
+        }
+    }
+    focus() {
+        // SECURITY_EXCEPTION: nativeElement.focus() required for programmatic focus. No alternative exists.
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDropdownSubmenuTriggerComponent, isStandalone: true, selector: "solaris-dropdown-submenu-trigger", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "keydown": "onKeydown($event)" }, properties: { "attr.role": "\"menuitem\"", "attr.data-color": "color()", "attr.aria-haspopup": "\"menu\"", "attr.aria-controls": "submenuPanelId()", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-expanded": "isSubmenuOpen() ? \"true\" : \"false\"" }, classAttribute: "solaris-dropdown-submenu-trigger" }, providers: [
+            {
+                provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
+                useExisting: forwardRef(() => SolarisDropdownSubmenuTriggerComponent),
+            },
+        ], ngImport: i0, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n  @if (hasLeadingContent()) {\n    <div class=\"solaris-dropdown-submenu-trigger__leading\">\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    </div>\n  }\n  <div class=\"solaris-dropdown-submenu-trigger__content\">\n    <ng-content></ng-content>\n    @if (label()) {\n      <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n    }\n  </div>\n  <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n    <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n  </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:.5;cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dropdown-submenu-trigger', standalone: true, imports: [SolarisIconComponent], providers: [
+                        {
+                            provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
+                            useExisting: forwardRef(() => SolarisDropdownSubmenuTriggerComponent),
+                        },
+                    ], host: {
+                        '[attr.role]': '"menuitem"',
+                        '[attr.data-color]': 'color()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        class: 'solaris-dropdown-submenu-trigger',
+                        '[attr.aria-controls]': 'submenuPanelId()',
+                        '[attr.tabindex]': 'disabled() ? "-1" : "0"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-expanded]': 'isSubmenuOpen() ? "true" : "false"',
+                    }, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n  @if (hasLeadingContent()) {\n    <div class=\"solaris-dropdown-submenu-trigger__leading\">\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    </div>\n  }\n  <div class=\"solaris-dropdown-submenu-trigger__content\">\n    <ng-content></ng-content>\n    @if (label()) {\n      <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n    }\n  </div>\n  <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n    <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n  </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:.5;cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+//# sourceMappingURL=dropdown-submenu-trigger.component.js.map

package/esm2022/lib/components/interaction/dropdown-menu/component/dropdown-submenu-trigger.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-submenu-trigger.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/dropdown-menu/component/dropdown-submenu-trigger.component.ts","../../../../../../../../../packages/angular/src/lib/components/interaction/dropdown-menu/component/dropdown-submenu-trigger.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGrD,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;;AA0B/E,MAAM,OAAO,sCAAsC;IAChC,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IACzD,OAAO,GAAG,MAAM,CAAC,+BAA+B,EAAE;QACjE,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEM,IAAI,GAAG,KAAK,CAAqB,SAAS,2EAAC,CAAC;IAC5C,KAAK,GAAG,KAAK,CAAqB,SAAS,4EAAC,CAAC;IAC7C,QAAQ,GAAG,KAAK,CAAqB,SAAS,+EAAC,CAAC;IAChD,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,KAAK,GAAG,KAAK,CAA+B,SAAS,4EAAC,CAAC;IAE7C,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/C,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,KAAK,CAAC;IACzC,CAAC,oFAAC,CAAC;IAEgB,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChD,OAAO,IAAI,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,IAAI,CAAC;IACnD,CAAC,qFAAC,CAAC;IAEgB,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,wFAAC,CAAC;IAGrE,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IACzB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACjC,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACjC,CAAC;IAGD,SAAS,CAAC,KAAoB;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QACzB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YACtC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,KAAK;QACH,oGAAoG;QACpG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IACxC,CAAC;wGAzDU,sCAAsC;4FAAtC,sCAAsC,wvCApBtC;YACT;gBACE,OAAO,EAAE,+BAA+B;gBACxC,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,sCAAsC,CAAC;aACtE;SACF,0BCzBH,olBAgBA,8/FDGY,oBAAoB;;4FAqBnB,sCAAsC;kBAxBlD,SAAS;+BACE,kCAAkC,cAChC,IAAI,WACP,CAAC,oBAAoB,CAAC,aACpB;wBACT;4BACE,OAAO,EAAE,+BAA+B;4BACxC,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,uCAAuC,CAAC;yBACtE;qBACF,QAGK;wBACJ,aAAa,EAAE,YAAY;wBAC3B,mBAAmB,EAAE,SAAS;wBAC9B,sBAAsB,EAAE,QAAQ;wBAChC,KAAK,EAAE,kCAAkC;wBACzC,sBAAsB,EAAE,kBAAkB;wBAC1C,iBAAiB,EAAE,yBAAyB;wBAC5C,sBAAsB,EAAE,wBAAwB;wBAChD,sBAAsB,EAAE,4BAA4B;wBACpD,sBAAsB,EAAE,oCAAoC;qBAC7D;;sBAwBA,YAAY;uBAAC,OAAO;;sBAMpB,YAAY;uBAAC,YAAY;;sBAMzB,YAAY;uBAAC,YAAY;;sBAMzB,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import {\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  computed,\n  forwardRef,\n} from '@angular/core';\n\nimport { SolarisIconComponent } from '../../../icon';\n\nimport type { SolarisDropdownMenuItemColor } from '../model/dropdown-menu.types';\nimport { SOLARIS_DROPDOWN_NAVIGABLE_ITEM } from '../model/dropdown-menu-navigation';\nimport { SolarisDropdownSubmenuComponent } from './dropdown-submenu.component';\n\n@Component({\n  selector: 'solaris-dropdown-submenu-trigger',\n  standalone: true,\n  imports: [SolarisIconComponent],\n  providers: [\n    {\n      provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,\n      useExisting: forwardRef(() => SolarisDropdownSubmenuTriggerComponent),\n    },\n  ],\n  templateUrl: './dropdown-submenu-trigger.component.html',\n  styleUrls: ['./dropdown-submenu-trigger.component.scss'],\n  host: {\n    '[attr.role]': '\"menuitem\"',\n    '[attr.data-color]': 'color()',\n    '[attr.aria-haspopup]': '\"menu\"',\n    class: 'solaris-dropdown-submenu-trigger',\n    '[attr.aria-controls]': 'submenuPanelId()',\n    '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n    '[attr.aria-expanded]': 'isSubmenuOpen() ? \"true\" : \"false\"',\n  },\n})\nexport class SolarisDropdownSubmenuTriggerComponent {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly submenu = inject(SolarisDropdownSubmenuComponent, {\n    optional: true,\n  });\n\n  readonly icon = input<string | undefined>(undefined);\n  readonly label = input<string | undefined>(undefined);\n  readonly labelKey = input<string | undefined>(undefined);\n  readonly disabled = input<boolean>(false);\n  readonly color = input<SolarisDropdownMenuItemColor>('neutral');\n\n  protected readonly isSubmenuOpen = computed(() => {\n    return this.submenu?.isOpen() ?? false;\n  });\n\n  protected readonly submenuPanelId = computed(() => {\n    return this.submenu?.nestedMenuPanelId() ?? null;\n  });\n\n  protected readonly hasLeadingContent = computed(() => !!this.icon());\n\n  @HostListener('click')\n  handleClick(): void {\n    if (this.disabled()) return;\n    this.submenu?.toggle();\n  }\n\n  @HostListener('mouseenter')\n  onMouseEnter(): void {\n    if (this.disabled()) return;\n    this.submenu?.onTriggerHover();\n  }\n\n  @HostListener('mouseleave')\n  onMouseLeave(): void {\n    if (this.disabled()) return;\n    this.submenu?.onTriggerLeave();\n  }\n\n  @HostListener('keydown', ['$event'])\n  onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.submenu?.toggle();\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.submenu?.open();\n    }\n  }\n\n  focus(): void {\n    // SECURITY_EXCEPTION: nativeElement.focus() required for programmatic focus. No alternative exists.\n    this.elementRef.nativeElement.focus();\n  }\n}\n","<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n  @if (hasLeadingContent()) {\n    <div class=\"solaris-dropdown-submenu-trigger__leading\">\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    </div>\n  }\n  <div class=\"solaris-dropdown-submenu-trigger__content\">\n    <ng-content></ng-content>\n    @if (label()) {\n      <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n    }\n  </div>\n  <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n    <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n  </div>\n</div>\n"]}