mapa-library-ui 1.7.0 → 1.7.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-capability.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs +5 -5
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +11 -11
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs +3 -3
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +11 -11
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/mapa-library-ui-1.7.2.tgz +0 -0
- package/package.json +1 -1
- package/mapa-library-ui-1.7.0.tgz +0 -0
|
@@ -565,7 +565,7 @@ class MapaDropdownComponent {
|
|
|
565
565
|
useExisting: forwardRef(() => MapaDropdownComponent),
|
|
566
566
|
multi: true,
|
|
567
567
|
},
|
|
568
|
-
], 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\"\n [class.mapa-dropdown--open]=\"isOpen()\"\n [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n [class.mapa-dropdown--disabled]=\"isDisabled()\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <div class=\"mapa-dropdown__field-row\">\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown__trigger\"\n [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n >\n <span\n class=\"mapa-dropdown__trigger-text\"\n [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n [innerHTML]=\"selectedLabel() | safeHtml\"\n ></span>\n @if (hasValue() && !isDisabled() && element.clearValue) {\n <span\n class=\"mapa-dropdown__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n @if (element.actionButton) {\n <mapa-button\n class=\"mapa-dropdown__action\"\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown__options\" role=\"listbox\">\n @if (isMultiple() && visibleOptions().length) {\n <button\n class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n\n @if (hasGroups()) {\n @for (group of filteredGroups(); track group.label) {\n <div class=\"mapa-dropdown__group\" role=\"group\">\n <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n @for (option of group.options; track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n </div>\n }\n } @else {\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n }\n\n @if (!visibleOptions().length) {\n <p class=\"mapa-dropdown__empty-state\">\n {{ emptyStateLabel() }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-dropdown__error\">\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__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__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__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__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__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__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__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__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { 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: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
568
|
+
], 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\"\n [class.mapa-dropdown--open]=\"isOpen()\"\n [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n [class.mapa-dropdown--disabled]=\"isDisabled()\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <div class=\"mapa-dropdown__field-row\">\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown__trigger\"\n [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n tabindex=\"-1\"\n >\n <span\n class=\"mapa-dropdown__trigger-text\"\n [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n [innerHTML]=\"selectedLabel() | safeHtml\"\n ></span>\n @if (hasValue() && !isDisabled() && element.clearValue) {\n <span\n class=\"mapa-dropdown__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n @if (element.actionButton) {\n <mapa-button\n class=\"mapa-dropdown__action\"\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown__options\" role=\"listbox\">\n @if (isMultiple() && visibleOptions().length) {\n <button\n class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n\n @if (hasGroups()) {\n @for (group of filteredGroups(); track group.label) {\n <div class=\"mapa-dropdown__group\" role=\"group\">\n <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n @for (option of group.options; track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n </div>\n }\n } @else {\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n }\n\n @if (!visibleOptions().length) {\n <p class=\"mapa-dropdown__empty-state\">\n {{ emptyStateLabel() }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-dropdown__error\">\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__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__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__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__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__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__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__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__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { 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: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
569
569
|
}
|
|
570
570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, decorators: [{
|
|
571
571
|
type: Component,
|
|
@@ -582,7 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
582
582
|
useExisting: forwardRef(() => MapaDropdownComponent),
|
|
583
583
|
multi: true,
|
|
584
584
|
},
|
|
585
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--open]=\"isOpen()\"\n [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n [class.mapa-dropdown--disabled]=\"isDisabled()\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <div class=\"mapa-dropdown__field-row\">\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown__trigger\"\n [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n >\n <span\n class=\"mapa-dropdown__trigger-text\"\n [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n [innerHTML]=\"selectedLabel() | safeHtml\"\n ></span>\n @if (hasValue() && !isDisabled() && element.clearValue) {\n <span\n class=\"mapa-dropdown__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n @if (element.actionButton) {\n <mapa-button\n class=\"mapa-dropdown__action\"\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown__options\" role=\"listbox\">\n @if (isMultiple() && visibleOptions().length) {\n <button\n class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n\n @if (hasGroups()) {\n @for (group of filteredGroups(); track group.label) {\n <div class=\"mapa-dropdown__group\" role=\"group\">\n <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n @for (option of group.options; track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n </div>\n }\n } @else {\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n }\n\n @if (!visibleOptions().length) {\n <p class=\"mapa-dropdown__empty-state\">\n {{ emptyStateLabel() }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-dropdown__error\">\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__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__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__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__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__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__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__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__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"] }]
|
|
585
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-dropdown\"\n [class.mapa-dropdown--open]=\"isOpen()\"\n [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n [class.mapa-dropdown--disabled]=\"isDisabled()\"\n [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n @if (element.label) {\n <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <div class=\"mapa-dropdown__field-row\">\n <button\n #triggerButton\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n class=\"mapa-dropdown__trigger\"\n [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n [id]=\"element.key || null\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n tabindex=\"-1\"\n >\n <span\n class=\"mapa-dropdown__trigger-text\"\n [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n [innerHTML]=\"selectedLabel() | safeHtml\"\n ></span>\n @if (hasValue() && !isDisabled() && element.clearValue) {\n <span\n class=\"mapa-dropdown__clear\"\n role=\"button\"\n aria-label=\"Limpar\"\n (click)=\"clearValue($event)\"\n >\n ×\n </span>\n }\n </button>\n\n @if (element.actionButton) {\n <mapa-button\n class=\"mapa-dropdown__action\"\n color=\"basic\"\n (clicked)=\"element.actionButton.action.emit(true)\"\n >\n {{ element.actionButton.label }}\n </mapa-button>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-dropdown__panel\">\n @if (hasSearch()) {\n <input\n #searchInput\n class=\"mapa-dropdown__search-input\"\n type=\"text\"\n [formControl]=\"searchControl!\"\n [placeholder]=\"searchPlaceholder()\"\n />\n }\n\n <div class=\"mapa-dropdown__options\" role=\"listbox\">\n @if (isMultiple() && visibleOptions().length) {\n <button\n class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n type=\"button\"\n (click)=\"toggleSelectAll()\"\n >\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n />\n {{ selectAllLabel }}\n </button>\n }\n\n @if (hasGroups()) {\n @for (group of filteredGroups(); track group.label) {\n <div class=\"mapa-dropdown__group\" role=\"group\">\n <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n @for (option of group.options; track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n </div>\n }\n } @else {\n @for (option of filteredOptions(); track option.key) {\n <button\n class=\"mapa-dropdown__option\"\n [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n [style.padding-left.px]=\"optionPadding(option)\"\n type=\"button\"\n (click)=\"selectOption(option)\"\n >\n @if (isMultiple()) {\n <input\n class=\"mapa-dropdown__checkbox\"\n type=\"checkbox\"\n [checked]=\"isOptionSelected(option)\"\n (click)=\"$event.stopPropagation(); selectOption(option)\"\n />\n }\n <span [innerHTML]=\"option.value | safeHtml\"></span>\n </button>\n }\n }\n\n @if (!visibleOptions().length) {\n <p class=\"mapa-dropdown__empty-state\">\n {{ emptyStateLabel() }}\n </p>\n }\n </div>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-dropdown__error\">\n <mapa-form-errors\n [control]=\"formControl\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__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__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__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__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__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__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__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__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"] }]
|
|
586
586
|
}], propDecorators: { element: [{
|
|
587
587
|
type: Input,
|
|
588
588
|
args: [{ required: true }]
|