@wizco/fenixds-ngx 17.0.20 → 17.0.22

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -146,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class UploadComponent {
     http;
     /* Texto de descrição do arquivo */
-    description = "(XX MB de tamanho máximo e é permitido qualquer tipo de arquivos)";
+    description = '(XX MB de tamanho máximo e é permitido qualquer tipo de arquivos)';
     /* config <AngularFileUploaderConfig> configuração do componente principais parâmetros */
     config = {
         uploadAPI: {
@@ -157,127 +157,127 @@ class UploadComponent {
             },
             responseType: 'json',
             withCredentials: false,
-        }
+        },
     };
     /*
-    * Opção de resetar o componente
-    */
+     * Opção de resetar o componente
+     */
     resetUpload = false;
     /*
-    * Evento Resposta da requisição sendo sucesso ou erro
-    */
+     * Evento Resposta da requisição sendo sucesso ou erro
+     */
     ApiResponse = new EventEmitter();
     /*
-    * Evento javascript puro para retorno do arquivo
-    */
+     * Evento javascript puro para retorno do arquivo
+     */
     fileSelected = new EventEmitter();
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     theme = '';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     id = 0;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     hideProgressBar = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     maxSize = 20 * 1024000; // mb to bytes.
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     uploadAPI = '';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     method = 'POST';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     formatsAllowed = '*';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     formatsAllowedText = '';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     multiple = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     headers = {};
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     params = {};
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     responseType = 'blob';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     hideResetBtn = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     hideSelectBtn = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     allowedFiles = [];
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     notAllowedFiles = [];
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     Caption = [];
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     isAllowedFileSingle = true;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     progressBarShow = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     enableUploadBtn = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     uploadMsg = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     afterUpload = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     uploadStarted = false;
     /**
-    * @ignore
-    */
-    uploadMsgText = "";
+     * @ignore
+     */
+    uploadMsgText = '';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     uploadMsgClass = 'text-success';
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     uploadPercent = 0;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     replaceTexts = {
         selectFileBtn: 'Selecionar Arquivo',
         resetBtn: 'Resetar',
@@ -289,31 +289,31 @@ class UploadComponent {
         sizeLimit: 'Tamanho máximo',
     };
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     currentUploads = [];
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     fileNameIndex = true;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     withCredentials = false;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     autoUpload = true;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     idDate = +new Date();
     constructor(http) {
         this.http = http;
     }
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     ngOnChanges(changes) {
         // Track changes in Configuration and see if user has even provided Configuration.
         if (changes.config && this.config) {
@@ -337,7 +337,8 @@ class UploadComponent {
                 this.responseType = this.config.uploadAPI.responseType || 'json';
                 this.withCredentials = this.config.uploadAPI.withCredentials || false;
             }
-            this.formatsAllowedText = this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
+            this.formatsAllowedText =
+                this.formatsAllowed === '*' ? '' : '(' + this.formatsAllowed + ')';
             this.fileNameIndex = this.config.fileNameIndex === false ? false : true;
             this.autoUpload = this.config.autoUpload || false;
             if (this.config.replaceTexts) {
@@ -383,7 +384,9 @@ class UploadComponent {
         // 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 currentFileExt = typeof _currentFileExt[1] === 'string'
+                ? _currentFileExt[1].toLowerCase()
+                : '';
             const isFormatValid = this.formatsAllowed.includes('*')
                 ? true
                 : this.formatsAllowed.includes(currentFileExt);
@@ -453,7 +456,9 @@ class UploadComponent {
                     this.uploadMsg = true;
                     this.afterUpload = true;
                     if (!isError) {
-                        this.uploadMsgText = this.replaceTexts.afterUploadMsg_success || 'Successfully Uploaded !';
+                        this.uploadMsgText =
+                            this.replaceTexts.afterUploadMsg_success ||
+                                'Successfully Uploaded !';
                         this.uploadMsgClass = 'text-success lead';
                     }
                 }
@@ -479,7 +484,8 @@ class UploadComponent {
         this.enableUploadBtn = false;
         this.uploadMsg = true;
         this.afterUpload = true;
-        this.uploadMsgText = this.replaceTexts.afterUploadMsg_error || 'Error in uploading files';
+        this.uploadMsgText =
+            this.replaceTexts.afterUploadMsg_error || 'Error in uploading files';
         this.uploadMsgClass = 'text-danger lead';
     }
     removeFile(i, sf_na) {
@@ -516,11 +522,11 @@ class UploadComponent {
         event.dataTransfer.dropEffect = 'copy';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1$1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"upload__drop-info\">\n    <span>Arraste-os aqui ou</span>\n    <div class=\"upload__button\">\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </div>\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 class=\"upload__file\" 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>\n", styles: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\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: HttpClientModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"upload__drop-info\">\n    <span>Arraste-os aqui ou</span>\n    <div class=\"upload__button\">\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </div>\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 class=\"upload__file\" 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: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\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: HttpClientModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "wco-file-upload", standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"upload__drop-info\">\n    <span>Arraste-os aqui ou</span>\n    <div class=\"upload__button\">\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </div>\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 class=\"upload__file\" 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>\n", styles: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\n"] }]
+            args: [{ selector: 'wco-file-upload', standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n  <div class=\"upload__drop-info\">\n    <span>Arraste-os aqui ou</span>\n    <div class=\"upload__button\">\n      <span class=\"material-icons\">cloud_upload</span>\n      <span>{{replaceTexts.selectFileBtn}}</span>\n    </div>\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 class=\"upload__file\" 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: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient, decorators: [{
                     type: SkipSelf
                 }] }]; }, propDecorators: { description: [{
@@ -1340,11 +1346,11 @@ class TimelineComponent {
         error: 'priority_high'
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n  <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n    <div class=\"wco-timeline-item-dot-container\">\n      <div class=\"wco-timeline-item-dot-container-inner\">\n        <span class=\"wco-timeline-item-dot-number\">\n          {{ timelineItems.length - i }}\n        </span>\n        <div class=\"wco-timeline-item-dot-line-container\">\n          <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n            <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n          </div>\n          <hr class=\"wco-timeline-item-dot-line\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"wco-timeline-item-content-container\">\n      <div class=\"wco-timeline-item-content\">\n        <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n        <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n        <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n      </div>\n      <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n    </div>\n  </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-300)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 600;--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: 400;--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: 600;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-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-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-900)}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineComponent, isStandalone: true, selector: "wco-timeline", inputs: { timelineItems: "timelineItems" }, ngImport: i0, template: "<div class=\"wco-timeline\">\n  <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n    <div class=\"wco-timeline-item-dot-container\">\n      <div class=\"wco-timeline-item-dot-container-inner\">\n        <span class=\"wco-timeline-item-dot-number\">\n          {{ timelineItems.length - i }}\n        </span>\n        <div class=\"wco-timeline-item-dot-line-container\">\n          <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n            <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n          </div>\n          <hr class=\"wco-timeline-item-dot-line\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"wco-timeline-item-content-container\">\n      <div class=\"wco-timeline-item-content\">\n        <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n        <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n        <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n      </div>\n      <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n    </div>\n  </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n  <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n    <div class=\"wco-timeline-item-dot-container\">\n      <div class=\"wco-timeline-item-dot-container-inner\">\n        <span class=\"wco-timeline-item-dot-number\">\n          {{ timelineItems.length - i }}\n        </span>\n        <div class=\"wco-timeline-item-dot-line-container\">\n          <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n            <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n          </div>\n          <hr class=\"wco-timeline-item-dot-line\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"wco-timeline-item-content-container\">\n      <div class=\"wco-timeline-item-content\">\n        <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n        <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n        <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n      </div>\n      <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n    </div>\n  </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-300)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 600;--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: 400;--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: 600;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-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-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-900)}\n"] }]
+            args: [{ selector: 'wco-timeline', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-timeline\">\n  <div class=\"wco-timeline-item\" *ngFor=\"let item of timelineItems; let i = index\">\n    <div class=\"wco-timeline-item-dot-container\">\n      <div class=\"wco-timeline-item-dot-container-inner\">\n        <span class=\"wco-timeline-item-dot-number\">\n          {{ timelineItems.length - i }}\n        </span>\n        <div class=\"wco-timeline-item-dot-line-container\">\n          <div [className]=\"'wco-timeline-item-dot wco-timeline-item-dot-' + item.status\">\n            <span [className]=\"'material-icons wco-timeline-item-dot-icon wco-timeline-item-dot-icon-' + item.status\"> {{ statusToIcon[item.status] }} </span>\n          </div>\n          <hr class=\"wco-timeline-item-dot-line\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"wco-timeline-item-content-container\">\n      <div class=\"wco-timeline-item-content\">\n        <h4 [className]=\"'wco-timeline-item-content-title wco-timeline-item-content-title-' + item.status\"> {{ item.title }} </h4>\n        <p [className]=\"'wco-timeline-item-content-description wco-timeline-item-content-description-' + item.status\"> {{ item.description }} </p>\n        <button class=\"wco-btn btn-primary btn-link\" *ngIf=\"item.action\" (click)=\"item.action.handler()\" [disabled]=\"item.status === 'waiting'\"> {{item.action.label}} </button>\n      </div>\n      <span [className]=\"'wco-timeline-item-content-date wco-timeline-item-content-date-' + item.status\"> {{ item.date }} </span>\n    </div>\n  </div>\n</div>\n", styles: [".wco-timeline{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;margin:20px 0;--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item{width:100%;display:flex;flex-direction:row;gap:10px}.wco-timeline .wco-timeline-item-dot-container{display:flex;flex-direction:column;align-items:center;gap:5px}.wco-timeline .wco-timeline-item-dot-container-inner{height:100%;display:flex;flex-direction:row;gap:5px}.wco-timeline .wco-timeline-item-dot-line-container{display:flex;flex-direction:column;align-items:center}.wco-timeline .wco-timeline-item-dot-line{width:var(--wco-borderwidth-thin);height:100%;background-color:var(--wco-color-neutral-500)}.wco-timeline .wco-timeline-item-dot{min-width:20px;min-height:20px;max-width:20px;max-height:20px;justify-content:center;align-items:center;display:flex;border-radius:var(--wco-radius-circular);background-color:var(--wco-timeline-dot-color)}.wco-timeline .wco-timeline-item-dot-finalized{--wco-timeline-dot-color: var(--wco-color-success-500)}.wco-timeline .wco-timeline-item-dot-current{--wco-timeline-dot-color: var(--wco-color-primary-600)}.wco-timeline .wco-timeline-item-dot-waiting{--wco-timeline-dot-color: var(--wco-color-neutral-300)}.wco-timeline .wco-timeline-item-dot-error{--wco-timeline-dot-color: var(--wco-color-danger-100)}.wco-timeline .wco-timeline-item-content{flex-direction:column;display:flex;margin-bottom:var(--wco-spacing-xl)}@media (max-width: 900px){.wco-timeline .wco-timeline-item-content{margin-bottom:var(--wco-spacing-xs)}}.wco-timeline .wco-timeline-item-content-container{width:100%;display:flex;justify-content:space-between;flex-direction:row;gap:2rem}.wco-timeline .wco-timeline-item-content-title{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-title-font-weight);color:var(--wco-timeline-item-content-title-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-title-finalized{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-current{--wco-timeline-item-content-title-font-weight: 700;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-900)}.wco-timeline .wco-timeline-item-content-title-waiting{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-title-error{--wco-timeline-item-content-title-font-weight: 400;--wco-timeline-item-content-title-font-color: var(--wco-color-danger-600)}.wco-timeline .wco-timeline-item-content-description{font-size:var(--wco-font-size-sm);font-weight:var(--wco-timeline-item-content-description-font-weight);color:var(--wco-timeline-item-content-description-font-color);margin-bottom:var(--wco-spacing-quark)}.wco-timeline .wco-timeline-item-content-description-finalized,.wco-timeline .wco-timeline-item-content-description-current{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-description-waiting{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-600)}.wco-timeline .wco-timeline-item-content-description-error{--wco-timeline-item-content-description-font-weight: 400;--wco-timeline-item-content-description-font-color: var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-content-date{font-size:1rem;color:var(--wco-color-neutral-700)}.wco-timeline .wco-timeline-item-dot-icon{font-size:.8rem;color:var(--wco-timeline-dot-icon-color)}.wco-timeline .wco-timeline-item-dot-icon-finalized{--wco-timeline-dot-icon-color: var(--wco-color-neutral-50)}.wco-timeline .wco-timeline-item-dot-icon-error{--wco-timeline-dot-icon-color: var(--wco-color-danger-600)}\n"] }]
         }], propDecorators: { timelineItems: [{
                 type: Input
             }] } });