@wizco/fenixds-ngx 17.1.2 → 17.2.0

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren, signal } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpEventType, HttpClientModule } from '@angular/common/http';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -522,11 +522,11 @@ class UploadComponent {
         event.dataTransfer.dropEffect = 'copy';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1$1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"wco-form-upload__info\">\n    <span>Arraste-os aqui ou</span>\n    <span>\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </span>\n  </div>\n  <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n  <ng-container *ngIf=\"allowedFiles.length\">\n    <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n      {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n    </span>\n  </ng-container>\n  <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n  name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: HttpClientModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"wco-form-upload__info\">\n    <span>Arraste-os aqui ou</span>\n    <span>\n      <span class=\"material-icons-outlined\">\nupload_file\n</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </span>\n  </div>\n  <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n  <ng-container *ngIf=\"allowedFiles.length\">\n    <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n      {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n    </span>\n  </ng-container>\n  <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n  name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: HttpClientModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wco-file-upload', standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"wco-form-upload__info\">\n    <span>Arraste-os aqui ou</span>\n    <span>\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </span>\n  </div>\n  <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n  <ng-container *ngIf=\"allowedFiles.length\">\n    <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n      {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n    </span>\n  </ng-container>\n  <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n  name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>" }]
+            args: [{ selector: 'wco-file-upload', standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-form-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"wco-form-upload__info\">\n    <span>Arraste-os aqui ou</span>\n    <span>\n      <span class=\"material-icons-outlined\">\nupload_file\n</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </span>\n  </div>\n  <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n  <ng-container *ngIf=\"allowedFiles.length\">\n    <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n      {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n    </span>\n  </ng-container>\n  <input type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n  name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>" }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient, decorators: [{
                     type: SkipSelf
                 }] }]; }, propDecorators: { description: [{
@@ -1355,6 +1355,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class PreviewFileComponent {
+    sanitizer;
+    ngZone;
+    previewFileElement;
+    /* Nome do arquivo (optioncal) */
+    filename = '';
+    /* Formato do arquivo (optional) */
+    format = '';
+    /* Mostrar previsualização do arquivo (optional) */
+    preview = true;
+    /* Ações disponíveis para o arquivo (optional) */
+    actions;
+    /* Status do arquivo (optional) */
+    status;
+    /* URL do arquivo (optional) */
+    url = '';
+    /* Conteúdo customizado (optional) */
+    customContent = false;
+    /* Tipo de visualização do arquivo (optional) */
+    type = 'box';
+    /* Título do arquivo (optional) */
+    title = '';
+    /* Arquivo para visualização nativo do input file */
+    set setfile(file) {
+        if (!file)
+            return;
+        this.transformFiles(file);
+    }
+    /* Evento de clique nas ações do arquivo */
+    clickEvent = new EventEmitter();
+    get name() {
+        if (!!this.filename) {
+            return this.filename;
+        }
+        if (!!this.url) {
+            const url = new URL(this.url);
+            const name = url.pathname.split('/').pop();
+            const total = name ? name?.length >= 30 ? 15 : 0 : 0;
+            return name?.substring(total, name.length);
+        }
+        return 'Nome não informado';
+    }
+    get _format() {
+        if (!!this.format) {
+            return this.format;
+        }
+        if (this.url) {
+            const url = new URL(this.url);
+            const format = url.pathname.split('.').pop();
+            return format;
+        }
+        return 'file';
+    }
+    idRandom = 'preview-' + Math.random().toString(36).substring(7);
+    id = 'modal-' + this.idRandom;
+    y = signal('100px');
+    x = signal('100px');
+    constructor(sanitizer, ngZone) {
+        this.sanitizer = sanitizer;
+        this.ngZone = ngZone;
+    }
+    ngAfterViewChecked() {
+        this.positionThumbnail();
+    }
+    transformFiles(file) {
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.filename = file.name;
+                this.format = file.type || 'file';
+                this.url = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    transformPDFSecurity(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    positionThumbnail() {
+        const previewFileElement = this.previewFileElement.nativeElement;
+        const cardPosition = previewFileElement.getElementsByClassName('wco-previewFile--thumbl')[0];
+        if (cardPosition) {
+            const { x, y } = cardPosition.getBoundingClientRect();
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.y.set(y + 'px');
+                    this.x.set(x + 'px');
+                }, 1000);
+            });
+        }
+    }
+    actionEvent(action) {
+        this.clickEvent.emit({
+            action,
+            data: {
+                filename: this.filename,
+                format: this.format,
+                url: this.url,
+                file: this.url,
+            },
+        });
+    }
+    ////////////////////
+    // Eventos de modal
+    ////////////////////
+    modalPreview() {
+        if (!!!this.url || this.typeFileFormat() === 'file') {
+            return;
+        }
+        this.positionThumbnail();
+        const modal = document.getElementById(this.id);
+        modal?.showModal();
+    }
+    closeDialog() {
+        const modal = document.getElementById(this.id);
+        modal?.close();
+    }
+    ///////////////////////////////////
+    /// Formatos e posições de ícones
+    ///////////////////////////////////
+    getIconMaterial(type) {
+        const iconMap = {
+            'pdf': 'picture_as_pdf',
+            'application/pdf': 'picture_as_pdf',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'description',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'table_chart',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'slideshow',
+            'image/jpeg': 'image',
+            'image/png': 'image',
+            'image/gif': 'image',
+            'image/bmp': 'image',
+            'image/webp': 'image',
+            png: 'image',
+            jpeg: 'image',
+            gif: 'image',
+            bmp: 'image',
+            webp: 'image',
+            'video/mp4': 'ondemand_video',
+            'mp4': 'ondemand_video',
+            'video/quicktime': 'ondemand_video',
+            'video/x-msvideo': 'ondemand_video',
+            'video/x-ms-wmv': 'ondemand_video',
+            'audio/mpeg': 'audiotrack',
+            'audio/ogg': 'audiotrack',
+            'audio/wav': 'audiotrack',
+            'audio/webm': 'audiotrack',
+        };
+        return iconMap[type] || 'insert_drive_file';
+    }
+    typeFileFormat() {
+        const format = this._format || 'file';
+        const typeMap = {
+            pdf: 'pdf',
+            'application/pdf': 'pdf',
+            'image/jpeg': 'image',
+            'image/png': 'image',
+            'image/gif': 'image',
+            'image/bmp': 'image',
+            'image/webp': 'image',
+            png: 'image',
+            jpeg: 'image',
+            jpg: 'image',
+            gif: 'image',
+            bmp: 'image',
+            webp: 'image',
+            mp4: 'video',
+            mov: 'video',
+            'video/mp4': 'video',
+            'video/quicktime': 'video'
+        };
+        return typeMap[format] || 'file';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewFileComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewFileComponent, isStandalone: true, selector: "wco-preview-file", inputs: { filename: "filename", format: "format", preview: "preview", actions: "actions", status: "status", url: "url", customContent: "customContent", type: "type", title: "title", setfile: "setfile" }, outputs: { clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "previewFileElement", first: true, predicate: ["previewFileElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"'wco-previewFile wco-previewFile-type' + type\" #previewFileElement>\n  <h4 *ngIf=\"title\" class=\"display-body bold\">{{ title }}</h4>\n\n  <div [class]=\"'wco-previewFile--thumbl type-file-' + typeFileFormat()\" [id]=\"idRandom\">\n    <span class=\"wco-previewFile-preview\" (click)=\"preview ? modalPreview() : null\" role=\"button\" tabindex=\"0\">\n      <ng-container *ngIf=\"typeFileFormat() === 'image' && !!url\">\n        <img [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n      </ng-container>\n      <ng-container *ngIf=\"typeFileFormat() !== 'image' || !url\">\n        <span class=\"material-icons\" role=\"presentation\">{{ getIconMaterial(format) }}</span>\n      </ng-container>\n    </span>\n    <h5 (click)=\"preview ? modalPreview() : null\" role=\"heading\" aria-level=\"2\">\n      {{ name }}</h5>\n  </div>\n\n  <div class=\"wco-previewFile__action\">\n    <div class=\"wco-previewFile__action--status\" *ngIf=\"!customContent\">\n      <ng-container *ngIf=\"status && status.type && status.text\">\n        <span [class]=\"'wco-tag tag-' + status.type\" role=\"status\">\n          <span *ngIf=\"status.iconMaterial\" class=\"material-icons\" role=\"presentation\">{{ status.iconMaterial }}</span>\n          {{ status.text }}\n        </span>\n        <div>\n          <h6 *ngIf=\"status.prefixDescription\">\n            <strong>{{ status.prefixDescription }}</strong>\n          </h6>\n          <p *ngIf=\"status.description\">{{ status.description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"wco-previewFile__action--buttons\" *ngIf=\"!customContent\">\n      <ng-container *ngIf=\"!customContent && !!actions?.length\">\n        <ng-container>\n          <button *ngIf=\"actions.includes('refresh')\" (click)=\"actionEvent('refresh')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            <span class=\"material-icons\" role=\"presentation\">cached</span>\n            Reenviar\n          </button>\n          <button *ngIf=\"actions.includes('aproved')\" (click)=\"actionEvent('aproved')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            Aprovar\n            <span class=\"material-icons\" role=\"presentation\">done</span>\n          </button>\n          <button  *ngIf=\"actions.includes('reproved')\" (click)=\"actionEvent('reproved')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            Recusar\n            <span class=\"material-icons\" role=\"presentation\">close</span>\n          </button>\n          <div *ngIf=\"actions.includes('download') || actions.includes('delete') \" class=\"wco-previewFile__action--buttonsIcon\">\n            <button *ngIf=\"actions.includes('download')\" (click)=\"actionEvent('download')\" class=\"wco-previewFile--buttonIcon\"\n              role=\"button\" tabindex=\"0\">\n              <span class=\"material-icons-outlined\" role=\"presentation\">file_download</span>\n            </button>\n            <button *ngIf=\"actions.includes('delete')\" (click)=\"actionEvent('delete')\"\n              class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n              <span class=\"material-icons-outlined\" role=\"presentation\">delete</span>\n            </button>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"customContent\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"preview && x() && y()\">\n  <dialog [id]=\"id\" [ngStyle]=\"{'--dialog-x': x(), '--dialog-y': y()}\" role=\"dialog\" aria-modal=\"true\">\n    <div>\n      <div class=\"dialog-content\">\n        <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n        <video *ngIf=\"typeFileFormat() === 'video'\" [src]=\"url\" controls role=\"video\"></video>\n        <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n      </div>\n      <div class=\"w-full flex justify-center my-xxs\">\n        <button (click)=\"closeDialog()\" class=\"wco-btn btn-primary btn-sm\" role=\"button\" tabindex=\"0\">Fechar</button>\n      </div>\n    </div>\n  </dialog>\n</ng-container>", styles: [":host{display:block;container-type:inline-size;width:100%}.wco-previewFile{--wco-previewFile-text-color: var(--wco-color-neutral-700, #4A4A4A);--wco-previewFile-bg: var(--wco-color-neutral-50, #F9F9F9);--wco-previewFile-title-align: center;--wco-previewFile-border-color: var(--wco-color-neutral-500, #E0E0E0);width:100%;display:grid;grid-template-columns:minmax(auto,300px) 1fr;align-items:center;min-height:64px;gap:var(--wco-spacing-xxs, 16px)}.wco-previewFile>h4{grid-column:span 2}@container (width < 600px){.wco-previewFile{gap:var(--wco-spacing-sm, 16px)}.wco-previewFile h4{text-align:center}}.wco-previewFile.wco-previewFile-typebox{border:1px solid var(--wco-previewFile-border-color);background-color:var(--wco-previewFile-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-xxs, 16px)}.wco-previewFile:has(.wco-previewFile__action--status>div p){--wco-previewFile-title-align: flex-start}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--status{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--buttons{width:100%;justify-content:flex-end}.wco-previewFile:has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action--buttons{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile--thumbl{grid-column:span 2}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action{display:none}.wco-previewFile--thumbl{display:flex;align-items:var(--wco-previewFile-title-align);height:100%;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile--thumbl{grid-column:span 2}}.wco-previewFile--thumbl.type-file-image,.wco-previewFile--thumbl.type-file-pdf{cursor:pointer}.wco-previewFile--thumbl.type-file-image h5,.wco-previewFile--thumbl.type-file-pdf h5{text-decoration:underline;cursor:pointer}.wco-previewFile--thumbl.type-file-image h5:hover,.wco-previewFile--thumbl.type-file-pdf h5:hover{color:var(--wco-color-info-600)}.wco-previewFile--thumbl .wco-previewFile-preview{display:flex;align-items:center;color:var(--wco-color-neutral-900)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img){width:64px;height:64px;overflow:hidden;border-radius:var(--wco-radius-md);background-color:var(--wco-color-neutral-700);padding:var(--wco-spacing-quark)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img) img{width:100%;height:100%;object-fit:contain}.wco-previewFile__action{display:flex;justify-content:space-between;align-items:center;gap:var(--wco-spacing-sm, 16px);flex-wrap:wrap}@container (width < 600px){.wco-previewFile__action{grid-column:span 2;flex-direction:column;flex-wrap:wrap}}.wco-previewFile__action--status{display:flex;flex-direction:column;gap:var(--wco-spacing-xxxs, 8px)}.wco-previewFile__action--status>div:empty{display:none}@container (width < 600px){.wco-previewFile__action--status .wco-tag{width:100%}}.wco-previewFile__action--status h6,.wco-previewFile__action--status p{font-size:var(--wco-font-size-xs, 16px);color:var(--wco-previewFile-text-color);display:inline-flex}.wco-previewFile__action--status h6~p{margin-left:var(--wco-spacing-quark, 8px)}.wco-previewFile__action--buttons{display:flex;gap:var(--wco-spacing-xxs, 16px)}@container (width < 600px){.wco-previewFile__action--buttons{gap:var(--wco-spacing-xxxs, 12px);flex-wrap:wrap;flex-direction:column;width:100%;justify-content:center;align-items:center}.wco-previewFile__action--buttons button{width:100%;max-width:300px}}.wco-previewFile__action--buttonsIcon{display:flex;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile__action--buttonsIcon{gap:var(--wco-spacing-xxs, 8px)}}.wco-previewFile__action--buttonsIcon button{background:none;border:none;cursor:pointer;padding:var(--wco-spacing-nano, 8px);color:var(--wco-color-primary-600);display:flex;align-items:center;gap:var(--wco-spacing-nano, 8px)}.wco-previewFile__action--buttonsIcon button:hover{color:var(--wco-color-primary-700)}.wco-previewFile h5{font-size:var(--wco-font-size-sm, 18px);font-weight:400;line-height:var(--wco-font-lineheight-500, 150%);letter-spacing:.45px;color:var(--wco-previewFile-text-color);white-space:normal;text-wrap:pretty;width:100%}@container (width < 600px){.wco-previewFile h5{font-size:var(--wco-font-size-xxs, 16px)}}::ng-deep wco-preview-file~wco-preview-file{margin-top:var(--wco-spacing-xs, 16px)}.dialog-content{width:100%;display:flex;align-items:center;justify-content:center}.dialog-content:has(img){max-width:80vw;max-height:80vh}.dialog-content:has(img) img{max-width:100%;max-height:inherit}.dialog-content:has(iframe){width:90vw;height:70vh}.dialog-content:has(iframe) iframe{width:100%;height:100%}dialog{transition:opacity 7s ease-in-out,transform 7s ease-in-out,overlay 4s ease-in-out allow-discrete,display 4s ease-in-out allow-discrete}dialog:not(open)>div{border-radius:var(--wco-radius-sm);padding:10px;background-color:var(--wco-color-neutral-50);box-shadow:var(--wco-shadow-level-2);position:fixed;transform-origin:top left;transition:all .3s ease-in-out;opacity:0;top:var(--dialog-y);left:var(--dialog-x);transform:scale(.2)}@media screen and (max-width: 768px){dialog:not(open)>div{min-width:90vw}}dialog[open]{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open]{max-width:80vw}}@starting-style{dialog[open]{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-preview-file', standalone: true, imports: [CommonModule], template: "<div [class]=\"'wco-previewFile wco-previewFile-type' + type\" #previewFileElement>\n  <h4 *ngIf=\"title\" class=\"display-body bold\">{{ title }}</h4>\n\n  <div [class]=\"'wco-previewFile--thumbl type-file-' + typeFileFormat()\" [id]=\"idRandom\">\n    <span class=\"wco-previewFile-preview\" (click)=\"preview ? modalPreview() : null\" role=\"button\" tabindex=\"0\">\n      <ng-container *ngIf=\"typeFileFormat() === 'image' && !!url\">\n        <img [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n      </ng-container>\n      <ng-container *ngIf=\"typeFileFormat() !== 'image' || !url\">\n        <span class=\"material-icons\" role=\"presentation\">{{ getIconMaterial(format) }}</span>\n      </ng-container>\n    </span>\n    <h5 (click)=\"preview ? modalPreview() : null\" role=\"heading\" aria-level=\"2\">\n      {{ name }}</h5>\n  </div>\n\n  <div class=\"wco-previewFile__action\">\n    <div class=\"wco-previewFile__action--status\" *ngIf=\"!customContent\">\n      <ng-container *ngIf=\"status && status.type && status.text\">\n        <span [class]=\"'wco-tag tag-' + status.type\" role=\"status\">\n          <span *ngIf=\"status.iconMaterial\" class=\"material-icons\" role=\"presentation\">{{ status.iconMaterial }}</span>\n          {{ status.text }}\n        </span>\n        <div>\n          <h6 *ngIf=\"status.prefixDescription\">\n            <strong>{{ status.prefixDescription }}</strong>\n          </h6>\n          <p *ngIf=\"status.description\">{{ status.description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"wco-previewFile__action--buttons\" *ngIf=\"!customContent\">\n      <ng-container *ngIf=\"!customContent && !!actions?.length\">\n        <ng-container>\n          <button *ngIf=\"actions.includes('refresh')\" (click)=\"actionEvent('refresh')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            <span class=\"material-icons\" role=\"presentation\">cached</span>\n            Reenviar\n          </button>\n          <button *ngIf=\"actions.includes('aproved')\" (click)=\"actionEvent('aproved')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            Aprovar\n            <span class=\"material-icons\" role=\"presentation\">done</span>\n          </button>\n          <button  *ngIf=\"actions.includes('reproved')\" (click)=\"actionEvent('reproved')\"\n            class=\"wco-btn btn-primary btn-outline btn-sm\" role=\"button\" tabindex=\"0\">\n            Recusar\n            <span class=\"material-icons\" role=\"presentation\">close</span>\n          </button>\n          <div *ngIf=\"actions.includes('download') || actions.includes('delete') \" class=\"wco-previewFile__action--buttonsIcon\">\n            <button *ngIf=\"actions.includes('download')\" (click)=\"actionEvent('download')\" class=\"wco-previewFile--buttonIcon\"\n              role=\"button\" tabindex=\"0\">\n              <span class=\"material-icons-outlined\" role=\"presentation\">file_download</span>\n            </button>\n            <button *ngIf=\"actions.includes('delete')\" (click)=\"actionEvent('delete')\"\n              class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n              <span class=\"material-icons-outlined\" role=\"presentation\">delete</span>\n            </button>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"customContent\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"preview && x() && y()\">\n  <dialog [id]=\"id\" [ngStyle]=\"{'--dialog-x': x(), '--dialog-y': y()}\" role=\"dialog\" aria-modal=\"true\">\n    <div>\n      <div class=\"dialog-content\">\n        <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n        <video *ngIf=\"typeFileFormat() === 'video'\" [src]=\"url\" controls role=\"video\"></video>\n        <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n      </div>\n      <div class=\"w-full flex justify-center my-xxs\">\n        <button (click)=\"closeDialog()\" class=\"wco-btn btn-primary btn-sm\" role=\"button\" tabindex=\"0\">Fechar</button>\n      </div>\n    </div>\n  </dialog>\n</ng-container>", styles: [":host{display:block;container-type:inline-size;width:100%}.wco-previewFile{--wco-previewFile-text-color: var(--wco-color-neutral-700, #4A4A4A);--wco-previewFile-bg: var(--wco-color-neutral-50, #F9F9F9);--wco-previewFile-title-align: center;--wco-previewFile-border-color: var(--wco-color-neutral-500, #E0E0E0);width:100%;display:grid;grid-template-columns:minmax(auto,300px) 1fr;align-items:center;min-height:64px;gap:var(--wco-spacing-xxs, 16px)}.wco-previewFile>h4{grid-column:span 2}@container (width < 600px){.wco-previewFile{gap:var(--wco-spacing-sm, 16px)}.wco-previewFile h4{text-align:center}}.wco-previewFile.wco-previewFile-typebox{border:1px solid var(--wco-previewFile-border-color);background-color:var(--wco-previewFile-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-xxs, 16px)}.wco-previewFile:has(.wco-previewFile__action--status>div p){--wco-previewFile-title-align: flex-start}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--status{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--buttons{width:100%;justify-content:flex-end}.wco-previewFile:has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action--buttons{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile--thumbl{grid-column:span 2}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action{display:none}.wco-previewFile--thumbl{display:flex;align-items:var(--wco-previewFile-title-align);height:100%;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile--thumbl{grid-column:span 2}}.wco-previewFile--thumbl.type-file-image,.wco-previewFile--thumbl.type-file-pdf{cursor:pointer}.wco-previewFile--thumbl.type-file-image h5,.wco-previewFile--thumbl.type-file-pdf h5{text-decoration:underline;cursor:pointer}.wco-previewFile--thumbl.type-file-image h5:hover,.wco-previewFile--thumbl.type-file-pdf h5:hover{color:var(--wco-color-info-600)}.wco-previewFile--thumbl .wco-previewFile-preview{display:flex;align-items:center;color:var(--wco-color-neutral-900)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img){width:64px;height:64px;overflow:hidden;border-radius:var(--wco-radius-md);background-color:var(--wco-color-neutral-700);padding:var(--wco-spacing-quark)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img) img{width:100%;height:100%;object-fit:contain}.wco-previewFile__action{display:flex;justify-content:space-between;align-items:center;gap:var(--wco-spacing-sm, 16px);flex-wrap:wrap}@container (width < 600px){.wco-previewFile__action{grid-column:span 2;flex-direction:column;flex-wrap:wrap}}.wco-previewFile__action--status{display:flex;flex-direction:column;gap:var(--wco-spacing-xxxs, 8px)}.wco-previewFile__action--status>div:empty{display:none}@container (width < 600px){.wco-previewFile__action--status .wco-tag{width:100%}}.wco-previewFile__action--status h6,.wco-previewFile__action--status p{font-size:var(--wco-font-size-xs, 16px);color:var(--wco-previewFile-text-color);display:inline-flex}.wco-previewFile__action--status h6~p{margin-left:var(--wco-spacing-quark, 8px)}.wco-previewFile__action--buttons{display:flex;gap:var(--wco-spacing-xxs, 16px)}@container (width < 600px){.wco-previewFile__action--buttons{gap:var(--wco-spacing-xxxs, 12px);flex-wrap:wrap;flex-direction:column;width:100%;justify-content:center;align-items:center}.wco-previewFile__action--buttons button{width:100%;max-width:300px}}.wco-previewFile__action--buttonsIcon{display:flex;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile__action--buttonsIcon{gap:var(--wco-spacing-xxs, 8px)}}.wco-previewFile__action--buttonsIcon button{background:none;border:none;cursor:pointer;padding:var(--wco-spacing-nano, 8px);color:var(--wco-color-primary-600);display:flex;align-items:center;gap:var(--wco-spacing-nano, 8px)}.wco-previewFile__action--buttonsIcon button:hover{color:var(--wco-color-primary-700)}.wco-previewFile h5{font-size:var(--wco-font-size-sm, 18px);font-weight:400;line-height:var(--wco-font-lineheight-500, 150%);letter-spacing:.45px;color:var(--wco-previewFile-text-color);white-space:normal;text-wrap:pretty;width:100%}@container (width < 600px){.wco-previewFile h5{font-size:var(--wco-font-size-xxs, 16px)}}::ng-deep wco-preview-file~wco-preview-file{margin-top:var(--wco-spacing-xs, 16px)}.dialog-content{width:100%;display:flex;align-items:center;justify-content:center}.dialog-content:has(img){max-width:80vw;max-height:80vh}.dialog-content:has(img) img{max-width:100%;max-height:inherit}.dialog-content:has(iframe){width:90vw;height:70vh}.dialog-content:has(iframe) iframe{width:100%;height:100%}dialog{transition:opacity 7s ease-in-out,transform 7s ease-in-out,overlay 4s ease-in-out allow-discrete,display 4s ease-in-out allow-discrete}dialog:not(open)>div{border-radius:var(--wco-radius-sm);padding:10px;background-color:var(--wco-color-neutral-50);box-shadow:var(--wco-shadow-level-2);position:fixed;transform-origin:top left;transition:all .3s ease-in-out;opacity:0;top:var(--dialog-y);left:var(--dialog-x);transform:scale(.2)}@media screen and (max-width: 768px){dialog:not(open)>div{min-width:90vw}}dialog[open]{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open]{max-width:80vw}}@starting-style{dialog[open]{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { previewFileElement: [{
+                type: ViewChild,
+                args: ['previewFileElement', { static: false }]
+            }], filename: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], customContent: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], setfile: [{
+                type: Input
+            }], clickEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of ngx-fenixds
  */
@@ -1363,5 +1568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MsgBoxFeedbackComponent, PaginationComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent };
+export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map