@mozaic-ds/angular 2.0.10 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/angular",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "type": "module",
   "peerDependencies": {
     "@angular/common": ">=20.3.15",

package/types/mozaic-ds-angular.d.ts

@@ -3,10 +3,11 @@ import { TemplateRef, OnInit, ElementRef, InjectionToken, Type, AfterViewInit, O
 import { ControlValueAccessor } from '@angular/forms';
 import { CheckCircle32, Uploading32, WarningCircle32 } from '@mozaic-ds/icons-angular';
 import { RouterLink } from '@angular/router';
-import { OverlayRef } from '@angular/cdk/overlay';
+import { OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
 import * as _mozaic_ds_angular from '@mozaic-ds/angular';
+import { ComponentHarness } from '@angular/cdk/testing';
 
 type MozBreadcrumbAppearance = 'standard' | 'inverse';
 interface MozBreadcrumbLink {
@@ -2212,5 +2213,204 @@ declare class MozNavigationIndicatorComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozNavigationIndicatorComponent, "moz-navigation-indicator", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "light": { "alias": "light"; "required": false; "isSignal": true; }; "hideAction": { "alias": "hideAction"; "required": false; "isSignal": true; }; "pauseLabel": { "alias": "pauseLabel"; "required": false; "isSignal": true; }; "resumeLabel": { "alias": "resumeLabel"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "stepClick": "stepClick"; "actionClick": "actionClick"; }, never, never, true, never>;
 }
 
-export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService, TOASTER_CONFIG };
-export type { ActionListboxConfig, ActionListboxPosition, MozActionListItem, MozActionListItemAppearance, MozAvatarSize, MozBreadcrumbAppearance, MozBreadcrumbLink, MozBuiltInMenuItem, MozBuiltInMenuItemTarget, MozButtonAppearance, MozButtonIconPosition, MozButtonSize, MozButtonType, MozCalloutVariant, MozCheckListMenuItem, MozCircularProgessBarSize, MozDatepickerSize, MozDividerAppearance, MozDividerOrientation, MozDividerSize, MozDrawerConfig, MozDrawerPosition, MozFileUploaderFormat, MozFileUploaderItemFormat, MozFlagType, MozIconButtonAppearance, MozIconButtonSize, MozIconButtonType, MozKpiSize, MozKpiStatus, MozKpiTrend, MozLinearProgressBarBufferSize, MozLinkAppearance, MozLinkIconPosition, MozLinkSize, MozLoaderAppearance, MozLoaderSize, MozNavigationIndicatorAction, MozNumberBadgeAppearance, MozNumberBadgeSize, MozPageHeaderScope, MozPhoneNumberCountry, MozPhoneNumberSize, MozPhoneNumberValue, MozPincodeLength, MozPopoverAppearance, MozPopoverPosition, MozPopoverSize, MozQuantitySelectorSize, MozSegmentedControlSize, MozSegmentedItem, MozSelectOption, MozSelectSize, MozSelectValue, MozSidebarItem, MozSidebarSubItem, MozStarRatingAppearance, MozStarRatingSize, MozStatusBadgeStatus, MozStatusDotSize, MozStatusDotStatus, MozStatusMessageStatus, MozStatusNotificationStatus, MozStepperBottomBarStep, MozStepperInlineStep, MozStepperStackedStep, MozTabItem, MozTagSize, MozTagType, MozTextInputSize, MozTileAppearance, MozTileExpandableTrigger, MozTileInputPosition, MozTileInputVerticalPosition, MozTileSelectableAppearance, MozTileSelectableType, MozToasterPosition, MozToasterRole, MozToasterStatus, MozToggleSize, MozTooltipPosition, PopoverConfig };
+/**
+ * McCombobox — Data models & type guards
+ *
+ * @packageDocumentation
+ */
+interface McComboboxOption<T = unknown> {
+    /** Unique value used for selection comparison */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Optional secondary text rendered below the label */
+    content?: string;
+    /** Whether the option is individually disabled */
+    disabled?: boolean;
+    /** Optional icon identifier (rendered in the prepend slot) */
+    icon?: string;
+}
+interface McComboboxSection<T = unknown> {
+    /** Section heading text */
+    title: string;
+    /** Options belonging to this section */
+    options: McComboboxOption<T>[];
+    /** When `true` in `multiple` mode, clicking the header toggles all children */
+    checkable?: boolean;
+}
+type McComboboxItem<T = unknown> = McComboboxOption<T> | McComboboxSection<T>;
+type McComboboxSize = 's' | 'm';
+/** Type-guard: returns `true` when the item is a section header */
+declare function isSection<T>(item: McComboboxItem<T>): item is McComboboxSection<T>;
+interface FlatOption<T = unknown> {
+    type: 'option';
+    value: T;
+    label: string;
+    content?: string;
+    disabled?: boolean;
+    icon?: string;
+    /** Parent section title (if any) */
+    sectionTitle?: string;
+}
+interface FlatSection {
+    type: 'section';
+    title: string;
+    checkable?: boolean;
+}
+type FlatItem<T = unknown> = FlatOption<T> | FlatSection;
+declare function isFlatSection<T>(item: FlatItem<T>): item is FlatSection;
+declare function isFlatOption<T>(item: FlatItem<T>): item is FlatOption<T>;
+
+declare class McComboboxComponent<T = string> implements ControlValueAccessor {
+    /** Items to display (flat options or sections) */
+    readonly items: _angular_core.InputSignal<McComboboxItem<T>[]>;
+    /** Currently selected value(s) — two-way binding with model() */
+    readonly value: _angular_core.ModelSignal<T | T[] | null>;
+    /** Placeholder text shown when nothing is selected */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Enable multi-selection */
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** Show counter instead of tags in multi mode */
+    readonly compact: _angular_core.InputSignal<boolean>;
+    /** Component size variant */
+    readonly size: _angular_core.InputSignal<McComboboxSize>;
+    /** Disable the entire component */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Readonly mode — no interaction allowed */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Show invalid/error styling */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /** Show a clear button when a value is selected */
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    /** Show a search/filter input inside the dropdown */
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    /** Show "Select all / Clear" action buttons (multiple only) */
+    readonly showActions: _angular_core.InputSignal<boolean>;
+    /** Custom comparator for option values */
+    readonly compareWith: _angular_core.InputSignal<(a: T, b: T) => boolean>;
+    /** Accessible label */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Reference to an external label element */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly searched: _angular_core.OutputEmitterRef<string>;
+    private readonly triggerEl;
+    private readonly searchInputEl;
+    private readonly viewportEl;
+    /** Unique instance id */
+    readonly uid: string;
+    readonly listboxId: string;
+    /** Whether the dropdown panel is open */
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** Keyboard-focused item index within filteredItems() */
+    readonly focusedIndex: _angular_core.WritableSignal<number>;
+    /** Current search/filter query */
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    /** Disabled state from ControlValueAccessor */
+    private readonly _disabledFromForm;
+    /** CVA callbacks */
+    private _onChange;
+    private _onTouched;
+    /** Effective disabled state (input OR form-driven) */
+    readonly isEffectivelyDisabled: _angular_core.Signal<boolean>;
+    /** Flatten items into a renderable list */
+    readonly flatItems: _angular_core.Signal<FlatItem<T>[]>;
+    /** Filtered items based on search query */
+    readonly filteredItems: _angular_core.Signal<FlatItem<T>[]>;
+    /** All selectable (non-disabled) option values */
+    readonly allSelectableValues: _angular_core.Signal<T[]>;
+    /** The display string shown on the trigger button */
+    readonly displayValue: _angular_core.Signal<string>;
+    /** Number of selected items (for compact counter) */
+    readonly selectedCount: _angular_core.Signal<number>;
+    /** Whether the clear button should be visible */
+    readonly showClear: _angular_core.Signal<boolean>;
+    /** Viewport height: capped to VIEWPORT_HEIGHT_PX, shrinks for small lists */
+    readonly viewportHeight: _angular_core.Signal<number>;
+    /** Whether a section's children are all selected */
+    readonly isSectionFullySelected: (sectionTitle: string) => boolean;
+    /** Whether a section's children are partially selected */
+    readonly isSectionPartiallySelected: (sectionTitle: string) => boolean;
+    readonly overlayPositions: ConnectedPosition[];
+    /** Width of the trigger (to match overlay width) */
+    readonly triggerWidth: _angular_core.WritableSignal<number>;
+    constructor();
+    open(): void;
+    close(): void;
+    toggle(): void;
+    onTriggerKeydown(event: KeyboardEvent): void;
+    onPanelKeydown(event: KeyboardEvent): void;
+    selectOption(optionValue: T): void;
+    selectAll(): void;
+    clearSelection(): void;
+    onClear(event: MouseEvent): void;
+    toggleSection(sectionTitle: string): void;
+    onSearchInput(event: Event): void;
+    onSearchKeydown(event: KeyboardEvent): void;
+    onOverlayOutsideClick(): void;
+    onOverlayAttached(): void;
+    /** Coerce the current value into an array (safe for .some/.filter/.every). */
+    private _currentValueAsArray;
+    writeValue(val: T | T[] | null): void;
+    registerOnChange(fn: (val: T | T[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    readonly isFlatSection: typeof isFlatSection;
+    readonly isFlatOption: typeof isFlatOption;
+    readonly itemSizePx = 48;
+    trackByFlatItem(_index: number, item: FlatItem<T>): string;
+    /** Set of currently selected values, recomputed reactively for OnPush */
+    readonly selectedValues: _angular_core.Signal<T[]>;
+    /** Whether a given option value is currently selected */
+    isOptionSelected(optionValue: T): boolean;
+    private _updateTriggerWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<McComboboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<McComboboxComponent<any>, "moz-combobox", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; "searched": "searched"; }, never, never, true, never>;
+}
+
+/**
+ * Harness for a single option inside the combobox dropdown.
+ */
+declare class McComboboxOptionHarness extends ComponentHarness {
+    static hostSelector: string;
+    getLabel(): Promise<string>;
+    isSelected(): Promise<boolean>;
+    isDisabled(): Promise<boolean>;
+    select(): Promise<void>;
+}
+/**
+ * Harness for the McCombobox component.
+ *
+ * Usage:
+ * ```ts
+ * const harness = await loader.getHarness(McComboboxHarness);
+ * await harness.open();
+ * await harness.selectOption({ label: 'Option 1' });
+ * expect(await harness.getDisplayValue()).toBe('Option 1');
+ * ```
+ */
+declare class McComboboxHarness extends ComponentHarness {
+    static hostSelector: string;
+    private _getTrigger;
+    private _getClearButton;
+    private _getSearchInput;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    isOpen(): Promise<boolean>;
+    getDisplayValue(): Promise<string>;
+    getPlaceholder(): Promise<string>;
+    getOptions(): Promise<McComboboxOptionHarness[]>;
+    selectOption(filter: {
+        label: string;
+    }): Promise<void>;
+    clear(): Promise<void>;
+    search(query: string): Promise<void>;
+    isDisabled(): Promise<boolean>;
+    isInvalid(): Promise<boolean>;
+    isReadonly(): Promise<boolean>;
+    getSelectedCount(): Promise<number>;
+}
+
+export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, McComboboxComponent, McComboboxHarness, McComboboxOptionHarness, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService, TOASTER_CONFIG, isSection };
+export type { ActionListboxConfig, ActionListboxPosition, McComboboxItem, McComboboxOption, McComboboxSection, McComboboxSize, MozActionListItem, MozActionListItemAppearance, MozAvatarSize, MozBreadcrumbAppearance, MozBreadcrumbLink, MozBuiltInMenuItem, MozBuiltInMenuItemTarget, MozButtonAppearance, MozButtonIconPosition, MozButtonSize, MozButtonType, MozCalloutVariant, MozCheckListMenuItem, MozCircularProgessBarSize, MozDatepickerSize, MozDividerAppearance, MozDividerOrientation, MozDividerSize, MozDrawerConfig, MozDrawerPosition, MozFileUploaderFormat, MozFileUploaderItemFormat, MozFlagType, MozIconButtonAppearance, MozIconButtonSize, MozIconButtonType, MozKpiSize, MozKpiStatus, MozKpiTrend, MozLinearProgressBarBufferSize, MozLinkAppearance, MozLinkIconPosition, MozLinkSize, MozLoaderAppearance, MozLoaderSize, MozNavigationIndicatorAction, MozNumberBadgeAppearance, MozNumberBadgeSize, MozPageHeaderScope, MozPhoneNumberCountry, MozPhoneNumberSize, MozPhoneNumberValue, MozPincodeLength, MozPopoverAppearance, MozPopoverPosition, MozPopoverSize, MozQuantitySelectorSize, MozSegmentedControlSize, MozSegmentedItem, MozSelectOption, MozSelectSize, MozSelectValue, MozSidebarItem, MozSidebarSubItem, MozStarRatingAppearance, MozStarRatingSize, MozStatusBadgeStatus, MozStatusDotSize, MozStatusDotStatus, MozStatusMessageStatus, MozStatusNotificationStatus, MozStepperBottomBarStep, MozStepperInlineStep, MozStepperStackedStep, MozTabItem, MozTagSize, MozTagType, MozTextInputSize, MozTileAppearance, MozTileExpandableTrigger, MozTileInputPosition, MozTileInputVerticalPosition, MozTileSelectableAppearance, MozTileSelectableType, MozToasterPosition, MozToasterRole, MozToasterStatus, MozToggleSize, MozTooltipPosition, PopoverConfig };