igniteui-angular 22.0.0-rc.1 → 22.0.0

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

@@ -4,7 +4,7 @@ import { IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownBaseDir
 import * as i0 from '@angular/core';
 import { AfterContentInit, OnInit, AfterViewInit, OnDestroy, AfterContentChecked, QueryList, EventEmitter, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { OverlaySettings, EditorProvider, IgxOverlayService, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from 'igniteui-angular/core';
+import { OverlaySettings, EditorProvider, IgxOverlayService, IBaseCancelableBrowserEventArgs, IBaseEventArgs, BaseFitPositionStrategy, IPositionStrategy, PositionSettings, Size, Point, ConnectedFit } from 'igniteui-angular/core';
 import { ToggleViewCancelableEventArgs, ToggleViewEventArgs } from 'igniteui-angular/directives';
 
 /**
@@ -123,9 +123,9 @@ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSele
      */
     disabled: boolean;
     /**
-     * Sets custom OverlaySettings `IgxSelectComponent`.
+     * Sets custom overlay settings for the select component.
      * ```html
-     * <igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
+     * <igx-select [overlaySettings]="customOverlaySettings"></igx-select>
      * ```
      */
     overlaySettings: OverlaySettings;
@@ -257,9 +257,9 @@ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSele
     set value(v: any);
     /**
      * Sets how the select will be styled.
-     * The allowed values are `line`, `box` and `border`. The input-group default is `line`.
+     * The allowed values are `line`, `box` and `border`. Defaults to `box` if no input-group type is set.
      * ```html
-     * <igx-select [type]="'box'"></igx-select>
+     * <igx-select [type]="'border'"></igx-select>
      * ```
      */
     get type(): IgxInputGroupType;
@@ -292,7 +292,7 @@ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSele
      * ```
      */
     open(overlaySettings?: OverlaySettings): void;
-    inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void;
+    protected inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void;
     /** @hidden @internal */
     ngAfterContentInit(): void;
     /**
@@ -335,12 +335,96 @@ declare class IgxSelectComponent extends IgxDropDownComponent implements IgxSele
     private get hasValidators();
     protected navigate(direction: Navigate, currentIndex?: number): void;
     protected manageRequiredAsterisk(): void;
+    private getMergedOverlaySettings;
     private setSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IgxSelectComponent, "igx-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["label", "toggleIconTemplate", "headerTemplate", "footerTemplate", "hintElement", "children", "prefixes", "suffixes"], ["[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint, [igxHint]", "*", "igx-select-item, igx-select-item-group"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
 
+/**
+ * Positions the select dropdown so that the active item's text overlaps
+ * the value displayed in the select input box.
+ */
+declare class IgxSelectOverlapPositionStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
+    private select;
+    private _selectDefaultSettings;
+    private global_yOffset;
+    private global_xOffset;
+    private global_styles;
+    /** @hidden @internal */
+    isItemOverlapPositioning: boolean;
+    constructor(select: IgxSelectComponent, settings?: PositionSettings);
+    /**
+     * Position the element based on the PositionStrategy implementing this interface.
+     *
+     * @param contentElement The HTML element to be positioned
+     * @param size Size of the element
+     * @param document reference to the Document object
+     * @param initialCall should be true if this is the initial call to the method
+     * @param target attaching target for the component to show
+     * ```typescript
+     * settings.positionStrategy.position(content, size, document, true);
+     * ```
+     */
+    position(contentElement: HTMLElement, _size: Size, document?: Document, initialCall?: boolean, target?: Point | HTMLElement): void;
+    /**
+     * Obtain the selected item if there is such one or otherwise use the first one
+     */
+    private getInteractionItemElement;
+    /**
+     * Position the items outer container so selected item text is positioned over input text and if header
+     * And/OR footer - both header/footer are visible
+     *
+     * @param selectFit selectFit to use for computation.
+     */
+    protected fitInViewport(_contentElement: HTMLElement, selectFit: SelectFit): void;
+    /**
+     * Sets element's style which effectively positions the provided element
+     *
+     * @param element Element to position
+     * @param selectFit selectFit to use for computation.
+     * @param initialCall should be true if this is the initial call to the position method calling setStyles
+     */
+    protected setStyles(contentElement: HTMLElement, selectFit: SelectFit): void;
+    /**
+     * Calculate selected item scroll position.
+     */
+    private calculateScrollAmount;
+    /**
+     * Calculate the necessary input and selected item styles to be used for positioning item text over input text.
+     * Calculate & Set default items container width.
+     *
+     * @param selectFit selectFit to use for computation.
+     */
+    private calculateStyles;
+    /**
+     * Calculate how much to offset the overlay container for Y-axis.
+     */
+    private calculateYoffset;
+    /**
+     * Calculate how much to offset the overlay container for X-axis.
+     */
+    private calculateXoffset;
+}
+/** @hidden */
+interface SelectFit extends ConnectedFit {
+    itemElement?: HTMLElement;
+    scrollContainer: HTMLElement;
+    scrollContainerRect: ClientRect;
+    itemRect?: ClientRect;
+    styles?: SelectStyles;
+    scrollAmount?: number;
+}
+/** @hidden */
+interface SelectStyles {
+    itemTextPadding?: number;
+    itemTextIndent?: number;
+    itemTextToInputTextDiff?: number;
+    contentElementNewWidth?: number;
+    numericLeftPadding?: number;
+}
+
 declare const IGX_SELECT_DIRECTIVES: readonly [typeof IgxSelectComponent, typeof IgxSelectItemComponent, typeof IgxSelectGroupComponent, typeof IgxSelectHeaderDirective, typeof IgxSelectFooterDirective, typeof IgxSelectToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective];
 
 /**
@@ -354,4 +438,4 @@ declare class IgxSelectModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<IgxSelectModule>;
 }
 
-export { IGX_SELECT_DIRECTIVES, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective };
+export { IGX_SELECT_DIRECTIVES, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectOverlapPositionStrategy, IgxSelectToggleIconDirective };

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

@@ -242,8 +242,8 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get disabledClass(): boolean;
     /**
-     * Gets the type of the `IgxSliderComponent`.
-     * The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
+     * Gets the type of the slider.
+     * The slider type can be SLIDER (default) or RANGE.
      * ```typescript
      * @ViewChild("slider2")
      * public slider: IgxSliderComponent;
@@ -253,8 +253,8 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get type(): IgxSliderType;
     /**
-     * Sets the type of the `IgxSliderComponent`.
-     * The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
+     * Sets the type of the slider.
+     * The slider type can be SLIDER (default) or RANGE.
      * ```typescript
      * sliderType: IgxSliderType = IgxSliderType.RANGE;
      * ```
@@ -342,7 +342,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     set continuous(continuous: boolean);
     /**
-     * Returns the minimal displayed track value of the `IgxSliderComponent`.
+     * Returns the minimal displayed track value of the slider.
      * ```typescript
      *  @ViewChild("slider2")
      * public slider: IgxSliderComponent;
@@ -353,7 +353,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get minValue(): number;
     /**
-     * Sets the minimal displayed track value for the `IgxSliderComponent`.
+     * Sets the minimal displayed track value for the slider.
      * The default minimal value is 0.
      * ```html
      * <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">
@@ -372,7 +372,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get maxValue(): number;
     /**
-     * Sets the maximal displayed track value for the `IgxSliderComponent`.
+     * Sets the maximal displayed track value for the slider.
      * The default maximum value is 100.
      * ```html
      * <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">
@@ -380,7 +380,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     set maxValue(value: number);
     /**
-     * Returns the lower boundary of settable values of the `IgxSliderComponent`.
+     * Returns the lower boundary of settable values of the slider.
      * If not set, will return `minValue`.
      * ```typescript
      * @ViewChild("slider")
@@ -392,7 +392,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get lowerBound(): number;
     /**
-     * Sets the lower boundary of settable values of the `IgxSliderComponent`.
+     * Sets the lower boundary of settable values of the slider.
      * If not set is the same as min value.
      * ```html
      * <igx-slider [step]="5" [lowerBound]="20">
@@ -400,7 +400,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     set lowerBound(value: number);
     /**
-     * Returns the upper boundary of settable values of the `IgxSliderComponent`.
+     * Returns the upper boundary of settable values of the slider.
      * If not set, will return `maxValue`
      * ```typescript
      * @ViewChild("slider")
@@ -412,7 +412,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get upperBound(): number;
     /**
-     * Sets the upper boundary of the `IgxSliderComponent`.
+     * Sets the upper boundary of the slider.
      * If not set is the same as max value.
      * ```html
      * <igx-slider [step]="5" [upperBound]="20">
@@ -622,7 +622,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     onFocus(): void;
     /**
-     * Returns whether the `IgxSliderComponent` type is RANGE.
+     * Returns whether the slider type is RANGE.
      * ```typescript
      *  @ViewChild("slider")
      * public slider: IgxSliderComponent;
@@ -633,7 +633,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get isRange(): boolean;
     /**
-     * Returns the lower value of a RANGE `IgxSliderComponent`.
+     * Returns the lower value of a RANGE slider.
      * ```typescript
      * @ViewChild("slider")
      * public slider: IgxSliderComponent;
@@ -644,7 +644,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get lowerValue(): number;
     /**
-     * Sets the lower value of a RANGE `IgxSliderComponent`.
+     * Sets the lower value of a RANGE slider.
      * ```typescript
      * @ViewChild("slider")
      * public slider: IgxSliderComponent;
@@ -655,8 +655,8 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     set lowerValue(value: number);
     /**
-     * Returns the upper value of a RANGE `IgxSliderComponent`.
-     * Returns `value` of a SLIDER `IgxSliderComponent`
+     * Returns the upper value of a RANGE slider.
+     * Returns `value` of a SLIDER slider
      * ```typescript
      *  @ViewChild("slider2")
      * public slider: IgxSliderComponent;
@@ -667,7 +667,7 @@ declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider
      */
     get upperValue(): number;
     /**
-     * Sets the upper value of a RANGE `IgxSliderComponent`.
+     * Sets the upper value of a RANGE slider.
      * ```typescript
      *  @ViewChild("slider2")
      * public slider: IgxSliderComponent;

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

@@ -50,7 +50,7 @@ declare class IgxSnackbarComponent extends IgxNotificationsDirective implements
     actionText?: string;
     /**
      * An event that will be emitted when the action button is clicked.
-     * Provides reference to the `IgxSnackbarComponent` as an argument.
+     * Provides reference to the snackbar as an argument.
      * ```html
      * <igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>
      * ```

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

@@ -99,7 +99,7 @@ declare class IgxSplitterPaneComponent {
     minHeight: string;
     /**
      * @hidden @internal
-     * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
+     * Gets/Sets the `maxHeight` properties of the current splitter pane.
      */
     maxHeight: string;
     /** @hidden @internal */
@@ -128,7 +128,7 @@ declare class IgxSplitterPaneComponent {
     get element(): any;
     /**
      * @hidden @internal
-     * Gets the `flex` property of the current `IgxSplitterPaneComponent`.
+     * Gets the `flex` property of the current splitter pane.
      */
     get flex(): string;
     /**
@@ -267,7 +267,7 @@ declare class IgxSplitterComponent implements AfterContentInit {
     private _type;
     /**
      * @hidden @internal
-     * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each pair of panes divided by a splitter bar.
+     * A field that holds the initial size of the main splitter pane in each pair of panes divided by a splitter bar.
      */
     private initialPaneSize;
     /**

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

@@ -152,7 +152,7 @@ declare class IgxStepContentDirective {
 }
 
 /**
- * IgxStepper provides a wizard-like workflow by dividing content into logical steps.
+ * Stepper provides a wizard-like workflow by dividing content into logical steps.
  *
  * @igxModule IgxStepperModule
  *
@@ -565,7 +565,7 @@ declare class IgxStepperService {
 }
 
 /**
- * The IgxStepComponent is used within the `igx-stepper` element and it holds the content of each step.
+ * The step is used within the stepper element and it holds the content of each step.
  * It also supports custom indicators, title and subtitle.
  *
  * @igxModule IgxStepperModule

package/types/igniteui-angular-time-picker.d.ts

@@ -456,7 +456,7 @@ declare class IgxTimePickerComponent extends PickerBaseDirective implements IgxT
 }
 
 /**
- * This file contains all the directives used by the @link IgxTimePickerComponent.
+ * This file contains all the directives used by the @link time picker.
  * You should generally not use them directly.
  *
  * @preferred

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

@@ -4,7 +4,7 @@ import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, ITreeResourceStrings }
 import { ToggleAnimationSettings, ToggleAnimationPlayer } from 'igniteui-angular/expansion-panel';
 import { Subject } from 'rxjs';
 
-/** Comparer function that can be used when searching through IgxTreeNode<any>[] */
+/** Comparer function that can be used when searching through tree node<any>[] */
 type IgxTreeSearchResolver = (data: any, node: IgxTreeNode<any>) => boolean;
 interface IgxTree {
     /** @hidden @internal */
@@ -621,7 +621,7 @@ declare class IgxTreeExpandIndicatorDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTreeExpandIndicatorDirective, "[igxTreeExpandIndicator]", never, {}, {}, never, never, true, never>;
 }
 /**
- * IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.
+ * Tree allows a developer to show a set of nodes in a hierarchical fashion.
  *
  * @igxModule IgxTreeModule
  * @igxKeywords tree