@fluentui/web-components 3.0.0-beta.120 → 3.0.0-beta.122
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 +20 -2
- package/custom-elements.json +124 -96
- package/dist/esm/rating-display/rating-display.base.d.ts +20 -32
- package/dist/esm/rating-display/rating-display.base.js +63 -48
- package/dist/esm/rating-display/rating-display.base.js.map +1 -1
- package/dist/esm/rating-display/rating-display.d.ts +1 -13
- package/dist/esm/rating-display/rating-display.js +0 -16
- package/dist/esm/rating-display/rating-display.js.map +1 -1
- package/dist/esm/rating-display/rating-display.styles.js +64 -37
- package/dist/esm/rating-display/rating-display.styles.js.map +1 -1
- package/dist/esm/rating-display/rating-display.template.d.ts +3 -0
- package/dist/esm/rating-display/rating-display.template.js +11 -15
- package/dist/esm/rating-display/rating-display.template.js.map +1 -1
- package/dist/esm/tree/tree.base.d.ts +6 -0
- package/dist/esm/tree/tree.base.js +6 -0
- package/dist/esm/tree/tree.base.js.map +1 -1
- package/dist/esm/tree/tree.template.js +2 -8
- package/dist/esm/tree/tree.template.js.map +1 -1
- package/dist/esm/tree-item/tree-item.base.d.ts +5 -0
- package/dist/esm/tree-item/tree-item.base.js +8 -0
- package/dist/esm/tree-item/tree-item.base.js.map +1 -1
- package/dist/esm/tree-item/tree-item.template.js +2 -9
- package/dist/esm/tree-item/tree-item.template.js.map +1 -1
- package/dist/web-components.d.ts +30 -44
- package/dist/web-components.js +95 -77
- package/dist/web-components.min.js +210 -189
- package/package.json +1 -1
|
@@ -21,22 +21,6 @@ export class RatingDisplay extends BaseRatingDisplay {
|
|
|
21
21
|
*/
|
|
22
22
|
this.compact = false;
|
|
23
23
|
}
|
|
24
|
-
/**
|
|
25
|
-
* Overrides the selected value and returns 1 if compact is true.
|
|
26
|
-
*
|
|
27
|
-
* @override
|
|
28
|
-
*/
|
|
29
|
-
getSelectedValue() {
|
|
30
|
-
return Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Overrides the maximum icons and returns a max of 1 if compact is true.
|
|
34
|
-
*
|
|
35
|
-
* @override
|
|
36
|
-
*/
|
|
37
|
-
getMaxIcons() {
|
|
38
|
-
return (this.compact ? 1 : this.max ?? 5) * 2;
|
|
39
|
-
}
|
|
40
24
|
}
|
|
41
25
|
__decorate([
|
|
42
26
|
attr
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D;;;;;;;GAOG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAuBE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D;;;;;;;GAOG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAuBE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;IAClC,CAAC;CAAA;AAtBQ;IADN,IAAI;4CAC6B;AAW3B;IADN,IAAI;2CAC2B;AAUzB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
|
|
3
3
|
import { colorBrandBackground2, colorBrandForeground1, colorNeutralBackground6, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBorderActive, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
|
|
4
|
+
import { svgToDataURI } from './rating-display.base.js';
|
|
5
|
+
import { defaultIconFilled, defaultIconOutlined } from './rating-display.template.js';
|
|
4
6
|
/**
|
|
5
7
|
* The styles for the Rating Display component.
|
|
6
8
|
*
|
|
@@ -10,9 +12,16 @@ export const styles = css `
|
|
|
10
12
|
${display('inline-flex')}
|
|
11
13
|
|
|
12
14
|
:host {
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
15
|
+
--_icon-size: 16px;
|
|
16
|
+
--_icon-gradient-degree: 90deg;
|
|
17
|
+
--_icon-color-value: ${colorPaletteMarigoldBorderActive};
|
|
18
|
+
--_icon-color-empty: ${colorPaletteMarigoldBackground2};
|
|
19
|
+
--_default-value: 0;
|
|
20
|
+
--_default-max: 5;
|
|
21
|
+
--_mask-image-filled: url(${svgToDataURI(defaultIconFilled)});
|
|
22
|
+
--_mask-image-outlined: url(${svgToDataURI(defaultIconOutlined)});
|
|
23
|
+
--_mask-position-x: left;
|
|
24
|
+
|
|
16
25
|
align-items: center;
|
|
17
26
|
color: ${colorNeutralForeground1};
|
|
18
27
|
font-family: ${fontFamilyBase};
|
|
@@ -22,12 +31,17 @@ export const styles = css `
|
|
|
22
31
|
user-select: none;
|
|
23
32
|
}
|
|
24
33
|
|
|
34
|
+
:host(:dir(rtl)) {
|
|
35
|
+
--_icon-gradient-degree: -90deg;
|
|
36
|
+
--_mask-position-x: right;
|
|
37
|
+
}
|
|
38
|
+
|
|
25
39
|
:host([size='small']) {
|
|
26
|
-
--
|
|
40
|
+
--_icon-size: 12px;
|
|
27
41
|
}
|
|
28
42
|
|
|
29
43
|
:host([size='large']) {
|
|
30
|
-
--
|
|
44
|
+
--_icon-size: 20px;
|
|
31
45
|
font-size: ${fontSizeBase300};
|
|
32
46
|
line-height: ${lineHeightBase300};
|
|
33
47
|
}
|
|
@@ -36,40 +50,48 @@ export const styles = css `
|
|
|
36
50
|
display: none;
|
|
37
51
|
}
|
|
38
52
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
fill: var(--icon-color-filled);
|
|
43
|
-
margin-inline-end: ${spacingHorizontalXXS};
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
svg:nth-child(odd) {
|
|
47
|
-
clip-path: inset(0 50% 0 0);
|
|
48
|
-
margin-inline-end: calc(0px - var(--icon-size));
|
|
53
|
+
:host([color='neutral']) {
|
|
54
|
+
--_icon-color-value: ${colorNeutralForeground1};
|
|
55
|
+
--_icon-color-empty: ${colorNeutralBackground6};
|
|
49
56
|
}
|
|
50
57
|
|
|
51
|
-
:host([color='
|
|
52
|
-
--
|
|
58
|
+
:host([color='brand']) {
|
|
59
|
+
--_icon-color-value: ${colorBrandForeground1};
|
|
60
|
+
--_icon-color-empty: ${colorBrandBackground2};
|
|
53
61
|
}
|
|
54
62
|
|
|
55
|
-
:
|
|
56
|
-
|
|
63
|
+
@supports (width: attr(value type(<number>))) {
|
|
64
|
+
:host {
|
|
65
|
+
--_attr-value: attr(value type(<number>));
|
|
66
|
+
--_attr-max: attr(max type(<number>));
|
|
67
|
+
}
|
|
57
68
|
}
|
|
58
69
|
|
|
59
|
-
:host(
|
|
60
|
-
|
|
61
|
-
svg[selected] ~ svg {
|
|
62
|
-
fill: var(--icon-color-empty);
|
|
70
|
+
:host([compact]) .display {
|
|
71
|
+
--_max: 1;
|
|
63
72
|
}
|
|
64
73
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
--
|
|
68
|
-
|
|
74
|
+
.display {
|
|
75
|
+
--_value: max(0, round(var(--_attr-value, var(--_default-value)) * 2) / 2);
|
|
76
|
+
--_max: max(1, var(--_attr-max, var(--_default-max)));
|
|
77
|
+
--_mask-inline-size: calc(var(--_icon-size) + ${spacingHorizontalXXS});
|
|
78
|
+
--_icon-gradient-stop-visual-adjustment: 0px;
|
|
79
|
+
--_icon-gradient-stop: calc(
|
|
80
|
+
var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
|
|
81
|
+
);
|
|
69
82
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
83
|
+
background-image: linear-gradient(
|
|
84
|
+
var(--_icon-gradient-degree),
|
|
85
|
+
var(--_icon-color-value) var(--_icon-gradient-stop),
|
|
86
|
+
var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
|
|
87
|
+
);
|
|
88
|
+
block-size: var(--_icon-size);
|
|
89
|
+
display: grid;
|
|
90
|
+
inline-size: calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);
|
|
91
|
+
mask-image: var(--_mask-image-filled);
|
|
92
|
+
mask-repeat: repeat no-repeat;
|
|
93
|
+
mask-size: var(--_mask-inline-size) var(--_icon-size);
|
|
94
|
+
mask-position: var(--_mask-position-x) center;
|
|
73
95
|
}
|
|
74
96
|
|
|
75
97
|
.value-label,
|
|
@@ -109,15 +131,20 @@ export const styles = css `
|
|
|
109
131
|
margin-inline: ${spacingHorizontalSNudge};
|
|
110
132
|
}
|
|
111
133
|
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
112
|
-
|
|
113
|
-
|
|
134
|
+
.display {
|
|
135
|
+
--_icon-color-value: CanvasText;
|
|
136
|
+
--_icon-color-empty: Canvas;
|
|
137
|
+
--_icon-gradient-stop-visual-adjustment: 0.5px;
|
|
138
|
+
|
|
139
|
+
forced-color-adjust: none;
|
|
114
140
|
}
|
|
115
141
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
142
|
+
.display::before {
|
|
143
|
+
background-color: var(--_icon-color-value);
|
|
144
|
+
content: '';
|
|
145
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
146
|
+
mask: inherit;
|
|
147
|
+
mask-image: var(--_mask-image-outlined);
|
|
121
148
|
}
|
|
122
149
|
`));
|
|
123
150
|
//# sourceMappingURL=rating-display.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;2BAKC,gCAAgC;2BAChC,+BAA+B;;;gCAG1B,YAAY,CAAC,iBAAiB,CAAC;kCAC7B,YAAY,CAAC,mBAAmB,CAAC;;;;aAItD,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;iBAgBnB,eAAe;mBACb,iBAAiB;;;;;;;;2BAQT,uBAAuB;2BACvB,uBAAuB;;;;2BAIvB,qBAAqB;2BACrB,qBAAqB;;;;;;;;;;;;;;;;;oDAiBI,oBAAoB;;;;;;;;;;;;;iEAaP,oBAAoB;;;;;;;;;;2BAU1D,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { type ElementViewTemplate } from '@microsoft/fast-element';
|
|
2
2
|
import type { RatingDisplay } from './rating-display.js';
|
|
3
|
+
export declare const defaultIconPath = "<path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" />";
|
|
4
|
+
export declare const defaultIconFilled = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
|
|
5
|
+
export declare const defaultIconOutlined = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\" stroke=\"black\" stroke-width=\"2\"\n><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
|
|
3
6
|
/**
|
|
4
7
|
* Generates a template for the Rating Display component.
|
|
5
8
|
*
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z"
|
|
11
|
-
/>
|
|
12
|
-
</symbol>
|
|
13
|
-
</svg>
|
|
1
|
+
import { html, ref } from '@microsoft/fast-element';
|
|
2
|
+
export const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
|
|
3
|
+
export const defaultIconFilled = `
|
|
4
|
+
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
|
|
5
|
+
`;
|
|
6
|
+
export const defaultIconOutlined = `
|
|
7
|
+
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
fill="none" stroke="black" stroke-width="2"
|
|
9
|
+
>${defaultIconPath}</svg>
|
|
14
10
|
`;
|
|
15
11
|
/**
|
|
16
12
|
* Generates a template for the Rating Display component.
|
|
@@ -19,8 +15,8 @@ const star = html `
|
|
|
19
15
|
*/
|
|
20
16
|
export function ratingDisplayTemplate() {
|
|
21
17
|
return html `
|
|
22
|
-
${
|
|
23
|
-
<slot name="icon" ${
|
|
18
|
+
<div ${ref('display')} class="display" aria-hidden="true"></div>
|
|
19
|
+
<slot name="icon" ${ref('iconSlot')} @slotchange="${x => x.handleSlotChange()}"></slot>
|
|
24
20
|
<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot>
|
|
25
21
|
<slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>
|
|
26
22
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAG,2aAA2a,CAAC;AAE3c,MAAM,CAAC,MAAM,iBAAiB,GAAG;8DAC6B,eAAe;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;GAGhC,eAAe;CACjB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;WACL,GAAG,CAAC,SAAS,CAAC;wBACD,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;sEACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}
|
|
@@ -18,8 +18,12 @@ export declare class BaseTree extends FASTElement {
|
|
|
18
18
|
* @internal
|
|
19
19
|
*/
|
|
20
20
|
elementInternals: ElementInternals;
|
|
21
|
+
/** @internal */
|
|
22
|
+
defaultSlot: HTMLSlotElement;
|
|
21
23
|
constructor();
|
|
24
|
+
/** @internal */
|
|
22
25
|
childTreeItems: BaseTreeItem[];
|
|
26
|
+
/** @internal */
|
|
23
27
|
childTreeItemsChanged(): void;
|
|
24
28
|
/**
|
|
25
29
|
* Updates current selected when slottedTreeItems changes
|
|
@@ -65,4 +69,6 @@ export declare class BaseTree extends FASTElement {
|
|
|
65
69
|
* Move focus to a tree item based on its offset from the provided item
|
|
66
70
|
*/
|
|
67
71
|
private focusNextNode;
|
|
72
|
+
/** @internal */
|
|
73
|
+
handleDefaultSlotChange(): void;
|
|
68
74
|
}
|
|
@@ -22,9 +22,11 @@ export class BaseTree extends FASTElement {
|
|
|
22
22
|
* @internal
|
|
23
23
|
*/
|
|
24
24
|
this.elementInternals = this.attachInternals();
|
|
25
|
+
/** @internal */
|
|
25
26
|
this.childTreeItems = [];
|
|
26
27
|
this.elementInternals.role = 'tree';
|
|
27
28
|
}
|
|
29
|
+
/** @internal */
|
|
28
30
|
childTreeItemsChanged() {
|
|
29
31
|
this.updateCurrentSelected();
|
|
30
32
|
}
|
|
@@ -221,6 +223,10 @@ export class BaseTree extends FASTElement {
|
|
|
221
223
|
focusItem.focus();
|
|
222
224
|
}
|
|
223
225
|
}
|
|
226
|
+
/** @internal */
|
|
227
|
+
handleDefaultSlotChange() {
|
|
228
|
+
this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
|
|
229
|
+
}
|
|
224
230
|
}
|
|
225
231
|
__decorate([
|
|
226
232
|
observable
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.base.js","sourceRoot":"","sources":["../../../src/tree/tree.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,UAAU,EACV,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,MAAM,OAAO,QAAS,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"tree.base.js","sourceRoot":"","sources":["../../../src/tree/tree.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FluentDesignSystem } from '../fluent-design-system.js';
|
|
1
|
+
import { html, ref } from '@microsoft/fast-element';
|
|
3
2
|
export const template = html `
|
|
4
3
|
<template
|
|
5
4
|
tabindex="0"
|
|
@@ -9,12 +8,7 @@ export const template = html `
|
|
|
9
8
|
@keydown="${(x, c) => x.keydownHandler(c.event)}"
|
|
10
9
|
@change="${(x, c) => x.changeHandler(c.event)}"
|
|
11
10
|
>
|
|
12
|
-
<slot
|
|
13
|
-
${slotted({
|
|
14
|
-
property: 'childTreeItems',
|
|
15
|
-
filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
|
|
16
|
-
})}
|
|
17
|
-
></slot>
|
|
11
|
+
<slot ${ref('defaultSlot')} @slotchange="${x => x.handleDefaultSlotChange()}"></slot>
|
|
18
12
|
</template>
|
|
19
13
|
`;
|
|
20
14
|
//# sourceMappingURL=tree.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;YAErC,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE;;CAE9E,CAAC"}
|
|
@@ -6,6 +6,8 @@ export declare class BaseTreeItem extends FASTElement {
|
|
|
6
6
|
* @internal
|
|
7
7
|
*/
|
|
8
8
|
elementInternals: ElementInternals;
|
|
9
|
+
/** @internal */
|
|
10
|
+
itemSlot: HTMLSlotElement;
|
|
9
11
|
constructor();
|
|
10
12
|
/**
|
|
11
13
|
* When true, the control will be appear expanded by user interaction.
|
|
@@ -50,6 +52,7 @@ export declare class BaseTreeItem extends FASTElement {
|
|
|
50
52
|
*/
|
|
51
53
|
dataIndent: number | undefined;
|
|
52
54
|
protected dataIndentChanged(prev: number, next: number): void;
|
|
55
|
+
/** @internal */
|
|
53
56
|
childTreeItems: BaseTreeItem[] | undefined;
|
|
54
57
|
/**
|
|
55
58
|
* Handles changes to the child tree items
|
|
@@ -80,4 +83,6 @@ export declare class BaseTreeItem extends FASTElement {
|
|
|
80
83
|
*/
|
|
81
84
|
get isNestedItem(): boolean;
|
|
82
85
|
protected updateTabindexBySelected(): void;
|
|
86
|
+
/** @internal */
|
|
87
|
+
handleItemSlotChange(): void;
|
|
83
88
|
}
|
|
@@ -30,6 +30,7 @@ export class BaseTreeItem extends FASTElement {
|
|
|
30
30
|
* HTML Attribute: empty
|
|
31
31
|
*/
|
|
32
32
|
this.empty = false;
|
|
33
|
+
/** @internal */
|
|
33
34
|
this.childTreeItems = [];
|
|
34
35
|
this.elementInternals.role = 'treeitem';
|
|
35
36
|
}
|
|
@@ -133,7 +134,14 @@ export class BaseTreeItem extends FASTElement {
|
|
|
133
134
|
this.tabIndex = this.selected ? 0 : -1;
|
|
134
135
|
}
|
|
135
136
|
}
|
|
137
|
+
/** @internal */
|
|
138
|
+
handleItemSlotChange() {
|
|
139
|
+
this.childTreeItems = this.itemSlot.assignedElements().filter(el => isTreeItem(el));
|
|
140
|
+
}
|
|
136
141
|
}
|
|
142
|
+
__decorate([
|
|
143
|
+
observable
|
|
144
|
+
], BaseTreeItem.prototype, "itemSlot", void 0);
|
|
137
145
|
__decorate([
|
|
138
146
|
attr({ mode: 'boolean' })
|
|
139
147
|
], BaseTreeItem.prototype, "expanded", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAiB,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,OAAO,YAAa,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FluentDesignSystem } from '../fluent-design-system.js';
|
|
1
|
+
import { html, ref } from '@microsoft/fast-element';
|
|
3
2
|
const chevronIcon = html `
|
|
4
3
|
<svg viewBox="0 0 12 12" fill="currentColor">
|
|
5
4
|
<path
|
|
@@ -23,13 +22,7 @@ export const template = html `
|
|
|
23
22
|
</div>
|
|
24
23
|
</div>
|
|
25
24
|
<div role="group" class="items" part="items">
|
|
26
|
-
<slot
|
|
27
|
-
name="item"
|
|
28
|
-
${slotted({
|
|
29
|
-
property: 'childTreeItems',
|
|
30
|
-
filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
|
|
31
|
-
})}
|
|
32
|
-
></slot>
|
|
25
|
+
<slot name="item" ${ref('itemSlot')} @slotchange="${x => x.handleItemSlotChange()}"></slot>
|
|
33
26
|
</div>
|
|
34
27
|
</template>
|
|
35
28
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;oBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;;;iCAI1B,WAAW;;;;;;;;;;;0BAWlB,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;CAGtF,CAAC"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -2274,12 +2274,21 @@ export declare class BaseProgressBar extends FASTElement {
|
|
|
2274
2274
|
* @public
|
|
2275
2275
|
*/
|
|
2276
2276
|
export declare class BaseRatingDisplay extends FASTElement {
|
|
2277
|
+
private numberFormatter;
|
|
2277
2278
|
/**
|
|
2278
2279
|
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
2279
2280
|
*
|
|
2280
2281
|
* @internal
|
|
2281
2282
|
*/
|
|
2282
2283
|
elementInternals: ElementInternals;
|
|
2284
|
+
/** @internal */
|
|
2285
|
+
iconSlot: HTMLSlotElement;
|
|
2286
|
+
protected defaultCustomIconViewBox: string;
|
|
2287
|
+
/**
|
|
2288
|
+
* The element that displays the rating icons.
|
|
2289
|
+
* @internal
|
|
2290
|
+
*/
|
|
2291
|
+
display: HTMLElement;
|
|
2283
2292
|
/**
|
|
2284
2293
|
* The number of ratings.
|
|
2285
2294
|
*
|
|
@@ -2292,9 +2301,9 @@ export declare class BaseRatingDisplay extends FASTElement {
|
|
|
2292
2301
|
* The `viewBox` attribute of the icon <svg> element.
|
|
2293
2302
|
*
|
|
2294
2303
|
* @public
|
|
2295
|
-
* @default `0 0 20 20`
|
|
2296
2304
|
* @remarks
|
|
2297
2305
|
* HTML Attribute: `icon-view-box`
|
|
2306
|
+
* @deprecated Add `viewBox` attribute on the custom SVG directly.
|
|
2298
2307
|
*/
|
|
2299
2308
|
iconViewBox?: string;
|
|
2300
2309
|
/**
|
|
@@ -2307,6 +2316,7 @@ export declare class BaseRatingDisplay extends FASTElement {
|
|
|
2307
2316
|
* HTML Attribute: `max`
|
|
2308
2317
|
*/
|
|
2309
2318
|
max?: number;
|
|
2319
|
+
protected maxChanged(): void;
|
|
2310
2320
|
/**
|
|
2311
2321
|
* The value of the rating.
|
|
2312
2322
|
*
|
|
@@ -2315,44 +2325,19 @@ export declare class BaseRatingDisplay extends FASTElement {
|
|
|
2315
2325
|
* HTML Attribute: `value`
|
|
2316
2326
|
*/
|
|
2317
2327
|
value?: number;
|
|
2318
|
-
|
|
2319
|
-
* @internal
|
|
2320
|
-
*/
|
|
2321
|
-
slottedIcon: HTMLElement[];
|
|
2322
|
-
/**
|
|
2323
|
-
* @internal
|
|
2324
|
-
*/
|
|
2325
|
-
slottedIconChanged(): void;
|
|
2326
|
-
/**
|
|
2327
|
-
* @internal
|
|
2328
|
-
*/
|
|
2329
|
-
private customIcon?;
|
|
2330
|
-
private intlNumberFormatter;
|
|
2328
|
+
protected valueChanged(): void;
|
|
2331
2329
|
constructor();
|
|
2330
|
+
connectedCallback(): void;
|
|
2332
2331
|
/**
|
|
2333
2332
|
* Returns "count" as string, formatted according to the locale.
|
|
2334
2333
|
*
|
|
2335
2334
|
* @internal
|
|
2336
2335
|
*/
|
|
2337
2336
|
get formattedCount(): string;
|
|
2338
|
-
/**
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
*/
|
|
2343
|
-
protected getSelectedValue(): number;
|
|
2344
|
-
/**
|
|
2345
|
-
* Gets the maximum icons to render
|
|
2346
|
-
*
|
|
2347
|
-
* @protected
|
|
2348
|
-
*/
|
|
2349
|
-
protected getMaxIcons(): number;
|
|
2350
|
-
/**
|
|
2351
|
-
* Generates the icon SVG elements based on the "max" attribute.
|
|
2352
|
-
*
|
|
2353
|
-
* @internal
|
|
2354
|
-
*/
|
|
2355
|
-
generateIcons(): string;
|
|
2337
|
+
/** @internal */
|
|
2338
|
+
handleSlotChange(): void;
|
|
2339
|
+
protected renderSlottedIcon(svg: SVGSVGElement | null): void;
|
|
2340
|
+
protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
|
|
2356
2341
|
}
|
|
2357
2342
|
|
|
2358
2343
|
/**
|
|
@@ -3327,8 +3312,12 @@ export declare class BaseTree extends FASTElement {
|
|
|
3327
3312
|
* @internal
|
|
3328
3313
|
*/
|
|
3329
3314
|
elementInternals: ElementInternals;
|
|
3315
|
+
/** @internal */
|
|
3316
|
+
defaultSlot: HTMLSlotElement;
|
|
3330
3317
|
constructor();
|
|
3318
|
+
/** @internal */
|
|
3331
3319
|
childTreeItems: BaseTreeItem[];
|
|
3320
|
+
/** @internal */
|
|
3332
3321
|
childTreeItemsChanged(): void;
|
|
3333
3322
|
/**
|
|
3334
3323
|
* Updates current selected when slottedTreeItems changes
|
|
@@ -3374,6 +3363,8 @@ export declare class BaseTree extends FASTElement {
|
|
|
3374
3363
|
* Move focus to a tree item based on its offset from the provided item
|
|
3375
3364
|
*/
|
|
3376
3365
|
private focusNextNode;
|
|
3366
|
+
/** @internal */
|
|
3367
|
+
handleDefaultSlotChange(): void;
|
|
3377
3368
|
}
|
|
3378
3369
|
|
|
3379
3370
|
declare class BaseTreeItem extends FASTElement {
|
|
@@ -3383,6 +3374,8 @@ declare class BaseTreeItem extends FASTElement {
|
|
|
3383
3374
|
* @internal
|
|
3384
3375
|
*/
|
|
3385
3376
|
elementInternals: ElementInternals;
|
|
3377
|
+
/** @internal */
|
|
3378
|
+
itemSlot: HTMLSlotElement;
|
|
3386
3379
|
constructor();
|
|
3387
3380
|
/**
|
|
3388
3381
|
* When true, the control will be appear expanded by user interaction.
|
|
@@ -3427,6 +3420,7 @@ declare class BaseTreeItem extends FASTElement {
|
|
|
3427
3420
|
*/
|
|
3428
3421
|
dataIndent: number | undefined;
|
|
3429
3422
|
protected dataIndentChanged(prev: number, next: number): void;
|
|
3423
|
+
/** @internal */
|
|
3430
3424
|
childTreeItems: BaseTreeItem[] | undefined;
|
|
3431
3425
|
/**
|
|
3432
3426
|
* Handles changes to the child tree items
|
|
@@ -3457,6 +3451,8 @@ declare class BaseTreeItem extends FASTElement {
|
|
|
3457
3451
|
*/
|
|
3458
3452
|
get isNestedItem(): boolean;
|
|
3459
3453
|
protected updateTabindexBySelected(): void;
|
|
3454
|
+
/** @internal */
|
|
3455
|
+
handleItemSlotChange(): void;
|
|
3460
3456
|
}
|
|
3461
3457
|
|
|
3462
3458
|
/**
|
|
@@ -8765,6 +8761,8 @@ export declare const ProgressBarValidationState: {
|
|
|
8765
8761
|
*/
|
|
8766
8762
|
export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
|
|
8767
8763
|
|
|
8764
|
+
declare type PropertyNameForCalculation = 'max' | 'value';
|
|
8765
|
+
|
|
8768
8766
|
/**
|
|
8769
8767
|
* A Radio Custom HTML Element.
|
|
8770
8768
|
* Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
|
|
@@ -9197,18 +9195,6 @@ export declare class RatingDisplay extends BaseRatingDisplay {
|
|
|
9197
9195
|
* HTML Attribute: `compact`
|
|
9198
9196
|
*/
|
|
9199
9197
|
compact: boolean;
|
|
9200
|
-
/**
|
|
9201
|
-
* Overrides the selected value and returns 1 if compact is true.
|
|
9202
|
-
*
|
|
9203
|
-
* @override
|
|
9204
|
-
*/
|
|
9205
|
-
protected getSelectedValue(): number;
|
|
9206
|
-
/**
|
|
9207
|
-
* Overrides the maximum icons and returns a max of 1 if compact is true.
|
|
9208
|
-
*
|
|
9209
|
-
* @override
|
|
9210
|
-
*/
|
|
9211
|
-
protected getMaxIcons(): number;
|
|
9212
9198
|
}
|
|
9213
9199
|
|
|
9214
9200
|
/**
|