@fluentui/web-components 3.0.0-rc.17 → 3.0.0-rc.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -2
- package/custom-elements.json +26 -53
- package/dist/esm/compound-button/compound-button.template.d.ts +3 -1
- package/dist/esm/compound-button/compound-button.template.js +7 -2
- package/dist/esm/compound-button/compound-button.template.js.map +1 -1
- package/dist/esm/define-all.d.ts +42 -0
- package/dist/esm/define-all.js +43 -0
- package/dist/esm/define-all.js.map +1 -0
- package/dist/esm/dialog/dialog.d.ts +37 -9
- package/dist/esm/dialog/dialog.js +87 -45
- package/dist/esm/dialog/dialog.js.map +1 -1
- package/dist/esm/dialog/dialog.template.js +5 -3
- package/dist/esm/dialog/dialog.template.js.map +1 -1
- package/dist/esm/drawer/drawer.d.ts +36 -7
- package/dist/esm/drawer/drawer.js +74 -42
- package/dist/esm/drawer/drawer.js.map +1 -1
- package/dist/esm/drawer/drawer.template.js +5 -3
- package/dist/esm/drawer/drawer.template.js.map +1 -1
- package/dist/esm/index-all-rollup.d.ts +2 -0
- package/dist/esm/index-all-rollup.js +9 -0
- package/dist/esm/index-all-rollup.js.map +1 -0
- package/dist/esm/index-rollup.d.ts +1 -43
- package/dist/esm/index-rollup.js +6 -43
- package/dist/esm/index-rollup.js.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/menu-list/menu-list.base.js +7 -1
- package/dist/esm/menu-list/menu-list.base.js.map +1 -1
- package/dist/esm/theme/index.d.ts +1 -1
- package/dist/esm/theme/index.js +1 -1
- package/dist/esm/theme/index.js.map +1 -1
- package/dist/esm/theme/set-theme.d.ts +0 -5
- package/dist/esm/theme/set-theme.js +0 -7
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/esm/tree/tree.base.js +3 -0
- package/dist/esm/tree/tree.base.js.map +1 -1
- package/dist/esm/tree/tree.js +1 -1
- package/dist/esm/tree/tree.js.map +1 -1
- package/dist/esm/tree/tree.template.js +1 -1
- package/dist/web-components-all.js +14970 -0
- package/dist/web-components-all.min.js +47 -0
- package/dist/web-components.d.ts +74 -22
- package/dist/web-components.js +6014 -5407
- package/dist/web-components.min.js +21 -546
- package/package.json +18 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 13 May 2026 04:08:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-rc.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.19)
|
|
8
|
+
|
|
9
|
+
Wed, 13 May 2026 04:08:24 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.18..@fluentui/web-components_v3.0.0-rc.19)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: remove hoisted peer dependency entries ([PR #36184](https://github.com/microsoft/fluentui/pull/36184) by 863023+radium-v@users.noreply.github.com)
|
|
15
|
+
- fix: enhance accessibility attributes for drawer component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
|
|
16
|
+
- fix keyboard navigation regressions for tree and menu-list ([PR #36118](https://github.com/microsoft/fluentui/pull/36118) by machi@microsoft.com)
|
|
17
|
+
- fix: synchronize compound-button template with button template ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
|
|
18
|
+
- fix: enhance accessibility attributes for dialog component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
|
|
19
|
+
|
|
20
|
+
## [3.0.0-rc.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.18)
|
|
21
|
+
|
|
22
|
+
Mon, 11 May 2026 04:09:08 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.17..@fluentui/web-components_v3.0.0-rc.18)
|
|
24
|
+
|
|
25
|
+
### Changes
|
|
26
|
+
|
|
27
|
+
- fix: migrate to esbuild for CDN bundle, enable setTheme on globalThis ([PR #36113](https://github.com/microsoft/fluentui/pull/36113) by 13071055+chrisdholt@users.noreply.github.com)
|
|
28
|
+
|
|
7
29
|
## [3.0.0-rc.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.17)
|
|
8
30
|
|
|
9
|
-
Wed, 06 May 2026 19:08:
|
|
31
|
+
Wed, 06 May 2026 19:08:42 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.16..@fluentui/web-components_v3.0.0-rc.17)
|
|
11
33
|
|
|
12
34
|
### Changes
|
package/custom-elements.json
CHANGED
|
@@ -13402,11 +13402,6 @@
|
|
|
13402
13402
|
"privacy": "public",
|
|
13403
13403
|
"description": "The dialog element"
|
|
13404
13404
|
},
|
|
13405
|
-
{
|
|
13406
|
-
"kind": "method",
|
|
13407
|
-
"name": "dialogChanged",
|
|
13408
|
-
"privacy": "protected"
|
|
13409
|
-
},
|
|
13410
13405
|
{
|
|
13411
13406
|
"kind": "field",
|
|
13412
13407
|
"name": "ariaDescribedby",
|
|
@@ -13448,32 +13443,13 @@
|
|
|
13448
13443
|
},
|
|
13449
13444
|
{
|
|
13450
13445
|
"kind": "method",
|
|
13451
|
-
"name": "
|
|
13452
|
-
"privacy": "
|
|
13446
|
+
"name": "emitBeforeToggle",
|
|
13447
|
+
"privacy": "public",
|
|
13453
13448
|
"return": {
|
|
13454
13449
|
"type": {
|
|
13455
13450
|
"text": "void"
|
|
13456
13451
|
}
|
|
13457
13452
|
},
|
|
13458
|
-
"parameters": [
|
|
13459
|
-
{
|
|
13460
|
-
"name": "prev",
|
|
13461
|
-
"type": {
|
|
13462
|
-
"text": "DialogType | undefined"
|
|
13463
|
-
}
|
|
13464
|
-
},
|
|
13465
|
-
{
|
|
13466
|
-
"name": "next",
|
|
13467
|
-
"type": {
|
|
13468
|
-
"text": "DialogType"
|
|
13469
|
-
}
|
|
13470
|
-
}
|
|
13471
|
-
]
|
|
13472
|
-
},
|
|
13473
|
-
{
|
|
13474
|
-
"kind": "field",
|
|
13475
|
-
"name": "emitBeforeToggle",
|
|
13476
|
-
"privacy": "public",
|
|
13477
13453
|
"description": "Method to emit an event before the dialog's open state changes\nHTML spec proposal: https://github.com/whatwg/html/issues/9733"
|
|
13478
13454
|
},
|
|
13479
13455
|
{
|
|
@@ -13894,14 +13870,6 @@
|
|
|
13894
13870
|
}
|
|
13895
13871
|
],
|
|
13896
13872
|
"members": [
|
|
13897
|
-
{
|
|
13898
|
-
"kind": "field",
|
|
13899
|
-
"name": "roleAttrObserver",
|
|
13900
|
-
"type": {
|
|
13901
|
-
"text": "MutationObserver"
|
|
13902
|
-
},
|
|
13903
|
-
"privacy": "protected"
|
|
13904
|
-
},
|
|
13905
13873
|
{
|
|
13906
13874
|
"kind": "field",
|
|
13907
13875
|
"name": "type",
|
|
@@ -13914,11 +13882,6 @@
|
|
|
13914
13882
|
"text": "'inline' | 'modal' | 'non-modal'"
|
|
13915
13883
|
}
|
|
13916
13884
|
},
|
|
13917
|
-
{
|
|
13918
|
-
"kind": "method",
|
|
13919
|
-
"name": "typeChanged",
|
|
13920
|
-
"privacy": "protected"
|
|
13921
|
-
},
|
|
13922
13885
|
{
|
|
13923
13886
|
"kind": "field",
|
|
13924
13887
|
"name": "ariaLabelledby",
|
|
@@ -13949,6 +13912,14 @@
|
|
|
13949
13912
|
"text": "'start' | 'end'"
|
|
13950
13913
|
}
|
|
13951
13914
|
},
|
|
13915
|
+
{
|
|
13916
|
+
"kind": "field",
|
|
13917
|
+
"name": "role",
|
|
13918
|
+
"type": {
|
|
13919
|
+
"text": "string | null"
|
|
13920
|
+
},
|
|
13921
|
+
"privacy": "public"
|
|
13922
|
+
},
|
|
13952
13923
|
{
|
|
13953
13924
|
"kind": "field",
|
|
13954
13925
|
"name": "size",
|
|
@@ -14027,16 +13998,6 @@
|
|
|
14027
13998
|
"name": "cancelHandler",
|
|
14028
13999
|
"privacy": "public",
|
|
14029
14000
|
"description": "Handles cancel events on the drawer."
|
|
14030
|
-
},
|
|
14031
|
-
{
|
|
14032
|
-
"kind": "method",
|
|
14033
|
-
"name": "observeRoleAttr",
|
|
14034
|
-
"privacy": "protected"
|
|
14035
|
-
},
|
|
14036
|
-
{
|
|
14037
|
-
"kind": "method",
|
|
14038
|
-
"name": "updateDialogRole",
|
|
14039
|
-
"privacy": "protected"
|
|
14040
14001
|
}
|
|
14041
14002
|
],
|
|
14042
14003
|
"events": [
|
|
@@ -27952,6 +27913,12 @@
|
|
|
27952
27913
|
}
|
|
27953
27914
|
]
|
|
27954
27915
|
},
|
|
27916
|
+
{
|
|
27917
|
+
"kind": "javascript-module",
|
|
27918
|
+
"path": "src/define-all.ts",
|
|
27919
|
+
"declarations": [],
|
|
27920
|
+
"exports": []
|
|
27921
|
+
},
|
|
27955
27922
|
{
|
|
27956
27923
|
"kind": "javascript-module",
|
|
27957
27924
|
"path": "src/theme/set-theme.ts",
|
|
@@ -27993,19 +27960,25 @@
|
|
|
27993
27960
|
},
|
|
27994
27961
|
{
|
|
27995
27962
|
"kind": "javascript-module",
|
|
27996
|
-
"path": "src/index-rollup.ts",
|
|
27963
|
+
"path": "src/index-all-rollup.ts",
|
|
27997
27964
|
"declarations": [],
|
|
27998
27965
|
"exports": [
|
|
27999
27966
|
{
|
|
28000
27967
|
"kind": "js",
|
|
28001
|
-
"name": "
|
|
27968
|
+
"name": "*",
|
|
28002
27969
|
"declaration": {
|
|
28003
|
-
"name": "
|
|
28004
|
-
"module": "
|
|
27970
|
+
"name": "*",
|
|
27971
|
+
"module": "src/index.js"
|
|
28005
27972
|
}
|
|
28006
27973
|
}
|
|
28007
27974
|
]
|
|
28008
27975
|
},
|
|
27976
|
+
{
|
|
27977
|
+
"kind": "javascript-module",
|
|
27978
|
+
"path": "src/index-rollup.ts",
|
|
27979
|
+
"declarations": [],
|
|
27980
|
+
"exports": []
|
|
27981
|
+
},
|
|
28009
27982
|
{
|
|
28010
27983
|
"kind": "javascript-module",
|
|
28011
27984
|
"path": "src/patterns/aria-globals.ts",
|
|
@@ -2,12 +2,14 @@ import { type ElementViewTemplate } from '@microsoft/fast-element';
|
|
|
2
2
|
import type { CompoundButton } from './compound-button.js';
|
|
3
3
|
import type { CompoundButtonOptions } from './compound-button.options.js';
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Generates a template for the Button component.
|
|
6
|
+
*
|
|
6
7
|
* @public
|
|
7
8
|
*/
|
|
8
9
|
export declare function buttonTemplate<T extends CompoundButton>(options?: CompoundButtonOptions): ElementViewTemplate<T>;
|
|
9
10
|
/**
|
|
10
11
|
* The template for the Button component.
|
|
12
|
+
*
|
|
11
13
|
* @public
|
|
12
14
|
*/
|
|
13
15
|
export declare const template: ElementViewTemplate<CompoundButton>;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { html, slotted } from '@microsoft/fast-element';
|
|
2
2
|
import { endSlotTemplate, startSlotTemplate } from '../patterns/start-end.js';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Generates a template for the Button component.
|
|
5
|
+
*
|
|
5
6
|
* @public
|
|
6
7
|
*/
|
|
7
8
|
export function buttonTemplate(options = {}) {
|
|
8
9
|
return html `
|
|
9
|
-
<template
|
|
10
|
+
<template
|
|
11
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
12
|
+
@keypress="${(x, c) => x.keypressHandler(c.event)}"
|
|
13
|
+
>
|
|
10
14
|
${startSlotTemplate(options)}
|
|
11
15
|
<span class="content" part="content">
|
|
12
16
|
<slot ${slotted('defaultSlottedContent')}></slot>
|
|
@@ -18,6 +22,7 @@ export function buttonTemplate(options = {}) {
|
|
|
18
22
|
}
|
|
19
23
|
/**
|
|
20
24
|
* The template for the Button component.
|
|
25
|
+
*
|
|
21
26
|
* @public
|
|
22
27
|
*/
|
|
23
28
|
export const template = buttonTemplate();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E
|
|
1
|
+
{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAEhE,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import './accordion-item/define.js';
|
|
2
|
+
import './accordion/define.js';
|
|
3
|
+
import './anchor-button/define.js';
|
|
4
|
+
import './avatar/define.js';
|
|
5
|
+
import './badge/define.js';
|
|
6
|
+
import './button/define.js';
|
|
7
|
+
import './checkbox/define.js';
|
|
8
|
+
import './compound-button/define.js';
|
|
9
|
+
import './counter-badge/define.js';
|
|
10
|
+
import './dialog/define.js';
|
|
11
|
+
import './dialog-body/define.js';
|
|
12
|
+
import './divider/define.js';
|
|
13
|
+
import './drawer/define.js';
|
|
14
|
+
import './drawer-body/define.js';
|
|
15
|
+
import './dropdown/define.js';
|
|
16
|
+
import './field/define.js';
|
|
17
|
+
import './image/define.js';
|
|
18
|
+
import './label/define.js';
|
|
19
|
+
import './link/define.js';
|
|
20
|
+
import './listbox/define.js';
|
|
21
|
+
import './menu-button/define.js';
|
|
22
|
+
import './menu-item/define.js';
|
|
23
|
+
import './menu-list/define.js';
|
|
24
|
+
import './menu/define.js';
|
|
25
|
+
import './message-bar/define.js';
|
|
26
|
+
import './option/define.js';
|
|
27
|
+
import './progress-bar/define.js';
|
|
28
|
+
import './radio-group/define.js';
|
|
29
|
+
import './radio/define.js';
|
|
30
|
+
import './rating-display/define.js';
|
|
31
|
+
import './slider/define.js';
|
|
32
|
+
import './spinner/define.js';
|
|
33
|
+
import './switch/define.js';
|
|
34
|
+
import './tab/define.js';
|
|
35
|
+
import './tablist/define.js';
|
|
36
|
+
import './textarea/define.js';
|
|
37
|
+
import './text-input/define.js';
|
|
38
|
+
import './text/define.js';
|
|
39
|
+
import './toggle-button/define.js';
|
|
40
|
+
import './tooltip/define.js';
|
|
41
|
+
import './tree/define.js';
|
|
42
|
+
import './tree-item/define.js';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import './accordion-item/define.js';
|
|
2
|
+
import './accordion/define.js';
|
|
3
|
+
import './anchor-button/define.js';
|
|
4
|
+
import './avatar/define.js';
|
|
5
|
+
import './badge/define.js';
|
|
6
|
+
import './button/define.js';
|
|
7
|
+
import './checkbox/define.js';
|
|
8
|
+
import './compound-button/define.js';
|
|
9
|
+
import './counter-badge/define.js';
|
|
10
|
+
import './dialog/define.js';
|
|
11
|
+
import './dialog-body/define.js';
|
|
12
|
+
import './divider/define.js';
|
|
13
|
+
import './drawer/define.js';
|
|
14
|
+
import './drawer-body/define.js';
|
|
15
|
+
import './dropdown/define.js';
|
|
16
|
+
import './field/define.js';
|
|
17
|
+
import './image/define.js';
|
|
18
|
+
import './label/define.js';
|
|
19
|
+
import './link/define.js';
|
|
20
|
+
import './listbox/define.js';
|
|
21
|
+
import './menu-button/define.js';
|
|
22
|
+
import './menu-item/define.js';
|
|
23
|
+
import './menu-list/define.js';
|
|
24
|
+
import './menu/define.js';
|
|
25
|
+
import './message-bar/define.js';
|
|
26
|
+
import './option/define.js';
|
|
27
|
+
import './progress-bar/define.js';
|
|
28
|
+
import './radio-group/define.js';
|
|
29
|
+
import './radio/define.js';
|
|
30
|
+
import './rating-display/define.js';
|
|
31
|
+
import './slider/define.js';
|
|
32
|
+
import './spinner/define.js';
|
|
33
|
+
import './switch/define.js';
|
|
34
|
+
import './tab/define.js';
|
|
35
|
+
import './tablist/define.js';
|
|
36
|
+
import './textarea/define.js';
|
|
37
|
+
import './text-input/define.js';
|
|
38
|
+
import './text/define.js';
|
|
39
|
+
import './toggle-button/define.js';
|
|
40
|
+
import './tooltip/define.js';
|
|
41
|
+
import './tree/define.js';
|
|
42
|
+
import './tree-item/define.js';
|
|
43
|
+
//# sourceMappingURL=define-all.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"define-all.js","sourceRoot":"","sources":["../../src/define-all.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC"}
|
|
@@ -14,7 +14,6 @@ export declare class Dialog extends FASTElement {
|
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
16
|
dialog: HTMLDialogElement;
|
|
17
|
-
protected dialogChanged(): void;
|
|
18
17
|
/**
|
|
19
18
|
* The ID of the element that describes the dialog
|
|
20
19
|
*
|
|
@@ -39,14 +38,49 @@ export declare class Dialog extends FASTElement {
|
|
|
39
38
|
* @public
|
|
40
39
|
*/
|
|
41
40
|
type: DialogType;
|
|
42
|
-
|
|
41
|
+
/**
|
|
42
|
+
* The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
|
|
43
|
+
* is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
|
|
44
|
+
*
|
|
45
|
+
* @internal
|
|
46
|
+
*/
|
|
47
|
+
get dialogDescribedby(): string | undefined;
|
|
48
|
+
/**
|
|
49
|
+
* The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
|
|
50
|
+
* ensure that the dialog's accessible name is properly announced by assistive technologies.
|
|
51
|
+
*
|
|
52
|
+
* @internal
|
|
53
|
+
*/
|
|
54
|
+
get dialogLabel(): string | null | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
|
|
57
|
+
* used to ensure that the dialog's accessible name is properly announced by assistive technologies.
|
|
58
|
+
*
|
|
59
|
+
* @internal
|
|
60
|
+
*/
|
|
61
|
+
get dialogLabelledby(): string | undefined;
|
|
62
|
+
/**
|
|
63
|
+
* The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
|
|
64
|
+
* the modal state will be true, otherwise it will be undefined.
|
|
65
|
+
*
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
get dialogModal(): boolean | undefined;
|
|
69
|
+
/**
|
|
70
|
+
* The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
|
|
71
|
+
* be 'alertdialog', otherwise it will be undefined.
|
|
72
|
+
*
|
|
73
|
+
* @internal
|
|
74
|
+
*/
|
|
75
|
+
get dialogRole(): string | undefined;
|
|
76
|
+
connectedCallback(): void;
|
|
43
77
|
/**
|
|
44
78
|
* Method to emit an event before the dialog's open state changes
|
|
45
79
|
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
46
80
|
*
|
|
47
81
|
* @public
|
|
48
82
|
*/
|
|
49
|
-
emitBeforeToggle
|
|
83
|
+
emitBeforeToggle(): void;
|
|
50
84
|
/**
|
|
51
85
|
* Method to emit an event after the dialog's open state changes
|
|
52
86
|
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
@@ -74,10 +108,4 @@ export declare class Dialog extends FASTElement {
|
|
|
74
108
|
* @returns boolean
|
|
75
109
|
*/
|
|
76
110
|
clickHandler(event: Event): boolean;
|
|
77
|
-
/**
|
|
78
|
-
* Updates the internal dialog element's attributes based on its type.
|
|
79
|
-
*
|
|
80
|
-
* @internal
|
|
81
|
-
*/
|
|
82
|
-
protected updateDialogAttributes(): void;
|
|
83
111
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
|
|
2
|
+
import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
|
|
3
3
|
import { DialogType } from './dialog.options.js';
|
|
4
4
|
/**
|
|
5
5
|
* A Dialog Custom HTML Element.
|
|
@@ -11,24 +11,6 @@ import { DialogType } from './dialog.options.js';
|
|
|
11
11
|
export class Dialog extends FASTElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
|
-
/**
|
|
15
|
-
* The type of the dialog modal
|
|
16
|
-
*
|
|
17
|
-
* @public
|
|
18
|
-
*/
|
|
19
|
-
this.type = DialogType.modal;
|
|
20
|
-
/**
|
|
21
|
-
* Method to emit an event before the dialog's open state changes
|
|
22
|
-
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
23
|
-
*
|
|
24
|
-
* @public
|
|
25
|
-
*/
|
|
26
|
-
this.emitBeforeToggle = () => {
|
|
27
|
-
this.$emit('beforetoggle', {
|
|
28
|
-
oldState: this.dialog.open ? 'open' : 'closed',
|
|
29
|
-
newState: this.dialog.open ? 'closed' : 'open',
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
14
|
/**
|
|
33
15
|
* Method to emit an event after the dialog's open state changes
|
|
34
16
|
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
@@ -42,11 +24,78 @@ export class Dialog extends FASTElement {
|
|
|
42
24
|
});
|
|
43
25
|
};
|
|
44
26
|
}
|
|
45
|
-
|
|
46
|
-
|
|
27
|
+
/**
|
|
28
|
+
* The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
|
|
29
|
+
* is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
|
|
30
|
+
*
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
get dialogDescribedby() {
|
|
34
|
+
if (this.dialog) {
|
|
35
|
+
return this.ariaDescribedby;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
|
|
40
|
+
* ensure that the dialog's accessible name is properly announced by assistive technologies.
|
|
41
|
+
*
|
|
42
|
+
* @internal
|
|
43
|
+
*/
|
|
44
|
+
get dialogLabel() {
|
|
45
|
+
if (this.dialog) {
|
|
46
|
+
return this.ariaLabel;
|
|
47
|
+
}
|
|
47
48
|
}
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
/**
|
|
50
|
+
* The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
|
|
51
|
+
* used to ensure that the dialog's accessible name is properly announced by assistive technologies.
|
|
52
|
+
*
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
get dialogLabelledby() {
|
|
56
|
+
if (this.dialog) {
|
|
57
|
+
return this.ariaLabelledby;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
|
|
62
|
+
* the modal state will be true, otherwise it will be undefined.
|
|
63
|
+
*
|
|
64
|
+
* @internal
|
|
65
|
+
*/
|
|
66
|
+
get dialogModal() {
|
|
67
|
+
if (this.dialog && this.type !== DialogType.nonModal) {
|
|
68
|
+
return true;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
|
|
73
|
+
* be 'alertdialog', otherwise it will be undefined.
|
|
74
|
+
*
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
77
|
+
get dialogRole() {
|
|
78
|
+
if (this.dialog && this.type === DialogType.alert) {
|
|
79
|
+
return 'alertdialog';
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
connectedCallback() {
|
|
83
|
+
super.connectedCallback();
|
|
84
|
+
Updates.enqueue(() => {
|
|
85
|
+
this.type = this.type ?? DialogType.modal;
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Method to emit an event before the dialog's open state changes
|
|
90
|
+
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
91
|
+
*
|
|
92
|
+
* @public
|
|
93
|
+
*/
|
|
94
|
+
emitBeforeToggle() {
|
|
95
|
+
this.$emit('beforetoggle', {
|
|
96
|
+
oldState: this.dialog.open ? 'open' : 'closed',
|
|
97
|
+
newState: this.dialog.open ? 'closed' : 'open',
|
|
98
|
+
});
|
|
50
99
|
}
|
|
51
100
|
/**
|
|
52
101
|
* Method to show the dialog
|
|
@@ -88,28 +137,6 @@ export class Dialog extends FASTElement {
|
|
|
88
137
|
}
|
|
89
138
|
return true;
|
|
90
139
|
}
|
|
91
|
-
/**
|
|
92
|
-
* Updates the internal dialog element's attributes based on its type.
|
|
93
|
-
*
|
|
94
|
-
* @internal
|
|
95
|
-
*/
|
|
96
|
-
updateDialogAttributes() {
|
|
97
|
-
if (!this.dialog) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
if (this.type === DialogType.alert) {
|
|
101
|
-
this.dialog.setAttribute('role', 'alertdialog');
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
this.dialog.removeAttribute('role');
|
|
105
|
-
}
|
|
106
|
-
if (this.type !== DialogType.nonModal) {
|
|
107
|
-
this.dialog.setAttribute('aria-modal', 'true');
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
110
|
-
this.dialog.removeAttribute('aria-modal');
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
140
|
}
|
|
114
141
|
__decorate([
|
|
115
142
|
observable
|
|
@@ -126,4 +153,19 @@ __decorate([
|
|
|
126
153
|
__decorate([
|
|
127
154
|
attr
|
|
128
155
|
], Dialog.prototype, "type", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
volatile
|
|
158
|
+
], Dialog.prototype, "dialogDescribedby", null);
|
|
159
|
+
__decorate([
|
|
160
|
+
volatile
|
|
161
|
+
], Dialog.prototype, "dialogLabel", null);
|
|
162
|
+
__decorate([
|
|
163
|
+
volatile
|
|
164
|
+
], Dialog.prototype, "dialogLabelledby", null);
|
|
165
|
+
__decorate([
|
|
166
|
+
volatile
|
|
167
|
+
], Dialog.prototype, "dialogModal", null);
|
|
168
|
+
__decorate([
|
|
169
|
+
volatile
|
|
170
|
+
], Dialog.prototype, "dialogRole", null);
|
|
129
171
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,9 +7,11 @@ export const template = html `
|
|
|
7
7
|
<dialog
|
|
8
8
|
class="dialog"
|
|
9
9
|
part="dialog"
|
|
10
|
-
aria-
|
|
11
|
-
aria-
|
|
12
|
-
aria-
|
|
10
|
+
aria-modal="${x => x.dialogModal}"
|
|
11
|
+
aria-describedby="${x => x.dialogDescribedby}"
|
|
12
|
+
aria-labelledby="${x => x.dialogLabelledby}"
|
|
13
|
+
aria-label="${x => x.dialogLabel}"
|
|
14
|
+
role="${x => x.dialogRole}"
|
|
13
15
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
14
16
|
@cancel="${x => x.hide()}"
|
|
15
17
|
${ref('dialog')}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;
|
|
1
|
+
{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
|