@fluentui/web-components 3.0.0-beta.50 → 3.0.0-beta.51
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 +12 -2
- package/dist/dts/avatar/avatar.d.ts +42 -42
- package/dist/esm/accordion/accordion.js +5 -5
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/avatar/avatar.js +48 -48
- package/dist/esm/avatar/avatar.js.map +1 -1
- package/dist/web-components.d.ts +59 -59
- package/dist/web-components.js +37 -35
- package/dist/web-components.min.js +155 -155
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 29 Jul 2024 04:07:16 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.51](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.51)
|
|
8
|
+
|
|
9
|
+
Mon, 29 Jul 2024 04:07:16 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.50..@fluentui/web-components_v3.0.0-beta.51)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: move size and generate initials out of base class ([PR #32123](https://github.com/microsoft/fluentui/pull/32123) by jes@microsoft.com)
|
|
15
|
+
- fix: reference accordion item base class in accordion ([PR #32117](https://github.com/microsoft/fluentui/pull/32117) by jes@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [3.0.0-beta.50](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.50)
|
|
8
18
|
|
|
9
|
-
Fri, 26 Jul 2024 04:08:
|
|
19
|
+
Fri, 26 Jul 2024 04:08:24 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.49..@fluentui/web-components_v3.0.0-beta.50)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
@@ -27,6 +27,42 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
27
27
|
* HTML Attribute: name
|
|
28
28
|
*/
|
|
29
29
|
initials?: string | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Optional activity indicator
|
|
32
|
+
* * active: the avatar will be decorated according to activeAppearance
|
|
33
|
+
* * inactive: the avatar will be reduced in size and partially transparent
|
|
34
|
+
* * undefined: normal display
|
|
35
|
+
*
|
|
36
|
+
* @public
|
|
37
|
+
* @remarks
|
|
38
|
+
* HTML Attribute: active
|
|
39
|
+
*/
|
|
40
|
+
active?: AvatarActive | undefined;
|
|
41
|
+
constructor();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* An Avatar Custom HTML Element.
|
|
45
|
+
* Based on BaseAvatar and includes style and layout specific attributes
|
|
46
|
+
*
|
|
47
|
+
* @public
|
|
48
|
+
*/
|
|
49
|
+
export declare class Avatar extends BaseAvatar {
|
|
50
|
+
/**
|
|
51
|
+
* The avatar can have a circular or square shape.
|
|
52
|
+
*
|
|
53
|
+
* @public
|
|
54
|
+
* @remarks
|
|
55
|
+
* HTML Attribute: shape
|
|
56
|
+
*/
|
|
57
|
+
shape?: AvatarShape | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* The appearance when `active="active"`
|
|
60
|
+
*
|
|
61
|
+
* @public
|
|
62
|
+
* @remarks
|
|
63
|
+
* HTML Attribute: appearance
|
|
64
|
+
*/
|
|
65
|
+
appearance?: AvatarAppearance | undefined;
|
|
30
66
|
/**
|
|
31
67
|
* Size of the avatar in pixels.
|
|
32
68
|
*
|
|
@@ -42,17 +78,6 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
42
78
|
*
|
|
43
79
|
*/
|
|
44
80
|
size?: AvatarSize | undefined;
|
|
45
|
-
/**
|
|
46
|
-
* Optional activity indicator
|
|
47
|
-
* * active: the avatar will be decorated according to activeAppearance
|
|
48
|
-
* * inactive: the avatar will be reduced in size and partially transparent
|
|
49
|
-
* * undefined: normal display
|
|
50
|
-
*
|
|
51
|
-
* @public
|
|
52
|
-
* @remarks
|
|
53
|
-
* HTML Attribute: active
|
|
54
|
-
*/
|
|
55
|
-
active?: AvatarActive | undefined;
|
|
56
81
|
/**
|
|
57
82
|
* The color when displaying either an icon or initials.
|
|
58
83
|
* * neutral (default): gray
|
|
@@ -74,9 +99,6 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
74
99
|
* Holds the current color state
|
|
75
100
|
*/
|
|
76
101
|
private currentColor;
|
|
77
|
-
constructor();
|
|
78
|
-
connectedCallback(): void;
|
|
79
|
-
disconnectedCallback(): void;
|
|
80
102
|
/**
|
|
81
103
|
* Handles changes to observable properties
|
|
82
104
|
* @internal
|
|
@@ -85,41 +107,19 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
85
107
|
*/
|
|
86
108
|
handleChange(source: any, propertyName: string): void;
|
|
87
109
|
/**
|
|
88
|
-
*
|
|
110
|
+
* Generates and sets the initials for the template
|
|
89
111
|
* @internal
|
|
90
112
|
*/
|
|
91
|
-
|
|
113
|
+
generateInitials(): string | void;
|
|
92
114
|
/**
|
|
93
|
-
*
|
|
115
|
+
* Sets the data-color attribute used for the visual presentation
|
|
94
116
|
* @internal
|
|
95
117
|
*/
|
|
96
|
-
|
|
118
|
+
generateColor(): void;
|
|
97
119
|
/**
|
|
98
120
|
* An array of the available Avatar named colors
|
|
99
121
|
*/
|
|
100
122
|
static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
* An Avatar Custom HTML Element.
|
|
104
|
-
* Based on BaseAvatar and includes style and layout specific attributes
|
|
105
|
-
*
|
|
106
|
-
* @public
|
|
107
|
-
*/
|
|
108
|
-
export declare class Avatar extends BaseAvatar {
|
|
109
|
-
/**
|
|
110
|
-
* The avatar can have a circular or square shape.
|
|
111
|
-
*
|
|
112
|
-
* @public
|
|
113
|
-
* @remarks
|
|
114
|
-
* HTML Attribute: shape
|
|
115
|
-
*/
|
|
116
|
-
shape?: AvatarShape | undefined;
|
|
117
|
-
/**
|
|
118
|
-
* The appearance when `active="active"`
|
|
119
|
-
*
|
|
120
|
-
* @public
|
|
121
|
-
* @remarks
|
|
122
|
-
* HTML Attribute: appearance
|
|
123
|
-
*/
|
|
124
|
-
appearance?: AvatarAppearance | undefined;
|
|
123
|
+
connectedCallback(): void;
|
|
124
|
+
disconnectedCallback(): void;
|
|
125
125
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { Observable } from '@microsoft/fast-element';
|
|
3
3
|
import { attr, FASTElement, observable } from '@microsoft/fast-element';
|
|
4
|
-
import {
|
|
4
|
+
import { BaseAccordionItem } from '../accordion-item/accordion-item.js';
|
|
5
5
|
import { AccordionExpandMode } from './accordion.options.js';
|
|
6
6
|
/**
|
|
7
7
|
* An Accordion Custom HTML Element
|
|
@@ -42,7 +42,7 @@ export class Accordion extends FASTElement {
|
|
|
42
42
|
// Add event listeners to each non-disabled AccordionItem
|
|
43
43
|
this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
|
|
44
44
|
this.accordionItems.forEach((item, index) => {
|
|
45
|
-
if (item instanceof
|
|
45
|
+
if (item instanceof BaseAccordionItem) {
|
|
46
46
|
item.addEventListener('click', this.expandedChangedHandler);
|
|
47
47
|
// Subscribe to the expanded attribute of the item
|
|
48
48
|
Observable.getNotifier(item).subscribe(this, 'expanded');
|
|
@@ -71,7 +71,7 @@ export class Accordion extends FASTElement {
|
|
|
71
71
|
*/
|
|
72
72
|
this.expandedChangedHandler = (evt) => {
|
|
73
73
|
const item = evt.target;
|
|
74
|
-
if (item instanceof
|
|
74
|
+
if (item instanceof BaseAccordionItem) {
|
|
75
75
|
if (!this.isSingleExpandMode()) {
|
|
76
76
|
item.expanded = !item.expanded;
|
|
77
77
|
// setSingleExpandMode sets activeItemIndex on its own
|
|
@@ -132,7 +132,7 @@ export class Accordion extends FASTElement {
|
|
|
132
132
|
if (this.accordionItems.length === 0) {
|
|
133
133
|
return null;
|
|
134
134
|
}
|
|
135
|
-
return ((_a = this.accordionItems.find((item) => item instanceof
|
|
135
|
+
return ((_a = this.accordionItems.find((item) => item instanceof BaseAccordionItem && item.expanded)) !== null && _a !== void 0 ? _a : this.accordionItems[0]);
|
|
136
136
|
}
|
|
137
137
|
/**
|
|
138
138
|
* Checks if the accordion is in single expand mode
|
|
@@ -153,7 +153,7 @@ export class Accordion extends FASTElement {
|
|
|
153
153
|
const currentItems = Array.from(this.accordionItems);
|
|
154
154
|
this.activeItemIndex = currentItems.indexOf(expandedItem);
|
|
155
155
|
currentItems.forEach((item, index) => {
|
|
156
|
-
if (item instanceof
|
|
156
|
+
if (item instanceof BaseAccordionItem) {
|
|
157
157
|
if (this.activeItemIndex === index) {
|
|
158
158
|
item.expanded = true;
|
|
159
159
|
item.expandbutton.setAttribute('aria-disabled', 'true');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/accordion/accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/accordion/accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QACE;;;;;;;WAOG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,KAAK,CAAC;QAyD3D,oBAAe,GAAW,CAAC,CAAC;QAkBpC;;;;WAIG;QACK,aAAQ,GAAG,GAAS,EAAE;YAC5B,IAAI,IAAI,CAAC,qBAAqB,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC3C,OAAO;aACR;YAED,uDAAuD;YACvD,MAAM,QAAQ,GAAc,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtD,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;YAEnC,0DAA0D;YAC1D,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAc,EAAE,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;YAEhG,yDAAyD;YACzD,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;YAChF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,KAAa,EAAE,EAAE;gBAC3D,IAAI,IAAI,YAAY,iBAAiB,EAAE;oBACrC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;oBAC5D,kDAAkD;oBAClD,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;iBAC1D;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;gBAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAuB,CAAC;gBAClE,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;aACxC;QACH,CAAC,CAAC;QAsCF;;;WAGG;QACK,wBAAmB,GAAG,CAAC,QAAa,EAAQ,EAAE;YACpD,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE;gBACpD,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;gBAC3D,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;gBAC3D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACjE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;QACK,2BAAsB,GAAkB,CAAC,GAAU,EAAQ,EAAE;YACnE,MAAM,IAAI,GAAG,GAAG,CAAC,MAAqB,CAAC;YAEvC,IAAI,IAAI,YAAY,iBAAiB,EAAE;gBACrC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;oBAC9B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;oBAC/B,sDAAsD;oBACtD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;iBAC1D;qBAAM;oBACL,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAChC;gBAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;IACJ,CAAC;IA/KQ,iBAAiB,CAAC,IAAyB,EAAE,IAAyB;QAC3E,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE7C,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QAED,IAAI,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE;YACvC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;YACvC,OAAO;SACR;QAED,uCAAuC;QACtC,YAAkC,aAAlC,YAAY,uBAAZ,YAAY,CAAwB,YAAY,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACrF,CAAC;IAaD;;OAEG;IACI,4BAA4B,CAAC,QAAuB,EAAE,QAAuB;QAClF,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;IACH,CAAC;IAED;;;OAGG;IACI,YAAY,CAAC,MAAW,EAAE,YAAoB;QACnD,IAAI,YAAY,KAAK,UAAU,EAAE;YAC/B,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;aAAM,IAAI,YAAY,KAAK,UAAU,EAAE;YACtC,mDAAmD;YACnD,8DAA8D;YAC9D,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;gBAChD,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;aAClC;SACF;IACH,CAAC;IAID;;;OAGG;IACK,gBAAgB;;QACtB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CACtB,CAAC,IAAiC,EAAE,EAAE,CAAC,IAAI,YAAY,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAC1F,mCAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAC5B,CAAC;IACJ,CAAC;IAmCD;;;OAGG;IACK,kBAAkB;QACxB,OAAO,IAAI,CAAC,UAAU,KAAK,mBAAmB,CAAC,MAAM,CAAC;IACxD,CAAC;IAED;;;;OAIG;IACK,mBAAmB,CAAC,YAAqB;QAC/C,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,OAAO;SACR;QACD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACrD,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE1D,YAAY,CAAC,OAAO,CAAC,CAAC,IAAa,EAAE,KAAa,EAAE,EAAE;YACpD,IAAI,IAAI,YAAY,iBAAiB,EAAE;gBACrC,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE;oBAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACrB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;iBACzD;qBAAM;oBACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBAEtB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;wBAClC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;qBACpD;iBACF;aACF;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CAkCF;AAhLQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACgC;AAyB5D;IADN,UAAU;wDACkC"}
|
|
@@ -7,7 +7,7 @@ import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
|
|
|
7
7
|
* The base class used for constructing a fluent-avatar custom element
|
|
8
8
|
* @public
|
|
9
9
|
*/
|
|
10
|
-
class BaseAvatar extends FASTElement {
|
|
10
|
+
export class BaseAvatar extends FASTElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super();
|
|
13
13
|
/**
|
|
@@ -18,15 +18,23 @@ class BaseAvatar extends FASTElement {
|
|
|
18
18
|
this.elementInternals = this.attachInternals();
|
|
19
19
|
this.elementInternals.role = 'img';
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
}
|
|
22
|
+
__decorate([
|
|
23
|
+
attr
|
|
24
|
+
], BaseAvatar.prototype, "name", void 0);
|
|
25
|
+
__decorate([
|
|
26
|
+
attr
|
|
27
|
+
], BaseAvatar.prototype, "initials", void 0);
|
|
28
|
+
__decorate([
|
|
29
|
+
attr
|
|
30
|
+
], BaseAvatar.prototype, "active", void 0);
|
|
31
|
+
/**
|
|
32
|
+
* An Avatar Custom HTML Element.
|
|
33
|
+
* Based on BaseAvatar and includes style and layout specific attributes
|
|
34
|
+
*
|
|
35
|
+
* @public
|
|
36
|
+
*/
|
|
37
|
+
class Avatar extends BaseAvatar {
|
|
30
38
|
/**
|
|
31
39
|
* Handles changes to observable properties
|
|
32
40
|
* @internal
|
|
@@ -43,6 +51,21 @@ class BaseAvatar extends FASTElement {
|
|
|
43
51
|
break;
|
|
44
52
|
}
|
|
45
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Generates and sets the initials for the template
|
|
56
|
+
* @internal
|
|
57
|
+
*/
|
|
58
|
+
generateInitials() {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
if (!this.name && !this.initials) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
// size can be undefined since we default it in CSS only
|
|
64
|
+
const size = (_a = this.size) !== null && _a !== void 0 ? _a : 32;
|
|
65
|
+
return ((_b = this.initials) !== null && _b !== void 0 ? _b : getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
|
|
66
|
+
firstInitialOnly: size <= 16,
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
46
69
|
/**
|
|
47
70
|
* Sets the data-color attribute used for the visual presentation
|
|
48
71
|
* @internal
|
|
@@ -60,59 +83,36 @@ class BaseAvatar extends FASTElement {
|
|
|
60
83
|
: (_b = this.color) !== null && _b !== void 0 ? _b : AvatarColor.neutral;
|
|
61
84
|
toggleState(this.elementInternals, `${this.currentColor}`, true);
|
|
62
85
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
// size can be undefined since we default it in CSS only
|
|
73
|
-
const size = (_a = this.size) !== null && _a !== void 0 ? _a : 32;
|
|
74
|
-
return ((_b = this.initials) !== null && _b !== void 0 ? _b : getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
|
|
75
|
-
firstInitialOnly: size <= 16,
|
|
76
|
-
}));
|
|
86
|
+
connectedCallback() {
|
|
87
|
+
super.connectedCallback();
|
|
88
|
+
Observable.getNotifier(this).subscribe(this);
|
|
89
|
+
this.generateColor();
|
|
90
|
+
}
|
|
91
|
+
disconnectedCallback() {
|
|
92
|
+
super.disconnectedCallback();
|
|
93
|
+
Observable.getNotifier(this).unsubscribe(this);
|
|
77
94
|
}
|
|
78
95
|
}
|
|
79
96
|
/**
|
|
80
97
|
* An array of the available Avatar named colors
|
|
81
98
|
*/
|
|
82
|
-
|
|
99
|
+
Avatar.colors = Object.values(AvatarNamedColor);
|
|
83
100
|
__decorate([
|
|
84
101
|
attr
|
|
85
|
-
],
|
|
102
|
+
], Avatar.prototype, "shape", void 0);
|
|
86
103
|
__decorate([
|
|
87
104
|
attr
|
|
88
|
-
],
|
|
105
|
+
], Avatar.prototype, "appearance", void 0);
|
|
89
106
|
__decorate([
|
|
90
107
|
attr({ converter: nullableNumberConverter })
|
|
91
|
-
],
|
|
92
|
-
__decorate([
|
|
93
|
-
attr
|
|
94
|
-
], BaseAvatar.prototype, "active", void 0);
|
|
108
|
+
], Avatar.prototype, "size", void 0);
|
|
95
109
|
__decorate([
|
|
96
110
|
attr
|
|
97
|
-
],
|
|
111
|
+
], Avatar.prototype, "color", void 0);
|
|
98
112
|
__decorate([
|
|
99
113
|
attr({ attribute: 'color-id' })
|
|
100
|
-
],
|
|
101
|
-
export {
|
|
102
|
-
/**
|
|
103
|
-
* An Avatar Custom HTML Element.
|
|
104
|
-
* Based on BaseAvatar and includes style and layout specific attributes
|
|
105
|
-
*
|
|
106
|
-
* @public
|
|
107
|
-
*/
|
|
108
|
-
export class Avatar extends BaseAvatar {
|
|
109
|
-
}
|
|
110
|
-
__decorate([
|
|
111
|
-
attr
|
|
112
|
-
], Avatar.prototype, "shape", void 0);
|
|
113
|
-
__decorate([
|
|
114
|
-
attr
|
|
115
|
-
], Avatar.prototype, "appearance", void 0);
|
|
114
|
+
], Avatar.prototype, "colorId", void 0);
|
|
115
|
+
export { Avatar };
|
|
116
116
|
// copied from React avatar
|
|
117
117
|
const getHashCode = (str) => {
|
|
118
118
|
let hashCode = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAc,UAAU,EAAW,MAAM,yBAAyB,CAAC;AACtH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAGL,WAAW,EACX,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,
|
|
1
|
+
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":"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"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -405,6 +405,65 @@ export declare class Avatar extends BaseAvatar {
|
|
|
405
405
|
* HTML Attribute: appearance
|
|
406
406
|
*/
|
|
407
407
|
appearance?: AvatarAppearance | undefined;
|
|
408
|
+
/**
|
|
409
|
+
* Size of the avatar in pixels.
|
|
410
|
+
*
|
|
411
|
+
* Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
|
|
412
|
+
* based on design guidelines for the Avatar control.
|
|
413
|
+
*
|
|
414
|
+
* If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
|
|
415
|
+
* to override the rendered size.
|
|
416
|
+
*
|
|
417
|
+
* @public
|
|
418
|
+
* @remarks
|
|
419
|
+
* HTML Attribute: size
|
|
420
|
+
*
|
|
421
|
+
*/
|
|
422
|
+
size?: AvatarSize | undefined;
|
|
423
|
+
/**
|
|
424
|
+
* The color when displaying either an icon or initials.
|
|
425
|
+
* * neutral (default): gray
|
|
426
|
+
* * brand: color from the brand palette
|
|
427
|
+
* * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
|
|
428
|
+
* * [AvatarNamedColor]: a specific color from the theme
|
|
429
|
+
*
|
|
430
|
+
* @public
|
|
431
|
+
* @remarks
|
|
432
|
+
* HTML Attribute: color
|
|
433
|
+
*/
|
|
434
|
+
color?: AvatarColor | undefined;
|
|
435
|
+
/**
|
|
436
|
+
* Specify a string to be used instead of the name, to determine which color to use when color="colorful".
|
|
437
|
+
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
438
|
+
*/
|
|
439
|
+
colorId?: AvatarNamedColor | undefined;
|
|
440
|
+
/**
|
|
441
|
+
* Holds the current color state
|
|
442
|
+
*/
|
|
443
|
+
private currentColor;
|
|
444
|
+
/**
|
|
445
|
+
* Handles changes to observable properties
|
|
446
|
+
* @internal
|
|
447
|
+
* @param source - the source of the change
|
|
448
|
+
* @param propertyName - the property name being changed
|
|
449
|
+
*/
|
|
450
|
+
handleChange(source: any, propertyName: string): void;
|
|
451
|
+
/**
|
|
452
|
+
* Generates and sets the initials for the template
|
|
453
|
+
* @internal
|
|
454
|
+
*/
|
|
455
|
+
generateInitials(): string | void;
|
|
456
|
+
/**
|
|
457
|
+
* Sets the data-color attribute used for the visual presentation
|
|
458
|
+
* @internal
|
|
459
|
+
*/
|
|
460
|
+
generateColor(): void;
|
|
461
|
+
/**
|
|
462
|
+
* An array of the available Avatar named colors
|
|
463
|
+
*/
|
|
464
|
+
static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
|
|
465
|
+
connectedCallback(): void;
|
|
466
|
+
disconnectedCallback(): void;
|
|
408
467
|
}
|
|
409
468
|
|
|
410
469
|
/**
|
|
@@ -983,21 +1042,6 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
983
1042
|
* HTML Attribute: name
|
|
984
1043
|
*/
|
|
985
1044
|
initials?: string | undefined;
|
|
986
|
-
/**
|
|
987
|
-
* Size of the avatar in pixels.
|
|
988
|
-
*
|
|
989
|
-
* Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
|
|
990
|
-
* based on design guidelines for the Avatar control.
|
|
991
|
-
*
|
|
992
|
-
* If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
|
|
993
|
-
* to override the rendered size.
|
|
994
|
-
*
|
|
995
|
-
* @public
|
|
996
|
-
* @remarks
|
|
997
|
-
* HTML Attribute: size
|
|
998
|
-
*
|
|
999
|
-
*/
|
|
1000
|
-
size?: AvatarSize | undefined;
|
|
1001
1045
|
/**
|
|
1002
1046
|
* Optional activity indicator
|
|
1003
1047
|
* * active: the avatar will be decorated according to activeAppearance
|
|
@@ -1009,51 +1053,7 @@ export declare class BaseAvatar extends FASTElement {
|
|
|
1009
1053
|
* HTML Attribute: active
|
|
1010
1054
|
*/
|
|
1011
1055
|
active?: AvatarActive | undefined;
|
|
1012
|
-
/**
|
|
1013
|
-
* The color when displaying either an icon or initials.
|
|
1014
|
-
* * neutral (default): gray
|
|
1015
|
-
* * brand: color from the brand palette
|
|
1016
|
-
* * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
|
|
1017
|
-
* * [AvatarNamedColor]: a specific color from the theme
|
|
1018
|
-
*
|
|
1019
|
-
* @public
|
|
1020
|
-
* @remarks
|
|
1021
|
-
* HTML Attribute: color
|
|
1022
|
-
*/
|
|
1023
|
-
color?: AvatarColor | undefined;
|
|
1024
|
-
/**
|
|
1025
|
-
* Specify a string to be used instead of the name, to determine which color to use when color="colorful".
|
|
1026
|
-
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
1027
|
-
*/
|
|
1028
|
-
colorId?: AvatarNamedColor | undefined;
|
|
1029
|
-
/**
|
|
1030
|
-
* Holds the current color state
|
|
1031
|
-
*/
|
|
1032
|
-
private currentColor;
|
|
1033
1056
|
constructor();
|
|
1034
|
-
connectedCallback(): void;
|
|
1035
|
-
disconnectedCallback(): void;
|
|
1036
|
-
/**
|
|
1037
|
-
* Handles changes to observable properties
|
|
1038
|
-
* @internal
|
|
1039
|
-
* @param source - the source of the change
|
|
1040
|
-
* @param propertyName - the property name being changed
|
|
1041
|
-
*/
|
|
1042
|
-
handleChange(source: any, propertyName: string): void;
|
|
1043
|
-
/**
|
|
1044
|
-
* Sets the data-color attribute used for the visual presentation
|
|
1045
|
-
* @internal
|
|
1046
|
-
*/
|
|
1047
|
-
generateColor(): void;
|
|
1048
|
-
/**
|
|
1049
|
-
* Generates and sets the initials for the template
|
|
1050
|
-
* @internal
|
|
1051
|
-
*/
|
|
1052
|
-
generateInitials(): string | void;
|
|
1053
|
-
/**
|
|
1054
|
-
* An array of the available Avatar named colors
|
|
1055
|
-
*/
|
|
1056
|
-
static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
|
|
1057
1057
|
}
|
|
1058
1058
|
|
|
1059
1059
|
/**
|
package/dist/web-components.js
CHANGED
|
@@ -4104,7 +4104,7 @@ class Accordion extends FASTElement {
|
|
|
4104
4104
|
children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
|
|
4105
4105
|
this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
|
|
4106
4106
|
this.accordionItems.forEach((item, index) => {
|
|
4107
|
-
if (item instanceof
|
|
4107
|
+
if (item instanceof BaseAccordionItem) {
|
|
4108
4108
|
item.addEventListener("click", this.expandedChangedHandler);
|
|
4109
4109
|
Observable.getNotifier(item).subscribe(this, "expanded");
|
|
4110
4110
|
}
|
|
@@ -4132,7 +4132,7 @@ class Accordion extends FASTElement {
|
|
|
4132
4132
|
*/
|
|
4133
4133
|
this.expandedChangedHandler = evt => {
|
|
4134
4134
|
const item = evt.target;
|
|
4135
|
-
if (item instanceof
|
|
4135
|
+
if (item instanceof BaseAccordionItem) {
|
|
4136
4136
|
if (!this.isSingleExpandMode()) {
|
|
4137
4137
|
item.expanded = !item.expanded;
|
|
4138
4138
|
this.activeItemIndex = this.accordionItems.indexOf(item);
|
|
@@ -4186,7 +4186,7 @@ class Accordion extends FASTElement {
|
|
|
4186
4186
|
if (this.accordionItems.length === 0) {
|
|
4187
4187
|
return null;
|
|
4188
4188
|
}
|
|
4189
|
-
return this.accordionItems.find(item => item instanceof
|
|
4189
|
+
return this.accordionItems.find(item => item instanceof BaseAccordionItem && item.expanded) ?? this.accordionItems[0];
|
|
4190
4190
|
}
|
|
4191
4191
|
/**
|
|
4192
4192
|
* Checks if the accordion is in single expand mode
|
|
@@ -4207,7 +4207,7 @@ class Accordion extends FASTElement {
|
|
|
4207
4207
|
const currentItems = Array.from(this.accordionItems);
|
|
4208
4208
|
this.activeItemIndex = currentItems.indexOf(expandedItem);
|
|
4209
4209
|
currentItems.forEach((item, index) => {
|
|
4210
|
-
if (item instanceof
|
|
4210
|
+
if (item instanceof BaseAccordionItem) {
|
|
4211
4211
|
if (this.activeItemIndex === index) {
|
|
4212
4212
|
item.expanded = true;
|
|
4213
4213
|
item.expandbutton.setAttribute("aria-disabled", "true");
|
|
@@ -4575,15 +4575,11 @@ class BaseAvatar extends FASTElement {
|
|
|
4575
4575
|
this.elementInternals = this.attachInternals();
|
|
4576
4576
|
this.elementInternals.role = "img";
|
|
4577
4577
|
}
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
disconnectedCallback() {
|
|
4584
|
-
super.disconnectedCallback();
|
|
4585
|
-
Observable.getNotifier(this).unsubscribe(this);
|
|
4586
|
-
}
|
|
4578
|
+
}
|
|
4579
|
+
__decorateClass$q([attr], BaseAvatar.prototype, "name", 2);
|
|
4580
|
+
__decorateClass$q([attr], BaseAvatar.prototype, "initials", 2);
|
|
4581
|
+
__decorateClass$q([attr], BaseAvatar.prototype, "active", 2);
|
|
4582
|
+
const _Avatar = class _Avatar extends BaseAvatar {
|
|
4587
4583
|
/**
|
|
4588
4584
|
* Handles changes to observable properties
|
|
4589
4585
|
* @internal
|
|
@@ -4598,17 +4594,6 @@ class BaseAvatar extends FASTElement {
|
|
|
4598
4594
|
break;
|
|
4599
4595
|
}
|
|
4600
4596
|
}
|
|
4601
|
-
/**
|
|
4602
|
-
* Sets the data-color attribute used for the visual presentation
|
|
4603
|
-
* @internal
|
|
4604
|
-
*/
|
|
4605
|
-
generateColor() {
|
|
4606
|
-
const colorful = this.color === AvatarColor.colorful;
|
|
4607
|
-
const prev = this.currentColor;
|
|
4608
|
-
toggleState(this.elementInternals, `${prev}`, false);
|
|
4609
|
-
this.currentColor = colorful && this.colorId ? this.colorId : colorful ? Avatar.colors[getHashCode(this.name ?? "") % Avatar.colors.length] : this.color ?? AvatarColor.neutral;
|
|
4610
|
-
toggleState(this.elementInternals, `${this.currentColor}`, true);
|
|
4611
|
-
}
|
|
4612
4597
|
/**
|
|
4613
4598
|
* Generates and sets the initials for the template
|
|
4614
4599
|
* @internal
|
|
@@ -4622,24 +4607,41 @@ class BaseAvatar extends FASTElement {
|
|
|
4622
4607
|
firstInitialOnly: size <= 16
|
|
4623
4608
|
});
|
|
4624
4609
|
}
|
|
4625
|
-
|
|
4610
|
+
/**
|
|
4611
|
+
* Sets the data-color attribute used for the visual presentation
|
|
4612
|
+
* @internal
|
|
4613
|
+
*/
|
|
4614
|
+
generateColor() {
|
|
4615
|
+
const colorful = this.color === AvatarColor.colorful;
|
|
4616
|
+
const prev = this.currentColor;
|
|
4617
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
4618
|
+
this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
|
|
4619
|
+
toggleState(this.elementInternals, `${this.currentColor}`, true);
|
|
4620
|
+
}
|
|
4621
|
+
connectedCallback() {
|
|
4622
|
+
super.connectedCallback();
|
|
4623
|
+
Observable.getNotifier(this).subscribe(this);
|
|
4624
|
+
this.generateColor();
|
|
4625
|
+
}
|
|
4626
|
+
disconnectedCallback() {
|
|
4627
|
+
super.disconnectedCallback();
|
|
4628
|
+
Observable.getNotifier(this).unsubscribe(this);
|
|
4629
|
+
}
|
|
4630
|
+
};
|
|
4626
4631
|
/**
|
|
4627
4632
|
* An array of the available Avatar named colors
|
|
4628
4633
|
*/
|
|
4629
|
-
|
|
4630
|
-
__decorateClass$q([attr],
|
|
4631
|
-
__decorateClass$q([attr],
|
|
4634
|
+
_Avatar.colors = Object.values(AvatarNamedColor);
|
|
4635
|
+
__decorateClass$q([attr], _Avatar.prototype, "shape", 2);
|
|
4636
|
+
__decorateClass$q([attr], _Avatar.prototype, "appearance", 2);
|
|
4632
4637
|
__decorateClass$q([attr({
|
|
4633
4638
|
converter: nullableNumberConverter
|
|
4634
|
-
})],
|
|
4635
|
-
__decorateClass$q([attr],
|
|
4636
|
-
__decorateClass$q([attr], BaseAvatar.prototype, "color", 2);
|
|
4639
|
+
})], _Avatar.prototype, "size", 2);
|
|
4640
|
+
__decorateClass$q([attr], _Avatar.prototype, "color", 2);
|
|
4637
4641
|
__decorateClass$q([attr({
|
|
4638
4642
|
attribute: "color-id"
|
|
4639
|
-
})],
|
|
4640
|
-
|
|
4641
|
-
__decorateClass$q([attr], Avatar.prototype, "shape", 2);
|
|
4642
|
-
__decorateClass$q([attr], Avatar.prototype, "appearance", 2);
|
|
4643
|
+
})], _Avatar.prototype, "colorId", 2);
|
|
4644
|
+
let Avatar = _Avatar;
|
|
4643
4645
|
const getHashCode = str => {
|
|
4644
4646
|
let hashCode = 0;
|
|
4645
4647
|
for (let len = str.length - 1; len >= 0; len--) {
|