diff --git a/src/components-examples/aria/menu/BUILD.bazel b/src/components-examples/aria/menu/BUILD.bazel index 5827e26e1c7b..548211a6572c 100644 --- a/src/components-examples/aria/menu/BUILD.bazel +++ b/src/components-examples/aria/menu/BUILD.bazel @@ -13,6 +13,7 @@ ng_project( "//:node_modules/@angular/core", "//src/aria/menu", "//src/cdk/a11y", + "//src/cdk/overlay", ], ) diff --git a/src/components-examples/aria/menu/index.ts b/src/components-examples/aria/menu/index.ts index 1aacab273cf2..e5afd68153a5 100644 --- a/src/components-examples/aria/menu/index.ts +++ b/src/components-examples/aria/menu/index.ts @@ -1,6 +1,3 @@ -export {MenuBarExample} from './menu-bar/menu-bar-example'; -export {MenuBarRTLExample} from './menu-bar-rtl/menu-bar-rtl-example'; -export {MenuBarDisabledExample} from './menu-bar-disabled/menu-bar-disabled-example'; export {MenuContextExample} from './menu-context/menu-context-example'; export {MenuTriggerExample} from './menu-trigger/menu-trigger-example'; export {MenuTriggerDisabledExample} from './menu-trigger-disabled/menu-trigger-disabled-example'; diff --git a/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.html b/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.html deleted file mode 100644 index 5a97e99fa8cb..000000000000 --- a/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.html +++ /dev/null @@ -1,324 +0,0 @@ -
-
File
- -
- -
- article - New - ⌘N -
- -
- folder - Open - ⌘O -
- -
- file_copy - Make a copy -
- - - -
- person_add - Share - arrow_right -
- -
- -
- person_add - Share with others -
- -
- public - Publish to web -
- -
- -
- download - Download -
- -
- print - Print -
- - - -
- edit - Rename -
- -
- delete - Move to trash -
- -
- -
Edit
- -
- -
- undo - Undo - ⌘Z -
- -
- redo - Redo - ⌘Y -
- - - -
- content_cut - Cut - ⌘X -
- -
- content_copy - Copy - ⌘C -
- -
- content_paste - Paste - ⌘V -
- - - -
- find_replace - Find and replace - ⇧⌘H -
- -
- -
View
- -
- -
- check - Show print layout -
- -
- check - Show ruler -
- - - -
- Zoom in - ⌘+ -
- -
- Zoom out - ⌘- -
- - - -
- Full screen -
- -
- -
Insert
- -
- -
- image - Image - arrow_right -
- -
- -
- upload - Upload from computer -
- -
- search - Search the web -
- -
- link - By URL -
- -
- -
- table_chart - Table -
- -
- insert_chart - Chart - arrow_right -
- -
- -
- bar_chart - Bar -
- -
- insert_chart - Column -
- -
- show_chart - Line -
- -
- pie_chart - Pie -
- -
- -
- horizontal_rule - Horizontal line -
- -
- -
Format
- -
- -
- format_bold - Text - arrow_right -
- -
- -
- format_bold - Bold - ⌘B -
- -
- format_italic - Italic - ⌘I -
- -
- format_underlined - Underline - ⌘U -
- -
- strikethrough_s - Strikethrough - ⇧⌘X -
- - - -
- Size - arrow_right -
- -
- -
- Increase font size - ⇧⌘. -
- -
- Decrease font size - ⇧⌘, -
- -
- -
- -
- format_align_justify - Paragraph styles - arrow_right -
- -
- -
Normal text
-
Heading 1
-
Heading 2
- -
- -
- format_indent_increase - Align & indent - arrow_right -
- -
- -
- format_align_left - Align left -
- -
- format_align_center - Align center -
- -
- format_align_right - Align right -
- -
- format_align_justify - Justify -
- -
- -
-
diff --git a/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.ts b/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.ts deleted file mode 100644 index 9d8b7ce12e9e..000000000000 --- a/src/components-examples/aria/menu/menu-bar-disabled/menu-bar-disabled-example.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Component} from '@angular/core'; -import { - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemShortcut, - SimpleMenuItemText, -} from '../simple-menu'; -import {MenuContent} from '@angular/aria/menu'; - -/** @title Disabled menu bar example. */ -@Component({ - selector: 'menu-bar-disabled-example', - templateUrl: 'menu-bar-disabled-example.html', - styleUrl: '../menu-example.css', - imports: [ - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemText, - SimpleMenuItemShortcut, - MenuContent, - ], -}) -export class MenuBarDisabledExample {} diff --git a/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.html b/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.html deleted file mode 100644 index b80f45019a79..000000000000 --- a/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.html +++ /dev/null @@ -1,329 +0,0 @@ -
-
File
- -
- -
- article - New - ⌘N -
- -
- folder - Open - ⌘O -
- -
- file_copy - Make a copy -
- - - -
- person_add - Share - arrow_left -
- -
- -
- person_add - Share with others -
- -
- public - Publish to web -
- -
- -
- download - Download -
- -
- print - Print -
- - - -
- edit - Rename -
- -
- delete - Move to trash -
- -
- -
Edit
- -
- -
- undo - Undo - ⌘Z -
- -
- redo - Redo - ⌘Y -
- - - -
- content_cut - Cut - ⌘X -
- -
- content_copy - Copy - ⌘C -
- -
- content_paste - Paste - ⌘V -
- - - -
- find_replace - Find and replace - ⇧⌘H -
- -
- -
View
- -
- -
- check - Show print layout -
- -
- check - Show ruler -
- - - -
- Zoom in - ⌘+ -
- -
- Zoom out - ⌘- -
- - - -
- Full screen -
- -
- -
Insert
- -
- -
- image - Image - arrow_left -
- -
- -
- upload - Upload from computer -
- -
- search - Search the web -
- -
- link - By URL -
- -
- -
- table_chart - Table -
- -
- insert_chart - Chart - arrow_left -
- -
- -
- bar_chart - Bar -
- -
- insert_chart - Column -
- -
- show_chart - Line -
- -
- pie_chart - Pie -
- -
- -
- horizontal_rule - Horizontal line -
- -
- -
Format
- -
- -
- format_bold - Text - arrow_left -
- -
- -
- format_bold - Bold - ⌘B -
- -
- format_italic - Italic - ⌘I -
- -
- format_underlined - Underline - ⌘U -
- -
- strikethrough_s - Strikethrough - ⇧⌘X -
- - - -
- Size - arrow_left -
- -
- -
- Increase font size - ⇧⌘. -
- -
- Decrease font size - ⇧⌘, -
- -
- -
- -
- format_align_justify - Paragraph styles - arrow_left -
- -
- -
Normal text
-
Heading 1
-
Heading 2
- -
- -
- format_indent_increase - Align & indent - arrow_left -
- -
- -
- format_align_left - Align left -
- -
- format_align_center - Align center -
- -
- format_align_right - Align right -
- -
- format_align_justify - Justify -
- -
- -
-
diff --git a/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.ts b/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.ts deleted file mode 100644 index d516adbd1e11..000000000000 --- a/src/components-examples/aria/menu/menu-bar-rtl/menu-bar-rtl-example.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Dir} from '@angular/cdk/bidi'; -import {Component} from '@angular/core'; -import { - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemShortcut, - SimpleMenuItemText, -} from '../simple-menu'; -import {MenuContent} from '@angular/aria/menu'; - -/** @title Menu bar RTL example. */ -@Component({ - selector: 'menu-bar-rtl-example', - templateUrl: 'menu-bar-rtl-example.html', - styleUrl: '../menu-example.css', - imports: [ - Dir, - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemText, - SimpleMenuItemShortcut, - MenuContent, - ], -}) -export class MenuBarRTLExample {} diff --git a/src/components-examples/aria/menu/menu-bar/menu-bar-example.html b/src/components-examples/aria/menu/menu-bar/menu-bar-example.html deleted file mode 100644 index 6d2f4406768b..000000000000 --- a/src/components-examples/aria/menu/menu-bar/menu-bar-example.html +++ /dev/null @@ -1,329 +0,0 @@ -
-
File
- -
- -
- article - New - ⌘N -
- -
- folder - Open - ⌘O -
- -
- file_copy - Make a copy -
- - - -
- person_add - Share - arrow_right -
- -
- -
- person_add - Share with others -
- -
- public - Publish to web -
- -
- -
- download - Download -
- -
- print - Print -
- - - -
- edit - Rename -
- -
- delete - Move to trash -
- -
- -
Edit
- -
- -
- undo - Undo - ⌘Z -
- -
- redo - Redo - ⌘Y -
- - - -
- content_cut - Cut - ⌘X -
- -
- content_copy - Copy - ⌘C -
- -
- content_paste - Paste - ⌘V -
- - - -
- find_replace - Find and replace - ⇧⌘H -
- -
- -
View
- -
- -
- check - Show print layout -
- -
- check - Show ruler -
- - - -
- Zoom in - ⌘+ -
- -
- Zoom out - ⌘- -
- - - -
- Full screen -
- -
- -
Insert
- -
- -
- image - Image - arrow_right -
- -
- -
- upload - Upload from computer -
- -
- search - Search the web -
- -
- link - By URL -
- -
- -
- table_chart - Table -
- -
- insert_chart - Chart - arrow_right -
- -
- -
- bar_chart - Bar -
- -
- insert_chart - Column -
- -
- show_chart - Line -
- -
- pie_chart - Pie -
- -
- -
- horizontal_rule - Horizontal line -
- -
- -
Format
- -
- -
- format_bold - Text - arrow_right -
- -
- -
- format_bold - Bold - ⌘B -
- -
- format_italic - Italic - ⌘I -
- -
- format_underlined - Underline - ⌘U -
- -
- strikethrough_s - Strikethrough - ⇧⌘X -
- - - -
- Size - arrow_right -
- -
- -
- Increase font size - ⇧⌘. -
- -
- Decrease font size - ⇧⌘, -
- -
- -
- -
- format_align_justify - Paragraph styles - arrow_right -
- -
- -
Normal text
-
Heading 1
-
Heading 2
- -
- -
- format_indent_increase - Align & indent - arrow_right -
- -
- -
- format_align_left - Align left -
- -
- format_align_center - Align center -
- -
- format_align_right - Align right -
- -
- format_align_justify - Justify -
- -
- -
-
diff --git a/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts b/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts deleted file mode 100644 index 2f8881d5b114..000000000000 --- a/src/components-examples/aria/menu/menu-bar/menu-bar-example.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Component} from '@angular/core'; -import { - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemShortcut, - SimpleMenuItemText, -} from '../simple-menu'; -import {MenuContent} from '@angular/aria/menu'; - -/** @title Menu bar example. */ -@Component({ - selector: 'menu-bar-example', - templateUrl: 'menu-bar-example.html', - styleUrl: '../menu-example.css', - imports: [ - SimpleMenu, - SimpleMenuBar, - SimpleMenuBarItem, - SimpleMenuItem, - SimpleMenuItemIcon, - SimpleMenuItemText, - SimpleMenuItemShortcut, - MenuContent, - ], -}) -export class MenuBarExample {} diff --git a/src/components-examples/aria/menubar/BUILD.bazel b/src/components-examples/aria/menubar/BUILD.bazel new file mode 100644 index 000000000000..0bf9ca6cfb55 --- /dev/null +++ b/src/components-examples/aria/menubar/BUILD.bazel @@ -0,0 +1,27 @@ +load("//tools:defaults.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "menubar", + srcs = glob(["**/*.ts"]), + assets = glob([ + "**/*.html", + "**/*.css", + ]), + deps = [ + "//:node_modules/@angular/core", + "//src/aria/menu", + "//src/cdk/a11y", + "//src/cdk/overlay", + ], +) + +filegroup( + name = "source-files", + srcs = glob([ + "**/*.html", + "**/*.css", + "**/*.ts", + ]), +) diff --git a/src/components-examples/aria/menubar/index.ts b/src/components-examples/aria/menubar/index.ts new file mode 100644 index 000000000000..bc22b6308940 --- /dev/null +++ b/src/components-examples/aria/menubar/index.ts @@ -0,0 +1,3 @@ +export {MenuBarExample} from './menubar/menubar-example'; +export {MenuBarRTLExample} from './menubar-rtl/menubar-rtl-example'; +export {MenuBarDisabledExample} from './menubar-disabled/menubar-disabled-example'; diff --git a/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html new file mode 100644 index 000000000000..f12ccbaa7379 --- /dev/null +++ b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.html @@ -0,0 +1,459 @@ +
+
+ File +
+ + +
+ +
+ article + New + ⌘N +
+ +
+ folder + Open + ⌘O +
+ +
+ file_copy + Make a copy +
+ + + +
+ person_add + Share + arrow_right +
+ + +
+ +
+ person_add + Share with others +
+ +
+ public + Publish to web +
+ +
+ + +
+ download + Download +
+ +
+ print + Print +
+ + + +
+ edit + Rename +
+ +
+ delete + Move to trash +
+ +
+ + +
+ Edit +
+ + +
+ +
+ undo + Undo + ⌘Z +
+ +
+ redo + Redo + ⌘Y +
+ + + +
+ content_cut + Cut + ⌘X +
+ +
+ content_copy + Copy + ⌘C +
+ +
+ content_paste + Paste + ⌘V +
+ + + +
+ find_replace + Find and replace + ⇧⌘H +
+ +
+ + +
+ View +
+ + +
+ +
+ check + Show print layout +
+ +
+ check + Show ruler +
+ + + +
+ Zoom in + ⌘+ +
+ +
+ Zoom out + ⌘- +
+ + + +
+ Full screen +
+ +
+ + +
+ Insert +
+ + +
+ +
+ image + Image + arrow_right +
+ + +
+ +
+ upload + Upload from computer +
+ +
+ search + Search the web +
+ +
+ link + By URL +
+ +
+ + +
+ table_chart + Table +
+ +
+ insert_chart + Chart + arrow_right +
+ + +
+ +
+ bar_chart + Bar +
+ +
+ insert_chart + Column +
+ +
+ show_chart + Line +
+ +
+ pie_chart + Pie +
+ +
+ + +
+ horizontal_rule + Horizontal line +
+ +
+ + +
+ Format +
+ + +
+ +
+ format_bold + Text + arrow_right +
+ + +
+ +
+ format_bold + Bold + ⌘B +
+ +
+ format_italic + Italic + ⌘I +
+ +
+ format_underlined + Underline + ⌘U +
+ +
+ strikethrough_s + Strikethrough + ⇧⌘X +
+ + + +
+ Size + arrow_right +
+ + +
+ +
+ Increase font size + ⇧⌘. +
+ +
+ Decrease font size + ⇧⌘, +
+ +
+ + +
+ + +
+ format_align_justify + Paragraph styles + arrow_right +
+ + +
+ +
Normal text
+
Heading 1
+
Heading 2
+ +
+ + +
+ format_indent_increase + Align & indent + arrow_right +
+ + +
+ +
+ format_align_left + Align left +
+ +
+ format_align_center + Align center +
+ +
+ format_align_right + Align right +
+ +
+ format_align_justify + Justify +
+ +
+ + +
+ +
diff --git a/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.ts b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.ts new file mode 100644 index 000000000000..ac86d74ba45f --- /dev/null +++ b/src/components-examples/aria/menubar/menubar-disabled/menubar-disabled-example.ts @@ -0,0 +1,25 @@ +import {Component, viewChild} from '@angular/core'; +import {Menu, MenuBar, MenuContent, MenuItem} from '@angular/aria/menu'; +import {OverlayModule} from '@angular/cdk/overlay'; + +/** @title Menu bar disabled example. */ +@Component({ + selector: 'menubar-disabled-example', + templateUrl: 'menubar-disabled-example.html', + styleUrl: '../menubar.css', + imports: [Menu, MenuBar, MenuItem, MenuContent, OverlayModule], +}) +export class MenuBarDisabledExample { + fileMenu = viewChild>('fileMenu'); + shareMenu = viewChild>('shareMenu'); + editMenu = viewChild>('editMenu'); + viewMenu = viewChild>('viewMenu'); + insertMenu = viewChild>('insertMenu'); + imageMenu = viewChild>('imageMenu'); + chartMenu = viewChild>('chartMenu'); + formatMenu = viewChild>('formatMenu'); + textMenu = viewChild>('textMenu'); + sizeMenu = viewChild>('sizeMenu'); + paragraphMenu = viewChild>('paragraphMenu'); + alignMenu = viewChild>('alignMenu'); +} diff --git a/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html new file mode 100644 index 000000000000..1c8a8a3c2868 --- /dev/null +++ b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.html @@ -0,0 +1,459 @@ +
+
+ File +
+ + +
+ +
+ article + New + ⌘N +
+ +
+ folder + Open + ⌘O +
+ +
+ file_copy + Make a copy +
+ + + +
+ person_add + Share + arrow_left +
+ + +
+ +
+ person_add + Share with others +
+ +
+ public + Publish to web +
+ +
+ + +
+ download + Download +
+ +
+ print + Print +
+ + + +
+ edit + Rename +
+ +
+ delete + Move to trash +
+ +
+ + +
+ Edit +
+ + +
+ +
+ undo + Undo + ⌘Z +
+ +
+ redo + Redo + ⌘Y +
+ + + +
+ content_cut + Cut + ⌘X +
+ +
+ content_copy + Copy + ⌘C +
+ +
+ content_paste + Paste + ⌘V +
+ + + +
+ find_replace + Find and replace + ⇧⌘H +
+ +
+ + +
+ View +
+ + +
+ +
+ check + Show print layout +
+ +
+ check + Show ruler +
+ + + +
+ Zoom in + ⌘+ +
+ +
+ Zoom out + ⌘- +
+ + + +
+ Full screen +
+ +
+ + +
+ Insert +
+ + +
+ +
+ image + Image + arrow_left +
+ + +
+ +
+ upload + Upload from computer +
+ +
+ search + Search the web +
+ +
+ link + By URL +
+ +
+ + +
+ table_chart + Table +
+ +
+ insert_chart + Chart + arrow_left +
+ + +
+ +
+ bar_chart + Bar +
+ +
+ insert_chart + Column +
+ +
+ show_chart + Line +
+ +
+ pie_chart + Pie +
+ +
+ + +
+ horizontal_rule + Horizontal line +
+ +
+ + +
+ Format +
+ + +
+ +
+ format_bold + Text + arrow_left +
+ + +
+ +
+ format_bold + Bold + ⌘B +
+ +
+ format_italic + Italic + ⌘I +
+ +
+ format_underlined + Underline + ⌘U +
+ +
+ strikethrough_s + Strikethrough + ⇧⌘X +
+ + + +
+ Size + arrow_left +
+ + +
+ +
+ Increase font size + ⇧⌘. +
+ +
+ Decrease font size + ⇧⌘, +
+ +
+ + +
+ + +
+ format_align_justify + Paragraph styles + arrow_left +
+ + +
+ +
Normal text
+
Heading 1
+
Heading 2
+ +
+ + +
+ format_indent_increase + Align & indent + arrow_left +
+ + +
+ +
+ format_align_left + Align left +
+ +
+ format_align_center + Align center +
+ +
+ format_align_right + Align right +
+ +
+ format_align_justify + Justify +
+ +
+ + +
+ +
diff --git a/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.ts b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.ts new file mode 100644 index 000000000000..368eaf8d7ea2 --- /dev/null +++ b/src/components-examples/aria/menubar/menubar-rtl/menubar-rtl-example.ts @@ -0,0 +1,26 @@ +import {Dir} from '@angular/cdk/bidi'; +import {Component, viewChild} from '@angular/core'; +import {Menu, MenuBar, MenuContent, MenuItem} from '@angular/aria/menu'; +import {OverlayModule} from '@angular/cdk/overlay'; + +/** @title Menu bar RTL example. */ +@Component({ + selector: 'menubar-rtl-example', + templateUrl: 'menubar-rtl-example.html', + styleUrl: '../menubar.css', + imports: [Dir, Menu, MenuBar, MenuItem, MenuContent, OverlayModule], +}) +export class MenuBarRTLExample { + fileMenu = viewChild>('fileMenu'); + shareMenu = viewChild>('shareMenu'); + editMenu = viewChild>('editMenu'); + viewMenu = viewChild>('viewMenu'); + insertMenu = viewChild>('insertMenu'); + imageMenu = viewChild>('imageMenu'); + chartMenu = viewChild>('chartMenu'); + formatMenu = viewChild>('formatMenu'); + textMenu = viewChild>('textMenu'); + sizeMenu = viewChild>('sizeMenu'); + paragraphMenu = viewChild>('paragraphMenu'); + alignMenu = viewChild>('alignMenu'); +} diff --git a/src/components-examples/aria/menubar/menubar.css b/src/components-examples/aria/menubar/menubar.css new file mode 100644 index 000000000000..59050cb8a0de --- /dev/null +++ b/src/components-examples/aria/menubar/menubar.css @@ -0,0 +1,80 @@ +:host { + --border-color: color-mix(in srgb, var(--mat-sys-outline) 40%, transparent); +} + +[ngMenuBar] { + display: flex; + gap: 0.25rem; + padding: 0.25rem; + border-radius: var(--mat-sys-corner-extra-small); + border: 1px solid var(--border-color); + background-color: var(--mat-sys-surface); + + /* stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers. */ + width: fit-content; +} + +[ngMenuBar] > [ngMenuItem] { + padding: 0.25rem 0.5rem; +} + +[ngMenu] { + margin: 0; + width: 15rem; + padding: 0.25rem; + border-radius: var(--mat-sys-corner-extra-small); + border: 1px solid var(--border-color); + background-color: var(--mat-sys-surface); +} + +[ngMenu][data-visible='false'] { + display: none; +} + +[ngMenuItem] { + outline: none; + display: flex; + cursor: pointer; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + font-size: 0.875rem; + border-radius: var(--mat-sys-corner-extra-small); +} + +[ngMenuItem][aria-disabled='true'] { + cursor: default; + opacity: 0.5; +} + +[ngMenuItem][data-active='true'] { + background: color-mix(in srgb, var(--mat-sys-outline) 20%, transparent); +} + +[ngMenuItem]:focus { + outline: 2px solid var(--mat-sys-primary); +} + +[ngMenuItem] .example-icon { + opacity: 0.875; + font-size: 1.25rem; +} + +[ngMenuItem] .example-label { + flex: 1; + opacity: 0.875; + font-size: 0.875rem; +} + +[ngMenuItem]:not([aria-expanded='true']) .example-arrow { + opacity: 0.5; +} + +[ngMenu] .example-separator { + border-top: 1px solid var(--border-color); + margin: 0.25rem 0; +} + +[ngMenu] .example-shortcut { + opacity: 0.65; +} diff --git a/src/components-examples/aria/menubar/menubar/menubar-example.html b/src/components-examples/aria/menubar/menubar/menubar-example.html new file mode 100644 index 000000000000..0648bb77890b --- /dev/null +++ b/src/components-examples/aria/menubar/menubar/menubar-example.html @@ -0,0 +1,459 @@ +
+
+ File +
+ + +
+ +
+ article + New + ⌘N +
+ +
+ folder + Open + ⌘O +
+ +
+ file_copy + Make a copy +
+ + + +
+ person_add + Share + arrow_right +
+ + +
+ +
+ person_add + Share with others +
+ +
+ public + Publish to web +
+ +
+ + +
+ download + Download +
+ +
+ print + Print +
+ + + +
+ edit + Rename +
+ +
+ delete + Move to trash +
+ +
+ + +
+ Edit +
+ + +
+ +
+ undo + Undo + ⌘Z +
+ +
+ redo + Redo + ⌘Y +
+ + + +
+ content_cut + Cut + ⌘X +
+ +
+ content_copy + Copy + ⌘C +
+ +
+ content_paste + Paste + ⌘V +
+ + + +
+ find_replace + Find and replace + ⇧⌘H +
+ +
+ + +
+ View +
+ + +
+ +
+ check + Show print layout +
+ +
+ check + Show ruler +
+ + + +
+ Zoom in + ⌘+ +
+ +
+ Zoom out + ⌘- +
+ + + +
+ Full screen +
+ +
+ + +
+ Insert +
+ + +
+ +
+ image + Image + arrow_right +
+ + +
+ +
+ upload + Upload from computer +
+ +
+ search + Search the web +
+ +
+ link + By URL +
+ +
+ + +
+ table_chart + Table +
+ +
+ insert_chart + Chart + arrow_right +
+ + +
+ +
+ bar_chart + Bar +
+ +
+ insert_chart + Column +
+ +
+ show_chart + Line +
+ +
+ pie_chart + Pie +
+ +
+ + +
+ horizontal_rule + Horizontal line +
+ +
+ + +
+ Format +
+ + +
+ +
+ format_bold + Text + arrow_right +
+ + +
+ +
+ format_bold + Bold + ⌘B +
+ +
+ format_italic + Italic + ⌘I +
+ +
+ format_underlined + Underline + ⌘U +
+ +
+ strikethrough_s + Strikethrough + ⇧⌘X +
+ + + +
+ Size + arrow_right +
+ + +
+ +
+ Increase font size + ⇧⌘. +
+ +
+ Decrease font size + ⇧⌘, +
+ +
+ + +
+ + +
+ format_align_justify + Paragraph styles + arrow_right +
+ + +
+ +
Normal text
+
Heading 1
+
Heading 2
+ +
+ + +
+ format_indent_increase + Align & indent + arrow_right +
+ + +
+ +
+ format_align_left + Align left +
+ +
+ format_align_center + Align center +
+ +
+ format_align_right + Align right +
+ +
+ format_align_justify + Justify +
+ +
+ + +
+ +
diff --git a/src/components-examples/aria/menubar/menubar/menubar-example.ts b/src/components-examples/aria/menubar/menubar/menubar-example.ts new file mode 100644 index 000000000000..52fc61df6be5 --- /dev/null +++ b/src/components-examples/aria/menubar/menubar/menubar-example.ts @@ -0,0 +1,25 @@ +import {Component, viewChild} from '@angular/core'; +import {Menu, MenuBar, MenuContent, MenuItem} from '@angular/aria/menu'; +import {OverlayModule} from '@angular/cdk/overlay'; + +/** @title Menu bar example. */ +@Component({ + selector: 'menubar-example', + templateUrl: 'menubar-example.html', + styleUrl: '../menubar.css', + imports: [Menu, MenuBar, MenuItem, MenuContent, OverlayModule], +}) +export class MenuBarExample { + fileMenu = viewChild>('fileMenu'); + shareMenu = viewChild>('shareMenu'); + editMenu = viewChild>('editMenu'); + viewMenu = viewChild>('viewMenu'); + insertMenu = viewChild>('insertMenu'); + imageMenu = viewChild>('imageMenu'); + chartMenu = viewChild>('chartMenu'); + formatMenu = viewChild>('formatMenu'); + textMenu = viewChild>('textMenu'); + sizeMenu = viewChild>('sizeMenu'); + paragraphMenu = viewChild>('paragraphMenu'); + alignMenu = viewChild>('alignMenu'); +} diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 3b10fb1d0a62..fe26720bdf83 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -30,6 +30,7 @@ ng_project( "//src/dev-app/aria-grid", "//src/dev-app/aria-listbox", "//src/dev-app/aria-menu", + "//src/dev-app/aria-menubar", "//src/dev-app/aria-tabs", "//src/dev-app/aria-toolbar", "//src/dev-app/aria-tree", diff --git a/src/dev-app/aria-menu/menu-demo.html b/src/dev-app/aria-menu/menu-demo.html index fd8e433f3a13..e17b06194775 100644 --- a/src/dev-app/aria-menu/menu-demo.html +++ b/src/dev-app/aria-menu/menu-demo.html @@ -1,20 +1,5 @@
-
-

Menu Bar Example

- -
- -
-

Menu Bar RTL Example

- -
- -
-

Disabled Menu Bar Example

- -
-

Menu Trigger Example

diff --git a/src/dev-app/aria-menu/menu-demo.ts b/src/dev-app/aria-menu/menu-demo.ts index b9ec74d10240..1f2ef3b4ae29 100644 --- a/src/dev-app/aria-menu/menu-demo.ts +++ b/src/dev-app/aria-menu/menu-demo.ts @@ -8,9 +8,6 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; import { - MenuBarExample, - MenuBarRTLExample, - MenuBarDisabledExample, MenuContextExample, MenuTriggerExample, MenuStandaloneExample, @@ -24,9 +21,6 @@ import { encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ - MenuBarExample, - MenuBarRTLExample, - MenuBarDisabledExample, MenuContextExample, MenuTriggerExample, MenuTriggerDisabledExample, diff --git a/src/dev-app/aria-menubar/BUILD.bazel b/src/dev-app/aria-menubar/BUILD.bazel new file mode 100644 index 000000000000..ce493844fd11 --- /dev/null +++ b/src/dev-app/aria-menubar/BUILD.bazel @@ -0,0 +1,16 @@ +load("//tools:defaults.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "aria-menubar", + srcs = ["menubar-demo.ts"], + assets = [ + "menubar-demo.html", + "menubar-demo.css", + ], + deps = [ + "//:node_modules/@angular/core", + "//src/components-examples/aria/menubar", + ], +) diff --git a/src/dev-app/aria-menubar/menubar-demo.css b/src/dev-app/aria-menubar/menubar-demo.css new file mode 100644 index 000000000000..218db84dfcf1 --- /dev/null +++ b/src/dev-app/aria-menubar/menubar-demo.css @@ -0,0 +1,16 @@ +.example-menu-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: 20px; +} + +.example-menu-container { + width: 500px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +h2 { + height: 36px; +} diff --git a/src/dev-app/aria-menubar/menubar-demo.html b/src/dev-app/aria-menubar/menubar-demo.html new file mode 100644 index 000000000000..c916452fb272 --- /dev/null +++ b/src/dev-app/aria-menubar/menubar-demo.html @@ -0,0 +1,16 @@ +
+
+

Menu Bar Example

+ +
+ +
+

Disabled Menu Bar Example

+ +
+ +
+

Menu Bar RTL Example

+ +
+
diff --git a/src/dev-app/aria-menubar/menubar-demo.ts b/src/dev-app/aria-menubar/menubar-demo.ts new file mode 100644 index 000000000000..aec11c487eaf --- /dev/null +++ b/src/dev-app/aria-menubar/menubar-demo.ts @@ -0,0 +1,23 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import { + MenuBarExample, + MenuBarRTLExample, + MenuBarDisabledExample, +} from '@angular/components-examples/aria/menubar'; + +@Component({ + templateUrl: 'menubar-demo.html', + styleUrl: 'menubar-demo.css', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [MenuBarExample, MenuBarRTLExample, MenuBarDisabledExample], +}) +export class MenubarDemo {} diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index a4db2af3a141..f3b4d991773f 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -67,6 +67,7 @@ export class DevAppLayout { {name: 'Aria Grid', route: '/aria-grid'}, {name: 'Aria Listbox', route: '/aria-listbox'}, {name: 'Aria Menu', route: '/aria-menu'}, + {name: 'Aria Menubar', route: '/aria-menubar'}, {name: 'Aria Tabs', route: '/aria-tabs'}, {name: 'Aria Toolbar', route: '/aria-toolbar'}, {name: 'Aria Tree', route: '/aria-tree'}, diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts index e823b79b68a3..f719de30b300 100644 --- a/src/dev-app/routes.ts +++ b/src/dev-app/routes.ts @@ -56,6 +56,10 @@ export const DEV_APP_ROUTES: Routes = [ path: 'aria-menu', loadComponent: () => import('./aria-menu/menu-demo').then(m => m.MenuDemo), }, + { + path: 'aria-menubar', + loadComponent: () => import('./aria-menubar/menubar-demo').then(m => m.MenubarDemo), + }, { path: 'aria-tabs', loadComponent: () => import('./aria-tabs/tabs-demo').then(m => m.TabsDemo),