@wizco/fenixds-ngx 17.8.3 → 17.8.5
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.
- package/esm2022/lib/msg-box-feedback/msg-box-feedback.component.mjs +23 -24
- package/esm2022/lib/preview-file/preview-file.component.mjs +3 -3
- package/fesm2022/wizco-fenixds-ngx.mjs +24 -25
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts +5 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,6 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren, signal } from '@angular/core';
|
|
5
5
|
import * as i1$1 from '@angular/common/http';
|
|
6
6
|
import { HttpEventType, HttpClientModule } from '@angular/common/http';
|
|
7
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
8
7
|
import * as i1$2 from '@angular/router';
|
|
9
8
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
10
9
|
import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
@@ -577,41 +576,37 @@ class MsgBoxFeedbackComponent {
|
|
|
577
576
|
* @param {boolean} hideClose
|
|
578
577
|
*/
|
|
579
578
|
hideClose = false;
|
|
579
|
+
/*
|
|
580
|
+
* Texto do botão
|
|
581
|
+
* @param {string} textButton
|
|
582
|
+
*/
|
|
583
|
+
textButton;
|
|
580
584
|
/*
|
|
581
585
|
* Evento emitido ao fechar o componente
|
|
582
586
|
* @param {EventEmitter<any>}
|
|
583
587
|
*/
|
|
584
588
|
onClose = new EventEmitter();
|
|
589
|
+
/*
|
|
590
|
+
* Evento emitido ao clicar no botão
|
|
591
|
+
* @param {EventEmitter<any>}
|
|
592
|
+
*/
|
|
593
|
+
clickButton = new EventEmitter();
|
|
585
594
|
constructor() { }
|
|
586
595
|
close() {
|
|
587
596
|
this.onClose.emit(true);
|
|
588
597
|
}
|
|
598
|
+
handleClickButton() {
|
|
599
|
+
this.clickButton.emit(true);
|
|
600
|
+
}
|
|
601
|
+
get hasButton() {
|
|
602
|
+
return !!this.textButton && this.clickButton.observers.length > 0;
|
|
603
|
+
}
|
|
589
604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
590
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n
|
|
591
|
-
trigger('fadeSlideInOut', [
|
|
592
|
-
transition(':enter', [
|
|
593
|
-
style({ opacity: 0, transform: 'translateY(10px)' }),
|
|
594
|
-
animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
595
|
-
]),
|
|
596
|
-
transition(':leave', [
|
|
597
|
-
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
|
|
598
|
-
]),
|
|
599
|
-
]),
|
|
600
|
-
], encapsulation: i0.ViewEncapsulation.None });
|
|
605
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type", hideClose: "hideClose", textButton: "textButton" }, outputs: { onClose: "onClose", clickButton: "clickButton" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n <ng-content></ng-content>\n <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n <button \n class=\"btn btn-sm btn-link btn-primary\"\n (click)=\"handleClickButton()\"\n type=\"button\">\n {{ textButton }}\n </button>\n </div>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
601
606
|
}
|
|
602
607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, decorators: [{
|
|
603
608
|
type: Component,
|
|
604
|
-
args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None,
|
|
605
|
-
trigger('fadeSlideInOut', [
|
|
606
|
-
transition(':enter', [
|
|
607
|
-
style({ opacity: 0, transform: 'translateY(10px)' }),
|
|
608
|
-
animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
|
|
609
|
-
]),
|
|
610
|
-
transition(':leave', [
|
|
611
|
-
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
|
|
612
|
-
]),
|
|
613
|
-
]),
|
|
614
|
-
], template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
|
|
609
|
+
args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n <ng-content></ng-content>\n <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n <button \n class=\"btn btn-sm btn-link btn-primary\"\n (click)=\"handleClickButton()\"\n type=\"button\">\n {{ textButton }}\n </button>\n </div>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
|
|
615
610
|
}], ctorParameters: () => [], propDecorators: { shadow: [{
|
|
616
611
|
type: Input
|
|
617
612
|
}], mode: [{
|
|
@@ -624,8 +619,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
624
619
|
type: Input
|
|
625
620
|
}], hideClose: [{
|
|
626
621
|
type: Input
|
|
622
|
+
}], textButton: [{
|
|
623
|
+
type: Input
|
|
627
624
|
}], onClose: [{
|
|
628
625
|
type: Output
|
|
626
|
+
}], clickButton: [{
|
|
627
|
+
type: Output
|
|
629
628
|
}] } });
|
|
630
629
|
|
|
631
630
|
class TabsComponent {
|
|
@@ -1614,11 +1613,11 @@ class PreviewFileComponent {
|
|
|
1614
1613
|
return typeMap[format] || 'file';
|
|
1615
1614
|
}
|
|
1616
1615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviewFileComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\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 <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\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][role=dialog]{opacity:1;background-color:transparent;box-shadow:none}dialog[open][role=dialog]>div{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open][role=dialog]{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"] }] });
|
|
1616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\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 class=\"wco-dialog-wrapper\">\n <div class=\"dialog-content\">\n <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\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],dialog:open{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div.wco-dialog-wrapper,dialog:open>div.wco-dialog-wrapper{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open],dialog:open{max-width:80vw}}@starting-style{dialog[open],dialog:open{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop,dialog:open::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop,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"] }] });
|
|
1618
1617
|
}
|
|
1619
1618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviewFileComponent, decorators: [{
|
|
1620
1619
|
type: Component,
|
|
1621
|
-
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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\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 <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\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][role=dialog]{opacity:1;background-color:transparent;box-shadow:none}dialog[open][role=dialog]>div{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open][role=dialog]{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"] }]
|
|
1620
|
+
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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (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 </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\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 class=\"wco-dialog-wrapper\">\n <div class=\"dialog-content\">\n <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\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],dialog:open{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div.wco-dialog-wrapper,dialog:open>div.wco-dialog-wrapper{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open],dialog:open{max-width:80vw}}@starting-style{dialog[open],dialog:open{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop,dialog:open::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop,dialog:open::backdrop{background-color:#0000}}\n"] }]
|
|
1622
1621
|
}], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: i0.NgZone }], propDecorators: { previewFileElement: [{
|
|
1623
1622
|
type: ViewChild,
|
|
1624
1623
|
args: ['previewFileElement', { static: false }]
|