mapa-library-ui 0.0.11 → 0.0.12

package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs

@@ -1,11 +1,208 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import { Component, ViewEncapsulation, Directive, Input, HostListener, NgModule, EventEmitter, Output, Injectable } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/platform-browser';
+import * as i2$1 from 'mapa-library-ui/src/lib/components/button';
+import { MapaButtonModule as MapaButtonModule$1 } from 'mapa-library-ui/src/lib/components/button';
+import * as i3 from 'mapa-library-ui/src/lib/components/checkbox';
+import { MapaCheckboxModule } from 'mapa-library-ui/src/lib/components/checkbox';
+import * as i4 from 'mapa-library-ui/src/lib/components/dropdown';
+import { MapaDropdownModule } from 'mapa-library-ui/src/lib/components/dropdown';
+import * as i5 from 'mapa-library-ui/src/lib/components/input';
+import { MapaInputModule } from 'mapa-library-ui/src/lib/components/input';
+import * as i1$2 from '@angular/router';
+import { NavigationStart } from '@angular/router';
+
+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;
+    }
+    ngOnInit() { }
+}
+MapaTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTooltipComponent, 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:4px;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{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tooltip', encapsulation: ViewEncapsulation.None, 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:4px;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{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.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"] }]
+        }], ctorParameters: function () { return []; } });
+
+class MapaTooltipDirective {
+    constructor(elementRef, appRef, componentFactoryResolver, injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.position = TooltipPosition.DEFAULT;
+        this.theme = TooltipTheme.DEFAULT;
+        this.showDelay = 0;
+        this.hideDelay = 0;
+        this.componentRef = null;
+    }
+    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.clearInterval(this.hideDelay);
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MapaTooltipComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            const [tooltipDOMElement] = this.componentRef
+                .hostView.rootNodes;
+            this.setTooltipComponentProperties();
+            document.body.appendChild(tooltipDOMElement);
+            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);
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            window.clearInterval(this.showTimeout);
+            window.clearInterval(this.hideDelay);
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+MapaTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+MapaTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MapaTooltipDirective, 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: "15.2.10", ngImport: i0, type: MapaTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tooltip]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, 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"]
+            }] } });
+
+class MapaTooltipModule {
+}
+MapaTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipModule, declarations: [MapaTooltipComponent, MapaTooltipDirective], imports: [CommonModule], exports: [MapaTooltipComponent, MapaTooltipDirective] });
+MapaTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaTooltipComponent, MapaTooltipDirective],
+                    exports: [MapaTooltipComponent, MapaTooltipDirective],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
 
 class ButtonComponent {
     constructor() {
@@ -58,12 +255,12 @@ class IconComponent {
         this.matIconRegistry.addSvgIcon(svg, this.domSanitizer.bypassSecurityTrustResourceUrl(`../../../../assets/${svg}.svg`));
     }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-icon', template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { svg: [{
+        }], ctorParameters: function () { return [{ type: i1$1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { svg: [{
                 type: Input
             }] } });
 
@@ -85,13 +282,439 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui icon
  */
 
+const CapabilityGrade = [
+    {
+        grade: 100,
+        description: "Destaque",
+        color: "#96f2ee",
+        positive: true,
+    },
+    {
+        grade: 90,
+        description: "Destaque",
+        color: "#96f2ee",
+        positive: true,
+    },
+    {
+        grade: 80,
+        description: "Satisfatório",
+        color: "#68ceee",
+        positive: true,
+    },
+    {
+        grade: 70,
+        description: "Adequado",
+        color: "#2d9ced",
+        positive: true,
+    },
+    {
+        grade: 50,
+        description: "A desenvolver",
+        color: "#0e6ece",
+        positive: true,
+    },
+    {
+        grade: 40,
+        description: "Crítico baixo",
+        color: "#073e92",
+        positive: true,
+    },
+    {
+        grade: -10,
+        description: "Merece atenção baixo",
+        color: "#f56580",
+        positive: false,
+    },
+    {
+        grade: -20,
+        description: "Adequado",
+        color: "#f598a7",
+        positive: false,
+    },
+    {
+        grade: -30,
+        description: "Merece atenção alto",
+        color: "#f4284e",
+        positive: false,
+    },
+    {
+        grade: -40,
+        description: "Crítico alto",
+        color: "#c11c2f",
+        positive: false,
+    },
+];
+
+class TagComponent {
+}
+TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagComponent, selector: "mapa-tag", inputs: { color: "color", size: "size" }, ngImport: i0, template: "<div\n  class=\"tag\"\n  [class.tag--small]=\"size === 'small'\"\n  [class.tag--highlight]=\"color === 'highlight'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".tag{display:flex;align-items:center;border-radius:16px;border:1px solid #cdcdcd;background:#fff;padding:8px 12px;line-height:24px;font-weight:300}.tag--highlight{border:2px solid #eedb2a}.tag--small{gap:8px;padding:2px 8px 2px 3px!important;font-size:12px;height:18px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-tag', template: "<div\n  class=\"tag\"\n  [class.tag--small]=\"size === 'small'\"\n  [class.tag--highlight]=\"color === 'highlight'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".tag{display:flex;align-items:center;border-radius:16px;border:1px solid #cdcdcd;background:#fff;padding:8px 12px;line-height:24px;font-weight:300}.tag--highlight{border:2px solid #eedb2a}.tag--small{gap:8px;padding:2px 8px 2px 3px!important;font-size:12px;height:18px}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityDotComponent {
+    getGradeDescription(item) {
+        const grade = Math.floor(item.grade / 10) * 10;
+        const gradeObject = CapabilityGrade.find((cp) => cp.grade === grade);
+        return (gradeObject === null || gradeObject === void 0 ? void 0 : gradeObject.description) || grade.toString();
+    }
+}
+MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityDotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, ngImport: i0, template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.grade > 0\">\u2197</strong>\n\n    <h5>{{ capability?.title }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n        [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n        [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n        [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n        [class.grade-5]=\"item.grade >= 80\"\n        [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n        [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n        [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n        [class.grade-negative-4]=\"item.grade < -60\"\n      ></p>\n      {{ getGradeDescription(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-dot", template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.grade > 0\">\u2197</strong>\n\n    <h5>{{ capability?.title }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n        [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n        [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n        [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n        [class.grade-5]=\"item.grade >= 80\"\n        [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n        [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n        [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n        [class.grade-negative-4]=\"item.grade < -60\"\n      ></p>\n      {{ getGradeDescription(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], capability: [{
+                type: Input
+            }] } });
+
+class MapaTagModule {
+}
+MapaTagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaTagModule, declarations: [TagComponent], imports: [CommonModule], exports: [TagComponent] });
+MapaTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTagModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TagComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        TagComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
+
+class MapaCapabilityDotModule {
+}
+MapaCapabilityDotModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityDotModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, declarations: [MapaCapabilityDotComponent], imports: [CommonModule, MapaTooltipModule, MapaTagModule], exports: [MapaCapabilityDotComponent] });
+MapaCapabilityDotModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, imports: [CommonModule, MapaTooltipModule, MapaTagModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityDotComponent],
+                    exports: [MapaCapabilityDotComponent],
+                    imports: [CommonModule, MapaTooltipModule, MapaTagModule],
+                }]
+        }] });
+
+class MapaCapabilityExpandComponent {
+    getGradeDescription(item) {
+        const grade = Math.floor(item.grade / 10) * 10;
+        const gradeObject = CapabilityGrade.find((cp) => cp.grade === grade);
+        return (gradeObject === null || gradeObject === void 0 ? void 0 : gradeObject.description) || grade.toString();
+    }
+}
+MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"title\">\n      <strong>{{ item.title }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getGradeDescription(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"description\">\n      <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.grade > 0\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:space-between;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .title{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .description{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\n"], dependencies: [{ 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: ["color", "size"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-capability-expand', encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"title\">\n      <strong>{{ item.title }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getGradeDescription(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"description\">\n      <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.grade > 0\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:space-between;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .title{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .description{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityExpandModule {
+}
+MapaCapabilityExpandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityExpandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, declarations: [MapaCapabilityExpandComponent], imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule], exports: [MapaCapabilityExpandComponent] });
+MapaCapabilityExpandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityExpandComponent],
+                    exports: [MapaCapabilityExpandComponent],
+                    imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule],
+                }]
+        }] });
+
+class MapaCapabilityIndicatorComponent {
+}
+MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<p\n  class=\"indicator\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 70\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade > -60\"\n>\n    <span>{{ item.title }}</span>\n    <i>{{ item.grade }}</i>\n</p>\n", styles: ["", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-indicator", template: "<p\n  class=\"indicator\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 70\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade > -60\"\n>\n    <span>{{ item.title }}</span>\n    <i>{{ item.grade }}</i>\n</p>\n", styles: [".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityIndicatorModule {
+}
+MapaCapabilityIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorModule, declarations: [MapaCapabilityIndicatorComponent], imports: [CommonModule], exports: [MapaCapabilityIndicatorComponent] });
+MapaCapabilityIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityIndicatorComponent],
+                    exports: [MapaCapabilityIndicatorComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class MapaCapabilityGradeComponent {
+    getGradeWidth(index) {
+        if (!this.data)
+            return 0;
+        const gradeMod10 = Math.floor(this.data.grade / 10) % 10;
+        return index < gradeMod10
+            ? 100
+            : index === gradeMod10
+                ? (this.data.grade % 10) * 10
+                : 0;
+    }
+}
+MapaCapabilityGradeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityGradeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityGradeComponent, selector: "mapa-capability-grade", inputs: { data: "data" }, ngImport: i0, template: "<ul class=\"capability__grade\">\n  <li class=\"capability__grade--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__grade--percentage\"\n      [style.width.%]=\"getGradeWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data?.grade }}</h1>\n  </li>\n</ul>\n", styles: [".capability__grade{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__grade h1{margin-bottom:0;margin-left:16px}.capability__grade--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__grade--item:last-of-type{margin-right:0}.capability__grade--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-grade", template: "<ul class=\"capability__grade\">\n  <li class=\"capability__grade--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__grade--percentage\"\n      [style.width.%]=\"getGradeWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data?.grade }}</h1>\n  </li>\n</ul>\n", styles: [".capability__grade{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__grade h1{margin-bottom:0;margin-left:16px}.capability__grade--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__grade--item:last-of-type{margin-right:0}.capability__grade--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityGradeModule {
+}
+MapaCapabilityGradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityGradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, declarations: [MapaCapabilityGradeComponent], imports: [CommonModule], exports: [MapaCapabilityGradeComponent] });
+MapaCapabilityGradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityGradeComponent],
+                    exports: [MapaCapabilityGradeComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class MapaCapabilityGradeBarComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+        this.isHovering = false;
+    }
+    onHover() {
+        this.isHovering = true;
+    }
+    onMouseOut() {
+        this.isHovering = false;
+    }
+    showMore() {
+        this.clicked.emit();
+    }
+}
+MapaCapabilityGradeBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityGradeBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityGradeBarComponent, selector: "mapa-capability-grade-bar", inputs: { data: "data" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"capability-grade\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-grade\n    [ngClass]=\"{'capability-grade--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-grade>\n  <span\n    class=\"capability-grade--hide\"\n    [ngClass]=\"{'capability-grade--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-grade{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-grade--hide{display:none}.capability-grade--show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityGradeComponent, selector: "mapa-capability-grade", inputs: ["data"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-grade-bar", template: "<div\n  class=\"capability-grade\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-grade\n    [ngClass]=\"{'capability-grade--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-grade>\n  <span\n    class=\"capability-grade--hide\"\n    [ngClass]=\"{'capability-grade--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-grade{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-grade--hide{display:none}.capability-grade--show{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class MapaCapabilityDetailComponent {
+    constructor() {
+        this.expanded = new Set();
+    }
+    sortItemsByGrade(items) {
+        return items.sort((a, b) => b.grade - a.grade);
+    }
+    showMore(index) {
+        if (this.expanded.has(index)) {
+            this.expanded.delete(index);
+        }
+        else {
+            this.expanded.clear();
+            this.expanded.add(index);
+        }
+    }
+}
+MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.title }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByGrade(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--grade\">\n        <mapa-capability-grade-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-grade-bar\n        ></mapa-capability-grade-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityGradeBarComponent, selector: "mapa-capability-grade-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.title }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByGrade(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--grade\">\n        <mapa-capability-grade-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-grade-bar\n        ></mapa-capability-grade-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class FiltersComponent {
+    constructor() {
+        this.selectedValues = new EventEmitter();
+    }
+    getFormControl(filterKey) {
+        return this.form.get(filterKey);
+    }
+    clearFilters() {
+        this.form.reset();
+    }
+    emitSelectedValues() {
+        this.selectedValues.emit(this.form.value);
+    }
+}
+FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FiltersComponent, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      Limpar filtros\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      Filtrar\n    </mapa-button>\n  </div>\n</div>\n<!--\n<div class=\"input\" *ngIf=\"containsInputText\">\n  <div class=\"overlay\"></div>\n  <div class=\"inputBackground\">\n    <mapa-input\n      [formControl]=\"formControlSearchAutoresize\"\n      [element]=\"inputTextSearchAutoresize\"\n    ></mapa-input>\n  </div>\n</div>\n-->\n", styles: [".filter{display:inline-flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter__item--resizable{width:calc(15vw - 20px)}.input{position:relative}.overlay{position:absolute;top:0;left:2%;width:96%;height:100%;border-bottom:1px solid #d2d7da;z-index:-1}.inputBackground{background-color:#fff;padding:32px 30px;position:relative}button{border:none;background-color:transparent;color:#ea561d;margin-top:30px}::ng-deep mapa-dropdown .mapa-dropdown{max-width:none;min-width:10vw}\n"], dependencies: [{ 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: i2$1.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i3.CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: i4.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "element", "border"] }, { kind: "component", type: i5.MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-filters', template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      Limpar filtros\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      Filtrar\n    </mapa-button>\n  </div>\n</div>\n<!--\n<div class=\"input\" *ngIf=\"containsInputText\">\n  <div class=\"overlay\"></div>\n  <div class=\"inputBackground\">\n    <mapa-input\n      [formControl]=\"formControlSearchAutoresize\"\n      [element]=\"inputTextSearchAutoresize\"\n    ></mapa-input>\n  </div>\n</div>\n-->\n", styles: [".filter{display:inline-flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter__item--resizable{width:calc(15vw - 20px)}.input{position:relative}.overlay{position:absolute;top:0;left:2%;width:96%;height:100%;border-bottom:1px solid #d2d7da;z-index:-1}.inputBackground{background-color:#fff;padding:32px 30px;position:relative}button{border:none;background-color:transparent;color:#ea561d;margin-top:30px}::ng-deep mapa-dropdown .mapa-dropdown{max-width:none;min-width:10vw}\n"] }]
+        }], propDecorators: { form: [{
+                type: Input
+            }], elements: [{
+                type: Input
+            }], selectedValues: [{
+                type: Output
+            }] } });
+
+class MapaFiltersModule {
+}
+MapaFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, declarations: [FiltersComponent], imports: [CommonModule,
+        MapaButtonModule$1,
+        MapaCheckboxModule,
+        MapaDropdownModule,
+        MapaInputModule], exports: [FiltersComponent] });
+MapaFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, imports: [CommonModule,
+        MapaButtonModule$1,
+        MapaCheckboxModule,
+        MapaDropdownModule,
+        MapaInputModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FiltersComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MapaButtonModule$1,
+                        MapaCheckboxModule,
+                        MapaDropdownModule,
+                        MapaInputModule,
+                    ],
+                    exports: [FiltersComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui dropdown
+ */
+
+/*
+ * Public API Surface of mapa-library-ui filters
+ */
+
+class MapaCapabilityGradeBarModule {
+}
+MapaCapabilityGradeBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityGradeBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, declarations: [MapaCapabilityGradeBarComponent], imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule], exports: [MapaCapabilityGradeBarComponent] });
+MapaCapabilityGradeBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityGradeBarComponent],
+                    exports: [MapaCapabilityGradeBarComponent],
+                    imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule],
+                }]
+        }] });
+
+class ReusableCapabilityGradeBarService {
+    constructor(componentFactoryResolver, injector, router) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.router = router;
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MapaCapabilityGradeBarComponent);
+        this.componentRef = componentFactory.create(injector);
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart && this.currentViewContainerRef) {
+                this.detach(this.currentViewContainerRef);
+            }
+        });
+    }
+    attach(viewContainerRef) {
+        this.currentViewContainerRef = viewContainerRef;
+        viewContainerRef.insert(this.componentRef.hostView);
+    }
+    detach(viewContainerRef) {
+        viewContainerRef.detach(viewContainerRef.indexOf(this.componentRef.hostView));
+    }
+}
+ReusableCapabilityGradeBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ReusableCapabilityGradeBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i1$2.Router }]; } });
+
+class MapaCapabilityDetailModule {
+}
+MapaCapabilityDetailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityDetailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, declarations: [MapaCapabilityDetailComponent], imports: [CommonModule,
+        MapaCapabilityDotModule,
+        MapaCapabilityIndicatorModule,
+        MapaCapabilityGradeModule,
+        MapaCapabilityGradeBarModule,
+        MapaCapabilityExpandModule], exports: [MapaCapabilityDetailComponent] });
+MapaCapabilityDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, providers: [
+        ReusableCapabilityGradeBarService,
+    ], imports: [CommonModule,
+        MapaCapabilityDotModule,
+        MapaCapabilityIndicatorModule,
+        MapaCapabilityGradeModule,
+        MapaCapabilityGradeBarModule,
+        MapaCapabilityExpandModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MapaCapabilityDetailComponent,
+                    ],
+                    exports: [MapaCapabilityDetailComponent],
+                    imports: [
+                        CommonModule,
+                        MapaCapabilityDotModule,
+                        MapaCapabilityIndicatorModule,
+                        MapaCapabilityGradeModule,
+                        MapaCapabilityGradeBarModule,
+                        MapaCapabilityExpandModule,
+                    ],
+                    providers: [
+                        ReusableCapabilityGradeBarService,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui capability-detail
+ */
+
 /*
- * Public API Surface of mapa-library-ui shared
+ * Public API Surface of mapa-library-ui capability
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, IconComponent, MapaButtonModule, MapaIconModule };
+export { ButtonComponent, IconComponent, MapaButtonModule, MapaCapabilityDetailComponent, MapaCapabilityDetailModule, MapaCapabilityDotComponent, MapaCapabilityDotModule, MapaCapabilityExpandComponent, MapaCapabilityExpandModule, MapaCapabilityGradeComponent, MapaCapabilityGradeModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-capability.mjs.map