mapa-library-ui 1.2.0 → 1.4.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/fesm2022/mapa-library-ui-src-lib-components-capability.mjs +24 -2
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs +28 -6
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs +77 -13
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +77 -13
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs +27 -5
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs +24 -2
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs +58 -7
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +216 -29
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs +34 -6
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-radio-button.mjs +29 -5
- package/fesm2022/mapa-library-ui-src-lib-components-radio-button.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-slide-toggle.mjs +29 -5
- package/fesm2022/mapa-library-ui-src-lib-components-slide-toggle.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +77 -13
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-textarea.mjs +27 -3
- package/fesm2022/mapa-library-ui-src-lib-components-textarea.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +306 -87
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +67 -10
- package/mapa-library-ui-1.4.0.tgz +0 -0
- package/package.json +2 -2
- package/src/lib/components/capability/index.d.ts +6 -2
- package/src/lib/components/dropdown/index.d.ts +6 -2
- package/src/lib/components/form/index.d.ts +23 -7
- package/src/lib/components/input/index.d.ts +6 -2
- package/src/lib/components/radio-button/index.d.ts +7 -3
- package/src/lib/components/slide-toggle/index.d.ts +7 -3
- package/src/lib/components/textarea/index.d.ts +6 -2
- package/mapa-library-ui-1.2.0.tgz +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, SecurityContext, Pipe, DestroyRef, ViewChild, ChangeDetectionStrategy, Self, Directive } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, SecurityContext, Pipe, DestroyRef, forwardRef, ViewChild, ChangeDetectionStrategy, Self, Directive } from '@angular/core';
|
|
3
3
|
import * as i2$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/material/icon';
|
|
6
6
|
import { MatIconModule } from '@angular/material/icon';
|
|
7
7
|
import * as i2 from '@angular/platform-browser';
|
|
8
8
|
import * as i2$2 from '@angular/forms';
|
|
9
|
-
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
9
|
+
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
10
|
import * as i2$3 from '@angular/material/checkbox';
|
|
11
11
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
12
12
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -290,6 +290,18 @@ class MapaDropdownComponent {
|
|
|
290
290
|
this.isChecked = false;
|
|
291
291
|
this.isOptionsGroup = false;
|
|
292
292
|
}
|
|
293
|
+
writeValue(_value) {
|
|
294
|
+
// No-op: inner <mat-select [formControl]="formControl"> handles binding.
|
|
295
|
+
}
|
|
296
|
+
registerOnChange(_fn) {
|
|
297
|
+
// No-op.
|
|
298
|
+
}
|
|
299
|
+
registerOnTouched(_fn) {
|
|
300
|
+
// No-op.
|
|
301
|
+
}
|
|
302
|
+
setDisabledState(_isDisabled) {
|
|
303
|
+
// No-op.
|
|
304
|
+
}
|
|
293
305
|
get texts() {
|
|
294
306
|
return this.i18n.textsSignal();
|
|
295
307
|
}
|
|
@@ -431,6 +443,11 @@ class MapaDropdownComponent {
|
|
|
431
443
|
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
|
432
444
|
useValue: { appearance: "outline" },
|
|
433
445
|
},
|
|
446
|
+
{
|
|
447
|
+
provide: NG_VALUE_ACCESSOR,
|
|
448
|
+
useExisting: forwardRef(() => MapaDropdownComponent),
|
|
449
|
+
multi: true,
|
|
450
|
+
},
|
|
434
451
|
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (element) {\n @if (element.label) {\n <label class=\"mapa-dropdown__label\">\n {{ element.label }}\n </label>\n }\n <div class=\"mapa-form--inline\">\n <mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\"\n >\n <mat-select\n #dropdown\n ngDefaultControl\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n [compareWith]=\"compareFn\"\n (openedChange)=\"triggerOpenedChange($event)\"\n >\n @if (element.search) {\n <mat-option class=\"mapa-dropdown__search\">\n @if (element.search.formControl) {\n <ngx-mat-select-search\n [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n ></ngx-mat-select-search>\n }\n </mat-option>\n }\n @if (element.multiple) {\n <mat-option class=\"mapa-dropdown__option--select-all\">\n <mat-checkbox\n class=\"mat-option\"\n [indeterminate]=\"isIndeterminate\"\n [checked]=\"isChecked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleSelectAll($event)\"\n >\n {{ selectAllLabel }}\n </mat-checkbox>\n </mat-option>\n }\n @if (isOptionsGroup) {\n @if (filteredGroups | async; as groups) {\n @for (group of groups; track group.label) {\n <mat-optgroup [label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <mat-option\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option--children-level-' + option.childrenLevel,\n ]\"\n >\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n } @else {\n @if (filteredOptions | async; as options) {\n @for (option of options; track option.key) {\n <mat-option\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n option.childrenLevel,\n ]\"\n >\n <span\n class=\"mapa-dropdown__option-value\"\n [innerHTML]=\"option.value | safeHtml\"\n ></span>\n </mat-option>\n }\n }\n }\n\n @for (option of selectedOptions; track option.key) {\n <mat-option\n hidden\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option--children-level-' + option.childrenLevel,\n ]\"\n >\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </mat-option>\n }\n </mat-select>\n @if (element.hint) {\n <mat-hint>{{ element.hint }}</mat-hint>\n }\n <mat-error>\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </mat-error>\n @if (hasValue() && !formControl.disabled && element.clearValue) {\n <mat-icon\n (click)=\"clearValue($event)\"\n class=\"mapa-input--close\"\n >close</mat-icon\n >\n }\n </mat-form-field>\n @if (element.actionButton) {\n <div class=\"mapa-form--action\">\n <mapa-button\n color=\"basic\"\n (click)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n </div>\n }\n </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
435
452
|
}
|
|
436
453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, decorators: [{
|
|
@@ -456,6 +473,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
456
473
|
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
|
457
474
|
useValue: { appearance: "outline" },
|
|
458
475
|
},
|
|
476
|
+
{
|
|
477
|
+
provide: NG_VALUE_ACCESSOR,
|
|
478
|
+
useExisting: forwardRef(() => MapaDropdownComponent),
|
|
479
|
+
multi: true,
|
|
480
|
+
},
|
|
459
481
|
], standalone: true, template: "@if (element) {\n @if (element.label) {\n <label class=\"mapa-dropdown__label\">\n {{ element.label }}\n </label>\n }\n <div class=\"mapa-form--inline\">\n <mat-form-field\n appearance=\"outline\"\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n [class.mapa-dropdown--labeled]=\"!!element.label\"\n >\n <mat-select\n #dropdown\n ngDefaultControl\n [formControl]=\"formControl\"\n [multiple]=\"element.multiple\"\n [placeholder]=\"element.placeholder || ''\"\n [compareWith]=\"compareFn\"\n (openedChange)=\"triggerOpenedChange($event)\"\n >\n @if (element.search) {\n <mat-option class=\"mapa-dropdown__search\">\n @if (element.search.formControl) {\n <ngx-mat-select-search\n [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n [formControl]=\"element.search.formControl\"\n [placeholderLabel]=\"element.search.placeholder || ''\"\n i18n-placeholderLabel\n [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n ></ngx-mat-select-search>\n }\n </mat-option>\n }\n @if (element.multiple) {\n <mat-option class=\"mapa-dropdown__option--select-all\">\n <mat-checkbox\n class=\"mat-option\"\n [indeterminate]=\"isIndeterminate\"\n [checked]=\"isChecked\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleSelectAll($event)\"\n >\n {{ selectAllLabel }}\n </mat-checkbox>\n </mat-option>\n }\n @if (isOptionsGroup) {\n @if (filteredGroups | async; as groups) {\n @for (group of groups; track group.label) {\n <mat-optgroup [label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <mat-option\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option--children-level-' + option.childrenLevel,\n ]\"\n >\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n } @else {\n @if (filteredOptions | async; as options) {\n @for (option of options; track option.key) {\n <mat-option\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n option.childrenLevel,\n ]\"\n >\n <span\n class=\"mapa-dropdown__option-value\"\n [innerHTML]=\"option.value | safeHtml\"\n ></span>\n </mat-option>\n }\n }\n }\n\n @for (option of selectedOptions; track option.key) {\n <mat-option\n hidden\n [value]=\"option\"\n [ngClass]=\"[\n 'mapa-dropdown__option--children-level-' + option.childrenLevel,\n ]\"\n >\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </mat-option>\n }\n </mat-select>\n @if (element.hint) {\n <mat-hint>{{ element.hint }}</mat-hint>\n }\n <mat-error>\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </mat-error>\n @if (hasValue() && !formControl.disabled && element.clearValue) {\n <mat-icon\n (click)=\"clearValue($event)\"\n class=\"mapa-input--close\"\n >close</mat-icon\n >\n }\n </mat-form-field>\n @if (element.actionButton) {\n <div class=\"mapa-form--action\">\n <mapa-button\n color=\"basic\"\n (click)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n </div>\n }\n </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
|
|
460
482
|
}], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
|
|
461
483
|
type: Input
|
|
@@ -571,17 +593,38 @@ class MapaInputComponent {
|
|
|
571
593
|
constructor() {
|
|
572
594
|
this.suffix = new EventEmitter();
|
|
573
595
|
}
|
|
596
|
+
writeValue(_value) {
|
|
597
|
+
// No-op: the inner <input> is bound directly to the @Input formControl,
|
|
598
|
+
// so writes from the parent FormControl already propagate through it.
|
|
599
|
+
}
|
|
600
|
+
registerOnChange(_fn) {
|
|
601
|
+
// No-op: change propagation is handled by the DefaultValueAccessor on the
|
|
602
|
+
// inner <input matInput [formControl]="formControl"> binding.
|
|
603
|
+
}
|
|
604
|
+
registerOnTouched(_fn) {
|
|
605
|
+
// No-op for the same reason.
|
|
606
|
+
}
|
|
607
|
+
setDisabledState(_isDisabled) {
|
|
608
|
+
// No-op: disabled state is propagated via the @Input formControl directly.
|
|
609
|
+
}
|
|
574
610
|
hasValue() {
|
|
575
|
-
return !!this.formControl
|
|
611
|
+
return !!this.formControl?.value;
|
|
576
612
|
}
|
|
577
613
|
clearValue() {
|
|
578
|
-
this.formControl
|
|
614
|
+
this.formControl?.setValue(null);
|
|
579
615
|
}
|
|
580
616
|
suffixEmit() {
|
|
581
617
|
this.suffix.emit();
|
|
582
618
|
}
|
|
583
619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [
|
|
620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [
|
|
621
|
+
provideNgxMask(),
|
|
622
|
+
{
|
|
623
|
+
provide: NG_VALUE_ACCESSOR,
|
|
624
|
+
useExisting: forwardRef(() => MapaInputComponent),
|
|
625
|
+
multi: true,
|
|
626
|
+
},
|
|
627
|
+
], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n <mat-form-field\n class=\"mapa-input\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n >\n <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n {{ element.prefix }}\n </mat-icon>\n <input\n *ngIf=\"element.autosize\"\n matInput\n matInputAutosize\n [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n [formControl]=\"formControl\"\n [placeholder]=\"element.placeholder || element.label\"\n [maxlength]=\"element.maxLength\"\n (keydown.enter)=\"suffixEmit()\"\n [type]=\"type\"\n [mask]=\"element.mask\"\n thousandSeparator=\".\"\n decimalMarker=\",\"\n [autocomplete]=\"element.autocomplete\"\n [readOnly]=\"element.readonly\"\n />\n <input\n matInput\n *ngIf=\"!element.autosize\"\n [formControl]=\"formControl\"\n [placeholder]=\"element.placeholder || element.label\"\n [maxlength]=\"element.maxLength\"\n (keydown.enter)=\"suffixEmit()\"\n [type]=\"type\"\n [mask]=\"element.mask\"\n [autocomplete]=\"element.autocomplete\"\n [readOnly]=\"element.readonly\"\n />\n <mat-icon\n *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n (click)=\"clearValue()\"\n class=\"mapa-input--close\"\n matSuffix\n >close</mat-icon\n >\n <mat-icon\n *ngIf=\"element.suffix\"\n class=\"mapa-input--suffix\"\n matSuffix\n (click)=\"suffix.emit()\"\n >\n {{ element.suffix }}\n </mat-icon>\n <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n <mat-error>\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </mat-error>\n </mat-form-field>\n\n <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n <mapa-button\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n </div>\n</div>\n", styles: [".mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: 8px;--mat-form-field-outlined-outline-width: 2px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{padding:unset}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
|
|
585
628
|
}
|
|
586
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaInputComponent, decorators: [{
|
|
587
630
|
type: Component,
|
|
@@ -596,7 +639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
596
639
|
ButtonComponent,
|
|
597
640
|
MatInputAutosizeDirective,
|
|
598
641
|
MapaFormErrorsComponent,
|
|
599
|
-
], providers: [
|
|
642
|
+
], providers: [
|
|
643
|
+
provideNgxMask(),
|
|
644
|
+
{
|
|
645
|
+
provide: NG_VALUE_ACCESSOR,
|
|
646
|
+
useExisting: forwardRef(() => MapaInputComponent),
|
|
647
|
+
multi: true,
|
|
648
|
+
},
|
|
649
|
+
], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n <mat-form-field\n class=\"mapa-input\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n >\n <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n {{ element.prefix }}\n </mat-icon>\n <input\n *ngIf=\"element.autosize\"\n matInput\n matInputAutosize\n [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n [formControl]=\"formControl\"\n [placeholder]=\"element.placeholder || element.label\"\n [maxlength]=\"element.maxLength\"\n (keydown.enter)=\"suffixEmit()\"\n [type]=\"type\"\n [mask]=\"element.mask\"\n thousandSeparator=\".\"\n decimalMarker=\",\"\n [autocomplete]=\"element.autocomplete\"\n [readOnly]=\"element.readonly\"\n />\n <input\n matInput\n *ngIf=\"!element.autosize\"\n [formControl]=\"formControl\"\n [placeholder]=\"element.placeholder || element.label\"\n [maxlength]=\"element.maxLength\"\n (keydown.enter)=\"suffixEmit()\"\n [type]=\"type\"\n [mask]=\"element.mask\"\n [autocomplete]=\"element.autocomplete\"\n [readOnly]=\"element.readonly\"\n />\n <mat-icon\n *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n (click)=\"clearValue()\"\n class=\"mapa-input--close\"\n matSuffix\n >close</mat-icon\n >\n <mat-icon\n *ngIf=\"element.suffix\"\n class=\"mapa-input--suffix\"\n matSuffix\n (click)=\"suffix.emit()\"\n >\n {{ element.suffix }}\n </mat-icon>\n <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n <mat-error>\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </mat-error>\n </mat-form-field>\n\n <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n <mapa-button\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n </div>\n</div>\n", styles: [".mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: 8px;--mat-form-field-outlined-outline-width: 2px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{padding:unset}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"] }]
|
|
600
650
|
}], propDecorators: { formControl: [{
|
|
601
651
|
type: Input
|
|
602
652
|
}], element: [{
|
|
@@ -635,12 +685,13 @@ class FiltersComponent {
|
|
|
635
685
|
this.selectedValues.emit(this.form.getRawValue());
|
|
636
686
|
}
|
|
637
687
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: FiltersComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: FiltersComponent, isStandalone: true, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n <div *ngFor=\"let filter of elements\">\n <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n </div>\n <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n <mapa-dropdown\n [formControl]=\"getFormControl(filter.key)\"\n [element]=\"filter\"\n ></mapa-dropdown>\n </div>\n <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n <mapa-input\n [formControl]=\"getFormControl(filter.key)\"\n [element]=\"filter\"\n ></mapa-input>\n </div>\n </div>\n <div class=\"filter__item\">\n <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n {{ clearFiltersLabel }}\n </mapa-button>\n <mapa-button\n [color]=\"'primary'\"\n [disabled]=\"!!form.invalid\"\n (clicked)=\"emitSelectedValues()\"\n >\n {{ submitFiltersLabel }}\n </mapa-button>\n </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:100%;gap:30px}.filter__item,.filter__item--resizable{display:flex;align-items:flex-end}.filter .mapa-dropdown{max-width:none;min-width:10vw}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] }); }
|
|
688
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: FiltersComponent, isStandalone: true, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n <div *ngFor=\"let filter of elements\">\n <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n </div>\n <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n <mapa-dropdown\n [formControl]=\"getFormControl(filter.key)\"\n [element]=\"filter\"\n ></mapa-dropdown>\n </div>\n <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n <mapa-input\n [formControl]=\"getFormControl(filter.key)\"\n [element]=\"filter\"\n ></mapa-input>\n </div>\n </div>\n <div class=\"filter__item\">\n <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n {{ clearFiltersLabel }}\n </mapa-button>\n <mapa-button\n [color]=\"'primary'\"\n [disabled]=\"!!form.invalid\"\n (clicked)=\"emitSelectedValues()\"\n >\n {{ submitFiltersLabel }}\n </mapa-button>\n </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:100%;gap:30px}.filter__item,.filter__item--resizable{display:flex;align-items:flex-end}.filter .mapa-dropdown{max-width:none;min-width:10vw}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] }); }
|
|
639
689
|
}
|
|
640
690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: FiltersComponent, decorators: [{
|
|
641
691
|
type: Component,
|
|
642
692
|
args: [{ selector: 'mapa-filters', imports: [
|
|
643
693
|
CommonModule,
|
|
694
|
+
ReactiveFormsModule,
|
|
644
695
|
ButtonComponent,
|
|
645
696
|
CheckboxComponent,
|
|
646
697
|
MapaDropdownComponent,
|