mapa-library-ui 1.6.0 → 1.6.2
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-dropdown-v2.mjs +156 -12
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-v2.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +93 -12
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +18 -3
- package/mapa-library-ui-1.6.2.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/dropdown-v2/index.d.ts +18 -3
- package/mapa-library-ui-1.6.0.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, DestroyRef, Input, Self, Optional, Directive, EventEmitter, Output, InjectionToken, Injector, signal, Inject, Injectable, Component, SecurityContext, Pipe, ChangeDetectionStrategy, EnvironmentInjector, createComponent, HostListener, ViewChild, forwardRef,
|
|
2
|
+
import { inject, DestroyRef, Input, Self, Optional, Directive, EventEmitter, Output, InjectionToken, Injector, signal, Inject, Injectable, Component, SecurityContext, Pipe, ChangeDetectionStrategy, EnvironmentInjector, createComponent, HostListener, ViewChild, forwardRef, effect } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { fromEvent, ReplaySubject } from 'rxjs';
|
|
5
5
|
import * as i1 from '@angular/material/input';
|
|
@@ -37,6 +37,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
|
37
37
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
38
38
|
import * as i1$5 from '@angular/material/dialog';
|
|
39
39
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogConfig } from '@angular/material/dialog';
|
|
40
|
+
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
40
41
|
import * as i3$3 from '@angular/material/radio';
|
|
41
42
|
import { MatRadioModule } from '@angular/material/radio';
|
|
42
43
|
import * as i3$4 from '@angular/material/slide-toggle';
|
|
@@ -6375,14 +6376,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
6375
6376
|
|
|
6376
6377
|
class MapaDropdownV2Component {
|
|
6377
6378
|
constructor() {
|
|
6378
|
-
this.
|
|
6379
|
+
this.i18n = inject(MapaI18nService);
|
|
6379
6380
|
this.isOpenState = signal(false, ...(ngDevMode ? [{ debugName: "isOpenState" }] : []));
|
|
6381
|
+
this.overlayWidthState = signal(0, ...(ngDevMode ? [{ debugName: "overlayWidthState" }] : []));
|
|
6382
|
+
// Tenta abrir para baixo; se não houver espaço no viewport, o CDK
|
|
6383
|
+
// reposiciona automaticamente para cima (fallback), evitando o corte
|
|
6384
|
+
// que ocorria quando o painel era um `position: absolute` local e um
|
|
6385
|
+
// ancestral definia `overflow: hidden` (ex.: `.report-card`).
|
|
6386
|
+
this.overlayPositions = [
|
|
6387
|
+
{ originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 8 },
|
|
6388
|
+
{ originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: -8 },
|
|
6389
|
+
];
|
|
6380
6390
|
}
|
|
6381
6391
|
isOpen() {
|
|
6382
6392
|
return this.isOpenState();
|
|
6383
6393
|
}
|
|
6394
|
+
overlayWidth() {
|
|
6395
|
+
return this.overlayWidthState();
|
|
6396
|
+
}
|
|
6397
|
+
isMultiple() {
|
|
6398
|
+
return !!this.element.multiple;
|
|
6399
|
+
}
|
|
6400
|
+
selectedOptions() {
|
|
6401
|
+
const value = this.formControl.value;
|
|
6402
|
+
if (Array.isArray(value)) {
|
|
6403
|
+
return value;
|
|
6404
|
+
}
|
|
6405
|
+
return value ? [value] : [];
|
|
6406
|
+
}
|
|
6384
6407
|
selectedLabel() {
|
|
6385
|
-
|
|
6408
|
+
const selected = this.selectedOptions();
|
|
6409
|
+
if (!selected.length) {
|
|
6410
|
+
return this.element.placeholder || "";
|
|
6411
|
+
}
|
|
6412
|
+
return selected.map((option) => option.value).join(", ");
|
|
6413
|
+
}
|
|
6414
|
+
isOptionSelected(option) {
|
|
6415
|
+
return this.selectedOptions().some((selected) => selected.key === option.key);
|
|
6416
|
+
}
|
|
6417
|
+
hasValue() {
|
|
6418
|
+
return this.selectedOptions().length > 0;
|
|
6419
|
+
}
|
|
6420
|
+
get selectAllLabel() {
|
|
6421
|
+
return this.i18n.textsSignal().common.selectAll;
|
|
6422
|
+
}
|
|
6423
|
+
isAllSelected() {
|
|
6424
|
+
const options = this.filteredOptions();
|
|
6425
|
+
return (options.length > 0 &&
|
|
6426
|
+
options.every((option) => this.isOptionSelected(option)));
|
|
6427
|
+
}
|
|
6428
|
+
isIndeterminate() {
|
|
6429
|
+
const options = this.filteredOptions();
|
|
6430
|
+
const selectedCount = options.filter((option) => this.isOptionSelected(option)).length;
|
|
6431
|
+
return selectedCount > 0 && selectedCount < options.length;
|
|
6432
|
+
}
|
|
6433
|
+
toggleSelectAll() {
|
|
6434
|
+
const options = this.filteredOptions();
|
|
6435
|
+
const next = this.isAllSelected() ? [] : options.slice();
|
|
6436
|
+
this.formControl.setValue(next);
|
|
6437
|
+
this.formControl.markAsDirty();
|
|
6438
|
+
this.formControl.markAsTouched();
|
|
6386
6439
|
}
|
|
6387
6440
|
options() {
|
|
6388
6441
|
return this.element.options ?? [];
|
|
@@ -6409,6 +6462,7 @@ class MapaDropdownV2Component {
|
|
|
6409
6462
|
const isOpening = !this.isOpenState();
|
|
6410
6463
|
this.isOpenState.set(isOpening);
|
|
6411
6464
|
if (isOpening) {
|
|
6465
|
+
this.overlayWidthState.set(this.triggerButton?.nativeElement.offsetWidth ?? 0);
|
|
6412
6466
|
this.searchControl?.setValue("", { emitEvent: true });
|
|
6413
6467
|
setTimeout(() => {
|
|
6414
6468
|
this.triggerButton?.nativeElement.blur();
|
|
@@ -6420,36 +6474,63 @@ class MapaDropdownV2Component {
|
|
|
6420
6474
|
this.markAsTouchedIfEmpty();
|
|
6421
6475
|
}
|
|
6422
6476
|
selectOption(option) {
|
|
6477
|
+
if (this.isMultiple()) {
|
|
6478
|
+
this.toggleOption(option);
|
|
6479
|
+
return;
|
|
6480
|
+
}
|
|
6423
6481
|
this.formControl.setValue(option);
|
|
6424
6482
|
this.formControl.markAsDirty();
|
|
6425
6483
|
this.formControl.markAsTouched();
|
|
6426
6484
|
this.closeDropdown();
|
|
6427
6485
|
}
|
|
6486
|
+
clearValue(event) {
|
|
6487
|
+
event.stopPropagation();
|
|
6488
|
+
this.formControl.setValue(this.isMultiple() ? [] : null);
|
|
6489
|
+
this.formControl.markAsDirty();
|
|
6490
|
+
this.formControl.markAsTouched();
|
|
6491
|
+
}
|
|
6492
|
+
toggleOption(option) {
|
|
6493
|
+
const current = this.selectedOptions();
|
|
6494
|
+
const next = this.isOptionSelected(option)
|
|
6495
|
+
? current.filter((selected) => selected.key !== option.key)
|
|
6496
|
+
: [...current, option];
|
|
6497
|
+
this.formControl.setValue(next);
|
|
6498
|
+
this.formControl.markAsDirty();
|
|
6499
|
+
this.formControl.markAsTouched();
|
|
6500
|
+
}
|
|
6428
6501
|
closeDropdown() {
|
|
6429
6502
|
this.isOpenState.set(false);
|
|
6430
6503
|
this.searchControl?.setValue("", { emitEvent: true });
|
|
6431
6504
|
this.markAsTouchedIfEmpty();
|
|
6432
6505
|
}
|
|
6433
|
-
|
|
6434
|
-
|
|
6435
|
-
|
|
6436
|
-
|
|
6506
|
+
// O clique que abre o dropdown também alcança este listener (o botão
|
|
6507
|
+
// fica sob o overlay), então ignoramos cliques no próprio trigger para
|
|
6508
|
+
// não fechar imediatamente o painel que acabou de abrir.
|
|
6509
|
+
handleOverlayOutsideClick(event) {
|
|
6510
|
+
if (this.triggerButton?.nativeElement.contains(event.target)) {
|
|
6511
|
+
return;
|
|
6512
|
+
}
|
|
6513
|
+
this.closeDropdown();
|
|
6514
|
+
}
|
|
6515
|
+
handleWindowResize() {
|
|
6516
|
+
if (this.isOpenState()) {
|
|
6517
|
+
this.overlayWidthState.set(this.triggerButton?.nativeElement.offsetWidth ?? 0);
|
|
6437
6518
|
}
|
|
6438
6519
|
}
|
|
6439
6520
|
get searchControl() {
|
|
6440
6521
|
return this.element.search?.formControl;
|
|
6441
6522
|
}
|
|
6442
6523
|
markAsTouchedIfEmpty() {
|
|
6443
|
-
if (!this.
|
|
6524
|
+
if (!this.hasValue()) {
|
|
6444
6525
|
this.formControl.markAsTouched();
|
|
6445
6526
|
}
|
|
6446
6527
|
}
|
|
6447
6528
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6448
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDropdownV2Component, isStandalone: true, selector: "mapa-dropdown-v2", inputs: { element: "element", formControl: "formControl" }, host: { listeners: { "
|
|
6529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDropdownV2Component, isStandalone: true, selector: "mapa-dropdown-v2", inputs: { element: "element", formControl: "formControl" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"mapa-dropdown-v2\"\n [class.mapa-dropdown-v2--open]=\"isOpen()\"\n [class.mapa-dropdown-v2--invalid]=\"shouldShowRequiredError()\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown-v2__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown-v2__trigger\"\n [class.mapa-dropdown-v2__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n >\n <span\n class=\"mapa-dropdown-v2__trigger-text\"\n [class.mapa-dropdown-v2__trigger-text--placeholder]=\"!hasValue()\"\n >\n {{ selectedLabel() }}\n </span>\n @if (hasValue() && element.clearValue) {\n <span\n class=\"mapa-dropdown-v2__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown-v2__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown-v2__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown-v2__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown-v2__options\" role=\"listbox\">\n @if (isMultiple() && filteredOptions().length) {\n <button\n class=\"mapa-dropdown-v2__option mapa-dropdown-v2__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown-v2__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown-v2__option\"\n [class.mapa-dropdown-v2__option--selected]=\"\n isOptionSelected(option)\n \"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown-v2__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n {{ option.value }}\n </button>\n }\n\n @if (!filteredOptions().length) {\n <p class=\"mapa-dropdown-v2__empty-state\">\n {{ element.search?.noEntriesFoundLabel }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowRequiredError() && element.errors?.['required']) {\n <p class=\"mapa-dropdown-v2__error\">\n {{ element.errors?.['required'] }}\n </p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:235px;box-sizing:border-box}.mapa-dropdown-v2{width:100%}.mapa-dropdown-v2__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown-v2__trigger,.mapa-dropdown-v2__search-input,.mapa-dropdown-v2__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown-v2__trigger:focus,.mapa-dropdown-v2__search-input:focus,.mapa-dropdown-v2__option:focus{outline:none}.mapa-dropdown-v2__trigger::placeholder,.mapa-dropdown-v2__search-input::placeholder,.mapa-dropdown-v2__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown-v2__trigger{position:relative;display:flex;align-items:center;text-align:left;cursor:pointer;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown-v2__trigger--clearable{padding-right:70px}.mapa-dropdown-v2__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown-v2--open .mapa-dropdown-v2__trigger,.mapa-dropdown-v2__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown-v2--open .mapa-dropdown-v2__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown-v2__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown-v2__trigger-text--placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown-v2__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown-v2__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown-v2__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown-v2__panel{width:100%;background:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));overflow:hidden}.mapa-dropdown-v2__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown-v2__options{background:var(--mapa-color-surface, #ffffff);max-height:240px;overflow-y:auto}.mapa-dropdown-v2__option{display:flex;align-items:center;text-align:left;cursor:pointer;min-height:44px;transition:background-color .2s ease,color .2s ease}.mapa-dropdown-v2__option:hover{background:#ff560b14}.mapa-dropdown-v2__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown-v2__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown-v2__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown-v2--invalid .mapa-dropdown-v2__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown-v2__error{display:block;margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6449
6530
|
}
|
|
6450
6531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownV2Component, decorators: [{
|
|
6451
6532
|
type: Component,
|
|
6452
|
-
args: [{ selector: "mapa-dropdown-v2", standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-dropdown-v2\"\n [class.mapa-dropdown-v2--open]=\"isOpen()\"\n [class.mapa-dropdown-v2--invalid]=\"shouldShowRequiredError()\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown-v2__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <button\n #triggerButton\n class=\"mapa-dropdown-v2__trigger\"\n [id]=\"element.key || null\"\n type=\"button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n >\n <span\n class=\"mapa-dropdown-v2__trigger-text\"\n [class.mapa-dropdown-v2__trigger-text--placeholder]=\"!
|
|
6533
|
+
args: [{ selector: "mapa-dropdown-v2", standalone: true, imports: [ReactiveFormsModule, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-dropdown-v2\"\n [class.mapa-dropdown-v2--open]=\"isOpen()\"\n [class.mapa-dropdown-v2--invalid]=\"shouldShowRequiredError()\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown-v2__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown-v2__trigger\"\n [class.mapa-dropdown-v2__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"true\"\n >\n <span\n class=\"mapa-dropdown-v2__trigger-text\"\n [class.mapa-dropdown-v2__trigger-text--placeholder]=\"!hasValue()\"\n >\n {{ selectedLabel() }}\n </span>\n @if (hasValue() && element.clearValue) {\n <span\n class=\"mapa-dropdown-v2__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown-v2__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown-v2__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown-v2__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown-v2__options\" role=\"listbox\">\n @if (isMultiple() && filteredOptions().length) {\n <button\n class=\"mapa-dropdown-v2__option mapa-dropdown-v2__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown-v2__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown-v2__option\"\n [class.mapa-dropdown-v2__option--selected]=\"\n isOptionSelected(option)\n \"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown-v2__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n {{ option.value }}\n </button>\n }\n\n @if (!filteredOptions().length) {\n <p class=\"mapa-dropdown-v2__empty-state\">\n {{ element.search?.noEntriesFoundLabel }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowRequiredError() && element.errors?.['required']) {\n <p class=\"mapa-dropdown-v2__error\">\n {{ element.errors?.['required'] }}\n </p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:235px;box-sizing:border-box}.mapa-dropdown-v2{width:100%}.mapa-dropdown-v2__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown-v2__trigger,.mapa-dropdown-v2__search-input,.mapa-dropdown-v2__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown-v2__trigger:focus,.mapa-dropdown-v2__search-input:focus,.mapa-dropdown-v2__option:focus{outline:none}.mapa-dropdown-v2__trigger::placeholder,.mapa-dropdown-v2__search-input::placeholder,.mapa-dropdown-v2__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown-v2__trigger{position:relative;display:flex;align-items:center;text-align:left;cursor:pointer;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown-v2__trigger--clearable{padding-right:70px}.mapa-dropdown-v2__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown-v2--open .mapa-dropdown-v2__trigger,.mapa-dropdown-v2__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown-v2--open .mapa-dropdown-v2__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown-v2__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown-v2__trigger-text--placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown-v2__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown-v2__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown-v2__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown-v2__panel{width:100%;background:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));overflow:hidden}.mapa-dropdown-v2__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown-v2__options{background:var(--mapa-color-surface, #ffffff);max-height:240px;overflow-y:auto}.mapa-dropdown-v2__option{display:flex;align-items:center;text-align:left;cursor:pointer;min-height:44px;transition:background-color .2s ease,color .2s ease}.mapa-dropdown-v2__option:hover{background:#ff560b14}.mapa-dropdown-v2__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown-v2__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown-v2__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown-v2--invalid .mapa-dropdown-v2__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown-v2__error{display:block;margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}\n"] }]
|
|
6453
6534
|
}], propDecorators: { element: [{
|
|
6454
6535
|
type: Input,
|
|
6455
6536
|
args: [{ required: true }]
|
|
@@ -6462,9 +6543,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
6462
6543
|
}], searchInput: [{
|
|
6463
6544
|
type: ViewChild,
|
|
6464
6545
|
args: ["searchInput"]
|
|
6465
|
-
}],
|
|
6546
|
+
}], handleWindowResize: [{
|
|
6466
6547
|
type: HostListener,
|
|
6467
|
-
args: ["
|
|
6548
|
+
args: ["window:resize"]
|
|
6468
6549
|
}] } });
|
|
6469
6550
|
|
|
6470
6551
|
/*
|