Skip to content

Commit d3808cf

Browse files
adolgachevadolgachev
committed
POC
1 parent 869d4f8 commit d3808cf

File tree

5 files changed

+362
-190
lines changed

5 files changed

+362
-190
lines changed

‎src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
<mat-form-field>
22
<mat-label>Selected tab index</mat-label>
3-
<input matInput type="number" [formControl]="selected">
3+
<input matInput type="number" [formControl]="selected" />
44
</mat-form-field>
55

66
<div>
7-
<button matButton="elevated"
8-
class="example-add-tab-button"
9-
(click)="addTab(selectAfterAdding.checked)">
7+
<button
8+
matButton="elevated"
9+
class="example-add-tab-button"
10+
(click)="addTab(selectAfterAdding._isChecked())"
11+
>
1012
Add new tab
1113
</button>
1214
<mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
1315
</div>
1416

15-
<mat-tab-group [selectedIndex]="selected.value"
16-
(selectedIndexChange)="selected.setValue($event)">
17+
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
1718
@for (tab of tabs; track tab; let index = $index) {
1819
<mat-tab [label]="tab">
1920
Contents for {{tab}} tab
2021

21-
<button matButton="elevated"
22-
class="example-delete-tab-button"
23-
[disabled]="tabs.length === 1"
24-
(click)="removeTab(index)">
22+
<button
23+
matButton="elevated"
24+
class="example-delete-tab-button"
25+
[disabled]="tabs.length === 1"
26+
(click)="removeTab(index)"
27+
>
2528
Delete Tab
2629
</button>
2730
</mat-tab>

‎src/dev-app/expansion/expansion-demo.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<h1>Single Expansion Panel</h1>
22

3-
<mat-expansion-panel class="demo-expansion-width" #myPanel
4-
(afterExpand)="addEvent('afterExpand')"
5-
(afterCollapse)="addEvent('afterCollapse')">
3+
<mat-expansion-panel
4+
class="demo-expansion-width"
5+
#myPanel
6+
(afterExpand)="addEvent('afterExpand')"
7+
(afterCollapse)="addEvent('afterCollapse')"
8+
>
69
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
710
<mat-panel-description>This is a panel description.</mat-panel-description>
811
<mat-panel-title>Panel Title</mat-panel-title>
@@ -19,17 +22,17 @@ <h1>Single Expansion Panel</h1>
1922
</mat-action-row>
2023
</mat-expansion-panel>
2124

22-
<br>
25+
<br />
2326
<mat-form-field>
2427
<mat-label>Collapsed height</mat-label>
25-
<input matInput [(ngModel)]="collapsedHeight">
28+
<input matInput [(ngModel)]="collapsedHeight" />
2629
</mat-form-field>
2730

2831
<mat-form-field>
2932
<mat-label>Expanded height</mat-label>
30-
<input matInput [(ngModel)]="expandedHeight">
33+
<input matInput [(ngModel)]="expandedHeight" />
3134
</mat-form-field>
32-
<br>
35+
<br />
3336

3437
<p>Expansion Panel Animation Events</p>
3538
<code class="demo-expansion-code">
@@ -69,9 +72,14 @@ <h1>matAccordion</h1>
6972
<mat-checkbox [(ngModel)]="panel2.expanded">Panel 2</mat-checkbox>
7073
</div>
7174
</div>
72-
<br>
73-
<mat-accordion [displayMode]="displayMode" [multi]="multi" [hideToggle]="hideToggle"
74-
[togglePosition]="togglePosition" class="demo-expansion-width">
75+
<br />
76+
<mat-accordion
77+
[displayMode]="displayMode"
78+
[multi]="multi"
79+
[hideToggle]="hideToggle"
80+
[togglePosition]="togglePosition"
81+
class="demo-expansion-width"
82+
>
7583
<mat-expansion-panel #panel1>
7684
<mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
7785
<p>This is the content text that makes sense here.</p>
@@ -84,7 +92,7 @@ <h1>matAccordion</h1>
8492
<mat-expansion-panel #panel3>
8593
<mat-expansion-panel-header>Section 3</mat-expansion-panel-header>
8694
<mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>
87-
@if (showButtons.checked) {
95+
@if (showButtons._isChecked()) {
8896
<mat-action-row>
8997
<button matButton (click)="panel2.expanded = true">OPEN SECTION 2</button>
9098
<button matButton (click)="panel3.expanded = false">CLOSE</button>
@@ -133,4 +141,3 @@ <h1>cdkAccordion</h1>
133141
}
134142
</cdk-accordion-item>
135143
</cdk-accordion>
136-

‎src/material/checkbox/checkbox.html‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,61 @@
1-
<div mat-internal-form-field [labelPosition]="labelPosition" (click)="_preventBubblingFromLabel($event)">
1+
<div
2+
mat-internal-form-field
3+
[labelPosition]="_labelPosition()"
4+
(click)="_preventBubblingFromLabel($event)"
5+
>
26
<div #checkbox class="mdc-checkbox">
37
<!-- Render this element first so the input is on top. -->
48
<div class="mat-mdc-checkbox-touch-target" (click)="_onTouchTargetClick()"></div>
5-
<input #input
6-
type="checkbox"
7-
class="mdc-checkbox__native-control"
8-
[class.mdc-checkbox--selected]="checked"
9-
[attr.aria-label]="ariaLabel || null"
10-
[attr.aria-labelledby]="ariaLabelledby"
11-
[attr.aria-describedby]="ariaDescribedby"
12-
[attr.aria-checked]="indeterminate ? 'mixed' : null"
13-
[attr.aria-controls]="ariaControls"
14-
[attr.aria-disabled]="disabled && disabledInteractive ? true : null"
15-
[attr.aria-expanded]="ariaExpanded"
16-
[attr.aria-owns]="ariaOwns"
17-
[attr.name]="name"
18-
[attr.value]="value"
19-
[checked]="checked"
20-
[indeterminate]="indeterminate"
21-
[disabled]="disabled && !disabledInteractive"
22-
[id]="inputId"
23-
[required]="required"
24-
[tabIndex]="disabled && !disabledInteractive ? -1 : tabIndex"
25-
(blur)="_onBlur()"
26-
(click)="_onInputClick()"
27-
(change)="_onInteractionEvent($event)"/>
9+
<input
10+
#input
11+
type="checkbox"
12+
class="mdc-checkbox__native-control"
13+
[class.mdc-checkbox--selected]="_isChecked()"
14+
[attr.aria-label]="_ariaLabel() || null"
15+
[attr.aria-labelledby]="_ariaLabelledby() || null"
16+
[attr.aria-describedby]="_ariaDescribedby() || null"
17+
[attr.aria-checked]="indeterminate ? 'mixed' : null"
18+
[attr.aria-controls]="_ariaControls() || null"
19+
[attr.aria-disabled]="_disabled() && _disabledInteractive() ? true : null"
20+
[attr.aria-expanded]="_ariaExpanded()"
21+
[attr.aria-owns]="_ariaOwns() || null"
22+
[attr.name]="_name() || null"
23+
[attr.value]="_value() || null"
24+
[checked]="_isChecked()"
25+
[indeterminate]="indeterminate"
26+
[disabled]="_disabled() && !_disabledInteractive()"
27+
[id]="inputId()"
28+
[required]="_isRequired()"
29+
[tabIndex]="_disabled() && !_disabledInteractive() ? -1 : _tabIndex()"
30+
(blur)="_onBlur()"
31+
(click)="_onInputClick()"
32+
(change)="_onInteractionEvent($event)"
33+
/>
2834
<div class="mdc-checkbox__ripple"></div>
2935
<div class="mdc-checkbox__background">
30-
<svg class="mdc-checkbox__checkmark"
31-
focusable="false"
32-
viewBox="0 0 24 24"
33-
aria-hidden="true">
34-
<path class="mdc-checkbox__checkmark-path"
35-
fill="none"
36-
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
36+
<svg class="mdc-checkbox__checkmark" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
37+
<path
38+
class="mdc-checkbox__checkmark-path"
39+
fill="none"
40+
d="M1.73,12.91 8.1,19.28 22.79,4.59"
41+
/>
3742
</svg>
3843
<div class="mdc-checkbox__mixedmark"></div>
3944
</div>
40-
<div class="mat-mdc-checkbox-ripple mat-focus-indicator" mat-ripple
45+
<div
46+
class="mat-mdc-checkbox-ripple mat-focus-indicator"
47+
mat-ripple
4148
[matRippleTrigger]="checkbox"
42-
[matRippleDisabled]="disableRipple || disabled"
43-
[matRippleCentered]="true"></div>
49+
[matRippleDisabled]="_disableRipple() || _disabled()"
50+
[matRippleCentered]="true"
51+
></div>
4452
</div>
4553
<!--
4654
Avoid putting a click handler on the <label/> to fix duplicate navigation stop on Talk Back
4755
(#14385). Putting a click handler on the <label/> caused this bug because the browser produced
4856
an unnecessary accessibility tree node.
4957
-->
50-
<label class="mdc-label" #label [for]="inputId">
58+
<label class="mdc-label" #label [for]="inputId()">
5159
<ng-content></ng-content>
5260
</label>
5361
</div>

0 commit comments

Comments
 (0)