@coreui/angular-pro 5.4.7 → 5.4.8

package/fesm2022/coreui-angular-pro.mjs

@@ -5637,12 +5637,11 @@ class FormCheckComponent {
         this.sizing = input();
         /**
          * Render a toggle switch on for checkbox.
-         * @type boolean
+         * @returns boolean
          * @default false
          */
         this.switch = input(false, { transform: booleanAttribute });
         this.formCheckLabel = contentChild(FormCheckLabelDirective);
-        this.formCheckClass = computed(() => !!this.formCheckLabel());
         this.hostClasses = computed(() => {
             const sizing = this.sizing();
             const isSwitch = this.switch();
@@ -5682,18 +5681,17 @@ class FormCheckInputDirective {
          * @default false
          */
         this.indeterminateInput = input(false, { transform: booleanAttribute, alias: 'indeterminate' });
+        this.#indeterminate = linkedSignal(this.indeterminateInput);
         this.#indeterminateEffect = effect(() => {
-            const indeterminate = this.indeterminateInput();
-            if (untracked(this.#indeterminate) !== indeterminate) {
+            if (this.type() === 'checkbox') {
+                const indeterminate = this.#indeterminate();
                 const htmlInputElement = this.#hostElement.nativeElement;
                 if (indeterminate) {
                     this.#renderer.setProperty(htmlInputElement, 'checked', false);
                 }
                 this.#renderer.setProperty(htmlInputElement, 'indeterminate', indeterminate);
-                this.#indeterminate.set(indeterminate);
             }
         });
-        this.#indeterminate = signal(false);
         /**
          * Set component validation state to valid.
          * @default undefined
@@ -5707,32 +5705,19 @@ class FormCheckInputDirective {
                 'is-invalid': valid === false
             };
         });
-        /**
-         * Set component checked state.
-         * @default false
-         */
-        this.checkedInput = input(false, { transform: booleanAttribute, alias: 'checked' });
-        this.#checkedEffect = effect(() => {
-            const checked = this.checkedInput();
-            const htmlInputElement = this.#hostElement?.nativeElement;
-            if (htmlInputElement) {
-                this.#renderer.setProperty(htmlInputElement, 'checked', checked);
-            }
-        });
     }
     #renderer;
     #hostElement;
+    #indeterminate;
     #indeterminateEffect;
     get indeterminate() {
         return this.#indeterminate();
     }
-    #indeterminate;
-    #checkedEffect;
     get checked() {
         return this.#hostElement?.nativeElement?.checked;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormCheckInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, indeterminateInput: { classPropertyName: "indeterminateInput", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.type": "type()" }, classAttribute: "form-check-input" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, indeterminateInput: { classPropertyName: "indeterminateInput", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.type": "type()" }, classAttribute: "form-check-input" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormCheckInputDirective, decorators: [{
             type: Directive,
@@ -13178,20 +13163,20 @@ class RatingComponent {
         });
         /**
          * Enables the clearing upon clicking the selected item again.
-         * @type: boolean
+         * @returns: boolean
          * @default: false
          */
         this.allowClear = input(false, { transform: booleanAttribute });
         /**
          * Toggle the disabled state for the component.
-         * @type: boolean
+         * @return: boolean
          * @default: false
          */
         this.disabled = input(false, { transform: booleanAttribute });
         this.#disabledState = signal(this.disabled());
         /**
          * If enabled, only the currently selected icon will be visibly highlighted.
-         * @type: boolean
+         * @returns: boolean
          * @default: false
          */
         this.highlightOnlySelected = input(false, { transform: booleanAttribute });
@@ -13205,13 +13190,13 @@ class RatingComponent {
         /**
          * Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating,
          * such as out of 5 stars, 10 stars, etc.
-         * @type: number
+         * @returns: number
          * @default: 5
          */
         this.itemCount = input(5, { transform: numberAttribute });
         /**
          * Minimum increment value change allowed.
-         * @type: number
+         * @returns: number
          * @default: 1
          */
         this.precision = input(1, { transform: numberAttribute });
@@ -13223,7 +13208,7 @@ class RatingComponent {
         // readonly precisionClick = input(false, { transform: booleanAttribute });
         /**
          * Toggle the readonly state for the component.
-         * @type: boolean
+         * @returns: boolean
          * @default: false
          */
         this.readOnly = input(false, { transform: booleanAttribute });
@@ -15987,7 +15972,7 @@ class SmartTableHeadComponent {
         return sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, columnFilterStateInput: { classPropertyName: "columnFilterStateInput", publicName: "columnFilterState", isSignal: true, isRequired: false, transformFunction: null }, columnSorter: { classPropertyName: "columnSorter", publicName: "columnSorter", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, columnGroupsInput: { classPropertyName: "columnGroupsInput", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectedAll: { classPropertyName: "selectedAll", publicName: "selectedAll", isSignal: false, isRequired: false, transformFunction: null }, showGroups: { classPropertyName: "showGroups", publicName: "showGroups", isSignal: true, isRequired: false, transformFunction: null }, sorterValue: { classPropertyName: "sorterValue", publicName: "sorterValue", isSignal: true, isRequired: false, transformFunction: null }, columnFilterTemplates: { classPropertyName: "columnFilterTemplates", publicName: "columnFilterTemplates", isSignal: false, isRequired: false, transformFunction: null }, columnLabelTemplates: { classPropertyName: "columnLabelTemplates", publicName: "columnLabelTemplates", isSignal: false, isRequired: false, transformFunction: null }, summaryRowTemplate: { classPropertyName: "summaryRowTemplate", publicName: "summaryRowTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@let colSorter = columnSorter();\n@let selectableRows = selectable();\n\n@if (component() === 'tfoot') {\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n}\n@if (showGroups()) {\n  @for (row of columnGroups(); track row; let i = $index) {\n    <tr>\n      @if (selectableRows) {\n        <th></th>\n      }\n      @for (cell of row; track cell; let i = $index) {\n        <th [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n            [cTableColor]=\"tableHeaderCellColor(cell)\"\n            [colSpan]=\"cell.colspan ?? 1\"\n            [ngStyle]=\"getTableHeaderCellStyles(cell, colSorter)\"\n        >\n          {{ cell.label }}\n        </th>\n      }\n    </tr>\n  }\n}\n\n<tr>\n  @if (selectableRows) {\n    <th>\n      <input\n        (change)=\"handleSelectAllChecked($event)\"\n        [checked]=\"selectedAll === true\"\n        [disabled]=\"!selectAll()\"\n        [indeterminate]=\"indeterminate$ | async\"\n        autocomplete=\"off\"\n        cFormCheckInput\n        type=\"checkbox\"\n      >\n    </th>\n  }\n  @for (column of columns; track column; let i = $index) {\n    <th\n      (click)=\"handleSortClick(column, i)\"\n      (keydown)=\"handleSortKeyDown($event, column, i)\"\n      [attr.aria-sort]=\"getAriaSort(column)\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngClass]=\"getTableHeaderCellClass(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, colSorter)\"\n      [tabindex]=\"colSorter && columnSorterEnabled(column) ? 0 : -1\"\n    >\n      @if (colSorter && columnSorterEnabled(column)) {\n        <ng-container\n          *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n        />\n      }\n      <ng-container\n        *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n      />\n    </th>\n  }\n</tr>\n@if (columnFilter()) {\n  <tr>\n    @if (selectableRows) {\n      <th></th>\n    }\n    @for (column of columns; track column; let i = $index) {\n      <th [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n          [cTableColor]=\"tableHeaderCellColor(column)\"\n          [ngStyle]=\"getTableHeaderCellStyles(column, colSorter)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n        />\n      </th>\n    }\n  </tr>\n}\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  @if (columnFilterEnabled(column)) {\n    <c-smart-table-column-filter\n      (valueChange)=\"handleColumnFilterValueChange($event)\"\n      [column]=\"column\"\n      [delay]=\"300\"\n      [onEvent]=\"columnFilterEvent\"\n      [value]=\"columnFilterState()[columnKey(column)] ?? ''\"\n      cFilterInput\n      sizing=\"sm\"\n    />\n  }\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  @switch (columnSorterState) {\n    @case ('asc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n      </span>\n    }\n    @case ('desc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n      </span>\n    }\n    @default {\n      <span class=\"opacity-25 float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n      </span>\n    }\n  }\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"], exportAs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, columnFilterStateInput: { classPropertyName: "columnFilterStateInput", publicName: "columnFilterState", isSignal: true, isRequired: false, transformFunction: null }, columnSorter: { classPropertyName: "columnSorter", publicName: "columnSorter", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, columnGroupsInput: { classPropertyName: "columnGroupsInput", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectedAll: { classPropertyName: "selectedAll", publicName: "selectedAll", isSignal: false, isRequired: false, transformFunction: null }, showGroups: { classPropertyName: "showGroups", publicName: "showGroups", isSignal: true, isRequired: false, transformFunction: null }, sorterValue: { classPropertyName: "sorterValue", publicName: "sorterValue", isSignal: true, isRequired: false, transformFunction: null }, columnFilterTemplates: { classPropertyName: "columnFilterTemplates", publicName: "columnFilterTemplates", isSignal: false, isRequired: false, transformFunction: null }, columnLabelTemplates: { classPropertyName: "columnLabelTemplates", publicName: "columnLabelTemplates", isSignal: false, isRequired: false, transformFunction: null }, summaryRowTemplate: { classPropertyName: "summaryRowTemplate", publicName: "summaryRowTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@let colSorter = columnSorter();\n@let selectableRows = selectable();\n\n@if (component() === 'tfoot') {\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n}\n@if (showGroups()) {\n  @for (row of columnGroups(); track row; let i = $index) {\n    <tr>\n      @if (selectableRows) {\n        <th></th>\n      }\n      @for (cell of row; track cell; let i = $index) {\n        <th [cHtmlAttr]=\"getTableHeaderCellProps(cell)\"\n            [cTableColor]=\"tableHeaderCellColor(cell)\"\n            [colSpan]=\"cell.colspan ?? 1\"\n            [ngStyle]=\"getTableHeaderCellStyles(cell, colSorter)\"\n        >\n          {{ cell.label }}\n        </th>\n      }\n    </tr>\n  }\n}\n\n<tr>\n  @if (selectableRows) {\n    <th>\n      <input\n        (change)=\"handleSelectAllChecked($event)\"\n        [checked]=\"selectedAll === true\"\n        [disabled]=\"!selectAll()\"\n        [indeterminate]=\"indeterminate$ | async\"\n        autocomplete=\"off\"\n        cFormCheckInput\n        type=\"checkbox\"\n      >\n    </th>\n  }\n  @for (column of columns; track column; let i = $index) {\n    <th\n      (click)=\"handleSortClick(column, i)\"\n      (keydown)=\"handleSortKeyDown($event, column, i)\"\n      [attr.aria-sort]=\"getAriaSort(column)\"\n      [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngClass]=\"getTableHeaderCellClass(column)\"\n      [ngStyle]=\"getTableHeaderCellStyles(column, colSorter)\"\n      [tabindex]=\"colSorter && columnSorterEnabled(column) ? 0 : -1\"\n    >\n      @if (colSorter && columnSorterEnabled(column)) {\n        <ng-container\n          *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n        />\n      }\n      <ng-container\n        *ngTemplateOutlet=\"columnLabelTemplates[getColumnLabel(column)] ?? defaultColumnLabel; context: {$implicit: column, header: this}\"\n      />\n    </th>\n  }\n</tr>\n@if (columnFilter()) {\n  <tr>\n    @if (selectableRows) {\n      <th></th>\n    }\n    @for (column of columns; track column; let i = $index) {\n      <th [cHtmlAttr]=\"getTableHeaderCellProps(column)\"\n          [cTableColor]=\"tableHeaderCellColor(column)\"\n          [ngStyle]=\"getTableHeaderCellStyles(column, colSorter)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n        />\n      </th>\n    }\n  </tr>\n}\n\n<ng-template #defaultColumnLabel let-column>\n  <div class=\"d-inline\">{{ column | columnLabel }}</div>\n</ng-template>\n\n<ng-template #defaultColumnFilter let-column>\n  @if (columnFilterEnabled(column)) {\n    <c-smart-table-column-filter\n      (valueChange)=\"handleColumnFilterValueChange($event)\"\n      [column]=\"column\"\n      [delay]=\"300\"\n      [onEvent]=\"columnFilterEvent\"\n      [value]=\"columnFilterState()[columnKey(column)] ?? ''\"\n      cFilterInput\n      sizing=\"sm\"\n    />\n  }\n</ng-template>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  @switch (columnSorterState) {\n    @case ('asc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n      </span>\n    }\n    @case ('desc') {\n      <span class=\"float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n      </span>\n    }\n    @default {\n      <span class=\"opacity-25 float-end mx-1\">\n        <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\n      </span>\n    }\n  }\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { 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"], exportAs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
@@ -16464,7 +16449,7 @@ class SmartTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: { classPropertyName: "activePage", publicName: "activePage", isSignal: false, isRequired: false, transformFunction: numberAttribute }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: false, isRequired: false, transformFunction: null }, columnFilterValue: { classPropertyName: "columnFilterValue", publicName: "columnFilterValue", isSignal: false, isRequired: false, transformFunction: null }, columnSorter: { classPropertyName: "columnSorter", publicName: "columnSorter", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: numberAttribute }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPageSelect: { classPropertyName: "itemsPerPageSelect", publicName: "itemsPerPageSelect", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, noItemsLabel: { classPropertyName: "noItemsLabel", publicName: "noItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sorterValue: { classPropertyName: "sorterValue", publicName: "sorterValue", isSignal: false, isRequired: false, transformFunction: null }, tableFilter: { classPropertyName: "tableFilter", publicName: "tableFilter", isSignal: false, isRequired: false, transformFunction: null }, tableFilterLabel: { classPropertyName: "tableFilterLabel", publicName: "tableFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, tableFilterPlaceholder: { classPropertyName: "tableFilterPlaceholder", publicName: "tableFilterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, tableFilterValue: { classPropertyName: "tableFilterValue", publicName: "tableFilterValue", isSignal: false, isRequired: false, transformFunction: null }, tableBodyProps: { classPropertyName: "tableBodyProps", publicName: "tableBodyProps", isSignal: false, isRequired: false, transformFunction: null }, tableFootProps: { classPropertyName: "tableFootProps", publicName: "tableFootProps", isSignal: false, isRequired: false, transformFunction: null }, tableHeadProps: { classPropertyName: "tableHeadProps", publicName: "tableHeadProps", isSignal: false, isRequired: false, transformFunction: null }, tableProps: { classPropertyName: "tableProps", publicName: "tableProps", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "@if (itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']) {\n  <div class=\"row my-2 mx-0\">\n    @if (tableFilter) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n      </div>\n    }\n    @if (cleaner) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n    <ng-template #tableFilterTemplate>\n      @if (tableFilter) {\n        <c-smart-table-filter\n          (valueChange)=\"handleTableFilterChange($event)\"\n          [delay]=\"300\"\n          [filterLabel]=\"tableFilterLabel\"\n          [filterPlaceholder]=\"tableFilterPlaceholder\"\n          [onEvent]=\"tableFilterEvent\"\n          [value]=\"tableFilterState\"\n          cFilterInput\n        />\n      }\n    </ng-template>\n\n    <ng-template #tableCleanerTemplate>\n      @if (cleaner) {\n        <button\n          (click)=\"clean($event)\"\n          [disabled]=\"!isFiltered\"\n          [ngClass]=\"{'ms-1': tableFilter}\"\n          cButton\n          color=\"transparent\"\n          tabindex=\"0\"\n        >\n          <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n        </button>\n      }\n    </ng-template>\n\n    <ng-template #tableCustomHeaderTemplate>\n      <div class=\"col-auto p-0 ms-auto\">\n        <ng-content select=\"[customHeader]\" />\n      </div>\n    </ng-template>\n  </div>\n}\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         cTable\n  >\n    @if (header) {\n      <c-smart-table-head\n        (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableHeadProps?.align\"\n        [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n        [cTableColor]=\"tableHeadProps?.color\"\n        [columnFilterState]=\"columnFilterState\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnFilter]=\"columnFilter\"\n        [columnGroups]=\"columnGroups$()\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter()\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [showGroups]=\"showGroups$()\"\n        [sorterValue]=\"sorterValue\"\n      />\n    }\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    @if (summaryRowTemplate && !footer) {\n      <tfoot>\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n      </tfoot>\n    }\n    @if (footer) {\n      <c-smart-table-head\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableFootProps?.align\"\n        [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n        [cTableColor]=\"tableFootProps?.color\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter()\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [sorterValue]=\"sorterValue\"\n        [summaryRowTemplate]=\"summaryRowTemplate\"\n        component=\"tfoot\"\n      />\n    }\n\n  </table>\n  @if (loading) {\n    <c-element-cover\n      [boundaries]=\"[\n        { sides: ['top'], query: 'td' },\n        { sides: ['bottom'], query: 'tbody' }\n      ]\"\n    />\n  }\n</div>\n@if (pagination || itemsPerPageSelect) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (pagination && numberOfPages > 1) {\n        <c-smart-pagination\n          (activePageChange)=\"setActivePage($event)\"\n          [activePage]=\"activePage\"\n          [pages]=\"numberOfPages\"\n        />\n      }\n    </div>\n    <div class=\"col-auto ms-auto\">\n      @if (itemsPerPageSelect) {\n        <c-smart-table-items-per-page-selector\n          (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n          [itemsPerPageLabel]=\"itemsPerPageLabel\"\n          [itemsPerPageOptions]=\"itemsPerPageOptions\"\n          [itemsPerPage]=\"itemsPerPage\"\n        />\n      }\n    </div>\n  </div>\n}\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cAlign]=\"tableBodyProps?.align\"\n         [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n  >\n    @for (item of currentItems; track item; let i = $index, cnt = $count, isEven = $even, isOdd = $odd) {\n      <tr (click)=\"handleRowClick({$event, item, i})\"\n          [cAlign]=\"item._props?.align\"\n          [cTableActive]=\"item._props?.active ?? undefined\"\n          [cTableColor]=\"item._props?.color\"\n          [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n          [tabindex]=\"clickableRows ? 0 : -1\"\n      >\n        @if (selectable) {\n          <td [cAlign]=\"item?.['_cellProps']?._all?.align\"\n              [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n              [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          >\n            <input (change)=\"handleRowChecked($event, item)\"\n                   [checked]=\"item._selected ?? false\"\n                   [disabled]=\"(item?._selectable === false)\"\n                   autocomplete=\"off\"\n                   cFormCheckInput\n            >\n          </td>\n        }\n        @for (column of columns$(); track column; let i = $index) {\n          @let columnKey = getColumnKey(column);\n          <ng-container\n            *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[columnKey], cellProps: getTableDataCellProps(column, item) }\"\n          />\n        }\n      </tr>\n      @if (templates['tableDetails']) {\n        <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n        <tr>\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{borderBottomWidth: 0}\" class=\"p-0\" tabindex=\"-1\"></td>\n        </tr>\n        <tr class=\"p-0\">\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{border: 0}\" class=\"p-0\">\n            <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n          </td>\n        </tr>\n      }\n    }\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  @if (tdContent !== undefined) {\n    <td [cAlign]=\"cellProps?.align\"\n        [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n        [cTableActive]=\"cellProps?.['active']\"\n        [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n        [ngClass]=\"getTableDataCellClass(column, item)\"\n        [ngStyle]=\"getTableDataCellStyles(column, item)\"\n    >\n      {{ tdContent }}\n    </td>\n  }\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  @if (!currentItems.length) {\n    <tr>\n      <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{ noItemsLabel }}</td>\n    </tr>\n  }\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg class=\"icon icon-custom-size\" pointer-events=\"none\" role=\"img\" viewBox=\"0 0 512 512\"\n       width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\">\n    </polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"], exportAs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "columnGroups", "selectable", "selectAll", "selectedAll", "showGroups", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"], exportAs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"], exportAs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"], exportAs: ["cTable"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SmartTableComponent, isStandalone: true, selector: "c-smart-table", inputs: { activePage: { classPropertyName: "activePage", publicName: "activePage", isSignal: false, isRequired: false, transformFunction: numberAttribute }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: false, isRequired: false, transformFunction: null }, columnFilterValue: { classPropertyName: "columnFilterValue", publicName: "columnFilterValue", isSignal: false, isRequired: false, transformFunction: null }, columnSorter: { classPropertyName: "columnSorter", publicName: "columnSorter", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: false, isRequired: false, transformFunction: numberAttribute }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: false, isRequired: false, transformFunction: null }, itemsPerPageSelect: { classPropertyName: "itemsPerPageSelect", publicName: "itemsPerPageSelect", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, noItemsLabel: { classPropertyName: "noItemsLabel", publicName: "noItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sorterValue: { classPropertyName: "sorterValue", publicName: "sorterValue", isSignal: false, isRequired: false, transformFunction: null }, tableFilter: { classPropertyName: "tableFilter", publicName: "tableFilter", isSignal: false, isRequired: false, transformFunction: null }, tableFilterLabel: { classPropertyName: "tableFilterLabel", publicName: "tableFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, tableFilterPlaceholder: { classPropertyName: "tableFilterPlaceholder", publicName: "tableFilterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, tableFilterValue: { classPropertyName: "tableFilterValue", publicName: "tableFilterValue", isSignal: false, isRequired: false, transformFunction: null }, tableBodyProps: { classPropertyName: "tableBodyProps", publicName: "tableBodyProps", isSignal: false, isRequired: false, transformFunction: null }, tableFootProps: { classPropertyName: "tableFootProps", publicName: "tableFootProps", isSignal: false, isRequired: false, transformFunction: null }, tableHeadProps: { classPropertyName: "tableHeadProps", publicName: "tableHeadProps", isSignal: false, isRequired: false, transformFunction: null }, tableProps: { classPropertyName: "tableProps", publicName: "tableProps", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "@if (itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']) {\n  <div class=\"row my-2 mx-0\">\n    @if (tableFilter) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableFilterTemplate\" />\n      </div>\n    }\n    @if (cleaner) {\n      <div class=\"col-auto p-0\">\n        <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\" />\n\n    <ng-template #tableFilterTemplate>\n      @if (tableFilter) {\n        <c-smart-table-filter\n          (valueChange)=\"handleTableFilterChange($event)\"\n          [delay]=\"300\"\n          [filterLabel]=\"tableFilterLabel\"\n          [filterPlaceholder]=\"tableFilterPlaceholder\"\n          [onEvent]=\"tableFilterEvent\"\n          [value]=\"tableFilterState\"\n          cFilterInput\n        />\n      }\n    </ng-template>\n\n    <ng-template #tableCleanerTemplate>\n      @if (cleaner) {\n        <button\n          (click)=\"clean($event)\"\n          [disabled]=\"!isFiltered\"\n          [ngClass]=\"{'ms-1': tableFilter}\"\n          cButton\n          color=\"transparent\"\n          tabindex=\"0\"\n        >\n          <ng-container *ngTemplateOutlet=\"filterIconTemplate\" />\n        </button>\n      }\n    </ng-template>\n\n    <ng-template #tableCustomHeaderTemplate>\n      <div class=\"col-auto p-0 ms-auto\">\n        <ng-content select=\"[customHeader]\" />\n      </div>\n    </ng-template>\n  </div>\n}\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\n         cTable\n  >\n    @if (header) {\n      <c-smart-table-head\n        (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableHeadProps?.align\"\n        [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n        [cTableColor]=\"tableHeadProps?.color\"\n        [columnFilterState]=\"columnFilterState\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnFilter]=\"columnFilter\"\n        [columnGroups]=\"columnGroups$()\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter()\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [showGroups]=\"showGroups$()\"\n        [sorterValue]=\"sorterValue\"\n      />\n    }\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\" />\n\n    @if (summaryRowTemplate && !footer) {\n      <tfoot>\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n      </tfoot>\n    }\n    @if (footer) {\n      <c-smart-table-head\n        (selectAllChange)=\"handleSelectAllChange($event)\"\n        (sorterStateChange)=\"handleSortChange($event)\"\n        [cAlign]=\"tableFootProps?.align\"\n        [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n        [cTableColor]=\"tableFootProps?.color\"\n        [columnFilterTemplates]=\"columnFilterTemplates\"\n        [columnLabelTemplates]=\"columnLabelTemplates\"\n        [columnSorter]=\"columnSorter()\"\n        [columns]=\"columns$()\"\n        [selectAll]=\"selectAll\"\n        [selectable]=\"selectable\"\n        [selectedAll]=\"(selectedAllSubject | async) ?? false\"\n        [sorterValue]=\"sorterValue\"\n        [summaryRowTemplate]=\"summaryRowTemplate\"\n        component=\"tfoot\"\n      />\n    }\n\n  </table>\n  @if (loading) {\n    <c-element-cover\n      [boundaries]=\"[\n        { sides: ['top'], query: 'td' },\n        { sides: ['bottom'], query: 'tbody' }\n      ]\"\n    />\n  }\n</div>\n@if (pagination || itemsPerPageSelect) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (pagination && numberOfPages > 1) {\n        <c-smart-pagination\n          (activePageChange)=\"setActivePage($event)\"\n          [activePage]=\"activePage\"\n          [pages]=\"numberOfPages\"\n        />\n      }\n    </div>\n    <div class=\"col-auto ms-auto\">\n      @if (itemsPerPageSelect) {\n        <c-smart-table-items-per-page-selector\n          (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n          [itemsPerPageLabel]=\"itemsPerPageLabel\"\n          [itemsPerPageOptions]=\"itemsPerPageOptions\"\n          [itemsPerPage]=\"itemsPerPage\"\n        />\n      }\n    </div>\n  </div>\n}\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cAlign]=\"tableBodyProps?.align\"\n         [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n  >\n    @for (item of currentItems; track item; let i = $index, cnt = $count, isEven = $even, isOdd = $odd) {\n      <tr (click)=\"handleRowClick({$event, item, i})\"\n          [cAlign]=\"item._props?.align\"\n          [cTableActive]=\"item._props?.active ?? undefined\"\n          [cTableColor]=\"item._props?.color\"\n          [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n          [tabindex]=\"clickableRows ? 0 : -1\"\n      >\n        @if (selectable) {\n          <td [cAlign]=\"item?.['_cellProps']?._all?.align\"\n              [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\n              [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          >\n            <input (change)=\"handleRowChecked($event, item)\"\n                   [checked]=\"item._selected ?? false\"\n                   [disabled]=\"(item?._selectable === false)\"\n                   autocomplete=\"off\"\n                   cFormCheckInput\n            >\n          </td>\n        }\n        @for (column of columns$(); track column; let i = $index) {\n          @let columnKey = getColumnKey(column);\n          <ng-container\n            *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {column, item, columnName: getColumnKey(column), tdContent: item[columnKey], cellProps: getTableDataCellProps(column, item) }\"\n          />\n        }\n      </tr>\n      @if (templates['tableDetails']) {\n        <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n        <tr>\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{borderBottomWidth: 0}\" class=\"p-0\" tabindex=\"-1\"></td>\n        </tr>\n        <tr class=\"p-0\">\n          <td [colSpan]=\"colspan\" [ngStyle]=\"{border: 0}\" class=\"p-0\">\n            <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\" />\n          </td>\n        </tr>\n      }\n    }\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\" />\n  </tbody>\n</ng-template>\n\n<ng-template\n  #columnDefaultTemplate\n  let-cellProps=\"cellProps\"\n  let-column=\"column\"\n  let-columnName=\"columnName\"\n  let-item=\"item\"\n  let-tdContent=\"tdContent\"\n>\n  @if (tdContent !== undefined) {\n    <td [cAlign]=\"cellProps?.align\"\n        [cHtmlAttr]=\"cellProps?.['_attributes'] ?? undefined\"\n        [cTableActive]=\"cellProps?.['active']\"\n        [cTableColor]=\"cellProps?.color ?? column[columnName]?._colProps?.color ?? undefined\"\n        [ngClass]=\"getTableDataCellClass(column, item)\"\n        [ngStyle]=\"getTableDataCellStyles(column, item)\"\n    >\n      {{ tdContent }}\n    </td>\n  }\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  @if (!currentItems.length) {\n    <tr>\n      <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{ noItemsLabel }}</td>\n    </tr>\n  }\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg class=\"icon icon-custom-size\" pointer-events=\"none\" role=\"img\" viewBox=\"0 0 512 512\"\n       width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\">\n    </polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"], exportAs: ["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"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "columnGroups", "selectable", "selectAll", "selectedAll", "showGroups", "sorterValue", "columnFilterTemplates", "columnLabelTemplates", "summaryRowTemplate"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"], exportAs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"], exportAs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"], exportAs: ["cTable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,