@fluentui/web-components 3.0.0-beta.82 → 3.0.0-beta.84
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/dist/dts/accordion-item/accordion-item.base.d.ts +71 -0
- package/dist/dts/accordion-item/accordion-item.d.ts +1 -71
- package/dist/dts/accordion-item/index.d.ts +2 -1
- package/dist/dts/anchor-button/anchor-button.base.d.ts +144 -0
- package/dist/dts/anchor-button/anchor-button.d.ts +2 -144
- package/dist/dts/anchor-button/index.d.ts +2 -1
- package/dist/dts/avatar/avatar.base.d.ts +42 -0
- package/dist/dts/avatar/avatar.d.ts +2 -42
- package/dist/dts/avatar/index.d.ts +2 -1
- package/dist/dts/button/button.base.d.ts +242 -0
- package/dist/dts/button/button.d.ts +2 -242
- package/dist/dts/button/index.d.ts +2 -1
- package/dist/dts/checkbox/checkbox.base.d.ts +288 -0
- package/dist/dts/checkbox/checkbox.d.ts +1 -288
- package/dist/dts/checkbox/index.d.ts +2 -1
- package/dist/dts/divider/divider.base.d.ts +49 -0
- package/dist/dts/divider/divider.d.ts +2 -49
- package/dist/dts/divider/index.d.ts +2 -1
- package/dist/dts/dropdown/dropdown.base.d.ts +418 -0
- package/dist/dts/dropdown/dropdown.d.ts +2 -418
- package/dist/dts/dropdown/dropdown.options.d.ts +1 -1
- package/dist/dts/dropdown/dropdown.template.d.ts +1 -1
- package/dist/dts/dropdown/index.d.ts +2 -1
- package/dist/dts/field/field.base.d.ts +120 -0
- package/dist/dts/field/field.d.ts +2 -120
- package/dist/dts/field/index.d.ts +2 -1
- package/dist/dts/link/link.d.ts +1 -1
- package/dist/dts/listbox/listbox.d.ts +1 -1
- package/dist/dts/progress-bar/index.d.ts +2 -1
- package/dist/dts/progress-bar/progress-bar.base.d.ts +73 -0
- package/dist/dts/progress-bar/progress-bar.d.ts +2 -73
- package/dist/dts/radio/radio.d.ts +1 -1
- package/dist/dts/rating-display/index.d.ts +2 -1
- package/dist/dts/rating-display/rating-display.base.d.ts +89 -0
- package/dist/dts/rating-display/rating-display.d.ts +1 -89
- package/dist/dts/spinner/index.d.ts +2 -1
- package/dist/dts/spinner/spinner.base.d.ts +14 -0
- package/dist/dts/spinner/spinner.d.ts +1 -14
- package/dist/dts/switch/switch.d.ts +1 -1
- package/dist/dts/tablist/index.d.ts +2 -1
- package/dist/dts/tablist/tablist.base.d.ts +95 -0
- package/dist/dts/tablist/tablist.d.ts +2 -94
- package/dist/dts/tabs/tabs.base.d.ts +90 -0
- package/dist/dts/tabs/tabs.d.ts +2 -90
- package/dist/dts/text-input/index.d.ts +2 -1
- package/dist/dts/text-input/text-input.base.d.ts +393 -0
- package/dist/dts/text-input/text-input.d.ts +2 -393
- package/dist/dts/textarea/index.d.ts +2 -1
- package/dist/dts/textarea/textarea.base.d.ts +347 -0
- package/dist/dts/textarea/textarea.d.ts +2 -347
- package/dist/esm/accordion/accordion.js +1 -1
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.base.js +94 -0
- package/dist/esm/accordion-item/accordion-item.base.js.map +1 -0
- package/dist/esm/accordion-item/accordion-item.js +2 -91
- package/dist/esm/accordion-item/accordion-item.js.map +1 -1
- package/dist/esm/accordion-item/index.js +2 -1
- package/dist/esm/accordion-item/index.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.base.js +147 -0
- package/dist/esm/anchor-button/anchor-button.base.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.js +3 -145
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/anchor-button/index.js +2 -1
- package/dist/esm/anchor-button/index.js.map +1 -1
- package/dist/esm/avatar/avatar.base.js +28 -0
- package/dist/esm/avatar/avatar.base.js.map +1 -0
- package/dist/esm/avatar/avatar.js +2 -26
- package/dist/esm/avatar/avatar.js.map +1 -1
- package/dist/esm/avatar/index.js +2 -1
- package/dist/esm/avatar/index.js.map +1 -1
- package/dist/esm/button/button.base.js +283 -0
- package/dist/esm/button/button.base.js.map +1 -0
- package/dist/esm/button/button.js +3 -281
- package/dist/esm/button/button.js.map +1 -1
- package/dist/esm/button/button.styles.js +2 -1
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/button/index.js +2 -1
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/checkbox/checkbox.base.js +366 -0
- package/dist/esm/checkbox/checkbox.base.js.map +1 -0
- package/dist/esm/checkbox/checkbox.js +2 -363
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/index.js +2 -1
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/divider/divider.base.js +61 -0
- package/dist/esm/divider/divider.base.js.map +1 -0
- package/dist/esm/divider/divider.js +3 -58
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/divider/index.js +2 -1
- package/dist/esm/divider/index.js.map +1 -1
- package/dist/esm/dropdown/dropdown.base.js +677 -0
- package/dist/esm/dropdown/dropdown.base.js.map +1 -0
- package/dist/esm/dropdown/dropdown.js +3 -674
- package/dist/esm/dropdown/dropdown.js.map +1 -1
- package/dist/esm/dropdown/index.js +2 -1
- package/dist/esm/dropdown/index.js.map +1 -1
- package/dist/esm/field/field.base.js +189 -0
- package/dist/esm/field/field.base.js.map +1 -0
- package/dist/esm/field/field.js +3 -187
- package/dist/esm/field/field.js.map +1 -1
- package/dist/esm/field/index.js +2 -1
- package/dist/esm/field/index.js.map +1 -1
- package/dist/esm/link/link.js +1 -1
- package/dist/esm/link/link.js.map +1 -1
- package/dist/esm/progress-bar/index.js +2 -1
- package/dist/esm/progress-bar/index.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.base.js +90 -0
- package/dist/esm/progress-bar/progress-bar.base.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.js +3 -87
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/radio/radio.js +1 -1
- package/dist/esm/radio/radio.js.map +1 -1
- package/dist/esm/rating-display/index.js +2 -1
- package/dist/esm/rating-display/index.js.map +1 -1
- package/dist/esm/rating-display/rating-display.base.js +94 -0
- package/dist/esm/rating-display/rating-display.base.js.map +1 -0
- package/dist/esm/rating-display/rating-display.js +2 -92
- package/dist/esm/rating-display/rating-display.js.map +1 -1
- package/dist/esm/spinner/index.js +2 -1
- package/dist/esm/spinner/index.js.map +1 -1
- package/dist/esm/spinner/spinner.base.js +18 -0
- package/dist/esm/spinner/spinner.base.js.map +1 -0
- package/dist/esm/spinner/spinner.js +2 -17
- package/dist/esm/spinner/spinner.js.map +1 -1
- package/dist/esm/switch/switch.js +1 -1
- package/dist/esm/switch/switch.js.map +1 -1
- package/dist/esm/tablist/index.js +2 -1
- package/dist/esm/tablist/index.js.map +1 -1
- package/dist/esm/tablist/tablist.base.js +248 -0
- package/dist/esm/tablist/tablist.base.js.map +1 -0
- package/dist/esm/tablist/tablist.js +3 -221
- package/dist/esm/tablist/tablist.js.map +1 -1
- package/dist/esm/tabs/tabs.base.js +279 -0
- package/dist/esm/tabs/tabs.base.js.map +1 -0
- package/dist/esm/tabs/tabs.js +2 -276
- package/dist/esm/tabs/tabs.js.map +1 -1
- package/dist/esm/text-input/index.js +2 -1
- package/dist/esm/text-input/index.js.map +1 -1
- package/dist/esm/text-input/text-input.base.js +409 -0
- package/dist/esm/text-input/text-input.base.js.map +1 -0
- package/dist/esm/text-input/text-input.js +3 -407
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/textarea/index.js +2 -1
- package/dist/esm/textarea/index.js.map +1 -1
- package/dist/esm/textarea/textarea.base.js +494 -0
- package/dist/esm/textarea/textarea.base.js.map +1 -0
- package/dist/esm/textarea/textarea.js +3 -491
- package/dist/esm/textarea/textarea.js.map +1 -1
- package/dist/web-components.d.ts +1 -0
- package/dist/web-components.js +707 -556
- package/dist/web-components.min.js +265 -265
- package/package.json +5 -1
|
@@ -1,92 +1,8 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
3
|
import { swapStates } from '../utils/element-internals.js';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
* A Progress HTML Element.
|
|
7
|
-
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
|
|
8
|
-
*
|
|
9
|
-
* @public
|
|
10
|
-
*/
|
|
11
|
-
export class BaseProgressBar extends FASTElement {
|
|
12
|
-
/**
|
|
13
|
-
* Handles changes to validation-state attribute custom states
|
|
14
|
-
* @param prev - the previous state
|
|
15
|
-
* @param next - the next state
|
|
16
|
-
*/
|
|
17
|
-
validationStateChanged(prev, next) {
|
|
18
|
-
swapStates(this.elementInternals, prev, next, ProgressBarValidationState);
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Updates the percent complete when the `value` property changes.
|
|
22
|
-
*
|
|
23
|
-
* @internal
|
|
24
|
-
*/
|
|
25
|
-
valueChanged(prev, next) {
|
|
26
|
-
this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Updates the percent complete when the `min` property changes.
|
|
30
|
-
*
|
|
31
|
-
* @param prev - The previous min value
|
|
32
|
-
* @param next - The current min value
|
|
33
|
-
*/
|
|
34
|
-
minChanged(prev, next) {
|
|
35
|
-
this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Updates the percent complete when the `max` property changes.
|
|
39
|
-
*
|
|
40
|
-
* @param prev - The previous max value
|
|
41
|
-
* @param next - The current max value
|
|
42
|
-
* @internal
|
|
43
|
-
*/
|
|
44
|
-
maxChanged(prev, next) {
|
|
45
|
-
this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Indicates progress in %
|
|
49
|
-
* @internal
|
|
50
|
-
*/
|
|
51
|
-
get percentComplete() {
|
|
52
|
-
const min = this.min ?? 0;
|
|
53
|
-
const max = this.max ?? 100;
|
|
54
|
-
const value = this.value ?? 0;
|
|
55
|
-
const range = max - min;
|
|
56
|
-
return range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
|
|
57
|
-
}
|
|
58
|
-
constructor() {
|
|
59
|
-
super();
|
|
60
|
-
/**
|
|
61
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
62
|
-
*
|
|
63
|
-
* @internal
|
|
64
|
-
*/
|
|
65
|
-
this.elementInternals = this.attachInternals();
|
|
66
|
-
/**
|
|
67
|
-
* The validation state of the progress bar
|
|
68
|
-
* @public
|
|
69
|
-
* HTML Attribute: `validation-state`
|
|
70
|
-
*/
|
|
71
|
-
this.validationState = null;
|
|
72
|
-
this.elementInternals.role = 'progressbar';
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
__decorate([
|
|
76
|
-
attr({ attribute: 'validation-state' })
|
|
77
|
-
], BaseProgressBar.prototype, "validationState", void 0);
|
|
78
|
-
__decorate([
|
|
79
|
-
attr({ converter: nullableNumberConverter })
|
|
80
|
-
], BaseProgressBar.prototype, "value", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
attr({ converter: nullableNumberConverter })
|
|
83
|
-
], BaseProgressBar.prototype, "min", void 0);
|
|
84
|
-
__decorate([
|
|
85
|
-
attr({ converter: nullableNumberConverter })
|
|
86
|
-
], BaseProgressBar.prototype, "max", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
volatile
|
|
89
|
-
], BaseProgressBar.prototype, "percentComplete", null);
|
|
4
|
+
import { BaseProgressBar } from './progress-bar.base.js';
|
|
5
|
+
import { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
|
|
90
6
|
/**
|
|
91
7
|
* A Progress HTML Element.
|
|
92
8
|
* Based on BaseProgressBar and includes style and layout specific attributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,OAAO,WAAY,SAAQ,eAAe;IAU9C;;;;OAIG;IACI,gBAAgB,CAAC,IAAsC,EAAE,IAAsC;QACpG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC;IACtE,CAAC;IAUD;;;;OAIG;IACI,YAAY,CAAC,IAAkC,EAAE,IAAkC;QACxF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IAClE,CAAC;CACF;AA3BQ;IADN,IAAI;8CACmC;AAiBjC;IADN,IAAI;0CAC2B"}
|
package/dist/esm/radio/radio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { BaseRatingDisplay
|
|
1
|
+
export { BaseRatingDisplay } from './rating-display.base.js';
|
|
2
|
+
export { RatingDisplay } from './rating-display.js';
|
|
2
3
|
export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
|
|
3
4
|
export { template as RatingDisplayTemplate } from './rating-display.template.js';
|
|
4
5
|
export { styles as RatingDisplayStyles } from './rating-display.styles.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
|
|
3
|
+
/**
|
|
4
|
+
* The base class used for constructing a fluent-rating-display custom element
|
|
5
|
+
*
|
|
6
|
+
* @slot icon - SVG element used as the rating icon
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export class BaseRatingDisplay extends FASTElement {
|
|
11
|
+
/**
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
slottedIconChanged() {
|
|
15
|
+
if (this.$fastController.isConnected) {
|
|
16
|
+
this.customIcon = this.slottedIcon[0]?.outerHTML;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
constructor() {
|
|
20
|
+
super();
|
|
21
|
+
/**
|
|
22
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
23
|
+
*
|
|
24
|
+
* @internal
|
|
25
|
+
*/
|
|
26
|
+
this.elementInternals = this.attachInternals();
|
|
27
|
+
this.intlNumberFormatter = new Intl.NumberFormat();
|
|
28
|
+
this.elementInternals.role = 'img';
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Returns "count" as string, formatted according to the locale.
|
|
32
|
+
*
|
|
33
|
+
* @internal
|
|
34
|
+
*/
|
|
35
|
+
get formattedCount() {
|
|
36
|
+
return this.count ? this.intlNumberFormatter.format(this.count) : '';
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Gets the selected value
|
|
40
|
+
*
|
|
41
|
+
* @protected
|
|
42
|
+
*/
|
|
43
|
+
getSelectedValue() {
|
|
44
|
+
return Math.round((this.value ?? 0) * 2) / 2;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Gets the maximum icons to render
|
|
48
|
+
*
|
|
49
|
+
* @protected
|
|
50
|
+
*/
|
|
51
|
+
getMaxIcons() {
|
|
52
|
+
return (this.max ?? 5) * 2;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Generates the icon SVG elements based on the "max" attribute.
|
|
56
|
+
*
|
|
57
|
+
* @internal
|
|
58
|
+
*/
|
|
59
|
+
generateIcons() {
|
|
60
|
+
let htmlString = '';
|
|
61
|
+
let customIcon;
|
|
62
|
+
if (this.customIcon) {
|
|
63
|
+
// Extract the SVG element content
|
|
64
|
+
customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? '';
|
|
65
|
+
}
|
|
66
|
+
// The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
|
|
67
|
+
const selectedValue = this.getSelectedValue();
|
|
68
|
+
// Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
|
|
69
|
+
for (let i = 0; i < this.getMaxIcons(); i++) {
|
|
70
|
+
const iconValue = (i + 1) / 2;
|
|
71
|
+
htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? '0 0 20 20'}" ${iconValue === selectedValue ? 'selected' : ''}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
|
|
72
|
+
}
|
|
73
|
+
return htmlString;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
__decorate([
|
|
77
|
+
attr({ converter: nullableNumberConverter })
|
|
78
|
+
], BaseRatingDisplay.prototype, "count", void 0);
|
|
79
|
+
__decorate([
|
|
80
|
+
attr({ attribute: 'icon-view-box' })
|
|
81
|
+
], BaseRatingDisplay.prototype, "iconViewBox", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
attr({ converter: nullableNumberConverter })
|
|
84
|
+
], BaseRatingDisplay.prototype, "max", void 0);
|
|
85
|
+
__decorate([
|
|
86
|
+
attr({ converter: nullableNumberConverter })
|
|
87
|
+
], BaseRatingDisplay.prototype, "value", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
observable
|
|
90
|
+
], BaseRatingDisplay.prototype, "slottedIcon", void 0);
|
|
91
|
+
__decorate([
|
|
92
|
+
observable
|
|
93
|
+
], BaseRatingDisplay.prototype, "customIcon", void 0);
|
|
94
|
+
//# sourceMappingURL=rating-display.base.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.base.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG;;;;;;GAMG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAyDhD;;OAEG;IACI,kBAAkB;QACvB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;QACnD,CAAC;IACH,CAAC;IAUD;QACE,KAAK,EAAE,CAAC;QA1EV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAkE3D,wBAAmB,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAKpD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACO,gBAAgB;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED;;;;OAIG;IACO,WAAW;QACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACI,aAAa;QAClB,IAAI,UAAU,GAAW,EAAE,CAAC;QAC5B,IAAI,UAA8B,CAAC;QAEnC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,kCAAkC;YAClC,UAAU,GAAG,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC9E,CAAC;QAED,+FAA+F;QAC/F,MAAM,aAAa,GAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAEtD,sFAAsF;QACtF,KAAK,IAAI,CAAC,GAAW,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YACpD,MAAM,SAAS,GAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEtC,UAAU,IAAI,oCAAoC,IAAI,CAAC,WAAW,IAAI,WAAW,KAC/E,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC7C,IAAI,UAAU,IAAI,0BAA0B,QAAQ,CAAC;QACvD,CAAC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;CACF;AAvHQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;gDACvB;AAWtB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;sDAChB;AAYd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACzB;AAUb;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;gDACvB;AAMf;IADN,UAAU;sDACwB;AAe3B;IADP,UAAU;qDACiB"}
|
|
@@ -1,98 +1,8 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
3
|
import { swapStates } from '../utils/element-internals.js';
|
|
4
|
+
import { BaseRatingDisplay } from './rating-display.base.js';
|
|
4
5
|
import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
|
|
5
|
-
/**
|
|
6
|
-
* The base class used for constructing a fluent-rating-display custom element
|
|
7
|
-
*
|
|
8
|
-
* @slot icon - SVG element used as the rating icon
|
|
9
|
-
*
|
|
10
|
-
* @public
|
|
11
|
-
*/
|
|
12
|
-
export class BaseRatingDisplay extends FASTElement {
|
|
13
|
-
/**
|
|
14
|
-
* @internal
|
|
15
|
-
*/
|
|
16
|
-
slottedIconChanged() {
|
|
17
|
-
if (this.$fastController.isConnected) {
|
|
18
|
-
this.customIcon = this.slottedIcon[0]?.outerHTML;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
constructor() {
|
|
22
|
-
super();
|
|
23
|
-
/**
|
|
24
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
25
|
-
*
|
|
26
|
-
* @internal
|
|
27
|
-
*/
|
|
28
|
-
this.elementInternals = this.attachInternals();
|
|
29
|
-
this.intlNumberFormatter = new Intl.NumberFormat();
|
|
30
|
-
this.elementInternals.role = 'img';
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Returns "count" as string, formatted according to the locale.
|
|
34
|
-
*
|
|
35
|
-
* @internal
|
|
36
|
-
*/
|
|
37
|
-
get formattedCount() {
|
|
38
|
-
return this.count ? this.intlNumberFormatter.format(this.count) : '';
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* Gets the selected value
|
|
42
|
-
*
|
|
43
|
-
* @protected
|
|
44
|
-
*/
|
|
45
|
-
getSelectedValue() {
|
|
46
|
-
return Math.round((this.value ?? 0) * 2) / 2;
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* Gets the maximum icons to render
|
|
50
|
-
*
|
|
51
|
-
* @protected
|
|
52
|
-
*/
|
|
53
|
-
getMaxIcons() {
|
|
54
|
-
return (this.max ?? 5) * 2;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Generates the icon SVG elements based on the "max" attribute.
|
|
58
|
-
*
|
|
59
|
-
* @internal
|
|
60
|
-
*/
|
|
61
|
-
generateIcons() {
|
|
62
|
-
let htmlString = '';
|
|
63
|
-
let customIcon;
|
|
64
|
-
if (this.customIcon) {
|
|
65
|
-
// Extract the SVG element content
|
|
66
|
-
customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? '';
|
|
67
|
-
}
|
|
68
|
-
// The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
|
|
69
|
-
const selectedValue = this.getSelectedValue();
|
|
70
|
-
// Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
|
|
71
|
-
for (let i = 0; i < this.getMaxIcons(); i++) {
|
|
72
|
-
const iconValue = (i + 1) / 2;
|
|
73
|
-
htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? '0 0 20 20'}" ${iconValue === selectedValue ? 'selected' : ''}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
|
|
74
|
-
}
|
|
75
|
-
return htmlString;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
__decorate([
|
|
79
|
-
attr({ converter: nullableNumberConverter })
|
|
80
|
-
], BaseRatingDisplay.prototype, "count", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
attr({ attribute: 'icon-view-box' })
|
|
83
|
-
], BaseRatingDisplay.prototype, "iconViewBox", void 0);
|
|
84
|
-
__decorate([
|
|
85
|
-
attr({ converter: nullableNumberConverter })
|
|
86
|
-
], BaseRatingDisplay.prototype, "max", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
attr({ converter: nullableNumberConverter })
|
|
89
|
-
], BaseRatingDisplay.prototype, "value", void 0);
|
|
90
|
-
__decorate([
|
|
91
|
-
observable
|
|
92
|
-
], BaseRatingDisplay.prototype, "slottedIcon", void 0);
|
|
93
|
-
__decorate([
|
|
94
|
-
observable
|
|
95
|
-
], BaseRatingDisplay.prototype, "customIcon", void 0);
|
|
96
6
|
/**
|
|
97
7
|
* A Rating Display Custom HTML Element.
|
|
98
8
|
* Based on BaseRatingDisplay and includes style and layout specific attributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
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,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEpF;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QA2CE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;IAmBlC,CAAC;IA1DC;;;;;OAKG;IACI,YAAY,CAAC,IAAoC,EAAE,IAAoC;QAC5F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC;IACpE,CAAC;IAaD;;;;;OAKG;IACI,WAAW,CAAC,IAAmC,EAAE,IAAmC;QACzF,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;IAYD;;;;OAIG;IACgB,gBAAgB;QACjC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACgB,WAAW;QAC5B,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChD,CAAC;CACF;AA5DQ;IADN,IAAI;4CAC6B;AAqB3B;IADN,IAAI;2CAC2B;AAoBzB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { BaseSpinner
|
|
1
|
+
export { BaseSpinner } from './spinner.base.js';
|
|
2
|
+
export { Spinner } from './spinner.js';
|
|
2
3
|
export { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
|
|
3
4
|
export { template as SpinnerTemplate } from './spinner.template.js';
|
|
4
5
|
export { styles as SpinnerStyles } from './spinner.styles.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* The base class used for constructing a fluent-spinner custom element
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export class BaseSpinner extends FASTElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
/**
|
|
10
|
+
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
11
|
+
*
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
this.elementInternals = this.attachInternals();
|
|
15
|
+
this.elementInternals.role = 'progressbar';
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=spinner.base.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.base.js","sourceRoot":"","sources":["../../../src/spinner/spinner.base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAQ1C;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAIjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,aAAa,CAAC;IAC7C,CAAC;CACF"}
|
|
@@ -1,23 +1,8 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
3
|
import { swapStates } from '../utils/element-internals.js';
|
|
4
|
+
import { BaseSpinner } from './spinner.base.js';
|
|
4
5
|
import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
|
|
5
|
-
/**
|
|
6
|
-
* The base class used for constructing a fluent-spinner custom element
|
|
7
|
-
* @public
|
|
8
|
-
*/
|
|
9
|
-
export class BaseSpinner extends FASTElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super();
|
|
12
|
-
/**
|
|
13
|
-
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
14
|
-
*
|
|
15
|
-
* @internal
|
|
16
|
-
*/
|
|
17
|
-
this.elementInternals = this.attachInternals();
|
|
18
|
-
this.elementInternals.role = 'progressbar';
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
6
|
/**
|
|
22
7
|
* A Spinner Custom HTML Element.
|
|
23
8
|
* Based on BaseSpinner and includes style and layout specific attributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEtE;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAWtC;;;;OAIG;IACI,WAAW,CAAC,IAA6B,EAAE,IAA6B;QAC7E,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC;IAWD;;;;OAIG;IACI,iBAAiB,CAAC,IAAmC,EAAE,IAAmC;QAC/F,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC;IACnE,CAAC;CACF;AA5BQ;IADN,IAAI;qCACqB;AAkBnB;IADN,IAAI;2CACiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/switch/switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/switch/switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAM5D,MAAM,OAAO,MAAO,SAAQ,YAAY;IACtC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;CACF"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { definition as TablistDefinition } from './tablist.definition.js';
|
|
2
|
-
export { BaseTablist
|
|
2
|
+
export { BaseTablist } from './tablist.base.js';
|
|
3
|
+
export { Tablist } from './tablist.js';
|
|
3
4
|
export { TablistAppearance, TablistOrientation, TablistSize } from './tablist.options.js';
|
|
4
5
|
export { styles as TablistStyles } from './tablist.styles.js';
|
|
5
6
|
export { template as TablistTemplate } from './tablist.template.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tablist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tablist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC"}
|