@educarehq/solaris-ui 0.16.1 → 0.17.1

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, contentChild, contentChildren, NgZone, TemplateRef, ViewContainerRef, Injector, viewChild, isDevMode, forwardRef, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef, model } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
-import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, Renderer2, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { getCountries, getCountryCallingCode, Metadata, AsYouType, parsePhoneNumberFromString, getExampleNumber } from 'libphonenumber-js';
 import * as FLAG_3X2 from 'country-flag-icons/string/3x2';
@@ -78,6 +78,8 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
             'solaris.toast.continue': 'click to continue',
             'solaris.toast.expand': 'Expand',
             'solaris.toast.collapse': 'Collapse',
+            'solaris.menuToggle.open': 'Open menu',
+            'solaris.menuToggle.close': 'Close menu',
             'solaris.dialog.close': 'Close',
             'solaris.dialog.confirm': 'Confirm',
             'solaris.dialog.cancel': 'Cancel',
@@ -2398,6 +2400,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"icon.viewBox\"\n    [attr.fill]=\"icon.fill ?? 'none'\"\n    [attr.stroke]=\"resolvedStroke()\"\n    [attr.stroke-width]=\"resolvedStrokeWidth()\"\n    [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n    [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    @for (element of icon.elements; track $index) {\n      @switch (element.type) {\n        @case ('path') {\n          <path\n            [attr.d]=\"element.d\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('line') {\n          <line\n            [attr.x1]=\"element.x1\"\n            [attr.y1]=\"element.y1\"\n            [attr.x2]=\"element.x2\"\n            [attr.y2]=\"element.y2\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polyline') {\n          <polyline\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polygon') {\n          <polygon\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"element.cx\"\n            [attr.cy]=\"element.cy\"\n            [attr.r]=\"element.r\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('rect') {\n          <rect\n            [attr.x]=\"element.x\"\n            [attr.y]=\"element.y\"\n            [attr.width]=\"element.width\"\n            [attr.height]=\"element.height\"\n            [attr.rx]=\"element.rx\"\n            [attr.ry]=\"element.ry\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], inheritColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritColor", required: false }] }] } });
 
+class SolarisAnimatedIconComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    isHidden = computed(() => this.decorative(), ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+    accessibleLabel = computed(() => this.ariaLabel() ?? '', ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
+    hasSemanticLabel = computed(() => !this.decorative() && !!this.ariaLabel(), ...(ngDevMode ? [{ debugName: "hasSemanticLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAnimatedIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAnimatedIconComponent, isStandalone: true, selector: "solaris-animated-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-active": "active() ? \"\" : null" } }, ngImport: i0, template: "<svg\n  width=\"100%\"\n  height=\"100%\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n  [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n  [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n>\n  @switch (name()) {\n    @case ('menu') {\n      <path\n        class=\"solaris-animated-icon__line solaris-animated-icon__line--top\"\n        d=\"M2 8h20\"\n      />\n      <path\n        class=\"solaris-animated-icon__line solaris-animated-icon__line--bottom\"\n        d=\"M2 16h20\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}svg{width:100%;height:100%}.solaris-animated-icon__line{transform-box:view-box;transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-animated-icon__line--top{transform-origin:50% 33.333%}.solaris-animated-icon__line--bottom{transform-origin:50% 66.667%}:host([data-active]) .solaris-animated-icon__line--top{transform:translateY(16.667%) rotate(45deg)}:host([data-active]) .solaris-animated-icon__line--bottom{transform:translateY(-16.667%) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.solaris-animated-icon__line{transition:none}}:host-context([data-reduced-motion=true]) .solaris-animated-icon__line{transition:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAnimatedIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-animated-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-active]': 'active() ? "" : null',
+                    }, template: "<svg\n  width=\"100%\"\n  height=\"100%\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n  [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n  [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n>\n  @switch (name()) {\n    @case ('menu') {\n      <path\n        class=\"solaris-animated-icon__line solaris-animated-icon__line--top\"\n        d=\"M2 8h20\"\n      />\n      <path\n        class=\"solaris-animated-icon__line solaris-animated-icon__line--bottom\"\n        d=\"M2 16h20\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}svg{width:100%;height:100%}.solaris-animated-icon__line{transform-box:view-box;transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-animated-icon__line--top{transform-origin:50% 33.333%}.solaris-animated-icon__line--bottom{transform-origin:50% 66.667%}:host([data-active]) .solaris-animated-icon__line--top{transform:translateY(16.667%) rotate(45deg)}:host([data-active]) .solaris-animated-icon__line--bottom{transform:translateY(-16.667%) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.solaris-animated-icon__line{transition:none}}:host-context([data-reduced-motion=true]) .solaris-animated-icon__line{transition:none}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
+
 class SolarisBadgeComponent {
     appearance = input('tonal', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     variant = input('standard', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -2919,12 +2939,20 @@ class SolarisButtonDirective {
         if (this.isButton && initialType === null) {
             el.setAttribute('type', 'button');
         }
-        // Apply variant attributes synchronously so the element never flashes the
-        // base style before Angular's first change detection (SSR/hydration FOUC).
-        el.setAttribute('data-appearance', this.appearance());
-        el.setAttribute('data-color', this.color());
-        el.setAttribute('data-radius', this.radius());
-        el.setAttribute('data-shape', this.shape());
+        // Preserve SSR attributes during hydration. Angular applies input bindings
+        // after directive construction, so writing defaults here would flash them.
+        if (!el.hasAttribute('data-appearance')) {
+            el.setAttribute('data-appearance', this.appearance());
+        }
+        if (!el.hasAttribute('data-color')) {
+            el.setAttribute('data-color', this.color());
+        }
+        if (!el.hasAttribute('data-radius')) {
+            el.setAttribute('data-radius', this.radius());
+        }
+        if (!el.hasAttribute('data-shape')) {
+            el.setAttribute('data-shape', this.shape());
+        }
         effect(() => {
             if (this.loading()) {
                 this.attachSpinner();
@@ -3079,12 +3107,20 @@ class SolarisIconButtonDirective {
         if (this.isButton && initialType === null) {
             el.setAttribute('type', 'button');
         }
-        // Apply variant attributes synchronously so the element never flashes the
-        // base style before Angular's first change detection (SSR/hydration FOUC).
-        el.setAttribute('data-appearance', this.appearance());
-        el.setAttribute('data-color', this.color());
-        el.setAttribute('data-radius', this.radius());
-        el.setAttribute('data-shape', this.shape());
+        // Preserve SSR attributes during hydration. Angular applies input bindings
+        // after directive construction, so writing defaults here would flash them.
+        if (!el.hasAttribute('data-appearance')) {
+            el.setAttribute('data-appearance', this.appearance());
+        }
+        if (!el.hasAttribute('data-color')) {
+            el.setAttribute('data-color', this.color());
+        }
+        if (!el.hasAttribute('data-radius')) {
+            el.setAttribute('data-radius', this.radius());
+        }
+        if (!el.hasAttribute('data-shape')) {
+            el.setAttribute('data-shape', this.shape());
+        }
     }
     onClick(event) {
         if (this.isEffectivelyDisabled() && this.isAnchor) {
@@ -3133,6 +3169,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement reads the host button's disabled and loading state before toggling.
+class SolarisMenuToggleDirective {
+    elementRef = inject(ElementRef);
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    open = model(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), alias: 'solarisMenuToggleOpen' });
+    controls = input(undefined, { ...(ngDevMode ? { debugName: "controls" } : /* istanbul ignore next */ {}), alias: 'solarisMenuToggleControls' });
+    openLabel = input(undefined, { ...(ngDevMode ? { debugName: "openLabel" } : /* istanbul ignore next */ {}), alias: 'solarisMenuToggleOpenLabel' });
+    closeLabel = input(undefined, { ...(ngDevMode ? { debugName: "closeLabel" } : /* istanbul ignore next */ {}), alias: 'solarisMenuToggleCloseLabel' });
+    resolvedAriaLabel = computed(() => {
+        const label = this.open() ? this.closeLabel() : this.openLabel();
+        if (label) {
+            return label;
+        }
+        const key = this.open()
+            ? 'solaris.menuToggle.close'
+            : 'solaris.menuToggle.open';
+        const fallback = this.open() ? 'Close menu' : 'Open menu';
+        const translated = this.translateService?.translate(key);
+        return translated && translated !== key ? translated : fallback;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        const button = this.elementRef.nativeElement;
+        if (button.disabled ||
+            button.getAttribute('aria-disabled') === 'true' ||
+            button.hasAttribute('data-loading')) {
+            return;
+        }
+        this.open.update((open) => !open);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMenuToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisMenuToggleDirective, isStandalone: true, selector: "button[solaris-icon-button][solaris-menu-toggle]", inputs: { open: { classPropertyName: "open", publicName: "solarisMenuToggleOpen", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "solarisMenuToggleControls", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "solarisMenuToggleOpenLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "solarisMenuToggleCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "solarisMenuToggleOpenChange" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.aria-controls": "controls() ?? null", "attr.aria-label": "resolvedAriaLabel()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMenuToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[solaris-icon-button][solaris-menu-toggle]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'controls() ?? null',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                    },
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "solarisMenuToggleOpen", required: false }] }, { type: i0.Output, args: ["solarisMenuToggleOpenChange"] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "solarisMenuToggleControls", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "solarisMenuToggleOpenLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "solarisMenuToggleCloseLabel", required: false }] }], toggle: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class SolarisButtonGroupComponent {
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     attached = input(true, ...(ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []));
@@ -3175,6 +3262,593 @@ function resolveElementId(ref, prefix) {
     return existingId || nextIdFor(prefix);
 }
 
+class SolarisMegaMenuPanelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuPanelDirective, isStandalone: true, selector: "ng-template[solaris-mega-menu-panel]", exportAs: ["solarisMegaMenuPanel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-mega-menu-panel]',
+                    standalone: true,
+                    exportAs: 'solarisMegaMenuPanel',
+                }]
+        }] });
+
+const getMegaMenuPanelWidth = (panelWidth, anchor, trigger, viewportWidth) => {
+    switch (panelWidth) {
+        case 'trigger':
+            return trigger.getBoundingClientRect().width;
+        case 'anchor':
+            return anchor.getBoundingClientRect().width;
+        case 'viewport':
+            return viewportWidth;
+    }
+};
+
+const SOLARIS_MEGA_MENU = new InjectionToken('SOLARIS_MEGA_MENU');
+const SOLARIS_MEGA_MENU_GROUP = new InjectionToken('SOLARIS_MEGA_MENU_GROUP');
+const SOLARIS_MEGA_MENU_ANCHOR = new InjectionToken('SOLARIS_MEGA_MENU_ANCHOR');
+
+// SECURITY_EXCEPTION_FILE: ElementRef and injected DOCUMENT support focus restoration, overlay geometry, and browser-only event listeners. Angular bindings cannot express these imperative DOM APIs; component specs cover open, close, focus, and viewport behavior.
+const MEGA_MENU_ANCHOR_ERROR = 'SolarisMegaMenuComponent requires an ancestor with the [solaris-mega-menu-anchor] directive. The anchor defines the menu panel position and width, and the interactive area excluded from the backdrop. Add solaris-mega-menu-anchor to the navigation container that wraps this mega menu.';
+class SolarisMegaMenuComponent {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    hostElement = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT$1);
+    group = inject(SOLARIS_MEGA_MENU_GROUP, { optional: true });
+    anchorControl = inject(SOLARIS_MEGA_MENU_ANCHOR, { optional: true });
+    overlayPanel;
+    panel = contentChild(SolarisMegaMenuPanelDirective, ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    openState = model(false, { ...(ngDevMode ? { debugName: "openState" } : /* istanbul ignore next */ {}), alias: 'open' });
+    panelWidth = input('viewport', ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    appearance = input('underline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    backdrop = input(false, ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    persistentOnClick = input(false, ...(ngDevMode ? [{ debugName: "persistentOnClick" }] : /* istanbul ignore next */ []));
+    hoverOpenDelay = input(120, ...(ngDevMode ? [{ debugName: "hoverOpenDelay" }] : /* istanbul ignore next */ []));
+    hoverCloseDelay = input(160, ...(ngDevMode ? [{ debugName: "hoverCloseDelay" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    panelId = nextIdFor('solaris-mega-menu-panel');
+    isOpen = computed(() => this.openState(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isPinned = signal(false, ...(ngDevMode ? [{ debugName: "isPinned" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    scheduledOpen = null;
+    scheduledClose = null;
+    outsideClickCleanup = null;
+    resizeObserver = null;
+    viewportResizeCleanup = null;
+    backdropClickCleanup = null;
+    backdropRegions = [];
+    anchorUnderline = null;
+    constructor() {
+        if (!this.anchorControl) {
+            throw new Error(MEGA_MENU_ANCHOR_ERROR);
+        }
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            if (this.openState()) {
+                this.attachPanel();
+            }
+            else {
+                this.detachPanel();
+            }
+        });
+        effect(() => {
+            this.appearance();
+            if (this.isOpen()) {
+                this.syncAnchorUnderline();
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearTimers();
+            this.removeOutsideClickHandler();
+            this.stopGeometryObserver();
+            this.clearBackdrop();
+            this.clearAnchorUnderline();
+            this.overlayRef?.dispose();
+        });
+    }
+    open() {
+        if (this.isOpen()) {
+            return;
+        }
+        this.clearTimers();
+        this.group?.open(this);
+        this.openState.set(true);
+    }
+    close(restoreFocus = false) {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.clearTimers();
+        this.isPinned.set(false);
+        this.openState.set(false);
+        this.group?.close(this);
+        if (restoreFocus) {
+            this.hostElement.nativeElement
+                .querySelector('[solaris-mega-menu-trigger]')
+                ?.focus();
+        }
+    }
+    toggleFromClick() {
+        if (this.persistentOnClick()) {
+            if (this.isOpen() && this.isPinned()) {
+                this.close();
+                return;
+            }
+            this.open();
+            this.isPinned.set(true);
+            return;
+        }
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    scheduleOpen() {
+        this.clearCloseTimer();
+        if (this.isOpen() || this.scheduledOpen) {
+            return;
+        }
+        this.scheduledOpen = setTimeout(() => {
+            this.scheduledOpen = null;
+            this.open();
+        }, this.hoverOpenDelay());
+    }
+    scheduleClose() {
+        this.clearOpenTimer();
+        if (!this.isOpen() || this.isPinned() || this.scheduledClose) {
+            return;
+        }
+        this.scheduledClose = setTimeout(() => {
+            this.scheduledClose = null;
+            this.close();
+        }, this.hoverCloseDelay());
+    }
+    cancelScheduledClose() {
+        this.clearCloseTimer();
+    }
+    onPanelPointerEnter() {
+        this.cancelScheduledClose();
+    }
+    onPanelPointerLeave() {
+        this.scheduleClose();
+    }
+    onPanelFocusOut() {
+        queueMicrotask(() => {
+            const activeElement = this.hostElement.nativeElement.ownerDocument.activeElement;
+            const trigger = this.hostElement.nativeElement.querySelector('[solaris-mega-menu-trigger]');
+            const panel = this.overlayRef?.overlayElement;
+            if (!trigger?.contains(activeElement) &&
+                !panel?.contains(activeElement)) {
+                this.close();
+            }
+        });
+    }
+    onPanelEscape(event) {
+        event.preventDefault();
+        this.close(true);
+    }
+    attachPanel() {
+        const panel = this.panel();
+        if (!panel || this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef ??= this.createOverlay();
+        this.overlayRef.attach(new TemplatePortal(this.overlayPanel, this.viewContainerRef));
+        this.updatePanelGeometry();
+        this.startGeometryObserver();
+        this.setupBackdrop();
+        if (!this.backdrop()) {
+            this.addOutsideClickHandler();
+        }
+        this.opened.emit();
+    }
+    detachPanel() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.clearBackdrop();
+        const backdrop = this.overlayRef.backdropElement;
+        this.overlayRef.detachBackdrop();
+        backdrop?.remove();
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.removeOutsideClickHandler();
+        this.stopGeometryObserver();
+        this.clearAnchorUnderline();
+        this.closed.emit();
+    }
+    createOverlay() {
+        const positionStrategy = this.createPositionStrategy();
+        const config = new OverlayConfig({
+            backdropClass: 'solaris-mega-menu-backdrop',
+            hasBackdrop: this.backdrop(),
+            positionStrategy,
+            scrollStrategy: this.backdrop()
+                ? this.overlay.scrollStrategies.block()
+                : this.overlay.scrollStrategies.reposition(),
+        });
+        const overlayRef = this.overlay.create(config);
+        positionStrategy.positionChanges.subscribe(({ connectionPair }) => {
+            const panel = overlayRef.overlayElement.querySelector('.solaris-mega-menu__panel');
+            if (connectionPair.originY === 'top') {
+                panel?.style.setProperty('--solaris-mega-menu-shadow', 'none');
+            }
+            else {
+                panel?.style.removeProperty('--solaris-mega-menu-shadow');
+            }
+        });
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                this.close(true);
+            }
+        });
+        return overlayRef;
+    }
+    addOutsideClickHandler() {
+        this.removeOutsideClickHandler();
+        const onPointerDown = (event) => {
+            const target = event.target;
+            const trigger = this.hostElement.nativeElement.querySelector('[solaris-mega-menu-trigger]');
+            if (!target ||
+                trigger?.contains(target) ||
+                this.overlayRef?.overlayElement.contains(target)) {
+                return;
+            }
+            this.close();
+        };
+        this.document.addEventListener('pointerdown', onPointerDown, true);
+        this.outsideClickCleanup = () => {
+            this.document.removeEventListener('pointerdown', onPointerDown, true);
+        };
+    }
+    removeOutsideClickHandler() {
+        this.outsideClickCleanup?.();
+        this.outsideClickCleanup = null;
+    }
+    createPositionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.anchor.element)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+        ])
+            .withFlexibleDimensions(false)
+            .withPush(true);
+    }
+    get anchor() {
+        if (!this.anchorControl) {
+            throw new Error(MEGA_MENU_ANCHOR_ERROR);
+        }
+        return this.anchorControl;
+    }
+    updatePanelGeometry() {
+        if (!this.overlayRef) {
+            return;
+        }
+        this.overlayRef.updateSize({
+            width: getMegaMenuPanelWidth(this.panelWidth(), this.anchor.element, this.getTrigger(), this.hostElement.nativeElement.ownerDocument.defaultView?.innerWidth ??
+                0),
+        });
+        this.overlayRef.updatePosition();
+        this.updateBackdropGeometry();
+        this.syncAnchorUnderline();
+    }
+    syncAnchorUnderline() {
+        const anchor = this.anchor.element;
+        if (!this.isOpen() || this.appearance() !== 'underline') {
+            this.clearAnchorUnderline();
+            return;
+        }
+        const anchorRect = anchor.getBoundingClientRect();
+        const triggerRect = this.getTrigger().getBoundingClientRect();
+        this.anchorUnderline ??= this.createAnchorUnderline(anchor);
+        this.anchorUnderline.style.left = `${triggerRect.left - anchorRect.left}px`;
+        this.anchorUnderline.style.width = `${triggerRect.width}px`;
+    }
+    clearAnchorUnderline() {
+        this.anchorUnderline?.remove();
+        this.anchorUnderline = null;
+    }
+    createAnchorUnderline(anchor) {
+        const underline = this.document.createElement('span');
+        underline.className = 'solaris-mega-menu-anchor__underline';
+        anchor.appendChild(underline);
+        return underline;
+    }
+    setupBackdrop() {
+        const backdrop = this.overlayRef?.backdropElement;
+        if (!backdrop) {
+            return;
+        }
+        this.backdropRegions = ['top', 'left', 'right', 'bottom'].map((position) => {
+            const region = this.document.createElement('span');
+            region.className = `solaris-mega-menu-backdrop__region solaris-mega-menu-backdrop__region--${position}`;
+            backdrop.appendChild(region);
+            return region;
+        });
+        const subscription = this.overlayRef?.backdropClick().subscribe(() => {
+            this.close();
+        });
+        this.backdropClickCleanup = () => subscription?.unsubscribe();
+        this.updateBackdropGeometry();
+    }
+    clearBackdrop() {
+        this.backdropClickCleanup?.();
+        this.backdropClickCleanup = null;
+        this.backdropRegions.forEach((region) => region.remove());
+        this.backdropRegions = [];
+    }
+    updateBackdropGeometry() {
+        const backdrop = this.overlayRef?.backdropElement;
+        if (!backdrop || this.backdropRegions.length !== 4) {
+            return;
+        }
+        const backdropRect = backdrop.getBoundingClientRect();
+        const viewport = this.document.defaultView;
+        const width = backdropRect.width || viewport?.innerWidth || 0;
+        const height = backdropRect.height || viewport?.innerHeight || 0;
+        const anchorRect = this.anchor.element.getBoundingClientRect();
+        const inset = 1;
+        const top = Math.max(0, Math.floor(anchorRect.top - backdropRect.top) - inset);
+        const right = Math.min(width, Math.ceil(anchorRect.right - backdropRect.left) + inset);
+        const bottom = Math.min(height, Math.ceil(anchorRect.bottom - backdropRect.top) + inset);
+        const left = Math.max(0, Math.floor(anchorRect.left - backdropRect.left) - inset);
+        const [topRegion, leftRegion, rightRegion, bottomRegion] = this.backdropRegions;
+        topRegion.style.height = `${top}px`;
+        leftRegion.style.top = `${top}px`;
+        leftRegion.style.height = `${bottom - top}px`;
+        leftRegion.style.width = `${left}px`;
+        rightRegion.style.top = `${top}px`;
+        rightRegion.style.height = `${bottom - top}px`;
+        rightRegion.style.width = `${width - right}px`;
+        bottomRegion.style.top = `${bottom}px`;
+    }
+    startGeometryObserver() {
+        const anchor = this.anchor.element;
+        const trigger = this.getTrigger();
+        const updateGeometry = () => this.updatePanelGeometry();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver(updateGeometry);
+            this.resizeObserver.observe(anchor);
+            this.resizeObserver.observe(trigger);
+        }
+        const viewport = this.hostElement.nativeElement.ownerDocument.defaultView;
+        viewport?.addEventListener('resize', updateGeometry);
+        this.viewportResizeCleanup = () => {
+            viewport?.removeEventListener('resize', updateGeometry);
+        };
+    }
+    stopGeometryObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        this.viewportResizeCleanup?.();
+        this.viewportResizeCleanup = null;
+    }
+    getTrigger() {
+        return (this.hostElement.nativeElement.querySelector('[solaris-mega-menu-trigger]') ?? this.hostElement.nativeElement);
+    }
+    clearTimers() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+    }
+    clearOpenTimer() {
+        if (this.scheduledOpen) {
+            clearTimeout(this.scheduledOpen);
+            this.scheduledOpen = null;
+        }
+    }
+    clearCloseTimer() {
+        if (this.scheduledClose) {
+            clearTimeout(this.scheduledClose);
+            this.scheduledClose = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SolarisMegaMenuComponent, isStandalone: true, selector: "solaris-mega-menu", inputs: { openState: { classPropertyName: "openState", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, persistentOnClick: { classPropertyName: "persistentOnClick", publicName: "persistentOnClick", isSignal: true, isRequired: false, transformFunction: null }, hoverOpenDelay: { classPropertyName: "hoverOpenDelay", publicName: "hoverOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, hoverCloseDelay: { classPropertyName: "hoverCloseDelay", publicName: "hoverCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openState: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null" }, classAttribute: "solaris-mega-menu" }, providers: [
+            {
+                provide: SOLARIS_MEGA_MENU,
+                useExisting: forwardRef(() => SolarisMegaMenuComponent),
+            },
+        ], queries: [{ propertyName: "panel", first: true, predicate: SolarisMegaMenuPanelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n  <section\n    class=\"solaris-mega-menu__panel\"\n    [id]=\"panelId\"\n    tabindex=\"-1\"\n    (pointerenter)=\"onPanelPointerEnter()\"\n    (pointerleave)=\"onPanelPointerLeave()\"\n    (focusout)=\"onPanelFocusOut()\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n  </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{order:1;flex:0 0 auto;transform:rotate(45deg);margin-inline-start:auto;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);border-right:var(--solaris-border-width-sm) solid currentcolor;border-bottom:var(--solaris-border-width-sm) solid currentcolor;transition:transform var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-open] .solaris-mega-menu-trigger__chevron{transform:rotate(-135deg)}[solaris-mega-menu-trigger][data-appearance=underline]{border-bottom:2px solid transparent}[solaris-mega-menu-trigger][data-appearance=underline][data-open]{border-bottom-color:transparent}[solaris-mega-menu-anchor]{position:relative}.solaris-mega-menu-anchor__underline{bottom:1px;height:2px;position:absolute;pointer-events:none;z-index:var(--solaris-z-index-raised);background:var(--solaris-primary-base);transition:left var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-appearance=underline]:hover,[solaris-mega-menu-trigger][data-appearance=underline]:focus-visible{background:transparent}[solaris-mega-menu-trigger][data-appearance=text]{color:var(--solaris-text-muted)}[solaris-mega-menu-trigger][data-appearance=text][data-open]{color:var(--solaris-text-strong)}.solaris-mega-menu__panel{--solaris-mega-menu-shadow: var(--solaris-shadow-lg);--solaris-mega-menu-color: var(--solaris-text-default);--solaris-mega-menu-background: var(--solaris-surface-raised);width:100%;box-sizing:border-box;color:var(--solaris-mega-menu-color);box-shadow:var(--solaris-mega-menu-shadow);background:var(--solaris-mega-menu-background);animation:solaris-mega-menu-enter var(--solaris-motion-duration-fast) var(--solaris-motion-easing-decelerate)}.cdk-overlay-backdrop.solaris-mega-menu-backdrop{pointer-events:none;background:transparent}.solaris-mega-menu-backdrop__region{display:block;position:absolute;pointer-events:auto;background:var(--solaris-backdrop)}.solaris-mega-menu-backdrop__region--top,.solaris-mega-menu-backdrop__region--bottom{right:0;left:0}.solaris-mega-menu-backdrop__region--top{top:0}.solaris-mega-menu-backdrop__region--bottom{bottom:0}.solaris-mega-menu-backdrop__region--left{left:0}.solaris-mega-menu-backdrop__region--right{right:0}@keyframes solaris-mega-menu-enter{0%{opacity:0;transform:translateY(calc(-1 * var(--solaris-spacing-1)))}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){[solaris-mega-menu-trigger],.solaris-mega-menu-anchor__underline,.solaris-mega-menu-trigger__chevron,.solaris-mega-menu__panel{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-mega-menu', standalone: true, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], providers: [
+                        {
+                            provide: SOLARIS_MEGA_MENU,
+                            useExisting: forwardRef(() => SolarisMegaMenuComponent),
+                        },
+                    ], host: {
+                        class: 'solaris-mega-menu',
+                        '[attr.data-open]': 'isOpen() ? "" : null',
+                    }, template: "<ng-content select=\"[solaris-mega-menu-trigger]\" />\n<ng-content select=\"ng-template[solaris-mega-menu-panel]\" />\n\n<ng-template #overlayPanel>\n  <section\n    class=\"solaris-mega-menu__panel\"\n    [id]=\"panelId\"\n    tabindex=\"-1\"\n    (pointerenter)=\"onPanelPointerEnter()\"\n    (pointerleave)=\"onPanelPointerLeave()\"\n    (focusout)=\"onPanelFocusOut()\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"panel()?.templateRef\" />\n  </section>\n</ng-template>\n", styles: ["solaris-mega-menu{display:inline-block}[solaris-mega-menu-trigger]{display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-mega-menu-trigger__chevron{order:1;flex:0 0 auto;transform:rotate(45deg);margin-inline-start:auto;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);border-right:var(--solaris-border-width-sm) solid currentcolor;border-bottom:var(--solaris-border-width-sm) solid currentcolor;transition:transform var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-open] .solaris-mega-menu-trigger__chevron{transform:rotate(-135deg)}[solaris-mega-menu-trigger][data-appearance=underline]{border-bottom:2px solid transparent}[solaris-mega-menu-trigger][data-appearance=underline][data-open]{border-bottom-color:transparent}[solaris-mega-menu-anchor]{position:relative}.solaris-mega-menu-anchor__underline{bottom:1px;height:2px;position:absolute;pointer-events:none;z-index:var(--solaris-z-index-raised);background:var(--solaris-primary-base);transition:left var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}[solaris-mega-menu-trigger][data-appearance=underline]:hover,[solaris-mega-menu-trigger][data-appearance=underline]:focus-visible{background:transparent}[solaris-mega-menu-trigger][data-appearance=text]{color:var(--solaris-text-muted)}[solaris-mega-menu-trigger][data-appearance=text][data-open]{color:var(--solaris-text-strong)}.solaris-mega-menu__panel{--solaris-mega-menu-shadow: var(--solaris-shadow-lg);--solaris-mega-menu-color: var(--solaris-text-default);--solaris-mega-menu-background: var(--solaris-surface-raised);width:100%;box-sizing:border-box;color:var(--solaris-mega-menu-color);box-shadow:var(--solaris-mega-menu-shadow);background:var(--solaris-mega-menu-background);animation:solaris-mega-menu-enter var(--solaris-motion-duration-fast) var(--solaris-motion-easing-decelerate)}.cdk-overlay-backdrop.solaris-mega-menu-backdrop{pointer-events:none;background:transparent}.solaris-mega-menu-backdrop__region{display:block;position:absolute;pointer-events:auto;background:var(--solaris-backdrop)}.solaris-mega-menu-backdrop__region--top,.solaris-mega-menu-backdrop__region--bottom{right:0;left:0}.solaris-mega-menu-backdrop__region--top{top:0}.solaris-mega-menu-backdrop__region--bottom{bottom:0}.solaris-mega-menu-backdrop__region--left{left:0}.solaris-mega-menu-backdrop__region--right{right:0}@keyframes solaris-mega-menu-enter{0%{opacity:0;transform:translateY(calc(-1 * var(--solaris-spacing-1)))}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){[solaris-mega-menu-trigger],.solaris-mega-menu-anchor__underline,.solaris-mega-menu-trigger__chevron,.solaris-mega-menu__panel{animation:none;transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { overlayPanel: [{
+                type: ViewChild,
+                args: ['overlayPanel', { static: true }]
+            }], panel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisMegaMenuPanelDirective), { isSignal: true }] }], openState: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], persistentOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistentOnClick", required: false }] }], hoverOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverOpenDelay", required: false }] }], hoverCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverCloseDelay", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// SECURITY_EXCEPTION_FILE: The CDK connected overlay requires the anchor HTMLElement as its positioning origin. Exposing the injected host avoids document lookup; mega-menu component specs cover anchored positioning.
+class SolarisMegaMenuAnchorDirective {
+    elementRef = inject(ElementRef);
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuAnchorDirective, isStandalone: true, selector: "[solaris-mega-menu-anchor]", providers: [
+            {
+                provide: SOLARIS_MEGA_MENU_ANCHOR,
+                useExisting: SolarisMegaMenuAnchorDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-mega-menu-anchor]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SOLARIS_MEGA_MENU_ANCHOR,
+                            useExisting: SolarisMegaMenuAnchorDirective,
+                        },
+                    ],
+                }]
+        }] });
+
+class SolarisMegaMenuGroupDirective {
+    activeMenu = null;
+    open(menu) {
+        if (this.activeMenu && this.activeMenu !== menu) {
+            this.activeMenu.close(false);
+        }
+        this.activeMenu = menu;
+    }
+    close(menu) {
+        if (this.activeMenu === menu) {
+            this.activeMenu = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuGroupDirective, isStandalone: true, selector: "[solaris-mega-menu-group]", providers: [
+            {
+                provide: SOLARIS_MEGA_MENU_GROUP,
+                useExisting: SolarisMegaMenuGroupDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-mega-menu-group]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SOLARIS_MEGA_MENU_GROUP,
+                            useExisting: SolarisMegaMenuGroupDirective,
+                        },
+                    ],
+                }]
+        }] });
+
+// SECURITY_EXCEPTION_FILE: Native host access sets the semantic button type. Renderer2 creates the decorative chevron for both SSR and browser rendering; directive specs cover trigger semantics and interaction.
+class SolarisMegaMenuTriggerDirective {
+    megaMenu = inject(SOLARIS_MEGA_MENU);
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    isPointerInteraction = false;
+    constructor() {
+        if (this.elementRef.nativeElement.getAttribute('type') === null) {
+            this.elementRef.nativeElement.setAttribute('type', 'button');
+        }
+        this.ensureChevron();
+    }
+    onClick() {
+        this.megaMenu.toggleFromClick();
+        this.isPointerInteraction = false;
+    }
+    onPointerDown() {
+        this.isPointerInteraction = true;
+    }
+    onPointerCancel() {
+        this.isPointerInteraction = false;
+    }
+    onPointerEnter() {
+        this.megaMenu.scheduleOpen();
+    }
+    onPointerLeave() {
+        this.megaMenu.scheduleClose();
+    }
+    onFocusIn() {
+        if (this.isPointerInteraction) {
+            return;
+        }
+        this.megaMenu.open();
+    }
+    onArrowDown(event) {
+        event.preventDefault();
+        this.megaMenu.open();
+    }
+    onEscape(event) {
+        event.preventDefault();
+        this.megaMenu.close(true);
+    }
+    ensureChevron() {
+        const host = this.elementRef.nativeElement;
+        if (host.querySelector('.solaris-mega-menu-trigger__chevron')) {
+            return;
+        }
+        const chevron = this.renderer.createElement('span');
+        this.renderer.addClass(chevron, 'solaris-mega-menu-trigger__chevron');
+        this.renderer.setAttribute(chevron, 'aria-hidden', 'true');
+        this.renderer.appendChild(host, chevron);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisMegaMenuTriggerDirective, isStandalone: true, selector: "button[solaris-mega-menu-trigger]", host: { listeners: { "click": "onClick()", "pointerdown": "onPointerDown()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "focusin": "onFocusIn()", "keydown.arrowdown": "onArrowDown($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.aria-controls": "megaMenu.panelId", "attr.aria-expanded": "megaMenu.isOpen() ? \"true\" : \"false\"", "attr.aria-haspopup": "\"true\"", "attr.data-open": "megaMenu.isOpen() ? \"\" : null", "attr.data-appearance": "megaMenu.appearance()" }, classAttribute: "solaris-mega-menu-trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMegaMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[solaris-mega-menu-trigger]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-controls]': 'megaMenu.panelId',
+                        '[attr.aria-expanded]': 'megaMenu.isOpen() ? "true" : "false"',
+                        '[attr.aria-haspopup]': '"true"',
+                        '[attr.data-open]': 'megaMenu.isOpen() ? "" : null',
+                        '[attr.data-appearance]': 'megaMenu.appearance()',
+                        class: 'solaris-mega-menu-trigger',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }], onPointerCancel: [{
+                type: HostListener,
+                args: ['pointercancel']
+            }], onPointerEnter: [{
+                type: HostListener,
+                args: ['pointerenter']
+            }], onPointerLeave: [{
+                type: HostListener,
+                args: ['pointerleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }] } });
+
 class SolarisOptionLeadingDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOptionLeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisOptionLeadingDirective, isStandalone: true, selector: "[solaris-option-leading]", ngImport: i0 });
@@ -15227,5 +15901,5 @@ function provideSolaris(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisOtpInputComponent, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisOtpValidator, solarisPasswordValidator, solarisPhoneValidator };
+export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisAnimatedIconComponent, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMegaMenuAnchorDirective, SolarisMegaMenuComponent, SolarisMegaMenuGroupDirective, SolarisMegaMenuPanelDirective, SolarisMegaMenuTriggerDirective, SolarisMenuToggleDirective, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisOtpInputComponent, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisOtpValidator, solarisPasswordValidator, solarisPhoneValidator };
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map