keevo-components 2.0.14 → 2.0.16

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: [{