@decaf-ts/for-angular 0.0.96 → 0.0.97

package/fesm2022/decaf-ts-for-angular.mjs

@@ -2232,9 +2232,7 @@ class DecafFakerRepository extends LoggedClass {
     }
     get repository() {
         if (!this._repository) {
-            const modelName = typeof this.model === Primitives.STRING
-                ? this.model
-                : this.model.constructor.name;
+            const modelName = typeof this.model === Primitives.STRING ? this.model : this.model.constructor.name;
             const constructor = Model.get(String(modelName));
             if (!constructor)
                 throw new InternalError(`Cannot find model ${modelName}. was it registered with @model?`);
@@ -2350,11 +2348,7 @@ function getFakerData(limit = 100, data, model) {
         for (const [key, value] of Object.entries(data)) {
             const val = value();
             item[key] =
-                val?.constructor === Date
-                    ? formatDate(val)
-                    : typeof val === Primitives.STRING
-                        ? String(val)?.trim()
-                        : val;
+                val?.constructor === Date ? formatDate(val) : typeof val === Primitives.STRING ? String(val)?.trim() : val;
         }
         index = index + 1;
         return (!model ? item : Model.build(item, model));
@@ -5254,7 +5248,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                 case OperationKeys.UPDATE:
                 case OperationKeys.DELETE:
                     {
-                        await this.handleRead(uid);
+                        this.model = await this.handleRead(uid);
                     }
                     break;
             }
@@ -5472,9 +5466,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             return await repository.read(this.parsePkValue(uid, this.getModelPkType(repository.class)));
         }
         catch (error) {
-            this.log
-                .for(this.handleRead)
-                .info(`Error getting model instance with id ${uid}: ${error.message}`);
+            this.log.for(this.handleRead).info(`Error getting model instance with id ${uid}: ${error.message}`);
             return undefined;
         }
     }
@@ -5578,9 +5570,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                 }
                 switch (operation) {
                     case OperationKeys.CREATE:
-                        result = await (!Array.isArray(model)
-                            ? repository.create(model)
-                            : repository.createAll(model));
+                        result = await (!Array.isArray(model) ? repository.create(model) : repository.createAll(model));
                         break;
                     case OperationKeys.UPDATE: {
                         const models = (!Array.isArray(model) ? [model] : model);
@@ -13238,7 +13228,15 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
          * @default HTML5InputTypes.FILE
          */
         this.type = HTML5InputTypes.FILE;
-        this.subType = 'text';
+        /**
+         * @description Specifies the value type for the file upload.
+         * @summary Determines the format in which the uploaded file's value is returned.
+         * Options include 'base64' for base64-encoded strings or 'files' for File objects.
+         *
+         * @type {'base64' | 'files'}
+         * @default 'base64'
+         */
+        this.valueType = 'base64';
         /**
          * @description Size of the file upload component.
          * @summary Determines the visual size of the file upload component, such as large, small, or default.
@@ -13338,6 +13336,15 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
          * @default 0
          */
         this.dragCounter = 0;
+        /**
+         * @description Specifies the subtype of the file upload.
+         * @summary Lock subtype to 'text' to ensure that the value is processed as a JSON string containing data URLs or Files.
+         * This property will be used to avoid validation errors and to determine how the value is processed and emitted.
+         *
+         * @type {string}
+         * @default 'text'
+         */
+        this.subType = 'text';
         this.handleClear();
     }
     /**
@@ -13360,24 +13367,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
     }
     async initialize() {
         await super.initialize();
-        if (this.value && typeof this.value === Primitives.STRING) {
-            try {
-                const files = JSON.parse(this.value);
-                this.files = files.map((file) => {
-                    const mime = this.getFileMime(file)?.split('/') || [];
-                    const type = mime?.[0] === 'text' ? mime?.[1] : `${mime?.[0]}/${mime?.[1]}`;
-                    return {
-                        name: mime?.[0] || 'file',
-                        type: `${type}` || 'image/*',
-                        source: file,
-                    };
-                });
-                this.getPreview();
-            }
-            catch (error) {
-                this.log.for(this.initialize).error(`Error parsing file list: ${error.message || error}`);
-            }
-        }
+        await this.parseValue(true);
     }
     /**
      * @description Lifecycle hook that is called when a directive, pipe, or service is destroyed.
@@ -13509,13 +13499,52 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
             this.files = [validFiles[0]];
         }
         if (this.files.length) {
-            const dataValues = await this.getDataURLs(this.files);
-            this.setValue(this.subType === 'text' ? JSON.stringify(dataValues) : this.files);
+            this.setValue(await this.parseValue());
         }
         await this.getPreview();
         this.changeEventEmit();
         this.changeDetectorRef.detectChanges();
     }
+    async parseValue(revert = false) {
+        if (!revert) {
+            const files = this.files;
+            if (this.valueType === 'base64') {
+                return JSON.stringify(await this.getDataURLs(files));
+            }
+            else {
+                const data = [];
+                for (const file of files) {
+                    const source = await this.getDataURLs(file);
+                    data.push({
+                        name: file.name,
+                        size: file.size,
+                        type: file.type,
+                        source,
+                    });
+                }
+                return JSON.stringify(data);
+            }
+        }
+        if (this.value && typeof this.value === Primitives.STRING) {
+            try {
+                const value = JSON.parse(this.value);
+                const files = Array.isArray(value) ? value : [value];
+                this.files = files.map((file) => {
+                    const mime = this.getFileMime(file)?.split('/') || [];
+                    const type = mime?.[0] === 'text' ? mime?.[1] : `${mime?.[0]}/${mime?.[1]}`;
+                    return {
+                        name: mime?.[0] || 'file',
+                        type: `${type}` || 'image/*',
+                        source: file,
+                    };
+                });
+                this.getPreview();
+            }
+            catch (error) {
+                this.log.for(this.initialize).error(`Error parsing file list: ${error.message || error}`);
+            }
+        }
+    }
     /**
      * @description Validates a single file against the component's constraints.
      * @summary Checks the file type and size against the accepted values and limits.
@@ -13557,8 +13586,9 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         let content;
         if (file instanceof File) {
             const dataUrl = (await this.getDataURLs(file));
-            if (dataUrl && dataUrl.length)
-                file = dataUrl[0];
+            if (dataUrl) {
+                file = Array.isArray(dataUrl) ? dataUrl[0] : dataUrl;
+            }
         }
         if (fileExtension.includes('image'))
             content = '<img src="' + file + '" style="max-width: 100%; height: auto;" />';
@@ -13602,6 +13632,11 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
     isImageFile(file) {
         return file && file.type.startsWith('image/');
     }
+    isBase64String(value) {
+        const pure = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
+        const dataUrl = /^data:([a-zA-Z0-9.+-]+\/[a-zA-Z0-9.+-]+);base64,[A-Za-z0-9+/]+={0,2}$/;
+        return pure.test(value) || dataUrl.test(value);
+    }
     getFileMime(base64) {
         const match = base64.match(/^data:(.*?);base64,/);
         return match ? match[1] : '';
@@ -13632,8 +13667,9 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         const file = this.files && this.files.length ? this.files[0] : null;
         if (file instanceof File) {
             const dataUrl = (await this.getDataURLs(file));
-            if (dataUrl && dataUrl.length)
-                this.previewFile = dataUrl[0];
+            if (dataUrl) {
+                this.previewFile = Array.isArray(dataUrl) ? dataUrl[0] : dataUrl;
+            }
         }
         else {
             this.previewFile = file?.['source'];
@@ -13664,19 +13700,19 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
      * @returns {Promise<string[] | undefined>} - A promise that resolves to an array of data URLs, or undefined if an error occurs.
      */
     async getDataURLs(files) {
-        if (!files)
+        if (!files) {
             files = this.files;
-        if (!Array.isArray(files))
-            files = [files];
-        // files = files.filter(f => f.type && f.type.startsWith('image/'));
+        }
+        files = !Array.isArray(files) ? [files] : files;
         return this.readFile(files)
             .then((urls) => {
             // validate generated DataURLs
             const invalid = urls.some((u) => !this.isValidDataURL(u));
             if (invalid)
                 return undefined;
-            if (this.multiple || this.enableDirectoryMode)
-                return urls;
+            if (this.multiple || this.enableDirectoryMode) {
+                return urls.length === 1 ? urls[0] : urls;
+            }
             return urls.length ? [urls[0]] : undefined;
         })
             .catch(() => {
@@ -13737,7 +13773,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", subType: "subType", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\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 [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\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 (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </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 /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</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 lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</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\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\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        @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 class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\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 (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\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 class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 class=\"decaf-file-component\"  #component>\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 [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\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 (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </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 /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</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 lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</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\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\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        @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 class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\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 (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\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 class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".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" }] }); }
 };
 FileUploadComponent = __decorate([
     Dynamic(),
@@ -13772,7 +13808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], type: [{
                 type: Input
-            }], subType: [{
+            }], valueType: [{
                 type: Input
             }], buttonLabel: [{
                 type: Input
@@ -13792,6 +13828,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], changeEvent: [{
                 type: Output
+            }], subType: [{
+                type: Input
             }] } });
 
 /**