igniteui-angular 21.0.4 → 21.0.6

package/fesm2022/igniteui-angular-tree.mjs

@@ -81,10 +81,10 @@ class IgxTreeService {
     register(tree) {
         this.tree = tree;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeService, decorators: [{
             type: Injectable
         }] });
 
@@ -394,10 +394,10 @@ class IgxTreeSelectionService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -625,10 +625,10 @@ class IgxTreeNavigationService {
         const nodeIndex = this.visibleChildren.indexOf(node);
         return this.visibleChildren[nodeIndex + dir] || node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -702,10 +702,10 @@ class IgxTreeNodeLinkDirective {
     ngOnDestroy() {
         this.target.removeLinkChild(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxTreeNodeLink]`,
@@ -1196,12 +1196,12 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
             this.registeredChildren.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
             { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
         ], queries: [{ propertyName: "linkChildren", predicate: IgxTreeNodeLinkDirective, read: ElementRef }, { propertyName: "_children", predicate: IGX_TREE_NODE_COMPONENT, read: IGX_TREE_NODE_COMPONENT }, { propertyName: "allChildren", predicate: IGX_TREE_NODE_COMPONENT, descendants: true, read: IGX_TREE_NODE_COMPONENT }], viewQueries: [{ propertyName: "header", first: true, predicate: ["ghostTemplate"], descendants: true, read: ElementRef }, { propertyName: "_defaultExpandIndicatorTemplate", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childrenContainer", first: true, predicate: ["childrenContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\">\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree-node', providers: [
                         { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
@@ -1263,10 +1263,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * Used for templating the select marker of the tree
  */
 class IgxTreeSelectMarkerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeSelectMarker]',
@@ -1278,10 +1278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * Used for templating the expand indicator of the tree
  */
 class IgxTreeExpandIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeExpandIndicator]',
@@ -1699,15 +1699,15 @@ class IgxTreeComponent {
                 this.nativeElement.scrollTop + bottomOffset + topOffset + (topOffset ? -1 : +1) * nodeRect.height;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
             IgxTreeService,
             IgxTreeSelectionService,
             IgxTreeNavigationService,
             { provide: IGX_TREE_COMPONENT, useExisting: IgxTreeComponent },
         ], queries: [{ propertyName: "expandIndicator", first: true, predicate: IgxTreeExpandIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nodes", predicate: IgxTreeNodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-tree__root\" role=\"tree\" (keydown)=\"handleKeydown($event)\">\n    <ng-content select=\"igx-tree-node\"></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree', providers: [
                         IgxTreeService,
@@ -1761,11 +1761,11 @@ const IGX_TREE_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -274,8 +274,8 @@
         } @else {
             color: contrast-color($color: 'success', $variant: if($variant == 'indigo', 900, 500));
         }
-        background: color($color: 'success', $variant: 500);
-        border-color: color($color: 'success', $variant: 500);
+        background: color($color: 'success', $variant: if($variant == 'indigo', 800, 500));
+        border-color: color($color: 'success', $variant: if($variant == 'indigo', 800, 500));
     }
 
     %igx-chip%igx-chip--success {
@@ -285,17 +285,13 @@
                 background: color($color: 'success', $variant: 800);
                 border-color: color($color: 'success', $variant: 800);
 
-                @if $variant == 'indigo' or $variant == 'bootstrap' {
-                    background: color($color: 'success', $variant: 500);
-                    border-color: color($color: 'success', $variant: 500);
-                    box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800));
-                }
-
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'success', $variant: 900);
+                    box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 900));
                 }
 
                 @if $variant == 'bootstrap' {
+                    border-color: color($color: 'success', $variant: 500);
+                    background: color($color: 'success', $variant: 500);
                     color: contrast-color($color: 'success', $variant: 600);
                     box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
                 }
@@ -306,8 +302,8 @@
             %igx-chip__item {
                 @if $variant == 'indigo' {
                     color: contrast-color($color: 'success', $variant: 900);
-                    background: color($color: 'success', $variant: 400);
-                    border-color: color($color: 'success', $variant: 400);
+                    background: color($color: 'success', $variant: 700);
+                    border-color: color($color: 'success', $variant: 700);
                 } @else {
                     color: contrast-color($color: 'success', $variant: 600);
                     background: color($color: 'success', $variant: 600);
@@ -318,7 +314,11 @@
     }
 
     %igx-chip__item--warning {
-        color: contrast-color($color: 'warn', $variant: 900);
+        @if $variant == 'indigo' {
+            color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
+        } @else {
+            color: contrast-color($color: 'warn', $variant: 900);
+        }
         background: color($color: 'warn', $variant: 500);
         border-color: color($color: 'warn', $variant: 500);
     }
@@ -331,12 +331,12 @@
                 border-color: color($color: 'warn', $variant: 800);
 
                 @if $variant == 'indigo' or $variant == 'bootstrap' {
-                    color: contrast-color($color: 'warn', $variant: 900);
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
                 }
 
                 @if $variant == 'indigo' {
+                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                     box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
@@ -349,7 +349,7 @@
         &:hover {
             %igx-chip__item {
                 @if $variant == 'indigo' {
-                    color: contrast-color($color: 'warn', $variant: 900);
+                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                     background: color($color: 'warn', $variant: 400);
                     border-color: color($color: 'warn', $variant: 400);
                 } @else {
@@ -367,8 +367,8 @@
         } @else {
             color: contrast-color($color: 'error', $variant: if($variant == 'indigo', 900, 500));
         }
-        background: color($color: 'error', $variant: 500);
-        border-color: color($color: 'error', $variant: 500);
+        background: color($color: 'error', $variant: if($variant == 'indigo', 600, 500));
+        border-color: color($color: 'error', $variant: if($variant == 'indigo', 600, 500));
     }
 
     %igx-chip%igx-chip--danger {
@@ -378,17 +378,16 @@
                 background: color($color: 'error', $variant: 800);
                 border-color: color($color: 'error', $variant: 800);
 
-                @if $variant == 'indigo' or $variant == 'bootstrap' {
-                    background: color($color: 'error', $variant: 500);
-                    border-color: color($color: 'error', $variant: 500);
-                }
-
                 @if $variant == 'indigo' {
+                    border-color: color($color: 'error', $variant: 600);
+                    background: color($color: 'error', $variant: 600);
                     color: contrast-color($color: 'error', $variant: 900);
                     box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
+                    border-color: color($color: 'error', $variant: 500);
+                    background: color($color: 'error', $variant: 500);
                     color: contrast-color($color: 'error', $variant: 600);
                     box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
                 }
@@ -399,8 +398,8 @@
             %igx-chip__item {
                 @if $variant == 'indigo' {
                     color: contrast-color($color: 'error', $variant: 900);
-                    background: color($color: 'error', $variant: 400);
-                    border-color: color($color: 'error', $variant: 400);
+                    background: color($color: 'error', $variant: 500);
+                    border-color: color($color: 'error', $variant: 500);
                 } @else {
                     color: contrast-color($color: 'error', $variant: 600);
                     background: color($color: 'error', $variant: 600);
@@ -542,7 +541,7 @@
         position: absolute;
         box-shadow: var-get($theme, 'ghost-elevation');
         overflow: hidden;
-        color: var-get($theme, 'focus-text-color');
+        color: var-get($theme, 'ghost-text-color');
         background: var-get($theme, 'ghost-background');
         // If z-index is not set,
         //the chip would hide behind it's parent grid as it has a z-index of 1
@@ -603,14 +602,14 @@
             &%igx-chip--success {
                 %igx-chip__item {
                     color: contrast-color($color: 'success', $variant: 900);
-                    background: color($color: 'success', $variant: 500);
-                    border-color: color($color: 'success', $variant: 500);
+                    background: color($color: 'success', $variant: 800);
+                    border-color: color($color: 'success', $variant: 800);
                 }
             }
 
             &%igx-chip--warning {
                 %igx-chip__item {
-                    color: contrast-color($color: 'warn', $variant: 900);
+                    color: color($color: 'gray', $variant: if($theme-variant == 'light', 900, 50));
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
                 }
@@ -619,8 +618,8 @@
             &%igx-chip--danger {
                 %igx-chip__item {
                     color: contrast-color($color: 'error', $variant: 900);
-                    background: color($color: 'error', $variant: 500);
-                    border-color: color($color: 'error', $variant: 500);
+                    background: color($color: 'error', $variant: 600);
+                    border-color: color($color: 'error', $variant: 600);
                 }
             }
 

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -8,8 +8,8 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin excel-filtering($theme) {
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
 
     $tree-node-indent: (
@@ -128,7 +128,7 @@
             background: var-get($theme, 'filtering-row-background');
 
             %igx-group-display {
-                --shadow: none;
+                --elevation: none;
                 --item-background: #{var-get($theme, 'filtering-row-background')};
                 --item-hover-background: #{color($color: 'gray', $variant: 100)};
                 --item-selected-background: #{color($color: 'gray', $variant: 100)};
@@ -167,11 +167,14 @@
             @if $theme-variant == 'light' {
                 background: contrast-color($color: 'gray', $variant: 900);
             } @else {
-                background: color($color: 'surface', $variant: 500);
+                background: color($color: 'gray', $variant: 50);
             }
 
             %igx-group-display {
                 --item-background: transparent;
+                @if $theme-variant == 'dark' {
+                    --item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
+                }
                 --border-color: transparent;
                 --item-border-color: transparent;
                 --item-focused-border-color: transparent;
@@ -180,7 +183,7 @@
                 --item-selected-hover-border-color: transparent;
                 --item-disabled-border: transparent;
                 --disabled-selected-border-color: transparent;
-                --shadow: none;
+                --elevation: none;
             }
 
             %igx-group-item {
@@ -239,10 +242,7 @@
     %grid-excel-menu__header-actions {
         display: flex;
         margin-inline-start: auto;
-
-        [igxButton] + [igxButton] {
-            margin-inline-start: rem(4px);
-        }
+        gap: rem(4px);
 
         %grid-excel-actions__action {
             padding: 0 !important;
@@ -382,7 +382,7 @@
         justify-content: space-between;
 
         @if $variant == 'indigo' {
-            padding-block: pad-block(rem(6px));
+            padding-block: pad-block(rem(4px), rem(6px), rem(8px));
             padding-inline: pad-inline(rem(12px));
             margin-inline: rem(8px);
             margin-block-end: rem(4px);
@@ -757,7 +757,6 @@
     $header-comfortable: map.get($categories, 'header-comfortable');
     $header-compact: map.get($categories, 'header-compact');
 
-
     %grid-excel-menu {
         %grid-excel-menu__header > h4 {
             @include type-style('h6')
@@ -807,6 +806,10 @@
         }
     }
 
+    %igx-group-item {
+        @include type-style('button');
+    }
+
     %grid-excel-menu__secondary--cosy {
         %grid-excel-menu__header > h4 {
             @include type-style('h6');

package/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -117,6 +117,13 @@
         display: flex;
         align-items: center;
 
+        @if $variant == 'indigo' {
+            igc-icon-button,
+            [igxIconButton] {
+                padding: rem(6px);
+            }
+        }
+
         igx-icon,
         igc-icon {
             --component-size: #{if($variant == 'indigo', 2, 3)};
@@ -128,7 +135,6 @@
             @if $variant == 'indigo' {
                 width: auto;
                 height: auto;
-                padding: rem(6px);
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "21.0.4",
+  "version": "21.0.6",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -75,7 +75,7 @@
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^3.0.2",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "^24.0.0",
+    "igniteui-theming": "^24.1.1",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
   "peerDependencies": {
@@ -87,7 +87,7 @@
     "@types/hammerjs": "^2.0.46",
     "igniteui-webcomponents": "^6.3.0",
     "dompurify": "^3.2.0",
-    "marked": "^16.3.0",
+    "marked": ">=16.3.0",
     "marked-shiki": "^1.2.0",
     "shiki": "^3.12.0"
   },