mapa-library-ui 0.53.0 → 0.54.0

package/esm2020/src/lib/components/scale/lib/components/dropdown/src/dropdown.component.mjs

@@ -149,10 +149,10 @@ export class MapaDropdownComponent {
     }
 }
 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 }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\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    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\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;position:absolute;right:32px;top:4px}.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!important}.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;height:42px!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;position:relative}.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 .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: i3.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i8.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 });
+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 }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\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    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.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!important}.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;height:42px!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;position:relative}.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:Inter!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: i3.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i8.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: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\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    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\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;position:absolute;right:32px;top:4px}.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!important}.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;height:42px!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;position:relative}.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 .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
+            args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\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    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.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!important}.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;height:42px!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;position:relative}.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:Inter!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.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: [{

package/esm2020/src/lib/components/scale/lib/components/scale/src/scale.component.mjs

@@ -47,10 +47,10 @@ export class MapaScaleComponent {
     }
 }
 MapaScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleComponent, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\n            <div\n              *ngIf=\"scale.classification\"\n              class=\"mapa__tag--bg\"\n              [style.backgroundColor]=\"scale.classification.classificationColor\"\n              [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n            >\n              <span class=\"mapa__tag--text\"\n                >{{ scale.classification.classificationName }}</span\n              >\n            </div>\n          </div>\n          <div\n            *ngIf=\"showProgressbar\"\n            class=\"scale__header--progressbar\"\n          >\n            <mapa-progressbar\n              *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n              [data]=\"getProgressbarData(scale)\"\n            ></mapa-progressbar>\n            <mapa-capability-interval-bar\n              *ngIf=\"scale.classification?.classificationBg\"\n              [data]=\"getIntervalbarData(scale)\"\n              [showInterval]=\"true\"\n              reusable-interval-bar\n            ></mapa-capability-interval-bar>\n          </div>\n        </header>\n        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-details__dimensions\"\n        [class.dimension--full-sized]=\"!showSummarized(scale)\"\n        [class.dimension--summarized]=\"showSummarized(scale)\"\n      >\n        <article\n          *ngFor=\"let dimension of scale.dimensions\"\n          class=\"mapa__card--sm dimension\"\n        >\n          <nav class=\"dimension__main\">\n            <div class=\"dimension__title\">\n              <div class=\"dimension__title--direction\">\n                <span\n                  *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                  >\u2191</span\n                >\n                <ng-template #negativeDirection>\u2193</ng-template>\n              </div>\n              <div class=\"dimension__title--label\">\n                {{ dimension.dimensionName }}\n              </div>\n            </div>\n            <div class=\"dimension--classification\">\n              <div\n                *ngIf=\"dimension.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ dimension.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n          </nav>\n          <div\n            *ngIf=\"dimension.dimensionClassificationMessage\"\n            class=\"dimension__concept\"\n          >\n            {{ dimension.dimensionClassificationMessage }}\n          </div>\n        </article>\n      </section>\n    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:SF-Pro;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\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.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i3.MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }] });
+MapaScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleComponent, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\n            <div\n              *ngIf=\"scale.classification\"\n              class=\"mapa__tag--bg\"\n              [style.backgroundColor]=\"scale.classification.classificationColor\"\n              [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n            >\n              <span class=\"mapa__tag--text\"\n                >{{ scale.classification.classificationName }}</span\n              >\n            </div>\n          </div>\n          <div\n            *ngIf=\"showProgressbar\"\n            class=\"scale__header--progressbar\"\n          >\n            <mapa-progressbar\n              *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n              [data]=\"getProgressbarData(scale)\"\n            ></mapa-progressbar>\n            <mapa-capability-interval-bar\n              *ngIf=\"scale.classification?.classificationBg\"\n              [data]=\"getIntervalbarData(scale)\"\n              [showInterval]=\"true\"\n              reusable-interval-bar\n            ></mapa-capability-interval-bar>\n          </div>\n        </header>\n        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-details__dimensions\"\n        [class.dimension--full-sized]=\"!showSummarized(scale)\"\n        [class.dimension--summarized]=\"showSummarized(scale)\"\n      >\n        <article\n          *ngFor=\"let dimension of scale.dimensions\"\n          class=\"mapa__card--sm dimension\"\n        >\n          <nav class=\"dimension__main\">\n            <div class=\"dimension__title\">\n              <div class=\"dimension__title--direction\">\n                <span\n                  *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                  >\u2191</span\n                >\n                <ng-template #negativeDirection>\u2193</ng-template>\n              </div>\n              <div class=\"dimension__title--label\">\n                {{ dimension.dimensionName }}\n              </div>\n            </div>\n            <div class=\"dimension--classification\">\n              <div\n                *ngIf=\"dimension.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ dimension.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n          </nav>\n          <div\n            *ngIf=\"dimension.dimensionClassificationMessage\"\n            class=\"dimension__concept\"\n          >\n            {{ dimension.dimensionClassificationMessage }}\n          </div>\n        </article>\n      </section>\n    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:Inter;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\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.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i3.MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-scale", template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\n            <div\n              *ngIf=\"scale.classification\"\n              class=\"mapa__tag--bg\"\n              [style.backgroundColor]=\"scale.classification.classificationColor\"\n              [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n            >\n              <span class=\"mapa__tag--text\"\n                >{{ scale.classification.classificationName }}</span\n              >\n            </div>\n          </div>\n          <div\n            *ngIf=\"showProgressbar\"\n            class=\"scale__header--progressbar\"\n          >\n            <mapa-progressbar\n              *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n              [data]=\"getProgressbarData(scale)\"\n            ></mapa-progressbar>\n            <mapa-capability-interval-bar\n              *ngIf=\"scale.classification?.classificationBg\"\n              [data]=\"getIntervalbarData(scale)\"\n              [showInterval]=\"true\"\n              reusable-interval-bar\n            ></mapa-capability-interval-bar>\n          </div>\n        </header>\n        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-details__dimensions\"\n        [class.dimension--full-sized]=\"!showSummarized(scale)\"\n        [class.dimension--summarized]=\"showSummarized(scale)\"\n      >\n        <article\n          *ngFor=\"let dimension of scale.dimensions\"\n          class=\"mapa__card--sm dimension\"\n        >\n          <nav class=\"dimension__main\">\n            <div class=\"dimension__title\">\n              <div class=\"dimension__title--direction\">\n                <span\n                  *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                  >\u2191</span\n                >\n                <ng-template #negativeDirection>\u2193</ng-template>\n              </div>\n              <div class=\"dimension__title--label\">\n                {{ dimension.dimensionName }}\n              </div>\n            </div>\n            <div class=\"dimension--classification\">\n              <div\n                *ngIf=\"dimension.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ dimension.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n          </nav>\n          <div\n            *ngIf=\"dimension.dimensionClassificationMessage\"\n            class=\"dimension__concept\"\n          >\n            {{ dimension.dimensionClassificationMessage }}\n          </div>\n        </article>\n      </section>\n    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:SF-Pro;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+            args: [{ selector: "mapa-scale", template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\n            <div\n              *ngIf=\"scale.classification\"\n              class=\"mapa__tag--bg\"\n              [style.backgroundColor]=\"scale.classification.classificationColor\"\n              [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n            >\n              <span class=\"mapa__tag--text\"\n                >{{ scale.classification.classificationName }}</span\n              >\n            </div>\n          </div>\n          <div\n            *ngIf=\"showProgressbar\"\n            class=\"scale__header--progressbar\"\n          >\n            <mapa-progressbar\n              *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n              [data]=\"getProgressbarData(scale)\"\n            ></mapa-progressbar>\n            <mapa-capability-interval-bar\n              *ngIf=\"scale.classification?.classificationBg\"\n              [data]=\"getIntervalbarData(scale)\"\n              [showInterval]=\"true\"\n              reusable-interval-bar\n            ></mapa-capability-interval-bar>\n          </div>\n        </header>\n        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-details__dimensions\"\n        [class.dimension--full-sized]=\"!showSummarized(scale)\"\n        [class.dimension--summarized]=\"showSummarized(scale)\"\n      >\n        <article\n          *ngFor=\"let dimension of scale.dimensions\"\n          class=\"mapa__card--sm dimension\"\n        >\n          <nav class=\"dimension__main\">\n            <div class=\"dimension__title\">\n              <div class=\"dimension__title--direction\">\n                <span\n                  *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                  >\u2191</span\n                >\n                <ng-template #negativeDirection>\u2193</ng-template>\n              </div>\n              <div class=\"dimension__title--label\">\n                {{ dimension.dimensionName }}\n              </div>\n            </div>\n            <div class=\"dimension--classification\">\n              <div\n                *ngIf=\"dimension.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ dimension.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n          </nav>\n          <div\n            *ngIf=\"dimension.dimensionClassificationMessage\"\n            class=\"dimension__concept\"\n          >\n            {{ dimension.dimensionClassificationMessage }}\n          </div>\n        </article>\n      </section>\n    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:Inter;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], showProgressbar: [{

package/esm2020/src/lib/components/scale/lib/components/tag/src/tag.component.mjs

@@ -4,10 +4,10 @@ import * as i1 from "@angular/common";
 export class TagComponent {
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagComponent, selector: "mapa-tag", inputs: { tag: "tag" }, ngImport: i0, template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:SF-Pro;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagComponent, selector: "mapa-tag", inputs: { tag: "tag" }, ngImport: i0, template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-tag", template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:SF-Pro;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"] }]
+            args: [{ selector: "mapa-tag", template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/scale-parameterization/lib/components/button/src/button.component.mjs

@@ -9,10 +9,10 @@ export class ButtonComponent {
     }
 }
 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:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
+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:Inter;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:2px solid #ea561d!important;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:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+            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:Inter;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:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], disabled: [{

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-comparative-chart/capability-comparative-chart.component.mjs

@@ -14,10 +14,10 @@ export class MapaCapabilityComparativeChartComponent {
     }
 }
 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{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:SF-Pro,sans-serif;margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MapaCapabilityComparativeIndicatorComponent, selector: "mapa-capability-comparative-indicator", inputs: ["item", "fullWidth"] }] });
+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{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:Inter,sans-serif;margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.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{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:SF-Pro,sans-serif;margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"] }]
+            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{background-color:#fff}.capability-comparative__chart{width:100%}.capability-comparative__chart tr{border-bottom:1px solid #DCDCDE;display:flex;padding:16px 0;justify-content:space-between;align-items:center}.capability-comparative__chart th{vertical-align:bottom;text-align:left;padding-right:36px;width:20%}.capability-comparative__chart th p{font-size:14px;font-family:Inter,sans-serif;margin:6px 0!important;font-weight:500}.capability-comparative__chart--indicators{display:flex;justify-content:center;align-items:center;height:40px;position:relative;width:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-comparative-header/capability-comparative-header.component.mjs

@@ -10,10 +10,10 @@ export class MapaCapabilityComparativeHeaderComponent {
     }
 }
 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        [showInterval]=\"true\"\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        [showInterval]=\"true\"\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__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: i1.MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }] });
+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        [showInterval]=\"true\"\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        [showInterval]=\"true\"\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__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:Inter;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: i1.MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }] });
 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        [showInterval]=\"true\"\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        [showInterval]=\"true\"\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__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"] }]
+            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        [showInterval]=\"true\"\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        [showInterval]=\"true\"\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__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:Inter;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-comparative-indicator/capability-comparative-indicator.component.mjs

@@ -7,10 +7,10 @@ export class MapaCapabilityComparativeIndicatorComponent {
     }
 }
 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\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:Inter,sans-serif;text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ 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\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            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\">\n    {{ item.interval }}%\n    <span\n      *ngIf=\"item.isIndividually\"\n      class=\"comparative-indicator__individually\"\n      >\u25BC</span\n    >\n  </div>\n  <div\n    class=\"comparative-indicator__classification\"\n    [style.backgroundColor]=\"item.classificationColor\"\n    *ngIf=\"item.classificationColor\"\n  ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:Inter,sans-serif;text-align:center;width:100%;display:flex;justify-content:center;align-items:center;min-width:40px}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}.comparative-indicator__individually{color:#ea561d;margin:0 4px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], fullWidth: [{

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-detail/capability-detail.component.mjs

@@ -52,10 +52,10 @@ export class MapaCapabilityDetailComponent {
     }
 }
 MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: i1.CapabilityClassificationService }], 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", showTags: "showTags", showProgressBar: "showProgressBar", showInterval: "showInterval", isExpanded: "isExpanded" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  <mat-expansion-panel *ngFor=\"let capability of data; let i = index\" [expanded]=\"expanded.has(i)\" >\n    <mat-expansion-panel-header>\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTags\">\n              <mapa-tag [tag]=\"createTag(capability)\">\n                <mapa-capability-dot\n                  *ngIf=\"capability.classificationColor\"\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n                {{ capability.classificationName }}\n              </mapa-tag>\n            </span>\n          </div>\n\n          <div class=\"capability__item--dots\" *ngIf=\"isSVG(capability)\">\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]=\"showProgressBar\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"showInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n  <div class=\"capability__core\">\n    <div\n      *ngFor=\"let capability of data; let i = index\"\n      class=\"capability__item\"\n    >\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n              <mapa-tag [tag]=\"createTag()\">\n                <mapa-capability-dot\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n\n                {{ classification.getByItem(capability).name }}\n              </mapa-tag>\n            </span>\n          </div>\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]=\"showTagInterval\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"!showTagInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n      <div\n        [class.capability__item--show]=\"expanded.has(i)\"\n        [class.capability__item--hide]=\"!expanded.has(i)\"\n      >\n        <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n      </div>\n    </div>\n  </div>\n</section>\n-->\n", styles: [".capability-detail .mat-expansion-panel{border-radius:0!important}.capability-detail .mat-expansion-panel-spacing{margin:unset!important}.capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i4.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i5.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6.TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], 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", showTags: "showTags", showProgressBar: "showProgressBar", showInterval: "showInterval", isExpanded: "isExpanded" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  <mat-expansion-panel *ngFor=\"let capability of data; let i = index\" [expanded]=\"expanded.has(i)\" >\n    <mat-expansion-panel-header>\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTags\">\n              <mapa-tag [tag]=\"createTag(capability)\">\n                <mapa-capability-dot\n                  *ngIf=\"capability.classificationColor\"\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n                {{ capability.classificationName }}\n              </mapa-tag>\n            </span>\n          </div>\n\n          <div class=\"capability__item--dots\" *ngIf=\"isSVG(capability)\">\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]=\"showProgressBar\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"showInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n  <div class=\"capability__core\">\n    <div\n      *ngFor=\"let capability of data; let i = index\"\n      class=\"capability__item\"\n    >\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n              <mapa-tag [tag]=\"createTag()\">\n                <mapa-capability-dot\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n\n                {{ classification.getByItem(capability).name }}\n              </mapa-tag>\n            </span>\n          </div>\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]=\"showTagInterval\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"!showTagInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n      <div\n        [class.capability__item--show]=\"expanded.has(i)\"\n        [class.capability__item--hide]=\"!expanded.has(i)\"\n      >\n        <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n      </div>\n    </div>\n  </div>\n</section>\n-->\n", styles: [".capability-detail .mat-expansion-panel{border-radius:0!important}.capability-detail .mat-expansion-panel-spacing{margin:unset!important}.capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:Inter;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i4.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i5.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6.TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], 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: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  <mat-expansion-panel *ngFor=\"let capability of data; let i = index\" [expanded]=\"expanded.has(i)\" >\n    <mat-expansion-panel-header>\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTags\">\n              <mapa-tag [tag]=\"createTag(capability)\">\n                <mapa-capability-dot\n                  *ngIf=\"capability.classificationColor\"\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n                {{ capability.classificationName }}\n              </mapa-tag>\n            </span>\n          </div>\n\n          <div class=\"capability__item--dots\" *ngIf=\"isSVG(capability)\">\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]=\"showProgressBar\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"showInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n  <div class=\"capability__core\">\n    <div\n      *ngFor=\"let capability of data; let i = index\"\n      class=\"capability__item\"\n    >\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n              <mapa-tag [tag]=\"createTag()\">\n                <mapa-capability-dot\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n\n                {{ classification.getByItem(capability).name }}\n              </mapa-tag>\n            </span>\n          </div>\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]=\"showTagInterval\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"!showTagInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n      <div\n        [class.capability__item--show]=\"expanded.has(i)\"\n        [class.capability__item--hide]=\"!expanded.has(i)\"\n      >\n        <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n      </div>\n    </div>\n  </div>\n</section>\n-->\n", styles: [".capability-detail .mat-expansion-panel{border-radius:0!important}.capability-detail .mat-expansion-panel-spacing{margin:unset!important}.capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<mat-accordion class=\"capability-detail\" #detailAccordion=\"matAccordion\" multi>\n  <mat-expansion-panel *ngFor=\"let capability of data; let i = index\" [expanded]=\"expanded.has(i)\" >\n    <mat-expansion-panel-header>\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTags\">\n              <mapa-tag [tag]=\"createTag(capability)\">\n                <mapa-capability-dot\n                  *ngIf=\"capability.classificationColor\"\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n                {{ capability.classificationName }}\n              </mapa-tag>\n            </span>\n          </div>\n\n          <div class=\"capability__item--dots\" *ngIf=\"isSVG(capability)\">\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]=\"showProgressBar\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"showInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n  <div class=\"capability__core\">\n    <div\n      *ngFor=\"let capability of data; let i = index\"\n      class=\"capability__item\"\n    >\n      <div class=\"capability__item--header\">\n        <div class=\"capability__item--title-dots\">\n          <div class=\"capability__item--title display-L\">\n            {{ capability.name }}\n            <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n              <mapa-tag [tag]=\"createTag()\">\n                <mapa-capability-dot\n                  [item]=\"capability\"\n                  [capability]=\"capability\"\n                ></mapa-capability-dot>\n\n                {{ classification.getByItem(capability).name }}\n              </mapa-tag>\n            </span>\n          </div>\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]=\"showTagInterval\">\n          <mapa-capability-interval-bar\n            [data]=\"capability\"\n            [expanded]=\"expanded.has(i)\"\n            [showInterval]=\"!showTagInterval\"\n            (clicked)=\"showMore(i)\"\n            reusable-interval-bar\n          ></mapa-capability-interval-bar>\n        </div>\n      </div>\n      <div\n        [class.capability__item--show]=\"expanded.has(i)\"\n        [class.capability__item--hide]=\"!expanded.has(i)\"\n      >\n        <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n      </div>\n    </div>\n  </div>\n</section>\n-->\n", styles: [".capability-detail .mat-expansion-panel{border-radius:0!important}.capability-detail .mat-expansion-panel-spacing{margin:unset!important}.capability-detail .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.capability-detail .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.capability-detail .mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:Inter;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }], showTags: [{

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-dot/capability-dot.component.mjs

@@ -15,10 +15,10 @@ export class MapaCapabilityDotComponent {
     }
 }
 MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [{ token: i1.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  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: i4.TagComponent, selector: "mapa-tag", inputs: ["tag"] }] });
+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  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:Inter;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:Inter;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: i4.TagComponent, selector: "mapa-tag", inputs: ["tag"] }] });
 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  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-capability-dot", template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [style.backgroundColor]=\"item.classificationColor\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n  <p\n    [class.dot]=\"type !== 'small'\"\n    [class.small-dot]=\"type === 'small'\"\n    [style.backgroundColor]=\"item.classificationColor\"\n  ></p>\n</div>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"!item.direction\"\n      >\u2198\uFE0E</strong\n    >\n    <strong\n      class=\"tooltip-info--direction\"\n      *ngIf=\"item.direction\"\n      >\u2197</strong\n    >\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag [tag]=\"createTag()\">\n      <p\n        class=\"small-dot\"\n        [style.backgroundColor]=\"item.classificationColor\"\n      ></p>\n      {{ item.classificationName }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:Inter;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:Inter;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { type: [{
                 type: Input
             }], item: [{

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-expand/capability-expand.component.mjs

@@ -17,10 +17,10 @@ export class MapaCapabilityExpandComponent {
     }
 }
 MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: i1.CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">Conceito</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">Resultado</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >\u2198\uFE0E Dire\u00E7\u00E3o Negativa |\n      </strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >\u2197 Dire\u00E7\u00E3o Positiva |\n      </strong>\n      <span [innerHTML]=\"item.description\"></span>\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}.capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}.capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}.capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "component", type: i4.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">Conceito</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">Resultado</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >\u2198\uFE0E Dire\u00E7\u00E3o Negativa |\n      </strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >\u2197 Dire\u00E7\u00E3o Positiva |\n      </strong>\n      <span [innerHTML]=\"item.description\"></span>\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}.capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}.capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}.capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "component", type: i4.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">Conceito</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">Resultado</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >\u2198\uFE0E Dire\u00E7\u00E3o Negativa |\n      </strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >\u2197 Dire\u00E7\u00E3o Positiva |\n      </strong>\n      <span [innerHTML]=\"item.description\"></span>\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}.capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}.capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}.capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"] }]
+            args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">Conceito</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">Resultado</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >\u2198\uFE0E Dire\u00E7\u00E3o Negativa |\n      </strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >\u2197 Dire\u00E7\u00E3o Positiva |\n      </strong>\n      <span [innerHTML]=\"item.description\"></span>\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}.capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media (min-width: 800px) and (max-width: 1250px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media (min-width: 1251px){.capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}.capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}.capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-indicator/capability-indicator.component.mjs

@@ -4,10 +4,10 @@ import * as i1 from "@angular/common";
 export class MapaCapabilityIndicatorComponent {
 }
 MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ 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  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-capability-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }] } });