mapa-library-ui 0.90.2 → 1.0.0

package/fesm2022/mapa-library-ui-src-lib-components-scale.mjs

@@ -0,0 +1,1055 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Input, Component, inject, DestroyRef, EnvironmentInjector, createComponent, HostListener, Directive, SecurityContext, Pipe, InjectionToken, Injector, signal, Optional, Inject, EventEmitter, Output, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import * as i1$1 from '@angular/platform-browser';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { Md5 } from 'ts-md5';
+import * as i2 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+function normalizeText(value) {
+    return (value || "").replace(/\s+/g, " ").trim();
+}
+function normalizeLookup(value) {
+    return normalizeText(value)
+        .toLocaleLowerCase()
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "");
+}
+function buildIndicatorCollections(indicators, options = {}) {
+    const collections = {
+        all: [],
+        positive: [],
+        negative: [],
+        precipitation: [],
+        negligence: [],
+    };
+    indicators.forEach((group) => {
+        const normalizedCompetenceName = normalizeLookup(group.competenceName);
+        const isPrecipitationRisk = normalizedCompetenceName.includes("precipita");
+        const isNegligenceRisk = normalizedCompetenceName.includes("neglig");
+        const isNegativeGroup = normalizedCompetenceName.includes("negativ");
+        group.indicators.forEach((indicator) => {
+            const item = buildIndicatorItem(indicator, {
+                includeDirectionSign: options.includeDirectionSign,
+                risk: isPrecipitationRisk || isNegligenceRisk,
+                precipitation: isPrecipitationRisk,
+                negligence: isNegligenceRisk,
+            });
+            collections.all.push(item);
+            if (isPrecipitationRisk) {
+                collections.precipitation.push(item);
+                return;
+            }
+            if (isNegligenceRisk) {
+                collections.negligence.push(item);
+                return;
+            }
+            if (isNegativeIndicator(item.direction, isNegativeGroup)) {
+                collections.negative.push(item);
+                return;
+            }
+            collections.positive.push(item);
+        });
+    });
+    return collections;
+}
+function buildDetailedIndicatorSections(indicators) {
+    return indicators
+        .map((group) => ({
+        title: normalizeText(group.competenceName),
+        items: group.indicators
+            .map((indicator) => ({
+            name: normalizeText(indicator.indicatorName || indicator.name),
+            concept: normalizeText(indicator.indicatorConcept || indicator.concept),
+            interval: indicator.interval || 0,
+            classificationId: indicator.classification?.classificationId || indicator.classificationId,
+            classificationName: indicator.classification?.classificationName || indicator.classificationName,
+            classificationColor: indicator.classification?.classificationColor || indicator.classificationColor,
+        }))
+            .filter((item) => !!item.name),
+    }))
+        .filter((section) => section.items.length > 0);
+}
+function buildIndicatorItem(indicator, options) {
+    const directionPrefix = getDirectionPrefix(indicator.direction, options.includeDirectionSign);
+    const name = normalizeText(indicator.indicatorName || indicator.name);
+    return {
+        ...indicator,
+        name: directionPrefix ? `${directionPrefix} ${name}` : name,
+        classificationId: indicator.classificationId || indicator.classification?.classificationId,
+        classificationName: indicator.classificationName || indicator.classification?.classificationName,
+        classificationColor: indicator.classificationColor || indicator.classification?.classificationColor,
+        classificationBg: indicator.classificationBg || indicator.classification?.classificationBg,
+        risk: options.risk,
+        precipitation: options.precipitation,
+        negligence: options.negligence,
+    };
+}
+function getDirectionPrefix(direction, includeDirectionSign) {
+    if (!includeDirectionSign) {
+        return "";
+    }
+    return isNegativeIndicator(direction) ? "\u2193" : "\u2191";
+}
+function isNegativeIndicator(direction, fallback = false) {
+    if (!direction) {
+        return fallback;
+    }
+    return normalizeLookup(direction).includes("negativ");
+}
+
+const CAPABILITY_CLASSIFICATION = [
+    {
+        id: 1,
+        name: "Destaque",
+        color: "#96f2ee",
+        positive: true,
+    },
+    {
+        id: 2,
+        name: "Satisfatório",
+        color: "#68ceee",
+        positive: true,
+    },
+    {
+        id: 3,
+        name: "Adequado",
+        color: "#2d9ced",
+        positive: true,
+    },
+    {
+        id: 4,
+        name: "A desenvolver",
+        color: "#0e6ece",
+        positive: true,
+    },
+    {
+        id: 5,
+        name: "Crítico baixo",
+        color: "#073e92",
+        positive: true,
+    },
+    {
+        id: 6,
+        name: "Merece atenção baixo",
+        color: "#f56580",
+        positive: false,
+    },
+    {
+        id: 7,
+        name: "Adequado",
+        color: "#f598a7",
+        positive: false,
+    },
+    {
+        id: 8,
+        name: "Merece atenção alto",
+        color: "#f4284e",
+        positive: false,
+    },
+    {
+        id: 9,
+        name: "Crítico alto",
+        color: "#c11c2f",
+        positive: false,
+    },
+];
+
+class CapabilityClassificationService {
+    getByItem(item) {
+        return (CAPABILITY_CLASSIFICATION.find((classification) => classification.id === item.classificationId) || CAPABILITY_CLASSIFICATION[0]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CapabilityClassificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CapabilityClassificationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CapabilityClassificationService, decorators: [{
+            type: Injectable
+        }] });
+
+class TagComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TagComponent, isStandalone: true, selector: "mapa-tag", inputs: { tag: "tag" }, ngImport: i0, template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-tag", standalone: true, imports: [CommonModule], template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"] }]
+        }], propDecorators: { tag: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
+
+var TooltipPosition;
+(function (TooltipPosition) {
+    TooltipPosition["ABOVE"] = "above";
+    TooltipPosition["BELOW"] = "below";
+    TooltipPosition["LEFT"] = "left";
+    TooltipPosition["RIGHT"] = "right";
+    TooltipPosition["DYNAMIC"] = "dynamic";
+    TooltipPosition["DEFAULT"] = "below";
+})(TooltipPosition || (TooltipPosition = {}));
+var TooltipTheme;
+(function (TooltipTheme) {
+    TooltipTheme["DARK"] = "dark";
+    TooltipTheme["LIGHT"] = "light";
+    TooltipTheme["DEFAULT"] = "light";
+})(TooltipTheme || (TooltipTheme = {}));
+
+class MapaTooltipComponent {
+    constructor() {
+        this.position = TooltipPosition.DEFAULT;
+        this.theme = TooltipTheme.DEFAULT;
+        this.visible = false;
+        this.left = 0;
+        this.top = 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaTooltipComponent, isStandalone: true, selector: "lib-tooltip", ngImport: i0, template: "<div\n  class=\"tooltip\"\n  [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n  [class.tooltip--visible]=\"visible\"\n  [style.left]=\"left + 'px'\"\n  [style.top]=\"top + 'px'\"\n>\n  <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:8px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0;z-index:999;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px}.tooltip :before,.tooltip :after{content:\"\";display:block;position:absolute;bottom:100%;width:1px;height:0}.tooltip :before{left:49%;border:8px solid transparent;border-bottom-color:#ddd}.tooltip :after{left:49.6%;border:7px solid transparent;border-bottom-color:#fff}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--dark{background-color:#000;color:#fff}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "lib-tooltip", imports: [CommonModule], standalone: true, template: "<div\n  class=\"tooltip\"\n  [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n  [class.tooltip--visible]=\"visible\"\n  [style.left]=\"left + 'px'\"\n  [style.top]=\"top + 'px'\"\n>\n  <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:8px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0;z-index:999;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px}.tooltip :before,.tooltip :after{content:\"\";display:block;position:absolute;bottom:100%;width:1px;height:0}.tooltip :before{left:49%;border:8px solid transparent;border-bottom-color:#ddd}.tooltip :after{left:49.6%;border:7px solid transparent;border-bottom-color:#fff}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--dark{background-color:#000;color:#fff}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
+        }] });
+
+class MapaTooltipDirective {
+    constructor(elementRef, appRef) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.position = TooltipPosition.DEFAULT;
+        this.theme = TooltipTheme.DEFAULT;
+        this.showDelay = 0;
+        this.hideDelay = 0;
+        this.componentRef = null;
+        this.destroyRef = inject(DestroyRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.destroyRef.onDestroy(() => this.destroy());
+    }
+    onMouseEnter() {
+        this.initializeTooltip();
+    }
+    onMouseLeave() {
+        this.setHideTooltipTimeout();
+    }
+    onMouseMove($event) {
+        if (this.componentRef !== null &&
+            this.position === TooltipPosition.DYNAMIC) {
+            this.componentRef.instance.left = $event.clientX;
+            this.componentRef.instance.top = $event.clientY;
+            this.componentRef.instance.tooltip = this.tooltip;
+        }
+    }
+    onTouchStart($event) {
+        $event.preventDefault();
+        window.clearTimeout(this.touchTimeout);
+        this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);
+    }
+    onTouchEnd() {
+        window.clearTimeout(this.touchTimeout);
+        this.setHideTooltipTimeout();
+    }
+    initializeTooltip() {
+        if (this.componentRef === null) {
+            window.clearTimeout(this.hideTimeout);
+            this.componentRef = createComponent(MapaTooltipComponent, {
+                environmentInjector: this.environmentInjector,
+            });
+            this.appRef.attachView(this.componentRef.hostView);
+            this.setTooltipComponentProperties();
+            document.body.appendChild(this.componentRef.location.nativeElement);
+            this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
+        }
+    }
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tooltip;
+            this.componentRef.instance.position = this.position;
+            this.componentRef.instance.theme = this.theme;
+            const { left, right, top, bottom, } = this.elementRef.nativeElement.getBoundingClientRect();
+            switch (this.position) {
+                case TooltipPosition.BELOW: {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(bottom);
+                    break;
+                }
+                case TooltipPosition.ABOVE: {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(top);
+                    break;
+                }
+                case TooltipPosition.RIGHT: {
+                    this.componentRef.instance.left = Math.round(right);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                case TooltipPosition.LEFT: {
+                    this.componentRef.instance.left = Math.round(left);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+    showTooltip() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.visible = true;
+        }
+    }
+    setHideTooltipTimeout() {
+        this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);
+    }
+    destroy() {
+        window.clearTimeout(this.showTimeout);
+        window.clearTimeout(this.hideTimeout);
+        window.clearTimeout(this.touchTimeout);
+        if (this.componentRef !== null) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: MapaTooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip", position: "position", theme: "theme", showDelay: "showDelay", hideDelay: "hideDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tooltip]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }], propDecorators: { tooltip: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], showDelay: [{
+                type: Input
+            }], hideDelay: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ["mousemove", ["$event"]]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ["touchstart", ["$event"]]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ["touchend"]
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
+
+class MapaCapabilityDotComponent {
+    constructor(classification) {
+        this.classification = classification;
+    }
+    createTag() {
+        return {
+            size: "small",
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityDotComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityDotComponent, isStandalone: true, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, providers: [CapabilityClassificationService], ngImport: i0, template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "directive", type: MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityDotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-dot", imports: [CommonModule, TagComponent, MapaTooltipDirective], providers: [CapabilityClassificationService], standalone: true, template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: CapabilityClassificationService }], propDecorators: { type: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], capability: [{
+                type: Input
+            }] } });
+
+function sanitizeHtmlContent(sanitizer, value) {
+    return sanitizer.sanitize(SecurityContext.HTML, value ?? "") ?? "";
+}
+class HtmlSanitizerService {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    sanitize(value) {
+        return sanitizeHtmlContent(this.sanitizer, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
+class SafeHtmlPipe {
+    constructor(htmlSanitizer) {
+        this.htmlSanitizer = htmlSanitizer;
+    }
+    transform(value) {
+        return this.htmlSanitizer.sanitize(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeHtml",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
+
+const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+const MAPA_UI_DEFAULT_TEXTS = {
+    common: {
+        selectAll: "Selecionar todos",
+    },
+    filters: {
+        clear: "Limpar filtros",
+        submit: "Filtrar",
+    },
+    datepicker: {
+        startDatePlaceholder: "Data inicial",
+        endDatePlaceholder: "Data final",
+    },
+    capability: {
+        groupAverageTitle: "Média geral do grupo",
+        individualAverageTitle: "Média geral do indivíduo",
+        conceptTitle: "Conceito",
+        resultTitle: "Resultado",
+        positiveIndicatorsTitle: "Indicadores positivos",
+        negativeIndicatorsTitle: "Indicadores negativos",
+        riskIndicatorsTitle: "Indicadores de risco",
+        precipitationRiskTitle: "Risco de acidente por precipitação",
+        negligenceRiskTitle: "Risco de acidente por negligência",
+        negativeDirectionLabel: "Direção Negativa |",
+        positiveDirectionLabel: "Direção Positiva |",
+    },
+    paginator: {
+        itemsPerPage: "Itens por página",
+        nextPage: "Próxima página",
+        previousPage: "Página anterior",
+        rangeLabel: (page, pageSize, length) => {
+            if (length === 0 || pageSize === 0) {
+                return `0 de ${length}`;
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            return `${startIndex + 1} - ${endIndex} de ${length}`;
+        },
+        showingRangeLabel: (page, pageSize, length) => {
+            if (length === 0) {
+                return "Mostrando 0 - 0 de 0 item";
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            const itemLabel = length === 1 ? "item" : "itens";
+            return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
+        },
+    },
+    validation: {
+        cnpj: "CNPJ inválido",
+        cpf: "CPF inválido",
+        email: "E-mail inválido",
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        min: (context) => `O valor minimo permitido é ${context?.min ?? ""}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        pattern: "Formato inválido",
+        required: "Campo obrigatório",
+    },
+};
+function mergeMapaUiTexts(customTexts) {
+    return {
+        common: {
+            ...MAPA_UI_DEFAULT_TEXTS.common,
+            ...(customTexts?.common ?? {}),
+        },
+        filters: {
+            ...MAPA_UI_DEFAULT_TEXTS.filters,
+            ...(customTexts?.filters ?? {}),
+        },
+        datepicker: {
+            ...MAPA_UI_DEFAULT_TEXTS.datepicker,
+            ...(customTexts?.datepicker ?? {}),
+        },
+        capability: {
+            ...MAPA_UI_DEFAULT_TEXTS.capability,
+            ...(customTexts?.capability ?? {}),
+        },
+        paginator: {
+            ...MAPA_UI_DEFAULT_TEXTS.paginator,
+            ...(customTexts?.paginator ?? {}),
+        },
+        validation: {
+            ...MAPA_UI_DEFAULT_TEXTS.validation,
+            ...(customTexts?.validation ?? {}),
+        },
+    };
+}
+function provideMapaUiTexts(texts) {
+    return {
+        provide: MAPA_UI_TEXTS,
+        useValue: texts,
+    };
+}
+
+class MapaI18nService {
+    constructor(customTexts) {
+        this.injector = inject(Injector);
+        this.textsState = signal(mergeMapaUiTexts(), ...(ngDevMode ? [{ debugName: "textsState" }] : []));
+        this.textsSignal = this.textsState.asReadonly();
+        this.texts$ = toObservable(this.textsSignal, { injector: this.injector });
+        if (customTexts) {
+            this.textsState.set(mergeMapaUiTexts(customTexts));
+        }
+    }
+    get texts() {
+        return this.textsState();
+    }
+    setTexts(texts) {
+        this.textsState.set(mergeMapaUiTexts(texts));
+    }
+    resolveValidationText(key, context) {
+        return this.resolveText(this.texts.validation[key], context);
+    }
+    resolveText(value, context) {
+        return typeof value === "function" ? value(context) : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAPA_UI_TEXTS]
+                }] }] });
+
+class MapaCapabilityExpandComponent {
+    constructor(classification, i18n) {
+        this.classification = classification;
+        this.i18n = i18n;
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get conceptTitle() {
+        return this.texts.capability.conceptTitle;
+    }
+    get resultTitle() {
+        return this.texts.capability.resultTitle;
+    }
+    get negativeDirectionLabel() {
+        return this.texts.capability.negativeDirectionLabel;
+    }
+    get positiveDirectionLabel() {
+        return this.texts.capability.positiveDirectionLabel;
+    }
+    createTag(item) {
+        return {
+            bgColor: item.classificationBg || "",
+            fontSize: item.classificationFontSize || "",
+            size: "small",
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: CapabilityClassificationService }, { token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityExpandComponent, isStandalone: true, selector: "mapa-capability-expand", inputs: { data: "data" }, providers: [CapabilityClassificationService], ngImport: i0, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-expand", imports: [CommonModule, TagComponent, MapaCapabilityDotComponent, SafeHtmlPipe], providers: [CapabilityClassificationService], standalone: true, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"] }]
+        }], ctorParameters: () => [{ type: CapabilityClassificationService }, { type: MapaI18nService }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityIndicatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityIndicatorComponent, isStandalone: true, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-indicator", imports: [CommonModule], standalone: true, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityIntervalComponent {
+    constructor() {
+        this.SVG = [
+            { x: 0, y: 0.710938, width: 16, height: 30 },
+            { x: 22.5039, y: 0.710938, width: 16, height: 30 },
+            { x: 45.0078, y: 0.710938, width: 16, height: 30 },
+            { x: 66.9629, y: 0.710938, width: 16, height: 30 },
+            { x: 88.917, y: 0.710938, width: 16, height: 30 },
+            { x: 110.872, y: 0.710938, width: 16, height: 30 },
+            { x: 132.827, y: 0.710938, width: 16, height: 30 },
+            { x: 154.782, y: 0.710938, width: 16, height: 30 },
+            { x: 176.736, y: 0.710938, width: 16, height: 30 },
+            { x: 199.24, y: 0.710938, width: 16, height: 30 },
+        ];
+        this.hasTransform = false;
+        this.indexTransform = 0;
+    }
+    ngOnChanges(changes) {
+        const interval = this.data.interval || 0;
+        this.hasTransform = interval % 10 > 0;
+        this.indexTransform = (Math.floor(interval / 10) % 10);
+        this.paintLinear = `linear_${Md5.hashStr(`svg_${interval}`)}`;
+    }
+    ngOnInit() {
+    }
+    getWidth(index) {
+        if (!this.data)
+            return 0;
+        const interval = this.data.interval || 0;
+        const intervalMod10 = Math.floor(interval / 10) % 10;
+        return index < intervalMod10
+            ? 100
+            : index === intervalMod10
+                ? (interval % 10) * 10
+                : 0;
+    }
+    getFill(i) {
+        const width = this.getWidth(i);
+        if (width === 100)
+            return "#8C8F94";
+        return "#DCDCDE";
+    }
+    getFillGradient() {
+        return `url(#${this.paintLinear})`;
+    }
+    getTransform(i) {
+        const width = this.getWidth(i);
+        if (width === 0 || width === 100)
+            return "";
+        return `rotate(-180 ${this.SVG[i].x} ${this.SVG[i].y})`;
+    }
+    getStartOffset() {
+        const interval = this.data.interval || 0;
+        return Number(`0.${interval % 10}73005`);
+    }
+    getStopOffset() {
+        const interval = this.data.interval || 0;
+        return Number(`0.${interval % 10}73105`);
+    }
+    getGradientX() {
+        return Math.floor(this.SVG[this.indexTransform].x);
+    }
+    isSVG() {
+        return !!this.data.classificationBg && this.data.classificationBg === "SVG";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityIntervalComponent, isStandalone: true, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-interval", imports: [CommonModule], standalone: true, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }], showInterval: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityIntervalBarComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+        this.isHovering = false;
+        this.isClicked = false;
+    }
+    isSVG() {
+        return !!this.data.classificationBg && this.data.classificationBg === "SVG";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityIntervalBarComponent, isStandalone: true, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section reusable-outlet class=\"capability-interval\">\n  <section [class.capability-interval__bar]=\"isSVG()\">\n    <mapa-capability-interval\n      [data]=\"data\"\n      [showInterval]=\"showInterval\"\n    ></mapa-capability-interval>\n  </section>\n</section>\n", styles: [".capability-interval{display:flex;align-items:center;position:relative;height:72px;margin-right:16px}.capability-interval__bar{display:flex;align-items:center;justify-content:center;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}:host ::ng-deep .capability-interval__show-more mapa-button,:host ::ng-deep .capability-interval__show-more button{width:100%;justify-content:flex-end!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-interval-bar", imports: [CommonModule, MapaCapabilityIntervalComponent], standalone: true, template: "<section reusable-outlet class=\"capability-interval\">\n  <section [class.capability-interval__bar]=\"isSVG()\">\n    <mapa-capability-interval\n      [data]=\"data\"\n      [showInterval]=\"showInterval\"\n    ></mapa-capability-interval>\n  </section>\n</section>\n", styles: [".capability-interval{display:flex;align-items:center;position:relative;height:72px;margin-right:16px}.capability-interval__bar{display:flex;align-items:center;justify-content:center;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}:host ::ng-deep .capability-interval__show-more mapa-button,:host ::ng-deep .capability-interval__show-more button{width:100%;justify-content:flex-end!important}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], showInterval: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class MapaCapabilityComparativeIndicatorComponent {
+    getWidth(item) {
+        return 32 + (item.interval || 0) * 2 + "px";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityComparativeIndicatorComponent, isStandalone: true, selector: "mapa-capability-comparative-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n  class=\"comparative-indicator\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n  <div class=\"comparative-indicator__interval\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-comparative-indicator", imports: [CommonModule], standalone: true, template: "<div\n  class=\"comparative-indicator\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n  <div class=\"comparative-indicator__interval\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeChartComponent {
+    setCleanItem(item) {
+        return {
+            average: item.average,
+            interval: item.interval,
+            classificationId: item.classificationId,
+            classificationColor: item.classificationColor,
+            isIndividually: item.isIndividually,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityComparativeChartComponent, isStandalone: true, selector: "mapa-capability-comparative-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"capability-comparative__chart\">\n  <tr *ngFor=\"let indicator of data.indicators\">\n    <th>\n      <p>{{ indicator.name }}</p>\n    </th>\n    <td class=\"capability-comparative__chart--indicators\">\n      <mapa-capability-comparative-indicator\n        *ngFor=\"let item of indicator.items\"\n        [item]=\"setCleanItem(item)\"\n        [fullWidth]=\"true\"\n        [style.width.%]=\"item.interval\"\n      ></mapa-capability-comparative-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".capability-comparative{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaCapabilityComparativeIndicatorComponent, selector: "mapa-capability-comparative-indicator", inputs: ["item", "fullWidth"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-capability-comparative-chart', imports: [CommonModule, MapaCapabilityComparativeIndicatorComponent], standalone: true, template: "<table class=\"capability-comparative__chart\">\n  <tr *ngFor=\"let indicator of data.indicators\">\n    <th>\n      <p>{{ indicator.name }}</p>\n    </th>\n    <td class=\"capability-comparative__chart--indicators\">\n      <mapa-capability-comparative-indicator\n        *ngFor=\"let item of indicator.items\"\n        [item]=\"setCleanItem(item)\"\n        [fullWidth]=\"true\"\n        [style.width.%]=\"item.interval\"\n      ></mapa-capability-comparative-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".capability-comparative{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeHeaderComponent {
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get groupAverageTitle() {
+        return this.texts.capability.groupAverageTitle;
+    }
+    get individualAverageTitle() {
+        return this.texts.capability.individualAverageTitle;
+    }
+    getCapabilityData(item) {
+        return {
+            interval: item,
+            items: [],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityComparativeHeaderComponent, isStandalone: true, selector: "mapa-capability-comparative-header", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability-comparative__header\">\n  <h1>{{ data.name }}</h1>\n\n  <section>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">{{ groupAverageTitle }}</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.groupAvg)\"\n        [showInterval]=\"true\"\n      ></mapa-capability-interval>\n    </div>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">{{ individualAverageTitle }}</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.individualAvg)\"\n        [showInterval]=\"true\"\n      ></mapa-capability-interval>\n    </div>\n  </section>\n</section>\n\n\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-capability-comparative-header', imports: [CommonModule, MapaCapabilityIntervalComponent], standalone: true, template: "<section class=\"capability-comparative__header\">\n  <h1>{{ data.name }}</h1>\n\n  <section>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">{{ groupAverageTitle }}</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.groupAvg)\"\n        [showInterval]=\"true\"\n      ></mapa-capability-interval>\n    </div>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">{{ individualAverageTitle }}</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.individualAvg)\"\n        [showInterval]=\"true\"\n      ></mapa-capability-interval>\n    </div>\n  </section>\n</section>\n\n\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityComparativeComponent, isStandalone: true, selector: "mapa-capability-comparative", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability-comparative\">\n  <mapa-capability-comparative-header\n    [data]=\"data\"\n  ></mapa-capability-comparative-header>\n  <mapa-capability-comparative-chart\n    [data]=\"data\"\n  ></mapa-capability-comparative-chart>\n</section>\n", styles: [".capability-comparative{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;margin:auto}.capability-comparative__header{align-items:flex-start!important;flex-direction:column!important}.capability-comparative__header section{display:flex;gap:24px}\n"], dependencies: [{ kind: "component", type: MapaCapabilityComparativeChartComponent, selector: "mapa-capability-comparative-chart", inputs: ["data"] }, { kind: "component", type: MapaCapabilityComparativeHeaderComponent, selector: "mapa-capability-comparative-header", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityComparativeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-comparative", imports: [
+                        MapaCapabilityComparativeChartComponent,
+                        MapaCapabilityComparativeHeaderComponent,
+                    ], standalone: true, template: "<section class=\"capability-comparative\">\n  <mapa-capability-comparative-header\n    [data]=\"data\"\n  ></mapa-capability-comparative-header>\n  <mapa-capability-comparative-chart\n    [data]=\"data\"\n  ></mapa-capability-comparative-chart>\n</section>\n", styles: [".capability-comparative{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;margin:auto}.capability-comparative__header{align-items:flex-start!important;flex-direction:column!important}.capability-comparative__header section{display:flex;gap:24px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityDetailComponent {
+    constructor(classification) {
+        this.classification = classification;
+        this.expanded = new Set();
+        this.showTagInterval = true;
+    }
+    ngOnInit() {
+        this.syncExpandedState();
+    }
+    ngAfterViewInit() {
+        this.syncExpandedState();
+    }
+    ngOnChanges(changes) {
+        if (changes["data"] || changes["isExpanded"]) {
+            this.syncExpandedState();
+        }
+    }
+    syncExpandedState() {
+        if (this.isExpanded) {
+            this.expanded = new Set(this.data.map((_, i) => i));
+            this.accordion?.openAll();
+            return;
+        }
+        this.expanded.clear();
+        this.accordion?.closeAll();
+    }
+    sortItemsByinterval(items) {
+        return [...(items ?? [])].sort((a, b) => (b.interval ?? 0) - (a.interval ?? 0));
+    }
+    showMore(index) {
+        if (this.expanded.has(index)) {
+            this.expanded.delete(index);
+        }
+        else {
+            this.expanded.add(index);
+        }
+    }
+    toggleAll() {
+        if (this.expanded.size === this.data.length) {
+            this.expanded.clear();
+            this.accordion.closeAll();
+        }
+        else {
+            this.expanded = new Set(this.data.map((_, i) => i));
+            this.accordion.openAll();
+        }
+    }
+    createTag(item) {
+        return {
+            bgColor: item.classificationBg || "",
+            fontSize: item.classificationFontSize || "",
+            size: "small",
+        };
+    }
+    isSVG(item) {
+        return !!item.classificationBg && item.classificationBg === "SVG";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaCapabilityDetailComponent, isStandalone: true, selector: "mapa-capability-detail", inputs: { data: "data", showTags: "showTags", showProgressBar: "showProgressBar", showInterval: "showInterval", isExpanded: "isExpanded" }, providers: [CapabilityClassificationService], viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  @for (capability of data; track capability; let i = $index) {\n    <mat-expansion-panel [expanded]=\"expanded.has(i)\">\n      <mat-expansion-panel-header>\n        <div class=\"capability__item--header\">\n          <div class=\"capability__item--title-dots\">\n            <div class=\"capability__item--title display-L\">\n              {{ capability.name }}\n              @if (showTags) {\n                <span class=\"capability__item--title-tag\">\n                  <mapa-tag [tag]=\"createTag(capability)\">\n                    @if (capability.classificationColor) {\n                      <mapa-capability-dot\n                        [item]=\"capability\"\n                        [capability]=\"capability\"\n                      ></mapa-capability-dot>\n                    }\n                    {{ capability.classificationName }}\n                  </mapa-tag>\n                </span>\n              }\n            </div>\n\n            @if (isSVG(capability)) {\n              <div class=\"capability__item--dots\">\n                @for (item of sortItemsByinterval(capability.items); track item) {\n                  <mapa-capability-dot\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"capability\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                }\n              </div>\n            }\n          </div>\n\n          <div [class.capability__item--interval]=\"showProgressBar\">\n            <mapa-capability-interval-bar\n              [data]=\"capability\"\n              [expanded]=\"expanded.has(i)\"\n              [showInterval]=\"showInterval\"\n              (clicked)=\"showMore(i)\"\n            ></mapa-capability-interval-bar>\n          </div>\n        </div>\n      </mat-expansion-panel-header>\n      <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n    </mat-expansion-panel>\n  }\n</mat-accordion>\n", styles: [":host ::ng-deep .capability-detail .mat-expansion-panel{border-radius:0!important}:host ::ng-deep .capability-detail .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}:host ::ng-deep .capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}:host ::ng-deep .capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}:host ::ng-deep .capability{border-radius:16px}:host ::ng-deep .capability h1{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400;line-height:40px}:host ::ng-deep .capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}:host ::ng-deep .capability__item{padding:24px;position:relative}:host ::ng-deep .capability__item:hover{box-shadow:0 4px 4px #00000021}:host ::ng-deep .capability__item:not(:only-child){border-bottom:1px solid #dcdcde}:host ::ng-deep .capability__item:first-child{border-radius:16px 16px 0 0}:host ::ng-deep .capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}:host ::ng-deep .capability__item--hide{opacity:0;max-height:0;height:0}:host ::ng-deep .capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}:host ::ng-deep .capability__item--show{opacity:1;max-height:100%;height:100%}:host ::ng-deep .capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}:host ::ng-deep .capability__item--title{display:flex;align-items:center;white-space:nowrap}:host ::ng-deep .capability__item--title-tag{margin-left:34px}:host ::ng-deep .capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}:host ::ng-deep .capability__item--title-dots .display-L{margin-bottom:10px}:host ::ng-deep .capability__item--dots{display:flex}:host ::ng-deep .capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-detail", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TagComponent,
+                        MatExpansionModule,
+                        MapaCapabilityDotComponent,
+                        MapaCapabilityIntervalBarComponent,
+                        MapaCapabilityExpandComponent,
+                    ], providers: [CapabilityClassificationService], standalone: true, template: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  @for (capability of data; track capability; let i = $index) {\n    <mat-expansion-panel [expanded]=\"expanded.has(i)\">\n      <mat-expansion-panel-header>\n        <div class=\"capability__item--header\">\n          <div class=\"capability__item--title-dots\">\n            <div class=\"capability__item--title display-L\">\n              {{ capability.name }}\n              @if (showTags) {\n                <span class=\"capability__item--title-tag\">\n                  <mapa-tag [tag]=\"createTag(capability)\">\n                    @if (capability.classificationColor) {\n                      <mapa-capability-dot\n                        [item]=\"capability\"\n                        [capability]=\"capability\"\n                      ></mapa-capability-dot>\n                    }\n                    {{ capability.classificationName }}\n                  </mapa-tag>\n                </span>\n              }\n            </div>\n\n            @if (isSVG(capability)) {\n              <div class=\"capability__item--dots\">\n                @for (item of sortItemsByinterval(capability.items); track item) {\n                  <mapa-capability-dot\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"capability\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                }\n              </div>\n            }\n          </div>\n\n          <div [class.capability__item--interval]=\"showProgressBar\">\n            <mapa-capability-interval-bar\n              [data]=\"capability\"\n              [expanded]=\"expanded.has(i)\"\n              [showInterval]=\"showInterval\"\n              (clicked)=\"showMore(i)\"\n            ></mapa-capability-interval-bar>\n          </div>\n        </div>\n      </mat-expansion-panel-header>\n      <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n    </mat-expansion-panel>\n  }\n</mat-accordion>\n", styles: [":host ::ng-deep .capability-detail .mat-expansion-panel{border-radius:0!important}:host ::ng-deep .capability-detail .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}:host ::ng-deep .capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}:host ::ng-deep .capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}:host ::ng-deep .capability{border-radius:16px}:host ::ng-deep .capability h1{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400;line-height:40px}:host ::ng-deep .capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}:host ::ng-deep .capability__item{padding:24px;position:relative}:host ::ng-deep .capability__item:hover{box-shadow:0 4px 4px #00000021}:host ::ng-deep .capability__item:not(:only-child){border-bottom:1px solid #dcdcde}:host ::ng-deep .capability__item:first-child{border-radius:16px 16px 0 0}:host ::ng-deep .capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}:host ::ng-deep .capability__item--hide{opacity:0;max-height:0;height:0}:host ::ng-deep .capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}:host ::ng-deep .capability__item--show{opacity:1;max-height:100%;height:100%}:host ::ng-deep .capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}:host ::ng-deep .capability__item--title{display:flex;align-items:center;white-space:nowrap}:host ::ng-deep .capability__item--title-tag{margin-left:34px}:host ::ng-deep .capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}:host ::ng-deep .capability__item--title-dots .display-L{margin-bottom:10px}:host ::ng-deep .capability__item--dots{display:flex}:host ::ng-deep .capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: CapabilityClassificationService }], propDecorators: { data: [{
+                type: Input
+            }], showTags: [{
+                type: Input
+            }], showProgressBar: [{
+                type: Input
+            }], showInterval: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], accordion: [{
+                type: ViewChild,
+                args: ["detailAccordion"]
+            }] } });
+
+class MapaCapabilityIndicatorListComponent {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.dataPositive = [];
+        this.dataNegative = [];
+        this.dataRiskPrecipitation = [];
+        this.dataRiskNegligence = [];
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get positiveIndicatorsTitle() {
+        return this.texts.capability.positiveIndicatorsTitle;
+    }
+    get negativeIndicatorsTitle() {
+        return this.texts.capability.negativeIndicatorsTitle;
+    }
+    get riskIndicatorsTitle() {
+        return this.texts.capability.riskIndicatorsTitle;
+    }
+    get precipitationRiskTitle() {
+        return this.texts.capability.precipitationRiskTitle;
+    }
+    get negligenceRiskTitle() {
+        return this.texts.capability.negligenceRiskTitle;
+    }
+    ngOnInit() {
+        this.buildIndicatorGroups();
+    }
+    ngOnChanges(changes) {
+        if (changes["data"]) {
+            this.buildIndicatorGroups();
+        }
+    }
+    buildIndicatorGroups() {
+        this.dataPositive = this.data.filter((item) => item.direction === "Positiva" && !item.risk);
+        this.dataNegative = this.data.filter((item) => item.direction === "Negativa" && !item.risk);
+        this.dataRiskPrecipitation = this.data.filter((item) => item.risk === true && item.precipitation === true);
+        this.dataRiskNegligence = this.data.filter((item) => item.risk === true && item.negligence === true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityIndicatorListComponent, isStandalone: true, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>{{ positiveIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>{{ negativeIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>{{ riskIndicatorsTitle }}</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>{{ precipitationRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>{{ negligenceRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-indicator-list", imports: [CommonModule, MapaCapabilityIndicatorComponent], standalone: true, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>{{ positiveIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>{{ negativeIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>{{ riskIndicatorsTitle }}</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>{{ precipitationRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>{{ negligenceRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityIndicatorChartComponent {
+    constructor(classification) {
+        this.classification = classification;
+    }
+    setUnlabeledItem(item) {
+        return {
+            classificationId: item.classificationId,
+            classificationColor: item.classificationColor,
+            interval: item.interval,
+        };
+    }
+    getWidth(item) {
+        const minWidth = 42;
+        const interval = (item.interval || 0);
+        if (interval < 10)
+            return minWidth + 'px';
+        return interval + '%';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaCapabilityIndicatorChartComponent, isStandalone: true, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, providers: [CapabilityClassificationService], ngImport: i0, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [":host ::ng-deep .indicator-chart{width:100%;border-collapse:collapse}:host ::ng-deep .indicator-chart tr:first-child{border-top:unset!important}:host ::ng-deep .indicator-chart tr:last-child{border-bottom:unset!important}:host ::ng-deep .indicator-chart__column{padding:0;font-size:14px!important}:host ::ng-deep .indicator-chart__column--description{padding-right:24px;width:20%!important}:host ::ng-deep .indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}:host ::ng-deep .indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}:host ::ng-deep .indicator-chart__column--positive .indicator__classification{margin-right:1px!important}:host ::ng-deep .indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}:host ::ng-deep .indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}:host ::ng-deep .indicator-chart__column--negative .indicator__classification{margin-left:1px!important}:host ::ng-deep .indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}:host ::ng-deep .indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-indicator-chart", imports: [CommonModule, MapaCapabilityIndicatorComponent], providers: [CapabilityClassificationService], standalone: true, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [":host ::ng-deep .indicator-chart{width:100%;border-collapse:collapse}:host ::ng-deep .indicator-chart tr:first-child{border-top:unset!important}:host ::ng-deep .indicator-chart tr:last-child{border-bottom:unset!important}:host ::ng-deep .indicator-chart__column{padding:0;font-size:14px!important}:host ::ng-deep .indicator-chart__column--description{padding-right:24px;width:20%!important}:host ::ng-deep .indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}:host ::ng-deep .indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}:host ::ng-deep .indicator-chart__column--positive .indicator__classification{margin-right:1px!important}:host ::ng-deep .indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}:host ::ng-deep .indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}:host ::ng-deep .indicator-chart__column--negative .indicator__classification{margin-left:1px!important}:host ::ng-deep .indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}:host ::ng-deep .indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: CapabilityClassificationService }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui capability-detail
+ */
+
+class MapaProgressbarComponent {
+    constructor() {
+        this.showInterval = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaProgressbarComponent, isStandalone: true, selector: "mapa-progressbar", inputs: { data: "data", showInterval: "showInterval" }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaProgressbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-progressbar", imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], showInterval: [{
+                type: Input
+            }] } });
+
+class MapaScaleComponent {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.showProgressbar = true;
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get conceptTitle() {
+        return this.texts.capability.conceptTitle;
+    }
+    getProgressbarData(scale) {
+        return {
+            interval: scale.interval,
+            classification: scale.classification,
+        };
+    }
+    getIntervalbarData(scale) {
+        return {
+            interval: scale.interval,
+            classificationBg: scale.classification?.classificationBg,
+            items: scale.dimensions,
+        };
+    }
+    isPositive(dimension) {
+        return dimension.direction === "Positiva";
+    }
+    showSummarized(scale) {
+        return scale?.scaleConcept === undefined;
+    }
+    getCompetenceImg(competence) {
+        let img = "";
+        if (competence.competenceName.includes("Gestão")) {
+            img = "UsersThree";
+        }
+        if (competence.competenceName.includes("Autogestão")) {
+            img = "Brain";
+        }
+        if (competence.competenceName.includes("Relacionamento")) {
+            img = "Handshake";
+        }
+        if (competence.competenceName.includes("Atividade")) {
+            img = "ListCheck";
+        }
+        if (competence.competenceName.includes("Corporais")) {
+            img = "Warning";
+        }
+        return `assets/images/icons/${img}.svg`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaScaleComponent, isStandalone: true, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaScaleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-scale", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MapaCapabilityIntervalBarComponent,
+                        MapaProgressbarComponent,
+                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
+                type: Input
+            }], showProgressbar: [{
+                type: Input
+            }] } });
+
+class MapaDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaDetailsComponent, isStandalone: true, selector: "mapa-details", ngImport: i0, template: "<ng-container></ng-container>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-details", standalone: true, template: "<ng-container></ng-container>\n" }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui scale
+ */
+
+/*
+ * Public API Surface of mapa-library-ui scale
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MapaDetailsComponent, MapaProgressbarComponent, MapaScaleComponent };
+//# sourceMappingURL=mapa-library-ui-src-lib-components-scale.mjs.map