Skip to content

Commit c063be0

Browse files
wagnermacielwagnermaciel
committed
main - ccd0e07 refactor(aria/toolbar): large rework of toolbar internals (#32236)
1 parent 8dd881c commit c063be0

File tree

37 files changed

+1884
-917
lines changed

37 files changed

+1884
-917
lines changed

‎docs-content/examples-highlighted/aria/toolbar/index-ts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarBasicVerticalExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-basic-vertical/toolbar-basic-vertical-example&#x27;</span>;
33
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarConfigurableExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-configurable/toolbar-configurable-example&#x27;</span>;
44
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarRtlExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-rtl/toolbar-rtl-example&#x27;</span>;
5-
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarSoftDisabledExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-soft-disabled/toolbar-soft-disabled-example&#x27;</span>;
5+
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarHardDisabledExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-hard-disabled/toolbar-hard-disabled-example&#x27;</span>;

‎docs-content/examples-highlighted/aria/toolbar/simple-toolbar-ts.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<span class="hljs-keyword">import</span> {
2+
<span class="hljs-title class_">Combobox</span>,
3+
<span class="hljs-title class_">ComboboxInput</span>,
4+
<span class="hljs-title class_">ComboboxPopup</span>,
5+
<span class="hljs-title class_">ComboboxPopupContainer</span>,
6+
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/combobox&#x27;</span>;
7+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Listbox</span>, <span class="hljs-title class_">Option</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/listbox&#x27;</span>;
8+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">ToolbarWidget</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/toolbar&#x27;</span>;
9+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Dir</span>, <span class="hljs-title class_">Directionality</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/bidi&#x27;</span>;
10+
<span class="hljs-keyword">import</span> {
11+
afterRenderEffect,
12+
<span class="hljs-title class_">Component</span>,
13+
<span class="hljs-title class_">Directive</span>,
14+
<span class="hljs-title class_">ElementRef</span>,
15+
inject,
16+
signal,
17+
viewChild,
18+
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
19+
20+
<span class="hljs-meta">@Directive</span>({
21+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;button[toolbar-button]&#x27;</span>,
22+
<span class="hljs-attr">hostDirectives</span>: [{<span class="hljs-attr">directive</span>: <span class="hljs-title class_">ToolbarWidget</span>, <span class="hljs-attr">inputs</span>: [<span class="hljs-string">&#x27;value&#x27;</span>, <span class="hljs-string">&#x27;disabled&#x27;</span>]}],
23+
<span class="hljs-attr">host</span>: {
24+
<span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;button&#x27;</span>,
25+
<span class="hljs-attr">class</span>: <span class="hljs-string">&#x27;example-button material-symbols-outlined&#x27;</span>,
26+
<span class="hljs-string">&#x27;[aria-label]&#x27;</span>: <span class="hljs-string">&#x27;widget.value()&#x27;</span>,
27+
},
28+
})
29+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SimpleToolbarButton</span> {
30+
widget = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">ToolbarWidget</span>);
31+
}
32+
33+
<span class="hljs-meta">@Directive</span>({
34+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;button[toolbar-toggle-button]&#x27;</span>,
35+
<span class="hljs-attr">hostDirectives</span>: [{<span class="hljs-attr">directive</span>: <span class="hljs-title class_">ToolbarWidget</span>, <span class="hljs-attr">inputs</span>: [<span class="hljs-string">&#x27;value&#x27;</span>]}],
36+
<span class="hljs-attr">host</span>: {
37+
<span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;button&#x27;</span>,
38+
<span class="hljs-attr">class</span>: <span class="hljs-string">&#x27;example-button material-symbols-outlined&#x27;</span>,
39+
<span class="hljs-string">&#x27;[aria-pressed]&#x27;</span>: <span class="hljs-string">&#x27;widget.selected()&#x27;</span>,
40+
<span class="hljs-string">&#x27;[aria-label]&#x27;</span>: <span class="hljs-string">&#x27;widget.value()&#x27;</span>,
41+
},
42+
})
43+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SimpleToolbarToggleButton</span> {
44+
widget = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">ToolbarWidget</span>);
45+
}
46+
47+
<span class="hljs-meta">@Directive</span>({
48+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;button[toolbar-radio-button]&#x27;</span>,
49+
<span class="hljs-attr">hostDirectives</span>: [{<span class="hljs-attr">directive</span>: <span class="hljs-title class_">ToolbarWidget</span>, <span class="hljs-attr">inputs</span>: [<span class="hljs-string">&#x27;value&#x27;</span>, <span class="hljs-string">&#x27;disabled&#x27;</span>]}],
50+
<span class="hljs-attr">host</span>: {
51+
<span class="hljs-attr">role</span>: <span class="hljs-string">&#x27;radio&#x27;</span>,
52+
<span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;button&#x27;</span>,
53+
<span class="hljs-attr">class</span>: <span class="hljs-string">&#x27;example-button material-symbols-outlined&#x27;</span>,
54+
<span class="hljs-string">&#x27;[aria-checked]&#x27;</span>: <span class="hljs-string">&#x27;widget.selected()&#x27;</span>,
55+
<span class="hljs-string">&#x27;[aria-label]&#x27;</span>: <span class="hljs-string">&#x27;widget.value()&#x27;</span>,
56+
},
57+
})
58+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SimpleToolbarRadioButton</span> {
59+
widget = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">ToolbarWidget</span>);
60+
}
61+
62+
<span class="hljs-meta">@Component</span>({
63+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;combobox&#x27;</span>,
64+
<span class="hljs-attr">imports</span>: [
65+
<span class="hljs-title class_">Dir</span>,
66+
<span class="hljs-title class_">Combobox</span>,
67+
<span class="hljs-title class_">ComboboxInput</span>,
68+
<span class="hljs-title class_">ComboboxPopup</span>,
69+
<span class="hljs-title class_">ComboboxPopupContainer</span>,
70+
<span class="hljs-title class_">Listbox</span>,
71+
<span class="hljs-title class_">Option</span>,
72+
<span class="hljs-title class_">ToolbarWidget</span>,
73+
],
74+
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;toolbar-common.css&#x27;</span>,
75+
<span class="hljs-attr">host</span>: {<span class="hljs-attr">class</span>: <span class="hljs-string">&#x27;example-combobox-container&#x27;</span>},
76+
<span class="hljs-attr">template</span>: <span class="hljs-string">`
77+
&lt;div ngCombobox [dir]=&quot;dir()&quot; #combobox=&quot;ngCombobox&quot; class=&quot;example-combobox&quot; [readonly]=&quot;true&quot;&gt;
78+
&lt;div class=&quot;example-combobox-input-container&quot;&gt;
79+
&lt;input
80+
ngComboboxInput
81+
ngToolbarWidget
82+
[(value)]=&quot;value&quot;
83+
class=&quot;example-combobox-input&quot;
84+
aria-label=&quot;Select a text style&quot;
85+
/&gt;
86+
&lt;span class=&quot;material-symbols-outlined example-icon example-arrow-icon&quot;
87+
&gt;arrow_drop_down&lt;/span
88+
&gt;
89+
&lt;/div&gt;
90+
91+
&lt;div popover=&quot;manual&quot; #popover class=&quot;example-popover&quot;&gt;
92+
&lt;ng-template ngComboboxPopupContainer&gt;
93+
&lt;div ngListbox [value]=&quot;[value()]&quot; class=&quot;example-listbox&quot;&gt;
94+
@for (option of options; track option) {
95+
&lt;div ngOption [value]=&quot;option&quot; [label]=&quot;option&quot; class=&quot;example-option&quot;&gt;
96+
&lt;span&gt;{{option}}&lt;/span&gt;
97+
&lt;span aria-hidden=&quot;true&quot; class=&quot;material-symbols-outlined example-option-icon&quot;
98+
&gt;check&lt;/span
99+
&gt;
100+
&lt;/div&gt;
101+
}
102+
&lt;/div&gt;
103+
&lt;/ng-template&gt;
104+
&lt;/div&gt;
105+
&lt;/div&gt;
106+
`</span>,
107+
})
108+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SimpleCombobox</span> {
109+
dir = <span class="hljs-title function_">inject</span>(<span class="hljs-title class_">Directionality</span>).<span class="hljs-property">valueSignal</span>;
110+
popover = viewChild&lt;<span class="hljs-title class_">ElementRef</span>&gt;(<span class="hljs-string">&#x27;popover&#x27;</span>);
111+
listbox = viewChild&lt;<span class="hljs-title class_">Listbox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Listbox</span>);
112+
combobox = viewChild&lt;<span class="hljs-title class_">Combobox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Combobox</span>);
113+
114+
value = <span class="hljs-title function_">signal</span>(<span class="hljs-string">&#x27;Normal text&#x27;</span>);
115+
options = [<span class="hljs-string">&#x27;Normal text&#x27;</span>, <span class="hljs-string">&#x27;Title&#x27;</span>, <span class="hljs-string">&#x27;Subtitle&#x27;</span>, <span class="hljs-string">&#x27;Heading 1&#x27;</span>, <span class="hljs-string">&#x27;Heading 2&#x27;</span>, <span class="hljs-string">&#x27;Heading 3&#x27;</span>];
116+
117+
<span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
118+
<span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
119+
<span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
120+
<span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
121+
combobox.<span class="hljs-title function_">expanded</span>() ? <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">showPopover</span>() : popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">hidePopover</span>();
122+
123+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-title function_">scrollActiveItemIntoView</span>();
124+
});
125+
}
126+
127+
<span class="hljs-title function_">showPopover</span>(<span class="hljs-params"></span>) {
128+
<span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
129+
<span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
130+
131+
<span class="hljs-keyword">const</span> comboboxRect = combobox.<span class="hljs-title function_">inputElement</span>()?.<span class="hljs-title function_">getBoundingClientRect</span>();
132+
<span class="hljs-keyword">const</span> popoverEl = popover.<span class="hljs-property">nativeElement</span>;
133+
134+
<span class="hljs-keyword">if</span> (comboboxRect) {
135+
popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.width}</span>px`</span>;
136+
popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.bottom + <span class="hljs-number">4</span>}</span>px`</span>;
137+
popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.left - <span class="hljs-number">1</span>}</span>px`</span>;
138+
}
139+
140+
popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">showPopover</span>();
141+
}
142+
}

0 commit comments

Comments
 (0)