@mozaic-ds/angular 2.0.34 → 2.0.36
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.
|
@@ -2935,20 +2935,26 @@ class MozSegmentedControlComponent {
|
|
|
2935
2935
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2936
2936
|
size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2937
2937
|
full = input(false, { ...(ngDevMode ? { debugName: "full" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2938
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2938
2939
|
ariaLabel = input('Segmented control', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2939
2940
|
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
2940
2941
|
change = output();
|
|
2941
2942
|
classes = computed(() => ({
|
|
2942
2943
|
'segmented-control': true,
|
|
2944
|
+
'segmented-control--disabled': this.disabled(),
|
|
2943
2945
|
'segmented-control--m': this.size() === 'm',
|
|
2944
2946
|
'segmented-control--full': this.full(),
|
|
2945
2947
|
}), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2946
2948
|
segmentClasses = (index) => computed(() => ({
|
|
2949
|
+
'segmented-control__segment--disabled': this.disabled() || !!this.items()[index]?.disabled,
|
|
2947
2950
|
'segmented-control__segment': true,
|
|
2948
2951
|
'segmented-control__segment--selected': index === this.selectedIndex(),
|
|
2949
2952
|
}));
|
|
2950
2953
|
buttons = viewChildren('segBtn', ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
2951
2954
|
onSelect(index) {
|
|
2955
|
+
if (this.disabled() || this.items()[index]?.disabled) {
|
|
2956
|
+
return;
|
|
2957
|
+
}
|
|
2952
2958
|
const item = this.items()[index];
|
|
2953
2959
|
this.selectedIndex.set(index);
|
|
2954
2960
|
this.change.emit({ index, value: item.value });
|
|
@@ -2960,12 +2966,12 @@ class MozSegmentedControlComponent {
|
|
|
2960
2966
|
btn?.focus();
|
|
2961
2967
|
}
|
|
2962
2968
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2963
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozSegmentedControlComponent, isStandalone: true, selector: "moz-segmented-control", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", change: "change" }, viewQueries: [{ propertyName: "buttons", predicate: ["segBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n
|
|
2969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozSegmentedControlComponent, isStandalone: true, selector: "moz-segmented-control", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", change: "change" }, viewQueries: [{ propertyName: "buttons", predicate: ["segBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n #segBtn\n type=\"button\"\n [class]=\"segmentClasses(i)()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"disabled() || !!item.disabled\"\n [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n [disabled]=\"disabled() || !!item.disabled\"\n (click)=\"onSelect(i)\"\n >\n {{ item.label }}\n </button>\n }\n</div>\n", styles: [".mc-segmented-control,.segmented-control{display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:.25rem;box-sizing:border-box;gap:.25rem}.mc-segmented-control__segment,.segmented-control__segment{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color .3s ease;white-space:nowrap}.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover,.segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover{background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, .05))}.mc-segmented-control__segment--selected,.segmented-control__segment--selected{color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63)}.mc-segmented-control__segment:focus-visible,.segmented-control__segment:focus-visible{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-segmented-control--m,.segmented-control--m{height:3rem;padding:.5rem}.mc-segmented-control--m .mc-segmented-control__segment,.segmented-control--m .mc-segmented-control__segment,.mc-segmented-control--m .segmented-control__segment,.segmented-control--m .segmented-control__segment{height:2rem}.mc-segmented-control--full,.segmented-control--full{display:flex}.segmented-control--disabled{cursor:not-allowed}.segmented-control__segment:disabled{color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.segmented-control__segment:disabled:not(.segmented-control__segment--selected):hover{background-color:transparent}.segmented-control__segment:disabled.segmented-control__segment--selected{background-color:var(--button-state-disabled-background, #d9d9d9);color:var(--button-state-disabled-color, #737373)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2964
2970
|
}
|
|
2965
2971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozSegmentedControlComponent, decorators: [{
|
|
2966
2972
|
type: Component,
|
|
2967
|
-
args: [{ selector: 'moz-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n
|
|
2968
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], change: [{ type: i0.Output, args: ["change"] }], buttons: [{ type: i0.ViewChildren, args: ['segBtn', { isSignal: true }] }] } });
|
|
2973
|
+
args: [{ selector: 'moz-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n #segBtn\n type=\"button\"\n [class]=\"segmentClasses(i)()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"disabled() || !!item.disabled\"\n [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n [disabled]=\"disabled() || !!item.disabled\"\n (click)=\"onSelect(i)\"\n >\n {{ item.label }}\n </button>\n }\n</div>\n", styles: [".mc-segmented-control,.segmented-control{display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:.25rem;box-sizing:border-box;gap:.25rem}.mc-segmented-control__segment,.segmented-control__segment{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color .3s ease;white-space:nowrap}.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover,.segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover{background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, .05))}.mc-segmented-control__segment--selected,.segmented-control__segment--selected{color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63)}.mc-segmented-control__segment:focus-visible,.segmented-control__segment:focus-visible{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-segmented-control--m,.segmented-control--m{height:3rem;padding:.5rem}.mc-segmented-control--m .mc-segmented-control__segment,.segmented-control--m .mc-segmented-control__segment,.mc-segmented-control--m .segmented-control__segment,.segmented-control--m .segmented-control__segment{height:2rem}.mc-segmented-control--full,.segmented-control--full{display:flex}.segmented-control--disabled{cursor:not-allowed}.segmented-control__segment:disabled{color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.segmented-control__segment:disabled:not(.segmented-control__segment--selected):hover{background-color:transparent}.segmented-control__segment:disabled.segmented-control__segment--selected{background-color:var(--button-state-disabled-background, #d9d9d9);color:var(--button-state-disabled-color, #737373)}\n"] }]
|
|
2974
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], change: [{ type: i0.Output, args: ["change"] }], buttons: [{ type: i0.ViewChildren, args: ['segBtn', { isSignal: true }] }] } });
|
|
2969
2975
|
|
|
2970
2976
|
class MozAccordionHeaderComponent {
|
|
2971
2977
|
tpl = viewChild('tpl', { ...(ngDevMode ? { debugName: "tpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
@@ -10726,7 +10732,6 @@ class MozComboboxComponent {
|
|
|
10726
10732
|
// View queries
|
|
10727
10733
|
// -----------------------------------------------------------------------
|
|
10728
10734
|
triggerEl = viewChild('triggerBtn', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
|
|
10729
|
-
searchInputEl = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputEl" }] : /* istanbul ignore next */ []));
|
|
10730
10735
|
viewportEl = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewportEl" }] : /* istanbul ignore next */ []));
|
|
10731
10736
|
// -----------------------------------------------------------------------
|
|
10732
10737
|
// Internal state
|
|
@@ -10792,15 +10797,21 @@ class MozComboboxComponent {
|
|
|
10792
10797
|
}, ...(ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []));
|
|
10793
10798
|
/** Filtered items based on search query */
|
|
10794
10799
|
filteredItems = computed(() => {
|
|
10795
|
-
const query = this.searchQuery().
|
|
10800
|
+
const query = this.searchQuery().trim();
|
|
10796
10801
|
if (!query)
|
|
10797
10802
|
return this.flatItems();
|
|
10798
10803
|
const flat = this.flatItems();
|
|
10804
|
+
const parts = query
|
|
10805
|
+
.split(/[,\t\n\r]+/)
|
|
10806
|
+
.map((s) => s.toLowerCase().trim())
|
|
10807
|
+
.filter(Boolean);
|
|
10799
10808
|
// Find which section titles have matching children
|
|
10800
10809
|
const matchingSections = new Set();
|
|
10801
10810
|
for (const item of flat) {
|
|
10802
|
-
if (isFlatOption(item)
|
|
10803
|
-
|
|
10811
|
+
if (isFlatOption(item)) {
|
|
10812
|
+
const label = item.label.toLowerCase();
|
|
10813
|
+
const match = parts.some((p) => label.includes(p));
|
|
10814
|
+
if (match && item.sectionTitle)
|
|
10804
10815
|
matchingSections.add(item.sectionTitle);
|
|
10805
10816
|
}
|
|
10806
10817
|
}
|
|
@@ -10808,7 +10819,8 @@ class MozComboboxComponent {
|
|
|
10808
10819
|
if (isFlatSection(item)) {
|
|
10809
10820
|
return matchingSections.has(item.title);
|
|
10810
10821
|
}
|
|
10811
|
-
|
|
10822
|
+
const label = item.label.toLowerCase();
|
|
10823
|
+
return parts.some((p) => label.includes(p));
|
|
10812
10824
|
});
|
|
10813
10825
|
}, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
10814
10826
|
/** All selectable (non-disabled) option values */
|
|
@@ -11243,7 +11255,7 @@ class MozComboboxComponent {
|
|
|
11243
11255
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
11244
11256
|
multi: true,
|
|
11245
11257
|
},
|
|
11246
|
-
], 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]=\"wrapperClasses()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 <CrossCircleFilled24 />\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 <ChevronDown24 />\n </button>\n </div>\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\">\n <Search24 icon />\n <input\n #searchInput\n moz-text-input\n type=\"text\"\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 [size]=\"'s'\"\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 moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 && showNoResultText() && searchQuery().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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n />\n } @else {\n <CheckCircle24 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}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.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: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11258
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 <CrossCircleFilled24 />\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 <ChevronDown24 />\n </button>\n </div>\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\">\n <Search24 icon />\n <input\n #searchInput\n moz-text-input\n type=\"text\"\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 [size]=\"'s'\"\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 moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 && showNoResultText() && searchQuery().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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n />\n } @else {\n <CheckCircle24 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}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.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: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11247
11259
|
}
|
|
11248
11260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozComboboxComponent, decorators: [{
|
|
11249
11261
|
type: Component,
|
|
@@ -11267,7 +11279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
11267
11279
|
multi: true,
|
|
11268
11280
|
},
|
|
11269
11281
|
], template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 <CrossCircleFilled24 />\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 <ChevronDown24 />\n </button>\n </div>\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\">\n <Search24 icon />\n <input\n #searchInput\n moz-text-input\n type=\"text\"\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 [size]=\"'s'\"\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 moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\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]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\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 && showNoResultText() && searchQuery().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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-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 <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n />\n } @else {\n <CheckCircle24 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}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.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"] }]
|
|
11270
|
-
}], 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 }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", 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 }] }],
|
|
11282
|
+
}], 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 }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", 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 }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
|
|
11271
11283
|
|
|
11272
11284
|
/**
|
|
11273
11285
|
* Harness for a single option inside the combobox dropdown.
|