@coreui/angular-pro 5.4.11 → 5.4.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5888,6 +5888,11 @@ class FormPasswordDirective {
|
|
|
5888
5888
|
const floatingLabel = this.floatingLabel();
|
|
5889
5889
|
const wrapper = this.#wrapper;
|
|
5890
5890
|
if (floatingLabel && !wrapper.classList.contains('form-floating')) {
|
|
5891
|
+
const nativeElement = this.#hostElement.nativeElement;
|
|
5892
|
+
const placeholder = nativeElement.getAttribute('placeholder');
|
|
5893
|
+
if (!placeholder) {
|
|
5894
|
+
nativeElement.setAttribute('placeholder', floatingLabel);
|
|
5895
|
+
}
|
|
5891
5896
|
const label = this.#renderer.createElement('label');
|
|
5892
5897
|
const text = this.#renderer.createText(floatingLabel);
|
|
5893
5898
|
this.#renderer.appendChild(label, text);
|
|
@@ -16250,6 +16255,7 @@ class SmartTableComponent {
|
|
|
16250
16255
|
this.columnFilterValueChange = new EventEmitter();
|
|
16251
16256
|
this.filteredItemsChange = new EventEmitter();
|
|
16252
16257
|
this.tableFilterValueChange = new EventEmitter();
|
|
16258
|
+
this.cleanerClick = new EventEmitter();
|
|
16253
16259
|
this.templates = { tableDetails: null, tableData: null };
|
|
16254
16260
|
this.columnFilterTemplates = {};
|
|
16255
16261
|
this.columnLabelTemplates = {};
|
|
@@ -16558,6 +16564,7 @@ class SmartTableComponent {
|
|
|
16558
16564
|
this.tableFilterValue = '';
|
|
16559
16565
|
this.sorterValue = {};
|
|
16560
16566
|
this.tableFiltered; //emits tableFiltered change
|
|
16567
|
+
this.cleanerClick.emit();
|
|
16561
16568
|
}
|
|
16562
16569
|
handleItemsPerPageChange(value) {
|
|
16563
16570
|
if (value !== this._itemsPerPage) {
|
|
@@ -16612,7 +16619,7 @@ class SmartTableComponent {
|
|
|
16612
16619
|
}
|
|
16613
16620
|
}
|
|
16614
16621
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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"] }] }); }
|
|
16622
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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", cleanerClick: "cleanerClick" }, 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"] }] }); }
|
|
16616
16623
|
}
|
|
16617
16624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: SmartTableComponent, decorators: [{
|
|
16618
16625
|
type: Component,
|
|
@@ -16714,6 +16721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
16714
16721
|
type: Output
|
|
16715
16722
|
}], tableFilterValueChange: [{
|
|
16716
16723
|
type: Output
|
|
16724
|
+
}], cleanerClick: [{
|
|
16725
|
+
type: Output
|
|
16717
16726
|
}], columnTemplates: [{
|
|
16718
16727
|
type: ContentChildren,
|
|
16719
16728
|
args: [TemplateIdDirective]
|