@mediusinc/mng-commons 0.17.5 → 0.17.7
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/esm2020/lib/components/action/editor/action-editor.component.mjs +4 -1
- package/esm2020/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.mjs +3 -3
- package/esm2020/lib/components/tableview/table/column-value/column-value.component.mjs +4 -3
- package/esm2020/lib/components/tableview/table/table.component.mjs +15 -5
- package/esm2020/lib/descriptors/action.descriptor.mjs +2 -2
- package/esm2020/lib/descriptors/column.descriptor.mjs +8 -1
- package/esm2020/lib/descriptors/table.descriptor.mjs +2 -3
- package/esm2020/lib/descriptors/types/column.type.mjs +2 -1
- package/esm2020/lib/pipes/getter.pipe.mjs +4 -4
- package/fesm2015/mediusinc-mng-commons.mjs +37 -16
- package/fesm2015/mediusinc-mng-commons.mjs.map +1 -1
- package/fesm2020/mediusinc-mng-commons.mjs +34 -13
- package/fesm2020/mediusinc-mng-commons.mjs.map +1 -1
- package/lib/components/tableview/table/column-value/column-value.component.d.ts +1 -0
- package/lib/descriptors/column.descriptor.d.ts +3 -2
- package/lib/descriptors/table.descriptor.d.ts +2 -2
- package/lib/descriptors/types/column.type.d.ts +2 -1
- package/lib/pipes/getter.pipe.d.ts +1 -1
- package/package.json +1 -1
- package/scss/mng-overrides/_theme_datatable.scss +40 -6
- package/scss/mng-overrides/_theme_dialog.scss +2 -1
- package/version-info.json +5 -5
|
@@ -1038,6 +1038,7 @@ var ColumnTypeEnum;
|
|
|
1038
1038
|
ColumnTypeEnum[ColumnTypeEnum["Date"] = 4] = "Date";
|
|
1039
1039
|
ColumnTypeEnum[ColumnTypeEnum["Enum"] = 5] = "Enum";
|
|
1040
1040
|
ColumnTypeEnum[ColumnTypeEnum["Custom"] = 6] = "Custom";
|
|
1041
|
+
ColumnTypeEnum[ColumnTypeEnum["Html"] = 7] = "Html";
|
|
1041
1042
|
})(ColumnTypeEnum || (ColumnTypeEnum = {}));
|
|
1042
1043
|
|
|
1043
1044
|
var TableviewEditorTypeEnum;
|
|
@@ -1875,7 +1876,7 @@ class ActionEditorDescriptor extends ActionDescriptor {
|
|
|
1875
1876
|
}
|
|
1876
1877
|
class ActionEditorSubmitDescriptor extends ActionDescriptor {
|
|
1877
1878
|
constructor(editorAction, submitType = ActionEditorSubmitTypeEnum.Submit) {
|
|
1878
|
-
super(editorAction.model, submitType === ActionEditorSubmitTypeEnum.Submit ?
|
|
1879
|
+
super(editorAction.model, submitType === ActionEditorSubmitTypeEnum.Submit ? `${editorAction.actionName}.submit` : `${editorAction.actionName}.cancel`);
|
|
1879
1880
|
this._editorAction = editorAction;
|
|
1880
1881
|
this._submitType = submitType;
|
|
1881
1882
|
this._position = ActionPositionEnum.FooterRight;
|
|
@@ -2639,6 +2640,8 @@ class ColumnDescriptor {
|
|
|
2639
2640
|
return this.asEnum(args[0], args[1], args[2]);
|
|
2640
2641
|
case ColumnTypeEnum.Custom:
|
|
2641
2642
|
return this.asCustomComponent(args[0]);
|
|
2643
|
+
case ColumnTypeEnum.Html:
|
|
2644
|
+
return this.asHtml();
|
|
2642
2645
|
case ColumnTypeEnum.String:
|
|
2643
2646
|
default:
|
|
2644
2647
|
return this;
|
|
@@ -2686,6 +2689,10 @@ class ColumnDescriptor {
|
|
|
2686
2689
|
this._customComponentType = customComponentType;
|
|
2687
2690
|
return this;
|
|
2688
2691
|
}
|
|
2692
|
+
asHtml() {
|
|
2693
|
+
this._columnType = ColumnTypeEnum.Html;
|
|
2694
|
+
return this;
|
|
2695
|
+
}
|
|
2689
2696
|
withClassName(className, headerClassName) {
|
|
2690
2697
|
this._className = className ?? '';
|
|
2691
2698
|
this._headerClassName = headerClassName ?? '';
|
|
@@ -2742,6 +2749,7 @@ class ColumnDescriptor {
|
|
|
2742
2749
|
}
|
|
2743
2750
|
case ColumnTypeEnum.String:
|
|
2744
2751
|
case ColumnTypeEnum.Custom:
|
|
2752
|
+
case ColumnTypeEnum.Html:
|
|
2745
2753
|
default:
|
|
2746
2754
|
filterType = FilterTypeEnum.String;
|
|
2747
2755
|
break;
|
|
@@ -4084,7 +4092,6 @@ class ModelDescriptor {
|
|
|
4084
4092
|
class TableDescriptor {
|
|
4085
4093
|
constructor(modelType, idProperty, titleProperty, i18nBaseKey) {
|
|
4086
4094
|
this._filterDisplay = TableFilterDisplayEnum.Menu;
|
|
4087
|
-
this._paginationMode = TablePaginationModeEnum.Pagination;
|
|
4088
4095
|
this._rowsPerPageOptions = [25, 50, 100];
|
|
4089
4096
|
this._defaultNumRows = this._rowsPerPageOptions[0];
|
|
4090
4097
|
this._columns = [];
|
|
@@ -6701,9 +6708,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
6701
6708
|
}] });
|
|
6702
6709
|
|
|
6703
6710
|
class MngGetterPipe {
|
|
6704
|
-
transform(
|
|
6705
|
-
if (typeof
|
|
6706
|
-
return
|
|
6711
|
+
transform(item, getterFn, value) {
|
|
6712
|
+
if (typeof getterFn === 'function') {
|
|
6713
|
+
return getterFn(item, value);
|
|
6707
6714
|
}
|
|
6708
6715
|
return value;
|
|
6709
6716
|
}
|
|
@@ -8972,6 +8979,9 @@ class MngActionEditorComponent {
|
|
|
8972
8979
|
this.triggerSubmit();
|
|
8973
8980
|
return of(undefined);
|
|
8974
8981
|
});
|
|
8982
|
+
if (this.action.hasRunConfirmation) {
|
|
8983
|
+
action.withRunConfirmationDescriptor(this.action.runConfirmationDialogDescriptor);
|
|
8984
|
+
}
|
|
8975
8985
|
}
|
|
8976
8986
|
else {
|
|
8977
8987
|
action.withRunFunction(() => {
|
|
@@ -9360,6 +9370,7 @@ class MngTableColumnValueComponent {
|
|
|
9360
9370
|
this.columnTypeDate = ColumnTypeEnum.Date;
|
|
9361
9371
|
this.columnTypeEnum = ColumnTypeEnum.Enum;
|
|
9362
9372
|
this.columnTypeCustom = ColumnTypeEnum.Custom;
|
|
9373
|
+
this.columnTypeHtml = ColumnTypeEnum.Html;
|
|
9363
9374
|
this.styleMaxWidth = null;
|
|
9364
9375
|
this.className = 'nowrap';
|
|
9365
9376
|
this.jsonPath = '$';
|
|
@@ -9391,10 +9402,10 @@ class MngTableColumnValueComponent {
|
|
|
9391
9402
|
}
|
|
9392
9403
|
}
|
|
9393
9404
|
MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnValueComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.MessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9394
|
-
MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ item | jsonPath: jsonPath | getter: descriptor.getter | template: descriptor.template
|
|
9405
|
+
MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ (descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeHtml\">\n <span\n [innerHTML]=\"(descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeNumber\">\n {{ item | jsonPath: jsonPath | number: descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCurrency\">\n {{ item | jsonPath: jsonPath | currency: currency:descriptor.currencyDisplay:descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeDate\">\n {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n <ng-template #booleanText>\n {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum\">\n {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCustom\">\n <ng-container\n [mngComponent]=\"descriptor.customComponentType!\"\n [inputs]=\"{\n value: item | jsonPath: jsonPath,\n item: item,\n descriptor: descriptor\n }\"></ng-container>\n </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}.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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPathPipe, name: "jsonPath" }, { kind: "pipe", type: MngEnumPipe, name: "enum" }, { kind: "pipe", type: MngBooleanPipe, name: "boolean" }, { kind: "pipe", type: MngGetterPipe, name: "getter" }, { kind: "pipe", type: MngTemplatePipe, name: "template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9395
9406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
|
|
9396
9407
|
type: Component,
|
|
9397
|
-
args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ item | jsonPath: jsonPath | getter: descriptor.getter | template: descriptor.template
|
|
9408
|
+
args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ (descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeHtml\">\n <span\n [innerHTML]=\"(descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeNumber\">\n {{ item | jsonPath: jsonPath | number: descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCurrency\">\n {{ item | jsonPath: jsonPath | currency: currency:descriptor.currencyDisplay:descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeDate\">\n {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n <ng-template #booleanText>\n {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum\">\n {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCustom\">\n <ng-container\n [mngComponent]=\"descriptor.customComponentType!\"\n [inputs]=\"{\n value: item | jsonPath: jsonPath,\n item: item,\n descriptor: descriptor\n }\"></ng-container>\n </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}.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"] }]
|
|
9398
9409
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.MessageService }, { type: i2.TranslateService }]; }, propDecorators: { descriptor: [{
|
|
9399
9410
|
type: Input
|
|
9400
9411
|
}], item: [{
|
|
@@ -9615,13 +9626,23 @@ class MngTableComponent {
|
|
|
9615
9626
|
this.columnActionMinWidth = StylesUtil.calculateTableColumnActionWidth(this.descriptor, this.rowInlineActions);
|
|
9616
9627
|
}
|
|
9617
9628
|
// check if infinite scroll
|
|
9618
|
-
|
|
9629
|
+
let paginationMode = TablePaginationModeEnum.None;
|
|
9630
|
+
if (typeof this.descriptor?.paginationMode !== 'undefined') {
|
|
9631
|
+
// descriptor choice is the most strong - if defined, use this value
|
|
9632
|
+
paginationMode = this.descriptor.paginationMode;
|
|
9633
|
+
}
|
|
9634
|
+
else if (typeof this.dataProvider !== 'undefined') {
|
|
9635
|
+
// when data provider is used, use pagination
|
|
9636
|
+
paginationMode = TablePaginationModeEnum.Pagination;
|
|
9637
|
+
}
|
|
9638
|
+
console.log(paginationMode);
|
|
9639
|
+
if (paginationMode === TablePaginationModeEnum.InfiniteScroll) {
|
|
9619
9640
|
this.infiniteScroll = true;
|
|
9620
|
-
this.tableFullHeightOffset = this.descriptor
|
|
9621
|
-
this.rowHeight = this.descriptor
|
|
9641
|
+
this.tableFullHeightOffset = this.descriptor?.tableFullHeightOffset ?? 315;
|
|
9642
|
+
this.rowHeight = this.descriptor?.rowHeight ?? 45;
|
|
9622
9643
|
this.useQueryParams = false;
|
|
9623
9644
|
}
|
|
9624
|
-
else if (
|
|
9645
|
+
else if (paginationMode === TablePaginationModeEnum.Pagination) {
|
|
9625
9646
|
this.isPagination = true;
|
|
9626
9647
|
}
|
|
9627
9648
|
// check if data provider is supplied, if is, use it primarily
|
|
@@ -10696,10 +10717,10 @@ class MngFormlyFieldTableDialogMultiselectComponent extends FieldType {
|
|
|
10696
10717
|
}
|
|
10697
10718
|
}
|
|
10698
10719
|
MngFormlyFieldTableDialogMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
10699
|
-
MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label! | translate}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n <ng-template pTemplate=\"content\" class=\"table-container\">\n <div class=\"
|
|
10720
|
+
MngFormlyFieldTableDialogMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngFormlyFieldTableDialogMultiselectComponent, selector: "mng-formly-table-multiselect-add-field", usesInheritance: true, ngImport: i0, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label! | translate}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n <ng-template pTemplate=\"content\" class=\"table-container\">\n <div class=\"h-full flex flex-column\">\n <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n <mng-table\n [descriptor]=\"descriptor.mainTableDescriptor\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [loading]=\"dialogIsLoading$\"\n (selectionChange)=\"onSelectionChange($event)\">\n </mng-table>\n </div>\n </div>\n\n <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.add' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-primary\"\n (click)=\"addItems()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </div>\n </div>\n </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "directive", type: MngTemplateDirective, selector: "[mngTemplate]", inputs: ["type", "mngTemplate"] }, { kind: "component", type: MngTableComponent, selector: "mng-table", inputs: ["descriptor", "items", "queryResult", "loading", "dataProvider", "useQueryParams", "selectionMode", "selectionEnabled", "actions", "isColumnClickable", "viewContainer", "captionComponent", "columnActionComponent", "columnActionMinWidth"], outputs: ["tableLoad", "cellClick", "selectionChange", "captionComponentInstance", "columnActionComponentInstance"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10700
10721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngFormlyFieldTableDialogMultiselectComponent, decorators: [{
|
|
10701
10722
|
type: Component,
|
|
10702
|
-
args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label! | translate}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n <ng-template pTemplate=\"content\" class=\"table-container\">\n <div class=\"
|
|
10723
|
+
args: [{ selector: 'mng-formly-table-multiselect-add-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mng-table [descriptor]=\"descriptor.mainTableDescriptor\" [items]=\"itemsAsync\">\n <ng-template mngTemplate=\"caption\">\n <div class=\"flex flex-row justify-content-end align-items-center table-header pt-0\">\n <label class=\"mng-datatable-form-label p-0 m-0\" [for]=\"key\">{{ to?.label! | translate }} <span *ngIf=\"to.required && to['hideRequiredMarker'] !== true\">*</span></label>\n <button\n *ngIf=\"hasAddAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-plus\"\n class=\"p-button-rounded mng-button-xs\"\n (click)=\"openAddDialog()\"\n [disabled]=\"formControl!.disabled\"></button>\n </div>\n </ng-template>\n <ng-template mngTemplate=\"columnAction\" let-item=\"rowItem\">\n <button\n *ngIf=\"hasDeleteAction && !options?.formState?.disabled\"\n pButton\n pRipple\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-danger mng-button-xs\"\n (click)=\"removeItem(item)\"\n [disabled]=\"formControl!.disabled\"></button>\n </ng-template>\n</mng-table>\n\n<p-dialog\n *ngIf=\"hasAddAction\"\n [(visible)]=\"isDialogVisible\"\n [draggable]=\"false\"\n [header]=\"'general.addItem' | translate: {item: to?.label! | translate}\"\n [modal]=\"true\"\n appendTo=\"body\"\n styleClass=\"p-fluid mng-dialog mng-dialog-sm mng-formly-field-table-multiselect-dialog\">\n <ng-template pTemplate=\"content\" class=\"table-container\">\n <div class=\"h-full flex flex-column\">\n <div class=\"flex-grow-1 formly-field-table-multiselect-dialog-form-container\">\n <div class=\"mng-formly-field-table-multiselect-dialog-table\">\n <mng-table\n [descriptor]=\"descriptor.mainTableDescriptor\"\n [queryResult]=\"addItemsAsync\"\n [selectionEnabled]=\"true\"\n [loading]=\"dialogIsLoading$\"\n (selectionChange)=\"onSelectionChange($event)\">\n </mng-table>\n </div>\n </div>\n\n <div class=\"flex flex-row justify-content-end mng-formly-field-table-multiselect-dialog-footer\">\n <button pButton pRipple type=\"button\" [label]=\"'general.cancel' | translate\" icon=\"pi pi-times\" class=\"p-button-text\" (click)=\"hideDialog()\"></button>\n <button\n pButton\n pRipple\n type=\"button\"\n [label]=\"'general.add' | translate\"\n icon=\"pi pi-check\"\n class=\"p-button-primary\"\n (click)=\"addItems()\"\n [loading]=\"(dialogIsLoading$ | async) ?? false\"\n [disabled]=\"form.disabled\"></button>\n </div>\n </div>\n </ng-template>\n</p-dialog>\n", styles: [".table-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;margin-top:2rem}.table-container{overflow:hidden}.table-footer button{width:8rem}.table-footer button:not(:first-child){margin-left:1.5rem}.table-scroll{max-height:75vh;overflow-y:auto}\n"] }]
|
|
10703
10724
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
10704
10725
|
|
|
10705
10726
|
class MngFormlyFieldTabsComponent extends FieldType {
|