@coreui/angular-pro 4.0.0-beta.0 → 4.0.0-beta.4

package/fesm2020/coreui-angular-pro.mjs

@@ -2636,6 +2636,11 @@ class DropdownComponent {
          */
         this.placement = 'bottom-start';
         this._popper = true;
+        this._popperOptions = {
+            placement: this.placement,
+            modifiers: [],
+            strategy: 'absolute'
+        };
         /**
          * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
          */
@@ -2645,11 +2650,6 @@ class DropdownComponent {
         this.dropdownContext = { $implicit: this.visible };
         this.activeTrap = false;
         this.listeners = [];
-        this._popperOptions = {
-            placement: this.placement,
-            modifiers: [],
-            strategy: 'absolute',
-        };
     }
     /**
      * Sets a darker color scheme to match a dark navbar.
@@ -2674,6 +2674,36 @@ class DropdownComponent {
     get popper() {
         return this._popper;
     }
+    /**
+     * Optional popper Options object, placement prop takes precedence over
+     * @type Partial<Options>
+     */
+    set popperOptions(value) {
+        this._popperOptions = { ...this._popperOptions, ...value };
+    }
+    ;
+    get popperOptions() {
+        let placement = this.placement;
+        switch (this.direction) {
+            case 'dropup': {
+                placement = 'top-start';
+                break;
+            }
+            case 'dropend': {
+                placement = 'right-start';
+                break;
+            }
+            case 'dropstart': {
+                placement = 'left-start';
+                break;
+            }
+        }
+        if (this.alignment === 'end') {
+            placement = 'bottom-end';
+        }
+        this._popperOptions = { ...this._popperOptions, placement: placement };
+        return this._popperOptions;
+    }
     /**
      * Toggle the visibility of dropdown menu component.
      * @type boolean
@@ -2704,28 +2734,6 @@ class DropdownComponent {
     get hostStyle() {
         return this.variant === 'input-group' ? { display: 'contents' } : {};
     }
-    get popperOptions() {
-        let placement = this.placement;
-        switch (this.direction) {
-            case 'dropup': {
-                placement = 'top-start';
-                break;
-            }
-            case 'dropend': {
-                placement = 'right-start';
-                break;
-            }
-            case 'dropstart': {
-                placement = 'left-start';
-                break;
-            }
-        }
-        if (this.alignment === 'end') {
-            placement = 'bottom-end';
-        }
-        this._popperOptions = { ...this._popperOptions, placement: placement };
-        return this._popperOptions;
-    }
     dropdownStateSubscribe(subscribe = true) {
         if (subscribe) {
             this.dropdownStateSubscription =
@@ -2830,7 +2838,7 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], styles: [":host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
@@ -2849,6 +2857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: Input
             }], popper: [{
                 type: Input
+            }], popperOptions: [{
+                type: Input
             }], variant: [{
                 type: Input
             }], visible: [{
@@ -9631,14 +9641,17 @@ class SmartTableComponent {
         });
         this.selectedAll = $event;
     }
-    // tableDataCellProps(item: IItem, colName: string) {
-    //   const props = item['_cellProps'] && {
-    //     ...(item['_cellProps']['all'] && { ...item['_cellProps']['all'] }),
-    //     ...(item['_cellProps'][colName] && { ...item['_cellProps'][colName] }),
-    //   }
-    //   console.log('tableDataCellProps', props)
-    //   return props
-    // }
+    tableDataCellProps(item, colName) {
+        const props = item['_cellProps'] && {
+            ...(item['_cellProps']['_all'] && { ...item['_cellProps']['_all'] }),
+            ...(item['_cellProps'][colName] && { ...item['_cellProps'][colName] }),
+        };
+        return props;
+    }
+    tableDataCellClasses(item, colName) {
+        const column = this.columns.filter((column) => column['key'] === colName);
+        return column[0]?._classes;
+    }
     getColumnName($event) {
         const target = $event.target;
         const closest = target.closest('tr');
@@ -9653,10 +9666,10 @@ class SmartTableComponent {
     }
 }
 SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: SmartTableComponent, 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", 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"], ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\">\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"item?.['_cellProps']?.[columnName]?.active ?? item?.['_cellProps']?._all?.active\"\r\n    [cTableColor]=\"item?.['_cellProps']?.[columnName]?.color ?? item?.['_cellProps']?._all?.color\"\r\n    [cAlign]=\"item?.['_cellProps']?.[columnName]?.align ?? item?.['_cellProps']?._all?.align\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], components: [{ type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "value"], outputs: ["valueChange"] }, { type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped"] }, { type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: SmartTableComponent, 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", 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"], ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], components: [{ type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "value"], outputs: ["valueChange"] }, { type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped"] }, { type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\">\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"item?.['_cellProps']?.[columnName]?.active ?? item?.['_cellProps']?._all?.active\"\r\n    [cTableColor]=\"item?.['_cellProps']?.[columnName]?.color ?? item?.['_cellProps']?._all?.color\"\r\n    [cAlign]=\"item?.['_cellProps']?.[columnName]?.align ?? item?.['_cellProps']?._all?.align\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\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\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{