@masterteam/components 0.0.75 → 0.0.76
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.
- package/assets/common.css +1 -1
- package/fesm2022/masterteam-components-color-picker-field.mjs +2 -2
- package/fesm2022/masterteam-components-color-picker-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs +0 -2
- package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-module-summary-card.mjs +1 -1
- package/fesm2022/masterteam-components-module-summary-card.mjs.map +1 -1
- package/fesm2022/masterteam-components-page.mjs +2 -2
- package/fesm2022/masterteam-components-page.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +4 -4
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-toggle-field.mjs +4 -3
- package/fesm2022/masterteam-components-toggle-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-tree.mjs +1 -1
- package/fesm2022/masterteam-components-tree.mjs.map +1 -1
- package/package.json +1 -1
- package/types/masterteam-components-toggle-field.d.ts +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masterteam-components-page.mjs","sources":["../../../../packages/masterteam/components/page/page.ts","../../../../packages/masterteam/components/page/page.html","../../../../packages/masterteam/components/page/masterteam-components-page.ts"],"sourcesContent":["import {\r\n Component,\r\n input,\r\n output,\r\n contentChild,\r\n TemplateRef,\r\n viewChild,\r\n ElementRef,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { PageHeader, PageHeaderTab } from '@masterteam/components/page-header';\r\nimport { MTIcon } from '@masterteam/icons';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'mt-page',\r\n standalone: true,\r\n imports: [PageHeader, NgTemplateOutlet],\r\n templateUrl: './page.html',\r\n})\r\nexport class Page {\r\n backButton = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n backButtonIcon = input<'arrow' | 'close'>();\r\n avatarIcon = input<MTIcon>();\r\n avatarStyle = input<Record<string, string>>();\r\n avatarShape = input<'circle' | 'square'>();\r\n title = input.required<string>();\r\n tabs = input<PageHeaderTab[]>([]);\r\n activeTab = input<string | number>();\r\n contentClass = input<string>('');\r\n contentId = input<string>();\r\n\r\n titleEnd = contentChild<TemplateRef<any>>('titleEnd');\r\n headerEnd = contentChild<TemplateRef<any>>('headerEnd');\r\n content = viewChild<ElementRef<HTMLElement>>('content');\r\n\r\n backButtonClick = output<void>();\r\n tabChange = output<string | number>();\r\n}\r\n","<div class=\"page h-full flex flex-col\">\r\n <mt-page-header\r\n [backButton]=\"backButton()\"\r\n [backButtonIcon]=\"backButtonIcon()\"\r\n [avatarIcon]=\"avatarIcon()\"\r\n [avatarStyle]=\"avatarStyle()\"\r\n [avatarShape]=\"avatarShape()\"\r\n [title]=\"title()\"\r\n [tabs]=\"tabs()\"\r\n [activeTab]=\"activeTab()\"\r\n (backButtonClick)=\"backButtonClick.emit()\"\r\n (tabChange)=\"tabChange.emit($event)\"\r\n >\r\n @if (titleEnd(); as template) {\r\n <ng-template #titleEnd>\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </ng-template>\r\n }\r\n\r\n @if (headerEnd(); as template) {\r\n <ng-template #headerEnd>\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </ng-template>\r\n }\r\n </mt-page-header>\r\n\r\n <div\r\n [class]=\"'flex-1 overflow-y-auto p-5 relative ' + contentClass()\"\r\n [id]=\"contentId() ?? 'page-content'\"\r\n #content\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"masterteam-components-page.mjs","sources":["../../../../packages/masterteam/components/page/page.ts","../../../../packages/masterteam/components/page/page.html","../../../../packages/masterteam/components/page/masterteam-components-page.ts"],"sourcesContent":["import {\r\n Component,\r\n input,\r\n output,\r\n contentChild,\r\n TemplateRef,\r\n viewChild,\r\n ElementRef,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { PageHeader, PageHeaderTab } from '@masterteam/components/page-header';\r\nimport { MTIcon } from '@masterteam/icons';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'mt-page',\r\n standalone: true,\r\n imports: [PageHeader, NgTemplateOutlet],\r\n templateUrl: './page.html',\r\n})\r\nexport class Page {\r\n backButton = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n backButtonIcon = input<'arrow' | 'close'>();\r\n avatarIcon = input<MTIcon>();\r\n avatarStyle = input<Record<string, string>>();\r\n avatarShape = input<'circle' | 'square'>();\r\n title = input.required<string>();\r\n tabs = input<PageHeaderTab[]>([]);\r\n activeTab = input<string | number>();\r\n contentClass = input<string>('');\r\n contentId = input<string>();\r\n\r\n titleEnd = contentChild<TemplateRef<any>>('titleEnd');\r\n headerEnd = contentChild<TemplateRef<any>>('headerEnd');\r\n content = viewChild<ElementRef<HTMLElement>>('content');\r\n\r\n backButtonClick = output<void>();\r\n tabChange = output<string | number>();\r\n}\r\n","<div class=\"page h-full flex flex-col\">\r\n <mt-page-header\r\n [backButton]=\"backButton()\"\r\n [backButtonIcon]=\"backButtonIcon()\"\r\n [avatarIcon]=\"avatarIcon()\"\r\n [avatarStyle]=\"avatarStyle()\"\r\n [avatarShape]=\"avatarShape()\"\r\n [title]=\"title()\"\r\n [tabs]=\"tabs()\"\r\n [activeTab]=\"activeTab()\"\r\n (backButtonClick)=\"backButtonClick.emit()\"\r\n (tabChange)=\"tabChange.emit($event)\"\r\n >\r\n @if (titleEnd(); as template) {\r\n <ng-template #titleEnd>\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </ng-template>\r\n }\r\n\r\n @if (headerEnd(); as template) {\r\n <ng-template #headerEnd>\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </ng-template>\r\n }\r\n </mt-page-header>\r\n\r\n <div\r\n [class]=\"\r\n 'flex-1 overflow-y-auto p-5 relative overflow-x-hidden ' + contentClass()\r\n \"\r\n [id]=\"contentId() ?? 'page-content'\"\r\n #content\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -142,7 +142,7 @@ class TableFilter {
|
|
|
142
142
|
useExisting: forwardRef(() => TableFilter),
|
|
143
143
|
multi: true,
|
|
144
144
|
},
|
|
145
|
-
], ngImport: i0, template: "<mt-button\r\n (click)=\"popover.toggle($event)\"\r\n [label]=\"'components.table.filter' | transloco\"\r\n [badge]=\"activeFilterCount()\"\r\n icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n <div class=\"flex flex-col max-h-[50vh]\">\r\n <h4\r\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n {{ \"components.table.filterOptions\" | transloco }}\r\n </h4>\r\n\r\n <div\r\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n (keydown.enter)=\"apply(); popover.hide()\"\r\n >\r\n @for (col of filterableColumns(); track col.key) {\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ col.filterConfig?.label || col.label }}\r\n </label>\r\n\r\n @switch (getFilterType(col)) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"col.filterConfig?.options ?? []\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n @case (\"date\") {\r\n <div class=\"space-y-3\">\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.from\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'from')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n />\r\n </div>\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.to\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'to')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @case (\"boolean\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"booleanOptions\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n <mt-button\r\n variant=\"outlined\"\r\n (click)=\"reset(); popover.hide()\"\r\n [label]=\"'components.table.reset' | transloco\"\r\n />\r\n <mt-button\r\n (click)=\"apply(); popover.hide()\"\r\n [label]=\"'components.table.apply' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n</p-popover>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
145
|
+
], ngImport: i0, template: "<mt-button\r\n (click)=\"popover.toggle($event)\"\r\n [label]=\"'components.table.filter' | transloco\"\r\n [badge]=\"activeFilterCount()\"\r\n severity=\"primary\"\r\n icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n <div class=\"flex flex-col max-h-[50vh]\">\r\n <h4\r\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n {{ \"components.table.filterOptions\" | transloco }}\r\n </h4>\r\n\r\n <div\r\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n (keydown.enter)=\"apply(); popover.hide()\"\r\n >\r\n @for (col of filterableColumns(); track col.key) {\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ col.filterConfig?.label || col.label }}\r\n </label>\r\n\r\n @switch (getFilterType(col)) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"col.filterConfig?.options ?? []\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n @case (\"date\") {\r\n <div class=\"space-y-3\">\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.from\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'from')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n />\r\n </div>\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.to\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'to')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @case (\"boolean\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"booleanOptions\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n <mt-button\r\n variant=\"outlined\"\r\n (click)=\"reset(); popover.hide()\"\r\n [label]=\"'components.table.reset' | transloco\"\r\n />\r\n <mt-button\r\n (click)=\"apply(); popover.hide()\"\r\n [label]=\"'components.table.apply' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n</p-popover>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
146
146
|
}
|
|
147
147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableFilter, decorators: [{
|
|
148
148
|
type: Component,
|
|
@@ -160,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
160
160
|
useExisting: forwardRef(() => TableFilter),
|
|
161
161
|
multi: true,
|
|
162
162
|
},
|
|
163
|
-
], template: "<mt-button\r\n (click)=\"popover.toggle($event)\"\r\n [label]=\"'components.table.filter' | transloco\"\r\n [badge]=\"activeFilterCount()\"\r\n icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n <div class=\"flex flex-col max-h-[50vh]\">\r\n <h4\r\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n {{ \"components.table.filterOptions\" | transloco }}\r\n </h4>\r\n\r\n <div\r\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n (keydown.enter)=\"apply(); popover.hide()\"\r\n >\r\n @for (col of filterableColumns(); track col.key) {\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ col.filterConfig?.label || col.label }}\r\n </label>\r\n\r\n @switch (getFilterType(col)) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"col.filterConfig?.options ?? []\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n @case (\"date\") {\r\n <div class=\"space-y-3\">\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.from\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'from')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n />\r\n </div>\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.to\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'to')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @case (\"boolean\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"booleanOptions\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n <mt-button\r\n variant=\"outlined\"\r\n (click)=\"reset(); popover.hide()\"\r\n [label]=\"'components.table.reset' | transloco\"\r\n />\r\n <mt-button\r\n (click)=\"apply(); popover.hide()\"\r\n [label]=\"'components.table.apply' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n</p-popover>\r\n" }]
|
|
163
|
+
], template: "<mt-button\r\n (click)=\"popover.toggle($event)\"\r\n [label]=\"'components.table.filter' | transloco\"\r\n [badge]=\"activeFilterCount()\"\r\n severity=\"primary\"\r\n icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n <div class=\"flex flex-col max-h-[50vh]\">\r\n <h4\r\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n {{ \"components.table.filterOptions\" | transloco }}\r\n </h4>\r\n\r\n <div\r\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n (keydown.enter)=\"apply(); popover.hide()\"\r\n >\r\n @for (col of filterableColumns(); track col.key) {\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ col.filterConfig?.label || col.label }}\r\n </label>\r\n\r\n @switch (getFilterType(col)) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"col.filterConfig?.options ?? []\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (col.filterConfig?.label || col.label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n @case (\"date\") {\r\n <div class=\"space-y-3\">\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.from\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'from')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n />\r\n </div>\r\n <div class=\"space-y-1\">\r\n <label\r\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n >\r\n {{ \"components.table.to\" | transloco }}\r\n </label>\r\n <mt-date-field\r\n [ngModel]=\"getDateRangeValue(col.key, 'to')\"\r\n (ngModelChange)=\"updateDateFilter(col.key, 'to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @case (\"boolean\") {\r\n <mt-select-field\r\n [ngModel]=\"getFilterValue(col.key)\"\r\n (ngModelChange)=\"updateFilter(col.key, $event)\"\r\n [options]=\"booleanOptions\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n showClear\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n >\r\n <mt-button\r\n variant=\"outlined\"\r\n (click)=\"reset(); popover.hide()\"\r\n [label]=\"'components.table.reset' | transloco\"\r\n />\r\n <mt-button\r\n (click)=\"apply(); popover.hide()\"\r\n [label]=\"'components.table.apply' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n</p-popover>\r\n" }]
|
|
164
164
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterReset: [{ type: i0.Output, args: ["filterReset"] }] } });
|
|
165
165
|
|
|
166
166
|
class Table {
|
|
@@ -449,7 +449,7 @@ class Table {
|
|
|
449
449
|
}
|
|
450
450
|
}
|
|
451
451
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Table, isStandalone: true, selector: "mt-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showGridlines: { classPropertyName: "showGridlines", publicName: "showGridlines", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, generalSearch: { classPropertyName: "generalSearch", publicName: "generalSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, updating: { classPropertyName: "updating", publicName: "updating", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, lazyTotalRecords: { classPropertyName: "lazyTotalRecords", publicName: "lazyTotalRecords", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionLabel: { classPropertyName: "tabsOptionLabel", publicName: "tabsOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionValue: { classPropertyName: "tabsOptionValue", publicName: "tabsOptionValue", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, filterTerm: { classPropertyName: "filterTerm", publicName: "filterTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cellChange: "cellChange", lazyLoad: "lazyLoad", columnReorder: "columnReorder", rowReorder: "rowReorder", filters: "filtersChange", activeTab: "activeTabChange", onTabChange: "onTabChange", pageSize: "pageSizeChange", currentPage: "currentPageChange", first: "firstChange", filterTerm: "filterTermChange" }, queries: [{ propertyName: "captionStartContent", first: true, predicate: ["captionStart"], descendants: true, isSignal: true }, { propertyName: "captionEndContent", first: true, predicate: ["captionEnd"], descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["dt"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"space-y-4 rounded-2xl\">\r\n <div>\r\n @if (\r\n captionStartContent() ||\r\n captionEndContent() ||\r\n generalSearch() ||\r\n showFilters() ||\r\n tabs()?.length > 0 ||\r\n actions()?.length > 0\r\n ) {\r\n <div class=\"p-datatable-header rounded-t-2xl\">\r\n <div\r\n class=\"flex relative\"\r\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"captionStartContent()\"\r\n ></ng-container>\r\n @if (tabs()) {\r\n <mt-tabs\r\n [(active)]=\"activeTab\"\r\n [options]=\"tabs()\"\r\n [optionLabel]=\"tabsOptionLabel()\"\r\n [optionValue]=\"tabsOptionValue()\"\r\n (onChange)=\"tabChanged($event)\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n }\r\n @if (generalSearch()) {\r\n <mt-text-field\r\n [(ngModel)]=\"filterTerm\"\r\n (change)=\"onSearchChange($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"'components.table.search' | transloco\"\r\n ></mt-text-field>\r\n }\r\n </div>\r\n <div class=\"flex items-center gap-2\">\r\n @if (showFilters()) {\r\n <mt-table-filter\r\n [columns]=\"columns()\"\r\n [data]=\"data()\"\r\n [ngModel]=\"filters()\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (filterReset)=\"onFilterReset()\"\r\n />\r\n }\r\n @if (exportable()) {\r\n <mt-button\r\n icon=\"general.share-05\"\r\n [label]=\"'components.table.export' | transloco\"\r\n (click)=\"exportCSV()\"\r\n />\r\n }\r\n @if (actions()?.length > 0) {\r\n <div class=\"flex items-center space-x-2\">\r\n @for (action of actions(); track action.label) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size\"\r\n (click)=\"action.action(row)\"\r\n [label]=\"action.label\"\r\n [tooltip]=\"action.tooltip\"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"captionEndContent()\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!loading() && emptyContent() && data().length === 0) {\r\n <div\r\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"overflow-x-auto bg-content\">\r\n <p-table\r\n #dt\r\n [value]=\"displayData()\"\r\n [columns]=\"columns()\"\r\n [size]=\"size()\"\r\n [showGridlines]=\"showGridlines()\"\r\n [stripedRows]=\"stripedRows()\"\r\n [lazy]=\"lazy()\"\r\n [totalRecords]=\"totalRecords()\"\r\n [reorderableColumns]=\"reorderableColumns()\"\r\n [reorderableRows]=\"reorderableRows()\"\r\n [dataKey]=\"dataKey()\"\r\n [first]=\"first()\"\r\n [rows]=\"pageSize()\"\r\n [exportFilename]=\"exportFilename()\"\r\n (onPage)=\"onTablePage($event)\"\r\n (onLazyLoad)=\"handleLazyLoad($event)\"\r\n (onColReorder)=\"onColumnReorder($event)\"\r\n (onRowReorder)=\"onRowReorder($event)\"\r\n paginator\r\n paginatorStyleClass=\"hidden!\"\r\n class=\"min-w-full text-sm align-middle table-fixed\"\r\n >\r\n <ng-template\r\n #header\r\n let-columns\r\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\r\n >\r\n <tr>\r\n @if (reorderableRows()) {\r\n <th class=\"w-10\"></th>\r\n }\r\n @if (selectableRows()) {\r\n <th class=\"w-12 text-start\">\r\n <mt-checkbox-field\r\n [ngModel]=\"allSelectedOnPage()\"\r\n (ngModelChange)=\"toggleAllRowsOnPage()\"\r\n ></mt-checkbox-field>\r\n </th>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n @if (reorderableColumns()) {\r\n <th\r\n pReorderableColumn\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n {{ col.label }}\r\n <mt-icon\r\n icon=\"general.menu-05\"\r\n class=\"text-xs text-gray-400\"\r\n ></mt-icon>\r\n </div>\r\n </th>\r\n } @else {\r\n <th\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n {{ col.label }}\r\n </th>\r\n }\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <th\r\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n Actions\r\n </th>\r\n }\r\n </tr>\r\n @if (updating()) {\r\n <tr>\r\n <th\r\n [attr.colspan]=\"\r\n columns.length +\r\n (reorderableRows() ? 1 : 0) +\r\n (selectableRows() ? 1 : 0) +\r\n (rowActions().length > 0 ? 1 : 0)\r\n \"\r\n class=\"!p-0\"\r\n >\r\n <p-progressBar\r\n mode=\"indeterminate\"\r\n [style]=\"{ height: '4px' }\"\r\n />\r\n </th>\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template\r\n #body\r\n let-row\r\n let-columns=\"columns\"\r\n let-index=\"rowIndex\"\r\n class=\"divide-y divide-gray-200\"\r\n >\r\n @if (loading()) {\r\n <tr>\r\n @if (reorderableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (selectableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (rowActions().length > 0) {\r\n <td><p-skeleton /></td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\r\n [pReorderableRow]=\"index\"\r\n >\r\n @if (reorderableRows()) {\r\n <td class=\"w-10 text-center\">\r\n <mt-icon\r\n icon=\"general.menu-05\"\r\n class=\"cursor-move text-gray-500\"\r\n pReorderableRowHandle\r\n ></mt-icon>\r\n </td>\r\n }\r\n @if (selectableRows()) {\r\n <td class=\"w-12\">\r\n <mt-checkbox-field\r\n [ngModel]=\"selectedRows().has(row)\"\r\n (ngModelChange)=\"toggleRow(row)\"\r\n ></mt-checkbox-field>\r\n </td>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td class=\"text-gray-700 dark:text-gray-100\">\r\n @switch (col.type) {\r\n @case (\"boolean\") {\r\n <mt-toggle-field\r\n [(ngModel)]=\"row[col.key]\"\r\n (ngModelChange)=\"\r\n onCellChange(row, col.key, $event, 'boolean')\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"date\") {\r\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\r\n }\r\n @case (\"custom\") {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n col.customCellTpl;\r\n context: { $implicit: row }\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n @default {\r\n {{ getProperty(row, col.key) }}\r\n }\r\n }\r\n </td>\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <td class=\"text-right\">\r\n <div class=\"flex items-center justify-end space-x-2\">\r\n @for (action of rowActions(); track $index) {\r\n @let hidden = action.hidden?.(row);\r\n @if (!hidden) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size || 'small'\"\r\n (click)=\"rowAction($event, action, row)\"\r\n [tooltip]=\"action.tooltip\"\r\n [label]=\"action.label\"\r\n [loading]=\"resolveActionLoading(action, row)\"\r\n ></mt-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"20\" class=\"text-center\">\r\n <div class=\"flex justify-center\">No data found.</div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-col gap-3 pb-3 px-4\"\r\n [class]=\"'items-' + paginatorPosition()\"\r\n >\r\n <mt-paginator\r\n [(rows)]=\"pageSize\"\r\n [(first)]=\"first\"\r\n [(page)]=\"currentPage\"\r\n [totalRecords]=\"totalRecords()\"\r\n [alwaysShow]=\"false\"\r\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n (onPageChange)=\"onPaginatorPage($event)\"\r\n ></mt-paginator>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Paginator, selector: "mt-paginator", inputs: ["rows", "totalRecords", "first", "page", "rowsPerPageOptions", "showFirstLastIcon", "showCurrentPageReport", "fluid", "pageLinkSize", "alwaysShow"], outputs: ["rowsChange", "firstChange", "pageChange", "onPageChange"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i4.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: TableFilter, selector: "mt-table-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "filterReset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
452
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Table, isStandalone: true, selector: "mt-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showGridlines: { classPropertyName: "showGridlines", publicName: "showGridlines", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, generalSearch: { classPropertyName: "generalSearch", publicName: "generalSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, updating: { classPropertyName: "updating", publicName: "updating", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, lazyTotalRecords: { classPropertyName: "lazyTotalRecords", publicName: "lazyTotalRecords", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionLabel: { classPropertyName: "tabsOptionLabel", publicName: "tabsOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionValue: { classPropertyName: "tabsOptionValue", publicName: "tabsOptionValue", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, filterTerm: { classPropertyName: "filterTerm", publicName: "filterTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cellChange: "cellChange", lazyLoad: "lazyLoad", columnReorder: "columnReorder", rowReorder: "rowReorder", filters: "filtersChange", activeTab: "activeTabChange", onTabChange: "onTabChange", pageSize: "pageSizeChange", currentPage: "currentPageChange", first: "firstChange", filterTerm: "filterTermChange" }, queries: [{ propertyName: "captionStartContent", first: true, predicate: ["captionStart"], descendants: true, isSignal: true }, { propertyName: "captionEndContent", first: true, predicate: ["captionEnd"], descendants: true, isSignal: true }, { propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["dt"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"space-y-4 rounded-2xl\">\r\n <div>\r\n @if (\r\n captionStartContent() ||\r\n captionEndContent() ||\r\n generalSearch() ||\r\n showFilters() ||\r\n tabs()?.length > 0 ||\r\n actions()?.length > 0\r\n ) {\r\n <div class=\"p-datatable-header rounded-t-2xl\">\r\n <div\r\n class=\"flex relative\"\r\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"captionStartContent()\"\r\n ></ng-container>\r\n @if (tabs()) {\r\n <mt-tabs\r\n [(active)]=\"activeTab\"\r\n [options]=\"tabs()\"\r\n [optionLabel]=\"tabsOptionLabel()\"\r\n [optionValue]=\"tabsOptionValue()\"\r\n (onChange)=\"tabChanged($event)\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n }\r\n @if (generalSearch()) {\r\n <mt-text-field\r\n [(ngModel)]=\"filterTerm\"\r\n (change)=\"onSearchChange($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"'components.table.search' | transloco\"\r\n ></mt-text-field>\r\n }\r\n </div>\r\n <div class=\"flex items-center gap-2\">\r\n @if (showFilters()) {\r\n <mt-table-filter\r\n [columns]=\"columns()\"\r\n [data]=\"data()\"\r\n [ngModel]=\"filters()\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (filterReset)=\"onFilterReset()\"\r\n />\r\n }\r\n @if (exportable()) {\r\n <mt-button\r\n icon=\"general.share-05\"\r\n [label]=\"'components.table.export' | transloco\"\r\n (click)=\"exportCSV()\"\r\n />\r\n }\r\n @if (actions()?.length > 0) {\r\n <div class=\"flex items-center space-x-2\">\r\n @for (action of actions(); track action.label) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size\"\r\n (click)=\"action.action(row)\"\r\n [label]=\"action.label\"\r\n [tooltip]=\"action.tooltip\"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"captionEndContent()\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!loading() && emptyContent() && data().length === 0) {\r\n <div\r\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"overflow-x-auto bg-content\">\r\n <p-table\r\n #dt\r\n [value]=\"displayData()\"\r\n [columns]=\"columns()\"\r\n [size]=\"size()\"\r\n [showGridlines]=\"showGridlines()\"\r\n [stripedRows]=\"stripedRows()\"\r\n [lazy]=\"lazy()\"\r\n [totalRecords]=\"totalRecords()\"\r\n [reorderableColumns]=\"reorderableColumns()\"\r\n [reorderableRows]=\"reorderableRows()\"\r\n [dataKey]=\"dataKey()\"\r\n [first]=\"first()\"\r\n [rows]=\"pageSize()\"\r\n [exportFilename]=\"exportFilename()\"\r\n (onPage)=\"onTablePage($event)\"\r\n (onLazyLoad)=\"handleLazyLoad($event)\"\r\n (onColReorder)=\"onColumnReorder($event)\"\r\n (onRowReorder)=\"onRowReorder($event)\"\r\n paginator\r\n paginatorStyleClass=\"hidden!\"\r\n class=\"min-w-full text-sm align-middle table-fixed\"\r\n >\r\n <ng-template\r\n #header\r\n let-columns\r\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\r\n >\r\n <tr>\r\n @if (reorderableRows()) {\r\n <th class=\"w-10\"></th>\r\n }\r\n @if (selectableRows()) {\r\n <th class=\"w-12 text-start\">\r\n <mt-checkbox-field\r\n [ngModel]=\"allSelectedOnPage()\"\r\n (ngModelChange)=\"toggleAllRowsOnPage()\"\r\n ></mt-checkbox-field>\r\n </th>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n @if (reorderableColumns()) {\r\n <th\r\n pReorderableColumn\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n {{ col.label }}\r\n <!-- <mt-icon-->\r\n <!-- icon=\"general.menu-05\"-->\r\n <!-- class=\"text-xs text-gray-400\"-->\r\n <!-- ></mt-icon>-->\r\n <mt-button\r\n styleClass=\"cursor-move!\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n icon=\"general.menu-05\"\r\n ></mt-button>\r\n </div>\r\n </th>\r\n } @else {\r\n <th\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n {{ col.label }}\r\n </th>\r\n }\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <th\r\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n Actions\r\n </th>\r\n }\r\n </tr>\r\n @if (updating()) {\r\n <tr>\r\n <th\r\n [attr.colspan]=\"\r\n columns.length +\r\n (reorderableRows() ? 1 : 0) +\r\n (selectableRows() ? 1 : 0) +\r\n (rowActions().length > 0 ? 1 : 0)\r\n \"\r\n class=\"!p-0\"\r\n >\r\n <p-progressBar\r\n mode=\"indeterminate\"\r\n [style]=\"{ height: '4px' }\"\r\n />\r\n </th>\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template\r\n #body\r\n let-row\r\n let-columns=\"columns\"\r\n let-index=\"rowIndex\"\r\n class=\"divide-y divide-gray-200\"\r\n >\r\n @if (loading()) {\r\n <tr>\r\n @if (reorderableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (selectableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (rowActions().length > 0) {\r\n <td><p-skeleton /></td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\r\n [pReorderableRow]=\"index\"\r\n >\r\n @if (reorderableRows()) {\r\n <td class=\"w-10 text-center\">\r\n <mt-button\r\n styleClass=\"cursor-move!\"\r\n pReorderableRowHandle\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n icon=\"general.menu-05\"\r\n ></mt-button>\r\n <!-- <mt-icon-->\r\n <!-- icon=\"general.menu-05\"-->\r\n <!-- class=\"cursor-move text-gray-500\"-->\r\n <!-- pReorderableRowHandle-->\r\n <!-- ></mt-icon>-->\r\n </td>\r\n }\r\n @if (selectableRows()) {\r\n <td class=\"w-12\">\r\n <mt-checkbox-field\r\n [ngModel]=\"selectedRows().has(row)\"\r\n (ngModelChange)=\"toggleRow(row)\"\r\n ></mt-checkbox-field>\r\n </td>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td class=\"text-gray-700 dark:text-gray-100\">\r\n @switch (col.type) {\r\n @case (\"boolean\") {\r\n <mt-toggle-field\r\n [(ngModel)]=\"row[col.key]\"\r\n (ngModelChange)=\"\r\n onCellChange(row, col.key, $event, 'boolean')\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"date\") {\r\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\r\n }\r\n @case (\"custom\") {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n col.customCellTpl;\r\n context: { $implicit: row }\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n @default {\r\n {{ getProperty(row, col.key) }}\r\n }\r\n }\r\n </td>\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <td class=\"text-right\">\r\n <div class=\"flex items-center justify-end space-x-2\">\r\n @for (action of rowActions(); track $index) {\r\n @let hidden = action.hidden?.(row);\r\n @if (!hidden) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size || 'small'\"\r\n (click)=\"rowAction($event, action, row)\"\r\n [tooltip]=\"action.tooltip\"\r\n [label]=\"action.label\"\r\n [loading]=\"resolveActionLoading(action, row)\"\r\n ></mt-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"20\" class=\"text-center\">\r\n <div class=\"flex justify-center\">No data found.</div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-col gap-3 pb-3 px-4\"\r\n [class]=\"'items-' + paginatorPosition()\"\r\n >\r\n <mt-paginator\r\n [(rows)]=\"pageSize\"\r\n [(first)]=\"first\"\r\n [(page)]=\"currentPage\"\r\n [totalRecords]=\"totalRecords()\"\r\n [alwaysShow]=\"false\"\r\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n (onPageChange)=\"onPaginatorPage($event)\"\r\n ></mt-paginator>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Paginator, selector: "mt-paginator", inputs: ["rows", "totalRecords", "first", "page", "rowsPerPageOptions", "showFirstLastIcon", "showCurrentPageReport", "fluid", "pageLinkSize", "alwaysShow"], outputs: ["rowsChange", "firstChange", "pageChange", "onPageChange"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i4.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: TableFilter, selector: "mt-table-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "filterReset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
453
453
|
}
|
|
454
454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Table, decorators: [{
|
|
455
455
|
type: Component,
|
|
@@ -469,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
469
469
|
TranslocoModule,
|
|
470
470
|
Icon,
|
|
471
471
|
TableFilter,
|
|
472
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"space-y-4 rounded-2xl\">\r\n <div>\r\n @if (\r\n captionStartContent() ||\r\n captionEndContent() ||\r\n generalSearch() ||\r\n showFilters() ||\r\n tabs()?.length > 0 ||\r\n actions()?.length > 0\r\n ) {\r\n <div class=\"p-datatable-header rounded-t-2xl\">\r\n <div\r\n class=\"flex relative\"\r\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"captionStartContent()\"\r\n ></ng-container>\r\n @if (tabs()) {\r\n <mt-tabs\r\n [(active)]=\"activeTab\"\r\n [options]=\"tabs()\"\r\n [optionLabel]=\"tabsOptionLabel()\"\r\n [optionValue]=\"tabsOptionValue()\"\r\n (onChange)=\"tabChanged($event)\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n }\r\n @if (generalSearch()) {\r\n <mt-text-field\r\n [(ngModel)]=\"filterTerm\"\r\n (change)=\"onSearchChange($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"'components.table.search' | transloco\"\r\n ></mt-text-field>\r\n }\r\n </div>\r\n <div class=\"flex items-center gap-2\">\r\n @if (showFilters()) {\r\n <mt-table-filter\r\n [columns]=\"columns()\"\r\n [data]=\"data()\"\r\n [ngModel]=\"filters()\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (filterReset)=\"onFilterReset()\"\r\n />\r\n }\r\n @if (exportable()) {\r\n <mt-button\r\n icon=\"general.share-05\"\r\n [label]=\"'components.table.export' | transloco\"\r\n (click)=\"exportCSV()\"\r\n />\r\n }\r\n @if (actions()?.length > 0) {\r\n <div class=\"flex items-center space-x-2\">\r\n @for (action of actions(); track action.label) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size\"\r\n (click)=\"action.action(row)\"\r\n [label]=\"action.label\"\r\n [tooltip]=\"action.tooltip\"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"captionEndContent()\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!loading() && emptyContent() && data().length === 0) {\r\n <div\r\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"overflow-x-auto bg-content\">\r\n <p-table\r\n #dt\r\n [value]=\"displayData()\"\r\n [columns]=\"columns()\"\r\n [size]=\"size()\"\r\n [showGridlines]=\"showGridlines()\"\r\n [stripedRows]=\"stripedRows()\"\r\n [lazy]=\"lazy()\"\r\n [totalRecords]=\"totalRecords()\"\r\n [reorderableColumns]=\"reorderableColumns()\"\r\n [reorderableRows]=\"reorderableRows()\"\r\n [dataKey]=\"dataKey()\"\r\n [first]=\"first()\"\r\n [rows]=\"pageSize()\"\r\n [exportFilename]=\"exportFilename()\"\r\n (onPage)=\"onTablePage($event)\"\r\n (onLazyLoad)=\"handleLazyLoad($event)\"\r\n (onColReorder)=\"onColumnReorder($event)\"\r\n (onRowReorder)=\"onRowReorder($event)\"\r\n paginator\r\n paginatorStyleClass=\"hidden!\"\r\n class=\"min-w-full text-sm align-middle table-fixed\"\r\n >\r\n <ng-template\r\n #header\r\n let-columns\r\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\r\n >\r\n <tr>\r\n @if (reorderableRows()) {\r\n <th class=\"w-10\"></th>\r\n }\r\n @if (selectableRows()) {\r\n <th class=\"w-12 text-start\">\r\n <mt-checkbox-field\r\n [ngModel]=\"allSelectedOnPage()\"\r\n (ngModelChange)=\"toggleAllRowsOnPage()\"\r\n ></mt-checkbox-field>\r\n </th>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n @if (reorderableColumns()) {\r\n <th\r\n pReorderableColumn\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n {{ col.label }}\r\n <mt-icon\r\n icon=\"general.menu-05\"\r\n class=\"text-xs text-gray-400\"\r\n ></mt-icon>\r\n </div>\r\n </th>\r\n } @else {\r\n <th\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n {{ col.label }}\r\n </th>\r\n }\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <th\r\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n Actions\r\n </th>\r\n }\r\n </tr>\r\n @if (updating()) {\r\n <tr>\r\n <th\r\n [attr.colspan]=\"\r\n columns.length +\r\n (reorderableRows() ? 1 : 0) +\r\n (selectableRows() ? 1 : 0) +\r\n (rowActions().length > 0 ? 1 : 0)\r\n \"\r\n class=\"!p-0\"\r\n >\r\n <p-progressBar\r\n mode=\"indeterminate\"\r\n [style]=\"{ height: '4px' }\"\r\n />\r\n </th>\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template\r\n #body\r\n let-row\r\n let-columns=\"columns\"\r\n let-index=\"rowIndex\"\r\n class=\"divide-y divide-gray-200\"\r\n >\r\n @if (loading()) {\r\n <tr>\r\n @if (reorderableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (selectableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (rowActions().length > 0) {\r\n <td><p-skeleton /></td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\r\n [pReorderableRow]=\"index\"\r\n >\r\n @if (reorderableRows()) {\r\n <td class=\"w-10 text-center\">\r\n <mt-icon\r\n icon=\"general.menu-05\"\r\n class=\"cursor-move text-gray-500\"\r\n pReorderableRowHandle\r\n ></mt-icon>\r\n </td>\r\n }\r\n @if (selectableRows()) {\r\n <td class=\"w-12\">\r\n <mt-checkbox-field\r\n [ngModel]=\"selectedRows().has(row)\"\r\n (ngModelChange)=\"toggleRow(row)\"\r\n ></mt-checkbox-field>\r\n </td>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td class=\"text-gray-700 dark:text-gray-100\">\r\n @switch (col.type) {\r\n @case (\"boolean\") {\r\n <mt-toggle-field\r\n [(ngModel)]=\"row[col.key]\"\r\n (ngModelChange)=\"\r\n onCellChange(row, col.key, $event, 'boolean')\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"date\") {\r\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\r\n }\r\n @case (\"custom\") {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n col.customCellTpl;\r\n context: { $implicit: row }\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n @default {\r\n {{ getProperty(row, col.key) }}\r\n }\r\n }\r\n </td>\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <td class=\"text-right\">\r\n <div class=\"flex items-center justify-end space-x-2\">\r\n @for (action of rowActions(); track $index) {\r\n @let hidden = action.hidden?.(row);\r\n @if (!hidden) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size || 'small'\"\r\n (click)=\"rowAction($event, action, row)\"\r\n [tooltip]=\"action.tooltip\"\r\n [label]=\"action.label\"\r\n [loading]=\"resolveActionLoading(action, row)\"\r\n ></mt-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"20\" class=\"text-center\">\r\n <div class=\"flex justify-center\">No data found.</div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-col gap-3 pb-3 px-4\"\r\n [class]=\"'items-' + paginatorPosition()\"\r\n >\r\n <mt-paginator\r\n [(rows)]=\"pageSize\"\r\n [(first)]=\"first\"\r\n [(page)]=\"currentPage\"\r\n [totalRecords]=\"totalRecords()\"\r\n [alwaysShow]=\"false\"\r\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n (onPageChange)=\"onPaginatorPage($event)\"\r\n ></mt-paginator>\r\n </div>\r\n</div>\r\n" }]
|
|
472
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"space-y-4 rounded-2xl\">\r\n <div>\r\n @if (\r\n captionStartContent() ||\r\n captionEndContent() ||\r\n generalSearch() ||\r\n showFilters() ||\r\n tabs()?.length > 0 ||\r\n actions()?.length > 0\r\n ) {\r\n <div class=\"p-datatable-header rounded-t-2xl\">\r\n <div\r\n class=\"flex relative\"\r\n [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"captionStartContent()\"\r\n ></ng-container>\r\n @if (tabs()) {\r\n <mt-tabs\r\n [(active)]=\"activeTab\"\r\n [options]=\"tabs()\"\r\n [optionLabel]=\"tabsOptionLabel()\"\r\n [optionValue]=\"tabsOptionValue()\"\r\n (onChange)=\"tabChanged($event)\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n }\r\n @if (generalSearch()) {\r\n <mt-text-field\r\n [(ngModel)]=\"filterTerm\"\r\n (change)=\"onSearchChange($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"'components.table.search' | transloco\"\r\n ></mt-text-field>\r\n }\r\n </div>\r\n <div class=\"flex items-center gap-2\">\r\n @if (showFilters()) {\r\n <mt-table-filter\r\n [columns]=\"columns()\"\r\n [data]=\"data()\"\r\n [ngModel]=\"filters()\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (filterReset)=\"onFilterReset()\"\r\n />\r\n }\r\n @if (exportable()) {\r\n <mt-button\r\n icon=\"general.share-05\"\r\n [label]=\"'components.table.export' | transloco\"\r\n (click)=\"exportCSV()\"\r\n />\r\n }\r\n @if (actions()?.length > 0) {\r\n <div class=\"flex items-center space-x-2\">\r\n @for (action of actions(); track action.label) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size\"\r\n (click)=\"action.action(row)\"\r\n [label]=\"action.label\"\r\n [tooltip]=\"action.tooltip\"\r\n ></mt-button>\r\n }\r\n </div>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"captionEndContent()\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!loading() && emptyContent() && data().length === 0) {\r\n <div\r\n class=\"p-4 bg-content rounded-md text-center text-gray-600 dark:text-gray-300\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"emptyContent()\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"overflow-x-auto bg-content\">\r\n <p-table\r\n #dt\r\n [value]=\"displayData()\"\r\n [columns]=\"columns()\"\r\n [size]=\"size()\"\r\n [showGridlines]=\"showGridlines()\"\r\n [stripedRows]=\"stripedRows()\"\r\n [lazy]=\"lazy()\"\r\n [totalRecords]=\"totalRecords()\"\r\n [reorderableColumns]=\"reorderableColumns()\"\r\n [reorderableRows]=\"reorderableRows()\"\r\n [dataKey]=\"dataKey()\"\r\n [first]=\"first()\"\r\n [rows]=\"pageSize()\"\r\n [exportFilename]=\"exportFilename()\"\r\n (onPage)=\"onTablePage($event)\"\r\n (onLazyLoad)=\"handleLazyLoad($event)\"\r\n (onColReorder)=\"onColumnReorder($event)\"\r\n (onRowReorder)=\"onRowReorder($event)\"\r\n paginator\r\n paginatorStyleClass=\"hidden!\"\r\n class=\"min-w-full text-sm align-middle table-fixed\"\r\n >\r\n <ng-template\r\n #header\r\n let-columns\r\n class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\r\n >\r\n <tr>\r\n @if (reorderableRows()) {\r\n <th class=\"w-10\"></th>\r\n }\r\n @if (selectableRows()) {\r\n <th class=\"w-12 text-start\">\r\n <mt-checkbox-field\r\n [ngModel]=\"allSelectedOnPage()\"\r\n (ngModelChange)=\"toggleAllRowsOnPage()\"\r\n ></mt-checkbox-field>\r\n </th>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n @if (reorderableColumns()) {\r\n <th\r\n pReorderableColumn\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n <div class=\"flex items-center gap-2\">\r\n {{ col.label }}\r\n <!-- <mt-icon-->\r\n <!-- icon=\"general.menu-05\"-->\r\n <!-- class=\"text-xs text-gray-400\"-->\r\n <!-- ></mt-icon>-->\r\n <mt-button\r\n styleClass=\"cursor-move!\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n icon=\"general.menu-05\"\r\n ></mt-button>\r\n </div>\r\n </th>\r\n } @else {\r\n <th\r\n class=\"text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n {{ col.label }}\r\n </th>\r\n }\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <th\r\n class=\"text-end! font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\r\n >\r\n Actions\r\n </th>\r\n }\r\n </tr>\r\n @if (updating()) {\r\n <tr>\r\n <th\r\n [attr.colspan]=\"\r\n columns.length +\r\n (reorderableRows() ? 1 : 0) +\r\n (selectableRows() ? 1 : 0) +\r\n (rowActions().length > 0 ? 1 : 0)\r\n \"\r\n class=\"!p-0\"\r\n >\r\n <p-progressBar\r\n mode=\"indeterminate\"\r\n [style]=\"{ height: '4px' }\"\r\n />\r\n </th>\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template\r\n #body\r\n let-row\r\n let-columns=\"columns\"\r\n let-index=\"rowIndex\"\r\n class=\"divide-y divide-gray-200\"\r\n >\r\n @if (loading()) {\r\n <tr>\r\n @if (reorderableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (selectableRows()) {\r\n <td><p-skeleton /></td>\r\n }\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td><p-skeleton /></td>\r\n }\r\n @if (rowActions().length > 0) {\r\n <td><p-skeleton /></td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\r\n [pReorderableRow]=\"index\"\r\n >\r\n @if (reorderableRows()) {\r\n <td class=\"w-10 text-center\">\r\n <mt-button\r\n styleClass=\"cursor-move!\"\r\n pReorderableRowHandle\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n icon=\"general.menu-05\"\r\n ></mt-button>\r\n <!-- <mt-icon-->\r\n <!-- icon=\"general.menu-05\"-->\r\n <!-- class=\"cursor-move text-gray-500\"-->\r\n <!-- pReorderableRowHandle-->\r\n <!-- ></mt-icon>-->\r\n </td>\r\n }\r\n @if (selectableRows()) {\r\n <td class=\"w-12\">\r\n <mt-checkbox-field\r\n [ngModel]=\"selectedRows().has(row)\"\r\n (ngModelChange)=\"toggleRow(row)\"\r\n ></mt-checkbox-field>\r\n </td>\r\n }\r\n\r\n @for (col of columns; track col.key || col.label || $index) {\r\n <td class=\"text-gray-700 dark:text-gray-100\">\r\n @switch (col.type) {\r\n @case (\"boolean\") {\r\n <mt-toggle-field\r\n [(ngModel)]=\"row[col.key]\"\r\n (ngModelChange)=\"\r\n onCellChange(row, col.key, $event, 'boolean')\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"date\") {\r\n {{ getProperty(row, col.key) | date: \"mediumDate\" }}\r\n }\r\n @case (\"custom\") {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n col.customCellTpl;\r\n context: { $implicit: row }\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n @default {\r\n {{ getProperty(row, col.key) }}\r\n }\r\n }\r\n </td>\r\n }\r\n\r\n @if (rowActions().length > 0) {\r\n <td class=\"text-right\">\r\n <div class=\"flex items-center justify-end space-x-2\">\r\n @for (action of rowActions(); track $index) {\r\n @let hidden = action.hidden?.(row);\r\n @if (!hidden) {\r\n <mt-button\r\n [icon]=\"action.icon\"\r\n [severity]=\"action.color\"\r\n [variant]=\"action.variant\"\r\n [size]=\"action.size || 'small'\"\r\n (click)=\"rowAction($event, action, row)\"\r\n [tooltip]=\"action.tooltip\"\r\n [label]=\"action.label\"\r\n [loading]=\"resolveActionLoading(action, row)\"\r\n ></mt-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"20\" class=\"text-center\">\r\n <div class=\"flex justify-center\">No data found.</div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-col gap-3 pb-3 px-4\"\r\n [class]=\"'items-' + paginatorPosition()\"\r\n >\r\n <mt-paginator\r\n [(rows)]=\"pageSize\"\r\n [(first)]=\"first\"\r\n [(page)]=\"currentPage\"\r\n [totalRecords]=\"totalRecords()\"\r\n [alwaysShow]=\"false\"\r\n [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\r\n (onPageChange)=\"onPaginatorPage($event)\"\r\n ></mt-paginator>\r\n </div>\r\n</div>\r\n" }]
|
|
473
473
|
}], propDecorators: { selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showGridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGridlines", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], selectableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableRows", required: false }] }], generalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalSearch", required: false }] }], showFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilters", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], updating: [{ type: i0.Input, args: [{ isSignal: true, alias: "updating", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], lazyTotalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyTotalRecords", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabsOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsOptionLabel", required: false }] }], tabsOptionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsOptionValue", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], captionStartContent: [{ type: i0.ContentChild, args: ['captionStart', { isSignal: true }] }], captionEndContent: [{ type: i0.ContentChild, args: ['captionEnd', { isSignal: true }] }], emptyContent: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['dt', { isSignal: true }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], filterTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTerm", required: false }] }, { type: i0.Output, args: ["filterTermChange"] }] } });
|
|
474
474
|
|
|
475
475
|
/**
|