@educarehq/solaris-components 0.2.3 → 0.2.4

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,14 +1,377 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, ChangeDetectionStrategy, Component, signal, ContentChildren, HostListener, Optional, viewChild, inject, DestroyRef, input, booleanAttribute, numberAttribute, computed, afterNextRender, effect, Directive, ContentChild, ElementRef, InjectionToken, Renderer2, forwardRef, ViewChild, Injectable, Injector } from '@angular/core';
+import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, signal, ContentChildren, HostListener, Optional, viewChild, input, booleanAttribute, numberAttribute, computed, afterNextRender, effect, InjectionToken, forwardRef, ViewChild, Injector } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { fromEvent, merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { RouterLink } from '@angular/router';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import intlTelInput from 'intl-tel-input';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SolarisTranslationPipe } from '@educarehq/solaris-services';
-import { merge } from 'rxjs';
+
+class SolarisDropdownContentTriggerDirective {
+    elementRef = inject((ElementRef));
+    solarisRenderer = inject(Renderer2);
+    ensureFocusable() {
+        const solarisEl = this.elementRef.nativeElement;
+        const solarisTag = solarisEl.tagName.toLowerCase();
+        const solarisIsNaturallyFocusable = solarisTag === 'button' || solarisTag === 'a' ||
+            solarisEl.hasAttribute('tabindex');
+        if (!solarisIsNaturallyFocusable) {
+            this.solarisRenderer.setAttribute(solarisEl, 'tabindex', '0');
+            this.solarisRenderer.setAttribute(solarisEl, 'role', 'button');
+        }
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-haspopup', 'true');
+    }
+    setExpanded(isExpanded, panelId) {
+        const solarisEl = this.elementRef.nativeElement;
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-expanded', String(isExpanded));
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-controls', panelId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContentTriggerDirective, isStandalone: true, selector: "[solaris-dropdown-content-trigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-dropdown-content-trigger]',
+                    standalone: true
+                }]
+        }] });
+
+class SolarisDropdownContentPanelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContentPanelDirective, isStandalone: true, selector: "ng-template[solaris-dropdown-content-panel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-dropdown-content-panel]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisDropdownContentRegistry {
+    solarisInstances = new Set();
+    register(instance) {
+        this.solarisInstances.add(instance);
+    }
+    unregister(instance) {
+        this.solarisInstances.delete(instance);
+    }
+    notifyOpen(openingInstance) {
+        for (const solarisInstance of this.solarisInstances) {
+            if (solarisInstance !== openingInstance) {
+                solarisInstance.closeFromRegistry();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SolarisDropdownContent {
+    solarisRegistry = inject(SolarisDropdownContentRegistry);
+    solarisVcr = inject(ViewContainerRef);
+    solarisDestroyRef = inject(DestroyRef);
+    solarisOverlay = inject(Overlay);
+    trigger;
+    panel;
+    container;
+    widthMode = 'auto';
+    maxWidth = '72rem';
+    closeDelay = 120;
+    openDelay = 60;
+    solarisPanelId = `solaris-dropdown-panel-${Math.random().toString(16).slice(2)}`;
+    solarisIsHoveringTrigger = false;
+    solarisPortal;
+    solarisIsHoveringPanel = false;
+    solarisOutsideClickSub;
+    solarisIsPinned = false;
+    solarisOverlayRef;
+    solarisIsOpen = false;
+    solarisCloseTimer;
+    solarisOpenTimer;
+    ngAfterContentInit() {
+        if (!this.trigger)
+            throw new Error('solaris-dropdown: missing [solaris-dropdown-trigger].');
+        if (!this.panel)
+            throw new Error('solaris-dropdown: missing <ng-template solaris-dropdown-content-panel>.');
+        this.solarisRegistry.register(this);
+        this.trigger.ensureFocusable();
+        this.trigger.setExpanded(false, this.solarisPanelId);
+        const solarisTriggerEl = this.trigger.elementRef.nativeElement;
+        fromEvent(solarisTriggerEl, 'mouseenter').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnTriggerEnter());
+        fromEvent(solarisTriggerEl, 'mouseleave').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnTriggerLeave());
+        fromEvent(solarisTriggerEl, 'click').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            solarisEvent.preventDefault();
+            this.solarisTogglePinned();
+        });
+        fromEvent(solarisTriggerEl, 'keydown').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            if (solarisEvent.key === 'Enter' || solarisEvent.key === ' ') {
+                solarisEvent.preventDefault();
+                this.solarisTogglePinned();
+            }
+            if (solarisEvent.key === 'Escape') {
+                solarisEvent.preventDefault();
+                this.close('escape');
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.solarisRegistry.unregister(this);
+        this.solarisUnbindOutsideClick();
+        this.solarisOverlayRef?.dispose();
+    }
+    closeFromRegistry() {
+        this.close('registry');
+    }
+    solarisOnTriggerEnter() {
+        this.solarisIsHoveringTrigger = true;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleOpen('hover');
+    }
+    solarisOnTriggerLeave() {
+        this.solarisIsHoveringTrigger = false;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleClose();
+    }
+    solarisOnPanelEnter() {
+        this.solarisIsHoveringPanel = true;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisClearCloseTimer();
+    }
+    solarisOnPanelLeave() {
+        this.solarisIsHoveringPanel = false;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleClose();
+    }
+    solarisTogglePinned() {
+        if (!this.solarisIsOpen) {
+            this.solarisIsPinned = true;
+            this.open('pinned');
+            return;
+        }
+        if (this.solarisIsPinned) {
+            this.close('toggle');
+            return;
+        }
+        this.solarisIsPinned = true;
+        this.solarisBindOutsideClick();
+    }
+    solarisScheduleOpen(reason) {
+        this.solarisClearOpenTimer();
+        this.solarisOpenTimer = globalThis.setTimeout(() => this.open(reason), this.openDelay);
+    }
+    solarisScheduleClose() {
+        this.solarisClearCloseTimer();
+        this.solarisCloseTimer = globalThis.setTimeout(() => {
+            if (this.solarisIsPinned)
+                return;
+            if (this.solarisIsHoveringTrigger || this.solarisIsHoveringPanel)
+                return;
+            this.close('hover-leave');
+        }, this.closeDelay);
+    }
+    solarisClearOpenTimer() {
+        if (this.solarisOpenTimer)
+            globalThis.clearTimeout(this.solarisOpenTimer);
+        this.solarisOpenTimer = undefined;
+    }
+    solarisClearCloseTimer() {
+        if (this.solarisCloseTimer)
+            globalThis.clearTimeout(this.solarisCloseTimer);
+        this.solarisCloseTimer = undefined;
+    }
+    open(reason) {
+        if (!this.trigger || !this.panel)
+            return;
+        if (reason === 'hover')
+            this.solarisIsPinned = false;
+        this.solarisRegistry.notifyOpen(this);
+        const solarisTriggerEl = this.trigger.elementRef.nativeElement;
+        const solarisOriginRect = solarisTriggerEl.getBoundingClientRect();
+        const solarisContainerEl = this.solarisGetContainerEl();
+        const solarisContainerRect = solarisContainerEl?.getBoundingClientRect();
+        const solarisIsFull = this.widthMode === 'full';
+        const solarisViewportMargin = solarisIsFull ? 0 : 8;
+        const solarisOffsetX = this.solarisComputeOffsetX(solarisOriginRect, solarisContainerRect);
+        const solarisPositionStrategy = this.solarisOverlay
+            .position().flexibleConnectedTo(solarisTriggerEl)
+            .withFlexibleDimensions(false).withPush(!solarisIsFull)
+            .withViewportMargin(solarisViewportMargin).withDefaultOffsetX(solarisOffsetX)
+            .withDefaultOffsetY(8).withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        ]);
+        if (this.solarisOverlayRef) {
+            this.solarisOverlayRef.updatePositionStrategy(solarisPositionStrategy);
+        }
+        else {
+            this.solarisOverlayRef = this.solarisOverlay.create({
+                positionStrategy: solarisPositionStrategy,
+                scrollStrategy: this.solarisOverlay.scrollStrategies.reposition(),
+                panelClass: ['solaris-dropdown-content-overlay']
+            });
+            this.solarisOverlayRef.detachments().pipe(takeUntilDestroyed(this.solarisDestroyRef))
+                .subscribe(() => this.solarisResetState());
+        }
+        this.solarisApplyOverlaySize(solarisOriginRect, solarisContainerRect);
+        this.solarisPortal ??= new TemplatePortal(this.panel.templateRef, this.solarisVcr);
+        if (!this.solarisOverlayRef.hasAttached()) {
+            this.solarisOverlayRef.attach(this.solarisPortal);
+            this.solarisWirePanelEvents();
+        }
+        this.solarisIsOpen = true;
+        this.trigger.setExpanded(true, this.solarisPanelId);
+        if (this.solarisIsPinned) {
+            this.solarisBindOutsideClick();
+        }
+        else {
+            this.solarisUnbindOutsideClick();
+        }
+        this.solarisClearCloseTimer();
+    }
+    close(reason) {
+        this.solarisClearOpenTimer();
+        this.solarisClearCloseTimer();
+        this.solarisIsPinned = false;
+        this.solarisUnbindOutsideClick();
+        if (this.solarisOverlayRef?.hasAttached()) {
+            this.solarisOverlayRef.detach();
+        }
+        this.solarisIsOpen = false;
+        this.trigger?.setExpanded(false, this.solarisPanelId);
+    }
+    solarisResetState() {
+        this.solarisIsOpen = false;
+        this.solarisIsPinned = false;
+        this.solarisIsHoveringPanel = false;
+        this.solarisIsHoveringTrigger = false;
+        this.solarisUnbindOutsideClick();
+        this.trigger?.setExpanded(false, this.solarisPanelId);
+    }
+    solarisWirePanelEvents() {
+        if (!this.solarisOverlayRef)
+            return;
+        const solarisPanelHost = this.solarisOverlayRef.overlayElement;
+        solarisPanelHost.id = this.solarisPanelId;
+        fromEvent(solarisPanelHost, 'mouseenter').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnPanelEnter());
+        fromEvent(solarisPanelHost, 'mouseleave').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnPanelLeave());
+        fromEvent(solarisPanelHost, 'keydown').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            if (solarisEvent.key === 'Escape') {
+                solarisEvent.preventDefault();
+                this.close('escape');
+                this.trigger?.elementRef.nativeElement.focus();
+            }
+        });
+    }
+    solarisBindOutsideClick() {
+        if (!this.solarisIsPinned)
+            return;
+        if (this.solarisOutsideClickSub)
+            return;
+        const solarisTriggerEl = this.trigger?.elementRef.nativeElement;
+        const solarisOverlayEl = this.solarisOverlayRef?.overlayElement;
+        if (!solarisTriggerEl || !solarisOverlayEl)
+            return;
+        this.solarisOutsideClickSub = fromEvent(document, 'mousedown')
+            .pipe(filter(() => this.solarisIsPinned), filter((solarisEvent) => {
+            const solarisTarget = solarisEvent.target;
+            if (!solarisTarget)
+                return false;
+            const solarisInsideTrigger = solarisTriggerEl.contains(solarisTarget);
+            const solarisInsidePanel = solarisOverlayEl.contains(solarisTarget);
+            return !solarisInsideTrigger && !solarisInsidePanel;
+        }), takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.close('outside'));
+    }
+    solarisUnbindOutsideClick() {
+        this.solarisOutsideClickSub?.unsubscribe();
+        this.solarisOutsideClickSub = undefined;
+    }
+    solarisGetContainerEl() {
+        const solarisContainer = this.container;
+        if (!solarisContainer)
+            return undefined;
+        return solarisContainer instanceof ElementRef ? solarisContainer.nativeElement : solarisContainer;
+    }
+    solarisComputeOffsetX(solarisOriginRect, solarisContainerRect) {
+        if (this.widthMode === 'full') {
+            return -solarisOriginRect.left;
+        }
+        if (this.widthMode === 'container' && solarisContainerRect) {
+            return solarisContainerRect.left - solarisOriginRect.left;
+        }
+        return 0;
+    }
+    solarisApplyOverlaySize(solarisOriginRect, solarisContainerRect) {
+        if (!this.solarisOverlayRef)
+            return;
+        if (this.widthMode === 'match-trigger') {
+            this.solarisOverlayRef.updateSize({ width: solarisOriginRect.width });
+            return;
+        }
+        if (this.widthMode === 'full') {
+            const solarisViewportWidth = document.documentElement.clientWidth;
+            this.solarisOverlayRef.updateSize({
+                width: solarisViewportWidth,
+                maxWidth: solarisViewportWidth
+            });
+            return;
+        }
+        if (this.widthMode === 'container' && solarisContainerRect) {
+            this.solarisOverlayRef.updateSize({
+                width: solarisContainerRect.width,
+                maxWidth: solarisContainerRect.width,
+            });
+            return;
+        }
+        this.solarisOverlayRef.updateSize({ maxWidth: this.maxWidth });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContent, isStandalone: true, selector: "solaris-dropdown-content", inputs: { container: "container", widthMode: "widthMode", maxWidth: "maxWidth", closeDelay: "closeDelay", openDelay: "openDelay" }, queries: [{ propertyName: "trigger", first: true, predicate: SolarisDropdownContentTriggerDirective, descendants: true }, { propertyName: "panel", first: true, predicate: SolarisDropdownContentPanelDirective, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".solaris-dropdown-content-overlay{width:100%;display:block;z-index:var(--solaris-z-dropdown);padding:var(--solaris-dropdown-content-padding, var(--solaris-space-6));box-shadow:var(--solaris-dropdown-content-shadow, var(--solaris-shadow-md));background:var(--solaris-dropdown-content-bg, var(--solaris-color-surface));border-radius:var(--solaris-dropdown-content-radius, var(--solaris-radius-lg));border:1px solid var(--solaris-dropdown-content-border, var(--solaris-color-border))}.solaris-dropdown-content-overlay:focus{outline:none}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dropdown-content', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n", styles: [".solaris-dropdown-content-overlay{width:100%;display:block;z-index:var(--solaris-z-dropdown);padding:var(--solaris-dropdown-content-padding, var(--solaris-space-6));box-shadow:var(--solaris-dropdown-content-shadow, var(--solaris-shadow-md));background:var(--solaris-dropdown-content-bg, var(--solaris-color-surface));border-radius:var(--solaris-dropdown-content-radius, var(--solaris-radius-lg));border:1px solid var(--solaris-dropdown-content-border, var(--solaris-color-border))}.solaris-dropdown-content-overlay:focus{outline:none}\n"] }]
+        }], propDecorators: { trigger: [{
+                type: ContentChild,
+                args: [SolarisDropdownContentTriggerDirective]
+            }], panel: [{
+                type: ContentChild,
+                args: [SolarisDropdownContentPanelDirective]
+            }], container: [{
+                type: Input
+            }], widthMode: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], openDelay: [{
+                type: Input
+            }] } });
 
 class SolarisBreadcrumb {
     minItems = 2;
@@ -290,7 +653,7 @@ class SolarisLoadingOverlay {
         }
     }
     get overlayStyle() {
-        return this.zIndex != null ? { 'z-index': String(this.zIndex) } : null;
+        return this.zIndex == null ? null : { 'z-index': String(this.zIndex) };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisLoadingOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisLoadingOverlay, isStandalone: true, selector: "solaris-loading-overlay", inputs: { zIndex: ["z-index", "zIndex"], backdrop: "backdrop", appearance: "appearance", blur: ["blur", "blur", coerceBoolean$1], open: ["open", "open", coerceBoolean$1], lockScroll: ["lock-scroll", "lockScroll", coerceBoolean$1] }, host: { properties: { "attr.solaris-loading-overlay": "this.marker" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div class=\"solaris-loading-overlay\" [class.backdrop-soft]=\"backdrop === 'soft'\"\r\n       [class.backdrop-strong]=\"backdrop === 'strong'\" [class.is-blur]=\"blur\"\r\n       [class.appearance-card]=\"appearance === 'card'\" [class.appearance-minimal]=\"appearance === 'minimal'\"\r\n       [ngStyle]=\"overlayStyle\" role=\"presentation\">\r\n    <div class=\"solaris-loading-overlay__backdrop\" aria-hidden=\"true\"></div>\r\n\r\n    <div class=\"solaris-loading-overlay__content\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.solaris-loading-overlay{--solaris-overlay-z: var(--solaris-z-overlay, 2000);position:fixed;inset:0;z-index:var(--solaris-overlay-z);display:grid;place-items:center;pointer-events:auto}.solaris-loading-overlay__backdrop{position:absolute;inset:0;background:#00000059}.solaris-loading-overlay.backdrop-strong .solaris-loading-overlay__backdrop{background:#0000008c}.solaris-loading-overlay.is-blur .solaris-loading-overlay__backdrop{-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.solaris-loading-overlay__content{position:relative;z-index:1;display:grid;place-items:center;gap:var(--solaris-space-3);color:var(--solaris-color-text);outline:none}.solaris-loading-overlay.appearance-card .solaris-loading-overlay__content{min-width:18rem;max-width:min(42rem,100vw - 4rem);padding:var(--solaris-space-6);border-radius:var(--solaris-radius-md);border:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent);background:color-mix(in srgb,var(--solaris-color-surface) 88%,transparent);box-shadow:var(--solaris-shadow-md)}.solaris-loading-overlay.appearance-minimal .solaris-loading-overlay__content{padding:0;border:0;background:transparent;box-shadow:none}:host ::ng-deep [solaris-loading-overlay-text]{font-size:var(--solaris-fs-14);color:color-mix(in srgb,var(--solaris-color-text) 85%,transparent);text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -662,13 +1025,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-class SolarisPageComponent {
+class SolarisPage {
     stickyHeader = false;
     container = 'contained';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageComponent, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPage, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPage, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-page', standalone: true, imports: [NgClass, SolarisDivider], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-page-host',
@@ -1858,5 +2221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisButtonGroupDirective, SolarisControlBridgeDirective, SolarisDivider, SolarisEmailDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisPageComponent, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPrefixDirective, SolarisSectionComponent, SolarisSuffixDirective, SolarisTab, SolarisTabs };
+export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisButtonGroupDirective, SolarisControlBridgeDirective, SolarisDivider, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPrefixDirective, SolarisSectionComponent, SolarisSuffixDirective, SolarisTab, SolarisTabs };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map