@coreui/angular-pro 5.0.0-alpha.13 → 5.0.0-alpha.15

package/fesm2022/coreui-angular-pro.mjs

@@ -1,8 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, inject, ElementRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, ViewChild, forwardRef, Optional, ContentChild, ChangeDetectionStrategy, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i3 from '@angular/common';
-import { NgTemplateOutlet, NgIf, DOCUMENT, NgClass, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, isPlatformServer, isPlatformBrowser, CommonModule, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, CommonModule, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
@@ -16,6 +14,7 @@ import * as i1$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { createPopper } from '@popperjs/core';
 import * as i1$4 from '@angular/cdk/layout';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { IconDirective } from '@coreui/icons-angular';
@@ -132,7 +131,8 @@ class ThemeDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ThemeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cTheme]', standalone: true
+                    selector: '[cTheme]',
+                    standalone: true
                 }]
         }], propDecorators: { colorScheme: [{
                 type: Input
@@ -236,35 +236,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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.1.0", ngImport: i0, type: AccordionComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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.1.0", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.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.1.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']
@@ -290,51 +298,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
          */
@@ -444,7 +439,7 @@ class CollapseDirective {
         // });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.0", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
@@ -454,13 +449,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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: [{
@@ -800,44 +799,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;
     }
@@ -876,7 +865,7 @@ class AlertComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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: "<ng-container *ngIf=\"visible || !hide\">\n  <ng-template [ngIf]=\"dismissible\">\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\">\n    </ng-container>\n  </ng-template>\n  <ng-content></ng-content>\n</ng-container>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.1.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 })),
@@ -898,7 +887,7 @@ class AlertComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-alert', exportAs: 'cAlert', standalone: true, imports: [NgIf, NgTemplateOutlet, ButtonCloseDirective], animations: [
+            args: [{ selector: 'c-alert', exportAs: 'cAlert', standalone: true, imports: [NgTemplateOutlet, ButtonCloseDirective], 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 })),
@@ -916,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                                 animate('.3s ease-in')
                             ])
                         ])
-                    ], template: "<ng-container *ngIf=\"visible || !hide\">\n  <ng-template [ngIf]=\"dismissible\">\n    <ng-container *ngTemplateOutlet=\"templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate\">\n    </ng-container>\n  </ng-template>\n  <ng-content></ng-content>\n</ng-container>\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: [{
@@ -932,11 +921,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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']
@@ -1469,13 +1461,14 @@ class BreadcrumbItemComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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: "<a *ngIf=\"!active; else activeItem\"\n   [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\"></ng-container>\n</a>\n\n<ng-template #activeItem>\n  <span [cHtmlAttr]=\"attributes ?? {}\">\n      <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #defaultBreadcrumbItemContentTemplate>\n  <ng-content></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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.1.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.1.0", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-breadcrumb-item', standalone: true, imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective], template: "<a *ngIf=\"!active; else activeItem\"\n   [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\"></ng-container>\n</a>\n\n<ng-template #activeItem>\n  <span [cHtmlAttr]=\"attributes ?? {}\">\n      <ng-container *ngTemplateOutlet=\"defaultBreadcrumbItemContentTemplate\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #defaultBreadcrumbItemContentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item;text-align:-webkit-match-parent;text-align:match-parent}\n"] }]
+            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: [{
@@ -1605,11 +1598,11 @@ class BreadcrumbRouterComponent {
         this.breadcrumbs = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BreadcrumbRouterComponent, deps: [{ token: BreadcrumbRouterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BreadcrumbRouterComponent, isStandalone: true, selector: "c-breadcrumb-router, [cBreadcrumbRouter]", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: "<c-breadcrumb class=\"m-0\">\n  <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last=\"last\">\n    <ng-container *ngIf=\"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    </ng-container>\n  </ng-template>\n</c-breadcrumb>\n", styles: [""], 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: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: BreadcrumbRouterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-breadcrumb-router, [cBreadcrumbRouter]', standalone: true, imports: [BreadcrumbComponent, BreadcrumbItemComponent, NgForOf, NgIf, AsyncPipe], template: "<c-breadcrumb class=\"m-0\">\n  <ng-template ngFor let-breadcrumb [ngForOf]=\"breadcrumbs | async\" let-last=\"last\">\n    <ng-container *ngIf=\"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    </ng-container>\n  </ng-template>\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
             }] } });
@@ -2213,11 +2206,11 @@ class CalendarNavigationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarNavigationComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CalendarNavigationComponent, isStandalone: true, selector: "c-calendar-navigation", inputs: { addMonths: "addMonths", calendarDate: "calendarDate", navigation: "navigation", navYearFirst: "navYearFirst" }, outputs: { navigationClick: "navigationClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button\n    (click)=\"setView('years')\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n    [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\"\n  >\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: CalendarNavigationComponent, isStandalone: true, selector: "c-calendar-navigation", inputs: { addMonths: "addMonths", calendarDate: "calendarDate", navigation: "navigation", navYearFirst: "navYearFirst" }, outputs: { navigationClick: "navigationClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (navigation) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  @if (view === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n    [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\"\n  >\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation) {\n  <div class=\"calendar-nav-next\">\n    @if (view === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-calendar-navigation', standalone: true, imports: [ButtonDirective, NgIf, NgStyle], template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button\n    (click)=\"setView('years')\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n    [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\"\n  >\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'c-calendar-navigation', standalone: true, imports: [ButtonDirective, NgStyle], template: "@if (navigation) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  @if (view === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n    [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\"\n  >\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation) {\n  <div class=\"calendar-nav-next\">\n    @if (view === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { addMonths: [{
                 type: Input
             }], calendarDate: [{
@@ -3039,7 +3032,7 @@ class CalendarMonthComponent {
         return new Date(year, 11, 1, 0, 0, -1, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: CalendarMonthComponent, isStandalone: true, selector: "c-calendar-month", inputs: { addMonths: "addMonths", startDate: "startDate", endDate: "endDate", disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", range: ["range", "range", booleanAttribute], weekdayFormat: "weekdayFormat", view: "view", maxDate: "maxDate", minDate: "minDate", calendarDate: "calendarDate" }, viewQueries: [{ propertyName: "calendarDays", predicate: CalendarDayDirective, descendants: true }, { propertyName: "calendarRows", predicate: CalendarRowDirective, descendants: true }], exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\n  <thead *ngIf=\"view === 'days'\">\n  <tr>\n    <th *ngIf=\"showWeekNumber\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n    </th>\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n      </div>\n    </th>\n  </tr>\n  </thead>\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'years'\">\n    <tr *ngFor=\"let yearsRow of listOfYears(); index as rowIdx\">\n      <td\n        #calendarYear=\"cCalendarDay\"\n        (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n        (keydown)=\"calendarYear.date && handleDayCellKeyDown($event, calendarYear.date)\"\n        (keyup)=\"handleYearCellKeyUp($event, calendarYear.date)\"\n        (mouseenter)=\"calendarYear.date && handleCellMouseEnter(calendarYear.date)\"\n        *ngFor=\"let year of yearsRow; index as idx\"\n        [attr.aria-label]=\"calendarYear.date.getFullYear()\"\n        [date]=\"getYearStart(year)\"\n        [ngClass]=\"year | calendarClassYear\"\n        [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n        cCalendarDay\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ yearNumber(year) }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'months'\">\n    <tr *ngFor=\"let monthsRow of listOfMonths(); index as rowIdx\">\n      <td\n        #calendarMonth=\"cCalendarDay\"\n        (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date)\"\n        (keydown)=\"calendarMonth.date && handleDayCellKeyDown($event, calendarMonth.date)\"\n        (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date)\"\n        (mouseenter)=\"calendarMonth.date && handleCellMouseEnter(calendarMonth.date)\"\n        *ngFor=\"let month of monthsRow; index as idx\"\n        [attr.aria-label]=\"calendarMonth.date.getFullYear()+' '+month.month\"\n        [date]=\"getMonthStart(rowIdx*3+idx)\"\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n        [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n        cCalendarDay\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ month.month }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <tr #calendarRow=\"cCalendarRow\"\n        (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n        (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n        (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n        (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n        *ngFor=\"let week of monthDetails; index as i\"\n        [cCalendarRow]=\"week\"\n    >\n      <th *ngIf=\"showWeekNumber\" class=\"calendar-cell-week-number\">\n        {{week.weekNumber === 0 ? 53 : week.weekNumber}}\n      </th>\n      <ng-container *ngFor=\"let dateObj of week.days; index as idx\">\n        <td #calendarCell=\"cCalendarDay\"\n            (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n            (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n            (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n            (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n            *ngIf=\"(dateObj.month === 'current' || showAdjacentDays); else emptyCell\"\n            [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n            [date]=\"dateObj.date\"\n            [month]=\"dateObj.month\"\n            [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n            [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n            cCalendarDay\n        >\n          <div class=\"calendar-cell-inner\">\n            {{ dateObj.date | calendarDay:dayFormat:locale }}\n          </div>\n        </td>\n        <ng-template #emptyCell>\n          <td class=\"calendar-cell\"></td>\n        </ng-template>\n      </ng-container>\n    </tr>\n  </ng-container>\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"], dependencies: [{ kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["date", "disabled", "month", "calendarDate"], exportAs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarDayTitlePipe, name: "calendarDayTitle" }, { kind: "directive", type: CalendarRowDirective, selector: "[cCalendarRow]", inputs: ["cCalendarRow"], exportAs: ["cCalendarRow"] }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: CalendarMonthComponent, isStandalone: true, selector: "c-calendar-month", inputs: { addMonths: "addMonths", startDate: "startDate", endDate: "endDate", disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", range: ["range", "range", booleanAttribute], weekdayFormat: "weekdayFormat", view: "view", maxDate: "maxDate", minDate: "minDate", calendarDate: "calendarDate" }, viewQueries: [{ propertyName: "calendarDays", predicate: CalendarDayDirective, descendants: true }, { propertyName: "calendarRows", predicate: CalendarRowDirective, descendants: true }], exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\n  @if (view === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays; track weekDay.date; let i = $index) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date && handleDayCellKeyDown($event, calendarYear.date)\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date)\"\n                (mouseenter)=\"calendarYear.date && handleCellMouseEnter(calendarYear.date)\"\n                [attr.aria-label]=\"calendarYear.date.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date)\"\n                (keydown)=\"calendarMonth.date && handleDayCellKeyDown($event, calendarMonth.date)\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date)\"\n                (mouseenter)=\"calendarMonth.date && handleCellMouseEnter(calendarMonth.date)\"\n                [attr.aria-label]=\"calendarMonth.date.getFullYear()+' '+month.month\"\n                [date]=\"getMonthStart(rowIdx*3+idx)\"\n                [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @for (week of monthDetails; track week; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @if (dateObj.month === 'current' || showAdjacentDays) {\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n                    [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat:locale }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n\n      }\n    }\n\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"], dependencies: [{ kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["date", "disabled", "month", "calendarDate"], exportAs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarDayTitlePipe, name: "calendarDayTitle" }, { kind: "directive", type: CalendarRowDirective, selector: "[cCalendarRow]", inputs: ["cCalendarRow"], exportAs: ["cCalendarRow"] }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
@@ -3054,13 +3047,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                         CalendarClassYearPipe,
                         CalendarWeekdayPipe,
                         NgClass,
-                        NgForOf,
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgSwitchDefault,
                         AsyncPipe
-                    ], template: "<table>\n  <thead *ngIf=\"view === 'days'\">\n  <tr>\n    <th *ngIf=\"showWeekNumber\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n    </th>\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n      </div>\n    </th>\n  </tr>\n  </thead>\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'years'\">\n    <tr *ngFor=\"let yearsRow of listOfYears(); index as rowIdx\">\n      <td\n        #calendarYear=\"cCalendarDay\"\n        (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n        (keydown)=\"calendarYear.date && handleDayCellKeyDown($event, calendarYear.date)\"\n        (keyup)=\"handleYearCellKeyUp($event, calendarYear.date)\"\n        (mouseenter)=\"calendarYear.date && handleCellMouseEnter(calendarYear.date)\"\n        *ngFor=\"let year of yearsRow; index as idx\"\n        [attr.aria-label]=\"calendarYear.date.getFullYear()\"\n        [date]=\"getYearStart(year)\"\n        [ngClass]=\"year | calendarClassYear\"\n        [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n        cCalendarDay\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ yearNumber(year) }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'months'\">\n    <tr *ngFor=\"let monthsRow of listOfMonths(); index as rowIdx\">\n      <td\n        #calendarMonth=\"cCalendarDay\"\n        (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date)\"\n        (keydown)=\"calendarMonth.date && handleDayCellKeyDown($event, calendarMonth.date)\"\n        (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date)\"\n        (mouseenter)=\"calendarMonth.date && handleCellMouseEnter(calendarMonth.date)\"\n        *ngFor=\"let month of monthsRow; index as idx\"\n        [attr.aria-label]=\"calendarMonth.date.getFullYear()+' '+month.month\"\n        [date]=\"getMonthStart(rowIdx*3+idx)\"\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n        [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n        cCalendarDay\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ month.month }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <tr #calendarRow=\"cCalendarRow\"\n        (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n        (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n        (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n        (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n        *ngFor=\"let week of monthDetails; index as i\"\n        [cCalendarRow]=\"week\"\n    >\n      <th *ngIf=\"showWeekNumber\" class=\"calendar-cell-week-number\">\n        {{week.weekNumber === 0 ? 53 : week.weekNumber}}\n      </th>\n      <ng-container *ngFor=\"let dateObj of week.days; index as idx\">\n        <td #calendarCell=\"cCalendarDay\"\n            (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n            (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n            (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n            (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n            *ngIf=\"(dateObj.month === 'current' || showAdjacentDays); else emptyCell\"\n            [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n            [date]=\"dateObj.date\"\n            [month]=\"dateObj.month\"\n            [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n            [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n            cCalendarDay\n        >\n          <div class=\"calendar-cell-inner\">\n            {{ dateObj.date | calendarDay:dayFormat:locale }}\n          </div>\n        </td>\n        <ng-template #emptyCell>\n          <td class=\"calendar-cell\"></td>\n        </ng-template>\n      </ng-container>\n    </tr>\n  </ng-container>\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"] }]
+                    ], template: "<table>\n  @if (view === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays; track weekDay.date; let i = $index) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date && handleDayCellKeyDown($event, calendarYear.date)\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date)\"\n                (mouseenter)=\"calendarYear.date && handleCellMouseEnter(calendarYear.date)\"\n                [attr.aria-label]=\"calendarYear.date.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date)\"\n                (keydown)=\"calendarMonth.date && handleDayCellKeyDown($event, calendarMonth.date)\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date)\"\n                (mouseenter)=\"calendarMonth.date && handleCellMouseEnter(calendarMonth.date)\"\n                [attr.aria-label]=\"calendarMonth.date.getFullYear()+' '+month.month\"\n                [date]=\"getMonthStart(rowIdx*3+idx)\"\n                [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @for (week of monthDetails; track week; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @if (dateObj.month === 'current' || showAdjacentDays) {\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n                    [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat:locale }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n\n      }\n    }\n\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"] }]
         }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { addMonths: [{
                 type: Input
             }], startDate: [{
@@ -3512,11 +3500,11 @@ class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: CalendarComponent, isStandalone: true, selector: "c-calendar", inputs: { calendarDate: "calendarDate", calendars: ["calendars", "calendars", numberAttribute], dayFormat: "dayFormat", disabledDates: "disabledDates", startDate: "startDate", endDate: "endDate", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], range: ["range", "range", booleanAttribute], view: "view", weekdayFormat: "weekdayFormat", dateFilter: "dateFilter", selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange", viewChange: "viewChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CalendarService], viewQueries: [{ propertyName: "calendarMonths", predicate: CalendarMonthComponent, descendants: true }], exportAs: ["cCalendar"], ngImport: i0, template: "<ng-container *ngFor=\"let calendar of calendarsArray; let i=index;\">\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n</ng-container>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ kind: "component", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: ["addMonths", "calendarDate", "navigation", "navYearFirst"], outputs: ["navigationClick"] }, { kind: "pipe", type: CalendarClassViewPipe, name: "calendarClassView" }, { kind: "component", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: ["addMonths", "startDate", "endDate", "disabledDates", "firstDayOfWeek", "locale", "range", "weekdayFormat", "view", "maxDate", "minDate", "calendarDate"], exportAs: ["cCalendarMonth"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: CalendarComponent, isStandalone: true, selector: "c-calendar", inputs: { calendarDate: "calendarDate", calendars: ["calendars", "calendars", numberAttribute], dayFormat: "dayFormat", disabledDates: "disabledDates", startDate: "startDate", endDate: "endDate", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], range: ["range", "range", booleanAttribute], view: "view", weekdayFormat: "weekdayFormat", dateFilter: "dateFilter", selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange", viewChange: "viewChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CalendarService], viewQueries: [{ propertyName: "calendarMonths", predicate: CalendarMonthComponent, descendants: true }], exportAs: ["cCalendar"], ngImport: i0, template: "@for (calendar of calendarsArray; track calendar; let i = $index) {\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ kind: "component", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: ["addMonths", "calendarDate", "navigation", "navYearFirst"], outputs: ["navigationClick"] }, { kind: "pipe", type: CalendarClassViewPipe, name: "calendarClassView" }, { kind: "component", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: ["addMonths", "startDate", "endDate", "disabledDates", "firstDayOfWeek", "locale", "range", "weekdayFormat", "view", "maxDate", "minDate", "calendarDate"], exportAs: ["cCalendarMonth"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-calendar', exportAs: 'cCalendar', providers: [CalendarService], standalone: true, imports: [CalendarNavigationComponent, CalendarClassViewPipe, CalendarMonthComponent, NgForOf, NgClass, A11yModule], template: "<ng-container *ngFor=\"let calendar of calendarsArray; let i=index;\">\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n</ng-container>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
+            args: [{ selector: 'c-calendar', exportAs: 'cCalendar', providers: [CalendarService], standalone: true, imports: [CalendarNavigationComponent, CalendarClassViewPipe, CalendarMonthComponent, NgClass, A11yModule], template: "@for (calendar of calendarsArray; track calendar; let i = $index) {\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
         }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { calendarDate: [{
                 type: Input
             }], calendars: [{
@@ -4602,11 +4590,11 @@ class CarouselControlComponent {
         this.carouselState.state = { activeItemIndex: nextIndex };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CarouselControlComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CarouselState }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { caption: "caption", direction: "direction" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "this.hostRole", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div #content *ngIf = \"hasContent; else defaultContent\"><ng-content></ng-content></div>\n<ng-template #defaultContent>\n  <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{caption}}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { caption: "caption", direction: "direction" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "this.hostRole", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "@if (hasContent) {\n  <div #content>\n    <ng-content />\n  </div>\n} @else {\n  <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{ caption }}</span>\n}\n\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CarouselControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-control', standalone: true, imports: [NgIf], template: "<div #content *ngIf = \"hasContent; else defaultContent\"><ng-content></ng-content></div>\n<ng-template #defaultContent>\n  <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{caption}}</span>\n</ng-template>\n" }]
+            args: [{ selector: 'c-carousel-control', standalone: true, template: "@if (hasContent) {\n  <div #content>\n    <ng-content />\n  </div>\n} @else {\n  <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{ caption }}</span>\n}\n\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CarouselState }], propDecorators: { caption: [{
                 type: Input
             }], direction: [{
@@ -4661,11 +4649,11 @@ class CarouselIndicatorsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CarouselIndicatorsComponent, deps: [{ token: CarouselService }, { token: CarouselState }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CarouselIndicatorsComponent, isStandalone: true, selector: "c-carousel-indicators", ngImport: i0, template: "<div class=\"carousel-indicators\">\n  <ng-container *ngFor=\"let item of items; let i=index\">\n    <button [attr.data-coreui-target]=\"i\" type=\"button\" (click)=\"onClick(i)\" [class]=\"{active: active === i}\" [attr.aria-current]=\"active === i\"></button>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: CarouselIndicatorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-indicators', standalone: true, imports: [NgForOf], template: "<div class=\"carousel-indicators\">\n  <ng-container *ngFor=\"let item of items; let i=index\">\n    <button [attr.data-coreui-target]=\"i\" type=\"button\" (click)=\"onClick(i)\" [class]=\"{active: active === i}\" [attr.aria-current]=\"active === i\"></button>\n  </ng-container>\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) {
@@ -4742,7 +4730,7 @@ class CarouselItemComponent {
      * @ignore
      */
     set active(value) {
-        this._active = coerceBooleanProperty(value);
+        this._active = value;
         this.changeDetectorRef.markForCheck();
     }
     get active() {
@@ -4786,13 +4774,14 @@ class CarouselItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CarouselItemComponent, deps: [{ token: CarouselService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { active: "active", interval: "interval" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!--todo ngIf-->\n<ng-container *ngIf=\"active\">\n  <ng-content></ng-content>\n</ng-container>\n\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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\n\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-item', standalone: true, imports: [NgIf], template: "<!--todo ngIf-->\n<ng-container *ngIf=\"active\">\n  <ng-content></ng-content>\n</ng-container>\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\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: [{
@@ -5061,17 +5050,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 {
@@ -5091,7 +5075,7 @@ class DropdownToggleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.0", ngImport: i0, type: DropdownToggleDirective, decorators: [{
             type: Directive,
@@ -5106,11 +5090,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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']
@@ -5132,7 +5118,12 @@ class DropdownComponent {
          * @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: [],
@@ -5149,17 +5140,6 @@ class DropdownComponent {
         this.listeners = [];
         this.dropdownStateSubscribe();
     }
-    /**
-     * 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>
@@ -5204,7 +5184,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;
@@ -5347,11 +5327,11 @@ class DropdownComponent {
         this.listeners = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.0", type: DropdownComponent, isStandalone: true, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", 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, hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content></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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.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.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-dropdown', template: '<ng-content></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"] }]
+            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]
@@ -5364,13 +5344,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }], 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: [{
@@ -5885,9 +5867,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;
@@ -5909,7 +5892,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);
@@ -5930,7 +5913,7 @@ class FormCheckInputDirective {
         this._indeterminate = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.0", ngImport: i0, type: FormCheckInputDirective, decorators: [{
             type: Directive,
@@ -5944,14 +5927,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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 {
@@ -6878,13 +6863,14 @@ class TimePickerRollColComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerRollColComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TimePickerRollColComponent, isStandalone: true, selector: "c-time-picker-roll-col", inputs: { disabled: "disabled", elements: "elements", onClick: "onClick", selected: "selected", refresh: "refresh" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "timeElements", predicate: TimeElementDirective, descendants: true }], exportAs: ["cTimePickerRollCol"], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleElementClick($event, element)\"\n     (keydown)=\"handleElementKeyDown($event, element)\"\n     *ngFor=\"let element of elements; index as i; trackBy: trackByElement\"\n     [attr.disabled]=\"element.disabled || null\"\n     [cTimeElement]=\"element\"\n     [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n     [tabindex]=\"element.disabled ? -1 : 0\"\n     role=\"button\"\n>\n  {{element.label}}\n</div>\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TimeElementDirective, selector: "[cTimeElement]", inputs: ["cTimeElement"], exportAs: ["cTimeElement"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: TimePickerRollColComponent, isStandalone: true, selector: "c-time-picker-roll-col", inputs: { disabled: ["disabled", "disabled", booleanAttribute], elements: "elements", onClick: "onClick", selected: "selected", refresh: ["refresh", "refresh", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "timeElements", predicate: TimeElementDirective, descendants: true }], exportAs: ["cTimePickerRollCol"], usesOnChanges: true, ngImport: i0, template: "@for (element of elements; track trackByElement; let i = $index) {\n  <div (click)=\"handleElementClick($event, element)\"\n       (keydown)=\"handleElementKeyDown($event, element)\"\n       [attr.disabled]=\"element.disabled || null\"\n       [cTimeElement]=\"element\"\n       [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n       [tabindex]=\"element.disabled ? -1 : 0\"\n       role=\"button\"\n  >\n    {{ element.label }}\n  </div>\n}\n\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: TimeElementDirective, selector: "[cTimeElement]", inputs: ["cTimeElement"], exportAs: ["cTimeElement"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerRollColComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-time-picker-roll-col', exportAs: 'cTimePickerRollCol', standalone: true, imports: [CommonModule, TimeElementDirective], template: "<div (click)=\"handleElementClick($event, element)\"\n     (keydown)=\"handleElementKeyDown($event, element)\"\n     *ngFor=\"let element of elements; index as i; trackBy: trackByElement\"\n     [attr.disabled]=\"element.disabled || null\"\n     [cTimeElement]=\"element\"\n     [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n     [tabindex]=\"element.disabled ? -1 : 0\"\n     role=\"button\"\n>\n  {{element.label}}\n</div>\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"] }]
+            args: [{ selector: 'c-time-picker-roll-col', exportAs: 'cTimePickerRollCol', standalone: true, imports: [TimeElementDirective, NgClass], template: "@for (element of elements; track trackByElement; let i = $index) {\n  <div (click)=\"handleElementClick($event, element)\"\n       (keydown)=\"handleElementKeyDown($event, element)\"\n       [attr.disabled]=\"element.disabled || null\"\n       [cTimeElement]=\"element\"\n       [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n       [tabindex]=\"element.disabled ? -1 : 0\"\n       role=\"button\"\n  >\n    {{ element.label }}\n  </div>\n}\n\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], elements: [{
                 type: Input
             }], onClick: [{
@@ -6892,7 +6878,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }], selected: [{
                 type: Input
             }], refresh: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectedChange: [{
                 type: Output
             }], hostClasses: [{
@@ -6985,13 +6972,14 @@ class TimePickerRollAmPmComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerRollAmPmComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TimePickerRollAmPmComponent, isStandalone: true, selector: "c-time-picker-roll-am-pm", inputs: { disabled: "disabled", elements: "elements", onClick: "onClick", selected: "selected", refresh: "refresh" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "dayPeriodElements", predicate: DayPeriodElementDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleElementClick($event, element)\"\n     (keydown)=\"handleElementKeyDown($event, element)\"\n     *ngFor=\"let element of elements; index as i; trackBy: trackByElement\"\n     [attr.disabled]=\"element.disabled || null\"\n     [cDayPeriodElement]=\"element\"\n     [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n     [tabindex]=\"element.disabled ? -1 : 0\"\n     role=\"button\"\n>\n  {{element.label}}\n</div>\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DayPeriodElementDirective, selector: "[cDayPeriodElement]", inputs: ["cDayPeriodElement"], exportAs: ["cDayPeriodElement"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: TimePickerRollAmPmComponent, isStandalone: true, selector: "c-time-picker-roll-am-pm", inputs: { disabled: ["disabled", "disabled", booleanAttribute], elements: "elements", onClick: "onClick", selected: "selected", refresh: ["refresh", "refresh", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "dayPeriodElements", predicate: DayPeriodElementDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@for (element of elements; track trackByElement; let i = $index) {\n  <div (click)=\"handleElementClick($event, element)\"\n       (keydown)=\"handleElementKeyDown($event, element)\"\n       [attr.disabled]=\"element.disabled || null\"\n       [cDayPeriodElement]=\"element\"\n       [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n       [tabindex]=\"element.disabled ? -1 : 0\"\n       role=\"button\"\n  >\n    {{ element.label }}\n  </div>\n}\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: DayPeriodElementDirective, selector: "[cDayPeriodElement]", inputs: ["cDayPeriodElement"], exportAs: ["cDayPeriodElement"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerRollAmPmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-time-picker-roll-am-pm', standalone: true, imports: [CommonModule, DayPeriodElementDirective], template: "<div (click)=\"handleElementClick($event, element)\"\n     (keydown)=\"handleElementKeyDown($event, element)\"\n     *ngFor=\"let element of elements; index as i; trackBy: trackByElement\"\n     [attr.disabled]=\"element.disabled || null\"\n     [cDayPeriodElement]=\"element\"\n     [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n     [tabindex]=\"element.disabled ? -1 : 0\"\n     role=\"button\"\n>\n  {{element.label}}\n</div>\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"] }]
+            args: [{ selector: 'c-time-picker-roll-am-pm', standalone: true, imports: [DayPeriodElementDirective, NgClass], template: "@for (element of elements; track trackByElement; let i = $index) {\n  <div (click)=\"handleElementClick($event, element)\"\n       (keydown)=\"handleElementKeyDown($event, element)\"\n       [attr.disabled]=\"element.disabled || null\"\n       [cDayPeriodElement]=\"element\"\n       [ngClass]=\"{'time-picker-roll-cell': true, selected: element.value === selected, disabled: element.disabled}\"\n       [tabindex]=\"element.disabled ? -1 : 0\"\n       role=\"button\"\n  >\n    {{ element.label }}\n  </div>\n}\n", styles: [":host{display:block}:host .disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], elements: [{
                 type: Input
             }], onClick: [{
@@ -6999,7 +6987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }], selected: [{
                 type: Input
             }], refresh: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectedChange: [{
                 type: Output
             }], hostClasses: [{
@@ -7429,20 +7418,18 @@ class TimePickerComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: TimePickerComponent, isStandalone: true, selector: "c-time-picker", inputs: { cleaner: ["cleaner", "cleaner", booleanAttribute], dateTimeFormatOptions: "dateTimeFormatOptions", disabled: ["disabled", "disabled", booleanAttribute], filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: ["indicator", "indicator", booleanAttribute], inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], locale: "locale", placeholder: "placeholder", seconds: ["seconds", "seconds", booleanAttribute], size: "size", time: "time", variant: "variant", valid: "valid", visible: ["visible", "visible", booleanAttribute] }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: TimePickerComponent, isStandalone: true, selector: "c-time-picker", inputs: { cleaner: ["cleaner", "cleaner", booleanAttribute], dateTimeFormatOptions: "dateTimeFormatOptions", disabled: ["disabled", "disabled", booleanAttribute], filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: ["indicator", "indicator", booleanAttribute], inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], locale: "locale", placeholder: "placeholder", seconds: ["seconds", "seconds", booleanAttribute], size: "size", time: "time", variant: "variant", valid: "valid", visible: ["visible", "visible", booleanAttribute] }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"variant==='select'\" class=\"date-picker-timepickers\">\n  <div class=\"picker time-picker\">\n    <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n      <span class=\"time-picker-inline-icon\"></span>\n      <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n              cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [attr.disabled]=\"hour.disabled || null\"\n                [ngValue]=\"hour.value\">{{hour.label}}</option>\n      </select>\n      {{' :'}}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                      cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n      <option *ngFor=\"let minute of listOfMinutes ; trackBy: trackByHour\" [attr.disabled]=\"minute.disabled || null\"\n              [ngValue]=\"minute.value\">{{minute.label}}</option>\n    </select>\n      <ng-template [ngIf]=\"seconds\">\n        {{' :'}}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                        cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n        <option *ngFor=\"let second of listOfSeconds; trackBy: trackByHour\" [attr.disabled]=\"second.disabled || null\"\n                [ngValue]=\"second.value\">{{second.label}}</option>\n      </select>\n      </ng-template>\n      <ng-template [ngIf]=\"hour12\">\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\"\n                  class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n        </select>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" *ngIf=\"variant==='roll'\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\"\n            [visible]=\"visible\">\n  <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n    <input (blur)=\"handleBlur($event);\"\n           (change)=\"handleTimeInputChange($event)\"\n           (focus)=\"handleFocus($event)\"\n           [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"timeInput\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           class=\"time-picker-input\"\n    >\n    <div *ngIf=\"indicator\" class=\"time-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"time-picker-cleaner\"\n         role=\"button\"></div>\n\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfHours12\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"hour\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfMinutes\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"minute\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n        *ngIf=\"seconds\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfSeconds\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"second\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-am-pm\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\" *ngIf=\"hour12\"\n        [disabled]=\"disabled\"\n        [elements]=\"dayPeriods\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"dayPeriod\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-am-pm>\n    </div>\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"time-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track trackByHour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track trackByHour; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track trackByHour; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-time-picker', exportAs: 'cTimePicker', standalone: true, imports: [
                         NgClass,
-                        NgIf,
-                        NgForOf,
                         NgTemplateOutlet,
                         ReactiveFormsModule,
                         DropdownComponent,
@@ -7460,7 +7447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div *ngIf=\"variant==='select'\" class=\"date-picker-timepickers\">\n  <div class=\"picker time-picker\">\n    <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n      <span class=\"time-picker-inline-icon\"></span>\n      <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n              cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [attr.disabled]=\"hour.disabled || null\"\n                [ngValue]=\"hour.value\">{{hour.label}}</option>\n      </select>\n      {{' :'}}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                      cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n      <option *ngFor=\"let minute of listOfMinutes ; trackBy: trackByHour\" [attr.disabled]=\"minute.disabled || null\"\n              [ngValue]=\"minute.value\">{{minute.label}}</option>\n    </select>\n      <ng-template [ngIf]=\"seconds\">\n        {{' :'}}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                        cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n        <option *ngFor=\"let second of listOfSeconds; trackBy: trackByHour\" [attr.disabled]=\"second.disabled || null\"\n                [ngValue]=\"second.value\">{{second.label}}</option>\n      </select>\n      </ng-template>\n      <ng-template [ngIf]=\"hour12\">\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\"\n                  class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n        </select>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" *ngIf=\"variant==='roll'\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\"\n            [visible]=\"visible\">\n  <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n    <input (blur)=\"handleBlur($event);\"\n           (change)=\"handleTimeInputChange($event)\"\n           (focus)=\"handleFocus($event)\"\n           [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"timeInput\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           class=\"time-picker-input\"\n    >\n    <div *ngIf=\"indicator\" class=\"time-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"time-picker-cleaner\"\n         role=\"button\"></div>\n\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfHours12\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"hour\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfMinutes\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"minute\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-col\n        (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n        *ngIf=\"seconds\"\n        [disabled]=\"disabled\"\n        [elements]=\"listOfSeconds\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"second\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-col>\n      <c-time-picker-roll-am-pm\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\" *ngIf=\"hour12\"\n        [disabled]=\"disabled\"\n        [elements]=\"dayPeriods\"\n        [refresh]=\"dropdownMenu.visible\"\n        [selected]=\"dayPeriod\"\n        role=\"listbox\"\n      >\n      </c-time-picker-roll-am-pm>\n    </div>\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"time-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"] }]
+                    ], template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track trackByHour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track trackByHour; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track trackByHour; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cleaner: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -7529,9 +7516,7 @@ class TimePickerModule {
             FormModule,
             ButtonModule,
             DropdownModule,
-            TimePickerComponent,
-            TimePickerRollAmPmComponent,
-            TimePickerRollColComponent] }); }
+            TimePickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TimePickerModule, decorators: [{
             type: NgModule,
@@ -8097,20 +8082,18 @@ class DateRangePickerComponent {
         this.endDate = time ?? this.endDate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: ["calendars", "calendars", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], format: "format", indicator: ["indicator", "indicator", booleanAttribute], inputDateFormat: "inputDateFormat", inputDateParse: "inputDateParse", inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: ["separator", "separator", booleanAttribute], size: "size", timepicker: ["timepicker", "timepicker", booleanAttribute], valid: "valid", visible: ["visible", "visible", booleanAttribute], startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], range: ["range", "range", booleanAttribute], dateFilter: "dateFilter", disabled: ["disabled", "disabled", booleanAttribute], value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: ["calendars", "calendars", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], format: "format", indicator: ["indicator", "indicator", booleanAttribute], inputDateFormat: "inputDateFormat", inputDateParse: "inputDateParse", inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: ["separator", "separator", booleanAttribute], size: "size", timepicker: ["timepicker", "timepicker", booleanAttribute], valid: "valid", visible: ["visible", "visible", booleanAttribute], startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], range: ["range", "range", booleanAttribute], dateFilter: "dateFilter", disabled: ["disabled", "disabled", booleanAttribute], value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n    <input #endDateElementRef\n           (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\"\n         *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n         class=\"date-picker-cleaner\" role=\"button\">\n    </div>\n\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n      </div>\n    }\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', standalone: true, imports: [
                         NgClass,
-                        NgIf,
-                        NgForOf,
                         NgTemplateOutlet,
                         ReactiveFormsModule,
                         CalendarComponent,
@@ -8129,7 +8112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n    <input #endDateElementRef\n           (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\"\n         *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n         class=\"date-picker-cleaner\" role=\"button\">\n    </div>\n\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n      </div>\n    }\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -8303,20 +8286,18 @@ class DatePickerComponent extends DateRangePickerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n    <input #endDateElementRef\n           (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\"\n         *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n         class=\"date-picker-cleaner\" role=\"button\">\n    </div>\n\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n      </div>\n    }\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', standalone: true, imports: [
                         NgClass,
-                        NgIf,
-                        NgForOf,
                         NgTemplateOutlet,
                         ReactiveFormsModule,
                         CalendarComponent,
@@ -8335,7 +8316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n    <input #endDateElementRef\n           (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n    <div (click)=\"!disabled && handleClear($event)\"\n         *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n         class=\"date-picker-cleaner\" role=\"button\">\n    </div>\n\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n      </div>\n    }\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -8469,11 +8450,11 @@ class ElementCoverComponent {
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ElementCoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ElementCoverComponent, isStandalone: true, selector: "c-element-cover, [cElementCover]", inputs: { boundaries: "boundaries", opacity: "opacity" }, host: { properties: { "style": "this.coverStyles" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{position: 'absolute', 'top.%': '50', 'left.%': '50', transform: 'translateX(-50%) translateY(-50%)'}\">\n  <div #content *ngIf=\"hasContent; else defaultSpinner\">\n    <ng-content></ng-content>\n  </div>\n  <ng-template #defaultSpinner>\n    <c-spinner color=\"primary\" variant=\"grow\"></c-spinner>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: ElementCoverComponent, isStandalone: true, selector: "c-element-cover, [cElementCover]", inputs: { boundaries: "boundaries", opacity: "opacity" }, host: { properties: { "style": "this.coverStyles" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{position: 'absolute', 'top.%': '50', 'left.%': '50', transform: 'translateX(-50%) translateY(-50%)'}\">\n  @if (hasContent) {\n    <div #content>\n      <ng-content />\n    </div>\n  } @else {\n    <c-spinner color=\"primary\" variant=\"grow\"></c-spinner>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ElementCoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-element-cover, [cElementCover]', imports: [SpinnerComponent, NgStyle, NgIf], standalone: true, template: "<div [ngStyle]=\"{position: 'absolute', 'top.%': '50', 'left.%': '50', transform: 'translateX(-50%) translateY(-50%)'}\">\n  <div #content *ngIf=\"hasContent; else defaultSpinner\">\n    <ng-content></ng-content>\n  </div>\n  <ng-template #defaultSpinner>\n    <c-spinner color=\"primary\" variant=\"grow\"></c-spinner>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-element-cover, [cElementCover]', imports: [SpinnerComponent, NgStyle], standalone: true, template: "<div [ngStyle]=\"{position: 'absolute', 'top.%': '50', 'left.%': '50', transform: 'translateX(-50%) translateY(-50%)'}\">\n  @if (hasContent) {\n    <div #content>\n      <ng-content />\n    </div>\n  } @else {\n    <c-spinner color=\"primary\" variant=\"grow\"></c-spinner>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { boundaries: [{
                 type: Input
             }], opacity: [{
@@ -9345,23 +9326,12 @@ const loadingButtonAnimation = trigger('loadingButton', [
 ]);
 
 class LoadingButtonComponent extends ButtonDirective {
-    /**
-     * Makes button disabled when loading.
-     * @type boolean
-     */
-    set disabledOnLoading(value) {
-        this._disabledOnLoading = coerceBooleanProperty(value);
-    }
-    ;
-    get disabledOnLoading() {
-        return this._disabledOnLoading;
-    }
     /**
      * Loading state (set to true to start animation).
      * @type boolean
      */
     set loading(value) {
-        const newValue = coerceBooleanProperty(value);
+        const newValue = value;
         if (this._loading !== newValue) {
             this._loading = newValue;
             this.loadingChange.emit(newValue);
@@ -9373,7 +9343,12 @@ class LoadingButtonComponent extends ButtonDirective {
     }
     constructor() {
         super();
-        this._disabledOnLoading = false;
+        /**
+         * Makes button disabled when loading.
+         * @type boolean
+         * @default false
+         */
+        this.disabledOnLoading = false;
         this._loading = false;
         /**
          * Sets type of spinner.
@@ -9405,15 +9380,17 @@ class LoadingButtonComponent extends ButtonDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LoadingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: LoadingButtonComponent, isStandalone: true, selector: "button[cLoadingButton], a[cLoadingButton]", inputs: { disabledOnLoading: "disabledOnLoading", loading: "loading", spinnerType: "spinnerType" }, outputs: { loadingChange: "loadingChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cLoadingButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<c-spinner [variant]=\"spinnerType\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton *ngIf=\"loading\" />\n<ng-content />\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [loadingButtonAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: LoadingButtonComponent, isStandalone: true, selector: "button[cLoadingButton], a[cLoadingButton]", inputs: { disabledOnLoading: ["disabledOnLoading", "disabledOnLoading", booleanAttribute], loading: ["loading", "loading", booleanAttribute], spinnerType: "spinnerType" }, outputs: { loadingChange: "loadingChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cLoadingButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n  <c-spinner [variant]=\"spinnerType\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton />\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }], animations: [loadingButtonAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: LoadingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[cLoadingButton], a[cLoadingButton]', exportAs: 'cLoadingButton', imports: [SpinnerComponent, NgIf], standalone: true, animations: [loadingButtonAnimation], template: "<c-spinner [variant]=\"spinnerType\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton *ngIf=\"loading\" />\n<ng-content />\n" }]
+            args: [{ selector: 'button[cLoadingButton], a[cLoadingButton]', exportAs: 'cLoadingButton', imports: [SpinnerComponent], standalone: true, animations: [loadingButtonAnimation], template: "@if (loading) {\n  <c-spinner [variant]=\"spinnerType\" size=\"sm\" class=\"btn-loading-spinner\" @loadingButton />\n}\n<ng-content />\n" }]
         }], ctorParameters: () => [], propDecorators: { disabledOnLoading: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], loading: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], spinnerType: [{
                 type: Input
             }], loadingChange: [{
@@ -9801,15 +9778,9 @@ class MultiSelectOptgroupComponent {
         this.multiSelectService = multiSelectService;
         this.#destroyRef = inject(DestroyRef);
         this.visible = signal(true);
-        this._disabled = false;
+        this.disabled = false;
     }
     #destroyRef;
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    get disabled() {
-        return this._disabled;
-    }
     get hostClasses() {
         return {
             'form-multi-select-options': true,
@@ -9836,7 +9807,7 @@ class MultiSelectOptgroupComponent {
         }), takeUntilDestroyed(this.#destroyRef)).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (label && visible()) {\n  <c-multi-select-optgroup-label>{{ label }}</c-multi-select-optgroup-label>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (label && visible()) {\n  <c-multi-select-optgroup-label>{{ label }}</c-multi-select-optgroup-label>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
             type: Component,
@@ -9844,7 +9815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
         }], ctorParameters: () => [{ type: MultiSelectService }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], multiSelectOptions: [{
                 type: ContentChildren,
                 args: [MultiSelectOptionComponent, { descendants: true }]
@@ -9860,23 +9832,25 @@ class MultiSelectNativeSelectComponent {
         this.id = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiSelectNativeSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MultiSelectNativeSelectComponent, isStandalone: true, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options", disabled: "disabled" }, ngImport: i0, template: "<select [disabled]=\"disabled\" [id]=\"id\" [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\">\n  <option\n    *ngFor=\"let option of options\"\n    [attr.selected]=\"option.selected ? '' : null\"\n    [disabled]=\"disabled\"\n    [label]=\"option.label\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MultiSelectNativeSelectComponent, isStandalone: true, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: ["multiple", "multiple", booleanAttribute], name: "name", options: "options", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "<select [disabled]=\"disabled\" [id]=\"id\" [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\">\n  @for (option of options; track option) {\n    <option\n      [attr.selected]=\"option.selected ? '' : null\"\n      [disabled]=\"disabled\"\n      [label]=\"option.label\"\n      [value]=\"option.value\"\n      tabindex=\"-1\"\n    ></option>\n  }\n</select>\n\n", styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiSelectNativeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgForOf], template: "<select [disabled]=\"disabled\" [id]=\"id\" [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\">\n  <option\n    *ngFor=\"let option of options\"\n    [attr.selected]=\"option.selected ? '' : null\"\n    [disabled]=\"disabled\"\n    [label]=\"option.label\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"] }]
+            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<select [disabled]=\"disabled\" [id]=\"id\" [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\">\n  @for (option of options; track option) {\n    <option\n      [attr.selected]=\"option.selected ? '' : null\"\n      [disabled]=\"disabled\"\n      [label]=\"option.label\"\n      [value]=\"option.value\"\n      tabindex=\"-1\"\n    ></option>\n  }\n</select>\n\n", styles: [":host{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: Input
             }], id: [{
                 type: Input
             }], multiple: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], name: [{
                 type: Input
             }], options: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class MultiSelectTagComponent {
@@ -10373,7 +10347,7 @@ class MultiSelectComponent {
         return `${this.selectedOptions.length} ${this.selectionTypeCounterText}`;
     }
     get counterTextType() {
-        return typeof this.selectionTypeCounterTextPluralMap ?? typeof this.selectionTypeCounterText;
+        return typeof (this.selectionTypeCounterTextPluralMap ?? this.selectionTypeCounterText);
     }
     ;
     get counterPlaceholderText() {
@@ -12768,18 +12742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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;
@@ -12792,7 +12760,7 @@ class PlaceholderDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.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.1.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.1.0", ngImport: i0, type: PlaceholderDirective, decorators: [{
             type: Directive,
@@ -12801,9 +12769,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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']
@@ -13512,48 +13480,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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);
@@ -13600,9 +13538,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 = {
@@ -13613,11 +13548,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
@@ -13658,7 +13611,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);
                     }
@@ -13717,14 +13670,14 @@ class SidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$4.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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.1.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.1.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: [{
@@ -13735,9 +13688,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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: [{
@@ -13745,9 +13700,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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: [{
@@ -13764,11 +13721,11 @@ class SidebarBrandComponent {
         this.brandImg = Boolean(this.brandFull || this.brandNarrow);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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: "<ng-template [ngIf]=\"brandImg\">\n  <a [routerLink]=\"routerLink\">\n    <img *ngIf=\"brandFull\"\n         [cHtmlAttr]=\"brandFull\"\n         [ngClass]=\"'sidebar-brand-full'\">\n    <img *ngIf=\"brandNarrow\"\n         [cHtmlAttr]=\"brandNarrow\"\n         [ngClass]=\"'sidebar-brand-narrow'\">\n  </a>\n</ng-template>\n<ng-template [ngIf]=\"!brandImg\">\n  <ng-content></ng-content>\n</ng-template>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: SidebarBrandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-brand', standalone: true, imports: [RouterLink, HtmlAttributesDirective, NgIf, NgClass], template: "<ng-template [ngIf]=\"brandImg\">\n  <a [routerLink]=\"routerLink\">\n    <img *ngIf=\"brandFull\"\n         [cHtmlAttr]=\"brandFull\"\n         [ngClass]=\"'sidebar-brand-full'\">\n    <img *ngIf=\"brandNarrow\"\n         [cHtmlAttr]=\"brandNarrow\"\n         [ngClass]=\"'sidebar-brand-narrow'\">\n  </a>\n</ng-template>\n<ng-template [ngIf]=\"!brandImg\">\n  <ng-content></ng-content>\n</ng-template>\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: [{
@@ -14031,24 +13988,23 @@ class SidebarNavLinkContentComponent {
         this.helper = helper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarNavLinkContentComponent, deps: [{ token: SidebarNavHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SidebarNavLinkContentComponent, isStandalone: true, selector: "c-sidebar-nav-link-content", inputs: { item: "item" }, providers: [SidebarNavHelper], ngImport: i0, template: `
-    <ng-container *ngIf="true">
-      <ng-container>{{item?.name ?? ''}}</ng-container>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SidebarNavLinkContentComponent, isStandalone: true, selector: "c-sidebar-nav-link-content", inputs: { item: "item" }, providers: [SidebarNavHelper], ngImport: i0, template: `
+    @if (true) {
+      <ng-container>{{ item?.name ?? '' }}</ng-container>
+    }
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarNavLinkContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c-sidebar-nav-link-content',
                     template: `
-    <ng-container *ngIf="true">
-      <ng-container>{{item?.name ?? ''}}</ng-container>
-    </ng-container>
+    @if (true) {
+      <ng-container>{{ item?.name ?? '' }}</ng-container>
+    }
   `,
                     providers: [SidebarNavHelper],
-                    standalone: true,
-                    imports: [NgIf]
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: SidebarNavHelper }], propDecorators: { item: [{
                 type: Input
@@ -14102,20 +14058,21 @@ class SidebarNavLinkComponent {
         this.linkClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarNavLinkComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SidebarNavLinkComponent, isStandalone: true, selector: "c-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "<ng-container [ngSwitch]=\"linkType\">\n  <a *ngSwitchCase=\"'disabled'\"\n     [ngClass]=\"item | cSidebarNavLink\"\n     [cHtmlAttr]=\"item.attributes ?? {}\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n  <a *ngSwitchCase=\"'external'\"\n     [ngClass]=\"item | cSidebarNavLink\"\n     [href]=\"href\"\n     [cHtmlAttr]=\"item.attributes ?? {}\"\n     (click)=\"linkClicked()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n  <a *ngSwitchDefault\n     [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}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n</ng-container>\n\n<ng-template #iconTemplate let-item>\n<!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  <span *ngIf=\"item?.icon\" class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  <ng-template [ngIf]=\"item?.iconComponent\">\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [name]=\"item.iconComponent?.name\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n    ></svg>\n  </ng-template>\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: SidebarNavLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-sidebar-nav-link', providers: [SidebarNavHelper], standalone: true, imports: [
-                        CommonModule,
                         RouterModule,
                         HtmlAttributesDirective,
                         IconDirective,
                         SidebarNavLinkContentComponent,
                         SidebarNavLinkPipe,
                         SidebarNavBadgePipe,
-                        SidebarNavIconPipe
-                    ], template: "<ng-container [ngSwitch]=\"linkType\">\n  <a *ngSwitchCase=\"'disabled'\"\n     [ngClass]=\"item | cSidebarNavLink\"\n     [cHtmlAttr]=\"item.attributes ?? {}\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n  <a *ngSwitchCase=\"'external'\"\n     [ngClass]=\"item | cSidebarNavLink\"\n     [href]=\"href\"\n     [cHtmlAttr]=\"item.attributes ?? {}\"\n     (click)=\"linkClicked()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n  <a *ngSwitchDefault\n     [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}\"></ng-container>\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\n  </a>\n</ng-container>\n\n<ng-template #iconTemplate let-item>\n<!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  <span *ngIf=\"item?.icon\" class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  <ng-template [ngIf]=\"item?.iconComponent\">\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [name]=\"item.iconComponent?.name\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n    ></svg>\n  </ng-template>\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\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: [{
@@ -14150,11 +14107,11 @@ class SidebarNavLabelComponent {
         return this.iconClasses;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SidebarNavLabelComponent, deps: [{ token: SidebarNavHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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  <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"getLabelIconClass()\"></i>\n  <ng-container>{{ item.name }}</ng-container>\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: SidebarNavLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-sidebar-nav-label', standalone: true, imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass, NgIf], template: "<a [ngClass]=\"getItemClass()\"\n   href=\"{{item.url}}\"\n   [cHtmlAttr]=\"item.attributes\">\n  <i *ngIf=\"helper.hasIcon(item)\" [ngClass]=\"getLabelIconClass()\"></i>\n  <ng-container>{{ item.name }}</ng-container>\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\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
             }] } });
@@ -14355,7 +14312,7 @@ class SidebarNavGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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: "16.1.0", version: "17.1.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  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\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  [compact]=\"compact\"\n/>\n\n<ng-template #iconTemplate let-item>\n<!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  <span *ngIf=\"item?.icon\" class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  <ng-template [ngIf]=\"item?.iconComponent\">\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  </ng-template>\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\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(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.1.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: '*'
@@ -14375,7 +14332,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                         HtmlAttributesDirective,
                         IconDirective,
                         NgTemplateOutlet,
-                        NgIf,
                         NgClass,
                         SidebarNavIconPipe,
                         SidebarNavBadgePipe,
@@ -14393,7 +14349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\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  [compact]=\"compact\"\n/>\n\n<ng-template #iconTemplate let-item>\n<!--  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>-->\n  <span *ngIf=\"item?.icon\" class=\"nav-icon\">\n    <span [ngClass]=\"item.icon ?? ''\"></span>\n  </span>\n  <ng-template [ngIf]=\"item?.iconComponent\">\n    <svg\n      [cIcon]=\"item.iconComponent?.content\"\n      [customClasses]=\"item | cSidebarNavIcon\"\n      [name]=\"item.iconComponent?.name\"\n    />\n  </ng-template>\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\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: [{
@@ -14444,16 +14400,12 @@ class SidebarNavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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: "16.1.0", version: "17.1.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: "<ng-container *ngFor=\"let item of navItemsArray\">\n  <ng-container [ngSwitch]=\"helper.itemType(item)\">\n    <c-sidebar-nav-group\n      #rla=\"routerLinkActive\"\n      *ngSwitchCase=\"'group'\"\n      [dropdownMode]=\"dropdownMode\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\n      routerLinkActive=\"show\"\n      [compact]=\"compact\"\n    >\n    </c-sidebar-nav-group>\n    <c-sidebar-nav-divider\n      *ngSwitchCase=\"'divider'\"\n      [cHtmlAttr]=\"item.attributes ?? {}\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-divider>\n    <c-sidebar-nav-title\n      *ngSwitchCase=\"'title'\"\n      [cHtmlAttr]=\"item.attributes ?? {}\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-title>\n    <c-sidebar-nav-label\n      *ngSwitchCase=\"'label'\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-label>\n    <ng-container\n      *ngSwitchCase=\"'empty'\">\n    </ng-container>\n    <c-sidebar-nav-link\n      (linkClick)=\"hideMobile()\"\n      *ngSwitchDefault\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\"\n    >\n    </c-sidebar-nav-link>\n  </ng-container>\n</ng-container>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: SidebarNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-sidebar-nav', standalone: true, imports: [
-                        NgForOf,
                         NgClass,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgSwitchDefault,
                         HtmlAttributesDirective,
                         SidebarNavLinkComponent,
                         SidebarNavLabelComponent,
@@ -14462,7 +14414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                         SidebarNavGroupComponent,
                         SidebarNavItemClassPipe,
                         RouterModule
-                    ], template: "<ng-container *ngFor=\"let item of navItemsArray\">\n  <ng-container [ngSwitch]=\"helper.itemType(item)\">\n    <c-sidebar-nav-group\n      #rla=\"routerLinkActive\"\n      *ngSwitchCase=\"'group'\"\n      [dropdownMode]=\"dropdownMode\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\n      routerLinkActive=\"show\"\n      [compact]=\"compact\"\n    >\n    </c-sidebar-nav-group>\n    <c-sidebar-nav-divider\n      *ngSwitchCase=\"'divider'\"\n      [cHtmlAttr]=\"item.attributes ?? {}\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-divider>\n    <c-sidebar-nav-title\n      *ngSwitchCase=\"'title'\"\n      [cHtmlAttr]=\"item.attributes ?? {}\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-title>\n    <c-sidebar-nav-label\n      *ngSwitchCase=\"'label'\"\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\">\n    </c-sidebar-nav-label>\n    <ng-container\n      *ngSwitchCase=\"'empty'\">\n    </ng-container>\n    <c-sidebar-nav-link\n      (linkClick)=\"hideMobile()\"\n      *ngSwitchDefault\n      [item]=\"item\"\n      [ngClass]=\"item | cSidebarNavItemClass\"\n    >\n    </c-sidebar-nav-link>\n  </ng-container>\n</ng-container>\n<ng-content></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: [{
@@ -14557,7 +14509,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
 
 class SmartPaginationComponent {
     constructor() {
-        this._activePage = 1;
+        /**
+         * Current page number. [docs]
+         * @default 1
+         * @type number
+         */
+        this.activePage = 1;
         /**
          * Event triggered on activePage change.
          * @type EventEmitter<number>
@@ -14620,24 +14577,13 @@ class SmartPaginationComponent {
          */
         this.role = 'navigation';
     }
-    /**
-     * Current page number. [docs]
-     * @default 1
-     * @type number
-     */
-    set activePage(value) {
-        this._activePage = coerceNumberProperty(value);
-    }
-    get activePage() {
-        return this._activePage;
-    }
     /**
      * Maximum items number. [docs]
      * @default 5
      * @type number
      */
     set limit(value) {
-        this._limit = coerceNumberProperty(value);
+        this._limit = value;
     }
     get limit() {
         return this._limit;
@@ -14647,7 +14593,7 @@ class SmartPaginationComponent {
      * @type number
      */
     set pages(value) {
-        this._pages = coerceNumberProperty(value);
+        this._pages = value;
     }
     get pages() {
         return this._pages;
@@ -14707,13 +14653,14 @@ class SmartPaginationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SmartPaginationComponent, isStandalone: true, selector: "c-smart-pagination", inputs: { activePage: "activePage", arrows: "arrows", doubleArrows: "doubleArrows", dots: "dots", limit: "limit", pages: "pages", firstButton: "firstButton", lastButton: "lastButton", nextButton: "nextButton", previousButton: "previousButton", align: "align", size: "size", role: "role" }, outputs: { activePageChange: "activePageChange" }, host: { properties: { "attr.role": "this.role" } }, exportAs: ["cSmartPagination"], ngImport: i0, template: "<ul [ngClass]=\"paginationClass\">\n  <li *ngIf=\"doubleArrows\" cPageItem>\n    <button\n      (click)=\"setPage(1)\"\n      [disabled]=\"activePage === 1\"\n      aria-label=\"First page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{firstButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"arrows\" cPageItem>\n    <button\n      (click)=\"setPage(activePage - 1)\"\n      [disabled]=\"activePage === 1\"\n      aria-label=\"Previous page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{previousButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"beforeDots\" cPageItem>\n    <a cPageLink disabled role=\"separator\">\n      ...\n    </a>\n  </li>\n  <li *ngFor=\"let item of items; index as i\" [active]=\"activePage === item\" cPageItem>\n    <button\n      (click)=\"setPage(item)\"\n      [title]=\"(activePage === item ? 'Current page ' : 'Go to page ') + (item).toString()\"\n      cPageLink\n    >\n      {{item}}\n    </button>\n  </li>\n  <li *ngIf=\"afterDots\" cPageItem>\n    <a cPageLink disabled role=\"separator\">\n      ...\n    </a>\n  </li>\n  <li *ngIf=\"arrows\" cPageItem>\n    <button\n      (click)=\"setPage(activePage + 1)\"\n      [disabled]=\"activePage === pages\"\n      aria-label=\"Next page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{nextButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"doubleArrows\" cPageItem>\n    <button\n      (click)=\"setPage(pages)\"\n      [disabled]=\"activePage === pages\"\n      aria-label=\"Last page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{lastButton}}</span>\n    </button>\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: PageItemDirective, selector: "[cPageItem]", inputs: ["active", "disabled"] }, { kind: "directive", type: PageLinkDirective, selector: "[cPageLink]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SmartPaginationComponent, isStandalone: true, selector: "c-smart-pagination", inputs: { activePage: ["activePage", "activePage", numberAttribute], arrows: "arrows", doubleArrows: "doubleArrows", dots: "dots", limit: ["limit", "limit", numberAttribute], pages: ["pages", "pages", numberAttribute], firstButton: "firstButton", lastButton: "lastButton", nextButton: "nextButton", previousButton: "previousButton", align: "align", size: "size", role: "role" }, outputs: { activePageChange: "activePageChange" }, host: { properties: { "attr.role": "this.role" } }, exportAs: ["cSmartPagination"], ngImport: i0, template: "<ul [ngClass]=\"paginationClass\">\n  @if (doubleArrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(1)\"\n        [disabled]=\"activePage === 1\"\n        aria-label=\"First page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ firstButton }}</span>\n      </button>\n    </li>\n  }\n  @if (arrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(activePage - 1)\"\n        [disabled]=\"activePage === 1\"\n        aria-label=\"Previous page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ previousButton }}</span>\n      </button>\n    </li>\n  }\n  @if (beforeDots) {\n    <li cPageItem>\n      <a cPageLink disabled role=\"separator\">\n        ...\n      </a>\n    </li>\n  }\n  @for (item of items; track item; let i = $index) {\n    <li [active]=\"activePage === item\" cPageItem>\n      <button\n        (click)=\"setPage(item)\"\n        [title]=\"(activePage === item ? 'Current page ' : 'Go to page ') + (item).toString()\"\n        cPageLink\n      >\n        {{ item }}\n      </button>\n    </li>\n  }\n  @if (afterDots) {\n    <li cPageItem>\n      <a cPageLink disabled role=\"separator\">\n        ...\n      </a>\n    </li>\n  }\n  @if (arrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(activePage + 1)\"\n        [disabled]=\"activePage === pages\"\n        aria-label=\"Next page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ nextButton }}</span>\n      </button>\n    </li>\n  }\n  @if (doubleArrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(pages)\"\n        [disabled]=\"activePage === pages\"\n        aria-label=\"Last page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ lastButton }}</span>\n      </button>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: PageItemDirective, selector: "[cPageItem]", inputs: ["active", "disabled"] }, { kind: "directive", type: PageLinkDirective, selector: "[cPageLink]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-pagination', exportAs: 'cSmartPagination', standalone: true, imports: [PageItemDirective, PageLinkDirective, NgClass, NgIf, NgForOf], template: "<ul [ngClass]=\"paginationClass\">\n  <li *ngIf=\"doubleArrows\" cPageItem>\n    <button\n      (click)=\"setPage(1)\"\n      [disabled]=\"activePage === 1\"\n      aria-label=\"First page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{firstButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"arrows\" cPageItem>\n    <button\n      (click)=\"setPage(activePage - 1)\"\n      [disabled]=\"activePage === 1\"\n      aria-label=\"Previous page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{previousButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"beforeDots\" cPageItem>\n    <a cPageLink disabled role=\"separator\">\n      ...\n    </a>\n  </li>\n  <li *ngFor=\"let item of items; index as i\" [active]=\"activePage === item\" cPageItem>\n    <button\n      (click)=\"setPage(item)\"\n      [title]=\"(activePage === item ? 'Current page ' : 'Go to page ') + (item).toString()\"\n      cPageLink\n    >\n      {{item}}\n    </button>\n  </li>\n  <li *ngIf=\"afterDots\" cPageItem>\n    <a cPageLink disabled role=\"separator\">\n      ...\n    </a>\n  </li>\n  <li *ngIf=\"arrows\" cPageItem>\n    <button\n      (click)=\"setPage(activePage + 1)\"\n      [disabled]=\"activePage === pages\"\n      aria-label=\"Next page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{nextButton}}</span>\n    </button>\n  </li>\n  <li *ngIf=\"doubleArrows\" cPageItem>\n    <button\n      (click)=\"setPage(pages)\"\n      [disabled]=\"activePage === pages\"\n      aria-label=\"Last page\"\n      cPageLink\n    >\n      <span aria-hidden=\"true\">{{lastButton}}</span>\n    </button>\n  </li>\n</ul>\n" }]
-        }], ctorParameters: () => [], propDecorators: { activePage: [{
-                type: Input
+            args: [{ selector: 'c-smart-pagination', exportAs: 'cSmartPagination', standalone: true, imports: [PageItemDirective, PageLinkDirective, NgClass], template: "<ul [ngClass]=\"paginationClass\">\n  @if (doubleArrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(1)\"\n        [disabled]=\"activePage === 1\"\n        aria-label=\"First page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ firstButton }}</span>\n      </button>\n    </li>\n  }\n  @if (arrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(activePage - 1)\"\n        [disabled]=\"activePage === 1\"\n        aria-label=\"Previous page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ previousButton }}</span>\n      </button>\n    </li>\n  }\n  @if (beforeDots) {\n    <li cPageItem>\n      <a cPageLink disabled role=\"separator\">\n        ...\n      </a>\n    </li>\n  }\n  @for (item of items; track item; let i = $index) {\n    <li [active]=\"activePage === item\" cPageItem>\n      <button\n        (click)=\"setPage(item)\"\n        [title]=\"(activePage === item ? 'Current page ' : 'Go to page ') + (item).toString()\"\n        cPageLink\n      >\n        {{ item }}\n      </button>\n    </li>\n  }\n  @if (afterDots) {\n    <li cPageItem>\n      <a cPageLink disabled role=\"separator\">\n        ...\n      </a>\n    </li>\n  }\n  @if (arrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(activePage + 1)\"\n        [disabled]=\"activePage === pages\"\n        aria-label=\"Next page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ nextButton }}</span>\n      </button>\n    </li>\n  }\n  @if (doubleArrows) {\n    <li cPageItem>\n      <button\n        (click)=\"setPage(pages)\"\n        [disabled]=\"activePage === pages\"\n        aria-label=\"Last page\"\n        cPageLink\n      >\n        <span aria-hidden=\"true\">{{ lastButton }}</span>\n      </button>\n    </li>\n  }\n</ul>\n" }]
+        }], propDecorators: { activePage: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], activePageChange: [{
                 type: Output
             }], arrows: [{
@@ -14723,9 +14670,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }], dots: [{
                 type: Input
             }], limit: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], pages: [{
-                type: Input
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], firstButton: [{
                 type: Input
             }], lastButton: [{
@@ -14845,11 +14794,11 @@ class SmartTableFilterComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SmartTableFilterComponent, isStandalone: true, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", sizing: "sizing" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n  {{ filterLabel }}\n</label>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    autocomplete=\"off\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SmartTableFilterComponent, isStandalone: true, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", sizing: "sizing" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (!!filterLabel) {\n  <label [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n    {{ filterLabel }}\n  </label>\n}\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    autocomplete=\"off\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormControlDirective, FormLabelDirective, NgClass, NgIf, AsyncPipe], template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n  {{ filterLabel }}\n</label>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    autocomplete=\"off\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n" }]
+            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormControlDirective, FormLabelDirective, NgClass, AsyncPipe], template: "@if (!!filterLabel) {\n  <label [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n    {{ filterLabel }}\n  </label>\n}\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    autocomplete=\"off\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { filterLabel: [{
                 type: Input
             }], filterPlaceholder: [{
@@ -15307,7 +15256,7 @@ class SmartTableHeadComponent {
     #selectedAllPreviousValue;
     set selectedAll(value) {
         this.indeterminate$.next(value === 'indeterminate');
-        this.#selectedAll = value === 'indeterminate' ? false : coerceBooleanProperty(value);
+        this.#selectedAll = value === 'indeterminate' ? false : booleanAttribute(value);
         if (value !== 'indeterminate') {
             this.#selectedAllPreviousValue = this.#selectedAll;
         }
@@ -15435,7 +15384,7 @@ class SmartTableHeadComponent {
         return sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", columnGroups: "columnGroups", selectable: "selectable", selectAll: ["selectAll", "selectAll", booleanAttribute], selectedAll: "selectedAll", showGroups: ["showGroups", "showGroups", booleanAttribute], sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", columnLabelTemplates: "columnLabelTemplates", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n\n<ng-template [ngIf]=\"showGroups\">\n  <tr *ngFor=\"let row of columnGroups$() let i = index\">\n    <th *ngIf=\"selectable\"></th>\n    <th *ngFor=\"let cell of row; let i = index\"\n        [colSpan]=\"cell.colspan ?? 1\"\n        [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n        [cTableColor]=\"tableHeaderCellColor(cell)\"\n        [ngStyle]=\"getTableHeaderCellStyles(cell, columnSorter)\"\n    >\n      {{cell.label}}\n    </th>\n  </tr>\n</ng-template>\n\n<tr>\n  <th *ngIf=\"selectable\">\n    <input\n      cFormCheckInput\n      (change)=\"handleSelectAllChecked($event)\"\n      [checked]=\"selectedAll === true\"\n      [indeterminate]=\"indeterminate$ | async\"\n      type=\"checkbox\"\n      [disabled]=\"!selectAll\"\n      autocomplete=\"off\"\n    >\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    (keydown)=\"handleSortKeyDown($event, column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [attr.aria-sort]=\"getAriaSort(column)\"\n    [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n    [ngClass]=\"getTableHeaderCellClass(column)\"\n    [tabindex]=\"columnSorter && columnSorterEnabled(column) ? 0 : -1\"\n  >\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  <c-smart-table-column-filter\n    (valueChange)=\"handleColumnFilterValueChange($event)\"\n    *ngIf=\"columnFilterEnabled(column)\"\n    [column]=\"column\"\n    [delay]=\"300\"\n    [onEvent]=\"columnFilterEvent\"\n    [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n    cFilterInput\n    sizing=\"sm\"\n  />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", columnGroups: "columnGroups", selectable: ["selectable", "selectable", booleanAttribute], selectAll: ["selectAll", "selectAll", booleanAttribute], selectedAll: "selectedAll", showGroups: ["showGroups", "showGroups", booleanAttribute], sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", columnLabelTemplates: "columnLabelTemplates", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (component === 'tfoot') {\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n}\n@if (showGroups) {\n  @for (row of columnGroups$(); track row; let i = $index) {\n    <tr>\n      @if (selectable) {\n        <th></th>\n      }\n      @for (cell of row; track cell; let i = $index) {\n        <th [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n            [cTableColor]=\"tableHeaderCellColor(cell)\"\n            [colSpan]=\"cell.colspan ?? 1\"\n            [ngStyle]=\"getTableHeaderCellStyles(cell, columnSorter)\"\n        >\n          {{ cell.label }}\n        </th>\n      }\n    </tr>\n  }\n}\n\n<tr>\n  @if (selectable) {\n    <th>\n      <input\n        (change)=\"handleSelectAllChecked($event)\"\n        [checked]=\"selectedAll === true\"\n        [disabled]=\"!selectAll\"\n        [indeterminate]=\"indeterminate$ | async\"\n        autocomplete=\"off\"\n        cFormCheckInput\n        type=\"checkbox\"\n      >\n    </th>\n  }\n  @for (column of columns; track column; let i = $index) {\n    <th\n      (click)=\"handleSortClick(column, i)\"\n      (keydown)=\"handleSortKeyDown($event, column, i)\"\n      [attr.aria-sort]=\"getAriaSort(column)\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngClass]=\"getTableHeaderCellClass(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n      [tabindex]=\"columnSorter && columnSorterEnabled(column) ? 0 : -1\"\n    >\n      @if (columnSorter && columnSorterEnabled(column)) {\n        <ng-container\n          *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n        />\n      }\n      <ng-container\n        *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n      />\n    </th>\n  }\n</tr>\n@if (columnFilter) {\n  <tr>\n    @if (selectable) {\n      <th></th>\n    }\n    @for (column of columns; track column; let i = $index) {\n      <th [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n          [cTableColor]=\"tableHeaderCellColor(column)\"\n          [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n        />\n      </th>\n    }\n  </tr>\n}\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  @if (columnFilterEnabled(column)) {\n    <c-smart-table-column-filter\n      (valueChange)=\"handleColumnFilterValueChange($event)\"\n      [column]=\"column\"\n      [delay]=\"300\"\n      [onEvent]=\"columnFilterEvent\"\n      [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n      cFilterInput\n      sizing=\"sm\"\n    />\n  }\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  @switch (columnSorterState) {\n    @case ('asc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n      </span>\n    }\n    @case ('desc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n      </span>\n    }\n    @default {\n      <span class=\"opacity-25 float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n      </span>\n    }\n  }\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
@@ -15446,16 +15395,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                         SmartTableColumnFilterComponent,
                         TableColorDirective,
                         AsyncPipe,
-                        NgForOf,
-                        NgIf,
                         NgStyle,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgSwitchDefault,
                         NgTemplateOutlet,
                         SmartTableColumnLabelPipe,
                         NgClass
-                    ], template: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n\n<ng-template [ngIf]=\"showGroups\">\n  <tr *ngFor=\"let row of columnGroups$() let i = index\">\n    <th *ngIf=\"selectable\"></th>\n    <th *ngFor=\"let cell of row; let i = index\"\n        [colSpan]=\"cell.colspan ?? 1\"\n        [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n        [cTableColor]=\"tableHeaderCellColor(cell)\"\n        [ngStyle]=\"getTableHeaderCellStyles(cell, columnSorter)\"\n    >\n      {{cell.label}}\n    </th>\n  </tr>\n</ng-template>\n\n<tr>\n  <th *ngIf=\"selectable\">\n    <input\n      cFormCheckInput\n      (change)=\"handleSelectAllChecked($event)\"\n      [checked]=\"selectedAll === true\"\n      [indeterminate]=\"indeterminate$ | async\"\n      type=\"checkbox\"\n      [disabled]=\"!selectAll\"\n      autocomplete=\"off\"\n    >\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    (keydown)=\"handleSortKeyDown($event, column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [attr.aria-sort]=\"getAriaSort(column)\"\n    [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n    [ngClass]=\"getTableHeaderCellClass(column)\"\n    [tabindex]=\"columnSorter && columnSorterEnabled(column) ? 0 : -1\"\n  >\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  <c-smart-table-column-filter\n    (valueChange)=\"handleColumnFilterValueChange($event)\"\n    *ngIf=\"columnFilterEnabled(column)\"\n    [column]=\"column\"\n    [delay]=\"300\"\n    [onEvent]=\"columnFilterEvent\"\n    [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n    cFilterInput\n    sizing=\"sm\"\n  />\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
+                    ], template: "@if (component === 'tfoot') {\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n}\n@if (showGroups) {\n  @for (row of columnGroups$(); track row; let i = $index) {\n    <tr>\n      @if (selectable) {\n        <th></th>\n      }\n      @for (cell of row; track cell; let i = $index) {\n        <th [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n            [cTableColor]=\"tableHeaderCellColor(cell)\"\n            [colSpan]=\"cell.colspan ?? 1\"\n            [ngStyle]=\"getTableHeaderCellStyles(cell, columnSorter)\"\n        >\n          {{ cell.label }}\n        </th>\n      }\n    </tr>\n  }\n}\n\n<tr>\n  @if (selectable) {\n    <th>\n      <input\n        (change)=\"handleSelectAllChecked($event)\"\n        [checked]=\"selectedAll === true\"\n        [disabled]=\"!selectAll\"\n        [indeterminate]=\"indeterminate$ | async\"\n        autocomplete=\"off\"\n        cFormCheckInput\n        type=\"checkbox\"\n      >\n    </th>\n  }\n  @for (column of columns; track column; let i = $index) {\n    <th\n      (click)=\"handleSortClick(column, i)\"\n      (keydown)=\"handleSortKeyDown($event, column, i)\"\n      [attr.aria-sort]=\"getAriaSort(column)\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngClass]=\"getTableHeaderCellClass(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n      [tabindex]=\"columnSorter && columnSorterEnabled(column) ? 0 : -1\"\n    >\n      @if (columnSorter && columnSorterEnabled(column)) {\n        <ng-container\n          *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n        />\n      }\n      <ng-container\n        *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n      />\n    </th>\n  }\n</tr>\n@if (columnFilter) {\n  <tr>\n    @if (selectable) {\n      <th></th>\n    }\n    @for (column of columns; track column; let i = $index) {\n      <th [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n          [cTableColor]=\"tableHeaderCellColor(column)\"\n          [ngStyle]=\"getTableHeaderCellStyles(column, columnSorter)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n        />\n      </th>\n    }\n  </tr>\n}\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  @if (columnFilterEnabled(column)) {\n    <c-smart-table-column-filter\n      (valueChange)=\"handleColumnFilterValueChange($event)\"\n      [column]=\"column\"\n      [delay]=\"300\"\n      [onEvent]=\"columnFilterEvent\"\n      [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n      cFilterInput\n      sizing=\"sm\"\n    />\n  }\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  @switch (columnSorterState) {\n    @case ('asc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n      </span>\n    }\n    @case ('desc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n      </span>\n    }\n    @default {\n      <span class=\"opacity-25 float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n      </span>\n    }\n  }\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columnFilter: [{
                 type: Input
             }], columnFilterState: [{
@@ -15469,7 +15413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }], columnGroups: [{
                 type: Input
             }], selectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectAll: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -15520,16 +15465,15 @@ class SmartTableItemsPerPageSelectorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SmartTableItemsPerPageSelectorComponent, isStandalone: true, selector: "c-smart-table-items-per-page-selector", inputs: { itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{itemsPerPageLabel}}</label>\n<div class=\"col-auto\">\n  <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\n    <option *ngFor=\"let option of itemsPerPageOptions; let i = index\" [ngValue]=\"option\">{{option}}</option>\n  </select>\n</div>\n", dependencies: [{ kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SmartTableItemsPerPageSelectorComponent, isStandalone: true, selector: "c-smart-table-items-per-page-selector", inputs: { itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{ itemsPerPageLabel }}</label>\n<div class=\"col-auto\">\n  <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\n    @for (option of itemsPerPageOptions; track option; let i = $index) {\n      <option [ngValue]=\"option\">{{ option }}</option>\n    }\n  </select>\n</div>\n", dependencies: [{ kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-smart-table-items-per-page-selector', imports: [
                         FormSelectDirective,
                         FormLabelDirective,
-                        NgForOf,
                         FormsModule
-                    ], standalone: true, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{itemsPerPageLabel}}</label>\n<div class=\"col-auto\">\n  <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\n    <option *ngFor=\"let option of itemsPerPageOptions; let i = index\" [ngValue]=\"option\">{{option}}</option>\n  </select>\n</div>\n" }]
+                    ], standalone: true, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{ itemsPerPageLabel }}</label>\n<div class=\"col-auto\">\n  <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\n    @for (option of itemsPerPageOptions; track option; let i = $index) {\n      <option [ngValue]=\"option\">{{ option }}</option>\n    }\n  </select>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { itemsPerPage: [{
                 type: Input
             }], itemsPerPageLabel: [{
@@ -15945,16 +15889,14 @@ class SmartTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: ["activePage", "activePage", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], clickableRows: ["clickableRows", "clickableRows", booleanAttribute], columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: ["footer", "footer", booleanAttribute], header: ["header", "header", booleanAttribute], items: "items", itemsPerPage: ["itemsPerPage", "itemsPerPage", numberAttribute], itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: ["pagination", "pagination", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], selectAll: ["selectAll", "selectAll", booleanAttribute], sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\n    >\n    </c-smart-table-filter>\n  </ng-template>\n\n  <ng-template #tableCleanerTemplate>\n    <button\n      (click)=\"clean($event)\"\n      *ngIf=\"cleaner\"\n      [disabled]=\"!isFiltered\"\n      [ngClass]=\"{'ms-1': tableFilter}\"\n      cButton\n      color=\"transparent\"\n      tabindex=\"0\"\n    >\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n    </button>\n  </ng-template>\n\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\" />\n    </div>\n  </ng-template>\n</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnFilter]=\"columnFilter\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [columnSorter]=\"columnSorter\"\n      [columns]=\"columns$()\"\n      [columnGroups]=\"columnGroups$()\"\n      [selectAll]=\"selectAll\"\n      [selectable]=\"selectable\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [showGroups]=\"showGroups$()\"\n      [sorterValue]=\"sorterValue\"\n    />\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n    </tfoot>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [cAlign]=\"tableFootProps?.align\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [columnSorter]=\"columnSorter\"\n      [columns]=\"columns$()\"\n      [selectAll]=\"selectAll\"\n      [selectable]=\"selectable\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [sorterValue]=\"sorterValue\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\n      component=\"tfoot\"\n    />\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  />\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\"\n      />\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active ?? undefined\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\"\n               [checked]=\"item._selected ?? false\"\n               cFormCheckInput\n               [disabled]=\"(item?._selectable === false) ?? false\"\n               autocomplete=\"off\"\n        >\n      </td>\n      <ng-template ngFor let-column [ngForOf]=\"columns$()\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[column.key], cellProps: getTableDataCellProps(column, item) }\" />\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  <td\n    *ngIf=\"tdContent !== undefined\"\n    [cTableActive]=\"cellProps?.['active']\"\n    [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n    [cAlign]=\"cellProps?.align\"\n    [ngClass]=\"getTableDataCellClass(column, item)\"\n    [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n    [ngStyle]=\"getTableDataCellStyles(column, item)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "columnGroups", "selectable", "selectAll", "selectedAll", "showGroups", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: ["activePage", "activePage", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], clickableRows: ["clickableRows", "clickableRows", booleanAttribute], columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: ["footer", "footer", booleanAttribute], header: ["header", "header", booleanAttribute], items: "items", itemsPerPage: ["itemsPerPage", "itemsPerPage", numberAttribute], itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: ["pagination", "pagination", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], selectAll: ["selectAll", "selectAll", booleanAttribute], sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "@if (itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']) {\n  <div class=\"row my-2 mx-0\">\n    @if (tableFilter) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n      </div>\n    }\n    @if (cleaner) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n    <ng-template #tableFilterTemplate>\n      @if (tableFilter) {\n        <c-smart-table-filter\n          (valueChange)=\"handleTableFilterChange($event)\"\n          [delay]=\"300\"\n          [filterLabel]=\"tableFilterLabel\"\n          [filterPlaceholder]=\"tableFilterPlaceholder\"\n          [onEvent]=\"tableFilterEvent\"\n          [value]=\"tableFilterState\"\n          cFilterInput\n        />\n      }\n    </ng-template>\n\n    <ng-template #tableCleanerTemplate>\n      @if (cleaner) {\n        <button\n          (click)=\"clean($event)\"\n          [disabled]=\"!isFiltered\"\n          [ngClass]=\"{'ms-1': tableFilter}\"\n          cButton\n          color=\"transparent\"\n          tabindex=\"0\"\n        >\n          <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n        </button>\n      }\n    </ng-template>\n\n    <ng-template #tableCustomHeaderTemplate>\n      <div class=\"col-auto p-0 ms-auto\">\n        <ng-content select=\"[customHeader]\" />\n      </div>\n    </ng-template>\n  </div>\n}\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         cTable\n  >\n    @if (header) {\n      <c-smart-table-head\n        (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableHeadProps?.align\"\n        [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n        [cTableColor]=\"tableHeadProps?.color\"\n        [columnFilterState]=\"columnFilterState\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnFilter]=\"columnFilter\"\n        [columnGroups]=\"columnGroups$()\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [showGroups]=\"showGroups$()\"\n        [sorterValue]=\"sorterValue\"\n      />\n    }\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    @if (summaryRowTemplate && !footer) {\n      <tfoot>\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n      </tfoot>\n    }\n    @if (footer) {\n      <c-smart-table-head\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableFootProps?.align\"\n        [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n        [cTableColor]=\"tableFootProps?.color\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [sorterValue]=\"sorterValue\"\n        [summaryRowTemplate]=\"summaryRowTemplate\"\n        component=\"tfoot\"\n      />\n    }\n\n  </table>\n  @if (loading) {\n    <c-element-cover\n      [boundaries]=\"[\n        { sides: ['top'], query: 'td' },\n        { sides: ['bottom'], query: 'tbody' }\n      ]\"\n    />\n  }\n</div>\n@if (pagination || itemsPerPageSelect) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (pagination && numberOfPages > 1) {\n        <c-smart-pagination\n          (activePageChange)=\"setActivePage($event)\"\n          [activePage]=\"activePage\"\n          [pages]=\"numberOfPages\"\n        />\n      }\n    </div>\n    <div class=\"col-auto ms-auto\">\n      @if (itemsPerPageSelect) {\n        <c-smart-table-items-per-page-selector\n          (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n          [itemsPerPageLabel]=\"itemsPerPageLabel\"\n          [itemsPerPageOptions]=\"itemsPerPageOptions\"\n          [itemsPerPage]=\"itemsPerPage\"\n        />\n      }\n    </div>\n  </div>\n}\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cAlign]=\"tableBodyProps?.align\"\n         [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n  >\n    @for (item of currentItems; track item; let i = $index, cnt = $count, isEven = $even, isOdd = $odd) {\n      <tr (click)=\"handleRowClick({$event, item, i})\"\n          [cAlign]=\"item._props?.align\"\n          [cTableActive]=\"item._props?.active ?? undefined\"\n          [cTableColor]=\"item._props?.color\"\n          [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n          [tabindex]=\"clickableRows ? 0 : -1\"\n      >\n        @if (selectable) {\n          <td [cAlign]=\"item?.['_cellProps']?._all?.align\"\n              [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n              [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          >\n            <input (change)=\"handleRowChecked($event, item)\"\n                   [checked]=\"item._selected ?? false\"\n                   [disabled]=\"(item?._selectable === false) ?? false\"\n                   autocomplete=\"off\"\n                   cFormCheckInput\n            >\n          </td>\n        }\n        @for (column of columns$(); track column; let i = $index) {\n          <ng-container\n            *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[column.key], cellProps: getTableDataCellProps(column, item) }\"\n          />\n        }\n      </tr>\n      @if (templates['tableDetails']) {\n        <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n        <tr>\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{borderBottomWidth: 0}\" class=\"p-0\" tabindex=\"-1\"></td>\n        </tr>\n        <tr class=\"p-0\">\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{border: 0}\" class=\"p-0\">\n            <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n          </td>\n        </tr>\n      }\n    }\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  @if (tdContent !== undefined) {\n    <td [cAlign]=\"cellProps?.align\"\n        [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n        [cTableActive]=\"cellProps?.['active']\"\n        [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n        [ngClass]=\"getTableDataCellClass(column, item)\"\n        [ngStyle]=\"getTableDataCellStyles(column, item)\"\n    >\n      {{ tdContent }}\n    </td>\n  }\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  @if (!currentItems.length) {\n    <tr>\n      <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{ noItemsLabel }}</td>\n    </tr>\n  }\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg class=\"icon icon-custom-size\" pointer-events=\"none\" role=\"img\" viewBox=\"0 0 512 512\"\n       width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\">\n    </polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "columnGroups", "selectable", "selectAll", "selectedAll", "showGroups", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', standalone: true, imports: [
                         AsyncPipe,
-                        NgIf,
                         NgTemplateOutlet,
                         NgClass,
-                        NgForOf,
                         NgStyle,
                         AlignDirective,
                         ButtonDirective,
@@ -15970,7 +15912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                         TableColorDirective,
                         TableDirective,
                         JsonPipe
-                    ], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\n    >\n    </c-smart-table-filter>\n  </ng-template>\n\n  <ng-template #tableCleanerTemplate>\n    <button\n      (click)=\"clean($event)\"\n      *ngIf=\"cleaner\"\n      [disabled]=\"!isFiltered\"\n      [ngClass]=\"{'ms-1': tableFilter}\"\n      cButton\n      color=\"transparent\"\n      tabindex=\"0\"\n    >\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n    </button>\n  </ng-template>\n\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\" />\n    </div>\n  </ng-template>\n</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnFilter]=\"columnFilter\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [columnSorter]=\"columnSorter\"\n      [columns]=\"columns$()\"\n      [columnGroups]=\"columnGroups$()\"\n      [selectAll]=\"selectAll\"\n      [selectable]=\"selectable\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [showGroups]=\"showGroups$()\"\n      [sorterValue]=\"sorterValue\"\n    />\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n    </tfoot>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [cAlign]=\"tableFootProps?.align\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [columnSorter]=\"columnSorter\"\n      [columns]=\"columns$()\"\n      [selectAll]=\"selectAll\"\n      [selectable]=\"selectable\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [sorterValue]=\"sorterValue\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\n      component=\"tfoot\"\n    />\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  />\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\"\n      />\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active ?? undefined\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\"\n               [checked]=\"item._selected ?? false\"\n               cFormCheckInput\n               [disabled]=\"(item?._selectable === false) ?? false\"\n               autocomplete=\"off\"\n        >\n      </td>\n      <ng-template ngFor let-column [ngForOf]=\"columns$()\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[column.key], cellProps: getTableDataCellProps(column, item) }\" />\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  <td\n    *ngIf=\"tdContent !== undefined\"\n    [cTableActive]=\"cellProps?.['active']\"\n    [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n    [cAlign]=\"cellProps?.align\"\n    [ngClass]=\"getTableDataCellClass(column, item)\"\n    [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n    [ngStyle]=\"getTableDataCellStyles(column, item)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "@if (itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']) {\n  <div class=\"row my-2 mx-0\">\n    @if (tableFilter) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n      </div>\n    }\n    @if (cleaner) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n    <ng-template #tableFilterTemplate>\n      @if (tableFilter) {\n        <c-smart-table-filter\n          (valueChange)=\"handleTableFilterChange($event)\"\n          [delay]=\"300\"\n          [filterLabel]=\"tableFilterLabel\"\n          [filterPlaceholder]=\"tableFilterPlaceholder\"\n          [onEvent]=\"tableFilterEvent\"\n          [value]=\"tableFilterState\"\n          cFilterInput\n        />\n      }\n    </ng-template>\n\n    <ng-template #tableCleanerTemplate>\n      @if (cleaner) {\n        <button\n          (click)=\"clean($event)\"\n          [disabled]=\"!isFiltered\"\n          [ngClass]=\"{'ms-1': tableFilter}\"\n          cButton\n          color=\"transparent\"\n          tabindex=\"0\"\n        >\n          <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n        </button>\n      }\n    </ng-template>\n\n    <ng-template #tableCustomHeaderTemplate>\n      <div class=\"col-auto p-0 ms-auto\">\n        <ng-content select=\"[customHeader]\" />\n      </div>\n    </ng-template>\n  </div>\n}\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         cTable\n  >\n    @if (header) {\n      <c-smart-table-head\n        (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableHeadProps?.align\"\n        [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n        [cTableColor]=\"tableHeadProps?.color\"\n        [columnFilterState]=\"columnFilterState\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnFilter]=\"columnFilter\"\n        [columnGroups]=\"columnGroups$()\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [showGroups]=\"showGroups$()\"\n        [sorterValue]=\"sorterValue\"\n      />\n    }\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    @if (summaryRowTemplate && !footer) {\n      <tfoot>\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n      </tfoot>\n    }\n    @if (footer) {\n      <c-smart-table-head\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableFootProps?.align\"\n        [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n        [cTableColor]=\"tableFootProps?.color\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [sorterValue]=\"sorterValue\"\n        [summaryRowTemplate]=\"summaryRowTemplate\"\n        component=\"tfoot\"\n      />\n    }\n\n  </table>\n  @if (loading) {\n    <c-element-cover\n      [boundaries]=\"[\n        { sides: ['top'], query: 'td' },\n        { sides: ['bottom'], query: 'tbody' }\n      ]\"\n    />\n  }\n</div>\n@if (pagination || itemsPerPageSelect) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (pagination && numberOfPages > 1) {\n        <c-smart-pagination\n          (activePageChange)=\"setActivePage($event)\"\n          [activePage]=\"activePage\"\n          [pages]=\"numberOfPages\"\n        />\n      }\n    </div>\n    <div class=\"col-auto ms-auto\">\n      @if (itemsPerPageSelect) {\n        <c-smart-table-items-per-page-selector\n          (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n          [itemsPerPageLabel]=\"itemsPerPageLabel\"\n          [itemsPerPageOptions]=\"itemsPerPageOptions\"\n          [itemsPerPage]=\"itemsPerPage\"\n        />\n      }\n    </div>\n  </div>\n}\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cAlign]=\"tableBodyProps?.align\"\n         [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n  >\n    @for (item of currentItems; track item; let i = $index, cnt = $count, isEven = $even, isOdd = $odd) {\n      <tr (click)=\"handleRowClick({$event, item, i})\"\n          [cAlign]=\"item._props?.align\"\n          [cTableActive]=\"item._props?.active ?? undefined\"\n          [cTableColor]=\"item._props?.color\"\n          [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n          [tabindex]=\"clickableRows ? 0 : -1\"\n      >\n        @if (selectable) {\n          <td [cAlign]=\"item?.['_cellProps']?._all?.align\"\n              [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n              [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          >\n            <input (change)=\"handleRowChecked($event, item)\"\n                   [checked]=\"item._selected ?? false\"\n                   [disabled]=\"(item?._selectable === false) ?? false\"\n                   autocomplete=\"off\"\n                   cFormCheckInput\n            >\n          </td>\n        }\n        @for (column of columns$(); track column; let i = $index) {\n          <ng-container\n            *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[column.key], cellProps: getTableDataCellProps(column, item) }\"\n          />\n        }\n      </tr>\n      @if (templates['tableDetails']) {\n        <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n        <tr>\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{borderBottomWidth: 0}\" class=\"p-0\" tabindex=\"-1\"></td>\n        </tr>\n        <tr class=\"p-0\">\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{border: 0}\" class=\"p-0\">\n            <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n          </td>\n        </tr>\n      }\n    }\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  @if (tdContent !== undefined) {\n    <td [cAlign]=\"cellProps?.align\"\n        [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n        [cTableActive]=\"cellProps?.['active']\"\n        [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n        [ngClass]=\"getTableDataCellClass(column, item)\"\n        [ngStyle]=\"getTableDataCellStyles(column, item)\"\n    >\n      {{ tdContent }}\n    </td>\n  }\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  @if (!currentItems.length) {\n    <tr>\n      <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{ noItemsLabel }}</td>\n    </tr>\n  }\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg class=\"icon icon-custom-size\" pointer-events=\"none\" role=\"img\" viewBox=\"0 0 512 512\"\n       width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\">\n    </polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }], propDecorators: { activePage: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -16096,7 +16038,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();
@@ -16129,11 +16071,11 @@ class TabPaneComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.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']
@@ -16145,7 +16087,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);
@@ -16209,13 +16151,14 @@ class TabContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.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: [{
@@ -16242,9 +16185,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();
@@ -16258,7 +16202,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;
@@ -16315,7 +16259,7 @@ class TabContentRefDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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.1.0", ngImport: i0, type: TabContentRefDirective, decorators: [{
             type: Directive,
@@ -16327,11 +16271,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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']
@@ -16440,7 +16387,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();
@@ -16530,7 +16477,7 @@ class ToastComponent {
         this.clockId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.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.1.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.1.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 })),
@@ -16554,7 +16501,7 @@ class ToastComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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 })),
@@ -16580,13 +16527,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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: [{
@@ -16663,11 +16613,11 @@ class ToastHeaderComponent {
         this.toastHeaderClass = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ToastHeaderComponent, deps: [{ token: ToastComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ToastHeaderComponent, isStandalone: true, selector: "c-toast-header", inputs: { closeButton: "closeButton" }, host: { properties: { "class.toast-header": "this.toastHeaderClass" } }, exportAs: ["cToastHeader"], ngImport: i0, template: "<ng-container>\n  <ng-content></ng-content>\n  <button *ngIf=\"closeButton\" [cToastClose]=\"toast\" [style]=\"{outline: 0}\" aria-label=\"close\" cButtonClose class=\"ms-auto\"></button>\n</ng-container>\n", dependencies: [{ kind: "directive", type: ToastCloseDirective, selector: "[cToastClose]", inputs: ["cToastClose"], exportAs: ["cToastClose"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: ToastHeaderComponent, isStandalone: true, selector: "c-toast-header", inputs: { closeButton: "closeButton" }, host: { properties: { "class.toast-header": "this.toastHeaderClass" } }, exportAs: ["cToastHeader"], ngImport: i0, template: "<ng-container>\n  <ng-content />\n  @if (closeButton) {\n    <button [cToastClose]=\"toast\" [style]=\"{outline: 0}\" aria-label=\"close\" cButtonClose class=\"ms-auto\"></button>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: ToastCloseDirective, selector: "[cToastClose]", inputs: ["cToastClose"], exportAs: ["cToastClose"] }, { kind: "directive", type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ToastHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-toast-header', exportAs: 'cToastHeader', standalone: true, imports: [ToastCloseDirective, ButtonCloseDirective, NgIf], template: "<ng-container>\n  <ng-content></ng-content>\n  <button *ngIf=\"closeButton\" [cToastClose]=\"toast\" [style]=\"{outline: 0}\" aria-label=\"close\" cButtonClose class=\"ms-auto\"></button>\n</ng-container>\n" }]
+            args: [{ selector: 'c-toast-header', exportAs: 'cToastHeader', standalone: true, imports: [ToastCloseDirective, ButtonCloseDirective], template: "<ng-container>\n  <ng-content />\n  @if (closeButton) {\n    <button [cToastClose]=\"toast\" [style]=\"{outline: 0}\" aria-label=\"close\" cButtonClose class=\"ms-auto\"></button>\n  }\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: ToastComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { closeButton: [{
@@ -17183,11 +17133,11 @@ class WidgetStatAComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatAComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: WidgetStatAComponent, isStandalone: true, selector: "c-widget-stat-a", inputs: { color: "color", title: "title", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatA"], ngImport: i0, template: "<ng-container>\n  <c-card-body [ngClass]=\"bodyClasses\">\n    <div>\n      <div *ngIf=\"!!value || templates?.widgetValueTemplate\" class=\"fs-4 fw-semibold\">\n        <ng-container *ngTemplateOutlet=\"templates?.widgetValueTemplate || defaultWidgetValueTemplate\"></ng-container>\n      </div>\n      <div *ngIf=\"!!title || templates?.widgetTitleTemplate\">\n        <ng-container *ngTemplateOutlet=\"templates?.widgetTitleTemplate || defaultWidgetTitleTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"templates?.widgetActionTemplate || defaultWidgetActionTemplate\"></ng-container>\n  </c-card-body>\n  <ng-container *ngTemplateOutlet=\"templates?.widgetChartTemplate || defaultWidgetChartTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n  {{title}}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n  {{value}}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n  <ng-content select=\".chart-wrapper\"></ng-content>\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: WidgetStatAComponent, isStandalone: true, selector: "c-widget-stat-a", inputs: { color: "color", title: "title", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatA"], ngImport: i0, template: "<ng-container>\n  <c-card-body [ngClass]=\"bodyClasses\">\n    <div>\n      @if (!!value || templates?.widgetValueTemplate) {\n        <div class=\"fs-4 fw-semibold\">\n          <ng-container *ngTemplateOutlet=\"templates?.widgetValueTemplate || defaultWidgetValueTemplate\"></ng-container>\n        </div>\n      }\n      @if (!!title || templates?.widgetTitleTemplate) {\n        <div>\n          <ng-container *ngTemplateOutlet=\"templates?.widgetTitleTemplate || defaultWidgetTitleTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <ng-container *ngTemplateOutlet=\"templates?.widgetActionTemplate || defaultWidgetActionTemplate\"></ng-container>\n  </c-card-body>\n  <ng-container *ngTemplateOutlet=\"templates?.widgetChartTemplate || defaultWidgetChartTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n  {{ title }}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n  {{ value }}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n  <ng-content select=\".chart-wrapper\"></ng-content>\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { 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.1.0", ngImport: i0, type: WidgetStatAComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-a', exportAs: 'cWidgetStatA', imports: [CardBodyComponent, NgClass, NgIf, NgTemplateOutlet], standalone: true, template: "<ng-container>\n  <c-card-body [ngClass]=\"bodyClasses\">\n    <div>\n      <div *ngIf=\"!!value || templates?.widgetValueTemplate\" class=\"fs-4 fw-semibold\">\n        <ng-container *ngTemplateOutlet=\"templates?.widgetValueTemplate || defaultWidgetValueTemplate\"></ng-container>\n      </div>\n      <div *ngIf=\"!!title || templates?.widgetTitleTemplate\">\n        <ng-container *ngTemplateOutlet=\"templates?.widgetTitleTemplate || defaultWidgetTitleTemplate\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"templates?.widgetActionTemplate || defaultWidgetActionTemplate\"></ng-container>\n  </c-card-body>\n  <ng-container *ngTemplateOutlet=\"templates?.widgetChartTemplate || defaultWidgetChartTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n  {{title}}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n  {{value}}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n  <ng-content select=\".chart-wrapper\"></ng-content>\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'c-widget-stat-a', exportAs: 'cWidgetStatA', imports: [CardBodyComponent, NgClass, NgTemplateOutlet], standalone: true, template: "<ng-container>\n  <c-card-body [ngClass]=\"bodyClasses\">\n    <div>\n      @if (!!value || templates?.widgetValueTemplate) {\n        <div class=\"fs-4 fw-semibold\">\n          <ng-container *ngTemplateOutlet=\"templates?.widgetValueTemplate || defaultWidgetValueTemplate\"></ng-container>\n        </div>\n      }\n      @if (!!title || templates?.widgetTitleTemplate) {\n        <div>\n          <ng-container *ngTemplateOutlet=\"templates?.widgetTitleTemplate || defaultWidgetTitleTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <ng-container *ngTemplateOutlet=\"templates?.widgetActionTemplate || defaultWidgetActionTemplate\"></ng-container>\n  </c-card-body>\n  <ng-container *ngTemplateOutlet=\"templates?.widgetChartTemplate || defaultWidgetChartTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n  {{ title }}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n  {{ value }}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n  <ng-content select=\".chart-wrapper\"></ng-content>\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], title: [{
@@ -17220,11 +17170,11 @@ class WidgetStatBComponent extends CardComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatBComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.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  <div *ngIf=\"!!value\" class=\"fs-4 fw-semibold\">{{value}}</div>\n  <div *ngIf=\"!!title\">{{title}}</div>\n  <ng-content></ng-content>\n  <small *ngIf=\"text\" [ngClass]=\"inverse ? 'text-white text-opacity-75' : 'text-body-secondary'\">\n    {{text}}\n  </small>\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: WidgetStatBComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-b', exportAs: 'cWidgetStatB', standalone: true, imports: [CardBodyComponent, NgIf, NgClass], template: "<c-card-body>\n  <div *ngIf=\"!!value\" class=\"fs-4 fw-semibold\">{{value}}</div>\n  <div *ngIf=\"!!title\">{{title}}</div>\n  <ng-content></ng-content>\n  <small *ngIf=\"text\" [ngClass]=\"inverse ? 'text-white text-opacity-75' : 'text-body-secondary'\">\n    {{text}}\n  </small>\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: [{
@@ -17271,7 +17221,7 @@ class WidgetStatCComponent extends CardComponent {
             'fs-4': !this.textColor,
             'fw-semibold': true,
             ...this.titleClasses,
-            'text-opacity-75': false,
+            'text-opacity-75': false
         };
     }
     get iconClasses() {
@@ -17287,11 +17237,11 @@ class WidgetStatCComponent extends CardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatCComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n  <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n  </div>\n  <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n    {{ value }}\n  </div>\n  <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n    {{ title }}\n  </div>\n  <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n  </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "17.0.0", version: "17.1.0", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n  @if (icon || templates?.widgetIconTemplate) {\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value) {\n    <div [ngClass]=\"valueClasses\">\n      {{ value }}\n    </div>\n  }\n  @if (!!title) {\n    <div [ngClass]=\"titleClasses\">\n      {{ title }}\n    </div>\n  }\n  @if (templates?.widgetProgressTemplate) {\n    <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { 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.1.0", ngImport: i0, type: WidgetStatCComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet], template: "<c-card-body>\n  <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n  </div>\n  <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n    {{ value }}\n  </div>\n  <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n    {{ title }}\n  </div>\n  <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n  </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n" }]
+            args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgClass, NgTemplateOutlet], template: "<c-card-body>\n  @if (icon || templates?.widgetIconTemplate) {\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n    </div>\n  }\n  @if (!!value) {\n    <div [ngClass]=\"valueClasses\">\n      {{ value }}\n    </div>\n  }\n  @if (!!title) {\n    <div [ngClass]=\"titleClasses\">\n      {{ title }}\n    </div>\n  }\n  @if (templates?.widgetProgressTemplate) {\n    <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n  }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n  {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n  <ng-content />\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], title: [{
@@ -17326,11 +17276,11 @@ class WidgetStatDComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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></ng-content>\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  <ng-template [ngForOf]=\"values\" let-i=\"index\" let-item ngFor>\n    <div *ngIf=\"i % 2 !== 0\" class=\"vr\"></div>\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  </ng-template>\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"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.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.1.0", ngImport: i0, type: WidgetStatDComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-d', exportAs: 'cWidgetStatD', standalone: true, imports: [CardHeaderComponent, CardBodyComponent, ColComponent, RowDirective, NgClass, NgForOf, NgIf], template: "<c-card-header [ngClass]=\"headerClasses\">\n  <ng-content></ng-content>\n</c-card-header>\n<c-card-body cRow class=\"text-center\">\n  <ng-template [ngForOf]=\"values\" let-i=\"index\" let-item ngFor>\n    <div *ngIf=\"i % 2 !== 0\" class=\"vr\"></div>\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  </ng-template>\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: [{
@@ -17354,11 +17304,11 @@ class WidgetStatEComponent extends CardComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatEComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: WidgetStatEComponent, isStandalone: true, selector: "c-widget-stat-e", inputs: { title: "title", value: "value" }, exportAs: ["cWidgetStatE"], usesInheritance: true, ngImport: i0, template: "<c-card-body class=\"text-center\">\n  <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">{{title}}</div>\n  <div *ngIf=\"!!value\" class=\"fs-6 fw-semibold py-3\">{{value}}</div>\n  <ng-content></ng-content>\n</c-card-body>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: WidgetStatEComponent, isStandalone: true, selector: "c-widget-stat-e", inputs: { title: "title", value: "value" }, exportAs: ["cWidgetStatE"], usesInheritance: true, ngImport: i0, template: "<c-card-body class=\"text-center\">\n  @if (!!title) {\n    <div [ngClass]=\"titleClasses\">{{ title }}</div>\n  }\n  @if (!!value) {\n    <div class=\"fs-6 fw-semibold py-3\">{{ value }}</div>\n  }\n  <ng-content />\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.1.0", ngImport: i0, type: WidgetStatEComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-e', exportAs: 'cWidgetStatE', standalone: true, imports: [CardBodyComponent, NgIf, NgClass], template: "<c-card-body class=\"text-center\">\n  <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">{{title}}</div>\n  <div *ngIf=\"!!value\" class=\"fs-6 fw-semibold py-3\">{{value}}</div>\n  <ng-content></ng-content>\n</c-card-body>\n" }]
+            args: [{ selector: 'c-widget-stat-e', exportAs: 'cWidgetStatE', standalone: true, imports: [CardBodyComponent, NgClass], template: "<c-card-body class=\"text-center\">\n  @if (!!title) {\n    <div [ngClass]=\"titleClasses\">{{ title }}</div>\n  }\n  @if (!!value) {\n    <div class=\"fs-6 fw-semibold py-3\">{{ value }}</div>\n  }\n  <ng-content />\n</c-card-body>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], value: [{
@@ -17417,11 +17367,11 @@ class WidgetStatFComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: WidgetStatFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: WidgetStatFComponent, isStandalone: true, selector: "c-widget-stat-f", inputs: { color: "color", textColor: "textColor", footer: "footer", icon: "icon", padding: ["padding", "padding", booleanAttribute], title: "title", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatB"], ngImport: i0, template: "<ng-container>\n  <c-card-body [ngClass]=\"cardBodyClasses\">\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n    </div>\n    <div>\n      <div [ngClass]=\"valueClasses\">{{value}}</div>\n      <div [ngClass]=\"titleClasses\">{{title}}</div>\n    </div>\n  </c-card-body>\n  <c-card-footer *ngIf=\"footer || templates?.widgetFooterTemplate\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetFooterTemplate || defaultFooterIconTemplate\"></ng-container>\n  </c-card-footer>\n</ng-container>\n\n<ng-template #defaultWidgetIconTemplate>\n  <span>{{icon}}</span>\n</ng-template>\n\n<ng-template #defaultFooterIconTemplate>\n  <span>{{footer}}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "component", type: CardFooterComponent, selector: "c-card-footer, [c-card-footer]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: WidgetStatFComponent, isStandalone: true, selector: "c-widget-stat-f", inputs: { color: "color", textColor: "textColor", footer: "footer", icon: "icon", padding: ["padding", "padding", booleanAttribute], title: "title", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatB"], ngImport: i0, template: "<ng-container>\n  <c-card-body [ngClass]=\"cardBodyClasses\">\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n    </div>\n    <div>\n      <div [ngClass]=\"valueClasses\">{{ value }}</div>\n      <div [ngClass]=\"titleClasses\">{{ title }}</div>\n    </div>\n  </c-card-body>\n  @if (footer || templates?.widgetFooterTemplate) {\n    <c-card-footer>\n      <ng-container *ngTemplateOutlet=\"templates?.widgetFooterTemplate || defaultFooterIconTemplate\"></ng-container>\n    </c-card-footer>\n  }\n</ng-container>\n\n<ng-template #defaultWidgetIconTemplate>\n  <span>{{ icon }}</span>\n</ng-template>\n\n<ng-template #defaultFooterIconTemplate>\n  <span>{{ footer }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "component", type: CardFooterComponent, selector: "c-card-footer, [c-card-footer]" }, { 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.1.0", ngImport: i0, type: WidgetStatFComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-widget-stat-f', exportAs: 'cWidgetStatB', standalone: true, imports: [CardBodyComponent, CardFooterComponent, NgClass, NgTemplateOutlet, NgIf], template: "<ng-container>\n  <c-card-body [ngClass]=\"cardBodyClasses\">\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n    </div>\n    <div>\n      <div [ngClass]=\"valueClasses\">{{value}}</div>\n      <div [ngClass]=\"titleClasses\">{{title}}</div>\n    </div>\n  </c-card-body>\n  <c-card-footer *ngIf=\"footer || templates?.widgetFooterTemplate\">\n    <ng-container *ngTemplateOutlet=\"templates?.widgetFooterTemplate || defaultFooterIconTemplate\"></ng-container>\n  </c-card-footer>\n</ng-container>\n\n<ng-template #defaultWidgetIconTemplate>\n  <span>{{icon}}</span>\n</ng-template>\n\n<ng-template #defaultFooterIconTemplate>\n  <span>{{footer}}</span>\n</ng-template>\n" }]
+            args: [{ selector: 'c-widget-stat-f', exportAs: 'cWidgetStatB', standalone: true, imports: [CardBodyComponent, CardFooterComponent, NgClass, NgTemplateOutlet], template: "<ng-container>\n  <c-card-body [ngClass]=\"cardBodyClasses\">\n    <div [ngClass]=\"iconClasses\">\n      <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n    </div>\n    <div>\n      <div [ngClass]=\"valueClasses\">{{ value }}</div>\n      <div [ngClass]=\"titleClasses\">{{ title }}</div>\n    </div>\n  </c-card-body>\n  @if (footer || templates?.widgetFooterTemplate) {\n    <c-card-footer>\n      <ng-container *ngTemplateOutlet=\"templates?.widgetFooterTemplate || defaultFooterIconTemplate\"></ng-container>\n    </c-card-footer>\n  }\n</ng-container>\n\n<ng-template #defaultWidgetIconTemplate>\n  <span>{{ icon }}</span>\n</ng-template>\n\n<ng-template #defaultFooterIconTemplate>\n  <span>{{ footer }}</span>\n</ng-template>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], textColor: [{