mapa-library-ui 0.90.2 → 1.0.0

package/fesm2020/mapa-library-ui-src-lib-components-dropdown.mjs

@@ -1,558 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, Component, Input, SecurityContext, Pipe, EventEmitter, ViewEncapsulation, Output, ViewChild, NgModule } from '@angular/core';
-import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-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 'mapa-library-ui/src/lib/components/button';
-import { MapaButtonModule } from 'mapa-library-ui/src/lib/components/button';
-import * as i6 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i8 from '@angular/material/select';
-import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
-import * as i9 from '@angular/material/core';
-import * as i10 from 'ngx-mat-select-search';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import * as i1 from '@angular/platform-browser';
-import { MatListModule } from '@angular/material/list';
-import { MatButtonModule } from '@angular/material/button';
-
-class ElementBase {
-    constructor(options = {}) {
-        this.value = options.value || "";
-        this.key = options.key || "";
-        this.label = options.label || "";
-        this.required = !!options.required;
-        this.order = options.order === undefined ? 1 : options.order;
-        this.controlType = options.controlType || "";
-        this.type = options.type || "";
-        this.placeholder = options.placeholder || "";
-        this.readonly = options.readonly || false;
-        this.hint = options.hint || "";
-        this.prefix = options.prefix || "";
-        this.suffix = options.suffix || "";
-        this.autosize = options.autosize || false;
-        this.autosizeMinWidth = options.autosizeMinWidth || "212px";
-        this.autosizeMaxWidth = options.autosizeMaxWidth || "400px";
-        this.autosizeMinRow = options.autosizeMinRow || 2;
-        this.autosizeMaxRow = options.autosizeMaxRow || 5;
-        this.options = options.options || [];
-        this.tree = options.tree || [];
-        this.multiple = options.multiple || false;
-        this.search = options.search || undefined;
-        this.maxLength = options.maxLength || null;
-        this.errors = options.errors || undefined;
-        this.actionButton = options.actionButton || undefined;
-        this.mask = options.mask || undefined;
-        this.autocomplete = options.autocomplete || "";
-        this.clearValue =
-            options.clearValue !== undefined ? options.clearValue : true;
-        this.status = options.status || undefined;
-        this.checkParent = options.checkParent || false;
-        this.checkChildren = options.checkChildren || false;
-        this.openedChange = options.openedChange || undefined;
-    }
-}
-
-class Dropdown extends ElementBase {
-    constructor() {
-        super(...arguments);
-        this.controlType = 'dropdown';
-    }
-}
-
-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.textsSubject = new BehaviorSubject(mergeMapaUiTexts(customTexts));
-        this.texts$ = this.textsSubject.asObservable();
-    }
-    get texts() {
-        return this.textsSubject.value;
-    }
-    setTexts(texts) {
-        this.textsSubject.next(mergeMapaUiTexts(texts));
-    }
-    resolveValidationText(key, context) {
-        return this.resolveText(this.texts.validation[key], context);
-    }
-    resolveText(value, context) {
-        return typeof value === "function" ? value(context) : value;
-    }
-}
-MapaI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-MapaI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () { return [{ 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];
-        }
-    }
-}
-ValidationMessageResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationMessageResolverService, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Injectable });
-ValidationMessageResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationMessageResolverService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationMessageResolverService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () { return [{ type: MapaI18nService }]; } });
-
-class MapaFormErrorsComponent {
-    constructor(validationMessageResolver) {
-        this.validationMessageResolver = validationMessageResolver;
-    }
-    get message() {
-        return this.validationMessageResolver.resolveFirstError(this.control, this.errors);
-    }
-}
-MapaFormErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaFormErrorsComponent, deps: [{ token: ValidationMessageResolverService }], target: i0.ɵɵFactoryTarget.Component });
-MapaFormErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: MapaFormErrorsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-form-errors", standalone: true, imports: [CommonModule, MatFormFieldModule], template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n" }]
-        }], ctorParameters: function () { return [{ 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);
-    }
-}
-HtmlSanitizerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
-HtmlSanitizerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HtmlSanitizerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
-
-class SafeHtmlPipe {
-    constructor(htmlSanitizer) {
-        this.htmlSanitizer = htmlSanitizer;
-    }
-    transform(value) {
-        return this.htmlSanitizer.sanitize(value);
-    }
-}
-SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe });
-SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "safeHtml",
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: HtmlSanitizerService }]; } });
-
-class MapaDropdownComponent {
-    constructor(i18n) {
-        this.i18n = i18n;
-        this.openedChange = new EventEmitter();
-        this.filteredOptions = new ReplaySubject(1);
-        this.filteredGroups = new ReplaySubject(1);
-        this.filteredOptionsCache = [];
-        this.filteredGroupCache = [];
-        this.onDestroy$ = new Subject();
-        this.isIndeterminate = false;
-        this.isChecked = false;
-        this.isOptionsGroup = false;
-        this.texts = this.i18n.texts;
-        this.i18n.texts$
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe((texts) => (this.texts = texts));
-    }
-    get selectAllLabel() {
-        return this.texts.common.selectAll;
-    }
-    get selectedOptions() {
-        const value = this.formControl?.value || [];
-        return Array.isArray(value) ? value : [value];
-    }
-    ngOnInit() {
-        this.setOptions();
-        this.element.search?.formControl?.valueChanges
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => {
-            this.filterOptions();
-            this.setToggleAllCheckboxState();
-        });
-    }
-    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();
-        }
-    }
-    ngOnDestroy() {
-        this.onDestroy$.next();
-        this.onDestroy$.complete();
-    }
-    setOptions() {
-        this.isOptionsGroup = this.isElementGroup(this.element.options[0]);
-        if (this.isOptionsGroup) {
-            this.filteredGroupCache = this.element.options.slice();
-            this.filteredGroups.next(this.filteredGroupCache);
-            return;
-        }
-        this.filteredOptionsCache = this.element.options.slice();
-        this.filteredOptions.next(this.filteredOptionsCache);
-    }
-    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;
-    }
-    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;
-    }
-    compareFn(c1, c2) {
-        return c1 && c2 ? c1.key === c2.key : c1 === c2;
-    }
-    hasValue() {
-        return !!this.formControl.value;
-    }
-    clearValue(event) {
-        event.stopPropagation();
-        this.formControl.setValue(null);
-    }
-}
-MapaDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, deps: [{ token: MapaI18nService }], 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" }, outputs: { openedChange: "openedChange" }, 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        (openedChange)=\"triggerOpenedChange($event)\"\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          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\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          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\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        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\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      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\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:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.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}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.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 .mat-form-field-subscript-wrapper{padding:0!important}.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: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}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i10.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: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], 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        (openedChange)=\"triggerOpenedChange($event)\"\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          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\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        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\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          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\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        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\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      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\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:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.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}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.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 .mat-form-field-subscript-wrapper{padding:0!important}.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: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}.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 [{ type: MapaI18nService }]; }, propDecorators: { formControl: [{
-                type: Input
-            }], formControlSearch: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], openedChange: [{
-                type: Output
-            }], dropdown: [{
-                type: ViewChild,
-                args: ["dropdown", { static: true }]
-            }] } });
-
-class MapaDropdownModule {
-}
-MapaDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapaDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, declarations: [MapaDropdownComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MapaButtonModule,
-        MatListModule,
-        MatIconModule,
-        MatSelectModule,
-        NgxMatSelectSearchModule,
-        MapaFormErrorsComponent,
-        SafeHtmlPipe], exports: [MapaDropdownComponent] });
-MapaDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, providers: [
-        {
-            provide: MAT_SELECT_CONFIG,
-            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
-        },
-        {
-            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-            useValue: { appearance: "outline" },
-        },
-    ], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MapaButtonModule,
-        MatListModule,
-        MatIconModule,
-        MatSelectModule,
-        NgxMatSelectSearchModule,
-        MapaFormErrorsComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MapaDropdownComponent],
-                    exports: [MapaDropdownComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MapaButtonModule,
-                        MatListModule,
-                        MatIconModule,
-                        MatSelectModule,
-                        NgxMatSelectSearchModule,
-                        MapaFormErrorsComponent,
-                        SafeHtmlPipe,
-                    ],
-                    providers: [
-                        {
-                            provide: MAT_SELECT_CONFIG,
-                            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
-                        },
-                        {
-                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                            useValue: { appearance: "outline" },
-                        },
-                    ],
-                }]
-        }] });
-
-/*
- * Public API Surface of mapa-library-ui dropdown
- */
-
-/*
- * Public API Surface of mapa-library-ui dropdown
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { Dropdown, ElementBase, MapaDropdownComponent, MapaDropdownModule };
-//# sourceMappingURL=mapa-library-ui-src-lib-components-dropdown.mjs.map