@mediusinc/mng-commons 7.0.0-rc.3 → 7.0.0-rc.4
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/mediusinc-mng-commons-core.mjs +62 -74
- package/fesm2022/mediusinc-mng-commons-core.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-form-api.mjs +30 -149
- package/fesm2022/mediusinc-mng-commons-form-api.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-form.mjs +103 -102
- package/fesm2022/mediusinc-mng-commons-form.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-Bhs_bBBv.mjs +30 -0
- package/fesm2022/{mediusinc-mng-commons-table-column-toggle.component-DnEnjeJ9.mjs.map → mediusinc-mng-commons-table-column-toggle.component-Bhs_bBBv.mjs.map} +1 -1
- package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-BuhoFRkG.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-CY5FbLvW.mjs} +116 -95
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-CY5FbLvW.mjs.map +1 -0
- package/fesm2022/mediusinc-mng-commons-table.mjs +1 -1
- package/fesm2022/mediusinc-mng-commons-tableview-api.mjs +14 -17
- package/fesm2022/mediusinc-mng-commons-tableview-api.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-tableview.mjs +159 -170
- package/fesm2022/mediusinc-mng-commons-tableview.mjs.map +1 -1
- package/package.json +22 -22
- package/{core/index.d.ts → types/mediusinc-mng-commons-core.d.ts} +1 -12
- package/{form/api/index.d.ts → types/mediusinc-mng-commons-form-api.d.ts} +12 -58
- package/{form/index.d.ts → types/mediusinc-mng-commons-form.d.ts} +2 -0
- package/{table/index.d.ts → types/mediusinc-mng-commons-table.d.ts} +20 -2
- package/{tableview/api/index.d.ts → types/mediusinc-mng-commons-tableview-api.d.ts} +4 -4
- package/{tableview/index.d.ts → types/mediusinc-mng-commons-tableview.d.ts} +9 -11
- package/version-info.json +3 -3
- package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-DnEnjeJ9.mjs +0 -30
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BuhoFRkG.mjs.map +0 -1
- /package/{filter/index.d.ts → types/mediusinc-mng-commons-filter.d.ts} +0 -0
- /package/{model/class/index.d.ts → types/mediusinc-mng-commons-model-class.d.ts} +0 -0
- /package/{model/index.d.ts → types/mediusinc-mng-commons-model.d.ts} +0 -0
- /package/{table/api/class/index.d.ts → types/mediusinc-mng-commons-table-api-class.d.ts} +0 -0
- /package/{table/api/index.d.ts → types/mediusinc-mng-commons-table-api.d.ts} +0 -0
- /package/{tableview/api/class/index.d.ts → types/mediusinc-mng-commons-tableview-api-class.d.ts} +0 -0
- /package/{index.d.ts → types/mediusinc-mng-commons.d.ts} +0 -0
|
@@ -366,10 +366,10 @@ function isFilterValueBlank(value) {
|
|
|
366
366
|
}
|
|
367
367
|
|
|
368
368
|
class ADataListService {
|
|
369
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
370
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ADataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
370
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ADataListService }); }
|
|
371
371
|
}
|
|
372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ADataListService, decorators: [{
|
|
373
373
|
type: Injectable
|
|
374
374
|
}] });
|
|
375
375
|
|
|
@@ -454,10 +454,10 @@ class FilterService {
|
|
|
454
454
|
this.setState(filterSetStateOnChange(currTableFilterState, currTableFilterState.matchMode, currTableFilterState.value, untracked(() => config.descriptor.filterType), untracked(() => config.dateConfig)), updateTable);
|
|
455
455
|
}
|
|
456
456
|
}
|
|
457
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
458
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
457
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
458
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterService }); }
|
|
459
459
|
}
|
|
460
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterService, decorators: [{
|
|
461
461
|
type: Injectable
|
|
462
462
|
}], ctorParameters: () => [] });
|
|
463
463
|
|
|
@@ -496,8 +496,8 @@ class TableFilterComponent {
|
|
|
496
496
|
this.#window = this.#document.defaultView;
|
|
497
497
|
this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
498
498
|
this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
|
|
499
|
-
this.showFilterIcon = input(false, ...(ngDevMode ?
|
|
500
|
-
this.showTitleAsPlaceholder = input(false, ...(ngDevMode ?
|
|
499
|
+
this.showFilterIcon = input(false, { ...(ngDevMode ? { debugName: "showFilterIcon" } : {}), transform: booleanAttribute });
|
|
500
|
+
this.showTitleAsPlaceholder = input(false, { ...(ngDevMode ? { debugName: "showTitleAsPlaceholder" } : {}), transform: booleanAttribute });
|
|
501
501
|
this.descriptorAsLookup = computed(() => this.config().descriptor instanceof FilterLookupDescriptor ? this.config().descriptor : undefined, ...(ngDevMode ? [{ debugName: "descriptorAsLookup" }] : []));
|
|
502
502
|
this.icon = viewChild('icon', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
503
503
|
this.matchModes = computed(() => this.config().matchModes, ...(ngDevMode ? [{ debugName: "matchModes" }] : []));
|
|
@@ -786,15 +786,15 @@ class TableFilterComponent {
|
|
|
786
786
|
}
|
|
787
787
|
return labelKey;
|
|
788
788
|
}
|
|
789
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableFilterComponent, isStandalone: true, selector: "mng-table-filter", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, showFilterIcon: { classPropertyName: "showFilterIcon", publicName: "showFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, showTitleAsPlaceholder: { classPropertyName: "showTitleAsPlaceholder", publicName: "showTitleAsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FilterService], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n <div\n class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n [class.mng-filter-active]=\"filter.isActive()\"\n [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n [class.mng-filter-required]=\"requiredFilterMissing\">\n @switch (config().descriptor.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (filter.state()?.displayMatchMode === 'between') {\n <mng-number-range\n vertical=\"true\"\n className=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (keyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (onKeyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\" />\n </p-inputgroup>\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <mng-dropdown\n optionsLabelProperty=\"label\"\n optionsValueProperty=\"value\"\n [ngModel]=\"filter.state()?.displayValue\"\n [options]=\"booleanOptions\"\n [optionsLabelTranslate]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"booleanFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n @case (FilterTypeEnum.Date) {\n @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n <mng-date-range\n vertical=\"true\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <mng-datetime-picker\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n [placeholder]=\"placeholder\"\n showIcon=\"true\"\n [time]=\"config().dateConfig?.showTime ?? false\"\n [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n [primeTimePicker]=\"config().dateConfig?.primeTimePicker ?? false\"\n [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n [dateFormat]=\"config().dateConfig?.format\"\n required=\"true\" />\n </p-inputgroup>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @default {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string\"\n [value]=\"filter.state()?.displayValue ?? ''\"\n [disabled]=\"isInputDisabled()\"\n (input)=\"onTextModelChange($event)\"\n (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n [attr.placeholder]=\"placeholder\"\n [mngInputTrim]=\"config().descriptor.trimOption\" />\n </p-inputgroup>\n }\n }\n\n <ng-template #lookupFilter>\n @if (descriptorAsLookup(); as lookup) {\n @switch (lookup.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"autocompleteFilter($event)\"\n [searchTrim]=\"config().descriptor.trimOption\"\n [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [showClear]=\"false\"\n [changeValueOnBlur]=\"isMultiselect()\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"dropdownFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n }\n }\n </ng-template>\n\n <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n\n <ng-template #iconTemplate>\n <button\n #icon\n class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n </ng-template>\n\n @if (overlayVisible()) {\n <div\n class=\"p-datatable-filter-overlay\"\n (click)=\"onContentClick()\"\n [@overlayAnimation]=\"'visible'\"\n (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n (keydown.escape)=\"onEscape()\">\n <ul class=\"p-datatable-filter-constraint-list\">\n @for (matchMode of matchModes(); track matchMode; let i = $index) {\n <li\n class=\"p-datatable-filter-constraint\"\n [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n (click)=\"onMatchModeChange(matchMode.value)\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n [attr.tabindex]=\"i === 0 ? '0' : null\">\n {{ matchMode.label }}\n </li>\n }\n @if (config().descriptor.filterType === FilterTypeEnum.String) {\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li\n class=\"p-datatable-filter-constraint\"\n (click)=\"onCaseSensitivityToggle()\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"onCaseSensitivityToggle()\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n </div>\n </li>\n }\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"clear()\">\n {{ 'mngPrime.noFilter' | translate }}\n </li>\n </ul>\n </div>\n }\n </div>\n\n @if (!showFilterIcon()) {\n <button\n #icon\n class=\"mng-filter-options cursor-pointer ml-1\"\n [ngClass]=\"{\n 'text-primary': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\">\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: AutocompleteTemplateDirective, selector: "[mngAutocompleteTemplate]", inputs: ["name"], exportAs: ["mngAutocompleteTemplate"] }, { kind: "directive", type: DropdownTemplateDirective, selector: "[mngDropdownTemplate]", inputs: ["name"], exportAs: ["mngDropdownTemplate"] }, { kind: "directive", type: DateRangeTemplateDirective, selector: "[mngDateRangeTemplate]", inputs: ["name"], exportAs: ["mngDateRangeTemplate"] }, { kind: "directive", type: NumberRangeTemplateDirective, selector: "[mngNumberRangeTemplate]", inputs: ["name"], exportAs: ["mngNumberRangeTemplate"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "required", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
789
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableFilterComponent, isStandalone: true, selector: "mng-table-filter", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, showFilterIcon: { classPropertyName: "showFilterIcon", publicName: "showFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, showTitleAsPlaceholder: { classPropertyName: "showTitleAsPlaceholder", publicName: "showTitleAsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FilterService], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n <div\n class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n [class.mng-filter-active]=\"filter.isActive()\"\n [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n [class.mng-filter-required]=\"requiredFilterMissing\">\n @switch (config().descriptor.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (filter.state()?.displayMatchMode === 'between') {\n <mng-number-range\n vertical=\"true\"\n className=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (keyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (onKeyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\" />\n </p-inputgroup>\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <mng-dropdown\n optionsLabelProperty=\"label\"\n optionsValueProperty=\"value\"\n [ngModel]=\"filter.state()?.displayValue\"\n [options]=\"booleanOptions\"\n [optionsLabelTranslate]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"booleanFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n @case (FilterTypeEnum.Date) {\n @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n <mng-date-range\n vertical=\"true\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <mng-datetime-picker\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [inputStyleClass]=\"showFilterIcon() ? '!rounded-s-none' : ''\"\n [placeholder]=\"placeholder\"\n showIcon=\"true\"\n [time]=\"config().dateConfig?.showTime ?? false\"\n [seconds]=\"config().dateConfig?.showSeconds ?? false\"\n [milliseconds]=\"config().dateConfig?.showMilliseconds ?? false\"\n [primeTimePicker]=\"config().dateConfig?.primeTimePicker ?? false\"\n [timeSelect]=\"config().dateConfig?.timeSelect ?? true\"\n [timeSelectInterval]=\"config().dateConfig?.timeSelectInterval ?? 60\"\n [dateFormat]=\"config().dateConfig?.format\"\n required=\"true\" />\n </p-inputgroup>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @default {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string\"\n [value]=\"filter.state()?.displayValue ?? ''\"\n [disabled]=\"isInputDisabled()\"\n (input)=\"onTextModelChange($event)\"\n (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n [attr.placeholder]=\"placeholder\"\n [mngInputTrim]=\"config().descriptor.trimOption\" />\n </p-inputgroup>\n }\n }\n\n <ng-template #lookupFilter>\n @if (descriptorAsLookup(); as lookup) {\n @switch (lookup.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"autocompleteFilter($event)\"\n [searchTrim]=\"config().descriptor.trimOption\"\n [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [showClear]=\"false\"\n [changeValueOnBlur]=\"isMultiselect()\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"dropdownFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n }\n }\n </ng-template>\n\n <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n\n <ng-template #iconTemplate>\n <button\n #icon\n class=\"mng-filter-options mng-filter-icon cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n </ng-template>\n\n @if (overlayVisible()) {\n <div\n class=\"p-datatable-filter-overlay\"\n (click)=\"onContentClick()\"\n [@overlayAnimation]=\"'visible'\"\n (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n (keydown.escape)=\"onEscape()\">\n <ul class=\"p-datatable-filter-constraint-list\">\n @for (matchMode of matchModes(); track matchMode; let i = $index) {\n <li\n class=\"p-datatable-filter-constraint\"\n [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n (click)=\"onMatchModeChange(matchMode.value)\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n [attr.tabindex]=\"i === 0 ? '0' : null\">\n {{ matchMode.label }}\n </li>\n }\n @if (config().descriptor.filterType === FilterTypeEnum.String) {\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li\n class=\"p-datatable-filter-constraint\"\n (click)=\"onCaseSensitivityToggle()\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"onCaseSensitivityToggle()\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n </div>\n </li>\n }\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"clear()\">\n {{ 'mngPrime.noFilter' | translate }}\n </li>\n </ul>\n </div>\n }\n </div>\n\n @if (!showFilterIcon()) {\n <button\n #icon\n class=\"mng-filter-options cursor-pointer ml-1\"\n [ngClass]=\"{\n 'text-primary': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\">\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n }\n</div>\n", styles: ["mng-table-filter{--filter-active-bg: var(--color-primary-50);--filter-active-color: var(--color-primary-600)}mng-table-filter .mng-filter-string{min-width:135px}mng-table-filter .mng-filter-number{min-width:165px}mng-table-filter .mng-filter-date{min-width:170px}mng-table-filter .mng-filter-boolean{min-width:80px}mng-table-filter .mng-filter-lookup,mng-table-filter .mng-filter-lookupenum{min-width:180px}mng-table-filter .mng-filter-required{position:relative}mng-table-filter p-tag.mng-filter-required{border:1px solid var(--color-red-500)}mng-table-filter .mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}mng-table-filter .mng-filter-icon{color:var(--p-inputgroup-addon-color)}mng-table-filter .mng-filter-icon:hover{background:var(--p-select-filled-hover-background)}mng-table-filter .mng-filter-active *{border-color:var(--filter-active-color)!important}mng-table-filter .mng-filter-active p-inputgroup-addon,mng-table-filter .mng-filter-active input,mng-table-filter .mng-filter-active p-select,mng-table-filter .mng-filter-active p-multiselect,mng-table-filter .mng-filter-active .p-autocomplete-input-multiple{background:var(--filter-active-bg)}mng-table-filter .mng-filter-active .mng-filter-icon{color:var(--filter-active-color)}:root[class*=app-dark] mng-table-filter{--filter-active-bg: var(--p-surface-800);--filter-active-color: var(--p-surface-400)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: AutocompleteTemplateDirective, selector: "[mngAutocompleteTemplate]", inputs: ["name"], exportAs: ["mngAutocompleteTemplate"] }, { kind: "directive", type: DropdownTemplateDirective, selector: "[mngDropdownTemplate]", inputs: ["name"], exportAs: ["mngDropdownTemplate"] }, { kind: "directive", type: DateRangeTemplateDirective, selector: "[mngDateRangeTemplate]", inputs: ["name"], exportAs: ["mngDateRangeTemplate"] }, { kind: "directive", type: NumberRangeTemplateDirective, selector: "[mngNumberRangeTemplate]", inputs: ["name"], exportAs: ["mngNumberRangeTemplate"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "required", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
791
791
|
trigger('overlayAnimation', [
|
|
792
792
|
transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
|
|
793
793
|
transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
|
|
794
794
|
])
|
|
795
795
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
796
796
|
}
|
|
797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
797
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterComponent, decorators: [{
|
|
798
798
|
type: Component,
|
|
799
799
|
args: [{ selector: 'mng-table-filter', imports: [
|
|
800
800
|
TableModule,
|
|
@@ -898,12 +898,12 @@ class TableColumnValueComponent {
|
|
|
898
898
|
const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
|
|
899
899
|
this.messageService.add({ severity: 'info', summary: title, detail: message });
|
|
900
900
|
}
|
|
901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
901
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
902
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n @case (columnDisplayTypeString) {\n @if (descriptor().hasValueAsTooltip) {\n <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n } @else {\n {{ value() }}\n }\n }\n @case (columnDisplayTypeHtml) {\n <span [innerHTML]=\"value()\"></span>\n }\n @case (columnDisplayTypeNumber) {\n {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeCurrency) {\n {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeDate) {\n {{ value() | date: descriptor().displayFormat }}\n }\n @case (columnDisplayTypeBoolean) {\n @if (descriptor().booleanAsIcon) {\n <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n } @else {\n {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n }\n }\n @case (columnDisplayTypeEnum) {\n {{ value() | mngEnum: descriptor().enum | translate }}\n }\n @case (columnDisplayTypeComponent) {\n <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n }\n}\n@if (hasCopyToClipboard()) {\n <div class=\"help-buttons\">\n <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
903
903
|
}
|
|
904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableColumnValueComponent, decorators: [{
|
|
905
905
|
type: Component,
|
|
906
|
-
args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n @case (columnDisplayTypeString) {\n @if (descriptor().hasValueAsTooltip) {\n <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n } @else {\n {{ value() }}\n }\n }\n @case (columnDisplayTypeHtml) {\n <span [innerHTML]=\"value()\"></span>\n }\n @case (columnDisplayTypeNumber) {\n {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeCurrency) {\n {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeDate) {\n {{ value() | date: descriptor().displayFormat }}\n }\n @case (columnDisplayTypeBoolean) {\n @if (descriptor().booleanAsIcon) {\n <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n } @else {\n {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n }\n }\n @case (columnDisplayTypeEnum) {\n {{ value() | mngEnum: descriptor().enum | translate }}\n }\n @case (columnDisplayTypeComponent) {\n <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n }\n}\n@if (hasCopyToClipboard()) {\n <div class=\"help-buttons\">\n <button pButton type=\"button\" icon=\"pi pi-copy\"
|
|
906
|
+
args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n @case (columnDisplayTypeString) {\n @if (descriptor().hasValueAsTooltip) {\n <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n } @else {\n {{ value() }}\n }\n }\n @case (columnDisplayTypeHtml) {\n <span [innerHTML]=\"value()\"></span>\n }\n @case (columnDisplayTypeNumber) {\n {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeCurrency) {\n {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeDate) {\n {{ value() | date: descriptor().displayFormat }}\n }\n @case (columnDisplayTypeBoolean) {\n @if (descriptor().booleanAsIcon) {\n <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n } @else {\n {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n }\n }\n @case (columnDisplayTypeEnum) {\n {{ value() | mngEnum: descriptor().enum | translate }}\n }\n @case (columnDisplayTypeComponent) {\n <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n }\n}\n@if (hasCopyToClipboard()) {\n <div class=\"help-buttons\">\n <button pButton type=\"button\" icon=\"pi pi-copy\" severity=\"info\" rounded=\"true\" size=\"small\" (click)=\"copyToClipboard($event)\"></button>\n </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
|
|
907
907
|
}], propDecorators: { descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
|
|
908
908
|
|
|
909
909
|
class FilterValuePipe {
|
|
@@ -967,10 +967,10 @@ class FilterValuePipe {
|
|
|
967
967
|
this.subscription?.unsubscribe();
|
|
968
968
|
this.subject.complete();
|
|
969
969
|
}
|
|
970
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
971
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
970
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
971
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
|
|
972
972
|
}
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterValuePipe, decorators: [{
|
|
974
974
|
type: Pipe,
|
|
975
975
|
args: [{
|
|
976
976
|
name: 'mngFilterValue',
|
|
@@ -1053,10 +1053,10 @@ class TableFilterActiveTagComponent {
|
|
|
1053
1053
|
}
|
|
1054
1054
|
return labelKey;
|
|
1055
1055
|
}
|
|
1056
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove", toggleDisabled: "toggleDisabled" }, viewQueries: [{ propertyName: "tagMenu", first: true, predicate: Menu, descendants: true, isSignal: true }], ngImport: i0, template: "<p-tag\n [class.opacity-70]=\"filter().disabled\"\n severity=\"secondary\"\n styleClass=\"mr-1 mng-tag-outlined\"\n [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n <span>{{ label() | translate }}</span>\n @if (matchMode() === FilterMatchMode.Between) {\n <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n } @else {\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n @if (filter().caseSensitive) {\n <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n }\n }\n <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n @if (isActive()) {\n <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n }\n\n @if (filter().disabled) {\n <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n }\n </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1058
1058
|
}
|
|
1059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
|
|
1060
1060
|
type: Component,
|
|
1061
1061
|
args: [{ selector: 'mng-table-filter-active-tag', imports: [TranslatePipe, FilterValuePipe, AsyncPipe, Tag, Menu, Divider], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p-tag\n [class.opacity-70]=\"filter().disabled\"\n severity=\"secondary\"\n styleClass=\"mr-1 mng-tag-outlined\"\n [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n <div class=\"flex relative items-center gap-2 p-1 cursor-pointer\" (click)=\"openTagMenu($event)\">\n <span>{{ label() | translate }}</span>\n @if (matchMode() === FilterMatchMode.Between) {\n <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n } @else {\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n @if (filter().caseSensitive) {\n <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n }\n }\n <p-divider layout=\"vertical\" class=\"!p-0 !mx-[3px]\" />\n\n @if (isActive()) {\n <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n }\n\n @if (filter().disabled) {\n <p-divider layout=\"horizontal\" class=\"!absolute left-0 !m-0 border-t opacity-50\"></p-divider>\n }\n </div>\n</p-tag>\n<p-menu [popup]=\"true\" [model]=\"menuItems()\" appendTo=\"body\"></p-menu>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"] }]
|
|
1062
1062
|
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], edit: [{ type: i0.Output, args: ["edit"] }], remove: [{ type: i0.Output, args: ["remove"] }], toggleDisabled: [{ type: i0.Output, args: ["toggleDisabled"] }], tagMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Menu), { isSignal: true }] }] } });
|
|
@@ -1080,10 +1080,10 @@ class TableFilterFormMultiselectComponent {
|
|
|
1080
1080
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1081
1081
|
this.onTouchedFn = () => { };
|
|
1082
1082
|
this.filterType = input(...(ngDevMode ? [undefined, { debugName: "filterType" }] : []));
|
|
1083
|
-
this.enableCaseSensitive = input(false, ...(ngDevMode ?
|
|
1083
|
+
this.enableCaseSensitive = input(false, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : {}), transform: booleanAttribute });
|
|
1084
1084
|
this.caseSensitiveModel = model(...(ngDevMode ? [undefined, { debugName: "caseSensitiveModel" }] : []));
|
|
1085
1085
|
this.inputTrim = input(...(ngDevMode ? [undefined, { debugName: "inputTrim" }] : []));
|
|
1086
|
-
this.disabledInput = input(false, ...(ngDevMode ?
|
|
1086
|
+
this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
|
|
1087
1087
|
this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
1088
1088
|
this.disabled = computed(() => this.disabledInput() || this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1089
1089
|
this.value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
@@ -1145,10 +1145,10 @@ class TableFilterFormMultiselectComponent {
|
|
|
1145
1145
|
this.value.set(values);
|
|
1146
1146
|
this.onChangeFn(this.value());
|
|
1147
1147
|
}
|
|
1148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableFilterFormMultiselectComponent, isStandalone: true, selector: "mng-table-filter-form-multiselect", inputs: { filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, caseSensitiveModel: { classPropertyName: "caseSensitiveModel", publicName: "caseSensitiveModel", isSignal: true, isRequired: false, transformFunction: null }, inputTrim: { classPropertyName: "inputTrim", publicName: "inputTrim", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { caseSensitiveModel: "caseSensitiveModelChange" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<p-inputgroup>\n <p-multiSelect\n [ngModel]=\"value()\"\n (ngModelChange)=\"value.set($event)\"\n [options]=\"value()\"\n [showToggleAll]=\"false\"\n [filter]=\"false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [maxSelectedLabels]=\"1\"\n [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n [selectAll]=\"false\"\n [disabled]=\"disabled()\"\n display=\"chip\"\n appendTo=\"body\"\n required=\"true\"\n panelStyleClass=\"table-filter-form-multiselect-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n <ng-template pTemplate=\"header\">\n @if (filterType() === FilterTypeEnum.String) {\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [disabled]=\"disabled()\"\n (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n (keydown.tab)=\"onValueChange($event)\"\n (blur)=\"onValueChange($event)\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"inputTrim()\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [disabled]=\"disabled()\"\n (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n (keydown.tab)=\"onValueNumberChange($event)\"\n (onBlur)=\"onValueNumberChange($event)\"\n [placeholder]=\"'mngFilter.value' | translate\"\n useGrouping=\"false\"\n required=\"true\" />\n }\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <div class=\"flex flex-wrap gap-1 overflow-auto\">\n @if (value().length) {\n @for (val of stringValues(); track val; let i = $index) {\n <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n }\n } @else {\n <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n }\n </div>\n </ng-template>\n </p-multiSelect>\n @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n <p-toggle-button\n [ngModel]=\"caseSensitiveModel()\"\n (ngModelChange)=\"caseSensitiveModel.set($event)\"\n [disabled]=\"disabled()\"\n name=\"caseSensitive\"\n class=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n</p-inputgroup>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1150
1150
|
}
|
|
1151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterFormMultiselectComponent, decorators: [{
|
|
1152
1152
|
type: Component,
|
|
1153
1153
|
args: [{ selector: 'mng-table-filter-form-multiselect', providers: [VALUE_ACCESSOR], imports: [Chip, FormsModule, InputNumber, MultiSelect, PrimeTemplate, TranslatePipe, InputGroup, InputText, ToggleButton, InputTrimDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-inputgroup>\n <p-multiSelect\n [ngModel]=\"value()\"\n (ngModelChange)=\"value.set($event)\"\n [options]=\"value()\"\n [showToggleAll]=\"false\"\n [filter]=\"false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [maxSelectedLabels]=\"1\"\n [selectedItemsLabel]=\"'mngDropdown.multiselectOverMaxDisplayLimit' | translate\"\n [selectAll]=\"false\"\n [disabled]=\"disabled()\"\n display=\"chip\"\n appendTo=\"body\"\n required=\"true\"\n panelStyleClass=\"table-filter-form-multiselect-panel p-2 flex flex-col gap-2 w-full max-w-72\">\n <ng-template pTemplate=\"header\">\n @if (filterType() === FilterTypeEnum.String) {\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [disabled]=\"disabled()\"\n (keydown.enter)=\"onValueChange($event); $event.preventDefault()\"\n (keydown.tab)=\"onValueChange($event)\"\n (blur)=\"onValueChange($event)\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"inputTrim()\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [disabled]=\"disabled()\"\n (keydown.enter)=\"onValueNumberChange($event); $event.preventDefault()\"\n (keydown.tab)=\"onValueNumberChange($event)\"\n (onBlur)=\"onValueNumberChange($event)\"\n [placeholder]=\"'mngFilter.value' | translate\"\n useGrouping=\"false\"\n required=\"true\" />\n }\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <div class=\"flex flex-wrap gap-1 overflow-auto\">\n @if (value().length) {\n @for (val of stringValues(); track val; let i = $index) {\n <p-chip [label]=\"val\" removable (onRemove)=\"removeValue(i)\" />\n }\n } @else {\n <span class=\"p-1\">{{ 'mngFilter.noValues' | translate }}</span>\n }\n </div>\n </ng-template>\n </p-multiSelect>\n @if (filterType() === FilterTypeEnum.String && enableCaseSensitive()) {\n <p-toggle-button\n [ngModel]=\"caseSensitiveModel()\"\n (ngModelChange)=\"caseSensitiveModel.set($event)\"\n [disabled]=\"disabled()\"\n name=\"caseSensitive\"\n class=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n</p-inputgroup>\n" }]
|
|
1154
1154
|
}], propDecorators: { filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], enableCaseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCaseSensitive", required: false }] }], caseSensitiveModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitiveModel", required: false }] }, { type: i0.Output, args: ["caseSensitiveModelChange"] }], inputTrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTrim", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
@@ -1169,7 +1169,7 @@ class TableFilterFormComponent {
|
|
|
1169
1169
|
this.overlay = input(...(ngDevMode ? [undefined, { debugName: "overlay" }] : []));
|
|
1170
1170
|
this.disabledProperties = input([], ...(ngDevMode ? [{ debugName: "disabledProperties" }] : []));
|
|
1171
1171
|
this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive" }] : []));
|
|
1172
|
-
this.propertySearch = input(false, ...(ngDevMode ?
|
|
1172
|
+
this.propertySearch = input(false, { ...(ngDevMode ? { debugName: "propertySearch" } : {}), transform: booleanAttribute });
|
|
1173
1173
|
this.apply = output();
|
|
1174
1174
|
this.propertyOptionsWithTranslations = computed(() => {
|
|
1175
1175
|
const disabledProperties = this.disabledProperties();
|
|
@@ -1324,10 +1324,10 @@ class TableFilterFormComponent {
|
|
|
1324
1324
|
}
|
|
1325
1325
|
return labelKey;
|
|
1326
1326
|
}
|
|
1327
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1328
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div class=\"flex items-center gap-2\">\n <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n @if (!filter()) {\n <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n }\n </div>\n <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"property\"\n id=\"property\"\n tabindex=\"1\"\n #propertyControl=\"ngModel\"\n [(ngModel)]=\"propertyModel\"\n [options]=\"propertyOptionsWithTranslations()\"\n optionsValueProperty=\"property\"\n optionsDisabledProperty=\"disabled\"\n optionsLabelProperty=\"label\"\n [placeholder]=\"'mngFilter.property' | translate\"\n [optionsLabelTranslate]=\"!propertySearch()\"\n [inlineSearch]=\"propertySearch()\"\n required=\"true\"\n className=\"w-full\"\n [disabled]=\"isEdit()\"\n [appendTo]=\"null\" />\n </div>\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"matchMode\"\n id=\"matchMode\"\n [(ngModel)]=\"matchModeModel\"\n className=\"w-full\"\n [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n [placeholder]=\"'mngFilter.matchMode' | translate\"\n [disabled]=\"!propertyControl.value\"\n class=\"self-end\"\n required=\"true\"\n [appendTo]=\"null\" />\n </div>\n @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n <div class=\"w-full lg:w-auto flex flex-col\">\n @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-form-multiselect\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [disabled]=\"!matchModeModel()\" />\n } @else if (matchModeModel() === FilterMatchMode.Between) {\n <mng-number-range\n className=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n required=\"true\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n }\n @case (FilterTypeEnum.Date) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-date-range\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n vertical=\"true\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n } @else {\n <mng-datetime-picker\n name=\"value\"\n className=\"w-full\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showIcon=\"true\"\n [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @default {\n @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n <div class=\"flex\">\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n allowInput=\"true\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-form-multiselect\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n [(caseSensitiveModel)]=\"caseSensitiveModel\"\n [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\" />\n } @else {\n <div class=\"flex\">\n <input\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [class.rounded-r-none!]=\"enableCaseSensitive()\"\n [attr.placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n }\n }\n }\n <ng-template #lookupFilter>\n @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n @switch (lookupFilterDescriptor.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n }\n } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n </ng-template>\n </div>\n }\n <div class=\"flex justify-end\">\n <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n </button>\n </div>\n </form>\n @if (formSubmitted() && filterForm.invalid) {\n @for (message of formErrorMessage(); track message) {\n <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n }\n }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}.table-filter-form-multiselect-panel .p-multiselect-list-container,.table-filter-form-multiselect-panel .p-multiselect-header{display:none!important}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: TableFilterFormMultiselectComponent, selector: "mng-table-filter-form-multiselect", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled"], outputs: ["caseSensitiveModelChange"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "required", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div class=\"flex items-center gap-2\">\n <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n @if (!filter()) {\n <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n }\n </div>\n <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline lg:flex-row gap-4\">\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"property\"\n id=\"property\"\n tabindex=\"1\"\n #propertyControl=\"ngModel\"\n [(ngModel)]=\"propertyModel\"\n [options]=\"propertyOptionsWithTranslations()\"\n optionsValueProperty=\"property\"\n optionsDisabledProperty=\"disabled\"\n optionsLabelProperty=\"label\"\n [placeholder]=\"'mngFilter.property' | translate\"\n [optionsLabelTranslate]=\"!propertySearch()\"\n [inlineSearch]=\"propertySearch()\"\n required=\"true\"\n className=\"w-full\"\n [disabled]=\"isEdit()\"\n [appendTo]=\"null\" />\n </div>\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"matchMode\"\n id=\"matchMode\"\n [(ngModel)]=\"matchModeModel\"\n className=\"w-full\"\n [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n [placeholder]=\"'mngFilter.matchMode' | translate\"\n [disabled]=\"!propertyControl.value\"\n class=\"self-end\"\n required=\"true\"\n [appendTo]=\"null\" />\n </div>\n @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n <div class=\"w-full lg:w-auto flex flex-col\">\n @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-form-multiselect\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [disabled]=\"!matchModeModel()\" />\n } @else if (matchModeModel() === FilterMatchMode.Between) {\n <mng-number-range\n className=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n required=\"true\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n }\n @case (FilterTypeEnum.Date) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-date-range\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n vertical=\"true\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n } @else {\n <mng-datetime-picker\n name=\"value\"\n className=\"w-full\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showIcon=\"true\"\n [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @default {\n @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n <div class=\"flex\">\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n allowInput=\"true\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n } @else if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-form-multiselect\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n [(caseSensitiveModel)]=\"caseSensitiveModel\"\n [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\" />\n } @else {\n <div class=\"flex\">\n <input\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [class.rounded-r-none!]=\"enableCaseSensitive()\"\n [attr.placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n }\n }\n }\n <ng-template #lookupFilter>\n @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n @switch (lookupFilterDescriptor.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n }\n } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n </ng-template>\n </div>\n }\n <div class=\"flex justify-end\">\n <button pButton type=\"submit\" class=\"mng-filter-submit-button self-end\">\n {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n </button>\n </div>\n </form>\n @if (formSubmitted() && filterForm.invalid) {\n @for (message of formErrorMessage(); track message) {\n <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n }\n }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}.table-filter-form-multiselect-panel .p-multiselect-list-container,.table-filter-form-multiselect-panel .p-multiselect-header{display:none!important}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "milliseconds", "primeTimePicker", "timeSelect", "timeSelectInterval", "dateFormat", "className", "inputStyleClass", "required", "disabled", "vertical", "templates"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: TableFilterFormMultiselectComponent, selector: "mng-table-filter-form-multiselect", inputs: ["filterType", "enableCaseSensitive", "caseSensitiveModel", "inputTrim", "disabled"], outputs: ["caseSensitiveModelChange"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "required", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1329
1329
|
}
|
|
1330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterFormComponent, decorators: [{
|
|
1331
1331
|
type: Component,
|
|
1332
1332
|
args: [{ selector: 'mng-table-filter-form', imports: [
|
|
1333
1333
|
DropdownComponent,
|
|
@@ -1358,10 +1358,10 @@ class TableHeaderWithFiltersTemplateDirective extends TemplateDirective {
|
|
|
1358
1358
|
super(...arguments);
|
|
1359
1359
|
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1360
1360
|
}
|
|
1361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1362
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1362
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TableHeaderWithFiltersTemplateDirective, isStandalone: true, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1363
1363
|
}
|
|
1364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, decorators: [{
|
|
1365
1365
|
type: Directive,
|
|
1366
1366
|
args: [{
|
|
1367
1367
|
selector: '[mngTableHeaderWithFiltersTemplate]'
|
|
@@ -1378,10 +1378,10 @@ class TableHeaderWithFiltersComponent {
|
|
|
1378
1378
|
this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
|
|
1379
1379
|
this.genericFilterDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : []));
|
|
1380
1380
|
this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
|
|
1381
|
-
this.enableSearch = input(false, ...(ngDevMode ?
|
|
1381
|
+
this.enableSearch = input(false, { ...(ngDevMode ? { debugName: "enableSearch" } : {}), transform: booleanAttribute });
|
|
1382
1382
|
this.search = input(...(ngDevMode ? [undefined, { debugName: "search" }] : []));
|
|
1383
1383
|
this.searchLimitWordMax = input(undefined, ...(ngDevMode ? [{ debugName: "searchLimitWordMax" }] : []));
|
|
1384
|
-
this.enableCaseSensitive = input(true, ...(ngDevMode ?
|
|
1384
|
+
this.enableCaseSensitive = input(true, { ...(ngDevMode ? { debugName: "enableCaseSensitive" } : {}), transform: booleanAttribute });
|
|
1385
1385
|
this.filterMenuItems = signal([], ...(ngDevMode ? [{ debugName: "filterMenuItems" }] : []));
|
|
1386
1386
|
this.filterOverlay = viewChild.required(Popover);
|
|
1387
1387
|
this.filterFormComponent = viewChild(TableFilterFormComponent, ...(ngDevMode ? [{ debugName: "filterFormComponent" }] : []));
|
|
@@ -1637,10 +1637,10 @@ class TableHeaderWithFiltersComponent {
|
|
|
1637
1637
|
// match mode needs to be set for inline search
|
|
1638
1638
|
this.tableData.updateSearch(searchQuery != null ? { value: searchQuery, caseSensitive: caseSensitive } : undefined);
|
|
1639
1639
|
}
|
|
1640
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableHeaderWithFiltersComponent, isStandalone: true, selector: "mng-table-header-with-filters", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:keydown": "filterShortcuts($event)" } }, queries: [{ propertyName: "templates", predicate: TableHeaderWithFiltersTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }, { propertyName: "filterSplitButton", first: true, predicate: ["filterSplitButton"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow flex-wrap\">\n @if (titleTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n }\n @if (showOverlayFilterFormButton()) {\n <p-splitbutton\n #filterSplitButton\n [label]=\"'mngFilter.titleAdd' | translate\"\n [severity]=\"'secondary'\"\n (onClick)=\"onFilterAdd($event)\"\n [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n (onMenuShow)=\"onFilterSplitButtonShow()\"\n showDelay=\"500\"\n [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n icon=\"pi pi-filter\"\n [model]=\"filterMenuItems()\">\n </p-splitbutton>\n }\n @if (enableSearch()) {\n <div\n class=\"mng-search mr-3\"\n [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n showDelay=\"500\"\n [pTooltip]=\"('mngFilter.search.input' | translate) + ' ( / )'\">\n <span class=\"p-input-icon-left w-full\">\n <p-iconfield>\n <p-inputicon class=\"pi pi-search\" />\n <input\n #searchInput\n [ngModel]=\"searchValue()\"\n (ngModelChange)=\"onSearchChange($event)\"\n (keydown.enter)=\"onSearchSubmit($event)\"\n name=\"globalSearch\"\n type=\"text\"\n pInputText\n class=\"search-input w-full\"\n [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n [placeholder]=\"'mngFilter.search.input' | translate\" />\n <span class=\"search-shortcut-hint\">/</span>\n </p-iconfield>\n @if (enableCaseSensitive()) {\n <span class=\"toggle-button-input\">\n <p-toggleButton\n styleClass=\"ml-1 p-1 p-button-sm\"\n [ngModel]=\"searchCaseSensitive()\"\n (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n </span>\n }\n </span>\n @if (searchWordLimitMaxError()) {\n <small class=\"p-error block\">\n {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n </small>\n }\n </div>\n }\n @if (directInputMetadata().length > 0) {\n <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n }\n } @else if (metadata.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n }\n }\n </div>\n }\n @if (titleRowRightTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n <div class=\"flex items-center flex-wrap mt-2\">\n @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag\n [model]=\"model()\"\n [filter]=\"filter\"\n (edit)=\"onFilterEdit($event)\"\n (remove)=\"onFilterRemove($event)\"\n (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n @for (filter of activeFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag\n [model]=\"model()\"\n [filter]=\"filter\"\n (edit)=\"onFilterEdit($event)\"\n (remove)=\"onFilterRemove($event)\"\n (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n @defer (on viewport) {\n <mng-table-filter-form\n [model]=\"model()\"\n [metadata]=\"overlayFormMetadata()\"\n [genericDescriptor]=\"genericFilterDescriptor()\"\n [filter]=\"filterEdit()\"\n [disabledProperties]=\"activeFilterProperties()\"\n [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n [overlay]=\"op\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n (apply)=\"onFilterFormApply($event)\" />\n } @placeholder {\n <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [TableFilterFormComponent]] }); }
|
|
1640
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderWithFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1641
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableHeaderWithFiltersComponent, isStandalone: true, selector: "mng-table-header-with-filters", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:keydown": "filterShortcuts($event)" } }, queries: [{ propertyName: "templates", predicate: TableHeaderWithFiltersTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }, { propertyName: "filterSplitButton", first: true, predicate: ["filterSplitButton"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow flex-wrap\">\n @if (titleTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n }\n @if (showOverlayFilterFormButton()) {\n <p-splitbutton\n #filterSplitButton\n [label]=\"'mngFilter.titleAdd' | translate\"\n [severity]=\"'secondary'\"\n (onClick)=\"onFilterAdd($event)\"\n [class]=\"'mng-filter-add-button mr-2' + (titleTemplate() ? ' ml-3' : '')\"\n (onMenuShow)=\"onFilterSplitButtonShow()\"\n showDelay=\"500\"\n [pTooltip]=\"('mngFilter.titleAdd' | translate) + ' ( ' + addFilterShortcutText + ' )'\"\n icon=\"pi pi-filter\"\n [model]=\"filterMenuItems()\">\n </p-splitbutton>\n }\n @if (enableSearch()) {\n <div\n class=\"mng-search mr-3\"\n [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\"\n showDelay=\"500\"\n [pTooltip]=\"('mngFilter.search.input' | translate) + ' ( / )'\">\n <span class=\"p-input-icon-left w-full\">\n <p-iconfield>\n <p-inputicon class=\"pi pi-search\" />\n <input\n #searchInput\n [ngModel]=\"searchValue()\"\n (ngModelChange)=\"onSearchChange($event)\"\n (keydown.enter)=\"onSearchSubmit($event)\"\n name=\"globalSearch\"\n type=\"text\"\n pInputText\n class=\"search-input w-full\"\n [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n [placeholder]=\"'mngFilter.search.input' | translate\" />\n <span class=\"search-shortcut-hint\">/</span>\n </p-iconfield>\n @if (enableCaseSensitive()) {\n <span class=\"toggle-button-input\">\n <p-toggleButton\n styleClass=\"ml-1 p-1 p-button-sm\"\n [ngModel]=\"searchCaseSensitive()\"\n (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n </span>\n }\n </span>\n @if (searchWordLimitMaxError()) {\n <small class=\"p-error block\">\n {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n </small>\n }\n </div>\n }\n @if (directInputMetadata().length > 0) {\n <div class=\"mng-direct-input-filters flex flex-wrap items-center my-1\">\n @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n }\n } @else if (metadata.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n }\n }\n </div>\n }\n @if (titleRowRightTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n <div class=\"flex items-center flex-wrap mt-2\">\n @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag\n [model]=\"model()\"\n [filter]=\"filter\"\n (edit)=\"onFilterEdit($event)\"\n (remove)=\"onFilterRemove($event)\"\n (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n @for (filter of activeFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag\n [model]=\"model()\"\n [filter]=\"filter\"\n (edit)=\"onFilterEdit($event)\"\n (remove)=\"onFilterRemove($event)\"\n (toggleDisabled)=\"onFilterToggleDisabled($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n @defer (on viewport) {\n <mng-table-filter-form\n [model]=\"model()\"\n [metadata]=\"overlayFormMetadata()\"\n [genericDescriptor]=\"genericFilterDescriptor()\"\n [filter]=\"filterEdit()\"\n [disabledProperties]=\"activeFilterProperties()\"\n [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n [overlay]=\"op\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n (apply)=\"onFilterFormApply($event)\" />\n } @placeholder {\n <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}.search-shortcut-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.5;transition:opacity .15s}.search-input:not(:placeholder-shown)~.search-shortcut-hint,.search-input:focus~.search-shortcut-hint{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [TableFilterFormComponent]] }); }
|
|
1642
1642
|
}
|
|
1643
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "
|
|
1643
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderWithFiltersComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent), Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], resolveMetadata: (TableFilterComponent, TableFilterActiveTagComponent) => ({ decorators: [{
|
|
1644
1644
|
type: Component,
|
|
1645
1645
|
args: [{ selector: 'mng-table-header-with-filters', imports: [
|
|
1646
1646
|
TranslatePipe,
|
|
@@ -1697,10 +1697,10 @@ class LocaleDefaultRowClassPipe {
|
|
|
1697
1697
|
}
|
|
1698
1698
|
return value ?? '';
|
|
1699
1699
|
}
|
|
1700
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1701
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1701
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
|
|
1702
1702
|
}
|
|
1703
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
|
|
1704
1704
|
type: Pipe,
|
|
1705
1705
|
args: [{
|
|
1706
1706
|
name: 'mngLocaleDefaultRowClass',
|
|
@@ -1718,10 +1718,10 @@ class TableFilterClassPipe {
|
|
|
1718
1718
|
return strValue;
|
|
1719
1719
|
}
|
|
1720
1720
|
}
|
|
1721
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1722
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1721
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1722
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TableFilterClassPipe, isStandalone: true, name: "mngTableFilterClass" }); }
|
|
1723
1723
|
}
|
|
1724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1724
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableFilterClassPipe, decorators: [{
|
|
1725
1725
|
type: Pipe,
|
|
1726
1726
|
args: [{
|
|
1727
1727
|
pure: true,
|
|
@@ -1729,7 +1729,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1729
1729
|
}]
|
|
1730
1730
|
}] });
|
|
1731
1731
|
|
|
1732
|
-
|
|
1732
|
+
/**
|
|
1733
|
+
* Creates and returns a filter state map based on the provided parameters.
|
|
1734
|
+
*
|
|
1735
|
+
* @param {DataListParams} [paramsWithDefaults] - An optional object containing default parameters and filters for the table. The `filters` property includes filter configurations, such as value, match mode, case sensitivity, and disabled state.
|
|
1736
|
+
* @return {Record<string, FilterState>} A mapping of filter keys to their corresponding filter states, constructed from the provided parameters or defaults.
|
|
1737
|
+
*/
|
|
1738
|
+
function tableCreateFilterState(paramsWithDefaults) {
|
|
1733
1739
|
const primeFilterMeta = {};
|
|
1734
1740
|
// if any filter is present, no default filters should be applied!
|
|
1735
1741
|
if (paramsWithDefaults?.filters) {
|
|
@@ -1744,7 +1750,16 @@ function tableCreateFilterMeta(paramsWithDefaults) {
|
|
|
1744
1750
|
}
|
|
1745
1751
|
return primeFilterMeta;
|
|
1746
1752
|
}
|
|
1747
|
-
|
|
1753
|
+
/**
|
|
1754
|
+
* Creates a sort state for a data table based on the provided parameters.
|
|
1755
|
+
*
|
|
1756
|
+
* @param {DataListParams} [paramsWithDefaults] - An object containing sorting parameters. The `sort` property is expected
|
|
1757
|
+
* to be an array of objects with `property` and `ascending` attributes.
|
|
1758
|
+
* @return {SortMeta[] | undefined} - Returns an array of sort metadata objects if the `sort` property is valid and contains
|
|
1759
|
+
* at least one entry. Each object includes the field to sort by and the sort order. Returns `undefined` if no valid sort
|
|
1760
|
+
* parameters are provided.
|
|
1761
|
+
*/
|
|
1762
|
+
function tableCreateSortState(paramsWithDefaults) {
|
|
1748
1763
|
if (paramsWithDefaults?.sort !== undefined && Array.isArray(paramsWithDefaults?.sort) && paramsWithDefaults?.sort.length > 0) {
|
|
1749
1764
|
return paramsWithDefaults?.sort.map(s => ({
|
|
1750
1765
|
field: s.property,
|
|
@@ -1762,11 +1777,13 @@ class TableMetadataService {
|
|
|
1762
1777
|
// signal sources
|
|
1763
1778
|
#signalSources;
|
|
1764
1779
|
#descriptor;
|
|
1780
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1765
1781
|
#updateDescriptorFromSourceEffect;
|
|
1766
1782
|
#genericFilters;
|
|
1767
1783
|
// search
|
|
1768
1784
|
#searchFieldsFromSignalSource;
|
|
1769
1785
|
#searchFields;
|
|
1786
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1770
1787
|
#searchFieldsEffect;
|
|
1771
1788
|
constructor() {
|
|
1772
1789
|
this.#injector = inject(Injector);
|
|
@@ -1782,6 +1799,7 @@ class TableMetadataService {
|
|
|
1782
1799
|
this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
|
|
1783
1800
|
this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
|
|
1784
1801
|
this.descriptor = this.#descriptor.asReadonly();
|
|
1802
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1785
1803
|
this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
|
|
1786
1804
|
if (d != null) {
|
|
1787
1805
|
this.#descriptor.set(d);
|
|
@@ -1802,7 +1820,7 @@ class TableMetadataService {
|
|
|
1802
1820
|
this.filters = computed(() => {
|
|
1803
1821
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1804
1822
|
const observer = this.#translationObserver(); // need this one to track language changes
|
|
1805
|
-
return this.filterDescriptors().map(d => this.
|
|
1823
|
+
return this.filterDescriptors().map(d => this.mapFilterDescriptorToConfig(d));
|
|
1806
1824
|
}, ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
1807
1825
|
this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
|
|
1808
1826
|
this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
|
|
@@ -1811,6 +1829,7 @@ class TableMetadataService {
|
|
|
1811
1829
|
this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
|
|
1812
1830
|
this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
|
|
1813
1831
|
this.searchFields = this.#searchFields.asReadonly();
|
|
1832
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1814
1833
|
this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
|
|
1815
1834
|
this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
|
|
1816
1835
|
});
|
|
@@ -1852,7 +1871,7 @@ class TableMetadataService {
|
|
|
1852
1871
|
.subscribe({
|
|
1853
1872
|
next: genericFilters => {
|
|
1854
1873
|
// set descriptors from generic filter data
|
|
1855
|
-
this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.
|
|
1874
|
+
this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.mapFilterDescriptorToConfig(d)));
|
|
1856
1875
|
}
|
|
1857
1876
|
});
|
|
1858
1877
|
}
|
|
@@ -1864,7 +1883,7 @@ class TableMetadataService {
|
|
|
1864
1883
|
this.#descriptor.set(descriptor);
|
|
1865
1884
|
}
|
|
1866
1885
|
}
|
|
1867
|
-
|
|
1886
|
+
mapFilterDescriptorToConfig(descriptor) {
|
|
1868
1887
|
const matchModes = filterGenerateMatchModeOptions(this.#primeConfig, descriptor, this.serializationCfg);
|
|
1869
1888
|
return {
|
|
1870
1889
|
descriptor: descriptor,
|
|
@@ -1874,10 +1893,10 @@ class TableMetadataService {
|
|
|
1874
1893
|
numberConfig: filterGetNumberConfig(descriptor)
|
|
1875
1894
|
};
|
|
1876
1895
|
}
|
|
1877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1878
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1896
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1897
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableMetadataService }); }
|
|
1879
1898
|
}
|
|
1880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableMetadataService, decorators: [{
|
|
1881
1900
|
type: Injectable
|
|
1882
1901
|
}], ctorParameters: () => [] });
|
|
1883
1902
|
|
|
@@ -1895,8 +1914,11 @@ class TableDataService extends ADataListService {
|
|
|
1895
1914
|
#synchronousResult;
|
|
1896
1915
|
#dataProvider;
|
|
1897
1916
|
#dataProviderService;
|
|
1917
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1898
1918
|
#synchronousResultEffect;
|
|
1919
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1899
1920
|
#synchronousLoadingEffect;
|
|
1921
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1900
1922
|
#manualLoadingEffect;
|
|
1901
1923
|
#dataProviderSubscription;
|
|
1902
1924
|
// pagination
|
|
@@ -1904,6 +1926,7 @@ class TableDataService extends ADataListService {
|
|
|
1904
1926
|
#sortStates;
|
|
1905
1927
|
#filterStates;
|
|
1906
1928
|
#isSortAndFilterMetaInitialized;
|
|
1929
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1907
1930
|
#defaultParamsEffect;
|
|
1908
1931
|
#isSearchMetaInitialized;
|
|
1909
1932
|
#searchState;
|
|
@@ -1940,16 +1963,19 @@ class TableDataService extends ADataListService {
|
|
|
1940
1963
|
const dataProvider = this.#dataProvider();
|
|
1941
1964
|
return dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
|
|
1942
1965
|
}, ...(ngDevMode ? [{ debugName: "#dataProviderService" }] : []));
|
|
1966
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1943
1967
|
this.#synchronousResultEffect = effectWithDeps([this.#synchronousResult], ([res]) => {
|
|
1944
1968
|
if (res != null) {
|
|
1945
1969
|
this.#setData(res.data ?? [], res.totalCount);
|
|
1946
1970
|
}
|
|
1947
1971
|
});
|
|
1972
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1948
1973
|
this.#synchronousLoadingEffect = effectWithDeps([this.#synchronousResult, this.#manualLoading], ([res, manualLoading]) => {
|
|
1949
1974
|
if (res != null && manualLoading == null) {
|
|
1950
1975
|
this.#loading.set(false);
|
|
1951
1976
|
}
|
|
1952
1977
|
});
|
|
1978
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1953
1979
|
this.#manualLoadingEffect = effectWithDeps([this.#manualLoading], ([manualLoading]) => {
|
|
1954
1980
|
if (manualLoading != null) {
|
|
1955
1981
|
this.#loading.set(manualLoading);
|
|
@@ -1972,9 +1998,10 @@ class TableDataService extends ADataListService {
|
|
|
1972
1998
|
return primeFilterStates;
|
|
1973
1999
|
}, ...(ngDevMode ? [{ debugName: "primeFilterStates" }] : []));
|
|
1974
2000
|
this.#isSortAndFilterMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSortAndFilterMetaInitialized" }] : []));
|
|
2001
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1975
2002
|
this.#defaultParamsEffect = effectWithDeps([this.#metadata.defaultParams], ([defaultParams]) => {
|
|
1976
|
-
this.#sortStates.set(
|
|
1977
|
-
this.#filterStates.set(
|
|
2003
|
+
this.#sortStates.set(tableCreateSortState(defaultParams));
|
|
2004
|
+
this.#filterStates.set(tableCreateFilterState(defaultParams));
|
|
1978
2005
|
this.#isSortAndFilterMetaInitialized.set(true);
|
|
1979
2006
|
}, { firstOnly: true });
|
|
1980
2007
|
this.#isSearchMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSearchMetaInitialized" }] : []));
|
|
@@ -2058,8 +2085,8 @@ class TableDataService extends ADataListService {
|
|
|
2058
2085
|
return;
|
|
2059
2086
|
}
|
|
2060
2087
|
this.#params.set(params);
|
|
2061
|
-
this.#sortStates.set(
|
|
2062
|
-
this.#filterStates.set(
|
|
2088
|
+
this.#sortStates.set(tableCreateSortState(params));
|
|
2089
|
+
this.#filterStates.set(tableCreateFilterState(params));
|
|
2063
2090
|
this.#isSortAndFilterMetaInitialized.set(true);
|
|
2064
2091
|
if (fromQueryParams && !this.#isSearchMetaInitialized() && params?.search) {
|
|
2065
2092
|
this.#searchState.set({ value: params.search, caseSensitive: params.filters?.['global']?.caseSensitive ?? false });
|
|
@@ -2100,17 +2127,17 @@ class TableDataService extends ADataListService {
|
|
|
2100
2127
|
compareWithCurrentParams(params) {
|
|
2101
2128
|
return (params.offset === this.offset() &&
|
|
2102
2129
|
params.limit === this.rows() &&
|
|
2103
|
-
JSON.stringify(
|
|
2104
|
-
JSON.stringify(
|
|
2130
|
+
JSON.stringify(tableCreateSortState(params)) === JSON.stringify(this.#sortStates()) &&
|
|
2131
|
+
JSON.stringify(tableCreateFilterState(params)) === JSON.stringify(this.#filterStates()));
|
|
2105
2132
|
}
|
|
2106
2133
|
#setData(data, count) {
|
|
2107
2134
|
this.#data.set([...data]);
|
|
2108
2135
|
this.#count.set(count ?? data.length);
|
|
2109
2136
|
}
|
|
2110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2111
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2138
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableDataService }); }
|
|
2112
2139
|
}
|
|
2113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableDataService, decorators: [{
|
|
2114
2141
|
type: Injectable
|
|
2115
2142
|
}], ctorParameters: () => [] });
|
|
2116
2143
|
|
|
@@ -2252,10 +2279,10 @@ class TablePreferencesService {
|
|
|
2252
2279
|
}
|
|
2253
2280
|
return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
|
|
2254
2281
|
}
|
|
2255
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2256
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2282
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2283
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePreferencesService }); }
|
|
2257
2284
|
}
|
|
2258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TablePreferencesService, decorators: [{
|
|
2259
2286
|
type: Injectable
|
|
2260
2287
|
}] });
|
|
2261
2288
|
|
|
@@ -2332,10 +2359,10 @@ class TableRemovableSortDirective {
|
|
|
2332
2359
|
}
|
|
2333
2360
|
return multiSortMeta;
|
|
2334
2361
|
}
|
|
2335
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2336
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableRemovableSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2363
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TableRemovableSortDirective, isStandalone: true, selector: "[mngRemovableSort]", ngImport: i0 }); }
|
|
2337
2364
|
}
|
|
2338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableRemovableSortDirective, decorators: [{
|
|
2339
2366
|
type: Directive,
|
|
2340
2367
|
args: [{
|
|
2341
2368
|
selector: '[mngRemovableSort]'
|
|
@@ -2351,10 +2378,10 @@ class TableTemplateDirective extends TemplateDirective {
|
|
|
2351
2378
|
static ngTemplateContextGuard(dir, ctx) {
|
|
2352
2379
|
return true;
|
|
2353
2380
|
}
|
|
2354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2355
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2382
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TableTemplateDirective, isStandalone: true, selector: "[mngTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
2356
2383
|
}
|
|
2357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableTemplateDirective, decorators: [{
|
|
2358
2385
|
type: Directive,
|
|
2359
2386
|
args: [{
|
|
2360
2387
|
selector: '[mngTableTemplate]'
|
|
@@ -2362,16 +2389,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2362
2389
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
2363
2390
|
|
|
2364
2391
|
class TableComponent {
|
|
2365
|
-
#primeTableEffect;
|
|
2366
2392
|
// templates
|
|
2367
2393
|
#templatesMerged;
|
|
2368
2394
|
// subscriptions and refs
|
|
2369
2395
|
#previousDataProvider;
|
|
2370
|
-
#dataProviderEagerFirstLoad;
|
|
2371
|
-
#dataProviderReloadSubscription;
|
|
2372
|
-
#routeQueryParamsSubscription;
|
|
2373
|
-
#routerEventsSubscription;
|
|
2374
|
-
#afterNextRenderRef;
|
|
2375
2396
|
constructor() {
|
|
2376
2397
|
this.filterKeyPrepend = 'f_';
|
|
2377
2398
|
this.FilterTypeEnum = FilterTypeEnum;
|
|
@@ -2384,18 +2405,18 @@ class TableComponent {
|
|
|
2384
2405
|
this.prefs = inject(TablePreferencesService);
|
|
2385
2406
|
this.data = inject((TableDataService));
|
|
2386
2407
|
// descriptor
|
|
2387
|
-
this.descriptorInput = input.required(...(ngDevMode ?
|
|
2408
|
+
this.descriptorInput = input.required({ ...(ngDevMode ? { debugName: "descriptorInput" } : {}), alias: 'descriptor' });
|
|
2388
2409
|
// data source inputs
|
|
2389
2410
|
this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
|
|
2390
2411
|
this.result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : []));
|
|
2391
|
-
this.loadingInput = input(undefined, ...(ngDevMode ?
|
|
2412
|
+
this.loadingInput = input(undefined, { ...(ngDevMode ? { debugName: "loadingInput" } : {}), alias: 'loading', transform: booleanOrUndefinedAttribute });
|
|
2392
2413
|
this.dataProvider = input(...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : []));
|
|
2393
2414
|
// extra features input
|
|
2394
|
-
this.useQueryParams = input(false, ...(ngDevMode ?
|
|
2395
|
-
this.cellClickEnabled = input(true, ...(ngDevMode ?
|
|
2415
|
+
this.useQueryParams = input(false, { ...(ngDevMode ? { debugName: "useQueryParams" } : {}), transform: booleanAttribute });
|
|
2416
|
+
this.cellClickEnabled = input(true, { ...(ngDevMode ? { debugName: "cellClickEnabled" } : {}), transform: booleanAttribute });
|
|
2396
2417
|
this.selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
|
|
2397
|
-
this.selectionEnabled = input(false, ...(ngDevMode ?
|
|
2398
|
-
this.rowReorderEnabledInput = input(true, ...(ngDevMode ?
|
|
2418
|
+
this.selectionEnabled = input(false, { ...(ngDevMode ? { debugName: "selectionEnabled" } : {}), transform: booleanAttribute });
|
|
2419
|
+
this.rowReorderEnabledInput = input(true, { ...(ngDevMode ? { debugName: "rowReorderEnabledInput" } : {}), alias: 'rowReorderEnabled', transform: booleanAttribute });
|
|
2399
2420
|
this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable, ...(ngDevMode ? [{ debugName: "rowReorderEnabled" }] : []));
|
|
2400
2421
|
this.expandedRowKeys = computed(() => {
|
|
2401
2422
|
const descriptor = this.metadata.descriptor();
|
|
@@ -2419,7 +2440,7 @@ class TableComponent {
|
|
|
2419
2440
|
this.hasTitleDisplay = computed(() => this.headerTitleTemplate() || this.metadata.descriptor().title, ...(ngDevMode ? [{ debugName: "hasTitleDisplay" }] : []));
|
|
2420
2441
|
this.isCaptionVisible = computed(() => this.headerTemplate() || this.hasTitleDisplay() || this.tableHeaderFilters().length > 0 || this.metadata.descriptor().search, ...(ngDevMode ? [{ debugName: "isCaptionVisible" }] : []));
|
|
2421
2442
|
// component inputs
|
|
2422
|
-
this.globalFilterFieldsInput = input(undefined, ...(ngDevMode ?
|
|
2443
|
+
this.globalFilterFieldsInput = input(undefined, { ...(ngDevMode ? { debugName: "globalFilterFieldsInput" } : {}), alias: 'globalFilterFields' });
|
|
2423
2444
|
// cell click
|
|
2424
2445
|
this.cellClickSubject = new Subject();
|
|
2425
2446
|
this.isCellClickObserved = signal(this.cellClickSubject.observed, ...(ngDevMode ? [{ debugName: "isCellClickObserved" }] : []));
|
|
@@ -2433,7 +2454,6 @@ class TableComponent {
|
|
|
2433
2454
|
this.templates = input([], ...(ngDevMode ? [{ debugName: "templates" }] : []));
|
|
2434
2455
|
this.contentTemplates = contentChildren(TableTemplateDirective, ...(ngDevMode ? [{ debugName: "contentTemplates" }] : []));
|
|
2435
2456
|
this.primeTable = viewChild((Table), ...(ngDevMode ? [{ debugName: "primeTable" }] : []));
|
|
2436
|
-
this.#primeTableEffect = effectWithDeps([this.primeTable], ([table]) => this.data.setPrimeTable(table));
|
|
2437
2457
|
// templates
|
|
2438
2458
|
this.#templatesMerged = computed(() => [...this.contentTemplates(), ...this.templates()], ...(ngDevMode ? [{ debugName: "#templatesMerged" }] : []));
|
|
2439
2459
|
this.headerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
|
|
@@ -2497,7 +2517,8 @@ class TableComponent {
|
|
|
2497
2517
|
// other
|
|
2498
2518
|
this.navigationOutOfTableInProgress = false;
|
|
2499
2519
|
this.navigationInTableInProgress = false;
|
|
2500
|
-
|
|
2520
|
+
effectWithDeps([this.primeTable], ([table]) => this.data.setPrimeTable(table));
|
|
2521
|
+
effectWithDeps([this.dataProvider], ([dataProvider]) => {
|
|
2501
2522
|
if (dataProvider?.isLazy === false) {
|
|
2502
2523
|
this.loadTableWithDataProvider(this.metadata.defaultParams());
|
|
2503
2524
|
}
|
|
@@ -2506,19 +2527,19 @@ class TableComponent {
|
|
|
2506
2527
|
}
|
|
2507
2528
|
this.#previousDataProvider = dataProvider;
|
|
2508
2529
|
});
|
|
2509
|
-
|
|
2530
|
+
toObservable(this.dataProvider)
|
|
2510
2531
|
.pipe(switchMap(dp => dp?.tableReload$ ?? of({})), takeUntilDestroyed())
|
|
2511
2532
|
.subscribe({
|
|
2512
2533
|
next: e => {
|
|
2513
2534
|
this.reload(e);
|
|
2514
2535
|
}
|
|
2515
2536
|
});
|
|
2516
|
-
|
|
2537
|
+
toObservable(this.useQueryParams)
|
|
2517
2538
|
.pipe(switchMap(useQp => (useQp ? this.route.queryParams : NEVER)), takeUntilDestroyed())
|
|
2518
2539
|
.subscribe(qp => {
|
|
2519
2540
|
this.loadTableFromRouteUpdate(qp);
|
|
2520
2541
|
});
|
|
2521
|
-
|
|
2542
|
+
toObservable(this.useQueryParams)
|
|
2522
2543
|
.pipe(switchMap(useQp => (useQp ? this.router.events : NEVER)), filter(e => (e instanceof NavigationStart && e.url.split('?')[0].split('#')[0] !== this.router.url.split('?')[0].split('#')[0]) ||
|
|
2523
2544
|
e instanceof NavigationEnd ||
|
|
2524
2545
|
e instanceof NavigationCancel ||
|
|
@@ -2526,7 +2547,7 @@ class TableComponent {
|
|
|
2526
2547
|
.subscribe(e => {
|
|
2527
2548
|
this.navigationOutOfTableInProgress = e instanceof NavigationStart;
|
|
2528
2549
|
});
|
|
2529
|
-
|
|
2550
|
+
afterNextRender(() => {
|
|
2530
2551
|
this.isCellClickObserved.set(this.cellClickSubject.observed);
|
|
2531
2552
|
});
|
|
2532
2553
|
this.metadata.setSignalSources(this.descriptorInput, this.globalFilterFieldsInput);
|
|
@@ -2631,10 +2652,10 @@ class TableComponent {
|
|
|
2631
2652
|
this.data.setParams(paramsWithDefaults, true);
|
|
2632
2653
|
this.loadTableWithDataProvider(paramsWithDefaults);
|
|
2633
2654
|
}
|
|
2634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", rowReorder: "rowReorder" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, { provide: ADataListService, useExisting: TableDataService }, TablePreferencesService], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n class=\"mng-button-sm\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (hasLastColumn()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n @if (columnCustomLastTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: TableHeaderWithFiltersComponent, selector: "mng-table-header-with-filters", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: TableRemovableSortDirective, selector: "[mngRemovableSort]" }, { kind: "directive", type: TableHeaderWithFiltersTemplateDirective, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: ["name"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableFilterClassPipe, name: "mngTableFilterClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import('./mediusinc-mng-commons-table-column-toggle.component-DnEnjeJ9.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
|
|
2655
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2656
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", rowReorder: "rowReorder" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, { provide: ADataListService, useExisting: TableDataService }, TablePreferencesService], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n size=\"small\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (hasLastColumn()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n @if (columnCustomLastTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: TableHeaderWithFiltersComponent, selector: "mng-table-header-with-filters", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: TableRemovableSortDirective, selector: "[mngRemovableSort]" }, { kind: "directive", type: TableHeaderWithFiltersTemplateDirective, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: ["name"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableFilterClassPipe, name: "mngTableFilterClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import('./mediusinc-mng-commons-table-column-toggle.component-Bhs_bBBv.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
|
|
2636
2657
|
}
|
|
2637
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "
|
|
2658
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-Bhs_bBBv.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
|
|
2638
2659
|
type: Component,
|
|
2639
2660
|
args: [{ selector: 'mng-table', imports: [
|
|
2640
2661
|
ComponentDirective,
|
|
@@ -2657,7 +2678,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.15", n
|
|
|
2657
2678
|
TableHeaderWithFiltersTemplateDirective
|
|
2658
2679
|
], providers: [TableMetadataService, TableDataService, { provide: ADataListService, useExisting: TableDataService }, TablePreferencesService], host: {
|
|
2659
2680
|
'[class.mng-table-no-header]': '!isCaptionVisible()'
|
|
2660
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n class=\"mng-button-sm\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (hasLastColumn()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n @if (columnCustomLastTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"] }]
|
|
2681
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n size=\"small\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (hasLastColumn()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n @if (columnCustomLastTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"] }]
|
|
2661
2682
|
}], ctorParameters: () => [], propDecorators: { descriptorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], useQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "useQueryParams", required: false }] }], cellClickEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClickEnabled", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowReorderEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorderEnabled", required: false }] }], columnLastMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLastMinWidth", required: false }] }], globalFilterFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], tableLoad: [{ type: i0.Output, args: ["tableLoad"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableTemplateDirective), { isSignal: true }] }], primeTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Table), { isSignal: true }] }] } }) });
|
|
2662
2683
|
|
|
2663
2684
|
/**
|
|
@@ -2696,5 +2717,5 @@ function provideTableChild(config) {
|
|
|
2696
2717
|
* Generated bundle index. Do not edit.
|
|
2697
2718
|
*/
|
|
2698
2719
|
|
|
2699
|
-
export { ADataListService as A,
|
|
2700
|
-
//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-
|
|
2720
|
+
export { ADataListService as A, TableDataService as B, COMMONS_TABLE_FEATURE_CONFIG_IT as C, withTable as D, provideTableChild as E, FilterService as F, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, TableFilterComponent as b, TableColumnValueComponent as c, TableFilterActiveTagComponent as d, TableFilterFormComponent as e, TableHeaderWithFiltersComponent as f, TableHeaderWithFiltersTemplateDirective as g, TableComponent as h, TableTemplateDirective as i, filterGenerateMatchModeOptions as j, filterGetDefaultMatchMode as k, filterSetStateOnChange as l, filterSetStateOnDisplayChange as m, filterAreDatesEqual as n, filterApplySerializationConfigToCmp as o, filterAdjustDisplayValueOnMatchModeChange as p, filterGetDateConfig as q, filterGetNumberConfig as r, createFilterDescriptorsFromGeneric as s, isFilterValueBlank as t, tableNotificationError as u, tableCreateFilterState as v, tableCreateSortState as w, generateTableLayoutPrefsKey as x, FilterValuePipe as y, TableFilterClassPipe as z };
|
|
2721
|
+
//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-CY5FbLvW.mjs.map
|