igniteui-angular 22.1.3 → 22.2.0-rc.0

package/types/igniteui-angular-directives.d.ts

@@ -1,80 +1,55 @@
 import * as i0 from '@angular/core';
-import { ElementRef, EventEmitter, AfterViewInit, ChangeDetectorRef, Renderer2, AfterContentInit, OnDestroy, TemplateRef, QueryList, EmbeddedViewRef, ViewContainerRef, NgZone, OnInit, OnChanges, SimpleChanges, PipeTransform, ComponentRef, IterableDiffers, EnvironmentInjector, IterableDiffer, TrackByFunction, IterableChanges, AfterViewChecked } from '@angular/core';
+import { EventEmitter, AfterViewInit, ChangeDetectorRef, ElementRef, Renderer2, AfterContentInit, OnDestroy, TemplateRef, QueryList, EmbeddedViewRef, ViewContainerRef, NgZone, OnInit, OnChanges, SimpleChanges, PipeTransform, ComponentRef, IterableDiffers, EnvironmentInjector, IterableDiffer, TrackByFunction, IterableChanges, AfterViewChecked } from '@angular/core';
 import { IBaseEventArgs, PlatformUtil, IToggleView, IgxOverlayService, CancelableBrowserEventArgs, OverlaySettings, OffsetMode, IgxNavigationService, IgxOverlayOutletDirective, PositionSettings, AutoPositionStrategy, Size, Point, ConnectedFit, DatePartDeltas, DatePart, IPositionStrategy } from 'igniteui-angular/core';
 import { NgControl, ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { NgForOfContext } from '@angular/common';
 
+/**
+ * The Focus Ring directive provides a way to style an element when it has keyboard focus.
+ * It listens for keyboard and pointer events to determine when to apply the focus ring styles.
+ * @hidden @internal
+ */
+declare class IgxFocusRingDirective {
+    protected readonly _hasKeyboardFocus: i0.WritableSignal<boolean>;
+    /** Indicates whether the element has keyboard focus. */
+    readonly hasKeyboardFocus: i0.Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IgxFocusRingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxFocusRingDirective, "[igxFocusRing]", never, {}, {}, never, never, true, never>;
+}
+
 declare const IgxBaseButtonType: {
     readonly Flat: "flat";
     readonly Contained: "contained";
     readonly Outlined: "outlined";
 };
 declare abstract class IgxButtonBaseDirective {
-    element: ElementRef<any>;
-    /** `--ready` modifier that enables transitions; overridden by icon-button. */
-    protected readyClass: string;
-    constructor();
+    private readonly _element;
+    protected readonly _hasKeyboardFocus: i0.Signal<boolean>;
     /**
-     * Emitted when the button is clicked.
+     * Set after the first paint. Subclasses bind it to their `--ready` modifier,
+     * which gates the CSS transitions so a button doesn't animate its resting
+     * styles on mount (#14759 / #16817).
      */
-    buttonClick: EventEmitter<any>;
+    protected readonly _hasRendered: i0.WritableSignal<boolean>;
+    protected readonly _disabled: i0.WritableSignal<boolean>;
     /**
-     * Sets/gets the `role` attribute.
+     * Gets or sets whether the button is disabled.
      *
      * @example
-     * ```typescript
-     * this.button.role = 'navbutton';
-     * let buttonRole = this.button.role;
-     * ```
-     */
-    role: string;
-    /**
-     * @hidden
-     * @internal
-     */
-    onClick(ev: MouseEvent): void;
-    /**
-     * @hidden
-     * @internal
-     */
-    protected onBlur(): void;
-    /**
-     * Sets/gets whether the button component is on focus.
-     * Default value is `false`.
-     * ```typescript
-     * this.button.focus = true;
-     * ```
-     * ```typescript
-     * let isFocused =  this.button.focused;
+     * ```html
+     * <button type="button" igxButton="flat" [disabled]="isDisabled"></button>
      * ```
      */
-    protected focused: boolean;
-    /**
-      * Enables/disables the button.
-      *
-      * @example
-      * ```html
-      * <button igxButton="fab" disabled></button>
-      * ```
-      */
-    disabled: boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get disabledAttribute(): true | null;
-    /**
-     * @hidden
-     * @internal
-     */
-    protected updateOnKeyUp(event: KeyboardEvent): void;
-    /**
-     * Returns the underlying DOM element.
-     */
-    get nativeElement(): any;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    /** Emitted when the button is clicked. */
+    readonly buttonClick: EventEmitter<MouseEvent>;
+    /** Returns the underlying DOM element. */
+    get nativeElement(): HTMLElement;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxButtonBaseDirective, never, never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxButtonBaseDirective, never, never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, [{ directive: typeof IgxFocusRingDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
 }
 
@@ -84,9 +59,7 @@ declare const IgxButtonType: {
     readonly Contained: "contained";
     readonly Outlined: "outlined";
 };
-/**
- * Determines the Button type.
- */
+/** The type of the button. */
 type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
 /**
  * The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button.
@@ -108,43 +81,11 @@ type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
  * ```
  */
 declare class IgxButtonDirective extends IgxButtonBaseDirective {
-    private _renderer;
-    private static ngAcceptInputType_type;
-    /**
-     * Called when the button is selected.
-     */
-    buttonSelected: EventEmitter<IButtonEventArgs>;
-    /**
-     * @hidden
-     * @internal
-     */
-    _cssClass: string;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _type;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _color;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _label;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _backgroundColor;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _selected;
-    protected emitSelected(): void;
+    protected readonly _type: i0.WritableSignal<IgxButtonType>;
+    protected readonly _label: i0.WritableSignal<string | null>;
+    protected readonly _selected: i0.WritableSignal<boolean>;
+    /** Emitted when the button is selected. */
+    readonly buttonSelected: EventEmitter<IButtonEventArgs>;
     /**
      * Gets or sets whether the button is selected.
      * Mainly used in the button group component and it will have no effect if set separately.
@@ -156,7 +97,6 @@ declare class IgxButtonDirective extends IgxButtonBaseDirective {
      */
     set selected(value: boolean);
     get selected(): boolean;
-    constructor();
     /**
      * Sets the type of the button.
      *
@@ -175,39 +115,10 @@ declare class IgxButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set label(value: string);
-    /**
-     * @hidden
-     * @internal
-     */
-    get flat(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get contained(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get outlined(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get fab(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    select(): void;
-    /**
-     * @hidden
-     * @internal
-     */
-    deselect(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxButtonDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxButtonDirective, "[igxButton]", never, { "selected": { "alias": "selected"; "required": false; }; "type": { "alias": "igxButton"; "required": false; }; "label": { "alias": "igxLabel"; "required": false; }; }, { "buttonSelected": "buttonSelected"; }, never, never, true, never>;
     static ngAcceptInputType_selected: unknown;
+    static ngAcceptInputType_type: IgxButtonType | "" | null | undefined;
 }
 interface IButtonEventArgs extends IBaseEventArgs {
     button: IgxButtonDirective;
@@ -222,9 +133,10 @@ interface IChangeCheckboxEventArgs extends IBaseEventArgs {
     checked: boolean;
     value?: any;
 }
-declare class CheckboxBaseDirective implements AfterViewInit {
+declare abstract class CheckboxBaseDirective implements AfterViewInit {
     protected cdr: ChangeDetectorRef;
     ngControl: NgControl | null;
+    private control;
     /**
      * An event that is emitted after the checkbox state is changed.
      * Provides references to the checkbox and the `checked` property as event arguments.
@@ -254,7 +166,7 @@ declare class CheckboxBaseDirective implements AfterViewInit {
      */
     nativeLabel: ElementRef;
     cssClass: string;
-    disabled: boolean;
+    abstract disabled: boolean;
     readonly: boolean;
     indeterminate: boolean;
     focused: boolean;
@@ -1639,14 +1551,14 @@ declare class IgxForOfSyncService {
      */
     chunkSize(dir: string): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxForOfSyncService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<IgxForOfSyncService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 declare class IgxForOfScrollSyncService {
     private _masterScroll;
     setScrollMaster(dir: string, scroll: VirtualHelperBaseDirective): void;
     getScrollMaster(dir: string): VirtualHelperBaseDirective | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxForOfScrollSyncService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<IgxForOfScrollSyncService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -2308,19 +2220,7 @@ type IgxIconButtonType = typeof IgxBaseButtonType[keyof typeof IgxBaseButtonType
  * ```
  */
 declare class IgxIconButtonDirective extends IgxButtonBaseDirective {
-    private static ngAcceptInputType_type;
-    protected readyClass: string;
-    constructor();
-    /**
-     * @hidden
-     * @internal
-     */
-    protected _cssClass: string;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _type;
+    protected readonly _type: i0.WritableSignal<IgxIconButtonType>;
     /**
      * Sets the type of the icon button.
      *
@@ -2330,23 +2230,9 @@ declare class IgxIconButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set type(type: IgxIconButtonType);
-    /**
-     * @hidden
-     * @internal
-     */
-    get flat(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get contained(): boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    get outlined(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxIconButtonDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxIconButtonDirective, "[igxIconButton]", never, { "type": { "alias": "igxIconButton"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_type: IgxIconButtonType | "" | null | undefined;
 }
 
 declare class IgxLayoutDirective {
@@ -2561,7 +2447,7 @@ declare class MaskParsingService {
     private getNonLiteralValues;
     private replaceIMENumbers;
     static ɵfac: i0.ɵɵFactoryDeclaration<MaskParsingService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MaskParsingService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 declare class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueAccessor {
@@ -4185,7 +4071,7 @@ declare class IgcFormControlDirective implements ControlValueAccessor {
     /** @hidden @internal */
     onBlur(): void;
     /** @hidden @internal */
-    listenForValueChange(value: any): void;
+    listenForValueChange(event: Event): void;
     /** @hidden @internal */
     writeValue(value: any): void;
     /** @hidden @internal */
@@ -4195,7 +4081,7 @@ declare class IgcFormControlDirective implements ControlValueAccessor {
     /** @hidden @internal */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgcFormControlDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<IgcFormControlDirective, "igc-rating[ngModel],igc-rating[formControlName]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgcFormControlDirective, "igc-rating[ngModel],igc-rating[formControlName],igc-color-picker[ngModel],igc-color-picker[formControlName]", never, {}, {}, never, never, true, never>;
 }
 
 declare abstract class IgxNotificationsDirective extends IgxToggleDirective implements IToggleView, OnDestroy {
@@ -4281,7 +4167,7 @@ declare class IgxTextHighlightService {
      */
     destroyGroup(groupName: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxTextHighlightService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<IgxTextHighlightService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**

package/types/igniteui-angular-drop-down.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, InjectionToken, DoCheck, ElementRef, OnInit, ChangeDetectorRef, QueryList, OnChanges, AfterViewInit, OnDestroy, SimpleChanges } from '@angular/core';
 import { CancelableEventArgs, IBaseEventArgs, IToggleView, CancelableBrowserEventArgs, IgxSelectionAPIService, IBaseCancelableBrowserEventArgs, OverlaySettings, IPositionStrategy, IScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core';
-import { IgxForOfToken, IgxToggleDirective, ToggleViewEventArgs } from 'igniteui-angular/directives';
+import { IgxToggleDirective, ToggleViewEventArgs } from 'igniteui-angular/directives';
 import { Subject } from 'rxjs';
 import { NgModel, FormControlName } from '@angular/forms';
 import { IgxInputGroupComponent } from 'igniteui-angular/input-group';
@@ -619,6 +619,43 @@ declare class IgxDropDownItemNavigationDirective implements IDropDownNavigationD
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxDropDownItemNavigationDirective, "[igxDropDownItemNavigation]", never, { "target": { "alias": "igxDropDownItemNavigation"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * @hidden @internal
+ *
+ * What differs between a projected `*igxFor` and a projected `igx-virtual-scroll`, so the
+ * drop-down keeps one path for navigation, scrolling and active-descendant tracking.
+ * Items are addressed by their index in the whole collection, not in the loaded subset.
+ */
+interface IgxDropDownVirtualization {
+    /** How many items the collection has, including any a remote service has not sent. */
+    readonly length: number;
+    /** The collection index the loaded items begin at; 0 unless the collection is paged. */
+    readonly startIndex: number;
+    /** The element that scrolls, for listeners and for restoring the offset on reopen. */
+    readonly scrollElement: HTMLElement;
+    /** Scroll offset of the virtualized viewport. */
+    scrollPosition: number;
+    /** The item at a collection index, or `undefined` when it is not loaded. */
+    itemAt(index: number): any;
+    /** The collection index of the first loaded item that matches, or -1. */
+    findIndex(predicate: (item: any) => boolean): number;
+    /** Whether an index currently has an element in the DOM. */
+    isIndexRendered(index: number): boolean;
+    /** Whether a record has been loaded for an index, rendered or not. */
+    isIndexLoaded(index: number): boolean;
+    /**
+     * Brings `index` into view, then runs `onRendered` once the scroll settled. The element
+     * can still be missing then, when the page holding it has not arrived.
+     */
+    scrollToIndex(index: number, direction: Navigate, onRendered: () => void): void;
+    /** Puts `index` in the middle of the viewport, for revealing the selection on open. */
+    alignToIndex(index: number): void;
+    /** Runs `callback` whenever the rendered window changes. */
+    onWindowChange(callback: () => void): void;
+    /** Drops the subscriptions, for when the projected content is replaced. */
+    disconnect(): void;
+}
+
 /**
  * **Ignite UI for Angular DropDown** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down)
@@ -637,7 +674,15 @@ declare class IgxDropDownItemNavigationDirective implements IDropDownNavigationD
  */
 declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy {
     protected selection: IgxSelectionAPIService;
+    private _reconcileInjector;
     protected _activeDescendantId: string | null;
+    /**
+     * The direction of a navigation whose header skip waits for its row to render.
+     * Focusing an item by any other means drops it.
+     */
+    private _pendingSkip;
+    /** Watches the data the projected virtual scroll renders from. */
+    private _renderedItems;
     /**
      * @hidden
      * @internal
@@ -709,7 +754,11 @@ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements I
      * ```
      */
     role: string;
-    protected virtDir: IgxForOfToken<any>;
+    private _forOfQuery;
+    private _virtualScrollQuery;
+    private _virtualScrollRefQuery;
+    /** Set from the projected content in `ngAfterViewInit`, and again if that content changes. */
+    protected virtualization: IgxDropDownVirtualization | null;
     protected toggleDirective: IgxToggleDirective;
     protected scrollContainerRef: ElementRef;
     /**
@@ -743,6 +792,10 @@ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements I
     protected get collectionLength(): number | undefined;
     protected destroy$: Subject<boolean>;
     protected _scrollPosition: number;
+    /** The projected content the adapter was built for, to leave it alone while it stands. */
+    private _connectedForOf?;
+    private _connectedScroll?;
+    private _connectedElement?;
     /**
      * Opens the dropdown
      *
@@ -819,6 +872,26 @@ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements I
      */
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
+    /**
+     * Rebuilds the adapter for the projected content, dropping the previous one first.
+     * The component and element queries can refresh separately, so the pair is taken as one.
+     */
+    private connectVirtualization;
+    /**
+     * Keeps the item query in step with the rows a projected `igx-virtual-scroll` renders.
+     * The query collects them only while the view that declares them is checked, and a
+     * page arriving dirties the scroll rather than that view. Asking for the check is all
+     * it takes; `children.changes` reports the rest.
+     */
+    private watchRenderedItems;
+    /** Points `aria-activedescendant` at the item the focused index renders as, if any. */
+    protected refreshActiveDescendant(): void;
+    /**
+     * Names the row the focused index renders as and, once that row exists, moves off a
+     * header or a disabled item. The row can be missing when the scroll settles, because
+     * its page has not arrived; the item query reports it when it does.
+     */
+    private settleFocus;
     /** Keydown Handler */
     onItemActionKey(key: DropDownActionKey, event?: Event): void;
     /**
@@ -867,9 +940,8 @@ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements I
     protected focusItem(value: boolean): void;
     protected updateItemFocus(): void;
     protected skipHeader(direction: Navigate): void;
-    private isIndexOutOfBounds;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxDropDownComponent, "igx-drop-down", never, { "allowItemsFocus": { "alias": "allowItemsFocus"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["virtDir", "children"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxDropDownComponent, "igx-drop-down", never, { "allowItemsFocus": { "alias": "allowItemsFocus"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["children", "_forOfQuery", "_virtualScrollQuery", "_virtualScrollRefQuery"], ["*"], true, never>;
     static ngAcceptInputType_allowItemsFocus: unknown;
 }