@mozaic-ds/angular 2.0.67 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/angular",
-  "version": "2.0.67",
+  "version": "2.1.3",
   "type": "module",
   "peerDependencies": {
     "@angular/common": ">=20.3.15",
@@ -12,6 +12,10 @@
     "@mozaic-ds/icons-angular": "^0.17.0"
   },
   "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/adeo/mozaic-angular.git"

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

@@ -3,7 +3,7 @@ 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, ConnectedPosition } from '@angular/cdk/overlay';
+import { OverlayRef, ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
@@ -2315,6 +2315,19 @@ declare function isFlatOption<T>(item: FlatItem<T>): item is FlatOption<T>;
 
 declare class MozComboboxComponent<T = string> implements ControlValueAccessor {
     private readonly _doc;
+    private readonly _overlay;
+    private readonly _appRef;
+    /** rAF handle for the scroll-driven change-detection loop (see _kickViewportTick). */
+    private _viewportTickRaf;
+    /** Timestamp of the last viewport scroll event, used to stop the tick loop when idle. */
+    private _lastViewportScrollTs;
+    /**
+     * No-op scroll strategy: the dropdown embeds a CDK virtual-scroll viewport,
+     * which is a global `CdkScrollable`. With the default `reposition` strategy,
+     * every internal scroll event repositions the overlay, making the panel
+     * "bounce" and preventing the user from reaching the bottom of long lists.
+     */
+    readonly scrollStrategy: ScrollStrategy;
     /** Items to display (flat options or sections) */
     readonly items: _angular_core.InputSignal<MozComboboxItem<T>[]>;
     /** Currently selected value(s) — two-way binding with model() */
@@ -2344,6 +2357,16 @@ declare class MozComboboxComponent<T = string> implements ControlValueAccessor {
      * so users can search for multi-word labels like "Item 1".
      */
     readonly multiSearch: _angular_core.InputSignal<boolean>;
+    /**
+     * Server-side search mode. When `true`, the dropdown no longer filters
+     * `items` locally on the label — it renders exactly what the parent provides.
+     * Use it for async autocomplete: subscribe to `(searched)`, fetch matching
+     * items from the backend and feed them back through `items`. This lets the
+     * search match fields that are not part of the visible label (e.g. an id
+     * shown only as secondary `content`). Has no effect when `searchable` is
+     * `false`.
+     */
+    readonly serverSide: _angular_core.InputSignal<boolean>;
     /** Show "Select all / Clear" action buttons (multiple only) */
     readonly showActions: _angular_core.InputSignal<boolean>;
     /** Whether the component is in a loading state (e.g. async data) */
@@ -2446,6 +2469,15 @@ declare class MozComboboxComponent<T = string> implements ControlValueAccessor {
     onSearchKeydown(event: KeyboardEvent): void;
     onOverlayOutsideClick(): void;
     onOverlayAttached(): void;
+    /**
+     * Drive change detection for a short window after a viewport scroll so the
+     * CDK virtual-scroll viewport (inside the overlay portal) applies its content
+     * transform in zoneless mode. Runs at most one rAF loop at a time; each new
+     * scroll event extends the window, and the loop stops ~200ms after the last
+     * scroll. `tick()` is guarded because it throws if called during an ongoing
+     * change-detection pass (it never is here — rAF callbacks run outside CD).
+     */
+    private _kickViewportTick;
     /** Coerce the current value into an array (safe for .some/.filter/.every). */
     private _currentValueAsArray;
     writeValue(val: T | T[] | null): void;
@@ -2462,7 +2494,7 @@ declare class MozComboboxComponent<T = string> implements ControlValueAccessor {
     isOptionSelected(optionValue: T): boolean;
     private _updateTriggerWidth;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MozComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozComboboxComponent<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; }; "multiSearch": { "alias": "multiSearch"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "canSelectAll": { "alias": "canSelectAll"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "clearText": { "alias": "clearText"; "required": false; "isSignal": true; }; "selectedSuffix": { "alias": "selectedSuffix"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "showNoResultText": { "alias": "showNoResultText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; "searched": "searched"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MozComboboxComponent<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; }; "multiSearch": { "alias": "multiSearch"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "canSelectAll": { "alias": "canSelectAll"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "clearText": { "alias": "clearText"; "required": false; "isSignal": true; }; "selectedSuffix": { "alias": "selectedSuffix"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "showNoResultText": { "alias": "showNoResultText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; "searched": "searched"; }, never, never, true, never>;
 }
 
 /**