@masterteam/components 0.0.178 → 0.0.180
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/fesm2022/masterteam-components-confirmation.mjs +2 -2
- package/fesm2022/masterteam-components-confirmation.mjs.map +1 -1
- package/fesm2022/masterteam-components-drawer.mjs +2 -2
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +16 -16
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-location-field.mjs +4 -4
- package/fesm2022/masterteam-components-location-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-modal.mjs +28 -5
- package/fesm2022/masterteam-components-modal.mjs.map +1 -1
- package/fesm2022/masterteam-components-number-field.mjs +2 -2
- package/fesm2022/masterteam-components-number-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-radio-cards-field.mjs +2 -2
- package/fesm2022/masterteam-components-radio-cards-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-runtime-action.mjs.map +1 -1
- package/fesm2022/masterteam-components-select-field.mjs +2 -2
- package/fesm2022/masterteam-components-select-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +49 -7
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-tabs.mjs +2 -2
- package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
- package/fesm2022/masterteam-components-text-field.mjs +2 -2
- package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-textarea-field.mjs +2 -2
- package/fesm2022/masterteam-components-textarea-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-toggle-field.mjs +2 -2
- package/fesm2022/masterteam-components-toggle-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +3 -3
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/masterteam-components-modal.d.ts +5 -1
- package/types/masterteam-components-table.d.ts +5 -0
|
@@ -112,11 +112,11 @@ class TableActionsMenu {
|
|
|
112
112
|
this.menu()?.toggle(event);
|
|
113
113
|
}
|
|
114
114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableActionsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableActionsMenu, isStandalone: true, selector: "mt-table-actions-menu", inputs: { exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, activeGroup: { classPropertyName: "activeGroup", publicName: "activeGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested", printRequested: "printRequested", groupChange: "groupChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\n (click)=\"toggle($event)\"\n icon=\"general.dots-horizontal\"\n severity=\"secondary\"\n variant=\"outlined\"\n size=\"small\"\n [tooltip]=\"'components.table.actions' | transloco\"\n/>\n\n<p-tieredMenu\n #menu\n [model]=\"items()\"\n [popup]=\"true\"\n appendTo=\"body\"\n styleClass=\"mt-table-actions-menu\"\n>\n <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\n <button\n type=\"button\"\n class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\n [class.bg-primary-50]=\"item.selected\"\n [class.dark:bg-primary-950]=\"item.selected\"\n [class.text-primary-700]=\"item.selected\"\n >\n @if (item.iconKey) {\n @if (item.useAvatar) {\n <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\n } @else {\n <span\n class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\n [class]=\"toneClass[item.iconTone ?? 'secondary']\"\n >\n <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\n </span>\n }\n }\n <span class=\"flex-1 text-start truncate\">\n @if (item.labelKey) {\n {{ item.labelKey | transloco }}\n } @else {\n {{ item.rawLabel }}\n }\n </span>\n @if (item.badge) {\n <span\n class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\n >\n {{ item.badge }}\n </span>\n }\n @if (hasSubmenu) {\n <mt-icon\n icon=\"arrow.chevron-right\"\n class=\"text-xs text-gray-400 shrink-0\"\n />\n }\n </button>\n </ng-template>\n</p-tieredMenu>\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i1.TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableActionsMenu, isStandalone: true, selector: "mt-table-actions-menu", inputs: { exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, activeGroup: { classPropertyName: "activeGroup", publicName: "activeGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested", printRequested: "printRequested", groupChange: "groupChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\r\n (click)=\"toggle($event)\"\r\n icon=\"general.dots-horizontal\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [tooltip]=\"'components.table.actions' | transloco\"\r\n/>\r\n\r\n<p-tieredMenu\r\n #menu\r\n [model]=\"items()\"\r\n [popup]=\"true\"\r\n appendTo=\"body\"\r\n styleClass=\"mt-table-actions-menu\"\r\n>\r\n <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\r\n [class.bg-primary-50]=\"item.selected\"\r\n [class.dark:bg-primary-950]=\"item.selected\"\r\n [class.text-primary-700]=\"item.selected\"\r\n >\r\n @if (item.iconKey) {\r\n @if (item.useAvatar) {\r\n <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\r\n [class]=\"toneClass[item.iconTone ?? 'secondary']\"\r\n >\r\n <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\r\n </span>\r\n }\r\n }\r\n <span class=\"flex-1 text-start truncate\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | transloco }}\r\n } @else {\r\n {{ item.rawLabel }}\r\n }\r\n </span>\r\n @if (item.badge) {\r\n <span\r\n class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\r\n >\r\n {{ item.badge }}\r\n </span>\r\n }\r\n @if (hasSubmenu) {\r\n <mt-icon\r\n icon=\"arrow.chevron-right\"\r\n class=\"text-xs text-gray-400 shrink-0\"\r\n />\r\n }\r\n </button>\r\n </ng-template>\r\n</p-tieredMenu>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i1.TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
116
116
|
}
|
|
117
117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableActionsMenu, decorators: [{
|
|
118
118
|
type: Component,
|
|
119
|
-
args: [{ selector: 'mt-table-actions-menu', standalone: true, imports: [Avatar, Button, Icon, TieredMenuModule, TranslocoModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-button\n (click)=\"toggle($event)\"\n icon=\"general.dots-horizontal\"\n severity=\"secondary\"\n variant=\"outlined\"\n size=\"small\"\n [tooltip]=\"'components.table.actions' | transloco\"\n/>\n\n<p-tieredMenu\n #menu\n [model]=\"items()\"\n [popup]=\"true\"\n appendTo=\"body\"\n styleClass=\"mt-table-actions-menu\"\n>\n <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\n <button\n type=\"button\"\n class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\n [class.bg-primary-50]=\"item.selected\"\n [class.dark:bg-primary-950]=\"item.selected\"\n [class.text-primary-700]=\"item.selected\"\n >\n @if (item.iconKey) {\n @if (item.useAvatar) {\n <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\n } @else {\n <span\n class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\n [class]=\"toneClass[item.iconTone ?? 'secondary']\"\n >\n <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\n </span>\n }\n }\n <span class=\"flex-1 text-start truncate\">\n @if (item.labelKey) {\n {{ item.labelKey | transloco }}\n } @else {\n {{ item.rawLabel }}\n }\n </span>\n @if (item.badge) {\n <span\n class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\n >\n {{ item.badge }}\n </span>\n }\n @if (hasSubmenu) {\n <mt-icon\n icon=\"arrow.chevron-right\"\n class=\"text-xs text-gray-400 shrink-0\"\n />\n }\n </button>\n </ng-template>\n</p-tieredMenu>\n" }]
|
|
119
|
+
args: [{ selector: 'mt-table-actions-menu', standalone: true, imports: [Avatar, Button, Icon, TieredMenuModule, TranslocoModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-button\r\n (click)=\"toggle($event)\"\r\n icon=\"general.dots-horizontal\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [tooltip]=\"'components.table.actions' | transloco\"\r\n/>\r\n\r\n<p-tieredMenu\r\n #menu\r\n [model]=\"items()\"\r\n [popup]=\"true\"\r\n appendTo=\"body\"\r\n styleClass=\"mt-table-actions-menu\"\r\n>\r\n <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\r\n [class.bg-primary-50]=\"item.selected\"\r\n [class.dark:bg-primary-950]=\"item.selected\"\r\n [class.text-primary-700]=\"item.selected\"\r\n >\r\n @if (item.iconKey) {\r\n @if (item.useAvatar) {\r\n <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\r\n [class]=\"toneClass[item.iconTone ?? 'secondary']\"\r\n >\r\n <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\r\n </span>\r\n }\r\n }\r\n <span class=\"flex-1 text-start truncate\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | transloco }}\r\n } @else {\r\n {{ item.rawLabel }}\r\n }\r\n </span>\r\n @if (item.badge) {\r\n <span\r\n class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\r\n >\r\n {{ item.badge }}\r\n </span>\r\n }\r\n @if (hasSubmenu) {\r\n <mt-icon\r\n icon=\"arrow.chevron-right\"\r\n class=\"text-xs text-gray-400 shrink-0\"\r\n />\r\n }\r\n </button>\r\n </ng-template>\r\n</p-tieredMenu>\r\n" }]
|
|
120
120
|
}], propDecorators: { exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], printable: [{ type: i0.Input, args: [{ isSignal: true, alias: "printable", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], groupColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColumns", required: false }] }], activeGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeGroup", required: false }] }], exportRequested: [{ type: i0.Output, args: ["exportRequested"] }], printRequested: [{ type: i0.Output, args: ["printRequested"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
|
|
121
121
|
|
|
122
122
|
class TableValueResolver {
|
|
@@ -740,6 +740,10 @@ class TableValueResolver {
|
|
|
740
740
|
* `FilterConfig['type']`.
|
|
741
741
|
*/
|
|
742
742
|
const EMPTY_MULTI_VALUE = Object.freeze([]);
|
|
743
|
+
const DEFAULT_NUMBER_RANGE_MIN = -999999999999999;
|
|
744
|
+
const DEFAULT_NUMBER_RANGE_MAX = 999999999999999;
|
|
745
|
+
const PERCENTAGE_RANGE_MIN = 0;
|
|
746
|
+
const PERCENTAGE_RANGE_MAX = 100;
|
|
743
747
|
class TableFilterField {
|
|
744
748
|
column = input.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
745
749
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
@@ -789,6 +793,22 @@ class TableFilterField {
|
|
|
789
793
|
const raw = part === 'from' ? current.from : current.to;
|
|
790
794
|
return typeof raw === 'number' ? raw : raw == null ? null : Number(raw);
|
|
791
795
|
}
|
|
796
|
+
getNumberRangeMin() {
|
|
797
|
+
const configured = this.resolveConfiguredNumber('min');
|
|
798
|
+
if (configured !== null)
|
|
799
|
+
return configured;
|
|
800
|
+
return this.isPercentageColumn()
|
|
801
|
+
? PERCENTAGE_RANGE_MIN
|
|
802
|
+
: DEFAULT_NUMBER_RANGE_MIN;
|
|
803
|
+
}
|
|
804
|
+
getNumberRangeMax() {
|
|
805
|
+
const configured = this.resolveConfiguredNumber('max');
|
|
806
|
+
if (configured !== null)
|
|
807
|
+
return configured;
|
|
808
|
+
return this.isPercentageColumn()
|
|
809
|
+
? PERCENTAGE_RANGE_MAX
|
|
810
|
+
: DEFAULT_NUMBER_RANGE_MAX;
|
|
811
|
+
}
|
|
792
812
|
updateScalar(next) {
|
|
793
813
|
this.value.set(next);
|
|
794
814
|
}
|
|
@@ -829,10 +849,32 @@ class TableFilterField {
|
|
|
829
849
|
}
|
|
830
850
|
updateNumber(part, next) {
|
|
831
851
|
const current = this.value() ?? {};
|
|
832
|
-
this.value.set({ ...current, [part]: next });
|
|
852
|
+
this.value.set({ ...current, [part]: this.clampNumberRangeValue(next) });
|
|
853
|
+
}
|
|
854
|
+
isPercentageColumn() {
|
|
855
|
+
return this.column().viewType === 'Percentage';
|
|
856
|
+
}
|
|
857
|
+
resolveConfiguredNumber(key) {
|
|
858
|
+
const configured = this.column().filterConfig?.[key];
|
|
859
|
+
if (typeof configured === 'number' && Number.isFinite(configured)) {
|
|
860
|
+
return configured;
|
|
861
|
+
}
|
|
862
|
+
if (typeof configured === 'string' && configured.trim()) {
|
|
863
|
+
const parsed = Number(configured);
|
|
864
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
865
|
+
}
|
|
866
|
+
return null;
|
|
867
|
+
}
|
|
868
|
+
clampNumberRangeValue(value) {
|
|
869
|
+
if (value === null || value === undefined)
|
|
870
|
+
return null;
|
|
871
|
+
const numericValue = Number(value);
|
|
872
|
+
if (!Number.isFinite(numericValue))
|
|
873
|
+
return null;
|
|
874
|
+
return Math.min(this.getNumberRangeMax(), Math.max(this.getNumberRangeMin(), numericValue));
|
|
833
875
|
}
|
|
834
876
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilterField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableFilterField, isStandalone: true, selector: "mt-table-filter-field", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "@switch (getFilterType()) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"userSelect\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [markCurrentUser]=\"true\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"treeSelect\") {\r\n <mt-treeselect-field\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"treeOptions()\"\r\n [placeholder]=\"getTreePlaceholder()\"\r\n [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n [scrollHeight]=\"getTreeScrollHeight()\"\r\n [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n [filterBy]=\"getTreeFilterBy()\"\r\n [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n [resetFilterOnHide]=\"\r\n column().filterConfig?.['resetFilterOnHide'] !== false\r\n \"\r\n [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\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('from')\"\r\n (ngModelChange)=\"updateDate('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('to')\"\r\n (ngModelChange)=\"updateDate('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]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"booleanOptions()\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n @case (\"user\") {\r\n <mt-user-search-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"column().filterConfig?.label || column().label\"\r\n [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n [context]=\"column().filterConfig?.context\"\r\n />\r\n }\r\n @case (\"numberRange\") {\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-number-field\r\n [ngModel]=\"getNumberRangeValue('from')\"\r\n (ngModelChange)=\"updateNumber('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-number-field\r\n [ngModel]=\"getNumberRangeValue('to')\"\r\n (ngModelChange)=\"updateNumber('to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "isMultiple", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "component", type: TreeSelectField, selector: "mt-treeselect-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "required", "pInputs", "options", "selectionMode", "display", "scrollHeight", "panelStyleClass", "containerStyleClass", "overlayOptions", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "showClear", "resetFilterOnHide", "propagateSelectionDown", "propagateSelectionUp", "virtualScroll", "virtualScrollItemSize", "loading", "loadingMode", "size", "variant", "fluid", "appendTo", "selectedLabelPath"], outputs: ["onChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
877
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableFilterField, isStandalone: true, selector: "mt-table-filter-field", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "@switch (getFilterType()) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"userSelect\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [markCurrentUser]=\"true\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"treeSelect\") {\r\n <mt-treeselect-field\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"treeOptions()\"\r\n [placeholder]=\"getTreePlaceholder()\"\r\n [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n [scrollHeight]=\"getTreeScrollHeight()\"\r\n [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n [filterBy]=\"getTreeFilterBy()\"\r\n [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n [resetFilterOnHide]=\"\r\n column().filterConfig?.['resetFilterOnHide'] !== false\r\n \"\r\n [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\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('from')\"\r\n (ngModelChange)=\"updateDate('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('to')\"\r\n (ngModelChange)=\"updateDate('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]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"booleanOptions()\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n @case (\"user\") {\r\n <mt-user-search-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"column().filterConfig?.label || column().label\"\r\n [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n [context]=\"column().filterConfig?.context\"\r\n />\r\n }\r\n @case (\"numberRange\") {\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-number-field\r\n [ngModel]=\"getNumberRangeValue('from')\"\r\n (ngModelChange)=\"updateNumber('from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n [min]=\"getNumberRangeMin()\"\r\n [max]=\"getNumberRangeMax()\"\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-number-field\r\n [ngModel]=\"getNumberRangeValue('to')\"\r\n (ngModelChange)=\"updateNumber('to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n [min]=\"getNumberRangeMin()\"\r\n [max]=\"getNumberRangeMax()\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "isMultiple", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "component", type: TreeSelectField, selector: "mt-treeselect-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "required", "pInputs", "options", "selectionMode", "display", "scrollHeight", "panelStyleClass", "containerStyleClass", "overlayOptions", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "showClear", "resetFilterOnHide", "propagateSelectionDown", "propagateSelectionUp", "virtualScroll", "virtualScrollItemSize", "loading", "loadingMode", "size", "variant", "fluid", "appendTo", "selectedLabelPath"], outputs: ["onChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
836
878
|
}
|
|
837
879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilterField, decorators: [{
|
|
838
880
|
type: Component,
|
|
@@ -846,7 +888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
846
888
|
UserSearchField,
|
|
847
889
|
TreeSelectField,
|
|
848
890
|
TranslocoModule,
|
|
849
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (getFilterType()) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"userSelect\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [markCurrentUser]=\"true\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"treeSelect\") {\r\n <mt-treeselect-field\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"treeOptions()\"\r\n [placeholder]=\"getTreePlaceholder()\"\r\n [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n [scrollHeight]=\"getTreeScrollHeight()\"\r\n [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n [filterBy]=\"getTreeFilterBy()\"\r\n [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n [resetFilterOnHide]=\"\r\n column().filterConfig?.['resetFilterOnHide'] !== false\r\n \"\r\n [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\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('from')\"\r\n (ngModelChange)=\"updateDate('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('to')\"\r\n (ngModelChange)=\"updateDate('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]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"booleanOptions()\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n @case (\"user\") {\r\n <mt-user-search-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"column().filterConfig?.label || column().label\"\r\n [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n [context]=\"column().filterConfig?.context\"\r\n />\r\n }\r\n @case (\"numberRange\") {\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-number-field\r\n [ngModel]=\"getNumberRangeValue('from')\"\r\n (ngModelChange)=\"updateNumber('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-number-field\r\n [ngModel]=\"getNumberRangeValue('to')\"\r\n (ngModelChange)=\"updateNumber('to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n}\r\n" }]
|
|
891
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (getFilterType()) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n />\r\n }\r\n @case (\"select\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"userSelect\") {\r\n @if (isMultiple()) {\r\n <mt-multi-select-field\r\n [ngModel]=\"multiValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [showClear]=\"true\"\r\n [filter]=\"true\"\r\n filterBy=\"label\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"filterOptions()\"\r\n [placeholder]=\"\r\n ('components.table.select' | transloco) +\r\n ' ' +\r\n (column().filterConfig?.label || column().label)\r\n \"\r\n [hasPlaceholderPrefix]=\"false\"\r\n [markCurrentUser]=\"true\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n }\r\n @case (\"treeSelect\") {\r\n <mt-treeselect-field\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"treeOptions()\"\r\n [placeholder]=\"getTreePlaceholder()\"\r\n [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n [scrollHeight]=\"getTreeScrollHeight()\"\r\n [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n [filterBy]=\"getTreeFilterBy()\"\r\n [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n [resetFilterOnHide]=\"\r\n column().filterConfig?.['resetFilterOnHide'] !== false\r\n \"\r\n [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\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('from')\"\r\n (ngModelChange)=\"updateDate('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('to')\"\r\n (ngModelChange)=\"updateDate('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]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [options]=\"booleanOptions()\"\r\n [placeholder]=\"'components.table.select' | transloco\"\r\n [hasPlaceholderPrefix]=\"false\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n showClear\r\n />\r\n }\r\n @case (\"user\") {\r\n <mt-user-search-field\r\n [ngModel]=\"getScalarValue()\"\r\n (ngModelChange)=\"updateScalar($event)\"\r\n [placeholder]=\"column().filterConfig?.label || column().label\"\r\n [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n [context]=\"column().filterConfig?.context\"\r\n />\r\n }\r\n @case (\"numberRange\") {\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-number-field\r\n [ngModel]=\"getNumberRangeValue('from')\"\r\n (ngModelChange)=\"updateNumber('from', $event)\"\r\n [placeholder]=\"'components.table.from' | transloco\"\r\n [min]=\"getNumberRangeMin()\"\r\n [max]=\"getNumberRangeMax()\"\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-number-field\r\n [ngModel]=\"getNumberRangeValue('to')\"\r\n (ngModelChange)=\"updateNumber('to', $event)\"\r\n [placeholder]=\"'components.table.to' | transloco\"\r\n [min]=\"getNumberRangeMin()\"\r\n [max]=\"getNumberRangeMax()\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n}\r\n" }]
|
|
850
892
|
}], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
851
893
|
|
|
852
894
|
const OVERLAY_SELECTOR$1 = '.p-popover, .p-select-overlay, .p-multiselect-overlay, .p-treeselect-overlay, .p-datepicker-panel, .p-autocomplete-overlay';
|
|
@@ -938,7 +980,7 @@ class TableFilter {
|
|
|
938
980
|
useExisting: forwardRef(() => TableFilter),
|
|
939
981
|
multi: true,
|
|
940
982
|
},
|
|
941
|
-
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\n (click)=\"popover.toggle($event)\"\n [label]=\"'components.table.filter' | transloco\"\n [badge]=\"activeFilterCount()\"\n severity=\"primary\"\n size=\"small\"\n icon=\"general.filter-funnel-01\"\n/>\n\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\n <div class=\"flex flex-col max-h-[50vh]\">\n <h4\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\n >\n {{ \"components.table.filterOptions\" | transloco }}\n </h4>\n\n <div\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\n (keydown.enter)=\"apply(); popover.hide()\"\n >\n @for (col of filterableColumns(); track col.key) {\n <div class=\"space-y-1\">\n <label\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\n >\n {{ col.filterConfig?.label || col.label }}\n </label>\n <mt-table-filter-field\n [column]=\"col\"\n [value]=\"pendingFilters()[col.key]\"\n (valueChange)=\"updateFilter(col.key, $event)\"\n />\n </div>\n }\n </div>\n\n <div\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\n >\n <mt-button\n variant=\"outlined\"\n (click)=\"reset(); popover.hide()\"\n [label]=\"'components.table.reset' | transloco\"\n />\n <mt-button\n (click)=\"apply(); popover.hide()\"\n [label]=\"'components.table.apply' | transloco\"\n />\n </div>\n </div>\n</p-popover>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: i1$2.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: "component", type: TableFilterField, selector: "mt-table-filter-field", inputs: ["column", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
983
|
+
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], 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 size=\"small\"\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 <mt-table-filter-field\r\n [column]=\"col\"\r\n [value]=\"pendingFilters()[col.key]\"\r\n (valueChange)=\"updateFilter(col.key, $event)\"\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: "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: i1$2.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: "component", type: TableFilterField, selector: "mt-table-filter-field", inputs: ["column", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
942
984
|
}
|
|
943
985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilter, decorators: [{
|
|
944
986
|
type: Component,
|
|
@@ -954,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
954
996
|
useExisting: forwardRef(() => TableFilter),
|
|
955
997
|
multi: true,
|
|
956
998
|
},
|
|
957
|
-
], template: "<mt-button\n (click)=\"popover.toggle($event)\"\n [label]=\"'components.table.filter' | transloco\"\n [badge]=\"activeFilterCount()\"\n severity=\"primary\"\n size=\"small\"\n icon=\"general.filter-funnel-01\"\n/>\n\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\n <div class=\"flex flex-col max-h-[50vh]\">\n <h4\n class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\n >\n {{ \"components.table.filterOptions\" | transloco }}\n </h4>\n\n <div\n class=\"space-y-3 overflow-y-auto flex-1 py-3\"\n (keydown.enter)=\"apply(); popover.hide()\"\n >\n @for (col of filterableColumns(); track col.key) {\n <div class=\"space-y-1\">\n <label\n class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\n >\n {{ col.filterConfig?.label || col.label }}\n </label>\n <mt-table-filter-field\n [column]=\"col\"\n [value]=\"pendingFilters()[col.key]\"\n (valueChange)=\"updateFilter(col.key, $event)\"\n />\n </div>\n }\n </div>\n\n <div\n class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\n >\n <mt-button\n variant=\"outlined\"\n (click)=\"reset(); popover.hide()\"\n [label]=\"'components.table.reset' | transloco\"\n />\n <mt-button\n (click)=\"apply(); popover.hide()\"\n [label]=\"'components.table.apply' | transloco\"\n />\n </div>\n </div>\n</p-popover>\n" }]
|
|
999
|
+
], 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 size=\"small\"\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 <mt-table-filter-field\r\n [column]=\"col\"\r\n [value]=\"pendingFilters()[col.key]\"\r\n (valueChange)=\"updateFilter(col.key, $event)\"\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" }]
|
|
958
1000
|
}], ctorParameters: () => [], 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"] }], popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
|
|
959
1001
|
|
|
960
1002
|
/**
|