@mozaic-ds/angular 2.0.13 → 2.0.14
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.
|
@@ -4,7 +4,7 @@ import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/route
|
|
|
4
4
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet, JsonPipe } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
-
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20 } from '@mozaic-ds/icons-angular';
|
|
7
|
+
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, Search20, CheckCircle20 } from '@mozaic-ds/icons-angular';
|
|
8
8
|
import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject } from 'rxjs';
|
|
@@ -11054,11 +11054,22 @@ class McComboboxComponent {
|
|
|
11054
11054
|
useExisting: forwardRef(() => McComboboxComponent),
|
|
11055
11055
|
multi: true,
|
|
11056
11056
|
},
|
|
11057
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n </svg>\n </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n <svg\n class=\"mc-text-input__icon\"\n height=\"20\"\n width=\"20\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n fill=\"currentColor\"\n />\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"mc-text-input__control\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n <span class=\"mc-button__label\">{{ selectAllText() }}</span>\n </button>\n <button\n class=\"mc-button mc-button--ghost mc-button--s\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <span class=\"mc-button__label\">{{ clearText() }}</span>\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n @if (isSectionPartiallySelected(item.title)) {\n <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n } @else {\n <path\n d=\"M5 10l3 3 7-7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"uid + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n <path\n d=\"M5 10l3 3 7-7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n } @else {\n <svg\n class=\"mc-option-listbox__selection-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11057
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled20 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown20 />\n </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n <Search20 class=\"mc-text-input__icon\" />\n <input\n #searchInput\n type=\"text\"\n class=\"mc-text-input__control\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <Check20 />\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"uid + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <Check20 />\n </span>\n } @else {\n <CheckCircle20 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["hostClass"] }, { kind: "component", type: Search20, selector: "Search20", inputs: ["hostClass"] }, { kind: "component", type: Check20, selector: "Check20", inputs: ["hostClass"] }, { kind: "component", type: CheckCircle20, selector: "CheckCircle20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11058
11058
|
}
|
|
11059
11059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: McComboboxComponent, decorators: [{
|
|
11060
11060
|
type: Component,
|
|
11061
|
-
args: [{ selector: 'moz-combobox', imports: [
|
|
11061
|
+
args: [{ selector: 'moz-combobox', imports: [
|
|
11062
|
+
CdkConnectedOverlay,
|
|
11063
|
+
CdkOverlayOrigin,
|
|
11064
|
+
ScrollingModule,
|
|
11065
|
+
MozLoaderComponent,
|
|
11066
|
+
MozButtonComponent,
|
|
11067
|
+
ChevronDown20,
|
|
11068
|
+
CrossCircleFilled20,
|
|
11069
|
+
Search20,
|
|
11070
|
+
Check20,
|
|
11071
|
+
CheckCircle20,
|
|
11072
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
11062
11073
|
{
|
|
11063
11074
|
provide: NG_VALUE_ACCESSOR,
|
|
11064
11075
|
useExisting: forwardRef(() => McComboboxComponent),
|
|
@@ -11072,7 +11083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
11072
11083
|
'[class.mc-combobox--disabled]': 'isEffectivelyDisabled()',
|
|
11073
11084
|
'[class.mc-combobox--readonly]': 'readonly()',
|
|
11074
11085
|
'[class.mc-combobox--s]': 'size() === "s"',
|
|
11075
|
-
}, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n </svg>\n </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n <svg\n class=\"mc-text-input__icon\"\n height=\"20\"\n width=\"20\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n fill=\"currentColor\"\n />\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"mc-text-input__control\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n <span class=\"mc-button__label\">{{ selectAllText() }}</span>\n </button>\n <button\n class=\"mc-button mc-button--ghost mc-button--s\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <span class=\"mc-button__label\">{{ clearText() }}</span>\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n @if (isSectionPartiallySelected(item.title)) {\n <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n } @else {\n <path\n d=\"M5 10l3 3 7-7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"uid + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n <path\n d=\"M5 10l3 3 7-7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n } @else {\n <svg\n class=\"mc-option-listbox__selection-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
11086
|
+
}, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled20 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown20 />\n </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n <Search20 class=\"mc-text-input__icon\" />\n <input\n #searchInput\n type=\"text\"\n class=\"mc-text-input__control\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <Check20 />\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"uid + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <span class=\"mc-option-listbox__checkbox\">\n <Check20 />\n </span>\n } @else {\n <CheckCircle20 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
11076
11087
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], searchInputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
|
|
11077
11088
|
|
|
11078
11089
|
/**
|