@fluentui/web-components 3.0.0-rc.10 → 3.0.0-rc.11
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 +11 -2
- package/custom-elements.json +125 -140
- package/dist/esm/anchor-button/anchor-button.base.js +1 -0
- package/dist/esm/anchor-button/anchor-button.base.js.map +1 -1
- package/dist/esm/avatar/avatar.base.d.ts +64 -10
- package/dist/esm/avatar/avatar.base.js +100 -27
- package/dist/esm/avatar/avatar.base.js.map +1 -1
- package/dist/esm/avatar/avatar.styles.js +20 -3
- package/dist/esm/avatar/avatar.styles.js.map +1 -1
- package/dist/esm/avatar/avatar.template.js +4 -3
- package/dist/esm/avatar/avatar.template.js.map +1 -1
- package/dist/esm/button/button.base.d.ts +15 -1
- package/dist/esm/button/button.base.js +27 -24
- package/dist/esm/button/button.base.js.map +1 -1
- package/dist/esm/button/button.template.d.ts +3 -3
- package/dist/esm/button/button.template.js.map +1 -1
- package/dist/esm/dialog/dialog.d.ts +8 -3
- package/dist/esm/dialog/dialog.js +26 -20
- package/dist/esm/dialog/dialog.js.map +1 -1
- package/dist/esm/drawer/drawer.js +0 -1
- package/dist/esm/drawer/drawer.js.map +1 -1
- package/dist/esm/dropdown/dropdown.base.d.ts +1 -0
- package/dist/esm/dropdown/dropdown.base.js +24 -15
- package/dist/esm/dropdown/dropdown.base.js.map +1 -1
- package/dist/esm/listbox/listbox.d.ts +12 -7
- package/dist/esm/listbox/listbox.js +27 -17
- package/dist/esm/listbox/listbox.js.map +1 -1
- package/dist/esm/listbox/listbox.template.js +2 -3
- package/dist/esm/listbox/listbox.template.js.map +1 -1
- package/dist/esm/menu/menu.d.ts +7 -0
- package/dist/esm/menu/menu.js +22 -17
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/option/option.js +1 -1
- package/dist/esm/option/option.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.base.d.ts +19 -4
- package/dist/esm/progress-bar/progress-bar.base.js +37 -19
- package/dist/esm/progress-bar/progress-bar.base.js.map +1 -1
- package/dist/esm/radio/radio.options.d.ts +9 -0
- package/dist/esm/radio/radio.options.js +12 -1
- package/dist/esm/radio/radio.options.js.map +1 -1
- package/dist/esm/radio-group/radio-group.d.ts +13 -7
- package/dist/esm/radio-group/radio-group.js +14 -21
- package/dist/esm/radio-group/radio-group.js.map +1 -1
- package/dist/esm/radio-group/radio-group.template.js +2 -2
- package/dist/esm/radio-group/radio-group.template.js.map +1 -1
- package/dist/esm/rating-display/rating-display.base.d.ts +11 -1
- package/dist/esm/rating-display/rating-display.base.js +24 -11
- package/dist/esm/rating-display/rating-display.base.js.map +1 -1
- package/dist/esm/slider/slider.d.ts +7 -3
- package/dist/esm/slider/slider.js +46 -28
- package/dist/esm/slider/slider.js.map +1 -1
- package/dist/esm/tab/tab.d.ts +13 -1
- package/dist/esm/tab/tab.js +16 -2
- package/dist/esm/tab/tab.js.map +1 -1
- package/dist/esm/tablist/tablist.base.d.ts +2 -1
- package/dist/esm/tablist/tablist.base.js +109 -95
- package/dist/esm/tablist/tablist.base.js.map +1 -1
- package/dist/esm/tablist/tablist.d.ts +2 -1
- package/dist/esm/tablist/tablist.js +2 -2
- package/dist/esm/tablist/tablist.js.map +1 -1
- package/dist/esm/text-input/text-input.base.js +12 -5
- package/dist/esm/text-input/text-input.base.js.map +1 -1
- package/dist/esm/text-input/text-input.template.d.ts +1 -1
- package/dist/esm/text-input/text-input.template.js +2 -8
- package/dist/esm/text-input/text-input.template.js.map +1 -1
- package/dist/esm/textarea/textarea.base.d.ts +7 -3
- package/dist/esm/textarea/textarea.base.js +38 -23
- package/dist/esm/textarea/textarea.base.js.map +1 -1
- package/dist/esm/tree/tree.base.d.ts +8 -0
- package/dist/esm/tree/tree.base.js +16 -2
- package/dist/esm/tree/tree.base.js.map +1 -1
- package/dist/esm/tree-item/tree-item.base.d.ts +7 -0
- package/dist/esm/tree-item/tree-item.base.js +14 -12
- package/dist/esm/tree-item/tree-item.base.js.map +1 -1
- package/dist/esm/utils/focusable-element.js +2 -1
- package/dist/esm/utils/focusable-element.js.map +1 -1
- package/dist/esm/utils/request-idle-callback.js +4 -9
- package/dist/esm/utils/request-idle-callback.js.map +1 -1
- package/dist/esm/utils/typings.d.ts +8 -0
- package/dist/esm/utils/typings.js +15 -1
- package/dist/esm/utils/typings.js.map +1 -1
- package/dist/web-components.d.ts +196 -43
- package/dist/web-components.js +537 -314
- package/dist/web-components.min.js +212 -212
- package/package.json +1 -1
|
@@ -5,16 +5,50 @@ import { FASTElement } from '@microsoft/fast-element';
|
|
|
5
5
|
*/
|
|
6
6
|
export declare class BaseAvatar extends FASTElement {
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Reference to the default slot element.
|
|
9
9
|
*
|
|
10
10
|
* @internal
|
|
11
11
|
*/
|
|
12
|
-
|
|
12
|
+
defaultSlot: HTMLSlotElement;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Handles changes to the default slot element reference.
|
|
15
|
+
*
|
|
16
|
+
* Toggles the `has-slotted` class on the slot element for browsers that do not
|
|
17
|
+
* support the `:has-slotted` CSS selector. Defers cleanup using
|
|
18
|
+
* `Updates.enqueue` to avoid DOM mutations during hydration that could
|
|
19
|
+
* corrupt binding markers.
|
|
20
|
+
*
|
|
15
21
|
* @internal
|
|
16
22
|
*/
|
|
17
|
-
|
|
23
|
+
defaultSlotChanged(): void;
|
|
24
|
+
/**
|
|
25
|
+
* Reference to the monogram element that displays generated initials.
|
|
26
|
+
*
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
monogram: HTMLElement;
|
|
30
|
+
/**
|
|
31
|
+
* Updates the monogram text content when the ref is captured.
|
|
32
|
+
*
|
|
33
|
+
* @internal
|
|
34
|
+
*/
|
|
35
|
+
protected monogramChanged(): void;
|
|
36
|
+
/**
|
|
37
|
+
* The slotted content nodes assigned to the default slot.
|
|
38
|
+
*
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
slottedDefaults: Node[];
|
|
42
|
+
/**
|
|
43
|
+
* Handles changes to the slotted default content.
|
|
44
|
+
*
|
|
45
|
+
* Normalizes the DOM, toggles the `has-slotted` class on the default slot element
|
|
46
|
+
* for browsers that do not support the `:has-slotted` CSS selector, and removes
|
|
47
|
+
* empty text nodes from the default slot to keep the DOM clean.
|
|
48
|
+
*
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
protected slottedDefaultsChanged(): void;
|
|
18
52
|
/**
|
|
19
53
|
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
20
54
|
*
|
|
@@ -29,22 +63,42 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
29
63
|
* HTML Attribute: name
|
|
30
64
|
*/
|
|
31
65
|
name?: string | undefined;
|
|
66
|
+
/**
|
|
67
|
+
* Handles changes to the name attribute.
|
|
68
|
+
* @internal
|
|
69
|
+
*/
|
|
70
|
+
protected nameChanged(): void;
|
|
32
71
|
/**
|
|
33
72
|
* Provide custom initials rather than one generated via the name
|
|
34
73
|
*
|
|
35
74
|
* @public
|
|
36
75
|
* @remarks
|
|
37
|
-
* HTML Attribute:
|
|
76
|
+
* HTML Attribute: initials
|
|
38
77
|
*/
|
|
39
78
|
initials?: string | undefined;
|
|
40
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Handles changes to the initials attribute.
|
|
81
|
+
* @internal
|
|
82
|
+
*/
|
|
83
|
+
protected initialsChanged(): void;
|
|
41
84
|
constructor();
|
|
42
|
-
disconnectedCallback(): void;
|
|
43
85
|
/**
|
|
44
|
-
*
|
|
86
|
+
* Generates and sets the initials for the template.
|
|
87
|
+
* Subclasses should override this to provide custom initials logic.
|
|
88
|
+
*
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
generateInitials(): string | void;
|
|
92
|
+
/**
|
|
93
|
+
* Updates the monogram element's text content with the generated initials.
|
|
94
|
+
*
|
|
95
|
+
* @internal
|
|
96
|
+
*/
|
|
97
|
+
protected updateMonogram(): void;
|
|
98
|
+
/**
|
|
99
|
+
* Normalizes the DOM and removes empty text nodes from the default slot.
|
|
45
100
|
*
|
|
46
|
-
* @param e - The event object
|
|
47
101
|
* @internal
|
|
48
102
|
*/
|
|
49
|
-
|
|
103
|
+
protected cleanupSlottedContent(): void;
|
|
50
104
|
}
|
|
@@ -1,16 +1,75 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr, FASTElement, Updates } from '@microsoft/fast-element';
|
|
2
|
+
import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
|
|
3
|
+
import { getInitials } from '../utils/get-initials.js';
|
|
3
4
|
/**
|
|
4
5
|
* The base class used for constructing a fluent-avatar custom element
|
|
5
6
|
* @public
|
|
6
7
|
*/
|
|
7
8
|
export class BaseAvatar extends FASTElement {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Handles changes to the default slot element reference.
|
|
11
|
+
*
|
|
12
|
+
* Toggles the `has-slotted` class on the slot element for browsers that do not
|
|
13
|
+
* support the `:has-slotted` CSS selector. Defers cleanup using
|
|
14
|
+
* `Updates.enqueue` to avoid DOM mutations during hydration that could
|
|
15
|
+
* corrupt binding markers.
|
|
16
|
+
*
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
defaultSlotChanged() {
|
|
20
|
+
if (!CSS.supports('selector(:has-slotted)')) {
|
|
21
|
+
const elements = this.defaultSlot.assignedElements();
|
|
22
|
+
this.defaultSlot.classList.toggle('has-slotted', elements.length > 0);
|
|
23
|
+
}
|
|
24
|
+
Updates.enqueue(() => {
|
|
25
|
+
this.cleanupSlottedContent();
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Updates the monogram text content when the ref is captured.
|
|
30
|
+
*
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
monogramChanged() {
|
|
34
|
+
this.updateMonogram();
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Handles changes to the slotted default content.
|
|
38
|
+
*
|
|
39
|
+
* Normalizes the DOM, toggles the `has-slotted` class on the default slot element
|
|
40
|
+
* for browsers that do not support the `:has-slotted` CSS selector, and removes
|
|
41
|
+
* empty text nodes from the default slot to keep the DOM clean.
|
|
42
|
+
*
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
slottedDefaultsChanged() {
|
|
46
|
+
if (!this.defaultSlot) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
this.cleanupSlottedContent();
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Handles changes to the name attribute.
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
nameChanged() {
|
|
56
|
+
this.updateMonogram();
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Handles changes to the initials attribute.
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
initialsChanged() {
|
|
63
|
+
this.updateMonogram();
|
|
11
64
|
}
|
|
12
65
|
constructor() {
|
|
13
66
|
super();
|
|
67
|
+
/**
|
|
68
|
+
* The slotted content nodes assigned to the default slot.
|
|
69
|
+
*
|
|
70
|
+
* @internal
|
|
71
|
+
*/
|
|
72
|
+
this.slottedDefaults = [];
|
|
14
73
|
/**
|
|
15
74
|
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
16
75
|
*
|
|
@@ -19,39 +78,53 @@ export class BaseAvatar extends FASTElement {
|
|
|
19
78
|
this.elementInternals = this.attachInternals();
|
|
20
79
|
this.elementInternals.role = 'img';
|
|
21
80
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
81
|
+
/**
|
|
82
|
+
* Generates and sets the initials for the template.
|
|
83
|
+
* Subclasses should override this to provide custom initials logic.
|
|
84
|
+
*
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
87
|
+
generateInitials() {
|
|
88
|
+
return this.initials || getInitials(this.name, window.getComputedStyle(this).direction === 'rtl');
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Updates the monogram element's text content with the generated initials.
|
|
92
|
+
*
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
95
|
+
updateMonogram() {
|
|
96
|
+
if (this.monogram) {
|
|
97
|
+
this.monogram.textContent = this.generateInitials() ?? '';
|
|
98
|
+
}
|
|
26
99
|
}
|
|
27
100
|
/**
|
|
28
|
-
*
|
|
101
|
+
* Normalizes the DOM and removes empty text nodes from the default slot.
|
|
29
102
|
*
|
|
30
|
-
* @param e - The event object
|
|
31
103
|
* @internal
|
|
32
104
|
*/
|
|
33
|
-
|
|
105
|
+
cleanupSlottedContent() {
|
|
34
106
|
this.normalize();
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const nodes = this.defaultSlot.assignedNodes();
|
|
38
|
-
nodes
|
|
39
|
-
.filter(node => node.nodeType === Node.TEXT_NODE)
|
|
40
|
-
.forEach(node => {
|
|
41
|
-
this.removeChild(node);
|
|
42
|
-
});
|
|
107
|
+
if (!CSS.supports('selector(:has-slotted)')) {
|
|
108
|
+
this.defaultSlot.classList.toggle('has-slotted', !!this.slottedDefaults.length);
|
|
43
109
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
once: true,
|
|
50
|
-
signal: this.abortSignal.signal,
|
|
110
|
+
if (!this.innerText.trim()) {
|
|
111
|
+
this.slottedDefaults.forEach(node => {
|
|
112
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
113
|
+
node.remove();
|
|
114
|
+
}
|
|
51
115
|
});
|
|
52
|
-
}
|
|
116
|
+
}
|
|
53
117
|
}
|
|
54
118
|
}
|
|
119
|
+
__decorate([
|
|
120
|
+
observable
|
|
121
|
+
], BaseAvatar.prototype, "defaultSlot", void 0);
|
|
122
|
+
__decorate([
|
|
123
|
+
observable
|
|
124
|
+
], BaseAvatar.prototype, "monogram", void 0);
|
|
125
|
+
__decorate([
|
|
126
|
+
observable
|
|
127
|
+
], BaseAvatar.prototype, "slottedDefaults", void 0);
|
|
55
128
|
__decorate([
|
|
56
129
|
attr
|
|
57
130
|
], BaseAvatar.prototype, "name", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.base.js","sourceRoot":"","sources":["../../../src/avatar/avatar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"avatar.base.js","sourceRoot":"","sources":["../../../src/avatar/avatar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IASzC;;;;;;;;;OASG;IACI,kBAAkB;QACvB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,CAAC;YAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAUD;;;;OAIG;IACO,eAAe;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAUD;;;;;;;;OAQG;IACO,sBAAsB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAmBD;;;OAGG;IACO,WAAW;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAYD;;;OAGG;IACO,eAAe;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QApEV;;;;WAIG;QAEI,oBAAe,GAAW,EAAE,CAAC;QAkBpC;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAyCjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,OAAO,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IACpG,CAAC;IAED;;;;OAIG;IACO,cAAc;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAC5D,CAAC;IACH,CAAC;IAED;;;;OAIG;IACO,qBAAqB;QAC7B,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,CAAC;YAC5C,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAClF,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAClC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBACpC,IAAkB,CAAC,MAAM,EAAE,CAAC;gBAC/B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF;AA1JQ;IADN,UAAU;+CAC0B;AA6B9B;IADN,UAAU;4CACmB;AAiBvB;IADN,UAAU;mDACyB;AAiC7B;IADN,IAAI;wCAC4B;AAkB1B;IADN,IAAI;4CACgC"}
|
|
@@ -16,10 +16,11 @@ const animations = {
|
|
|
16
16
|
* @public
|
|
17
17
|
*/
|
|
18
18
|
export const styles = css `
|
|
19
|
-
${display('inline-
|
|
19
|
+
${display('inline-grid')} :host {
|
|
20
20
|
position: relative;
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
place-items: center;
|
|
22
|
+
place-content: center;
|
|
23
|
+
grid-template: 1fr / 1fr;
|
|
23
24
|
flex-shrink: 0;
|
|
24
25
|
width: 32px;
|
|
25
26
|
height: 32px;
|
|
@@ -32,6 +33,22 @@ export const styles = css `
|
|
|
32
33
|
contain: layout style;
|
|
33
34
|
}
|
|
34
35
|
|
|
36
|
+
.monogram,
|
|
37
|
+
.default-icon {
|
|
38
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.monogram:empty {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
|
|
46
|
+
.default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
|
|
47
|
+
:host(:is([name]):not([name=''])) .default-icon,
|
|
48
|
+
:host(:is([initials]):not([initials=''])) .default-icon {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
35
52
|
.default-icon,
|
|
36
53
|
::slotted(svg) {
|
|
37
54
|
width: 20px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.styles.js","sourceRoot":"","sources":["../../../src/avatar/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,oCAAoC,EACpC,6BAA6B,EAC7B,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,iCAAiC,EACjC,iCAAiC,EACjC,gCAAgC,EAChC,gCAAgC,EAChC,gCAAgC,EAChC,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,6BAA6B,EAC7B,2BAA2B,EAC3B,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,+BAA+B,EAC/B,+BAA+B,EAC/B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,+BAA+B,EAC/B,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,+BAA+B,EAC/B,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,UAAU,GAAG;IACjB,gBAAgB,EAAE,kBAAkB;IACpC,gBAAgB,EAAE,kBAAkB;IACpC,gBAAgB,EAAE,kBAAkB;IACpC,gBAAgB,EAAE,kBAAkB;IACpC,gBAAgB,EAAE,kBAAkB;IACpC,gBAAgB,EAAE,kBAAkB;IACpC,QAAQ,EAAE,gBAAgB;IAC1B,UAAU,EAAE,aAAa;IACzB,UAAU,EAAE,WAAW;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC
|
|
1
|
+
{"version":3,"file":"avatar.styles.js","sourceRoot":"","sources":["../../../src/avatar/avatar.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { html, ref } from '@microsoft/fast-element';
|
|
1
|
+
import { html, ref, slotted } from '@microsoft/fast-element';
|
|
2
2
|
const defaultIconTemplate = html `<svg
|
|
3
3
|
width="1em"
|
|
4
4
|
height="1em"
|
|
5
5
|
viewBox="0 0 20 20"
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
6
|
class="default-icon"
|
|
8
7
|
fill="currentcolor"
|
|
9
8
|
aria-hidden="true"
|
|
@@ -18,7 +17,9 @@ const defaultIconTemplate = html `<svg
|
|
|
18
17
|
*/
|
|
19
18
|
export function avatarTemplate() {
|
|
20
19
|
return html `
|
|
21
|
-
<slot ${
|
|
20
|
+
<slot class="default-slot" ${slotted('slottedDefaults')} ${ref('defaultSlot')}></slot>
|
|
21
|
+
<span class="monogram" ${ref('monogram')}>${x => x.initials}</span>
|
|
22
|
+
${defaultIconTemplate}
|
|
22
23
|
<slot name="badge"></slot>
|
|
23
24
|
`;
|
|
24
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;OAWzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;iCACiB,OAAO,CAAC,iBAAiB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC;6BACpD,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;MACzD,mBAAmB;;GAEtB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}
|
|
@@ -36,7 +36,15 @@ export declare class BaseButton extends FASTElement {
|
|
|
36
36
|
* HTML Attribute: `disabled`
|
|
37
37
|
*/
|
|
38
38
|
disabled: boolean;
|
|
39
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Handles changes to the disabled attribute. If the button is disabled, it
|
|
41
|
+
* should not be focusable.
|
|
42
|
+
*
|
|
43
|
+
* @param previous - the previous disabled value
|
|
44
|
+
* @param next - the new disabled value
|
|
45
|
+
* @internal
|
|
46
|
+
*/
|
|
47
|
+
disabledChanged(): void;
|
|
40
48
|
/**
|
|
41
49
|
* Indicates that the button is focusable while disabled.
|
|
42
50
|
*
|
|
@@ -226,6 +234,12 @@ export declare class BaseButton extends FASTElement {
|
|
|
226
234
|
* @public
|
|
227
235
|
*/
|
|
228
236
|
resetForm(): void;
|
|
237
|
+
/**
|
|
238
|
+
* Sets the `tabindex` attribute based on the disabled state of the button.
|
|
239
|
+
*
|
|
240
|
+
* @internal
|
|
241
|
+
*/
|
|
242
|
+
protected setTabIndex(): void;
|
|
229
243
|
/**
|
|
230
244
|
* Submits the associated form.
|
|
231
245
|
*
|
|
@@ -14,20 +14,16 @@ import { ButtonType } from './button.options.js';
|
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
16
|
export class BaseButton extends FASTElement {
|
|
17
|
+
/**
|
|
18
|
+
* Handles changes to the disabled attribute. If the button is disabled, it
|
|
19
|
+
* should not be focusable.
|
|
20
|
+
*
|
|
21
|
+
* @param previous - the previous disabled value
|
|
22
|
+
* @param next - the new disabled value
|
|
23
|
+
* @internal
|
|
24
|
+
*/
|
|
17
25
|
disabledChanged() {
|
|
18
|
-
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
if (this.disabled) {
|
|
22
|
-
this.removeAttribute('tabindex');
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
// If author sets tabindex to a non-positive value, the component should
|
|
26
|
-
// respect it, otherwise set it to 0 to avoid the anti-pattern of setting
|
|
27
|
-
// tabindex to a positive number. See details:
|
|
28
|
-
// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
|
|
29
|
-
this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
|
|
30
|
-
}
|
|
26
|
+
this.setTabIndex();
|
|
31
27
|
}
|
|
32
28
|
/**
|
|
33
29
|
* Sets the element's internal disabled state when the element is focusable while disabled.
|
|
@@ -37,7 +33,7 @@ export class BaseButton extends FASTElement {
|
|
|
37
33
|
* @internal
|
|
38
34
|
*/
|
|
39
35
|
disabledFocusableChanged(previous, next) {
|
|
40
|
-
if (this
|
|
36
|
+
if (this.elementInternals) {
|
|
41
37
|
this.elementInternals.ariaDisabled = `${!!next}`;
|
|
42
38
|
}
|
|
43
39
|
}
|
|
@@ -94,19 +90,10 @@ export class BaseButton extends FASTElement {
|
|
|
94
90
|
connectedCallback() {
|
|
95
91
|
super.connectedCallback();
|
|
96
92
|
this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
|
|
97
|
-
this.
|
|
93
|
+
this.setTabIndex();
|
|
98
94
|
}
|
|
99
95
|
constructor() {
|
|
100
96
|
super();
|
|
101
|
-
/**
|
|
102
|
-
* Sets the element's disabled state.
|
|
103
|
-
* @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
|
|
104
|
-
*
|
|
105
|
-
* @public
|
|
106
|
-
* @remarks
|
|
107
|
-
* HTML Attribute: `disabled`
|
|
108
|
-
*/
|
|
109
|
-
this.disabled = false;
|
|
110
97
|
/**
|
|
111
98
|
* Indicates that the button is focusable while disabled.
|
|
112
99
|
*
|
|
@@ -220,6 +207,22 @@ export class BaseButton extends FASTElement {
|
|
|
220
207
|
resetForm() {
|
|
221
208
|
this.elementInternals.form?.reset();
|
|
222
209
|
}
|
|
210
|
+
/**
|
|
211
|
+
* Sets the `tabindex` attribute based on the disabled state of the button.
|
|
212
|
+
*
|
|
213
|
+
* @internal
|
|
214
|
+
*/
|
|
215
|
+
setTabIndex() {
|
|
216
|
+
if (this.disabled) {
|
|
217
|
+
this.removeAttribute('tabindex');
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
// If author sets tabindex to a non-positive value, the component should
|
|
221
|
+
// respect it, otherwise set it to 0 to avoid the anti-pattern of setting
|
|
222
|
+
// tabindex to a positive number. See details:
|
|
223
|
+
// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
|
|
224
|
+
this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
|
|
225
|
+
}
|
|
223
226
|
/**
|
|
224
227
|
* Submits the associated form.
|
|
225
228
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.base.js","sourceRoot":"","sources":["../../../src/button/button.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAyB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;;;;;;;;GAUG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IA+
|
|
1
|
+
{"version":3,"file":"button.base.js","sourceRoot":"","sources":["../../../src/button/button.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { type ElementViewTemplate } from '@microsoft/fast-element';
|
|
2
|
-
import type {
|
|
2
|
+
import type { BaseButton } from './button.base.js';
|
|
3
3
|
import type { ButtonOptions } from './button.options.js';
|
|
4
4
|
/**
|
|
5
5
|
* Generates a template for the Button component.
|
|
6
6
|
*
|
|
7
7
|
* @public
|
|
8
8
|
*/
|
|
9
|
-
export declare function buttonTemplate<T extends
|
|
9
|
+
export declare function buttonTemplate<T extends BaseButton>(options?: ButtonOptions): ElementViewTemplate<T>;
|
|
10
10
|
/**
|
|
11
11
|
* The template for the Button component.
|
|
12
12
|
*
|
|
13
13
|
* @public
|
|
14
14
|
*/
|
|
15
|
-
export declare const template: ElementViewTemplate<
|
|
15
|
+
export declare const template: ElementViewTemplate<BaseButton>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.template.js","sourceRoot":"","sources":["../../../src/button/button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;;GAIG;AACH,MAAM,UAAU,cAAc,
|
|
1
|
+
{"version":3,"file":"button.template.js","sourceRoot":"","sources":["../../../src/button/button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAuB,UAAyB,EAAE;IAC9E,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;;QAExC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,cAAc,EAAE,CAAC"}
|
|
@@ -14,6 +14,7 @@ export declare class Dialog extends FASTElement {
|
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
16
|
dialog: HTMLDialogElement;
|
|
17
|
+
protected dialogChanged(): void;
|
|
17
18
|
/**
|
|
18
19
|
* The ID of the element that describes the dialog
|
|
19
20
|
*
|
|
@@ -38,9 +39,7 @@ export declare class Dialog extends FASTElement {
|
|
|
38
39
|
* @public
|
|
39
40
|
*/
|
|
40
41
|
type: DialogType;
|
|
41
|
-
protected typeChanged(prev: DialogType | undefined, next: DialogType
|
|
42
|
-
/** @internal */
|
|
43
|
-
connectedCallback(): void;
|
|
42
|
+
protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
|
|
44
43
|
/**
|
|
45
44
|
* Method to emit an event before the dialog's open state changes
|
|
46
45
|
* HTML spec proposal: https://github.com/whatwg/html/issues/9733
|
|
@@ -75,4 +74,10 @@ export declare class Dialog extends FASTElement {
|
|
|
75
74
|
* @returns boolean
|
|
76
75
|
*/
|
|
77
76
|
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;
|
|
78
83
|
}
|
|
@@ -42,27 +42,11 @@ export class Dialog extends FASTElement {
|
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
if (next === DialogType.alert) {
|
|
50
|
-
this.dialog.setAttribute('role', 'alertdialog');
|
|
51
|
-
}
|
|
52
|
-
else {
|
|
53
|
-
this.dialog.removeAttribute('role');
|
|
54
|
-
}
|
|
55
|
-
if (next !== DialogType.nonModal) {
|
|
56
|
-
this.dialog.setAttribute('aria-modal', 'true');
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
this.dialog.removeAttribute('aria-modal');
|
|
60
|
-
}
|
|
45
|
+
dialogChanged() {
|
|
46
|
+
this.updateDialogAttributes();
|
|
61
47
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
super.connectedCallback();
|
|
65
|
-
this.typeChanged(undefined, this.type);
|
|
48
|
+
typeChanged(prev, next) {
|
|
49
|
+
this.updateDialogAttributes();
|
|
66
50
|
}
|
|
67
51
|
/**
|
|
68
52
|
* Method to show the dialog
|
|
@@ -104,6 +88,28 @@ export class Dialog extends FASTElement {
|
|
|
104
88
|
}
|
|
105
89
|
return true;
|
|
106
90
|
}
|
|
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
|
+
}
|
|
107
113
|
}
|
|
108
114
|
__decorate([
|
|
109
115
|
observable
|
|
@@ -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;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
|