@coreui/angular 4.7.17 → 5.0.0-rc.0

package/fesm2022/coreui-angular.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, PLATFORM_ID, Inject, DestroyRef, ViewChild, forwardRef, Optional, ElementRef, ContentChild, signal, effect, TemplateRef, ViewContainerRef, numberAttribute, Pipe, ChangeDetectionStrategy } from '@angular/core';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
+import { Directive, Input, inject, ElementRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, PLATFORM_ID, Inject, ViewChild, forwardRef, Optional, ContentChild, TemplateRef, ViewContainerRef, computed, numberAttribute, ChangeDetectionStrategy, Pipe } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
-import { Subject, BehaviorSubject, Observable, fromEvent } from 'rxjs';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { fromEvent, Subject, BehaviorSubject, Observable } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, finalize, zipWith, withLatestFrom, debounceTime } from 'rxjs/operators';
+import { filter, tap, finalize, zipWith, withLatestFrom, debounceTime } from 'rxjs/operators';
 import { createPopper } from '@popperjs/core';
-import * as i1$2 from '@angular/cdk/layout';
 import * as i3 from '@angular/cdk/a11y';
-import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i1$2 from '@angular/cdk/layout';
 import { IconDirective } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -94,6 +94,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['cTemplateId']
             }] } });
 
+class ThemeDirective {
+    #hostElement = inject(ElementRef);
+    #renderer = inject(Renderer2);
+    /**
+     * Add dark theme attribute.
+     * @type 'dark' | 'light' | undefined
+     */
+    set colorScheme(scheme) {
+        !!scheme ? this.setTheme(scheme) : this.unsetTheme();
+    }
+    ;
+    /**
+     * Add dark theme attribute.
+     * @type boolean
+     */
+    set dark(darkTheme) {
+        darkTheme ? this.setTheme('dark') : this.unsetTheme();
+    }
+    ;
+    setTheme(theme) {
+        if (theme) {
+            this.#renderer.setAttribute(this.#hostElement.nativeElement, 'data-coreui-theme', theme);
+        }
+    }
+    unsetTheme() {
+        this.#renderer.removeAttribute(this.#hostElement.nativeElement, 'data-coreui-theme');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: ThemeDirective, isStandalone: true, selector: "[cTheme]", inputs: { colorScheme: "colorScheme", dark: ["dark", "dark", booleanAttribute] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cTheme]',
+                    standalone: true
+                }]
+        }], propDecorators: { colorScheme: [{
+                type: Input
+            }], dark: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
 class SharedModule {
     static forRoot() {
         return {
@@ -101,22 +144,14 @@ class SharedModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: SharedModule, imports: [HtmlAttributesDirective,
-            TemplateIdDirective], exports: [HtmlAttributesDirective,
-            TemplateIdDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: SharedModule, imports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective], exports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SharedModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        HtmlAttributesDirective,
-                        TemplateIdDirective
-                    ],
-                    exports: [
-                        HtmlAttributesDirective,
-                        TemplateIdDirective
-                    ],
+                    imports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective],
+                    exports: [HtmlAttributesDirective, TemplateIdDirective, ThemeDirective]
                 }]
         }] });
 
@@ -197,35 +232,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
         }], ctorParameters: () => [] });
 
 class AccordionComponent {
+    constructor() {
+        this.#accordionService = inject(AccordionService);
+        /**
+         * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
+         * @type boolean
+         */
+        this.flush = false;
+    }
+    #accordionService;
     /**
      * Make accordion items stay open when another item is opened
      * @type boolean
      */
     set alwaysOpen(value) {
-        this.accordionService.alwaysOpen = coerceBooleanProperty(value);
+        this.#accordionService.alwaysOpen = value;
     }
     get alwaysOpen() {
-        return this.accordionService.alwaysOpen;
+        return this.#accordionService.alwaysOpen;
     }
     get hostClasses() {
         return {
             accordion: true,
-            'accordion-flush': !!this.flush
+            'accordion-flush': this.flush
         };
     }
-    constructor(accordionService) {
-        this.accordionService = accordionService;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AccordionComponent, isStandalone: true, selector: "c-accordion", inputs: { flush: "flush", alwaysOpen: "alwaysOpen" }, host: { properties: { "class": "this.hostClasses" } }, providers: [AccordionService], exportAs: ["cAccordionItem"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: AccordionComponent, isStandalone: true, selector: "c-accordion", inputs: { flush: ["flush", "flush", booleanAttribute], alwaysOpen: ["alwaysOpen", "alwaysOpen", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, providers: [AccordionService], exportAs: ["cAccordionItem"], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-accordion', template: `<ng-content></ng-content>`, exportAs: 'cAccordionItem', providers: [AccordionService], standalone: true, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: AccordionService }], propDecorators: { flush: [{
-                type: Input
+            args: [{ selector: 'c-accordion', template: '<ng-content/>', exportAs: 'cAccordionItem', providers: [AccordionService], standalone: true, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { flush: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], alwaysOpen: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -251,51 +294,38 @@ const collapseHorizontalAnimation = animation([
 // todo
 // tslint:disable-next-line:no-conflicting-lifecycle
 class CollapseDirective {
-    /**
-     * @ignore
-     */
-    set animate(value) {
-        this._animate = value;
-    }
-    get animate() {
-        return this._animate;
-    }
-    /**
-     * Set horizontal collapsing to transition the width instead of height.
-     */
-    set horizontal(value) {
-        this._horizontal = coerceBooleanProperty(value);
-    }
-    get horizontal() {
-        return this._horizontal;
-    }
     /**
      * Toggle the visibility of collapsible element.
+     * @type boolean
+     * @default false
      */
     set visible(value) {
-        this._visible = coerceBooleanProperty(value);
+        this._visible = value;
     }
     get visible() {
         return this._visible;
     }
-    /**
-     * Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
-     */
-    set navbar(value) {
-        this._navbar = coerceBooleanProperty(value);
-    }
-    ;
-    get navbar() {
-        return this._navbar;
-    }
     constructor(hostElement, renderer, animationBuilder) {
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.animationBuilder = animationBuilder;
-        this._animate = true;
-        this._horizontal = false;
+        /**
+         * @ignore
+         */
+        this.animate = true;
+        /**
+         * Set horizontal collapsing to transition the width instead of height.
+         * @type boolean
+         * @default false
+         */
+        this.horizontal = false;
         this._visible = false;
-        this._navbar = false;
+        /**
+         * Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
+         * @type boolean
+         * @default false
+         */
+        this.navbar = false;
         /**
          * @ignore
          */
@@ -405,7 +435,7 @@ class CollapseDirective {
         // });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animate: "animate", horizontal: "horizontal", visible: "visible", navbar: "navbar", duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: CollapseDirective, isStandalone: true, selector: "[cCollapse]", inputs: { animate: ["animate", "animate", booleanAttribute], horizontal: ["horizontal", "horizontal", booleanAttribute], visible: ["visible", "visible", booleanAttribute], navbar: ["navbar", "navbar", booleanAttribute], duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
@@ -415,13 +445,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.AnimationBuilder }], propDecorators: { animate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], horizontal: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], navbar: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], duration: [{
                 type: Input
             }], transition: [{
@@ -686,6 +720,7 @@ class ButtonCloseDirective extends ButtonDirective {
         /**
          * Change the default color to white.
          * @type boolean
+         * @deprecated 5.0.0. Use `cButtonClose.dark` instead.
          */
         this.white = false;
     }
@@ -700,13 +735,16 @@ class ButtonCloseDirective extends ButtonDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: ButtonCloseDirective, isStandalone: true, selector: "[cButtonClose]", inputs: { white: ["white", "white", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: ButtonCloseDirective, isStandalone: true, selector: "[cButtonClose]", inputs: { white: ["white", "white", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, usesInheritance: true, hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cButtonClose]',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [
+                        { directive: ThemeDirective, inputs: ['dark'] }
+                    ]
                 }]
         }], propDecorators: { white: [{
                 type: Input,
@@ -757,44 +795,34 @@ class AlertComponent {
          */
         this.visibleChange = new EventEmitter();
         this.templates = {};
-        this._dismissible = false;
-        this._fade = false;
-        this._visible = true;
-    }
-    /**
-     * Optionally adds a close button to alert and allow it to self dismiss.
-     * @type boolean
-     */
-    get dismissible() {
-        return this._dismissible;
-    }
-    set dismissible(value) {
-        this._dismissible = coerceBooleanProperty(value);
-    }
-    /**
-     * Adds animation for dismissible alert.
-     * @type boolean
-     */
-    get fade() {
-        return this._fade;
-    }
-    set fade(value) {
-        this._fade = coerceBooleanProperty(value);
-    }
-    get visible() {
-        return this._visible;
+        /**
+         * Optionally adds a close button to alert and allow it to self dismiss.
+         * @type boolean
+         * @default false
+         */
+        this.dismissible = false;
+        /**
+         * Adds animation for dismissible alert.
+         * @type boolean
+         */
+        this.fade = false;
+        this.#visible = true;
     }
     /**
      * Toggle the visibility of alert component.
      * @type boolean
      */
     set visible(value) {
-        if (this._visible !== value) {
-            this._visible = coerceBooleanProperty(value);
+        if (this.#visible !== value) {
+            this.#visible = value;
             this.visibleChange.emit(value);
         }
     }
     ;
+    get visible() {
+        return this.#visible;
+    }
+    #visible;
     get animationDisabled() {
         return !this.fade;
     }
@@ -833,7 +861,7 @@ class AlertComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: "color", role: "role", variant: "variant", dismissible: "dismissible", fade: "fade", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.start": "onAnimationStart($event)", "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "attr.role": "this.role", "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAlert"], ngImport: i0, template: "@if (visible || !hide) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AlertComponent, isStandalone: true, selector: "c-alert", inputs: { color: "color", role: "role", variant: "variant", dismissible: ["dismissible", "dismissible", booleanAttribute], fade: ["fade", "fade", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.start": "onAnimationStart($event)", "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "attr.role": "this.role", "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAlert"], ngImport: i0, template: "@if (visible || !hide) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content></ng-content>\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }], animations: [
             trigger('fadeInOut', [
                 state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
                 state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
@@ -873,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                                 animate('.3s ease-in')
                             ])
                         ])
-                    ], template: "@if (visible || !hide) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content />\n}\n\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
+                    ], template: "@if (visible || !hide) {\n  @if (dismissible) {\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\" />\n  }\n  <ng-content></ng-content>\n}\n<ng-template #defaultAlertButtonCloseTemplate>\n  <button (click)=\"visible=false\" aria-label=\"Close\" cButtonClose></button>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], role: [{
@@ -889,11 +917,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: ContentChildren,
                 args: [TemplateIdDirective, { descendants: true }]
             }], dismissible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], fade: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], animationDisabled: [{
                 type: HostBinding,
                 args: ['@.disabled']
@@ -936,6 +967,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
+class AlignDirective {
+    get hostClasses() {
+        return {
+            [`align-${this.align}`]: !!this.align,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: ["cAlign", "align"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cAlign]',
+                    standalone: true
+                }]
+        }], propDecorators: { align: [{
+                type: Input,
+                args: ['cAlign']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class BgColorDirective {
+    get hostClasses() {
+        return {
+            [`bg-${this.color}`]: !!this.color,
+            'bg-gradient': this.gradient,
+        };
+    }
+    constructor() {
+        /**
+         * Set the background of an element to any contextual class
+         */
+        this.color = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BgColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: BgColorDirective, isStandalone: true, selector: "[cBgColor]", inputs: { color: ["cBgColor", "color"], gradient: "gradient" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BgColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cBgColor]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input,
+                args: ['cBgColor']
+            }], gradient: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class BorderDirective {
+    constructor() {
+        /**
+         * Add or remove an element’s borders
+         * @type Border
+         */
+        this.border = true;
+    }
+    get hostClasses() {
+        if (typeof this.border === 'boolean') {
+            return { border: true };
+        }
+        if (typeof this.border === 'number' || typeof this.border === 'string') {
+            return {
+                border: true,
+                [`border-${this.border}`]: true
+            };
+        }
+        if (typeof this.border === 'object') {
+            const borderObj = { top: undefined, end: undefined, bottom: undefined, start: undefined, color: undefined, ...this.border };
+            // @ts-ignore
+            const keys = Object.keys(borderObj).filter(key => borderObj[key] !== undefined);
+            const classes = {};
+            keys.forEach(key => {
+                // @ts-ignore
+                const val = borderObj[key];
+                if (typeof val === 'boolean') {
+                    // @ts-ignore
+                    classes[`border-${key}`] = true;
+                }
+                else if (typeof val === 'number' || typeof val === 'string') {
+                    // @ts-ignore
+                    classes[`border-${key}-${val}`] = true;
+                }
+                else if (typeof val === 'object') {
+                    if ('color' in val) {
+                        // @ts-ignore
+                        classes[`border-${key}-${val.color}`] = true;
+                    }
+                    if ('width' in val) {
+                        // @ts-ignore
+                        classes[`border-${key}-${val.width}`] = true;
+                    }
+                }
+            });
+            return Object.entries(classes).length === 0 ? { border: false } : classes;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: BorderDirective, isStandalone: true, selector: "[cBorder]", inputs: { border: ["cBorder", "border"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BorderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cBorder]',
+                    standalone: true
+                }]
+        }], propDecorators: { border: [{
+                type: Input,
+                args: ['cBorder']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class RoundedDirective {
+    constructor() {
+        /**
+         * Set border radius variant and radius size
+         * @type Rounded
+         */
+        this.rounded = true;
+    }
+    get hostClasses() {
+        if (typeof this.rounded === 'boolean') {
+            return { rounded: true };
+        }
+        if (typeof this.rounded === 'number' || typeof this.rounded === 'string') {
+            return {
+                [`rounded-${this.rounded}`]: true
+            };
+        }
+        if (typeof this.rounded === 'object') {
+            const roundedObj = {
+                top: undefined,
+                end: undefined,
+                bottom: undefined,
+                start: undefined,
+                circle: undefined,
+                pill: undefined,
+                size: undefined,
+                ...this.rounded,
+            };
+            // @ts-ignore
+            const keys = Object.keys(roundedObj).filter(key => roundedObj[key] !== undefined);
+            const classes = {};
+            keys.forEach(key => {
+                // @ts-ignore
+                const val = roundedObj[key];
+                if (typeof val === 'boolean') {
+                    // @ts-ignore
+                    classes[`rounded-${key}`] = val;
+                }
+                else {
+                    // @ts-ignore
+                    classes[`rounded-${val}`] = true;
+                }
+            });
+            // console.log('rounded keys', keys, classes);
+            return Object.entries(classes).length === 0 ? { rounded: false } : classes;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: RoundedDirective, isStandalone: true, selector: "[cRounded]", inputs: { rounded: ["cRounded", "rounded"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cRounded]',
+                    standalone: true
+                }]
+        }], propDecorators: { rounded: [{
+                type: Input,
+                args: ['cRounded']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ShadowOnScrollDirective {
+    #destroyRef = inject(DestroyRef);
+    #document = inject(DOCUMENT);
+    #elementRef = inject(ElementRef);
+    #scrolled = signal(false);
+    #scrollEffect = effect(() => {
+        this.#elementRef.nativeElement.classList.toggle(this.#shadowClass, this.#scrolled());
+    });
+    #observable;
+    #shadowClass = 'shadow-sm';
+    constructor() {
+        this.#destroyRef.onDestroy(() => {
+            this.#scrollEffect?.destroy();
+        });
+    }
+    set cShadowOnScroll(value) {
+        this.#scrolled.set(false);
+        if (value) {
+            this.#shadowClass = value === true ? 'shadow' : `shadow-${value}`;
+            this.#observable = fromEvent(this.#document, 'scroll')
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(scrolled => {
+                this.#scrolled.set(this.#document.documentElement.scrollTop > 0);
+            });
+        }
+        else {
+            this.#observable?.unsubscribe();
+        }
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ShadowOnScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: ShadowOnScrollDirective, isStandalone: true, selector: "[cShadowOnScroll]", inputs: { cShadowOnScroll: "cShadowOnScroll" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ShadowOnScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cShadowOnScroll]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { cShadowOnScroll: [{
+                type: Input
+            }] } });
+
+class TextColorDirective {
+    get hostClasses() {
+        const color = this.color;
+        return {
+            [`text-${color}`]: !!color
+        };
+    }
+    constructor() {
+        /**
+         * Set text-color of element
+         * @type TextColors
+         */
+        this.color = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TextColorDirective, isStandalone: true, selector: "[cTextColor]", inputs: { color: ["cTextColor", "color"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cTextColor]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input,
+                args: ['cTextColor']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const UTILITY_DIRECTIVES = [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective];
+class UtilitiesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, imports: [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective], exports: [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...UTILITY_DIRECTIVES], exports: [...UTILITY_DIRECTIVES]
+                }]
+        }] });
+
 class AvatarComponent {
     constructor() {
         /**
@@ -955,19 +1257,20 @@ class AvatarComponent {
             avatar: true,
             [`avatar-${this.size}`]: !!this.size,
             [`bg-${this.color}`]: !!this.color,
-            [`${this.shape}`]: !!this.shape,
-            [`text-${this.textColor}`]: !!this.textColor
+            [`${this.shape}`]: !!this.shape
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: "color", shape: "shape", size: "size", src: "src", status: "status", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: "color", shape: "shape", size: "size", src: "src", status: "status", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content></ng-content>\n  }\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-avatar', standalone: true, imports: [
                         NgTemplateOutlet,
                         NgClass
-                    ], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\" />\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content />\n  }\n</ng-template>\n" }]
+                    ], hostDirectives: [{
+                            directive: TextColorDirective, inputs: ['cTextColor: textColor']
+                        }], template: "<ng-container>\n  <ng-container *ngTemplateOutlet=\"defaultImageTemplate\"></ng-container>\n  @if (!!status) {\n    <span [ngClass]=\"statusClass\"></span>\n  }\n</ng-container>\n\n<ng-template #defaultImageTemplate>\n  @if (!!src) {\n    <img [src]=\"src\" class=\"avatar-img\" />\n  } @else {\n    <ng-content></ng-content>\n  }\n  <ng-template #imageContent>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], shape: [{
@@ -1016,20 +1319,22 @@ class BadgeComponent {
         return Object.assign({
             badge: true,
             [`bg-${this.color}`]: !!this.color,
-            [`text-${this.textColor}`]: !!this.textColor,
             [`badge-${this.size}`]: !!this.size,
             [`${this.shape}`]: !!this.shape
         }, !!this.position ? positionClasses : {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BadgeComponent, isStandalone: true, selector: "c-badge", inputs: { color: "color", position: "position", shape: "shape", size: "size", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BadgeComponent, isStandalone: true, selector: "c-badge", inputs: { color: "color", position: "position", shape: "shape", size: "size", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-badge',
                     template: '<ng-content></ng-content>',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [{
+                            directive: TextColorDirective, inputs: ['cTextColor: textColor']
+                        }]
                 }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
@@ -1081,7 +1386,6 @@ class BackdropService {
     get #scrollbarWidth() {
         // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
         const documentWidth = this.#document.documentElement.clientWidth;
-        // const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
         const scrollbarWidth = Math.abs((this.#document.defaultView?.innerWidth ?? documentWidth) - documentWidth);
         return `${scrollbarWidth}px`;
     }
@@ -1153,13 +1457,14 @@ class BreadcrumbItemComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: BreadcrumbItemComponent, isStandalone: true, selector: "c-breadcrumb-item", inputs: { active: "active", url: "url", attributes: "attributes", linkProps: "linkProps" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!active) {\n  <a [routerLink]=\"url\"\n     [cHtmlAttr]=\"attributes ?? {}\"\n     [target]=\"attributes?.['target']\"\n     [queryParams]=\"linkProps?.queryParams ?? null\"\n     [fragment]=\"linkProps?.fragment\"\n     [queryParamsHandling]=\"linkProps?.queryParamsHandling ?? null\"\n     [preserveFragment]=\"linkProps?.preserveFragment ?? false\"\n     [skipLocationChange]=\"linkProps?.skipLocationChange ?? false\"\n     [replaceUrl]=\"linkProps?.replaceUrl ?? false\"\n     [state]=\"linkProps?.state ?? {}\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </a>\n} @else {\n  <span [cHtmlAttr]=\"attributes ?? {}\">\n      <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </span>\n}\n\n<ng-template #defaultBreadcrumbItemContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:list-item;text-align:-webkit-match-parent;text-align:match-parent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.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: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: BreadcrumbItemComponent, isStandalone: true, selector: "c-breadcrumb-item", inputs: { active: ["active", "active", booleanAttribute], url: "url", attributes: "attributes", linkProps: "linkProps" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!active) {\n  <a [routerLink]=\"url\"\n     [cHtmlAttr]=\"attributes ?? {}\"\n     [target]=\"attributes?.['target']\"\n     [queryParams]=\"linkProps?.queryParams ?? null\"\n     [fragment]=\"linkProps?.fragment\"\n     [queryParamsHandling]=\"linkProps?.queryParamsHandling ?? null\"\n     [preserveFragment]=\"linkProps?.preserveFragment ?? false\"\n     [skipLocationChange]=\"linkProps?.skipLocationChange ?? false\"\n     [replaceUrl]=\"linkProps?.replaceUrl ?? false\"\n     [state]=\"linkProps?.state ?? {}\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </a>\n} @else {\n  <span [cHtmlAttr]=\"attributes ?? {}\">\n      <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </span>\n}\n\n<ng-template #defaultBreadcrumbItemContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:list-item;text-align:-webkit-match-parent;text-align:match-parent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.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: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-breadcrumb-item', standalone: true, imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective], template: "@if (!active) {\n  <a [routerLink]=\"url\"\n     [cHtmlAttr]=\"attributes ?? {}\"\n     [target]=\"attributes?.['target']\"\n     [queryParams]=\"linkProps?.queryParams ?? null\"\n     [fragment]=\"linkProps?.fragment\"\n     [queryParamsHandling]=\"linkProps?.queryParamsHandling ?? null\"\n     [preserveFragment]=\"linkProps?.preserveFragment ?? false\"\n     [skipLocationChange]=\"linkProps?.skipLocationChange ?? false\"\n     [replaceUrl]=\"linkProps?.replaceUrl ?? false\"\n     [state]=\"linkProps?.state ?? {}\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </a>\n} @else {\n  <span [cHtmlAttr]=\"attributes ?? {}\">\n      <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\" />\n  </span>\n}\n\n<ng-template #defaultBreadcrumbItemContentTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:list-item;text-align:-webkit-match-parent;text-align:match-parent}\n"] }]
         }], propDecorators: { active: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], url: [{
                 type: Input
             }], attributes: [{
@@ -1220,12 +1525,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class BreadcrumbRouterService {
+    #breadcrumbsBehaviorSubject;
     constructor(router, route) {
         this.router = router;
         this.route = route;
         this.outlet = 'primary';
-        this.breadcrumbsBehaviorSubject = new BehaviorSubject(new Array());
-        this.breadcrumbs$ = this.breadcrumbsBehaviorSubject.asObservable();
+        this.#breadcrumbsBehaviorSubject = new BehaviorSubject(new Array());
+        this.breadcrumbs$ = this.#breadcrumbsBehaviorSubject.asObservable();
         this.router.events
             .pipe(takeUntilDestroyed(), filter((event) => event instanceof NavigationEnd))
             .subscribe((event) => {
@@ -1241,7 +1547,7 @@ class BreadcrumbRouterService {
                         const routeSnapshot = childRoute.snapshot;
                         url += '/' + routeSnapshot.url.map((segment) => segment.path).join('/');
                         breadcrumbs.push({
-                            label: childRoute.snapshot.data['title'] || '',
+                            label: routeSnapshot.data['title'] ?? routeSnapshot.title ?? '',
                             url,
                             queryParams: routeSnapshot.queryParams
                         });
@@ -1249,8 +1555,7 @@ class BreadcrumbRouterService {
                     }
                 });
             } while (currentRoute);
-            this.breadcrumbsBehaviorSubject.next(Object.assign([], breadcrumbs));
-            // console.log('breadcrumbs', breadcrumbs);
+            this.#breadcrumbsBehaviorSubject.next(Object.assign([], breadcrumbs));
             return breadcrumbs;
         });
     }
@@ -1289,11 +1594,11 @@ class BreadcrumbRouterComponent {
         this.breadcrumbs = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BreadcrumbRouterComponent, deps: [{ token: BreadcrumbRouterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: BreadcrumbRouterComponent, isStandalone: true, selector: "c-breadcrumb-router, [cBreadcrumbRouter]", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: "<c-breadcrumb class=\"m-0\">\n  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {\n    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {\n      <c-breadcrumb-item\n        [active]=\"last\"\n        [url]=\"breadcrumb?.url\"\n        [attributes]=\"breadcrumb?.attributes\"\n        [linkProps]=\"breadcrumb?.linkProps\"\n      >\n        {{ breadcrumb?.label }}\n      </c-breadcrumb-item>\n    }\n  }\n</c-breadcrumb>\n", dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "c-breadcrumb", inputs: ["ariaLabel", "role"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "c-breadcrumb-item", inputs: ["active", "url", "attributes", "linkProps"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: BreadcrumbRouterComponent, isStandalone: true, selector: "c-breadcrumb-router, [cBreadcrumbRouter]", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: "<c-breadcrumb class=\"m-0\">\n  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {\n    @if(breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {\n      <c-breadcrumb-item\n        [active]=\"last\"\n        [url]=\"breadcrumb?.url\"\n        [attributes]=\"breadcrumb?.attributes\"\n        [linkProps]=\"breadcrumb?.linkProps\"\n      >\n        {{ breadcrumb?.label }}\n      </c-breadcrumb-item>\n    }\n  }\n</c-breadcrumb>\n", dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "c-breadcrumb", inputs: ["ariaLabel", "role"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "c-breadcrumb-item", inputs: ["active", "url", "attributes", "linkProps"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BreadcrumbRouterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-breadcrumb-router, [cBreadcrumbRouter]', standalone: true, imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe], template: "<c-breadcrumb class=\"m-0\">\n  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {\n    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {\n      <c-breadcrumb-item\n        [active]=\"last\"\n        [url]=\"breadcrumb?.url\"\n        [attributes]=\"breadcrumb?.attributes\"\n        [linkProps]=\"breadcrumb?.linkProps\"\n      >\n        {{ breadcrumb?.label }}\n      </c-breadcrumb-item>\n    }\n  }\n</c-breadcrumb>\n" }]
+            args: [{ selector: 'c-breadcrumb-router, [cBreadcrumbRouter]', standalone: true, imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe], template: "<c-breadcrumb class=\"m-0\">\n  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {\n    @if(breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {\n      <c-breadcrumb-item\n        [active]=\"last\"\n        [url]=\"breadcrumb?.url\"\n        [attributes]=\"breadcrumb?.attributes\"\n        [linkProps]=\"breadcrumb?.linkProps\"\n      >\n        {{ breadcrumb?.label }}\n      </c-breadcrumb-item>\n    }\n  }\n</c-breadcrumb>\n" }]
         }], ctorParameters: () => [{ type: BreadcrumbRouterService }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -1450,22 +1755,23 @@ class CardComponent {
     get hostClasses() {
         return {
             card: true,
-            [`bg-${this.color}`]: !!this.color,
-            [`text-${this.textColor}`]: !!this.textColor,
+            [`bg-${this.color}`]: !!this.color
         };
     }
-    constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CardComponent, isStandalone: true, selector: "c-card, [c-card]", inputs: { color: "color", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CardComponent, isStandalone: true, selector: "c-card, [c-card]", inputs: { color: "color", textColor: "textColor" }, host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-card, [c-card]',
-                    template: `<ng-content></ng-content>`,
-                    standalone: true
+                    template: '<ng-content />',
+                    standalone: true,
+                    hostDirectives: [{
+                            directive: TextColorDirective, inputs: ['cTextColor: textColor']
+                        }]
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
+        }], propDecorators: { color: [{
                 type: Input
             }], textColor: [{
                 type: Input
@@ -1872,6 +2178,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     args: [DOCUMENT]
                 }] }, { type: i0.RendererFactory2 }] });
 
+class InMemoryStorageService {
+    #storage = new Map();
+    constructor() { }
+    setItem(key, data) {
+        this.#storage.set(key, JSON.stringify(data));
+    }
+    getItem(key) {
+        return this.#storage.has(key) ? JSON.parse(this.#storage.get(key) ?? 'null') : undefined;
+    }
+    removeItem(key) {
+        this.#storage.delete(key);
+    }
+    clear() {
+        this.#storage.clear();
+    }
+    get length() {
+        return this.#storage.size;
+    }
+    key(index) {
+        return Array.from(this.#storage.keys())[index];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InMemoryStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InMemoryStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InMemoryStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LocalStorageService {
+    constructor(platformId, document) {
+        this.platformId = platformId;
+        this.document = document;
+        this.#data$ = new BehaviorSubject(null);
+        this.data$ = this.#data$.asObservable();
+        this.#localStorage =
+            isPlatformBrowser(this.platformId) && this.document.defaultView
+                ? this.document.defaultView?.localStorage
+                : new InMemoryStorageService();
+    }
+    #localStorage;
+    #data$;
+    setItem(key, data) {
+        this.#localStorage.setItem(key, JSON.stringify(data));
+        this.#data$.next({ key, data });
+    }
+    getItem(key) {
+        const data = JSON.parse(this.#localStorage.getItem(key) ?? 'null');
+        this.#data$.next({ key, data });
+        return data;
+    }
+    removeItem(key) {
+        this.#localStorage.removeItem(key);
+        this.#data$.next({ key, data: null });
+    }
+    clear() {
+        this.#localStorage.clear();
+        this.#data$.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LocalStorageService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class ColorModeService {
+    #destroyRef;
+    #document;
+    #localStorage;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#localStorage = inject(LocalStorageService);
+        this.eventName = signal('ColorSchemeChange');
+        this.localStorageItemName = signal(undefined);
+        this.localStorageItemName$ = toObservable(this.localStorageItemName);
+        this.colorMode = signal(undefined);
+        this.colorModeEffect = effect(() => {
+            const colorMode = this.colorMode();
+            if (colorMode) {
+                const localStorageItemName = this.localStorageItemName();
+                localStorageItemName && this.setStoredTheme(localStorageItemName, colorMode);
+                this.#setTheme(colorMode);
+            }
+        });
+        this.localStorageItemName$
+            .pipe(tap(params => {
+            this.colorMode.set(this.getDefaultScheme(params));
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    getStoredTheme(localStorageItemName) {
+        return this.#localStorage.getItem(localStorageItemName);
+    }
+    setStoredTheme(localStorageItemName, colorMode) {
+        return this.#localStorage.setItem(localStorageItemName, colorMode);
+    }
+    removeStoredTheme(localStorageItemName) {
+        this.#localStorage.removeItem(localStorageItemName);
+    }
+    getDefaultScheme(localStorageItemName) {
+        if (this.#document.defaultView === undefined) {
+            return this.getDatasetTheme();
+        }
+        const storedTheme = localStorageItemName && this.getStoredTheme(localStorageItemName);
+        return storedTheme ?? this.getDatasetTheme();
+    }
+    ;
+    getPrefersColorScheme() {
+        return this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
+            this.#document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? 'light' :
+                undefined;
+    }
+    getDatasetTheme() {
+        return (this.#document.documentElement.dataset['coreuiTheme']);
+    }
+    #setTheme(colorMode) {
+        this.#document.documentElement.dataset['coreuiTheme'] = (colorMode === 'auto' ? this.getPrefersColorScheme() : colorMode);
+        const event = new Event(this.eventName());
+        this.#document.documentElement.dispatchEvent(event);
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColorModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColorModeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColorModeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class CarouselService {
     constructor() {
         this.carouselIndex = new BehaviorSubject({});
@@ -1975,22 +2425,13 @@ class CarouselConfig {
         this.interval = 3000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselConfig }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselConfig, decorators: [{
-            type: Injectable
-        }] });
-
-class CarouselComponent {
-    get hostClasses() {
-        return {
-            carousel: true,
-            slide: true,
-            'carousel-dark': !!this.dark,
-            'carousel-fade': this.transition === 'crossfade'
-        };
-    }
-    #destroyRef;
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselConfig }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselConfig, decorators: [{
+            type: Injectable
+        }] });
+
+class CarouselComponent {
     constructor(config, hostElement, carouselService, carouselState, intersectionService, listenersService) {
         this.config = config;
         this.hostElement = hostElement;
@@ -2052,6 +2493,14 @@ class CarouselComponent {
         this._visible = true;
         Object.assign(this, config);
     }
+    get hostClasses() {
+        return {
+            carousel: true,
+            slide: true,
+            'carousel-fade': this.transition === 'crossfade'
+        };
+    }
+    #destroyRef;
     ngOnInit() {
         this.carouselStateSubscribe();
     }
@@ -2115,6 +2564,7 @@ class CarouselComponent {
         });
     }
     intersectionServiceSubscribe() {
+        this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionService.intersecting$
             .pipe(filter(next => next.hostElement === this.hostElement), finalize(() => {
             this.intersectionService.unobserve(this.hostElement);
@@ -2123,7 +2573,6 @@ class CarouselComponent {
             this.visible = next.isIntersecting;
             next.isIntersecting ? this.setTimer() : this.resetTimer();
         });
-        this.intersectionService.createIntersectionObserver(this.hostElement);
     }
     swipeSubscribe(subscribe = true) {
         if (this.touch && subscribe) {
@@ -2147,11 +2596,13 @@ class CarouselComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselComponent, deps: [{ token: CarouselConfig }, { token: i0.ElementRef }, { token: CarouselService }, { token: CarouselState }, { token: IntersectionService }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", touch: "touch", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", direction: "direction", interval: "interval", pause: "pause", touch: "touch", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel', template: '<ng-content></ng-content>', providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], standalone: true, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-carousel', template: '<ng-content />', providers: [CarouselService, CarouselState, CarouselConfig, ListenersService], standalone: true, hostDirectives: [
+                        { directive: ThemeDirective, inputs: ['dark'] }
+                    ], styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: CarouselConfig, decorators: [{
                     type: Inject,
                     args: [CarouselConfig]
@@ -2159,8 +2610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }], animate: [{
                 type: Input
-            }], dark: [{
-                type: Input
             }], direction: [{
                 type: Input
             }], interval: [{
@@ -2307,11 +2756,11 @@ class CarouselIndicatorsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselIndicatorsComponent, deps: [{ token: CarouselService }, { token: CarouselState }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CarouselIndicatorsComponent, isStandalone: true, selector: "c-carousel-indicators", ngImport: i0, template: "<div class=\"carousel-indicators\">\n  @for (item of items; track item; let i = $index) {\n    <button\n      [attr.data-coreui-target]=\"i\"\n      type=\"button\"\n      (click)=\"onClick(i)\"\n      [class]=\"{ active: active === i }\"\n      [attr.aria-current]=\"active === i\"\n    ></button>\n  }\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CarouselIndicatorsComponent, isStandalone: true, selector: "c-carousel-indicators", ngImport: i0, template: "<div class=\"carousel-indicators\">\n  @for (item of items; track item; let i = $index) {\n    <button\n      [attr.data-coreui-target]=\"i\"\n      type=\"button\"\n      (click)=\"onClick(i)\"\n      [class]=\"{ active: active === i }\"\n      [attr.aria-current]=\"active === i\">\n    </button>\n  }\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-indicators', standalone: true, template: "<div class=\"carousel-indicators\">\n  @for (item of items; track item; let i = $index) {\n    <button\n      [attr.data-coreui-target]=\"i\"\n      type=\"button\"\n      (click)=\"onClick(i)\"\n      [class]=\"{ active: active === i }\"\n      [attr.aria-current]=\"active === i\"\n    ></button>\n  }\n</div>\n" }]
+            args: [{ selector: 'c-carousel-indicators', standalone: true, template: "<div class=\"carousel-indicators\">\n  @for (item of items; track item; let i = $index) {\n    <button\n      [attr.data-coreui-target]=\"i\"\n      type=\"button\"\n      (click)=\"onClick(i)\"\n      [class]=\"{ active: active === i }\"\n      [attr.aria-current]=\"active === i\">\n    </button>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: CarouselService }, { type: CarouselState }] });
 
 function toLeft(fromState, toState) {
@@ -2388,7 +2837,7 @@ class CarouselItemComponent {
      * @ignore
      */
     set active(value) {
-        this._active = coerceBooleanProperty(value);
+        this._active = value;
         this.changeDetectorRef.markForCheck();
     }
     get active() {
@@ -2432,13 +2881,14 @@ class CarouselItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselItemComponent, deps: [{ token: CarouselService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { active: "active", interval: "interval" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (active) {\n  <ng-content />\n}\n\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { active: ["active", "active", booleanAttribute], interval: "interval" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!--todo ngIf-->\n@if (active) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-item', standalone: true, template: "@if (active) {\n  <ng-content />\n}\n\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-carousel-item', standalone: true, template: "<!--todo ngIf-->\n@if (active) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: CarouselService }, { type: i0.ChangeDetectorRef }], propDecorators: { active: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], interval: [{
                 type: Input
             }], hostClasses: [{
@@ -2582,80 +3032,110 @@ class DropdownService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 class DropdownMenuDirective {
-    constructor(elementRef, dropdownService) {
-        this.elementRef = elementRef;
-        this.dropdownService = dropdownService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.elementRef = inject(ElementRef);
+        this.#dropdownService = inject(DropdownService);
         /**
          * Toggle the visibility of dropdown menu component.
-         */
-        this.visible = false;
-        /**
-         * Sets a darker color scheme to match a dark navbar.
          * @type boolean
          */
-        this.dark = false;
+        this.visible = false;
     }
+    #destroyRef;
+    #dropdownService;
+    #focusKeyManager;
     get hostClasses() {
         return {
-            'dropdown-menu': true,
-            'dropdown-menu-dark': this.dark,
-            [`dropdown-menu-${this.alignment}`]: !!this.alignment,
-            show: this.visible
+            'dropdown-menu': true, [`dropdown-menu-${this.alignment}`]: !!this.alignment, show: this.visible
         };
     }
     get hostStyles() {
         // workaround for popper position calculate (see also: dropdown.component)
         return {
-            visibility: this.visible ? null : '',
-            display: this.visible ? null : ''
+            visibility: this.visible ? null : '', display: this.visible ? null : ''
         };
     }
-    ngOnInit() {
-        this.dropdownStateSubscribe();
-    }
-    ngOnDestroy() {
-        this.dropdownStateSubscribe(false);
+    onKeyDown($event) {
+        if (!this.visible) {
+            return;
+        }
+        if (['Space', 'ArrowDown'].includes($event.code)) {
+            $event.preventDefault();
+        }
+        this.#focusKeyManager.onKeydown($event);
     }
-    dropdownStateSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.dropdownStateSubscription =
-                this.dropdownService.dropdownState$.subscribe((state) => {
-                    if ('visible' in state) {
-                        this.visible =
-                            state.visible === 'toggle' ? !this.visible : state.visible;
-                    }
-                });
+    onKeyUp($event) {
+        if (!this.visible) {
+            return;
         }
-        else {
-            this.dropdownStateSubscription?.unsubscribe();
+        if (['Tab'].includes($event.key)) {
+            if (this.#focusKeyManager.activeItem) {
+                $event.shiftKey ? this.#focusKeyManager.setPreviousItemActive() : this.#focusKeyManager.setNextItemActive();
+            }
+            else {
+                this.#focusKeyManager.setFirstItemActive();
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownMenuDirective, deps: [{ token: i0.ElementRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: DropdownMenuDirective, isStandalone: true, selector: "[cDropdownMenu]", inputs: { alignment: "alignment", visible: "visible", dark: ["dark", "dark", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "style": "this.hostStyles" } }, exportAs: ["cDropdownMenu"], ngImport: i0 }); }
+    ngAfterContentInit() {
+        this.focusKeyManagerInit();
+        this.dropdownItemsContent.changes
+            .pipe(tap((change) => {
+            this.focusKeyManagerInit();
+        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+    }
+    ngOnInit() {
+        this.#dropdownService.dropdownState$
+            .pipe(tap((state) => {
+            if ('visible' in state) {
+                this.visible = state.visible === 'toggle' ? !this.visible : state.visible;
+                if (!this.visible) {
+                    this.#focusKeyManager?.setActiveItem(-1);
+                }
+            }
+        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+    }
+    focusKeyManagerInit() {
+        this.#focusKeyManager = new FocusKeyManager(this.dropdownItemsContent)
+            .withHomeAndEnd()
+            .withPageUpDown()
+            .withWrap()
+            .skipPredicate((dropdownItem) => (dropdownItem.disabled === true));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: DropdownMenuDirective, isStandalone: true, selector: "[cDropdownMenu]", inputs: { alignment: "alignment", visible: "visible" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyles" } }, queries: [{ propertyName: "dropdownItemsContent", predicate: i0.forwardRef(() => DropdownItemDirective), descendants: true }], exportAs: ["cDropdownMenu"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cDropdownMenu]',
                     exportAs: 'cDropdownMenu',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DropdownService }], propDecorators: { alignment: [{
+        }], propDecorators: { alignment: [{
                 type: Input
             }], visible: [{
                 type: Input
-            }], dark: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], hostStyles: [{
                 type: HostBinding,
                 args: ['style']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], dropdownItemsContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DropdownItemDirective), { descendants: true }]
             }] } });
 
 // lightweight injection token
@@ -2677,17 +3157,12 @@ class DropdownToggleDirective {
          * @type boolean
          */
         this.caret = true;
-        this._split = false;
-    }
-    /**
-     * Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
-     * @type boolean
-     */
-    set split(value) {
-        this._split = coerceBooleanProperty(value);
-    }
-    get split() {
-        return this._split;
+        /**
+         * Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
+         * @type boolean
+         * @default false
+         */
+        this.split = false;
     }
     get hostClasses() {
         return {
@@ -2707,7 +3182,7 @@ class DropdownToggleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownToggleDirective, deps: [{ token: i0.ElementRef }, { token: DropdownService }, { token: DropdownToken, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: DropdownToggleDirective, isStandalone: true, selector: "[cDropdownToggle]", inputs: { dropdownComponent: "dropdownComponent", disabled: "disabled", caret: "caret", split: "split" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.hostClasses" } }, providers: [{ provide: DropdownToken, useExisting: forwardRef(() => DropdownComponent) }], exportAs: ["cDropdownToggle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: DropdownToggleDirective, isStandalone: true, selector: "[cDropdownToggle]", inputs: { dropdownComponent: "dropdownComponent", disabled: ["disabled", "disabled", booleanAttribute], caret: "caret", split: ["split", "split", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.hostClasses" } }, providers: [{ provide: DropdownToken, useExisting: forwardRef(() => DropdownComponent) }], exportAs: ["cDropdownToggle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownToggleDirective, decorators: [{
             type: Directive,
@@ -2722,11 +3197,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }] }], propDecorators: { dropdownComponent: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], caret: [{
                 type: Input
             }], split: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -2743,13 +3220,17 @@ class DropdownComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.dropdownService = dropdownService;
         this.autoClose = true;
-        this._dark = false;
         /**
          * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
          * @type Placement
          */
         this.placement = 'bottom-start';
-        this._popper = true;
+        /**
+         * If you want to disable dynamic positioning set this property to `false`.
+         * @type boolean
+         * @default true
+         */
+        this.popper = true;
         this._popperOptions = {
             placement: this.placement,
             modifiers: [],
@@ -2766,29 +3247,6 @@ class DropdownComponent {
         this.listeners = [];
         this.dropdownStateSubscribe();
     }
-    /**
-     * Sets a darker color scheme to match a dark navbar.
-     * @type boolean
-     * @default false
-     */
-    set dark(value) {
-        this._dark = coerceBooleanProperty(value);
-    }
-    ;
-    get dark() {
-        return this._dark;
-    }
-    /**
-     * If you want to disable dynamic positioning set this property to `false`.
-     * @type boolean
-     * @default true
-     */
-    set popper(value) {
-        this._popper = coerceBooleanProperty(value);
-    }
-    get popper() {
-        return this._popper;
-    }
     /**
      * Optional popper Options object, placement prop takes precedence over
      * @type Partial<Options>
@@ -2833,7 +3291,7 @@ class DropdownComponent {
      * @default false
      */
     set visible(value) {
-        const _value = coerceBooleanProperty(value);
+        const _value = value;
         if (_value !== this._visible) {
             this.activeTrap = _value;
             this._visible = _value;
@@ -2976,11 +3434,11 @@ class DropdownComponent {
         this.listeners = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: DropdownComponent, isStandalone: true, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block;min-width:fit-content}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: DropdownComponent, isStandalone: true, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", direction: "direction", placement: "placement", popper: ["popper", "popper", booleanAttribute], popperOptions: "popperOptions", variant: "variant", visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], usesOnChanges: true, hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], standalone: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block;min-width:fit-content}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
+            args: [{ selector: 'c-dropdown', template: '<ng-content />', exportAs: 'cDropdown', providers: [DropdownService], standalone: true, hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2988,20 +3446,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }], autoClose: [{
                 type: Input
-            }], dark: [{
-                type: Input
             }], direction: [{
                 type: Input
             }], placement: [{
                 type: Input
             }], popper: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], popperOptions: [{
                 type: Input
             }], variant: [{
                 type: Input
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visibleChange: [{
                 type: Output
             }], _toggler: [{
@@ -3025,6 +3483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class DropdownItemDirective {
+    #elementRef;
     constructor(dropdownService, dropdown) {
         this.dropdownService = dropdownService;
         this.dropdown = dropdown;
@@ -3034,8 +3493,15 @@ class DropdownItemDirective {
          * @default true
          */
         this.autoClose = true;
+        this.#elementRef = inject(ElementRef);
         this._tabIndex = null;
     }
+    focus(origin) {
+        this.#elementRef?.nativeElement?.focus();
+    }
+    getLabel() {
+        return this.#elementRef?.nativeElement?.textContent.trim();
+    }
     get ariaCurrent() {
         return this.active ? 'true' : null;
     }
@@ -3558,9 +4024,10 @@ class FormCheckInputDirective {
     /**
      * Set component indeterminate state.
      * @type boolean
+     * @default false
      */
     set indeterminate(value) {
-        const indeterminate = coerceBooleanProperty(value);
+        const indeterminate = value;
         if (this._indeterminate !== indeterminate) {
             this._indeterminate = indeterminate;
             const htmlInputElement = this.hostElement.nativeElement;
@@ -3582,7 +4049,7 @@ class FormCheckInputDirective {
         };
     }
     set checked(value) {
-        const checked = coerceBooleanProperty(value);
+        const checked = value;
         const htmlInputElement = this.hostElement?.nativeElement;
         if (htmlInputElement) {
             this.renderer.setProperty(htmlInputElement, 'checked', checked);
@@ -3603,7 +4070,7 @@ class FormCheckInputDirective {
         this._indeterminate = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormCheckInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: "indeterminate", valid: "valid", checked: "checked" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], valid: "valid", checked: ["checked", "checked", booleanAttribute] }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormCheckInputDirective, decorators: [{
             type: Directive,
@@ -3617,14 +4084,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }, {
                 type: Input
             }], indeterminate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], valid: [{
                 type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], checked: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class FormControlDirective {
@@ -4025,14 +4494,14 @@ class RowDirective {
         const cols = this.xs;
         const classes = {
             row: true,
-            [`row-cols-${cols}`]: !!cols,
+            [`row-cols-${cols}`]: !!cols
         };
         Object.keys(BreakpointInfix).forEach(breakpoint => {
             // @ts-ignore
             const value = this[breakpoint];
             if ((typeof value === 'number') || (typeof value === 'string')) {
-                const infix = breakpoint === 'xs' ? '' : breakpoint;
-                classes[`row-cols-${infix}-${value}`] = !!value;
+                const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+                classes[`row-cols${infix}-${value}`] = !!value;
             }
         });
         return classes;
@@ -4192,11 +4661,11 @@ class HeaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: HeaderComponent, isStandalone: true, selector: "c-header, [c-header]", inputs: { container: "container", position: "position", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.getClasses" } }, ngImport: i0, template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: HeaderComponent, isStandalone: true, selector: "c-header, [c-header]", inputs: { container: "container", position: "position", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.getClasses" } }, ngImport: i0, template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-header, [c-header]', standalone: true, imports: [NgClass], template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n\n\n" }]
+            args: [{ selector: 'c-header, [c-header]', standalone: true, imports: [NgClass], template: "@if (!!container) {\n  <div [ngClass]=\"headerClasses\">\n    <ng-content />\n  </div>\n} @else {\n  <ng-content />\n}\n" }]
         }], propDecorators: { container: [{
                 type: Input
             }], position: [{
@@ -4693,11 +5162,11 @@ class NavComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NavComponent, isStandalone: true, selector: "c-nav", inputs: { layout: "layout", variant: "variant" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host .nav-link:focus{outline:0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NavComponent, isStandalone: true, selector: "c-nav", inputs: { layout: "layout", variant: "variant" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-nav', template: `<ng-content></ng-content>`, standalone: true, styles: [":host .nav-link:focus{outline:0}\n"] }]
+            args: [{ selector: 'c-nav', template: `<ng-content></ng-content>`, standalone: true, styles: [":host .nav-link:focus{outline:0}:host.nav-underline-border{column-gap:0}\n"] }]
         }], propDecorators: { layout: [{
                 type: Input
             }], variant: [{
@@ -4738,18 +5207,12 @@ class NavbarComponent {
     constructor(hostElement, breakpointObserver) {
         this.hostElement = hostElement;
         this.breakpointObserver = breakpointObserver;
-        /**
-         * Sets if the color of text should be colored for a light or dark dark background.
-         */
-        this.colorScheme = 'light';
         this.role = 'navigation';
     }
     get hostClasses() {
         const expandClassSuffix = this.expand === true ? '' : `-${this.expand}`;
         return {
             navbar: true,
-            'navbar-light': this.colorScheme === 'light',
-            'navbar-dark': this.colorScheme === 'dark',
             [`navbar-expand${expandClassSuffix}`]: !!this.expand,
             [`bg-${this.color}`]: !!this.color,
             [`${this.placement}`]: !!this.placement
@@ -4783,15 +5246,15 @@ class NavbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NavbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NavbarComponent, isStandalone: true, selector: "c-navbar", inputs: { color: "color", colorScheme: "colorScheme", container: "container", expand: "expand", placement: "placement", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, queries: [{ propertyName: "collapse", first: true, predicate: CollapseDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\n\n<ng-template #withContainerTemplate>\n  <div [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #noContainerTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NavbarComponent, isStandalone: true, selector: "c-navbar", inputs: { color: "color", container: "container", expand: "expand", placement: "placement", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, queries: [{ propertyName: "collapse", first: true, predicate: CollapseDirective, descendants: true }], hostDirectives: [{ directive: ThemeDirective, inputs: ["colorScheme", "colorScheme"] }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\n\n<ng-template #withContainerTemplate>\n  <div [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #noContainerTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-navbar', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\n\n<ng-template #withContainerTemplate>\n  <div [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #noContainerTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'c-navbar', standalone: true, imports: [NgClass, NgTemplateOutlet], hostDirectives: [
+                        { directive: ThemeDirective, inputs: ['colorScheme'] }
+                    ], template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\n\n<ng-template #withContainerTemplate>\n  <div [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #noContainerTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.BreakpointObserver }], propDecorators: { color: [{
                 type: Input
-            }], colorScheme: [{
-                type: Input
             }], container: [{
                 type: Input
             }], expand: [{
@@ -5756,7 +6219,7 @@ class OffcanvasComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -5780,7 +6243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                             })),
                             transition('visible <=> *', [animate('300ms')])
                         ])
-                    ], exportAs: 'cOffcanvas', standalone: true, imports: [A11yModule], host: { ngSkipHydration: 'true' }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
+                    ], exportAs: 'cOffcanvas', standalone: true, imports: [A11yModule], hostDirectives: [
+                        { directive: ThemeDirective, inputs: ['dark'] }
+                    ], host: { ngSkipHydration: 'true' }, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -6121,18 +6586,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
 
 class PlaceholderDirective {
     constructor() {
-        this._visible = false;
-    }
-    /**
-     * placeholder toggler
-     * @type boolean
-     * @default false
-     */
-    set visible(value) {
-        this._visible = coerceBooleanProperty(value);
-    }
-    get visible() {
-        return this._visible;
+        /**
+         * placeholder toggler
+         * @type boolean
+         * @default false
+         */
+        this.visible = false;
     }
     get ariaHidden() {
         return this.visible ? null : true;
@@ -6145,7 +6604,7 @@ class PlaceholderDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: PlaceholderDirective, isStandalone: true, selector: "[cPlaceholder]", inputs: { visible: ["cPlaceholder", "visible"], size: ["cPlaceholderSize", "size"] }, host: { properties: { "attr.aria-hidden": "this.ariaHidden", "class": "this.hostClasses" } }, exportAs: ["cPlaceholder"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: PlaceholderDirective, isStandalone: true, selector: "[cPlaceholder]", inputs: { visible: ["cPlaceholder", "visible", booleanAttribute], size: ["cPlaceholderSize", "size"] }, host: { properties: { "attr.aria-hidden": "this.ariaHidden", "class": "this.hostClasses" } }, exportAs: ["cPlaceholder"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PlaceholderDirective, decorators: [{
             type: Directive,
@@ -6154,9 +6613,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     exportAs: 'cPlaceholder',
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { visible: [{
+        }], propDecorators: { visible: [{
                 type: Input,
-                args: ['cPlaceholder']
+                args: [{ alias: 'cPlaceholder', transform: booleanAttribute }]
             }], size: [{
                 type: Input,
                 args: ['cPlaceholderSize']
@@ -6361,7 +6820,7 @@ class PopoverDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 8]
+                        offset: [0, 9]
                     }
                 }
             ]
@@ -6536,136 +6995,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
-class ProgressComponent {
+class ProgressBarDirective {
     constructor() {
-        /**
-         * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
-         * @type number
-         */
-        this.height = 0;
-        /**
-         * Displays thin progress.
-         * @type boolean
-         */
-        this.thin = false;
-        /**
-         * Change the default color to white.
-         * @type boolean
-         */
-        this.white = false;
-    }
-    get hostClasses() {
-        return {
-            progress: true,
-            'progress-thin': this.thin,
-            'progress-white': this.white
-        };
-    }
-    get hostStyle() {
-        return !!this.height ? `${this.height}px` : '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: ["height", "height", numberAttribute], thin: ["thin", "thin", booleanAttribute], white: ["white", "white", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "style.height": "this.hostStyle" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'c-progress',
-                    template: '<ng-content></ng-content>',
-                    standalone: true
-                }]
-        }], propDecorators: { height: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thin: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], white: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
-class ProgressBarComponent {
-    constructor(renderer, hostElement) {
-        this.renderer = renderer;
-        this.hostElement = hostElement;
-        /**
-         * Use to animate the stripes right to left via CSS3 animations.
-         * @type boolean
-         */
-        this.animated = false;
+        this.#renderer = inject(Renderer2);
+        this.#hostElement = inject(ElementRef);
+        this.#max = signal(100);
+        this.#min = 0;
+        this.#value = signal(undefined);
+        this.#width = signal(undefined);
+        this.percent = computed(() => {
+            return +((((this.#value() ?? this.#width() ?? 0) - this.#min) / (this.#max() - this.#min)) * 100).toFixed(this.precision);
+        });
+        this.#valuesEffect = effect(() => {
+            const host = this.#hostElement.nativeElement;
+            if (this.#value() === undefined || this.#width()) {
+                for (let name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) {
+                    this.#renderer.removeAttribute(host, name);
+                }
+            }
+            else {
+                this.#renderer.setAttribute(host, 'aria-valuenow', String(this.#value()));
+                this.#renderer.setAttribute(host, 'aria-valuemin', String(this.#min));
+                this.#renderer.setAttribute(host, 'aria-valuemax', String(this.#max()));
+                this.#renderer.setAttribute(host, 'role', this.role);
+            }
+            const tagName = host.tagName;
+            if (this.percent() && ((this.stacked && tagName === 'C-PROGRESS') || (!this.stacked && tagName !== 'C-PROGRESS'))) {
+                this.#renderer.setStyle(host, 'width', `${this.percent()}%`);
+            }
+            else {
+                this.#renderer.removeStyle(host, 'width');
+            }
+        });
         // TODO: check if this is necessary.
         this.precision = 0;
         /**
-         * The percent to progress the ProgressBar.
-         * @type number
+         * Stacked ProgressBars.
+         * @type boolean
+         * @default false
          */
-        this.value = 0;
+        this.stacked = false;
         /**
          * Set default html role attribute.
          * @type string
          */
         this.role = 'progressbar';
-        this.state = {
-            percent: 0,
-            min: 0,
-            max: 100
-        };
-    }
-    get min() {
-        return this.state.min;
-    }
-    set min(value) {
-        this.state.min = isNaN(value) ? 0 : value;
-    }
-    get max() {
-        return this.state.max;
-    }
-    set max(value) {
-        this.state.max = isNaN(value) || value <= 0 || value === this.min ? 100 : value;
-    }
-    get hostClasses() {
-        return {
-            'progress-bar': true,
-            'progress-bar-animated': this.animated,
-            [`progress-bar-${this.variant}`]: !!this.variant,
-            [`bg-${this.color}`]: !!this.color
-        };
     }
-    ngOnInit() {
-        this.setValues();
+    #renderer;
+    #hostElement;
+    #max;
+    #min;
+    #value;
+    #width;
+    #valuesEffect;
+    /**
+     * The percent value the ProgressBar.
+     * @type number
+     * @default 0
+     */
+    set value(value) {
+        this.#value.set(value);
     }
-    setPercent() {
-        this.state.percent = +((this.value / (this.max - this.min)) * 100).toFixed(this.precision);
+    get value() {
+        return this.#value();
     }
-    setValues() {
-        this.setPercent();
-        const host = this.hostElement.nativeElement;
-        this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
-        this.renderer.setAttribute(host, 'aria-valuenow', String(this.value));
-        this.renderer.setAttribute(host, 'aria-valuemin', String(this.min));
-        this.renderer.setAttribute(host, 'aria-valuemax', String(this.max));
+    set width(value) {
+        this.#width.set(value);
     }
-    ngOnChanges(changes) {
-        this.setValues();
+    /**
+     * The max value of the ProgressBar.
+     * @type number
+     * @default 100
+     */
+    set max(max) {
+        this.#max.set(isNaN(max) || max <= 0 ? 100 : max);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], variant: "variant", role: "role", min: "min", max: "max" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: ProgressBarDirective, isStandalone: true, selector: "[cProgressBar]", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], width: ["width", "width", numberAttribute], variant: "variant", max: ["max", "max", numberAttribute], stacked: ["stacked", "stacked", booleanAttribute], role: "role" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'c-progress-bar',
-                    template: '<ng-content></ng-content>',
+                    selector: '[cProgressBar]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { animated: [{
+        }], ctorParameters: () => [], propDecorators: { animated: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], color: [{
@@ -6676,103 +7090,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], value: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], width: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], variant: [{
                 type: Input
-            }], role: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.role']
-            }], min: [{
-                type: Input
             }], max: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], stacked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], role: [{
+                type: Input
             }] } });
 
-class ProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, imports: [ProgressComponent,
-            ProgressBarComponent], exports: [ProgressComponent,
-            ProgressBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule }); }
+class ProgressBarComponent {
+    #progressBarDirective = inject(ProgressBarDirective, { optional: true });
+    get hostClasses() {
+        const animated = this.#progressBarDirective?.animated;
+        const color = this.#progressBarDirective?.color;
+        const variant = this.#progressBarDirective?.variant;
+        return {
+            'progress-bar': true,
+            'progress-bar-animated': !!animated,
+            [`progress-bar-${variant}`]: !!variant,
+            [`bg-${color}`]: !!color
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", host: { properties: { "class": "this.hostClasses" } }, hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "stacked", "stacked", "value", "value", "variant", "variant", "width", "width"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
             args: [{
-                    exports: [
-                        ProgressComponent,
-                        ProgressBarComponent
-                    ],
-                    imports: [
-                        ProgressComponent,
-                        ProgressBarComponent
-                    ]
+                    selector: 'c-progress-bar',
+                    template: '<ng-content />',
+                    standalone: true,
+                    hostDirectives: [{
+                            directive: ProgressBarDirective,
+                            inputs: ['animated', 'color', 'max', 'role', 'stacked', 'value', 'variant', 'width']
+                        }],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-class SpinnerComponent {
+class ProgressStackedComponent {
+    constructor() {
+        this.stacked = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressStackedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ProgressStackedComponent, isStandalone: true, selector: "c-progress-stacked", inputs: { stacked: "stacked" }, host: { properties: { "class.progress-stacked": "this.stacked" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressStackedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-progress-stacked', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex}\n"] }]
+        }], propDecorators: { stacked: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.progress-stacked']
+            }] } });
+
+class ProgressComponent {
+    #stacked;
+    #elementRef;
     constructor() {
+        this.pbd = inject(ProgressBarDirective, { optional: true });
+        this.#stacked = inject(ProgressStackedComponent, { optional: true })?.stacked;
+        this.#elementRef = inject(ElementRef);
         /**
-         * Label for accessibility.
-         * @type string
-         * @default 'Loading...'
+         * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
+         * @type number
          */
-        this.label = "Loading...";
+        this.height = 0;
         /**
-         * Set the button variant to an outlined button or a ghost button.
-         * @values 'border' | 'grow'
-         * @default 'border'
+         * Displays thin progress.
+         * @type boolean
          */
-        this.variant = 'border';
-        this.role = 'status';
+        this.thin = false;
+        /**
+         * Change the default color to white.
+         * @type boolean
+         */
+        this.white = false;
+        if (this.pbd) {
+            this.pbd.stacked = this.#stacked;
+        }
     }
     get hostClasses() {
         return {
-            [`spinner-${this.variant}`]: true,
-            [`text-${this.color}`]: !!this.color,
-            [`spinner-${this.variant}-${this.size}`]: !!this.size
+            progress: true,
+            'progress-thin': this.thin,
+            'progress-white': this.white
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpinnerComponent, isStandalone: true, selector: "c-spinner", inputs: { color: "color", label: "label", size: "size", variant: "variant", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"visually-hidden\">{{label}}</span>\n" }); }
+    get hostStyle() {
+        return !!this.height ? `${this.height}px` : this.#elementRef?.nativeElement?.style?.height ?? undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: ["height", "height", numberAttribute], thin: ["thin", "thin", booleanAttribute], white: ["white", "white", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "style.height": "this.hostStyle" } }, queries: [{ propertyName: "contentProgressBars", predicate: ProgressBarComponent }], hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "value", "value", "variant", "variant"] }], ngImport: i0, template: "@if (contentProgressBars.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else if (pbd?.stacked) {\n  <c-progress-bar [animated]=\"pbd?.animated\" [variant]=\"pbd?.variant\" [color]=\"pbd?.color\" stacked>\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n} @else {\n  <c-progress-bar [width]=\"pbd?.percent()\" [animated]=\"pbd?.animated\" [variant]=\"pbd?.variant\" [color]=\"pbd?.color\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"], dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-spinner', standalone: true, template: "<span class=\"visually-hidden\">{{label}}</span>\n" }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.role']
+            args: [{ selector: 'c-progress', imports: [ProgressBarComponent, NgTemplateOutlet], standalone: true, hostDirectives: [{
+                            directive: ProgressBarDirective,
+                            inputs: ['animated', 'color', 'max', 'role', 'value', 'variant']
+                        }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (contentProgressBars.length) {\n  <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else if (pbd?.stacked) {\n  <c-progress-bar [animated]=\"pbd?.animated\" [variant]=\"pbd?.variant\" [color]=\"pbd?.color\" stacked>\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n} @else {\n  <c-progress-bar [width]=\"pbd?.percent()\" [animated]=\"pbd?.animated\" [variant]=\"pbd?.variant\" [color]=\"pbd?.color\">\n    <ng-container *ngTemplateOutlet=\"defaultContent\" />\n  </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n  <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentProgressBars: [{
+                type: ContentChildren,
+                args: [ProgressBarComponent]
+            }], height: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], thin: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], white: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], hostStyle: [{
+                type: HostBinding,
+                args: ['style.height']
             }] } });
 
-class SpinnerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, imports: [SpinnerComponent], exports: [SpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule }); }
+class ProgressModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, imports: [ProgressComponent,
+            ProgressBarComponent,
+            ProgressBarDirective,
+            ProgressStackedComponent], exports: [ProgressComponent,
+            ProgressBarComponent,
+            ProgressBarDirective,
+            ProgressStackedComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
-                        SpinnerComponent
+                        ProgressComponent,
+                        ProgressBarComponent,
+                        ProgressBarDirective,
+                        ProgressStackedComponent
                     ],
                     imports: [
-                        SpinnerComponent
+                        ProgressComponent,
+                        ProgressBarComponent,
+                        ProgressBarDirective,
+                        ProgressStackedComponent
                     ]
                 }]
         }] });
@@ -6852,48 +7324,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }] }, { type: SidebarService }] });
 
 class SidebarComponent {
-    #narrow;
-    #overlaid;
-    #unfoldable;
     #visible;
     #onMobile;
     #layoutChangeSubscription;
     #stateToggleSubscription;
     #stateInitial;
-    /**
-     * Make sidebar narrow. [docs]
-     * @type boolean
-     */
-    set narrow(value) {
-        this.#narrow = coerceBooleanProperty(value);
-    }
-    get narrow() {
-        return this.#narrow;
-    }
-    /**
-     * Set sidebar to overlaid variant.
-     * @type boolean
-     */
-    set overlaid(value) {
-        this.#overlaid = coerceBooleanProperty(value);
-    }
-    get overlaid() {
-        return this.#overlaid;
-    }
-    /**
-     * Expand narrowed sidebar on hover. [docs]
-     */
-    set unfoldable(value) {
-        this.#unfoldable = coerceBooleanProperty(value);
-    }
-    get unfoldable() {
-        return this.#unfoldable;
-    }
     /**
      * Toggle the visibility of sidebar component. [docs]
+     * @type boolean
+     * @default false
      */
     set visible(value) {
-        const visible = coerceBooleanProperty(value);
+        const visible = value;
         if (this.#visible !== visible) {
             this.#visible = visible;
             this.visibleChange.emit(this.#visible);
@@ -6940,9 +7382,6 @@ class SidebarComponent {
         this.breakpointObserver = breakpointObserver;
         this.sidebarService = sidebarService;
         this.backdropService = backdropService;
-        this.#narrow = false;
-        this.#overlaid = false;
-        this.#unfoldable = false;
         this.#visible = false;
         this.#onMobile = false;
         this.state = {
@@ -6953,11 +7392,29 @@ class SidebarComponent {
             visible: false,
             unfoldable: false
         };
+        /**
+         * Make sidebar narrow. [docs]
+         * @type boolean
+         * @default false
+         */
+        this.narrow = false;
+        /**
+         * Set sidebar to overlaid variant.
+         * @type boolean
+         * @default false
+         */
+        this.overlaid = false;
         /**
          * Place sidebar in non-static positions. [docs]
          * @default 'fixed'
          */
         this.position = 'fixed';
+        /**
+         * Expand narrowed sidebar on hover. [docs]
+         * @type boolean
+         * @default false
+         */
+        this.unfoldable = false;
         /**
          * Event emitted on visibility change. [docs]
          * @type boolean
@@ -6973,8 +7430,11 @@ class SidebarComponent {
             'sidebar-narrow': this.narrow && !this.unfoldable,
             'sidebar-narrow-unfoldable': this.unfoldable,
             'sidebar-overlaid': this.overlaid,
+            [`sidebar-${this.placement}`]: !!this.placement,
+            [`sidebar-${this.colorScheme}`]: !!this.colorScheme,
             [`sidebar-${this.size}`]: !!this.size,
-            show: visible && this.#onMobile,
+            show: visible,
+            // show: visible && this.#onMobile, //todo: check
             hide: !visible
         };
     }
@@ -6995,7 +7455,7 @@ class SidebarComponent {
         for (const propName in changes) {
             if (propList.includes(propName)) {
                 if (changes[propName] && !changes[propName].firstChange) {
-                    const value = coerceBooleanProperty(changes[propName].currentValue);
+                    const value = booleanAttribute(changes[propName].currentValue);
                     if (oldStateMap.get(propName) !== value) {
                         newStateMap.set(propName, value);
                     }
@@ -7054,14 +7514,14 @@ class SidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$2.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SidebarComponent, isStandalone: true, selector: "c-sidebar", inputs: { colorScheme: "colorScheme", id: "id", narrow: "narrow", overlaid: "overlaid", placement: "placement", position: "position", size: "size", unfoldable: "unfoldable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.getClasses" } }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: SidebarComponent, isStandalone: true, selector: "c-sidebar", inputs: { colorScheme: "colorScheme", id: "id", narrow: ["narrow", "narrow", booleanAttribute], overlaid: ["overlaid", "overlaid", booleanAttribute], placement: "placement", position: "position", size: "size", unfoldable: ["unfoldable", "unfoldable", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.getClasses" } }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-sidebar',
                     exportAs: 'cSidebar',
-                    template: '<ng-content></ng-content>',
+                    template: '<ng-content />',
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
@@ -7072,9 +7532,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], id: [{
                 type: Input
             }], narrow: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], overlaid: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], placement: [{
                 type: Input
             }], position: [{
@@ -7082,9 +7544,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], size: [{
                 type: Input
             }], unfoldable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visibleChange: [{
                 type: Output
             }], getClasses: [{
@@ -7101,11 +7565,11 @@ class SidebarBrandComponent {
         this.brandImg = Boolean(this.brandFull || this.brandNarrow);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarBrandComponent, isStandalone: true, selector: "c-sidebar-brand", inputs: { brandFull: "brandFull", brandNarrow: "brandNarrow", routerLink: "routerLink" }, host: { properties: { "class.sidebar-brand": "this.sidebarBrandClass" } }, ngImport: i0, template: "@if (brandImg) {\n  <a [routerLink]=\"routerLink\">\n    @if (brandFull) {\n      <img [cHtmlAttr]=\"brandFull\"\n           [ngClass]=\"'sidebar-brand-full'\">\n    }\n    @if (brandNarrow) {\n      <img [cHtmlAttr]=\"brandNarrow\"\n           [ngClass]=\"'sidebar-brand-narrow'\">\n    }\n  </a>\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarBrandComponent, isStandalone: true, selector: "c-sidebar-brand", inputs: { brandFull: "brandFull", brandNarrow: "brandNarrow", routerLink: "routerLink" }, host: { properties: { "class.sidebar-brand": "this.sidebarBrandClass" } }, ngImport: i0, template: "@if (brandImg) {\n  <a [routerLink]=\"routerLink\">\n    @if (brandFull) {\n      <img [cHtmlAttr]=\"brandFull\" [ngClass]=\"'sidebar-brand-full'\">\n    }\n    @if (brandNarrow) {\n      <img [cHtmlAttr]=\"brandNarrow\" [ngClass]=\"'sidebar-brand-narrow'\">\n    }\n  </a>\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarBrandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-brand', standalone: true, imports: [RouterLink, HtmlAttributesDirective, NgClass], template: "@if (brandImg) {\n  <a [routerLink]=\"routerLink\">\n    @if (brandFull) {\n      <img [cHtmlAttr]=\"brandFull\"\n           [ngClass]=\"'sidebar-brand-full'\">\n    }\n    @if (brandNarrow) {\n      <img [cHtmlAttr]=\"brandNarrow\"\n           [ngClass]=\"'sidebar-brand-narrow'\">\n    }\n  </a>\n} @else {\n  <ng-content />\n}\n" }]
+            args: [{ selector: 'c-sidebar-brand', standalone: true, imports: [RouterLink, HtmlAttributesDirective, NgClass], template: "@if (brandImg) {\n  <a [routerLink]=\"routerLink\">\n    @if (brandFull) {\n      <img [cHtmlAttr]=\"brandFull\" [ngClass]=\"'sidebar-brand-full'\">\n    }\n    @if (brandNarrow) {\n      <img [cHtmlAttr]=\"brandNarrow\" [ngClass]=\"'sidebar-brand-narrow'\">\n    }\n  </a>\n} @else {\n  <ng-content />\n}\n" }]
         }], propDecorators: { brandFull: [{
                 type: Input
             }], brandNarrow: [{
@@ -7155,20 +7619,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
-class SidebarTogglerComponent {
+class SidebarTogglerDirective {
     constructor() {
         this.role = 'button';
         this.sidebarTogglerClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SidebarTogglerComponent, isStandalone: true, selector: "c-sidebar-toggler", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role", "class.sidebar-toggler": "this.sidebarTogglerClass" } }, ngImport: i0, template: ``, isInline: true }); }
+    get getStyles() {
+        return {
+            appearance: 'button',
+            'align-items': 'flex-start',
+            cursor: 'pointer'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarTogglerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: SidebarTogglerDirective, isStandalone: true, selector: "[cSidebarToggler]", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role", "class.sidebar-toggler": "this.sidebarTogglerClass", "style": "this.getStyles" } }, hostDirectives: [{ directive: SidebarToggleDirective, inputs: ["cSidebarToggle", "cSidebarToggler", "toggle", "toggle"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarTogglerComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarTogglerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'c-sidebar-toggler',
-                    template: ``,
-                    standalone: true
+                    selector: '[cSidebarToggler]',
+                    standalone: true,
+                    hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }]
                 }]
         }], propDecorators: { role: [{
                 type: HostBinding,
@@ -7178,6 +7649,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], sidebarTogglerClass: [{
                 type: HostBinding,
                 args: ['class.sidebar-toggler']
+            }], getStyles: [{
+                type: HostBinding,
+                args: ['style']
             }] } });
 
 class SidebarHeaderComponent {
@@ -7428,7 +7902,7 @@ class SidebarNavLinkComponent {
         this.linkClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavLinkComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavLinkComponent, isStandalone: true, selector: "c-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "@switch (linkType) {\n  @case ('disabled') {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [href]=\"href\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       (click)=\"linkClicked()\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       [target]=\"item.attributes?.['target']\"\n       [queryParams]=\"item.linkProps?.queryParams ?? null\"\n       [fragment]=\"item.linkProps?.fragment\"\n       [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\n       [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\n       [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\n       [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\n       [state]=\"item.linkProps?.state ?? {}\"\n       [routerLink]=\"item.url\"\n       routerLinkActive=\"active\"\n       [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n       (click)=\"linkClicked()\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n\n<ng-template #iconTemplate let-item>\n  @if (item?.icon) {\n    <i [ngClass]=\"item | cSidebarNavIcon\"></i>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [name]=\"item.iconComponent?.name\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }, { kind: "pipe", type: SidebarNavLinkPipe, name: "cSidebarNavLink" }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavLinkComponent, isStandalone: true, selector: "c-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "@switch (linkType) {\n  @case ('disabled') {\n    <a [cHtmlAttr]=\"item.attributes ?? {}\" [ngClass]=\"item | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a (click)=\"linkClicked()\" [cHtmlAttr]=\"item.attributes ?? {}\" [href]=\"href\" [ngClass]=\"item | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a (click)=\"linkClicked()\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       [fragment]=\"item.linkProps?.fragment\"\n       [ngClass]=\"item | cSidebarNavLink\"\n       [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\n       [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\n       [queryParams]=\"item.linkProps?.queryParams ?? null\"\n       [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\n       [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n       [routerLink]=\"item.url\"\n       [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\n       [state]=\"item.linkProps?.state ?? {}\"\n       [target]=\"item.attributes?.['target']\"\n       routerLinkActive=\"active\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [ngClass]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }, { kind: "pipe", type: SidebarNavLinkPipe, name: "cSidebarNavLink" }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "pipe", type: SidebarNavIconPipe, name: "cSidebarNavIcon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavLinkComponent, decorators: [{
             type: Component,
@@ -7436,13 +7910,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         RouterModule,
                         HtmlAttributesDirective,
                         IconDirective,
-                        NgClass,
-                        NgTemplateOutlet,
                         SidebarNavLinkContentComponent,
                         SidebarNavLinkPipe,
                         SidebarNavBadgePipe,
-                        SidebarNavIconPipe
-                    ], template: "@switch (linkType) {\n  @case ('disabled') {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [href]=\"href\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       (click)=\"linkClicked()\"\n    >\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a [ngClass]=\"item | cSidebarNavLink\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       [target]=\"item.attributes?.['target']\"\n       [queryParams]=\"item.linkProps?.queryParams ?? null\"\n       [fragment]=\"item.linkProps?.fragment\"\n       [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\n       [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\n       [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\n       [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\n       [state]=\"item.linkProps?.state ?? {}\"\n       [routerLink]=\"item.url\"\n       routerLinkActive=\"active\"\n       [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n       (click)=\"linkClicked()\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n\n<ng-template #iconTemplate let-item>\n  @if (item?.icon) {\n    <i [ngClass]=\"item | cSidebarNavIcon\"></i>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [name]=\"item.iconComponent?.name\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n" }]
+                        SidebarNavIconPipe,
+                        NgTemplateOutlet,
+                        NgClass
+                    ], template: "@switch (linkType) {\n  @case ('disabled') {\n    <a [cHtmlAttr]=\"item.attributes ?? {}\" [ngClass]=\"item | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @case ('external') {\n    <a (click)=\"linkClicked()\" [cHtmlAttr]=\"item.attributes ?? {}\" [href]=\"href\" [ngClass]=\"item | cSidebarNavLink\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n  @default {\n    <a (click)=\"linkClicked()\"\n       [cHtmlAttr]=\"item.attributes ?? {}\"\n       [fragment]=\"item.linkProps?.fragment\"\n       [ngClass]=\"item | cSidebarNavLink\"\n       [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\n       [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\n       [queryParams]=\"item.linkProps?.queryParams ?? null\"\n       [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\n       [routerLinkActiveOptions]=\"item.linkProps?.routerLinkActiveOptions ?? { exact: false }\"\n       [routerLink]=\"item.url\"\n       [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\n       [state]=\"item.linkProps?.state ?? {}\"\n       [target]=\"item.attributes?.['target']\"\n       routerLinkActive=\"active\"\n    >\n      <!--    [class.active]=\"linkActive\"-->\n      <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n      <c-sidebar-nav-link-content [item]=\"item\" />\n      @if (item.badge) {\n        <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n      }\n    </a>\n  }\n}\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n      <span [ngClass]=\"item.icon ?? ''\"></span>\n    </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    ></svg>\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { item: [{
                 type: Input
             }], linkClick: [{
@@ -7477,11 +7951,11 @@ class SidebarNavLabelComponent {
         return this.iconClasses;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavLabelComponent, deps: [{ token: SidebarNavHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavLabelComponent, isStandalone: true, selector: "c-sidebar-nav-label", inputs: { item: "item" }, ngImport: i0, template: "<a [ngClass]=\"getItemClass()\"\n   href=\"{{item.url}}\"\n   [cHtmlAttr]=\"item.attributes\">\n  @if (helper.hasIcon(item)) {\n    <i [ngClass]=\"getLabelIconClass()\"></i>\n  }\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n", dependencies: [{ kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavLabelComponent, isStandalone: true, selector: "c-sidebar-nav-label", inputs: { item: "item" }, ngImport: i0, template: "<a [cHtmlAttr]=\"item.attributes\"\n   [ngClass]=\"getItemClass()\"\n   href=\"{{item.url}}\">\n  @if (helper.hasIcon(item)) {\n    <i [ngClass]=\"getLabelIconClass()\"></i>\n  }\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n", dependencies: [{ kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "pipe", type: SidebarNavBadgePipe, name: "cSidebarNavBadge" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-nav-label', standalone: true, imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass], template: "<a [ngClass]=\"getItemClass()\"\n   href=\"{{item.url}}\"\n   [cHtmlAttr]=\"item.attributes\">\n  @if (helper.hasIcon(item)) {\n    <i [ngClass]=\"getLabelIconClass()\"></i>\n  }\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n" }]
+            args: [{ selector: 'c-sidebar-nav-label', standalone: true, imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass], template: "<a [cHtmlAttr]=\"item.attributes\"\n   [ngClass]=\"getItemClass()\"\n   href=\"{{item.url}}\">\n  @if (helper.hasIcon(item)) {\n    <i [ngClass]=\"getLabelIconClass()\"></i>\n  }\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n" }]
         }], ctorParameters: () => [{ type: SidebarNavHelper }], propDecorators: { item: [{
                 type: Input
             }] } });
@@ -7682,7 +8156,7 @@ class SidebarNavGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavGroupComponent, deps: [{ token: i1$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: SidebarNavHelper }, { token: SidebarNavGroupService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show" }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper, SidebarNavGroupService], viewQueries: [{ propertyName: "sidebarNav", first: true, predicate: i0.forwardRef(() => SidebarNavComponent), descendants: true, read: ElementRef }], ngImport: i0, template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  @if (item?.icon) {\n    <i [ngClass]=\"item | cSidebarNavIcon\"></i>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavGroupComponent, isStandalone: true, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show", compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper, SidebarNavGroupService], viewQueries: [{ propertyName: "sidebarNav", first: true, predicate: i0.forwardRef(() => SidebarNavComponent), descendants: true, read: ElementRef }], ngImport: i0, template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [compact]=\"compact\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => HtmlAttributesDirective), selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavIconPipe), name: "cSidebarNavIcon" }, { kind: "pipe", type: i0.forwardRef(() => SidebarNavBadgePipe), name: "cSidebarNavBadge" }, { kind: "component", type: i0.forwardRef(() => SidebarNavComponent), selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
             trigger('openClose', [
                 state('open', style({
                     height: '*'
@@ -7719,13 +8193,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                                 animate('.15s ease')
                             ])
                         ])
-                    ], template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  @if (item?.icon) {\n    <i [ngClass]=\"item | cSidebarNavIcon\"></i>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
+                    ], template: "<a (click)=\"toggleGroup($event)\"\n   [cHtmlAttr]=\"item.attributes\"\n   class=\"nav-link nav-group-toggle\"\n   href>\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\" />\n  <ng-container>{{ item.name }}</ng-container>\n  @if (helper.hasBadge(item)) {\n    <span [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\n  }\n</a>\n<c-sidebar-nav\n  (@openClose.done)=\"onAnimationDone($event)\"\n  (@openClose.start)=\"onAnimationStart($event)\"\n  [@openClose]=\"open ? 'open' : 'closed'\"\n  [compact]=\"compact\"\n  [dropdownMode]=\"dropdownMode\"\n  [groupItems]=\"true\"\n  [navItems]=\"navItems\"\n  [ngStyle]=\"display\"\n/>\n\n<ng-template #iconTemplate let-item>\n  <!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  @if (item?.icon) {\n    <span class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  }\n  @if (item?.iconComponent) {\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  }\n  @if (!item?.icon && !item?.iconComponent) {\n    <span [ngClass]=\"item | cSidebarNavIcon\"></span>\n  }\n</ng-template>\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: SidebarNavHelper }, { type: SidebarNavGroupService }], propDecorators: { item: [{
                 type: Input
             }], dropdownMode: [{
                 type: Input
             }], show: [{
                 type: Input
+            }], compact: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -7743,18 +8220,20 @@ class SidebarNavComponent {
         this.sidebarService = sidebarService;
         this.navItems = [];
         this.dropdownMode = 'path';
+        // @HostBinding('class.nav-group-items')
+        // get sidebarNavGroupItemsClass(): boolean {
+        //   return !!this.groupItems;
+        // }
         this.role = 'nav';
         this.navItemsArray = [];
     }
     get hostClasses() {
         return {
             'sidebar-nav': !this.groupItems,
-            compact: !this.groupItems && !!this.compact
+            'nav-group-items': this.groupItems,
+            compact: this.groupItems && this.compact
         };
     }
-    get sidebarNavGroupItemsClass() {
-        return !!this.groupItems;
-    }
     ngOnChanges(changes) {
         this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
     }
@@ -7765,7 +8244,7 @@ class SidebarNavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavComponent, deps: [{ token: SidebarComponent, optional: true }, { token: SidebarNavHelper }, { token: i1$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: "navItems", dropdownMode: "dropdownMode", groupItems: "groupItems", compact: "compact" }, host: { properties: { "class": "this.hostClasses", "class.nav-group-items": "this.sidebarNavGroupItemsClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: SidebarNavLabelComponent, selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: SidebarNavTitleComponent, selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: SidebarNavDividerComponent, selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show"] }, { kind: "pipe", type: SidebarNavItemClassPipe, name: "cSidebarNavItemClass" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: SidebarNavComponent, isStandalone: true, selector: "c-sidebar-nav", inputs: { navItems: "navItems", dropdownMode: "dropdownMode", groupItems: ["groupItems", "groupItems", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n        [compact]=\"compact\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: ["item"], outputs: ["linkClick"] }, { kind: "component", type: SidebarNavLabelComponent, selector: "c-sidebar-nav-label", inputs: ["item"] }, { kind: "component", type: SidebarNavTitleComponent, selector: "c-sidebar-nav-title", inputs: ["item"] }, { kind: "component", type: SidebarNavDividerComponent, selector: "c-sidebar-nav-divider", inputs: ["item"] }, { kind: "component", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: ["item", "dropdownMode", "show", "compact"] }, { kind: "pipe", type: SidebarNavItemClassPipe, name: "cSidebarNavItemClass" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SidebarNavComponent, decorators: [{
             type: Component,
@@ -7779,7 +8258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         SidebarNavGroupComponent,
                         SidebarNavItemClassPipe,
                         RouterModule
-                    ], template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content />\n" }]
+                    ], template: "@for (item of navItemsArray; track item) {\n  @switch (helper.itemType(item)) {\n    @case ('group') {\n      <c-sidebar-nav-group\n        #rla=\"routerLinkActive\"\n        [dropdownMode]=\"dropdownMode\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n        [routerLinkActiveOptions]=\"{exact: true}\"\n        routerLinkActive=\"show\"\n        [compact]=\"compact\"\n      />\n    }\n    @case ('divider') {\n      <c-sidebar-nav-divider\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('title') {\n      <c-sidebar-nav-title\n        [cHtmlAttr]=\"item.attributes ?? {}\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('label') {\n      <c-sidebar-nav-label\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n    @case ('empty') {\n      <ng-container />\n    }\n    @default {\n      <c-sidebar-nav-link\n        (linkClick)=\"hideMobile()\"\n        [item]=\"item\"\n        [ngClass]=\"item | cSidebarNavItemClass\"\n      />\n    }\n  }\n}\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: SidebarComponent, decorators: [{
                     type: Optional
                 }] }, { type: SidebarNavHelper }, { type: i1$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: SidebarService }], propDecorators: { navItems: [{
@@ -7787,15 +8266,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], dropdownMode: [{
                 type: Input
             }], groupItems: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compact: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], sidebarNavGroupItemsClass: [{
-                type: HostBinding,
-                args: ['class.nav-group-items']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -7819,9 +8297,9 @@ class SidebarModule {
             SidebarNavLinkPipe,
             SidebarNavTitleComponent,
             SidebarToggleDirective,
-            SidebarTogglerComponent], exports: [SidebarComponent,
+            SidebarTogglerDirective], exports: [SidebarComponent,
             SidebarToggleDirective,
-            SidebarTogglerComponent,
+            SidebarTogglerDirective,
             SidebarBrandComponent,
             SidebarNavComponent,
             SidebarHeaderComponent,
@@ -7854,12 +8332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         SidebarNavLinkPipe,
                         SidebarNavTitleComponent,
                         SidebarToggleDirective,
-                        SidebarTogglerComponent
+                        SidebarTogglerDirective
                     ],
                     exports: [
                         SidebarComponent,
                         SidebarToggleDirective,
-                        SidebarTogglerComponent,
+                        SidebarTogglerDirective,
                         SidebarBrandComponent,
                         SidebarNavComponent,
                         SidebarHeaderComponent,
@@ -7873,6 +8351,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
+class SpinnerComponent {
+    constructor() {
+        /**
+         * Label for accessibility.
+         * @type string
+         * @default 'Loading...'
+         */
+        this.label = "Loading...";
+        /**
+         * Set the button variant to an outlined button or a ghost button.
+         * @values 'border' | 'grow'
+         * @default 'border'
+         */
+        this.variant = 'border';
+        this.role = 'status';
+    }
+    get hostClasses() {
+        return {
+            [`spinner-${this.variant}`]: true,
+            [`text-${this.color}`]: !!this.color,
+            [`spinner-${this.variant}-${this.size}`]: !!this.size
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpinnerComponent, isStandalone: true, selector: "c-spinner", inputs: { color: "color", label: "label", size: "size", variant: "variant", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"visually-hidden\">{{label}}</span>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-spinner', standalone: true, template: "<span class=\"visually-hidden\">{{label}}</span>\n" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SpinnerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, imports: [SpinnerComponent], exports: [SpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        SpinnerComponent
+                    ],
+                    imports: [
+                        SpinnerComponent
+                    ]
+                }]
+        }] });
+
 class TableColorDirective {
     get hostClasses() {
         return {
@@ -8086,7 +8628,7 @@ class TabPaneComponent {
         this.subscribeTabService();
     }
     set active(value) {
-        const newValue = coerceBooleanProperty(value);
+        const newValue = booleanAttribute(value);
         if (this._active !== newValue) {
             this._active = newValue;
             this.changeDetectorRef.markForCheck();
@@ -8119,13 +8661,11 @@ class TabPaneComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabPaneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TabPaneComponent, isStandalone: true, selector: "c-tab-pane", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cTabPane"], ngImport: i0, template: `
-    <ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TabPaneComponent, isStandalone: true, selector: "c-tab-pane", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cTabPane"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-tab-pane', template: `
-    <ng-content></ng-content>`, exportAs: 'cTabPane', standalone: true, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-tab-pane', template: '<ng-content />', exportAs: 'cTabPane', standalone: true, styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -8137,7 +8677,7 @@ class TabContentComponent {
      * @type number
      */
     set activeTabPaneIdx(value) {
-        const newValue = coerceNumberProperty(value);
+        const newValue = value;
         if (this._activeTabPaneIdx != newValue) {
             this._activeTabPaneIdx = newValue;
             this.activeTabPaneIdxChange.emit(newValue);
@@ -8201,13 +8741,14 @@ class TabContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TabContentComponent, isStandalone: true, selector: "c-tab-content", inputs: { activeTabPaneIdx: "activeTabPaneIdx" }, outputs: { activeTabPaneIdxChange: "activeTabPaneIdxChange" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "panes", predicate: TabPaneComponent }], exportAs: ["cTabContent"], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: TabContentComponent, isStandalone: true, selector: "c-tab-content", inputs: { activeTabPaneIdx: ["activeTabPaneIdx", "activeTabPaneIdx", numberAttribute] }, outputs: { activeTabPaneIdxChange: "activeTabPaneIdxChange" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "panes", predicate: TabPaneComponent }], exportAs: ["cTabContent"], usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-tab-content', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cTabContent', standalone: true, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-tab-content', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cTabContent', standalone: true, styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TabService }], propDecorators: { activeTabPaneIdx: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], activeTabPaneIdxChange: [{
                 type: Output
             }], panes: [{
@@ -8234,9 +8775,10 @@ class TabContentRefDirective {
     /**
      * Set active state of tab content
      * @type boolean
+     * @default false
      */
     set active(value) {
-        const newValue = coerceBooleanProperty(value);
+        const newValue = value;
         if (this._active !== newValue) {
             this._active = newValue;
             this.changeDetectorRef.detectChanges();
@@ -8250,7 +8792,7 @@ class TabContentRefDirective {
      * @type boolean
      */
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        this._disabled = value;
     }
     get disabled() {
         return this._disabled || this.tabPaneIdx >= this.tabContentRef?.panes?.length;
@@ -8307,7 +8849,7 @@ class TabContentRefDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabContentRefDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: TabService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TabContentRefDirective, isStandalone: true, selector: "[cTabContent]", inputs: { tabContentRef: ["cTabContent", "tabContentRef"], active: "active", disabled: "disabled", tabPaneIdx: "tabPaneIdx" }, host: { listeners: { "click": "toggleOpen($event)" }, properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.isDisabled", "attr.disabled": "this.attrDisabled", "attr.tabindex": "this.getTabindex" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: TabContentRefDirective, isStandalone: true, selector: "[cTabContent]", inputs: { tabContentRef: ["cTabContent", "tabContentRef"], active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabPaneIdx: ["tabPaneIdx", "tabPaneIdx", numberAttribute] }, host: { listeners: { "click": "toggleOpen($event)" }, properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.isDisabled", "attr.disabled": "this.attrDisabled", "attr.tabindex": "this.getTabindex" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TabContentRefDirective, decorators: [{
             type: Directive,
@@ -8319,11 +8861,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input,
                 args: ['cTabContent']
             }], active: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabPaneIdx: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -8432,7 +8977,7 @@ class ToastComponent {
      * @type boolean
      */
     set visible(value) {
-        const newValue = coerceBooleanProperty(value);
+        const newValue = value;
         if (this._visible !== newValue) {
             this._visible = newValue;
             newValue ? this.setTimer() : this.clearTimer();
@@ -8522,7 +9067,7 @@ class ToastComponent {
         this.clockId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ToasterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ToastComponent, isStandalone: true, selector: "c-toast", inputs: { autohide: "autohide", color: "color", delay: "delay", fade: "fade", visible: "visible", index: "index" }, outputs: { visibleChange: "visibleChange", timer: "timer" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, exportAs: ["cToast"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;overflow:hidden}\n"], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: ToastComponent, isStandalone: true, selector: "c-toast", inputs: { autohide: "autohide", color: "color", delay: ["delay", "delay", numberAttribute], fade: "fade", visible: ["visible", "visible", booleanAttribute], index: ["index", "index", numberAttribute] }, outputs: { visibleChange: "visibleChange", timer: "timer" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "@.disabled": "this.animationDisabled", "@fadeInOut": "this.animateType", "class": "this.hostClasses" } }, exportAs: ["cToast"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;overflow:hidden}\n"], animations: [
             trigger('fadeInOut', [
                 state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
                 state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
@@ -8546,7 +9091,7 @@ class ToastComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-toast', template: '<ng-content></ng-content>', exportAs: 'cToast', standalone: true, animations: [
+            args: [{ selector: 'c-toast', template: '<ng-content />', exportAs: 'cToast', standalone: true, animations: [
                         trigger('fadeInOut', [
                             state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
                             state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
@@ -8572,13 +9117,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], color: [{
                 type: Input
             }], delay: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], fade: [{
                 type: Input
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], index: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], visibleChange: [{
                 type: Output
             }], timer: [{
@@ -8980,7 +9528,7 @@ class TooltipDirective {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 0]
+                        offset: [0, 5]
                     }
                 }
             ]
@@ -9150,254 +9698,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
-class BgColorDirective {
-    get hostClasses() {
-        return {
-            [`bg-${this.color}`]: !!this.color,
-            'bg-gradient': this.gradient,
-        };
-    }
-    constructor() {
-        /**
-         * Set the background of an element to any contextual class
-         */
-        this.color = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BgColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: BgColorDirective, isStandalone: true, selector: "[cBgColor]", inputs: { color: ["cBgColor", "color"], gradient: "gradient" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BgColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cBgColor]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input,
-                args: ['cBgColor']
-            }], gradient: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class BorderDirective {
-    constructor() {
-        /**
-         * Add or remove an element’s borders
-         * @type Border
-         */
-        this.border = true;
-    }
-    get hostClasses() {
-        if (typeof this.border === 'boolean') {
-            return { border: true };
-        }
-        if (typeof this.border === 'number' || typeof this.border === 'string') {
-            return {
-                border: true,
-                [`border-${this.border}`]: true
-            };
-        }
-        if (typeof this.border === 'object') {
-            const borderObj = { top: undefined, end: undefined, bottom: undefined, start: undefined, color: undefined, ...this.border };
-            // @ts-ignore
-            const keys = Object.keys(borderObj).filter(key => borderObj[key] !== undefined);
-            const classes = {};
-            keys.forEach(key => {
-                // @ts-ignore
-                const val = borderObj[key];
-                if (typeof val === 'boolean') {
-                    // @ts-ignore
-                    classes[`border-${key}`] = true;
-                }
-                else if (typeof val === 'number' || typeof val === 'string') {
-                    // @ts-ignore
-                    classes[`border-${key}-${val}`] = true;
-                }
-                else if (typeof val === 'object') {
-                    if ('color' in val) {
-                        // @ts-ignore
-                        classes[`border-${key}-${val.color}`] = true;
-                    }
-                    if ('width' in val) {
-                        // @ts-ignore
-                        classes[`border-${key}-${val.width}`] = true;
-                    }
-                }
-            });
-            return Object.entries(classes).length === 0 ? { border: false } : classes;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: BorderDirective, isStandalone: true, selector: "[cBorder]", inputs: { border: ["cBorder", "border"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BorderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cBorder]',
-                    standalone: true
-                }]
-        }], propDecorators: { border: [{
-                type: Input,
-                args: ['cBorder']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class TextColorDirective {
-    get hostClasses() {
-        const color = this.color;
-        return {
-            [`text-${color}`]: !!color
-        };
-    }
-    constructor() {
-        /**
-         * Set text-color of element
-         * @type TextColors
-         */
-        this.color = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TextColorDirective, isStandalone: true, selector: "[cTextColor]", inputs: { color: ["cTextColor", "color"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cTextColor]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input,
-                args: ['cTextColor']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class RoundedDirective {
-    constructor() {
-        /**
-         * Set border radius variant and radius size
-         * @type Rounded
-         */
-        this.rounded = true;
-    }
-    get hostClasses() {
-        if (typeof this.rounded === 'boolean') {
-            return { rounded: true };
-        }
-        if (typeof this.rounded === 'number' || typeof this.rounded === 'string') {
-            return {
-                [`rounded-${this.rounded}`]: true
-            };
-        }
-        if (typeof this.rounded === 'object') {
-            const roundedObj = {
-                top: undefined,
-                end: undefined,
-                bottom: undefined,
-                start: undefined,
-                circle: undefined,
-                pill: undefined,
-                size: undefined,
-                ...this.rounded,
-            };
-            // @ts-ignore
-            const keys = Object.keys(roundedObj).filter(key => roundedObj[key] !== undefined);
-            const classes = {};
-            keys.forEach(key => {
-                // @ts-ignore
-                const val = roundedObj[key];
-                if (typeof val === 'boolean') {
-                    // @ts-ignore
-                    classes[`rounded-${key}`] = val;
-                }
-                else {
-                    // @ts-ignore
-                    classes[`rounded-${val}`] = true;
-                }
-            });
-            // console.log('rounded keys', keys, classes);
-            return Object.entries(classes).length === 0 ? { rounded: false } : classes;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: RoundedDirective, isStandalone: true, selector: "[cRounded]", inputs: { rounded: ["cRounded", "rounded"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cRounded]',
-                    standalone: true
-                }]
-        }], propDecorators: { rounded: [{
-                type: Input,
-                args: ['cRounded']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class AlignDirective {
-    get hostClasses() {
-        return {
-            [`align-${this.align}`]: !!this.align,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: AlignDirective, isStandalone: true, selector: "[cAlign]", inputs: { align: ["cAlign", "align"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlignDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cAlign]',
-                    standalone: true
-                }]
-        }], propDecorators: { align: [{
-                type: Input,
-                args: ['cAlign']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class UtilitiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, imports: [BgColorDirective,
-            BorderDirective,
-            RoundedDirective,
-            TextColorDirective,
-            AlignDirective], exports: [BgColorDirective,
-            BorderDirective,
-            RoundedDirective,
-            TextColorDirective,
-            AlignDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UtilitiesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        BgColorDirective,
-                        BorderDirective,
-                        RoundedDirective,
-                        TextColorDirective,
-                        AlignDirective
-                    ],
-                    exports: [
-                        BgColorDirective,
-                        BorderDirective,
-                        RoundedDirective,
-                        TextColorDirective,
-                        AlignDirective
-                    ]
-                }]
-        }] });
-
 class WidgetStatAComponent {
     constructor() {
         this.templates = {};
@@ -9406,7 +9706,7 @@ class WidgetStatAComponent {
         return {
             'card': true,
             [`bg-${this.color}`]: !!this.color,
-            'text-high-emphasis-inverse': !!this.color
+            'text-white': !!this.color
         };
     }
     get bodyClasses() {
@@ -9456,15 +9756,15 @@ class WidgetStatBComponent extends CardComponent {
             'card': true,
             [`bg-${this.color}`]: !!this.color,
             [`text-${this.textColor}`]: !!this.textColor,
-            'text-high-emphasis-inverse': !!this.color
+            'text-white': !!this.inverse
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WidgetStatBComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: WidgetStatBComponent, isStandalone: true, selector: "c-widget-stat-b", inputs: { color: "color", textColor: "textColor", title: "title", text: "text", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cWidgetStatB"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n  @if (!!value) {\n    <div class=\"fs-4 fw-semibold\">{{ value }}</div>\n  }\n  @if (!!title) {\n    <div>{{ title }}</div>\n  }\n  <ng-content />\n  @if (text) {\n    <small [ngClass]=\"inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'\">\n      {{ text }}\n    </small>\n  }\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: WidgetStatBComponent, isStandalone: true, selector: "c-widget-stat-b", inputs: { color: "color", textColor: "textColor", title: "title", text: "text", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cWidgetStatB"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n  @if (!!value) {\n    <div class=\"fs-4 fw-semibold\">{{ value }}</div>\n  }\n  @if (!!title) {\n    <div>{{ title }}</div>\n  }\n  <ng-content />\n  @if (text) {\n    <small [ngClass]=\"inverse ? 'text-white text-opacity-75' : 'text-body-secondary'\">\n      {{ text }}\n    </small>\n  }\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WidgetStatBComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-b', exportAs: 'cWidgetStatB', standalone: true, imports: [CardBodyComponent, NgClass], template: "<c-card-body>\n  @if (!!value) {\n    <div class=\"fs-4 fw-semibold\">{{ value }}</div>\n  }\n  @if (!!title) {\n    <div>{{ title }}</div>\n  }\n  <ng-content />\n  @if (text) {\n    <small [ngClass]=\"inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'\">\n      {{ text }}\n    </small>\n  }\n</c-card-body>\n" }]
+            args: [{ selector: 'c-widget-stat-b', exportAs: 'cWidgetStatB', standalone: true, imports: [CardBodyComponent, NgClass], template: "<c-card-body>\n  @if (!!value) {\n    <div class=\"fs-4 fw-semibold\">{{ value }}</div>\n  }\n  @if (!!title) {\n    <div>{{ title }}</div>\n  }\n  <ng-content />\n  @if (text) {\n    <small [ngClass]=\"inverse ? 'text-white text-opacity-75' : 'text-body-secondary'\">\n      {{ text }}\n    </small>\n  }\n</c-card-body>\n" }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], textColor: [{
@@ -9495,22 +9795,14 @@ class WidgetStatCComponent extends CardComponent {
     }
     get hostExtendedClass() {
         return {
-            'high-emphasis-inverse': this.inverse
-        };
-    }
-    get iconClasses() {
-        return {
-            'mb-4': !this.textColor,
-            'text-end': true,
-            'text-medium-emphasis': !this.inverse,
-            'text-medium-emphasis-inverse': this.inverse,
-            [`text-${this.textColor}`]: !!this.textColor
+            'text-white': this.inverse
         };
     }
     get titleClasses() {
         return {
-            'text-medium-emphasis': !this.inverse,
-            'text-medium-emphasis-inverse': this.inverse,
+            'text-body-secondary': !this.inverse,
+            'text-white': this.inverse,
+            'text-opacity-75': this.inverse,
             [`text-${this.textColor}`]: !!this.textColor
         };
     }
@@ -9518,9 +9810,15 @@ class WidgetStatCComponent extends CardComponent {
         return {
             'fs-4': !this.textColor,
             'fw-semibold': true,
-            'text-high-emphasis': !this.inverse,
-            'text-high-emphasis-inverse': this.inverse,
-            [`text-${this.textColor}`]: !!this.textColor
+            ...this.titleClasses,
+            'text-opacity-75': false
+        };
+    }
+    get iconClasses() {
+        return {
+            'mb-4': !this.textColor,
+            'text-end': true,
+            ...this.titleClasses
         };
     }
     ngAfterContentInit() {
@@ -9568,11 +9866,11 @@ class WidgetStatDComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WidgetStatDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: WidgetStatDComponent, isStandalone: true, selector: "c-widget-stat-d", inputs: { color: "color", values: "values" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cWidgetStatD"], ngImport: i0, template: "<c-card-header [ngClass]=\"headerClasses\">\n  <ng-content />\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  @for (item of values; track item; let i = $index) {\n    @if (i % 2 !== 0) {\n      <div class=\"vr\"></div>\n    }\n    <c-col>\n      <div class=\"fs-5 fw-semibold\">{{ item.value }}</div>\n      <div class=\"text-uppercase text-medium-emphasis small\">{{ item.title }}</div>\n    </c-col>\n  }\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "c-card-header, [c-card-header]" }, { kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "component", type: ColComponent, selector: "c-col" }, { kind: "directive", type: RowDirective, selector: "[cRow]", inputs: ["xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: WidgetStatDComponent, isStandalone: true, selector: "c-widget-stat-d", inputs: { color: "color", values: "values" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cWidgetStatD"], ngImport: i0, template: "<c-card-header [ngClass]=\"headerClasses\">\n  <ng-content />\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  @for (item of values; track item; let i = $index) {\n    @if (i % 2 !== 0) {\n      <div class=\"vr\"></div>\n    }\n    <c-col>\n      <div class=\"fs-5 fw-semibold\">{{ item.value }}</div>\n      <div class=\"text-uppercase text-body-secondary small\">{{ item.title }}</div>\n    </c-col>\n  }\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "c-card-header, [c-card-header]" }, { kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "component", type: ColComponent, selector: "c-col" }, { kind: "directive", type: RowDirective, selector: "[cRow]", inputs: ["xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WidgetStatDComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-d', exportAs: 'cWidgetStatD', standalone: true, imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass], template: "<c-card-header [ngClass]=\"headerClasses\">\n  <ng-content />\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  @for (item of values; track item; let i = $index) {\n    @if (i % 2 !== 0) {\n      <div class=\"vr\"></div>\n    }\n    <c-col>\n      <div class=\"fs-5 fw-semibold\">{{ item.value }}</div>\n      <div class=\"text-uppercase text-medium-emphasis small\">{{ item.title }}</div>\n    </c-col>\n  }\n</c-card-body>\n" }]
+            args: [{ selector: 'c-widget-stat-d', exportAs: 'cWidgetStatD', standalone: true, imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass], template: "<c-card-header [ngClass]=\"headerClasses\">\n  <ng-content />\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  @for (item of values; track item; let i = $index) {\n    @if (i % 2 !== 0) {\n      <div class=\"vr\"></div>\n    }\n    <c-col>\n      <div class=\"fs-5 fw-semibold\">{{ item.value }}</div>\n      <div class=\"text-uppercase text-body-secondary small\">{{ item.title }}</div>\n    </c-col>\n  }\n</c-card-body>\n" }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], values: [{
@@ -9588,7 +9886,7 @@ class WidgetStatEComponent extends CardComponent {
     }
     get titleClasses() {
         return {
-            'text-medium-emphasis': !this.textColor,
+            'text-body-secondary': !this.textColor,
             'small': true,
             'text-uppercase': true,
             'fw-semibold': true,
@@ -9639,7 +9937,7 @@ class WidgetStatFComponent {
     }
     get titleClasses() {
         return {
-            'text-medium-emphasis': !this.textColor,
+            'text-body-secondary': !this.textColor,
             'small': true,
             'text-uppercase': true,
             'fw-semibold': true,
@@ -9732,5 +10030,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RoundedDirective, RowComponent, RowDirective, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ThemeDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular.mjs.map