@wizco/fenixds-ngx
Version:
Componentes fenix design system para Angular.
1,910 lines • 215 kB
JavaScript
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, 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';
import * as i1$2 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i1$3 from '@angular/platform-browser';
class StepComponent {
/**
* Se o step está ativo
* @param {boolean} active
*/
active = false;
/**
* Texto do label do step
*/
label = '';
/**
* Ícone do step (opcional) - deve ser um ícone do material icon
*/
iconName = undefined;
/**
* Texto do bulletValue do step (opcional) - deve ser um texto de 1 a 2 caracteres
*/
bulletValue = undefined;
/**
* Sentido do stepper (horizontal ou vertical)
*/
isVertical = true;
/**
* Desabilitar linha inicial
*/
lineStart = true;
/**
* Desabilitar linha final
*/
lineEnd = true;
/**
* Classe do step
*
* finalized - step finalizado
* current - step atual
* waiting - step aguardando
* error - step com erro
*
* @param {string} status
*/
status = 'current';
/**
* size do step
* @param {string} size
*/
size = 'small';
/**
* Se o step é clicável
* @param {boolean} clickable
*/
hasClick = false;
/**
* Função que retorna o valor do ícone ou bullet
*/
clicked = new EventEmitter();
constructor() { }
/**
* se o item do stepper estive com o evento de clicked true, ele retorna qual elemento é selecionado para o componente pai
* */
clickedItem() {
if (this.hasClick) {
return;
}
this.clicked.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepComponent, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"] }]
}], ctorParameters: () => [], propDecorators: { active: [{
type: Input
}], label: [{
type: Input
}], iconName: [{
type: Input
}], bulletValue: [{
type: Input
}], isVertical: [{
type: Input
}], lineStart: [{
type: Input
}], lineEnd: [{
type: Input
}], status: [{
type: Input
}], size: [{
type: Input
}], hasClick: [{
type: Input
}], clicked: [{
type: Output
}] } });
class StepperComponent {
/**
* Sentido do stepper (horizontal ou vertical)
*/
isVertical = false;
/**
* Array de itens do stepper StepperClass
* @param {StepperClass} stepper
*/
stepperArray = [];
/**
* Função que retorna o valor do ícone ou bullet
*/
stepperSelected = new EventEmitter();
constructor() { }
/**
* se o item do stepper estive com o evento de clicked true, ele retorna qual elemento é selecionado para o componente pai
* */
clickedItem(item, index) {
if (!item.clicked) {
return;
}
this.stepperSelected.emit(index);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "wco-stepper", inputs: { isVertical: "isVertical", stepperArray: "stepperArray" }, outputs: { stepperSelected: "stepperSelected" }, ngImport: i0, template: "<div\n class=\"stepper-vertical\"\n [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n *ngIf=\"stepperArray\"\n>\n <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n <div class=\"stepper-component__main\">\n <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\" (click)=\"clickedItem(items,$i)\">\n <span\n [ngClass]=\"\n items.showLineStart === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n items.valueIcon\n }}</span>\n <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n items.valueBullet\n }}</span></span\n >\n <span\n [ngClass]=\"\n items.showLineEnd === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n </div>\n <div class=\"stepper-label\">\n <span\n class=\"stepper-label__text\"\n [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n >{{ items.label }}</span\n >\n </div>\n </div>\n </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
type: Component,
args: [{ selector: "wco-stepper", standalone: true, imports: [CommonModule], template: "<div\n class=\"stepper-vertical\"\n [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n *ngIf=\"stepperArray\"\n>\n <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n <div class=\"stepper-component__main\">\n <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\" (click)=\"clickedItem(items,$i)\">\n <span\n [ngClass]=\"\n items.showLineStart === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n items.valueIcon\n }}</span>\n <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n items.valueBullet\n }}</span></span\n >\n <span\n [ngClass]=\"\n items.showLineEnd === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n </div>\n <div class=\"stepper-label\">\n <span\n class=\"stepper-label__text\"\n [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n >{{ items.label }}</span\n >\n </div>\n </div>\n </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"] }]
}], ctorParameters: () => [], propDecorators: { isVertical: [{
type: Input
}], stepperArray: [{
type: Input
}], stepperSelected: [{
type: Output
}] } });
class UploadComponent {
http;
/* Texto de descrição do arquivo */
description = '(XX MB de tamanho máximo e é permitido qualquer tipo de arquivos)';
/* config <AngularFileUploaderConfig> configuração do componente principais parâmetros */
config = {
uploadAPI: {
url: '',
method: 'POST',
headers: {
'Content-Type': 'text/plain;charset=UTF-8',
},
responseType: 'json',
withCredentials: false,
},
};
/*
* Opção de resetar o componente
*/
resetUpload = false;
/*
* Evento Resposta da requisição sendo sucesso ou erro
*/
ApiResponse = new EventEmitter();
/*
* Evento javascript puro para retorno do arquivo
*/
fileSelected = new EventEmitter();
/**
* @ignore
*/
theme = '';
/**
* @ignore
*/
id = 0;
/**
* @ignore
*/
hideProgressBar = false;
/**
* @ignore
*/
maxSize = 20 * 1024000; // mb to bytes.
/**
* @ignore
*/
uploadAPI = '';
/**
* @ignore
*/
method = 'POST';
/**
* @ignore
*/
formatsAllowed = '*';
/**
* @ignore
*/
formatsAllowedText = '';
/**
* @ignore
*/
multiple = false;
/**
* @ignore
*/
headers = {};
/**
* @ignore
*/
params = {};
/**
* @ignore
*/
responseType = 'blob';
/**
* @ignore
*/
hideResetBtn = false;
/**
* @ignore
*/
hideSelectBtn = false;
/**
* @ignore
*/
allowedFiles = [];
/**
* @ignore
*/
notAllowedFiles = [];
/**
* @ignore
*/
Caption = [];
/**
* @ignore
*/
isAllowedFileSingle = true;
/**
* @ignore
*/
progressBarShow = false;
/**
* @ignore
*/
enableUploadBtn = false;
/**
* @ignore
*/
uploadMsg = false;
/**
* @ignore
*/
afterUpload = false;
/**
* @ignore
*/
uploadStarted = false;
/**
* @ignore
*/
uploadMsgText = '';
/**
* @ignore
*/
uploadMsgClass = 'text-success';
/**
* @ignore
*/
uploadPercent = 0;
/**
* @ignore
*/
replaceTexts = {
selectFileBtn: 'Selecionar Arquivo',
resetBtn: 'Resetar',
uploadBtn: 'Enviar',
dragNDropBox: 'Arraste e solte',
attachPinBtn: 'Anexar Arquivo...',
afterUploadMsg_success: 'Enviado com sucesso !',
afterUploadMsg_error: 'Falha no envio !',
sizeLimit: 'Tamanho máximo',
};
/**
* @ignore
*/
currentUploads = [];
/**
* @ignore
*/
fileNameIndex = true;
/**
* @ignore
*/
withCredentials = false;
/**
* @ignore
*/
autoUpload = true;
/**
* @ignore
*/
idDate = +new Date();
constructor(http) {
this.http = http;
}
/**
* @ignore
*/
ngOnChanges(changes) {
// Track changes in Configuration and see if user has even provided Configuration.
if (changes.config && this.config) {
// Assign User Configurations to Library Properties.
this.theme = this.config.theme || '';
this.id =
this.config.id ||
parseInt((this.idDate / 10000).toString().split('.')[1], 10) +
Math.floor(Math.random() * 20) * 10000;
this.hideProgressBar = this.config.hideProgressBar || false;
this.hideResetBtn = this.config.hideResetBtn || false;
this.hideSelectBtn = this.config.hideSelectBtn || false;
this.maxSize = (this.config.maxSize || 20) * 1024000; // mb to bytes.
if (this.config.uploadAPI) {
this.uploadAPI = this.config.uploadAPI.url;
this.method = this.config.uploadAPI.method || 'POST';
this.formatsAllowed = this.config.formatsAllowed || '*';
this.multiple = this.config.multiple || false;
this.headers = this.config.uploadAPI.headers || {};
this.params = this.config.uploadAPI.params || {};
this.responseType = this.config.uploadAPI.responseType || 'json';
this.withCredentials = this.config.uploadAPI.withCredentials || false;
}
this.formatsAllowedText =
this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
this.fileNameIndex = this.config.fileNameIndex === false ? false : true;
this.autoUpload = this.config.autoUpload || false;
if (this.config.replaceTexts) {
this.replaceTexts = {
...this.replaceTexts,
...this.config.replaceTexts,
};
}
}
// Reset when resetUpload value changes from false to true.
if (changes.resetUpload) {
if (changes.resetUpload.currentValue === true) {
this.resetFileUpload();
}
}
}
/* Função resetar componente */
resetFileUpload() {
this.allowedFiles = [];
this.Caption = [];
this.notAllowedFiles = [];
this.uploadMsg = false;
this.enableUploadBtn = false;
}
/* Detectar mudança */
onChange(event) {
this.fileSelected.emit(event);
this.notAllowedFiles = [];
const fileExtRegExp = /(?:\.([^.]+))?$/;
let fileList;
if (this.afterUpload || !this.multiple) {
this.allowedFiles = [];
this.Caption = [];
this.afterUpload = false;
}
if (event.type === 'drop') {
fileList = event.dataTransfer.files;
}
else {
fileList = event.target.files || event.srcElement.files;
}
// 'forEach' does not exist on 'filelist' that's why this good old 'for' is used.
// tslint:disable-next-line: for-of
for (let i = 0; i < fileList.length; i++) {
const _currentFileExt = fileExtRegExp.exec(fileList[i].name);
const currentFileExt = typeof _currentFileExt[1] === 'string'
? _currentFileExt[1].toLowerCase()
: '';
const isFormatValid = this.formatsAllowed.includes('*')
? true
: this.formatsAllowed.includes(currentFileExt);
const isSizeValid = fileList[i].size <= this.maxSize;
// Check whether current file format and size is correct as specified in the configurations.
if (isFormatValid && isSizeValid) {
this.allowedFiles.push(fileList[i]);
}
else {
this.notAllowedFiles.push({
fileName: fileList[i].name,
fileSize: this.convertSize(fileList[i].size),
errorMsg: !isFormatValid ? 'Invalid format' : 'Invalid size',
});
}
}
// If there's any allowedFiles.
if (this.allowedFiles.length > 0) {
this.enableUploadBtn = true;
// Upload the files directly if theme is attach pin (as upload btn is not there for this theme) or autoUpload is true.
if (this.theme === 'attachPin' || this.autoUpload) {
this.uploadFiles();
}
}
else {
this.enableUploadBtn = false;
}
this.uploadMsg = false;
this.uploadStarted = false;
this.uploadPercent = 0;
event.target.value = null;
}
/* Função para enviar arquivo para servidor */
uploadFiles() {
this.progressBarShow = true;
this.uploadStarted = true;
this.notAllowedFiles = [];
let isError = false;
this.isAllowedFileSingle = this.allowedFiles.length <= 1;
const formData = new FormData();
// Add data to be sent in this request
this.allowedFiles.forEach((file, i) => {
formData.append(this.Caption[i] || 'file' + (this.fileNameIndex ? i : ''), this.allowedFiles[i]);
});
this.http
.request(this.method.toUpperCase(), this.uploadAPI, {
body: formData,
reportProgress: true,
observe: 'events',
headers: this.headers,
params: this.params,
responseType: this.responseType,
withCredentials: this.withCredentials,
})
.subscribe((event) => {
// Upload Progress
if (event.type === HttpEventType.UploadProgress) {
this.enableUploadBtn = false; // button should be disabled if process uploading
const currentDone = event.loaded / event.total;
this.uploadPercent = Math.round((event.loaded / event.total) * 100);
}
else if (event.type === HttpEventType.Response) {
if (event.status === 200 || event.status === 201) {
// Success
this.progressBarShow = false;
this.enableUploadBtn = false;
this.uploadMsg = true;
this.afterUpload = true;
if (!isError) {
this.uploadMsgText =
this.replaceTexts.afterUploadMsg_success ||
'Successfully Uploaded !';
this.uploadMsgClass = 'text-success lead';
}
}
else {
// Failure
isError = true;
this.handleErrors();
}
this.ApiResponse.emit(event);
}
else {
//console.log('Event Other: ', event);
}
}, (error) => {
// Failure
isError = true;
this.handleErrors();
this.ApiResponse.emit(error);
});
}
handleErrors() {
this.progressBarShow = false;
this.enableUploadBtn = false;
this.uploadMsg = true;
this.afterUpload = true;
this.uploadMsgText =
this.replaceTexts.afterUploadMsg_error || 'Error in uploading files';
this.uploadMsgClass = 'text-danger lead';
}
removeFile(i, sf_na) {
if (sf_na === 'sf') {
this.allowedFiles.splice(i, 1);
this.Caption.splice(i, 1);
}
else {
this.notAllowedFiles.splice(i, 1);
}
if (this.allowedFiles.length === 0) {
this.enableUploadBtn = false;
}
}
convertSize(fileSize) {
return fileSize < 1024000
? (fileSize / 1024).toFixed(2) + ' KB'
: (fileSize / 1024000).toFixed(2) + ' MB';
}
attachpinOnclick() {
const element = document.getElementById('sel' + this.id);
if (element !== null) {
element.click();
}
}
drop(event) {
event.stopPropagation();
event.preventDefault();
this.onChange(event);
}
allowDrop(event) {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [{ token: i1$1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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-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: () => [{ type: i1$1.HttpClient, decorators: [{
type: SkipSelf
}] }], propDecorators: { description: [{
type: Input
}], config: [{
type: Input
}], resetUpload: [{
type: Input
}], ApiResponse: [{
type: Output,
args: ['apiResponse']
}], fileSelected: [{
type: Output
}] } });
class MsgBoxFeedbackComponent {
/*
* Sombra do componente
* @param {boolean} shadow
* @default true
* @example true | false
*/
shadow = false;
/*
* Modo do componente
* @param {MsgBoxFeedbackTypes['mode']} mode
* @default 'fit'
* @example 'fit' | 'full'
*/
mode = 'fit';
/*
* Título do componente
* @param {MsgBoxFeedbackTypes['title']} title
*/
title;
/*
* Mensagem do componente
* @param {MsgBoxFeedbackTypes['message']} message
*/
message;
/*
* Tipo do componente
* @param {MsgBoxFeedbackTypes['type']} type
*/
type = 'error';
/*
* Remover botão de fechar
* @param {boolean} hideClose
*/
hideClose = false;
/*
* Evento emitido ao fechar o componente
* @param {EventEmitter<any>}
*/
onClose = new EventEmitter();
constructor() { }
close() {
this.onClose.emit(true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 @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"], 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"] }], animations: [
trigger('fadeSlideInOut', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(10px)' }),
animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
]),
]),
], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MsgBoxFeedbackComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, animations: [
trigger('fadeSlideInOut', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(10px)' }),
animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
]),
]),
], 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"] }]
}], ctorParameters: () => [], propDecorators: { shadow: [{
type: Input
}], mode: [{
type: Input
}], title: [{
type: Input
}], message: [{
type: Input
}], type: [{
type: Input
}], hideClose: [{
type: Input
}], onClose: [{
type: Output
}] } });
class TabsComponent {
router;
el;
/**
* @ignore
*/
navTabs;
/**
* Variável para definir o tipo de navegação
* @param {string} type
*/
type = 'header';
/**
* Elementos divididos igualmente ocupando toda largura
* @param {boolean} full
*/
full = false;
/**
* Variável para definir o item ativo e monitorar a mudança
* @param {string} selected
*/
selected = '';
/** habilitar reponsivo
* @param {Boolean} enabledResponsive
*/
enabledResponsive = true;
/**
* Opções de navegação por rotas
* @param {NavTabsOptions[]} links
*/
set setListOptions(links) {
if (links.length) {
this.links = links.map((item) => {
return {
...item,
type: item.type || 'link',
options: { exact: item.path === '/' ? true : false },
};
});
}
}
/**
* Variável para definir se o componente terá borda ou não
* @param {boolean} noBorder
*/
noBorder = false;
autoScroll = true;
/**
* Evento de click no botão ou link do componente
* @param {EventEmitter<void>} handleClick
* @returns {void}
*/
handleClick = new EventEmitter();
/**
* @ignore
*/
links = [];
/**
* Variavel se é mobile ou não
*/
isMobile = false;
constructor(router, el) {
this.router = router;
this.el = el;
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.handleActive(100, false);
}
});
}
/**
* @ignore
*/
ngOnChanges(changes) {
if (changes['selected']) {
console.log('selected', this.selected);
this.handleActive(100, false);
}
}
/**
* @ignore
*/
ngAfterViewInit() {
this.handleActive(1000, false);
}
/**
* @ignore
*/
eventSubmit(link = '') {
this.handleClick.emit(link);
}
/**
* @ignore
*/
handleActive(timer = 100, buttonClick = true) {
setTimeout(() => {
const _elementRef = this.el.nativeElement;
const _element = this.navTabs.nativeElement;
if (_elementRef && _element) {
this.isMobile = _elementRef.clientWidth >= _element.clientWidth;
}
const allActives = _element.querySelectorAll('button.active');
const _elementChildActive = allActives[allActives.length - 1];
if (!_elementChildActive) {
return;
}
const left = _elementChildActive.getBoundingClientRect().left - _element.getBoundingClientRect().left;
const widthbutton = _elementChildActive.getBoundingClientRect().width;
_element.style.setProperty('--leftActive', left + 'px');
_element.style.setProperty('--widthActive', widthbutton + 'px');
if (this.autoScroll) {
_elementChildActive.scrollIntoView({ block: 'end', behavior: 'smooth' });
}
if (buttonClick) {
this.handleClick.emit();
}
if (this.enabledResponsive && this.autoScroll) {
_elementChildActive.scrollIntoView({
block: 'end',
behavior: 'smooth',
});
}
}, timer);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, isStandalone: true, selector: "wco-navtabs", inputs: { type: "type", full: "full", selected: "selected", enabledResponsive: ["enabled-responsive", "enabledResponsive"], setListOptions: ["listOptions", "setListOptions"], noBorder: ["no-border", "noBorder"], autoScroll: "autoScroll" }, outputs: { handleClick: "handleClick" }, viewQueries: [{ propertyName: "navTabs", first: true, predicate: ["navTabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n <nav \n class=\"wco-navtabs\" \n #navTabs role=\"navigation\"\n [class.no-border]=\"noBorder\" \n [class.navTabs-full]=\"full\"\n [class.navTabs-mobile]=\"!isMobile\"\n>\n <ng-container *ngFor=\"let link of links\">\n <ng-container *ngIf=\"link.type === 'link'\">\n <button \n (click)=\"eventSubmit()\" \n [class.color-to-nav]=\"type === 'nav'\"\n [routerLink]=\"link.path\" routerLinkActive=\"active\" [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"link.type === 'button'\">\n <button \n (click)=\"eventSubmit(link.path)\" \n [class.color-to-nav]=\"type === 'nav'\"\n [class.active]=\"link.path === selected\"\n [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n</nav>\n", styles: ["wco-navtabs{width:100%;overflow:auto;display:block}@media screen and (max-width: 600px){wco-navtabs{overflow:auto;white-space:nowrap;max-width:100vw}wco-navtabs::-webkit-scrollbar{display:none}}.wco-navtabs{--leftActive: 50px;--widthActive: 0px;--navtabs-gapLine: var(--wco-spacing-nano);--navtabs-gap: 0;--navtab-color-selected: var(--wco-color-primary-600);--navtabs-underline-height: 3px;display:inline-flex;position:relative;gap:var(--navtabs-gap);height:100%;border-bottom:1px solid var(--wco-color-neutral-100);scroll-behavior:smooth}.wco-navtabs.navTabs-mobile:before{display:none}.wco-navtabs.navTabs-mobile button.active{border-bottom:3px solid var(--wco-color-primary-600)}.wco-navtabs.navTabs-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.wco-navtabs.navTabs-full>button{width:100%}.wco-navtabs.no-border{border-bottom:none!important}@media (max-width: 900px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxxs);--navtabs-gap: var(--wco-spacing-xxs)}}@media (max-width: 600px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxs)}}.wco-navtabs:before{content:\"\";width:var(--widthActive);height:var(--navtabs-underline-height);background-color:var(--navtab-color-selected);position:absolute;bottom:0;left:0;transform:translate(var(--leftActive));transition:transform .15s cubic-bezier(.645,.045,.355,1),width .1s linear}.wco-navtabs button{background-color:transparent;border:none;font-size:var(--wco-font-size-md);font-weight:400;min-height:48px;padding:var(--wco-spacing-nano) var(--wco-spacing-xxs) var(--navtabs-gapLine) var(--wco-spacing-xxs);display:flex;width:fit-content;align-items:center;justify-content:center;color:var(--wco-color-neutral-900);letter-spacing:.5px}.wco-navtabs button:hover:not(:disabled){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer;border-radius:var(--wco-spacing-nano) var(--wco-spacing-nano) 0 0}@media (max-width: 600px){.wco-navtabs button{font-size:var(--wco-font-size-xs);min-height:30px}}.wco-navtabs button:disabled{cursor:not-allowed;color:var(--wco-color-neutral-900)}.wco-navtabs button.color-to-nav{font-weight:700}.wco-navtabs button.active{font-weight:700;letter-spacing:0px}\n"], 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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-navtabs', standalone: true, imports: [
CommonModule,
RouterModule
], encapsulation: ViewEncapsulation.None, template: "\n <nav \n class=\"wco-navtabs\" \n #navTabs role=\"navigation\"\n [class.no-border]=\"noBorder\" \n [class.navTabs-full]=\"full\"\n [class.navTabs-mobile]=\"!isMobile\"\n>\n <ng-container *ngFor=\"let link of links\">\n <ng-container *ngIf=\"link.type === 'link'\">\n <button \n (click)=\"eventSubmit()\" \n [class.color-to-nav]=\"type === 'nav'\"\n [routerLink]=\"link.path\" routerLinkActive=\"active\" [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"link.type === 'button'\">\n <button \n (click)=\"eventSubmit(link.path)\" \n [class.color-to-nav]=\"type === 'nav'\"\n [class.active]=\"link.path === selected\"\n [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n</nav>\n", styles: ["wco-navtabs{width:100%;overflow:auto;display:block}@media screen and (max-width: 600px){wco-navtabs{overflow:auto;white-space:nowrap;max-width:100vw}wco-navtabs::-webkit-scrollbar{display:none}}.wco-navtabs{--leftActive: 50px;--widthActive: 0px;--navtabs-gapLine: var(--wco-spacing-nano);--navtabs-gap: 0;--navtab-color-selected: var(--wco-color-primary-600);--navtabs-underline-height: 3px;display:inline-flex;position:relative;gap:var(--navtabs-gap);height:100%;border-bottom:1px solid var(--wco-color-neutral-100);scroll-behavior:smooth}.wco-navtabs.navTabs-mobile:before{display:none}.wco-navtabs.navTabs-mobile button.active{border-bottom:3px solid var(--wco-color-primary-600)}.wco-navtabs.navTabs-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.wco-navtabs.navTabs-full>button{width:100%}.wco-navtabs.no-border{border-bottom:none!important}@media (max-width: 900px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxxs);--navtabs-gap: var(--wco-spacing-xxs)}}@media (max-width: 600px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxs)}}.wco-navtabs:before{content:\"\";width:var(--widthActive);height:var(--navtabs-underline-height);background-color:var(--navtab-color-selected);position:absolute;bottom:0;left:0;transform:translate(var(--leftActive));transition:transform .15s cubic-bezier(.645,.045,.355,1),width .1s linear}.wco-navtabs button{background-color:transparent;border:none;font-size:var(--wco-font-size-md);font-weight:400;min-height:48px;padding:var(--wco-spacing-nano) var(--wco-spacing-xxs) var(--navtabs-gapLine) var(--wco-spacing-xxs);display:flex;width:fit-content;align-items:center;justify-content:center;color:var(--wco-color-neutral-900);letter-spacing:.5px}.wco-navtabs button:hover:not(:disabled){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer;border-radius:var(--wco-spacing-nano) var(--wco-spacing-nano) 0 0}@media (max-width: 600px){.wco-navtabs button{font-size:var(--wco-font-size-xs);min-height:30px}}.wco-navtabs button:disabled{cursor:not-allowed;color:var(--wco-color-neutral-900)}.wco-navtabs button.color-to-nav{font-weight:700}.wco-navtabs button.active{font-weight:700;letter-spacing:0px}\n"] }]
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ElementRef }], propDecorators: { navTabs: [{
type: ViewChild,
args: ['navTabs']
}], type: [{
type: Input
}], full: [{
type: Input
}], selected: [{
type: Input
}], enabledResponsive: [{
type: Input,
args: ['enabled-responsive']
}], setListOptions: [{
type: Input,
args: ['listOptions']
}], noBorder: [{
type: Input,
args: ['no-border']
}], autoScroll: [{
type: Input,
args: ['autoScroll']
}], handleClick: [{
type: Output
}] } });
class PaginationComponent {
/**
* Evento que se emite quando se clica em um item da paginação
*/
changePage = new EventEmitter();
/**
* Total de páginas
* @default 0
* @type number
*/
totalPage = 0;
/**
* Página atual
* @default 1
* @type number
* */
currenPage = 1;
/**
* Modo de exibição da paginação
* @default default
* @type string
*/
mode = 'default';
/**
* Verifica tamanho da tela para exibir modo simples
*/
ngAfterContentInit() {
if (window.innerWidth < 768) {
this.mode = 'simple';
}
}
/**
* Retorna um array com os números das páginas e os pontos de suspensão
*/
pagination() {
const current = this.currenPage;
const last = this.totalPage;
const delta = current >= 2 ? current >= 4 ? 1 : 2 : 3;
const left = current - delta;
const right = current + delta + 1;
const range = [];
const rangeWithDots = [];
let l;
for (let i = 1; i <= last; i++) {
if (i === 1 || i === last || (i >= left && i < right)) {
range.push(i);
}
}
for (const i of range) {
if (l) {
if (i - l === 2) {
rangeWithDots.push(l + 1);
}
else if (i - l !== 1) {
rangeWithDots.push('...');
}
else {
// empty
}
}
rangeWithDots.push(i);
l = i;
}
return rangeWithDots;
}
/**
* Seguir para a próxima página
*/
nextPage() {
if (this.currenPage < this.totalPage) {
this.currenPage += 1;
this.changePage.emit(this.currenPage);
}
}
/**
* Voltar para a página anterior
*/
previousPage() {
if (this.currenPage >= 2) {
this.currenPage -= 1;
this.changePage.emit(this.currenPage);
}
}
/**
* Ir para a página selecionada
* @param i
* @returns void
*/
out(i) {
this.currenPage = parseInt(`${i}`, 10);
console.log(i, this.currenPage);
this.changePage.emit(i);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "wco-pagination", inputs: { totalPage: "totalPage", currenPage: "currenPage", mode: "mode" }, outputs: { changePage: "changePage" }, ngImport: i0, template: "<div class=\"pagination\"\n *ngIf=\"!!totalPage && totalPage >= 2\"\n ngClass=\"pagination-{{mode}}\"\n>\n\n <ng-container *ngIf=\"mode === 'simple'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button class=\"active\">{{currenPage}}</button>\n <span>/</span>\n <button>{{totalPage}}</button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"mode === 'default'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button *ngFor=\"let i of pagination()\" [ngClass]=\"{ \n active: currenPage === i,\n disable: i === '...'\n }\" (click)=\"out(i)\">\n {{ i }}\n </button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n</div>\n\n", styles: [".pagination{--wco-paginator-size: 32px;--wco-paginator-border-radius: var(--wco-radius-sm);--wco-paginator-color: var(--wco-color-primary-900);--wco-paginator-bg: transparent;display:flex;gap:var(--wco-spacing-nano);justify-content:center;align-items:center}.pagination.pagination-simple{gap:var(--wco-spacing-quark);--wco-paginator-size: 26px;--wco-paginator-padding: 0 var(--wco-spacing-quark)}.pagination.pagination-simple>span{color:var(--wco-color-neutral-500)}.pagination button{border:0px solid transparent;display:flex;justify-content:center;align-items:center;background-color:transparent;transition:all .2s ease-in-out;color:var(--wco-color-primary-900);min-width:var(--wco-paginator-size, 32px);min-height:var(--wco-paginator-size, 32px);border-radius:var(--wco-paginator-border-radius);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:var(--wco-paginator-fontweight);letter-spacing:var(--wco-paginator-letterspacing);padding:var(--wco-paginator-padding, 0)}.pagination button:hover:not(.active){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer}.pagination button:focus-within{outline:none;box-shadow:inset 0 0 0 2px var(--wco-color-primary-700)}.pagination button.last-button svg{transform:scale(-1)}.pagination button.disable{cursor:default;color:#999;pointer-events:none}.pagination button.disable svg path{fill:var(--wco-color-neutral-300)}.pagination .active{background-color:var(--wco-color-primary-600);color:var(--wco-color-neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pagination\"\n *ngIf=\"!!totalPage && totalPage >= 2\"\n ngClass=\"pagination-{{mode}}\"\n>\n\n <ng-container *ngIf=\"mode === 'simple'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button class=\"active\">{{currenPage}}</button>\n <span>/</span>\n <button>{{totalPage}}</button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"mode === 'default'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button *ngFor=\"let i of pagination()\" [ngClass]=\"{ \n active: currenPage === i,\n disable: i === '...'\n }\" (click)=\"out(i)\">\n {{ i }}\n </button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n</div>\n\n", styles: [".pagination{--wco-paginator-size: 32px;--wco-paginator-border-radius: var(--wco-radius-sm);--wco-paginator-color: var(--wco-color-primary-900);--wco-paginator-bg: transparent;display:flex;gap:var(--wco-spacing-nano);justify-content:center;align-items:center}.pagination.pagination-simple{gap:var(--wco-spacing-quark);--wco-paginator-size: 26px;--wco-paginator-padding: 0 var(--wco-spacing-quark)}.pagination.pagination-simple>span{color:var(--wco-color-neutral-500)}.pagination button{border:0px solid transparent;display:flex;justify-content:center;align-items:center;background-color:transparent;transition:all .2s ease-in-out;color:var(--wco-color-primary-900);min-width:var(--wco-paginator-size, 32px);min-height:var(--wco-paginator-size, 32px);border-radius:var(--wco-paginator-border-radius);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:var(--wco-paginator-fontweight);letter-spacing:var(--wco-paginator-letterspacing);padding:var(--wco-paginator-padding, 0)}.pagination button:hover:not(.active){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer}.pagination button:focus-within{outline:none;box-shadow:inset 0 0 0 2px var(--wco-color-primary-700)}.pagination button.last-button svg{transform:scale(-1)}.pagination button.disable{cursor:default;color:#999;pointer-events:none}.pagination button.disable svg path{fill:var(--wco-color-neutral-300)}.pagination .active{background-color:var(--wco-color-primary-600);color:var(--wco-color-neutral-50)}\n"] }]
}], propDecorators: { changePage: [{
type: Output
}], totalPage: [{
type: Input
}], currenPage: [{
type: Input
}], mode: [{
type: Input
}] } });
class UserAvatarComponent {
/** Nome do usuário */
userName = "";
/** Url da imagem opcional */
userAvatar = "";
/** Tamanho do componente */
size = 'md';
/** Theme mudança de cores do componente */
theme = 'secondary';
/** solid tipo com bg predominant */
solid = false;
/**
* @ignore
*/
userNameLetters = "";
constructor() { }
/** Mudança de parâmetros dinâmicos */
ngOnChanges() {
this._prepareNameLetters();
}
/** Retorne o nome abreviado */
_prepareNameLetters() {
let capitalizeLetters = "";
if (this.userName) {
capitalizeLetters = this.userName.charAt(0);
let _arrUserName = this.userName.split(' ');
if (_arrUserName.length > 1) {
capitalizeLetters += _arrUserName[_arrUserName.length - 1].charAt(0);
}
}
this.userNameLetters = capitalizeLetters.toUpperCase();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAvatarComponent, isStandalone: true, selector: "wco-avatar", inputs: { userName: ["name", "userName"], userAvatar: ["image", "userAvatar"], size: "size", theme: "theme", solid: "solid" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-avatar', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\r\n [class]=\"\r\n 'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n [title]=\"userName\" >\r\n <span>{{userNameLetters}}</span>\r\n <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar.wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"] }]
}], ctorParameters: () => [], propDecorators: { userName: [{
type: Input,
args: ['name']
}], userAvatar: [{
type: Input,
args: ['image']
}], size: [{
type: Input,
args: ['size']
}], theme: [{
type: Input,
args: ['theme']
}], solid: [{
type: Input,
args: ['solid']
}] } });
class SmartSelectOptionComponent {
el;
sanitizer;
value;
label;
iconPrefix;
disabled = false;
viewOnly = false;
safeHtmlContent;
constructor(el, sanitizer) {
this.el = el;
this.sanitizer = sanitizer;
}
ngAfterViewInit() {
const rawHtmlContent = this.el.nativeElement.innerHTML.trim();
this.safeHtmlContent =
rawHtmlContent.length > 0
? this.sanitizer.bypassSecurityTrustHtml(rawHtmlContent)
: undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmartSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmartSelectOptionComponent, isStandalone: true, selector: "wco-smart-select-option", inputs: { value: "value", label: "label", iconPrefix: "iconPrefix", disabled: "disabled", viewOnly: "viewOnly" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmartSelectOptionComponent, decorators: [{
type: Component,
args: [{
selector: 'wco-smart-select-option',
standalone: true,
imports: [CommonModule],
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }], propDecorators: { value: [{
type: Input
}], label: [{
type: Input
}], iconPrefix: [{
type: Input
}], disabled: [{
type: Input
}], viewOnly: [{
type: Input
}] } });
class SmartSelectComponent {
el;
options;
onChange = new EventEmitter();
/* Id do elemento */
inputId = 'select_' + Math.random().toString(36).substring(2);
/* Attr name do elemento */
inputName;
IconMaterial = 'arrow_drop_down';
/* Placeholder do select */
placeholder = 'Selecione uma opção';
/* Label do select */
label = ' ';
/* Força visualização do erro */
showError = false;
/* Mostrar campos de busca */
showSearch = false;
placeholderSearch = 'Buscar';
/* Texto exibido quando não há resultados */
textEmpty = 'Não há resultados para a busca';
/* habilitar opção de multiplas seleções */
multiSelect = false;
/* Limitar visualização de itens selecionados */
showMaxSelectedLabel = 0;
/* Tipos pré definidos de checkbox, radio ou null */
typePrefix = null;
/* Confirmação de o campo é obrigatório */
required = false;
limitView;
formControlName;
isMobile = window.innerWidth <= 768;
formValue;
isFocused = false;
preventEscapeFocus = false;
autocompleteControl = new FormControl();
filteredOptions = [];
showList = false;
constructor(el) {
this.el = el;
}
onTouched = () => {
this.isFocused = true;
};
/// estados do control
ngOnInit() { }
// Carrega os valores do formControl para o componente e renderiza as opções
writeValue(obj) {
if (this.autocompleteControl.value === this.formValue) {
return;
}
this.formValue = obj;
this.autocompleteControl.setValue(obj);
this.renderBoxOptions();
}
validate(_control) {
this.autocompleteControl = _control || new FormControl();
return _control.validator;
}
registerOnChange(fn) {
this.onChange.subscribe((event) => {
if (event.type === 'updateValue') {
fn(event.value);
}
});
}
registerOnTouched(fn) {
this.onTouched = fn;
}
get hasError() {
return this.showError
? this.showError
: this.autocompleteControl.invalid &&
this.autocompleteControl.touched &&
!this.showList;
}
setDisabledState(isDisabled) {
if (isDisabled) {
this.autocompleteControl.disable();
}
else {
this.autocompleteControl.enable();
}
}
/// Abertura e fechamento da lista
onFocusIn(focus = false) {
this.renderBoxOptions();
this.autocompleteControl.markAsTouched();
this.onTouched();
this.isFocused = focus;
this.showList = focus;
this.positionBox();
this.focusSearchElementor();
}
focusSearchElementor() {
if (this.showSearch) {
// Caso ele tenha a busca habilitada
setTimeout(() => {
const searchElement = this.el.nativeElement.querySelector('.wco-smartSelect--search');
if (searchElement) {
searchElement.focus();
}
}, 400);
}
}
/// here function to position box element top or bottom
positionBox() {
if (this.isMobile) {
return;
}
const componentBox = this.el.nativeElement;
if (!componentBox) {
return;
}
const componentBoxPosition = componentBox.getBoundingClientRect();
const inputId = componentBox.querySelector('.form-field');
const box = componentBox.querySelector('.wco-smartSelect--box');
const inputIdPosition = inputId.getBoundingClientRect().height;
const pageHeight = window.innerHeight;
if (box && componentBoxPosition.y + 320 >= pageHeight) {
box.style.bottom = inputIdPosition + 'px';
box.style.height = `var(--wco-smart-select-box-max-height)`;
box.style.top = 'initial';
}
else {
box.style.top = inputIdPosition + 'px';
box.style.bottom = 'initial';
box.style.height = `auto`;
}
}
onSelect(option) {
if (option.disabled || option.viewOnly) {
return;
}
const oldValue = Array.isArray(this.formValue)
? [...this.formValue]
: this.formValue;
if (this.multiSelect) {
if (typeof option.value === 'object') {
const list = this.compareMultiValuesArray(option);
const hasValueOption = list.some((item) => item.selected);
if (hasValueOption) {
this.formValue = list
.filter((item) => !item.selected)
.map((item) => item.item);
}
else {
this.formValue = [...(this.formValue || []), option.value];
}
}
else {
const index = this.formValue?.indexOf(option.value);
if (index !== undefined && index > -1) {
this.formValue?.splice(index, 1);
}
else {
this.formValue = [...(this.formValue || []), option.value];
}
}
this.autocompleteControl.setValue(this.formValue);
}
else {
this.formValue = option.value;
this.autocompleteControl.setValue(option.value);
this.showList = false;
}
if (oldValue !== this.formValue) {
this.onChange.emit({ type: 'updateValue', value: this.formValue });
}
this.renderBoxOptions();
}
// Show label span
get selectedLabel() {
const selectedOption = this.options?.find((option) => this.normalizeText(String(option.value)) ===
this.normalizeText(String(this.formValue)));
return selectedOption?.label || '';
}
// show label multi select
get selectedLabelMulti() {
const selectedOptions = this.options?.filter((option) => {
if (typeof option.value === 'object') {
return this.compareValueArray(option);
}
else {
return this.formValue?.includes(option.value);
}
});
if (!selectedOptions?.length) {
return [];
}
if (!this.showMaxSelectedLabel) {
return selectedOptions;
}
if (this.showMaxSelectedLabel &&
selectedOptions.length > this.showMaxSelectedLabel) {
return selectedOptions.slice(0, this.showMaxSelectedLabel);
}
return selectedOptions;
}
valueToArray(options) {
const keys = Object.keys(options);
const value = [];
keys.forEach((key) => {
if (options[key] &&
options[key] !== '' &&
typeof options[key] !== 'object' &&
typeof options[key] !== 'function' &&
typeof options[key] !== 'boolean') {
value.push(options[key]);
}
});
return value;
}
compareValueArray(option, value = this.formValue) {
if (option && option.value) {
const valuesItems = this.valueToArray(option.value);
return value.some((item) => {
const itemArray = this.valueToArray(item);
return itemArray.every((itemValue) => valuesItems.includes(itemValue));
});
}
return [];
}
compareMultiValuesArray(option, value = this.formValue) {
if (option && option.value) {
const valuesItems = this.valueToArray(option.value);
const formValueArray = value.map((item, index) => {
const itemArray = this.valueToArray(item);
return {
index,
item,
selected: itemArray.some((itemValue) => valuesItems.includes(itemValue)),
};
});
// Remove duplicate items
const uniqueFormValueArray = Array.from(new Set(formValueArray.map((item) => JSON.stringify(item)))).map((item) => JSON.parse(item));
return uniqueFormValueArray;
}
return [];
}
get selectedLabelMultiCount() {
const show = this.showMaxSelectedLabel || 0;
const selectedOptions = this.options?.filter((option) => this.formValue?.includes(option.value));
if (!selectedOptions?.length) {
return 0;
}
if (show > 0 && selectedOptions.length > show) {
return selectedOptions.length - show;
}
return 0;
}
removeItem(option) {
this.onSelect(option);
setTimeout(() => {
this.showList = false;
}, 100);
}
onKeyPress(event) {
event.preventDefault();
this.renderBoxOptions();
}
onFilter(event) {
const value = event.target.value;
if (!value) {
this.renderBoxOptions();
return;
}
if (this.filteredOptions.length) {
this.renderBoxOptions(value);
}
}
onResize() {
this.renderBoxOptions();
this.positionBox();
}
onFocusOut() {
if (!this.preventEscapeFocus && !this.isMobile) {
this.isFocused = false;
this.showList = false;
}
}
closeList() {
this.preventEscapeFocus = true;
this.isFocused = false;
this.showList = false;
}
selectedValue(option) {
if (this.multiSelect) {
if (typeof option.value === 'object') {
if (option && option.value) {
const valuesItems = this.valueToArray(option.value);
return this.formValue.some((item) => {
const itemArray = this.valueToArray(item);
return itemArray.every((itemValue) => valuesItems.includes(itemValue));
});
}
}
else {
return this.formValue?.includes(option.value);
}
}
return option.value === this.formValue;
}
loadMore() {
this.limitView = this.options?.length;
this.renderBoxOptions();
}
renderBoxOptions(filterValue = null) {
if (!this.options || !this.options.length) {
return;
}
let valueLimit = this.options.length;
if (filterValue && filterValue.length > 3) {
valueLimit = this.options.length;
}
else if (this.limitView) {
valueLimit = this.limitView;
}
if (!filterValue) {
this.filteredOptions = this.options
?.map((option) => ({
value: option.value,
iconPrefix: option.iconPrefix,
htmlLabel: option.safeHtmlContent || option.label,
disabled: option.disabled,
viewOnly: option.viewOnly,
}))
.slice(0, valueLimit || 100);
}
else {
this.limitView = this.options?.length;
this.filteredOptions = this.options
?.map((option) => ({
value: option.value,
iconPrefix: option.iconPrefix,
htmlLabel: option.safeHtmlContent || option.label,
disabled: option.disabled,
viewOnly: option.viewOnly,
}))
.filter((option) => {
const normalizedFilter = this.normalizeText(filterValue);
const normalizedLabel = this.normalizeText(option.htmlLabel?.toString() || '');
return normalizedLabel.includes(normalizedFilter);
})
.slice(0, valueLimit || 100);
}
}
normalizeText(text) {
return text
.replace(/[\W_]+/g, '') // Remove caracteres especiais e sublinhados
.toLowerCase();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmartSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showError: "showError", showSearch: "showSearch", placeholderSearch: "placeholderSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix", required: "required", limitView: "limitView", formControlName: "formControlName" }, outputs: { onChange: "onChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SmartSelectComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: SmartSelectComponent,
multi: true,
},
], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\n [class.required]=\"required\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}}\n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}}\n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons wco-smart-select--arrow\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n [placeholder]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n <li (click)=\"loadMore()\" class=\"wco-smart-select-load-more\" *ngIf=\"limitView && options && limitView > 0 && limitView !== options?.length\">\n <p class=\"display-body\">Carregar mais</p>\n </li>\n </ul>\n </div>\n </div>\n", styles: [":host{width:100%}.wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more{cursor:pointer;justify-content:center;grid-template-columns:1fr;background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more:hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more p{text-align:center;color:var(--wco-smart-select-box-hover-color-label)}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmartSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-smart-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SmartSelectComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: SmartSelectComponent,
multi: true,
},
], template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\n [class.required]=\"required\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}}\n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}}\n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons wco-smart-select--arrow\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n [placeholder]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n <li (click)=\"loadMore()\" class=\"wco-smart-select-load-more\" *ngIf=\"limitView && options && limitView > 0 && limitView !== options?.length\">\n <p class=\"display-body\">Carregar mais</p>\n </li>\n </ul>\n </div>\n </div>\n", styles: [":host{width:100%}.wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more{cursor:pointer;justify-content:center;grid-template-columns:1fr;background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more:hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more p{text-align:center;color:var(--wco-smart-select-box-hover-color-label)}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
type: ContentChildren,
args: [SmartSelectOptionComponent]
}], onChange: [{
type: Output
}], inputId: [{
type: Input
}], inputName: [{
type: Input
}], IconMaterial: [{
type: Input
}], placeholder: [{
type: Input
}], label: [{
type: Input
}], showError: [{
type: Input
}], showSearch: [{
type: Input
}], placeholderSearch: [{
type: Input
}], textEmpty: [{
type: Input
}], multiSelect: [{
type: Input
}], showMaxSelectedLabel: [{
type: Input
}], typePrefix: [{
type: Input
}], required: [{
type: Input
}], limitView: [{
type: Input
}], formControlName: [{
type: Input
}] } });
class TimelineComponent {
timelineItems = [];
statusToIcon = {
finalized: 'check',
current: '',
waiting: '',
error: 'priority_high',
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p *ngIf=\"item.descriptionPre?.text\" [className]=\"item.descriptionPre?.customClass\"> {{ item.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <p *ngIf=\"item.descriptionPos?.text\" [className]=\"item.descriptionPos?.customClass\"> {{ item.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:grid;grid-template-columns:1fr minmax(200px,250px);grid-template-areas:\". .\";gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-600 )}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"], 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"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n <div class=\"wco-timeline-item-dot-container\">\n <div class=\"wco-timeline-item-dot-container-inner\">\n <span class=\"wco-timeline-item-dot-number\">\n {{ timelineItems.length - i }}\n </span>\n <div class=\"wco-timeline-item-dot-line-container\">\n <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n </div>\n <hr class=\"wco-timeline-item-dot-line\" />\n </div>\n </div>\n </div>\n <div class=\"wco-timeline-item-content-container\">\n <div class=\"wco-timeline-item-content\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n <p *ngIf=\"item.descriptionPre?.text\" [className]=\"item.descriptionPre?.customClass\"> {{ item.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n <p *ngIf=\"item.descriptionPos?.text\" [className]=\"item.descriptionPos?.customClass\"> {{ item.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n </div>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n </div>\n </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:grid;grid-template-columns:1fr minmax(200px,250px);grid-template-areas:\". .\";gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-600 )}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var( --wco-color-neutral-700 )}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"] }]
}], propDecorators: { timelineItems: [{
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: "18.2.13", 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: "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 <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: "18.2.13", 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: () => [{ 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
}] } });
class WcoModalAlertComponent {
sanitizer;
DEFAULT_VALUES = {
show: false,
showIcon: true,
title: '',
message: '',
actions: [],
hideClose: false,
};
set show(value) {
this.changeValues(value, 'show');
}
set showIcon(value) {
this.changeValues(value, 'showIcon');
}
set title(value) {
this.changeValues(value, 'title');
}
set message(value) {
this.changeValues(value, 'message');
}
set materialIcon(value) {
this.changeValues(value, 'materialIcon');
}
set type(value) {
this.changeValues(value, 'type');
}
set hideClose(value) {
this.changeValues(value, 'hideClose');
}
set actions(value) {
this.changeValues(value, 'actions');
}
id = 'wco-modal-alert-' + Math.random().toString(36).substring(7);
config = {
show: false,
showIcon: true,
title: '',
message: '',
actions: [],
hideClose: false,
};
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
ngOnChanges(event) {
if (event['config']?.currentValue['show'] !== undefined) {
this.eventModal();
}
}
get title() {
return this.sanitizer.bypassSecurityTrustHtml(this.config.title || '');
}
get message() {
return this.sanitizer.bypassSecurityTrustHtml(this.config.message || '');
}
getButtonClass(action) {
const classeColor = action.color === 'primary'
? 'btn-primary'
: action.color === 'secondary'
? 'btn-secondary'
: 'btn-neutral';
const classeOutline = action.outline ? 'btn-outline' : '';
const extraClasse = action.extraClasse ? action.extraClasse : '';
return `wco-btn btn-full ${classeColor} ${classeOutline} ${extraClasse}`;
}
get iconMaterial() {
const { type = 'info' } = this.config;
switch (type) {
case 'error':
return { icon: 'error_outline', color: 'error' };
case 'warning':
return { icon: 'warning_amber', color: 'warning' };
case 'success':
return { icon: 'check_circle_outline', color: 'success' };
case 'loading':
return { icon: 'spinner', color: 'loading' };
default:
return { icon: 'info', color: 'info' };
}
}
changeValues(valueUpdate, name) {
this.config = {
...this.DEFAULT_VALUES,
...this.config,
[name]: valueUpdate,
};
this.eventModal();
}
modalClose() {
const element = document.getElementById(this.id);
if (element) {
element.close();
}
}
eventModal() {
const show = this.config.show;
const element = document.getElementById(this.id);
if (show && element) {
if (this.config.hideClose) {
element.addEventListener('keydown', (event) => {
const key = event.key;
if (key === 'Escape') {
event.preventDefault();
}
});
}
element.showModal();
this.config.show = false;
}
else {
this.modalClose();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoModalAlertComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WcoModalAlertComponent, isStandalone: true, selector: "wco-modal-alert", inputs: { show: "show", showIcon: "showIcon", title: "title", message: "message", materialIcon: "materialIcon", type: "type", hideClose: "hideClose", actions: "actions", id: ["setId", "id"], config: "config" }, usesOnChanges: true, ngImport: i0, template: "<dialog class=\"wco-modal\" [id]=\"id\" role=\"dialog\" aria-modal=\"true\">\n <main>\n <ng-container *ngIf=\"!config.hideClose\">\n <button class=\"wco-modal--close\" (click)=\"modalClose()\">\n <span class=\"material-icons\">close</span>\n </button>\n </ng-container>\n <div [class]=\"'wco-modalConfirm ' + iconMaterial.color\">\n <ng-container *ngIf=\"config.showIcon\">\n <span class=\"wco-modalConfirm--icon\">\n <ng-container *ngIf=\"config.type !== 'loading'\">\n <span class=\"material-icons-round\">\n <ng-container *ngIf=\"config.materialIcon; else iconTemplate\">\n {{config.materialIcon}}\n </ng-container>\n <ng-template #iconTemplate>\n {{ iconMaterial.icon}}\n </ng-template>\n </span>\n </ng-container>\n <ng-container *ngIf=\"config.type === 'loading'\">\n <svg class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--wco-modal-color-type)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n </ng-container>\n </span>\n </ng-container>\n <ng-container *ngIf=\"config.title\">\n <h3 class=\"wco-modalConfirm--title\" [innerHTML]=\"title\"></h3>\n </ng-container>\n <ng-container *ngIf=\"config.message\"> \n <p class=\"wco-modalConfirm--message\" [innerHTML]=\"message\"></p>\n </ng-container>\n <div class=\"wco-modalConfirm--actions\" [class.modalConfirm--actions-size]=\"config.actions.length === 1\"\n *ngIf=\"config.actions && config.actions.length > 0\">\n <button type=\"button\" [class]=\"getButtonClass(action)\" (click)=\"action.action()\"\n *ngFor=\"let action of config.actions; let index = index\">\n <span class=\"material-icons-round\" *ngIf=\"action.materialIconLeft\">{{action.materialIconLeft}}</span>\n {{action.text}}\n <span class=\"material-icons-round\" *ngIf=\"action.materialIconRight\">{{action.materialIconRight}}</span>\n </button>\n </div>\n </div>\n </main>\n</dialog>", styles: [".wco-modalConfirm{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;--color-type: var(--wco-color-neutral-900)}.wco-modalConfirm.info{--wco-modal-color-type: var(--wco-color-info-600)}.wco-modalConfirm.success{--wco-modal-color-type: var(--wco-color-success-600)}.wco-modalConfirm.warning{--wco-modal-color-type: var(--wco-color-warning-600)}.wco-modalConfirm.error{--wco-modal-color-type: var(--wco-color-danger-600)}.wco-modalConfirm.loading{--wco-modal-color-type: var(--wco-color-primary-600)}.wco-modalConfirm--title{font-size:var(--wco-font-size-lg);line-height:150%;letter-spacing:.4px;font-weight:700;color:var(--wco-color-neutral-900)}.wco-modalConfirm--icon{margin-bottom:var(--wco-spacing-md)}.wco-modalConfirm--icon span{font-size:var(--wco-spacing-xxl);color:var(--wco-modal-color-type)}.wco-modalConfirm--icon .spinner{width:93px}@media screen and (max-width: 768px){.wco-modalConfirm--icon .spinner{width:55px}}.wco-modalConfirm--message{font-size:var(--wco-font-size-xs);line-height:150%;letter-spacing:.4px;font-weight:400;color:var(--wco-color-neutral-700);text-wrap:pretty;margin-top:var(--wco-spacing-nano)}.wco-modalConfirm--actions{display:flex;justify-content:center;align-items:center;gap:var(--wco-spacing-xs);margin-top:var(--wco-spacing-md);width:100%}.wco-modalConfirm--actions.modalConfirm--actions-size{max-width:275px}@media screen and (max-width: 768px){.wco-modalConfirm--actions{flex-direction:column}}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.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)}}\n"], 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoModalAlertComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-modal-alert', standalone: true, imports: [CommonModule], template: "<dialog class=\"wco-modal\" [id]=\"id\" role=\"dialog\" aria-modal=\"true\">\n <main>\n <ng-container *ngIf=\"!config.hideClose\">\n <button class=\"wco-modal--close\" (click)=\"modalClose()\">\n <span class=\"material-icons\">close</span>\n </button>\n </ng-container>\n <div [class]=\"'wco-modalConfirm ' + iconMaterial.color\">\n <ng-container *ngIf=\"config.showIcon\">\n <span class=\"wco-modalConfirm--icon\">\n <ng-container *ngIf=\"config.type !== 'loading'\">\n <span class=\"material-icons-round\">\n <ng-container *ngIf=\"config.materialIcon; else iconTemplate\">\n {{config.materialIcon}}\n </ng-container>\n <ng-template #iconTemplate>\n {{ iconMaterial.icon}}\n </ng-template>\n </span>\n </ng-container>\n <ng-container *ngIf=\"config.type === 'loading'\">\n <svg class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--wco-modal-color-type)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n </ng-container>\n </span>\n </ng-container>\n <ng-container *ngIf=\"config.title\">\n <h3 class=\"wco-modalConfirm--title\" [innerHTML]=\"title\"></h3>\n </ng-container>\n <ng-container *ngIf=\"config.message\"> \n <p class=\"wco-modalConfirm--message\" [innerHTML]=\"message\"></p>\n </ng-container>\n <div class=\"wco-modalConfirm--actions\" [class.modalConfirm--actions-size]=\"config.actions.length === 1\"\n *ngIf=\"config.actions && config.actions.length > 0\">\n <button type=\"button\" [class]=\"getButtonClass(action)\" (click)=\"action.action()\"\n *ngFor=\"let action of config.actions; let index = index\">\n <span class=\"material-icons-round\" *ngIf=\"action.materialIconLeft\">{{action.materialIconLeft}}</span>\n {{action.text}}\n <span class=\"material-icons-round\" *ngIf=\"action.materialIconRight\">{{action.materialIconRight}}</span>\n </button>\n </div>\n </div>\n </main>\n</dialog>", styles: [".wco-modalConfirm{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;--color-type: var(--wco-color-neutral-900)}.wco-modalConfirm.info{--wco-modal-color-type: var(--wco-color-info-600)}.wco-modalConfirm.success{--wco-modal-color-type: var(--wco-color-success-600)}.wco-modalConfirm.warning{--wco-modal-color-type: var(--wco-color-warning-600)}.wco-modalConfirm.error{--wco-modal-color-type: var(--wco-color-danger-600)}.wco-modalConfirm.loading{--wco-modal-color-type: var(--wco-color-primary-600)}.wco-modalConfirm--title{font-size:var(--wco-font-size-lg);line-height:150%;letter-spacing:.4px;font-weight:700;color:var(--wco-color-neutral-900)}.wco-modalConfirm--icon{margin-bottom:var(--wco-spacing-md)}.wco-modalConfirm--icon span{font-size:var(--wco-spacing-xxl);color:var(--wco-modal-color-type)}.wco-modalConfirm--icon .spinner{width:93px}@media screen and (max-width: 768px){.wco-modalConfirm--icon .spinner{width:55px}}.wco-modalConfirm--message{font-size:var(--wco-font-size-xs);line-height:150%;letter-spacing:.4px;font-weight:400;color:var(--wco-color-neutral-700);text-wrap:pretty;margin-top:var(--wco-spacing-nano)}.wco-modalConfirm--actions{display:flex;justify-content:center;align-items:center;gap:var(--wco-spacing-xs);margin-top:var(--wco-spacing-md);width:100%}.wco-modalConfirm--actions.modalConfirm--actions-size{max-width:275px}@media screen and (max-width: 768px){.wco-modalConfirm--actions{flex-direction:column}}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.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)}}\n"] }]
}], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { show: [{
type: Input
}], showIcon: [{
type: Input
}], title: [{
type: Input
}], message: [{
type: Input
}], materialIcon: [{
type: Input
}], type: [{
type: Input
}], hideClose: [{
type: Input
}], actions: [{
type: Input
}], id: [{
type: Input,
args: [{ alias: 'setId' }]
}], config: [{
type: Input
}] } });
class TableComponent {
data = [];
sortedItem;
headers = [];
loading = false;
templates = {};
handlerSortedBy = new EventEmitter();
tableRef;
hasExpandableRows = false;
constructor() { }
ngOnInit() {
this.checkExpandableRows();
}
ngAfterViewInit() {
this.alignChildHeaders();
}
ngOnChanges() {
this.checkExpandableRows();
if (this.tableRef) {
setTimeout(() => this.alignChildHeaders());
}
}
/**
* Verifica se há linhas expandíveis na tabela
*/
checkExpandableRows() {
this.hasExpandableRows = this.data.some(row => row.children);
}
/**
* Alinha os headers filhos com os headers pai
*/
alignChildHeaders() {
const table = this.tableRef?.nativeElement;
if (!table)
return;
// Fazer um loop para pegar os headers pai
const parentHeaders = table.querySelector('thead:first-child')?.querySelectorAll('th:not(.wco-table-expand-column)');
const parentWidths = Array.from(parentHeaders).map(th => th.offsetWidth);
const childTables = table.querySelectorAll('.wco-table-children table');
childTables.forEach((childTable) => {
const childHeaders = childTable.querySelectorAll('th:not(.wco-table-expand-column)');
// Verifica se os headers são iguais
const hasSameHeaders = this.hasSameHeaders(Array.from(parentHeaders).map(th => th.textContent?.trim()), Array.from(childHeaders).map(th => th.textContent?.trim()));
if (hasSameHeaders) {
// Aplica as larguras dos headers pai nos headers filhos
childHeaders.forEach((th, index) => {
if (parentWidths[index]) {
th.style.width = `${parentWidths[index]}px`;
}
});
}
});
}
hasSameHeaders(parentHeaders, childHeaders) {
if (parentHeaders.length !== childHeaders.length)
return false;
return parentHeaders.every((header, index) => header === childHeaders[index]);
}
/**
* Obtém o template para uma determinada coluna
* @param templateName - Nome do template
* @returns TemplateRef ou undefined
*/
getTemplate(templateName) {
return this.templates[templateName];
}
/**
* Ordena a tabela por um determinado cabeçalho
* @param header - Cabeçalho a ser ordenado
*/
onSortedBy(header) {
this.sortedItem = {
key: header.key,
order: header.key == this.sortedItem?.key && this.sortedItem.order === 'ASC' ? 'DESC' : 'ASC'
};
this.handlerSortedBy.emit(this.sortedItem);
}
/**
* Alterna o estado de expansão de uma linha
* @param row - Linha a ser expandida/contraída
*/
toggleRow(row) {
if (row.children) {
row.isExpanded = !row.isExpanded;
if (row.isExpanded) {
setTimeout(() => this.alignChildHeaders());
}
}
}
/**
* Verifica se uma linha tem filhos
* @param row - Linha a ser verificada
* @returns true se a linha tem filhos, false caso contrário
*/
hasChildren(row) {
return !!row.children;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "wco-table", inputs: { data: "data", sortedItem: "sortedItem", headers: "headers", loading: "loading", templates: "templates" }, outputs: { handlerSortedBy: "handlerSortedBy" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wco-table-area\">\n <table class=\"wco-table\" role=\"table\" #table>\n <thead *ngIf=\"data && data.length > 0\">\n <tr>\n <th *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\"></th>\n <ng-container *ngFor=\"let header of headers\">\n <th *ngIf=\"!header.sortedBy\">\n {{ header.label }}\n </th>\n <th *ngIf=\"header.sortedBy\" (click)=\"onSortedBy(header)\">\n <div class=\"flex items-center cPointer\">\n <span>{{ header.label }}</span>\n <span class=\"material-icons-round text-primary-600 wco-order-icon\" [class.f-20]=\"!sortedItem || sortedItem && header.key != sortedItem.key\">\n {{\n sortedItem && header.key == sortedItem.key\n ? sortedItem.order === \"ASC\"\n ? \"north\"\n : sortedItem.order === \"DESC\"\n ? \"south\"\n : \"swap_vert\"\n : \"swap_vert\"\n }}\n </span>\n </div>\n </th>\n </ng-container>\n </tr>\n </thead>\n <ng-container *ngIf=\"!loading\">\n <tbody>\n <ng-container *ngFor=\"let row of data\">\n <tr [class.wco-table__row--empty]=\"!row\">\n <td *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\">\n <button class=\"wco-table-expand-button\" (click)=\"toggleRow(row)\" *ngIf=\"hasChildren(row)\">\n <span class=\"material-icons cPointer\">\n {{ row.isExpanded ? 'expand_less' : 'expand_more' }}\n </span>\n </button>\n </td>\n <td *ngFor=\"let header of headers\" [attr.data-label]=\"header.label\">\n <ng-container *ngIf=\"header.template\">\n <ng-container *ngTemplateOutlet=\"getTemplate(header.template); context: { $implicit: row[header.key], row: row }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!header.template\">\n {{ row[header.key] }}\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"row.children && row.isExpanded\" class=\"wco-table-children\">\n <td [attr.colspan]=\"headers.length + (hasExpandableRows ? 1 : 0)\">\n <div class=\"wco-table-children-content\">\n <table class=\"wco-table\">\n <thead class=\"wco-table-children-header\" [ngClass]=\"{'wco-table-children-header-hide': !row.children.showHeader}\">\n <tr>\n <th class=\"wco-table-expand-column\"></th>\n <th *ngFor=\"let header of row.children.header\">\n {{ header.label }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let childRow of row.children.data\">\n <td class=\"wco-table-expand-column\"></td>\n <td *ngFor=\"let header of row.children.header\" [attr.data-label]=\"header.label\">\n <ng-container *ngIf=\"header.template\">\n <ng-container *ngTemplateOutlet=\"getTemplate(header.template); context: { $implicit: childRow[header.key], row: childRow }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!header.template\">\n {{ childRow[header.key] }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </ng-container>\n <ng-container *ngIf=\"loading\">\n <tbody>\n <tr *ngFor=\"let row of [1, 2, 3, 4, 5]\">\n <td *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\"></td>\n <td *ngFor=\"let header of headers\" role=\"cell\">\n <div class=\"wco-skeleton mt-0\" style=\"width: 100%\">\n <span class=\"block p-xxs\"></span>\n </div>\n </td>\n </tr>\n </tbody>\n </ng-container>\n\n <ng-container *ngIf=\"!loading && !data.length\">\n <tbody>\n <tr class=\"wco-table__row--empty\">\n <td\n [attr.colspan]=\"headers.length + (hasExpandableRows ? 1 : 0)\"\n class=\"wco-table__cell--empty\"\n role=\"cell\"\n >\n <ng-content select=\".empty\"></ng-content>\n </td>\n </tr>\n </tbody>\n </ng-container>\n </table>\n</div>\n", styles: [":host{display:block;width:100%}.wco-table-area{--wco-table-margin: var(--wco-spacing-xxs);--wco-table-padding: var(--wco-spacing-xxxs);--wco-table-color-header-label: var(--wco-color-neutral-900);--wco-table-color-header-cell: var(--wco-color-neutral-700);--wco-table-color-header-line: var(--wco-color-neutral-500);--wco-table-color-bg-cell: var(--wco-color-neutral-50);--wco-table-font-size-header: var(--wco-font-size-xxs);--wco-table-font-size-cell: var(--wco-font-size-xxs);--wco-table-collapse-bg: var(--wco-color-neutral-100);--wco-table-collapse-border: var(--wco-color-neutral-200);--wco-table-collapse-icon-size-width: calc(var(--wco-font-size-xxxl) * 1.167);--wco-table-collapse-icon-size: var(--wco-font-size-lg);--wco-table-collapse-icon-color: var(--wco-color-primary-600);display:block;width:100%;max-width:var(--wco-table-max-size, 100%);overflow-x:auto;-webkit-overflow-scrolling:touch}.wco-table-area table.wco-table{width:100%;border-spacing:0}@media (min-width: 800px) and (max-width: 1400px){.wco-table-area table.wco-table{min-width:900px}}@media (min-width: 800px){.wco-table-area table.wco-table ::ng-deep tr:not(.wco-table__row--empty,.wco-table-children):hover{--wco-table-color-header-line: var(--wco-color-primary-500);--wco-table-color-header-cell: var(--wco-color-neutral-700);--wco-table-color-bg-cell: var(--wco-color-neutral-100)}}.wco-table-area table.wco-table ::ng-deep td{text-align:left;padding:var(--wco-table-padding);font-size:var(--wco-table-font-size-cell);line-height:var(--wco-font-lineheight-500);color:var(--wco-table-color-header-cell);border-bottom:1px solid var(--wco-table-color-header-line);background-color:var(--wco-table-color-bg-cell)}.wco-table-area table.wco-table ::ng-deep td.wco-table__cell--empty{--wco-table-color-header-line: transparent}.wco-table-area table.wco-table ::ng-deep thead tr{margin-bottom:var(--wco-table-margin)}.wco-table-area table.wco-table ::ng-deep thead tr th{text-align:left;font-size:var(--wco-table-font-size-header, 16px);color:var(--wco-table-color-header-label, var(--wco-color-neutral-900));padding:var(--wco-table-padding);font-weight:600}.wco-table-area table.wco-table .wco-table-expand-column{width:var(--wco-table-collapse-icon-size-width);color:var(--wco-color-primary-600);min-width:var(--wco-table-collapse-icon-size-width);max-width:var(--wco-table-collapse-icon-size-width);text-align:center;vertical-align:middle}.wco-table-area table.wco-table .wco-table-expand-column button.wco-table-expand-button{width:100%;height:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.wco-table-area table.wco-table .wco-table-expand-column button.wco-table-expand-button span{font-size:calc(var(--wco-table-collapse-icon-size));color:var(--wco-table-collapse-icon-color)}.wco-table-area table.wco-table .wco-table-children{padding:0;background-color:var(--wco-color-neutral-50);border-radius:var(--wco-border-radius-sm);margin:var(--wco-spacing-xxs) 0;--wco-table-color-bg-cell: var(--wco-table-collapse-bg);transition:all .3s ease-in-out}.wco-table-area table.wco-table .wco-table-children .wco-table-children-content{transform:translateY(0);transition:all .3s ease-in-out}@starting-style{.wco-table-area table.wco-table .wco-table-children .wco-table-children-content{transform:translateY(-5px);transform-origin:top;opacity:0}}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide{background-color:transparent!important;opacity:0;height:0;overflow:hidden;transition:all .3s ease-in-out}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide tr{margin:0}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide tr th{padding-top:0;padding-bottom:0;background-color:transparent;border:none;border-bottom:1px solid var(--wco-color-neutral-200);line-height:0}.wco-table-area table.wco-table .wco-table-children:hover{--wco-table-collapse-border: var(--wco-color-neutral-200)}.wco-table-area table.wco-table .wco-table-children>td{padding:0}.wco-table-area table.wco-table .wco-table-children table td,.wco-table-area table.wco-table .wco-table-children table th{background-color:#fff6}@media (max-width: 800px){.wco-table-area{--wco-table-padding: var(--wco-spacing-xxxs)}.wco-table-area table{background-color:transparent}.wco-table-area table th{display:none}.wco-table-area table tr{display:block;margin-bottom:12px;height:fit-content;border:1px solid var(--wco-color-bg)}.wco-table-area table tr>td{display:block;width:100%;border:1px solid var(--wco-color-neutral-100)}.wco-table-area table tr>td:first-child{background-color:var(--wco-color-bg)}.wco-table-area table tr>td:last-child{border:none}.wco-table-area table tr>td:not([data-label=\"\"]):before{content:attr(data-label) \": \";font-weight:700;margin-right:.5em;color:var(--wco-color-neutral-700)}.wco-table-area table tr>td:not([data-label]):before{content:\"\"}}.wco-table-area .wco-order-icon{display:flex;align-items:center;width:20px;height:20px;font-size:var(--wco-font-size-xxs)}.wco-table-area .cPointer{cursor:pointer;-webkit-user-select:none;user-select:none}.wco-table-area .f-20{font-size:var(--wco-font-size-md)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-table', standalone: true, imports: [CommonModule], template: "<div class=\"wco-table-area\">\n <table class=\"wco-table\" role=\"table\" #table>\n <thead *ngIf=\"data && data.length > 0\">\n <tr>\n <th *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\"></th>\n <ng-container *ngFor=\"let header of headers\">\n <th *ngIf=\"!header.sortedBy\">\n {{ header.label }}\n </th>\n <th *ngIf=\"header.sortedBy\" (click)=\"onSortedBy(header)\">\n <div class=\"flex items-center cPointer\">\n <span>{{ header.label }}</span>\n <span class=\"material-icons-round text-primary-600 wco-order-icon\" [class.f-20]=\"!sortedItem || sortedItem && header.key != sortedItem.key\">\n {{\n sortedItem && header.key == sortedItem.key\n ? sortedItem.order === \"ASC\"\n ? \"north\"\n : sortedItem.order === \"DESC\"\n ? \"south\"\n : \"swap_vert\"\n : \"swap_vert\"\n }}\n </span>\n </div>\n </th>\n </ng-container>\n </tr>\n </thead>\n <ng-container *ngIf=\"!loading\">\n <tbody>\n <ng-container *ngFor=\"let row of data\">\n <tr [class.wco-table__row--empty]=\"!row\">\n <td *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\">\n <button class=\"wco-table-expand-button\" (click)=\"toggleRow(row)\" *ngIf=\"hasChildren(row)\">\n <span class=\"material-icons cPointer\">\n {{ row.isExpanded ? 'expand_less' : 'expand_more' }}\n </span>\n </button>\n </td>\n <td *ngFor=\"let header of headers\" [attr.data-label]=\"header.label\">\n <ng-container *ngIf=\"header.template\">\n <ng-container *ngTemplateOutlet=\"getTemplate(header.template); context: { $implicit: row[header.key], row: row }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!header.template\">\n {{ row[header.key] }}\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"row.children && row.isExpanded\" class=\"wco-table-children\">\n <td [attr.colspan]=\"headers.length + (hasExpandableRows ? 1 : 0)\">\n <div class=\"wco-table-children-content\">\n <table class=\"wco-table\">\n <thead class=\"wco-table-children-header\" [ngClass]=\"{'wco-table-children-header-hide': !row.children.showHeader}\">\n <tr>\n <th class=\"wco-table-expand-column\"></th>\n <th *ngFor=\"let header of row.children.header\">\n {{ header.label }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let childRow of row.children.data\">\n <td class=\"wco-table-expand-column\"></td>\n <td *ngFor=\"let header of row.children.header\" [attr.data-label]=\"header.label\">\n <ng-container *ngIf=\"header.template\">\n <ng-container *ngTemplateOutlet=\"getTemplate(header.template); context: { $implicit: childRow[header.key], row: childRow }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!header.template\">\n {{ childRow[header.key] }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </ng-container>\n <ng-container *ngIf=\"loading\">\n <tbody>\n <tr *ngFor=\"let row of [1, 2, 3, 4, 5]\">\n <td *ngIf=\"hasExpandableRows\" class=\"wco-table-expand-column\"></td>\n <td *ngFor=\"let header of headers\" role=\"cell\">\n <div class=\"wco-skeleton mt-0\" style=\"width: 100%\">\n <span class=\"block p-xxs\"></span>\n </div>\n </td>\n </tr>\n </tbody>\n </ng-container>\n\n <ng-container *ngIf=\"!loading && !data.length\">\n <tbody>\n <tr class=\"wco-table__row--empty\">\n <td\n [attr.colspan]=\"headers.length + (hasExpandableRows ? 1 : 0)\"\n class=\"wco-table__cell--empty\"\n role=\"cell\"\n >\n <ng-content select=\".empty\"></ng-content>\n </td>\n </tr>\n </tbody>\n </ng-container>\n </table>\n</div>\n", styles: [":host{display:block;width:100%}.wco-table-area{--wco-table-margin: var(--wco-spacing-xxs);--wco-table-padding: var(--wco-spacing-xxxs);--wco-table-color-header-label: var(--wco-color-neutral-900);--wco-table-color-header-cell: var(--wco-color-neutral-700);--wco-table-color-header-line: var(--wco-color-neutral-500);--wco-table-color-bg-cell: var(--wco-color-neutral-50);--wco-table-font-size-header: var(--wco-font-size-xxs);--wco-table-font-size-cell: var(--wco-font-size-xxs);--wco-table-collapse-bg: var(--wco-color-neutral-100);--wco-table-collapse-border: var(--wco-color-neutral-200);--wco-table-collapse-icon-size-width: calc(var(--wco-font-size-xxxl) * 1.167);--wco-table-collapse-icon-size: var(--wco-font-size-lg);--wco-table-collapse-icon-color: var(--wco-color-primary-600);display:block;width:100%;max-width:var(--wco-table-max-size, 100%);overflow-x:auto;-webkit-overflow-scrolling:touch}.wco-table-area table.wco-table{width:100%;border-spacing:0}@media (min-width: 800px) and (max-width: 1400px){.wco-table-area table.wco-table{min-width:900px}}@media (min-width: 800px){.wco-table-area table.wco-table ::ng-deep tr:not(.wco-table__row--empty,.wco-table-children):hover{--wco-table-color-header-line: var(--wco-color-primary-500);--wco-table-color-header-cell: var(--wco-color-neutral-700);--wco-table-color-bg-cell: var(--wco-color-neutral-100)}}.wco-table-area table.wco-table ::ng-deep td{text-align:left;padding:var(--wco-table-padding);font-size:var(--wco-table-font-size-cell);line-height:var(--wco-font-lineheight-500);color:var(--wco-table-color-header-cell);border-bottom:1px solid var(--wco-table-color-header-line);background-color:var(--wco-table-color-bg-cell)}.wco-table-area table.wco-table ::ng-deep td.wco-table__cell--empty{--wco-table-color-header-line: transparent}.wco-table-area table.wco-table ::ng-deep thead tr{margin-bottom:var(--wco-table-margin)}.wco-table-area table.wco-table ::ng-deep thead tr th{text-align:left;font-size:var(--wco-table-font-size-header, 16px);color:var(--wco-table-color-header-label, var(--wco-color-neutral-900));padding:var(--wco-table-padding);font-weight:600}.wco-table-area table.wco-table .wco-table-expand-column{width:var(--wco-table-collapse-icon-size-width);color:var(--wco-color-primary-600);min-width:var(--wco-table-collapse-icon-size-width);max-width:var(--wco-table-collapse-icon-size-width);text-align:center;vertical-align:middle}.wco-table-area table.wco-table .wco-table-expand-column button.wco-table-expand-button{width:100%;height:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.wco-table-area table.wco-table .wco-table-expand-column button.wco-table-expand-button span{font-size:calc(var(--wco-table-collapse-icon-size));color:var(--wco-table-collapse-icon-color)}.wco-table-area table.wco-table .wco-table-children{padding:0;background-color:var(--wco-color-neutral-50);border-radius:var(--wco-border-radius-sm);margin:var(--wco-spacing-xxs) 0;--wco-table-color-bg-cell: var(--wco-table-collapse-bg);transition:all .3s ease-in-out}.wco-table-area table.wco-table .wco-table-children .wco-table-children-content{transform:translateY(0);transition:all .3s ease-in-out}@starting-style{.wco-table-area table.wco-table .wco-table-children .wco-table-children-content{transform:translateY(-5px);transform-origin:top;opacity:0}}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide{background-color:transparent!important;opacity:0;height:0;overflow:hidden;transition:all .3s ease-in-out}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide tr{margin:0}.wco-table-area table.wco-table .wco-table-children .wco-table-children-header.wco-table-children-header-hide tr th{padding-top:0;padding-bottom:0;background-color:transparent;border:none;border-bottom:1px solid var(--wco-color-neutral-200);line-height:0}.wco-table-area table.wco-table .wco-table-children:hover{--wco-table-collapse-border: var(--wco-color-neutral-200)}.wco-table-area table.wco-table .wco-table-children>td{padding:0}.wco-table-area table.wco-table .wco-table-children table td,.wco-table-area table.wco-table .wco-table-children table th{background-color:#fff6}@media (max-width: 800px){.wco-table-area{--wco-table-padding: var(--wco-spacing-xxxs)}.wco-table-area table{background-color:transparent}.wco-table-area table th{display:none}.wco-table-area table tr{display:block;margin-bottom:12px;height:fit-content;border:1px solid var(--wco-color-bg)}.wco-table-area table tr>td{display:block;width:100%;border:1px solid var(--wco-color-neutral-100)}.wco-table-area table tr>td:first-child{background-color:var(--wco-color-bg)}.wco-table-area table tr>td:last-child{border:none}.wco-table-area table tr>td:not([data-label=\"\"]):before{content:attr(data-label) \": \";font-weight:700;margin-right:.5em;color:var(--wco-color-neutral-700)}.wco-table-area table tr>td:not([data-label]):before{content:\"\"}}.wco-table-area .wco-order-icon{display:flex;align-items:center;width:20px;height:20px;font-size:var(--wco-font-size-xxs)}.wco-table-area .cPointer{cursor:pointer;-webkit-user-select:none;user-select:none}.wco-table-area .f-20{font-size:var(--wco-font-size-md)}\n"] }]
}], ctorParameters: () => [], propDecorators: { data: [{
type: Input
}], sortedItem: [{
type: Input
}], headers: [{
type: Input
}], loading: [{
type: Input
}], templates: [{
type: Input
}], handlerSortedBy: [{
type: Output
}], tableRef: [{
type: ViewChild,
args: ['table']
}] } });
/*
* Public API Surface of ngx-fenixds
*/
/**
* Generated bundle index. Do not edit.
*/
export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
//# sourceMappingURL=wizco-fenixds-ngx.mjs.map