mapa-library-ui 0.44.2 → 0.46.0

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

@@ -0,0 +1,632 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ViewChild, NgModule, Injectable } from '@angular/core';
+import { ReplaySubject } from 'rxjs/internal/ReplaySubject';
+import { Subject } from 'rxjs/internal/Subject';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/form-field';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import * as i6 from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
+import * as i7 from '@angular/material/core';
+import * as i8 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { MatListModule } from '@angular/material/list';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import * as i9 from '@angular/material/tree';
+import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
+import { BehaviorSubject } from 'rxjs';
+import * as i7$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i10 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i11 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+
+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.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;
+    }
+}
+
+class Dropdown extends ElementBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'dropdown';
+    }
+}
+
+class ButtonComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    onClick() {
+        this.clicked.emit();
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-button', template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:SF-Pro;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class MapaDropdownComponent {
+    get selectedOptions() {
+        var _a;
+        const value = ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) || [];
+        return Array.isArray(value) ? value : [value];
+    }
+    constructor() {
+        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;
+    }
+    ngOnInit() {
+        var _a;
+        this.setOptions();
+        if (this.element.search) {
+            (_a = this.element.search.formControl) === null || _a === void 0 ? void 0 : _a.valueChanges.subscribe(() => {
+                this.filterOptions();
+                this.setToggleAllCheckboxState();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        var _a, _b, _c;
+        if (((_a = changes["element"].previousValue) === null || _a === void 0 ? void 0 : _a.controlType) === "dropdown" &&
+            ((_b = changes["element"].previousValue) === null || _b === void 0 ? void 0 : _b.options) !== ((_c = changes["element"].currentValue) === null || _c === void 0 ? void 0 : _c.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);
+        }
+        else {
+            this.filteredOptionsCache = this.element
+                .options.slice();
+            this.filteredOptions.next(this.filteredOptionsCache);
+        }
+    }
+    filterOptionsFromGroup(group, value) {
+        const filterValue = value.toLocaleLowerCase();
+        return group.label.toLocaleLowerCase().includes(filterValue)
+            ? group.options
+            : group.options.filter((item) => item.value.toLocaleLowerCase().includes(filterValue));
+    }
+    filterOptions() {
+        var _a, _b;
+        if (!this.element.options) {
+            return;
+        }
+        // get the search keyword
+        let search = (_b = (_a = this.element.search) === null || _a === void 0 ? void 0 : _a.formControl) === null || _b === void 0 ? void 0 : _b.value.toLowerCase();
+        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);
+        }
+        else {
+            const options = this.element.options;
+            if (!search) {
+                this.filteredOptionsCache = options.slice();
+                this.filteredOptions.next(this.filteredOptionsCache);
+                return;
+            }
+            // filter the options
+            this.filteredOptionsCache = options.filter((option) => option.value.toLowerCase().indexOf(search) > -1);
+            this.filteredOptions.next(this.filteredOptionsCache);
+        }
+    }
+    setToggleAllCheckboxState() {
+        var _a, _b;
+        let filteredLength = 0;
+        let search = (_b = (_a = this.element.search) === null || _a === void 0 ? void 0 : _a.formControl) === null || _b === void 0 ? void 0 : _b.value;
+        if (search && search.value) {
+            this.filteredOptionsCache.forEach((el) => {
+                if (search.value.toLowerCase().indexOf(el) > -1) {
+                    filteredLength++;
+                }
+            });
+            this.isIndeterminate =
+                filteredLength > 0 && filteredLength < this.filteredOptionsCache.length;
+            this.isChecked =
+                filteredLength > 0 &&
+                    filteredLength === this.filteredOptionsCache.length;
+        }
+    }
+    toggleSelectAll(selectAllValue) {
+        this.filteredOptions.subscribe((options) => {
+            var _a, _b;
+            if (selectAllValue) {
+                (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.patchValue(options);
+            }
+            else {
+                (_b = this.formControl) === null || _b === void 0 ? void 0 : _b.patchValue([]);
+            }
+        });
+        this.filteredGroups.subscribe((groups) => {
+            var _a, _b;
+            if (selectAllValue) {
+                (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.patchValue(groups.map((group) => group.options));
+            }
+            else {
+                (_b = this.formControl) === null || _b === void 0 ? void 0 : _b.patchValue([]);
+            }
+        });
+    }
+    isElementGroup(object) {
+        try {
+            return (object.label !== undefined &&
+                object.options !== undefined);
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    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: [], target: i0.ɵɵFactoryTarget.Component });
+MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"true\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n            [toggleAllCheckboxChecked]=\"isChecked\"\n            (toggleAll)=\"toggleSelectAll($event)\"\n          ></ngx-mat-select-search>\n        </mat-option>\n\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"true\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n            [toggleAllCheckboxChecked]=\"isChecked\"\n            (toggleAll)=\"toggleSelectAll($event)\"\n          ></ngx-mat-select-search>\n        </mat-option>\n\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option *ngFor=\"let option of group.options\" [value]=\"option\">\n              {{ option.value }}\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n          >\n            {{ option.value }}\n          </mat-option>\n        </ng-template>\n        \n        <mat-option\n        *ngFor=\"let option of selectedOptions\"\n        hidden\n        [value]=\"option\"\n      >\n        {{ option.value }}\n      </mat-option>\n      </mat-select>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minLength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxLength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formControl: [{
+                type: Input
+            }], formControlSearch: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ["dropdown", { static: true }]
+            }] } });
+
+class MapaButtonModule {
+}
+MapaButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule], exports: [ButtonComponent] });
+MapaButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, imports: [CommonModule, MatButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonComponent],
+                    exports: [ButtonComponent],
+                    imports: [CommonModule, MatButtonModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui button
+ */
+
+class 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,
+        MapaButtonModule,
+        MatListModule,
+        MatIconModule,
+        MatSelectModule,
+        NgxMatSelectSearchModule], exports: [MapaDropdownComponent] });
+MapaDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, providers: [
+        {
+            provide: MAT_SELECT_CONFIG,
+            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+        },
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: { appearance: "outline" },
+        },
+    ], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MapaButtonModule,
+        MatListModule,
+        MatIconModule,
+        MatSelectModule,
+        NgxMatSelectSearchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaDropdownComponent],
+                    exports: [MapaDropdownComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MapaButtonModule,
+                        MatListModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        NgxMatSelectSearchModule,
+                    ],
+                    providers: [
+                        {
+                            provide: MAT_SELECT_CONFIG,
+                            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
+                        },
+                        {
+                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                            useValue: { appearance: "outline" },
+                        },
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui dropdown
+ */
+
+class ChecklistDatabase {
+    get data() {
+        return this.dataChange.value;
+    }
+    constructor() {
+        this.dataChange = new BehaviorSubject([]);
+    }
+    initialize(treeData) {
+        this.treeData = treeData;
+        // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
+        //     file node as children.
+        const data = treeData;
+        // Notify the change.
+        this.dataChange.next(data);
+    }
+    filter(filterText) {
+        let filteredTreeData;
+        if (filterText) {
+            // Filter the tree
+            function filter(array, text) {
+                const getChildren = (result, object) => {
+                    if (object.item.toLowerCase() === text.toLowerCase()) {
+                        result.push(object);
+                        return result;
+                    }
+                    if (Array.isArray(object.children)) {
+                        const children = object.children.reduce(getChildren, []);
+                        if (children.length)
+                            result.push(Object.assign(Object.assign({}, object), { children }));
+                    }
+                    return result;
+                };
+                return array.reduce(getChildren, []);
+            }
+            filteredTreeData = filter(this.treeData, filterText);
+        }
+        else {
+            // Return the initial tree
+            filteredTreeData = this.treeData;
+        }
+        // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
+        // file node as children.
+        const data = filteredTreeData;
+        // Notify the change.
+        this.dataChange.next(data);
+    }
+}
+ChecklistDatabase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChecklistDatabase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChecklistDatabase.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChecklistDatabase, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChecklistDatabase, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () { return []; } });
+
+class FoodNode {
+    constructor() { }
+}
+/** Flat to-do item node with expandable and level information */
+class FoodFlatNode {
+    constructor() { }
+}
+class MapaDropdownTreeComponent {
+    constructor(_database) {
+        this._database = _database;
+        this.isMenuExpanded = false;
+        /** Map from flat node to nested node. This helps us finding the nested node to be modified */
+        this.flatNodeMap = new Map();
+        /** Map from nested node to flattened node. This helps us to keep the same object for selection */
+        this.nestedNodeMap = new Map();
+        /** A selected parent node to be inserted */
+        this.selectedParent = null;
+        /** The new item's name */
+        this.newItemName = "";
+        /** The selection for checklist */
+        this.checklistSelection = new SelectionModel(true /* multiple */);
+        /// Filtering
+        this.myControl = new FormControl();
+        this.options = ["One", "Two", "Three"];
+        this.getLevel = (node) => node.level;
+        this.isExpandable = (node) => node.expandable;
+        this.getChildren = (node) => node.children;
+        this.hasChild = (_, _nodeData) => _nodeData.expandable;
+        this.hasNoContent = (_, _nodeData) => _nodeData.item === "";
+        /**
+         * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
+         */
+        this.transformer = (node, level) => {
+            const existingNode = this.nestedNodeMap.get(node);
+            const flatNode = existingNode && existingNode.item === node.title
+                ? existingNode
+                : new FoodFlatNode();
+            flatNode.item = node.title;
+            flatNode.level = level;
+            flatNode.expandable = !!node.children;
+            this.flatNodeMap.set(flatNode, node);
+            this.nestedNodeMap.set(node, flatNode);
+            return flatNode;
+        };
+    }
+    ngOnInit() {
+        this._database.initialize(this.element.tree);
+        this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
+        this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
+        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        this._database.dataChange.subscribe((data) => {
+            this.dataSource.data = data;
+        });
+    }
+    filter(array, text) {
+        const getNodes = (result, object) => {
+            if (object.name.toLowerCase().startsWith(text)) {
+                result.push(object);
+                return result;
+            }
+            if (Array.isArray(object.children)) {
+                const children = object.children.reduce(getNodes, []);
+                if (children.length)
+                    result.push(Object.assign(Object.assign({}, object), { children }));
+            }
+            return result;
+        };
+        this.element.tree = array.reduce(getNodes, []);
+    }
+    /** Whether all the descendants of the node are selected. */
+    descendantsAllSelected(node) {
+        const descendants = this.treeControl.getDescendants(node);
+        const descAllSelected = descendants.every((child) => this.checklistSelection.isSelected(child));
+        return descAllSelected;
+    }
+    /** Whether part of the descendants are selected */
+    descendantsPartiallySelected(node) {
+        const descendants = this.treeControl.getDescendants(node);
+        const result = descendants.some((child) => this.checklistSelection.isSelected(child));
+        return result && !this.descendantsAllSelected(node);
+    }
+    /** Toggle the to-do item selection. Select/deselect all the descendants node */
+    todoItemSelectionToggle(node) {
+        this.checklistSelection.toggle(node);
+        const descendants = this.treeControl.getDescendants(node);
+        this.checklistSelection.isSelected(node)
+            ? this.checklistSelection.select(...descendants)
+            : this.checklistSelection.deselect(...descendants);
+        // Force update for the parent
+        descendants.every((child) => this.checklistSelection.isSelected(child));
+        this.checkAllParentsSelection(node);
+    }
+    /** Toggle a leaf to-do item selection. Check all the parents to see if they changed */
+    todoLeafItemSelectionToggle(node) {
+        this.checklistSelection.toggle(node);
+        this.checkAllParentsSelection(node);
+    }
+    /* Checks all the parents when a leaf node is selected/unselected */
+    checkAllParentsSelection(node) {
+        let parent = this.getParentNode(node);
+        while (parent) {
+            this.checkRootNodeSelection(parent);
+            parent = this.getParentNode(parent);
+        }
+    }
+    /** Check root node checked state and change it accordingly */
+    checkRootNodeSelection(node) {
+        const nodeSelected = this.checklistSelection.isSelected(node);
+        const descendants = this.treeControl.getDescendants(node);
+        const descAllSelected = descendants.every((child) => this.checklistSelection.isSelected(child));
+        if (nodeSelected && !descAllSelected) {
+            this.checklistSelection.deselect(node);
+        }
+        else if (!nodeSelected && descAllSelected) {
+            this.checklistSelection.select(node);
+        }
+    }
+    /* Get the parent node of a node */
+    getParentNode(node) {
+        console.log(this.checklistSelection.selected);
+        const currentLevel = this.getLevel(node);
+        if (currentLevel < 1) {
+            return null;
+        }
+        const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
+        for (let i = startIndex; i >= 0; i--) {
+            const currentNode = this.treeControl.dataNodes[i];
+            if (this.getLevel(currentNode) < currentLevel) {
+                return currentNode;
+            }
+        }
+        return null;
+    }
+    getSelectedItems() {
+        if (!this.checklistSelection.selected.length)
+            return "Favorite Food";
+        return this.checklistSelection.selected.map((s) => s.item).join(",");
+    }
+    filterChanged(filterText) {
+        console.log("filterChanged", filterText);
+        // ChecklistDatabase.filter method which actually filters the tree and gives back a tree structure
+        this._database.filter(filterText);
+        if (filterText) {
+            this.treeControl.expandAll();
+        }
+        else {
+            this.treeControl.collapseAll();
+        }
+    }
+}
+MapaDropdownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeComponent, deps: [{ token: ChecklistDatabase }], target: i0.ɵɵFactoryTarget.Component });
+MapaDropdownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: { formGroup: "formGroup", element: "element" }, ngImport: i0, template: "<form\n  [formGroup]=\"formGroup\"\n  *ngIf=\"formGroup && element\"\n  class=\"mapa-dropdown-tree\"\n>\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown-tree__label\">\n    {{ element.label }}\n  </label>\n  <mat-form-field>\n    <input\n      type=\"text\"\n      placeholder=\"{{getSelectedItems()}}\"\n      matInput\n      (input)=\"filterChanged($event)\"\n      [matAutocomplete]=\"auto\"\n      (opened)=\"isMenuExpanded = !isMenuExpanded\"\n    />\n    <mat-icon matSuffix\n      >{{ isMenuExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon\n    >\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option disabled>\n        <div class=\"mapa-dropdown-tree__search\" *ngIf=\"element.search\">\n          <mat-form-field appearance=\"outline\">\n            <input\n              matInput\n              #searchInput\n              [formControl]=\"element.search?.formControl!\"\n              [placeholder]=\"element.search?.placeholder || ''\"\n              (keydown)=\"$event.stopPropagation()\"\n              (keyup)=\"filter(element.tree, searchInput.value)\"\n            />\n          </mat-form-field>\n        </div>\n      </mat-option>\n\n      <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node\n          *matTreeNodeDef=\"let node\"\n          matTreeNodeToggle\n          matTreeNodePadding\n        >\n          <button mat-icon-button disabled></button>\n          <mat-checkbox\n            class=\"checklist-leaf-node\"\n            [checked]=\"checklistSelection.isSelected(node)\"\n            (change)=\"todoLeafItemSelectionToggle(node)\"\n            >{{node.item}}</mat-checkbox\n          >\n        </mat-tree-node>\n\n        <mat-tree-node\n          *matTreeNodeDef=\"let node; when: hasChild\"\n          matTreeNodePadding\n        >\n          <button\n            mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'toggle ' + node.filename\"\n          >\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n            </mat-icon>\n          </button>\n          <mat-checkbox\n            [checked]=\"descendantsAllSelected(node)\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\n            (change)=\"todoItemSelectionToggle(node)\"\n          >\n            {{node.item}}</mat-checkbox\n          >\n        </mat-tree-node>\n      </mat-tree>\n      <button mat-button class=\"mapa-dropdown-tree__button\" color=\"primary\">\n        Limpar todos\n      </button>\n    </mat-autocomplete>\n  </mat-form-field>\n</form>\n", styles: [".mapa-dropdown-tree{max-width:min-content;min-width:235px}.mapa-dropdown-tree .mat-select{font-family:SF-Pro!important}.mapa-dropdown-tree .mat-option{padding:unset!important}.mapa-dropdown-tree__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown-tree__button{padding:9px;width:100%}.mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:center;background:#f6f7f7;width:100%;height:48px}.mapa-dropdown-tree__search .mat-form-field{width:96%}.mapa-dropdown-tree__clean{background:white;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}.mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}.mapa-dropdown-tree--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown-tree--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown-tree--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown-tree .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown-tree .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown-tree .mat-form-field-wrapper{padding-bottom:unset!important}.mapa-dropdown-tree .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown-tree .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown-tree .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown-tree .mat-select-value-text{display:block;width:90%}.mapa-dropdown-tree .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown-tree .mat-select-arrow{border:unset}.mapa-dropdown-tree .mat-select-arrow:before,.mapa-dropdown-tree .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-tree [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown-tree [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown-tree [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown-tree{transform:translate(0) translateY(2px)!important}.mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}.mapa-overlay-dropdown-tree .tree-toggle{display:none}.mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}.mapa-overlay-dropdown-tree .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown-tree .mat-select-panel .mat-option,.mapa-overlay-dropdown-tree .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown-tree .mat-checkbox-frame{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i9.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i9.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-dropdown-tree", encapsulation: ViewEncapsulation.None, template: "<form\n  [formGroup]=\"formGroup\"\n  *ngIf=\"formGroup && element\"\n  class=\"mapa-dropdown-tree\"\n>\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown-tree__label\">\n    {{ element.label }}\n  </label>\n  <mat-form-field>\n    <input\n      type=\"text\"\n      placeholder=\"{{getSelectedItems()}}\"\n      matInput\n      (input)=\"filterChanged($event)\"\n      [matAutocomplete]=\"auto\"\n      (opened)=\"isMenuExpanded = !isMenuExpanded\"\n    />\n    <mat-icon matSuffix\n      >{{ isMenuExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon\n    >\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option disabled>\n        <div class=\"mapa-dropdown-tree__search\" *ngIf=\"element.search\">\n          <mat-form-field appearance=\"outline\">\n            <input\n              matInput\n              #searchInput\n              [formControl]=\"element.search?.formControl!\"\n              [placeholder]=\"element.search?.placeholder || ''\"\n              (keydown)=\"$event.stopPropagation()\"\n              (keyup)=\"filter(element.tree, searchInput.value)\"\n            />\n          </mat-form-field>\n        </div>\n      </mat-option>\n\n      <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node\n          *matTreeNodeDef=\"let node\"\n          matTreeNodeToggle\n          matTreeNodePadding\n        >\n          <button mat-icon-button disabled></button>\n          <mat-checkbox\n            class=\"checklist-leaf-node\"\n            [checked]=\"checklistSelection.isSelected(node)\"\n            (change)=\"todoLeafItemSelectionToggle(node)\"\n            >{{node.item}}</mat-checkbox\n          >\n        </mat-tree-node>\n\n        <mat-tree-node\n          *matTreeNodeDef=\"let node; when: hasChild\"\n          matTreeNodePadding\n        >\n          <button\n            mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'toggle ' + node.filename\"\n          >\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n            </mat-icon>\n          </button>\n          <mat-checkbox\n            [checked]=\"descendantsAllSelected(node)\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\n            (change)=\"todoItemSelectionToggle(node)\"\n          >\n            {{node.item}}</mat-checkbox\n          >\n        </mat-tree-node>\n      </mat-tree>\n      <button mat-button class=\"mapa-dropdown-tree__button\" color=\"primary\">\n        Limpar todos\n      </button>\n    </mat-autocomplete>\n  </mat-form-field>\n</form>\n", styles: [".mapa-dropdown-tree{max-width:min-content;min-width:235px}.mapa-dropdown-tree .mat-select{font-family:SF-Pro!important}.mapa-dropdown-tree .mat-option{padding:unset!important}.mapa-dropdown-tree__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown-tree__button{padding:9px;width:100%}.mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:center;background:#f6f7f7;width:100%;height:48px}.mapa-dropdown-tree__search .mat-form-field{width:96%}.mapa-dropdown-tree__clean{background:white;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}.mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}.mapa-dropdown-tree--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown-tree--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown-tree--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown-tree--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown-tree--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown-tree .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown-tree .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown-tree .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown-tree .mat-form-field-wrapper{padding-bottom:unset!important}.mapa-dropdown-tree .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown-tree .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown-tree .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown-tree .mat-select-value-text{display:block;width:90%}.mapa-dropdown-tree .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown-tree .mat-select-arrow{border:unset}.mapa-dropdown-tree .mat-select-arrow:before,.mapa-dropdown-tree .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-tree [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown-tree [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown-tree [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown-tree{transform:translate(0) translateY(2px)!important}.mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}.mapa-overlay-dropdown-tree .tree-toggle{display:none}.mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}.mapa-overlay-dropdown-tree .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown-tree .mat-select-panel .mat-option,.mapa-overlay-dropdown-tree .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown-tree .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown-tree .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChecklistDatabase }]; }, propDecorators: { formGroup: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+class MapaDropdownTreeModule {
+}
+MapaDropdownTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaDropdownTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeModule, declarations: [MapaDropdownTreeComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MapaButtonModule,
+        MatListModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTreeModule,
+        MatCheckboxModule,
+        MatAutocompleteModule], exports: [MapaDropdownTreeComponent] });
+MapaDropdownTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeModule, providers: [
+        {
+            provide: MAT_SELECT_CONFIG,
+            useValue: { overlayPanelClass: "mapa-overlay-dropdown-tree" },
+        },
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: { appearance: "outline" },
+        },
+    ], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MapaButtonModule,
+        MatListModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTreeModule,
+        MatCheckboxModule,
+        MatAutocompleteModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapaDropdownTreeComponent],
+                    exports: [MapaDropdownTreeComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MapaButtonModule,
+                        MatListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTreeModule,
+                        MatCheckboxModule,
+                        MatAutocompleteModule,
+                    ],
+                    providers: [
+                        {
+                            provide: MAT_SELECT_CONFIG,
+                            useValue: { overlayPanelClass: "mapa-overlay-dropdown-tree" },
+                        },
+                        {
+                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                            useValue: { appearance: "outline" },
+                        },
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui dropdown-tree
+ */
+
+/*
+ * Public API Surface of mapa-library-ui dropdown
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Dropdown, ElementBase, FoodFlatNode, FoodNode, MapaDropdownComponent, MapaDropdownModule, MapaDropdownTreeComponent, MapaDropdownTreeModule };
+//# sourceMappingURL=mapa-library-ui-src-lib-components-dropdown-tree.mjs.map