@masterteam/components 0.0.180 → 0.0.181
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-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-field-validation.mjs +24 -4
- package/fesm2022/masterteam-components-field-validation.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-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 +25 -11
- package/fesm2022/masterteam-components-table.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-user-search-field.mjs +34 -4
- package/fesm2022/masterteam-components-user-search-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +3 -3
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +16 -16
- package/types/masterteam-components-field-validation.d.ts +8 -0
- package/types/masterteam-components-table.d.ts +2 -0
- package/types/masterteam-components-user-search-field.d.ts +2 -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\
|
|
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 });
|
|
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\
|
|
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" }]
|
|
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 {
|
|
@@ -980,7 +980,7 @@ class TableFilter {
|
|
|
980
980
|
useExisting: forwardRef(() => TableFilter),
|
|
981
981
|
multi: true,
|
|
982
982
|
},
|
|
983
|
-
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\
|
|
983
|
+
], 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 });
|
|
984
984
|
}
|
|
985
985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilter, decorators: [{
|
|
986
986
|
type: Component,
|
|
@@ -996,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
996
996
|
useExisting: forwardRef(() => TableFilter),
|
|
997
997
|
multi: true,
|
|
998
998
|
},
|
|
999
|
-
], template: "<mt-button\
|
|
999
|
+
], 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" }]
|
|
1000
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 }] }] } });
|
|
1001
1001
|
|
|
1002
1002
|
/**
|
|
@@ -1715,7 +1715,7 @@ class Table {
|
|
|
1715
1715
|
});
|
|
1716
1716
|
}
|
|
1717
1717
|
onFilterApplied(filters) {
|
|
1718
|
-
this.filters.set(filters);
|
|
1718
|
+
this.filters.set(this.withoutGeneralSearch(filters));
|
|
1719
1719
|
this.first.set(0);
|
|
1720
1720
|
this.currentPage.set(0);
|
|
1721
1721
|
if (this.lazy()) {
|
|
@@ -1844,11 +1844,6 @@ class Table {
|
|
|
1844
1844
|
this.first.set(0);
|
|
1845
1845
|
this.currentPage.set(0);
|
|
1846
1846
|
if (this.lazy() && !this.lazyLocalSearch()) {
|
|
1847
|
-
const trimmedSearchTerm = searchTerm.trim();
|
|
1848
|
-
this.filters.set({
|
|
1849
|
-
...this.filters(),
|
|
1850
|
-
generalSearch: trimmedSearchTerm,
|
|
1851
|
-
});
|
|
1852
1847
|
this.emitLazyLoad({});
|
|
1853
1848
|
}
|
|
1854
1849
|
}
|
|
@@ -1951,9 +1946,28 @@ class Table {
|
|
|
1951
1946
|
pageSize: this.pageSize(),
|
|
1952
1947
|
currentPage: this.currentPage() + 1,
|
|
1953
1948
|
first: this.first(),
|
|
1954
|
-
filters: this.
|
|
1949
|
+
filters: this.lazyLoadFilters(),
|
|
1955
1950
|
});
|
|
1956
1951
|
}
|
|
1952
|
+
lazyLoadFilters() {
|
|
1953
|
+
const filters = this.withoutGeneralSearch(this.filters());
|
|
1954
|
+
const searchTerm = this.filterTerm().trim();
|
|
1955
|
+
if (!searchTerm || this.lazyLocalSearch()) {
|
|
1956
|
+
return filters;
|
|
1957
|
+
}
|
|
1958
|
+
return {
|
|
1959
|
+
...filters,
|
|
1960
|
+
generalSearch: searchTerm,
|
|
1961
|
+
};
|
|
1962
|
+
}
|
|
1963
|
+
withoutGeneralSearch(filters) {
|
|
1964
|
+
if (!Object.prototype.hasOwnProperty.call(filters, 'generalSearch')) {
|
|
1965
|
+
return filters;
|
|
1966
|
+
}
|
|
1967
|
+
const next = { ...filters };
|
|
1968
|
+
delete next['generalSearch'];
|
|
1969
|
+
return next;
|
|
1970
|
+
}
|
|
1957
1971
|
exportExcel() {
|
|
1958
1972
|
if (this.loading()) {
|
|
1959
1973
|
return;
|