@masterteam/components 0.0.178 → 0.0.179
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-table.mjs +45 -3
- 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/package.json +1 -1
- package/types/masterteam-components-table.d.ts +5 -0
|
@@ -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';
|