@elderbyte/ngx-starter 20.4.5 → 20.4.7

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -8407,10 +8407,6 @@ class FocusUtil {
 
 const booleanTransformFn = (input) => coerceBooleanProperty(input);
 
-const someSignal = (items, fn) => {
-    return items.map(fn).some(Boolean);
-};
-
 var SelectionEventSource;
 (function (SelectionEventSource) {
     SelectionEventSource["USER_MOUSE_CLICK"] = "USER_MOUSE_CLICK";
@@ -10639,11 +10635,11 @@ class ElderExpandToggleButtonComponent {
         this.expanded = !this.expanded;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
+            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
         }], propDecorators: { expandedChange: [{
                 type: Output
             }], expanded: [{
@@ -11055,6 +11051,16 @@ class ElderTogglePanelTriggerDirective {
             this.handleTrigger();
         }
     }
+    handleKeyDown(event) {
+        // on click type handle also keydown events
+        if (this.type === 'click') {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleTrigger();
+            }
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -11066,7 +11072,7 @@ class ElderTogglePanelTriggerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)", "keydown": "handleKeyDown($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, decorators: [{
             type: Directive,
@@ -11089,6 +11095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             }], handleFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class ElderPanelModule {
@@ -28701,11 +28710,11 @@ class ElderNavListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n  <div\n    class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\">\n  <div\n    class=\"layout-col p-sm flex scrollable\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n  <div\n    class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
+            args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\">\n  <div\n    class=\"layout-col p-sm flex scrollable\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { compareWith: [{
                 type: Input
             }], valueChange: [{
@@ -28721,7 +28730,7 @@ class NavItemModel {
         this.hrefTarget = hrefTarget;
     }
 }
-class NavItemClicked {
+class NavItemActivated {
     constructor(event, value) {
         this.event = event;
         this.value = value;
@@ -28733,64 +28742,100 @@ class ElderNavLinkComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() {
+    constructor(navList) {
+        this.navList = navList;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.navList = inject(ElderNavListComponent);
-        // reference to the value of the nav item
-        // (used to check if the item is active in non-router links)
-        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.fontIcon = input('', ...(ngDevMode ? [{ debugName: "fontIcon" }] : []));
-        this.fontSet = input('', ...(ngDevMode ? [{ debugName: "fontSet" }] : []));
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-        this.svgIcon = input('', ...(ngDevMode ? [{ debugName: "svgIcon" }] : []));
-        this.routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
-        this.queryParams = input({}, ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
-        this.queryParamsHandling = input('', ...(ngDevMode ? [{ debugName: "queryParamsHandling" }] : []));
-        this.href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
-        this.target = input('', ...(ngDevMode ? [{ debugName: "target" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanTransformFn }] : [{ transform: booleanTransformFn }]));
-        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this.clicked = output();
-        this.model = computed(() => {
-            return new NavItemModel(this.routerLink(), this.href(), this.target());
-        }, ...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.navLinkClasses = computed(() => ({
-            'nav-link-clickable': !this.disabled(),
-            'nav-link-disabled': this.disabled(),
-            'nav-link-active': this.active(),
-            'nav-link-inactive': !this.active(),
-        }), ...(ngDevMode ? [{ debugName: "navLinkClasses" }] : []));
-        this.navList.valueChange.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.active.set(this.isCurrentValueActive);
-        });
+        this.tabIndex = -1;
+        this.queryParams = {};
+        this.activated = new Subject();
+        this._disabled = false;
+        this._routerLink$ = new BehaviorSubject('');
+        this._href$ = new BehaviorSubject('');
+        this._target$ = new BehaviorSubject('_blank');
+        this._routerLinkActive$ = new BehaviorSubject(undefined);
+        this._active$ = new BehaviorSubject(false);
+        this.destroy$ = new Subject();
+        this.model$ = this._routerLink$.pipe(combineLatestWith(this._href$), combineLatestWith(this._target$), map(([[routerLink, href], target]) => new NavItemModel(routerLink, href, target)));
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngAfterViewInit() {
-        if (this.value() !== null && this.value() !== undefined) {
-            this.active.set(this.isCurrentValueActive);
+    ngOnInit() {
+        this._routerLinkActive$
+            .pipe(takeUntil(this.destroy$), filter((rla) => !!rla), switchMap((rla) => {
+            return rla.isActiveChange.pipe(startWith(rla.isActive));
+        }))
+            .subscribe((active) => this._active$.next(active));
+        this.navList.valueChange
+            .pipe(takeUntil(this.destroy$), map((value) => this.isCurrentValueActive))
+            .subscribe((active) => this._active$.next(active));
+        if (this.value) {
+            this._active$.next(this.isCurrentValueActive);
         }
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get active$() {
+        return this._active$;
+    }
+    set routerLinkActive(rla) {
+        this._routerLinkActive$.next(rla);
+    }
+    set routerLink(value) {
+        this._routerLink$.next(value);
+    }
+    set href(value) {
+        this._href$.next(value);
+    }
+    set target(value) {
+        this._target$.next(value);
+    }
+    set value(v) {
+        this._value = v;
+    }
+    get value() {
+        return this._value;
+    }
+    set disabled(v) {
+        this._disabled = coerceBooleanProperty(v);
+    }
+    get disabled() {
+        return this._disabled;
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    handleRouterLinkActiveChange(active) {
-        this.active.set(active);
+    itemActivated(event) {
+        if (!this._disabled) {
+            this.activated.next(new NavItemActivated(event, this.value));
+            if (this.value !== null) {
+                this.navList.value = this.value;
+            }
+        }
     }
     itemClick(event) {
-        if (!this.disabled()) {
-            this.clicked.emit(new NavItemClicked(event, this.value()));
-            this.navList.value = this.value();
+        this.itemActivated(event);
+    }
+    itemKeyDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === 'Enter' || event.key === ' ') {
+            this.itemActivated(event);
         }
     }
     /***************************************************************************
@@ -28799,25 +28844,57 @@ class ElderNavLinkComponent {
      *                                                                         *
      **************************************************************************/
     get isCurrentValueActive() {
-        return this.navList.isActive(this.value());
+        return this.navList.isActive(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fontIcon: { classPropertyName: "fontIcon", publicName: "fontIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "-1" } }, ngImport: i0, template: "<!-- Router Link -->\n@if (model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [routerLink]=\"model().routerLink\"\n    [queryParamsHandling]=\"queryParamsHandling()\"\n    [queryParams]=\"queryParams()\"\n    (isActiveChange)=\"handleRouterLinkActiveChange($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Href Link -->\n@if (model().href) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [href]=\"model().href\"\n    [target]=\"model().hrefTarget\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Simple Button -->\n@if (!model().href && !model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    (click)=\"itemClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    <!-- We render the empty icon if there is a title, to keep the layout consistent -->\n    @if (title() || icon() || fontIcon()) {\n      <mat-icon [fontIcon]=\"fontIcon()\" [fontSet]=\"fontSet()\">\n        {{ icon() }}\n      </mat-icon>\n    }\n    @if (svgIcon()) {\n      <mat-icon [svgIcon]=\"svgIcon()\"></mat-icon>\n    }\n    <!-- Simple Button Links Sometimes don't have a title -->\n    @if (title()) {\n      <span class=\"noselect\">\n        {{ title() | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked", activated: "activated" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n  @if (model.routerLink; as routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [routerLink]=\"routerLink\"\n      [queryParamsHandling]=\"queryParamsHandling\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"dummy\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Href Link -->\n  @if (model.href; as href) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [href]=\"href\"\n      [target]=\"model.hrefTarget\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Simple Button -->\n  @if (!model.href && !model.routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      (click)=\"itemClick($event)\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    @if (!(!icon && !title)) {\n      <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n        {{ icon }}\n      </mat-icon>\n    }\n    @if (svgIcon) {\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n    }\n    @if (title) {\n      <span class=\"noselect\">\n        {{ title | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.tabindex]': '-1',
-                    }, imports: [
+            args: [{ selector: 'elder-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatRipple,
                         RouterLinkActive,
                         RouterLink,
+                        NgTemplateOutlet,
                         MatIcon,
+                        AsyncPipe,
                         TranslateModule,
-                        NgTemplateOutlet,
-                        NgClass,
-                    ], template: "<!-- Router Link -->\n@if (model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [routerLink]=\"model().routerLink\"\n    [queryParamsHandling]=\"queryParamsHandling()\"\n    [queryParams]=\"queryParams()\"\n    (isActiveChange)=\"handleRouterLinkActiveChange($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Href Link -->\n@if (model().href) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [href]=\"model().href\"\n    [target]=\"model().hrefTarget\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Simple Button -->\n@if (!model().href && !model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    (click)=\"itemClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    <!-- We render the empty icon if there is a title, to keep the layout consistent -->\n    @if (title() || icon() || fontIcon()) {\n      <mat-icon [fontIcon]=\"fontIcon()\" [fontSet]=\"fontSet()\">\n        {{ icon() }}\n      </mat-icon>\n    }\n    @if (svgIcon()) {\n      <mat-icon [svgIcon]=\"svgIcon()\"></mat-icon>\n    }\n    <!-- Simple Button Links Sometimes don't have a title -->\n    @if (title()) {\n      <span class=\"noselect\">\n        {{ title() | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n  @if (model.routerLink; as routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [routerLink]=\"routerLink\"\n      [queryParamsHandling]=\"queryParamsHandling\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"dummy\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Href Link -->\n  @if (model.href; as href) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [href]=\"href\"\n      [target]=\"model.hrefTarget\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Simple Button -->\n  @if (!model.href && !model.routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      (click)=\"itemClick($event)\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    @if (!(!icon && !title)) {\n      <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n        {{ icon }}\n      </mat-icon>\n    }\n    @if (svgIcon) {\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n    }\n    @if (title) {\n      <span class=\"noselect\">\n        {{ title | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
+        }], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], title: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], fontIcon: [{
+                type: Input
+            }], fontSet: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], activated: [{
+                type: Output
+            }], routerLinkActive: [{
+                type: ViewChild,
+                args: [RouterLinkActive, { static: false }]
+            }], routerLink: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 const animations = [
     trigger('openClose', [
@@ -28861,8 +28938,13 @@ class ElderNavGroupComponent {
         // Effect to monitor children's active states
         effect(() => {
             const childComponents = this.children();
-            const isChildActive = someSignal(childComponents, (child) => child.active());
-            this.childrenActiveState.set(isChildActive);
+            if (this.childSubscription) {
+                this.childSubscription.unsubscribe();
+            }
+            const childActiveObservables = childComponents.map((child) => child.active$);
+            this.childSubscription = combineLatest(childActiveObservables).subscribe((active) => {
+                this.childrenActiveState.set(active.some((active) => active));
+            });
         });
         // Effect to open the group if any child becomes active: important for page load
         effect(() => {
@@ -28879,24 +28961,36 @@ class ElderNavGroupComponent {
      *                                                                         *
      **************************************************************************/
     ngOnInit() { }
+    ngOnDestroy() {
+        if (this.childSubscription) {
+            this.childSubscription.unsubscribe();
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Public Api                                                              *
      *                                                                         *
      **************************************************************************/
     itemClick(event) {
-        this.clicked.emit(new NavItemClicked(event, undefined));
+        this.clicked.emit(new NavItemActivated(event, undefined));
         this.toggle();
     }
     toggle() {
         this.isOpen.set(!this.isOpen());
     }
+    itemKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.itemClick(event);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\">\n  <a\n    matRipple\n    class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\">\n  <a\n    matRipple\n    tabindex=\"0\"\n    class=\"layout-row place-start-center nav-group-button\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n    (keydown)=\"itemKeyDown($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    [inert]=\"!isOpen()\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon], template: "<div class=\"layout-col nav-group\">\n  <a\n    matRipple\n    class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"] }]
+            args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon], template: "<div class=\"layout-col nav-group\">\n  <a\n    matRipple\n    tabindex=\"0\"\n    class=\"layout-row place-start-center nav-group-button\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n    (keydown)=\"itemKeyDown($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    [inert]=\"!isOpen()\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ElderNavModule {
@@ -29925,11 +30019,11 @@ class ElderAppHeaderComponent {
         this.version = input(undefined, ...(ngDevMode ? [{ debugName: "version" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n            title()\n          }}</a>\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a\n            routerLink=\"/\"\n            id=\"title\"\n            class=\"noselect link-unstyled\"\n            style=\"font-size: 28px\"\n            tabindex=\"-1\"\n            >{{ title() }}</a\n          >\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              tabindex=\"-1\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n            title()\n          }}</a>\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"] }]
+            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a\n            routerLink=\"/\"\n            id=\"title\"\n            class=\"noselect link-unstyled\"\n            style=\"font-size: 28px\"\n            tabindex=\"-1\"\n            >{{ title() }}</a\n          >\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              tabindex=\"-1\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"] }]
         }] });
 
 class DrawerOutletBinding {
@@ -38877,5 +38971,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map