keevo-components 2.0.209 → 2.0.211

package/fesm2022/keevo-components.mjs

@@ -3414,6 +3414,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+;
+function createEnumUtils(config) {
+    return {
+        listar: () => Object.values(config),
+        getLabel: (value) => config[value]?.label ?? 'Desconhecido',
+        getSeverity: (value) => config[value]?.severity,
+        getHexColor: (value) => config[value]?.hexColor,
+        isValid: (value) => Object.keys(config).includes(value)
+    };
+}
+
+const mapaSeverityColors = {
+    primary: '#0A8765', // Verde
+    secondary: '#0A3A78', // Azul escuro
+    tertiary: '#778599', // Cinza
+    info: '#0091C2', // Azul claro
+    warning: '#E1963D', // Amarelo
+    danger: '#B91C1C', // Laranja
+};
+
 class DocsService {
     static validaCpfCnpj(cpfcnpj) {
         cpfcnpj = cpfcnpj.replace(/\D/g, '');
@@ -5629,122 +5649,6 @@ const TIMEOUTS = {
     autoSave: 3000
 };
 
-class KvFilterCardsFormatterPipe {
-    transform(value, formato) {
-        if (value == null)
-            return '';
-        switch (formato) {
-            case 'currency':
-                return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(value));
-            case 'percent':
-                return `${(Number(value) * 100).toFixed(0)}%`;
-            case 'decimal':
-                return new Intl.NumberFormat('pt-BR').format(Number(value));
-            case 'int':
-                return `${Math.round(Number(value))}`;
-            case 'date':
-                return new Intl.DateTimeFormat('pt-BR').format(new Date(value));
-            case 'text':
-            default:
-                return value.toString();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, name: "kvFilterCardsFormatter" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'kvFilterCardsFormatter' }]
-        }] });
-
-class KvFilterCardsComponent {
-    constructor() {
-        // Lista de cards de filtro, cada um com um ícone e valor específico
-        this.cards = input();
-        this.staticCards = input(false);
-        this.cursorPointer = input(true);
-        this.selectedCards = model([]);
-        this.selectedCardsTratado = computed(() => {
-            const cardsSelecionados = this.selectedCards();
-            const cards = this.cards() ?? [];
-            if (!cardsSelecionados || cardsSelecionados.length === 0)
-                return [];
-            // Se for array de number, converte
-            if (typeof cardsSelecionados[0] === 'number') {
-                return cards.filter(c => cardsSelecionados.includes(c.id));
-            }
-            // Já é array de objeto
-            return cardsSelecionados;
-        });
-        this.loadingCards = input(false);
-        // Define se os cards devem ser exibidos em uma linha ou coluna
-        this.wrapCards = input(false);
-        // Define se os cards devem ser centralizados
-        this.alignCardsCenter = input(false);
-        this.onCardClick = output();
-        this.color = computed(() => (card) => {
-            const color = mapaSeverityColors[card.severity];
-            return color ? color : mapaSeverityColors.tertiary;
-        });
-        this.mixedColor = computed(() => (card) => {
-            return this.getTransparentMix(this.color()(card));
-        });
-    }
-    getTransparentMix(baseHex, opacity = 0.3) {
-        const r = parseInt(baseHex.slice(1, 3), 16);
-        const g = parseInt(baseHex.slice(3, 5), 16);
-        const b = parseInt(baseHex.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-    }
-    handleCardClick(card) {
-        this.onCardClick.emit(card);
-        this.selectedCards.update((raw) => {
-            let selected;
-            // Se vier como number[], converter usando this.cards()
-            if (typeof raw[0] === 'number') {
-                const allCards = this.cards() ?? [];
-                selected = allCards.filter(c => raw.includes(c.id));
-            }
-            else {
-                selected = raw;
-            }
-            const exists = selected.some(c => c.id === card.id);
-            const updated = exists
-                ? selected.filter(c => c.id !== card.id)
-                : [...selected, card];
-            return updated;
-        });
-    }
-    verificarSeCardEstaSelecionado(card) {
-        return this.selectedCardsTratado()?.find(c => c.id === card.id) !== undefined;
-    }
-    getColorFillPolygon(card) {
-        if (this.staticCards()) {
-            return 'var(--main-color)';
-        }
-        if (!this.selectedCardsTratado()?.includes(card)) {
-            return 'color-mix(in srgb, var(--mixed-color) 40%, white 60%)';
-        }
-        else {
-            return 'color-mix(in srgb, var(--mixed-color) 99%, white 1%)';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, staticCards: { classPropertyName: "staticCards", publicName: "staticCards", isSignal: true, isRequired: false, transformFunction: null }, cursorPointer: { classPropertyName: "cursorPointer", publicName: "cursorPointer", 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: "<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-2 overflow-y-hidden\"\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\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)\r\n          ? 'filter-card-active'\r\n          : 'clickable',\r\n        staticCards() ? 'filter-card-active' : '',\r\n        !staticCards() && !verificarSeCardEstaSelecionado(card)\r\n          ? 'filter-card-hover'\r\n          : '',\r\n        cursorPointer() ? 'cursor-pointer' : ''\r\n      ]\"\r\n    >\r\n      <div class=\"filter-card-content\">\r\n        <div class=\"filter-card-title\">\r\n          <div class=\"flex flex-column\">\r\n            <div\r\n              style=\"font-weight: semibold; font-size: 0.75em\"\r\n              [style.color]=\"color()(card)\"\r\n            >\r\n              {{ card?.titulo }}\r\n            </div>\r\n\r\n            <div class=\"h-1rem\">\r\n              @if(loadingCards()){\r\n\r\n              <span class=\"loading-spinner\"></span>\r\n\r\n              } @else {\r\n\r\n              <span\r\n                class=\"flex align-items-center\"\r\n                [style.color]=\"color()(card)\"\r\n                style=\"font-size: 0.825em; font-weight: 600\"\r\n              >\r\n                {{ card.valor | kvFilterCardsFormatter : card.formato }}\r\n              </span>\r\n\r\n              }\r\n            </div>\r\n          </div>\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]=\"getColorFillPolygon(card)\"\r\n                points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\"\r\n                stroke=\"var(--main-color)\"\r\n                stroke-width=\"3\"\r\n                stroke-linejoin=\"round\"\r\n                stroke-linecap=\"round\"\r\n                opacity=\"0.8\"\r\n              />\r\n            </svg> -->\r\n\r\n            <div class=\"flex align-items-center justify-content-center p-2 border-round-lg transition-all transition-duration-300\" \r\n                 [style.backgroundColor]=\"getColorFillPolygon(card)\">\r\n              <span\r\n                [style.color]=\"'var(--main-color)'\"\r\n                class=\"material-symbols-outlined icon\"\r\n              >\r\n                {{ card?.icon }}\r\n              </span>\r\n            </div>\r\n\r\n          </div>\r\n\r\n          }\r\n        </div>\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{cursor:pointer;transition:all ease-in-out .2s;border:1px solid #cbd5e1;border-radius:.5rem;-webkit-user-select:none;user-select:none}.filter-card-hover:hover{background:#f8fafc;transition:border .3s ease,background-color .3s ease;border:var(--main-color) .5px solid}.filter-card-hover: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) 10%,white 90%)}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:.5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.hex-icon-svg{position:relative;width:1.75rem;height:1.75rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.icon{font-weight:500!important;font-size:.75em!important}div.filter-card-hover:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .25s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;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:.85rem;height:.85rem;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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kv-filter-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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-2 overflow-y-hidden\"\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\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)\r\n          ? 'filter-card-active'\r\n          : 'clickable',\r\n        staticCards() ? 'filter-card-active' : '',\r\n        !staticCards() && !verificarSeCardEstaSelecionado(card)\r\n          ? 'filter-card-hover'\r\n          : '',\r\n        cursorPointer() ? 'cursor-pointer' : ''\r\n      ]\"\r\n    >\r\n      <div class=\"filter-card-content\">\r\n        <div class=\"filter-card-title\">\r\n          <div class=\"flex flex-column\">\r\n            <div\r\n              style=\"font-weight: semibold; font-size: 0.75em\"\r\n              [style.color]=\"color()(card)\"\r\n            >\r\n              {{ card?.titulo }}\r\n            </div>\r\n\r\n            <div class=\"h-1rem\">\r\n              @if(loadingCards()){\r\n\r\n              <span class=\"loading-spinner\"></span>\r\n\r\n              } @else {\r\n\r\n              <span\r\n                class=\"flex align-items-center\"\r\n                [style.color]=\"color()(card)\"\r\n                style=\"font-size: 0.825em; font-weight: 600\"\r\n              >\r\n                {{ card.valor | kvFilterCardsFormatter : card.formato }}\r\n              </span>\r\n\r\n              }\r\n            </div>\r\n          </div>\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]=\"getColorFillPolygon(card)\"\r\n                points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\"\r\n                stroke=\"var(--main-color)\"\r\n                stroke-width=\"3\"\r\n                stroke-linejoin=\"round\"\r\n                stroke-linecap=\"round\"\r\n                opacity=\"0.8\"\r\n              />\r\n            </svg> -->\r\n\r\n            <div class=\"flex align-items-center justify-content-center p-2 border-round-lg transition-all transition-duration-300\" \r\n                 [style.backgroundColor]=\"getColorFillPolygon(card)\">\r\n              <span\r\n                [style.color]=\"'var(--main-color)'\"\r\n                class=\"material-symbols-outlined icon\"\r\n              >\r\n                {{ card?.icon }}\r\n              </span>\r\n            </div>\r\n\r\n          </div>\r\n\r\n          }\r\n        </div>\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{cursor:pointer;transition:all ease-in-out .2s;border:1px solid #cbd5e1;border-radius:.5rem;-webkit-user-select:none;user-select:none}.filter-card-hover:hover{background:#f8fafc;transition:border .3s ease,background-color .3s ease;border:var(--main-color) .5px solid}.filter-card-hover: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) 10%,white 90%)}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:.5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.hex-icon-svg{position:relative;width:1.75rem;height:1.75rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.icon{font-weight:500!important;font-size:.75em!important}div.filter-card-hover:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .25s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;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:.85rem;height:.85rem;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"] }]
-        }] });
-const mapaSeverityColors = {
-    primary: '#0A8765', // Verde
-    secondary: '#0A3A78', // Azul escuro
-    tertiary: '#778599', // Cinza
-    info: '#0091C2', // Azul claro
-    warning: '#E1963D', // Amarelo
-    danger: '#B91C1C', // Laranja
-};
-
 class KvTagsComponent {
     constructor() {
         this.tags = input();
@@ -10886,6 +10790,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
+class KvFilterCardsFormatterPipe {
+    transform(value, formato) {
+        if (value == null)
+            return '';
+        switch (formato) {
+            case 'currency':
+                return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(value));
+            case 'percent':
+                return `${(Number(value) * 100).toFixed(0)}%`;
+            case 'decimal':
+                return new Intl.NumberFormat('pt-BR').format(Number(value));
+            case 'int':
+                return `${Math.round(Number(value))}`;
+            case 'date':
+                return new Intl.DateTimeFormat('pt-BR').format(new Date(value));
+            case 'text':
+            default:
+                return value.toString();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, name: "kvFilterCardsFormatter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'kvFilterCardsFormatter' }]
+        }] });
+
+class KvFilterCardsComponent {
+    constructor() {
+        // Lista de cards de filtro, cada um com um ícone e valor específico
+        this.cards = input();
+        this.staticCards = input(false);
+        this.cursorPointer = input(true);
+        this.selectedCards = model([]);
+        this.selectedCardsTratado = computed(() => {
+            const cardsSelecionados = this.selectedCards();
+            const cards = this.cards() ?? [];
+            if (!cardsSelecionados || cardsSelecionados.length === 0)
+                return [];
+            // Se for array de number, converte
+            if (typeof cardsSelecionados[0] === 'number') {
+                return cards.filter(c => cardsSelecionados.includes(c.id));
+            }
+            // Já é array de objeto
+            return cardsSelecionados;
+        });
+        this.loadingCards = input(false);
+        // Define se os cards devem ser exibidos em uma linha ou coluna
+        this.wrapCards = input(false);
+        // Define se os cards devem ser centralizados
+        this.alignCardsCenter = input(false);
+        this.onCardClick = output();
+        this.color = computed(() => (card) => {
+            const color = mapaSeverityColors[card.severity];
+            return color ? color : mapaSeverityColors.tertiary;
+        });
+        this.mixedColor = computed(() => (card) => {
+            return this.getTransparentMix(this.color()(card));
+        });
+    }
+    getTransparentMix(baseHex, opacity = 0.3) {
+        const r = parseInt(baseHex.slice(1, 3), 16);
+        const g = parseInt(baseHex.slice(3, 5), 16);
+        const b = parseInt(baseHex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    handleCardClick(card) {
+        this.onCardClick.emit(card);
+        this.selectedCards.update((raw) => {
+            let selected;
+            // Se vier como number[], converter usando this.cards()
+            if (typeof raw[0] === 'number') {
+                const allCards = this.cards() ?? [];
+                selected = allCards.filter(c => raw.includes(c.id));
+            }
+            else {
+                selected = raw;
+            }
+            const exists = selected.some(c => c.id === card.id);
+            const updated = exists
+                ? selected.filter(c => c.id !== card.id)
+                : [...selected, card];
+            return updated;
+        });
+    }
+    verificarSeCardEstaSelecionado(card) {
+        return this.selectedCardsTratado()?.find(c => c.id === card.id) !== undefined;
+    }
+    getColorFillPolygon(card) {
+        if (this.staticCards()) {
+            return 'var(--main-color)';
+        }
+        if (!this.selectedCardsTratado()?.includes(card)) {
+            return 'color-mix(in srgb, var(--mixed-color) 40%, white 60%)';
+        }
+        else {
+            return 'color-mix(in srgb, var(--mixed-color) 99%, white 1%)';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }, staticCards: { classPropertyName: "staticCards", publicName: "staticCards", isSignal: true, isRequired: false, transformFunction: null }, cursorPointer: { classPropertyName: "cursorPointer", publicName: "cursorPointer", 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: "<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-2 overflow-y-hidden\"\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\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)\r\n          ? 'filter-card-active'\r\n          : 'clickable',\r\n        staticCards() ? 'filter-card-active' : '',\r\n        !staticCards() && !verificarSeCardEstaSelecionado(card)\r\n          ? 'filter-card-hover'\r\n          : '',\r\n        cursorPointer() ? 'cursor-pointer' : ''\r\n      ]\"\r\n    >\r\n      <div class=\"filter-card-content\">\r\n        <div class=\"filter-card-title\">\r\n          <div class=\"flex flex-column\">\r\n            <div\r\n              style=\"font-weight: semibold; font-size: 0.75em\"\r\n              [style.color]=\"color()(card)\"\r\n            >\r\n              {{ card?.titulo }}\r\n            </div>\r\n\r\n            <div class=\"h-1rem\">\r\n              @if(loadingCards()){\r\n\r\n              <span class=\"loading-spinner\"></span>\r\n\r\n              } @else {\r\n\r\n              <span\r\n                class=\"flex align-items-center\"\r\n                [style.color]=\"color()(card)\"\r\n                style=\"font-size: 0.825em; font-weight: 600\"\r\n              >\r\n                {{ card.valor | kvFilterCardsFormatter : card.formato }}\r\n              </span>\r\n\r\n              }\r\n            </div>\r\n          </div>\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]=\"getColorFillPolygon(card)\"\r\n                points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\"\r\n                stroke=\"var(--main-color)\"\r\n                stroke-width=\"3\"\r\n                stroke-linejoin=\"round\"\r\n                stroke-linecap=\"round\"\r\n                opacity=\"0.8\"\r\n              />\r\n            </svg> -->\r\n\r\n            <div class=\"flex align-items-center justify-content-center p-2 border-round-lg transition-all transition-duration-300\" \r\n                 [style.backgroundColor]=\"getColorFillPolygon(card)\">\r\n              <span\r\n                [style.color]=\"'var(--main-color)'\"\r\n                class=\"material-symbols-outlined icon\"\r\n              >\r\n                {{ card?.icon }}\r\n              </span>\r\n            </div>\r\n\r\n          </div>\r\n\r\n          }\r\n        </div>\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{cursor:pointer;transition:all ease-in-out .2s;border:1px solid #cbd5e1;border-radius:.5rem;-webkit-user-select:none;user-select:none}.filter-card-hover:hover{background:#f8fafc;transition:border .3s ease,background-color .3s ease;border:var(--main-color) .5px solid}.filter-card-hover: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) 10%,white 90%)}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:.5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.hex-icon-svg{position:relative;width:1.75rem;height:1.75rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.icon{font-weight:500!important;font-size:.75em!important}div.filter-card-hover:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .25s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;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:.85rem;height:.85rem;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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-filter-cards', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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-2 overflow-y-hidden\"\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\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)\r\n          ? 'filter-card-active'\r\n          : 'clickable',\r\n        staticCards() ? 'filter-card-active' : '',\r\n        !staticCards() && !verificarSeCardEstaSelecionado(card)\r\n          ? 'filter-card-hover'\r\n          : '',\r\n        cursorPointer() ? 'cursor-pointer' : ''\r\n      ]\"\r\n    >\r\n      <div class=\"filter-card-content\">\r\n        <div class=\"filter-card-title\">\r\n          <div class=\"flex flex-column\">\r\n            <div\r\n              style=\"font-weight: semibold; font-size: 0.75em\"\r\n              [style.color]=\"color()(card)\"\r\n            >\r\n              {{ card?.titulo }}\r\n            </div>\r\n\r\n            <div class=\"h-1rem\">\r\n              @if(loadingCards()){\r\n\r\n              <span class=\"loading-spinner\"></span>\r\n\r\n              } @else {\r\n\r\n              <span\r\n                class=\"flex align-items-center\"\r\n                [style.color]=\"color()(card)\"\r\n                style=\"font-size: 0.825em; font-weight: 600\"\r\n              >\r\n                {{ card.valor | kvFilterCardsFormatter : card.formato }}\r\n              </span>\r\n\r\n              }\r\n            </div>\r\n          </div>\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]=\"getColorFillPolygon(card)\"\r\n                points=\"93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25\"\r\n                stroke=\"var(--main-color)\"\r\n                stroke-width=\"3\"\r\n                stroke-linejoin=\"round\"\r\n                stroke-linecap=\"round\"\r\n                opacity=\"0.8\"\r\n              />\r\n            </svg> -->\r\n\r\n            <div class=\"flex align-items-center justify-content-center p-2 border-round-lg transition-all transition-duration-300\" \r\n                 [style.backgroundColor]=\"getColorFillPolygon(card)\">\r\n              <span\r\n                [style.color]=\"'var(--main-color)'\"\r\n                class=\"material-symbols-outlined icon\"\r\n              >\r\n                {{ card?.icon }}\r\n              </span>\r\n            </div>\r\n\r\n          </div>\r\n\r\n          }\r\n        </div>\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{cursor:pointer;transition:all ease-in-out .2s;border:1px solid #cbd5e1;border-radius:.5rem;-webkit-user-select:none;user-select:none}.filter-card-hover:hover{background:#f8fafc;transition:border .3s ease,background-color .3s ease;border:var(--main-color) .5px solid}.filter-card-hover: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) 10%,white 90%)}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:.5rem;gap:.5rem}.filter-card-title{flex:1 1 0%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.hex-icon-svg{position:relative;width:1.75rem;height:1.75rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.icon{font-weight:500!important;font-size:.75em!important}div.filter-card-hover:hover .hex-icon-svg>svg>polygon{fill:var(--mixed-color)}polygon{transition:all ease-in-out .25s}#filter-card-container{container:filter-card-container/inline-size}.filter-card-size{flex:1 1 auto;padding:0 .25rem;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:.85rem;height:.85rem;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"] }]
+        }] });
+
 // Importação do componente que será declarado neste módulo
 class KvFilterCardsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterCardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -13999,5 +14011,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CDN_URLS, CUSTOM_FONTS, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DEBOUNCE_TIME, DEFAULT_KV_EDITOR_CONFIG, DEFAULT_QUILL_CONFIG, DocsService, DragDirective, DynamicInputDirective, ERROR_MESSAGES, FONT_SIZES, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvConfirmationModalComponent, KvConfirmationModalModule, KvContentViewerComponent, KvContentViewerModule, KvDetailedListComponent, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvIconComponent, KvIconModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStackedBarChartComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableDraggableComponent, KvTableDraggableModule, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTimelineComponent, KvTreeEnvironmentComponent, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWidgetCardComponent, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NoArvoreComponent, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
+export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CDN_URLS, CUSTOM_FONTS, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DEBOUNCE_TIME, DEFAULT_KV_EDITOR_CONFIG, DEFAULT_QUILL_CONFIG, DocsService, DragDirective, DynamicInputDirective, ERROR_MESSAGES, FONT_SIZES, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvConfirmationModalComponent, KvConfirmationModalModule, KvContentViewerComponent, KvContentViewerModule, KvDetailedListComponent, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvIconComponent, KvIconModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStackedBarChartComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableDraggableComponent, KvTableDraggableModule, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTimelineComponent, KvTreeEnvironmentComponent, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWidgetCardComponent, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NoArvoreComponent, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, createEnumUtils, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
 //# sourceMappingURL=keevo-components.mjs.map