mapa-library-ui 0.1.0 → 0.2.0

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

@@ -1,22 +1,265 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Directive, Input, HostListener, NgModule, EventEmitter, Output, Injectable } from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule, ViewEncapsulation, ViewChild, Directive, HostListener, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
+import { ReplaySubject } from 'rxjs/internal/ReplaySubject';
+import { Subject } from 'rxjs/internal/Subject';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import * as i3 from '@angular/material/form-field';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import * as i4 from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
+import * as i5 from '@angular/material/core';
+import * as i6 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { MatListModule } from '@angular/material/list';
 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 '@angular/platform-browser';
+import { Dropdown } from 'projects/mapa-library-ui/src/public-api';
 import * as i1$2 from '@angular/router';
 import { NavigationStart } from '@angular/router';
-import * as i2$1 from 'mapa-library-ui/src/lib/components/button';
+import * as i2$2 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 * as i3$1 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 * as i4$1 from 'mapa-library-ui/src/lib/components/dropdown';
+import { MapaDropdownModule as MapaDropdownModule$1 } from 'mapa-library-ui/src/lib/components/dropdown';
+import * as i5$1 from 'mapa-library-ui/src/lib/components/input';
 import { MapaInputModule } from 'mapa-library-ui/src/lib/components/input';
 
+class ButtonComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit();
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:1px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-button', template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:1px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class MapaButtonModule {
+}
+MapaButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule], exports: [ButtonComponent] });
+MapaButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, imports: [CommonModule, MatButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonComponent],
+                    exports: [ButtonComponent],
+                    imports: [CommonModule, MatButtonModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui button
+ */
+
+class MapaDropdownComponent {
+    constructor() {
+        this.filteredOptions = new ReplaySubject(1);
+        this.filteredOptionsCache = [];
+        this._onDestroy = new Subject();
+        this.isIndeterminate = false;
+        this.isChecked = false;
+    }
+    ngOnInit() {
+        var _a;
+        this.filteredOptionsCache = this.element.options.slice();
+        this.filteredOptions.next(this.filteredOptionsCache);
+        if (this.element.search) {
+            (_a = this.element.search.formControl) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
+                this.filterOptions();
+                this.setToggleAllCheckboxState();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this.setInitialValue();
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    filterOptions() {
+        var _a, _b;
+        if (!this.element.options) {
+            return;
+        }
+        // get the search keyword
+        let search = (_b = (_a = this.element.search) === null || _a === void 0 ? void 0 : _a.formControl) === null || _b === void 0 ? void 0 : _b.value;
+        if (!search) {
+            this.filteredOptionsCache = this.element.options.slice();
+            this.filteredOptions.next(this.filteredOptionsCache);
+            return;
+        }
+        // filter the options
+        this.filteredOptionsCache = this.element.options.filter((option) => option.value.toLowerCase().indexOf(search) > -1);
+        this.filteredOptions.next(this.filteredOptionsCache);
+    }
+    setInitialValue() {
+        this.filteredOptions
+            //.pipe(take(1), takeUntil(this._onDestroy))
+            .subscribe(() => {
+            this.dropdown.compareWith = (a, b) => a && b && a.id === b.id;
+        });
+    }
+    setToggleAllCheckboxState() {
+        var _a, _b;
+        let filteredLength = 0;
+        let search = (_b = (_a = this.element.search) === null || _a === void 0 ? void 0 : _a.formControl) === null || _b === void 0 ? void 0 : _b.value;
+        if (search && search.value) {
+            this.filteredOptionsCache.forEach(el => {
+                if (search.value.toLowerCase().indexOf(el) > -1) {
+                    filteredLength++;
+                }
+            });
+            this.isIndeterminate = filteredLength > 0 && filteredLength < this.filteredOptionsCache.length;
+            this.isChecked = filteredLength > 0 && filteredLength === this.filteredOptionsCache.length;
+        }
+    }
+    toggleSelectAll(selectAllValue) {
+        this.filteredOptions
+            //.pipe(take(1), takeUntil(this._onDestroy))
+            .subscribe((options) => {
+            var _a, _b;
+            if (selectAllValue) {
+                (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.patchValue(options);
+            }
+            else {
+                (_b = this.formControl) === null || _b === void 0 ? void 0 : _b.patchValue([]);
+            }
+        });
+    }
+}
+MapaDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  appearance=\"outline\"\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n  [class.mapa-dropdown--labeled]=\"!!element.label\">\n  <mat-select\n    #dropdown\n    [formControl]=\"formControl\"\n    [multiple]=\"element.multiple\"\n    [placeholder]=\"element.placeholder || ''\"\n  >\n    <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n      <ngx-mat-select-search\n        *ngIf=\"element.search.formControl\"\n        [showToggleAllCheckbox]=\"true\"\n        [formControl]=\"element.search.formControl\"\n        [placeholderLabel]=\"element.search.placeholder || ''\"\n        i18n-placeholderLabel\n        [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n        [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\"\n      ></ngx-mat-select-search>\n    </mat-option>\n\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{ option.value }}\n    </mat-option>\n  </mat-select>\n  <mat-error\n    *ngIf=\"formControl?.hasError('required')\">\n    {{ element.errors?.required }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('minlength')\">\n    {{ element.errors?.minlength }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('cpf')\">\n    {{ element.errors?.cpf }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('cnpj')\">\n    {{ element.errors?.cnpj }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('email')\">\n    {{ element.errors?.email }}\n  </mat-error>\n</mat-form-field>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  appearance=\"outline\"\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n  [class.mapa-dropdown--labeled]=\"!!element.label\">\n  <mat-select\n    #dropdown\n    [formControl]=\"formControl\"\n    [multiple]=\"element.multiple\"\n    [placeholder]=\"element.placeholder || ''\"\n  >\n    <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n      <ngx-mat-select-search\n        *ngIf=\"element.search.formControl\"\n        [showToggleAllCheckbox]=\"true\"\n        [formControl]=\"element.search.formControl\"\n        [placeholderLabel]=\"element.search.placeholder || ''\"\n        i18n-placeholderLabel\n        [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n        [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\"\n      ></ngx-mat-select-search>\n    </mat-option>\n\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{ option.value }}\n    </mat-option>\n  </mat-select>\n  <mat-error\n    *ngIf=\"formControl?.hasError('required')\">\n    {{ element.errors?.required }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('minlength')\">\n    {{ element.errors?.minlength }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('cpf')\">\n    {{ element.errors?.cpf }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('cnpj')\">\n    {{ element.errors?.cnpj }}\n  </mat-error>\n  <mat-error\n    *ngIf=\"formControl?.hasError('email')\">\n    {{ element.errors?.email }}\n  </mat-error>\n</mat-form-field>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formControl: [{
+                type: Input
+            }], formControlSearch: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ["dropdown", { static: true }]
+            }] } });
+
+class MapaDropdownModule {
+}
+MapaDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, declarations: [MapaDropdownComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatListModule,
+        MatIconModule,
+        MatSelectModule,
+        NgxMatSelectSearchModule], exports: [MapaDropdownComponent] });
+MapaDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, providers: [
+        {
+            provide: MAT_SELECT_CONFIG,
+            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+        },
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: { appearance: "outline" },
+        },
+    ], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatListModule,
+        MatIconModule,
+        MatSelectModule,
+        NgxMatSelectSearchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaDropdownComponent],
+                    exports: [MapaDropdownComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatListModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        NgxMatSelectSearchModule,
+                    ],
+                    providers: [
+                        {
+                            provide: MAT_SELECT_CONFIG,
+                            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+                        },
+                        {
+                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                            useValue: { appearance: "outline" },
+                        },
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui dropdown
+ */
+
+class IconComponent {
+    constructor(matIconRegistry, domSanitizer) {
+        this.matIconRegistry = matIconRegistry;
+        this.domSanitizer = domSanitizer;
+    }
+    ngOnChanges() {
+        this.registerCustomIcons(this.svg);
+    }
+    registerCustomIcons(svg) {
+        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$1.MatIconRegistry }, { token: i2$1.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$1.MatIconRegistry }, { type: i2$1.DomSanitizer }]; }, propDecorators: { svg: [{
+                type: Input
+            }] } });
+
+class MapaIconModule {
+}
+MapaIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, declarations: [IconComponent], imports: [CommonModule, MatIconModule], exports: [IconComponent] });
+MapaIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, imports: [CommonModule, MatIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IconComponent],
+                    exports: [IconComponent],
+                    imports: [CommonModule, MatIconModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
+
 var TooltipPosition;
 (function (TooltipPosition) {
     TooltipPosition["ABOVE"] = "above";
@@ -204,84 +447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui icon
  */
 
-class ButtonComponent {
-    constructor() {
-        this.clicked = new EventEmitter();
-    }
-    onClick() {
-        this.clicked.emit();
-    }
-}
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:1px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapa-button', template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:1px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-class MapaButtonModule {
-}
-MapaButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapaButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule], exports: [ButtonComponent] });
-MapaButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, imports: [CommonModule, MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ButtonComponent],
-                    exports: [ButtonComponent],
-                    imports: [CommonModule, MatButtonModule],
-                }]
-        }] });
-
-/*
- * Public API Surface of mapa-library-ui button
- */
-
-class IconComponent {
-    constructor(matIconRegistry, domSanitizer) {
-        this.matIconRegistry = matIconRegistry;
-        this.domSanitizer = domSanitizer;
-    }
-    ngOnChanges() {
-        this.registerCustomIcons(this.svg);
-    }
-    registerCustomIcons(svg) {
-        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$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$1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { svg: [{
-                type: Input
-            }] } });
-
-class MapaIconModule {
-}
-MapaIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapaIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, declarations: [IconComponent], imports: [CommonModule, MatIconModule], exports: [IconComponent] });
-MapaIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, imports: [CommonModule, MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [IconComponent],
-                    exports: [IconComponent],
-                    imports: [CommonModule, MatIconModule],
-                }]
-        }] });
-
-/*
- * Public API Surface of mapa-library-ui icon
- */
-
 const CAPABILITY_CLASSIFICATION = [
     {
         id: 1,
@@ -369,10 +534,10 @@ class MapaCapabilityDotComponent {
     }
 }
 MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [{ token: CapabilityClassificationService }], 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  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\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:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+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  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\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:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\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:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+            args: [{ selector: "mapa-capability-dot", template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\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:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { type: [{
                 type: Input
             }], item: [{
@@ -457,10 +622,10 @@ 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", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n    <span>{{ item.name }}</span>\n    <span class=\"indicator__classification\">\n      {{ item.interval }}%\n    </span>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator", template: "<div\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n    <span>{{ item.name }}</span>\n    <span class=\"indicator__classification\">\n      {{ item.interval }}%\n    </span>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+            args: [{ selector: "mapa-capability-indicator", template: "<div\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], fullWidth: [{
@@ -517,6 +682,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+class MapaCapabilityComparativeIndicatorComponent {
+    getWidth(item) {
+        return 32 + (item.interval || 0) * 2 + "px";
+    }
+}
+MapaCapabilityComparativeIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityComparativeIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeIndicatorComponent, 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\" *ngIf=\"item.interval\">\n    {{ item.interval }}%\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [ngClass]=\"'classification-' + item.classificationId\"\n    *ngIf=\"item.classificationId\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-comparative-indicator", template: "<div\n  class=\"comparative-indicator\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n  <div class=\"comparative-indicator__interval\" *ngIf=\"item.interval\">\n    {{ item.interval }}%\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [ngClass]=\"'classification-' + item.classificationId\"\n    *ngIf=\"item.classificationId\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeChartComponent {
+    setCleanItem(item) {
+        return {
+            interval: item.interval,
+            classificationId: item.classificationId,
+        };
+    }
+}
+MapaCapabilityComparativeChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityComparativeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeChartComponent, 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__chart th{vertical-align:bottom;text-align:left;font-weight:400;padding-right:36px}.capability-comparative__chart th p{font-size:12px;font-family:SF-Pro,sans-serif;margin:6px 0!important}.capability-comparative__chart--indicators{display:flex;height:40px;position:relative;width:730px}\n"], dependencies: [{ 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: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-capability-comparative-chart', 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__chart th{vertical-align:bottom;text-align:left;font-weight:400;padding-right:36px}.capability-comparative__chart th p{font-size:12px;font-family:SF-Pro,sans-serif;margin:6px 0!important}.capability-comparative__chart--indicators{display:flex;height:40px;position:relative;width:730px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeHeaderComponent {
+    getCapabilityData(item) {
+        return {
+            interval: item,
+            items: [],
+        };
+    }
+}
+MapaCapabilityComparativeHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityComparativeHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeHeaderComponent, 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\">M\u00E9dia geral do grupo</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.groupAvg)\"\n        reusable-interval-bar\n      ></mapa-capability-interval>\n    </div>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do indiv\u00EDduo</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.individualAvg)\"\n        reusable-interval-bar\n      ></mapa-capability-interval>\n    </div>\n  </section>\n</section>\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:16px;margin:24px 0;position:relative}.capability-comparative__avg--title{position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-capability-comparative-header', 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\">M\u00E9dia geral do grupo</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.groupAvg)\"\n        reusable-interval-bar\n      ></mapa-capability-interval>\n    </div>\n    <div class=\"capability-comparative__avg\">\n      <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do indiv\u00EDduo</div>\n      <mapa-capability-interval\n        [data]=\"getCapabilityData(data.individualAvg)\"\n        reusable-interval-bar\n      ></mapa-capability-interval>\n    </div>\n  </section>\n</section>\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:16px;margin:24px 0;position:relative}.capability-comparative__avg--title{position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeComponent {
+    constructor() {
+        this.index = 0;
+        this.formControlComparative = new FormControl();
+        this.dropdownComparative = new Dropdown({
+            key: 'competency',
+            label: 'Competência',
+            options: this.options,
+        });
+        this.formControlComparative.valueChanges.subscribe((value) => {
+            this.index = Number(value.key);
+        });
+    }
+    ngOnInit() {
+        if (this.options) {
+            this.dropdownComparative.options = this.options;
+            this.formControlComparative.setValue(this.options[0]);
+        }
+    }
+}
+MapaCapabilityComparativeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityComparativeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeComponent, selector: "mapa-capability-comparative", inputs: { data: "data", options: "options" }, ngImport: i0, template: "<section class=\"capability-comparative\">\n  <nav *ngIf=\"dropdownComparative.options.length > 0\">\n    <mapa-dropdown\n      [formControl]=\"formControlComparative\"\n      [element]=\"dropdownComparative\"\n    ></mapa-dropdown>\n  </nav>\n  <main>\n    <mapa-capability-comparative-header\n      [data]=\"data[index]\"\n    ></mapa-capability-comparative-header>\n    <mapa-capability-comparative-chart\n      [data]=\"data[index]\"\n    ></mapa-capability-comparative-chart>\n  </main>\n</section>\n", styles: [".capability-comparative{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;margin:auto}.capability-comparative main{width:100%}@media only screen and (min-width: 1200px){.capability-comparative{flex-direction:row}.capability-comparative nav{display:flex;height:100%;width:30%}.capability-comparative main{width:70%}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityComparativeChartComponent, selector: "mapa-capability-comparative-chart", inputs: ["data"] }, { kind: "component", type: MapaCapabilityComparativeHeaderComponent, selector: "mapa-capability-comparative-header", inputs: ["data"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-capability-comparative", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability-comparative\">\n  <nav *ngIf=\"dropdownComparative.options.length > 0\">\n    <mapa-dropdown\n      [formControl]=\"formControlComparative\"\n      [element]=\"dropdownComparative\"\n    ></mapa-dropdown>\n  </nav>\n  <main>\n    <mapa-capability-comparative-header\n      [data]=\"data[index]\"\n    ></mapa-capability-comparative-header>\n    <mapa-capability-comparative-chart\n      [data]=\"data[index]\"\n    ></mapa-capability-comparative-chart>\n  </main>\n</section>\n", styles: [".capability-comparative{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;margin:auto}.capability-comparative main{width:100%}@media only screen and (min-width: 1200px){.capability-comparative{flex-direction:row}.capability-comparative nav{display:flex;height:100%;width:30%}.capability-comparative main{width:70%}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class MapaCapabilityComparativeHeaderModule {
+}
+MapaCapabilityComparativeHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityComparativeHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderModule, declarations: [MapaCapabilityComparativeHeaderComponent], imports: [CommonModule, MapaCapabilityIntervalModule], exports: [MapaCapabilityComparativeHeaderComponent] });
+MapaCapabilityComparativeHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderModule, imports: [CommonModule, MapaCapabilityIntervalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityComparativeHeaderComponent],
+                    exports: [MapaCapabilityComparativeHeaderComponent],
+                    imports: [CommonModule, MapaCapabilityIntervalModule],
+                }]
+        }] });
+
+class MapaCapabilityComparativeIndicatorModule {
+}
+MapaCapabilityComparativeIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityComparativeIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorModule, declarations: [MapaCapabilityComparativeIndicatorComponent], imports: [CommonModule], exports: [MapaCapabilityComparativeIndicatorComponent] });
+MapaCapabilityComparativeIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityComparativeIndicatorComponent],
+                    exports: [MapaCapabilityComparativeIndicatorComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class MapaCapabilityComparativeChartModule {
+}
+MapaCapabilityComparativeChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityComparativeChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartModule, declarations: [MapaCapabilityComparativeChartComponent], imports: [CommonModule, MapaCapabilityComparativeIndicatorModule], exports: [MapaCapabilityComparativeChartComponent] });
+MapaCapabilityComparativeChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartModule, imports: [CommonModule, MapaCapabilityComparativeIndicatorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityComparativeChartComponent],
+                    exports: [MapaCapabilityComparativeChartComponent],
+                    imports: [CommonModule, MapaCapabilityComparativeIndicatorModule],
+                }]
+        }] });
+
+class MapaCapabilityComparativeModule {
+}
+MapaCapabilityComparativeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityComparativeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeModule, declarations: [MapaCapabilityComparativeComponent], imports: [CommonModule,
+        MapaCapabilityComparativeChartModule,
+        MapaCapabilityComparativeHeaderModule,
+        MapaDropdownModule], exports: [MapaCapabilityComparativeComponent] });
+MapaCapabilityComparativeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeModule, imports: [CommonModule,
+        MapaCapabilityComparativeChartModule,
+        MapaCapabilityComparativeHeaderModule,
+        MapaDropdownModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaCapabilityComparativeComponent],
+                    exports: [MapaCapabilityComparativeComponent],
+                    imports: [
+                        CommonModule,
+                        MapaCapabilityComparativeChartModule,
+                        MapaCapabilityComparativeHeaderModule,
+                        MapaDropdownModule
+                    ],
+                }]
+        }] });
+
 class MapaCapabilityIntervalBarComponent {
     constructor() {
         this.clicked = new EventEmitter();
@@ -561,10 +874,10 @@ class MapaCapabilityDetailComponent {
     }
 }
 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.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(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--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-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;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", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\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: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+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.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(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--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-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;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", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\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: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-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.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(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--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-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;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", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+            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.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(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--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-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;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", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -611,7 +924,7 @@ class FiltersComponent {
     }
 }
 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", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\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", "formControlSearch", "element", "border"] }, { kind: "component", type: i5.MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element"], outputs: ["suffix"] }] });
+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", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\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$2.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i3$1.CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: i4$1.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"] }, { kind: "component", type: i5$1.MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element"], outputs: ["suffix"] }] });
 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", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\n"] }]
@@ -629,12 +942,12 @@ MapaFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 MapaFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, declarations: [FiltersComponent], imports: [CommonModule,
         MapaButtonModule$1,
         MapaCheckboxModule,
-        MapaDropdownModule,
+        MapaDropdownModule$1,
         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,
+        MapaDropdownModule$1,
         MapaInputModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaFiltersModule, decorators: [{
             type: NgModule,
@@ -646,7 +959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         CommonModule,
                         MapaButtonModule$1,
                         MapaCheckboxModule,
-                        MapaDropdownModule,
+                        MapaDropdownModule$1,
                         MapaInputModule,
                     ],
                     exports: [FiltersComponent],
@@ -729,10 +1042,10 @@ class MapaCapabilityIndicatorListComponent {
     }
 }
 MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n</section>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }] });
+MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n</section>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n</section>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+            args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n</section>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
@@ -764,10 +1077,10 @@ class MapaCapabilityIndicatorChartComponent {
     }
 }
 MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+            args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
@@ -799,5 +1112,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CapabilityClassificationService, IconComponent, MapaButtonModule, MapaCapabilityDetailComponent, MapaCapabilityDetailModule, MapaCapabilityDotComponent, MapaCapabilityDotModule, MapaCapabilityExpandComponent, MapaCapabilityExpandModule, MapaCapabilityIndicatorChartComponent, MapaCapabilityIndicatorChartModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorListComponent, MapaCapabilityIndicatorListModule, MapaCapabilityIndicatorModule, MapaCapabilityIntervalComponent, MapaCapabilityIntervalModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
+export { ButtonComponent, CapabilityClassificationService, IconComponent, MapaButtonModule, MapaCapabilityComparativeChartComponent, MapaCapabilityComparativeChartModule, MapaCapabilityComparativeComponent, MapaCapabilityComparativeHeaderComponent, MapaCapabilityComparativeHeaderModule, MapaCapabilityComparativeModule, MapaCapabilityDetailComponent, MapaCapabilityDetailModule, MapaCapabilityDotComponent, MapaCapabilityDotModule, MapaCapabilityExpandComponent, MapaCapabilityExpandModule, MapaCapabilityIndicatorChartComponent, MapaCapabilityIndicatorChartModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorListComponent, MapaCapabilityIndicatorListModule, MapaCapabilityIndicatorModule, MapaCapabilityIntervalComponent, MapaCapabilityIntervalModule, MapaDropdownComponent, MapaDropdownModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-capability.mjs.map