Skip to content

Commit 6307d9e

Browse files
ok7saiok7sai
committed
main - 3b39d89 refactor(multiple): move expanded state to each expansion item (#32314)
1 parent 72049d8 commit 6307d9e

42 files changed

Lines changed: 322 additions & 283 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs-content/examples-highlighted/aria/accordion/accordion-configurable/accordion-configurable-example-html.html‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@
33
<span class="hljs-tag">&lt;<span class="hljs-name">mat-checkbox</span> [<span class="hljs-attr">formControl</span>]=<span class="hljs-string">&quot;multi&quot;</span>&gt;</span>Multi<span class="hljs-tag">&lt;/<span class="hljs-name">mat-checkbox</span>&gt;</span>
44
<span class="hljs-tag">&lt;<span class="hljs-name">mat-checkbox</span> [<span class="hljs-attr">formControl</span>]=<span class="hljs-string">&quot;disabled&quot;</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">mat-checkbox</span>&gt;</span>
55
<span class="hljs-tag">&lt;<span class="hljs-name">mat-checkbox</span> [<span class="hljs-attr">formControl</span>]=<span class="hljs-string">&quot;softDisabled&quot;</span>&gt;</span>Soft Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">mat-checkbox</span>&gt;</span>
6-
7-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span> <span class="hljs-attr">subscriptSizing</span>=<span class="hljs-string">&quot;dynamic&quot;</span> <span class="hljs-attr">appearance</span>=<span class="hljs-string">&quot;outline&quot;</span>&gt;</span>
8-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Expanded Items<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
9-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-select</span> [(<span class="hljs-attr">value</span>)]=<span class="hljs-string">&quot;expandedIds&quot;</span> <span class="hljs-attr">multiple</span>&gt;</span>
10-
@for (item of items; track item) {
11-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-option</span> [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{item}}<span class="hljs-tag">&lt;/<span class="hljs-name">mat-option</span>&gt;</span>
12-
}
13-
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-select</span>&gt;</span>
14-
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
156
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
167

178
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
@@ -21,7 +12,6 @@
2112
[<span class="hljs-attr">disabled</span>]=<span class="hljs-string">&quot;disabled.value&quot;</span>
2213
[<span class="hljs-attr">softDisabled</span>]=<span class="hljs-string">&quot;softDisabled.value&quot;</span>
2314
[<span class="hljs-attr">wrap</span>]=<span class="hljs-string">&quot;wrap.value&quot;</span>
24-
[(<span class="hljs-attr">expandedPanels</span>)]=<span class="hljs-string">&quot;expandedIds&quot;</span>
2515
&gt;</span>
2616
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
2717
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>
@@ -40,7 +30,7 @@
4030

4131
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
4232
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>
43-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item2&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>
33+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item2&quot;</span> <span class="hljs-attr">disabled</span> [<span class="hljs-attr">expanded</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
4434
Item 2 Trigger (disabled)
4535
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>{{expansionIcon(&#x27;item2&#x27;)()}}<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
4636
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

‎docs-content/examples-highlighted/aria/accordion/accordion-configurable/accordion-configurable-example-ts.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, model, <span class="hljs-title class_">Signal</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, <span class="hljs-title class_">Signal</span>, viewChildren} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
22
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">FormControl</span>, <span class="hljs-title class_">ReactiveFormsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
33
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatCheckboxModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/checkbox&#x27;</span>;
44
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatFormFieldModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
@@ -36,7 +36,13 @@
3636
multi = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormControl</span>(<span class="hljs-literal">true</span>, {<span class="hljs-attr">nonNullable</span>: <span class="hljs-literal">true</span>});
3737
disabled = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormControl</span>(<span class="hljs-literal">false</span>, {<span class="hljs-attr">nonNullable</span>: <span class="hljs-literal">true</span>});
3838
softDisabled = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormControl</span>(<span class="hljs-literal">true</span>, {<span class="hljs-attr">nonNullable</span>: <span class="hljs-literal">true</span>});
39-
expandedIds = model&lt;<span class="hljs-built_in">string</span>[]&gt;([<span class="hljs-string">&#x27;item1&#x27;</span>]);
39+
40+
triggers = <span class="hljs-title function_">viewChildren</span>(<span class="hljs-title class_">AccordionTrigger</span>);
41+
expandedIds = <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span>
42+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">triggers</span>()
43+
.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">expanded</span>())
44+
.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">panelId</span>()),
45+
);
4046

4147
<span class="hljs-comment">// Example items</span>
4248
items = [<span class="hljs-string">&#x27;item1&#x27;</span>, <span class="hljs-string">&#x27;item2&#x27;</span>, <span class="hljs-string">&#x27;item3&#x27;</span>, <span class="hljs-string">&#x27;item4&#x27;</span>, <span class="hljs-string">&#x27;item5&#x27;</span>];

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example-html.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-group&quot;</span>
44
[<span class="hljs-attr">multiExpandable</span>]=<span class="hljs-string">&quot;true&quot;</span>
55
[<span class="hljs-attr">softDisabled</span>]=<span class="hljs-string">&quot;true&quot;</span>
6-
[(<span class="hljs-attr">expandedPanels</span>)]=<span class="hljs-string">&quot;expandedIds&quot;</span>
76
&gt;</span>
87
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
98
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example-ts.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, model, <span class="hljs-title class_">Signal</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, <span class="hljs-title class_">Signal</span>, viewChildren} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
22
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
33
<span class="hljs-keyword">import</span> {
44
<span class="hljs-title class_">AccordionGroup</span>,
@@ -15,7 +15,12 @@
1515
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatIconModule</span>, <span class="hljs-title class_">AccordionGroup</span>, <span class="hljs-title class_">AccordionTrigger</span>, <span class="hljs-title class_">AccordionPanel</span>, <span class="hljs-title class_">AccordionContent</span>],
1616
})
1717
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AccordionDisabledFocusableExample</span> {
18-
expandedIds = model&lt;<span class="hljs-built_in">string</span>[]&gt;([]);
18+
triggers = <span class="hljs-title function_">viewChildren</span>(<span class="hljs-title class_">AccordionTrigger</span>);
19+
expandedIds = <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span>
20+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">triggers</span>()
21+
.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">expanded</span>())
22+
.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">panelId</span>()),
23+
);
1924

2025
<span class="hljs-title function_">expansionIcon</span>(<span class="hljs-attr">item</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">Signal</span>&lt;<span class="hljs-built_in">string</span>&gt; {
2126
<span class="hljs-keyword">return</span> <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">expandedIds</span>().<span class="hljs-title function_">includes</span>(item) ? <span class="hljs-string">&#x27;expand_less&#x27;</span> : <span class="hljs-string">&#x27;expand_more&#x27;</span>));

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example-html.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-group&quot;</span>
44
[<span class="hljs-attr">multiExpandable</span>]=<span class="hljs-string">&quot;true&quot;</span>
55
[<span class="hljs-attr">softDisabled</span>]=<span class="hljs-string">&quot;false&quot;</span>
6-
[(<span class="hljs-attr">expandedPanels</span>)]=<span class="hljs-string">&quot;expandedIds&quot;</span>
76
&gt;</span>
87
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
98
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example-ts.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, model, <span class="hljs-title class_">Signal</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, <span class="hljs-title class_">Signal</span>, viewChildren} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
22
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
33
<span class="hljs-keyword">import</span> {
44
<span class="hljs-title class_">AccordionGroup</span>,
@@ -15,7 +15,12 @@
1515
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatIconModule</span>, <span class="hljs-title class_">AccordionGroup</span>, <span class="hljs-title class_">AccordionTrigger</span>, <span class="hljs-title class_">AccordionPanel</span>, <span class="hljs-title class_">AccordionContent</span>],
1616
})
1717
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AccordionDisabledSkippedExample</span> {
18-
expandedIds = model&lt;<span class="hljs-built_in">string</span>[]&gt;([]);
18+
triggers = <span class="hljs-title function_">viewChildren</span>(<span class="hljs-title class_">AccordionTrigger</span>);
19+
expandedIds = <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span>
20+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">triggers</span>()
21+
.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">expanded</span>())
22+
.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">panelId</span>()),
23+
);
1924

2025
<span class="hljs-title function_">expansionIcon</span>(<span class="hljs-attr">item</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">Signal</span>&lt;<span class="hljs-built_in">string</span>&gt; {
2126
<span class="hljs-keyword">return</span> <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">expandedIds</span>().<span class="hljs-title function_">includes</span>(item) ? <span class="hljs-string">&#x27;expand_less&#x27;</span> : <span class="hljs-string">&#x27;expand_more&#x27;</span>));

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled/accordion-disabled-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngAccordionGroup</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-group&quot;</span> [(<span class="hljs-attr">expandedPanels</span>)]=<span class="hljs-string">&quot;expandedIds&quot;</span> [<span class="hljs-attr">disabled</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
1+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngAccordionGroup</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-group&quot;</span> [<span class="hljs-attr">disabled</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
22
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
33
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>
4-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item1&quot;</span>&gt;</span>
4+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item1&quot;</span> [<span class="hljs-attr">expanded</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
55
Item 1 Trigger
66
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>{{expansionIcon(&#x27;item1&#x27;)()}}<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
77
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

‎docs-content/examples-highlighted/aria/accordion/accordion-disabled/accordion-disabled-example-ts.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, model, <span class="hljs-title class_">Signal</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>, computed, <span class="hljs-title class_">Signal</span>, viewChildren} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
22
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
33
<span class="hljs-keyword">import</span> {
44
<span class="hljs-title class_">AccordionGroup</span>,
@@ -15,7 +15,12 @@
1515
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatIconModule</span>, <span class="hljs-title class_">AccordionGroup</span>, <span class="hljs-title class_">AccordionTrigger</span>, <span class="hljs-title class_">AccordionPanel</span>, <span class="hljs-title class_">AccordionContent</span>],
1616
})
1717
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AccordionDisabledExample</span> {
18-
expandedIds = model&lt;<span class="hljs-built_in">string</span>[]&gt;([<span class="hljs-string">&#x27;item1&#x27;</span>]);
18+
triggers = <span class="hljs-title function_">viewChildren</span>(<span class="hljs-title class_">AccordionTrigger</span>);
19+
expandedIds = <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span>
20+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">triggers</span>()
21+
.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">expanded</span>())
22+
.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">t</span> =&gt;</span> t.<span class="hljs-title function_">panelId</span>()),
23+
);
1924

2025
<span class="hljs-title function_">expansionIcon</span>(<span class="hljs-attr">item</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">Signal</span>&lt;<span class="hljs-built_in">string</span>&gt; {
2126
<span class="hljs-keyword">return</span> <span class="hljs-title function_">computed</span>(<span class="hljs-function">() =&gt;</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">expandedIds</span>().<span class="hljs-title function_">includes</span>(item) ? <span class="hljs-string">&#x27;expand_less&#x27;</span> : <span class="hljs-string">&#x27;expand_more&#x27;</span>));

0 commit comments

Comments
 (0)