Skip to content

Commit c602270

Browse files
wagnermacielwagnermaciel
committed
refactor(aria/toolbar): dev-app demo changes
1 parent 7c606d5 commit c602270

19 files changed

+634
-340
lines changed

‎src/aria/toolbar/toolbar.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import {
2828
} from '@angular/aria/private';
2929
import {Directionality} from '@angular/cdk/bidi';
3030
import {_IdGenerator} from '@angular/cdk/a11y';
31-
import {toSignal} from '@angular/core/rxjs-interop';
3231

3332
interface HasElement {
3433
element: Signal<HTMLElement>;

‎src/components-examples/aria/toolbar/BUILD.bazel‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ ng_project(
1212
deps = [
1313
"//:node_modules/@angular/core",
1414
"//:node_modules/@angular/forms",
15+
"//src/aria/combobox",
16+
"//src/aria/listbox",
1517
"//src/aria/toolbar",
1618
"//src/cdk/a11y",
1719
"//src/material/checkbox",

‎src/components-examples/aria/toolbar/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-
22
export {ToolbarBasicVerticalExample} from './toolbar-basic-vertical/toolbar-basic-vertical-example';
33
export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example';
44
export {ToolbarRtlExample} from './toolbar-rtl/toolbar-rtl-example';
5-
export {ToolbarSoftDisabledExample} from './toolbar-soft-disabled/toolbar-soft-disabled-example';
5+
export {ToolbarHardDisabledExample} from './toolbar-hard-disabled/toolbar-hard-disabled-example';

‎src/components-examples/aria/toolbar/simple-toolbar.ts‎

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

‎src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
1-
<div class="example-container">
2-
<div ngToolbar class="example-toolbar" aria-label="Horizontal Toolbar Text Formatting Tools">
3-
<button
4-
ngToolbarWidget
5-
class="example-radio-button"
6-
(click)="format('bold')"
7-
(keydown.enter)="format('bold')">
8-
Bold
9-
</button>
10-
<button
11-
ngToolbarWidget
12-
class="example-radio-button"
13-
(click)="format('italic')"
14-
(keydown.enter)="format('italic')">
15-
Italic
16-
</button>
17-
<button
18-
ngToolbarWidget
19-
class="example-radio-button"
20-
(click)="format('underline')"
21-
(keydown.enter)="format('underline')">
22-
Underline
23-
</button>
24-
<button
25-
ngToolbarWidget
26-
class="example-radio-button"
27-
[disabled]="true">
28-
Disabled Action
29-
</button>
1+
<div class="example-toolbar-container">
2+
<div ngToolbar class="example-toolbar" aria-label="Horizontal Toolbar Text Formatting Tools">
3+
<div class="example-group" aria-label="Undo and Redo options">
4+
<button toolbar-button value="undo">undo</button>
5+
<button toolbar-button value="redo">redo</button>
306
</div>
7+
8+
<div class="example-separator" role="separator"></div>
9+
10+
<div class="example-group" aria-label="Text formatting options">
11+
<button toolbar-toggle-button value="bold">format_bold</button>
12+
<button toolbar-toggle-button value="italic">format_italic</button>
13+
<button toolbar-toggle-button value="underline">format_underlined</button>
14+
</div>
15+
16+
<div class="example-separator" role="separator"></div>
17+
18+
<combobox />
19+
20+
<div class="example-separator" role="separator"></div>
21+
22+
<div
23+
ngToolbarWidgetGroup
24+
role="radiogroup"
25+
class="example-group"
26+
aria-label="Alignment options"
27+
>
28+
<button toolbar-radio-button value="align left">format_align_left</button>
29+
<button toolbar-radio-button value="align center">format_align_center</button>
30+
<button toolbar-radio-button value="align right">format_align_right</button>
31+
</div>
32+
33+
<div class="example-separator" role="separator"></div>
34+
35+
<div ngToolbarWidgetGroup role="radiogroup" class="example-group" aria-label="List options">
36+
<button toolbar-radio-button value="checklist">checklist</button>
37+
<button toolbar-radio-button value="bullet list">format_list_bulleted</button>
38+
<button toolbar-radio-button value="numbered list">format_list_numbered</button>
39+
</div>
40+
</div>
3141
</div>

‎src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import {Component} from '@angular/core';
2-
import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
3-
import {LiveAnnouncer} from '@angular/cdk/a11y';
2+
import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';
3+
import {
4+
SimpleCombobox,
5+
SimpleToolbarButton,
6+
SimpleToolbarRadioButton,
7+
SimpleToolbarToggleButton,
8+
} from '../simple-toolbar';
49

510
/** @title Basic Horizontal Toolbar Example */
611
@Component({
712
selector: 'toolbar-basic-horizontal-example',
813
templateUrl: 'toolbar-basic-horizontal-example.html',
914
styleUrl: '../toolbar-common.css',
10-
imports: [Toolbar, ToolbarWidget],
15+
imports: [
16+
Toolbar,
17+
ToolbarWidget,
18+
ToolbarWidgetGroup,
19+
SimpleCombobox,
20+
SimpleToolbarButton,
21+
SimpleToolbarRadioButton,
22+
SimpleToolbarToggleButton,
23+
],
1124
})
12-
export class ToolbarBasicHorizontalExample {
13-
constructor(private _liveAnnouncer: LiveAnnouncer) {}
14-
format(tool: string) {
15-
console.log(`Tool activated: ${tool}`);
16-
this._liveAnnouncer.announce(`${tool} applied`, 'polite');
17-
}
18-
test(action: string) {
19-
console.log(`Action triggered: ${action}`);
20-
this._liveAnnouncer.announce(`${action} button activated`, 'polite');
21-
}
22-
}
25+
export class ToolbarBasicHorizontalExample {}

‎src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1-
<div class="example-container">
2-
<div ngToolbar orientation="vertical" class="example-toolbar" aria-label="Vertical Toolbar Text Formatting Tools">
3-
<button
4-
ngToolbarWidget
5-
class="example-radio-button"
6-
(click)="format('bold')"
7-
(keydown.enter)="format('bold')">
8-
Bold
9-
</button>
10-
<button
11-
ngToolbarWidget
12-
class="example-radio-button"
13-
(click)="format('italic')"
14-
(keydown.enter)="format('italic')">
15-
Italic
16-
</button>
17-
<button
18-
ngToolbarWidget
19-
class="example-radio-button"
20-
(click)="format('underline')"
21-
(keydown.enter)="format('underline')">
22-
Underline
23-
</button>
24-
<button
25-
ngToolbarWidget
26-
class="example-radio-button"
27-
[disabled]="true">
28-
Disabled Action
29-
</button>
1+
<div class="example-toolbar-container">
2+
<div
3+
ngToolbar
4+
orientation="vertical"
5+
class="example-toolbar"
6+
aria-label="Vertical Toolbar Text Formatting Tools"
7+
>
8+
<div class="example-group" aria-label="Undo and Redo options">
9+
<button toolbar-button value="undo">undo</button>
10+
<button toolbar-button value="redo">redo</button>
3011
</div>
12+
13+
<div class="example-separator" role="separator"></div>
14+
15+
<div class="example-group" aria-label="Text formatting options">
16+
<button toolbar-toggle-button value="bold">format_bold</button>
17+
<button toolbar-toggle-button value="italic">format_italic</button>
18+
<button toolbar-toggle-button value="underline">format_underlined</button>
19+
</div>
20+
21+
<div class="example-separator" role="separator"></div>
22+
23+
<div
24+
ngToolbarWidgetGroup
25+
role="radiogroup"
26+
class="example-group"
27+
aria-label="Alignment options"
28+
>
29+
<button toolbar-radio-button value="align left">format_align_left</button>
30+
<button toolbar-radio-button value="align center">format_align_center</button>
31+
<button toolbar-radio-button value="align right">format_align_right</button>
32+
</div>
33+
</div>
3134
</div>

‎src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
import {Component} from '@angular/core';
2-
import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
3-
import {LiveAnnouncer} from '@angular/cdk/a11y';
2+
import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';
3+
import {
4+
SimpleToolbarButton,
5+
SimpleToolbarRadioButton,
6+
SimpleToolbarToggleButton,
7+
} from '../simple-toolbar';
48

59
/** @title Basic Vertical Toolbar Example */
610
@Component({
711
selector: 'toolbar-basic-vertical-example',
812
templateUrl: 'toolbar-basic-vertical-example.html',
913
styleUrl: '../toolbar-common.css',
10-
imports: [Toolbar, ToolbarWidget],
14+
imports: [
15+
Toolbar,
16+
ToolbarWidget,
17+
ToolbarWidgetGroup,
18+
SimpleToolbarButton,
19+
SimpleToolbarRadioButton,
20+
SimpleToolbarToggleButton,
21+
],
1122
})
12-
export class ToolbarBasicVerticalExample {
13-
constructor(private _liveAnnouncer: LiveAnnouncer) {}
14-
format(tool: string) {
15-
console.log(`Tool activated: ${tool}`);
16-
this._liveAnnouncer.announce(`${tool} applied`, 'polite');
17-
}
18-
test(action: string) {
19-
console.log(`Action triggered: ${action}`);
20-
this._liveAnnouncer.announce(`${action} button activated`, 'polite');
21-
}
22-
}
23+
export class ToolbarBasicVerticalExample {}

0 commit comments

Comments
 (0)