@mozaic-ds/angular 2.0.50 → 2.0.52
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.
|
@@ -16689,6 +16689,7 @@ class MozComboboxComponent {
|
|
|
16689
16689
|
type: 'section',
|
|
16690
16690
|
title: item.title,
|
|
16691
16691
|
checkable: item.checkable,
|
|
16692
|
+
disabled: item.disabled,
|
|
16692
16693
|
});
|
|
16693
16694
|
for (const opt of item.options) {
|
|
16694
16695
|
result.push({ type: 'option', ...opt, sectionTitle: item.title });
|
|
@@ -16770,25 +16771,29 @@ class MozComboboxComponent {
|
|
|
16770
16771
|
const count = this.filteredItems().length;
|
|
16771
16772
|
return Math.min(count * ITEM_SIZE_PX, VIEWPORT_HEIGHT_PX);
|
|
16772
16773
|
}, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
|
|
16773
|
-
/**
|
|
16774
|
+
/**
|
|
16775
|
+
* Whether a section's children are all selected. Includes disabled children
|
|
16776
|
+
* so that the header checkbox reflects the true state even when some rows
|
|
16777
|
+
* were pre-selected programmatically.
|
|
16778
|
+
*/
|
|
16774
16779
|
isSectionFullySelected = (sectionTitle) => {
|
|
16775
16780
|
const val = this._currentValueAsArray();
|
|
16776
16781
|
if (val.length === 0)
|
|
16777
16782
|
return false;
|
|
16778
16783
|
const cmp = this.compareWith();
|
|
16779
16784
|
const children = this.flatItems()
|
|
16780
|
-
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle
|
|
16785
|
+
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle)
|
|
16781
16786
|
.map((i) => i.value);
|
|
16782
16787
|
return children.length > 0 && children.every((cv) => val.some((sv) => cmp(sv, cv)));
|
|
16783
16788
|
};
|
|
16784
|
-
/** Whether a section's children are partially selected */
|
|
16789
|
+
/** Whether a section's children are partially selected (includes disabled children). */
|
|
16785
16790
|
isSectionPartiallySelected = (sectionTitle) => {
|
|
16786
16791
|
const val = this._currentValueAsArray();
|
|
16787
16792
|
if (val.length === 0)
|
|
16788
16793
|
return false;
|
|
16789
16794
|
const cmp = this.compareWith();
|
|
16790
16795
|
const children = this.flatItems()
|
|
16791
|
-
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle
|
|
16796
|
+
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle)
|
|
16792
16797
|
.map((i) => i.value);
|
|
16793
16798
|
const selectedCount = children.filter((cv) => val.some((sv) => cmp(sv, cv))).length;
|
|
16794
16799
|
return selectedCount > 0 && selectedCount < children.length;
|
|
@@ -17056,6 +17061,9 @@ class MozComboboxComponent {
|
|
|
17056
17061
|
toggleSection(sectionTitle) {
|
|
17057
17062
|
if (!this.multiple())
|
|
17058
17063
|
return;
|
|
17064
|
+
const section = this.flatItems().find((i) => isFlatSection(i) && i.title === sectionTitle);
|
|
17065
|
+
if (section?.disabled)
|
|
17066
|
+
return;
|
|
17059
17067
|
const cmp = this.compareWith();
|
|
17060
17068
|
const childValues = this.flatItems()
|
|
17061
17069
|
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle && !i.disabled)
|
|
@@ -17172,7 +17180,7 @@ class MozComboboxComponent {
|
|
|
17172
17180
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
17173
17181
|
multi: true,
|
|
17174
17182
|
},
|
|
17175
|
-
], 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 [disabled]=\"!!item.disabled\"\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 });
|
|
17183
|
+
], 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]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n item.checkable && multiple() && !item.disabled\n ? toggleSection(item.title)\n : null\n \"\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 [disabled]=\"!!item.disabled\"\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 [disabled]=\"!!item.disabled\"\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 });
|
|
17176
17184
|
}
|
|
17177
17185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozComboboxComponent, decorators: [{
|
|
17178
17186
|
type: Component,
|
|
@@ -17195,7 +17203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
17195
17203
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
17196
17204
|
multi: true,
|
|
17197
17205
|
},
|
|
17198
|
-
], 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 [disabled]=\"!!item.disabled\"\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"] }]
|
|
17206
|
+
], 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]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n item.checkable && multiple() && !item.disabled\n ? toggleSection(item.title)\n : null\n \"\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 [disabled]=\"!!item.disabled\"\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 [disabled]=\"!!item.disabled\"\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"] }]
|
|
17199
17207
|
}], 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 }] }], multiSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSearch", 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 }] }] } });
|
|
17200
17208
|
|
|
17201
17209
|
/**
|
|
@@ -17441,22 +17449,30 @@ class TreeSelectionService {
|
|
|
17441
17449
|
isSelected(id) {
|
|
17442
17450
|
return this.selectedIds().has(id);
|
|
17443
17451
|
}
|
|
17444
|
-
|
|
17445
|
-
|
|
17446
|
-
|
|
17447
|
-
|
|
17452
|
+
/**
|
|
17453
|
+
* A node is considered disabled only by its own `disabled` flag — a disabled
|
|
17454
|
+
* parent does not propagate the state to its descendants. Children of a
|
|
17455
|
+
* disabled parent remain individually interactable; the parent itself just
|
|
17456
|
+
* has its bulk "toggle all" action locked. This mirrors the combobox's
|
|
17457
|
+
* disabled-section semantics.
|
|
17458
|
+
*/
|
|
17459
|
+
isDisabled(node) {
|
|
17460
|
+
return !!node.disabled;
|
|
17448
17461
|
}
|
|
17449
17462
|
/**
|
|
17450
|
-
* A node is indeterminate when it has loaded children AND
|
|
17451
|
-
*
|
|
17463
|
+
* A node is indeterminate when it has loaded children AND at least one
|
|
17464
|
+
* descendant is selected without the node being fully checked. Disabled
|
|
17465
|
+
* descendants count so a pre-selected disabled leaf still surfaces on the
|
|
17466
|
+
* parent (useful when the parent itself is also disabled).
|
|
17452
17467
|
*/
|
|
17453
17468
|
isIndeterminate(node) {
|
|
17469
|
+
if (this.isCheckedComputed(node))
|
|
17470
|
+
return false;
|
|
17454
17471
|
const resolved = this._resolveNode(node);
|
|
17455
|
-
const
|
|
17456
|
-
if (
|
|
17472
|
+
const allLeaves = this._collectLeafIds(resolved, { includeDisabled: true });
|
|
17473
|
+
if (allLeaves.length === 0)
|
|
17457
17474
|
return false;
|
|
17458
|
-
|
|
17459
|
-
return selectedCount > 0 && selectedCount < leaves.length;
|
|
17475
|
+
return allLeaves.some((id) => this.selectedIds().has(id));
|
|
17460
17476
|
}
|
|
17461
17477
|
/**
|
|
17462
17478
|
* A node is checked when:
|
|
@@ -17565,18 +17581,21 @@ class TreeSelectionService {
|
|
|
17565
17581
|
/**
|
|
17566
17582
|
* Collect leaf-level IDs (terminal nodes that have no loaded children).
|
|
17567
17583
|
* Returns empty array if the node itself is a leaf.
|
|
17584
|
+
* When `includeDisabled` is true, disabled descendants are also collected —
|
|
17585
|
+
* used by the indeterminate computation so pre-selected disabled leaves
|
|
17586
|
+
* count toward a parent's state.
|
|
17568
17587
|
*/
|
|
17569
|
-
_collectLeafIds(node) {
|
|
17588
|
+
_collectLeafIds(node, opts = {}) {
|
|
17570
17589
|
const resolved = this._resolveNode(node);
|
|
17571
17590
|
if (!resolved.children || resolved.children.length === 0) {
|
|
17572
17591
|
return [];
|
|
17573
17592
|
}
|
|
17574
17593
|
const ids = [];
|
|
17575
17594
|
for (const child of resolved.children) {
|
|
17576
|
-
if (child.disabled)
|
|
17595
|
+
if (!opts.includeDisabled && child.disabled)
|
|
17577
17596
|
continue;
|
|
17578
17597
|
const resolvedChild = this._resolveNode(child);
|
|
17579
|
-
const childLeaves = this._collectLeafIds(resolvedChild);
|
|
17598
|
+
const childLeaves = this._collectLeafIds(resolvedChild, opts);
|
|
17580
17599
|
if (childLeaves.length === 0) {
|
|
17581
17600
|
// This child is a leaf
|
|
17582
17601
|
ids.push(resolvedChild.id);
|
|
@@ -17654,7 +17673,7 @@ class TreeKeyboardService {
|
|
|
17654
17673
|
if (!current)
|
|
17655
17674
|
break;
|
|
17656
17675
|
const isExpanded = this.state.expandedIds().has(current.node.id);
|
|
17657
|
-
if (this._hasChildren(current.node) && !isExpanded
|
|
17676
|
+
if (this._hasChildren(current.node) && !isExpanded) {
|
|
17658
17677
|
this.state.expandAndLoad(current.node).subscribe();
|
|
17659
17678
|
}
|
|
17660
17679
|
else if (isExpanded) {
|
|
@@ -17682,7 +17701,7 @@ class TreeKeyboardService {
|
|
|
17682
17701
|
event.preventDefault();
|
|
17683
17702
|
if (!current)
|
|
17684
17703
|
break;
|
|
17685
|
-
if (this._hasChildren(current.node)
|
|
17704
|
+
if (this._hasChildren(current.node)) {
|
|
17686
17705
|
this.state.expandAndLoad(current.node).subscribe();
|
|
17687
17706
|
}
|
|
17688
17707
|
break;
|
|
@@ -17760,7 +17779,7 @@ class MozTreeNodeComponent {
|
|
|
17760
17779
|
selectionChange = output();
|
|
17761
17780
|
isExpanded = computed(() => this.stateService.expandedIds().has(this.node().id), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
|
|
17762
17781
|
isLoading = computed(() => this.stateService.loadingIds().has(this.node().id), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
17763
|
-
isDisabled = computed(() => this.selectionService.isDisabled(this.node()
|
|
17782
|
+
isDisabled = computed(() => this.selectionService.isDisabled(this.node()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
17764
17783
|
isSelected = computed(() => this.selectionService.isCheckedComputed(this.node()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
17765
17784
|
isIndeterminate = computed(() => this.selectionService.isIndeterminate(this.node()), ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
|
|
17766
17785
|
isFocused = computed(() => this.keyboardService.focusedNodeId() === this.node().id, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
@@ -17796,7 +17815,7 @@ class MozTreeNodeComponent {
|
|
|
17796
17815
|
}, ...(ngDevMode ? [{ debugName: "resolvedChildren" }] : /* istanbul ignore next */ []));
|
|
17797
17816
|
onHeaderClick() {
|
|
17798
17817
|
this.keyboardService.focusedNodeId.set(this.node().id);
|
|
17799
|
-
if (this.hasChildren()
|
|
17818
|
+
if (this.hasChildren()) {
|
|
17800
17819
|
this.onToggleExpand();
|
|
17801
17820
|
}
|
|
17802
17821
|
}
|
|
@@ -17836,7 +17855,7 @@ class MozTreeNodeComponent {
|
|
|
17836
17855
|
return null;
|
|
17837
17856
|
}
|
|
17838
17857
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{
|
|
17858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17840
17859
|
}
|
|
17841
17860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, decorators: [{
|
|
17842
17861
|
type: Component,
|
|
@@ -17848,7 +17867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
17848
17867
|
MozLoaderComponent,
|
|
17849
17868
|
ChevronDown20,
|
|
17850
17869
|
ChevronRight20,
|
|
17851
|
-
], template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{
|
|
17870
|
+
], template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"selectionMode() !== 'none' ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"] }]
|
|
17852
17871
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], nodeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplates", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], ancestors: [{ type: i0.Input, args: [{ isSignal: true, alias: "ancestors", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], expandChange: [{ type: i0.Output, args: ["expandChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
17853
17872
|
|
|
17854
17873
|
class MozTreeNodeTemplateDirective {
|