@decaf-ts/for-angular 0.0.71 → 0.0.73
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.
|
@@ -6112,7 +6112,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
6112
6112
|
if (this.hidden && this.hidden.includes(this.operation))
|
|
6113
6113
|
this.hidden = true;
|
|
6114
6114
|
if (this.valueParserFn && typeof this.valueParserFn === Function.name.toLowerCase())
|
|
6115
|
-
this.value = this.valueParserFn(this.value, this);
|
|
6115
|
+
this.value = await this.valueParserFn(this.value, this);
|
|
6116
6116
|
if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
|
|
6117
6117
|
this.formGroup = undefined;
|
|
6118
6118
|
}
|
|
@@ -7860,6 +7860,8 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
7860
7860
|
event.stopImmediatePropagation();
|
|
7861
7861
|
if (!this.activePage) {
|
|
7862
7862
|
this.activePage = this.getActivePage();
|
|
7863
|
+
if (this.operation === OperationKeys.UPDATE)
|
|
7864
|
+
return this.handleCreateItem(event);
|
|
7863
7865
|
return;
|
|
7864
7866
|
}
|
|
7865
7867
|
const formGroup = this.activeFormGroup;
|
|
@@ -8104,7 +8106,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
8104
8106
|
return this.mapper;
|
|
8105
8107
|
}
|
|
8106
8108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "\n @if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component>\n <div class=\"dcf-width-1-1\">\n <div>\n <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n </ion-button>\n </div>\n }\n </div>\n </div>\n\n <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\" slot=\"content\">\n @if(activePage) {\n <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n @for(item of items; track item.index) {\n <ion-item [class.not-unique]=\"item.title === isUniqueError\" [class.updating]=\"updatingItem?.['index'] === item.index - 1\" lines=\"full\" [button]=\"false\">\n @if(ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n </div>\n }\n }\n\n <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) { {{item.info}}<br /> }\n @if (item.subinfo) { {{item.subinfo}} }\n </ion-note>\n }\n <div slot=\"end\">\n @if(editable) {\n @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n </div>\n </div>\n </div>\n }\n\n @if(max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text class=\"dcf-text-small\"\n [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n >\n {{ locale + (items.length !== max ? '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\" [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.update_item' | translate\">\n <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.create_item' | translate\">\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n {{ locale + (\n required ?\n (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n ) | translate }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n @if(refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if(!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for(item of items; track trackItemFn($index, item)) {\n\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n }\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
8109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "\n @if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component>\n <div class=\"dcf-width-1-1\">\n <div>\n <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n </ion-button>\n </div>\n }\n </div>\n </div>\n\n <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\" slot=\"content\">\n @if(activePage) {\n <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n @for(item of items; track item.index) {\n <ion-item [class.not-unique]=\"item.title === isUniqueError\" [class.updating]=\"updatingItem?.['index'] === item.index - 1\" lines=\"full\" [button]=\"false\">\n @if(ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n </div>\n }\n }\n\n <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) { {{item.info}}<br /> }\n @if (item.subinfo) { {{item.subinfo}} }\n </ion-note>\n }\n <div slot=\"end\">\n @if(editable) {\n @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n </div>\n </div>\n </div>\n }\n\n @if(max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text class=\"dcf-text-small\"\n [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n >\n {{ locale + (items.length !== max ? '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\" [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.update_item' | translate\">\n <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.create_item' | translate\">\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n {{ locale + (\n required ?\n (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n ) | translate }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n @if(refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if(!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for(item of items; track trackItemFn($index, item)) {\n\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n }\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
8108
8110
|
};
|
|
8109
8111
|
FieldsetComponent = __decorate([
|
|
8110
8112
|
Dynamic(),
|
|
@@ -8126,7 +8128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8126
8128
|
LayoutComponent,
|
|
8127
8129
|
IonSpinner,
|
|
8128
8130
|
IconComponent
|
|
8129
|
-
], template: "\n @if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component>\n <div class=\"dcf-width-1-1\">\n <div>\n <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n </ion-button>\n </div>\n }\n </div>\n </div>\n\n <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\" slot=\"content\">\n @if(activePage) {\n <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n @for(item of items; track item.index) {\n <ion-item [class.not-unique]=\"item.title === isUniqueError\" [class.updating]=\"updatingItem?.['index'] === item.index - 1\" lines=\"full\" [button]=\"false\">\n @if(ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n </div>\n }\n }\n\n <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) { {{item.info}}<br /> }\n @if (item.subinfo) { {{item.subinfo}} }\n </ion-note>\n }\n <div slot=\"end\">\n @if(editable) {\n @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n </div>\n </div>\n </div>\n }\n\n @if(max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text class=\"dcf-text-small\"\n [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n >\n {{ locale + (items.length !== max ? '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\" [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.update_item' | translate\">\n <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.create_item' | translate\">\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n {{ locale + (\n required ?\n (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n ) | translate }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n @if(refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if(!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for(item of items; track trackItemFn($index, item)) {\n\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n }\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
|
|
8131
|
+
], template: "\n @if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n #component>\n <div class=\"dcf-width-1-1\">\n <div>\n <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n <div class=\"dcf-width-expand\">\n <legend>{{ (title ? title : name) | translate }}</legend>\n </div>\n @if (!isRequired && ['create'].includes(operation) && multiple) {\n <div class=\"dcf-width-auto dcf-delete\">\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n </ion-button>\n </div>\n }\n </div>\n </div>\n\n <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\" slot=\"content\">\n @if(activePage) {\n <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n <ngx-decaf-layout\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [children]=\"activePage || []\"\n [parentForm]=\"formGroup || parentForm\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"activePage?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n [hidden]=\"items.length === max && !updatingItem\"\n />\n </div>\n }\n\n @if (multiple && ['create', 'update'].includes(operation)) {\n @if (multiple && items.length) {\n <ion-list class=\"dcf-fields-list\">\n <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n @for(item of items; track item.index) {\n <ion-item [class.not-unique]=\"item.title === isUniqueError\" [class.updating]=\"updatingItem?.['index'] === item.index - 1\" lines=\"full\" [button]=\"false\">\n @if(ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n </div>\n }\n }\n\n <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) { {{item.info}}<br /> }\n @if (item.subinfo) { {{item.subinfo}} }\n </ion-note>\n }\n <div slot=\"end\">\n @if(editable) {\n @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n </div>\n </div>\n </div>\n }\n\n @if(max) {\n <div class=\"dcf-width-1-1 dcf-max-message-container\">\n <ion-text class=\"dcf-text-small\"\n [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n >\n {{ locale + (items.length !== max ? '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n </ion-text>\n </div>\n }\n\n <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n @if (updatingItem) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\" [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.update_item' | translate\">\n <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n {{ locale + '.update_item' | translate }}\n </ion-button>\n </div>\n } @else {\n @if (items.length < max || !max) {\n <div>\n <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\" [attr.aria-label]=\"locale +'.create_item' | translate\">\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n {{ locale + (\n required ?\n (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n ) | translate }}\n </ion-button>\n </div>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n @if(refreshing) {\n <div class=\"dcf-loading-container\">\n <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n </div>\n } @else {\n <legend>{{ (title ? title : name) | translate }}</legend>\n @if(!items.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @for(item of items; track trackItemFn($index, item)) {\n\n <div class=\"dcf-fieldset-read-item\">\n <div>\n <ngx-decaf-layout\n [className]=\"operation\"\n [operation]=\"operation\"\n [flexMode]=\"item?.props?.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'collapse'\"\n [children]=\"item || []\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n [borders]=\"item?.props?.borders ?? false\"\n [breakpoint]=\"breakpoint ?? 'large'\"\n />\n </div>\n </div>\n }\n }\n }\n }\n", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-6)}\n"] }]
|
|
8130
8132
|
}], ctorParameters: () => [], propDecorators: { formControl: [{
|
|
8131
8133
|
type: Input
|
|
8132
8134
|
}], customTypes: [{
|
|
@@ -12719,7 +12721,7 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
12719
12721
|
}
|
|
12720
12722
|
}
|
|
12721
12723
|
const parserFn = mapper[this.cols[index]]?.valueParserFn || undefined;
|
|
12722
|
-
return { ...accum, [curr]: parserFn ? parserFn(mapped[curr],
|
|
12724
|
+
return { ...accum, [curr]: parserFn ? parserFn(mapped[curr], this) : mapped[curr] };
|
|
12723
12725
|
}, { ...props });
|
|
12724
12726
|
}
|
|
12725
12727
|
mapResults(data) {
|
|
@@ -12732,7 +12734,11 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
12732
12734
|
}
|
|
12733
12735
|
async handleAction(event, action, uid) {
|
|
12734
12736
|
event.stopImmediatePropagation();
|
|
12735
|
-
|
|
12737
|
+
if (this.isAllowed(action))
|
|
12738
|
+
await this.router.navigate([`/${this.route}/${action}/${uid}`]);
|
|
12739
|
+
const data = this.items.find(item => item['uid'] === uid);
|
|
12740
|
+
if (data)
|
|
12741
|
+
this.listenEvent.emit({ name: ComponentEventNames.CLICK, data });
|
|
12736
12742
|
}
|
|
12737
12743
|
async openFilterSelectOptions(event) {
|
|
12738
12744
|
const type = (this.filterOptions.length > 10 ? SelectFieldInterfaces.MODAL : SelectFieldInterfaces.POPOVER);
|
|
@@ -12760,7 +12766,7 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
12760
12766
|
}
|
|
12761
12767
|
}
|
|
12762
12768
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterBy: "filterBy", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper" }, usesInheritance: true, ngImport: i0, template: "\n@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if(filterOptions?.length) {\n <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\">\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? '' \"\n [labelPlacement]=\"'floating'\"\n [label]=\" locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\" locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n @for(option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n }\n <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n\n<div class=\"dcf-table-container\">\n @if(initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for(header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for(item of items; track trackItemFn($index, item)) {\n <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n @for(col of item | keyvalue; track $index) {\n @if(!['actions', 'uid'].includes(col.key)) {\n <td
|
|
12769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterBy: "filterBy", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper" }, usesInheritance: true, ngImport: i0, template: "\n@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if(filterOptions?.length) {\n <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\">\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? '' \"\n [labelPlacement]=\"'floating'\"\n [label]=\" locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\" locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n @for(option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n }\n <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n @if(initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for(header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for(item of items; track trackItemFn($index, item)) {\n <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n @for(col of item | keyvalue; track $index) {\n @if(!['actions', 'uid'].includes(col.key)) {\n <td [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async) \"></td>\n } @else {\n @if(allowOperations) {\n <td class=\"dcf-col-actions\">\n <div class=\"dcf-flex dcf-flex-center\">\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-pencil\"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n @if (loadMoreData) {\n <div class=\"dcf-table-pagination\">\n @if (pages > 0 && !searchValue?.length) {\n <ngx-decaf-pagination\n [totalPages]=\"pages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n\n }\n </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
12764
12770
|
};
|
|
12765
12771
|
TableComponent = __decorate([
|
|
12766
12772
|
Dynamic()
|
|
@@ -12776,7 +12782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
12776
12782
|
EmptyStateComponent,
|
|
12777
12783
|
IconComponent,
|
|
12778
12784
|
PaginationComponent
|
|
12779
|
-
], template: "\n@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if(filterOptions?.length) {\n <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\">\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? '' \"\n [labelPlacement]=\"'floating'\"\n [label]=\" locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\" locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n @for(option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n }\n <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n\n<div class=\"dcf-table-container\">\n @if(initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for(header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for(item of items; track trackItemFn($index, item)) {\n <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n @for(col of item | keyvalue; track $index) {\n @if(!['actions', 'uid'].includes(col.key)) {\n <td
|
|
12785
|
+
], template: "\n@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if(filterOptions?.length) {\n <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\">\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? '' \"\n [labelPlacement]=\"'floating'\"\n [label]=\" locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\" locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n @for(option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n }\n <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n @if(initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for(header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate}}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for(item of items; track trackItemFn($index, item)) {\n <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n @for(col of item | keyvalue; track $index) {\n @if(!['actions', 'uid'].includes(col.key)) {\n <td [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async) \"></td>\n } @else {\n @if(allowOperations) {\n <td class=\"dcf-col-actions\">\n <div class=\"dcf-flex dcf-flex-center\">\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-pencil\"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n @if (loadMoreData) {\n <div class=\"dcf-table-pagination\">\n @if (pages > 0 && !searchValue?.length) {\n <ngx-decaf-pagination\n [totalPages]=\"pages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n\n }\n </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
|
|
12780
12786
|
}], propDecorators: { filterModel: [{
|
|
12781
12787
|
type: Input
|
|
12782
12788
|
}], filterOptions: [{
|
|
@@ -13267,8 +13273,8 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13267
13273
|
const relation = pk === this.pk ?
|
|
13268
13274
|
{} : (properties.includes(this.pk) && !data[this.pk]) ?
|
|
13269
13275
|
{ [this.pk]: modelId } : {};
|
|
13270
|
-
return Model.build(Object.assign(data || {}, relation, (modelId && !data[pk] ?
|
|
13271
|
-
{ [pk]:
|
|
13276
|
+
return Model.build(Object.assign(data || {}, relation, (modelId && !data[this.pk] ?
|
|
13277
|
+
{ [this.pk]: modelId } : {})), repository.class.name);
|
|
13272
13278
|
}
|
|
13273
13279
|
return uid;
|
|
13274
13280
|
}
|
|
@@ -13330,20 +13336,21 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13330
13336
|
* @param {IBaseCustomEvent} event - The submit event containing form data
|
|
13331
13337
|
* @return {Promise<IModelComponentSubmitEvent|void>} Promise that resolves on success or throws on error
|
|
13332
13338
|
*/
|
|
13333
|
-
async submit(event, redirect = false,
|
|
13339
|
+
async submit(event, redirect = false, repo) {
|
|
13334
13340
|
let success = false;
|
|
13335
13341
|
let message = '';
|
|
13336
13342
|
try {
|
|
13337
|
-
if (!
|
|
13338
|
-
|
|
13339
|
-
// const pk = this.pk || Model.pk(repository.class as Constructor<Model>);
|
|
13343
|
+
if (!repo)
|
|
13344
|
+
repo = this._repository;
|
|
13340
13345
|
const operation = this.operation;
|
|
13341
13346
|
const { data } = event;
|
|
13342
13347
|
if (data) {
|
|
13348
|
+
const repository = repo;
|
|
13343
13349
|
const model = this.parseData(data || {}, operation, repository);
|
|
13344
13350
|
if (!this.modelId && model?.[this.pk])
|
|
13345
13351
|
this.modelId = model[this.pk];
|
|
13346
13352
|
let result;
|
|
13353
|
+
const pk = Model.pk(repository.class);
|
|
13347
13354
|
switch (operation) {
|
|
13348
13355
|
case OperationKeys.CREATE:
|
|
13349
13356
|
result = await (!Array.isArray(model)
|
|
@@ -13351,9 +13358,11 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13351
13358
|
: repository.createAll(model));
|
|
13352
13359
|
break;
|
|
13353
13360
|
case OperationKeys.UPDATE: {
|
|
13354
|
-
|
|
13355
|
-
|
|
13356
|
-
|
|
13361
|
+
const models = (!Array.isArray(model) ? [model] : model);
|
|
13362
|
+
for (const m of models) {
|
|
13363
|
+
const check = m[pk] ? await repository.read((m)[pk]) : false;
|
|
13364
|
+
result = await (!check ? repository.create(m) : repository.update(m));
|
|
13365
|
+
}
|
|
13357
13366
|
break;
|
|
13358
13367
|
}
|
|
13359
13368
|
case OperationKeys.DELETE:
|
|
@@ -13362,11 +13371,8 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13362
13371
|
: repository.deleteAll(model));
|
|
13363
13372
|
break;
|
|
13364
13373
|
}
|
|
13365
|
-
const pk = Model.pk(repository.class);
|
|
13366
13374
|
const pkValue = model[pk] || model[this.pk] || model || "";
|
|
13367
|
-
message = await this.translate(
|
|
13368
|
-
? `operations.${operation}.${result ? 'success' : 'error'}`
|
|
13369
|
-
: `operations.multiple`, { "0": repository.class.name || pk, "1": pkValue });
|
|
13375
|
+
message = await this.translate(`operations.${operation}.${result ? 'success' : 'error'}`, { "0": repository.class.name || pk, "1": pkValue });
|
|
13370
13376
|
success = result ? true : false;
|
|
13371
13377
|
if (success) {
|
|
13372
13378
|
if (result?.[this.pk])
|
|
@@ -13409,26 +13415,18 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13409
13415
|
const constructor = Model.get(modelName);
|
|
13410
13416
|
if (constructor) {
|
|
13411
13417
|
const properties = this.getModelProperties(constructor);
|
|
13412
|
-
// if (!model) model = {} as KeyValue;
|
|
13413
13418
|
for (const prop of properties) {
|
|
13414
|
-
const
|
|
13415
|
-
const context = getModelAndRepository(
|
|
13419
|
+
const type = this.getModelPropertyType(constructor, prop);
|
|
13420
|
+
const context = getModelAndRepository(type);
|
|
13416
13421
|
if (!context)
|
|
13417
|
-
return getRepository(
|
|
13422
|
+
return getRepository(type, prop, model);
|
|
13418
13423
|
const { repository } = context;
|
|
13419
13424
|
if (modelName === this.modelName) {
|
|
13420
13425
|
const data = await this.handleRead(uid, repository, modelName);
|
|
13421
13426
|
if (data)
|
|
13422
13427
|
this.model = Model.build({ [prop]: data }, modelName);
|
|
13423
13428
|
}
|
|
13424
|
-
// else {
|
|
13425
|
-
// model[prop as string] = Model.build({}, type);
|
|
13426
|
-
// }
|
|
13427
13429
|
}
|
|
13428
|
-
// (this.model as KeyValue)[parent as string] = Model.build(
|
|
13429
|
-
// model,
|
|
13430
|
-
// modelName
|
|
13431
|
-
// );
|
|
13432
13430
|
}
|
|
13433
13431
|
};
|
|
13434
13432
|
repository = (repository || (await getRepository(modelName)));
|
|
@@ -13450,7 +13448,8 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13450
13448
|
const properties = Metadata.properties(constructor);
|
|
13451
13449
|
const promises = properties.map(async (prop) => {
|
|
13452
13450
|
const type = Metadata.type(constructor, prop).name;
|
|
13453
|
-
let data = evt.data[prop] || (parent ?
|
|
13451
|
+
let data = evt.data[prop] || (parent ?
|
|
13452
|
+
event.data[parent][prop] : event.data[prop]);
|
|
13454
13453
|
if (data) {
|
|
13455
13454
|
if (parent || Array.isArray(data))
|
|
13456
13455
|
data = [...Object.values(data)];
|
|
@@ -13491,13 +13490,13 @@ class NgxModelPageDirective extends NgxPageDirective {
|
|
|
13491
13490
|
let resultMessage = '';
|
|
13492
13491
|
const promises = Object.keys(models).map(async (m) => {
|
|
13493
13492
|
const { model, repository } = models[m];
|
|
13494
|
-
const { success
|
|
13493
|
+
const { success } = await this.submit({ data: model }, false, repository);
|
|
13495
13494
|
if (success)
|
|
13496
|
-
resultMessage =
|
|
13495
|
+
resultMessage = await this.translate('operations.multiple.success');
|
|
13497
13496
|
result.push(success);
|
|
13498
13497
|
});
|
|
13499
13498
|
await Promise.all(promises);
|
|
13500
|
-
const success = result.every((
|
|
13499
|
+
const success = result.every((r) => r);
|
|
13501
13500
|
if (success && redirect)
|
|
13502
13501
|
this.location.back();
|
|
13503
13502
|
return { ...{ data: models }, success, message: resultMessage };
|