mapa-library-ui 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/lib/core/interfaces/dialog-data.interface.mjs +1 -1
- package/esm2020/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/esm2020/src/lib/components/capability/lib/components/dropdown/src/dropdown.component.mjs +61 -17
- package/esm2020/src/lib/components/capability/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/src/lib/components/capability/lib/core/interfaces/dialog-data.interface.mjs +1 -1
- package/esm2020/src/lib/components/capability/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/esm2020/src/lib/components/chart/lib/components/dropdown/src/dropdown.component.mjs +61 -17
- package/esm2020/src/lib/components/chart/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/src/lib/components/chart/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/esm2020/src/lib/components/dialog/lib/components/dialog/src/dialog.component.mjs +2 -2
- package/esm2020/src/lib/components/dialog/lib/core/interfaces/dialog-data.interface.mjs +1 -1
- package/esm2020/src/lib/components/dropdown/lib/components/dropdown/src/dropdown.component.mjs +61 -17
- package/esm2020/src/lib/components/dropdown/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/src/lib/components/dropdown/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/esm2020/src/lib/components/radio-button/lib/components/radio-button/src/radio-button.component.mjs +7 -3
- package/esm2020/src/lib/components/radio-button/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/src/lib/components/radio-button/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/esm2020/src/lib/components/textarea/lib/core/elements/element-base.mjs +1 -1
- package/esm2020/src/lib/components/textarea/lib/core/interfaces/element-group.interface.mjs +2 -0
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +61 -16
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs +61 -16
- package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-dialog.mjs +2 -2
- package/fesm2015/mapa-library-ui-src-lib-components-dialog.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-dropdown.mjs +61 -16
- package/fesm2015/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-radio-button.mjs +6 -2
- package/fesm2015/mapa-library-ui-src-lib-components-radio-button.mjs.map +1 -1
- package/fesm2015/mapa-library-ui.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +60 -16
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs +60 -16
- package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-dialog.mjs +2 -2
- package/fesm2020/mapa-library-ui-src-lib-components-dialog.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-dropdown.mjs +60 -16
- package/fesm2020/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-radio-button.mjs +6 -2
- package/fesm2020/mapa-library-ui-src-lib-components-radio-button.mjs.map +1 -1
- package/fesm2020/mapa-library-ui.mjs.map +1 -1
- package/lib/core/elements/element-base.d.ts +3 -2
- package/lib/core/interfaces/dialog-data.interface.d.ts +2 -2
- package/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/mapa-library-ui-0.5.0.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/capability/lib/components/dropdown/src/dropdown.component.d.ts +6 -0
- package/src/lib/components/capability/lib/core/elements/element-base.d.ts +3 -2
- package/src/lib/components/capability/lib/core/interfaces/dialog-data.interface.d.ts +2 -2
- package/src/lib/components/capability/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/src/lib/components/chart/lib/components/dropdown/src/dropdown.component.d.ts +6 -0
- package/src/lib/components/chart/lib/core/elements/element-base.d.ts +3 -2
- package/src/lib/components/chart/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/src/lib/components/dialog/lib/core/interfaces/dialog-data.interface.d.ts +2 -2
- package/src/lib/components/dropdown/lib/components/dropdown/src/dropdown.component.d.ts +6 -0
- package/src/lib/components/dropdown/lib/core/elements/element-base.d.ts +3 -2
- package/src/lib/components/dropdown/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/src/lib/components/radio-button/lib/components/radio-button/src/radio-button.component.d.ts +4 -2
- package/src/lib/components/radio-button/lib/core/elements/element-base.d.ts +3 -2
- package/src/lib/components/radio-button/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/src/lib/components/textarea/lib/core/elements/element-base.d.ts +3 -2
- package/src/lib/components/textarea/lib/core/interfaces/element-group.interface.d.ts +5 -0
- package/mapa-library-ui-0.4.1.tgz +0 -0
|
@@ -72,14 +72,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
72
72
|
class MapaDropdownComponent {
|
|
73
73
|
constructor() {
|
|
74
74
|
this.filteredOptions = new ReplaySubject(1);
|
|
75
|
+
this.filteredGroups = new ReplaySubject(1);
|
|
75
76
|
this.filteredOptionsCache = [];
|
|
77
|
+
this.filteredGroupCache = [];
|
|
76
78
|
this._onDestroy = new Subject();
|
|
77
79
|
this.isIndeterminate = false;
|
|
78
80
|
this.isChecked = false;
|
|
81
|
+
this.isOptionsGroup = false;
|
|
79
82
|
}
|
|
80
83
|
ngOnInit() {
|
|
81
|
-
this.
|
|
82
|
-
|
|
84
|
+
this.isOptionsGroup = this.isElementGroup(this.element.options[0]);
|
|
85
|
+
if (this.isOptionsGroup) {
|
|
86
|
+
this.filteredGroupCache = this.element
|
|
87
|
+
.options.slice();
|
|
88
|
+
this.filteredGroups.next(this.filteredGroupCache);
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
this.filteredOptionsCache = this.element
|
|
92
|
+
.options.slice();
|
|
93
|
+
this.filteredOptions.next(this.filteredOptionsCache);
|
|
94
|
+
}
|
|
83
95
|
if (this.element.search) {
|
|
84
96
|
this.element.search.formControl?.valueChanges
|
|
85
97
|
//.pipe(takeUntil(this._onDestroy))
|
|
@@ -96,20 +108,39 @@ class MapaDropdownComponent {
|
|
|
96
108
|
this._onDestroy.next();
|
|
97
109
|
this._onDestroy.complete();
|
|
98
110
|
}
|
|
111
|
+
filterOptionsFromGroup(group, value) {
|
|
112
|
+
const filterValue = value.toLocaleLowerCase();
|
|
113
|
+
return group.label.toLocaleLowerCase().includes(filterValue)
|
|
114
|
+
? group.options
|
|
115
|
+
: group.options.filter((item) => item.value.toLocaleLowerCase().includes(filterValue));
|
|
116
|
+
}
|
|
99
117
|
filterOptions() {
|
|
100
118
|
if (!this.element.options) {
|
|
101
119
|
return;
|
|
102
120
|
}
|
|
103
121
|
// get the search keyword
|
|
104
122
|
let search = this.element.search?.formControl?.value;
|
|
105
|
-
if (
|
|
106
|
-
|
|
123
|
+
if (this.isOptionsGroup) {
|
|
124
|
+
const groups = this.element.options;
|
|
125
|
+
this.filteredGroupCache = groups
|
|
126
|
+
.map((group) => ({
|
|
127
|
+
label: group.label,
|
|
128
|
+
options: this.filterOptionsFromGroup(group, search),
|
|
129
|
+
}))
|
|
130
|
+
.filter((group) => group.options.length > 0);
|
|
131
|
+
this.filteredGroups.next(this.filteredGroupCache);
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
const options = this.element.options;
|
|
135
|
+
if (!search) {
|
|
136
|
+
this.filteredOptionsCache = options.slice();
|
|
137
|
+
this.filteredOptions.next(this.filteredOptionsCache);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
// filter the options
|
|
141
|
+
this.filteredOptionsCache = options.filter((option) => option.value.toLowerCase().indexOf(search) > -1);
|
|
107
142
|
this.filteredOptions.next(this.filteredOptionsCache);
|
|
108
|
-
return;
|
|
109
143
|
}
|
|
110
|
-
// filter the options
|
|
111
|
-
this.filteredOptionsCache = this.element.options.filter((option) => option.value.toLowerCase().indexOf(search) > -1);
|
|
112
|
-
this.filteredOptions.next(this.filteredOptionsCache);
|
|
113
144
|
}
|
|
114
145
|
setInitialValue() {
|
|
115
146
|
this.filteredOptions
|
|
@@ -122,19 +153,20 @@ class MapaDropdownComponent {
|
|
|
122
153
|
let filteredLength = 0;
|
|
123
154
|
let search = this.element.search?.formControl?.value;
|
|
124
155
|
if (search && search.value) {
|
|
125
|
-
this.filteredOptionsCache.forEach(el => {
|
|
156
|
+
this.filteredOptionsCache.forEach((el) => {
|
|
126
157
|
if (search.value.toLowerCase().indexOf(el) > -1) {
|
|
127
158
|
filteredLength++;
|
|
128
159
|
}
|
|
129
160
|
});
|
|
130
|
-
this.isIndeterminate =
|
|
131
|
-
|
|
161
|
+
this.isIndeterminate =
|
|
162
|
+
filteredLength > 0 && filteredLength < this.filteredOptionsCache.length;
|
|
163
|
+
this.isChecked =
|
|
164
|
+
filteredLength > 0 &&
|
|
165
|
+
filteredLength === this.filteredOptionsCache.length;
|
|
132
166
|
}
|
|
133
167
|
}
|
|
134
168
|
toggleSelectAll(selectAllValue) {
|
|
135
|
-
this.filteredOptions
|
|
136
|
-
//.pipe(take(1), takeUntil(this._onDestroy))
|
|
137
|
-
.subscribe((options) => {
|
|
169
|
+
this.filteredOptions.subscribe((options) => {
|
|
138
170
|
if (selectAllValue) {
|
|
139
171
|
this.formControl?.patchValue(options);
|
|
140
172
|
}
|
|
@@ -142,13 +174,25 @@ class MapaDropdownComponent {
|
|
|
142
174
|
this.formControl?.patchValue([]);
|
|
143
175
|
}
|
|
144
176
|
});
|
|
177
|
+
this.filteredGroups.subscribe((groups) => {
|
|
178
|
+
if (selectAllValue) {
|
|
179
|
+
this.formControl?.patchValue(groups.map((group) => group.options));
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
this.formControl?.patchValue([]);
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
isElementGroup(object) {
|
|
187
|
+
return (object.label !== undefined &&
|
|
188
|
+
object.options !== undefined);
|
|
145
189
|
}
|
|
146
190
|
}
|
|
147
191
|
MapaDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
-
MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n {{ element.label }}\n</label>\n<mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\">\n <mat-select\n #dropdown\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n >\n <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n <ngx-mat-select-search\n *ngIf=\"element.search.formControl\"\n [showToggleAllCheckbox]=\"true\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n [toggleAllCheckboxChecked]=\"isChecked\"\n (toggleAll)=\"toggleSelectAll($event)\"\n ></ngx-mat-select-search>\n </mat-option>\n\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n
|
|
192
|
+
MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n {{ element.label }}\n</label>\n<mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\">\n <mat-select\n #dropdown\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n >\n <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n <ngx-mat-select-search\n *ngIf=\"element.search.formControl\"\n [showToggleAllCheckbox]=\"true\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n [toggleAllCheckboxChecked]=\"isChecked\"\n (toggleAll)=\"toggleSelectAll($event)\"\n ></ngx-mat-select-search>\n </mat-option>\n\n <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n <mat-optgroup *ngFor=\"let group of filteredGroups | async\" [label]=\"group.label\">\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 *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n {{ option.value }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n *ngIf=\"formControl?.hasError('required')\">\n {{ element.errors?.required }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('minlength')\">\n {{ element.errors?.minlength }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('cpf')\">\n {{ element.errors?.cpf }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('cnpj')\">\n {{ element.errors?.cnpj }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('email')\">\n {{ element.errors?.email }}\n </mat-error>\n</mat-form-field>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;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}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:SF-Pro!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-clear{top:-3px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}.mapa-overlay-dropdown .mapa-dropdown__search.mat-option .mat-select-search-input::placeholder{color:#c3c4c7!important}.mapa-overlay-dropdown .mapa-dropdown__search .mat-option-text{width:100%}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i6.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
|
|
149
193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, decorators: [{
|
|
150
194
|
type: Component,
|
|
151
|
-
args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n {{ element.label }}\n</label>\n<mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\">\n <mat-select\n #dropdown\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n >\n <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n <ngx-mat-select-search\n *ngIf=\"element.search.formControl\"\n [showToggleAllCheckbox]=\"true\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n [toggleAllCheckboxChecked]=\"isChecked\"\n (toggleAll)=\"toggleSelectAll($event)\"\n ></ngx-mat-select-search>\n </mat-option>\n\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n
|
|
195
|
+
args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n {{ element.label }}\n</label>\n<mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\">\n <mat-select\n #dropdown\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n >\n <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n <ngx-mat-select-search\n *ngIf=\"element.search.formControl\"\n [showToggleAllCheckbox]=\"true\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\n [toggleAllCheckboxChecked]=\"isChecked\"\n (toggleAll)=\"toggleSelectAll($event)\"\n ></ngx-mat-select-search>\n </mat-option>\n\n <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n <mat-optgroup *ngFor=\"let group of filteredGroups | async\" [label]=\"group.label\">\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 *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n {{ option.value }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n *ngIf=\"formControl?.hasError('required')\">\n {{ element.errors?.required }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('minlength')\">\n {{ element.errors?.minlength }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('cpf')\">\n {{ element.errors?.cpf }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('cnpj')\">\n {{ element.errors?.cnpj }}\n </mat-error>\n <mat-error\n *ngIf=\"formControl?.hasError('email')\">\n {{ element.errors?.email }}\n </mat-error>\n</mat-form-field>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:SF-Pro!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;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}.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"] }]
|
|
152
196
|
}], ctorParameters: function () { return []; }, propDecorators: { formControl: [{
|
|
153
197
|
type: Input
|
|
154
198
|
}], formControlSearch: [{
|