@coreui/angular-pro 4.5.28 → 4.5.30

package/fesm2022/coreui-angular-pro.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, inject, DestroyRef, ChangeDetectionStrategy, signal, computed, effect, PLATFORM_ID, TemplateRef, ViewContainerRef, numberAttribute } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, DestroyRef, ChangeDetectionStrategy, signal, computed, NgZone, effect, PLATFORM_ID, TemplateRef, ViewContainerRef, numberAttribute } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$2 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgClass, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, DOCUMENT, CommonModule, formatDate, I18nPluralPipe, isPlatformBrowser } from '@angular/common';
+import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, CommonModule, formatDate, I18nPluralPipe, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
+import { Subject, BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, tap, distinctUntilChanged, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
 import * as i1$3 from '@angular/forms';
@@ -15,7 +15,7 @@ import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsMod
 import { createPopper } from '@popperjs/core';
 import * as i1$4 from '@angular/cdk/layout';
 import * as i1$5 from '@angular/cdk/a11y';
-import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { FocusKeyManager, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { IconDirective } from '@coreui/icons-angular';
@@ -1069,6 +1069,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class BackdropService {
+    constructor() {
+        this.#backdropClick = new Subject();
+        this.backdropClick$ = this.#backdropClick.asObservable();
+        this.#document = inject(DOCUMENT);
+        this.#rendererFactory = inject(RendererFactory2);
+        this.#renderer = this.#rendererFactory.createRenderer(null, null);
+        this.scrollbarWidth = this.#scrollbarWidth;
+        this.#scrollBarVisible = true;
+    }
+    #backdropClick;
+    #document;
+    #rendererFactory;
+    #renderer;
+    #unListen;
+    get #scrollbarWidth() {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+        const documentWidth = this.#document.documentElement.clientWidth;
+        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        return `${scrollbarWidth}px`;
+    }
+    setBackdrop(type = 'modal') {
+        const backdropElement = this.#renderer.createElement('div');
+        this.#renderer.addClass(backdropElement, `${type}-backdrop`);
+        this.#renderer.addClass(backdropElement, 'fade');
+        this.#renderer.appendChild(this.#document.body, backdropElement);
+        this.#unListen = this.#renderer.listen(backdropElement, 'click', (e) => {
+            this.onClickHandler();
+        });
+        this.scrollbarWidth = this.#scrollbarWidth;
+        setTimeout(() => {
+            this.#renderer.addClass(backdropElement, 'show');
+            // this.hideScrollbar();
+        });
+        this.activeBackdrop = backdropElement;
+        return backdropElement;
+    }
+    clearBackdrop(backdropElement) {
+        if (backdropElement) {
+            this.#unListen();
+            this.#renderer.removeClass(backdropElement, 'show');
+            setTimeout(() => {
+                this.#renderer.removeChild(this.#document.body, backdropElement);
+                if (this.activeBackdrop === backdropElement) {
+                    this.resetScrollbar();
+                }
+                backdropElement = undefined;
+            }, 300);
+        }
+        return undefined;
+    }
+    get #isRTL() { return this.#document.documentElement.dir === 'rtl' || this.#document.body.dir === 'rtl'; }
+    #scrollBarVisible;
+    hideScrollbar() {
+        if (this.#scrollBarVisible) {
+            this.#renderer.setStyle(this.#document.body, 'overflow', 'hidden');
+            this.#renderer.setStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`, this.scrollbarWidth);
+            this.#scrollBarVisible = false;
+        }
+    }
+    resetScrollbar() {
+        this.#renderer.removeStyle(this.#document.body, 'overflow');
+        this.#renderer.removeStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`);
+        this.#scrollBarVisible = true;
+    }
+    onClickHandler() {
+        this.#backdropClick.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class BreadcrumbItemComponent {
     get ariaCurrent() {
         return this.active ? 'page' : null;
@@ -8416,12 +8494,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class MultiSelectOptionComponent {
     #destroyRef;
+    #ngZone;
     constructor(elementRef, changeDetectorRef, focusMonitor, multiSelectService) {
         this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
         this.#destroyRef = inject(DestroyRef);
+        this.#ngZone = inject(NgZone);
         /**
          * Option style
          * @type ('checkbox' | 'text')
@@ -8429,34 +8509,37 @@ class MultiSelectOptionComponent {
          */
         this.optionsStyle = this.multiSelectService.optionsStyle;
         this.#visible = signal(true);
-        this.#disabled = false;
+        /**
+         * Option disabled.
+         * @type boolean
+         * @default false
+         */
+        this.disabled = false;
         this.#selected = signal(undefined);
-        this.#selectedEffect = effect(() => {
-            const value = this.#value();
-            const selected = this.#selected();
-            if ((value !== undefined) && (selected !== undefined)) {
-                selected ? this.multiSelectService.selectionModel?.select(value) : this.multiSelectService.selectionModel?.deselect(value);
-                this.ariaSelected = selected;
-                this.selectedChange.emit(selected);
-                this.changeDetectorRef.markForCheck();
-            }
-        });
         /**
          * Emits option selected change
          * @type boolean
          */
         this.selectedChange = new EventEmitter();
         this.#value = signal(undefined);
-        this.hasContent = true;
+        this.hasContent = signal(true);
         this.#dropdownVisible = signal(false);
         this.#active = signal(false);
-        this.#activeEffect = effect(() => {
-            this.tabIndex = this.#active() && this.#visible() ? 0 : -1;
-        });
         this.#focused = false;
         this.focusChange = new EventEmitter();
-        this.#tabIndex = -1;
-        this.#ariaSelected = undefined;
+        this.#tabIndex = computed(() => {
+            return (this.#active() && this.#visible() ? 0 : -1);
+        });
+        this.#ariaSelected = computed(() => {
+            const value = this.#value();
+            const selected = this.#selected();
+            if ((value !== undefined) && (selected !== undefined)) {
+                selected ? this.multiSelectService.selectionModel?.select(value) : this.multiSelectService.selectionModel?.deselect(value);
+                this.selectedChange.emit(selected);
+                this.changeDetectorRef.markForCheck();
+            }
+            return selected;
+        });
     }
     /**
      * Option visible.
@@ -8464,24 +8547,12 @@ class MultiSelectOptionComponent {
      * @default true
      */
     set visible(value) {
-        this.#visible.set(coerceBooleanProperty(value));
+        this.#visible.set(value);
     }
     get visible() {
         return this.#visible();
     }
     #visible;
-    /**
-     * Option disabled.
-     * @type boolean
-     * @default false
-     */
-    set disabled(value) {
-        this.#disabled = coerceBooleanProperty(value);
-    }
-    get disabled() {
-        return this.#disabled;
-    }
-    #disabled;
     /**
      * Option selected.
      * @type boolean
@@ -8489,7 +8560,7 @@ class MultiSelectOptionComponent {
      */
     set selected(value) {
         if (value !== undefined) {
-            const selected = coerceBooleanProperty(value);
+            const selected = booleanAttribute(value);
             if (this.#selected() !== selected) {
                 this.#selected.set(selected);
                 if (this.value !== undefined) {
@@ -8502,7 +8573,6 @@ class MultiSelectOptionComponent {
         return this.#selected();
     }
     #selected;
-    #selectedEffect;
     /**
      * Option value.
      * @type string
@@ -8519,7 +8589,7 @@ class MultiSelectOptionComponent {
     #value;
     #dropdownVisible;
     set active(value) {
-        const active = coerceBooleanProperty(value) && this.#visible() && !this.disabled;
+        const active = value && this.#visible() && !this.disabled;
         if (this.#active() !== active) {
             this.#active.set(active);
         }
@@ -8528,7 +8598,6 @@ class MultiSelectOptionComponent {
         return this.#active() && this.#visible();
     }
     #active;
-    #activeEffect;
     #focused;
     get role() {
         return 'option';
@@ -8545,25 +8614,14 @@ class MultiSelectOptionComponent {
         };
     }
     get tabIndex() {
-        // return this.disabled || !this._active ? -1 : 0;
-        return (this.disabled || !this.#visible()) ? -1 : this.#tabIndex;
-    }
-    set tabIndex(tabindex) {
-        setTimeout(() => {
-            this.#tabIndex = tabindex;
-        });
+        return (this.disabled || !this.#visible()) ? -1 : this.#tabIndex();
     }
     #tabIndex;
     get ariaDisabled() {
         return this.disabled || null;
     }
     get ariaSelected() {
-        return this.#ariaSelected;
-    }
-    set ariaSelected(selected) {
-        setTimeout(() => {
-            this.#ariaSelected = selected || undefined;
-        });
+        return this.#ariaSelected() ?? false;
     }
     #ariaSelected;
     onKeyDown($event) {
@@ -8597,18 +8655,23 @@ class MultiSelectOptionComponent {
     }
     ngAfterViewInit() {
         this.setSubscriptions();
-        setTimeout(() => {
-            this.hasContent = !!this.contentDiv?.nativeElement.childNodes.length;
-            if (!this.hasContent) {
-                this.changeDetectorRef.markForCheck();
-            }
-        });
+        const hasContent = !!this.contentDiv?.nativeElement.childNodes.length;
+        if (!hasContent) {
+            this.#ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.hasContent.set(hasContent);
+                    // this.#ngZone.run(() => {
+                    //   this.changeDetectorRef.markForCheck();
+                    // });
+                });
+            });
+        }
         if (this.text === undefined) {
             const innerText = this.elementRef.nativeElement.textContent.trim() || this.elementRef.nativeElement.innerText.trim();
-            this.text = innerText || this.value?.trim() || '...';
+            this.text = innerText || this.value?.trim();
         }
         if (this.label === undefined) {
-            this.label = this.text?.trim() || '...';
+            this.label = this.text?.trim();
         }
         if (this.value === undefined) {
             this.value = this.label?.trim() || '...';
@@ -8657,11 +8720,11 @@ class MultiSelectOptionComponent {
         return (this.#selected() || this.multiSelectService.selectionModel?.isSelected(value)) ?? false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectOptionComponent, isStandalone: true, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", text: "text", visible: "visible", disabled: "disabled", selected: "selected", value: "value", active: "active", role: "role" }, outputs: { selectedChange: "selectedChange", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocus()", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "role": "this.role", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], exportAs: ["cMultiSelectOption"], ngImport: i0, template: "<div #contentDiv>\n  <ng-content></ng-content>\n</div>\n<div *ngIf=\"!hasContent\">\n  {{text ?? label ?? value}}\n</div>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: MultiSelectOptionComponent, isStandalone: true, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", text: "text", visible: ["visible", "visible", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: "selected", value: "value", active: ["active", "active", booleanAttribute], role: "role" }, outputs: { selectedChange: "selectedChange", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocus()", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "role": "this.role", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], exportAs: ["cMultiSelectOption"], ngImport: i0, template: "<div #contentDiv>\n  <ng-content></ng-content>\n</div>\n<div *ngIf=\"!hasContent()\">\n  {{text ?? label ?? value}}\n</div>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-option', exportAs: 'cMultiSelectOption', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div #contentDiv>\n  <ng-content></ng-content>\n</div>\n<div *ngIf=\"!hasContent\">\n  {{text ?? label ?? value}}\n</div>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"] }]
+            args: [{ selector: 'c-multi-select-option', exportAs: 'cMultiSelectOption', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div #contentDiv>\n  <ng-content></ng-content>\n</div>\n<div *ngIf=\"!hasContent()\">\n  {{text ?? label ?? value}}\n</div>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
                 type: Input
             }], label: [{
@@ -8669,9 +8732,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], text: [{
                 type: Input
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selected: [{
                 type: Input
             }], selectedChange: [{
@@ -8682,7 +8747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: ViewChild,
                 args: ['contentDiv']
             }], active: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], focusChange: [{
                 type: Output
             }], role: [{
@@ -8824,11 +8890,11 @@ class MultiSelectTagComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTagComponent, isStandalone: true, selector: "c-multi-select-tag", inputs: { option: "option", disabled: "disabled", label: "label", value: "value" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTagComponent, isStandalone: true, selector: "c-multi-select-tag", inputs: { option: "option", disabled: "disabled", label: "label", value: "value" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-tag', standalone: true, imports: [NgIf, AsyncPipe], template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
+            args: [{ selector: 'c-multi-select-tag', standalone: true, imports: [NgIf, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
         }], ctorParameters: function () { return [{ type: MultiSelectService }]; }, propDecorators: { option: [{
                 type: Input
             }], disabled: [{
@@ -9445,9 +9511,9 @@ class MultiSelectComponent {
             this.setFocus('program', 'selectionModel.changed (single)');
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
-        this.#optionsReady$.pipe(filter(() => !this.virtualScroller), takeUntilDestroyed(this.destroyRef), delay(0), tap(() => {
+        this.#optionsReady$.pipe(filter(() => !this.virtualScroller), delay(0), tap(() => {
             this.setFocusKeyManager([...this.multiSelectOptionsContent, ...this.multiSelectOptionsView]);
-        })).subscribe();
+        }), takeUntilDestroyed(this.destroyRef)).subscribe();
         this.multiSelectService.selectionModel.changed
             .pipe(tap(change => {
             const { added } = { ...change };
@@ -9872,9 +9938,9 @@ class MultiSelectComponent {
     setListKeyManager() {
         // run once on multiSelectOptionsContent first set
         this.multiSelectOptionsContent.changes
-            .pipe(filter((changes) => this.virtualScroller), take(1), takeUntilDestroyed(this.destroyRef), tap(() => {
+            .pipe(filter((changes) => this.virtualScroller), take(1), tap(() => {
             this.setFocusKeyManager(this.multiSelectOptionsContent);
-        }))
+        }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     setFocusKeyManager(focusableOptions) {
@@ -10672,67 +10738,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class BackdropService {
-    constructor(document, rendererFactory) {
-        this.document = document;
-        this.rendererFactory = rendererFactory;
-        this.backdropClick = new Subject();
-        this.backdropClick$ = this.backdropClick.asObservable();
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-    get scrollbarWidth() {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-        const documentWidth = this.document.documentElement.clientWidth;
-        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
-        return `${scrollbarWidth}px`;
-    }
-    setBackdrop(type = 'modal') {
-        const backdropElement = this.renderer.createElement('div');
-        this.renderer.addClass(backdropElement, `${type}-backdrop`);
-        this.renderer.addClass(backdropElement, 'fade');
-        this.renderer.appendChild(this.document.body, backdropElement);
-        this.unListen = this.renderer.listen(backdropElement, 'click', (e) => {
-            this.onClickHandler();
-        });
-        setTimeout(() => {
-            this.renderer.addClass(backdropElement, 'show');
-        });
-        return backdropElement;
-    }
-    clearBackdrop(backdrop) {
-        if (backdrop) {
-            this.unListen();
-            this.renderer.removeClass(backdrop, 'show');
-            setTimeout(() => {
-                this.renderer.removeChild(this.document.body, backdrop);
-                backdrop = undefined;
-            }, 300);
-        }
-        return backdrop;
-    }
-    onClickHandler() {
-        this.backdropClick.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }]; } });
-
 class ModalComponent {
+    #destroyRef;
+    #focusMonitor;
     constructor(document, renderer, hostElement, modalService, backdropService) {
         this.document = document;
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.modalService = modalService;
         this.backdropService = backdropService;
+        this.#destroyRef = inject(DestroyRef);
+        this.#focusMonitor = inject(FocusMonitor);
         /**
          * Align the modal in the center or top of the screen.
          * @type {'top' | 'center'}
@@ -10761,46 +10777,72 @@ class ModalComponent {
          * @default 'dialog'
          */
         this.role = 'dialog';
+        this.#ariaModal = null;
         /**
-         * Set aria-modal html attr for modal. [docs]
+         * Create a scrollable modal that allows scrolling the modal body.
          * @type boolean
-         * @default true
          */
-        this.ariaModal = true;
-        this._scrollable = false;
+        this.scrollable = false;
+        this.#visible = signal(false);
+        this.#activeElement = null;
+        this.#visibleEffect = effect(() => {
+            if (this.#visible() && this.#afterViewInit()) {
+                this.#activeElement = this.document.activeElement;
+                // this.#activeElement?.blur();
+                setTimeout(() => {
+                    const focusable = this.modalContentRef.nativeElement.querySelectorAll('[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])');
+                    this.#focusMonitor.focusVia(focusable[0], 'keyboard');
+                });
+            }
+            else {
+                if (this.document.contains(this.#activeElement)) {
+                    setTimeout(() => {
+                        this.#activeElement?.focus();
+                        this.#activeElement = null;
+                    });
+                }
+            }
+        });
         /**
          * Event triggered on modal dismiss.
          */
         this.visibleChange = new EventEmitter();
         this._show = true;
         this.mouseDownTarget = null;
+        this.#afterViewInit = signal(false);
     }
     /**
-     * Create a scrollable modal that allows scrolling the modal body.
+     * Set aria-modal html attr for modal. [docs]
      * @type boolean
+     * @default null
      */
-    set scrollable(value) {
-        this._scrollable = coerceBooleanProperty(value);
+    set ariaModal(value) {
+        this.#ariaModal = value;
     }
-    get scrollable() {
-        return this._scrollable;
+    get ariaModal() {
+        return this.visible || this.#ariaModal ? true : null;
     }
+    ;
+    #ariaModal;
     /**
      * Toggle the visibility of modal component.
      * @type boolean
      */
     set visible(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (this._visible !== newValue) {
-            this._visible = newValue;
-            this.setBackdrop(this.backdrop !== false && newValue);
-            this.setBodyStyles(newValue);
-            this.visibleChange.emit(newValue);
+        if (this.#visible() !== value) {
+            this.#visible.set(value);
+            this.setBackdrop(this.backdrop !== false && value);
+            this.setBodyStyles(value);
+            this.visibleChange.emit(value);
         }
     }
     get visible() {
-        return this._visible;
+        return this.#visible();
     }
+    #visible;
+    #activeElement;
+    #visibleEffect;
+    #activeBackdrop;
     // private inBoundingClientRect!: boolean;
     get hostClasses() {
         return {
@@ -10826,10 +10868,8 @@ class ModalComponent {
         this._show = value;
     }
     animateStart(event) {
-        const scrollbarWidth = this.backdropService.scrollbarWidth;
         if (event.toState === 'visible') {
-            this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-            this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+            this.backdropService.hideScrollbar();
             this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'block');
         }
         else {
@@ -10842,8 +10882,6 @@ class ModalComponent {
         setTimeout(() => {
             if (event.toState === 'hidden') {
                 this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'none');
-                this.renderer.removeStyle(this.document.body, 'overflow');
-                this.renderer.removeStyle(this.document.body, 'padding-right');
             }
         });
         this.show = this.visible;
@@ -10878,36 +10916,32 @@ class ModalComponent {
     ngOnInit() {
         this.stateToggleSubscribe();
     }
+    #afterViewInit;
+    ngAfterViewInit() {
+        this.#afterViewInit.set(true);
+    }
     ngOnDestroy() {
         this.modalService.toggle({ show: false, modal: this });
-        this.stateToggleSubscribe(false);
+        this.#afterViewInit.set(false);
     }
-    stateToggleSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.stateToggleSubscription = this.modalService.modalState$.subscribe((action) => {
-                if (this === action.modal || this.id === action.id) {
-                    if ('show' in action) {
-                        this.visible = action?.show === 'toggle' ? !this.visible : action.show;
-                    }
+    stateToggleSubscribe() {
+        this.modalService.modalState$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((action) => {
+            if (this === action.modal || this.id === action.id) {
+                if ('show' in action) {
+                    this.visible = action?.show === 'toggle' ? !this.visible : action.show;
                 }
-                else {
-                    if (this.visible) {
-                        this.visible = false;
-                    }
+            }
+            else {
+                if (this.visible) {
+                    this.visible = false;
                 }
-            });
-        }
-        else {
-            this.stateToggleSubscription?.unsubscribe();
-        }
+            }
+        });
     }
     setBackdrop(setBackdrop) {
-        if (setBackdrop) {
-            this.activeBackdrop = this.backdropService.setBackdrop('modal');
-        }
-        else {
-            this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
-        }
+        this.#activeBackdrop = setBackdrop ? this.backdropService.setBackdrop('modal') : this.backdropService.clearBackdrop(this.#activeBackdrop);
     }
     setBodyStyles(open) {
         if (open) {
@@ -10930,7 +10964,7 @@ class ModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ModalService }, { token: BackdropService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keyup": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: ["keyboard", "keyboard", booleanAttribute], id: "id", size: "size", transition: ["transition", "transition", booleanAttribute], role: "role", ariaModal: "ariaModal", scrollable: ["scrollable", "scrollable", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keyup": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }, { propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // display: 'block'
@@ -10938,7 +10972,7 @@ class ModalComponent {
                 state('hidden', style({
                 // display: 'none'
                 })),
-                transition('visible <=> *', [animate('300ms')])
+                transition('visible <=> *', [animate('150ms')])
             ])
         ] }); }
 }
@@ -10952,9 +10986,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             state('hidden', style({
                             // display: 'none'
                             })),
-                            transition('visible <=> *', [animate('300ms')])
+                            transition('visible <=> *', [animate('150ms')])
                         ])
-                    ], exportAs: 'cModal', standalone: true, imports: [ModalDialogComponent, ModalContentComponent, A11yModule], template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
+                    ], exportAs: 'cModal', standalone: true, imports: [ModalDialogComponent, ModalContentComponent, A11yModule], template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -10965,13 +10999,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], fullscreen: [{
                 type: Input
             }], keyboard: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], id: [{
                 type: Input
             }], size: [{
                 type: Input
             }], transition: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], role: [{
                 type: Input
             }, {
@@ -10983,14 +11019,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding,
                 args: ['attr.aria-modal']
             }], scrollable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visibleChange: [{
                 type: Output
             }], modalContent: [{
                 type: ViewChild,
                 args: [ModalContentComponent, { read: ElementRef }]
+            }], modalContentRef: [{
+                type: ViewChild,
+                args: ['modalContentRef', { read: ElementRef }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -11086,6 +11127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let nextId = 0;
 class OffcanvasComponent {
+    #destroyRef;
     constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService, breakpointObserver) {
         this.document = document;
         this.platformId = platformId;
@@ -11094,6 +11136,7 @@ class OffcanvasComponent {
         this.offcanvasService = offcanvasService;
         this.backdropService = backdropService;
         this.breakpointObserver = breakpointObserver;
+        this.#destroyRef = inject(DestroyRef);
         /**
          * Apply a backdrop on body while offcanvas is open.
          * @type boolean | 'static'
@@ -11132,43 +11175,31 @@ class OffcanvasComponent {
          * @default true
          */
         this.ariaModal = true;
+        this.#show = false;
+        /**
+         * Allow body scrolling while offcanvas is visible.
+         * @type boolean
+         * @default false
+         */
+        this.scroll = false;
+        this.#visible = false;
         /**
          * Event triggered on visible change.
+         * @type EventEmitter<boolean>
          */
         this.visibleChange = new EventEmitter();
-        this.#scroll = false;
-        this.#visible = false;
-        this.#show = false;
     }
-    #scroll;
-    #visible;
     #activeBackdrop;
-    #scrollbarWidth;
-    #stateToggleSubscription;
     #backdropClickSubscription;
     #layoutChangeSubscription;
     #show;
-    get scroll() {
-        return this.#scroll;
-    }
-    /**
-     * Allow body scrolling while offcanvas is visible.
-     * @type boolean
-     * @default false
-     */
-    set scroll(value) {
-        this.#scroll = coerceBooleanProperty(value);
-    }
-    get visible() {
-        return this.#visible;
-    }
     /**
      * Toggle the visibility of offcanvas component.
      * @type boolean
      * @default false
      */
     set visible(value) {
-        this.#visible = coerceBooleanProperty(value);
+        this.#visible = value;
         if (this.#visible) {
             this.setBackdrop(this.backdrop);
             this.setFocus();
@@ -11179,6 +11210,10 @@ class OffcanvasComponent {
         this.layoutChangeSubscribe(this.#visible);
         this.visibleChange.emit(value);
     }
+    get visible() {
+        return this.#visible;
+    }
+    #visible;
     get hostClasses() {
         return {
             offcanvas: typeof this.responsive === 'boolean',
@@ -11212,11 +11247,9 @@ class OffcanvasComponent {
         return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
     }
     animateStart(event) {
-        const scrollbarWidth = this.#scrollbarWidth;
         if (event.toState === 'visible') {
             if (!this.scroll) {
-                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-                this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+                this.backdropService.hideScrollbar();
             }
             this.renderer.addClass(this.hostElement.nativeElement, 'showing');
         }
@@ -11246,7 +11279,6 @@ class OffcanvasComponent {
         }
     }
     ngOnInit() {
-        this.#scrollbarWidth = this.backdropService.scrollbarWidth;
         this.stateToggleSubscribe();
         setTimeout(() => {
             // hotfix to avoid offcanvas flicker on the first render
@@ -11255,33 +11287,30 @@ class OffcanvasComponent {
     }
     ngOnDestroy() {
         this.offcanvasService.toggle({ show: false, id: this.id });
-        this.stateToggleSubscribe(false);
     }
     setFocus() {
         if (isPlatformBrowser(this.platformId)) {
             setTimeout(() => this.hostElement.nativeElement.focus());
         }
     }
-    stateToggleSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.#stateToggleSubscription =
-                this.offcanvasService.offcanvasState$.subscribe((action) => {
-                    if (this === action.offcanvas || this.id === action.id) {
-                        if ('show' in action) {
-                            this.visible =
-                                action?.show === 'toggle' ? !this.visible : action.show;
-                        }
-                    }
-                });
-        }
-        else {
-            this.#stateToggleSubscription?.unsubscribe();
-        }
+    stateToggleSubscribe() {
+        this.offcanvasService.offcanvasState$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((action) => {
+            if (this === action.offcanvas || this.id === action.id) {
+                if ('show' in action) {
+                    this.visible =
+                        action?.show === 'toggle' ? !this.visible : action.show;
+                }
+            }
+        });
     }
     backdropClickSubscribe(subscribe = true) {
         if (subscribe) {
             this.#backdropClickSubscription =
-                this.backdropService.backdropClick$.subscribe((clicked) => {
+                this.backdropService.backdropClick$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe((clicked) => {
                     this.offcanvasService.toggle({ show: !clicked, id: this.id });
                 });
         }
@@ -11290,7 +11319,6 @@ class OffcanvasComponent {
         }
     }
     setBackdrop(setBackdrop) {
-        this.#scrollbarWidth = this.backdropService.scrollbarWidth;
         this.#activeBackdrop = !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
             : this.backdropService.clearBackdrop(this.#activeBackdrop);
         setBackdrop === true ? this.backdropClickSubscribe()
@@ -11304,7 +11332,7 @@ class OffcanvasComponent {
             const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
             const layoutChanges = this.breakpointObserver.observe([responsiveBreakpoint]);
             this.#layoutChangeSubscription = layoutChanges
-                .pipe(filter(breakpointState => !breakpointState.matches))
+                .pipe(filter(breakpointState => !breakpointState.matches), takeUntilDestroyed(this.#destroyRef))
                 .subscribe((breakpointState) => {
                 this.visible = breakpointState.matches;
             });
@@ -11314,7 +11342,7 @@ class OffcanvasComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: "ariaModal", scroll: "scroll", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -11348,7 +11376,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }, { type: i1$4.BreakpointObserver }]; }, propDecorators: { backdrop: [{
                 type: Input
             }], keyboard: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], placement: [{
                 type: Input
             }], responsive: [{
@@ -11361,16 +11390,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaModal: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: ['attr.aria-modal']
-            }], visibleChange: [{
-                type: Output
             }], scroll: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], visibleChange: [{
+                type: Output
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -14199,6 +14231,7 @@ class SmartTableHeadComponent {
         this.#selectAll = true;
         this.#selectedAll = false;
         this.#columnFilterTemplates = {};
+        this.#columnLabelTemplates = {};
         this.#summaryRowTemplate = null;
         // todo
         // @Input() sortingIcon?: string | TemplateRef<any>;
@@ -14239,6 +14272,15 @@ class SmartTableHeadComponent {
     }
     ;
     #columnFilterTemplates;
+    set columnLabelTemplates(value) {
+        this.#columnLabelTemplates = { ...value };
+    }
+    ;
+    get columnLabelTemplates() {
+        return this.#columnLabelTemplates;
+    }
+    ;
+    #columnLabelTemplates;
     set summaryRowTemplate(value) {
         this.#summaryRowTemplate = value;
     }
@@ -14335,12 +14377,18 @@ class SmartTableHeadComponent {
     getColumnFilter(column) {
         return `columnFilter_${this.columnKey(column) ?? '_undefined'}`;
     }
+    getColumnLabel(column) {
+        if (typeof column === 'object' && column._labelTemplateId) {
+            return `columnLabel_${column._labelTemplateId ?? '_undefined'}`;
+        }
+        return `columnLabel_${this.columnKey(column) ?? '_undefined'}`;
+    }
     get columnFilterEvent() {
         return (typeof this.columnFilter === 'object' && this.columnFilter.lazy) ? 'change' : 'input';
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates", 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<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    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <div class=\"d-inline\">{{ column | columnLabel }}</div>\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]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", 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<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    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\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]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
@@ -14359,7 +14407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgSwitchDefault,
                         NgTemplateOutlet,
                         SmartTableColumnLabelPipe
-                    ], template: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\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    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <div class=\"d-inline\">{{ column | columnLabel }}</div>\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]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n  </th>\n</tr>\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: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\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    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\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]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
                 type: Input
             }], columnFilterState: [{
@@ -14380,6 +14428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columnFilterTemplates: [{
                 type: Input
+            }], columnLabelTemplates: [{
+                type: Input
             }], summaryRowTemplate: [{
                 type: Input
             }], columnFilterStateChange: [{
@@ -14476,6 +14526,7 @@ class SmartTableComponent {
         this.tableFilterValueChange = new EventEmitter();
         this.templates = { tableDetails: null, tableData: null };
         this.columnFilterTemplates = {};
+        this.columnLabelTemplates = {};
         this.summaryRowTemplate = null;
         this._columnFiltered = [];
         this.itemsDiffer = this.iterableDiffers.find(this.items).create();
@@ -14610,6 +14661,10 @@ class SmartTableComponent {
                 this.columnFilterTemplates[child.id] = child.templateRef;
                 return;
             }
+            if (child.id.startsWith('columnLabel_')) {
+                this.columnLabelTemplates[child.id] = child.templateRef;
+                return;
+            }
             if (child.id === 'tableSummaryRow') {
                 this.summaryRowTemplate = child.templateRef;
                 return;
@@ -14617,6 +14672,7 @@ class SmartTableComponent {
             this.templates[child.id] = child.templateRef;
         });
         this.columnFilterTemplates = { ...this.columnFilterTemplates };
+        this.columnLabelTemplates = { ...this.columnLabelTemplates };
     }
     get selectedAll() {
         const selected = this.items.some((item) => item._selected === true);
@@ -14880,7 +14936,7 @@ class SmartTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", 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      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\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      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\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      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\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  ></c-element-cover>\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-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\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 #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n    [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\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", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates", "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: "14.0.0", version: "16.2.12", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", selectAll: "selectAll", 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      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\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      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\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      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\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  ></c-element-cover>\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-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\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 #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n    [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\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", "selectable", "selectAll", "selectedAll", "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: "16.2.12", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
@@ -14904,7 +14960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableActiveDirective,
                         TableColorDirective,
                         TableDirective
-                    ], 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      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\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      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\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      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\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  ></c-element-cover>\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-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\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 #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n    [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\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: "<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      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\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      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\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      [columns]=\"columns\"\n      [selectAll]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n      [columnLabelTemplates]=\"columnLabelTemplates\"\n      [summaryRowTemplate]=\"summaryRowTemplate\"\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  ></c-element-cover>\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-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\" />\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 #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n    [cHtmlAttr]=\"tableDataCellProps(item, columnName)?.['_attributes'] ?? undefined\"\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"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{
@@ -16421,5 +16477,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular-pro.mjs.map