@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,5 +1,5 @@
|
|
|
1
1
|
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
-
import type { BaseDropdown } from '../dropdown/dropdown.js';
|
|
2
|
+
import type { BaseDropdown } from '../dropdown/dropdown.base.js';
|
|
3
3
|
import type { DropdownOption } from '../option/option.js';
|
|
4
4
|
/**
|
|
5
5
|
* A Listbox Custom HTML Element.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
|
|
2
|
-
export { BaseProgressBar
|
|
2
|
+
export { BaseProgressBar } from './progress-bar.base.js';
|
|
3
|
+
export { ProgressBar } from './progress-bar.js';
|
|
3
4
|
export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
|
|
4
5
|
export { styles as ProgressBarStyles } from './progress-bar.styles.js';
|
|
5
6
|
export { template as ProgressBarTemplate } from './progress-bar.template.js';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
import { ProgressBarValidationState } from './progress-bar.options.js';
|
|
3
|
+
/**
|
|
4
|
+
* A Progress HTML Element.
|
|
5
|
+
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
|
|
6
|
+
*
|
|
7
|
+
* @public
|
|
8
|
+
*/
|
|
9
|
+
export declare class BaseProgressBar extends FASTElement {
|
|
10
|
+
/**
|
|
11
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
12
|
+
*
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
elementInternals: ElementInternals;
|
|
16
|
+
/**
|
|
17
|
+
* The validation state of the progress bar
|
|
18
|
+
* @public
|
|
19
|
+
* HTML Attribute: `validation-state`
|
|
20
|
+
*/
|
|
21
|
+
validationState: ProgressBarValidationState | null;
|
|
22
|
+
/**
|
|
23
|
+
* Handles changes to validation-state attribute custom states
|
|
24
|
+
* @param prev - the previous state
|
|
25
|
+
* @param next - the next state
|
|
26
|
+
*/
|
|
27
|
+
validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
|
|
28
|
+
/**
|
|
29
|
+
* The value of the progress
|
|
30
|
+
* @internal
|
|
31
|
+
* HTML Attribute: `value`
|
|
32
|
+
*/
|
|
33
|
+
value?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Updates the percent complete when the `value` property changes.
|
|
36
|
+
*
|
|
37
|
+
* @internal
|
|
38
|
+
*/
|
|
39
|
+
protected valueChanged(prev: number | undefined, next: number | undefined): void;
|
|
40
|
+
/**
|
|
41
|
+
* The minimum value
|
|
42
|
+
* @internal
|
|
43
|
+
* HTML Attribute: `min`
|
|
44
|
+
*/
|
|
45
|
+
min?: number;
|
|
46
|
+
/**
|
|
47
|
+
* Updates the percent complete when the `min` property changes.
|
|
48
|
+
*
|
|
49
|
+
* @param prev - The previous min value
|
|
50
|
+
* @param next - The current min value
|
|
51
|
+
*/
|
|
52
|
+
protected minChanged(prev: number | undefined, next: number | undefined): void;
|
|
53
|
+
/**
|
|
54
|
+
* The maximum value
|
|
55
|
+
* @internal
|
|
56
|
+
* HTML Attribute: `max`
|
|
57
|
+
*/
|
|
58
|
+
max?: number;
|
|
59
|
+
/**
|
|
60
|
+
* Updates the percent complete when the `max` property changes.
|
|
61
|
+
*
|
|
62
|
+
* @param prev - The previous max value
|
|
63
|
+
* @param next - The current max value
|
|
64
|
+
* @internal
|
|
65
|
+
*/
|
|
66
|
+
protected maxChanged(prev: number | undefined, next: number | undefined): void;
|
|
67
|
+
/**
|
|
68
|
+
* Indicates progress in %
|
|
69
|
+
* @internal
|
|
70
|
+
*/
|
|
71
|
+
get percentComplete(): number;
|
|
72
|
+
constructor();
|
|
73
|
+
}
|
|
@@ -1,76 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ProgressBarShape, ProgressBarThickness
|
|
3
|
-
/**
|
|
4
|
-
* A Progress HTML Element.
|
|
5
|
-
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
|
|
6
|
-
*
|
|
7
|
-
* @public
|
|
8
|
-
*/
|
|
9
|
-
export declare class BaseProgressBar extends FASTElement {
|
|
10
|
-
/**
|
|
11
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
12
|
-
*
|
|
13
|
-
* @internal
|
|
14
|
-
*/
|
|
15
|
-
elementInternals: ElementInternals;
|
|
16
|
-
/**
|
|
17
|
-
* The validation state of the progress bar
|
|
18
|
-
* @public
|
|
19
|
-
* HTML Attribute: `validation-state`
|
|
20
|
-
*/
|
|
21
|
-
validationState: ProgressBarValidationState | null;
|
|
22
|
-
/**
|
|
23
|
-
* Handles changes to validation-state attribute custom states
|
|
24
|
-
* @param prev - the previous state
|
|
25
|
-
* @param next - the next state
|
|
26
|
-
*/
|
|
27
|
-
validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
|
|
28
|
-
/**
|
|
29
|
-
* The value of the progress
|
|
30
|
-
* @internal
|
|
31
|
-
* HTML Attribute: `value`
|
|
32
|
-
*/
|
|
33
|
-
value?: number;
|
|
34
|
-
/**
|
|
35
|
-
* Updates the percent complete when the `value` property changes.
|
|
36
|
-
*
|
|
37
|
-
* @internal
|
|
38
|
-
*/
|
|
39
|
-
protected valueChanged(prev: number | undefined, next: number | undefined): void;
|
|
40
|
-
/**
|
|
41
|
-
* The minimum value
|
|
42
|
-
* @internal
|
|
43
|
-
* HTML Attribute: `min`
|
|
44
|
-
*/
|
|
45
|
-
min?: number;
|
|
46
|
-
/**
|
|
47
|
-
* Updates the percent complete when the `min` property changes.
|
|
48
|
-
*
|
|
49
|
-
* @param prev - The previous min value
|
|
50
|
-
* @param next - The current min value
|
|
51
|
-
*/
|
|
52
|
-
protected minChanged(prev: number | undefined, next: number | undefined): void;
|
|
53
|
-
/**
|
|
54
|
-
* The maximum value
|
|
55
|
-
* @internal
|
|
56
|
-
* HTML Attribute: `max`
|
|
57
|
-
*/
|
|
58
|
-
max?: number;
|
|
59
|
-
/**
|
|
60
|
-
* Updates the percent complete when the `max` property changes.
|
|
61
|
-
*
|
|
62
|
-
* @param prev - The previous max value
|
|
63
|
-
* @param next - The current max value
|
|
64
|
-
* @internal
|
|
65
|
-
*/
|
|
66
|
-
protected maxChanged(prev: number | undefined, next: number | undefined): void;
|
|
67
|
-
/**
|
|
68
|
-
* Indicates progress in %
|
|
69
|
-
* @internal
|
|
70
|
-
*/
|
|
71
|
-
get percentComplete(): number;
|
|
72
|
-
constructor();
|
|
73
|
-
}
|
|
1
|
+
import { BaseProgressBar } from './progress-bar.base.js';
|
|
2
|
+
import { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
|
|
74
3
|
/**
|
|
75
4
|
* A Progress HTML Element.
|
|
76
5
|
* Based on BaseProgressBar and includes style and layout specific attributes
|
|
@@ -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';
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* The base class used for constructing a fluent-rating-display custom element
|
|
4
|
+
*
|
|
5
|
+
* @slot icon - SVG element used as the rating icon
|
|
6
|
+
*
|
|
7
|
+
* @public
|
|
8
|
+
*/
|
|
9
|
+
export declare class BaseRatingDisplay extends FASTElement {
|
|
10
|
+
/**
|
|
11
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
12
|
+
*
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
elementInternals: ElementInternals;
|
|
16
|
+
/**
|
|
17
|
+
* The number of ratings.
|
|
18
|
+
*
|
|
19
|
+
* @public
|
|
20
|
+
* @remarks
|
|
21
|
+
* HTML Attribute: `count`
|
|
22
|
+
*/
|
|
23
|
+
count?: number;
|
|
24
|
+
/**
|
|
25
|
+
* The `viewBox` attribute of the icon <svg> element.
|
|
26
|
+
*
|
|
27
|
+
* @public
|
|
28
|
+
* @default `0 0 20 20`
|
|
29
|
+
* @remarks
|
|
30
|
+
* HTML Attribute: `icon-view-box`
|
|
31
|
+
*/
|
|
32
|
+
iconViewBox?: string;
|
|
33
|
+
/**
|
|
34
|
+
* The maximum possible value of the rating.
|
|
35
|
+
* This attribute determines the number of icons displayed.
|
|
36
|
+
* Must be a whole number greater than 1.
|
|
37
|
+
*
|
|
38
|
+
* @public
|
|
39
|
+
* @remarks
|
|
40
|
+
* HTML Attribute: `max`
|
|
41
|
+
*/
|
|
42
|
+
max?: number;
|
|
43
|
+
/**
|
|
44
|
+
* The value of the rating.
|
|
45
|
+
*
|
|
46
|
+
* @public
|
|
47
|
+
* @remarks
|
|
48
|
+
* HTML Attribute: `value`
|
|
49
|
+
*/
|
|
50
|
+
value?: number;
|
|
51
|
+
/**
|
|
52
|
+
* @internal
|
|
53
|
+
*/
|
|
54
|
+
slottedIcon: HTMLElement[];
|
|
55
|
+
/**
|
|
56
|
+
* @internal
|
|
57
|
+
*/
|
|
58
|
+
slottedIconChanged(): void;
|
|
59
|
+
/**
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
private customIcon?;
|
|
63
|
+
private intlNumberFormatter;
|
|
64
|
+
constructor();
|
|
65
|
+
/**
|
|
66
|
+
* Returns "count" as string, formatted according to the locale.
|
|
67
|
+
*
|
|
68
|
+
* @internal
|
|
69
|
+
*/
|
|
70
|
+
get formattedCount(): string;
|
|
71
|
+
/**
|
|
72
|
+
* Gets the selected value
|
|
73
|
+
*
|
|
74
|
+
* @protected
|
|
75
|
+
*/
|
|
76
|
+
protected getSelectedValue(): number;
|
|
77
|
+
/**
|
|
78
|
+
* Gets the maximum icons to render
|
|
79
|
+
*
|
|
80
|
+
* @protected
|
|
81
|
+
*/
|
|
82
|
+
protected getMaxIcons(): number;
|
|
83
|
+
/**
|
|
84
|
+
* Generates the icon SVG elements based on the "max" attribute.
|
|
85
|
+
*
|
|
86
|
+
* @internal
|
|
87
|
+
*/
|
|
88
|
+
generateIcons(): string;
|
|
89
|
+
}
|
|
@@ -1,93 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BaseRatingDisplay } from './rating-display.base.js';
|
|
2
2
|
import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
|
|
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 declare class BaseRatingDisplay extends FASTElement {
|
|
11
|
-
/**
|
|
12
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
13
|
-
*
|
|
14
|
-
* @internal
|
|
15
|
-
*/
|
|
16
|
-
elementInternals: ElementInternals;
|
|
17
|
-
/**
|
|
18
|
-
* The number of ratings.
|
|
19
|
-
*
|
|
20
|
-
* @public
|
|
21
|
-
* @remarks
|
|
22
|
-
* HTML Attribute: `count`
|
|
23
|
-
*/
|
|
24
|
-
count?: number;
|
|
25
|
-
/**
|
|
26
|
-
* The `viewBox` attribute of the icon <svg> element.
|
|
27
|
-
*
|
|
28
|
-
* @public
|
|
29
|
-
* @default `0 0 20 20`
|
|
30
|
-
* @remarks
|
|
31
|
-
* HTML Attribute: `icon-view-box`
|
|
32
|
-
*/
|
|
33
|
-
iconViewBox?: string;
|
|
34
|
-
/**
|
|
35
|
-
* The maximum possible value of the rating.
|
|
36
|
-
* This attribute determines the number of icons displayed.
|
|
37
|
-
* Must be a whole number greater than 1.
|
|
38
|
-
*
|
|
39
|
-
* @public
|
|
40
|
-
* @remarks
|
|
41
|
-
* HTML Attribute: `max`
|
|
42
|
-
*/
|
|
43
|
-
max?: number;
|
|
44
|
-
/**
|
|
45
|
-
* The value of the rating.
|
|
46
|
-
*
|
|
47
|
-
* @public
|
|
48
|
-
* @remarks
|
|
49
|
-
* HTML Attribute: `value`
|
|
50
|
-
*/
|
|
51
|
-
value?: number;
|
|
52
|
-
/**
|
|
53
|
-
* @internal
|
|
54
|
-
*/
|
|
55
|
-
slottedIcon: HTMLElement[];
|
|
56
|
-
/**
|
|
57
|
-
* @internal
|
|
58
|
-
*/
|
|
59
|
-
slottedIconChanged(): void;
|
|
60
|
-
/**
|
|
61
|
-
* @internal
|
|
62
|
-
*/
|
|
63
|
-
private customIcon?;
|
|
64
|
-
private intlNumberFormatter;
|
|
65
|
-
constructor();
|
|
66
|
-
/**
|
|
67
|
-
* Returns "count" as string, formatted according to the locale.
|
|
68
|
-
*
|
|
69
|
-
* @internal
|
|
70
|
-
*/
|
|
71
|
-
get formattedCount(): string;
|
|
72
|
-
/**
|
|
73
|
-
* Gets the selected value
|
|
74
|
-
*
|
|
75
|
-
* @protected
|
|
76
|
-
*/
|
|
77
|
-
protected getSelectedValue(): number;
|
|
78
|
-
/**
|
|
79
|
-
* Gets the maximum icons to render
|
|
80
|
-
*
|
|
81
|
-
* @protected
|
|
82
|
-
*/
|
|
83
|
-
protected getMaxIcons(): number;
|
|
84
|
-
/**
|
|
85
|
-
* Generates the icon SVG elements based on the "max" attribute.
|
|
86
|
-
*
|
|
87
|
-
* @internal
|
|
88
|
-
*/
|
|
89
|
-
generateIcons(): string;
|
|
90
|
-
}
|
|
91
3
|
/**
|
|
92
4
|
* A Rating Display Custom HTML Element.
|
|
93
5
|
* Based on BaseRatingDisplay and includes style and layout specific attributes
|
|
@@ -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';
|
|
@@ -0,0 +1,14 @@
|
|
|
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 declare class BaseSpinner extends FASTElement {
|
|
7
|
+
/**
|
|
8
|
+
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
9
|
+
*
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
elementInternals: ElementInternals;
|
|
13
|
+
constructor();
|
|
14
|
+
}
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BaseSpinner } from './spinner.base.js';
|
|
2
2
|
import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
|
|
3
|
-
/**
|
|
4
|
-
* The base class used for constructing a fluent-spinner custom element
|
|
5
|
-
* @public
|
|
6
|
-
*/
|
|
7
|
-
export declare class BaseSpinner extends FASTElement {
|
|
8
|
-
/**
|
|
9
|
-
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
10
|
-
*
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
elementInternals: ElementInternals;
|
|
14
|
-
constructor();
|
|
15
|
-
}
|
|
16
3
|
/**
|
|
17
4
|
* A Spinner Custom HTML Element.
|
|
18
5
|
* Based on BaseSpinner and includes style and layout specific attributes
|
|
@@ -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';
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
import { TablistOrientation } from './tablist.options.js';
|
|
3
|
+
/**
|
|
4
|
+
* A Tablist element that wraps a collection of tab elements
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export declare class BaseTablist extends FASTElement {
|
|
8
|
+
/**
|
|
9
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
10
|
+
*
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
elementInternals: ElementInternals;
|
|
14
|
+
/**
|
|
15
|
+
* Used for disabling all click and keyboard events for the tabs, child tab elements.
|
|
16
|
+
* @public
|
|
17
|
+
* @remarks
|
|
18
|
+
* HTML Attribute: disabled.
|
|
19
|
+
*/
|
|
20
|
+
disabled: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Handles disabled changes
|
|
23
|
+
* @param prev - previous value
|
|
24
|
+
* @param next - next value
|
|
25
|
+
*
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
protected disabledChanged(prev: boolean, next: boolean): void;
|
|
29
|
+
/**
|
|
30
|
+
* The orientation
|
|
31
|
+
* @public
|
|
32
|
+
* @remarks
|
|
33
|
+
* HTML Attribute: orientation
|
|
34
|
+
*/
|
|
35
|
+
orientation: TablistOrientation;
|
|
36
|
+
/**
|
|
37
|
+
* @internal
|
|
38
|
+
*/
|
|
39
|
+
protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
|
|
40
|
+
/**
|
|
41
|
+
* The id of the active tab
|
|
42
|
+
*
|
|
43
|
+
* @public
|
|
44
|
+
* @remarks
|
|
45
|
+
* HTML Attribute: activeid
|
|
46
|
+
*/
|
|
47
|
+
activeid: string;
|
|
48
|
+
/**
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
protected activeidChanged(oldValue: string, newValue: string): void;
|
|
52
|
+
/**
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
tabs: HTMLElement[];
|
|
56
|
+
/**
|
|
57
|
+
* @internal
|
|
58
|
+
*/
|
|
59
|
+
protected tabsChanged(): void;
|
|
60
|
+
/**
|
|
61
|
+
* A reference to the active tab
|
|
62
|
+
* @public
|
|
63
|
+
*/
|
|
64
|
+
activetab: HTMLElement;
|
|
65
|
+
private prevActiveTabIndex;
|
|
66
|
+
private activeTabIndex;
|
|
67
|
+
private tabIds;
|
|
68
|
+
private tabPanelMap;
|
|
69
|
+
private change;
|
|
70
|
+
private getActiveIndex;
|
|
71
|
+
/**
|
|
72
|
+
* Function that is invoked whenever the selected tab or the tab collection changes.
|
|
73
|
+
*
|
|
74
|
+
* @public
|
|
75
|
+
*/
|
|
76
|
+
protected setTabs(): void;
|
|
77
|
+
private getTabIds;
|
|
78
|
+
private setComponent;
|
|
79
|
+
private handleTabClick;
|
|
80
|
+
private isHorizontal;
|
|
81
|
+
private handleTabKeyDown;
|
|
82
|
+
/**
|
|
83
|
+
* The adjust method for FASTTabs
|
|
84
|
+
* @public
|
|
85
|
+
* @remarks
|
|
86
|
+
* This method allows the active index to be adjusted by numerical increments
|
|
87
|
+
*/
|
|
88
|
+
adjust(adjustment: number): void;
|
|
89
|
+
private activateTabByIndex;
|
|
90
|
+
private focusTab;
|
|
91
|
+
/**
|
|
92
|
+
* @internal
|
|
93
|
+
*/
|
|
94
|
+
connectedCallback(): void;
|
|
95
|
+
}
|
|
@@ -1,97 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { TablistAppearance,
|
|
3
|
-
/**
|
|
4
|
-
* A Tablist element that wraps a collection of tab elements
|
|
5
|
-
* @public
|
|
6
|
-
*/
|
|
7
|
-
export declare class BaseTablist extends FASTElement {
|
|
8
|
-
/**
|
|
9
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
10
|
-
*
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
elementInternals: ElementInternals;
|
|
14
|
-
/**
|
|
15
|
-
* Used for disabling all click and keyboard events for the tabs, child tab elements.
|
|
16
|
-
* @public
|
|
17
|
-
* @remarks
|
|
18
|
-
* HTML Attribute: disabled.
|
|
19
|
-
*/
|
|
20
|
-
disabled: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Handles disabled changes
|
|
23
|
-
* @param prev - previous value
|
|
24
|
-
* @param next - next value
|
|
25
|
-
*
|
|
26
|
-
* @internal
|
|
27
|
-
*/
|
|
28
|
-
protected disabledChanged(prev: boolean, next: boolean): void;
|
|
29
|
-
/**
|
|
30
|
-
* The orientation
|
|
31
|
-
* @public
|
|
32
|
-
* @remarks
|
|
33
|
-
* HTML Attribute: orientation
|
|
34
|
-
*/
|
|
35
|
-
orientation: TablistOrientation;
|
|
36
|
-
/**
|
|
37
|
-
* @internal
|
|
38
|
-
*/
|
|
39
|
-
protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
|
|
40
|
-
/**
|
|
41
|
-
* The id of the active tab
|
|
42
|
-
*
|
|
43
|
-
* @public
|
|
44
|
-
* @remarks
|
|
45
|
-
* HTML Attribute: activeid
|
|
46
|
-
*/
|
|
47
|
-
activeid: string;
|
|
48
|
-
/**
|
|
49
|
-
* @internal
|
|
50
|
-
*/
|
|
51
|
-
protected activeidChanged(oldValue: string, newValue: string): void;
|
|
52
|
-
/**
|
|
53
|
-
* @internal
|
|
54
|
-
*/
|
|
55
|
-
tabs: HTMLElement[];
|
|
56
|
-
/**
|
|
57
|
-
* @internal
|
|
58
|
-
*/
|
|
59
|
-
protected tabsChanged(): void;
|
|
60
|
-
/**
|
|
61
|
-
* A reference to the active tab
|
|
62
|
-
* @public
|
|
63
|
-
*/
|
|
64
|
-
activetab: HTMLElement;
|
|
65
|
-
private prevActiveTabIndex;
|
|
66
|
-
private activeTabIndex;
|
|
67
|
-
private tabIds;
|
|
68
|
-
private change;
|
|
69
|
-
private getActiveIndex;
|
|
70
|
-
/**
|
|
71
|
-
* Function that is invoked whenever the selected tab or the tab collection changes.
|
|
72
|
-
*
|
|
73
|
-
* @public
|
|
74
|
-
*/
|
|
75
|
-
protected setTabs(): void;
|
|
76
|
-
private getTabIds;
|
|
77
|
-
private setComponent;
|
|
78
|
-
private handleTabClick;
|
|
79
|
-
private isHorizontal;
|
|
80
|
-
private handleTabKeyDown;
|
|
81
|
-
/**
|
|
82
|
-
* The adjust method for FASTTabs
|
|
83
|
-
* @public
|
|
84
|
-
* @remarks
|
|
85
|
-
* This method allows the active index to be adjusted by numerical increments
|
|
86
|
-
*/
|
|
87
|
-
adjust(adjustment: number): void;
|
|
88
|
-
private activateTabByIndex;
|
|
89
|
-
private focusTab;
|
|
90
|
-
/**
|
|
91
|
-
* @internal
|
|
92
|
-
*/
|
|
93
|
-
connectedCallback(): void;
|
|
94
|
-
}
|
|
1
|
+
import { BaseTablist } from './tablist.base.js';
|
|
2
|
+
import { TablistAppearance, TablistSize } from './tablist.options.js';
|
|
95
3
|
/**
|
|
96
4
|
* A BaseTablist component with extra logic for handling the styled active tab indicator.
|
|
97
5
|
* @public
|