@decaf-ts/for-angular 0.1.25 → 0.1.27
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.
|
@@ -7375,7 +7375,7 @@ async function getNgxInlineModal(inlineContent, props = {}, injector) {
|
|
|
7375
7375
|
* @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
|
|
7376
7376
|
* @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
|
|
7377
7377
|
*/
|
|
7378
|
-
async function getNgxSelectOptionsModal(title, options, injector) {
|
|
7378
|
+
async function getNgxSelectOptionsModal(title, options, uid, injector) {
|
|
7379
7379
|
const props = {
|
|
7380
7380
|
tag: 'ngx-decaf-list',
|
|
7381
7381
|
title,
|
|
@@ -7388,7 +7388,7 @@ async function getNgxSelectOptionsModal(title, options, injector) {
|
|
|
7388
7388
|
type: ListComponentsTypes.INFINITE,
|
|
7389
7389
|
isModalChild: true,
|
|
7390
7390
|
},
|
|
7391
|
-
className: `dcf-modal dcf-modal-select-interface`,
|
|
7391
|
+
className: `dcf-modal dcf-modal-select-interface ${uid ? `dcf-modal-${uid.toLowerCase()}` : ''}`,
|
|
7392
7392
|
};
|
|
7393
7393
|
return await getNgxModalComponent(props, {}, injector || undefined);
|
|
7394
7394
|
}
|
|
@@ -7757,7 +7757,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7757
7757
|
event.stopImmediatePropagation();
|
|
7758
7758
|
const loading = await this.loadingController.create({});
|
|
7759
7759
|
await loading.present();
|
|
7760
|
-
const modal = await getNgxSelectOptionsModal(this.label, this.options);
|
|
7760
|
+
const modal = await getNgxSelectOptionsModal(this.label, this.options, this.name);
|
|
7761
7761
|
// this.changeDetectorRef.detectChanges();
|
|
7762
7762
|
loading.remove();
|
|
7763
7763
|
const { data, role } = await modal.onWillDismiss();
|
|
@@ -9811,7 +9811,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
|
|
|
9811
9811
|
return this.mapper;
|
|
9812
9812
|
}
|
|
9813
9813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\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 >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\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\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\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\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (\n item of items;\n track trackItemFn(item.index, item.title)\n ) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </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\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\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\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></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\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\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\n name=\"crescent\"\n color=\"primary\"\n ></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 <div\n class=\"dcf-fieldset-read-item\"\n [class.dcf-accordion]=\"multiple\"\n >\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [accordion]=\"multiple\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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", "accordion"] }, { 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" }] }); }
|
|
9814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n [id]=\"name?.toLowerCase() + '-fieldset'\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\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\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\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\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (\n item of items;\n track trackItemFn(item.index, item.title)\n ) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </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\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\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\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></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\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\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\n name=\"crescent\"\n color=\"primary\"\n ></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 <div\n class=\"dcf-fieldset-read-item\"\n [class.dcf-accordion]=\"multiple\"\n >\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [accordion]=\"multiple\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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", "accordion"] }, { 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" }] }); }
|
|
9815
9815
|
};
|
|
9816
9816
|
FieldsetComponent = __decorate([
|
|
9817
9817
|
Dynamic(),
|
|
@@ -9833,7 +9833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
9833
9833
|
LayoutComponent,
|
|
9834
9834
|
IonSpinner,
|
|
9835
9835
|
IconComponent,
|
|
9836
|
-
], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\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 >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\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\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\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\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (\n item of items;\n track trackItemFn(item.index, item.title)\n ) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </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\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\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\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></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\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\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\n name=\"crescent\"\n color=\"primary\"\n ></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 <div\n class=\"dcf-fieldset-read-item\"\n [class.dcf-accordion]=\"multiple\"\n >\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [accordion]=\"multiple\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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"] }]
|
|
9836
|
+
], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n <div\n [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n [class]=\"'dcf-fieldset-component ' + operation\"\n [class.dcf-blank]=\"!borders\"\n [class.dcf-empty]=\"!items?.length\"\n [class.dcf-open]=\"isOpen\"\n [id]=\"name?.toLowerCase() + '-fieldset'\"\n #component\n >\n <div class=\"dcf-width-1-1\">\n <div>\n <div\n class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\"\n >\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\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleClear($event)\"\n [class.dcf-invisible]=\"!isOpen\"\n [attr.aria-label]=\"\n (items?.length\n ? locale + '.clear_items'\n : locale + '.hidden_form'\n ) | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n />\n </ion-button>\n </div>\n }\n </div>\n </div>\n <div\n class=\"dcf-fieldset-content\"\n [class.dcf-empty]=\"!items?.length && !isOpen\"\n slot=\"content\"\n >\n @if (activePage) {\n <div\n class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n [class.dcf-disabled]=\"!activePage\"\n >\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"''\"\n [flexMode]=\"props.flexMode ?? false\"\n [match]=\"false\"\n [gap]=\"'small'\"\n [pk]=\"pk\"\n [modelId]=\"modelId\"\n [operation]=\"operation\"\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\n [formGroup]=\"formGroup.parent\"\n [disabled]=\"updatingItem\"\n (ionItemReorder)=\"handleReorderItems($any($event))\"\n #accordionComponent\n >\n @for (\n item of items;\n track trackItemFn(item.index, item.title)\n ) {\n <ion-item\n [class.not-unique]=\"\n isUniqueError && item.title === isUniqueError\n \"\n [class.updating]=\"\n updatingItem?.['index'] === item.index - 1\n \"\n lines=\"full\"\n [button]=\"false\"\n [title]=\"item?.[pk] ?? pk + ': ' + item[pk]\"\n >\n @if (ordenable) {\n @if (items?.length > 1 && !updatingItem) {\n <ion-reorder slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n name=\"swap-vertical-outline\"\n ></ion-icon>\n </ion-reorder>\n } @else {\n <div slot=\"start\">\n <ion-icon\n aria-hidden=\"true\"\n class=\"dcf-reorder-disabled\"\n size=\"small\"\n name=\"swap-vertical-outline\"\n disabled\n ></ion-icon>\n </div>\n }\n }\n\n <ion-label\n [color]=\"\n item.title === isUniqueError &&\n !updatingItem?.[pk] === item.title\n ? 'danger'\n : ''\n \"\n >\n {{ item.index }}.{{ item.title }}\n <!-- @if (ordenable) {\n {{ item.index }}.{{ item.title }}\n } @else {\n @if (item[pk]) {\n {{ pk }}: {{ item[pk] }} -\n }\n {{ item.title }}\n } -->\n @if (item.description?.length > 0) {\n <br />\n <ion-text class=\"dcf-subtitle\">\n {{ item.description }}\n </ion-text>\n }\n </ion-label>\n @if (item.info?.length || item.subinfo?.length) {\n <ion-note slot=\"end\">\n @if (item.info?.length) {\n {{ item.info }}\n <br />\n }\n @if (item.subinfo) {\n {{ item.subinfo }}\n }\n </ion-note>\n }\n <div slot=\"end\">\n @if (editable) {\n @if (\n !updatingItem || updatingItem?.[pk] !== item.title\n ) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n (click)=\"handleUpdateItem($index)\"\n [attr.aria-label]=\"\n locale + '.edit_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-cash-edit\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n ></ngx-decaf-icon>\n </ion-button>\n }\n }\n @if (!updatingItem) {\n <ion-button\n fill=\"clear\"\n size=\"small\"\n color=\"danger\"\n (click)=\"handleRemoveItem($index)\"\n [attr.aria-label]=\"\n locale + '.remove_item' | translate\n \"\n >\n <ngx-decaf-icon\n slot=\"icon-only\"\n size=\"small\"\n name=\"ti-row-remove\"\n [color]=\"!isDarkMode ? 'dark' : 'light'\"\n />\n </ion-button>\n }\n </div>\n </ion-item>\n }\n </ion-reorder-group>\n </ion-list>\n }\n\n @if (isUniqueError) {\n <div\n class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n >\n <div class=\"dcf-grid dcf-grid-collapse dcf-width-1-1\">\n <div\n class=\"dcf-auto\"\n [attr.style]=\"'max-width: 50px'\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"alert-circle-outline\"\n ></ion-icon>\n </div>\n <div class=\"dcf-width-expand\">\n <ion-text\n color=\"danger\"\n class=\"dcf-text-small\"\n >\n {{\n locale + '.not_unique'\n | translate: { value: isUniqueError }\n }}\n </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\n class=\"dcf-text-small\"\n [color]=\"\n items.length !== max\n ? !isDarkMode\n ? 'medium'\n : ''\n : 'primary'\n \"\n >\n {{\n locale +\n (items.length !== max ? '.max_items' : '.max_items_reached')\n | translate: { '0': max }\n }}\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\n size=\"small\"\n fill=\"clear\"\n color=\"danger\"\n (click)=\"handleCancelUpdateItem()\"\n [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n >\n {{ locale + '.cancel' | translate }}\n </ion-button>\n </div>\n <div>\n <ion-button\n size=\"small\"\n fill=\"clear\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.update_item' | translate\"\n >\n <ion-icon\n aria-hidden=\"true\"\n name=\"refresh-outline\"\n slot=\"start\"\n ></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\n size=\"small\"\n fill=\"clear\"\n class=\"dcf-button-add\"\n [color]=\"isDarkMode ? 'light' : 'dark'\"\n (click)=\"handleCreateItem()\"\n [attr.aria-label]=\"locale + '.create_item' | translate\"\n >\n <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n <ngx-decaf-icon\n slot=\"icon-only\"\n name=\"ti-code-plus\"\n slot=\"start\"\n />\n {{\n locale +\n (required\n ? items.length\n ? '.add'\n : '.add_first'\n : items.length\n ? '.add'\n : isOpen\n ? '.add_first'\n : '.show_form') | translate\n }}\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\n name=\"crescent\"\n color=\"primary\"\n ></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 <div\n class=\"dcf-fieldset-read-item\"\n [class.dcf-accordion]=\"multiple\"\n >\n <div>\n <ngx-decaf-layout\n [isModalChild]=\"isModalChild\"\n [className]=\"operation\"\n [accordion]=\"multiple\"\n [operation]=\"operation\"\n [pk]=\"pk\"\n [model]=\"model\"\n [modelId]=\"modelId\"\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-read-item.dcf-accordion{margin-top:.5rem}.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-fieldset-content:not(.dcf-empty) ::ng-deep .dcf-layout-container{min-height:80px}.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"] }]
|
|
9837
9837
|
}], ctorParameters: () => [], propDecorators: { formControl: [{
|
|
9838
9838
|
type: Input
|
|
9839
9839
|
}], customTypes: [{
|
|
@@ -14931,7 +14931,7 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
14931
14931
|
event.preventDefault();
|
|
14932
14932
|
event.stopImmediatePropagation();
|
|
14933
14933
|
const title = await this.translate(`${this.locale}.filter_by`);
|
|
14934
|
-
const modal = await getNgxSelectOptionsModal(title, this.filterOptions, this.injector);
|
|
14934
|
+
const modal = await getNgxSelectOptionsModal(title, this.filterOptions, this.filterBy || 'tableComponentFilter', this.injector);
|
|
14935
14935
|
this.changeDetectorRef.detectChanges();
|
|
14936
14936
|
const { data, role } = await modal.onWillDismiss();
|
|
14937
14937
|
if (role === ActionRoles.confirm && data !== this.filterValue) {
|