main - ba9f79b feat(aria/toolbar): adds toolbar-basic-horizontal-example to dev-app (#32106)

Author: essjay05

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

@@ -1 +1,2 @@
+<span class="hljs-keyword">export</span> {<span class="hljs-title class_">ToolbarBasicHorizontalExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./toolbar-basic-horizontal/toolbar-basic-horizontal-example&#x27;</span>;
 <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>;

docs-content/examples-highlighted/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example-html.html

@@ -0,0 +1,43 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-container&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngToolbar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toolbar&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Text Formatting Tools&quot;</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+            <span class="hljs-attr">ngToolbarWidget</span>
+            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-button&quot;</span>
+            (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;format(&#x27;bold&#x27;)&quot;</span>
+            (<span class="hljs-attr">keydown.enter</span>)=<span class="hljs-string">&quot;format(&#x27;bold&#x27;)&quot;</span>&gt;</span>
+            Bold
+        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+            <span class="hljs-attr">ngToolbarWidget</span>
+            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-button&quot;</span>
+            (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;format(&#x27;italic&#x27;)&quot;</span>
+            (<span class="hljs-attr">keydown.enter</span>)=<span class="hljs-string">&quot;format(&#x27;italic&#x27;)&quot;</span>&gt;</span>
+            Italic
+        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+            <span class="hljs-attr">ngToolbarWidget</span>
+            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-button&quot;</span>
+            (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;format(&#x27;underline&#x27;)&quot;</span>
+            (<span class="hljs-attr">keydown.enter</span>)=<span class="hljs-string">&quot;format(&#x27;underline&#x27;)&quot;</span>&gt;</span>
+            Underline
+        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>
+            <span class="hljs-attr">ngRadioGroup</span>
+            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-group&quot;</span>
+            <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Select text alignment&quot;</span>
+        &gt;</span>
+            @for (alignment of alignments; track alignment) {
+            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">ngRadioButton</span> [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;alignment.value&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-button&quot;</span>&gt;</span>
+                <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-indicator&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+                <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{ alignment.label }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+            }
+        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+            <span class="hljs-attr">ngToolbarWidget</span>
+            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-radio-button&quot;</span>
+            [<span class="hljs-attr">disabled</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
+            Disabled Action
+        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

docs-content/examples-highlighted/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example-ts.html

@@ -0,0 +1,28 @@
+<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>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Toolbar</span>, <span class="hljs-title class_">ToolbarWidget</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/toolbar&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">RadioGroup</span>, <span class="hljs-title class_">RadioButton</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/radio-group&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">LiveAnnouncer</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/a11y&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title</span> Basic Horizontal Toolbar Example */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;toolbar-basic-horizontal-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;toolbar-basic-horizontal-example.html&#x27;</span>,
+  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;../toolbar-common.css&#x27;</span>,
+  <span class="hljs-attr">imports</span>: [<span class="hljs-title class_">RadioButton</span>, <span class="hljs-title class_">RadioGroup</span>, <span class="hljs-title class_">Toolbar</span>, <span class="hljs-title class_">ToolbarWidget</span>],
+})
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ToolbarBasicHorizontalExample</span> {
+  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">private</span> <span class="hljs-attr">_liveAnnouncer</span>: <span class="hljs-title class_">LiveAnnouncer</span></span>) {}
+  alignments = [
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;left&#x27;</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Left&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Center&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;right&#x27;</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Right&#x27;</span>},
+  ];
+  <span class="hljs-title function_">format</span>(<span class="hljs-params"><span class="hljs-attr">tool</span>: <span class="hljs-built_in">string</span></span>) {
+    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Tool activated: <span class="hljs-subst">${tool}</span>`</span>);
+    <span class="hljs-variable language_">this</span>.<span class="hljs-property">_liveAnnouncer</span>.<span class="hljs-title function_">announce</span>(<span class="hljs-string">`<span class="hljs-subst">${tool}</span> applied`</span>, <span class="hljs-string">&#x27;polite&#x27;</span>);
+  }
+  <span class="hljs-title function_">test</span>(<span class="hljs-params"><span class="hljs-attr">action</span>: <span class="hljs-built_in">string</span></span>) {
+    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Action triggered: <span class="hljs-subst">${action}</span>`</span>);
+    <span class="hljs-variable language_">this</span>.<span class="hljs-property">_liveAnnouncer</span>.<span class="hljs-title function_">announce</span>(<span class="hljs-string">`<span class="hljs-subst">${action}</span> button activated`</span>, <span class="hljs-string">&#x27;polite&#x27;</span>);
+  }
+}

docs-content/examples-source/aria/toolbar/index.ts

@@ -1 +1,2 @@
+export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example';
 export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example';

docs-content/examples-source/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html

@@ -0,0 +1,43 @@
+<div class="example-container">
+    <div ngToolbar class="example-toolbar" aria-label="Text Formatting Tools">
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('bold')"
+            (keydown.enter)="format('bold')">
+            Bold
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('italic')"
+            (keydown.enter)="format('italic')">
+            Italic
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('underline')"
+            (keydown.enter)="format('underline')">
+            Underline
+        </button>
+        <ul
+            ngRadioGroup
+            class="example-radio-group"
+            aria-label="Select text alignment"
+        >
+            @for (alignment of alignments; track alignment) {
+            <li ngRadioButton [value]="alignment.value" class="example-radio-button">
+                <span class="example-radio-indicator"></span>
+                <span>{{ alignment.label }}</span>
+            </li>
+            }
+        </ul>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            [disabled]="true">
+            Disabled Action
+        </button>
+    </div>
+</div>

docs-content/examples-source/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts

@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
+import {RadioGroup, RadioButton} from '@angular/aria/radio-group';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+
+/** @title Basic Horizontal Toolbar Example */
+@Component({
+  selector: 'toolbar-basic-horizontal-example',
+  templateUrl: 'toolbar-basic-horizontal-example.html',
+  styleUrl: '../toolbar-common.css',
+  imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget],
+})
+export class ToolbarBasicHorizontalExample {
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+  alignments = [
+    {value: 'left', label: 'Left'},
+    {value: 'center', label: 'Center'},
+    {value: 'right', label: 'Right'},
+  ];
+  format(tool: string) {
+    console.log(`Tool activated: ${tool}`);
+    this._liveAnnouncer.announce(`${tool} applied`, 'polite');
+  }
+  test(action: string) {
+    console.log(`Action triggered: ${action}`);
+    this._liveAnnouncer.announce(`${action} button activated`, 'polite');
+  }
+}