@decaf-ts/for-angular 0.1.31 → 0.1.33

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.
Files changed (5) hide show
  1. package/assets/i18n/ew/en.json +178 -10
  2. package/fesm2022/decaf-ts-for-angular.mjs +62 -20
  3. package/fesm2022/decaf-ts-for-angular.mjs.map +1 -1
  4. package/index.d.ts +18 -6
  5. package/package.json +1 -1
package/fesm2022/decaf-ts-for-angular.mjs CHANGED
@@ -3,8 +3,8 @@ import * as i0 from '@angular/core';
3
3
  import { InjectionToken, isDevMode, provideEnvironmentInitializer, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, effect, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, Pipe, NgModule } from '@angular/core';
4
4
  import * as i1$1 from '@angular/common';
5
5
  import { Location, NgComponentOutlet, CommonModule } from '@angular/common';
6
- import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
7
6
  import { OperationKeys, InternalError, NotFoundError } from '@decaf-ts/db-decorators';
7
+ import { ValidationKeys, DEFAULT_PATTERNS, VALIDATION_PARENT_KEY, Primitives, Model, Validation, ComparisonValidationKeys, PathProxyEngine, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
8
8
  import * as i1 from '@angular/forms';
9
9
  import { FormGroup, FormControl, FormArray, AbstractControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
10
10
  import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
@@ -26,6 +26,7 @@ import { addIcons } from 'ionicons';
26
26
  import * as allIcons from 'ionicons/icons';
27
27
  import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, addOutline, alertCircleOutline, arrowUpOutline, arrowDownOutline, searchOutline, closeOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
28
28
  import { modalController } from '@ionic/core';
29
+ import { formatDate as formatDate$1, dateFromString as dateFromString$1 } from 'src/lib/utils';
29
30
 
30
31
  const DB_ADAPTER_FLAVOUR_TOKEN = 'DbAdapterFlavour';
31
32
  /**
@@ -844,9 +845,20 @@ function getMenuIcon(label, menu) {
844
845
  return item?.icon || '';
845
846
  }
846
847
  function dateFromString(value) {
848
+ if (value instanceof Date) {
849
+ return value;
850
+ }
847
851
  const dateArray = value.includes('T') ? value.split('T') : value.split(' ');
848
852
  return new Date(dateArray.length === 1 ? `${value}T00:00:00` : value);
849
853
  }
854
+ function isValidBase64(value) {
855
+ if (!value?.trim()?.length) {
856
+ return false;
857
+ }
858
+ const pure = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
859
+ const dataUrl = /^data:([a-zA-Z0-9.+-]+\/[a-zA-Z0-9.+-]+);base64,[A-Za-z0-9+/]+={0,2}$/;
860
+ return pure.test(value) || dataUrl.test(value);
861
+ }
850
862
 
851
863
  function getDbAdapterFlavour() {
852
864
  return (getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || '');
@@ -7306,7 +7318,7 @@ async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
7306
7318
  * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
7307
7319
  * @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
7308
7320
  */
7309
- async function getNgxModalCrudComponent(model, props = {}, modalProps = {}, injector) {
7321
+ async function getNgxModalCrudComponent(model, props = {}, formProps = {}, modalProps = {}, injector) {
7310
7322
  if (!props || !props?.['operation']) {
7311
7323
  props.operation = OperationKeys.CREATE;
7312
7324
  }
@@ -7321,7 +7333,8 @@ async function getNgxModalCrudComponent(model, props = {}, modalProps = {}, inje
7321
7333
  }
7322
7334
  const component = await NgxRenderingEngine.createComponent(ModalComponent, {
7323
7335
  model,
7324
- globals: props,
7336
+ globals: formProps,
7337
+ props: props,
7325
7338
  }, injector || undefined).create(modalProps);
7326
7339
  return component.modal;
7327
7340
  }
@@ -10600,7 +10613,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
10600
10613
  await this.ngOnDestroy();
10601
10614
  });
10602
10615
  await this.getSortOptions();
10603
- this.initialize();
10616
+ await super.initialize();
10604
10617
  }
10605
10618
  /**
10606
10619
  * @description Retrieves and configures available indexes for filtering and sorting.
@@ -12043,11 +12056,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12043
12056
  * @param {string | number} uid - The ID of the item to create.
12044
12057
  * @returns {Promise<void>} A promise that resolves when the item is created and added to the list.
12045
12058
  */
12046
- async handleCreate(data, uid) {
12047
- if (!data || !Object.keys(data).length) {
12048
- data = (await this._repository?.read(uid));
12059
+ async handleCreate(model, uid) {
12060
+ if (!model || !Object.keys(model).length) {
12061
+ model = (await this._repository?.read(uid));
12049
12062
  }
12050
- const item = (await this.mapResults([data]))[0];
12063
+ const item = (await this.mapResults([model]))[0];
12051
12064
  this.items = this.data = [item, ...(this.items || [])];
12052
12065
  }
12053
12066
  /**
@@ -12059,9 +12072,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12059
12072
  * @private
12060
12073
  * @memberOf ListComponent
12061
12074
  */
12062
- async handleUpdate(item, uid) {
12063
- if (!item || !Object.keys(item).length) {
12064
- item = (await this._repository?.read(uid));
12075
+ async handleUpdate(model, uid) {
12076
+ if (!model || !Object.keys(model).length) {
12077
+ model = (await this._repository?.read(uid));
12065
12078
  }
12066
12079
  // const item: KeyValue = this.itemMapper((await this._repository?.read(uid)) || {}, this.mapper);
12067
12080
  this.data = [];
@@ -12069,8 +12082,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12069
12082
  for (const key in this.items) {
12070
12083
  const child = this.items[key];
12071
12084
  if (`${child['uid']}`.trim() === `${uid}`.trim()) {
12072
- this.items[key] = Object.assign({}, child, this.itemMapper(item || {}, this.mapper), {
12073
- model: item || {},
12085
+ this.items[key] = Object.assign({}, child, this.itemMapper(model || {}, this.mapper), {
12086
+ model: model || {},
12074
12087
  });
12075
12088
  break;
12076
12089
  }
@@ -12591,8 +12604,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
12591
12604
  if (arrayValue.length === 1) {
12592
12605
  value = item?.[value] ? item[value] : '';
12593
12606
  // value = item?.[value] ? item[value] : value !== key ? value : "";
12594
- if (isValidDate(value))
12607
+ if (isValidDate(value)) {
12595
12608
  value = `${formatDate(dateFromString(value))}`;
12609
+ }
12596
12610
  accum[key] = value;
12597
12611
  }
12598
12612
  else {
@@ -13904,9 +13918,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
13904
13918
  }
13905
13919
  };
13906
13920
  if (this.previewHandler && typeof this.previewHandler === 'function') {
13907
- const clazz = new this.previewHandler();
13908
- const previewFn = clazz.handle.bind(this);
13909
- return previewFn({ data: file });
13921
+ return await this.previewHandler(this, { data: file });
13910
13922
  }
13911
13923
  else {
13912
13924
  content = parseXml(file);
@@ -14067,7 +14079,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
14067
14079
  })));
14068
14080
  }
14069
14081
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14070
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", valueType: "valueType", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize", subType: "subType" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"decaf-file-component\"\n #component\n>\n <input\n id=\"dcf-file-input\"\n type=\"file\"\n placeholder=\"Select files\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? true : null\"\n (change)=\"handleSelection($event)\"\n [multiple]=\"multiple\"\n hidden\n [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n />\n\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"'blank'\"\n >\n @if (['create', 'update'].includes(operation)) {\n <div>\n <div\n [class]=\"\n 'dcf-drop-area ' +\n ' dcf-' +\n size +\n ' dcf-flex dcf-flex-' +\n position +\n ' dcf-text-' +\n position\n \"\n [class.dcf-dragging]=\"dragging\"\n [class.dcf-has-files]=\"files.length\"\n (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n (dragover)=\"\n !files?.length ? handleDragOver($event) : (dragging = false)\n \"\n (dragleave)=\"\n !files?.length ? handleDragLeave($event) : (dragging = false)\n \"\n >\n <div>\n @if (!previewFile) {\n @if (showIcon) {\n <ngx-decaf-icon\n name=\"cloud-upload-outline\"\n size=\"large\"\n />\n }\n <p class=\"dcf-drag-description\">\n {{\n label\n ? (label | translate)\n : (locale + '.drag_file' | translate)\n }}\n </p>\n <ion-button\n class=\"dcf-button-select\"\n (click)=\"handleClickToSelect()\"\n size=\"small\"\n >\n {{\n buttonLabel\n ? (buttonLabel | translate)\n : (locale +\n (enableDirectoryMode\n ? '.buttons.select_directory'\n : '.buttons.select') | translate)\n }}\n </ion-button>\n <div #container>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n } @else {\n @if (!directoryMode && !multiple) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">\n {{ locale + '.preview' | translate }}\n </p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n <ion-button\n (click)=\"handleClear()\"\n fill=\"clear\"\n color=\"danger\"\n size=\"small\"\n >\n {{ locale + '.buttons.clear' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"dcf-margin-bottom\">\n {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n @if (errors.length > 0) {\n <br />\n <span class=\"dcf-error-message\">\n {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n </span>\n }\n </div>\n <div class=\"dcf-preview-list-container\">\n <ion-list class=\"dcf-preview-list\">\n @for (file of errors; track $index) {\n <ion-item\n lines=\"full\"\n class=\"dcf-error-item\"\n >\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <div\n class=\"dcf-error-message\"\n slot=\"end\"\n >\n {{\n locale + '.errors.' + file.error\n | translate\n : {\n '0':\n file.error === 'max_size'\n ? maxFileSize / 1024 / 1024\n : file.name.split('.'),\n }\n }}\n </div>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n </ion-item>\n }\n\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file?.source || file, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"'trash-outline'\"\n (click)=\"removeFile($index)\"\n [color]=\"'danger'\"\n [size]=\"'small'\"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n </div>\n }\n }\n </div>\n </div>\n </div>\n } @else {\n <div [class]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n <ion-label [class]=\"operation ?? 'read'\">\n {{ label | translate }}\n </ion-label>\n @if (!files?.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @if (files?.length === 1 && isImageFile(files[0])) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n </div>\n </div>\n </div>\n } @else {\n <ion-list class=\"dcf-preview-list\">\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n @if (file?.name) {\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n }\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file.source, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n }\n }\n </div>\n }\n </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
14082
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", valueType: "valueType", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize", subType: "subType" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"decaf-file-component\"\n #component\n>\n <input\n id=\"dcf-file-input\"\n type=\"file\"\n placeholder=\"Select files\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? true : null\"\n (change)=\"handleSelection($event)\"\n [multiple]=\"multiple\"\n hidden\n [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n />\n\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"'blank'\"\n >\n @if (['create', 'update'].includes(operation)) {\n <div>\n <div\n [class]=\"\n 'dcf-drop-area ' +\n ' dcf-' +\n size +\n ' dcf-flex dcf-flex-' +\n position +\n ' dcf-text-' +\n position\n \"\n [class.dcf-dragging]=\"dragging\"\n [class.dcf-has-files]=\"files.length\"\n (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n (dragover)=\"\n !files?.length ? handleDragOver($event) : (dragging = false)\n \"\n (dragleave)=\"\n !files?.length ? handleDragLeave($event) : (dragging = false)\n \"\n >\n <div>\n @if (!previewFile) {\n @if (showIcon) {\n <ngx-decaf-icon\n name=\"cloud-upload-outline\"\n size=\"large\"\n />\n }\n <p class=\"dcf-drag-description\">\n {{\n label\n ? (label | translate)\n : (locale + '.drag_file' | translate)\n }}\n </p>\n <ion-button\n class=\"dcf-button-select\"\n (click)=\"handleClickToSelect()\"\n size=\"small\"\n >\n {{\n buttonLabel\n ? (buttonLabel | translate)\n : (locale +\n (enableDirectoryMode\n ? '.buttons.select_directory'\n : '.buttons.select') | translate)\n }}\n </ion-button>\n <div #container>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n } @else {\n @if (!directoryMode && !multiple) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">\n {{ locale + '.preview' | translate }}\n </p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n <ion-button\n (click)=\"handleClear()\"\n fill=\"clear\"\n color=\"danger\"\n size=\"small\"\n >\n {{ locale + '.buttons.clear' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"dcf-margin-bottom\">\n {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n @if (errors.length > 0) {\n <br />\n <span class=\"dcf-error-message\">\n {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n </span>\n }\n </div>\n <div class=\"dcf-preview-list-container\">\n <ion-list class=\"dcf-preview-list\">\n @for (file of errors; track $index) {\n <ion-item\n lines=\"full\"\n class=\"dcf-error-item\"\n >\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <div\n class=\"dcf-error-message\"\n slot=\"end\"\n >\n {{\n locale + '.errors.' + file.error\n | translate\n : {\n '0':\n file.error === 'max_size'\n ? maxFileSize / 1024 / 1024\n : file.name.split('.'),\n }\n }}\n </div>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n </ion-item>\n }\n\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file?.source || file, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"'trash-outline'\"\n (click)=\"removeFile($index)\"\n [color]=\"'danger'\"\n [size]=\"'small'\"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n </div>\n }\n }\n </div>\n </div>\n </div>\n } @else {\n <div [class]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n <ion-label [class]=\"operation ?? 'read'\">\n {{ label | translate }}\n </ion-label>\n @if (!files?.length) {\n <div class=\"dcf-padding-xsmall\">\n @if (!refreshing && initialized) {\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n } @else {\n <ion-skeleton-text animated></ion-skeleton-text>\n }\n </div>\n } @else {\n @if (files?.length === 1 && isImageFile(files[0])) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read dcf-single-file\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n </div>\n </div>\n </div>\n } @else {\n <ion-list class=\"dcf-preview-list\">\n @for (file of files; track $index) {\n <ion-item\n [lines]=\"files?.length > 1 ? 'full' : 'none'\"\n (click)=\"preview(file.source, file.type)\"\n >\n @if (file?.name) {\n <ion-label slot=\"start\">\n {{ files?.length > 1 ? file.name : name }}\n </ion-label>\n }\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n }\n }\n </div>\n }\n </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-skeleton-text{width:100%!important;height:1rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
14071
14083
  };
14072
14084
  FileUploadComponent = __decorate([
14073
14085
  Dynamic(),
@@ -14086,7 +14098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
14086
14098
  IonItem,
14087
14099
  TranslatePipe,
14088
14100
  IonButton,
14089
- ], template: "<div\n class=\"decaf-file-component\"\n #component\n>\n <input\n id=\"dcf-file-input\"\n type=\"file\"\n placeholder=\"Select files\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? true : null\"\n (change)=\"handleSelection($event)\"\n [multiple]=\"multiple\"\n hidden\n [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n />\n\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"'blank'\"\n >\n @if (['create', 'update'].includes(operation)) {\n <div>\n <div\n [class]=\"\n 'dcf-drop-area ' +\n ' dcf-' +\n size +\n ' dcf-flex dcf-flex-' +\n position +\n ' dcf-text-' +\n position\n \"\n [class.dcf-dragging]=\"dragging\"\n [class.dcf-has-files]=\"files.length\"\n (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n (dragover)=\"\n !files?.length ? handleDragOver($event) : (dragging = false)\n \"\n (dragleave)=\"\n !files?.length ? handleDragLeave($event) : (dragging = false)\n \"\n >\n <div>\n @if (!previewFile) {\n @if (showIcon) {\n <ngx-decaf-icon\n name=\"cloud-upload-outline\"\n size=\"large\"\n />\n }\n <p class=\"dcf-drag-description\">\n {{\n label\n ? (label | translate)\n : (locale + '.drag_file' | translate)\n }}\n </p>\n <ion-button\n class=\"dcf-button-select\"\n (click)=\"handleClickToSelect()\"\n size=\"small\"\n >\n {{\n buttonLabel\n ? (buttonLabel | translate)\n : (locale +\n (enableDirectoryMode\n ? '.buttons.select_directory'\n : '.buttons.select') | translate)\n }}\n </ion-button>\n <div #container>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n } @else {\n @if (!directoryMode && !multiple) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">\n {{ locale + '.preview' | translate }}\n </p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n <ion-button\n (click)=\"handleClear()\"\n fill=\"clear\"\n color=\"danger\"\n size=\"small\"\n >\n {{ locale + '.buttons.clear' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"dcf-margin-bottom\">\n {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n @if (errors.length > 0) {\n <br />\n <span class=\"dcf-error-message\">\n {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n </span>\n }\n </div>\n <div class=\"dcf-preview-list-container\">\n <ion-list class=\"dcf-preview-list\">\n @for (file of errors; track $index) {\n <ion-item\n lines=\"full\"\n class=\"dcf-error-item\"\n >\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <div\n class=\"dcf-error-message\"\n slot=\"end\"\n >\n {{\n locale + '.errors.' + file.error\n | translate\n : {\n '0':\n file.error === 'max_size'\n ? maxFileSize / 1024 / 1024\n : file.name.split('.'),\n }\n }}\n </div>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n </ion-item>\n }\n\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file?.source || file, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"'trash-outline'\"\n (click)=\"removeFile($index)\"\n [color]=\"'danger'\"\n [size]=\"'small'\"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n </div>\n }\n }\n </div>\n </div>\n </div>\n } @else {\n <div [class]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n <ion-label [class]=\"operation ?? 'read'\">\n {{ label | translate }}\n </ion-label>\n @if (!files?.length) {\n <div class=\"dcf-padding-xsmall\">\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n </div>\n } @else {\n @if (files?.length === 1 && isImageFile(files[0])) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n </div>\n </div>\n </div>\n } @else {\n <ion-list class=\"dcf-preview-list\">\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n @if (file?.name) {\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n }\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file.source, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n }\n }\n </div>\n }\n </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
14101
+ ], template: "<div\n class=\"decaf-file-component\"\n #component\n>\n <input\n id=\"dcf-file-input\"\n type=\"file\"\n placeholder=\"Select files\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? true : null\"\n (change)=\"handleSelection($event)\"\n [multiple]=\"multiple\"\n hidden\n [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n />\n\n <ngx-decaf-card\n [className]=\"className\"\n [body]=\"'blank'\"\n >\n @if (['create', 'update'].includes(operation)) {\n <div>\n <div\n [class]=\"\n 'dcf-drop-area ' +\n ' dcf-' +\n size +\n ' dcf-flex dcf-flex-' +\n position +\n ' dcf-text-' +\n position\n \"\n [class.dcf-dragging]=\"dragging\"\n [class.dcf-has-files]=\"files.length\"\n (drop)=\"!files?.length ? handleDrop($event) : (dragging = false)\"\n (dragover)=\"\n !files?.length ? handleDragOver($event) : (dragging = false)\n \"\n (dragleave)=\"\n !files?.length ? handleDragLeave($event) : (dragging = false)\n \"\n >\n <div>\n @if (!previewFile) {\n @if (showIcon) {\n <ngx-decaf-icon\n name=\"cloud-upload-outline\"\n size=\"large\"\n />\n }\n <p class=\"dcf-drag-description\">\n {{\n label\n ? (label | translate)\n : (locale + '.drag_file' | translate)\n }}\n </p>\n <ion-button\n class=\"dcf-button-select\"\n (click)=\"handleClickToSelect()\"\n size=\"small\"\n >\n {{\n buttonLabel\n ? (buttonLabel | translate)\n : (locale +\n (enableDirectoryMode\n ? '.buttons.select_directory'\n : '.buttons.select') | translate)\n }}\n </ion-button>\n <div #container>\n <span\n class=\"dcf-error\"\n [innerHTML]=\"getErrors(container)\"\n ></span>\n </div>\n } @else {\n @if (!directoryMode && !multiple) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">\n {{ locale + '.preview' | translate }}\n </p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n <ion-button\n (click)=\"handleClear()\"\n fill=\"clear\"\n color=\"danger\"\n size=\"small\"\n >\n {{ locale + '.buttons.clear' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"dcf-margin-bottom\">\n {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n @if (errors.length > 0) {\n <br />\n <span class=\"dcf-error-message\">\n {{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}\n </span>\n }\n </div>\n <div class=\"dcf-preview-list-container\">\n <ion-list class=\"dcf-preview-list\">\n @for (file of errors; track $index) {\n <ion-item\n lines=\"full\"\n class=\"dcf-error-item\"\n >\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <div\n class=\"dcf-error-message\"\n slot=\"end\"\n >\n {{\n locale + '.errors.' + file.error\n | translate\n : {\n '0':\n file.error === 'max_size'\n ? maxFileSize / 1024 / 1024\n : file.name.split('.'),\n }\n }}\n </div>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n </ion-item>\n }\n\n @for (file of files; track $index) {\n <ion-item lines=\"full\">\n <ion-label slot=\"start\">{{ file.name }}</ion-label>\n <ion-note slot=\"end\">\n {{ file.size / 1024 / 1024 | number: '1.1-1' }} MB\n </ion-note>\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n (click)=\"preview(file?.source || file, file.type)\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"'trash-outline'\"\n (click)=\"removeFile($index)\"\n [color]=\"'danger'\"\n [size]=\"'small'\"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n </div>\n }\n }\n </div>\n </div>\n </div>\n } @else {\n <div [class]=\"files?.length > 1 ? 'dcf-preview-list-container' : ''\">\n <ion-label [class]=\"operation ?? 'read'\">\n {{ label | translate }}\n </ion-label>\n @if (!files?.length) {\n <div class=\"dcf-padding-xsmall\">\n @if (!refreshing && initialized) {\n <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n } @else {\n <ion-skeleton-text animated></ion-skeleton-text>\n }\n </div>\n } @else {\n @if (files?.length === 1 && isImageFile(files[0])) {\n <div\n class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read dcf-single-file\"\n >\n <div\n class=\"dcf-width-1-4@m dcf-width-1-3@s dcf-flex dcf-flex-center dcf-flex-middle\"\n >\n <div class=\"dcf-preview-image\">\n <ion-img\n [src]=\"previewFile\"\n [title]=\"locale + '.preview' | translate\"\n [alt]=\"locale + '.preview' | translate\"\n />\n <div class=\"dcf-overlay\">\n <ion-button\n (click)=\"preview(previewFile)\"\n fill=\"clear\"\n color=\"light\"\n size=\"small\"\n >\n {{ locale + '.buttons.preview' | translate }}\n </ion-button>\n </div>\n </div>\n </div>\n <div\n class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\"\n >\n <div>\n <p class=\"dcf-title\">{{ locale + '.preview' | translate }}</p>\n <p class=\"subtitle\">{{ files[0].name }}</p>\n </div>\n </div>\n </div>\n } @else {\n <ion-list class=\"dcf-preview-list\">\n @for (file of files; track $index) {\n <ion-item\n [lines]=\"files?.length > 1 ? 'full' : 'none'\"\n (click)=\"preview(file.source, file.type)\"\n >\n @if (file?.name) {\n <ion-label slot=\"start\">\n {{ files?.length > 1 ? file.name : name }}\n </ion-label>\n }\n <div\n class=\"dcf-flex dcf-flex-middle\"\n slot=\"end\"\n >\n <ngx-decaf-icon\n [button]=\"true\"\n [slot]=\"'icon-only'\"\n [name]=\"\n file.type.includes('image')\n ? 'image-outline'\n : 'document-text-outline'\n \"\n />\n </div>\n </ion-item>\n }\n </ion-list>\n }\n }\n </div>\n }\n </ngx-decaf-card>\n</div>\n", styles: [".decaf-file-component ion-label{font-weight:700;display:block;margin:.75rem;margin-bottom:0!important;font-size:.925rem;font-weight:1rem!important;color:var(--dcf-color-gray-8)!important}.decaf-file-component ion-label ion-text{font-weight:initial;position:relative;top:.8rem}.decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-skeleton-text{width:100%!important;height:1rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
14090
14102
  }], ctorParameters: () => [], propDecorators: { component: [{
14091
14103
  type: ViewChild,
14092
14104
  args: ['component', { static: true }]
@@ -14996,6 +15008,36 @@ let TableComponent = class TableComponent extends ListComponent {
14996
15008
  await this.clearSearch();
14997
15009
  }
14998
15010
  }
15011
+ /**
15012
+ * @description Updates the matching rendered table row after an edit operation.
15013
+ * @summary Executes the default update flow inherited from `ListComponent` and then
15014
+ * finds the already-mapped row in `this.items` by `uid`. When found, it synchronizes
15015
+ * each displayed cell value (except the `uid` field) with the latest values from
15016
+ * `model`, preserving the mapped row structure used by the table.
15017
+ * @param {Model} model - Model instance containing updated values.
15018
+ * @param {string | number} uid - Unique identifier of the row to update.
15019
+ * @return {Promise<void>}
15020
+ */
15021
+ async handleUpdate(model, uid) {
15022
+ await super.handleUpdate(model, uid);
15023
+ const item = this.items.find((item) => `${item['uid']?.value}`.trim() === `${uid}`.trim());
15024
+ if (item) {
15025
+ for (const [key, entry] of Object.entries(item)) {
15026
+ const { prop } = entry;
15027
+ if (key !== 'uid' && prop in model) {
15028
+ const value = model[prop];
15029
+ if (value !== undefined) {
15030
+ if (isValidDate$1(value)) {
15031
+ entry.value = `${formatDate$1(dateFromString$1(value))}`;
15032
+ }
15033
+ else {
15034
+ entry.value = value;
15035
+ }
15036
+ }
15037
+ }
15038
+ }
15039
+ }
15040
+ }
14999
15041
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
15000
15042
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@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\n class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n >\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=\"\">\n {{ locale + '.filter.all' | translate }}\n </ion-select-option>\n @for (option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">\n {{ option.text }}\n </ion-select-option>\n }\n <ion-button\n fill=\"clear\"\n (click)=\"handleFilterSelectClear($event)\"\n slot=\"end\"\n size=\"small\"\n [disabled]=\"!filterValue\"\n >\n <ngx-decaf-icon\n fill=\"clear\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n<div\n class=\"dcf-table-container\"\n [class.dcf-empty]=\"!data?.length\"\n #component\n>\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>\n @for (col of item | keyvalue; track $index) {\n @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n <td\n (click)=\"\n handleAction(\n $event,\n col?.value.handler ? col.value.handler.handle : undefined,\n item.uid.value,\n OperationKeys.READ\n )\n \"\n [innerHTML]=\"col.value.value\"\n [ngx-decaf-tooltip]=\"\n maxContentLength > 0 && !preserve.includes(col.value.prop)\n ? {\n text: col.value.value,\n truncate: true,\n limit: maxContentLength,\n }\n : {}\n \"\n ></td>\n } @else {\n @if (allowOperations && col.key !== 'handler') {\n <td class=\"dcf-col-actions\">\n <div class=\"\">\n @if (operations?.includes(OperationKeys.UPDATE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.UPDATE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-edit\"\n />\n }\n @if (operations?.includes(OperationKeys.DELETE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.DELETE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\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 [refreshing]=\"refreshing\"\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 <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]=\"\n 'component.list.search.subtitle'\n | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n\n<div class=\"dcf-table-pagination\">\n @if ((pages > 0 || bookMarkPagination) && !searchValue) {\n <ngx-decaf-pagination\n [table]=\"component\"\n [bookMarkPagination]=\"bookMarkPagination\"\n [nextBookmark]=\"paginator?._bookmark\"\n [totalPages]=\"pages\"\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n }\n</div>\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: ["table", "totalPages", "current", "truncatePages", "disablePages", "bookMarkPagination", "nextBookmark"], outputs: ["clickEvent"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
15001
15043
  };
@@ -15292,5 +15334,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
15292
15334
  * Generated bundle index. Do not edit.
15293
15335
  */
15294
15336
 
15295
- export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, dateFromString, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
15337
+ export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DecafTooltipDirective, DecafTranslatePipe, DecafTruncatePipe, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, dateFromString, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidBase64, isValidDate, itemMapper, patternValidators, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
15296
15338
  //# sourceMappingURL=decaf-ts-for-angular.mjs.map