Skip to content

Commit 31152bb

Browse files
angular-robotangular-robot
committed
main - 6869909 build: update cross-repo angular dependencies (#32028)
1 parent e7bba27 commit 31152bb

13 files changed

Lines changed: 124 additions & 13 deletions

File tree

‎docs-content/examples-highlighted/material/sort/index-ts.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SortOverviewExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./sort-overview/sort-overview-example&#x27;</span>;
22
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SortHarnessExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./sort-harness/sort-harness-example&#x27;</span>;
3+
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">SortCustomIconExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./sort-custom-icon/sort-custom-icon-example&#x27;</span>;

‎docs-content/examples-highlighted/material/sort/sort-custom-icon/sort-custom-icon-example-html.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">matSort</span> <span class="hljs-attr">matSortActive</span>=<span class="hljs-string">&quot;emoji&quot;</span> <span class="hljs-attr">matSortDirection</span>=<span class="hljs-string">&quot;asc&quot;</span>&gt;</span>
2+
<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
3+
<span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">mat-sort-header</span>=<span class="hljs-string">&quot;emoji&quot;</span>&gt;</span>
4+
Emoji icon
5+
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">matSortHeaderIcon</span>&gt;</span>⬆️<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
6+
<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
7+
<span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">mat-sort-header</span>=<span class="hljs-string">&quot;material&quot;</span>&gt;</span>
8+
Material Icon
9+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">matSortHeaderIcon</span>&gt;</span>keyboard_arrow_up<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
10+
<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
11+
<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
12+
13+
<span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
14+
<span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
15+
<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Lorem, ipsum dolor sit amet.<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
16+
<span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Lorem, ipsum dolor sit amet.<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
17+
<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
18+
<span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
19+
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>

‎docs-content/examples-highlighted/material/sort/sort-custom-icon/sort-custom-icon-example-ts.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIcon</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
3+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatSortModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/sort&#x27;</span>;
4+
5+
<span class="hljs-comment">/**
6+
* <span class="hljs-doctag">@title</span> Sort header with a custom icon
7+
*/</span>
8+
<span class="hljs-meta">@Component</span>({
9+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;sort-custom-icon-example&#x27;</span>,
10+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;sort-custom-icon-example.html&#x27;</span>,
11+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatSortModule</span>, <span class="hljs-title class_">MatIcon</span>],
12+
})
13+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SortCustomIconExample</span> {}

‎docs-content/examples-source/material/sort/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export {SortOverviewExample} from './sort-overview/sort-overview-example';
22
export {SortHarnessExample} from './sort-harness/sort-harness-example';
3+
export {SortCustomIconExample} from './sort-custom-icon/sort-custom-icon-example';

‎docs-content/examples-source/material/sort/sort-custom-icon/sort-custom-icon-example.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<table matSort matSortActive="emoji" matSortDirection="asc">
2+
<tr>
3+
<th mat-sort-header="emoji">
4+
Emoji icon
5+
<span matSortHeaderIcon>⬆️</span>
6+
</th>
7+
<th mat-sort-header="material">
8+
Material Icon
9+
<mat-icon matSortHeaderIcon>keyboard_arrow_up</mat-icon>
10+
</th>
11+
</tr>
12+
13+
<tbody>
14+
<tr>
15+
<td>Lorem, ipsum dolor sit amet.</td>
16+
<td>Lorem, ipsum dolor sit amet.</td>
17+
</tr>
18+
</tbody>
19+
</table>

‎docs-content/examples-source/material/sort/sort-custom-icon/sort-custom-icon-example.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component} from '@angular/core';
2+
import {MatIcon} from '@angular/material/icon';
3+
import {MatSortModule} from '@angular/material/sort';
4+
5+
/**
6+
* @title Sort header with a custom icon
7+
*/
8+
@Component({
9+
selector: 'sort-custom-icon-example',
10+
templateUrl: 'sort-custom-icon-example.html',
11+
imports: [MatSortModule, MatIcon],
12+
})
13+
export class SortCustomIconExample {}

‎docs-content/overviews/material/sort/sort.md.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,15 @@ <h4 id="using-sort-with-the-mat-table" class="docs-header-link">
4444
</div><div material-docs-example="table-sorting"></div><div class="docs-markdown">
4545

4646

47+
<h4 id="customizing-the-icon" class="docs-header-link">
48+
<span header-link="customizing-the-icon"></span>
49+
Customizing the icon
50+
</h4>
51+
<p>You can set your own icon for a <code>mat-sort-header</code> by projecting in an element with the
52+
<code>matSortHeaderIcon</code> attribute.</p>
53+
</div><div material-docs-example="sort-custom-icon"></div><div class="docs-markdown">
54+
55+
4756
<h3 id="accessibility" class="docs-header-link">
4857
<span header-link="accessibility"></span>
4958
Accessibility
@@ -60,5 +69,5 @@ <h3 id="accessibility" class="docs-header-link">
6069
remedy this, use the <code>matSortChange</code> event on the <code>MatSort</code> directive to announce state
6170
updates with the <code>LiveAnnouncer</code> service from <code>@angular/cdk/a11y</code>.</p>
6271
<p>If your application contains many tables and sort headers, consider creating a custom
63-
directives to consistently apply <code>sortActionDescription</code> and announce sort state changes. </p>
72+
directives to consistently apply <code>sortActionDescription</code> and announce sort state changes.</p>
6473
</div>

‎fesm2022/components-examples.mjs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4488,6 +4488,19 @@ const EXAMPLE_COMPONENTS = {
44884488
"primaryFile": "snack-bar-position-example.ts",
44894489
"importPath": "material/snack-bar"
44904490
},
4491+
"sort-custom-icon": {
4492+
"packagePath": "material/sort/sort-custom-icon",
4493+
"title": "Sort header with a custom icon",
4494+
"componentName": "SortCustomIconExample",
4495+
"files": [
4496+
"sort-custom-icon-example.ts",
4497+
"sort-custom-icon-example.html"
4498+
],
4499+
"selector": "sort-custom-icon-example",
4500+
"additionalComponents": [],
4501+
"primaryFile": "sort-custom-icon-example.ts",
4502+
"importPath": "material/sort"
4503+
},
44914504
"sort-harness": {
44924505
"packagePath": "material/sort/sort-harness",
44934506
"title": "Testing with MatSortHarness",
@@ -6432,6 +6445,8 @@ async function loadExample(id) {
64326445
return import('@angular/components-examples/material/snack-bar');
64336446
case 'snack-bar-position':
64346447
return import('@angular/components-examples/material/snack-bar');
6448+
case 'sort-custom-icon':
6449+
return import('@angular/components-examples/material/sort');
64356450
case 'sort-harness':
64366451
return import('@angular/components-examples/material/sort');
64376452
case 'sort-overview':

‎fesm2022/components-examples.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fesm2022/material-sort.mjs‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
22
import { Component, signal } from '@angular/core';
33
import * as i1 from '@angular/material/sort';
44
import { MatSortModule } from '@angular/material/sort';
5+
import { MatIcon } from '@angular/material/icon';
56

67
/**
78
* @title Sorting overview
@@ -87,5 +88,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
8788
args: [{ selector: 'sort-harness-example', imports: [MatSortModule], template: "<table matSort (matSortChange)=\"sortData($event)\">\n <tr>\n <th mat-sort-header=\"name\">Dessert</th>\n <th mat-sort-header=\"calories\">Calories</th>\n <th mat-sort-header=\"fat\" [disabled]=\"disableThirdHeader()\">Fat</th>\n <th mat-sort-header=\"carbs\">Carbs</th>\n <th mat-sort-header=\"protein\">Protein</th>\n </tr>\n\n @for (dessert of sortedData; track dessert) {\n <tr>\n <td>{{dessert.name}}</td>\n <td>{{dessert.calories}}</td>\n <td>{{dessert.fat}}</td>\n <td>{{dessert.carbs}}</td>\n <td>{{dessert.protein}}</td>\n </tr>\n }\n</table>\n" }]
8889
}] });
8990

90-
export { SortHarnessExample, SortOverviewExample };
91+
/**
92+
* @title Sort header with a custom icon
93+
*/
94+
class SortCustomIconExample {
95+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SortCustomIconExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
96+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", type: SortCustomIconExample, isStandalone: true, selector: "sort-custom-icon-example", ngImport: i0, template: "<table matSort matSortActive=\"emoji\" matSortDirection=\"asc\">\n <tr>\n <th mat-sort-header=\"emoji\">\n Emoji icon\n <span matSortHeaderIcon>\u2B06\uFE0F</span>\n </th>\n <th mat-sort-header=\"material\">\n Material Icon\n <mat-icon matSortHeaderIcon>keyboard_arrow_up</mat-icon>\n </th>\n </tr>\n\n <tbody>\n <tr>\n <td>Lorem, ipsum dolor sit amet.</td>\n <td>Lorem, ipsum dolor sit amet.</td>\n </tr>\n </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
97+
}
98+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: SortCustomIconExample, decorators: [{
99+
type: Component,
100+
args: [{ selector: 'sort-custom-icon-example', imports: [MatSortModule, MatIcon], template: "<table matSort matSortActive=\"emoji\" matSortDirection=\"asc\">\n <tr>\n <th mat-sort-header=\"emoji\">\n Emoji icon\n <span matSortHeaderIcon>\u2B06\uFE0F</span>\n </th>\n <th mat-sort-header=\"material\">\n Material Icon\n <mat-icon matSortHeaderIcon>keyboard_arrow_up</mat-icon>\n </th>\n </tr>\n\n <tbody>\n <tr>\n <td>Lorem, ipsum dolor sit amet.</td>\n <td>Lorem, ipsum dolor sit amet.</td>\n </tr>\n </tbody>\n</table>\n" }]
101+
}] });
102+
103+
export { SortCustomIconExample, SortHarnessExample, SortOverviewExample };
91104
//# sourceMappingURL=material-sort.mjs.map

0 commit comments

Comments
 (0)