igniteui-angular 16.1.6 → 16.1.8

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -376,7 +376,6 @@
         align-items: center;
         justify-content: center;
         text-align: center;
-        flex: 1 1 auto;
         height: var-get($theme, 'size');
         padding-inline: sizable(
             map.get($chip-padding, 'compact'),
@@ -411,9 +410,9 @@
 
         igx-avatar,
         igx-circular-bar {
-            max-width: 100%;
             max-height: 100%;
             width: sizable(rem(14px), rem(18px), rem(24px));
+            max-width: sizable(rem(14px), rem(18px), rem(24px));
             height: sizable(rem(14px), rem(18px), rem(24px));
         }
 
@@ -655,21 +654,41 @@
     }
 
     %igx-chip__start {
-        igx-avatar,
-        igx-circular-bar {
+        > igx-avatar,
+        > igx-circular-bar {
             &:first-child {
                 margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
             }
         }
+
+        [igxPrefix],
+        igx-prefix {
+            &:first-of-type {
+                igx-avatar,
+                igx-circular-bar {
+                    margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                }
+            }
+        }
     }
 
     %igx-chip__end {
-        igx-avatar,
-        igx-circular-bar {
+        > igx-avatar,
+        > igx-circular-bar {
             &:last-child {
                 margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
             }
         }
+
+        [igxPrefix],
+        igx-prefix {
+            &:first-of-type {
+                igx-avatar,
+                igx-circular-bar {
+                    margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                }
+            }
+        }
     }
 
     %igx-chip__start,
@@ -694,8 +713,7 @@
 
     %igx-chip__prefix,
     %igx-chip__suffix {
-        @include ellipsis();
-        display: inline-block;
+        display: inline-flex;
         vertical-align: middle;
         max-width: $chip-max-width;
 

package/lib/core/styles/components/list/_list-component.scss

@@ -23,6 +23,11 @@
             @extend %igx-list-item-base !optional;
         }
 
+        // css class `igx-list__item-base--active
+        @include e(item-base, $m: active) {
+            @extend %igx-list-item-base--active !optional;
+        }
+
         // css class 'igx-list__item-right' applied to the panning container shown when the list item is panned left
         @include e(item-right) {
             @extend %igx-list-item-pan !optional;

package/lib/core/styles/components/list/_list-theme.scss

@@ -292,6 +292,10 @@
         overflow-x: hidden;
         z-index: 0;
         border-radius: var-get($theme, 'border-radius');
+        
+        &:focus-visible {
+            outline-style: none;
+        }
     }
 
     %igx-list--empty {
@@ -367,6 +371,12 @@
         }
     }
 
+    %igx-list-item-base--active {
+        %igx-list-item-content {
+            @extend %igx-list-item-content--active;
+        }
+    }
+
     %igx-list-item-pan {
         position: absolute;
         visibility: hidden;

package/lib/grids/common/grid.interface.d.ts

@@ -1296,3 +1296,24 @@ export interface IPinningConfig {
     columns?: ColumnPinningPosition;
     rows?: RowPinningPosition;
 }
+/**
+ * An interface describing settings for clipboard options
+ */
+export interface IClipboardOptions {
+    /**
+     * Enables/disables the copy behavior
+     */
+    enabled: boolean;
+    /**
+     * Include the columns headers in the clipboard output.
+     */
+    copyHeaders: boolean;
+    /**
+     * Apply the columns formatters (if any) on the data in the clipboard output.
+     */
+    copyFormatters: boolean;
+    /**
+     * The separator used for formatting the copy output. Defaults to `\t`.
+     */
+    separator: string;
+}

package/lib/grids/filtering/excel-style/common.d.ts

@@ -24,4 +24,12 @@ export declare class ExpressionUI {
     isSelected: boolean;
     isVisible: boolean;
 }
+/**
+ * @hidden @internal
+ */
+export declare class ActiveElement {
+    index: number;
+    id: string;
+    checked: boolean;
+}
 export declare function generateExpressionsList(expressions: IFilteringExpressionsTree | IFilteringExpression, operator: FilteringLogic, expressionsUIs: ExpressionUI[]): void;

package/lib/grids/filtering/excel-style/excel-style-search.component.d.ts

@@ -1,10 +1,11 @@
-import { AfterViewInit, ChangeDetectorRef, TemplateRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, TemplateRef, OnDestroy, QueryList } from '@angular/core';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
 import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbox/checkbox.component';
 import { PlatformUtil } from '../../../core/utils';
 import { BaseFilteringComponent } from './base-filtering.component';
-import { FilterListItem } from './common';
+import { ActiveElement, FilterListItem } from './common';
+import { IgxButtonDirective } from '../../../directives/button/button.directive';
 import { IgxTreeComponent } from '../../../tree/tree.component';
 import { IgxListComponent } from '../../../list/list.component';
 import { ITreeNodeSelectionEvent } from '../../../tree/common';
@@ -32,6 +33,7 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     searchInput: IgxInputDirective;
+    protected cancelButton: IgxButtonDirective;
     /**
      * @hidden @internal
      */
@@ -56,6 +58,7 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     protected defaultExcelStyleLoadingValuesTemplate: TemplateRef<any>;
+    protected checkboxes: QueryList<IgxCheckboxComponent>;
     /**
      * @hidden @internal
      */
@@ -88,10 +91,13 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     get valuesLoadingTemplate(): any;
+    protected activeDescendant: string;
+    private _id;
     private _isLoading;
     private _addToCurrentFilterItem;
     private _selectAllItem;
     private _hierarchicalSelectedItems;
+    private _focusedItem;
     private destroy$;
     constructor(cdr: ChangeDetectorRef, esf: BaseFilteringComponent, platform: PlatformUtil);
     ngAfterViewInit(): void;
@@ -124,6 +130,12 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     get containerSize(): any;
+    protected get id(): string;
+    protected set id(value: string);
+    protected getItemId(index: number): string;
+    protected setActiveDescendant(): void;
+    protected get focusedItem(): ActiveElement;
+    protected set focusedItem(val: ActiveElement);
     /**
      * @hidden @internal
      */
@@ -140,6 +152,9 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     applyFilter(): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected onFocus(): void;
+    protected onFocusOut(): void;
     /**
      * @hidden @internal
      */
@@ -157,6 +172,13 @@ export declare class IgxExcelStyleSearchComponent implements AfterViewInit, OnDe
      * @hidden @internal
      */
     private rejectNonNumericalEntries;
+    private onArrowUpKeyDown;
+    private onArrowDownKeyDown;
+    private onHomeKeyDown;
+    private onEndKeyDown;
+    private onActionKeyDown;
+    private navigateItem;
+    private isIndexOutOfBounds;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxExcelStyleSearchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxExcelStyleSearchComponent, "igx-excel-style-search", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxExcelStyleSearchComponent, "igx-excel-style-search", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/grids/grid-base.directive.d.ts

@@ -28,7 +28,7 @@ import { IgxColumnResizingService } from './resizing/resizing.service';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import { GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode, GridPagingMode, GridValidationTrigger } from './common/enums';
 import { IGridCellEventArgs, IRowSelectionEventArgs, IPinColumnEventArgs, IGridEditEventArgs, IRowDataEventArgs, IColumnResizeEventArgs, IColumnMovingStartEventArgs, IColumnMovingEventArgs, IColumnMovingEndEventArgs, IGridKeydownEventArgs, IRowDragStartEventArgs, IRowDragEndEventArgs, IGridClipboardEvent, IGridToolbarExportEventArgs, ISearchInfo, ICellPosition, IRowToggleEventArgs, IColumnSelectionEventArgs, IPinRowEventArgs, IGridScrollEventArgs, IGridEditDoneEventArgs, IActiveNodeChangeEventArgs, ISortingEventArgs, IFilteringEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs } from './common/events';
-import { ColumnType, GridServiceType, GridType, IGridFormGroupCreatedEventArgs, IGridValidationStatusEventArgs, IgxGridEmptyTemplateContext, IgxGridHeaderTemplateContext, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridTemplateContext, IgxHeadSelectorTemplateContext, IgxRowSelectorTemplateContext, ISizeInfo, RowType, IPinningConfig } from './common/grid.interface';
+import { ColumnType, GridServiceType, GridType, IGridFormGroupCreatedEventArgs, IGridValidationStatusEventArgs, IgxGridEmptyTemplateContext, IgxGridHeaderTemplateContext, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridTemplateContext, IgxHeadSelectorTemplateContext, IgxRowSelectorTemplateContext, ISizeInfo, RowType, IPinningConfig, IClipboardOptions } from './common/grid.interface';
 import { DropPosition } from './moving/moving.service';
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxSnackbarComponent } from '../snackbar/snackbar.component';
@@ -162,24 +162,7 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
     /**
      * Controls the copy behavior of the grid.
      */
-    clipboardOptions: {
-        /**
-         * Enables/disables the copy behavior
-         */
-        enabled: boolean;
-        /**
-         * Include the columns headers in the clipboard output.
-         */
-        copyHeaders: boolean;
-        /**
-         * Apply the columns formatters (if any) on the data in the clipboard output.
-         */
-        copyFormatters: boolean;
-        /**
-         * The separator used for formatting the copy output. Defaults to `\t`.
-         */
-        separator: string;
-    };
+    clipboardOptions: IClipboardOptions;
     /**
      * Emitted after filtering is performed.
      *

package/lib/grids/state.directive.d.ts

@@ -71,6 +71,7 @@ export interface IColumnState {
     columnGroup: boolean;
     parent: any;
     disableHiding: boolean;
+    disablePinning: boolean;
 }
 export type GridFeatures = keyof IGridStateOptions;
 export declare class IgxGridStateDirective {

package/lib/list/list-item.component.d.ts

@@ -93,6 +93,7 @@ export declare class IgxListItemComponent implements IListChild {
      * @hidden
      */
     private lastPanDir;
+    private _role;
     /**
      * Gets the `panState` of a `list item`.
      * ```typescript
@@ -179,14 +180,15 @@ export declare class IgxListItemComponent implements IListChild {
     get offsetHeightInRem(): number;
     constructor(list: IgxListBaseDirective, elementRef: ElementRef, _renderer: Renderer2);
     /**
-     * Gets the `role` attribute of the `list item`.
+     * Gets/Sets the `role` attribute of the `list item`.
      * ```typescript
      * let itemRole =  this.listItem.role;
      * ```
      *
      * @memberof IgxListItemComponent
      */
-    get role(): "separator" | "listitem";
+    get role(): string;
+    set role(val: string);
     /**
      * Indicates whether `list item` should have header style.
      * ```typescript
@@ -263,5 +265,5 @@ export declare class IgxListItemComponent implements IListChild {
      */
     private resetPanPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxListItemComponent, "igx-list-item", never, { "isHeader": { "alias": "isHeader"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "index": { "alias": "index"; "required": false; }; }, {}, never, ["*", "[igxListThumbnail], igx-list__item-thumbnail, igx-avatar", "[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle", "[igxListAction], .igx-list__item-actions"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxListItemComponent, "igx-list-item", never, { "isHeader": { "alias": "isHeader"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "index": { "alias": "index"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, ["*", "[igxListThumbnail], igx-list__item-thumbnail, igx-avatar", "[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle", "[igxListAction], .igx-list__item-actions"], true, never>;
 }

package/lib/list/list.component.d.ts

@@ -369,8 +369,9 @@ export declare class IgxListComponent extends IgxListBaseDirective {
      * @internal
      */
     protected get sortedChildren(): IgxListItemComponent[];
+    private _role;
     /**
-     * Gets the `role` attribute value.
+     * Gets/Sets the `role` attribute value.
      *
      * @example
      * ```typescript
@@ -378,6 +379,7 @@ export declare class IgxListComponent extends IgxListBaseDirective {
      * ```
      */
     get role(): string;
+    set role(val: string);
     /**
      * Gets a boolean indicating if the list is empty.
      *
@@ -435,5 +437,5 @@ export declare class IgxListComponent extends IgxListBaseDirective {
      */
     get template(): TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxListComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxListComponent, "igx-list", never, { "panEndTriggeringThreshold": { "alias": "panEndTriggeringThreshold"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowLeftPanning": { "alias": "allowLeftPanning"; "required": false; }; "allowRightPanning": { "alias": "allowRightPanning"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; }, { "leftPan": "leftPan"; "rightPan": "rightPan"; "startPan": "startPan"; "endPan": "endPan"; "resetPan": "resetPan"; "panStateChange": "panStateChange"; "itemClicked": "itemClicked"; }, ["emptyListTemplate", "dataLoadingTemplate", "listItemLeftPanningTemplate", "listItemRightPanningTemplate", "children"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxListComponent, "igx-list", never, { "panEndTriggeringThreshold": { "alias": "panEndTriggeringThreshold"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowLeftPanning": { "alias": "allowLeftPanning"; "required": false; }; "allowRightPanning": { "alias": "allowRightPanning"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, { "leftPan": "leftPan"; "rightPan": "rightPan"; "startPan": "startPan"; "endPan": "endPan"; "resetPan": "resetPan"; "panStateChange": "panStateChange"; "itemClicked": "itemClicked"; }, ["emptyListTemplate", "dataLoadingTemplate", "listItemLeftPanningTemplate", "listItemRightPanningTemplate", "children"], ["*"], true, never>;
 }

package/lib/simple-combo/simple-combo.component.d.ts

@@ -56,7 +56,6 @@ export declare class IgxSimpleComboComponent extends IgxComboBaseDirective imple
     /** @hidden @internal */
     composing: boolean;
     private _updateInput;
-    private _internalFilter;
     private _collapsing;
     /** @hidden @internal */
     get filteredData(): any[] | null;
@@ -108,8 +107,6 @@ export declare class IgxSimpleComboComponent extends IgxComboBaseDirective imple
     /** @hidden @internal */
     onBlur(): void;
     /** @hidden @internal */
-    onFocus(): void;
-    /** @hidden @internal */
     getEditElement(): HTMLElement;
     /** @hidden @internal */
     handleClear(event: Event): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "16.1.6",
+  "version": "16.1.8",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",