@wizco/fenixds-ngx
Version:
Componentes fenix design system para Angular.
3,359 lines • 334 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, ContentChildren, ViewChild, HostListener, SkipSelf, ChangeDetectionStrategy, forwardRef, signal, inject, ApplicationRef, EnvironmentInjector, createComponent, Injectable } from '@angular/core';
import * as i1$1 from '@angular/common/http';
import { HttpEventType, HttpClientModule } from '@angular/common/http';
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\" class=\"display-text\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .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}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .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\" class=\"display-text\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .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}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .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}.stepper-group__wrapper wco-step{background-color:red!important}\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"] }], encapsulation: i0.ViewEncapsulation.None });
}
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], encapsulation: ViewEncapsulation.None, 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}.stepper-group__wrapper wco-step{background-color:red!important}\n"] }]
}], ctorParameters: () => [], propDecorators: { isVertical: [{
type: Input
}], stepperArray: [{
type: Input
}], stepperSelected: [{
type: Output
}] } });
class StepperGroupComponent {
steps;
scrollContainer;
stepsWrapper;
/**
* Tamanho do stepper group
* 'fit' - ajusta ao conteúdo
* 'full' - ocupa toda a largura disponível
*/
size = 'full';
/**
* Modo de exibição
* 'default' - modo padrão
* 'mini' - modo compacto (mobile)
*/
mode = 'mini';
/**
* Orientação dos steps
* 'horizontal' - orientação horizontal (padrão)
* 'vertical' - orientação vertical
*/
orientation = 'horizontal';
/**
* Número do step atual (começa em 1, não 0)
*/
current = 1;
hasHorizontalScroll = false;
canScrollLeft = false;
canScrollRight = false;
isHorizontal = false;
isMiniResponsive = false;
get totalSteps() {
return this.steps?.length || 0;
}
isCurrentStep(index) {
return index === (this.current - 1);
}
ngOnChanges(changes) {
if (changes['current'] && !changes['current'].firstChange) {
setTimeout(() => {
this.scrollToCurrent();
}, 0);
}
if (changes['orientation'] && !changes['orientation'].firstChange) {
setTimeout(() => {
this.updateSteps();
}, 0);
}
if (changes['mode'] || changes['current']) {
this.checkMiniResponsive();
if (this.isMiniResponsive) {
setTimeout(() => {
this.updateStepsVisibility();
}, 0);
}
}
}
ngAfterContentInit() {
if (this.steps) {
this.steps.changes.subscribe(() => {
this.updateSteps();
});
this.updateSteps();
}
}
ngAfterViewInit() {
this.checkMiniResponsive();
this.updateStepsVisibility();
setTimeout(() => {
this.checkScroll();
if (this.current > 0) {
this.scrollToCurrent();
}
}, 0);
}
updateStepsVisibility() {
if (!this.steps || this.steps.length === 0)
return;
if (this.isMiniResponsive) {
setTimeout(() => {
const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
if (stepElements) {
Array.from(stepElements).forEach((stepEl, index) => {
const htmlElement = stepEl;
const isCurrent = index === (this.current - 1);
if (isCurrent) {
htmlElement.style.display = '';
htmlElement.classList.add('stepper-group__step--current');
}
else {
htmlElement.style.display = 'none';
}
});
}
}, 0);
}
else {
setTimeout(() => {
const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
if (stepElements) {
Array.from(stepElements).forEach((stepEl) => {
const htmlElement = stepEl;
htmlElement.style.display = '';
htmlElement.classList.remove('stepper-group__step--current');
});
}
}, 0);
}
}
ngOnDestroy() {
}
onResize() {
this.checkMiniResponsive();
}
checkMiniResponsive() {
if (typeof window !== 'undefined') {
const wasMiniResponsive = this.isMiniResponsive;
this.isMiniResponsive = this.mode === 'mini' && window.innerWidth < 600;
if (wasMiniResponsive !== this.isMiniResponsive) {
this.updateSteps();
this.updateStepsVisibility();
}
}
}
updateSteps() {
if (!this.steps || this.steps.length === 0)
return;
this.steps.forEach((step, index) => {
const isFirst = index === 0;
const isLast = index === this.steps.length - 1;
const isCurrent = index === (this.current - 1);
if (this.orientation === 'vertical') {
step.isVertical = true;
step.lineStart = true;
step.lineEnd = true;
}
else {
step.isVertical = false;
step.lineStart = !isFirst;
step.lineEnd = !isLast;
}
if (this.mode === 'mini') {
step.size = 'small';
}
// Em modo mini responsivo, configurar steps para mostrar apenas o atual
if (this.isMiniResponsive) {
step.lineStart = false;
step.lineEnd = false;
}
});
this.isHorizontal = this.orientation === 'horizontal';
if (this.isHorizontal && !this.isMiniResponsive) {
setTimeout(() => {
this.checkScroll();
if (this.current > 0) {
this.scrollToCurrent();
}
}, 0);
}
}
scrollHandler = () => this.updateArrowVisibility();
checkScroll() {
if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement) {
return;
}
const container = this.scrollContainer.nativeElement;
const wrapper = this.stepsWrapper.nativeElement;
const gapMargin = 8; // Respiro para não adicionar scroll sem necessidade;
this.hasHorizontalScroll =
(wrapper.scrollWidth - gapMargin) > container.clientWidth;
if (this.hasHorizontalScroll) {
this.updateArrowVisibility();
container.removeEventListener('scroll', this.scrollHandler);
container.addEventListener('scroll', this.scrollHandler);
}
else {
this.canScrollLeft = false;
this.canScrollRight = false;
container.removeEventListener('scroll', this.scrollHandler);
}
}
updateArrowVisibility() {
if (!this.scrollContainer?.nativeElement)
return;
const container = this.scrollContainer.nativeElement;
const scrollLeft = container.scrollLeft;
const scrollWidth = container.scrollWidth;
const clientWidth = container.clientWidth;
this.canScrollLeft = scrollLeft > 0;
this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
}
scrollToCurrent() {
if (!this.scrollContainer?.nativeElement || !this.steps || this.current < 1) {
return;
}
const stepIndex = this.current - 1;
if (stepIndex < 0 || stepIndex >= this.steps.length)
return;
setTimeout(() => {
if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement)
return;
const container = this.scrollContainer.nativeElement;
const wrapper = this.stepsWrapper.nativeElement;
const stepElements = wrapper.querySelectorAll('wco-step');
if (stepIndex >= stepElements.length)
return;
const stepElement = stepElements[stepIndex];
if (!stepElement)
return;
const stepRect = stepElement.getBoundingClientRect();
const wrapperRect = wrapper.getBoundingClientRect();
if (stepRect.width === 0 || stepRect.height === 0) {
setTimeout(() => this.scrollToCurrent(), 50);
return;
}
const stepLeftRelativeToWrapper = stepRect.left - wrapperRect.left + container.scrollLeft;
const stepCenter = stepLeftRelativeToWrapper + (stepRect.width / 2);
const containerCenter = container.clientWidth / 2;
const targetScrollLeft = stepCenter - containerCenter;
const maxScrollLeft = container.scrollWidth - container.clientWidth;
const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
container.scrollTo({
left: finalScrollLeft,
behavior: 'smooth',
});
setTimeout(() => {
this.updateArrowVisibility();
}, 300);
}, 150);
}
scrollLeft() {
if (!this.scrollContainer?.nativeElement || !this.canScrollLeft)
return;
const container = this.scrollContainer.nativeElement;
const scrollAmount = container.clientWidth * 0.8;
container.scrollBy({
left: -scrollAmount,
behavior: 'smooth',
});
}
scrollRight() {
if (!this.scrollContainer?.nativeElement || !this.canScrollRight)
return;
const container = this.scrollContainer.nativeElement;
const scrollAmount = container.clientWidth * 0.8;
container.scrollBy({
left: scrollAmount,
behavior: 'smooth',
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperGroupComponent, isStandalone: true, selector: "wco-stepper-group", inputs: { size: "size", mode: "mode", orientation: "orientation", current: "current" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "steps", predicate: StepComponent }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "stepsWrapper", first: true, predicate: ["stepsWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"stepper-group\"\n [ngClass]=\"{\n 'stepper-group--fit': size === 'fit',\n 'stepper-group--full': size === 'full',\n 'stepper-group--mini': mode === 'mini',\n 'stepper-group--default': mode === 'default',\n 'stepper-group--horizontal': orientation === 'horizontal',\n 'stepper-group--vertical': orientation === 'vertical',\n 'stepper-group--mini-responsive': isMiniResponsive\n }\"\n>\n <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollLeft()\"\n [disabled]=\"!canScrollLeft\"\n [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n aria-label=\"Voltar\"\n >\n <span class=\"material-icons\">chevron_left</span>\n </button>\n\n <div #scrollContainer class=\"stepper-group__container\">\n <div #stepsWrapper class=\"stepper-group__wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollRight()\"\n [disabled]=\"!canScrollRight\"\n [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n aria-label=\"Avan\u00E7ar\"\n >\n <span class=\"material-icons\">chevron_right</span>\n </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:flex-start;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content;margin-top:var(--wco-spacing-quark, 8px)}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-quark, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-quark, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper{--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}@media (max-width: 768px){.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal .step__content{grid-column:2/3}\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: StepperGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-stepper-group', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"stepper-group\"\n [ngClass]=\"{\n 'stepper-group--fit': size === 'fit',\n 'stepper-group--full': size === 'full',\n 'stepper-group--mini': mode === 'mini',\n 'stepper-group--default': mode === 'default',\n 'stepper-group--horizontal': orientation === 'horizontal',\n 'stepper-group--vertical': orientation === 'vertical',\n 'stepper-group--mini-responsive': isMiniResponsive\n }\"\n>\n <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollLeft()\"\n [disabled]=\"!canScrollLeft\"\n [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n aria-label=\"Voltar\"\n >\n <span class=\"material-icons\">chevron_left</span>\n </button>\n\n <div #scrollContainer class=\"stepper-group__container\">\n <div #stepsWrapper class=\"stepper-group__wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollRight()\"\n [disabled]=\"!canScrollRight\"\n [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n aria-label=\"Avan\u00E7ar\"\n >\n <span class=\"material-icons\">chevron_right</span>\n </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:flex-start;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content;margin-top:var(--wco-spacing-quark, 8px)}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-quark, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-quark, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper{--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}@media (max-width: 768px){.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child:nth-last-child(-n+2) .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child:nth-last-child(-n+2) .step.step--horizontal .step__content{grid-column:2/3}\n"] }]
}], propDecorators: { steps: [{
type: ContentChildren,
args: [StepComponent]
}], scrollContainer: [{
type: ViewChild,
args: ['scrollContainer', { static: false }]
}], stepsWrapper: [{
type: ViewChild,
args: ['stepsWrapper', { static: false }]
}], size: [{
type: Input
}], mode: [{
type: Input
}], orientation: [{
type: Input
}], current: [{
type: Input
}], onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}] } });
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;
/*
* Texto do botão
* @param {string} textButton
*/
textButton;
/*
* Evento emitido ao fechar o componente
* @param {EventEmitter<any>}
*/
onClose = new EventEmitter();
/*
* Evento emitido ao clicar no botão
* @param {EventEmitter<any>}
*/
clickButton = new EventEmitter();
constructor() { }
close() {
this.onClose.emit(true);
}
handleClickButton() {
this.clickButton.emit(true);
}
get hasButton() {
return !!this.textButton && this.clickButton.observers.length > 0;
}
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", textButton: "textButton" }, outputs: { onClose: "onClose", clickButton: "clickButton" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n <ng-content></ng-content>\n <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n <button \n class=\"btn btn-sm btn-link btn-primary\"\n (click)=\"handleClickButton()\"\n type=\"button\">\n {{ textButton }}\n </button>\n </div>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
}
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, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n <ng-content></ng-content>\n <div class=\"flex gap-xxs justify-end mt-xs\" *ngIf=\"hasButton\">\n <button \n class=\"btn btn-sm btn-link btn-primary\"\n (click)=\"handleClickButton()\"\n type=\"button\">\n {{ textButton }}\n </button>\n </div>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-md);border:2px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
}], ctorParameters: () => [], propDecorators: { shadow: [{
type: Input
}], mode: [{
type: Input
}], title: [{
type: Input
}], message: [{
type: Input
}], type: [{
type: Input
}], hideClose: [{
type: Input
}], textButton: [{
type: Input
}], onClose: [{
type: Output
}], clickButton: [{
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 line 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-' + line.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + line.status\"> {{ statusToIcon[line.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\">\n <div class=\"wco-timeline-item-content-container\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + line.status\"> {{ line.title }} </h4>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + line.status\"> {{ line.date }} </span>\n </div>\n <p *ngIf=\"line.descriptionPre?.text\" [className]=\"line.descriptionPre?.customClass\"> {{ line.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + line.status\"> {{ line.description }} </p>\n <p *ngIf=\"line.descriptionPos?.text\" [className]=\"line.descriptionPos?.customClass\"> {{ line.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link btn-md\" *ngIf=\"line.action?.label\" (click)=\"line.action?.handler()\" [disabled]=\"line.status === 'waiting'\"> {{line.action?.label}} </button>\n <div class=\"mt-xxxs\" *ngFor=\"let item of line.itens\">\n <p *ngIf=\"item.title\" [className]=\"'wco-timeline-item-content-sub-title ' + item.customClassTitle\"> {{ item.title }} </p>\n <p *ngIf=\"item.description\" [className]=\"'wco-timeline-item-content-sub-description ' + item.customClassDescription\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link btn-md\" *ngIf=\"item.action?.label\" (click)=\"item.action?.handler()\"> {{item.action?.label}} </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.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:1;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:flex;gap:2rem}.wco-timeline .wco-timeline-item-content-title{flex:1;letter-spacing:.45px;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{letter-spacing:.4px;font-size:var(--wco-font-size-xs);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 .wco-timeline-item-content-description-waiting,.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-sub-title{color:var(--wco-color-neutral-900, #080809);font-size:16px;font-weight:700;letter-spacing:.4px}.wco-timeline .wco-timeline-item-content-sub-description{color:var(--wco-color-neutral-700, #50555A);letter-spacing:.4px}.wco-timeline .wco-timeline-item-content-date{text-align:right;font-size:.85rem;letter-spacing:.35px;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 line 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-' + line.status\">\n <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + line.status\"> {{ statusToIcon[line.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\">\n <div class=\"wco-timeline-item-content-container\">\n <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + line.status\"> {{ line.title }} </h4>\n <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + line.status\"> {{ line.date }} </span>\n </div>\n <p *ngIf=\"line.descriptionPre?.text\" [className]=\"line.descriptionPre?.customClass\"> {{ line.descriptionPre?.text }} </p>\n <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + line.status\"> {{ line.description }} </p>\n <p *ngIf=\"line.descriptionPos?.text\" [className]=\"line.descriptionPos?.customClass\"> {{ line.descriptionPos?.text }} </p>\n <button class=\"wco-btn btn-primary btn-link btn-md\" *ngIf=\"line.action?.label\" (click)=\"line.action?.handler()\" [disabled]=\"line.status === 'waiting'\"> {{line.action?.label}} </button>\n <div class=\"mt-xxxs\" *ngFor=\"let item of line.itens\">\n <p *ngIf=\"item.title\" [className]=\"'wco-timeline-item-content-sub-title ' + item.customClassTitle\"> {{ item.title }} </p>\n <p *ngIf=\"item.description\" [className]=\"'wco-timeline-item-content-sub-description ' + item.customClassDescription\"> {{ item.description }} </p>\n <button class=\"wco-btn btn-primary btn-link btn-md\" *ngIf=\"item.action?.label\" (click)=\"item.action?.handler()\"> {{item.action?.label}} </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.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:1;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:flex;gap:2rem}.wco-timeline .wco-timeline-item-content-title{flex:1;letter-spacing:.45px;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{letter-spacing:.4px;font-size:var(--wco-font-size-xs);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 .wco-timeline-item-content-description-waiting,.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-sub-title{color:var(--wco-color-neutral-900, #080809);font-size:16px;font-weight:700;letter-spacing:.4px}.wco-timeline .wco-timeline-item-content-sub-description{color:var(--wco-color-neutral-700, #50555A);letter-spacing:.4px}.wco-timeline .wco-timeline-item-content-date{text-align:right;font-size:.85rem;letter-spacing:.35px;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;
/* Controle de exibição do modal de visualização */
showDialog = false;
/* 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;
}
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() {
if (!this.previewFileElement?.nativeElement) {
return;
}
const previewFileElement = this.previewFileElement.nativeElement;
const cardPosition = previewFileElement.getElementsByClassName('wco-previewFile--thumbl')[0];
if (!cardPosition) {
return;
}
this.ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const { x, y } = cardPosition.getBoundingClientRect();
this.y.set(y + 'px');
this.x.set(x + 'px');
});
});
});
}
actionEvent(action) {
// Caso o usuário clique no botão de visualização, abre o modal de visualização
if (action === 'view' && this.typeFileFormat() !== 'file' && this.preview) {
this.modalPreview();
}
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.showDialog = true;
this.positionThumbnail();
const modal = document.getElementById(this.id);
modal?.showModal();
}
closeDialog() {
const modal = document.getElementById(this.id);
modal?.close();
setTimeout(() => {
this.showDialog = false;
}, 500);
}
///////////////////////////////////
/// 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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (click)=\"actionEvent('download')\" class=\"wco-previewFile--buttonIcon\"\n role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">file_download</span>\n </button>\n </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (click)=\"actionEvent('delete')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">delete</span>\n </button>\n </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"customContent\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"preview && x() && y()\">\n <dialog [id]=\"id\" [ngStyle]=\"{'--dialog-x': x(), '--dialog-y': y()}\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"wco-dialog-wrapper\">\n <div class=\"dialog-content\">\n <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\n </div>\n <div class=\"w-full flex justify-center my-xxs\">\n <button (click)=\"closeDialog()\" class=\"wco-btn btn-primary btn-sm\" role=\"button\" tabindex=\"0\">Fechar</button>\n </div>\n </div>\n </dialog>\n</ng-container>", styles: [":host{display:block;container-type:inline-size;width:100%}.wco-previewFile{--wco-previewFile-text-color: var(--wco-color-neutral-700, #4A4A4A);--wco-previewFile-bg: var(--wco-color-neutral-50, #F9F9F9);--wco-previewFile-title-align: center;--wco-previewFile-border-color: var(--wco-color-neutral-500, #E0E0E0);width:100%;display:grid;grid-template-columns:minmax(auto,300px) 1fr;align-items:center;min-height:64px;gap:var(--wco-spacing-xxs, 16px)}.wco-previewFile>h4{grid-column:span 2}@container (width < 600px){.wco-previewFile{gap:var(--wco-spacing-sm, 16px)}.wco-previewFile h4{text-align:center}}.wco-previewFile.wco-previewFile-typebox{border:1px solid var(--wco-previewFile-border-color);background-color:var(--wco-previewFile-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-xxs, 16px)}.wco-previewFile:has(.wco-previewFile__action--status>div p){--wco-previewFile-title-align: flex-start}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--status{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--buttons{width:100%;justify-content:flex-end}.wco-previewFile:has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action--buttons{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile--thumbl{grid-column:span 2}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action{display:none}.wco-previewFile--thumbl{display:flex;align-items:var(--wco-previewFile-title-align);height:100%;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile--thumbl{grid-column:span 2}}.wco-previewFile--thumbl.type-file-image,.wco-previewFile--thumbl.type-file-pdf{cursor:pointer}.wco-previewFile--thumbl.type-file-image h5,.wco-previewFile--thumbl.type-file-pdf h5{text-decoration:underline;cursor:pointer}.wco-previewFile--thumbl.type-file-image h5:hover,.wco-previewFile--thumbl.type-file-pdf h5:hover{color:var(--wco-color-info-600)}.wco-previewFile--thumbl .wco-previewFile-preview{display:flex;align-items:center;color:var(--wco-color-neutral-900)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img){width:64px;height:64px;overflow:hidden;border-radius:var(--wco-radius-md);background-color:var(--wco-color-neutral-700);padding:var(--wco-spacing-quark)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img) img{width:100%;height:100%;object-fit:contain}.wco-previewFile__action{display:flex;justify-content:space-between;align-items:center;gap:var(--wco-spacing-sm, 16px);flex-wrap:wrap}@container (width < 600px){.wco-previewFile__action{grid-column:span 2;flex-direction:column;flex-wrap:wrap}}.wco-previewFile__action--status{display:flex;flex-direction:column;gap:var(--wco-spacing-xxxs, 8px)}.wco-previewFile__action--status>div:empty{display:none}@container (width < 600px){.wco-previewFile__action--status .wco-tag{width:100%}}.wco-previewFile__action--status h6,.wco-previewFile__action--status p{font-size:var(--wco-font-size-xs, 16px);color:var(--wco-previewFile-text-color);display:inline-flex}.wco-previewFile__action--status h6~p{margin-left:var(--wco-spacing-quark, 8px)}.wco-previewFile__action--buttons{display:flex;gap:var(--wco-spacing-xxs, 16px)}@container (width < 600px){.wco-previewFile__action--buttons{gap:var(--wco-spacing-xxxs, 12px);flex-wrap:wrap;flex-direction:column;width:100%;justify-content:center;align-items:center}.wco-previewFile__action--buttons button{width:100%;max-width:300px}}.wco-previewFile__action--buttonsIcon{display:flex;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile__action--buttonsIcon{gap:var(--wco-spacing-xxs, 8px)}}.wco-previewFile__action--buttonsIcon button{background:none;border:none;cursor:pointer;padding:var(--wco-spacing-nano, 8px);color:var(--wco-color-primary-600);display:flex;align-items:center;gap:var(--wco-spacing-nano, 8px)}.wco-previewFile__action--buttonsIcon button:hover{color:var(--wco-color-primary-700)}.wco-previewFile h5{font-size:var(--wco-font-size-sm, 18px);font-weight:400;line-height:var(--wco-font-lineheight-500, 150%);letter-spacing:.45px;color:var(--wco-previewFile-text-color);white-space:normal;text-wrap:pretty;width:100%}@container (width < 600px){.wco-previewFile h5{font-size:var(--wco-font-size-xxs, 16px)}}::ng-deep wco-preview-file~wco-preview-file{margin-top:var(--wco-spacing-xs, 16px)}.dialog-content{width:100%;display:flex;align-items:center;justify-content:center}.dialog-content:has(img){max-width:80vw;max-height:80vh}.dialog-content:has(img) img{max-width:100%;max-height:inherit}.dialog-content:has(iframe){width:90vw;height:70vh}.dialog-content:has(iframe) iframe{width:100%;height:100%}dialog{transition:opacity .7s ease-in-out,transform .7s ease-in-out,overlay .4s ease-in-out allow-discrete,display .4s ease-in-out allow-discrete}dialog:not(open)>div{border-radius:var(--wco-radius-sm);padding:10px;background-color:var(--wco-color-neutral-50);box-shadow:var(--wco-shadow-level-2);position:fixed;transform-origin:top left;transition:all .3s ease-in-out;opacity:0;top:var(--dialog-y);left:var(--dialog-x);transform:scale(.2)}@media screen and (max-width: 768px){dialog:not(open)>div{min-width:90vw}}dialog[open],dialog:open{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div.wco-dialog-wrapper,dialog:open>div.wco-dialog-wrapper{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open],dialog:open{max-width:80vw}}@starting-style{dialog[open],dialog:open{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop,dialog:open::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop,dialog:open::backdrop{background-color:#0000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
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 <span *ngIf=\"actions.includes('download')\" data-tooltip=\"Download\" data-flow=\"top\">\n <button (click)=\"actionEvent('download')\" class=\"wco-previewFile--buttonIcon\"\n role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">file_download</span>\n </button>\n </span>\n <span *ngIf=\"actions.includes('delete')\" data-tooltip=\"Excluir\" data-flow=\"top\">\n <button (click)=\"actionEvent('delete')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">delete</span>\n </button>\n </span>\n <span *ngIf=\"actions.includes('view')\" data-tooltip=\"Visualizar\" data-flow=\"top\">\n <button (click)=\"actionEvent('view')\"\n class=\"wco-previewFile__action--buttonIcon\" role=\"button\" tabindex=\"0\">\n <span class=\"material-icons-outlined\" role=\"presentation\">visibility</span>\n </button>\n </span>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"customContent\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"preview && x() && y()\">\n <dialog [id]=\"id\" [ngStyle]=\"{'--dialog-x': x(), '--dialog-y': y()}\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"wco-dialog-wrapper\">\n <div class=\"dialog-content\">\n <img *ngIf=\"typeFileFormat() === 'image'\" [src]=\"url\" alt=\"Imagem do documento\" loading=\"lazy\" role=\"img\">\n <ng-container *ngIf=\"showDialog\"> \n <video *ngIf=\"typeFileFormat() === 'video'\" autoplay [src]=\"url\" controls role=\"video\"></video>\n <iframe *ngIf=\"typeFileFormat() === 'pdf'\" [src]=\"transformPDFSecurity(url)\" role=\"document\"></iframe>\n </ng-container>\n </div>\n <div class=\"w-full flex justify-center my-xxs\">\n <button (click)=\"closeDialog()\" class=\"wco-btn btn-primary btn-sm\" role=\"button\" tabindex=\"0\">Fechar</button>\n </div>\n </div>\n </dialog>\n</ng-container>", styles: [":host{display:block;container-type:inline-size;width:100%}.wco-previewFile{--wco-previewFile-text-color: var(--wco-color-neutral-700, #4A4A4A);--wco-previewFile-bg: var(--wco-color-neutral-50, #F9F9F9);--wco-previewFile-title-align: center;--wco-previewFile-border-color: var(--wco-color-neutral-500, #E0E0E0);width:100%;display:grid;grid-template-columns:minmax(auto,300px) 1fr;align-items:center;min-height:64px;gap:var(--wco-spacing-xxs, 16px)}.wco-previewFile>h4{grid-column:span 2}@container (width < 600px){.wco-previewFile{gap:var(--wco-spacing-sm, 16px)}.wco-previewFile h4{text-align:center}}.wco-previewFile.wco-previewFile-typebox{border:1px solid var(--wco-previewFile-border-color);background-color:var(--wco-previewFile-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-xxs, 16px)}.wco-previewFile:has(.wco-previewFile__action--status>div p){--wco-previewFile-title-align: flex-start}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--status{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty) .wco-previewFile__action--buttons{width:100%;justify-content:flex-end}.wco-previewFile:has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action--buttons{display:none}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile--thumbl{grid-column:span 2}.wco-previewFile:has(.wco-previewFile__action--status:empty):has(.wco-previewFile__action--buttons:empty) .wco-previewFile__action{display:none}.wco-previewFile--thumbl{display:flex;align-items:var(--wco-previewFile-title-align);height:100%;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile--thumbl{grid-column:span 2}}.wco-previewFile--thumbl.type-file-image,.wco-previewFile--thumbl.type-file-pdf{cursor:pointer}.wco-previewFile--thumbl.type-file-image h5,.wco-previewFile--thumbl.type-file-pdf h5{text-decoration:underline;cursor:pointer}.wco-previewFile--thumbl.type-file-image h5:hover,.wco-previewFile--thumbl.type-file-pdf h5:hover{color:var(--wco-color-info-600)}.wco-previewFile--thumbl .wco-previewFile-preview{display:flex;align-items:center;color:var(--wco-color-neutral-900)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img){width:64px;height:64px;overflow:hidden;border-radius:var(--wco-radius-md);background-color:var(--wco-color-neutral-700);padding:var(--wco-spacing-quark)}.wco-previewFile--thumbl .wco-previewFile-preview:has(img) img{width:100%;height:100%;object-fit:contain}.wco-previewFile__action{display:flex;justify-content:space-between;align-items:center;gap:var(--wco-spacing-sm, 16px);flex-wrap:wrap}@container (width < 600px){.wco-previewFile__action{grid-column:span 2;flex-direction:column;flex-wrap:wrap}}.wco-previewFile__action--status{display:flex;flex-direction:column;gap:var(--wco-spacing-xxxs, 8px)}.wco-previewFile__action--status>div:empty{display:none}@container (width < 600px){.wco-previewFile__action--status .wco-tag{width:100%}}.wco-previewFile__action--status h6,.wco-previewFile__action--status p{font-size:var(--wco-font-size-xs, 16px);color:var(--wco-previewFile-text-color);display:inline-flex}.wco-previewFile__action--status h6~p{margin-left:var(--wco-spacing-quark, 8px)}.wco-previewFile__action--buttons{display:flex;gap:var(--wco-spacing-xxs, 16px)}@container (width < 600px){.wco-previewFile__action--buttons{gap:var(--wco-spacing-xxxs, 12px);flex-wrap:wrap;flex-direction:column;width:100%;justify-content:center;align-items:center}.wco-previewFile__action--buttons button{width:100%;max-width:300px}}.wco-previewFile__action--buttonsIcon{display:flex;gap:var(--wco-spacing-nano, 8px)}@container (width < 600px){.wco-previewFile__action--buttonsIcon{gap:var(--wco-spacing-xxs, 8px)}}.wco-previewFile__action--buttonsIcon button{background:none;border:none;cursor:pointer;padding:var(--wco-spacing-nano, 8px);color:var(--wco-color-primary-600);display:flex;align-items:center;gap:var(--wco-spacing-nano, 8px)}.wco-previewFile__action--buttonsIcon button:hover{color:var(--wco-color-primary-700)}.wco-previewFile h5{font-size:var(--wco-font-size-sm, 18px);font-weight:400;line-height:var(--wco-font-lineheight-500, 150%);letter-spacing:.45px;color:var(--wco-previewFile-text-color);white-space:normal;text-wrap:pretty;width:100%}@container (width < 600px){.wco-previewFile h5{font-size:var(--wco-font-size-xxs, 16px)}}::ng-deep wco-preview-file~wco-preview-file{margin-top:var(--wco-spacing-xs, 16px)}.dialog-content{width:100%;display:flex;align-items:center;justify-content:center}.dialog-content:has(img){max-width:80vw;max-height:80vh}.dialog-content:has(img) img{max-width:100%;max-height:inherit}.dialog-content:has(iframe){width:90vw;height:70vh}.dialog-content:has(iframe) iframe{width:100%;height:100%}dialog{transition:opacity .7s ease-in-out,transform .7s ease-in-out,overlay .4s ease-in-out allow-discrete,display .4s ease-in-out allow-discrete}dialog:not(open)>div{border-radius:var(--wco-radius-sm);padding:10px;background-color:var(--wco-color-neutral-50);box-shadow:var(--wco-shadow-level-2);position:fixed;transform-origin:top left;transition:all .3s ease-in-out;opacity:0;top:var(--dialog-y);left:var(--dialog-x);transform:scale(.2)}@media screen and (max-width: 768px){dialog:not(open)>div{min-width:90vw}}dialog[open],dialog:open{opacity:1;background-color:transparent;box-shadow:none}dialog[open]>div.wco-dialog-wrapper,dialog:open>div.wco-dialog-wrapper{transform:translateY(-50%) translate(-50%) scale(1);top:50%;left:50%;opacity:1}@media (max-width: 768px){dialog[open],dialog:open{max-width:80vw}}@starting-style{dialog[open],dialog:open{opacity:0}}dialog::backdrop{background-color:#0000;transition:display .1s allow-discrete,overlay .1s allow-discrete,background-color .1s}dialog[open]::backdrop,dialog:open::backdrop{background-color:#00000059}@starting-style{dialog[open]::backdrop,dialog:open::backdrop{background-color:#0000}}\n"] }]
}], 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']
}] } });
class WcoToastComponent {
sanitizer;
position = 'bottom-right';
configManual;
toasts = [];
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
ngOnInit() { }
ngOnDestroy() {
this.toasts.forEach((t) => {
if (t.timer)
clearTimeout(t.timer);
});
}
add(config) {
const id = 'wco-toast-' + Math.random().toString(36).substring(7);
const duration = config.duration ?? 4000;
const item = {
id,
config: { showIcon: true, type: 'info', ...config },
visible: true,
};
this.toasts.push(item);
setTimeout(() => {
const el = document.getElementById(id);
if (el && el.offsetHeight > 55)
item.tall = true;
}, 50);
if (duration > 0) {
item.timer = setTimeout(() => this.dismiss(id), duration);
}
return id;
}
dismiss(id) {
const item = this.toasts.find((t) => t.id === id);
if (!item)
return;
if (item.timer)
clearTimeout(item.timer);
item.visible = false;
setTimeout(() => {
this.toasts = this.toasts.filter((t) => t.id !== id);
}, 300);
}
getSafeHtml(value) {
return this.sanitizer.bypassSecurityTrustHtml(value || '');
}
getIconMaterial(config) {
switch (config.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: 'autorenew', color: 'loading' };
default:
return { icon: 'info', color: 'info' };
}
}
getButtonClass(action) {
const extraClasse = action.extraClasse ?? 'wco-btn btn-sm btn-outline btn-link wco-toast-btn';
return `${extraClasse}`.trim();
}
trackById(_, item) {
return item.id;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoToastComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WcoToastComponent, isStandalone: true, selector: "wco-toast", inputs: { position: "position", configManual: "configManual", toasts: "toasts" }, ngImport: i0, template: "<dialog open class=\"wco-toast-container\" [class]=\"'wco-toast-container--' + position\">\n <span class=\"wco-toast__hover-zone\"></span>\n <div\n *ngFor=\"let toast of toasts; trackBy: trackById;let i = index\"\n class=\"wco-toast\"\n [id]=\"toast.id\"\n [class.wco-toast--visible]=\"toast.visible\"\n [class.wco-toast--start]=\"toast.tall\"\n [attr.data-position]=\"i\"\n [class]=\"'wco-toast wco-toast--mini wco-toast--' + getIconMaterial(toast.config).color + (toast.visible ? ' wco-toast--visible' : '')\"\n >\n <div class=\"wco-toast__body\">\n <ng-container *ngIf=\"toast.config.showIcon\">\n <span class=\"wco-toast__icon material-icons-round\">\n <ng-container *ngIf=\"toast.config.materialIcon; else defaultIcon\">\n {{ toast.config.materialIcon }}\n </ng-container>\n <ng-template #defaultIcon>\n {{ getIconMaterial(toast.config).icon }}\n </ng-template>\n </span>\n </ng-container>\n\n <div class=\"wco-toast__content\">\n <span>\n <p class=\"wco-toast__title\" *ngIf=\"toast.config.title\" [innerHTML]=\"getSafeHtml(toast.config.title)\"></p>\n <p class=\"wco-toast__message\" *ngIf=\"toast.config.message && toast.config.message.length \" [innerHTML]=\"getSafeHtml(toast.config.message)\"></p>\n </span>\n <div class=\"wco-toast__actions\" *ngIf=\"toast.config.actions && toast.config.actions.length > 0\">\n <button\n type=\"button\"\n *ngFor=\"let action of toast.config.actions\"\n [class]=\"getButtonClass(action)\"\n (click)=\"action.action(); dismiss(toast.id)\"\n >\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 </div>\n\n <button class=\"wco-toast__close\" *ngIf=\"toast.config.close !== false\" (click)=\"dismiss(toast.id)\" aria-label=\"Fechar\">\n <span class=\"material-icons\">close</span>\n </button>\n </div>\n \n</dialog>\n", styles: ["@layer state{.wco-toast-container{--wco-toast-padding: var(--wco-spacing-nano, 8px);--wco-toast-gap: var(--wco-spacing-nano, 8px);--wco-toast-radius: var(--wco-radius-md, 8px);--wco-toast-w-clamp: clamp(250px, 280px, 420px);--wco-toast-bg: var(--wco-color-panel) }}.wco-toast-container{margin:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;top:unset;right:unset;bottom:unset;left:unset;transition:all .1s linear .3s;opacity:1;transform:translateY(0);position:fixed;z-index:9999;display:flex;flex-direction:column;gap:var(--wco-spacing-xs);pointer-events:none}@starting-style{.wco-toast-container{opacity:0;transform:scaleY(12px)}}.wco-toast-container:has(.wco-toast-btn){--wco-toast-align-flex: flex- --wc-toast-align-direction: }.wco-toast-container::backdrop{display:none}.wco-toast-container--top-right{top:var(--wco-spacing-md);right:var(--wco-spacing-md);align-items:flex-end}.wco-toast-container--top-left{top:var(--wco-spacing-md);left:var(--wco-spacing-md);align-items:flex-start}.wco-toast-container--bottom-right{bottom:var(--wco-spacing-md);right:var(--wco-spacing-md);align-items:flex-end}.wco-toast-container--bottom-left{bottom:var(--wco-spacing-md);left:var(--wco-spacing-md);align-items:flex-start}.wco-toast-container--top-center{top:var(--wco-spacing-md);left:50%;transform:translate(-50%);align-items:center}.wco-toast-container--bottom-center{bottom:var(--wco-spacing-md);left:50%;transform:translate(-50%);align-items:center}@media (max-width: 600px){.wco-toast-container--top-right,.wco-toast-container--top-left,.wco-toast-container--top-center,.wco-toast-container--bottom-right,.wco-toast-container--bottom-left,.wco-toast-container--bottom-center{top:unset;right:unset;left:50%;bottom:var(--wco-spacing-xxs);transform:translate(-50%);align-items:center;width:calc(100vw - var(--wco-spacing-xxxs))}.wco-toast-container--top-right .wco-toast,.wco-toast-container--top-left .wco-toast,.wco-toast-container--top-center .wco-toast,.wco-toast-container--bottom-right .wco-toast,.wco-toast-container--bottom-left .wco-toast,.wco-toast-container--bottom-center .wco-toast{width:100%}}.wco-toast{pointer-events:all;display:flex;align-items:center;gap:var(--wco-toast-gap, 8px);width:var(--wco-toast-w-clamp, 250px);padding:var(--wco-toast-padding, 8px);border-radius:var(--wco-toast-radius, 8px);background:var(--wco-toast-bg, #fff);box-shadow:var(--wco-shadow-level-1);opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}.wco-toast.wco-toast--start{align-items:flex-start}.wco-toast.wco-toast--start:has(.btn-link) .wco-toast__close{margin-top:var(--wco-spacing-nano)}.wco-toast.wco-toast--start>.wco-toast__body,.wco-toast.wco-toast--start .wco-toast__content{align-items:flex-start}.wco-toast:has(.wco-toast__message) .wco-toast__title{font-weight:600}.wco-toast.wco-toast--mini{--wco-toast-w-clamp: fit-content;max-width:570px}.wco-toast--visible{opacity:1;transform:translateY(0)}.wco-toast--info{--wco-toast-color-type: var(--wco-color-info-600)}.wco-toast--success{--wco-toast-color-type: var(--wco-color-success-600)}.wco-toast--warning{--wco-toast-color-type: var(--wco-color-warning-600)}.wco-toast--error{--wco-toast-color-type: var(--wco-color-danger-600)}.wco-toast--loading{--wco-toast-color-type: var(--wco-color-secondary-600)}.wco-toast--loading .wco-toast__icon{animation:wco-toast-spin 1s linear infinite}@keyframes wco-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wco-toast__body{display:flex;align-items:center;gap:var(--wco-toast-gap, 8px);flex:1;min-width:0}.wco-toast__icon{font-size:var(--wco-iconography-size-xs);color:var(--wco-toast-color-type);flex-shrink:0;margin-top:0}.wco-toast__content{display:flex;flex-direction:row;align-items:center;gap:var(--wco-toast-gap, 8px);flex:1;min-width:0}.wco-toast__title{font-size:var(--wco-font-size-xs, 14px);font-weight:300;color:var(--wco-color-neutral-900);line-height:1.4;margin:0}.wco-toast__message{font-size:var(--wco-font-size-xxs, 12px);font-weight:400;color:var(--wco-color-neutral-700);line-height:1.5;margin:0}.wco-toast__actions{display:flex;flex-wrap:wrap;gap:var(--wco-spacing-nano)}.wco-toast__close{background:none;border:none;cursor:pointer;padding:0;color:var(--wco-color-neutral-500);display:flex;align-items:center;flex-shrink:0;line-height:1}.wco-toast__close span{font-size:18px}.wco-toast__close:hover{color:var(--wco-color-neutral-900)}.wco-toast-container .wco-toast__hover-zone{position:absolute;inset:-16px;pointer-events:auto;z-index:0}.wco-toast-container .wco-toast{position:relative;z-index:1;transition:transform .2s ease,opacity .2s ease,top .2s ease}@starting-style{.wco-toast-container .wco-toast{transform:translateY(24px)}}.wco-toast-container:not(:hover) .wco-toast:not(:last-child){position:absolute;box-shadow:none;width:100%;height:50px;overflow:hidden;transform:scale(.95)}.wco-toast-container:not(:hover) .wco-toast:not(:last-child)>*{opacity:0;transition:opacity .15s ease}.wco-toast-container:not(:hover) .wco-toast:nth-last-child(2){top:-10px;transform:scale(.95);box-shadow:var(--wco-shadow-level-3)}.wco-toast-container:not(:hover) .wco-toast:nth-last-child(3){top:-20px;transform:scale(.85);box-shadow:var(--wco-shadow-level-2)}\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: WcoToastComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-toast', standalone: true, imports: [CommonModule], template: "<dialog open class=\"wco-toast-container\" [class]=\"'wco-toast-container--' + position\">\n <span class=\"wco-toast__hover-zone\"></span>\n <div\n *ngFor=\"let toast of toasts; trackBy: trackById;let i = index\"\n class=\"wco-toast\"\n [id]=\"toast.id\"\n [class.wco-toast--visible]=\"toast.visible\"\n [class.wco-toast--start]=\"toast.tall\"\n [attr.data-position]=\"i\"\n [class]=\"'wco-toast wco-toast--mini wco-toast--' + getIconMaterial(toast.config).color + (toast.visible ? ' wco-toast--visible' : '')\"\n >\n <div class=\"wco-toast__body\">\n <ng-container *ngIf=\"toast.config.showIcon\">\n <span class=\"wco-toast__icon material-icons-round\">\n <ng-container *ngIf=\"toast.config.materialIcon; else defaultIcon\">\n {{ toast.config.materialIcon }}\n </ng-container>\n <ng-template #defaultIcon>\n {{ getIconMaterial(toast.config).icon }}\n </ng-template>\n </span>\n </ng-container>\n\n <div class=\"wco-toast__content\">\n <span>\n <p class=\"wco-toast__title\" *ngIf=\"toast.config.title\" [innerHTML]=\"getSafeHtml(toast.config.title)\"></p>\n <p class=\"wco-toast__message\" *ngIf=\"toast.config.message && toast.config.message.length \" [innerHTML]=\"getSafeHtml(toast.config.message)\"></p>\n </span>\n <div class=\"wco-toast__actions\" *ngIf=\"toast.config.actions && toast.config.actions.length > 0\">\n <button\n type=\"button\"\n *ngFor=\"let action of toast.config.actions\"\n [class]=\"getButtonClass(action)\"\n (click)=\"action.action(); dismiss(toast.id)\"\n >\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 </div>\n\n <button class=\"wco-toast__close\" *ngIf=\"toast.config.close !== false\" (click)=\"dismiss(toast.id)\" aria-label=\"Fechar\">\n <span class=\"material-icons\">close</span>\n </button>\n </div>\n \n</dialog>\n", styles: ["@layer state{.wco-toast-container{--wco-toast-padding: var(--wco-spacing-nano, 8px);--wco-toast-gap: var(--wco-spacing-nano, 8px);--wco-toast-radius: var(--wco-radius-md, 8px);--wco-toast-w-clamp: clamp(250px, 280px, 420px);--wco-toast-bg: var(--wco-color-panel) }}.wco-toast-container{margin:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;top:unset;right:unset;bottom:unset;left:unset;transition:all .1s linear .3s;opacity:1;transform:translateY(0);position:fixed;z-index:9999;display:flex;flex-direction:column;gap:var(--wco-spacing-xs);pointer-events:none}@starting-style{.wco-toast-container{opacity:0;transform:scaleY(12px)}}.wco-toast-container:has(.wco-toast-btn){--wco-toast-align-flex: flex- --wc-toast-align-direction: }.wco-toast-container::backdrop{display:none}.wco-toast-container--top-right{top:var(--wco-spacing-md);right:var(--wco-spacing-md);align-items:flex-end}.wco-toast-container--top-left{top:var(--wco-spacing-md);left:var(--wco-spacing-md);align-items:flex-start}.wco-toast-container--bottom-right{bottom:var(--wco-spacing-md);right:var(--wco-spacing-md);align-items:flex-end}.wco-toast-container--bottom-left{bottom:var(--wco-spacing-md);left:var(--wco-spacing-md);align-items:flex-start}.wco-toast-container--top-center{top:var(--wco-spacing-md);left:50%;transform:translate(-50%);align-items:center}.wco-toast-container--bottom-center{bottom:var(--wco-spacing-md);left:50%;transform:translate(-50%);align-items:center}@media (max-width: 600px){.wco-toast-container--top-right,.wco-toast-container--top-left,.wco-toast-container--top-center,.wco-toast-container--bottom-right,.wco-toast-container--bottom-left,.wco-toast-container--bottom-center{top:unset;right:unset;left:50%;bottom:var(--wco-spacing-xxs);transform:translate(-50%);align-items:center;width:calc(100vw - var(--wco-spacing-xxxs))}.wco-toast-container--top-right .wco-toast,.wco-toast-container--top-left .wco-toast,.wco-toast-container--top-center .wco-toast,.wco-toast-container--bottom-right .wco-toast,.wco-toast-container--bottom-left .wco-toast,.wco-toast-container--bottom-center .wco-toast{width:100%}}.wco-toast{pointer-events:all;display:flex;align-items:center;gap:var(--wco-toast-gap, 8px);width:var(--wco-toast-w-clamp, 250px);padding:var(--wco-toast-padding, 8px);border-radius:var(--wco-toast-radius, 8px);background:var(--wco-toast-bg, #fff);box-shadow:var(--wco-shadow-level-1);opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}.wco-toast.wco-toast--start{align-items:flex-start}.wco-toast.wco-toast--start:has(.btn-link) .wco-toast__close{margin-top:var(--wco-spacing-nano)}.wco-toast.wco-toast--start>.wco-toast__body,.wco-toast.wco-toast--start .wco-toast__content{align-items:flex-start}.wco-toast:has(.wco-toast__message) .wco-toast__title{font-weight:600}.wco-toast.wco-toast--mini{--wco-toast-w-clamp: fit-content;max-width:570px}.wco-toast--visible{opacity:1;transform:translateY(0)}.wco-toast--info{--wco-toast-color-type: var(--wco-color-info-600)}.wco-toast--success{--wco-toast-color-type: var(--wco-color-success-600)}.wco-toast--warning{--wco-toast-color-type: var(--wco-color-warning-600)}.wco-toast--error{--wco-toast-color-type: var(--wco-color-danger-600)}.wco-toast--loading{--wco-toast-color-type: var(--wco-color-secondary-600)}.wco-toast--loading .wco-toast__icon{animation:wco-toast-spin 1s linear infinite}@keyframes wco-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wco-toast__body{display:flex;align-items:center;gap:var(--wco-toast-gap, 8px);flex:1;min-width:0}.wco-toast__icon{font-size:var(--wco-iconography-size-xs);color:var(--wco-toast-color-type);flex-shrink:0;margin-top:0}.wco-toast__content{display:flex;flex-direction:row;align-items:center;gap:var(--wco-toast-gap, 8px);flex:1;min-width:0}.wco-toast__title{font-size:var(--wco-font-size-xs, 14px);font-weight:300;color:var(--wco-color-neutral-900);line-height:1.4;margin:0}.wco-toast__message{font-size:var(--wco-font-size-xxs, 12px);font-weight:400;color:var(--wco-color-neutral-700);line-height:1.5;margin:0}.wco-toast__actions{display:flex;flex-wrap:wrap;gap:var(--wco-spacing-nano)}.wco-toast__close{background:none;border:none;cursor:pointer;padding:0;color:var(--wco-color-neutral-500);display:flex;align-items:center;flex-shrink:0;line-height:1}.wco-toast__close span{font-size:18px}.wco-toast__close:hover{color:var(--wco-color-neutral-900)}.wco-toast-container .wco-toast__hover-zone{position:absolute;inset:-16px;pointer-events:auto;z-index:0}.wco-toast-container .wco-toast{position:relative;z-index:1;transition:transform .2s ease,opacity .2s ease,top .2s ease}@starting-style{.wco-toast-container .wco-toast{transform:translateY(24px)}}.wco-toast-container:not(:hover) .wco-toast:not(:last-child){position:absolute;box-shadow:none;width:100%;height:50px;overflow:hidden;transform:scale(.95)}.wco-toast-container:not(:hover) .wco-toast:not(:last-child)>*{opacity:0;transition:opacity .15s ease}.wco-toast-container:not(:hover) .wco-toast:nth-last-child(2){top:-10px;transform:scale(.95);box-shadow:var(--wco-shadow-level-3)}.wco-toast-container:not(:hover) .wco-toast:nth-last-child(3){top:-20px;transform:scale(.85);box-shadow:var(--wco-shadow-level-2)}\n"] }]
}], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { position: [{
type: Input
}], configManual: [{
type: Input
}], toasts: [{
type: Input
}] } });
class WcoToastService {
appRef = inject(ApplicationRef);
injector = inject(EnvironmentInjector);
componentRef = null;
get instance() {
if (!this.componentRef) {
this.componentRef = createComponent(WcoToastComponent, {
environmentInjector: this.injector,
});
this.appRef.attachView(this.componentRef.hostView);
document.body.appendChild(this.componentRef.location.nativeElement);
}
return this.componentRef.instance;
}
show(config) {
if (config.position) {
this.instance.position = config.position;
}
return this.instance.add(config);
}
dismiss(id) {
this.componentRef?.instance.dismiss(id);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoToastService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WcoToastService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class SubTabsComponent {
el;
selectedIndex = 0;
tabChange = new EventEmitter();
indicator;
resizeObserver;
constructor(el) {
this.el = el;
}
ngAfterContentInit() {
this.indicator = document.createElement('div');
this.indicator.className = 'wco-sub-tabs__indicator';
this.el.nativeElement.prepend(this.indicator);
setTimeout(() => {
this.reserveBoldWidth();
this.indicator.style.transition = 'none';
this.applySelection(this.selectedIndex, false);
requestAnimationFrame(() => requestAnimationFrame(() => {
this.indicator.style.transition = '';
}));
}, 0);
this.resizeObserver = new ResizeObserver(() => {
this.refreshIndicator();
});
this.resizeObserver.observe(this.el.nativeElement);
}
ngOnChanges(changes) {
if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
this.applySelection(this.selectedIndex, false);
}
}
onClick(event) {
const items = this.getItems();
const target = event.target;
for (let i = 0; i < items.length; i++) {
if (items[i] === target || items[i].contains(target)) {
this.applySelection(i, true);
break;
}
}
}
getItems() {
return Array.from(this.el.nativeElement.children).filter((c) => !c.classList.contains('wco-sub-tabs__indicator'));
}
reserveBoldWidth() {
const items = this.getItems();
const host = this.el.nativeElement;
items.forEach((item) => {
const clone = item.cloneNode(true);
clone.style.cssText = `
font-weight: 600;
visibility: hidden;
position: absolute;
pointer-events: none;
white-space: nowrap;
`;
host.appendChild(clone);
const boldWidth = clone.offsetWidth;
host.removeChild(clone);
item.style.minWidth = boldWidth + 'px';
});
}
applySelection(index, emit) {
const items = this.getItems();
if (!items.length)
return;
const clamped = Math.max(0, Math.min(index, items.length - 1));
this.selectedIndex = clamped;
items.forEach((item, i) => {
item.classList.toggle('wco-subtab-selected', i === clamped);
});
this.moveIndicator(items[clamped]);
if (emit) {
this.tabChange.emit(clamped);
}
}
refreshIndicator() {
const items = this.getItems();
const selected = items[this.selectedIndex];
if (selected) {
this.moveIndicator(selected);
}
}
moveIndicator(element) {
if (!this.indicator)
return;
this.el.nativeElement.style.setProperty('--subtab-left', element.offsetLeft + 'px');
this.el.nativeElement.style.setProperty('--subtab-width', element.offsetWidth + 'px');
}
ngOnDestroy() {
this.resizeObserver?.disconnect();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubTabsComponent, isStandalone: true, selector: "wco-sub-tabs", inputs: { selectedIndex: "selectedIndex" }, outputs: { tabChange: "tabChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:var(--wco-color-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-quark)}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:var(--wco-spacing-quark);bottom:var(--wco-spacing-quark);left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:var(--wco-color-neutral-50);border-radius:var(--wco-radius-md);box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs);background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:var(--wco-font-weight-500);color:var(--wco-color-neutral-700);border-radius:var(--wco-radius-md);white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:var(--wco-borderwidth-thick) solid var(--wco-color-primary-300);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:var(--wco-font-weight-bold)}\n"], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-sub-tabs', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:var(--wco-color-bg);border-radius:var(--wco-radius-md);padding:var(--wco-spacing-quark)}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:var(--wco-spacing-quark);bottom:var(--wco-spacing-quark);left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:var(--wco-color-neutral-50);border-radius:var(--wco-radius-md);box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs);background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:var(--wco-font-weight-500);color:var(--wco-color-neutral-700);border-radius:var(--wco-radius-md);white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:var(--wco-borderwidth-thick) solid var(--wco-color-primary-300);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:var(--wco-font-weight-bold)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedIndex: [{
type: Input
}], tabChange: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
function isValidDate(date) {
return date instanceof Date && !Number.isNaN(date.getTime());
}
function toDateOnly(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
function clampToMinute(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), 0, 0);
}
function pad2(value) {
return String(value).padStart(2, '0');
}
function formatDate(date, format) {
const yyyy = date.getFullYear();
const MM = pad2(date.getMonth() + 1);
const dd = pad2(date.getDate());
const HH = pad2(date.getHours());
const mm = pad2(date.getMinutes());
switch (format) {
case 'dd/MM/yyyy':
return `${dd}/${MM}/${yyyy}`;
case 'dd/MM/yyyy HH:mm':
return `${dd}/${MM}/${yyyy} ${HH}:${mm}`;
case 'yyyy-MM-dd':
return `${yyyy}-${MM}-${dd}`;
case "yyyy-MM-dd'T'HH:mm":
return `${yyyy}-${MM}-${dd}T${HH}:${mm}`;
case 'MM/yyyy':
return `${MM}/${yyyy}`;
case 'yyyy-MM':
return `${yyyy}-${MM}`;
}
}
function parseDate(value, format) {
const trimmed = value.trim();
if (!trimmed)
return null;
const asInt = (s) => Number.parseInt(s, 10);
if (format === 'dd/MM/yyyy') {
const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(trimmed);
if (!match)
return null;
const day = asInt(match[1]);
const month = asInt(match[2]);
const year = asInt(match[3]);
const date = new Date(year, month - 1, day);
if (date.getFullYear() !== year ||
date.getMonth() !== month - 1 ||
date.getDate() !== day) {
return null;
}
return date;
}
if (format === 'dd/MM/yyyy HH:mm') {
const match = /^(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})$/.exec(trimmed);
if (!match)
return null;
const day = asInt(match[1]);
const month = asInt(match[2]);
const year = asInt(match[3]);
const hour = asInt(match[4]);
const minute = asInt(match[5]);
if (hour > 23 || minute > 59)
return null;
const date = new Date(year, month - 1, day, hour, minute, 0, 0);
if (date.getFullYear() !== year ||
date.getMonth() !== month - 1 ||
date.getDate() !== day ||
date.getHours() !== hour ||
date.getMinutes() !== minute) {
return null;
}
return date;
}
if (format === 'yyyy-MM-dd') {
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
if (!match)
return null;
const year = asInt(match[1]);
const month = asInt(match[2]);
const day = asInt(match[3]);
const date = new Date(year, month - 1, day);
if (date.getFullYear() !== year ||
date.getMonth() !== month - 1 ||
date.getDate() !== day) {
return null;
}
return date;
}
if (format === "yyyy-MM-dd'T'HH:mm") {
const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(trimmed);
if (!match)
return null;
const year = asInt(match[1]);
const month = asInt(match[2]);
const day = asInt(match[3]);
const hour = asInt(match[4]);
const minute = asInt(match[5]);
if (hour > 23 || minute > 59)
return null;
const date = new Date(year, month - 1, day, hour, minute, 0, 0);
if (date.getFullYear() !== year ||
date.getMonth() !== month - 1 ||
date.getDate() !== day ||
date.getHours() !== hour ||
date.getMinutes() !== minute) {
return null;
}
return date;
}
if (format === 'MM/yyyy') {
const match = /^(\d{2})\/(\d{4})$/.exec(trimmed);
if (!match)
return null;
const month = asInt(match[1]);
const year = asInt(match[2]);
if (month < 1 || month > 12)
return null;
return new Date(year, month - 1, 1);
}
if (format === 'yyyy-MM') {
const match = /^(\d{4})-(\d{2})$/.exec(trimmed);
if (!match)
return null;
const year = asInt(match[1]);
const month = asInt(match[2]);
if (month < 1 || month > 12)
return null;
return new Date(year, month - 1, 1);
}
return null;
}
function coerceDate(value) {
if (!value)
return null;
if (value instanceof Date)
return isValidDate(value) ? value : null;
if (typeof value !== 'string')
return null;
const trimmed = value.trim();
if (!trimmed)
return null;
// Accept common API formats by default.
const apiDate = parseDate(trimmed, 'yyyy-MM-dd');
if (apiDate)
return apiDate;
const apiDateTime = parseDate(trimmed, "yyyy-MM-dd'T'HH:mm");
if (apiDateTime)
return apiDateTime;
const brDate = parseDate(trimmed, 'dd/MM/yyyy');
if (brDate)
return brDate;
const brDateTime = parseDate(trimmed, 'dd/MM/yyyy HH:mm');
if (brDateTime)
return brDateTime;
const monthYear = parseDate(trimmed, 'MM/yyyy');
if (monthYear)
return monthYear;
const apiMonth = parseDate(trimmed, 'yyyy-MM');
if (apiMonth)
return apiMonth;
return null;
}
function toIsoDateKey(date) {
return formatDate(toDateOnly(date), 'yyyy-MM-dd');
}
function buildDisabledPredicate(options) {
const today = toDateOnly(new Date());
return (date) => {
const day = toDateOnly(date);
if (options.disableFuture && day.getTime() > today.getTime()) {
return { disabled: true, reason: 'future' };
}
if (options.disablePast && day.getTime() < today.getTime()) {
return { disabled: true, reason: 'past' };
}
if (options.minDate && day.getTime() < toDateOnly(options.minDate).getTime()) {
return { disabled: true, reason: 'minDate' };
}
if (options.maxDate && day.getTime() > toDateOnly(options.maxDate).getTime()) {
return { disabled: true, reason: 'maxDate' };
}
if (options.disableWeekends) {
const dow = day.getDay();
if (dow === 0 || dow === 6) {
return { disabled: true, reason: 'weekend' };
}
}
if (options.disableHolidays) {
const key = toIsoDateKey(day);
if (options.holidaySet.has(key)) {
return { disabled: true, reason: 'holiday' };
}
}
if (options.dateFilter && options.dateFilter(day) === false) {
return { disabled: true, reason: 'custom' };
}
return { disabled: false };
};
}
class DatepickerComponent {
el;
openedChange = new EventEmitter();
mode = 'single';
valueFormat = 'api';
inline = false;
label = ' ';
placeholder;
placeholderStart = 'Data inicial';
placeholderEnd = 'Data final';
labelStart = ' ';
labelEnd = ' ';
inputId = 'datepicker_' + Math.random().toString(36).substring(2);
inputName;
required = false;
readonly = false;
showError = false;
allowTyping = true;
autoClose = true;
showClear = true;
highlightToday = true;
disableFuture = false;
disablePast = false;
minDate;
maxDate;
disableWeekends = false;
disableHolidays = false;
holidays = [];
dateFilter;
locale = 'pt-BR';
weekStartsOn = 0;
displayFormat;
apiFormat;
isMobile = window.innerWidth <= 768;
isOpen = false;
view = 'day';
control = null;
disabled = false;
selected = null;
rangeStart = null;
rangeEnd = null;
activeMonth = toDateOnly(new Date());
activeYearPageStart = new Date().getFullYear() - 6;
inputValue = '';
timeValue = '00:00';
manualInputError = null;
onTouched = () => { };
propagateChange = () => { };
constructor(el) {
this.el = el;
}
ngOnInit() {
if (this.inline) {
this.view = this.mode === 'month' ? 'month' : 'day';
}
}
writeValue(obj) {
this.manualInputError = null;
if (this.mode === 'range') {
const range = this.coerceRange(obj);
this.rangeStart = range?.start ? toDateOnly(range.start) : null;
this.rangeEnd = range?.end ? toDateOnly(range.end) : null;
this.activeMonth = toDateOnly(this.rangeStart || this.rangeEnd || new Date());
this.syncInputText();
return;
}
const date = this.coerceSingle(obj);
if (!date) {
this.selected = null;
this.inputValue = '';
if (this.mode === 'datetime')
this.timeValue = '00:00';
this.activeMonth = toDateOnly(new Date());
return;
}
if (this.mode === 'month') {
this.selected = new Date(date.getFullYear(), date.getMonth(), 1);
}
else if (this.mode === 'datetime') {
this.selected = clampToMinute(date);
this.timeValue = `${String(this.selected.getHours()).padStart(2, '0')}:${String(this.selected.getMinutes()).padStart(2, '0')}`;
}
else {
this.selected = toDateOnly(date);
}
this.activeMonth = toDateOnly(this.selected);
this.syncInputText();
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
if (isDisabled)
this.close();
}
validate(control) {
this.control = control;
if (this.manualInputError) {
return { wcoDateInvalid: { reason: this.manualInputError } };
}
const isDisabled = this.buildIsDisabled();
if (this.mode === 'range') {
if (this.required && (!this.rangeStart || !this.rangeEnd)) {
return { required: true };
}
if (this.rangeStart && this.rangeEnd) {
if (this.rangeStart.getTime() > this.rangeEnd.getTime()) {
return { wcoDateRange: { reason: 'startAfterEnd' } };
}
}
if (this.rangeStart) {
const result = isDisabled(this.rangeStart);
if (result.disabled) {
return {
wcoDateDisabled: { part: 'start', reason: result.reason },
};
}
}
if (this.rangeEnd) {
const result = isDisabled(this.rangeEnd);
if (result.disabled) {
return { wcoDateDisabled: { part: 'end', reason: result.reason } };
}
}
return null;
}
if (this.required && !this.selected) {
return { required: true };
}
if (this.selected) {
const result = isDisabled(this.selected);
if (result.disabled)
return { wcoDateDisabled: { reason: result.reason } };
}
return null;
}
get hasError() {
if (this.showError)
return true;
return !!this.control && this.control.invalid && this.control.touched;
}
get canInteract() {
return !this.disabled && !this.readonly;
}
get resolvedPlaceholder() {
if (this.mode === 'range') {
return (this.placeholder ||
`${this.placeholderStart || 'Data inicial'} - ${this.placeholderEnd || 'Data final'}`);
}
return this.placeholder || this.resolvedDisplayFormat();
}
open() {
if (!this.canInteract)
return;
this.isOpen = true;
this.view = this.mode === 'month' ? 'month' : 'day';
this.activeYearPageStart = this.activeMonth.getFullYear() - 6;
this.openedChange.emit(true);
}
close() {
if (this.inline)
return;
this.isOpen = false;
this.openedChange.emit(false);
}
toggleOpen() {
if (this.isOpen)
this.close();
else
this.open();
}
onInputChange(value) {
this.inputValue = value;
if (!this.allowTyping)
return;
this.manualInputError = null;
}
onInputBlur() {
this.onTouched();
if (!this.allowTyping)
return;
if (this.mode === 'range') {
const parsed = this.parseRangeText(this.inputValue);
if (!parsed && this.inputValue.trim()) {
this.manualInputError = 'format';
this.emitValue();
return;
}
this.manualInputError = null;
this.rangeStart = parsed?.start ? toDateOnly(parsed.start) : null;
this.rangeEnd = parsed?.end ? toDateOnly(parsed.end) : null;
if (this.rangeStart && this.rangeEnd) {
if (this.rangeStart.getTime() > this.rangeEnd.getTime()) {
const tmp = this.rangeStart;
this.rangeStart = this.rangeEnd;
this.rangeEnd = tmp;
}
}
const isDisabled = this.buildIsDisabled();
if (this.rangeStart && isDisabled(this.rangeStart).disabled) {
this.manualInputError = 'disabled';
}
if (this.rangeEnd && isDisabled(this.rangeEnd).disabled) {
this.manualInputError = 'disabled';
}
this.activeMonth = toDateOnly(this.rangeStart || this.rangeEnd || new Date());
this.syncInputText();
this.emitValue();
return;
}
const parsed = this.parseUserText(this.inputValue);
if (!parsed && this.inputValue.trim()) {
this.manualInputError = 'format';
this.emitValue();
return;
}
this.manualInputError = null;
this.applySingleSelection(parsed);
}
onTimeChange(value) {
this.timeValue = value;
if (this.mode !== 'datetime')
return;
if (!this.selected)
return;
const match = /^(\d{2}):(\d{2})$/.exec(value);
if (!match)
return;
const hour = Number.parseInt(match[1], 10);
const minute = Number.parseInt(match[2], 10);
if (hour > 23 || minute > 59)
return;
this.selected = new Date(this.selected.getFullYear(), this.selected.getMonth(), this.selected.getDate(), hour, minute, 0, 0);
this.syncInputText();
this.emitValue();
}
selectDay(day) {
if (!this.canInteract)
return;
if (day.disabled)
return;
if (this.mode === 'range') {
if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
this.rangeStart = toDateOnly(day.date);
this.rangeEnd = null;
}
else {
const end = toDateOnly(day.date);
if (end.getTime() < this.rangeStart.getTime()) {
this.rangeEnd = this.rangeStart;
this.rangeStart = end;
}
else {
this.rangeEnd = end;
}
if (this.autoClose)
this.close();
}
this.activeMonth = toDateOnly(this.rangeStart || day.date);
this.syncInputText();
this.emitValue();
return;
}
if (this.mode === 'datetime') {
const match = /^(\d{2}):(\d{2})$/.exec(this.timeValue);
const hour = match ? Number.parseInt(match[1], 10) : 0;
const minute = match ? Number.parseInt(match[2], 10) : 0;
this.selected = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), hour, minute, 0, 0);
this.syncInputText();
this.emitValue();
if (this.autoClose)
this.close();
return;
}
this.selected = toDateOnly(day.date);
this.activeMonth = toDateOnly(this.selected);
this.syncInputText();
this.emitValue();
if (this.autoClose)
this.close();
}
selectMonth(monthIndex) {
if (!this.canInteract)
return;
const candidate = new Date(this.activeMonth.getFullYear(), monthIndex, 1);
const isDisabled = this.buildIsDisabled();
if (isDisabled(candidate).disabled)
return;
if (this.mode === 'month') {
this.selected = candidate;
this.activeMonth = toDateOnly(candidate);
this.syncInputText();
this.emitValue();
if (this.autoClose)
this.close();
return;
}
this.activeMonth = toDateOnly(candidate);
this.view = 'day';
}
selectYear(year) {
if (!this.canInteract)
return;
this.activeMonth = new Date(year, this.activeMonth.getMonth(), 1);
this.view = this.mode === 'month' ? 'month' : 'day';
}
prev() {
if (this.view === 'day') {
this.activeMonth = new Date(this.activeMonth.getFullYear(), this.activeMonth.getMonth() - 1, 1);
return;
}
if (this.view === 'month') {
this.activeMonth = new Date(this.activeMonth.getFullYear() - 1, this.activeMonth.getMonth(), 1);
return;
}
this.activeYearPageStart -= 12;
}
next() {
if (this.view === 'day') {
this.activeMonth = new Date(this.activeMonth.getFullYear(), this.activeMonth.getMonth() + 1, 1);
return;
}
if (this.view === 'month') {
this.activeMonth = new Date(this.activeMonth.getFullYear() + 1, this.activeMonth.getMonth(), 1);
return;
}
this.activeYearPageStart += 12;
}
switchView() {
if (this.view === 'day') {
this.view = 'month';
return;
}
if (this.view === 'month') {
this.view = 'year';
this.activeYearPageStart = this.activeMonth.getFullYear() - 6;
return;
}
this.view = this.mode === 'month' ? 'month' : 'day';
}
get headerLabel() {
if (this.view === 'month' || this.view === 'year') {
return String(this.activeMonth.getFullYear());
}
const monthFormatter = new Intl.DateTimeFormat(this.locale, {
month: 'long',
year: 'numeric',
});
const label = monthFormatter.format(new Date(this.activeMonth.getFullYear(), this.activeMonth.getMonth(), 1));
return label.charAt(0).toUpperCase() + label.slice(1);
}
get weekdayLabels() {
const formatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });
const base = new Date(2023, 0, 1); // Sunday
const labels = [];
for (let i = 0; i < 7; i++) {
const day = new Date(base.getFullYear(), base.getMonth(), base.getDate() + i);
labels.push(formatter.format(day));
}
if (this.weekStartsOn === 1) {
const sunday = labels.shift();
if (sunday)
labels.push(sunday);
}
return labels.map((label) => {
const clean = label.replace('.', '').trim();
const first = Array.from(clean)[0] ?? '';
return first ? first.toLocaleUpperCase(this.locale) : '';
});
}
get days() {
const year = this.activeMonth.getFullYear();
const month = this.activeMonth.getMonth();
const first = new Date(year, month, 1);
const firstDow = first.getDay();
const offset = this.weekStartsOn === 1 ? (firstDow === 0 ? 6 : firstDow - 1) : firstDow;
const start = new Date(year, month, 1 - offset);
const isDisabled = this.buildIsDisabled();
const todayKey = toIsoDateKey(new Date());
const cells = [];
for (let i = 0; i < 42; i++) {
const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
const inMonth = date.getMonth() === month;
const key = toIsoDateKey(date);
const disabled = isDisabled(date).disabled;
const isToday = this.highlightToday && key === todayKey;
const selectedKey = this.selected ? toIsoDateKey(this.selected) : null;
const startKey = this.rangeStart ? toIsoDateKey(this.rangeStart) : null;
const endKey = this.rangeEnd ? toIsoDateKey(this.rangeEnd) : null;
const isSelected = selectedKey ? key === selectedKey : false;
const isRangeStart = startKey ? key === startKey : false;
const isRangeEnd = endKey ? key === endKey : false;
const isInRange = this.mode === 'range' && this.rangeStart && this.rangeEnd
? !disabled &&
key >= toIsoDateKey(this.rangeStart) &&
key <= toIsoDateKey(this.rangeEnd)
: false;
cells.push({
date,
label: date.getDate(),
inMonth,
disabled,
isToday,
isSelected,
isRangeStart,
isRangeEnd,
isInRange,
});
}
return cells;
}
isCurrentYear(year) {
return year === new Date().getFullYear();
}
isSelectedYear(year) {
if (this.mode === 'range')
return false;
return !!this.selected && this.selected.getFullYear() === year;
}
isCurrentMonth(monthIndex) {
const now = new Date();
return (monthIndex === now.getMonth() && this.activeMonth.getFullYear() === now.getFullYear());
}
isSelectedMonth(monthIndex) {
if (this.mode === 'range')
return false;
return (!!this.selected &&
this.selected.getFullYear() === this.activeMonth.getFullYear() &&
this.selected.getMonth() === monthIndex);
}
get monthLabels() {
const formatter = new Intl.DateTimeFormat(this.locale, { month: 'short' });
const isDisabled = this.buildIsDisabled();
const year = this.activeMonth.getFullYear();
const items = [];
for (let i = 0; i < 12; i++) {
const date = new Date(year, i, 1);
const label = formatter.format(date).replace('.', '').trim();
items.push({
index: i,
label: label.toLocaleUpperCase(this.locale),
disabled: isDisabled(date).disabled,
});
}
return items;
}
get years() {
return Array.from({ length: 12 }, (_, i) => this.activeYearPageStart + i);
}
onDocumentClick(event) {
if (!this.isOpen)
return;
const target = event.target;
if (!target)
return;
if (!this.el.nativeElement.contains(target))
this.close();
}
onResize() {
this.isMobile = window.innerWidth <= 768;
}
getFixedContainingBlock(el) {
// In some environments (e.g. Storybook), an ancestor may have `transform`,
// which changes the containing block for `position: fixed`.
// When that happens, we must position relative to that ancestor.
let node = el.parentElement;
while (node && node !== document.documentElement) {
const style = window.getComputedStyle(node);
const hasTransform = style.transform && style.transform !== 'none';
const hasPerspective = style.perspective && style.perspective !== 'none';
const hasFilter = style.filter && style.filter !== 'none';
const hasContainPaint = style.contain?.includes('paint') ?? false;
if (hasTransform || hasPerspective || hasFilter || hasContainPaint) {
return node;
}
node = node.parentElement;
}
return null;
}
emitValue() {
this.propagateChange(this.buildOutgoingValue());
}
buildOutgoingValue() {
const resolvedApiFormat = this.resolvedApiFormat();
const resolvedDisplayFormat = this.resolvedDisplayFormat();
const format = this.valueFormat === 'api' ? resolvedApiFormat : resolvedDisplayFormat;
if (this.mode === 'range') {
const start = this.rangeStart
? formatDate(this.rangeStart, format)
: null;
const end = this.rangeEnd ? formatDate(this.rangeEnd, format) : null;
return { start, end };
}
if (!this.selected)
return null;
return formatDate(this.selected, format);
}
resolvedApiFormat() {
if (this.apiFormat)
return this.apiFormat;
if (this.mode === 'datetime')
return "yyyy-MM-dd'T'HH:mm";
if (this.mode === 'month')
return 'yyyy-MM';
return 'yyyy-MM-dd';
}
resolvedDisplayFormat() {
if (this.displayFormat)
return this.displayFormat;
if (this.mode === 'datetime')
return 'dd/MM/yyyy HH:mm';
if (this.mode === 'month')
return 'MM/yyyy';
return 'dd/MM/yyyy';
}
syncInputText() {
const display = this.resolvedDisplayFormat();
if (this.mode === 'range') {
const start = this.rangeStart ? formatDate(this.rangeStart, display) : '';
const end = this.rangeEnd ? formatDate(this.rangeEnd, display) : '';
this.inputValue = end ? `${start} - ${end}` : start;
return;
}
this.inputValue = this.selected ? formatDate(this.selected, display) : '';
}
parseUserText(value) {
const display = this.resolvedDisplayFormat();
const api = this.resolvedApiFormat();
const trimmed = value.trim();
if (!trimmed)
return null;
const parsedDisplay = parseDate(trimmed, display);
const parsedApi = parsedDisplay ? null : parseDate(trimmed, api);
const parsed = parsedDisplay || parsedApi;
if (!parsed)
return null;
if (this.mode === 'month')
return new Date(parsed.getFullYear(), parsed.getMonth(), 1);
if (this.mode === 'datetime')
return clampToMinute(parsed);
return toDateOnly(parsed);
}
parseRangeText(value) {
const trimmed = value.trim();
if (!trimmed)
return null;
const separators = [' - ', ' até ', ' to '];
let sepFound = null;
for (const sep of separators) {
if (trimmed.includes(sep)) {
sepFound = sep;
break;
}
}
if (!sepFound) {
const only = this.parseUserText(trimmed);
return { start: only, end: null };
}
const parts = trimmed.split(sepFound).map((p) => p.trim());
const startText = parts[0] || '';
const endText = parts.slice(1).join(sepFound).trim();
const start = startText ? this.parseUserText(startText) : null;
const end = endText ? this.parseUserText(endText) : null;
if (!start && !end)
return null;
return { start, end };
}
applySingleSelection(date) {
if (this.mode === 'range')
return;
if (!date) {
this.selected = null;
this.syncInputText();
this.emitValue();
return;
}
const isDisabled = this.buildIsDisabled();
if (isDisabled(date).disabled) {
this.manualInputError = 'disabled';
this.emitValue();
return;
}
this.manualInputError = null;
if (this.mode === 'month')
this.selected = new Date(date.getFullYear(), date.getMonth(), 1);
else if (this.mode === 'datetime')
this.selected = clampToMinute(date);
else
this.selected = toDateOnly(date);
this.activeMonth = toDateOnly(this.selected);
this.syncInputText();
this.emitValue();
}
coerceSingle(obj) {
if (obj === null || obj === undefined)
return null;
if (obj instanceof Date)
return isValidDate(obj) ? obj : null;
if (typeof obj === 'string')
return coerceDate(obj);
if (typeof obj === 'object' && 'start' in obj && 'end' in obj)
return null;
return null;
}
coerceRange(obj) {
if (!obj)
return null;
if (typeof obj !== 'object')
return null;
if (!('start' in obj) || !('end' in obj))
return null;
const start = coerceDate(obj.start);
const end = coerceDate(obj.end);
return { start, end };
}
buildIsDisabled() {
const min = coerceDate(this.minDate ?? null);
const max = coerceDate(this.maxDate ?? null);
const holidaySet = new Set();
for (const h of this.holidays || []) {
const d = coerceDate(h);
if (d)
holidaySet.add(toIsoDateKey(d));
}
return buildDisabledPredicate({
disableFuture: this.disableFuture,
disablePast: this.disablePast,
minDate: min,
maxDate: max,
disableWeekends: this.disableWeekends,
disableHolidays: this.disableHolidays,
holidaySet,
dateFilter: this.dateFilter || null,
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, isStandalone: true, selector: "wco-datepicker", inputs: { mode: "mode", valueFormat: "valueFormat", inline: "inline", label: "label", placeholder: "placeholder", placeholderStart: "placeholderStart", placeholderEnd: "placeholderEnd", labelStart: "labelStart", labelEnd: "labelEnd", inputId: "inputId", inputName: "inputName", required: "required", readonly: "readonly", showError: "showError", allowTyping: "allowTyping", autoClose: "autoClose", showClear: "showClear", highlightToday: "highlightToday", disableFuture: "disableFuture", disablePast: "disablePast", minDate: "minDate", maxDate: "maxDate", disableWeekends: "disableWeekends", disableHolidays: "disableHolidays", holidays: "holidays", dateFilter: "dateFilter", locale: "locale", weekStartsOn: "weekStartsOn", displayFormat: "displayFormat", apiFormat: "apiFormat" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onResize()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatepickerComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: DatepickerComponent,
multi: true,
},
], ngImport: i0, template: "<div\n class=\"wco-datepicker\"\n [class.wco-datepicker--open]=\"isOpen\"\n [class.wco-datepicker--isMobile]=\"isMobile\"\n>\n <ng-container *ngIf=\"mode !== 'range' && !inline\">\n <div\n class=\"form-field wco-datepicker__field\"\n [class.form-field--error]=\"hasError\"\n [class.form-field--readonly]=\"readonly\"\n >\n <input\n [id]=\"inputId\"\n [name]=\"inputName\"\n [attr.required]=\"required ? '' : null\"\n [placeholder]=\"resolvedPlaceholder\"\n [readOnly]=\"readonly || !allowTyping\"\n [disabled]=\"disabled\"\n [value]=\"inputValue\"\n (click)=\"open()\"\n (input)=\"onInputChange($any($event.target).value)\"\n (blur)=\"onInputBlur()\"\n (keydown.enter)=\"$event.preventDefault(); onInputBlur()\"\n />\n <label [for]=\"inputId\">{{ label }}</label>\n\n <span\n class=\"material-icons-round wco-datepicker__suffix wco-datepicker__toggle\"\n (click)=\"toggleOpen()\"\n >calendar_today</span\n >\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"mode === 'range' && !inline\">\n <div\n class=\"form-field wco-datepicker__field\"\n [class.form-field--error]=\"hasError\"\n [class.form-field--readonly]=\"readonly\"\n >\n <input\n [id]=\"inputId\"\n [name]=\"inputName\"\n [attr.required]=\"required ? '' : null\"\n [placeholder]=\"resolvedPlaceholder\"\n [readOnly]=\"readonly || !allowTyping\"\n [disabled]=\"disabled\"\n [value]=\"inputValue\"\n (click)=\"open()\"\n (input)=\"onInputChange($any($event.target).value)\"\n (blur)=\"onInputBlur()\"\n (keydown.enter)=\"$event.preventDefault(); onInputBlur()\"\n />\n <label [for]=\"inputId\">{{ label }}</label>\n <span\n class=\"material-icons-round wco-datepicker__suffix wco-datepicker__toggle\"\n (click)=\"toggleOpen()\"\n >calendar_today</span\n >\n </div>\n </ng-container>\n\n <div\n class=\"wco-datepicker__box\"\n [class.wco-datepicker__box--open]=\"isOpen || inline\"\n [class.wco-datepicker__box--inline]=\"inline\"\n >\n <div class=\"wco-datepicker__panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"wco-datepicker__header\">\n <button\n type=\"button\"\n class=\"wco-datepicker__title\"\n (click)=\"switchView()\"\n [disabled]=\"!canInteract\"\n >\n {{ headerLabel }}\n <span class=\"material-icons text-primary-600\">{{\n view === \"year\" ? \"arrow_drop_up\" : \"arrow_drop_down\"\n }}</span>\n </button>\n\n <button\n type=\"button\"\n class=\"wco-datepicker__nav\"\n (click)=\"prev()\"\n [disabled]=\"!canInteract\"\n >\n <span class=\"material-icons text-primary-600\">chevron_left</span>\n </button>\n\n <button\n type=\"button\"\n class=\"wco-datepicker__nav\"\n (click)=\"next()\"\n [disabled]=\"!canInteract\"\n >\n <span class=\"material-icons text-primary-600\">chevron_right</span>\n </button>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'day'\">\n <div class=\"wco-datepicker__weekdays\">\n <span *ngFor=\"let w of weekdayLabels\">{{ w }}</span>\n </div>\n <div class=\"wco-datepicker__grid\">\n <button\n type=\"button\"\n class=\"wco-datepicker__day\"\n *ngFor=\"let d of days\"\n [class.wco-datepicker__day--muted]=\"!d.inMonth\"\n [class.wco-datepicker__day--today]=\"d.isToday\"\n [class.wco-datepicker__day--selected]=\"d.isSelected\"\n [class.wco-datepicker__day--range]=\"d.isInRange\"\n [class.wco-datepicker__day--rangeStart]=\"d.isRangeStart\"\n [class.wco-datepicker__day--rangeEnd]=\"d.isRangeEnd\"\n [disabled]=\"d.disabled || !canInteract\"\n (click)=\"selectDay(d)\"\n >\n {{ d.label }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'month'\">\n <div class=\"wco-datepicker__months\">\n <button\n type=\"button\"\n class=\"wco-datepicker__month\"\n *ngFor=\"let m of monthLabels\"\n [disabled]=\"m.disabled || !canInteract\"\n [class.wco-datepicker__month--active]=\"\n m.index === activeMonth.getMonth()\n \"\n [class.wco-datepicker__month--current]=\"isCurrentMonth(m.index)\"\n [class.wco-datepicker__month--selected]=\"isSelectedMonth(m.index)\"\n (click)=\"selectMonth(m.index)\"\n >\n {{ m.label }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'year'\">\n <div class=\"wco-datepicker__years\">\n <button\n type=\"button\"\n class=\"wco-datepicker__year\"\n *ngFor=\"let y of years\"\n [class.wco-datepicker__year--active]=\"\n y === activeMonth.getFullYear()\n \"\n [class.wco-datepicker__year--current]=\"isCurrentYear(y)\"\n [class.wco-datepicker__year--selected]=\"isSelectedYear(y)\"\n [disabled]=\"!canInteract\"\n (click)=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__time\" *ngIf=\"mode === 'datetime'\">\n <label class=\"wco-datepicker__timeLabel\">Hora</label>\n <input\n type=\"time\"\n class=\"wco-datepicker__timeInput\"\n [disabled]=\"disabled || readonly\"\n [value]=\"timeValue\"\n (input)=\"onTimeChange($any($event.target).value)\"\n />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.wco-datepicker{width:100%;position:relative;display:inline-block;--wco-datepicker-radius: var(--wco-radius-md, 8px);--wco-datepicker-shadow: var( --wco-shadow-level-1, 0px 2px 16px rgba(0, 0, 0, .2) );--wco-datepicker-bg: var(--wco-color-neutral-50, #fff);--wco-datepicker-border: 1px solid var(--wco-color-neutral-100, #e9ebec);--wco-datepicker-muted: var(--wco-color-neutral-500, #8d9399);--wco-datepicker-text: var(--wco-color-neutral-900, #080809);--wco-datepicker-primary: var(--wco-color-primary-600, #bf5600);--wco-datepicker-primary-weak: var(--wco-color-primary-50, #ffb578);--wco-datepicker-hover: var(--wco-color-neutral-100, #e9ebec)}.wco-datepicker .wco-datepicker__suffix{cursor:pointer;-webkit-user-select:none;user-select:none}.wco-datepicker .wco-datepicker__toggle{transition:transform .15s ease-in-out;color:var(--wco-color-primary-600)}.wco-datepicker--open .wco-datepicker__toggle{transform:rotate(180deg)}.wco-datepicker .wco-datepicker__box{position:absolute;max-width:270px;width:var(--wco-datepicker-overlay-width, 320px);z-index:2147483647;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-in-out,transform .12s ease-in-out;transform:translateY(-6px)}.wco-datepicker .wco-datepicker__box--open{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0)}.wco-datepicker--isMobile .wco-datepicker__box{position:absolute;width:100%;padding:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__box--inline{position:static;padding:0;transform:none;transition:none}.wco-datepicker .wco-datepicker__panel{background:var(--wco-datepicker-bg);border:var(--wco-datepicker-border);border-radius:var(--wco-datepicker-radius);box-shadow:var(--wco-datepicker-shadow);padding:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__header{display:grid;grid-template-columns:1fr 40px 40px;gap:var(--wco-spacing-quark, 4px);align-items:center;margin-bottom:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__nav{width:40px;height:40px;border:none;background:transparent;cursor:pointer;color:var(--wco-datepicker-text);display:flex;justify-content:center;align-items:center}.wco-datepicker .wco-datepicker__nav:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__nav:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker .wco-datepicker__title{border:none;background:transparent;cursor:pointer;display:inline-flex;justify-content:flex-start;align-items:center;gap:var(--wco-spacing-quark, 4px);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs, 16px);color:var(--wco-datepicker-text);padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__title:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__title:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker .wco-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding:0 var(--wco-spacing-quark, 4px);margin-bottom:var(--wco-spacing-quark, 4px);color:var(--wco-datepicker-muted);font-size:var(--wco-font-size-xxxs, 12px);text-align:center;-webkit-user-select:none;user-select:none}.wco-datepicker .wco-datepicker__weekdays>span{width:36px;justify-self:center}.wco-datepicker .wco-datepicker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.wco-datepicker .wco-datepicker__day{width:36px;height:36px;justify-self:center;position:relative;isolation:isolate;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__day:hover:not(:disabled){background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__day:disabled{cursor:not-allowed;opacity:.35;background:transparent}.wco-datepicker .wco-datepicker__day--muted{color:var(--wco-datepicker-muted)}.wco-datepicker .wco-datepicker__day--today{border-color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__day--selected{background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff)}.wco-datepicker .wco-datepicker__day--range{background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__day--range:not(.wco-datepicker .wco-datepicker__day--rangeStart):not(.wco-datepicker .wco-datepicker__day--rangeEnd){border-radius:0}.wco-datepicker .wco-datepicker__day--rangeStart,.wco-datepicker .wco-datepicker__day--rangeEnd{z-index:5;border-radius:999px;background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff)}.wco-datepicker .wco-datepicker__months,.wco-datepicker .wco-datepicker__years{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wco-spacing-quark, 4px)}.wco-datepicker .wco-datepicker__month,.wco-datepicker .wco-datepicker__year{height:26px;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;padding:0 var(--wco-spacing-nano, 8px);width:max-content;justify-self:flex-start;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-text);text-align:left}.wco-datepicker .wco-datepicker__month:hover:not(:disabled),.wco-datepicker .wco-datepicker__year:hover:not(:disabled){background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__month:disabled,.wco-datepicker .wco-datepicker__year:disabled{cursor:not-allowed;opacity:.35;background:transparent}.wco-datepicker .wco-datepicker__month--active,.wco-datepicker .wco-datepicker__year--active{background:transparent;border-color:var(--wco-datepicker-text);font-weight:600}.wco-datepicker .wco-datepicker__month--current,.wco-datepicker .wco-datepicker__year--current{border-color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__month--selected,.wco-datepicker .wco-datepicker__year--selected{background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff);font-weight:600}.wco-datepicker .wco-datepicker__time{margin-top:var(--wco-spacing-nano, 8px);display:grid;grid-template-columns:1fr auto;gap:var(--wco-spacing-nano, 8px);align-items:center}.wco-datepicker .wco-datepicker__timeLabel{font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-muted)}.wco-datepicker .wco-datepicker__timeInput{border:var(--wco-datepicker-border);border-radius:999px;padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxs, 14px)}.wco-datepicker .wco-datepicker__actions{margin-top:var(--wco-spacing-nano, 8px);display:flex;justify-content:space-between;gap:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__action{border:none;background:transparent;cursor:pointer;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-datepicker-primary);padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px);border-radius:999px}.wco-datepicker .wco-datepicker__action:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__action:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker input[readonly]+label+.material-icons-round,.wco-datepicker input:disabled+label+.material-icons-round{cursor:pointer;color:var(--wco-color-neutral-300)}\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: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
type: Component,
args: [{ selector: 'wco-datepicker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatepickerComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: DatepickerComponent,
multi: true,
},
], template: "<div\n class=\"wco-datepicker\"\n [class.wco-datepicker--open]=\"isOpen\"\n [class.wco-datepicker--isMobile]=\"isMobile\"\n>\n <ng-container *ngIf=\"mode !== 'range' && !inline\">\n <div\n class=\"form-field wco-datepicker__field\"\n [class.form-field--error]=\"hasError\"\n [class.form-field--readonly]=\"readonly\"\n >\n <input\n [id]=\"inputId\"\n [name]=\"inputName\"\n [attr.required]=\"required ? '' : null\"\n [placeholder]=\"resolvedPlaceholder\"\n [readOnly]=\"readonly || !allowTyping\"\n [disabled]=\"disabled\"\n [value]=\"inputValue\"\n (click)=\"open()\"\n (input)=\"onInputChange($any($event.target).value)\"\n (blur)=\"onInputBlur()\"\n (keydown.enter)=\"$event.preventDefault(); onInputBlur()\"\n />\n <label [for]=\"inputId\">{{ label }}</label>\n\n <span\n class=\"material-icons-round wco-datepicker__suffix wco-datepicker__toggle\"\n (click)=\"toggleOpen()\"\n >calendar_today</span\n >\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"mode === 'range' && !inline\">\n <div\n class=\"form-field wco-datepicker__field\"\n [class.form-field--error]=\"hasError\"\n [class.form-field--readonly]=\"readonly\"\n >\n <input\n [id]=\"inputId\"\n [name]=\"inputName\"\n [attr.required]=\"required ? '' : null\"\n [placeholder]=\"resolvedPlaceholder\"\n [readOnly]=\"readonly || !allowTyping\"\n [disabled]=\"disabled\"\n [value]=\"inputValue\"\n (click)=\"open()\"\n (input)=\"onInputChange($any($event.target).value)\"\n (blur)=\"onInputBlur()\"\n (keydown.enter)=\"$event.preventDefault(); onInputBlur()\"\n />\n <label [for]=\"inputId\">{{ label }}</label>\n <span\n class=\"material-icons-round wco-datepicker__suffix wco-datepicker__toggle\"\n (click)=\"toggleOpen()\"\n >calendar_today</span\n >\n </div>\n </ng-container>\n\n <div\n class=\"wco-datepicker__box\"\n [class.wco-datepicker__box--open]=\"isOpen || inline\"\n [class.wco-datepicker__box--inline]=\"inline\"\n >\n <div class=\"wco-datepicker__panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"wco-datepicker__header\">\n <button\n type=\"button\"\n class=\"wco-datepicker__title\"\n (click)=\"switchView()\"\n [disabled]=\"!canInteract\"\n >\n {{ headerLabel }}\n <span class=\"material-icons text-primary-600\">{{\n view === \"year\" ? \"arrow_drop_up\" : \"arrow_drop_down\"\n }}</span>\n </button>\n\n <button\n type=\"button\"\n class=\"wco-datepicker__nav\"\n (click)=\"prev()\"\n [disabled]=\"!canInteract\"\n >\n <span class=\"material-icons text-primary-600\">chevron_left</span>\n </button>\n\n <button\n type=\"button\"\n class=\"wco-datepicker__nav\"\n (click)=\"next()\"\n [disabled]=\"!canInteract\"\n >\n <span class=\"material-icons text-primary-600\">chevron_right</span>\n </button>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'day'\">\n <div class=\"wco-datepicker__weekdays\">\n <span *ngFor=\"let w of weekdayLabels\">{{ w }}</span>\n </div>\n <div class=\"wco-datepicker__grid\">\n <button\n type=\"button\"\n class=\"wco-datepicker__day\"\n *ngFor=\"let d of days\"\n [class.wco-datepicker__day--muted]=\"!d.inMonth\"\n [class.wco-datepicker__day--today]=\"d.isToday\"\n [class.wco-datepicker__day--selected]=\"d.isSelected\"\n [class.wco-datepicker__day--range]=\"d.isInRange\"\n [class.wco-datepicker__day--rangeStart]=\"d.isRangeStart\"\n [class.wco-datepicker__day--rangeEnd]=\"d.isRangeEnd\"\n [disabled]=\"d.disabled || !canInteract\"\n (click)=\"selectDay(d)\"\n >\n {{ d.label }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'month'\">\n <div class=\"wco-datepicker__months\">\n <button\n type=\"button\"\n class=\"wco-datepicker__month\"\n *ngFor=\"let m of monthLabels\"\n [disabled]=\"m.disabled || !canInteract\"\n [class.wco-datepicker__month--active]=\"\n m.index === activeMonth.getMonth()\n \"\n [class.wco-datepicker__month--current]=\"isCurrentMonth(m.index)\"\n [class.wco-datepicker__month--selected]=\"isSelectedMonth(m.index)\"\n (click)=\"selectMonth(m.index)\"\n >\n {{ m.label }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__content\" *ngIf=\"view === 'year'\">\n <div class=\"wco-datepicker__years\">\n <button\n type=\"button\"\n class=\"wco-datepicker__year\"\n *ngFor=\"let y of years\"\n [class.wco-datepicker__year--active]=\"\n y === activeMonth.getFullYear()\n \"\n [class.wco-datepicker__year--current]=\"isCurrentYear(y)\"\n [class.wco-datepicker__year--selected]=\"isSelectedYear(y)\"\n [disabled]=\"!canInteract\"\n (click)=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n </div>\n\n <div class=\"wco-datepicker__time\" *ngIf=\"mode === 'datetime'\">\n <label class=\"wco-datepicker__timeLabel\">Hora</label>\n <input\n type=\"time\"\n class=\"wco-datepicker__timeInput\"\n [disabled]=\"disabled || readonly\"\n [value]=\"timeValue\"\n (input)=\"onTimeChange($any($event.target).value)\"\n />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.wco-datepicker{width:100%;position:relative;display:inline-block;--wco-datepicker-radius: var(--wco-radius-md, 8px);--wco-datepicker-shadow: var( --wco-shadow-level-1, 0px 2px 16px rgba(0, 0, 0, .2) );--wco-datepicker-bg: var(--wco-color-neutral-50, #fff);--wco-datepicker-border: 1px solid var(--wco-color-neutral-100, #e9ebec);--wco-datepicker-muted: var(--wco-color-neutral-500, #8d9399);--wco-datepicker-text: var(--wco-color-neutral-900, #080809);--wco-datepicker-primary: var(--wco-color-primary-600, #bf5600);--wco-datepicker-primary-weak: var(--wco-color-primary-50, #ffb578);--wco-datepicker-hover: var(--wco-color-neutral-100, #e9ebec)}.wco-datepicker .wco-datepicker__suffix{cursor:pointer;-webkit-user-select:none;user-select:none}.wco-datepicker .wco-datepicker__toggle{transition:transform .15s ease-in-out;color:var(--wco-color-primary-600)}.wco-datepicker--open .wco-datepicker__toggle{transform:rotate(180deg)}.wco-datepicker .wco-datepicker__box{position:absolute;max-width:270px;width:var(--wco-datepicker-overlay-width, 320px);z-index:2147483647;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-in-out,transform .12s ease-in-out;transform:translateY(-6px)}.wco-datepicker .wco-datepicker__box--open{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0)}.wco-datepicker--isMobile .wco-datepicker__box{position:absolute;width:100%;padding:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__box--inline{position:static;padding:0;transform:none;transition:none}.wco-datepicker .wco-datepicker__panel{background:var(--wco-datepicker-bg);border:var(--wco-datepicker-border);border-radius:var(--wco-datepicker-radius);box-shadow:var(--wco-datepicker-shadow);padding:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__header{display:grid;grid-template-columns:1fr 40px 40px;gap:var(--wco-spacing-quark, 4px);align-items:center;margin-bottom:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__nav{width:40px;height:40px;border:none;background:transparent;cursor:pointer;color:var(--wco-datepicker-text);display:flex;justify-content:center;align-items:center}.wco-datepicker .wco-datepicker__nav:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__nav:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker .wco-datepicker__title{border:none;background:transparent;cursor:pointer;display:inline-flex;justify-content:flex-start;align-items:center;gap:var(--wco-spacing-quark, 4px);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs, 16px);color:var(--wco-datepicker-text);padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__title:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__title:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker .wco-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding:0 var(--wco-spacing-quark, 4px);margin-bottom:var(--wco-spacing-quark, 4px);color:var(--wco-datepicker-muted);font-size:var(--wco-font-size-xxxs, 12px);text-align:center;-webkit-user-select:none;user-select:none}.wco-datepicker .wco-datepicker__weekdays>span{width:36px;justify-self:center}.wco-datepicker .wco-datepicker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.wco-datepicker .wco-datepicker__day{width:36px;height:36px;justify-self:center;position:relative;isolation:isolate;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__day:hover:not(:disabled){background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__day:disabled{cursor:not-allowed;opacity:.35;background:transparent}.wco-datepicker .wco-datepicker__day--muted{color:var(--wco-datepicker-muted)}.wco-datepicker .wco-datepicker__day--today{border-color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__day--selected{background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff)}.wco-datepicker .wco-datepicker__day--range{background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__day--range:not(.wco-datepicker .wco-datepicker__day--rangeStart):not(.wco-datepicker .wco-datepicker__day--rangeEnd){border-radius:0}.wco-datepicker .wco-datepicker__day--rangeStart,.wco-datepicker .wco-datepicker__day--rangeEnd{z-index:5;border-radius:999px;background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff)}.wco-datepicker .wco-datepicker__months,.wco-datepicker .wco-datepicker__years{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wco-spacing-quark, 4px)}.wco-datepicker .wco-datepicker__month,.wco-datepicker .wco-datepicker__year{height:26px;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;padding:0 var(--wco-spacing-nano, 8px);width:max-content;justify-self:flex-start;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-text);text-align:left}.wco-datepicker .wco-datepicker__month:hover:not(:disabled),.wco-datepicker .wco-datepicker__year:hover:not(:disabled){background:var(--wco-datepicker-primary-weak);color:var(--wco-datepicker-primary)}.wco-datepicker .wco-datepicker__month:disabled,.wco-datepicker .wco-datepicker__year:disabled{cursor:not-allowed;opacity:.35;background:transparent}.wco-datepicker .wco-datepicker__month--active,.wco-datepicker .wco-datepicker__year--active{background:transparent;border-color:var(--wco-datepicker-text);font-weight:600}.wco-datepicker .wco-datepicker__month--current,.wco-datepicker .wco-datepicker__year--current{border-color:var(--wco-datepicker-text)}.wco-datepicker .wco-datepicker__month--selected,.wco-datepicker .wco-datepicker__year--selected{background:var(--wco-datepicker-primary);border-color:var(--wco-datepicker-primary);color:var(--wco-color-primary-text, #fff);font-weight:600}.wco-datepicker .wco-datepicker__time{margin-top:var(--wco-spacing-nano, 8px);display:grid;grid-template-columns:1fr auto;gap:var(--wco-spacing-nano, 8px);align-items:center}.wco-datepicker .wco-datepicker__timeLabel{font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxxs, 12px);color:var(--wco-datepicker-muted)}.wco-datepicker .wco-datepicker__timeInput{border:var(--wco-datepicker-border);border-radius:999px;padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxs, 14px)}.wco-datepicker .wco-datepicker__actions{margin-top:var(--wco-spacing-nano, 8px);display:flex;justify-content:space-between;gap:var(--wco-spacing-nano, 8px)}.wco-datepicker .wco-datepicker__action{border:none;background:transparent;cursor:pointer;font-family:var(--wco-font-family);font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-datepicker-primary);padding:var(--wco-spacing-quark, 4px) var(--wco-spacing-nano, 8px);border-radius:999px}.wco-datepicker .wco-datepicker__action:hover:not(:disabled){background:var(--wco-datepicker-hover)}.wco-datepicker .wco-datepicker__action:disabled{cursor:not-allowed;opacity:.6}.wco-datepicker input[readonly]+label+.material-icons-round,.wco-datepicker input:disabled+label+.material-icons-round{cursor:pointer;color:var(--wco-color-neutral-300)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openedChange: [{
type: Output
}], mode: [{
type: Input
}], valueFormat: [{
type: Input
}], inline: [{
type: Input
}], label: [{
type: Input
}], placeholder: [{
type: Input
}], placeholderStart: [{
type: Input
}], placeholderEnd: [{
type: Input
}], labelStart: [{
type: Input
}], labelEnd: [{
type: Input
}], inputId: [{
type: Input
}], inputName: [{
type: Input
}], required: [{
type: Input
}], readonly: [{
type: Input
}], showError: [{
type: Input
}], allowTyping: [{
type: Input
}], autoClose: [{
type: Input
}], showClear: [{
type: Input
}], highlightToday: [{
type: Input
}], disableFuture: [{
type: Input
}], disablePast: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], disableWeekends: [{
type: Input
}], disableHolidays: [{
type: Input
}], holidays: [{
type: Input
}], dateFilter: [{
type: Input
}], locale: [{
type: Input
}], weekStartsOn: [{
type: Input
}], displayFormat: [{
type: Input
}], apiFormat: [{
type: Input
}], onDocumentClick: [{
type: HostListener,
args: ['document:click', ['$event']]
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
/*
* Public API Surface of ngx-fenixds
*/
/**
* Generated bundle index. Do not edit.
*/
export { DatepickerComponent, MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, SubTabsComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent, WcoToastComponent, WcoToastService };
//# sourceMappingURL=wizco-fenixds-ngx.mjs.map