From a59767a45557ef150988ebed6c2a1e0647f72714 Mon Sep 17 00:00:00 2001 From: Maya Date: Wed, 24 Jul 2024 15:18:11 +0300 Subject: [PATCH 01/18] chore(igxPivot): Remove tsPlain due to enum values tranforms. (#14573) --- .../src/lib/grids/pivot-grid/pivot-grid.interface.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts index c6f3a22464f..5a4065ac5be 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts @@ -84,7 +84,6 @@ export interface IPivotAggregator { } /* marshalByValue */ -/* tsPlainInterface */ /** * Configuration of the pivot grid. */ From d1511e98efbcfc25f82b0df13a1379cee67d99c9 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 24 Jul 2024 16:15:13 +0300 Subject: [PATCH 02/18] fix(query-builder): search value input for dateTime focus --- .../grid/grid-filtering-advanced.spec.ts | 32 ++++++++++++++++++- .../query-builder.component.html | 1 + .../src/lib/test-utils/grid-samples.spec.ts | 4 +-- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index ca69837bb04..657cf9fbc7f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -3038,9 +3038,39 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { GridFunctions.clickAdvancedFilteringColumnSelect(fix); fix.detectChanges(); const dropdownValues = GridFunctions.getAdvancedFilteringSelectDropdownItems(fix).map((x: any) => x.innerText); - const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field']; + const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field', 'DateTimeCreated']; expect(expectedValues).toEqual(dropdownValues); })); + + it('Should correctly focus the search value input when editing the filtering expression', fakeAsync(() => { + // Open dialog through API. + grid.openAdvancedFilteringDialog(); + fix.detectChanges(); + + //Create dateTime filtering expression + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'DateTimeCreated', searchVal: '11/11/2000 10:11:11 AM', condition: IgxStringFilteringOperand.instance().condition('equals') + }); + + grid.advancedFilteringExpressionsTree = tree; + fix.detectChanges(); + + // Hover the last visible expression chip + const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0]; + expressionItem.dispatchEvent(new MouseEvent('mouseenter')); + tick(); + fix.detectChanges(); + + // Click the edit icon to enter edit mode of the expression. + GridFunctions.clickAdvancedFilteringTreeExpressionChipEditIcon(fix, [0]); + tick(); + fix.detectChanges(); + + //Check for the active element + let searchValueInput = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input'); + expect(document.activeElement).toBe(searchValueInput, 'The input should be the active element.'); + })); }); describe('External - ', () => { diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html index 55f2f7a2728..249e728105b 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html @@ -338,6 +338,7 @@
> - - + + `, standalone: true, imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent] From 9d8119dcd8c435222626de633b7927628b194533 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Wed, 24 Jul 2024 16:37:35 +0300 Subject: [PATCH 03/18] fix(advance-filtering): handle error when columns are dynamically changed --- .../grid/grid-filtering-advanced.spec.ts | 85 ++++++++++++++++++- .../query-builder/query-builder.component.ts | 38 +++++---- .../src/lib/test-utils/grid-samples.spec.ts | 31 +++++++ 3 files changed, 134 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index ca69837bb04..50792ec137c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -15,13 +15,15 @@ import { IgxGridAdvancedFilteringComponent, IgxGridExternalAdvancedFilteringComponent, IgxGridAdvancedFilteringBindingComponent, - IgxGridAdvancedFilteringOverlaySettingsComponent + IgxGridAdvancedFilteringOverlaySettingsComponent, + IgxGridAdvancedFilteringDynamicColumnsComponent } from '../../test-utils/grid-samples.spec'; import { ControlsFunction } from '../../test-utils/controls-functions.spec'; import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy'; import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec'; import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api'; import { IFilteringEventArgs } from '../public_api'; +import { SampleTestData } from '../../test-utils/sample-test-data.spec'; const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and'; const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or'; @@ -38,7 +40,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { IgxGridAdvancedFilteringComponent, IgxGridExternalAdvancedFilteringComponent, IgxGridAdvancedFilteringBindingComponent, - IgxHierGridExternalAdvancedFilteringComponent + IgxHierGridExternalAdvancedFilteringComponent, + IgxGridAdvancedFilteringDynamicColumnsComponent ] }); })); @@ -2048,6 +2051,84 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { expect(rows.length).toEqual(1, 'Wrong filtered rows count'); })); + it('should handle advanced filtering correctly when grid columns and data are dynamically changed', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxGridAdvancedFilteringDynamicColumnsComponent); + grid = fixture.componentInstance.grid; + fixture.detectChanges(); + + grid.height = '800px'; + fixture.detectChanges(); + tick(50); + + expect(grid.filteredData).toBeNull(); + expect(grid.rowList.length).toBe(8); + expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript'); + expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage'); + + // Open Advanced Filtering dialog + GridFunctions.clickAdvancedFilteringButton(fixture); + fixture.detectChanges(); + + // Click the initial 'Add And Group' button + GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fixture, 0); + tick(100); + fixture.detectChanges(); + + // Populate edit inputs + selectColumnInEditModeExpression(fixture, 1); + selectOperatorInEditModeExpression(fixture, 2); + const input = GridFunctions.getAdvancedFilteringValueInput(fixture).querySelector('input'); + UIInteractions.clickAndSendInputElementValue(input, 'ign', fixture); + + // Commit the populated expression + GridFunctions.clickAdvancedFilteringExpressionCommitButton(fixture); + fixture.detectChanges(); + + // Apply the filters + GridFunctions.clickAdvancedFilteringApplyButton(fixture); + fixture.detectChanges(); + + // Verify the filter results + expect(grid.filteredData.length).toEqual(2); + expect(grid.rowList.length).toBe(2); + expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript'); + expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular'); + + // Change the grid's columns collection + fixture.componentInstance.columns = [ + { field: 'ID', header: 'ID', width: '200px', type: 'string' }, + { field: 'CompanyName', header: 'Company Name', width: '200px', type: 'string'}, + { field: 'ContactName', header: 'Contact Name', width: '200px', type: 'string' }, + { field: 'ContactTitle', header: 'Contact Title', width: '200px', type: 'string' }, + { field: 'City', header: 'City', width: '200px', type: 'string' }, + { field: 'Country', header: 'Country', width: '200px', type: 'string' }, + ]; + fixture.detectChanges(); + flush(); + + // Change the grid's data collection + setTimeout(() => { + grid.data = SampleTestData.contactInfoDataFull(); + fixture.detectChanges(); + flush(); + }); + + // Spy for error messages in the console + const consoleSpy = spyOn(console, 'error'); + + // Open Advanced Filtering dialog + GridFunctions.clickAdvancedFilteringButton(fixture); + fixture.detectChanges(); + flush(); + + // Verify the filters are cleared + expect(grid.filteredData).toEqual([]); + expect(grid.rowList.length).toBe(0); + + // Check for error messages in the console + expect(consoleSpy).not.toHaveBeenCalled(); + })); + describe('Context Menu - ', () => { it('Should discard added group when clicking its operator line without having a single expression.', fakeAsync(() => { // Open Advanced Filtering dialog. diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts index efbff961c69..0453a728d01 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts @@ -988,31 +988,33 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy { this.currentGroup = groupItem; } - private createExpressionGroupItem(expressionTree: IExpressionTree, parent?: ExpressionGroupItem): ExpressionGroupItem { - let groupItem: ExpressionGroupItem; - if (expressionTree) { - groupItem = new ExpressionGroupItem(expressionTree.operator, parent); - - for (const expr of expressionTree.filteringOperands) { - if (expr instanceof FilteringExpressionsTree) { - groupItem.children.push(this.createExpressionGroupItem(expr, groupItem)); - } else { - const filteringExpr = expr as IFilteringExpression; - const exprCopy: IFilteringExpression = { - fieldName: filteringExpr.fieldName, - condition: filteringExpr.condition, - searchVal: filteringExpr.searchVal, - ignoreCase: filteringExpr.ignoreCase - }; + private createExpressionGroupItem(expressionTree: IExpressionTree, parent?: ExpressionGroupItem): ExpressionGroupItem | null { + if (!expressionTree) { + return null; + } + + const groupItem = new ExpressionGroupItem(expressionTree.operator, parent); + + for (const expr of expressionTree.filteringOperands) { + if (expr instanceof FilteringExpressionsTree) { + const childGroup = this.createExpressionGroupItem(expr, groupItem); + if (childGroup) { + groupItem.children.push(childGroup); + } + } else { + const filteringExpr = expr as IFilteringExpression; + const field = this.fields.find(el => el.field === filteringExpr.fieldName); + + if (field) { + const exprCopy: IFilteringExpression = { ...filteringExpr }; const operandItem = new ExpressionOperandItem(exprCopy, groupItem); - const field = this.fields.find(el => el.field === filteringExpr.fieldName); operandItem.fieldLabel = field.label || field.header || field.field; groupItem.children.push(operandItem); } } } - return groupItem; + return groupItem.children.length > 0 ? groupItem : null; } private createExpressionTreeFromGroupItem(groupItem: ExpressionGroupItem): FilteringExpressionsTree { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 32d20e821eb..f435bd2df80 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1174,6 +1174,37 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { } } +@Component({ + template: ` + + + + `, + standalone: true, + imports: [NgFor, IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent] +}) +export class IgxGridAdvancedFilteringDynamicColumnsComponent extends BasicGridComponent { + public override data = []; + public columns = []; + + public ngOnInit(): void { + this.columns = [ + { field: 'ID', header: 'HeaderID', width: '100px', type: 'number' }, + { field: 'ProductName', header: 'Product Name', width: '200px', type: 'string'}, + { field: 'Downloads', header: 'Downloads', width: '100px', type: 'number' }, + { field: 'Released', header: 'Released', width: '100px', type: 'boolean' }, + { field: 'ReleaseDate', header: 'Release Date', width: '200px', type: 'date' }, + { field: 'AnotherField', header: 'Another Field', width: '200px', type: 'string' }, + ]; + this.data = SampleTestData.excelFilteringData(); + } +} + @Component({ template: ` From 19045a44d6d543bf4baf84f5ba4246e51eb22ddc Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Thu, 25 Jul 2024 11:59:01 +0300 Subject: [PATCH 04/18] test(advance-filtering): remove grid resize and setTimeout usage --- .../lib/grids/grid/grid-filtering-advanced.spec.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 50792ec137c..0cdd651c53a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -2056,10 +2056,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { grid = fixture.componentInstance.grid; fixture.detectChanges(); - grid.height = '800px'; - fixture.detectChanges(); - tick(50); - expect(grid.filteredData).toBeNull(); expect(grid.rowList.length).toBe(8); expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript'); @@ -2107,11 +2103,9 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { flush(); // Change the grid's data collection - setTimeout(() => { - grid.data = SampleTestData.contactInfoDataFull(); - fixture.detectChanges(); - flush(); - }); + grid.data = SampleTestData.contactInfoDataFull(); + fixture.detectChanges(); + flush(); // Spy for error messages in the console const consoleSpy = spyOn(console, 'error'); From 1f753a2f94d16efc7cad6f2dc1fda98dc2ca72ff Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Thu, 25 Jul 2024 13:16:33 +0300 Subject: [PATCH 05/18] docs(h-grid): mark the internal child row class as such (#14578) --- .../igniteui-angular/src/lib/grids/common/grid.interface.ts | 1 + .../grids/hierarchical-grid/hierarchical-grid.component.ts | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index d9419371826..5532546de6a 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -1028,6 +1028,7 @@ export interface GridType extends IGridDataBindable { /** @hidden @internal */ paginatorOutlet?: ViewContainerRef; flatData?: any[] | null; + /** @hidden @internal */ childRow?: any; expansionDepth?: number; childDataKey?: any; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index f4d76451ea2..cefbd736ec5 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -69,6 +69,9 @@ import { IgxActionStripToken } from '../../action-strip/token'; let NEXT_ID = 0; +/** + * @hidden @internal + */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', @@ -434,7 +437,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti public parent: IgxHierarchicalGridComponent = null; /** - * @hidden + * @hidden @internal */ public childRow: IgxChildGridRowComponent; From 9c8580c75bd3ff4b9420371909944265eba61d94 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Thu, 25 Jul 2024 13:17:18 +0300 Subject: [PATCH 06/18] fix(grid): allow negative values in filter input --- .../base/grid-filtering-row.component.ts | 14 ++++-- .../lib/grids/grid/grid-filtering-ui.spec.ts | 44 ++++++++++++++++--- .../src/lib/test-utils/grid-samples.spec.ts | 11 +++++ .../lib/test-utils/sample-test-data.spec.ts | 7 +++ 4 files changed, 68 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index cf13b18f033..5cdd931933d 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -81,12 +81,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { @Input() public get value(): any { - return this.expression ? this.expression.searchVal : null; + return this._value; } public set value(val) { - if (!val && val !== 0 && this.expression.searchVal) { + if (!val && val !== 0 && (this.expression.searchVal || this.expression.searchVal === 0)) { this.expression.searchVal = null; + this._value = null; const index = this.expressionsList.findIndex(item => item.expression === this.expression); if (index === 0 && this.expressionsList.length === 1) { this.filteringService.clearFilter(this.column.field); @@ -98,11 +99,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { return; } } else { + if (val === '') { + return; + } const oldValue = this.expression.searchVal; if (isEqual(oldValue, val)) { return; } + this._value = val; this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val); if (this.expressionsList.find(item => item.expression === this.expression) === undefined) { this.addExpression(true); @@ -194,6 +199,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { private isKeyPressed = false; private isComposing = false; private _cancelChipClick = false; + private _value = null; private _icons = [ { name: 'clear', @@ -289,6 +295,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { const selectedItem = this.expressionsList.find(expr => expr.isSelected === true); if (selectedItem) { this.expression = selectedItem.expression; + this._value = this.expression.searchVal; } this.filteringService.grid.localeChange @@ -512,6 +519,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.removeExpression(indexToDeselect, this.expression); } this.resetExpression(); + this._value = this.expression.searchVal; this.scrollChipsWhenAddingExpression(); } @@ -685,7 +693,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { item.isSelected = !item.isSelected; if (item.isSelected) { this.expression = item.expression; - + this._value = this.expression.searchVal; this.focusEditElement(); } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index d85f174cc07..3d20e8a25ec 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -42,7 +42,8 @@ import { IgxGridExternalESFComponent, IgxGridExternalESFTemplateComponent, IgxGridDatesFilteringComponent, - LoadOnDemandFilterStrategy + LoadOnDemandFilterStrategy, + IgxGridFilteringNumericComponent } from '../../test-utils/grid-samples.spec'; import { GridSelectionMode, FilterMode, Size } from '../common/enums'; import { ControlsFunction } from '../../test-utils/controls-functions.spec'; @@ -71,7 +72,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { IgxGridFilteringScrollComponent, IgxGridFilteringMCHComponent, IgxGridFilteringTemplateComponent, - IgxGridDatesFilteringComponent + IgxGridDatesFilteringComponent, + IgxGridFilteringNumericComponent ] }); })); @@ -904,6 +906,38 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(input.properties.readOnly).toBeTruthy(); })); + it('should correctly filter negative values', fakeAsync(() => { + fix = TestBed.createComponent(IgxGridFilteringNumericComponent); + fix.detectChanges(); + grid = fix.componentInstance.grid; + + GridFunctions.clickFilterCellChip(fix, 'Number'); + + const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + const input = filteringRow.query(By.directive(IgxInputDirective)); + + // Set input and confirm + GridFunctions.typeValueInFilterRowInput('-1', fix); + + expect(input.componentInstance.value).toEqual('-1'); + expect(grid.rowList.length).toEqual(1); + + GridFunctions.typeValueInFilterRowInput('0', fix); + + expect(input.componentInstance.value).toEqual('0'); + expect(grid.rowList.length).toEqual(0); + + GridFunctions.typeValueInFilterRowInput('-0.5', fix); + + expect(input.componentInstance.value).toEqual('-0.5'); + expect(grid.rowList.length).toEqual(1); + + GridFunctions.typeValueInFilterRowInput('', fix); + + expect(input.componentInstance.value).toEqual(null); + expect(grid.rowList.length).toEqual(3); + })); + it('Should focus input .', fakeAsync(() => { GridFunctions.clickFilterCellChip(fix, 'ProductName'); @@ -2755,12 +2789,12 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { it('Should not prevent mousedown event when target is within the filter cell template', fakeAsync(() => { const filterCell = GridFunctions.getFilterCell(fix, 'ProductName'); const input = filterCell.query(By.css('input')).nativeElement; - + const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }); const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault'); input.dispatchEvent(mousedownEvent, { bubbles: true }); fix.detectChanges(); - + expect(preventDefaultSpy).not.toHaveBeenCalled(); })); @@ -2772,7 +2806,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault'); firstCell.dispatchEvent(mousedownEvent); fix.detectChanges(); - + expect(preventDefaultSpy).toHaveBeenCalled(); })); }); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 32d20e821eb..b79851ec333 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -764,6 +764,17 @@ export class IgxGridFilteringComponent extends BasicGridComponent { } } +@Component({ + template: ` + + `, + standalone: true, + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class IgxGridFilteringNumericComponent extends BasicGridComponent { + public override data = SampleTestData.numericData(); +} + @Component({ template: ` ([ + { Number: -1 }, + { Number: 2.5 }, + { Number: -0.5 } + ]); + /* Fields: Name: string, Avatar: string; 3 items. */ public static personAvatarData = () => ([ { From 766e5e985f072f5c4c8bc47368d8b73d7b3a7aa8 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Thu, 25 Jul 2024 13:37:30 +0300 Subject: [PATCH 07/18] fix(drop-down): ensure id attribute is set correctly when using bracket syntax --- .../src/lib/drop-down/drop-down.base.ts | 1 + .../src/lib/select/select.component.spec.ts | 36 ++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index adde492df56..e62c7b7296b 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -74,6 +74,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit * * ``` */ + @HostBinding('attr.id') @Input() public get id(): string { return this._id; diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index 958c6156f92..61cd1f185ab 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -98,7 +98,8 @@ describe('igxSelect', () => { IgxSelectReactiveFormComponent, IgxSelectTemplateFormComponent, IgxSelectHeaderFooterComponent, - IgxSelectCDRComponent + IgxSelectCDRComponent, + IgxSelectWithIdComponent ] }).compileComponents(); })); @@ -515,6 +516,21 @@ describe('igxSelect', () => { expect(dummyInput).toEqual(document.activeElement); expect(select.collapsed).toBeFalsy(); })); + + it('should set the id attribute when using property binding', () => { + fixture = TestBed.createComponent(IgxSelectWithIdComponent); + fixture.detectChanges(); + + select = fixture.componentInstance.select; + fixture.detectChanges(); + + const selectElement = fixture.debugElement.query(By.css('igx-select')).nativeElement; + fixture.detectChanges(); + + expect(select).toBeTruthy(); + expect(select.id).toEqual("id1"); + expect(selectElement.getAttribute('id')).toBe('id1'); + }); }); describe('Form tests: ', () => { @@ -3091,3 +3107,21 @@ class IgxSelectCDRComponent { { field: 'ContactName', type: 'string' } ]; } + +@Component({ + template: ` + + + {{item}} + + + `, + standalone: true, + imports: [NgIf, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, NgFor] +}) +class IgxSelectWithIdComponent { + @ViewChild(IgxSelectComponent, { read: IgxSelectComponent, static: true }) + public select: IgxSelectComponent; + + public items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; +} From fda57f886ffd2b2aaf197d4d25d4249de2560748 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 26 Jul 2024 08:23:25 +0300 Subject: [PATCH 08/18] fix(divider): correct inset input target (#14586) --- .../src/lib/directives/divider/divider.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts index 6e1678f528c..1da6fa32c04 100644 --- a/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts @@ -83,6 +83,7 @@ export class IgxDividerDirective { * ``` */ @HostBinding('style.--inset') + @Input() public set inset(value: string) { this._inset = value; } @@ -105,7 +106,6 @@ export class IgxDividerDirective { * * ``` */ - @Input('inset') private _inset = '0'; /** From c02487c0f54a119f72a42eb7b6251ff334c683a2 Mon Sep 17 00:00:00 2001 From: Maya Date: Mon, 29 Jul 2024 11:28:13 +0300 Subject: [PATCH 09/18] chore(elements): Update grid columnList tags to match model (#14596) --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 38f0d292a6b..4e3ff68076b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -1131,7 +1131,7 @@ export abstract class IgxGridBaseDirective implements GridType, @ViewChild('igxLoadingOverlayOutlet', { read: IgxOverlayOutletDirective, static: true }) public loadingOutlet: IgxOverlayOutletDirective; - /* contentChildren */ + /* reactContentChildren */ /* blazorInclude */ /* blazorTreatAsCollection */ /* blazorCollectionName: ColumnCollection */ From ecb0e405163a5045e45485bc6154de76837e52f7 Mon Sep 17 00:00:00 2001 From: Martin Dragnev <37667452+mddragnev@users.noreply.github.com> Date: Tue, 30 Jul 2024 19:01:44 +0300 Subject: [PATCH 10/18] fix(elements): inject grid instead of grid api in state component (#14594) --- .../src/app/app.module.ts | 1 + .../src/app/custom-strategy.spec.ts | 22 ++++++++++++++++++- .../src/lib/state.component.ts | 6 ++--- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular-elements/src/app/app.module.ts b/projects/igniteui-angular-elements/src/app/app.module.ts index 8662496f10e..56fa430a99a 100644 --- a/projects/igniteui-angular-elements/src/app/app.module.ts +++ b/projects/igniteui-angular-elements/src/app/app.module.ts @@ -123,5 +123,6 @@ declare global { 'igc-grid': NgElement & WithProperties; 'igc-tree-grid': NgElement & WithProperties; 'igc-paginator': NgElement & WithProperties; + 'igc-grid-state': NgElement & WithProperties; } } diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts index bd2dc3df3cd..c1119c809eb 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts +++ b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts @@ -3,7 +3,7 @@ import { ApplicationRef, importProvidersFrom } from '@angular/core'; import { createApplication } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserTestingModule } from '@angular/platform-browser/testing'; -import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent } from 'igniteui-angular'; +import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxPivotGridComponent } from 'igniteui-angular'; import { firstValueFrom, fromEvent, skip, timer } from 'rxjs'; import { registerConfig } from '../analyzer/elements.config'; import { createIgxCustomElement } from './create-custom-element'; @@ -11,6 +11,7 @@ import { ComponentRefKey, IgcNgElement } from './custom-strategy'; import hgridData from '../assets/data/projects-hgrid.js'; import { SampleTestData } from 'igniteui-angular/src/lib/test-utils/sample-test-data.spec'; import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils'; +import { IgxGridStateComponent } from '../lib/state.component'; describe('Elements: ', () => { let testContainer: HTMLDivElement; @@ -28,8 +29,13 @@ describe('Elements: ', () => { customElements.define("igc-grid", grid); const hgrid = createIgxCustomElement(IgxHierarchicalGridComponent, { injector: appRef.injector, registerConfig }); customElements.define("igc-hierarchical-grid", hgrid); + const pivotGrid = createIgxCustomElement(IgxPivotGridComponent, { injector: appRef.injector, registerConfig }); + customElements.define("igc-pivot-grid", pivotGrid); const paginator = createIgxCustomElement(IgxPaginatorComponent, { injector: appRef.injector, registerConfig }); customElements.define("igc-paginator", paginator); + const stateComponent = createIgxCustomElement(IgxGridStateComponent, { injector: appRef.injector, registerConfig }); + customElements.define("igc-grid-state", stateComponent); + }); beforeEach(async () => { @@ -111,5 +117,19 @@ describe('Elements: ', () => { expect(gridEl.dataView.length).toEqual(3); expect(paginator.totalRecords).toEqual(gridEl.data.length); }); + + it(`should initialize pivot grid with state persistence component`, async () => { + const gridEl = document.createElement("igc-pivot-grid"); + + const stateComponent = document.createElement("igc-grid-state"); + + gridEl.appendChild(stateComponent); + + testContainer.appendChild(gridEl); + + // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy + await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2)); + expect(() => stateComponent.getStateAsString()).not.toThrow(); + }); }); }); diff --git a/projects/igniteui-angular-elements/src/lib/state.component.ts b/projects/igniteui-angular-elements/src/lib/state.component.ts index 46f268bba3f..c81ba93f7a2 100644 --- a/projects/igniteui-angular-elements/src/lib/state.component.ts +++ b/projects/igniteui-angular-elements/src/lib/state.component.ts @@ -1,5 +1,5 @@ import { Component, EnvironmentInjector, EventEmitter, Inject, Injector, Output, ViewContainerRef } from '@angular/core'; -import { IGX_GRID_SERVICE_BASE, GridServiceType, IPinningConfig} from '../../../igniteui-angular/src/lib/grids/common/grid.interface'; +import { IPinningConfig, GridType, IGX_GRID_BASE} from '../../../igniteui-angular/src/lib/grids/common/grid.interface'; import { IFilteringExpressionsTree } from '../../../igniteui-angular/src/lib/data-operations/filtering-expressions-tree'; import { IPagingState } from '../../../igniteui-angular/src/lib/data-operations/paging-state.interface'; import { ISortingExpression } from '../../../igniteui-angular/src/lib/data-operations/sorting-strategy'; @@ -50,11 +50,11 @@ export interface IGridStateInfo { export class IgxGridStateComponent extends IgxGridStateBaseDirective { constructor( - @Inject(IGX_GRID_SERVICE_BASE) private api: GridServiceType, + @Inject(IGX_GRID_BASE) grid: GridType, protected override viewRef: ViewContainerRef, protected override envInjector: EnvironmentInjector, protected override injector: Injector, ) { - super(api.grid, viewRef, envInjector, injector); + super(grid, viewRef, envInjector, injector); } /** From 56b32d20ecbc360b3cea9e101c16c2c4cd0bd582 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Wed, 31 Jul 2024 16:09:26 +0300 Subject: [PATCH 11/18] fix(nav-drawer): fixing a bug with ripple directive going in material theme. (#14574) Co-authored-by: Simeon Simeonoff --- .../navdrawer/_navdrawer-theme.scss | 7 ++++- src/app/app.component.ts | 29 ++++++++++--------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index 1c29e38ca60..23ab0dca9d4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -384,13 +384,18 @@ } @if $variant == 'material' { + $reduce-size: rem(8px); + + // The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554 + clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius')); + &::after { content: ''; position: absolute; width: 100%; inset-block-start: rem(4px); inset-inline-start: 0; - height: calc(100% - #{rem(8px)}); + height: calc(100% - #{$reduce-size}); border-radius: var-get($theme, 'item-border-radius'); z-index: -1; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0edd7c91731..012ad0730c2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild, HostBinding } from '@angular/core'; import { Router, NavigationStart, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; import { filter } from 'rxjs/operators'; -import { IgxNavigationDrawerComponent, IgxIconService } from 'igniteui-angular'; +import { IgxNavigationDrawerComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular'; import { PageHeaderComponent } from './pageHeading/pageHeading.component'; import { IgxIconComponent } from '../../projects/igniteui-angular/src/lib/icon/icon.component'; import { NgFor, NgIf } from '@angular/common'; @@ -12,19 +12,20 @@ import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerM templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], standalone: true, - imports: [ - IgxNavigationDrawerComponent, - IgxNavDrawerTemplateDirective, - IgxNavDrawerItemDirective, - NgFor, - RouterLinkActive, - RouterLink, - IgxIconComponent, - NgIf, - IgxNavDrawerMiniTemplateDirective, - PageHeaderComponent, - RouterOutlet - ] + imports: [ + IgxNavigationDrawerComponent, + IgxNavDrawerTemplateDirective, + IgxNavDrawerItemDirective, + NgFor, + RouterLinkActive, + RouterLink, + IgxIconComponent, + NgIf, + IgxNavDrawerMiniTemplateDirective, + PageHeaderComponent, + RouterOutlet, + IgxRippleDirective, + ], }) export class AppComponent implements OnInit { @HostBinding('attr.id') From c9eafb1be9464b3515936e543c8ceb8ea68f74ac Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Tue, 6 Aug 2024 13:33:18 +0300 Subject: [PATCH 12/18] ci(bundle-test): add error handler to force-throw errors --- projects/bundle-test/src/app/app.config.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/projects/bundle-test/src/app/app.config.ts b/projects/bundle-test/src/app/app.config.ts index e5a3cf10050..ba8956b9e29 100644 --- a/projects/bundle-test/src/app/app.config.ts +++ b/projects/bundle-test/src/app/app.config.ts @@ -1,9 +1,16 @@ import { ApplicationConfig } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import { NavigationError, provideRouter, withNavigationErrorHandler } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideClientHydration()] + providers: [ + provideRouter( + routes, + // force failed routes to throw & fail the SSG part of the build + withNavigationErrorHandler((e: NavigationError) => { throw e; }) + ), + provideClientHydration() + ] }; From 4c9ab4d940ece5ab24a0255bfea80b3c7a56fd49 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Tue, 6 Aug 2024 14:00:33 +0300 Subject: [PATCH 13/18] fix(theme-service): unify globalThis access with SSR-safe check --- .../igniteui-angular/src/lib/services/theme/theme.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts index 9c46f2891ff..2e4157dd133 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts @@ -38,8 +38,8 @@ export class ThemeService { } private init() { - const theme = globalThis - .getComputedStyle(this.document.body) + const theme = globalThis.window + ?.getComputedStyle(this.document.body) .getPropertyValue("--ig-theme") .trim(); From 6fd1067e0eb6ceaefd710ecaf313700ccd355c0c Mon Sep 17 00:00:00 2001 From: Maya Date: Tue, 6 Aug 2024 19:26:07 +0300 Subject: [PATCH 14/18] feat(elements): add broadcast channel to sync icons with wc (#14498) --- .../src/app/app.module.ts | 6 +- .../igniteui-angular-elements/src/index.html | 31 ++++- .../src/lib/icon.broadcast.service.spec.ts | 115 ++++++++++++++++++ .../src/lib/icon.broadcast.service.ts | 82 +++++++++++++ 4 files changed, 231 insertions(+), 3 deletions(-) create mode 100644 projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts create mode 100644 projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts diff --git a/projects/igniteui-angular-elements/src/app/app.module.ts b/projects/igniteui-angular-elements/src/app/app.module.ts index 56fa430a99a..1e4c09cc437 100644 --- a/projects/igniteui-angular-elements/src/app/app.module.ts +++ b/projects/igniteui-angular-elements/src/app/app.module.ts @@ -31,6 +31,7 @@ import { registerConfig } from "../analyzer/elements.config"; import { createIgxCustomElement } from './create-custom-element'; import { IgxGridStateComponent } from '../lib/state.component'; import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils'; +import { IgxIconBroadcastService } from '../lib/icon.broadcast.service'; @NgModule({ imports: [ @@ -38,13 +39,14 @@ import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils'; BrowserAnimationsModule ], providers: [ - { provide: ELEMENTS_TOKEN, useValue: true } + { provide: ELEMENTS_TOKEN, useValue: true }, + IgxIconBroadcastService ], // bootstrap: [] }) export class AppModule { - constructor(private injector: Injector) {} + constructor(private injector: Injector, private _iconBroadcast: IgxIconBroadcastService) {} ngDoBootstrap() { diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html index 4bd12923148..e1585a6c320 100644 --- a/projects/igniteui-angular-elements/src/index.html +++ b/projects/igniteui-angular-elements/src/index.html @@ -73,6 +73,7 @@

Flat Grid (column groups, toolbar, paginator, row Medium Large +

Standalone paginator

@@ -112,10 +113,18 @@

Flat Grid (MRL column layout)

import { html, nothing } from "/lit-html.js"; import { Directive, directive } from "/directive.js"; - import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent } from "igniteui-webcomponents"; + import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent, registerIconFromText, setIconRef } from "igniteui-webcomponents"; // import "igniteui-webcomponents/themes/light/bootstrap.css"; defineComponents(IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent); + + + const buildIcon = + ''; + const thumbUpIcon = + ''; + let icon = thumbUpIcon; + const grid1 = document.getElementById('grid1'); const grid2 = document.getElementById('grid2'); const buttonGroup = document.querySelector('igc-button-group'); @@ -196,6 +205,7 @@

Flat Grid (MRL column layout)

document.getElementById("saveState").addEventListener("click", saveState); document.getElementById("restoreState").addEventListener("click", restoreState); + document.getElementById("toggleIcon").addEventListener("click", toggleIcon); const stateComponent = document.getElementById('state'); stateComponent.options = { paging: false @@ -220,6 +230,25 @@

Flat Grid (MRL column layout)

stateComponent.applyState(obj); } } + + function toggleIcon() { + if (icon !== thumbUpIcon) { + icon = thumbUpIcon; + registerIconFromText("filter_list", thumbUpIcon, "customSet"); + setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'customSet', + }); + + } else { + icon = buildIcon; + registerIconFromText("filter_list", buildIcon, "customSet2"); + setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'customSet2', + }); + } + } diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts new file mode 100644 index 00000000000..c58d9970e03 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts @@ -0,0 +1,115 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service'; +import { Component, SecurityContext } from '@angular/core'; +import { IconMeta, IgxIconService } from 'igniteui-angular'; +import { wait } from 'igniteui-angular/src/lib/test-utils/ui-interactions.spec'; + +describe('Icon broadcast service', () => { + let fixture: ComponentFixture; + let broadcastChannel: BroadcastChannel; + let events: BroadcastIconsChangeMessage[] = []; + const buildIcon = + ''; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [], + providers: [IgxIconBroadcastService] + }) + .compileComponents(); + }); + + beforeEach(() => { + broadcastChannel = new BroadcastChannel("ignite-ui-icon-channel"); + broadcastChannel.onmessage = (e: MessageEvent) => { + events.push(e.data); + } + fixture = TestBed.createComponent(BroadcastServiceComponent); + }); + + afterEach(() => { + events = []; + broadcastChannel.close(); + }); + + describe('Broadcast Events', () => { + it('should correctly process event of icons registering on channel.', async() => { + // simulate a new icon being registered on channel + const icons: Map> = new Map(); + const icon: Map = new Map() + icon.set("customIcon", { svg: buildIcon }); + icons.set("customCollection", icon); + const message: BroadcastIconsChangeMessage = { + actionType: ActionType.RegisterIcon, + collections: icons + }; + broadcastChannel.postMessage(message); + fixture.detectChanges(); + await wait(50); + fixture.detectChanges(); + const iconService = fixture.componentInstance.iconService; + const svg = iconService.getSvgIcon("customIcon", "customCollection"); + expect(svg).not.toBeUndefined(); + }); + + it('should correctly process event of setting an icon reference on channel.', async() => { + const refs: Map> = new Map(); + const ref: Map = new Map() + ref.set("customIcon", {name: "customIcon", family: "customCollection" }); + refs.set("customCollection", ref); + const message: BroadcastIconsChangeMessage = { + actionType: ActionType.RegisterIcon, + references: refs + }; + broadcastChannel.postMessage(message); + fixture.detectChanges(); + await wait(50); + fixture.detectChanges(); + + const iconService = fixture.componentInstance.iconService; + const serviceRef = iconService.getIconRef("customIcon", "customCollection"); + expect(serviceRef.family).toBe("customCollection"); + expect(serviceRef.name).toBe("customIcon"); + }); + + it('should send a request to sync state from any peer already on the channel on init.', async() => { + await wait(50); + expect(events.length).toBe(1); + expect(events[0].actionType).toBe(ActionType.SyncState); + }); + + it('should correctly process event of synching full state of icons on channel.', async() => { + const icons: Map> = new Map(); + const icon: Map = new Map() + icon.set("customIcon", { svg: buildIcon }); + icons.set("customCollection", icon); + const refs: Map> = new Map(); + const ref: Map = new Map() + ref.set("customIcon", {name: "customIcon", family: "customCollection" }); + refs.set("customCollection", ref); + const message: BroadcastIconsChangeMessage = { + actionType: ActionType.SyncState, + collections: icons, + references: refs + }; + broadcastChannel.postMessage(message); + await wait(50); + const iconService = fixture.componentInstance.iconService; + const svg = iconService.getSvgIcon("customIcon", "customCollection"); + expect(svg).not.toBeUndefined(); + const serviceRef = iconService.getIconRef("customIcon", "customCollection"); + expect(serviceRef.family).toBe("customCollection"); + expect(serviceRef.name).toBe("customIcon"); + }); + }) +}); + +@Component({ + template: ` + `, + standalone: true, + providers: [IgxIconBroadcastService, IgxIconService] +}) +export class BroadcastServiceComponent { + constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {} +} diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts new file mode 100644 index 00000000000..34a32a8c4d6 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts @@ -0,0 +1,82 @@ +import { Injectable, Optional } from '@angular/core'; +import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils'; +import { IconMeta, IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service'; + + +export interface SvgIcon { + svg: string; + title?: string; + } + + export type Collection = Map; + + export enum ActionType { + SyncState = 0, + RegisterIcon = 1, + UpdateIconReference = 2, + } + + export interface BroadcastIconsChangeMessage { + actionType: ActionType; + collections?: Collection>; + references?: Collection>; + } + +/** @hidden @internal **/ +@Injectable() +export class IgxIconBroadcastService { + private iconBroadcastChannel: BroadcastChannel; + constructor( + protected _iconService: IgxIconService, + @Optional() private _platformUtil: PlatformUtil + ) { + if (this._platformUtil?.isBrowser) { + // open broadcast channel for sync with wc icon service. + this.iconBroadcastChannel = new BroadcastChannel("ignite-ui-icon-channel"); + this.iconBroadcastChannel.onmessage = (event) => { + const message = event.data as BroadcastIconsChangeMessage; + if (message.actionType === ActionType.SyncState || + message.actionType === ActionType.RegisterIcon) { + this.updateIconsFromCollection(message.collections); + } + + if (message.actionType === ActionType.SyncState || + message.actionType === ActionType.UpdateIconReference) { + this.updateRefsFromCollection(message.references); + } + }; + // send message to sync state + this.iconBroadcastChannel.postMessage({ + actionType: ActionType.SyncState + }); + } + } + + private updateIconsFromCollection(collections: Collection>) { + if (!collections) return; + const collectionKeys = collections.keys(); + for (const collectionKey of collectionKeys) { + const collection = collections.get(collectionKey); + for (const iconKey of collection.keys()) { + const value = collection.get(iconKey).svg; + this._iconService.addSvgIconFromText(iconKey, value, collectionKey); + } + } + } + + private updateRefsFromCollection(collections: Collection>) { + if (!collections) return; + const collectionKeys = collections.keys(); + for (const collectionKey of collectionKeys) { + const collection = collections.get(collectionKey); + for (const iconKey of collection.keys()) { + const collectionName = collection.get(iconKey).collection; + this._iconService.setIconRef(iconKey, 'default', { + family: collectionName, + name: iconKey + }); + } + } + } + +} From fe79ed53b6065268c6365f272e9060d11787cd17 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:45:48 +0300 Subject: [PATCH 15/18] refactor(circular-progress): remove typography (#14602) --- package-lock.json | 9 +-- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- .../components/progress/_progress-theme.scss | 72 ++++++++----------- .../core/styles/typography/_bootstrap.scss | 3 - .../lib/core/styles/typography/_fluent.scss | 3 - .../lib/core/styles/typography/_indigo.scss | 3 - .../lib/core/styles/typography/_material.scss | 1 - 8 files changed, 37 insertions(+), 58 deletions(-) diff --git a/package-lock.json b/package-lock.json index aac0b951732..e94cfeab202 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^10.1.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12899,9 +12899,10 @@ } }, "node_modules/igniteui-theming": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz", - "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==", + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.1.0.tgz", + "integrity": "sha512-U6PAOAbbUZ9V336+5HpztDo3DPUMBOLiAPlYoAc4MbR072jYsYBNt5bWeyLJB7QC7pwXC/VIgqBEXXxIWyAJWQ==", + "license": "MIT", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index a4f1c71831b..8c0bccfd370 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^10.1.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 0d2c2e8f604..25ae22f6d11 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -74,7 +74,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^10.1.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 78dd9d34b77..1cc1a8485ce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:math'; @use 'sass:meta'; @use 'sass:list'; @use '../../base' as *; @@ -398,6 +399,7 @@ /// @param {Color} $base-circle-color [null] - The base circle fill color. /// @param {Color | List} $progress-circle-color [null] - The progress circle fill color. /// @param {Color} $text-color [null] - The value text color. +/// @param {Number} $diameter [null] - The progress circle diameter. /// /// @requires $light-material-schema /// @@ -412,8 +414,8 @@ $base-circle-color: null, $progress-circle-color: null, - - $text-color: null + $text-color: null, + $diameter: null ) { $name: 'igx-circular-bar'; $circular-bar-schema: (); @@ -446,6 +448,7 @@ progress-circle-color-start: $progress-circle-color-start, progress-circle-color-end: $progress-circle-color-end, text-color: $text-color, + diameter: $diameter, _meta: map.merge(if($meta, $meta, ()), ( variant: map.get($schema, '_meta', 'theme') )), @@ -463,25 +466,14 @@ $variant: map.get($theme, '_meta', 'variant'); - $circular-size: map.get(( - material: rem(32px), - fluent: rem(32px), - bootstrap: rem(54px), - indigo-design: rem(48px), - ), $variant); - - $stroke-width: map.get(( - material: rem(4px), - fluent: rem(4px), - bootstrap: rem(4px), - indigo-design: rem(4px), - ), $variant); + $stroke-width: rem(4px); + $diameter: var-get($theme, 'diameter'); %circular-display { display: inline-flex; flex: 1 1 auto; - width: $circular-size; - height: $circular-size; + width: $diameter; + height: $diameter; position: relative; svg { @@ -533,12 +525,32 @@ } %circular-text { + $scale-factor: 2.28571; + + @if $variant == 'indigo-design' { + $scale-factor: 3; + } + + @if $variant == 'bootstrap' { + $scale-factor: 2.7; + } + + --stroke-scale: calc(#{$diameter} / #{unitless(map.get($theme, 'diameter'))}); + $font-size: round(calc($diameter / $scale-factor - #{unitless($stroke-width)} * var(--stroke-scale)), 1px); + position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); - text-align: center; color: var-get($theme, 'text-color'); + font-size: #{$font-size}; + line-height: normal; + text-align: center; + font-weight: 600; + + @if $variant == 'bootstrap' or $variant == 'fluent' { + font-weight: 700; + } } %circular-text--hidden { @@ -564,27 +576,3 @@ } } } - -// Adds typography styles for the igx-circular-bar component. -/// Uses custom typography -/// @group typography -/// @param {Map} $categories [(text: 'h6')] - The categories from the typographic scale used for type styles. -@mixin circular-bar-typography($categories: (text: 'h6')) { - $text: map.get($categories, 'text'); - - @if $text { - %circular-text { - @include type-style($text) { - font-size: rem(12px); - line-height: rem(16px); - margin: 0; - } - } - } @else { - %circular-text { - font-size: rem(12px); - font-weight: 700; - line-height: rem(16px); - } - } -} diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index ee5040ca9ea..663726a1e7b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -55,9 +55,6 @@ label: 'body-1', )); @include chip-typography(); - @include circular-bar-typography($categories: ( - text: 'subtitle-1' - )); @include column-actions-typography(); @include date-range-typography(); @include dialog-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index fd07d7f3e0a..4b5a40ff0a6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -58,9 +58,6 @@ @include chip-typography($categories: ( text: 'subtitle-2' )); - @include circular-bar-typography($categories: ( - text: null - )); @include column-actions-typography(); @include date-range-typography(); @include dialog-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 865cf665766..9a9db01638b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -57,9 +57,6 @@ label: 'body-2', )); @include chip-typography(); - @include circular-bar-typography($categories: ( - text: 'subtitle-2' - )); @include column-actions-typography(); @include date-range-typography(); @include dialog-typography($categories: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index dc0cf9b96ff..6b8d3461d60 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -41,7 +41,6 @@ @include card-typography(); @include checkbox-typography(); @include chip-typography(); - @include circular-bar-typography(); @include column-actions-typography(); @include date-range-typography(); @include dialog-typography(); From 2f0d40a98a4c2459b3097eb3f8962db7e1823cf2 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 14 Aug 2024 10:43:41 +0300 Subject: [PATCH 16/18] fix(theme-service): get theme from component stylesheet instead of the global theme (#14622) --- package-lock.json | 8 +- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- .../src/lib/carousel/carousel-base.ts | 2 +- .../src/lib/carousel/carousel.component.ts | 54 ++++--- .../action-strip/_action-strip-theme.scss | 10 +- .../components/avatar/_avatar-theme.scss | 10 +- .../styles/components/badge/_badge-theme.scss | 2 +- .../components/banner/_banner-theme.scss | 4 +- .../bottom-nav/_bottom-nav-theme.scss | 8 +- .../button-group/_button-group-theme.scss | 24 ++-- .../components/button/_button-theme.scss | 132 +++++++++--------- .../components/calendar/_calendar-theme.scss | 126 +++++++++-------- .../styles/components/card/_card-theme.scss | 12 +- .../components/carousel/_carousel-theme.scss | 24 ++-- .../components/checkbox/_checkbox-theme.scss | 64 ++++----- .../styles/components/chip/_chip-theme.scss | 40 +++--- .../date-picker/_date-picker-theme.scss | 10 +- .../components/dialog/_dialog-theme.scss | 40 +++--- .../components/divider/_divider-theme.scss | 4 +- .../drop-down/_drop-down-theme.scss | 12 +- .../_expansion-panel-theme.scss | 12 +- .../grid/_excel-filtering-theme.scss | 8 +- .../styles/components/grid/_grid-theme.scss | 22 +-- .../icon-button/_icon-button-theme.scss | 18 +-- .../components/input/_input-group-theme.scss | 37 +++-- .../styles/components/label/_label-theme.scss | 2 +- .../styles/components/list/_list-theme.scss | 74 +++++----- .../components/navbar/_navbar-theme.scss | 8 +- .../navdrawer/_navdrawer-theme.scss | 52 +++---- .../components/progress/_progress-theme.scss | 41 +++--- .../query-builder/_query-builder-theme.scss | 2 +- .../styles/components/radio/_radio-theme.scss | 76 +++++----- .../components/slider/_slider-theme.scss | 76 +++++----- .../components/snackbar/_snackbar-theme.scss | 2 +- .../components/splitter/_splitter-theme.scss | 20 +-- .../components/stepper/_stepper-theme.scss | 42 +++--- .../components/switch/_switch-theme.scss | 92 ++++++------ .../styles/components/tabs/_tabs-theme.scss | 2 +- .../time-picker/_time-picker-theme.scss | 28 ++-- .../styles/components/toast/_toast-theme.scss | 2 +- .../components/tooltip/_tooltip-theme.scss | 2 +- .../styles/components/tree/_tree-theme.scss | 48 +++---- .../core/styles/themes/generators/_base.scss | 2 +- .../lib/input-group/input-group.component.ts | 32 ++++- .../src/lib/services/theme/theme.service.ts | 13 +- 46 files changed, 674 insertions(+), 629 deletions(-) diff --git a/package-lock.json b/package-lock.json index e94cfeab202..5b4d3802ab9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.1.0", + "igniteui-theming": "^11.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12899,9 +12899,9 @@ } }, "node_modules/igniteui-theming": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.1.0.tgz", - "integrity": "sha512-U6PAOAbbUZ9V336+5HpztDo3DPUMBOLiAPlYoAc4MbR072jYsYBNt5bWeyLJB7QC7pwXC/VIgqBEXXxIWyAJWQ==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-11.0.0.tgz", + "integrity": "sha512-t2hRgFBcS4QQFzgPwp3V8d5CFgLFWN9GY0GqnoBdTmtHQEm+2hbzrxgA//akUkO7g5Z6WEp5Y4WWaRkPJVy1HQ==", "license": "MIT", "peerDependencies": { "sass": "^1.58.1" diff --git a/package.json b/package.json index 8c0bccfd370..e54aaf1296d 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.1.0", + "igniteui-theming": "^11.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 25ae22f6d11..d461f1fab3c 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -74,7 +74,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^10.1.0", + "igniteui-theming": "^11.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts index 638170a6204..568e71a15d1 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts @@ -45,7 +45,7 @@ export abstract class IgxCarouselComponentBase { constructor( @Inject(IgxAngularAnimationService) private animationService: AnimationService, - private cdr: ChangeDetectorRef) { + protected cdr: ChangeDetectorRef) { } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 4a73b8f90dc..9fb567e349e 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -1,6 +1,7 @@ import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, + AfterViewInit, ChangeDetectorRef, Component, ContentChild, @@ -88,7 +89,7 @@ export class CarouselHammerConfig extends HammerGestureConfig { imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet] }) -export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { +export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterViewInit, AfterContentInit { /** * Sets the `id` of the carousel. @@ -587,26 +588,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On ) { super(animationService, cdr); this.differ = this.iterableDiffers.find([]).create(null); - this.theme = this.theme ?? this.themeService.theme; - - for (const icon of this._icons) { - switch(this.theme) { - case 'indigo': - this.iconService.addIconRef( - icon.name, - icon.family, - icon.ref.get('indigo'), - ); - break; - case 'material': - default: - this.iconService.addIconRef( - icon.name, - icon.family, - icon.ref.get('material'), - ); - } - } } @@ -738,6 +719,37 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On } } + /** @hidden */ + public ngAfterViewInit() { + this.cdr.detach(); + + if (!this.theme) { + this.theme = this.themeService.getComponentTheme(this.element); + } + + for (const icon of this._icons) { + switch(this.theme) { + case 'indigo': + this.iconService.addIconRef( + icon.name, + icon.family, + icon.ref.get('indigo'), + ); + break; + case 'material': + default: + this.iconService.addIconRef( + icon.name, + icon.family, + icon.ref.get('material'), + ); + } + } + + this.cdr.detectChanges(); + this.cdr.reattach(); + } + /** @hidden */ public ngAfterContentInit() { this.slides.changes diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss index eafc8d1344a..0b6794fcb8c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss @@ -72,10 +72,10 @@ $variant: map.get($theme, '_meta', 'variant'); $icon-button-size: map.get(( - material: rem(36px), - fluent: rem(32px), - bootstrap: rem(36px), - indigo-design: rem(36px), + 'material': rem(36px), + 'fluent': rem(32px), + 'bootstrap': rem(36px), + 'indigo': rem(36px), ), $variant); $button-size: sizable(rem(28px), rem(28px), $icon-button-size); $icon-size: sizable(rem(14px), rem(14px), rem(18px)); @@ -179,7 +179,7 @@ color: var-get($theme, 'icon-color'); } - @if $variant == 'indigo-design' or $variant == 'fluent' { + @if $variant == 'indigo' or $variant == 'fluent' { border-radius: var-get($theme, 'actions-border-radius'); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index 0b174f77b87..34bf3ff1fa8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -69,10 +69,10 @@ $variant: map.get($theme, '_meta', 'variant'); $bootstrap-theme: $variant == 'bootstrap'; $box-shadow: map.get(( - material: null, - fluent: null, - bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'), - indigo-design: null, + 'material': null, + 'fluent': null, + 'bootstrap': 0 0 0 rem(3px) var-get($theme, 'background'), + 'indigo': null, ), $variant); %igx-avatar-outline { @@ -108,7 +108,7 @@ color: var-get($theme, 'icon-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { --component-size: 1; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 2a163a45108..19376023a1d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -122,7 +122,7 @@ color: var-get($theme, 'icon-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { $icon-size: rem(12px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index b4b6b67b993..10609e864e4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -102,7 +102,7 @@ box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color'); border-radius: var-get($theme, 'border-radius'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color'); padding: rem(16px); } @@ -134,7 +134,7 @@ flex: 1 0 0%; gap: rem(16px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(8px); } @else { padding: 0 rem(8px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index 36f8a19dce5..c8d54dcefb3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -186,14 +186,14 @@ igx-icon { --component-size: 3; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { --size: rem(16px); } } } %igx-bottom-nav-menu-item--disabled { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { opacity: .5; } @@ -226,7 +226,7 @@ justify-content: center; color: var-get($theme, 'icon-color'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { padding: 0 rem(8px); height: rem(24px); transform: translateZ(0); @@ -250,7 +250,7 @@ color: var-get($theme, 'label-selected-color'); } - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { %igx-tab-icon--selected { transform: translateY(-2px); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index b4fd57d7b6a..64ae6929ca4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -226,12 +226,12 @@ $variant: map.get($theme, '_meta', 'variant'); $bootstrap-theme: $variant == 'bootstrap'; - $indigo-theme: $variant == 'indigo-design'; + $indigo-theme: $variant == 'indigo'; $group-item-min-width: map.get(( - material: rem(42px), - fluent: rem(42px), - bootstrap: rem(42px), - indigo-design: rem(32px), + 'material': rem(42px), + 'fluent': rem(42px), + 'bootstrap': rem(42px), + 'indigo': rem(32px), ), $variant); %item-overlay { @@ -316,7 +316,7 @@ color: var-get($theme, 'item-hover-text-color'); background: var-get($theme, 'item-hover-background'); border-color: var-get($theme, 'item-hover-border-color'); - + igx-icon { color: var-get($theme, 'item-hover-icon-color'); } @@ -369,7 +369,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding-inline: pad-inline(rem(6px), rem(8px), rem(10px)); igx-icon { @@ -481,9 +481,9 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'item-focused-text-color'); - background: var-get($theme, 'item-focused-background'); + background: var-get($theme, 'item-focused-background'); border-color: var-get($theme, 'item-focused-border-color'); z-index: 2; @@ -618,7 +618,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &:active { background: var-get($theme, 'item-selected-hover-background'); color: var-get($theme, 'item-selected-hover-text-color'); @@ -720,7 +720,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); border-color: var-get($theme, 'item-selected-border-color'); background: var-get($theme, 'item-selected-background'); @@ -754,7 +754,7 @@ background: var-get($theme, 'disabled-selected-background'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'disabled-selected-text-color'); background: var-get($theme, 'disabled-selected-background'); border: none; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 372fd6be816..81a1dddf001 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -277,7 +277,7 @@ material: .1s, fluent: .1s, bootstrap: .15s, - indigo-design: .15s + indigo: .15s ), $variant); $button-transition: color $time ease-in-out, @@ -327,31 +327,31 @@ ); $button-padding-inline: map.get(( - material: $button-padding-inline, - fluent: $button-padding-inline, - bootstrap: $button-padding-inline, - indigo-design: $button-padding-indigo-inline, + 'material': $button-padding-inline, + 'fluent': $button-padding-inline, + 'bootstrap': $button-padding-inline, + 'indigo': $button-padding-indigo-inline, ), $variant); $button-padding-block: map.get(( - material: $button-padding-material-block, - fluent: $button-padding-fluent-block, - bootstrap: $button-padding-bootstrap-block, - indigo-design: $button-padding-indigo-block, + 'material': $button-padding-material-block, + 'fluent': $button-padding-fluent-block, + 'bootstrap': $button-padding-bootstrap-block, + 'indigo': $button-padding-indigo-block, ), $variant); $outlined-button-padding-inline: map.get(( - material: $button-padding-inline, - fluent: $button-padding-inline, - bootstrap: $button-padding-inline, - indigo-design: $button-padding-indigo-inline, + 'material': $button-padding-inline, + 'fluent': $button-padding-inline, + 'bootstrap': $button-padding-inline, + 'indigo': $button-padding-indigo-inline, ), $variant); $outlined-button-padding-block: map.get(( - material: $button-padding-material-block, - fluent: $button-padding-fluent-block, - bootstrap: $button-padding-bootstrap-block, - indigo-design: $button-padding-indigo-block + 'material': $button-padding-material-block, + 'fluent': $button-padding-fluent-block, + 'bootstrap': $button-padding-bootstrap-block, + 'indigo': $button-padding-indigo-block ), $variant); $button-floating-padding-block: ( @@ -387,68 +387,68 @@ ); $icon-sizes: map.get(( - material: rem(18px), - fluent: rem(18px), - bootstrap: rem(18px), - indigo-design: rem(16px), + 'material': rem(18px), + 'fluent': rem(18px), + 'bootstrap': rem(18px), + 'indigo': rem(16px), ), $variant); $icon-in-button-size: $icon-sizes; $contained-shadow: map.get(( - material: var-get($contained-theme, 'resting-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($contained-theme, 'resting-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $contained-shadow--hover: map.get(( - material: var-get($contained-theme, 'hover-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($contained-theme, 'hover-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $contained-shadow--focus: map.get(( - material: var-get($contained-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') + 'material': var-get($contained-theme, 'focus-shadow'), + 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') ), $variant); $contained-shadow--active: map.get(( - material: var-get($contained-theme, 'active-shadow'), - fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') + 'material': var-get($contained-theme, 'active-shadow'), + 'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + 'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') ), $variant); $fab-shadow: map.get(( - material: var-get($fab-theme, 'resting-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($fab-theme, 'resting-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $fab-shadow--hover: map.get(( - material: var-get($fab-theme, 'hover-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($fab-theme, 'hover-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $fab-shadow--focus: map.get(( - material: var-get($fab-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') + 'material': var-get($fab-theme, 'focus-shadow'), + 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') ), $variant); $fab-shadow--active: map.get(( - material: var-get($fab-theme, 'active-shadow'), - fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') + 'material': var-get($fab-theme, 'active-shadow'), + 'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), + 'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'), + 'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') ), $variant); %fluent-border { @@ -497,7 +497,7 @@ map.get($items-gap, 'comfortable') ); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { min-width: rem(28px); } @@ -562,14 +562,14 @@ color: var-get($flat-theme, 'active-foreground'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($flat-theme, 'icon-color-hover'); } } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-width: rem(2px); gap: pad-inline( map.get($items-gap, 'compact'), @@ -620,7 +620,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); &:active { @@ -648,7 +648,7 @@ map.get($outlined-button-padding-inline, 'comfortable') ); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: pad-inline( map.get($items-gap, 'compact'), map.get($items-gap, 'cosy'), @@ -681,7 +681,7 @@ color: var-get($outlined-theme, 'active-foreground'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } @@ -704,7 +704,7 @@ @if $variant == 'bootstrap' { box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color'); - } @else if $variant == 'indigo-design' { + } @else if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color'); igx-icon { @@ -727,7 +727,7 @@ color: var-get($outlined-theme, 'focus-foreground'); border-color: var-get($outlined-theme, 'active-border-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } @@ -779,7 +779,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-width: rem(2px); gap: pad-inline( map.get($items-gap, 'compact'), @@ -838,7 +838,7 @@ color: var-get($contained-theme, 'focus-foreground'); background: var-get($contained-theme, 'focus-background'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } @@ -875,7 +875,7 @@ map.get($button-floating-padding-inline, 'comfortable') ); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding-inline: pad-inline( map.get($button-floating-padding-indigo-inline, 'compact'), map.get($button-floating-padding-indigo-inline, 'cosy'), @@ -918,7 +918,7 @@ color: var-get($fab-theme, 'active-foreground'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } @@ -966,7 +966,7 @@ background: var-get($fab-theme, 'focus-background'); color: var-get($fab-theme, 'focus-foreground'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($outlined-theme, 'icon-color-hover'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index b243ddf3658..8958aeb3635 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -392,7 +392,7 @@ } } - @if $variant == 'material' or $variant == 'indigo-design' { + @if $variant == 'material' or $variant == 'indigo' { @if not($date-selected-current-outline) and $content-background { @if meta.type-of($content-background) == 'color' { $date-selected-current-outline: $content-background; @@ -697,47 +697,47 @@ $bootstrap-theme: $variant == 'bootstrap'; $cal-picker-padding: map.get(( - material: rem(16px), - fluent: rem(16px), - bootstrap: rem(8px), - indigo-design: rem(16px), + 'material': rem(16px), + 'fluent': rem(16px), + 'bootstrap': rem(8px), + 'indigo': rem(16px), ), $variant); $date-size: map.get(( - material: var-get($theme, 'size'), - fluent: var-get($theme, 'size'), - bootstrap: var-get($theme, 'size'), - indigo-design: var-get($theme, 'size'), + 'material': var-get($theme, 'size'), + 'fluent': var-get($theme, 'size'), + 'bootstrap': var-get($theme, 'size'), + 'indigo': var-get($theme, 'size'), ), $variant); $date-height: $date-size; $date-inner-size: map.get(( - material: var-get($theme, 'inner-size'), - fluent: var-get($theme, 'inner-size'), - bootstrap: var-get($theme, 'inner-size'), - indigo-design: var-get($theme, 'inner-size'), + 'material': var-get($theme, 'inner-size'), + 'fluent': var-get($theme, 'inner-size'), + 'bootstrap': var-get($theme, 'inner-size'), + 'indigo': var-get($theme, 'inner-size'), ), $variant); $border-size: map.get(( - material: rem(1px), - fluent: rem(1px), - bootstrap: rem(1px), - indigo-design: rem(2px), + 'material': rem(1px), + 'fluent': rem(1px), + 'bootstrap': rem(1px), + 'indigo': rem(2px), ), $variant); $header-padding: map.get(( - material: rem(16px) rem(24px), - fluent: rem(16px), - bootstrap: rem(16px), - indigo-design: rem(16px), + 'material': rem(16px) rem(24px), + 'fluent': rem(16px), + 'bootstrap': rem(16px), + 'indigo': rem(16px), ), $variant); $arrow-gap: map.get(( - material: rem(24px), - fluent: rem(8px), - bootstrap: rem(24px), - indigo-design: rem(8px) + 'material': rem(24px), + 'fluent': rem(8px), + 'bootstrap': rem(24px), + 'indigo': rem(8px) ), $variant); $date-view-row-gap: rem(4px); @@ -910,7 +910,7 @@ gap: rem(28px); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(2px); &::after { @@ -926,7 +926,7 @@ } %header-display-vertical { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { min-width: rem(136px); width: rem(136px); } @else { @@ -934,7 +934,7 @@ width: rem(168px); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &::after { inset-inline-start: calc(100% - #{rem(1px)}); inset-block-start: 0; @@ -1046,7 +1046,7 @@ justify-content: space-between; gap: rem(24px); position: relative; - height: if($variant == 'indigo-design', rem(50px), rem(56px)); + height: if($variant == 'indigo', rem(50px), rem(56px)); padding-inline: if($variant == 'material', rem(24px), rem(16px)); color: var-get($theme, 'picker-foreground'); background: var-get($theme, 'picker-background'); @@ -1057,7 +1057,7 @@ } igx-icon { - --size: #{if($variant == 'indigo-design', rem(14px), rem(24px))}; + --size: #{if($variant == 'indigo', rem(14px), rem(24px))}; } } @@ -1100,7 +1100,7 @@ outline: none; cursor: pointer; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: rem(5px); } @@ -1145,7 +1145,7 @@ display: flex; justify-content: space-between; - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { &:nth-child(2) { %date-inner-week-number { border-start-start-radius: var-get($theme, 'week-number-border-radius'); @@ -1266,7 +1266,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border: 0; &::before { @@ -1307,7 +1307,7 @@ position: relative; max-width: rem(240px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &::after { content: ''; position: absolute; @@ -1328,7 +1328,7 @@ color: var-get($theme, 'ym-selected-current-hover-foreground'); background: var-get($theme, 'ym-selected-current-hover-background'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-focus-color'); } @else { &::after { @@ -1398,7 +1398,7 @@ color: var-get($theme, 'ym-selected-current-foreground'); background: var-get($theme, 'ym-selected-current-background'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-color'); } @else { &::after { @@ -1411,7 +1411,7 @@ background: var-get($theme, 'ym-selected-current-hover-background'); // stylelint-disable-next-line - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-hover-color'); } @else { // stylelint-disable-next-line @@ -1445,7 +1445,7 @@ %date-inner-week-number { border-radius: 0; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border: 0; &::before { @@ -1656,7 +1656,7 @@ %date-special { %date-inner { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { font-weight: 700; } @@ -1695,7 +1695,7 @@ %date-special-current { %date-inner { - @if $variant == 'material' or $variant == 'indigo-design' { + @if $variant == 'material' or $variant == 'indigo' { &:hover { color: var-get($theme, 'date-special-hover-foreground'); } @@ -1750,7 +1750,7 @@ color: var-get($theme, 'date-selected-current-foreground'); background: var-get($theme, 'date-selected-current-background') ; - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border-color: var-get($theme, 'date-selected-current-border-color'); } @@ -1758,7 +1758,7 @@ color: var-get($theme, 'date-selected-current-hover-foreground'); background: var-get($theme, 'date-selected-current-hover-background'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border-color: var-get($theme, 'date-selected-current-hover-border-color'); } @else { // stylelint-disable-next-line @@ -1769,7 +1769,7 @@ } &::after { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-selected-current-border-color'); } } @@ -1781,12 +1781,12 @@ color: var-get($theme, 'date-selected-current-focus-foreground'); background: var-get($theme, 'date-selected-current-focus-background'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border-color: var-get($theme, 'date-selected-current-focus-border-color'); } &::after { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } @@ -1822,7 +1822,7 @@ border-color: var-get($theme, 'date-selected-current-border-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: transparent; &::after { @@ -1838,7 +1838,7 @@ border-color: var-get($theme, 'date-selected-current-hover-border-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: transparent; // stylelint-disable-next-line @@ -1859,7 +1859,7 @@ border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: transparent; &::after { @@ -1872,7 +1872,7 @@ %date-selected-current-range-first, %date-selected-current-range-last { %date-inner { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &::after { border-color: var-get($theme, 'date-selected-current-border-color'); } @@ -1888,7 +1888,7 @@ color: var-get($theme, 'date-selected-current-range-foreground'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-current-border-color'); background: var-get($theme, 'date-special-range-background'); } @@ -1905,7 +1905,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-current-hover-border-color'); } } @@ -1927,7 +1927,7 @@ border-color: var-get($theme, 'date-special-range-border-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: transparent; } } @@ -1964,7 +1964,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %date-inner { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); @@ -1988,7 +1988,7 @@ %date-selected-current-range-special-active-first, %date-selected-current-range-special-active-last { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %date-inner { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); @@ -2080,7 +2080,7 @@ %date-inner { &::after { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { width: $date-inner-size; height: $date-inner-size; } @@ -2189,7 +2189,7 @@ border-color: transparent !important; } - @if $variant != 'fluent' and $variant != 'indigo-design' { + @if $variant != 'fluent' and $variant != 'indigo' { border-inline-color: transparent; } @@ -2210,7 +2210,7 @@ height: $date-size; width: 50%; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-width: calc(#{$border-size} / 2); } @else { border-width: $border-size; @@ -2255,7 +2255,7 @@ position: relative; border-block-color: var-get($theme, 'date-range-preview-border-color'); - @if $variant == 'material' or $variant == 'indigo-design' { + @if $variant == 'material' or $variant == 'indigo' { border-block-style: dashed; } @@ -2314,9 +2314,11 @@ @if $variant == 'fluent' { width: calc(50% + #{rem(2px)}); } - @if $variant == 'material' or $variant == 'indigo-desing' { + + @if $variant == 'material' or $variant == 'indigo' { width: calc(50% + #{rem(1px)}); } + @if $variant == 'bootstrap' { width: 50%; } @@ -2327,7 +2329,7 @@ border-inline: 0; } - @if $variant == 'material' or $variant == 'indigo-design' { + @if $variant == 'material' or $variant == 'indigo' { border-style: dashed; } @else { border-style: solid; @@ -2572,7 +2574,7 @@ } %date-disabled-current-special { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %date-inner { color: var-get($theme, 'date-special-foreground'); } @@ -2580,7 +2582,7 @@ } %date-disabled-current-special-selected { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %date-inner { color: var-get($theme, 'date-selected-foreground'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index e4eb5630c60..e2814c45fc0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -181,7 +181,7 @@ margin-inline-end: 0; margin-bottom: rem(16px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-bottom: rem(8px); } } @@ -191,7 +191,7 @@ align-self: flex-start; margin-inline-end: rem(16px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-inline-end: rem(8px); margin-block: auto; @@ -216,7 +216,7 @@ display: none; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(2px); %igx-card-header-subtitle { @@ -262,7 +262,7 @@ align-items: center; padding: $card-actions-padding; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { [igxButton], [igxIconButton] { --ig-size: 2; @@ -278,7 +278,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %igx-card-content, %igx-card-actions { padding: rem(16px); @@ -290,7 +290,7 @@ %igx-card-header + %igx-card-content { padding-block-start: 0; - } + } } %igx-card-actions--vertical { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 699eeeb2060..a1ac19bb104 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -147,6 +147,8 @@ $not-bootstrap-theme: $variant != 'bootstrap'; %igx-carousel-display { + --theme: #{$variant}; + display: flex; position: relative; justify-content: center; @@ -179,7 +181,7 @@ border-radius: var-get($theme, 'border-radius'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { width: rem(28px); height: rem(28px); border: rem(2px) solid var-get($theme, 'button-border-color'); @@ -221,7 +223,7 @@ %igx-carousel-arrow--next { inset-inline-end: 0; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %igx-nav-arrow { &::after { transform: rotate(-135deg); @@ -233,7 +235,7 @@ %igx-carousel-arrow--prev { inset-inline-start: 0; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %igx-nav-arrow { &::after { transform: rotate(45deg); @@ -265,7 +267,7 @@ transform: translateX(50%); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(10px); margin-block-start: 0; } @@ -292,7 +294,7 @@ margin: $carousel-indicator-margin; cursor: pointer; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin: 0; } } @@ -303,7 +305,7 @@ height: rem(12px); text-indent: rem(-9999px); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border: $indicator-border-style; border-color: var-get($theme, 'indicator-border-color'); box-shadow: elevation(1); @@ -322,7 +324,7 @@ border-radius: inherit; background: var-get($theme, 'indicator-dot-color'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { @include animation('scale-out-center' .15s $ease-out-quad forwards); inset: rem(1px); } @else { @@ -337,7 +339,7 @@ &:hover { opacity: 1; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &::after { background: var-get($theme, 'indicator-hover-dot-color'); } @@ -357,7 +359,7 @@ } %igx-nav-dot--active { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border: $indicator-border-style; border-color: var-get($theme, 'indicator-active-border-color'); } @else { @@ -377,12 +379,12 @@ &::after { background: var-get($theme, 'indicator-active-dot-color'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { @include animation('scale-in-center' .15s $ease-out-quad forwards); } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &:hover { &::after { background: var-get($theme, 'indicator-active-hover-dot-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 34b72d39f0f..563e56273a4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -116,45 +116,45 @@ $checkbox-radius: math.div($size, 2); $size: map.get(( - material: $size, - fluent: $size, - bootstrap: $size-bs, - indigo-design: $size-bs, + 'material': $size, + 'fluent': $size, + 'bootstrap': $size-bs, + 'indigo': $size-bs, ), $variant); $border-width: map.get(( - material: rem(2px), - fluent: rem(1px), - bootstrap: rem(1px), - indigo-design: rem(2px), + 'material': rem(2px), + 'fluent': rem(1px), + 'bootstrap': rem(1px), + 'indigo': rem(2px), ), $variant); $ripple-display: map.get(( - material: block, - fluent: none, - bootstrap: none, - indigo-design: none, + 'material': block, + 'fluent': none, + 'bootstrap': none, + 'indigo': none, ), $variant); $label-margin: map.get(( - material: rem(12px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(8px), + 'material': rem(12px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(8px), ), $variant); $mark-stroke: map.get(( - material: 3, - fluent: 1, - bootstrap: 3, - indigo-design: 3, + 'material': 3, + 'fluent': 1, + 'bootstrap': 3, + 'indigo': 3, ), $variant); $mark-offset: map.get(( - material: .5px, - fluent: -1px, - bootstrap: .5px, - indigo-design: 1px, + 'material': .5px, + 'fluent': -1px, + 'bootstrap': .5px, + 'indigo': 1px, ), $variant); $mark-length: 24; @@ -218,7 +218,7 @@ } %cbx-composite--hover { - @if $variant == 'indigo-design' or $variant == 'bootstrap' { + @if $variant == 'indigo' or $variant == 'bootstrap' { border-color: var-get($theme, 'empty-color-hover'); } } @@ -275,7 +275,7 @@ background: var-get($theme, 'disabled-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { background: var-get($theme, 'disabled-indeterminate-color'); border-color: transparent; stroke-opacity: 40%; @@ -341,7 +341,7 @@ %cbx-composite { background: transparent; - + &::before { content: ''; position: absolute; @@ -458,7 +458,7 @@ } %cbx-label--hover { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'label-color-hover'); } } @@ -480,7 +480,7 @@ } %cbx-label--invalid { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { color: var-get($theme, 'error-color'); } } @@ -540,7 +540,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %cbx-composite { border-radius: var-get($theme, 'border-radius'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); @@ -557,7 +557,7 @@ } %igx-checkbox--focused-checked { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %cbx-composite { border-radius: var-get($theme, 'border-radius'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused'); @@ -585,7 +585,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %cbx-composite { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 46fea93b668..a1663d19227 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -266,17 +266,17 @@ ); $box-shadow-focus: map.get(( - material: null, - fluent: null, - bootstrap: 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'), - indigo-design: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color') + 'material': null, + 'fluent': null, + 'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'), + 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color') ), $variant); $box-shadow-focus-selected: map.get(( - material: null, - fluent: null, - bootstrap: 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'), - indigo-design: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color') + 'material': null, + 'fluent': null, + 'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'), + 'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color') ), $variant); $border-size: rem(1px); @@ -349,7 +349,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &:focus:hover { %igx-chip__item { color: var-get($theme, 'hover-text-color'); @@ -443,7 +443,7 @@ %igx-chip%igx-chip--primary { &:hover { %igx-chip__item { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'primary', $variant: 400); background: color($color: 'primary', $variant: 400); border-color: color($color: 'primary', $variant: 400); @@ -461,7 +461,7 @@ background: color($color: 'primary', $variant: 800); border-color: color($color: 'primary', $variant: 800); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'primary', $variant: 500); background: color($color: 'primary', $variant: 500); border-color: color($color: 'primary', $variant: 500); @@ -484,7 +484,7 @@ %igx-chip%igx-chip--info { &:hover { %igx-chip__item { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'info', $variant: 400); background: color($color: 'info', $variant: 400); border-color: color($color: 'info', $variant: 400); @@ -502,7 +502,7 @@ background: color($color: 'info', $variant: 800); border-color: color($color: 'info', $variant: 800); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'info', $variant: 500); background: color($color: 'info', $variant: 500); border-color: color($color: 'info', $variant: 500); @@ -529,7 +529,7 @@ %igx-chip%igx-chip--success { &:hover { %igx-chip__item { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'success', $variant: 400); background: color($color: 'success', $variant: 400); border-color: color($color: 'success', $variant: 400); @@ -547,7 +547,7 @@ background: color($color: 'success', $variant: 800); border-color: color($color: 'success', $variant: 800); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'success', $variant: 500); background: color($color: 'success', $variant: 500); border-color: color($color: 'success', $variant: 500); @@ -570,7 +570,7 @@ %igx-chip%igx-chip--warning { &:hover { %igx-chip__item { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'warn', $variant: 400); background: color($color: 'warn', $variant: 400); border-color: color($color: 'warn', $variant: 400); @@ -588,7 +588,7 @@ background: color($color: 'warn', $variant: 800); border-color: color($color: 'warn', $variant: 800); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'warn', $variant: 500); background: color($color: 'warn', $variant: 500); border-color: color($color: 'warn', $variant: 500); @@ -615,7 +615,7 @@ %igx-chip%igx-chip--danger { &:hover { %igx-chip__item { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'error', $variant: 400); background: color($color: 'error', $variant: 400); border-color: color($color: 'error', $variant: 400); @@ -633,7 +633,7 @@ background: color($color: 'error', $variant: 800); border-color: color($color: 'error', $variant: 800); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: contrast-color($color: 'error', $variant: 500); background: color($color: 'error', $variant: 500); border-color: color($color: 'error', $variant: 500); @@ -782,7 +782,7 @@ pointer-events: none; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &%igx-chip--primary { %igx-chip__item { color: contrast-color($color: 'primary', $variant: 400); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss index d5a680d82ed..54210650684 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss @@ -18,10 +18,10 @@ $border-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'); $action-area-height: map.get(( - material: (rem(40px), rem(46px), rem(52px)), - fluent: (rem(40px), rem(48px), rem(54px)), - bootstrap: (rem(47px), rem(54px), rem(64px)), - indigo-design: (rem(40px), rem(44px), rem(48px)), + 'material': (rem(40px), rem(46px), rem(52px)), + 'fluent': (rem(40px), rem(48px), rem(54px)), + 'bootstrap': (rem(47px), rem(54px), rem(64px)), + 'indigo': (rem(40px), rem(44px), rem(48px)), ), $variant); %date-picker { @@ -67,7 +67,7 @@ display: flex; justify-content: flex-end; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: rem(8px) rem(16px); } @else { padding: rem(8px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss index a8b49a3658f..a6bd21f8fb7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss @@ -90,30 +90,30 @@ $bootstrap-theme: map.get($theme, variant) == 'bootstrap'; $dialog-min-width: map.get(( - material: rem(280px), - fluent: rem(288px), - bootstrap: rem(288px), + 'material': rem(280px), + 'fluent': rem(288px), + 'bootstrap': rem(288px), ), $variant); $dialog-title-padding: map.get(( - material: rem(24px) rem(24px) rem(12px) rem(24px), - fluent: rem(16px) rem(24px) rem(24px) rem(24px), - bootstrap: rem(16px), - indigo-design: rem(24px) rem(24px) 0 rem(24px), + 'material': rem(24px) rem(24px) rem(12px) rem(24px), + 'fluent': rem(16px) rem(24px) rem(24px) rem(24px), + 'bootstrap': rem(16px), + 'indigo': rem(24px) rem(24px) 0 rem(24px), ), $variant); $dialog-message-padding: map.get(( - material: rem(12px) rem(24px), - fluent: 0 rem(24px) rem(20px) rem(24px), - bootstrap: rem(16px), - indigo-design: rem(16px) rem(24px), + 'material': rem(12px) rem(24px), + 'fluent': 0 rem(24px) rem(20px) rem(24px), + 'bootstrap': rem(16px), + 'indigo': rem(16px) rem(24px), ), $variant); $dialog-actions-padding: map.get(( - material: rem(8px), - fluent: 0 rem(24px) rem(24px) rem(24px), - bootstrap: rem(16px), - indigo-design: rem(16px) rem(24px) rem(24px) rem(24px), + 'material': rem(8px), + 'fluent': 0 rem(24px) rem(24px) rem(24px), + 'bootstrap': rem(16px), + 'indigo': rem(16px) rem(24px) rem(24px) rem(24px), ), $variant); %igx-dialog-display { @@ -167,10 +167,10 @@ @media all and (-ms-high-contrast: none) { max-width: map.get(( - material: 62ch, - fluent: 48ch, - bootstrap: 60ch, - indigo-design: 48ch, + 'material': 62ch, + 'fluent': 48ch, + 'bootstrap': 60ch, + 'indigo': 48ch, ), $variant); } } @@ -189,7 +189,7 @@ margin-inline-start: rem(8px); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { .igx-button { --ig-size: 2; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss index cb2a271362c..86847b7ad55 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss @@ -100,7 +100,7 @@ transparent rem(20px) ); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { background: repeating-linear-gradient( to right, var-get($theme, 'color'), @@ -122,7 +122,7 @@ transparent rem(20px) ); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { background: repeating-linear-gradient( to bottom, var-get($theme, 'color'), diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index 01a156b3c3e..db16f413fa9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -25,7 +25,7 @@ /// @param {Color} $focused-item-border-color [null] - The drop-down item focused border color. /// @param {Color} $selected-item-background [null] - The drop-down selected item background color. /// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color. -/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color. +/// @param {Color} $selected-item-icon-color [null] - The drop-down selected item icon color. /// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color. /// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color. /// @param {Color} $selected-hover-item-icon-color [null] - The drop-down selected item hover icon color. @@ -220,7 +220,7 @@ min-width: rem(128px); border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: rem(3px); %igx-drop-down__item { @@ -284,7 +284,7 @@ justify-content: center; --component-size: var(--dropdown-size); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { $icon-size: sizable(rem(14px), rem(16px), rem(16px)); width: var(--ig-icon-size, $icon-size); @@ -307,7 +307,7 @@ color: var-get($theme, 'item-icon-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); } @@ -333,7 +333,7 @@ pointer-events: none; padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); } @@ -356,7 +356,7 @@ outline-offset: rem(-1px); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { outline: rem(2px) solid var-get($theme, 'focused-item-border-color'); outline-offset: rem(-2px); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index f6a03f87ba6..76159c5c35b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -164,7 +164,7 @@ outline: transparent; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: $panel-padding-header-indigo; } } @@ -176,7 +176,7 @@ flex: 1 0 0%; overflow: hidden; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %igx-expansion-panel__header-title { margin-block-end: rem(2px); } @@ -187,7 +187,7 @@ order: 1; margin-inline-start: rem(16px, 16px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-inline-start: rem(8px, 16px); } } @@ -196,7 +196,7 @@ order: -1; margin-inline-end: rem(16px, 16px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-inline-end: rem(8px, 16px); } } @@ -219,7 +219,7 @@ color: var-get($theme, 'header-icon-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { --component-size: 1; } @@ -232,7 +232,7 @@ overflow: hidden; padding: $panel-padding; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: $panel-padding-body-indigo; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 8eba6e75b0b..eb82f18f598 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -89,7 +89,7 @@ %grid-excel-icon--filtered { igx-icon { color: if( - $variant == 'indigo-design', + $variant == 'indigo', color($color: 'warn', $variant: 500), color($color: 'secondary') ); @@ -116,12 +116,12 @@ --item-hover-text-color: #{color($color: 'gray', $variant: 800)}; --item-hover-icon-color: #{color($color: 'gray', $variant: 800)}; --item-selected-text-color: #{if( - $variant == 'indigo-design', + $variant == 'indigo', contrast-color($color: 'surface'), color($color: 'secondary', $variant: 500) )}; --item-selected-icon-color: #{if( - $variant == 'indigo-design', + $variant == 'indigo', contrast-color($color: 'surface'), color($color: 'secondary', $variant: 500) )}; @@ -252,7 +252,7 @@ %grid-excel-actions--selected { igx-icon { color: if( - $variant == 'indigo-design', + $variant == 'indigo', color($color: 'primary', $variant: 200), color($color: 'secondary') ); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 6ecc643218e..b4e588c9116 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -606,10 +606,10 @@ $not-bootstrap-theme: $variant != 'bootstrap'; $cbx-size: map.get(( - material: rem(20px), - fluent: rem(20px), - bootstrap: rem(14px), - indigo-design: rem(20px), + 'material': rem(20px), + 'fluent': rem(20px), + 'bootstrap': rem(14px), + 'indigo': rem(20px), ), $variant); $cbx-bs-size: rem(14px); @@ -728,10 +728,10 @@ $grouping-padding-right: rem(12px); $grid-header-weight: map.get(( - material: 600, - fluent: 800, - bootstrap: 700, - indigo-design: 600, + 'material': 600, + 'fluent': 800, + 'bootstrap': 700, + 'indigo': 600, ), $variant); $editing-outline-width: rem(2px); @@ -1004,7 +1004,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { @if $theme-variant == 'light' { --igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)}; --igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)}; @@ -1538,7 +1538,7 @@ &::before { content: ''; position: absolute; - width: if($variant == 'indigo-design', rem(4px), rem(2px)); + width: if($variant == 'indigo', rem(4px), rem(2px)); height: 100%; z-index: 10000; background: var-get($theme, 'edited-row-indicator'); @@ -1973,7 +1973,7 @@ color: var-get($theme, 'header-selected-text-color'); background: var-get($theme, 'header-selected-background'); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { opacity: .7; &%grid__drag-ghost-image { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index bbe09818ae6..aa385019581 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -143,10 +143,10 @@ @include css-vars($contained-theme); $icon-sizes: map.get(( - material: rem(18px), - fluent: rem(18px), - bootstrap: rem(18px), - indigo-design: rem(16px), + 'material': rem(18px), + 'fluent': rem(18px), + 'bootstrap': rem(18px), + 'indigo': rem(16px), ), $variant); $icon-in-button-size: $icon-sizes; @@ -211,7 +211,7 @@ transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out; } } @@ -267,7 +267,7 @@ box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($flat-theme, 'border-color'); box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color'); } @@ -328,7 +328,7 @@ box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($contained-theme, 'border-color'); box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color'); } @@ -343,7 +343,7 @@ border: rem(1px) solid var-get($outlined-theme, 'border-color'); border-radius: var-get($outlined-theme, 'border-radius'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-width: rem(2px); &:hover, @@ -435,7 +435,7 @@ box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-color: var-get($outlined-theme, 'border-color'); box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index d82bca8a232..7724037017f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -273,6 +273,7 @@ input-suffix-background--filled: $input-suffix-background--filled, input-suffix-color--focused: $input-suffix-color--focused, input-suffix-background--focused: $input-suffix-background--focused, + theme: map.get($schema, '_meta', 'theme'), variant: map.get($schema, '_meta', 'theme'), size: $size, )); @@ -289,11 +290,11 @@ $variant: map.get($theme, 'variant'); $transition-timing: .25s $out-cubic; $material-theme: $variant == 'material'; - $indigo-theme: $variant == 'indigo-design'; + $indigo-theme: $variant == 'indigo'; $fluent-theme: $variant == 'fluent'; $bootstrap-theme: $variant == 'bootstrap'; $NOT-material-theme: $variant != 'material'; - $NOT-indigo-theme: $variant != 'indigo-design'; + $NOT-indigo-theme: $variant != 'indigo'; $NOT-fluent-theme: $variant != 'fluent'; $NOT-bootstrap-theme: $variant != 'bootstrap'; @@ -342,14 +343,14 @@ material: rem(5px), fluent: rem(5px), bootstrap: rem(4px), - indigo-design: rem(4px), + indigo: rem(4px), ), $variant); $hint-spacing-inline: map.get(( material: rem(16px), fluent: 0, bootstrap: 0, - indigo-design: 0, + indigo: 0, ), $variant); // Base Start @@ -392,12 +393,6 @@ } } - igx-input-group, - igx-date-range-start, - igx-date-range-end { - --theme: #{$variant}; - } - %form-group-display--box { %form-group-border { margin-bottom: 0; @@ -461,7 +456,7 @@ igx-icon[igxSuffix] { --component-size: var(--input-size); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { --size: var(--input-icon) !important; } } @@ -587,13 +582,13 @@ %form-group-bundle--focus { &::after { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { border-block-end-width: rem(2px); } border-block-end-color: var-get($theme, 'focused-bottom-line-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { caret-color: var-get($theme, 'focused-bottom-line-color'); } } @@ -829,7 +824,7 @@ %form-group-display--search { %igx-input-group__notch--search, %form-group-bundle-main--search { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { padding-inline: rem(4px); } } @@ -844,7 +839,7 @@ overflow: hidden; } - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { &::after { display: none; } @@ -1106,7 +1101,7 @@ line-height: normal; /* Fix placeholder position in Safari */ } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { height: calc(var-get($theme, 'size') - 1px); &::placeholder { @@ -1140,7 +1135,7 @@ transform: translateY(-50%); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { font-size: rem(12px); line-height: rem(16px); } @@ -1396,7 +1391,7 @@ } } - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { %form-group-helper--success { color: var-get($theme, 'success-secondary-color'); } @@ -1441,7 +1436,7 @@ // ============================================== // INDIGO START - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %form-group-display--search { igx-prefix, [igxPrefix], @@ -1488,7 +1483,7 @@ padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %form-group-input--search { padding-inline: pad-inline(rem(6px), rem(8px), rem(10px)); } @@ -1732,7 +1727,7 @@ transform-origin: top right; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { font-size: rem(11px); line-height: rem(15px); font-weight: 400; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss index b42c902aed3..6382947dad0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss @@ -56,7 +56,7 @@ transform-origin: top right; } - @if $variant == 'fluent' or $variant == 'indigo-design' { + @if $variant == 'fluent' or $variant == 'indigo' { font-size: rem(14px); font-weight: 600; height: auto; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 22619c5af98..b9887c8d4ed 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -245,45 +245,45 @@ $bootstrap-theme: $variant == 'bootstrap'; $theme-padding-block-l: map.get(( - material: rem(8px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(8px), + 'material': rem(8px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(8px), ), $variant); $theme-padding-inline-l: map.get(( - material: rem(16px), - fluent: rem(16px), - bootstrap: rem(16px), - indigo-design: rem(16px), + 'material': rem(16px), + 'fluent': rem(16px), + 'bootstrap': rem(16px), + 'indigo': rem(16px), ), $variant); $theme-padding-block-m: map.get(( - material: rem(4px), - fluent: rem(4px), - bootstrap: rem(4px), - indigo-design: rem(6px), + 'material': rem(4px), + 'fluent': rem(4px), + 'bootstrap': rem(4px), + 'indigo': rem(6px), ), $variant); $theme-padding-inline-m: map.get(( - material: rem(8px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(12px), + 'material': rem(8px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(12px), ), $variant); $theme-padding-block-s: map.get(( - material: rem(2px), - fluent: rem(2px), - bootstrap: rem(2px), - indigo-design: rem(4px), + 'material': rem(2px), + 'fluent': rem(2px), + 'bootstrap': rem(2px), + 'indigo': rem(4px), ), $variant); $theme-padding-inline-s: map.get(( - material: rem(4px), - fluent: rem(4px), - bootstrap: rem(4px), - indigo-design: rem(8px), + 'material': rem(4px), + 'fluent': rem(4px), + 'bootstrap': rem(4px), + 'indigo': rem(8px), ), $variant); $list-icon-margin-inline: ( @@ -329,7 +329,7 @@ outline-style: none; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(4px); } } @@ -354,7 +354,7 @@ background: var-get($theme, 'header-background'); user-select: none; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { min-height: sizable(rem(24), rem(28), rem(32)); } } @@ -430,7 +430,7 @@ flex-direction: column; flex: 1 0 0%; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(2px); } @@ -454,7 +454,7 @@ justify-content: center; color: var-get($theme, 'item-action-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: sizable(rem(4), rem(6), rem(8)); } @@ -463,9 +463,9 @@ } > * { - --component-size: #{if($variant == 'indigo-design', 2, var(--list-size))}; + --component-size: #{if($variant == 'indigo', 2, var(--list-size))}; - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable')); } } @@ -492,7 +492,7 @@ background: inherit; z-index: 2; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(8px); } } @@ -507,7 +507,7 @@ display: flex; align-items: center; justify-content: center; - align-self: if($variant == 'indigo-design', center, flex-start); + align-self: if($variant == 'indigo', center, flex-start); padding: 0; color: var-get($theme, 'item-thumbnail-color'); gap: rem(8px); @@ -515,9 +515,9 @@ > igx-icon, > igc-icon { - --component-size: #{if($variant == 'indigo-design', 2, var(--list-size))}; + --component-size: #{if($variant == 'indigo', 2, var(--list-size))}; - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable')); margin-inline-start: 0; margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable')); @@ -525,7 +525,7 @@ } > igx-avatar { - --ig-size: #{if($variant == 'indigo-design', 2, 1)}; + --ig-size: #{if($variant == 'indigo', 2, 1)}; } &:empty { @@ -536,12 +536,12 @@ %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines { --component-size: var(--list-size); - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable')); } } - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { %igx-list__item-lines + %igx-list__item-actions { margin-inline-start: rem(8px); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index 8d3f4cab707..5164227db06 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -140,7 +140,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-avatar, igc-icon-button, [igxIconButton] { @@ -165,7 +165,7 @@ %igx-navbar-left { &:not(:empty) { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { margin-inline-end: rem(16px) } } @@ -176,7 +176,7 @@ } %igx-navbar-right { - gap: if($variant == 'indigo-design', rem(8px), rem(16px)); + gap: if($variant == 'indigo', rem(8px), rem(16px)); } %igx-navbar-left, @@ -210,7 +210,7 @@ user-select: none; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon, igc-icon { --component-size: 2; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index 23ab0dca9d4..5b3073d13f4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -152,38 +152,38 @@ $drawer-icon-size: rem(24px); $aside-padding: map.get(( - material: rem(8px), - fluent: 0, - bootstrap: rem(16px), - indigo-design: rem(8px), + 'material': rem(8px), + 'fluent': 0, + 'bootstrap': rem(16px), + 'indigo': rem(8px), ), $variant); $item-padding: map.get(( - material: rem(12px) rem(8px), - fluent: rem(10px) rem(8px), - bootstrap: rem(8px) rem(16px), - indigo-design: rem(8px) rem(16px), + 'material': rem(12px) rem(8px), + 'fluent': rem(10px) rem(8px), + 'bootstrap': rem(8px) rem(16px), + 'indigo': rem(8px) rem(16px), ), $variant); $item-gap: map.get(( - material: rem(32px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(16px), + 'material': rem(32px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(16px), ), $variant); $item-min-height: map.get(( - material: rem(48px), - fluent: rem(44px), - bootstrap: rem(40px), - indigo-design: rem(32px), + 'material': rem(48px), + 'fluent': rem(44px), + 'bootstrap': rem(40px), + 'indigo': rem(32px), ), $variant); $item-mini-size: map.get(( - material: rem(56px), - fluent: rem(40px), - bootstrap: rem(88px), - indigo-design: rem(48px), + 'material': rem(56px), + 'fluent': rem(40px), + 'bootstrap': rem(88px), + 'indigo': rem(48px), ), $variant); %navdrawer-display { @@ -285,7 +285,7 @@ %item { justify-content: center; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { //max-width: rem(32px); // important is needed to override the typography margins margin: rem(14px) auto !important; @@ -344,7 +344,7 @@ gap: $item-gap; padding: $item-padding; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-block-end: rem(4px) !important; } @@ -363,7 +363,7 @@ justify-content: flex-start; igx-icon { - --component-size: #{if($variant == 'indigo-design', 2, 3)}; + --component-size: #{if($variant == 'indigo', 2, 3)}; color: var-get($theme, 'item-icon-color'); } @@ -385,10 +385,10 @@ @if $variant == 'material' { $reduce-size: rem(8px); - + // The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554 clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius')); - + &::after { content: ''; position: absolute; @@ -484,7 +484,7 @@ white-space: nowrap; color: var-get($theme, 'item-header-text-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { margin-block-end: rem(4px) !important; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss index 1cc1a8485ce..e0482cc41b8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss @@ -108,31 +108,31 @@ $variant: map.get($theme, '_meta', 'variant'); $bar-height: map.get(( - material: rem(4px), - fluent: rem(2px), - bootstrap: rem(16px), - indigo-design: rem(4px), + 'material': rem(4px), + 'fluent': rem(2px), + 'bootstrap': rem(16px), + 'indigo': rem(4px), ), $variant); $gradient-orientation: map.get(( - material: -45deg, - fluent: -45deg, - bootstrap: 45deg, - indigo-design: 45deg, + 'material': -45deg, + 'fluent': -45deg, + 'bootstrap': 45deg, + 'indigo': 45deg, ), $variant); $gradient-orientation-rtl: map.get(( - material: 45deg, - fluent: 45deg, - bootstrap: -45deg, - indigo-design: -45deg, + 'material': 45deg, + 'fluent': 45deg, + 'bootstrap': -45deg, + 'indigo': -45deg, ), $variant); $background-size: map.get(( - material: rem(40px) rem(40px), - fluent: rem(40px) rem(40px), - bootstrap: rem(16px) rem(16px), - indigo-design: rem(20px), + 'material': rem(40px) rem(40px), + 'fluent': rem(40px) rem(40px), + 'bootstrap': rem(16px) rem(16px), + 'indigo': rem(20px), ), $variant); $stripe-color: var-get($theme, 'stripes-color'); @@ -147,7 +147,7 @@ flex: 1 1 100%; flex-direction: column; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(4px); } @else if $variant == 'fluent' { gap: rem(2px); @@ -178,7 +178,7 @@ } %linear-indicator--striped { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { @include striped-gradient($gradient-orientation, $stripe-color); } @else { @include striped-gradient--indigo($gradient-orientation, $stripe-color); @@ -187,7 +187,7 @@ background-size: $background-size; [dir='rtl'] & { - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { @include striped-gradient($gradient-orientation-rtl, $stripe-color); } @else { @include striped-gradient--indigo($gradient-orientation-rtl, $stripe-color); @@ -465,7 +465,6 @@ @include css-vars($theme); $variant: map.get($theme, '_meta', 'variant'); - $stroke-width: rem(4px); $diameter: var-get($theme, 'diameter'); @@ -506,7 +505,7 @@ stroke-dashoffset: 289; stroke-dasharray: 289; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { stroke-width: calc($stroke-width + rem(1px)); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss index 29d4b3e55d2..71b0f9524f6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss @@ -220,7 +220,7 @@ --ig-size: 2; } - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { .igx-chip__item { border-block: none; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index 25a9d2e1f22..db97c560835 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -108,57 +108,57 @@ $not-bootstrap-theme: $variant != 'bootstrap'; $label-margin: map.get(( - material: rem(2px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(8px), + 'material': rem(2px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(8px), ), $variant); $size: map.get(( - material: rem(40px), - fluent: rem(20px), - bootstrap: rem(16px), - indigo-design: rem(16px), + 'material': rem(40px), + 'fluent': rem(20px), + 'bootstrap': rem(16px), + 'indigo': rem(16px), ), $variant); $scale: map.get(( - material: scale(.5), - fluent: scale(.5), - bootstrap: scale(.4375), - indigo-design: scale(.5), + 'material': scale(.5), + 'fluent': scale(.5), + 'bootstrap': scale(.4375), + 'indigo': scale(.5), ), $variant); $border-width: map.get(( - material: rem(2px), - fluent: rem(1px), - bootstrap: rem(1px), - indigo-design: rem(2px), + 'material': rem(2px), + 'fluent': rem(1px), + 'bootstrap': rem(1px), + 'indigo': rem(2px), ), $variant); $radio-hover-scale: map.get(( - material: null, - fluent: scale(.5), + 'material': null, + 'fluent': scale(.5), ), $variant); $ripple-display: map.get(( - material: block, - bootstrap: none, - fluent: none, - indigo-design: none, + 'material': block, + 'bootstrap': none, + 'fluent': none, + 'indigo': none, ), $variant); $horizontal-group-margin: map.get(( - material: rem(16px), - fluent: rem(12px), - bootstrap: rem(8px), - indigo-design: rem(16px), + 'material': rem(16px), + 'fluent': rem(12px), + 'bootstrap': rem(8px), + 'indigo': rem(16px), ), $variant); $vertical-group-margin: map.get(( - material: 0, - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(8px), + 'material': 0, + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(8px), ), $variant); $border-style: solid; @@ -191,7 +191,7 @@ %radio-label--invalid { color: var-get($theme, 'error-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'label-color'); &:hover { @@ -288,7 +288,7 @@ } } - @if $variant == 'indigo-design' or $variant == 'bootstrap' { + @if $variant == 'indigo' or $variant == 'bootstrap' { &::after { border: $border-width $border-style var-get($theme, 'hover-color'); transition: $transition; @@ -350,7 +350,7 @@ &::after { border: $border-width $border-style var-get($theme, 'error-color'); } - + &::before { background: var-get($theme, 'error-color'); border: $border-width $border-style transparent; @@ -361,7 +361,7 @@ background: var-get($theme, 'error-color'); border-color: var-get($theme, 'error-color'); } - + &::before { background: white; } @@ -409,7 +409,7 @@ } %radio-label--hover { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'label-color-hover'); } } @@ -467,7 +467,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %radio-composite { border-radius: $border-radius; box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); @@ -490,7 +490,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %radio-composite { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-filled'); } @@ -512,7 +512,7 @@ border: $border-width $border-style var-get($theme, 'error-color-hover'); } } - } @else if $variant == 'indigo-design' { + } @else if $variant == 'indigo' { %radio-composite { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 4ab53a8d750..0456cfc868f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -117,31 +117,31 @@ $ripple-radius: math.div($ripple-size, 2); $thumb-label-width: map.get(( - material: rem(40px), - fluent: rem(40px), - bootstrap: rem(40px), - indigo-design: rem(36px) + 'material': rem(40px), + 'fluent': rem(40px), + 'bootstrap': rem(40px), + 'indigo': rem(36px) ), $variant); $thumb-label-height: map.get(( - material: rem(30px), - fluent: rem(30px), - bootstrap: rem(30px), - indigo-design: rem(22px) + 'material': rem(30px), + 'fluent': rem(30px), + 'bootstrap': rem(30px), + 'indigo': rem(22px) ), $variant); $slider-track-height: map.get(( - material: 6px, - fluent: 4px, - bootstrap: 8px, - indigo-design: 2px + 'material': 6px, + 'fluent': 4px, + 'bootstrap': 8px, + 'indigo': 2px ), $variant); $slider-outline-width: map.get(( - material: 0, - fluent: 0, - bootstrap: 3px, - indigo-design: 3px + 'material': 0, + 'fluent': 0, + 'bootstrap': 3px, + 'indigo': 3px ), $variant); // Slider ticks @@ -152,10 +152,10 @@ // Slider Thumb $thumb-size: map.get(( - material: 20px, - fluent: 16px, - bootstrap: 16px, - indigo-design: 12px + 'material': 20px, + 'fluent': 16px, + 'bootstrap': 16px, + 'indigo': 12px ), $variant); $thumb-radius: math.div($thumb-size, 2); @@ -163,18 +163,18 @@ $thumb-indigo-hover: calc(16 / $thumb-indigo-idle); $thumb-border-width: map.get(( - material: 0, - fluent: 2px, - bootstrap: 1px, - indigo-design: 2px + 'material': 0, + 'fluent': 2px, + 'bootstrap': 1px, + 'indigo': 2px ), $variant); // Slider Steps $steps-top-position: map.get(( - material: 2px, - fluent: 1px, - bootstrap: 3px, - indigo-design: 0 + 'material': 2px, + 'fluent': 1px, + 'bootstrap': 3px, + 'indigo': 0 ), $variant); // Slider Label @@ -236,7 +236,7 @@ overflow: hidden; border-radius: border-radius(rem(32px)); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-radius: border-radius(rem(4px)); } } @@ -291,7 +291,7 @@ align-items: flex-end; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { bottom: rem(3px); &%igx-slider__ticks--top { @@ -339,7 +339,7 @@ %igx-slider__ticks-label { top: calc(#{$tick-height--tall} + #{$tick-height}); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { top: calc(#{$tick-height--tall} + (#{$tick-height} / 2)); } } @@ -361,7 +361,7 @@ %igx-slider__ticks-label { top: calc(#{$tick-height--tall} + #{$tick-height}); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { top: calc(#{$tick-height--tall} + (#{$tick-height} / 2)); } } @@ -408,7 +408,7 @@ } %igx-slider-track-steps--disabled { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: transparent; } } @@ -491,7 +491,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { transition: transform .2s $out-quad; &:hover, @@ -535,7 +535,7 @@ &:focus div::before { box-shadow: none; - @if $variant == 'fluent' or $variant == 'indigo-design' { + @if $variant == 'fluent' or $variant == 'indigo' { border-color: var-get($theme, 'thumb-disabled-border-color') !important; } } @@ -552,7 +552,7 @@ top: calc(((#{$thumb-label-height}) + rem(20px)) * -1); height: $thumb-label-height; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { top: calc(((#{$thumb-label-height}) + rem(18px)) * -1); } } @@ -570,7 +570,7 @@ min-width: $thumb-label-width; opacity: 0; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-radius: rem(3px); } @@ -582,7 +582,7 @@ border-inline-end: rem(10px) solid transparent; border-top: rem(10px) solid var-get($theme, 'label-background-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { top: rem(16px); border-top: rem(12px) solid var-get($theme, 'label-background-color'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 20e3075c8a4..1cb6123f76d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -110,7 +110,7 @@ box-shadow: none; } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: rem(4px) rem(16px); min-height: rem(36px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss index 36c9fc476d6..5daa65ebdd9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss @@ -82,9 +82,9 @@ //splitter-size + borders $splitter-size: unitless(map.get($theme, 'size')) + 2; - + //calculate the value for the slim(indigo) splitter - $slim-splitter: calc( 1 / $splitter-size); + $slim-splitter: calc( 1 / $splitter-size); %igx-splitter-base { &[aria-orientation='horizontal'] { @@ -101,7 +101,7 @@ height: $hitbox-size; background: if($debug-hitbox, $hitbox-debug-color, transparent); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { height: rem($splitter-size * 4px); } } @@ -110,7 +110,7 @@ width: $hitbox-size; height: 100%; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { width: rem($splitter-size * 4px); } } @@ -137,7 +137,7 @@ [aria-orientation='horizontal'] & { transform: scaleX(1); } - + [aria-orientation='vertical'] & { transform: scaleY(1); } @@ -183,7 +183,7 @@ } } } - } + } %igx-splitter-bar { position: relative; @@ -197,7 +197,7 @@ opacity: .68; transition: opacity .15s $out-quad !important; - @if $variant != 'indigo-design' { + @if $variant != 'indigo' { @extend %hide-controls; &.igx-splitter-bar--collapsible { @@ -205,7 +205,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { @extend %indigo-splitter-bar; } @@ -230,9 +230,9 @@ outline: transparent solid rem(1px); box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { box-shadow: none; - + %indigo-splitter-bar { background: var-get($theme, 'focus-color'); border-color: var-get($theme, 'focus-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 80d87f589bb..d07d12550cb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -333,19 +333,19 @@ $variant: map.get($theme, '_meta', 'variant'); $indicator-size: map.get(( - material: rem(24px), - fluent: rem(24px), - bootstrap: rem(40px), - indigo-design: rem(24px) + 'material': rem(24px), + 'fluent': rem(24px), + 'bootstrap': rem(40px), + 'indigo': rem(24px) ), $variant); $step-header-padding: rem(8px); $step-header-padding-simple: map.get(( - material: rem(8px), - fluent: rem(8px), - bootstrap: rem(16px), - indigo-design: rem(8px) + 'material': rem(8px), + 'fluent': rem(8px), + 'bootstrap': rem(16px), + 'indigo': rem(8px) ), $variant); $title-gap: rem(8px); @@ -355,17 +355,17 @@ $separator-position: 50%; $outline-width: map.get(( - material: clamp(1px, rem(1px), rem(1px)), - fluent: clamp(1px, rem(1px), rem(1px)), - bootstrap: clamp(1px, rem(1px), rem(1px)), - indigo-design: clamp(2px, rem(2px), rem(2px)) + 'material': clamp(1px, rem(1px), rem(1px)), + 'fluent': clamp(1px, rem(1px), rem(1px)), + 'bootstrap': clamp(1px, rem(1px), rem(1px)), + 'indigo': clamp(2px, rem(2px), rem(2px)) ), $variant); $separator-size: map.get(( - material: rem(1px), - fluent: rem(1px), - bootstrap: rem(8px), - indigo-design: rem(1px) + 'material': rem(1px), + 'fluent': rem(1px), + 'bootstrap': rem(8px), + 'indigo': rem(1px) ), $variant); $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2))); @@ -531,7 +531,7 @@ height: var(--igx-icon-size, #{rem(18px)}); font-size: var(--igx-icon-size, #{rem(18px)}); } - } @else if $variant == 'indigo-design' { + } @else if $variant == 'indigo' { > igx-icon { width: var(--igx-icon-size, #{rem(14px)}); height: var(--igx-icon-size, #{rem(14px)}); @@ -565,7 +565,7 @@ } %igx-stepper__step-title { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { /* stylelint-disable scss/at-extend-no-missing-placeholder */ @extend .ig-typography__subtitle-2; /* stylelint-enable scss/at-extend-no-missing-placeholder */ @@ -666,7 +666,7 @@ %igx-stepper__step-content-wrapper { margin-inline-start: $v-line-indent; position: relative; - min-height: if($variant == 'indigo-design', rem(24px), rem(32px)); + min-height: if($variant == 'indigo', rem(24px), rem(32px)); &::before { content: ''; @@ -685,7 +685,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { [aria-selected='true'] { %igx-stepper__step-content-wrapper { padding-block: rem(16px); @@ -835,7 +835,7 @@ &::before { content: ''; width: auto; - min-width: if($variant == 'indigo-design', rem(40px), rem(10px)); + min-width: if($variant == 'indigo', rem(40px), rem(10px)); height: $separator-size; flex: 1; position: relative; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 6bb29822942..8db5abc8c7b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -188,66 +188,66 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant'); $switch-width: map.get(( - material: 36px, - fluent: 40px, - bootstrap: 32px, - indigo-design: 32px + 'material': 36px, + 'fluent': 40px, + 'bootstrap': 32px, + 'indigo': 32px ), $variant); $switch-height: map.get(( - material: 14px, - fluent: 20px, - bootstrap: 16px, - indigo-design: 16px + 'material': 14px, + 'fluent': 20px, + 'bootstrap': 16px, + 'indigo': 16px ), $variant); $switch-thumb-width: map.get(( - material: 20px, - fluent: 12px, - bootstrap: 10px, - indigo-design: 8px + 'material': 20px, + 'fluent': 12px, + 'bootstrap': 10px, + 'indigo': 8px ), $variant); $switch-on-offset: map.get(( - material: 1px, - fluent: 5px, - bootstrap: 4px, - indigo-design: 7px + 'material': 1px, + 'fluent': 5px, + 'bootstrap': 4px, + 'indigo': 7px ), $variant); $switch-off-offset: map.get(( - material: -1px, - fluent: 3px, - bootstrap: math.div($switch-thumb-width, 4), - indigo-design: math.div($switch-thumb-width, 3), + 'material': -1px, + 'fluent': 3px, + 'bootstrap': math.div($switch-thumb-width, 4), + 'indigo': math.div($switch-thumb-width, 3), ), $variant); $ripple-display: map.get(( - material: block, - fluent: none, - bootstrap: none, - indigo-design: none + 'material': block, + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $thumb-resting-shadow: map.get(( - material: var-get($theme, 'resting-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($theme, 'resting-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $thumb-hover-shadow: map.get(( - material: var-get($theme, 'hover-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($theme, 'hover-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $thumb-disabled-shadow: map.get(( - material: var-get($theme, 'disabled-shadow'), - fluent: none, - bootstrap: none, - indigo-design: none + 'material': var-get($theme, 'disabled-shadow'), + 'fluent': none, + 'bootstrap': none, + 'indigo': none ), $variant); $switch-thumb-height: $switch-thumb-width; @@ -256,10 +256,10 @@ $ripple-radius: math.div($ripple-size, 2); $label-margin: map.get(( - material: rem(12px), - fluent: rem(8px), - bootstrap: rem(8px), - indigo-design: rem(8px) + 'material': rem(12px), + 'fluent': rem(8px), + 'bootstrap': rem(8px), + 'indigo': rem(8px) ), $variant); $input-transition: all .2s $ease-in-out-quad; @@ -293,7 +293,7 @@ user-select: none; transition: $input-transition; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border: rem(2px) solid var-get($theme, 'border-color'); } @@ -458,7 +458,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %switch-composite { border-radius: var-get($theme, 'border-radius-thumb'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); @@ -488,7 +488,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %switch-composite { box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-color-hover'); } @@ -506,7 +506,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %switch-composite { box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused'); } @@ -517,7 +517,7 @@ %switch-composite--x { background: var-get($theme, 'track-on-disabled-color'); } - + %switch-thumb--x { background: var-get($theme, 'thumb-on-disabled-color'); } @@ -528,7 +528,7 @@ } } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { %switch-composite--x { border-color: transparent; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 904cc7757e8..198a37f79b6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -204,7 +204,7 @@ $variant: map.get($theme, '_meta', 'variant'); $not-bootstrap-theme: $variant != 'bootstrap'; $bootstrap-theme: $variant == 'bootstrap'; - $indigo-theme: $variant == 'indigo-design'; + $indigo-theme: $variant == 'indigo'; $item-min-width: rem(90px); $item-max-width: rem(360px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index f230c9c28bf..512c5d4deeb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -160,17 +160,17 @@ $not-bootstrap-theme: $variant != 'bootstrap'; $picker-buttons-padding: map.get(( - material: rem(8px), - fluent: rem(8px), - bootstrap: rem(16px), - indigo-design: rem(8px) rem(16px), + 'material': rem(8px), + 'fluent': rem(8px), + 'bootstrap': rem(16px), + 'indigo': rem(8px) rem(16px), ), $variant); $picker-header-padding: map.get(( - material: rem(24px) rem(16px), - fluent: rem(16px), - bootstrap: rem(16px), - indigo-design: rem(16px) rem(24px) , + 'material': rem(24px) rem(16px), + 'fluent': rem(16px), + 'bootstrap': rem(16px), + 'indigo': rem(16px) rem(24px) , ), $variant); %time-picker-display { @@ -269,7 +269,7 @@ } %time-picker__column { - width: if($variant == 'indigo-design', rem(54px), rem(64px)); + width: if($variant == 'indigo', rem(54px), rem(64px)); padding: 0; cursor: pointer; display: flex; @@ -287,7 +287,7 @@ } %time-picker__item { - width: if($variant == 'indigo-design', rem(46px), rem(54px)); + width: if($variant == 'indigo', rem(46px), rem(54px)); padding: rem(5px) rem(10px); border-radius: var-get($theme, 'active-item-border-radius'); height: var-get($theme, 'time-item-size'); @@ -340,7 +340,7 @@ padding: $picker-header-padding; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { gap: rem(2px); } @@ -349,7 +349,7 @@ %time-picker-display:not(%time-picker-display--vertical) { %time-picker__header { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-block-end: rem(1px) solid var-get($theme, 'divider-color'); } } @@ -360,7 +360,7 @@ } %time-picker__header--vertical { - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { min-width: rem(136px); border-inline-end: rem(1px) solid var-get($theme, 'divider-color'); } @else { @@ -391,7 +391,7 @@ padding: $picker-buttons-padding; gap: rem(8px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { [igxbutton] { min-width: rem(88px); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index f9202bc2b55..5d913a2da79 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -85,7 +85,7 @@ 'material': rem(10px) rem(16px), 'fluent': rem(8px) rem(12px), 'bootstrap': rem(12px), - 'indigo-design': rem(10px) rem(16px) + 'indigo': rem(10px) rem(16px) ), $variant); %igx-toast-display { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index 38007ef077b..dd412038042 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -86,7 +86,7 @@ padding: 0 rem(8px); min-height: rem(24px); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { padding: rem(4px) rem(8px); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index 216e1b9d7a1..5fdc78879d2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -112,7 +112,7 @@ @include css-vars($theme); $variant: map.get($theme, '_meta', 'variant'); - $indigo-theme: $variant == 'indigo-design'; + $indigo-theme: $variant == 'indigo'; $node-indent-default: ( comfortable: rem(24px), @@ -133,24 +133,24 @@ $icon-space-indigo: rem(4px); $node-indent: map.get(( - material: $node-indent-default, - fluent: $node-indent-default, - bootstrap: $node-indent-default, - indigo-design: $node-indent-indigo + 'material': $node-indent-default, + 'fluent': $node-indent-default, + 'bootstrap': $node-indent-default, + 'indigo': $node-indent-indigo ), $variant); $icon-size: map.get(( - material: $icon-size-default, - fluent: $icon-size-default, - bootstrap: $icon-size-default, - indigo-design: $icon-size-indigo + 'material': $icon-size-default, + 'fluent': $icon-size-default, + 'bootstrap': $icon-size-default, + 'indigo': $icon-size-indigo ), $variant); $icon-space: map.get(( - material: $icon-space-default, - fluent: $icon-space-default, - bootstrap: $icon-space-default, - indigo-design: $icon-space-indigo + 'material': $icon-space-default, + 'fluent': $icon-space-default, + 'bootstrap': $icon-space-default, + 'indigo': $icon-space-indigo ), $variant); $circular-bar-size: ( @@ -186,7 +186,7 @@ --tree-size: var(--component-size); flex-direction: column; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-radius: rem(4px); } } @@ -201,8 +201,8 @@ %node-select { margin-inline-end: $icon-space; } - - @if $variant == 'indigo-design' { + + @if $variant == 'indigo' { %node-select { margin-inline-end: rem(8px); } @@ -226,7 +226,7 @@ background: var-get($theme, 'background'); color: var-get($theme, 'foreground'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { border-radius: rem(4px); margin-block-end: rem(4px); @@ -268,7 +268,7 @@ background: var-get($theme, 'hover-color'); } - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { color: var-get($theme, 'foreground-active'); } } @@ -292,7 +292,7 @@ &::after { background: var-get($theme, 'hover-selected-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { background: var-get($theme, 'hover-color'); } } @@ -303,7 +303,7 @@ background: var-get($theme, 'background-active'); color: var-get($theme, 'foreground-active'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &:hover { background: var-get($theme, 'hover-selected-color'); @@ -318,7 +318,7 @@ background: var-get($theme, 'background-active-selected'); color: var-get($theme, 'foreground-active-selected'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { &:hover { background: var-get($theme, 'hover-selected-color'); } @@ -332,7 +332,7 @@ %node-wrapper--focused { box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color'); } } @@ -341,7 +341,7 @@ background: var-get($theme, 'background-disabled') !important; color: var-get($theme, 'foreground-disabled') !important; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { igx-icon { color: var-get($theme, 'foreground-disabled') !important; } @@ -364,7 +364,7 @@ --component-size: var(--tree-size); --spacer: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})}; - @if $variant == 'indigo-design' { + @if $variant == 'indigo' { --spacer: #{sizable(24px)}; } width: var(--spacer); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index a3cdc63e333..0ba134976fe 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -116,7 +116,7 @@ @if $theme { #{$scope} { - --ig-theme: #{if($theme == 'indigo-design', 'indigo', #{$theme})}; + --ig-theme: #{$theme}; --ig-theme-variant: #{$variant}; } } diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 4a634082fee..57c6e23a479 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -1,5 +1,6 @@ import { DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; import { + AfterViewChecked, ChangeDetectorRef, Component, ContentChild, @@ -7,6 +8,7 @@ import { ElementRef, HostBinding, HostListener, Inject, Input, + OnDestroy, Optional, QueryList, booleanAttribute } from '@angular/core'; import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources'; @@ -26,6 +28,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxTheme, ThemeService } from '../services/theme/theme.service'; import { IgxIconService } from '../icon/icon.service'; +import { Subject, Subscription } from 'rxjs'; @Component({ selector: 'igx-input-group', @@ -34,7 +37,7 @@ import { IgxIconService } from '../icon/icon.service'; standalone: true, imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault] }) -export class IgxInputGroupComponent implements IgxInputGroupBase { +export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewChecked, OnDestroy { /** * Sets the resource strings. * By default it uses EN resources. @@ -122,6 +125,8 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { private _type: IgxInputGroupType = null; private _filled = false; private _theme: IgxTheme; + private _theme$ = new Subject(); + private _subscription: Subscription; private _resourceStrings = getCurrentResourceStrings(InputResourceStringsEN); /** @hidden */ @@ -216,7 +221,11 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { private themeService: ThemeService, private iconService?: IgxIconService ) { - this.theme = this.themeService.theme; + this._subscription = this._theme$.asObservable().subscribe(value => { + this._theme = value as IgxTheme; + this.cdr.detectChanges(); + }); + this.iconService.addIconRef('clear', 'default', { name: 'clear', family: 'material', @@ -435,4 +444,23 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { public set filled(val) { this._filled = val; } + + /** @hidden @internal */ + public ngAfterViewChecked() { + if (!this._theme) { + const theme = this.theme ?? this.themeService.getComponentTheme(this.element); + + if (theme) { + Promise.resolve().then(() => { + this._theme$.next(theme); + this.cdr.markForCheck(); + }); + } + } + } + + /** @hidden @internal */ + public ngOnDestroy() { + this._subscription.unsubscribe(); + } } diff --git a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts index 2e4157dd133..e7836e47aca 100644 --- a/projects/igniteui-angular/src/lib/services/theme/theme.service.ts +++ b/projects/igniteui-angular/src/lib/services/theme/theme.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable } from "@angular/core"; +import { ElementRef, Inject, Injectable } from "@angular/core"; import { mkenum } from "../../core/utils"; import { BehaviorSubject } from "rxjs"; import { DOCUMENT } from "@angular/common"; @@ -23,7 +23,7 @@ export class ThemeService { * Sets the theme of the component. * Allowed values of type IgxTheme. */ - public theme: IgxTheme; + public globalTheme: IgxTheme; private theme$ = new BehaviorSubject("material"); constructor( @@ -31,7 +31,7 @@ export class ThemeService { private document: any, ) { this.theme$.asObservable().subscribe((value) => { - this.theme = value as IgxTheme; + this.globalTheme = value as IgxTheme; }); this.init(); @@ -47,4 +47,11 @@ export class ThemeService { this.theme$.next(theme as IgxTheme); } } + + public getComponentTheme(el: ElementRef) { + return globalThis.window + ?.getComputedStyle(el.nativeElement) + .getPropertyValue('--theme') + .trim() as IgxTheme; + } } From cb089fb60a07a9994a3d2accf3a6542135e6e92a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 14 Aug 2024 14:57:20 +0300 Subject: [PATCH 17/18] refactor(icon-service): update icon reference names and registration (#14598) * refactor(icon-service): update icon reference names and registration --------- Co-authored-by: Stamen Stoychev Co-authored-by: Damyan Petev --- .../src/lib/icon.broadcast.service.ts | 3 +- .../action-strip/action-strip.component.ts | 10 +- .../grid-editing-actions.component.html | 4 +- .../grid-editing-actions.component.ts | 2 - .../grid-pinning-actions.component.html | 8 +- .../grid-pinning-actions.component.spec.ts | 4 +- .../grid-pinning-actions.component.ts | 19 +- .../src/lib/calendar/calendar-base.ts | 26 - .../calendar/days-view/days-view.component.ts | 4 +- .../src/lib/carousel/carousel.component.ts | 74 +-- .../src/lib/chips/chip.component.ts | 27 +- .../src/lib/combo/combo.common.ts | 76 --- .../data-operations/filtering-condition.ts | 112 ++-- .../date-picker/date-picker.component.html | 2 +- .../lib/date-picker/date-picker.component.ts | 14 +- .../date-range-picker.component.html | 2 +- .../date-range-picker.component.ts | 9 +- .../expansion-panel-header.component.ts | 24 - .../src/lib/grids/cell.component.html | 2 +- .../base/grid-filtering-row.component.html | 18 +- .../base/grid-filtering-row.component.ts | 69 +- .../excel-style-clear-filters.component.html | 2 +- .../excel-style-filtering.component.ts | 69 -- .../excel-style-header.component.html | 4 +- .../excel-style-hiding.component.html | 2 +- .../excel-style-pinning.component.html | 2 +- .../excel-style-search.component.html | 2 +- .../excel-style-sorting.component.html | 4 +- .../grids/filtering/grid-filtering.service.ts | 3 - .../src/lib/grids/grid-base.directive.ts | 188 ------ .../grids/grid/expandable-cell.component.html | 6 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 4 +- .../lib/grids/grid/groupby-row.component.html | 4 +- .../grouping/group-by-area.component.html | 2 +- .../headers/grid-header-group.component.html | 2 +- .../grids/headers/grid-header.component.html | 2 +- .../hierarchical-grid-base.directive.ts | 3 - .../hierarchical-row.component.html | 4 +- .../pivot-data-selector.component.html | 8 +- .../pivot-grid/pivot-grid.component.html | 2 +- .../pivot-header-row.component.html | 6 +- .../pivot-grid/pivot-header-row.component.ts | 83 --- ...pivot-row-dimension-content.component.html | 2 +- ...-row-dimension-header-group.component.html | 2 +- .../src/lib/grids/state.directive.spec.ts | 12 +- .../lib/grids/state.hierarchicalgrid.spec.ts | 8 +- .../src/lib/grids/state.treegrid.spec.ts | 4 +- .../grid-toolbar-exporter.component.html | 2 +- .../grid-toolbar-hiding.component.html | 2 +- .../grid-toolbar-pinning.component.html | 2 +- .../grids/toolbar/grid-toolbar.component.ts | 2 - .../grids/tree-grid/tree-cell.component.html | 6 +- .../tree-grid/tree-grid-add-row-ui.spec.ts | 12 +- .../grids/tree-grid/tree-grid.component.ts | 3 - .../src/lib/icon/icon.component.spec.ts | 4 +- .../src/lib/icon/icon.component.ts | 6 +- .../src/lib/icon/icon.references.ts | 595 ++++++++++++++++++ .../src/lib/icon/icon.service.spec.ts | 3 +- .../src/lib/icon/icon.service.ts | 38 +- .../src/lib/icon/public_api.ts | 2 + .../src/lib/icon/reference_table.md | 323 ---------- .../igniteui-angular/src/lib/icon/types.ts | 37 ++ .../input-group/input-group.component.html | 2 +- .../lib/input-group/input-group.component.ts | 9 +- .../src/lib/paginator/pager.component.html | 4 +- .../src/lib/paginator/paginator.component.ts | 28 +- .../query-builder.component.html | 2 +- .../query-builder/query-builder.component.ts | 29 - .../src/lib/select/select.component.ts | 51 -- .../src/lib/tabs/tabs/tabs.component.ts | 15 +- .../src/lib/test-utils/grid-functions.spec.ts | 12 +- .../time-picker/time-picker.component.html | 2 +- .../lib/time-picker/time-picker.component.ts | 52 -- .../tree/tree-node/tree-node.component.html | 2 +- .../src/lib/tree/tree.component.ts | 14 - 75 files changed, 818 insertions(+), 1380 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/icon/icon.references.ts delete mode 100644 projects/igniteui-angular/src/lib/icon/reference_table.md create mode 100644 projects/igniteui-angular/src/lib/icon/types.ts diff --git a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts index 34a32a8c4d6..73ce8b6d898 100644 --- a/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts +++ b/projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts @@ -1,6 +1,7 @@ import { Injectable, Optional } from '@angular/core'; import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils'; -import { IconMeta, IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service'; +import { IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service'; +import { IconMeta } from '../../../igniteui-angular/src/lib/icon/public_api'; export interface SvgIcon { diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index 41bb6f088a3..782e754024c 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -29,7 +29,6 @@ import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxIconButtonDirective } from '../directives/button/icon-button.directive'; import { IgxActionStripToken } from './token'; -import { IgxIconService } from '../icon/icon.service'; @Directive({ selector: '[igxActionStripMenuItem]', @@ -202,13 +201,7 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten protected el: ElementRef, /** @hidden @internal **/ public cdr: ChangeDetectorRef, - protected _iconService: IgxIconService, - ) { - this._iconService.addIconRef('more_vert', 'default', { - name: 'more_vert', - family: 'material', - }); - } + ) { } /** * Menu Items list. @@ -336,4 +329,3 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten } } } - diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html index a814a7bcd73..0448b22086f 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html @@ -1,8 +1,8 @@ - - + + diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts index 38c70ba79f1..21b12a98833 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts @@ -178,7 +178,5 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective private registerIcons() { this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true,); this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true); - this.iconService.addIconRef(addRow.name, 'default', { name: addRow.name, family: 'imx-icons' }); - this.iconService.addIconRef(addChild.name, 'default', { name: addChild.name, family: 'imx-icons' }); } } diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html index ac727750236..139553d1444 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts index 4b6405520a2..b46c7479163 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts @@ -39,7 +39,7 @@ describe('igxGridPinningActions #grid ', () => { fixture.detectChanges(); let pinningButtons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`)); expect(pinningButtons.length).toBe(1); - expect(pinningButtons[0].componentInstance.iconName).toBe('pin-left'); + expect(pinningButtons[0].componentInstance.iconName).toBe('pin'); pinningButtons[0].triggerEventHandler('click', new Event('click')); actionStrip.hide(); fixture.detectChanges(); @@ -49,7 +49,7 @@ describe('igxGridPinningActions #grid ', () => { fixture.detectChanges(); pinningButtons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`)); expect(pinningButtons.length).toBe(2); - expect(pinningButtons[1].componentInstance.iconName).toBe('unpin-left'); + expect(pinningButtons[1].componentInstance.iconName).toBe('unpin'); pinningButtons[1].triggerEventHandler('click', new Event('click')); actionStrip.hide(); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts index 04495f53824..8fb6ec1013a 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts @@ -140,24 +140,7 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true); this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true); this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons', true); - this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons', true); - - this.iconService.addIconRef(pinLeft.name, "default", { - name: pinLeft.name, - family: "imx-icons", - }); - this.iconService.addIconRef(unpinLeft.name, "default", { - name: unpinLeft.name, - family: "imx-icons", - }); - this.iconService.addIconRef(jumpDown.name, "default", { - name: jumpDown.name, - family: "imx-icons", - }); - this.iconService.addIconRef(jumpUp.name, "default", { - name: jumpDown.name, - family: "imx-icons", - }); + this.iconService.addSvgIconFromText(jumpUp.name, jumpUp.value, 'imx-icons', true); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts index bb01db92f97..ab494d21410 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts @@ -11,7 +11,6 @@ import { getCurrentResourceStrings } from '../core/i18n/resources'; import { KeyboardNavigationService } from './calendar.services'; import { getYearRange, isDateInRanges } from './common/helpers'; import { CalendarDay } from './common/model'; -import { IgxIconService } from '../icon/icon.service'; /** @hidden @internal */ @Directive({ @@ -240,25 +239,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor { year: false }; - private _icons = [ - { - family: 'default', - name: 'arrow_next', - ref: { - name: 'keyboard_arrow_right', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_prev', - ref: { - name: 'keyboard_arrow_left', - family: 'material', - } - } - ]; - /** * An accessor that sets the resource strings. * By default it uses EN resources. @@ -675,15 +655,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor { protected _localeId: string, protected keyboardNavigation?: KeyboardNavigationService, protected cdr?: ChangeDetectorRef, - protected iconService?: IgxIconService, ) { this.locale = _localeId; this.viewDate = this.viewDate ? this.viewDate : new Date(); - - for (const icon of this._icons) { - this.iconService?.addIconRef(icon.name, icon.family, icon.ref); - } - this.initFormatters(); } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index e5e456e6130..b5c0731d5bd 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -31,7 +31,6 @@ import { isDateInRanges, } from "../common/helpers"; import { CalendarDay } from '../common/model'; -import { IgxIconService } from '../../icon/icon.service'; let NEXT_ID = 0; @@ -207,9 +206,8 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective { @Inject(LOCALE_ID) _localeId: string, protected el: ElementRef, public override cdr: ChangeDetectorRef, - protected override iconService: IgxIconService ) { - super(platform, _localeId, null, cdr, iconService); + super(platform, _localeId, null, cdr); } /** diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 9fb567e349e..a73fc8c3f24 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -1,7 +1,6 @@ import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, - AfterViewInit, ChangeDetectorRef, Component, ContentChild, @@ -37,9 +36,6 @@ import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { HammerGesturesManager } from '../core/touch'; import { CarouselIndicatorsOrientation, HorizontalAnimationType } from './enums'; -import { ThemeService } from '../services/theme/theme.service'; -import type { IgxTheme } from '../services/theme/theme.service'; -import { IgxIconService } from '../icon/icon.service'; let NEXT_ID = 0; @@ -89,7 +85,7 @@ export class CarouselHammerConfig extends HammerGestureConfig { imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet] }) -export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterViewInit, AfterContentInit { +export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit { /** * Sets the `id` of the carousel. @@ -145,11 +141,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On return this.gesturesSupport ? 'pan-y' : 'auto'; } - /** - * @hidden @internal - */ - protected theme: IgxTheme; - /** * Sets whether the carousel should `loop` back to the first slide after reaching the last slide. * Default value is `true`. @@ -398,36 +389,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On private destroy$ = new Subject(); private differ: IterableDiffer | null = null; private incomingSlide: IgxSlideComponent; - private _icons = [ - { - name: 'carousel_prev', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'arrow_back', - family: 'material' - }, - 'indigo': { - name: 'keyboard_arrow_left', - family: 'material' - } - })) - }, - { - name: 'carousel_next', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'arrow_forward', - family: 'material' - }, - 'indigo': { - name: 'keyboard_arrow_right', - family: 'material' - } - })) - } - ] /** * An accessor that sets the resource strings. @@ -583,8 +544,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On private iterableDiffers: IterableDiffers, @Inject(IgxAngularAnimationService) animationService: AnimationService, private platformUtil: PlatformUtil, - private themeService: ThemeService, - private iconService: IgxIconService ) { super(animationService, cdr); this.differ = this.iterableDiffers.find([]).create(null); @@ -719,37 +678,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On } } - /** @hidden */ - public ngAfterViewInit() { - this.cdr.detach(); - - if (!this.theme) { - this.theme = this.themeService.getComponentTheme(this.element); - } - - for (const icon of this._icons) { - switch(this.theme) { - case 'indigo': - this.iconService.addIconRef( - icon.name, - icon.family, - icon.ref.get('indigo'), - ); - break; - case 'material': - default: - this.iconService.addIconRef( - icon.name, - icon.family, - icon.ref.get('material'), - ); - } - } - - this.cdr.detectChanges(); - this.cdr.reattach(); - } - /** @hidden */ public ngAfterContentInit() { this.slides.changes diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index b2a2de23b91..1a71596bedd 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -23,7 +23,6 @@ import { IgxIconComponent } from '../icon/icon.component'; import { NgClass, NgTemplateOutlet, NgIf, DOCUMENT } from '@angular/common'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { Size } from '../grids/common/enums'; -import { IgxIconService } from '../icon/icon.service'; export const IgxChipTypeVariant = /*@__PURE__*/mkenum({ PRIMARY: 'primary', @@ -605,36 +604,12 @@ export class IgxChipComponent implements OnInit, OnDestroy { protected _movedWhileRemoving = false; protected computedStyles; private _resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN); - private _icons = [ - { - name: "selected", - family: "default", - ref: { - name: "done", - family: "material", - } - }, - { - name: "remove", - family: "default", - ref: { - name: "cancel", - family: "material", - } - } - ]; constructor( public cdr: ChangeDetectorRef, private ref: ElementRef, private renderer: Renderer2, - @Inject(DOCUMENT) public document: any, - protected iconService: IgxIconService) { - - for (const icon of this._icons) { - iconService.addIconRef(icon.name, icon.family, icon.ref); - } - } + @Inject(DOCUMENT) public document: any) { } /** * @hidden diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 210910586b6..0e89fa31964 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -972,64 +972,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh private _groupSortingDirection: SortingDirection = SortingDirection.Asc; private _filteringOptions: IComboFilteringOptions; private _defaultFilteringOptions: IComboFilteringOptions = { caseSensitive: false, filterable: true }; - private _icons = [ - { - name: 'input_expand', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'expand_more', - family: 'material', - }, - 'all': { - name: 'arrow_drop_down', - family: 'material' - } - })) - }, - { - name: 'input_collapse', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'expand_less', - family: 'material', - }, - 'all': { - name: 'arrow_drop_up', - family: 'material' - } - })) - }, - { - name: 'input_clear', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'cancel', - family: 'material', - }, - 'all': { - name: 'clear', - family: 'material' - } - })) - }, - { - name: 'case_sensitive', - family: 'default', - ref: new Map(Object.entries({ - 'material': { - name: 'case-sensitive', - family: 'imx-icons' - }, - 'all': { - name: 'case-sensitive', - family: 'imx-icons' - } - })) - } - ]; public abstract dropdown: IgxComboDropDownComponent; public abstract selectionChanging: EventEmitter; @@ -1076,24 +1018,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh this.selectionService.set(this.id, new Set()); this._iconService?.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons'); this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement); - - for (const icon of this._icons) { - switch (this.inputGroup?.theme) { - case "material": - this._iconService?.addIconRef( - icon.name, - icon.family, - icon.ref.get("material"), - ); - break; - default: - this._iconService?.addIconRef( - icon.name, - icon.family, - icon.ref.get("all"), - ); - } - } } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts index b2db8b4500f..b9b9426259d 100644 --- a/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts +++ b/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts @@ -12,17 +12,17 @@ export class IgxFilteringOperand { this.operations = [{ name: 'null', isUnary: true, - iconName: 'is-null', + iconName: 'filter_null', logic: (target: any) => target === null }, { name: 'notNull', isUnary: true, - iconName: 'is-not-null', + iconName: 'filter_not_null', logic: (target: any) => target !== null }, { name: 'in', isUnary: false, - iconName: 'is-in', + iconName: 'filter_in', hidden: true, logic: (target: any, searchVal: Set) => this.findValueInSet(target, searchVal) }]; @@ -77,27 +77,27 @@ export class IgxBooleanFilteringOperand extends IgxFilteringOperand { this.operations = [{ name: 'all', isUnary: true, - iconName: 'select-all', + iconName: 'filter_all', logic: (_target: boolean) => true }, { name: 'true', isUnary: true, - iconName: 'is-true', + iconName: 'filter_true', logic: (target: boolean) => !!(target && target !== null && target !== undefined) }, { name: 'false', isUnary: true, - iconName: 'is-false', + iconName: 'filter_false', logic: (target: boolean) => !target && target !== null && target !== undefined }, { name: 'empty', isUnary: true, - iconName: 'is-empty', + iconName: 'filter_empty', logic: (target: boolean) => target === null || target === undefined }, { name: 'notEmpty', isUnary: true, - iconName: 'not-empty', + iconName: 'filter_not_empty', logic: (target: boolean) => target !== null && target !== undefined }].concat(this.operations); } @@ -114,12 +114,12 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand { this.operations = [{ name: 'empty', isUnary: true, - iconName: 'is-empty', + iconName: 'filter_empty', logic: (target: Date) => target === null || target === undefined }, { name: 'notEmpty', isUnary: true, - iconName: 'not-empty', + iconName: 'filter_not_empty', logic: (target: Date) => target !== null && target !== undefined }].concat(this.operations); } @@ -192,7 +192,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { this.operations = [{ name: 'equals', isUnary: false, - iconName: 'equals', + iconName: 'filter_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -209,7 +209,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'doesNotEqual', isUnary: false, - iconName: 'not-equal', + iconName: 'filter_not_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return true; @@ -226,7 +226,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'before', isUnary: false, - iconName: 'is-before', + iconName: 'filter_before', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -239,7 +239,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'after', isUnary: false, - iconName: 'is-after', + iconName: 'filter_after', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -252,7 +252,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'today', isUnary: true, - iconName: 'today', + iconName: 'filter_today', logic: (target: Date) => { if (!target) { return false; @@ -269,7 +269,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'yesterday', isUnary: true, - iconName: 'yesterday', + iconName: 'filter_yesterday', logic: (target: Date) => { if (!target) { return false; @@ -287,7 +287,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'thisMonth', isUnary: true, - iconName: 'this-month', + iconName: 'filter_this_month', logic: (target: Date) => { if (!target) { return false; @@ -303,7 +303,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'lastMonth', isUnary: true, - iconName: 'last-month', + iconName: 'filter_last_month', logic: (target: Date) => { if (!target) { return false; @@ -325,7 +325,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'nextMonth', isUnary: true, - iconName: 'next-month', + iconName: 'filter_next_month', logic: (target: Date) => { if (!target) { return false; @@ -347,7 +347,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'thisYear', isUnary: true, - iconName: 'this-year', + iconName: 'filter_this_year', logic: (target: Date) => { if (!target) { return false; @@ -362,7 +362,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'lastYear', isUnary: true, - iconName: 'last-year', + iconName: 'filter_last_year', logic: (target: Date) => { if (!target) { return false; @@ -377,7 +377,7 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'nextYear', isUnary: true, - iconName: 'next-year', + iconName: 'filter_next_year', logic: (target: Date) => { if (!target) { return false; @@ -400,7 +400,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand this.operations = [{ name: 'equals', isUnary: false, - iconName: 'equals', + iconName: 'filter_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -418,7 +418,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'doesNotEqual', isUnary: false, - iconName: 'not-equal', + iconName: 'filter_not_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return true; @@ -436,7 +436,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'before', isUnary: false, - iconName: 'is-before', + iconName: 'filter_before', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -449,7 +449,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'after', isUnary: false, - iconName: 'is-after', + iconName: 'filter_after', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -462,7 +462,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'today', isUnary: true, - iconName: 'today', + iconName: 'filter_today', logic: (target: Date) => { if (!target) { return false; @@ -479,7 +479,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'yesterday', isUnary: true, - iconName: 'yesterday', + iconName: 'filter_yesterday', logic: (target: Date) => { if (!target) { return false; @@ -497,7 +497,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'thisMonth', isUnary: true, - iconName: 'this-month', + iconName: 'filter_this_month', logic: (target: Date) => { if (!target) { return false; @@ -513,7 +513,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'lastMonth', isUnary: true, - iconName: 'last-month', + iconName: 'filter_last_month', logic: (target: Date) => { if (!target) { return false; @@ -535,7 +535,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'nextMonth', isUnary: true, - iconName: 'next-month', + iconName: 'filter_next_month', logic: (target: Date) => { if (!target) { return false; @@ -557,7 +557,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'thisYear', isUnary: true, - iconName: 'this-year', + iconName: 'filter_this_year', logic: (target: Date) => { if (!target) { return false; @@ -572,7 +572,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'lastYear', isUnary: true, - iconName: 'last-year', + iconName: 'filter_last_year', logic: (target: Date) => { if (!target) { return false; @@ -587,7 +587,7 @@ export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand }, { name: 'nextYear', isUnary: true, - iconName: 'next-year', + iconName: 'filter_next_year', logic: (target: Date) => { if (!target) { return false; @@ -610,7 +610,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { this.operations = [{ name: 'at', isUnary: false, - iconName: 'equals', + iconName: 'filter_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -625,7 +625,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'not_at', isUnary: false, - iconName: 'not-equal', + iconName: 'filter_not_equal', logic: (target: Date, searchVal: Date) => { if (!target) { return true; @@ -640,7 +640,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'before', isUnary: false, - iconName: 'is-before', + iconName: 'filter_before', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -656,7 +656,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'after', isUnary: false, - iconName: 'is-after', + iconName: 'filter_after', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -672,7 +672,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'at_before', isUnary: false, - iconName: 'is-before', + iconName: 'filter_before', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -688,7 +688,7 @@ export class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand { }, { name: 'at_after', isUnary: false, - iconName: 'is-after', + iconName: 'filter_after', logic: (target: Date, searchVal: Date) => { if (!target) { return false; @@ -724,42 +724,42 @@ export class IgxNumberFilteringOperand extends IgxFilteringOperand { this.operations = [{ name: 'equals', isUnary: false, - iconName: 'equals', + iconName: 'filter_equal', logic: (target: number, searchVal: number) => target === searchVal }, { name: 'doesNotEqual', isUnary: false, - iconName: 'not-equal', + iconName: 'filter_not_equal', logic: (target: number, searchVal: number) => target !== searchVal }, { name: 'greaterThan', isUnary: false, - iconName: 'greater-than', + iconName: 'filter_greater_than', logic: (target: number, searchVal: number) => target > searchVal }, { name: 'lessThan', isUnary: false, - iconName: 'less-than', + iconName: 'filter_less_than', logic: (target: number, searchVal: number) => target < searchVal }, { name: 'greaterThanOrEqualTo', isUnary: false, - iconName: 'greater-than-or-equal', + iconName: 'filter_greater_than_or_equal', logic: (target: number, searchVal: number) => target >= searchVal }, { name: 'lessThanOrEqualTo', isUnary: false, - iconName: 'less-than-or-equal', + iconName: 'filter_less_than_or_equal', logic: (target: number, searchVal: number) => target <= searchVal }, { name: 'empty', isUnary: true, - iconName: 'is-empty', + iconName: 'filter_empty', logic: (target: number) => target === null || target === undefined || isNaN(target) }, { name: 'notEmpty', isUnary: true, - iconName: 'not-empty', + iconName: 'filter_not_empty', logic: (target: number) => target !== null && target !== undefined && !isNaN(target) }].concat(this.operations); } @@ -777,7 +777,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { this.operations = [{ name: 'contains', isUnary: false, - iconName: 'contains', + iconName: 'filter_contains', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -786,7 +786,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'doesNotContain', isUnary: false, - iconName: 'does-not-contain', + iconName: 'filter_does_not_contain', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -795,7 +795,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'startsWith', isUnary: false, - iconName: 'starts-with', + iconName: 'filter_starts_with', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -804,7 +804,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'endsWith', isUnary: false, - iconName: 'ends-with', + iconName: 'filter_ends_with', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -813,7 +813,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'equals', isUnary: false, - iconName: 'equals', + iconName: 'filter_equal', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -822,7 +822,7 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'doesNotEqual', isUnary: false, - iconName: 'not-equal', + iconName: 'filter_not_equal', logic: (target: string, searchVal: string, ignoreCase?: boolean) => { const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); @@ -831,12 +831,12 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand { }, { name: 'empty', isUnary: true, - iconName: 'is-empty', + iconName: 'filter_empty', logic: (target: string) => target === null || target === undefined || target.length === 0 }, { name: 'notEmpty', isUnary: true, - iconName: 'not-empty', + iconName: 'filter_not_empty', logic: (target: string) => target !== null && target !== undefined && target.length > 0 }].concat(this.operations); } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html index 05a475de4bb..ebcfec861f4 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html @@ -20,7 +20,7 @@ [attr.aria-labelledby]="label?.id" aria-haspopup="dialog" aria-autocomplete="none" role="combobox"> - + diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 4d715959329..5a634fd6eff 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -69,7 +69,6 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; -import { IgxIconService } from '../icon/icon.service'; let NEXT_ID = 0; @@ -514,20 +513,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr private _renderer: Renderer2, private platform: PlatformUtil, private cdr: ChangeDetectorRef, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType, - @Optional() @Inject(IgxIconService) iconService?: IgxIconService) { + @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _inputGroupType); this.locale = this.locale || this._localeId; - - iconService?.addIconRef('clear', 'default', { - name: 'clear', - family: 'material', - }); - - iconService?.addIconRef('today', 'default', { - name: 'calendar_today', - family: 'material', - }); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html index 3ec404268c7..0dd627fb539 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html @@ -16,7 +16,7 @@ - + {{ dateSeparator }} diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index 444972b96a4..b161c3a5a8f 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -35,7 +35,6 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; -import { IgxIconService } from '../icon/icon.service'; const SingleInputDatesConcatenationString = ' - '; @@ -441,15 +440,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective private _injector: Injector, private _cdr: ChangeDetectorRef, @Inject(IgxOverlayService) private _overlayService: IgxOverlayService, - @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType, - @Optional() @Inject(IgxIconService) protected iconService?: IgxIconService) { + @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _inputGroupType); this.locale = this.locale || this._localeId; - - iconService?.addIconRef("date_range", "default", { - name: "date_range", - family: "material" - }); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts index c6ea7a4c900..61cbb663f5a 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts @@ -18,7 +18,6 @@ import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCa import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; import { NgIf } from '@angular/common'; -import { IgxIconService } from '../icon/icon.service'; /** * @hidden @@ -216,37 +215,14 @@ export class IgxExpansionPanelHeaderComponent { // properties section private _iconTemplate = false; private _disabled = false; - private _icons = [ - { - family: 'default', - name: 'expand', - ref: { - name: 'expand_more', - family: 'material', - } - }, - { - family: 'default', - name: 'collapse', - ref: { - name: 'expand_less', - family: 'material', - } - } - ]; constructor( @Host() @Inject(IGX_EXPANSION_PANEL_COMPONENT) public panel: IgxExpansionPanelBase, public cdr: ChangeDetectorRef, public elementRef: ElementRef, - protected iconsService: IgxIconService ) { this.id = `${this.panel.id}-header`; - - for (const icon of this._icons) { - iconsService.addIconRef(icon.name, icon.family, icon.ref); - } } /** diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 955efa722bc..8ef954ed3f5 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -46,7 +46,7 @@ }} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html index 55b83557784..87b1ecc2caf 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html @@ -40,14 +40,14 @@ (click)="onCommitClick()" tabindex="0" family="default" - name="selected"> + name="confirm"> + name="input_clear"> @@ -81,14 +81,14 @@ (keydown)="onCommitKeyDown($event)" (click)="onCommitClick($event)" family="default" - name="selected"> + name="confirm"> + name="input_clear"> @@ -125,14 +125,14 @@ (keydown)="onCommitKeyDown($event)" (click)="onCommitClick($event)" family="default" - name="selected"> + name="confirm"> + name="input_clear"> @@ -168,14 +168,14 @@ (click)="onCommitClick()" tabindex="0" family="default" - name="selected"> + name="confirm"> + name="input_clear"> @@ -215,7 +215,7 @@ (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators" [style.--ig-size]="filteringElementsSize"> - + {{filteringService.getOperatorAsString(item.afterOperator)}} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index 5cdd931933d..7203191b2c2 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -46,7 +46,6 @@ import { IgxIconComponent } from '../../../icon/icon.component'; import { NgFor, NgIf, NgTemplateOutlet, NgClass } from '@angular/common'; import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; import { Size } from '../../common/enums'; -import { IgxIconService } from '../../../icon/icon.service'; /** * @hidden @@ -200,64 +199,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { private isComposing = false; private _cancelChipClick = false; private _value = null; - private _icons = [ - { - name: 'clear', - family: 'default', - ref: { - name: 'clear', - family: 'material' - } - }, - { - name: 'close', - family: 'default', - ref: { - name: 'close', - family: 'material' - } - }, - { - name: 'done', - family: 'default', - ref: { - name: 'done', - family: 'material' - } - }, - { - name: 'prev', - family: 'default', - ref: { - name: 'navigate_before', - family: 'material' - } - }, - { - name: 'next', - family: 'default', - ref: { - name: 'navigate_next', - family: 'material' - } - }, - { - name: 'expand', - family: 'default', - ref: { - name: 'expand_more', - family: 'material' - } - }, - { - name: 'refresh', - family: 'default', - ref: { - name: 'refresh', - family: 'material' - } - }, - ]; /** switch to icon buttons when width is below 432px */ private readonly NARROW_WIDTH_THRESHOLD = 432; @@ -269,15 +210,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { public ref: ElementRef, public cdr: ChangeDetectorRef, protected platform: PlatformUtil, - protected iconService: IgxIconService, - ) { - for (const icon of this._icons) { - this.iconService.addIconRef(icon.name, icon.family, { - name: icon.ref.name, - family: icon.ref.family - }); - } - } + ) { } @HostListener('keydown', ['$event']) public onKeydownHandler(evt: KeyboardEvent) { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html index 239db8323ef..e4745fc79d4 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html @@ -6,5 +6,5 @@ role="menuitem" [attr.aria-disabled]="!this.esf.column.filteringExpressionsTree"> {{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }} - + diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts index ae00ecde7db..bc2273ae6a5 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts @@ -40,7 +40,6 @@ import { IgxExcelStylePinningComponent } from './excel-style-pinning.component'; import { IgxExcelStyleMovingComponent } from './excel-style-moving.component'; import { IgxExcelStyleSortingComponent } from './excel-style-sorting.component'; import { IgxExcelStyleHeaderComponent } from './excel-style-header.component'; -import { IgxIconService } from '../../../icon/icon.service'; @Directive({ selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]', @@ -272,64 +271,6 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent return this.column?.grid ?? this.gridAPI; } - - protected _icons = new Map(Object.entries({ - material: [ - { - name: 'clear', - mappedAs: 'clear' - }, - { - name: 'chevron_right', - mappedAs: 'chevron_right' - }, - { - name: 'filter_list', - mappedAs: 'filter_list' - }, - { - name: 'add', - mappedAs: 'add' - }, - { - name: 'cancel', - mappedAs: 'remove' - }, - { - name: 'done', - mappedAs: 'selected' - }, - { - name: 'visibility', - mappedAs: 'visibility' - }, - { - name: 'visibility_off', - mappedAs: 'visibility_off' - }, - { - name: 'arrow_back', - mappedAs: 'arrow_back' - }, - { - name: 'arrow_forward', - mappedAs: 'arrow_forward', - }, - { - name: 'arrow_upward', - mappedAs: 'arrow_upward', - }, - { - name: 'arrow_downward', - mappedAs: 'arrow_downward', - }, - { - name: 'search', - mappedAs: 'search' - } - ] - })); - constructor( cdr: ChangeDetectorRef, element: ElementRef, @@ -337,18 +278,8 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent @Inject(DOCUMENT) private document: any, @Host() @Optional() @Inject(IGX_GRID_BASE) protected gridAPI?: GridType, - private iconService?: IgxIconService, ) { super(cdr, element, platform); - - for (const [family, icons] of this._icons) { - icons.forEach(({name, mappedAs}) => { - this.iconService?.addIconRef(mappedAs, "default", { - name, - family, - }); - }); - } } /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html index 17fe7dd7a29..6df5e38486d 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html @@ -17,7 +17,7 @@

{{ esf.column.header || esf.column.field }}

(click)="esf.onPin()" [attr.aria-label]="esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin" > - +
(click)="esf.onHideToggle()" [attr.aria-label]="esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide" > - + diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html index a81896e5c05..a6d584a3049 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html @@ -4,5 +4,5 @@ (click)="esf.onHideToggle()" role="menuitem"> {{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }} - + diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html index 3780a8b618e..0c2862fc9b6 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html @@ -4,5 +4,5 @@ tabindex="0" role="menuitem"> {{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }} - + diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html index 7c14fe6f9fb..dd6e17110f0 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html @@ -11,7 +11,7 @@ autocomplete="off"/> - + {{ esfSize === '1'? esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short: @@ -21,7 +21,7 @@ [attr.data-togglable]="true" (buttonSelected)="onSortButtonClicked(2)" > - + {{ esfSize === '1' ? esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short: diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 0561e352a10..3ef0f950e86 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -321,12 +321,9 @@ export class IgxFilteringService implements OnDestroy { const editorIcons = editor as any[]; editorIcons.forEach(icon => { this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons'); - this.iconService.addIconRef(icon.name, 'default', { family: 'imx-icons', name: icon.name }); }); this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons'); this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons'); - this.iconService.addIconRef(pinLeft.name, 'default', { family: 'imx-icons', name: pinLeft.name }); - this.iconService.addIconRef(unpinLeft.name, 'default', { family: 'imx-icons', name: unpinLeft.name }); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 4e3ff68076b..592a95501cb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -179,7 +179,6 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations import { IgxGridCellComponent } from './cell.component'; import { IgxGridValidationService } from './grid/grid-validation.service'; import { getCurrentResourceStrings } from '../core/i18n/resources'; -import { IgxIconService } from '../icon/icon.service'; /*@__PURE__*/IgcTrialWatermark.register(); @@ -3220,185 +3219,6 @@ export abstract class IgxGridBaseDirective implements GridType, private _sortHeaderIconTemplate: TemplateRef = null; private _sortAscendingHeaderIconTemplate: TemplateRef = null; private _sortDescendingHeaderIconTemplate: TemplateRef = null; - private _icons = [ - { - family: 'default', - name: 'check', - ref: { - name: 'check', - family: 'material', - } - }, - { - family: 'default', - name: 'close', - ref: { - name: 'close', - family: 'material', - } - }, - { - family: 'default', - name: 'navigate_before', - ref: { - name: 'navigate_before', - family: 'material', - } - }, - { - family: 'default', - name: 'navigate_next', - ref: { - name: 'navigate_next', - family: 'material', - } - }, - { - family: 'default', - name: 'expand', - ref: { - name: 'expand_more', - family: 'material', - } - }, - { - family: 'default', - name: 'chevron_right', - ref: { - name: 'chevron_right', - family: 'material', - } - }, - { - family: 'default', - name: 'unfold_more', - ref: { - name: 'unfold_more', - family: 'material', - } - }, - { - family: 'default', - name: 'unfold_less', - ref: { - name: 'unfold_less', - family: 'material', - } - }, - { - family: 'default', - name: 'drag_indicator', - ref: { - name: 'drag_indicator', - family: 'material', - } - }, - { - family: 'default', - name: 'group_work', - ref: { - name: 'group_work', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_upward', - ref: { - name: 'arrow_upward', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_downward', - ref: { - name: 'arrow_downward', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_forward', - ref: { - name: 'arrow_forward', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_back', - ref: { - name: 'arrow_back', - family: 'material', - } - }, - { - family: 'default', - name: 'filter_list', - ref: { - name: 'filter_list', - family: 'material', - } - }, - { - family: 'default', - name: 'error', - ref: { - name: 'error', - family: 'material', - } - }, - { - family: 'default', - name: 'drag_indicator', - ref: { - name: 'drag_indicator', - family: 'material', - } - }, - { - family: 'default', - name: 'visibility', - ref: { - name: 'visibility', - family: 'material', - } - }, - { - family: 'default', - name: 'visibility_off', - ref: { - name: 'visibility_off', - family: 'material', - } - }, - { - family: 'default', - name: 'import_export', - ref: { - name: 'import_export', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_drop_down', - ref: { - name: 'arrow_drop_down', - family: 'material', - } - }, - { - family: 'default', - name: 'more_vert', - ref: { - name: 'more_vert', - family: 'material', - } - }, - ]; - private _gridSize: Size = Size.Large; private _defaultRowHeight = 50; @@ -3577,19 +3397,11 @@ export abstract class IgxGridBaseDirective implements GridType, @Inject(LOCALE_ID) private localeId: string, protected platform: PlatformUtil, @Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService, - @Optional() @Inject(IgxIconService) protected iconService?: IgxIconService ) { this.locale = this.locale || this.localeId; this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None); this._transactions.cloneStrategy = this.dataCloneStrategy; this.cdr.detach(); - - for (const icon of this._icons) { - this.iconService?.addIconRef(icon.name, icon.family, { - name: icon.ref.name, - family: icon.ref.family - }); - } } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html index 651aeb6630e..7bdd7066f37 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html @@ -28,7 +28,7 @@ @@ -186,10 +186,10 @@ - + - + diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 3d20e8a25ec..beae9e6f637 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -6919,9 +6919,9 @@ const verifyPinningHidingSize = (fix: ComponentFixture, expectedSize: Size) const headerTitle = excelMenu.querySelector('h4'); const headerIcons = GridFunctions.getExcelFilteringHeaderIcons(fix, excelMenu); const headerAreaPinIcon: HTMLElement = - headerIcons.find((buttonIcon: any) => buttonIcon.innerHTML.indexOf('name="pin-left"') !== -1) as HTMLElement; + headerIcons.find((buttonIcon: any) => buttonIcon.innerHTML.indexOf('name="pin"') !== -1) as HTMLElement; const headerAreaUnpinIcon: HTMLElement - = headerIcons.find((buttonIcon: any) => buttonIcon.innerHTML.indexOf('name="unpin-left"') !== -1) as HTMLElement; + = headerIcons.find((buttonIcon: any) => buttonIcon.innerHTML.indexOf('name="unpin"') !== -1) as HTMLElement; const headerAreaColumnHidingIcon: HTMLElement = headerIcons.find((buttonIcon: any) => buttonIcon.innerText === 'visibility_off') as HTMLElement; diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index 5ddf67ea36c..cefa0b2d3fd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -31,11 +31,11 @@ - + - + diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html index c6b308141db..f38bda0c64f 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html +++ b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html @@ -13,7 +13,7 @@ {{ (expression.fieldName | igxGroupByMeta:grid).title }} diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 2f639b58548..5748d1660f8 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -26,7 +26,7 @@ + [name]="column.expanded ? 'tree_collapse' : 'tree_expand'"> diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html index f575d528f61..1864eb10869 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html @@ -9,7 +9,7 @@ + [name]="sortDirection < 2 ? 'sort_asc' : 'sort_desc'"> diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts index a69043c287a..849b0b57125 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts @@ -40,7 +40,6 @@ import { State, Transaction, TransactionService } from '../../services/transacti import { IgxGridTransaction } from '../common/types'; import { IgxGridValidationService } from '../grid/grid-validation.service'; import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; -import { IgxIconService } from '../../icon/icon.service'; export const hierarchicalTransactionServiceFactory = () => new IgxTransactionService(); @@ -175,7 +174,6 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect @Inject(LOCALE_ID) localeId: string, platform: PlatformUtil, @Optional() @Inject(IgxGridTransaction) _diTransactions?: TransactionService, - @Optional() @Inject(IgxIconService) iconService?: IgxIconService, ) { super( validationService, @@ -199,7 +197,6 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect localeId, platform, _diTransactions, - iconService ); } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index fb45a6e528f..918ede26d54 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -1,10 +1,10 @@ - + - + diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html index f526849217a..08f0109e206 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html @@ -109,7 +109,7 @@
@@ -136,7 +136,7 @@
@@ -173,9 +173,9 @@
[class.igx-pivot-data-selector__item-ghost--no-drop]="!dropAllowed" >
- + {{ ghostText }}
- drag_handle + diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html index 9d3946eff9e..1b854b48c60 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html @@ -121,7 +121,7 @@
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index f49b10e202b..d8a49847c55 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -75,7 +75,7 @@ {{ row.displayName || row.memberName}} @@ -124,7 +124,7 @@ {{col.displayName || col.memberName}} @@ -209,7 +209,7 @@ {{ row.displayName || row.memberName}} diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index c244b8251f7..339138ec9a3 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -34,7 +34,6 @@ import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive'; import { IgxBadgeComponent } from '../../badge/badge.component'; import { IgxPrefixDirective } from '../../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../../icon/icon.component'; -import { IgxIconService } from '../../icon/icon.service'; import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive'; import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; @@ -79,80 +78,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem positionStrategy: new AutoPositionStrategy(this._subMenuPositionSettings), scrollStrategy: new AbsoluteScrollStrategy() }; - private _icons = [ - { - family: 'default', - name: 'expand', - ref: { - name: 'expand_more', - family: 'material', - } - }, - { - family: 'default', - name: 'chevron_right', - ref: { - name: 'chevron_right', - family: 'material', - } - }, - { - family: 'default', - name: 'arrow_drop_down', - ref: { - name: 'arrow_drop_down', - family: 'material', - } - }, - { - family: 'default', - name: 'unfold_more', - ref: { - name: 'unfold_more', - family: 'material', - } - }, - { - family: 'default', - name: 'drag_handle', - ref: { - name: 'drag_handle', - family: 'material', - } - }, - { - family: 'default', - name: 'functions', - ref: { - name: 'functions', - family: 'material', - } - }, - { - family: 'default', - name: 'table_rows', - ref: { - name: 'table_rows', - family: 'material', - } - }, - { - family: 'default', - name: 'view_column', - ref: { - name: 'view_column', - family: 'material', - } - }, - { - family: 'default', - name: 'filter_list', - ref: { - name: 'filter_list', - family: 'material', - } - }, - ]; /** * @hidden @internal @@ -215,16 +140,8 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem ref: ElementRef, cdr: ChangeDetectorRef, protected renderer: Renderer2, - protected iconService: IgxIconService ) { super(ref, cdr); - - for (const icon of this._icons) { - this.iconService?.addIconRef(icon.name, icon.family, { - family: icon.ref.family, - name: icon.ref.name - }); - } } /** diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index 841e5f8bf29..1d6f9fbbb88 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -18,7 +18,7 @@
+ [name]="column.expanded ? 'tree_collapse' : 'tree_expand'"> diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index ebc79984a73..57e85edceeb 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -174,7 +174,7 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; const state = fix.componentInstance.state; - const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"true","isUnary":true,"iconName":"is-true"},"fieldName":"InStock","ignoreCase":true}],"operator":0,"fieldName":"InStock"}],"operator":0,"type":0}}'; + const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"true","isUnary":true,"iconName":"filter_true"},"fieldName":"InStock","ignoreCase":true}],"operator":0,"fieldName":"InStock"}],"operator":0,"type":0}}'; const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}'; let gridState = state.getState(true, 'filtering'); @@ -198,7 +198,7 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"equals","isUnary":false,"iconName":"equals"},"fieldName":"LastDate","ignoreCase":true,"searchVal":"2021-06-05T20:59:00.000Z"}],"operator":1,"fieldName":"LastDate"}],"operator":0,"type":0}}'; + const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"equals","isUnary":false,"iconName":"filter_equal"},"fieldName":"LastDate","ignoreCase":true,"searchVal":"2021-06-05T20:59:00.000Z"}],"operator":1,"fieldName":"LastDate"}],"operator":0,"type":0}}'; const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}'; let gridState = state.getState(true, 'filtering'); @@ -219,7 +219,7 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"empty","isUnary":true,"iconName":"is-empty"},"fieldName":"OrderDate","ignoreCase":true,"searchVal":null}],"operator":1,"fieldName":"OrderDate"}],"operator":0,"type":0}}'; + const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"empty","isUnary":true,"iconName":"filter_empty"},"fieldName":"OrderDate","ignoreCase":true,"searchVal":null}],"operator":1,"fieldName":"OrderDate"}],"operator":0,"type":0}}'; const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}'; let gridState = state.getState(true, 'filtering'); @@ -237,7 +237,7 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const grid = fix.componentInstance.grid; const state = fix.componentInstance.state; - const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"true","isUnary":true,"iconName":"is-true"},"fieldName":"InStock","ignoreCase":true}],"operator":0,"fieldName":"InStock"}],"operator":0,"type":0}}'; + const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"true","isUnary":true,"iconName":"filter_true"},"fieldName":"InStock","ignoreCase":true}],"operator":0,"fieldName":"InStock"}],"operator":0,"type":0}}'; const filteringStateObject = JSON.parse(filteringState) as IGridState; const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}'; @@ -647,7 +647,7 @@ describe('IgxGridState - input properties #grid', () => { const grid = fix.componentInstance.grid; const state = fix.componentInstance.state; // eslint-disable-next-line max-len - const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is-true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; + const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"filter_true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"filter_greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; const initialState = '{"advancedFiltering":{}}'; let gridState = state.getState(true, 'advancedFiltering'); @@ -666,7 +666,7 @@ describe('IgxGridState - input properties #grid', () => { const grid = fix.componentInstance.grid; const state = fix.componentInstance.state; // eslint-disable-next-line max-len - const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is-true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; + const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"filter_true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"filter_greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; const initialState = '{"advancedFiltering":{}}'; const advFilteringStateObject = JSON.parse(advFilteringState); diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 9ecbbdcb66c..e96fd299b73 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -214,7 +214,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const emptyFiltering = '{"filteringOperands":[],"operator":0}'; const initialState = HelperFunctions.buildStateString(grid, 'filtering', emptyFiltering, emptyFiltering); - const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; + const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"filter_contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; const filteringState = HelperFunctions.buildStateString(grid, 'filtering', filtering, filtering); const filteringStateObject = JSON.parse(filteringState) as IGridState; @@ -242,7 +242,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const emptyFiltering = '{"filteringOperands":[],"operator":0}'; const initialState = HelperFunctions.buildStateString(grid, 'filtering', emptyFiltering, emptyFiltering); - const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; + const filtering = '{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"contains","isUnary":false,"iconName":"filter_contains"},"fieldName":"ProductName","ignoreCase":true,"searchVal":"A0"}],"operator":0,"fieldName":"ProductName"}],"operator":0,"type":0}'; const filteringState = HelperFunctions.buildStateString(grid, 'filtering', filtering, filtering); const filteringStateObject = JSON.parse(filteringState) as IGridState; @@ -350,7 +350,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const emptyFiltering = '{}'; const initialState = HelperFunctions.buildStateString(grid, 'advancedFiltering', emptyFiltering, emptyFiltering); - const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less-than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; + const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"filter_contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"filter_less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; const filteringState = HelperFunctions.buildStateString(grid, 'advancedFiltering', filtering, filtering); let gridState = state.getState(true, ['advancedFiltering', 'rowIslands']); @@ -373,7 +373,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const emptyFiltering = '{}'; const initialState = HelperFunctions.buildStateString(grid, 'advancedFiltering', emptyFiltering, emptyFiltering); - const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"less-than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; + const filtering = '{"filteringOperands":[{"fieldName":"ProductName","condition":{"name":"contains","isUnary":false,"iconName":"filter_contains"},"searchVal":"A0","ignoreCase":true},{"fieldName":"ID","condition":{"name":"lessThan","isUnary":false,"iconName":"filter_less_than"},"searchVal":3,"ignoreCase":true}],"operator":0,"type":1}'; const filteringState = HelperFunctions.buildStateString(grid, 'advancedFiltering', filtering, filtering); const filteringStateObject = JSON.parse(filteringState) as IGridState; diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index f87819fc3a2..f08c44f3708 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -136,7 +136,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; // eslint-disable-next-line max-len - const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":35,"fieldName":"Age","ignoreCase":true}],"operator":0,"fieldName":"Age"}],"operator":0,"type":0}}'; + const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"greaterThan","isUnary":false,"iconName":"filter_greater_than"},"searchVal":35,"fieldName":"Age","ignoreCase":true}],"operator":0,"fieldName":"Age"}],"operator":0,"type":0}}'; const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}'; let gridState = state.getState(true, 'filtering'); @@ -267,7 +267,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; // eslint-disable-next-line max-len - const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"Age","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":25,"ignoreCase":true},{"fieldName":"ID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; + const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"Age","condition":{"name":"greaterThan","isUnary":false,"iconName":"filter_greater_than"},"searchVal":25,"ignoreCase":true},{"fieldName":"ID","condition":{"name":"greaterThan","isUnary":false,"iconName":"filter_greater_than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; const initialState = '{"advancedFiltering":{}}'; let gridState = state.getState(true, 'advancedFiltering'); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html index f543b55073c..d74fb7a1a14 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html @@ -1,7 +1,7 @@
@@ -240,10 +240,10 @@ - + - +
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts index 08086c146f7..b05a1acd5d5 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts @@ -47,8 +47,8 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); expect(editActions.length).toBe(4); - expect(editActions[1].componentInstance.iconName).toBe('add-row'); - expect(editActions[2].componentInstance.iconName).toBe('add-child'); + expect(editActions[1].componentInstance.iconName).toBe('add_row'); + expect(editActions[2].componentInstance.iconName).toBe('add_child'); }); it('should show action strip "add child" button for all rows.', () => { @@ -57,7 +57,7 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); expect(editActions.length).toBe(3); - expect(editActions[1].componentInstance.iconName).toBe('add-child'); + expect(editActions[1].componentInstance.iconName).toBe('add_child'); }); it('should allow adding child to row via the UI.', () => { @@ -68,7 +68,7 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { expect(treeGrid.rowList.length).toBe(8); const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); - expect(editActions[1].componentInstance.iconName).toBe('add-child'); + expect(editActions[1].componentInstance.iconName).toBe('add_child'); const addChildBtn = editActions[1].componentInstance; addChildBtn.actionClick.emit(); fix.detectChanges(); @@ -147,7 +147,7 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); - expect(editActions[3].componentInstance.iconName).toBe('add-row'); + expect(editActions[3].componentInstance.iconName).toBe('add_row'); const addRowBtn = editActions[3].componentInstance; addRowBtn.actionClick.emit(); fix.detectChanges(); @@ -181,7 +181,7 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); - expect(editActions[3].componentInstance.iconName).toBe('add-row'); + expect(editActions[3].componentInstance.iconName).toBe('add_row'); const addRowBtn = editActions[3].componentInstance; addRowBtn.actionClick.emit(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index b10388c6eef..7b0a66ae2bd 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -81,7 +81,6 @@ import { IgxGridDragSelectDirective } from '../selection/drag-select.directive'; import { IgxGridBodyDirective } from '../grid.common'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service'; -import { IgxIconService } from '../../icon/icon.service'; let NEXT_ID = 0; @@ -471,7 +470,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy platform: PlatformUtil, @Optional() @Inject(IgxGridTransaction) protected override _diTransactions?: HierarchicalTransactionService, - @Optional() @Inject(IgxIconService) protected override iconService?: IgxIconService ) { super( validationService, @@ -495,7 +493,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy localeId, platform, _diTransactions, - iconService ); } diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.spec.ts b/projects/igniteui-angular/src/lib/icon/icon.component.spec.ts index 4f134a77431..11132c1bb37 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.spec.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.spec.ts @@ -1,7 +1,9 @@ import { Component } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { IgxIconComponent } from "./icon.component"; -import { IconFamily, IconType, IgxIconService } from "./icon.service"; +import { IgxIconService } from "./icon.service"; +import { IconFamily } from './types'; +import type { IconType } from './types'; import { configureTestSuite } from "../test-utils/configure-suite"; import { By } from "@angular/platform-browser"; diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index 4381cb735fc..990adab0538 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -9,11 +9,13 @@ import { ChangeDetectorRef, booleanAttribute, } from "@angular/core"; -import { IgxIconService, IconReference } from "./icon.service"; +import { IgxIconService } from "./icon.service"; +import type { IconReference } from "./types"; import { filter, takeUntil } from "rxjs/operators"; import { Subject } from "rxjs"; import { SafeHtml } from "@angular/platform-browser"; import { NgIf, NgTemplateOutlet } from "@angular/common"; +import { ThemeService } from "../services/theme/theme.service"; /** * Icon provides a way to include material icons to markup @@ -134,9 +136,11 @@ export class IgxIconComponent implements OnInit, OnChanges, OnDestroy { constructor( public el: ElementRef, private iconService: IgxIconService, + private themeService: ThemeService, private ref: ChangeDetectorRef, ) { this.family = this.iconService.defaultFamily.name; + this.iconService.setRefsByTheme(this.themeService.globalTheme); this.iconService.iconLoaded .pipe( diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts new file mode 100644 index 00000000000..b4d082253b8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -0,0 +1,595 @@ +/** READ BEFORE YOU MODIFY THIS FILE! + * + * Before you add/modify an icon reference, please think about the semantics of the icon you are adding/modifying. + * + * Icon aliases have sematic meaning depending on the context in which they are used. + * For instance, if your component handles toggling between expanded and collapsed states, + * you may want to use the already existing `expand` and `collapse` aliases that point to + * the `expand_more` and `expand_less` icons in the material font set. + * + * It may so happen, however, that the design of your component requires you to use the `chevron_right` for the + * expand icon and the `expand_more` for the collapse icon. In this case the `tree_expand` and `tree_collapse` aliases + * would be appropriate. + * This distinction is important when choosing which icon to use for your component as it will have an impact + * when a user decides to rewire the `expand`/`collapse` icons to some other icons. + * + * Likewise, modifying existing references should be handled with caution as many component in the framework already + * share icons that have equivalent semantic meaning. For example, the `Paginator`, `Grid Filtering Row`, + * and `Tabs` components in Ignite UI for Angular all use the `prev` and `next` icons for navigating between pages + * or lists of items. Changing the underlying target for those icons should be done in a way that suits all components. + * + * Keep in mind that icon aliases and their underlying names are shared between Ignite UI component frameworks + * and changing an alias name here should be reflected in the other frameworks as well. + * + * To get acquainted with which component uses what icon, please make sure to read the + * [docs](https://infragistics.com/products/ignite-ui-angular/Angular/components/icon-service#internal-usage). + */ +import { IconMeta } from "./types"; +import type { IconReference, IconThemeKey, MetaReference } from './types'; + +type Icon = { [key in IconThemeKey]?: IconMeta }; + +const makeIconRefs = (icons: Icon) => { + return new Map( + Object.entries(icons).map((icon) => { + return icon as [theme: IconThemeKey, IconReference]; + }) + ); +}; + +const addIcon = (name: string, target: Icon) => { + const icon = { + alias: { + name, + family: 'default' + }, + target: makeIconRefs(target) + }; + + return icon as MetaReference; +} + +const loadIconRefs = () => [ + addIcon('more_vert', { + default: { + name: 'more_vert', + family: 'material', + } + }), + addIcon('arrow_prev', { + default: { + name: 'chevron_left', + family: 'material', + }, + fluent: { + name: 'arrow_upward', + family: 'material', + }, + }), + addIcon('arrow_next', { + default: { + name: 'chevron_right', + family: 'material', + }, + fluent: { + name: 'arrow_downward', + family: 'material', + }, + }), + addIcon('expand', { + default: { + name: 'expand_more', + family: 'material', + } + }), + addIcon('collapse', { + default: { + name: 'expand_less', + family: 'material', + } + }), + addIcon('carousel_prev', { + default: { + name: 'arrow_back', + family: 'material', + }, + indigo: { + name: 'chevron_left', + family: 'material', + }, + }), + addIcon('carousel_next', { + default: { + name: 'arrow_forward', + family: 'material', + }, + indigo: { + name: 'chevron_right', + family: 'material', + }, + }), + addIcon('arrow_back', { + default: { + name: 'arrow_back', + family: 'material', + }, + }), + addIcon('arrow_forward', { + default: { + name: 'arrow_forward', + family: 'material', + }, + }), + addIcon('selected', { + default: { + name: 'done', + family: 'material', + }, + }), + addIcon('remove', { + default: { + name: 'cancel', + family: 'material', + }, + }), + addIcon('input_clear', { + default: { + name: 'clear', + family: 'material', + }, + }), + addIcon('input_expand', { + default: { + name: 'arrow_drop_down', + family: 'material', + }, + material: { + name: 'expand_more', + family: 'material', + }, + }), + addIcon('input_collapse', { + default: { + name: 'arrow_drop_up', + family: 'material', + }, + material: { + name: 'expand_less', + family: 'material', + }, + }), + addIcon('arrow_drop_down', { + default: { + name: 'arrow_drop_down', + family: 'material', + }, + }), + addIcon('case_sensitive', { + default: { + name: 'case-sensitive', + family: 'imx-icons', + }, + }), + addIcon('today', { + default: { + name: 'calendar_today', + family: 'material', + }, + }), + addIcon('clock', { + default: { + name: 'access_time', + family: 'material', + }, + }), + addIcon('date_range', { + default: { + name: 'date_range', + family: 'material', + }, + }), + addIcon('prev', { + default: { + name: 'navigate_before', + family: 'material', + }, + }), + addIcon('next', { + default: { + name: 'navigate_next', + family: 'material', + }, + }), + addIcon('first_page', { + default: { + name: 'first_page', + family: 'material', + }, + }), + addIcon('last_page', { + default: { + name: 'last_page', + family: 'material', + }, + }), + addIcon('add', { + default: { + name: 'add', + family: 'material', + }, + }), + addIcon('close', { + default: { + name: 'close', + family: 'material', + }, + }), + addIcon('error', { + default: { + name: 'error', + family: 'material', + }, + }), + addIcon('confirm', { + default: { + name: 'check', + family: 'material', + }, + }), + addIcon('cancel', { + default: { + name: 'close', + family: 'material', + }, + }), + addIcon('edit', { + default: { + name: 'edit', + family: 'material', + }, + }), + addIcon('delete', { + default: { + name: 'delete', + family: 'material', + }, + }), + addIcon('pin', { + default: { + name: 'pin-left', + family: 'imx-icons', + }, + }), + addIcon('unpin', { + default: { + name: 'unpin-left', + family: 'imx-icons', + }, + }), + addIcon('show', { + default: { + name: 'visibility', + family: 'material', + }, + }), + addIcon('hide', { + default: { + name: 'visibility_off', + family: 'material', + }, + }), + addIcon('tree_expand', { + default: { + name: 'chevron_right', + family: 'material', + }, + }), + addIcon('tree_collapse', { + default: { + name: 'expand_more', + family: 'material', + }, + }), + addIcon('chevron_right', { + default: { + name: 'chevron_right', + family: 'material', + }, + }), + addIcon('chevron_left', { + default: { + name: 'chevron_left', + family: 'material', + }, + }), + addIcon('expand_more', { + default: { + name: 'expand_more', + family: 'material', + }, + }), + addIcon('filter_list', { + default: { + name: 'filter_list', + family: 'material', + }, + }), + addIcon('import_export', { + default: { + name: 'import_export', + family: 'material', + }, + }), + addIcon('unfold_more', { + default: { + name: 'unfold_more', + family: 'material', + }, + }), + addIcon('unfold_less', { + default: { + name: 'unfold_less', + family: 'material', + }, + }), + addIcon('drag_indicator', { + default: { + name: 'drag_indicator', + family: 'material', + }, + }), + addIcon('group_work', { + default: { + name: 'group_work', + family: 'material', + }, + }), + addIcon('sort_asc', { + default: { + name: 'arrow_upward', + family: 'material', + }, + }), + addIcon('sort_desc', { + default: { + name: 'arrow_downward', + family: 'material', + }, + }), + addIcon('search', { + default: { + name: 'search', + family: 'material', + }, + }), + addIcon('functions', { + default: { + name: 'functions', + family: 'material', + }, + }), + addIcon('table_rows', { + default: { + name: 'table_rows', + family: 'material', + }, + }), + addIcon('view_column', { + default: { + name: 'view_column', + family: 'material', + }, + }), + addIcon('refresh', { + default: { + name: 'refresh', + family: 'material', + }, + }), + addIcon('add_row', { + default: { + name: 'add-row', + family: 'imx-icons', + }, + }), + addIcon('add_child', { + default: { + name: 'add-child', + family: 'imx-icons', + }, + }), + addIcon('jump_up', { + default: { + name: 'jump-up', + family: 'imx-icons', + }, + }), + addIcon('jump_down', { + default: { + name: 'jump-down', + family: 'imx-icons', + }, + }), + addIcon('filter_null', { + default: { + name: 'is-null', + family: 'imx-icons', + }, + }), + addIcon('filter_not_null', { + default: { + name: 'is-not-null', + family: 'imx-icons', + }, + }), + addIcon('filter_in', { + default: { + name: 'is-in', + family: 'imx-icons', + }, + }), + addIcon('filter_all', { + default: { + name: 'select-all', + family: 'imx-icons', + }, + }), + addIcon('filter_true', { + default: { + name: 'is-true', + family: 'imx-icons', + }, + }), + addIcon('filter_false', { + default: { + name: 'is-false', + family: 'imx-icons', + }, + }), + addIcon('filter_empty', { + default: { + name: 'is-empty', + family: 'imx-icons', + }, + }), + addIcon('filter_not_empty', { + default: { + name: 'not-empty', + family: 'imx-icons', + }, + }), + addIcon('filter_equal', { + default: { + name: 'equals', + family: 'imx-icons', + }, + }), + addIcon('filter_not_equal', { + default: { + name: 'not-equal', + family: 'imx-icons', + }, + }), + addIcon('filter_before', { + default: { + name: 'is-before', + family: 'imx-icons', + }, + }), + addIcon('filter_after', { + default: { + name: 'is-after', + family: 'imx-icons', + }, + }), + addIcon('filter_today', { + default: { + name: 'today', + family: 'imx-icons', + }, + }), + addIcon('filter_yesterday', { + default: { + name: 'yesterday', + family: 'imx-icons', + }, + }), + addIcon('filter_this_month', { + default: { + name: 'this-month', + family: 'imx-icons', + }, + }), + addIcon('filter_last_month', { + default: { + name: 'last-month', + family: 'imx-icons', + }, + }), + addIcon('filter_next_month', { + default: { + name: 'next-month', + family: 'imx-icons', + }, + }), + addIcon('filter_this_year', { + default: { + name: 'this-year', + family: 'imx-icons', + }, + }), + addIcon('filter_last_year', { + default: { + name: 'last-year', + family: 'imx-icons', + }, + }), + addIcon('filter_next_year', { + default: { + name: 'next-year', + family: 'imx-icons', + }, + }), + addIcon('filter_greater_than', { + default: { + name: 'greater-than', + family: 'imx-icons', + }, + }), + addIcon('filter_less_than', { + default: { + name: 'less-than', + family: 'imx-icons', + }, + }), + addIcon('filter_greater_than_or_equal', { + default: { + name: 'greater-than-or-equal', + family: 'imx-icons', + }, + }), + addIcon('filter_less_than_or_equal', { + default: { + name: 'less-than-or-equal', + family: 'imx-icons', + }, + }), + addIcon('filter_contains', { + default: { + name: 'contains', + family: 'imx-icons', + }, + }), + addIcon('filter_does_not_contain', { + default: { + name: 'does-not-contain', + family: 'imx-icons', + }, + }), + addIcon('filter_starts_with', { + default: { + name: 'starts-with', + family: 'imx-icons', + }, + }), + addIcon('filter_ends_with', { + default: { + name: 'ends-with', + family: 'imx-icons', + }, + }), + addIcon('ungroup', { + default: { + name: 'ungroup', + family: 'imx-icons', + }, + }), + addIcon('file_download', { + default: { + name: 'file_download', + family: 'material', + }, + }), +]; + +export const iconReferences = /*@__PURE__*/ loadIconRefs(); diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts index f67177b430d..e0cc2f3bac3 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts @@ -1,5 +1,6 @@ import { TestBed, fakeAsync } from "@angular/core/testing"; -import { IconFamily, IconMeta, IgxIconService } from "./icon.service"; +import { IconFamily, IconMeta } from "./types"; +import { IgxIconService } from './icon.service'; import { configureTestSuite } from '../test-utils/configure-suite'; import { first } from 'rxjs/operators'; diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index 016bfd88bf9..929fc16ee69 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -4,27 +4,10 @@ import { DOCUMENT } from "@angular/common"; import { HttpClient } from "@angular/common/http"; import { Observable, Subject } from "rxjs"; import { PlatformUtil } from "../core/utils"; - -export type IconType = "svg" | "font" | "liga"; - -export interface IconMeta { - name: string; - family: string; - type?: IconType; -} - -interface FamilyMeta { - className: string; - type: IconType; - prefix?: string; -} - -export interface IconFamily { - name: string; - meta: FamilyMeta; -} - -export type IconReference = IconMeta & FamilyMeta; +import { iconReferences } from './icon.references' +import { IconFamily, IconMeta, FamilyMeta } from "./types"; +import type { IconType, IconReference } from './types'; +import { IgxTheme } from "../services/theme/theme.service"; /** * Event emitted when a SVG icon is loaded through @@ -75,6 +58,7 @@ export class IgxIconService { private _cachedIcons = new Map>(); private _iconLoaded = new Subject(); private _domParser: DOMParser; + private theme!: IgxTheme; constructor( @Optional() private _sanitizer: DomSanitizer, @@ -142,6 +126,18 @@ export class IgxIconService { return this._families.get(alias)?.type; } + /** @hidden @internal */ + public setRefsByTheme(theme: IgxTheme) { + if (this.theme !== theme) { + this.theme = theme; + + for (const { alias, target } of iconReferences) { + const icon = target.get(theme) ?? target.get('default')!; + this.addIconRef(alias.name, alias.family, icon); + } + } + } + /** * Creates a family to className relationship that is applied to the IgxIconComponent * whenever that family name is used. diff --git a/projects/igniteui-angular/src/lib/icon/public_api.ts b/projects/igniteui-angular/src/lib/icon/public_api.ts index 48dadb551bf..d50f5de809f 100644 --- a/projects/igniteui-angular/src/lib/icon/public_api.ts +++ b/projects/igniteui-angular/src/lib/icon/public_api.ts @@ -1,2 +1,4 @@ export * from './icon.component'; export * from './icon.service'; +export { IconMeta, FamilyMeta, IconFamily } from './types'; +export type { IconReference } from './types'; diff --git a/projects/igniteui-angular/src/lib/icon/reference_table.md b/projects/igniteui-angular/src/lib/icon/reference_table.md deleted file mode 100644 index 3473e5d297b..00000000000 --- a/projects/igniteui-angular/src/lib/icon/reference_table.md +++ /dev/null @@ -1,323 +0,0 @@ -Default Component Icons: - -- [x] Path: action-strip/grid-actions/grid-action-button.component.html - * no built-in, just configurable child icon; Public? - -- [x] Path: action-strip/action-strip.component.html - - more_vert - -- [x] Path: avatar/avatar.component.html - - no built-in, just configurable child icon - -- [x] Path: badge/badge.component.html - - no built-in, just configurable child icon - -- [x] Path: buttonGroup/buttongroup-content.component.html - - no built-in, just configurable child icon - -- [x] Path: calendar/month-picker/month-picker.component.html - - keyboard_arrow_left - - keyboard_arrow_right - -- [x] Path: calendar/calendar.component.html - - keyboard_arrow_left - - keyboard_arrow_right - -- [x] Path: carousel/carousel.component.html - - arrow_forward - - arrow_back - - chevron_left - - chevron_right - -- [x] Path: chips/chip.component.html - - done - - cancel - -- [x] Path: combo/combo.component.html - - cancel - - clear - - expand_more - - expand_less - - arrow_drop_down - - arrow_drop_up - - imx-icons: case-sensitive - -- [x] Path: date-picker/date-picker.component.html - - today - - clear - -- [x] Path: date-range-picker/date-range-picker.component.html - - date_range - -- [x] Path: expansion-panel/expansion-panel-header.component.html - - expand_more - - expand_less - -- [x] Path: grids/filtering/base/grid-filtering-cell.component.html - - filter_list - * multiple built-in from imx-icons & item.expression.condition.iconName; possibly user-configurable too - - filter_list - - filter_list - -- [x] Path: grids/filtering/base/grid-filtering-row.component.html - * multiple built-in from imx-icons & condition.iconName; possibly user-configurable too - - done - - clear - - navigate_before - - navigate_next - - expand_more - - close - - refresh - -- [x] Path: grids/filtering/excel-style/excel-style-clear-filters.component.html - - clear - -- [x] Path: grids/filtering/excel-style/excel-style-conditional-filter.component.html - * multiple built-in from imx-icons & condition.iconName; possibly user-configurable too - - keyboard_arrow_right - - filter_list - -- [x] Path: grids/filtering/excel-style/excel-style-custom-dialog.component.html - - add - -- [x] Path: grids/filtering/excel-style/excel-style-date-expression.component.html - * multiple built-in from imx-icons & condition.iconName; possibly user-configurable too - - filter_list - - cancel - -- [x] Path: grids/filtering/excel-style/excel-style-default-expression.component.html - * multiple built-in from imx-icons & condition.iconName; possibly user-configurable too - - filter_list - - cancel - -- [x] Path: grids/filtering/excel-style/excel-style-header.component.html - - done - - imx-icons:unpin-left - - imx-icons:pin-left - - visibility - - visibility_off - -- [x] Path: grids/filtering/excel-style/excel-style-hiding.component.html - - visibility - - visibility_off - -- [x] Path: grids/filtering/excel-style/excel-style-moving.component.html - - arrow_back - - arrow_forward - -- [x] Path: grids/filtering/excel-style/excel-style-pinning.component.html - - imx-icons:unpin-left - - imx-icons:pin-left - -- [x] Path: grids/filtering/excel-style/excel-style-search.component.html - - search - - clear - -- [x] Path: grids/filtering/excel-style/excel-style-selecting.component.html - - done - -- [x] Path: grids/filtering/excel-style/excel-style-sorting.component.html - - arrow_upward - - arrow_downward - -- [x] Path: grids/grid/expandable-cell.component.html - - check - - close - - error - - expand_more - - chevron_right - -- [x] Path: grids/grid/grid.component.html - - unfold_less - - unfold_more - - drag_indicator - -- [x] Path: grids/grid/groupby-row.component.html - - drag_indicator - - expand_more - - chevron_right - - group_work - -- [x] Path: grids/grouping/group-by-area.component.html - - arrow_upward - - arrow_downward - - arrow_forward - - group_work - -- [x] Path: grids/headers/grid-header-group.component.html - - expand_more - - chevron_right - -- [x] Path: grids/headers/grid-header.component.html - - more_vert - - arrow_upward - - arrow_downward - -- [x] Path: grids/hierarchical-grid/hierarchical-grid.component.html - - unfold_more - - unfold_less - - drag_indicator - -- [x] Path: grids/hierarchical-grid/hierarchical-row.component.html - - expand_more - - chevron_right - -- [x] Path: grids/pivot-grid/pivot-data-selector.component.html - * multiple built-in from panel.icon; - - search - - arrow_upward - - arrow_downward - - filter_list - - functions - - unfold_more - - drag_handle - -- [x] Path: grids/pivot-grid/pivot-grid.component.html - - expand_more - - chevron_right - -- [x] Path: grids/pivot-grid/pivot-header-row.component.html - - filter_list - - view_column - - arrow_upward - - arrow_downward - - functions - - arrow_drop_down - - table_rows - -- [x] Path: grids/pivot-grid/pivot-row-dimension-content.component.html - - expand_more - - chevron_right - - 👀 - -- [x] Path: grids/pivot-grid/pivot-row-dimension-header-group.component.html - - expand_more - - chevron_right - -- [x] Path: grids/toolbar/grid-toolbar-advanced-filtering.component.html - - filter_list - -- [x] Path: grids/toolbar/grid-toolbar-exporter.component.html - - import_export - - arrow_drop_down - -- [x] Path: grids/toolbar/grid-toolbar-hiding.component.html - - visibility - - visibility_off - -- [x] Path: grids/toolbar/grid-toolbar-pinning.component.html - - imx-icons:unpin-left - - imx-icons:pin-left - -- [x] Path: grids/tree-grid/tree-cell.component.html - - check - - close - - error - - expand_more - - chevron_right - -- [x] Path: grids/tree-grid/tree-grid.component.html - - drag_indicator - -- [x] Path: grids/cell.component.html - - check - - close - - error - -- [x] Path: input-group/input-group.component.html - - clear - -- [x] Path: navbar/navbar.component.html - * no built-in, just configurable child icon - -- [x] Path: paginator/pager.component.html - - chevron_left - - chevron_right - - first_page - - last_page - -- [x] Path: query-builder/query-builder.component.html - * multiple built-in from imx-icons & condition.iconName; possibly user-configurable too - - add - - edit - - check - - close - - close - - close - - delete - - imx-icons:ungroup - -- [x] Path: select/select.component.html - - expand_more - - expand_less - - arrow_drop_down - - arrow_drop_up - -- [x] Path: simple-combo/simple-combo.component.html - - cancel - - clear - - imx-icons:case-sensitive - - expand_more - - expand_less - - arrow_drop_down - - arrow_drop_up - -- [x] Path: tabs/tabs/tabs.component.html - - navigate_before - - navigate_next - -- [x] Path: time-picker/time-picker.component.html - - access_time - - clear - -- [x] Path: tree/tree-node/tree-node.component.html - - keyboard_arrow_right - - keyboard_arrow_down - -| Icon Name | Target Family | Target Name | Used By | Theme | -|----------------|---------------|----------------------|---------------------------------------------------------|-----------------------------| -| add | material | add | Grid, Query Builder, Excel Style Filtering | All | -| arrow_next | material | keyboard_arrow_right | Month Picker, Calendar | All | -| arrow_prev | material | keyboard_arrow_left | Month Picker, Calendar | All | -| arrow_back | material | arrow_back | Grid, Excel Style Filtering | All | -| arrow_forward | material | arrow_forward | Grid, Excel Style Filtering | All | -| arrow_upward | material | arrow_upward | Grid, Excel Style Filtering | All | -| arrow_downward | material | arrow_downward | Grid, Excel Style Filtering | All | -| case_sensitive | imx-icons | case-sensitive | Combo, Simple Combo | All | -| carousel_next | material | keyboard_arrow_right | Carousel | Indigo | -| carousel_prev | material | keyboard_arrow_left | Carousel | Indigo | -| carousel_next | material | arrow_forward | Carousel | Material, Bootstrap, Fluent | -| carousel_prev | material | arrow_back | Carousel | Material, Bootstrap, Fluent | -| chevron_left | material | chevron_left | Grid, Paginator, Excel Style Filtering | All | -| chevron_right | material | chevron_right | Grid, Paginator, Excel Style Filtering, TreeNode | All | -| check | material | check | Grid, Query Builder | All | -| close | material | close | Grid, Query Builder, Filtering Row | All | -| clear | material | clear | Grid, Input Group, Excel Style Filtering, Filtering Row | All | -| clock | material | access_time | Time Picker | All | -| collapse | material | expand_less | Grid, Expansion Panel | All | -| date_range | material | date_range | Date Range Picker | All | -| delete | material | delete | Grid, Query Builder | All | -| edit | material | edit | Grid, Query Builder | All | -| expand | material | expand_more | Grid, Expansion Panel, Filtering Row, TreeNode | All | -| filter_list | material | filter_list | Grid, Filtering Cell, Excel Style Filtering | All | -| first_page | material | first_page | Grid, Paginator | All | -| functions | material | functions | Grid, Pivot Data Selector | All | -| import_export | material | import_export | Grid | All | -| input_clear | material | cancel | Combo, Simple Combo, Time Picker, Date Picker | Material | -| input_clear | material | clear | Combo, Simple Combo, Time Picker, Date Picker | Indigo, Fluent, Bootstrap | -| input_expand | material | expand_more | Combo, Simple Combo, Select | Material | -| input_collapse | material | expand_less | Combo, Simple Combo, Select | Material | -| input_expand | material | arrow_drop_down | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap | -| input_collapse | material | arrow_drop_up | Combo, Simple Combo, Select | Indigo, Fluent, Bootstrap | -| last_page | material | last_page | Grid, Paginator | All | -| more_vert | material | more_vert | Action Strip, Grid | All | -| next | material | navigate_next | Grid, Tabs, Filtering Row | All | -| prev | material | navigate_before | Grid, Tabs, Filtering Row | All | -| remove | material | cancel | Grid, Chip | All | -| refresh | material | refresh | Grid, Filtering Row | All | -| selected | material | done | Grid, Chip, Filtering Row | All | -| table_rows | material | table_rows | Grid | All | -| today | material | today | Date Picker | All | -| view_column | material | view_column | Grid | All | -| visibility | material | visibility | Grid, Excel Style Filtering | All | -| visibility_off | material | visibility_off | Grid, Excel Style Filtering | All | diff --git a/projects/igniteui-angular/src/lib/icon/types.ts b/projects/igniteui-angular/src/lib/icon/types.ts new file mode 100644 index 00000000000..75154ba3e44 --- /dev/null +++ b/projects/igniteui-angular/src/lib/icon/types.ts @@ -0,0 +1,37 @@ +/* eslint-disable @typescript-eslint/consistent-type-definitions */ +import { IgxTheme } from "../services/theme/theme.service"; + +// Exported internal types +export type IconThemeKey = IgxTheme | 'default'; + +export type IconReferencePair = { + alias: IconMeta; + target: IconMeta; + overwrite: boolean; +}; +export type IconType = "svg" | "font" | "liga"; + +export type IconReference = IconMeta & FamilyMeta; + +export type MetaReference = { + alias: IconMeta; + target: Map; +}; + +// Exported public types +export interface IconMeta { + name: string; + family: string; + type?: IconType; +} + +export interface FamilyMeta { + className: string; + type: IconType; + prefix?: string; +} + +export interface IconFamily { + name: string; + meta: FamilyMeta; +} diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index 52ce649618a..64bd7ae925d 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -51,7 +51,7 @@ title="clear files" tabindex="0" > - + diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 57c6e23a479..ef2e138c91c 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -27,7 +27,6 @@ import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from './inputGroupType'; import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxTheme, ThemeService } from '../services/theme/theme.service'; -import { IgxIconService } from '../icon/icon.service'; import { Subject, Subscription } from 'rxjs'; @Component({ @@ -219,17 +218,13 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewCheck private platform: PlatformUtil, private cdr: ChangeDetectorRef, private themeService: ThemeService, - private iconService?: IgxIconService ) { + this._theme = this.themeService.globalTheme; + this._subscription = this._theme$.asObservable().subscribe(value => { this._theme = value as IgxTheme; this.cdr.detectChanges(); }); - - this.iconService.addIconRef('clear', 'default', { - name: 'clear', - family: 'material', - }); } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/paginator/pager.component.html b/projects/igniteui-angular/src/lib/paginator/pager.component.html index 34b2cec54a2..7d9e7568250 100644 --- a/projects/igniteui-angular/src/lib/paginator/pager.component.html +++ b/projects/igniteui-angular/src/lib/paginator/pager.component.html @@ -20,7 +20,7 @@ [igxRippleCentered]="true" type="button" > - +
{{ paginator.page + 1 }} @@ -41,7 +41,7 @@ igxIconButton="flat" type="button" > - +