mapa-library-ui 0.90.2 → 1.0.0

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

@@ -0,0 +1,628 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, SecurityContext, Pipe, DestroyRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import * as i2$1 from 'ng-apexcharts';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
+import * as i8 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { ReplaySubject } from 'rxjs';
+import * as i1 from '@angular/platform-browser';
+
+class ButtonComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ButtonComponent, isStandalone: true, 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:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: "20.3.18", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-button', standalone: true, 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:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui button
+ */
+
+const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+const MAPA_UI_DEFAULT_TEXTS = {
+    common: {
+        selectAll: "Selecionar todos",
+    },
+    filters: {
+        clear: "Limpar filtros",
+        submit: "Filtrar",
+    },
+    datepicker: {
+        startDatePlaceholder: "Data inicial",
+        endDatePlaceholder: "Data final",
+    },
+    capability: {
+        groupAverageTitle: "Média geral do grupo",
+        individualAverageTitle: "Média geral do indivíduo",
+        conceptTitle: "Conceito",
+        resultTitle: "Resultado",
+        positiveIndicatorsTitle: "Indicadores positivos",
+        negativeIndicatorsTitle: "Indicadores negativos",
+        riskIndicatorsTitle: "Indicadores de risco",
+        precipitationRiskTitle: "Risco de acidente por precipitação",
+        negligenceRiskTitle: "Risco de acidente por negligência",
+        negativeDirectionLabel: "Direção Negativa |",
+        positiveDirectionLabel: "Direção Positiva |",
+    },
+    paginator: {
+        itemsPerPage: "Itens por página",
+        nextPage: "Próxima página",
+        previousPage: "Página anterior",
+        rangeLabel: (page, pageSize, length) => {
+            if (length === 0 || pageSize === 0) {
+                return `0 de ${length}`;
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            return `${startIndex + 1} - ${endIndex} de ${length}`;
+        },
+        showingRangeLabel: (page, pageSize, length) => {
+            if (length === 0) {
+                return "Mostrando 0 - 0 de 0 item";
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            const itemLabel = length === 1 ? "item" : "itens";
+            return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
+        },
+    },
+    validation: {
+        cnpj: "CNPJ inválido",
+        cpf: "CPF inválido",
+        email: "E-mail inválido",
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        min: (context) => `O valor minimo permitido é ${context?.min ?? ""}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        pattern: "Formato inválido",
+        required: "Campo obrigatório",
+    },
+};
+function mergeMapaUiTexts(customTexts) {
+    return {
+        common: {
+            ...MAPA_UI_DEFAULT_TEXTS.common,
+            ...(customTexts?.common ?? {}),
+        },
+        filters: {
+            ...MAPA_UI_DEFAULT_TEXTS.filters,
+            ...(customTexts?.filters ?? {}),
+        },
+        datepicker: {
+            ...MAPA_UI_DEFAULT_TEXTS.datepicker,
+            ...(customTexts?.datepicker ?? {}),
+        },
+        capability: {
+            ...MAPA_UI_DEFAULT_TEXTS.capability,
+            ...(customTexts?.capability ?? {}),
+        },
+        paginator: {
+            ...MAPA_UI_DEFAULT_TEXTS.paginator,
+            ...(customTexts?.paginator ?? {}),
+        },
+        validation: {
+            ...MAPA_UI_DEFAULT_TEXTS.validation,
+            ...(customTexts?.validation ?? {}),
+        },
+    };
+}
+function provideMapaUiTexts(texts) {
+    return {
+        provide: MAPA_UI_TEXTS,
+        useValue: texts,
+    };
+}
+
+class MapaI18nService {
+    constructor(customTexts) {
+        this.injector = inject(Injector);
+        this.textsState = signal(mergeMapaUiTexts(), ...(ngDevMode ? [{ debugName: "textsState" }] : []));
+        this.textsSignal = this.textsState.asReadonly();
+        this.texts$ = toObservable(this.textsSignal, { injector: this.injector });
+        if (customTexts) {
+            this.textsState.set(mergeMapaUiTexts(customTexts));
+        }
+    }
+    get texts() {
+        return this.textsState();
+    }
+    setTexts(texts) {
+        this.textsState.set(mergeMapaUiTexts(texts));
+    }
+    resolveValidationText(key, context) {
+        return this.resolveText(this.texts.validation[key], context);
+    }
+    resolveText(value, context) {
+        return typeof value === "function" ? value(context) : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAPA_UI_TEXTS]
+                }] }] });
+
+class ValidationMessageResolverService {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.errorOrder = [
+            "required",
+            "minlength",
+            "maxlength",
+            "cpf",
+            "cnpj",
+            "email",
+            "pattern",
+            "min",
+            "max",
+        ];
+    }
+    resolveFirstError(control, errors) {
+        const validationErrors = control?.errors;
+        if (!validationErrors) {
+            return null;
+        }
+        const firstErrorKey = this.errorOrder.find((key) => control?.hasError(key));
+        if (!firstErrorKey) {
+            return null;
+        }
+        return this.resolveErrorMessage(firstErrorKey, validationErrors, errors);
+    }
+    resolveErrorMessage(errorKey, validationErrors, errors) {
+        const errorOverrides = errors;
+        const customMessage = this.getCustomMessage(errorKey, errorOverrides);
+        if (customMessage) {
+            return customMessage;
+        }
+        const errorValue = validationErrors[errorKey];
+        switch (errorKey) {
+            case "minlength":
+                return this.i18n.resolveValidationText("minLength", errorValue);
+            case "maxlength":
+                return this.i18n.resolveValidationText("maxLength", errorValue);
+            case "min":
+                return this.i18n.resolveValidationText("min", errorValue);
+            case "max":
+                return this.i18n.resolveValidationText("max", errorValue);
+            default:
+                return this.i18n.resolveValidationText(errorKey);
+        }
+    }
+    getCustomMessage(errorKey, errors) {
+        if (!errors) {
+            return undefined;
+        }
+        switch (errorKey) {
+            case "minlength":
+                return errors.minLength ?? errors.minlength;
+            case "maxlength":
+                return errors.maxLength ?? errors.maxlength;
+            default:
+                return errors[errorKey];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: MapaI18nService }] });
+
+class MapaFormErrorsComponent {
+    constructor(validationMessageResolver) {
+        this.validationMessageResolver = validationMessageResolver;
+    }
+    get message() {
+        return this.validationMessageResolver.resolveFirstError(this.control, this.errors);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormErrorsComponent, deps: [{ token: ValidationMessageResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaFormErrorsComponent, isStandalone: true, selector: "mapa-form-errors", inputs: { control: "control", errors: "errors" }, ngImport: i0, template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-form-errors", imports: [CommonModule, MatFormFieldModule], template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n" }]
+        }], ctorParameters: () => [{ type: ValidationMessageResolverService }], propDecorators: { control: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }] } });
+
+function sanitizeHtmlContent(sanitizer, value) {
+    return sanitizer.sanitize(SecurityContext.HTML, value ?? "") ?? "";
+}
+class HtmlSanitizerService {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    sanitize(value) {
+        return sanitizeHtmlContent(this.sanitizer, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class SafeHtmlPipe {
+    constructor(htmlSanitizer) {
+        this.htmlSanitizer = htmlSanitizer;
+    }
+    transform(value) {
+        return this.htmlSanitizer.sanitize(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeHtml",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
+
+class MapaDropdownComponent {
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+        this.openedChange = new EventEmitter();
+        this.filteredOptions = new ReplaySubject(1);
+        this.filteredGroups = new ReplaySubject(1);
+        this.filteredOptionsCache = [];
+        this.filteredGroupCache = [];
+        this.destroyRef = inject(DestroyRef);
+        this.isIndeterminate = false;
+        this.isChecked = false;
+        this.isOptionsGroup = false;
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get selectAllLabel() {
+        return this.texts.common.selectAll;
+    }
+    get selectedOptions() {
+        const value = this.formControl?.value;
+        if (Array.isArray(value)) {
+            return value.filter((option) => this.isElementOption(option));
+        }
+        return this.isElementOption(value) ? [value] : [];
+    }
+    ngOnInit() {
+        this.setOptions();
+        this.element.search?.formControl?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.filterOptions();
+            this.setToggleAllCheckboxState();
+            this.cdr.markForCheck();
+        });
+    }
+    ngAfterViewInit() {
+        Promise.resolve().then(() => this.cdr.detectChanges());
+    }
+    ngOnChanges(changes) {
+        if (changes["element"]?.previousValue !== undefined &&
+            changes["element"].previousValue?.controlType === "dropdown" &&
+            changes["element"].previousValue?.options !==
+                changes["element"].currentValue?.options) {
+            this.element.options = changes["element"].currentValue.options;
+            this.setOptions();
+            this.cdr.markForCheck();
+        }
+    }
+    setOptions() {
+        this.isOptionsGroup = this.isElementGroup(this.element.options[0]);
+        if (this.isOptionsGroup) {
+            this.filteredGroupCache = this.element.options.slice();
+            this.filteredGroups.next(this.filteredGroupCache);
+            this.cdr.markForCheck();
+            return;
+        }
+        this.filteredOptionsCache = this.element.options.slice();
+        this.filteredOptions.next(this.filteredOptionsCache);
+        this.cdr.markForCheck();
+    }
+    filterOptionsFromGroup(group, value) {
+        const filterValue = this.normalizeValue(value);
+        return this.normalizeValue(group.label).includes(filterValue)
+            ? group.options
+            : group.options.filter((item) => this.normalizeValue(item.value).includes(filterValue));
+    }
+    filterOptions() {
+        if (!this.element.options) {
+            return;
+        }
+        const search = this.normalizeValue(this.element.search?.formControl?.value);
+        if (this.isOptionsGroup) {
+            const groups = this.element.options;
+            this.filteredGroupCache = groups
+                .map((group) => ({
+                label: group.label,
+                options: this.filterOptionsFromGroup(group, search),
+            }))
+                .filter((group) => group.options.length > 0);
+            this.filteredGroups.next(this.filteredGroupCache);
+            return;
+        }
+        const options = this.element.options;
+        if (!search) {
+            this.filteredOptionsCache = options.slice();
+            this.filteredOptions.next(this.filteredOptionsCache);
+            return;
+        }
+        this.filteredOptionsCache = options.filter((option) => this.normalizeValue(option.value).includes(search));
+        this.filteredOptions.next(this.filteredOptionsCache);
+    }
+    normalizeValue(value) {
+        return (value ?? "")
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "")
+            .toLowerCase();
+    }
+    triggerOpenedChange(event) {
+        this.openedChange.emit(event);
+    }
+    setToggleAllCheckboxState() {
+        const search = this.normalizeValue(this.element.search?.formControl?.value);
+        if (!search) {
+            this.isIndeterminate = false;
+            this.isChecked = false;
+            return;
+        }
+        const filteredLength = this.filteredOptionsCache.filter((option) => this.normalizeValue(option.value).includes(search)).length;
+        this.isIndeterminate =
+            filteredLength > 0 && filteredLength < this.filteredOptionsCache.length;
+        this.isChecked =
+            filteredLength > 0 && filteredLength === this.filteredOptionsCache.length;
+        this.cdr.markForCheck();
+    }
+    toggleSelectAll(event) {
+        if (this.isOptionsGroup) {
+            const groupOptions = this.filteredGroupCache.reduce((accumulator, group) => accumulator.concat(group.options), []);
+            this.formControl?.patchValue(event.checked ? groupOptions : []);
+            return;
+        }
+        this.formControl?.patchValue(event.checked ? this.filteredOptionsCache : []);
+    }
+    isElementGroup(object) {
+        return !!object && "label" in object && "options" in object;
+    }
+    isElementOption(object) {
+        return (!!object &&
+            typeof object === "object" &&
+            "key" in object &&
+            "value" in object);
+    }
+    compareFn(c1, c2) {
+        return c1 && c2 ? c1.key === c2.key : c1 === c2;
+    }
+    hasValue() {
+        const value = this.formControl?.value;
+        return Array.isArray(value) ? value.length > 0 : this.isElementOption(value);
+    }
+    clearValue(event) {
+        event.stopPropagation();
+        this.formControl.setValue(null);
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownComponent, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaDropdownComponent, isStandalone: true, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, outputs: { openedChange: "openedChange" }, providers: [
+            {
+                provide: MAT_SELECT_CONFIG,
+                useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+            },
+            {
+                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                useValue: { appearance: "outline" },
+            },
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\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        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div 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    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { 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", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-dropdown", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        NgxMatSelectSearchModule,
+                        ButtonComponent,
+                        MapaFormErrorsComponent,
+                        SafeHtmlPipe,
+                    ], providers: [
+                        {
+                            provide: MAT_SELECT_CONFIG,
+                            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+                        },
+                        {
+                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                            useValue: { appearance: "outline" },
+                        },
+                    ], standalone: true, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\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        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div 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    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
+                type: Input
+            }], formControlSearch: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], openedChange: [{
+                type: Output
+            }], dropdown: [{
+                type: ViewChild,
+                args: ["dropdown", { static: true }]
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui dropdown
+ */
+
+class MapaChartComponent {
+    constructor() {
+        this.colors = ["#EA561D", "#6195FB", "#2ED47A", "#EEDB2A"];
+    }
+    ngOnInit() {
+        this.generateChart();
+    }
+    ngOnChanges(changes) {
+        if (changes["options"]) {
+            this.generateChart();
+        }
+    }
+    generateChart() {
+        if (this.options) {
+            this.chartOptions = {
+                series: this.options.series,
+                chart: {
+                    height: 500,
+                    width: "100%",
+                    type: this.options.chart?.type || "radar",
+                    events: {
+                        beforeMount: (chart) => {
+                            chart.windowResizeHandler();
+                        },
+                    },
+                    toolbar: {
+                        show: false,
+                    },
+                },
+                stroke: {
+                    width: 1,
+                    colors: this.colors,
+                },
+                fill: {
+                    opacity: 0.3,
+                    colors: this.colors,
+                },
+                markers: {
+                    size: 2,
+                    shape: "circle",
+                    colors: this.colors,
+                    strokeColors: this.colors,
+                },
+                xaxis: {
+                    categories: this.options.xaxis?.categories,
+                    labels: {
+                        style: {
+                            colors: new Array(this.options.xaxis?.categories.length).fill("#666666"),
+                            fontSize: "12px",
+                            fontFamily: "Asap",
+                        },
+                    },
+                },
+                yaxis: {
+                    labels: {
+                        style: {
+                            colors: "#9B9B9B",
+                            fontSize: "12px",
+                            fontFamily: "Asap",
+                        },
+                    },
+                    tickAmount: 10,
+                    min: 0,
+                    max: 100,
+                },
+                legend: {
+                    position: "right",
+                    horizontalAlign: "center",
+                    height: 500,
+                    fontSize: "12px",
+                    fontFamily: "Asap",
+                    offsetX: 30,
+                    markers: {
+                        fillColors: this.colors,
+                    },
+                },
+                responsive: [
+                    {
+                        breakpoint: 1300,
+                        options: {
+                            chart: {
+                                width: "100%",
+                                height: 550,
+                            },
+                            legend: {
+                                position: "bottom",
+                                horizontalAlign: "center",
+                                height: 100,
+                            },
+                        },
+                    },
+                ],
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaChartComponent, isStandalone: true, selector: "mapa-chart", inputs: { options: "options" }, usesOnChanges: true, ngImport: i0, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgApexchartsModule }, { kind: "component", type: i2$1.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "parsing", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"], outputs: ["chartReady"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-chart", imports: [CommonModule, NgApexchartsModule, MapaDropdownComponent], standalone: true, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui chart
+ */
+
+/*
+ * Public API Surface of mapa-library-ui chart
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MapaChartComponent };
+//# sourceMappingURL=mapa-library-ui-src-lib-components-chart.mjs.map