keevo-components 2.0.60 → 2.0.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kv-avatar/kv-avatar.component.mjs +6 -3
- package/esm2022/lib/components/kv-filter-cards/kv-filter-cards.component.mjs +11 -8
- package/esm2022/lib/components/kv-filter-cards/kv-filter-cards.module.mjs +6 -4
- package/esm2022/lib/components/kv-filter-cards/kv-filter-cards.pipe.mjs +30 -0
- package/fesm2022/keevo-components.mjs +46 -12
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-avatar/kv-avatar.component.d.ts +2 -1
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
- package/lib/components/kv-filter-cards/kv-filter-cards.component.d.ts +7 -4
- package/lib/components/kv-filter-cards/kv-filter-cards.module.d.ts +3 -2
- package/lib/components/kv-filter-cards/kv-filter-cards.pipe.d.ts +7 -0
- package/package.json +1 -1
|
@@ -4522,6 +4522,7 @@ class KvAvatarComponent {
|
|
|
4522
4522
|
this.btnAlterarFoto = false;
|
|
4523
4523
|
this.imageUrlChange = new EventEmitter();
|
|
4524
4524
|
this.removerFotoEvent = new EventEmitter();
|
|
4525
|
+
this.singlaNome = '';
|
|
4525
4526
|
this.file = null;
|
|
4526
4527
|
this.existeLogo = false;
|
|
4527
4528
|
this.selectedImage = '';
|
|
@@ -4615,11 +4616,11 @@ class KvAvatarComponent {
|
|
|
4615
4616
|
event.target.src = this.imageService.userDefaultImage();
|
|
4616
4617
|
}
|
|
4617
4618
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarComponent, deps: [{ token: ImagensService }, { token: NotificationService }, { token: ImageCutterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: false, isRequired: false, transformFunction: null }, btnsColor: { classPropertyName: "btnsColor", publicName: "btnsColor", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, btnAlterarFoto: { classPropertyName: "btnAlterarFoto", publicName: "btnAlterarFoto", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrlChange: "imageUrlChange", removerFotoEvent: "removerFotoEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"image-container\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if(existeLogo) {\r\n <img\r\n [src]=\"imageSource()\"\r\n (load)=\"onImageLoad()\"\r\n (error)=\"handleImageError($event)\"\r\n alt=\"Foto\"\r\n class=\"container-foto\"\r\n [style.border-color]=\"borderColor\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n />\r\n } @else {\r\n <div\r\n class=\"container-foto\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n [style.border-color]=\"borderColor\"\r\n >\r\n <span class=\"material-symbols-outlined text-7xl\"> person </span>\r\n </div>\r\n }\r\n\r\n <div class=\"btn\">\r\n <input\r\n #fileInput\r\n *ngIf=\"btnAlterarFoto\"\r\n id=\"fotoEscolhida\"\r\n type=\"file\"\r\n accept=\"image/*\"\r\n style=\"display: none\"\r\n (change)=\"changeImage($any($event))\"\r\n />\r\n\r\n @if(btnAlterarFoto && !existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"openFile()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\"\r\n >photo_camera</span\r\n >\r\n </div>\r\n } \r\n \r\n @if(btnAlterarFoto && existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"questionRemoverFoto()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\">delete</span>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <ngx-loading\r\n [show]=\"!imageLoaded() && existeLogo\"\r\n full\r\n class=\"container-foto\"\r\n [config]=\"{ backdropBorderRadius: '100%', fullScreenBackdrop: false }\"\r\n ></ngx-loading>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.btn-avatar{background:linear-gradient(135deg,#4a5568,#718096);font-weight:500;cursor:pointer;border-radius:50%;color:#e9eef3;padding:0;border:none;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.btn-avatar:before{content:\"\";position:absolute;inset:0;background:#fff0;transition:background .25s cubic-bezier(.25,.46,.45,.94);border-radius:50%}.btn-avatar:hover:before{background:#ffffff14}.btn-avatar:active{transition:all .1s cubic-bezier(.25,.46,.45,.94)}.btn-avatar:active:before{background:#ffffff1f}span,.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}.container-foto{background:linear-gradient(135deg,#4a5568,#718096);border-radius:50%;display:flex;justify-content:center;align-items:center}.icon-btn-avatar{color:#fff;font-size:1rem;cursor:pointer;transition:color .3s ease;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
|
|
4619
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: false, isRequired: false, transformFunction: null }, btnsColor: { classPropertyName: "btnsColor", publicName: "btnsColor", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, btnAlterarFoto: { classPropertyName: "btnAlterarFoto", publicName: "btnAlterarFoto", isSignal: false, isRequired: false, transformFunction: null }, singlaNome: { classPropertyName: "singlaNome", publicName: "singlaNome", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrlChange: "imageUrlChange", removerFotoEvent: "removerFotoEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"image-container\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if(existeLogo) {\r\n <img\r\n [src]=\"imageSource()\"\r\n (load)=\"onImageLoad()\"\r\n (error)=\"handleImageError($event)\"\r\n alt=\"Foto\"\r\n class=\"container-foto\"\r\n [style.border-color]=\"borderColor\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n />\r\n } @else {\r\n <div\r\n class=\"container-foto\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n [style.border-color]=\"borderColor\"\r\n >\r\n @if(!singlaNome) {\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.fontSize.rem]=\"height * 0.035\"\r\n >\r\n person\r\n </span>\r\n } @else {\r\n <span [style.fontSize.rem]=\"height * 0.025\" class=\"text-white\">{{singlaNome}}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"btn\">\r\n <input\r\n #fileInput\r\n *ngIf=\"btnAlterarFoto\"\r\n id=\"fotoEscolhida\"\r\n type=\"file\"\r\n accept=\"image/*\"\r\n style=\"display: none\"\r\n (change)=\"changeImage($any($event))\"\r\n />\r\n\r\n @if(btnAlterarFoto && !existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"openFile()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\"\r\n >photo_camera</span\r\n >\r\n </div>\r\n } @if(btnAlterarFoto && existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"questionRemoverFoto()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\">delete</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ngx-loading\r\n [show]=\"!imageLoaded() && existeLogo\"\r\n full\r\n class=\"container-foto\"\r\n [config]=\"{ backdropBorderRadius: '100%', fullScreenBackdrop: false }\"\r\n ></ngx-loading>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.btn-avatar{background:linear-gradient(135deg,#4a5568,#718096);font-weight:500;cursor:pointer;border-radius:50%;color:#e9eef3;padding:0;border:none;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.btn-avatar:before{content:\"\";position:absolute;inset:0;background:#fff0;transition:background .25s cubic-bezier(.25,.46,.45,.94);border-radius:50%}.btn-avatar:hover:before{background:#ffffff14}.btn-avatar:active{transition:all .1s cubic-bezier(.25,.46,.45,.94)}.btn-avatar:active:before{background:#ffffff1f}span,.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}.container-foto{background:linear-gradient(135deg,#4a5568,#718096);border-radius:50%;display:flex;justify-content:center;align-items:center}.icon-btn-avatar{color:#fff;font-size:1rem;cursor:pointer;transition:color .3s ease;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
|
|
4619
4620
|
}
|
|
4620
4621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarComponent, decorators: [{
|
|
4621
4622
|
type: Component,
|
|
4622
|
-
args: [{ selector: 'kv-avatar', template: "<div\r\n class=\"image-container\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if(existeLogo) {\r\n <img\r\n [src]=\"imageSource()\"\r\n (load)=\"onImageLoad()\"\r\n (error)=\"handleImageError($event)\"\r\n alt=\"Foto\"\r\n class=\"container-foto\"\r\n [style.border-color]=\"borderColor\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n />\r\n } @else {\r\n <div\r\n class=\"container-foto\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n [style.border-color]=\"borderColor\"\r\n >\r\n <span
|
|
4623
|
+
args: [{ selector: 'kv-avatar', template: "<div\r\n class=\"image-container\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n>\r\n @if(existeLogo) {\r\n <img\r\n [src]=\"imageSource()\"\r\n (load)=\"onImageLoad()\"\r\n (error)=\"handleImageError($event)\"\r\n alt=\"Foto\"\r\n class=\"container-foto\"\r\n [style.border-color]=\"borderColor\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n />\r\n } @else {\r\n <div\r\n class=\"container-foto\"\r\n [style.width.px]=\"width\"\r\n [style.height.px]=\"height\"\r\n [style.border-color]=\"borderColor\"\r\n >\r\n @if(!singlaNome) {\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.fontSize.rem]=\"height * 0.035\"\r\n >\r\n person\r\n </span>\r\n } @else {\r\n <span [style.fontSize.rem]=\"height * 0.025\" class=\"text-white\">{{singlaNome}}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"btn\">\r\n <input\r\n #fileInput\r\n *ngIf=\"btnAlterarFoto\"\r\n id=\"fotoEscolhida\"\r\n type=\"file\"\r\n accept=\"image/*\"\r\n style=\"display: none\"\r\n (change)=\"changeImage($any($event))\"\r\n />\r\n\r\n @if(btnAlterarFoto && !existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"openFile()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\"\r\n >photo_camera</span\r\n >\r\n </div>\r\n } @if(btnAlterarFoto && existeLogo) {\r\n <div\r\n class=\"btn-avatar\"\r\n [style.background-color]=\"btnsColor\"\r\n (click)=\"questionRemoverFoto()\"\r\n >\r\n <span class=\"material-symbols-outlined icon-btn-avatar\">delete</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ngx-loading\r\n [show]=\"!imageLoaded() && existeLogo\"\r\n full\r\n class=\"container-foto\"\r\n [config]=\"{ backdropBorderRadius: '100%', fullScreenBackdrop: false }\"\r\n ></ngx-loading>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.btn-avatar{background:linear-gradient(135deg,#4a5568,#718096);font-weight:500;cursor:pointer;border-radius:50%;color:#e9eef3;padding:0;border:none;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.btn-avatar:before{content:\"\";position:absolute;inset:0;background:#fff0;transition:background .25s cubic-bezier(.25,.46,.45,.94);border-radius:50%}.btn-avatar:hover:before{background:#ffffff14}.btn-avatar:active{transition:all .1s cubic-bezier(.25,.46,.45,.94)}.btn-avatar:active:before{background:#ffffff1f}span,.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}.container-foto{background:linear-gradient(135deg,#4a5568,#718096);border-radius:50%;display:flex;justify-content:center;align-items:center}.icon-btn-avatar{color:#fff;font-size:1rem;cursor:pointer;transition:color .3s ease;padding:.5rem}\n"] }]
|
|
4623
4624
|
}], ctorParameters: () => [{ type: ImagensService }, { type: NotificationService }, { type: ImageCutterService }], propDecorators: { borderColor: [{
|
|
4624
4625
|
type: Input
|
|
4625
4626
|
}], btnsColor: [{
|
|
@@ -4634,6 +4635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
4634
4635
|
type: Output
|
|
4635
4636
|
}], removerFotoEvent: [{
|
|
4636
4637
|
type: Output
|
|
4638
|
+
}], singlaNome: [{
|
|
4639
|
+
type: Input
|
|
4637
4640
|
}], fileInput: [{
|
|
4638
4641
|
type: ViewChild,
|
|
4639
4642
|
args: ['fileInput']
|
|
@@ -9603,13 +9606,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
9603
9606
|
}]
|
|
9604
9607
|
}] });
|
|
9605
9608
|
|
|
9609
|
+
class KvFilterCardsFormatterPipe {
|
|
9610
|
+
transform(value, formato) {
|
|
9611
|
+
if (value == null)
|
|
9612
|
+
return '';
|
|
9613
|
+
switch (formato) {
|
|
9614
|
+
case 'currency':
|
|
9615
|
+
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(value));
|
|
9616
|
+
case 'percent':
|
|
9617
|
+
return `${(Number(value) * 100).toFixed(0)}%`;
|
|
9618
|
+
case 'decimal':
|
|
9619
|
+
return new Intl.NumberFormat('pt-BR').format(Number(value));
|
|
9620
|
+
case 'int':
|
|
9621
|
+
return `${Math.round(Number(value))}`;
|
|
9622
|
+
case 'date':
|
|
9623
|
+
return new Intl.DateTimeFormat('pt-BR').format(new Date(value));
|
|
9624
|
+
case 'text':
|
|
9625
|
+
default:
|
|
9626
|
+
return value.toString();
|
|
9627
|
+
}
|
|
9628
|
+
}
|
|
9629
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
9630
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, name: "kvFilterCardsFormatter" }); }
|
|
9631
|
+
}
|
|
9632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, decorators: [{
|
|
9633
|
+
type: Pipe,
|
|
9634
|
+
args: [{ name: 'kvFilterCardsFormatter' }]
|
|
9635
|
+
}] });
|
|
9636
|
+
|
|
9606
9637
|
class KvFilterCardsComponent {
|
|
9607
9638
|
constructor() {
|
|
9608
|
-
//
|
|
9639
|
+
// Lista de cards de filtro, cada um com um ícone e valor específico
|
|
9609
9640
|
this.cards = input();
|
|
9641
|
+
//Propiedade para armazenar os cards selecionados
|
|
9642
|
+
this.selectedCards = model([]);
|
|
9643
|
+
this.loadingCards = input(false);
|
|
9644
|
+
// Define se os cards devem ser exibidos em uma linha ou coluna
|
|
9610
9645
|
this.wrapCards = input(false);
|
|
9646
|
+
// Define se os cards devem ser centralizados
|
|
9611
9647
|
this.alignCardsCenter = input(false);
|
|
9612
|
-
this.
|
|
9648
|
+
this.onCardClick = output();
|
|
9613
9649
|
this.color = computed(() => (card) => {
|
|
9614
9650
|
const color = mapaSeverityColors[card.severity];
|
|
9615
9651
|
return color ? color : mapaSeverityColors.primary;
|
|
@@ -9617,9 +9653,6 @@ class KvFilterCardsComponent {
|
|
|
9617
9653
|
this.mixedColor = computed(() => (card) => {
|
|
9618
9654
|
return this.getTransparentMix(this.color()(card));
|
|
9619
9655
|
});
|
|
9620
|
-
//Emiiters
|
|
9621
|
-
// Emitter para clique no card
|
|
9622
|
-
this.onCardClick = output();
|
|
9623
9656
|
}
|
|
9624
9657
|
getTransparentMix(baseHex, opacity = 0.3) {
|
|
9625
9658
|
const r = parseInt(baseHex.slice(1, 3), 16);
|
|
@@ -9641,11 +9674,11 @@ class KvFilterCardsComponent {
|
|
|
9641
9674
|
return this.selectedCards()?.find(c => c.id === card.id) !== undefined;
|
|
9642
9675
|
}
|
|
9643
9676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9644
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterCardsComponent, selector: "kv-filter-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null },
|
|
9677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterCardsComponent, selector: "kv-filter-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, selectedCards: { classPropertyName: "selectedCards", publicName: "selectedCards", isSignal: true, isRequired: false, transformFunction: null }, loadingCards: { classPropertyName: "loadingCards", publicName: "loadingCards", isSignal: true, isRequired: false, transformFunction: null }, wrapCards: { classPropertyName: "wrapCards", publicName: "wrapCards", isSignal: true, isRequired: false, transformFunction: null }, alignCardsCenter: { classPropertyName: "alignCardsCenter", publicName: "alignCardsCenter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedCards: "selectedCardsChange", onCardClick: "onCardClick" }, ngImport: i0, template: "\r\n<div\r\n id=\"filter-card-container\"\r\n class=\"flex flex-row w-full justify-content-between\"\r\n>\r\n <div \r\n class=\"flex p-fluid formgrid w-full gap-1 px-3 py-1\"\r\n [ngClass]=\"[\r\n wrapCards() ? 'flex-wrap' : 'flex-nowrap overflow-x-auto',\r\n alignCardsCenter() ? 'justify-content-center' : 'justify-content-start' \r\n ]\"\r\n #filterCardsContainer\r\n >\r\n @for (card of cards(); track card.id) {\r\n <div \r\n (click)=\"handleCardClick(card)\"\r\n [style.--main-color]=\"color()(card)\" \r\n [style.--mixed-color]=\"mixedColor()(card)\" \r\n class=\"filter-card\"\r\n [ngClass]=\"[\r\n 'filter-card-size',\r\n verificarSeCardEstaSelecionado(card) ? 'filter-card-active' : 'clickable'\r\n ]\"\r\n >\r\n <div class=\"filter-card-content\">\r\n <div class=\"filter-card-title\">\r\n\r\n @if (card.icon) {\r\n\r\n <div class=\"hex-icon-svg\">\r\n <svg style=\"overflow: visible;\" viewBox=\"0 0 100 100\" class=\"hex-bg\">\r\n <polygon\r\n [attr.fill]=\"!selectedCards()?.includes(card) ? 'color-mix(in srgb, var(--mixed-color) 20%, white 80%)' : 'var(--main-color)'\"\r\n points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\" stroke=\"var(--main-color)\" stroke-width=\"3\"\r\n stroke-linejoin=\"round\" stroke-linecap=\"round\" opacity=\"0.8\" />\r\n </svg>\r\n\r\n <span [style.color]=\"!selectedCards()?.includes(card) ? 'var(--main-color)' : 'white'\"\r\n class=\"material-symbols-outlined icon\">\r\n {{ card?.icon }}\r\n </span>\r\n\r\n </div>\r\n\r\n }\r\n\r\n <div style=\"font-weight: bold; font-size: .825em; color: #414141;\">{{ card?.titulo }}</div>\r\n </div>\r\n\r\n @if(loadingCards()){\r\n \r\n <span class=\"loading-spinner\"></span>\r\n\r\n }@else {\r\n\r\n <div \r\n class=\"flex align-items-center\" \r\n [style.color]=\"color()(card)\"\r\n style=\"font-size: 1.25em; font-weight: bold; min-height: 1.875rem\"\r\n >\r\n {{ card.valor | kvFilterCardsFormatter:card.formato}}\r\n </div>\r\n\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.card,.card-disabled,.filter-card-active{transition:border .3s ease,background-color .3s ease;border:1px solid #CBD5E1}.filter-card{transition:all ease-in-out .1s;border:1px solid #CBD5E1;border-radius:1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-card:hover{background:#f8fafc;transform:scale(1.01);border:var(--main-color) .5px solid}.filter-card:active{background:#f8fafc;border:var(--main-color) .5px solid}.filter-card-active{border:var(--main-color) .5px solid;background-color:color-mix(in srgb,var(--mixed-color) 20%,white 80%)}p{font-size:.75rem}.select-none{-webkit-user-select:none;user-select:none}.filter-card-content{display:flex;flex-direction:row;align-items:center;padding:.4rem .6rem .4rem .5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;gap:.4rem}.hex-icon-svg{position:relative;width:2rem;height:2rem;font-size:2rem}.hex-icon-svg .hex-bg{width:100%;height:100%}.hex-icon-svg .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--main-color);font-size:24px;pointer-events:none}.icon{font-weight:500!important;font-size:.65em!important}div.filter-card:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .1s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;min-width:170px;box-sizing:border-box}@container filter-card-container (min-width: 360px){.filter-card-size{width:50%}}@container filter-card-container (min-width: 600px){.filter-card-size{width:33.3333%}}@container filter-card-container (min-width: 900px){.filter-card-size{width:25%}}@container filter-card-container (min-width: 1200px){.filter-card-size{width:16.6667%}}@container filter-card-container (min-width: 1500px){.filter-card-size{width:14.2857%}}@media (min-width: 360px){.filter-card-size{width:50%}}@media (min-width: 600px){.filter-card-size{width:33.3333%}}@media (min-width: 900px){.filter-card-size{width:25%}}@media (min-width: 1200px){.filter-card-size{width:16.6667%}}@media (min-width: 1500px){.filter-card-size{width:14.2857%}}.flex-nowrap.overflow-x-auto{overflow-x:auto;scrollbar-width:thin}.flex-wrap .filter-card-size{flex:1 1 auto}.loading-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--main-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation .8s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KvFilterCardsFormatterPipe, name: "kvFilterCardsFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9645
9678
|
}
|
|
9646
9679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, decorators: [{
|
|
9647
9680
|
type: Component,
|
|
9648
|
-
args: [{ selector: 'kv-filter-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
9681
|
+
args: [{ selector: 'kv-filter-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<div\r\n id=\"filter-card-container\"\r\n class=\"flex flex-row w-full justify-content-between\"\r\n>\r\n <div \r\n class=\"flex p-fluid formgrid w-full gap-1 px-3 py-1\"\r\n [ngClass]=\"[\r\n wrapCards() ? 'flex-wrap' : 'flex-nowrap overflow-x-auto',\r\n alignCardsCenter() ? 'justify-content-center' : 'justify-content-start' \r\n ]\"\r\n #filterCardsContainer\r\n >\r\n @for (card of cards(); track card.id) {\r\n <div \r\n (click)=\"handleCardClick(card)\"\r\n [style.--main-color]=\"color()(card)\" \r\n [style.--mixed-color]=\"mixedColor()(card)\" \r\n class=\"filter-card\"\r\n [ngClass]=\"[\r\n 'filter-card-size',\r\n verificarSeCardEstaSelecionado(card) ? 'filter-card-active' : 'clickable'\r\n ]\"\r\n >\r\n <div class=\"filter-card-content\">\r\n <div class=\"filter-card-title\">\r\n\r\n @if (card.icon) {\r\n\r\n <div class=\"hex-icon-svg\">\r\n <svg style=\"overflow: visible;\" viewBox=\"0 0 100 100\" class=\"hex-bg\">\r\n <polygon\r\n [attr.fill]=\"!selectedCards()?.includes(card) ? 'color-mix(in srgb, var(--mixed-color) 20%, white 80%)' : 'var(--main-color)'\"\r\n points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\" stroke=\"var(--main-color)\" stroke-width=\"3\"\r\n stroke-linejoin=\"round\" stroke-linecap=\"round\" opacity=\"0.8\" />\r\n </svg>\r\n\r\n <span [style.color]=\"!selectedCards()?.includes(card) ? 'var(--main-color)' : 'white'\"\r\n class=\"material-symbols-outlined icon\">\r\n {{ card?.icon }}\r\n </span>\r\n\r\n </div>\r\n\r\n }\r\n\r\n <div style=\"font-weight: bold; font-size: .825em; color: #414141;\">{{ card?.titulo }}</div>\r\n </div>\r\n\r\n @if(loadingCards()){\r\n \r\n <span class=\"loading-spinner\"></span>\r\n\r\n }@else {\r\n\r\n <div \r\n class=\"flex align-items-center\" \r\n [style.color]=\"color()(card)\"\r\n style=\"font-size: 1.25em; font-weight: bold; min-height: 1.875rem\"\r\n >\r\n {{ card.valor | kvFilterCardsFormatter:card.formato}}\r\n </div>\r\n\r\n }\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.card,.card-disabled,.filter-card-active{transition:border .3s ease,background-color .3s ease;border:1px solid #CBD5E1}.filter-card{transition:all ease-in-out .1s;border:1px solid #CBD5E1;border-radius:1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-card:hover{background:#f8fafc;transform:scale(1.01);border:var(--main-color) .5px solid}.filter-card:active{background:#f8fafc;border:var(--main-color) .5px solid}.filter-card-active{border:var(--main-color) .5px solid;background-color:color-mix(in srgb,var(--mixed-color) 20%,white 80%)}p{font-size:.75rem}.select-none{-webkit-user-select:none;user-select:none}.filter-card-content{display:flex;flex-direction:row;align-items:center;padding:.4rem .6rem .4rem .5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;gap:.4rem}.hex-icon-svg{position:relative;width:2rem;height:2rem;font-size:2rem}.hex-icon-svg .hex-bg{width:100%;height:100%}.hex-icon-svg .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--main-color);font-size:24px;pointer-events:none}.icon{font-weight:500!important;font-size:.65em!important}div.filter-card:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .1s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;min-width:170px;box-sizing:border-box}@container filter-card-container (min-width: 360px){.filter-card-size{width:50%}}@container filter-card-container (min-width: 600px){.filter-card-size{width:33.3333%}}@container filter-card-container (min-width: 900px){.filter-card-size{width:25%}}@container filter-card-container (min-width: 1200px){.filter-card-size{width:16.6667%}}@container filter-card-container (min-width: 1500px){.filter-card-size{width:14.2857%}}@media (min-width: 360px){.filter-card-size{width:50%}}@media (min-width: 600px){.filter-card-size{width:33.3333%}}@media (min-width: 900px){.filter-card-size{width:25%}}@media (min-width: 1200px){.filter-card-size{width:16.6667%}}@media (min-width: 1500px){.filter-card-size{width:14.2857%}}.flex-nowrap.overflow-x-auto{overflow-x:auto;scrollbar-width:thin}.flex-wrap .filter-card-size{flex:1 1 auto}.loading-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--main-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation .8s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
9649
9682
|
}] });
|
|
9650
9683
|
const mapaSeverityColors = {
|
|
9651
9684
|
primary: '#0A8765', // Verde
|
|
@@ -9659,8 +9692,8 @@ const mapaSeverityColors = {
|
|
|
9659
9692
|
// Importação do componente que será declarado neste módulo
|
|
9660
9693
|
class KvFilterCardsModule {
|
|
9661
9694
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
9662
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsModule, declarations: [KvFilterCardsComponent // Declaração do componente KvFilterCards
|
|
9663
|
-
|
|
9695
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsModule, declarations: [KvFilterCardsComponent, // Declaração do componente KvFilterCards
|
|
9696
|
+
KvFilterCardsFormatterPipe], imports: [CommonModule // Importa funcionalidades comuns do Angular
|
|
9664
9697
|
], exports: [KvFilterCardsComponent // Exporta o componente para uso externo
|
|
9665
9698
|
] }); }
|
|
9666
9699
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsModule, imports: [CommonModule // Importa funcionalidades comuns do Angular
|
|
@@ -9670,7 +9703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
9670
9703
|
type: NgModule,
|
|
9671
9704
|
args: [{
|
|
9672
9705
|
declarations: [
|
|
9673
|
-
KvFilterCardsComponent // Declaração do componente KvFilterCards
|
|
9706
|
+
KvFilterCardsComponent, // Declaração do componente KvFilterCards
|
|
9707
|
+
KvFilterCardsFormatterPipe
|
|
9674
9708
|
],
|
|
9675
9709
|
imports: [
|
|
9676
9710
|
CommonModule // Importa funcionalidades comuns do Angular
|