keevo-components 2.0.13 → 2.0.15

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, signal, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, input, output, model, viewChild, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewChild, Injectable, signal, Directive, Pipe, ContentChildren, ViewChildren, forwardRef, input, output, model, viewChild, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -7628,17 +7628,26 @@ class WorkspaceEmpresaComponent {
         this.totalEmpresas = 0;
         this.onEmpresaSelecionada = new EventEmitter();
         this.onPaginate = new EventEmitter();
+        this.mascaraCpfCnpj = computed(() => (cpfcnpj) => {
+            const regexCpf = /^(\d{3})(\d{3})(\d{3})(\d{2})$/;
+            const regexCnpj = /^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/;
+            if (cpfcnpj.length === 11)
+                return cpfcnpj.replace(regexCpf, '$1.$2.$3-$4');
+            else if (cpfcnpj.length === 14)
+                return cpfcnpj.replace(regexCnpj, '$1.$2.$3/$4-$5');
+            return cpfcnpj;
+        });
     }
     selecionarEmpresa(empresa) {
         this.empresaSelecionada = empresa;
         this.onEmpresaSelecionada.emit(this.empresaSelecionada);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceEmpresaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: WorkspaceEmpresaComponent, selector: "kv-workspace-empresa", inputs: { empresas: "empresas", empresaSelecionada: "empresaSelecionada", totalEmpresas: "totalEmpresas" }, outputs: { onEmpresaSelecionada: "onEmpresaSelecionada", onPaginate: "onPaginate" }, ngImport: i0, template: "<div class=\"flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1\">\r\n\r\n  @for(empresa of empresas; track $index) {\r\n  <div\r\n    class=\"grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1\"\r\n    (click)=\"selecionarEmpresa(empresa)\"\r\n  >\r\n    <span class=\"p-0 col-3 my-2 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.cpfcnpj\r\n    }}</span>\r\n    <span class=\"p-0 col-8 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.razaosocial\r\n    }}</span>\r\n\r\n    <div class=\"p-0 col flex justify-content-end\">\r\n      <div class=\" icon-box\">\r\n        <span class=\"material-symbols-outlined\" [style.fontSize]=\"'1.1rem'\">chevron_right</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".text-no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-box{border-bottom:solid 1px #eeeeee;transition:all .2s}.option-box:hover{cursor:pointer;background-color:rgba(var(--kv-color-system),.05)}.option-box:active{background-color:rgba(var(--kv-color-system),.125)}.icon-box{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center}.icon-box:hover{cursor:pointer;opacity:.8}\n", ":host{overflow:hidden}.cards-container{overflow-x:hidden;transition:all .2s}.cards-container::-webkit-scrollbar{width:6px}.cards-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.cards-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.75)}.cards-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.15)}.voltar-box{display:flex;flex-direction:row;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;transition:all .2s}.voltar-box:hover{opacity:.8}.voltar-box:active{opacity:.9}.link{color:rgba(var(--kv-secondary-color),.9);text-decoration:none;cursor:pointer}.link:active{color:rgba(var(--kv-secondary-color),1)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: WorkspaceEmpresaComponent, selector: "kv-workspace-empresa", inputs: { empresas: "empresas", empresaSelecionada: "empresaSelecionada", totalEmpresas: "totalEmpresas" }, outputs: { onEmpresaSelecionada: "onEmpresaSelecionada", onPaginate: "onPaginate" }, ngImport: i0, template: "<div class=\"flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1\">\r\n\r\n  @for(empresa of empresas; track $index) {\r\n  <div\r\n    class=\"grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1\"\r\n    (click)=\"selecionarEmpresa(empresa)\"\r\n  >\r\n    <span class=\"p-0 col-3 my-2 text-xs text-truncate text-no-wrap\">{{\r\n      mascaraCpfCnpj()(empresa.cpfcnpj)\r\n    }}</span>\r\n    <span class=\"p-0 col-8 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.razaosocial\r\n    }}</span>\r\n\r\n    <div class=\"p-0 col flex justify-content-end\">\r\n      <div class=\" icon-box\">\r\n        <span class=\"material-symbols-outlined\" [style.fontSize]=\"'1.1rem'\">chevron_right</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".text-no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-box{border-bottom:solid 1px #eeeeee;transition:all .2s}.option-box:hover{cursor:pointer;background-color:rgba(var(--kv-color-system),.05)}.option-box:active{background-color:rgba(var(--kv-color-system),.125)}.icon-box{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center}.icon-box:hover{cursor:pointer;opacity:.8}\n", ":host{overflow:hidden}.cards-container{overflow-x:hidden;transition:all .2s}.cards-container::-webkit-scrollbar{width:6px}.cards-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.cards-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.75)}.cards-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.15)}.voltar-box{display:flex;flex-direction:row;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;transition:all .2s}.voltar-box:hover{opacity:.8}.voltar-box:active{opacity:.9}.link{color:rgba(var(--kv-secondary-color),.9);text-decoration:none;cursor:pointer}.link:active{color:rgba(var(--kv-secondary-color),1)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceEmpresaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-workspace-empresa', template: "<div class=\"flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1\">\r\n\r\n  @for(empresa of empresas; track $index) {\r\n  <div\r\n    class=\"grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1\"\r\n    (click)=\"selecionarEmpresa(empresa)\"\r\n  >\r\n    <span class=\"p-0 col-3 my-2 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.cpfcnpj\r\n    }}</span>\r\n    <span class=\"p-0 col-8 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.razaosocial\r\n    }}</span>\r\n\r\n    <div class=\"p-0 col flex justify-content-end\">\r\n      <div class=\" icon-box\">\r\n        <span class=\"material-symbols-outlined\" [style.fontSize]=\"'1.1rem'\">chevron_right</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".text-no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-box{border-bottom:solid 1px #eeeeee;transition:all .2s}.option-box:hover{cursor:pointer;background-color:rgba(var(--kv-color-system),.05)}.option-box:active{background-color:rgba(var(--kv-color-system),.125)}.icon-box{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center}.icon-box:hover{cursor:pointer;opacity:.8}\n", ":host{overflow:hidden}.cards-container{overflow-x:hidden;transition:all .2s}.cards-container::-webkit-scrollbar{width:6px}.cards-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.cards-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.75)}.cards-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.15)}.voltar-box{display:flex;flex-direction:row;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;transition:all .2s}.voltar-box:hover{opacity:.8}.voltar-box:active{opacity:.9}.link{color:rgba(var(--kv-secondary-color),.9);text-decoration:none;cursor:pointer}.link:active{color:rgba(var(--kv-secondary-color),1)}\n"] }]
+            args: [{ selector: 'kv-workspace-empresa', template: "<div class=\"flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1\">\r\n\r\n  @for(empresa of empresas; track $index) {\r\n  <div\r\n    class=\"grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1\"\r\n    (click)=\"selecionarEmpresa(empresa)\"\r\n  >\r\n    <span class=\"p-0 col-3 my-2 text-xs text-truncate text-no-wrap\">{{\r\n      mascaraCpfCnpj()(empresa.cpfcnpj)\r\n    }}</span>\r\n    <span class=\"p-0 col-8 text-xs text-truncate text-no-wrap\">{{\r\n      empresa.razaosocial\r\n    }}</span>\r\n\r\n    <div class=\"p-0 col flex justify-content-end\">\r\n      <div class=\" icon-box\">\r\n        <span class=\"material-symbols-outlined\" [style.fontSize]=\"'1.1rem'\">chevron_right</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".text-no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-box{border-bottom:solid 1px #eeeeee;transition:all .2s}.option-box:hover{cursor:pointer;background-color:rgba(var(--kv-color-system),.05)}.option-box:active{background-color:rgba(var(--kv-color-system),.125)}.icon-box{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center}.icon-box:hover{cursor:pointer;opacity:.8}\n", ":host{overflow:hidden}.cards-container{overflow-x:hidden;transition:all .2s}.cards-container::-webkit-scrollbar{width:6px}.cards-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.cards-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.75)}.cards-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:rgba(var(--kv-secondary-color),.15)}.voltar-box{display:flex;flex-direction:row;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;transition:all .2s}.voltar-box:hover{opacity:.8}.voltar-box:active{opacity:.9}.link{color:rgba(var(--kv-secondary-color),.9);text-decoration:none;cursor:pointer}.link:active{color:rgba(var(--kv-secondary-color),1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { empresas: [{
                 type: Input
             }], empresaSelecionada: [{
@@ -8751,11 +8760,11 @@ class KvFilterCardComponent {
         this.spaceNowrap = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterCardComponent, selector: "kv-filter-card", inputs: { cardState: "cardState", color: "color", title: "title", amount: "amount", gIcon: "gIcon", spaceNowrap: "spaceNowrap" }, ngImport: i0, template: "<div\r\n  [style]=\"{ '--accent-color': color }\"\r\n  [ngClass]=\"[\r\n    cardState == 'inactive' ? 'card-disabled' : 'card',\r\n    cardState == 'selected' ? 'clickable-selected' : 'clickable'\r\n  ]\"\r\n>\r\n  <div class=\"filter-card-content\">\r\n    <div class=\"flex-row-center\">\r\n      @if (gIcon) {\r\n      <kv-g-icon>{{ gIcon }}</kv-g-icon>\r\n      }\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n      <p class=\"{{spaceNowrap && 'white-space-nowrap'}} font-bold\">{{ title }}</p>\r\n    </div>\r\n    <p style=\"font-size: 2em\" class=\"font-bold\">{{ amount }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".card{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .4rem var(--accent-color);border-radius:10px}.card *{margin:0;color:var(--accent-color)}p{font-size:14px}.card-disabled{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .4rem lightgrey;transition:border-left .2s ease;border-radius:10px}.card-disabled:hover{border-left:solid .4rem var(--accent-color);transition:border-left .2s ease}.card-disabled:hover *{color:var(--accent-color);transition:color .2s ease}.card-disabled *{margin:0;color:#d3d3d3;transition:color .2s ease}.clickable-selected{cursor:pointer;background-color:#eafaff}.clickable-selected:hover{background-color:#deeeff}.clickable{cursor:pointer}.clickable:hover{background-color:#f0f0f0}.filter-card-content{width:180px;display:flex;flex-direction:column;padding:1rem .6rem .6rem;gap:1.2rem}.select-none{-webkit-user-select:none;user-select:none}.flex-row-center{display:flex;flex-direction:row;align-items:center;gap:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KvGIconComponent, selector: "kv-g-icon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterCardComponent, selector: "kv-filter-card", inputs: { cardState: "cardState", color: "color", title: "title", amount: "amount", gIcon: "gIcon", spaceNowrap: "spaceNowrap" }, ngImport: i0, template: "<div [style]='{\"--accent-color\": color}' [ngClass]='[cardState == \"inactive\" ? \"card-disabled\" : \"card\", cardState == \"selected\" ? \"clickable-selected\" : \"clickable\"]'>\r\n  <div class=\"filter-card-content\">\r\n    <div class=\"filter-card-title\">\r\n      @if (gIcon) {\r\n      <kv-g-icon>{{ gIcon }}</kv-g-icon>\r\n      }\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n      <div style=\"font-weight: bold; font-size: .825em\">{{ title }}</div>\r\n    </div>\r\n    <div class=\"flex align-items-center\" style=\"font-size: 1.25em; font-weight: bold; min-height: 1.875rem\">{{ amount }}</div>\r\n  </div>\r\n</div>\r\n", styles: [".card{--accent-color: #5289B4;border:1px solid rgba(0,0,0,.15);box-shadow:0 4px 8px #0003;background-color:#f9f9f9;border-left:solid .325rem var(--accent-color);border-radius:.625rem}.card *{margin:0;color:var(--accent-color)}p{font-size:.75rem}.card-disabled{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .325rem lightgrey;transition:border-left .2s ease;border-radius:10px}.card-disabled:hover{border-left:solid .325rem var(--accent-color);transition:border-left .2s ease}.card-disabled:hover *{color:var(--accent-color);transition:color .2s ease}.card-disabled *{margin:0;color:#d3d3d3;transition:color .2s ease}.clickable-selected{cursor:pointer;background-color:#eafaff}.clickable-selected:hover{background-color:#deeeff}.clickable{cursor:pointer}.clickable:hover{background-color:#f0f0f0}.filter-card-content{display:flex;flex-direction:row;padding:.575rem .4rem .4rem;gap:.5rem}.select-none{-webkit-user-select:none;user-select:none}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;gap:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KvGIconComponent, selector: "kv-g-icon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-filter-card', template: "<div\r\n  [style]=\"{ '--accent-color': color }\"\r\n  [ngClass]=\"[\r\n    cardState == 'inactive' ? 'card-disabled' : 'card',\r\n    cardState == 'selected' ? 'clickable-selected' : 'clickable'\r\n  ]\"\r\n>\r\n  <div class=\"filter-card-content\">\r\n    <div class=\"flex-row-center\">\r\n      @if (gIcon) {\r\n      <kv-g-icon>{{ gIcon }}</kv-g-icon>\r\n      }\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n      <p class=\"{{spaceNowrap && 'white-space-nowrap'}} font-bold\">{{ title }}</p>\r\n    </div>\r\n    <p style=\"font-size: 2em\" class=\"font-bold\">{{ amount }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".card{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .4rem var(--accent-color);border-radius:10px}.card *{margin:0;color:var(--accent-color)}p{font-size:14px}.card-disabled{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .4rem lightgrey;transition:border-left .2s ease;border-radius:10px}.card-disabled:hover{border-left:solid .4rem var(--accent-color);transition:border-left .2s ease}.card-disabled:hover *{color:var(--accent-color);transition:color .2s ease}.card-disabled *{margin:0;color:#d3d3d3;transition:color .2s ease}.clickable-selected{cursor:pointer;background-color:#eafaff}.clickable-selected:hover{background-color:#deeeff}.clickable{cursor:pointer}.clickable:hover{background-color:#f0f0f0}.filter-card-content{width:180px;display:flex;flex-direction:column;padding:1rem .6rem .6rem;gap:1.2rem}.select-none{-webkit-user-select:none;user-select:none}.flex-row-center{display:flex;flex-direction:row;align-items:center;gap:.4rem}\n"] }]
+            args: [{ selector: 'kv-filter-card', template: "<div [style]='{\"--accent-color\": color}' [ngClass]='[cardState == \"inactive\" ? \"card-disabled\" : \"card\", cardState == \"selected\" ? \"clickable-selected\" : \"clickable\"]'>\r\n  <div class=\"filter-card-content\">\r\n    <div class=\"filter-card-title\">\r\n      @if (gIcon) {\r\n      <kv-g-icon>{{ gIcon }}</kv-g-icon>\r\n      }\r\n      <ng-content select=\"[icon]\"></ng-content>\r\n      <div style=\"font-weight: bold; font-size: .825em\">{{ title }}</div>\r\n    </div>\r\n    <div class=\"flex align-items-center\" style=\"font-size: 1.25em; font-weight: bold; min-height: 1.875rem\">{{ amount }}</div>\r\n  </div>\r\n</div>\r\n", styles: [".card{--accent-color: #5289B4;border:1px solid rgba(0,0,0,.15);box-shadow:0 4px 8px #0003;background-color:#f9f9f9;border-left:solid .325rem var(--accent-color);border-radius:.625rem}.card *{margin:0;color:var(--accent-color)}p{font-size:.75rem}.card-disabled{--accent-color: #5289B4;border:1px solid lightgrey;border-left:solid .325rem lightgrey;transition:border-left .2s ease;border-radius:10px}.card-disabled:hover{border-left:solid .325rem var(--accent-color);transition:border-left .2s ease}.card-disabled:hover *{color:var(--accent-color);transition:color .2s ease}.card-disabled *{margin:0;color:#d3d3d3;transition:color .2s ease}.clickable-selected{cursor:pointer;background-color:#eafaff}.clickable-selected:hover{background-color:#deeeff}.clickable{cursor:pointer}.clickable:hover{background-color:#f0f0f0}.filter-card-content{display:flex;flex-direction:row;padding:.575rem .4rem .4rem;gap:.5rem}.select-none{-webkit-user-select:none;user-select:none}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;gap:.4rem}\n"] }]
         }], propDecorators: { cardState: [{
                 type: Input
             }], color: [{