Merge branch '17.2.x' into bpachilova/fix-col-group-hidden-initially-17.2.x

ddaribo · web-flow · commit 6ce611972c5c · 2024-09-18T14:57:55.000+03:00
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
@@ -910,10 +910,14 @@
         }
     }
 
-    %form-group-label--float {
-        --floating-label-position: -73%;
-        transform: translateY(var(--floating-label-position));
-        font-size: rem(12px);
+    @if $variant == 'material' {
+        %form-group-label--float {
+            --floating-label-position: -73%;
+
+            @include type-style('caption');
+
+            transform: translateY(var(--floating-label-position));
+        }
     }
 
     %form-group-label--focused-border,
@@ -972,8 +976,8 @@
 
     %form-group-label--float-border {
         --label-position: #{sizable(18px, 22px, 26px)};
+
         transform: translateY(calc(var(--label-position) * -1));
-        font-size: rem(12px);
         margin-top: 0;
         overflow: hidden;
         will-change: font-size, color, transform;
@@ -1718,8 +1722,6 @@
     // Label
     %fluent-label {
         display: block;
-        font-size: rem(14px);
-        font-weight: 600;
         position: static;
         transform: translateY(0);
         transform-origin: top left;
@@ -1939,13 +1941,11 @@
         display: block;
         color: var-get($theme, 'idle-secondary-color');
         padding: 0;
-        line-height: rem(24px);
         transform: translateY(0);
         transform-origin: top left;
         margin-block-start: 0 !important;
         margin-block-end: rem(4px);
         height: auto;
-        font-size: rem(16px);
 
         [dir='rtl'] & {
             transform-origin: top right;
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
@@ -50,21 +50,33 @@
         color: var-get($theme, 'color');
         max-width: 100%;
         line-height: normal;
-        font-size: rem(16px);
 
         [dir='rtl'] & {
             transform-origin: top right;
         }
 
-        @if $variant == 'fluent' or $variant == 'indigo-design' {
-            font-size: rem(14px);
-            font-weight: 600;
+        @if $variant != 'material' {
             height: auto;
         }
+    }
+}
 
-        @if $variant == 'bootstrap' {
-            line-height: rem(24px);
-            height: auto;
+/// Adds typography styles for the igx-label component.
+/// Uses the 'caption'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
+@mixin label-typography(
+    $categories: (
+        label: 'subtitle-1',
+    )
+) {
+    $label: map.get($categories, 'label');
+
+    %label-base {
+        @include type-style($label) {
+            margin: 0;
         }
     }
 }
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
@@ -30,6 +30,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography();
@@ -108,4 +109,7 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'body-1'
+    ));
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -104,4 +105,7 @@
     ));
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'subtitle-2'
+    ));
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography($categories: (
@@ -109,4 +110,7 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'caption'
+    ));
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -62,4 +63,5 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography();
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -178,8 +178,6 @@ import { IgxGridCellComponent } from './cell.component';
 import { IgxGridValidationService } from './grid/grid-validation.service';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 
-/*@__PURE__*/IgcTrialWatermark.register();
-
 interface IMatchInfoCache {
     row: any;
     index: number;
@@ -3335,6 +3333,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
         this._transactions.cloneStrategy = this.dataCloneStrategy;
         this.cdr.detach();
+        IgcTrialWatermark.register();
     }
 
     /**
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
@@ -2125,6 +2125,34 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(consoleSpy).not.toHaveBeenCalled();
         }));
 
+        it('should not trigger accessibility errors when interacting with the edit icon in the advanced filtering expression chip', fakeAsync(() => {
+            // Apply advanced filter through API to generate chips.
+            const tree = new FilteringExpressionsTree(FilteringLogic.Or);
+            tree.filteringOperands.push({
+                fieldName: 'Downloads', searchVal: 1, condition: IgxNumberFilteringOperand.instance().condition('equals')
+            });
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            tick(50);
+            fix.detectChanges();
+
+            // Hover over the first visible expression chip to show edit icon.
+            const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0];
+            expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
+            tick(50);
+            fix.detectChanges();
+
+            // Click the edit icon on the hovered and focused edit icon.
+            const editIcon = GridFunctions.getAdvancedFilteringTreeExpressionEditIcon(fix, [0]);
+            tick(50);
+            fix.detectChanges();
+            expect(editIcon.getAttribute('aria-hidden')).toBe('true');
+            expect(editIcon.getAttribute('tabIndex')).toBeFalsy();
+        }));
+
         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.html b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
@@ -147,28 +147,30 @@ <h6 class="igx-filter-empty__title">
                     expressionItem.hovered
                 "
             >
-                <igx-icon
-                    tabindex="0"
-                    (keydown)="invokeClick($event)"
-                    (click)="enterExpressionEdit(expressionItem)"
-                >
-                    edit
-                </igx-icon>
-                <igx-icon
-                    tabindex="0"
-                    (keydown)="invokeClick($event)"
-                    (click)="enterExpressionAdd(expressionItem)"
-                    *ngIf="
-                        !expressionItem.inAddMode &&
-                        (expressionItem.parent !== currentGroup ||
-                            expressionItem !==
-                                currentGroup.children[
-                                    currentGroup.children.length - 1
-                                ])
-                    "
-                >
-                    add
-                </igx-icon>
+                <span tabindex="0">
+                    <igx-icon
+                        (keydown)="invokeClick($event)"
+                        (click)="enterExpressionEdit(expressionItem)"
+                    >
+                        edit
+                    </igx-icon>
+                </span>
+                <span tabindex="0">
+                    <igx-icon
+                        (keydown)="invokeClick($event)"
+                        (click)="enterExpressionAdd(expressionItem)"
+                        *ngIf="
+                            !expressionItem.inAddMode &&
+                            (expressionItem.parent !== currentGroup ||
+                                expressionItem !==
+                                    currentGroup.children[
+                                        currentGroup.children.length - 1
+                                    ])
+                        "
+                    >
+                        add
+                    </igx-icon>
+                </span>
             </div>
         </div>
 
diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts
@@ -913,6 +913,21 @@ describe('Excel Exporter', () => {
 
             await exportAndVerify(hGrid, options, actualData.exportHierarchicalDataWithSkippedColumns);
         });
+
+        it('should export hierarchical grid with all child rows canceled.', async () => {
+            exporter.rowExporting.subscribe((args: IRowExportingEventArgs) => {
+                if (args.owner?.key === "Albums" ||
+                    args.owner?.key === "Songs" ||
+                    args.owner?.key === "Tours" ||
+                    args.owner?.key === "TourData") {
+                        args.cancel = true;
+                    }
+            });
+
+            fix.detectChanges();
+
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalDataWithSkippedRows);
+        });
     });
 
     describe('', () => {
diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.spec.ts
@@ -1,6 +1,7 @@
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { IgxExcelExporterService } from './excel-exporter';
 import { IgxExcelExporterOptions } from './excel-exporter-options';
+import { IColumnExportingEventArgs } from '../exporter-common/base-export-service';
 import { ZipWrapper } from './zip-verification-wrapper.spec';
 import { FileContentData } from './test-data.service.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
@@ -117,6 +118,22 @@ describe('Excel Exporter', () => {
         }
     });
 
+    it('should export data successfully when \'columnExporting\' is canceled.', async () => {
+        options.columnWidth = 50;
+
+        exporter.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
+            if (args.field === 'phone') {
+                args.cancel = true;
+            }
+        });
+
+        const wrapper = await getExportedData(SampleTestData.contactsData(), options);
+
+        wrapper.verifyStructure();
+        await wrapper.verifyTemplateFilesContent();
+        await wrapper.verifyDataFilesContent(actualData.contactsDataSkippedColumnContent);
+    });
+
     const getExportedData = (data: any[], exportOptions: IgxExcelExporterOptions) => {
         const result = new Promise<ZipWrapper>((resolve) => {
             exporter.exportEnded.pipe(first()).subscribe((value) => {
diff --git a/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts b/projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts
@@ -435,6 +435,26 @@ export class FileContentData {
         return this.createData();
     }
 
+    public get contactsDataSkippedColumnContent() {
+        this._sharedStringsData = `count="6" uniqueCount="6"><si><t>name</t></si><si><t>Terrance Orta</t></si>` +
+            `<si><t>Richard Mahoney LongerName</t></si><si><t>Donna Price</t></si><si><t></t></si>` +
+            `<si><t>Dorothy H. Spencer</t></si>`;
+
+        this._tableData = `ref="A1:A6" totalsRowShown="0">
+        <autoFilter ref="A1:A6"/><tableColumns count="1"><tableColumn id="1" name="name"/></tableColumns>`;
+
+        this._worksheetData =
+            `<dimension ref="A1:A6"/><sheetViews><sheetView tabSelected="1" workbookViewId="0"></sheetView></sheetViews>` +
+            `<sheetFormatPr defaultRowHeight="15" x14ac:dyDescent="0.25"/><cols><col min="1" max="1" width="50" customWidth` +
+            `="1"/></cols><sheetData><row r="1"><c r="A1" t="s"><v>0</v>` +
+            `</c></row><row r="2"><c r="A2" t="s"><v>1</v></c></row><row r="3">` +
+            `<c r="A3" t="s"><v>2</v></c></row><row r="4"><c r="A4" t="s"><v>3</v></c>` +
+            `</row><row r="5"><c r="A5" t="s"><v>4</v></c></row><row r="6"><c r="A6" t="s"><v>5</v></c>` +
+            `</row></sheetData>`;
+
+        return this.createData();
+    }
+
     public get noHeadersStringDataContent() {
         this._sharedStringsData = `count="6" uniqueCount="6"><si><t>Column1</t></si><si><t>Terrance Orta</t></si>` +
             `<si><t>Richard Mahoney LongerName</t></si><si><t>Donna Price</t></si><si><t>Lisa Landers</t></si><si><t>` +
@@ -1532,6 +1552,19 @@ export class FileContentData {
         return this.createData();
     }
 
+    public get exportHierarchicalDataWithSkippedRows() {
+        this._sharedStringsData =
+            `count="7" uniqueCount="7"><si><t>Artist</t></si><si><t>Debut</t></si><si><t>Grammy Nominations</t></si><si><t>Grammy Awards</t></si><si><t>Naomí Yepes</t></si><si><t>Babila Ebwélé</t></si><si><t>Chloe</t></si>`;
+
+        this._worksheetData =
+            `<sheetViews><sheetView tabSelected="1" workbookViewId="0"></sheetView></sheetViews>
+            <sheetFormatPr defaultRowHeight="15"  x14ac:dyDescent="0.25"/>
+            <cols><col min="1" max="4" width="20" customWidth="1"/></cols>
+            <sheetData><row r="1"><c r="A1" s="3" t="s"><v>0</v></c><c r="B1" s="3" t="s"><v>1</v></c><c r="C1" s="3" t="s"><v>2</v></c><c r="D1" s="3" t="s"><v>3</v></c></row><row r="2"><c r="A2" t="s"><v>4</v></c><c r="B2" s="1"><v>2011</v></c><c r="C2" s="1"><v>6</v></c><c r="D2" s="1"><v>0</v></c></row><row r="3"><c r="A3" t="s"><v>5</v></c><c r="B3" s="1"><v>2009</v></c><c r="C3" s="1"><v>0</v></c><c r="D3" s="1"><v>11</v></c></row><row r="4"><c r="A4" t="s"><v>6</v></c><c r="B4" s="1"><v>2015</v></c><c r="C4" s="1"><v>3</v></c><c r="D4" s="1"><v>1</v></c></row></sheetData>`;
+
+        return this.createData();
+    }
+
     public get exportMultiColumnHeadersWithSkippedColumnData() {
         this._sharedStringsData =
             `count="224" uniqueCount="200"><si><t>CustomerID</t></si><si><t>General Information</t></si><si><t>Address Information</t></si><si><t>CompanyName</t></si><si><t>Personal Details</t></si><si><t>Location</t></si><si><t>Contact Information</t></si><si><t>ContactName</t></si><si><t>Address</t></si><si><t>City</t></si><si><t>PostalCode</t></si><si><t>Country</t></si><si><t>Phone</t></si><si><t>Fax</t></si><si><t>Alfreds Futterkiste</t></si><si><t>Maria Anders</t></si><si><t>Obere Str. 57</t></si><si><t>Berlin</t></si><si><t>12209</t></si><si><t>Germany</t></si><si><t>030-0074321</t></si><si><t>030-0076545</t></si><si><t>Ana Trujillo Emparedados y helados</t></si><si><t>Ana Trujillo</t></si><si><t>Avda. de la Constitución 2222</t></si><si><t>México D.F.</t></si><si><t>05021</t></si><si><t>Mexico</t></si><si><t>(5) 555-4729</t></si><si><t>(5) 555-3745</t></si><si><t>Antonio Moreno Taquería</t></si><si><t>Antonio Moreno</t></si><si><t>Mataderos 2312</t></si><si><t>05023</t></si><si><t>(5) 555-3932</t></si><si><t>Around the Horn</t></si><si><t>Thomas Hardy</t></si><si><t>120 Hanover Sq.</t></si><si><t>London</t></si><si><t>WA1 1DP</t></si><si><t>UK</t></si><si><t>(171) 555-7788</t></si><si><t>(171) 555-6750</t></si><si><t>Berglunds snabbköp</t></si><si><t>Christina Berglund</t></si><si><t>Berguvsvägen 8</t></si><si><t>Luleå</t></si><si><t>S-958 22</t></si><si><t>Sweden</t></si><si><t>0921-12 34 65</t></si><si><t>0921-12 34 67</t></si><si><t>Blauer See Delikatessen</t></si><si><t>Hanna Moos</t></si><si><t>Forsterstr. 57</t></si><si><t>Mannheim</t></si><si><t>68306</t></si><si><t>0621-08460</t></si><si><t>0621-08924</t></si><si><t>Blondesddsl père et fils</t></si><si><t>Frédérique Citeaux</t></si><si><t>24, place Kléber</t></si><si><t>Strasbourg</t></si><si><t>67000</t></si><si><t>France</t></si><si><t>88.60.15.31</t></si><si><t>88.60.15.32</t></si><si><t>Bólido Comidas preparadas</t></si><si><t>Martín Sommer</t></si><si><t>C/ Araquil, 67</t></si><si><t>Madrid</t></si><si><t>28023</t></si><si><t>Spain</t></si><si><t>(91) 555 22 82</t></si><si><t>(91) 555 91 99</t></si><si><t>Bon app&apos;</t></si><si><t>Laurence Lebihan</t></si><si><t>12, rue des Bouchers</t></si><si><t>Marseille</t></si><si><t>13008</t></si><si><t>91.24.45.40</t></si><si><t>91.24.45.41</t></si><si><t>Bottom-Dollar Markets</t></si><si><t>Elizabeth Lincoln</t></si><si><t>23 Tsawassen Blvd.</t></si><si><t>Tsawassen</t></si><si><t>T2F 8M4</t></si><si><t>Canada</t></si><si><t>(604) 555-4729</t></si><si><t>(604) 555-3745</t></si><si><t>B&apos;s Beverages</t></si><si><t>Victoria Ashworth</t></si><si><t>Fauntleroy Circus</t></si><si><t>EC2 5NT</t></si><si><t>(171) 555-1212</t></si><si><t>Cactus Comidas para llevar</t></si><si><t>Patricio Simpson</t></si><si><t>Cerrito 333</t></si><si><t>Buenos Aires</t></si><si><t>1010</t></si><si><t>Argentina</t></si><si><t>(1) 135-5555</t></si><si><t>(1) 135-4892</t></si><si><t>Centro comercial Moctezuma</t></si><si><t>Francisco Chang</t></si><si><t>Sierras de Granada 9993</t></si><si><t>05022</t></si><si><t>(5) 555-3392</t></si><si><t>(5) 555-7293</t></si><si><t>Chop-suey Chinese</t></si><si><t>Yang Wang</t></si><si><t>Hauptstr. 29</t></si><si><t>Bern</t></si><si><t>3012</t></si><si><t>Switzerland</t></si><si><t>0452-076545</t></si><si><t>Comércio Mineiro</t></si><si><t>Pedro Afonso</t></si><si><t>Av. dos Lusíadas, 23</t></si><si><t>Sao Paulo</t></si><si><t>05432-043</t></si><si><t>Brazil</t></si><si><t>(11) 555-7647</t></si><si><t>Consolidated Holdings</t></si><si><t>Elizabeth Brown</t></si><si><t>Berkeley Gardens 12 Brewery</t></si><si><t>WX1 6LT</t></si><si><t>(171) 555-2282</t></si><si><t>(171) 555-9199</t></si><si><t>Drachenblut Delikatessen</t></si><si><t>Sven Ottlieb</t></si><si><t>Walserweg 21</t></si><si><t>Aachen</t></si><si><t>52066</t></si><si><t>0241-039123</t></si><si><t>0241-059428</t></si><si><t>Du monde entier</t></si><si><t>Janine Labrune</t></si><si><t>67, rue des Cinquante Otages</t></si><si><t>Nantes</t></si><si><t>44000</t></si><si><t>40.67.88.88</t></si><si><t>40.67.89.89</t></si><si><t>Eastern Connection</t></si><si><t>Ann Devon</t></si><si><t>35 King George</t></si><si><t>WX3 6FW</t></si><si><t>(171) 555-0297</t></si><si><t>(171) 555-3373</t></si><si><t>Ernst Handel</t></si><si><t>Roland Mendel</t></si><si><t>Kirchgasse 6</t></si><si><t>Graz</t></si><si><t>8010</t></si><si><t>Austria</t></si><si><t>7675-3425</t></si><si><t>7675-3426</t></si><si><t>Familia Arquibaldo</t></si><si><t>Aria Cruz</t></si><si><t>Rua Orós, 92</t></si><si><t>05442-030</t></si><si><t>(11) 555-9857</t></si><si><t>FISSA Fabrica Inter. Salchichas S.A.</t></si><si><t>Diego Roel</t></si><si><t>C/ Moralzarzal, 86</t></si><si><t>28034</t></si><si><t>(91) 555 94 44</t></si><si><t>(91) 555 55 93</t></si><si><t>Folies gourmandes</t></si><si><t>Martine Rancé</t></si><si><t>184, chaussée de Tournai</t></si><si><t>Lille</t></si><si><t>59000</t></si><si><t>20.16.10.16</t></si><si><t>20.16.10.17</t></si><si><t>Folk och fä HB</t></si><si><t>Maria Larsson</t></si><si><t>Åkergatan 24</t></si><si><t>Bräcke</t></si><si><t>S-844 67</t></si><si><t>0695-34 67 21</t></si><si><t>Frankenversand</t></si><si><t>Peter Franken</t></si><si><t>Berliner Platz 43</t></si><si><t>München</t></si><si><t>80805</t></si><si><t>089-0877310</t></si><si><t>089-0877451</t></si><si><t>France restauration</t></si><si><t>Carine Schmitt</t></si><si><t>54, rue Royale</t></si><si><t>40.32.21.21</t></si><si><t>40.32.21.20</t></si><si><t>Franchi S.p.A.</t></si><si><t>Paolo Accorti</t></si><si><t>Via Monte Bianco 34</t></si><si><t>Torino</t></si><si><t>10100</t></si><si><t>Italy</t></si><si><t>011-4988260</t></si><si><t>011-4988261</t></si>`;
diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
diff --git a/src/app/label/label.sample.html b/src/app/label/label.sample.html
diff --git a/src/app/label/label.sample.scss b/src/app/label/label.sample.scss
diff --git a/src/app/label/label.sample.ts b/src/app/label/label.sample.ts
