@fluentui/web-components 3.0.0-beta.55 → 3.0.0-beta.56
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/anchor-button/index.d.ts +1 -1
- package/dist/dts/helpers.tests.d.ts +22 -0
- package/dist/dts/index-rollup.d.ts +1 -0
- package/dist/dts/index.d.ts +2 -1
- package/dist/dts/slider/slider.d.ts +1 -1
- package/dist/dts/styles/states/index.d.ts +36 -0
- package/dist/dts/textarea/define.d.ts +1 -0
- package/dist/dts/textarea/index.d.ts +5 -0
- package/dist/dts/textarea/textarea.bench.d.ts +3 -0
- package/dist/dts/textarea/textarea.d.ts +390 -0
- package/dist/dts/textarea/textarea.definition.d.ts +9 -0
- package/dist/dts/textarea/textarea.options.d.ts +47 -0
- package/dist/dts/textarea/textarea.styles.d.ts +7 -0
- package/dist/dts/textarea/textarea.template.d.ts +12 -0
- package/dist/esm/anchor-button/index.js +1 -1
- package/dist/esm/anchor-button/index.js.map +1 -1
- package/dist/esm/helpers.tests.js +44 -0
- package/dist/esm/helpers.tests.js.map +1 -1
- package/dist/esm/index-rollup.js +1 -0
- package/dist/esm/index-rollup.js.map +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/slider/slider.js +1 -1
- package/dist/esm/styles/states/index.js +40 -0
- package/dist/esm/styles/states/index.js.map +1 -1
- package/dist/esm/textarea/define.js +4 -0
- package/dist/esm/textarea/define.js.map +1 -0
- package/dist/esm/textarea/index.js +6 -0
- package/dist/esm/textarea/index.js.map +1 -0
- package/dist/esm/textarea/textarea.bench.js +10 -0
- package/dist/esm/textarea/textarea.bench.js.map +1 -0
- package/dist/esm/textarea/textarea.definition.js +20 -0
- package/dist/esm/textarea/textarea.definition.js.map +1 -0
- package/dist/esm/textarea/textarea.js +605 -0
- package/dist/esm/textarea/textarea.js.map +1 -0
- package/dist/esm/textarea/textarea.options.js +56 -0
- package/dist/esm/textarea/textarea.options.js.map +1 -0
- package/dist/esm/textarea/textarea.styles.js +268 -0
- package/dist/esm/textarea/textarea.styles.js.map +1 -0
- package/dist/esm/textarea/textarea.template.js +54 -0
- package/dist/esm/textarea/textarea.template.js.map +1 -0
- package/dist/web-components.d.ts +462 -2
- package/dist/web-components.js +1090 -538
- package/dist/web-components.min.js +284 -280
- package/package.json +6 -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 Wed, 14 Aug 2024 04:07:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.56](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.56)
|
|
8
|
+
|
|
9
|
+
Wed, 14 Aug 2024 04:07:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.55..@fluentui/web-components_v3.0.0-beta.56)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat(web-components): add fluent-textarea component ([PR #32037](https://github.com/microsoft/fluentui/pull/32037) by machi@microsoft.com)
|
|
15
|
+
- export BaseAnchor class ([PR #32295](https://github.com/microsoft/fluentui/pull/32295) by rupertdavid@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [3.0.0-beta.55](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.55)
|
|
8
18
|
|
|
9
|
-
Thu, 08 Aug 2024 04:07:
|
|
19
|
+
Thu, 08 Aug 2024 04:07:16 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.54..@fluentui/web-components_v3.0.0-beta.55)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
|
|
2
|
-
export { AnchorButton } from './anchor-button.js';
|
|
2
|
+
export { BaseAnchor, AnchorButton } from './anchor-button.js';
|
|
3
3
|
export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
|
|
4
4
|
export type { AnchorButtonOptions } from './anchor-button.options.js';
|
|
5
5
|
export { template as AnchorButtonTemplate } from './anchor-button.template.js';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type ExpectMatcherState, type Locator } from '@playwright/test';
|
|
1
2
|
/**
|
|
2
3
|
* Returns a formatted URL for a given Storybook fixture.
|
|
3
4
|
*
|
|
@@ -6,3 +7,24 @@
|
|
|
6
7
|
* @returns - the local URL for the Storybook fixture iframe
|
|
7
8
|
*/
|
|
8
9
|
export declare function fixtureURL(id?: string, args?: Record<string, any>): string;
|
|
10
|
+
/**
|
|
11
|
+
* Evaluate whether an element has the given state or not on its `elementInternals` property.
|
|
12
|
+
*
|
|
13
|
+
* @param locator - The Playwright locator for the element.
|
|
14
|
+
* @param state - The name of the state.
|
|
15
|
+
* @param expected - Whether the given state is expected to exist.
|
|
16
|
+
* @param has - Whether the element is expected to have or not have the given state, defaults to `true`.
|
|
17
|
+
*/
|
|
18
|
+
declare function toHaveCustomState(this: ExpectMatcherState, locator: Locator, state: string, options?: {
|
|
19
|
+
timeout?: number;
|
|
20
|
+
}): Promise<{
|
|
21
|
+
name: string;
|
|
22
|
+
message: () => string;
|
|
23
|
+
pass: boolean;
|
|
24
|
+
expected: boolean;
|
|
25
|
+
actual: any;
|
|
26
|
+
}>;
|
|
27
|
+
export declare const expect: import("@playwright/test").Expect<{
|
|
28
|
+
toHaveCustomState: typeof toHaveCustomState;
|
|
29
|
+
}>;
|
|
30
|
+
export {};
|
|
@@ -32,6 +32,7 @@ import './tab-panel/define.js';
|
|
|
32
32
|
import './tab/define.js';
|
|
33
33
|
import './tabs/define.js';
|
|
34
34
|
import './tablist/define.js';
|
|
35
|
+
import './textarea/define.js';
|
|
35
36
|
import './text-input/define.js';
|
|
36
37
|
import './text/define.js';
|
|
37
38
|
import './toggle-button/define.js';
|
package/dist/dts/index.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export type { SlottableInput } from './field/index.js';
|
|
|
20
20
|
export { FluentDesignSystem } from './fluent-design-system.js';
|
|
21
21
|
export { Image, ImageDefinition, ImageFit, ImageShape, ImageStyles, ImageTemplate } from './image/index.js';
|
|
22
22
|
export { Label, LabelDefinition, LabelSize, LabelStyles, LabelTemplate, LabelWeight } from './label/index.js';
|
|
23
|
-
export { AnchorButton, AnchorButtonAppearance, AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, AnchorButtonTemplate, AnchorTarget, } from './anchor-button/index.js';
|
|
23
|
+
export { BaseAnchor, AnchorButton, AnchorButtonAppearance, AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, AnchorButtonTemplate, AnchorTarget, } from './anchor-button/index.js';
|
|
24
24
|
export { MenuButton, MenuButtonAppearance, MenuButtonDefinition, MenuButtonShape, MenuButtonSize, MenuButtonStyles, MenuButtonTemplate, } from './menu-button/index.js';
|
|
25
25
|
export type { MenuButtonOptions } from './menu-button/index.js';
|
|
26
26
|
export { MenuItem, MenuItemDefinition, MenuItemRole, MenuItemStyles, MenuItemTemplate, roleForMenuItem, } from './menu-item/index.js';
|
|
@@ -46,6 +46,7 @@ export type { TabOptions } from './tab/index.js';
|
|
|
46
46
|
export { Tabs, TabsAppearance, TabsDefinition, TabsOrientation, TabsSize, TabsStyles, TabsTemplate, } from './tabs/index.js';
|
|
47
47
|
export { BaseTablist, Tablist, TablistAppearance, TablistDefinition, TablistOrientation, TablistSize, TablistStyles, TablistTemplate, } from './tablist/index.js';
|
|
48
48
|
export type { TabsOptions } from './tabs/index.js';
|
|
49
|
+
export { BaseTextArea, TextArea, TextAreaAppearance, TextAreaAutocomplete, TextAreaDefinition, TextAreaResize, TextAreaSize, TextAreaStyles, TextAreaTemplate, } from './textarea/index.js';
|
|
49
50
|
export { BaseTextInput, TextInput, TextInputAppearance, TextInputControlSize, TextInputDefinition, TextInputStyles, TextInputTemplate, TextInputType, } from './text-input/index.js';
|
|
50
51
|
export type { TextInputOptions } from './text-input/index.js';
|
|
51
52
|
export { Text, TextAlign, TextDefinition, TextFont, TextSize, TextStyles, TextTemplate, TextWeight, } from './text/index.js';
|
|
@@ -7,7 +7,7 @@ import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js
|
|
|
7
7
|
* @slot thumb - The slot for a custom thumb element.
|
|
8
8
|
* @csspart thumb-container - The container element of the thumb.
|
|
9
9
|
* @csspart track-container - The container element of the track.
|
|
10
|
-
* @
|
|
10
|
+
* @fires change - Fires a custom 'change' event when the value changes.
|
|
11
11
|
*
|
|
12
12
|
* @public
|
|
13
13
|
*/
|
|
@@ -218,3 +218,39 @@ export declare const expandedState: import("@microsoft/fast-element").CSSDirecti
|
|
|
218
218
|
* @public
|
|
219
219
|
*/
|
|
220
220
|
export declare const blockState: import("@microsoft/fast-element").CSSDirective;
|
|
221
|
+
/**
|
|
222
|
+
* Selector for the `resize` state. This indicates the element is resizable.
|
|
223
|
+
* @public
|
|
224
|
+
*/
|
|
225
|
+
export declare const resizeState: import("@microsoft/fast-element").CSSDirective;
|
|
226
|
+
/**
|
|
227
|
+
* Selector for the `resize-horizontal` state.
|
|
228
|
+
* @public
|
|
229
|
+
*/
|
|
230
|
+
export declare const resizeHorizontalState: import("@microsoft/fast-element").CSSDirective;
|
|
231
|
+
/**
|
|
232
|
+
* Selector for the `resize-vertical` state.
|
|
233
|
+
* @public
|
|
234
|
+
*/
|
|
235
|
+
export declare const resizeVerticalState: import("@microsoft/fast-element").CSSDirective;
|
|
236
|
+
/**
|
|
237
|
+
* Selector for the `resize-both` state.
|
|
238
|
+
* @public
|
|
239
|
+
*/
|
|
240
|
+
export declare const resizeBothState: import("@microsoft/fast-element").CSSDirective;
|
|
241
|
+
/**
|
|
242
|
+
* Selector for the `auto-resize` state.
|
|
243
|
+
* @public
|
|
244
|
+
*/
|
|
245
|
+
export declare const autoResizeState: import("@microsoft/fast-element").CSSDirective;
|
|
246
|
+
/**
|
|
247
|
+
* Selector for the `display-shadow` state.
|
|
248
|
+
* @public
|
|
249
|
+
*/
|
|
250
|
+
export declare const displayShadowState: import("@microsoft/fast-element").CSSDirective;
|
|
251
|
+
export declare const userInvalidState: import("@microsoft/fast-element").CSSDirective;
|
|
252
|
+
/**
|
|
253
|
+
* Selector for the `user-valid` state.
|
|
254
|
+
* @public
|
|
255
|
+
*/
|
|
256
|
+
export declare const userValidState: import("@microsoft/fast-element").CSSDirective;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { definition as TextAreaDefinition } from './textarea.definition.js';
|
|
2
|
+
export { BaseTextArea, TextArea } from './textarea.js';
|
|
3
|
+
export { TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResizableResize, TextAreaHorizontallyResizableResize, TextAreaVerticallyResizableResize, TextAreaResize, TextAreaSize, } from './textarea.options.js';
|
|
4
|
+
export { styles as TextAreaStyles } from './textarea.styles.js';
|
|
5
|
+
export { template as TextAreaTemplate } from './textarea.template.js';
|
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
import type { Label } from '../label/label.js';
|
|
3
|
+
import { TextAreaAppearance, TextAreaAutocomplete, TextAreaResize, TextAreaSize } from './textarea.options.js';
|
|
4
|
+
/**
|
|
5
|
+
* A Text Area Custom HTML Element.
|
|
6
|
+
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | `<textarea>`} element.
|
|
7
|
+
*
|
|
8
|
+
* @slot - The default content/value of the component.
|
|
9
|
+
* @slot label - The content for the `<label>`, it should be a `<fluent-label>` element.
|
|
10
|
+
* @csspart label - The `<label>` element.
|
|
11
|
+
* @csspart root - The container element of the `<textarea>` element.
|
|
12
|
+
* @csspart control - The internal `<textarea>` element.
|
|
13
|
+
* @fires change - Fires after the control loses focus, if the content has changed.
|
|
14
|
+
* @fires select - Fires when the `select()` method is called.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export declare class BaseTextArea extends FASTElement {
|
|
19
|
+
/**
|
|
20
|
+
* The form-associated flag.
|
|
21
|
+
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
|
|
22
|
+
*
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
static readonly formAssociated = true;
|
|
26
|
+
/**
|
|
27
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
28
|
+
*
|
|
29
|
+
* @internal
|
|
30
|
+
*/
|
|
31
|
+
elementInternals: ElementInternals;
|
|
32
|
+
/**
|
|
33
|
+
* The `<label>` element.
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
36
|
+
labelEl: HTMLLabelElement;
|
|
37
|
+
/**
|
|
38
|
+
* The `<textarea>` element.
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
controlEl: HTMLTextAreaElement;
|
|
42
|
+
/**
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
autoSizerEl?: HTMLDivElement;
|
|
46
|
+
/**
|
|
47
|
+
* The list of nodes that are assigned to the default slot.
|
|
48
|
+
* @internal
|
|
49
|
+
*/
|
|
50
|
+
defaultSlottedNodes: Node[];
|
|
51
|
+
protected defaultSlottedNodesChanged(): void;
|
|
52
|
+
/**
|
|
53
|
+
* The list of nodes that are assigned to the `label` slot.
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
labelSlottedNodes: Label[];
|
|
57
|
+
protected labelSlottedNodesChanged(): void;
|
|
58
|
+
private userInteracted;
|
|
59
|
+
private autoSizerObserver?;
|
|
60
|
+
private controlElAttrObserver;
|
|
61
|
+
private preConnectControlEl;
|
|
62
|
+
/**
|
|
63
|
+
* Indicates the element's autocomplete state.
|
|
64
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
|
|
65
|
+
*
|
|
66
|
+
* @public
|
|
67
|
+
* @remarks
|
|
68
|
+
* HTML Attribute: `autocomplete`
|
|
69
|
+
*/
|
|
70
|
+
autocomplete?: TextAreaAutocomplete;
|
|
71
|
+
/**
|
|
72
|
+
* Indicates whether the element’s block size (height) should be automatically changed based on the content.
|
|
73
|
+
* Note: When this property’s value is set to be `true`, the element should not have a fixed block-size
|
|
74
|
+
* defined in CSS. Instead, use `min-height` or `min-block-size`.
|
|
75
|
+
*
|
|
76
|
+
* @public
|
|
77
|
+
* @remarks
|
|
78
|
+
* HTML Attribute: `auto-resize`
|
|
79
|
+
*/
|
|
80
|
+
autoResize: boolean;
|
|
81
|
+
protected autoResizeChanged(): void;
|
|
82
|
+
/**
|
|
83
|
+
* Sets the name of the value directionality to be submitted with form data.
|
|
84
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
|
|
85
|
+
*
|
|
86
|
+
* @public
|
|
87
|
+
* @remarks
|
|
88
|
+
* HTML Attribute: `dirname`
|
|
89
|
+
*/
|
|
90
|
+
dirName?: string;
|
|
91
|
+
/**
|
|
92
|
+
* Sets the element's disabled state.
|
|
93
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled | `disabled`} attribute
|
|
94
|
+
*
|
|
95
|
+
* @public
|
|
96
|
+
* @remarks
|
|
97
|
+
* HTML Attribute: `disabled`
|
|
98
|
+
*/
|
|
99
|
+
disabled: boolean;
|
|
100
|
+
protected disabledChanged(): void;
|
|
101
|
+
/**
|
|
102
|
+
* Indicates whether the element displays a box shadow. This only has effect when `appearance` is set to be `filled-darker` or `filled-lighter`.
|
|
103
|
+
*
|
|
104
|
+
* @public
|
|
105
|
+
* @remarks
|
|
106
|
+
* HTML Attribute: `display-shadow`
|
|
107
|
+
*/
|
|
108
|
+
displayShadow: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* The id of a form to associate the element to.
|
|
111
|
+
*
|
|
112
|
+
* @public
|
|
113
|
+
* @remarks
|
|
114
|
+
* HTML Attribute: `form`
|
|
115
|
+
*/
|
|
116
|
+
initialForm?: string;
|
|
117
|
+
/**
|
|
118
|
+
* The form element that’s associated to the element, or `null` if no form is associated.
|
|
119
|
+
*
|
|
120
|
+
* @public
|
|
121
|
+
*/
|
|
122
|
+
get form(): HTMLFormElement | null;
|
|
123
|
+
/**
|
|
124
|
+
* A `NodeList` of `<label>` element associated with the element.
|
|
125
|
+
* @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/labels | `labels`} property
|
|
126
|
+
*
|
|
127
|
+
* @public
|
|
128
|
+
*/
|
|
129
|
+
get labels(): NodeList;
|
|
130
|
+
/**
|
|
131
|
+
* The maximum number of characters a user can enter.
|
|
132
|
+
*
|
|
133
|
+
* @public
|
|
134
|
+
* @remarks
|
|
135
|
+
* HTML Attribute: `maxlength`
|
|
136
|
+
*/
|
|
137
|
+
maxLength?: number;
|
|
138
|
+
/**
|
|
139
|
+
* The minimum number of characters a user can enter.
|
|
140
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/minlength | `minlength`} attribute
|
|
141
|
+
*
|
|
142
|
+
* @public
|
|
143
|
+
* @remarks
|
|
144
|
+
* HTML Attribute: `minlength`
|
|
145
|
+
*/
|
|
146
|
+
minLength?: number;
|
|
147
|
+
/**
|
|
148
|
+
* The name of the element. This element's value will be surfaced during form submission under the provided name.
|
|
149
|
+
*
|
|
150
|
+
* @public
|
|
151
|
+
* @remarks
|
|
152
|
+
* HTML Attribute: `name`
|
|
153
|
+
*/
|
|
154
|
+
name: string;
|
|
155
|
+
/**
|
|
156
|
+
* Sets the placeholder value of the element, generally used to provide a hint to the user.
|
|
157
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder | `placeholder`} attribute
|
|
158
|
+
*
|
|
159
|
+
* @public
|
|
160
|
+
* @remarks
|
|
161
|
+
* HTML Attribute: `placeholder`
|
|
162
|
+
* This attribute is not a valid substitute for a label.
|
|
163
|
+
*/
|
|
164
|
+
placeholder?: string;
|
|
165
|
+
/**
|
|
166
|
+
* When true, the control will be immutable by user interaction.
|
|
167
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/readonly | `readonly`} attribute
|
|
168
|
+
*
|
|
169
|
+
* @public
|
|
170
|
+
* @remarks
|
|
171
|
+
* HTML Attribute: `readonly`
|
|
172
|
+
*/
|
|
173
|
+
readOnly: boolean;
|
|
174
|
+
protected readOnlyChanged(): void;
|
|
175
|
+
/**
|
|
176
|
+
* The element's required attribute.
|
|
177
|
+
*
|
|
178
|
+
* @public
|
|
179
|
+
* @remarks
|
|
180
|
+
* HTML Attribute: `required`
|
|
181
|
+
*/
|
|
182
|
+
required: boolean;
|
|
183
|
+
protected requiredChanged(): void;
|
|
184
|
+
/**
|
|
185
|
+
* Indicates whether the element can be resized by end users.
|
|
186
|
+
*
|
|
187
|
+
* @public
|
|
188
|
+
* @remarks
|
|
189
|
+
* HTML Attribute: `resize`
|
|
190
|
+
*/
|
|
191
|
+
resize: TextAreaResize;
|
|
192
|
+
protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
|
|
193
|
+
/**
|
|
194
|
+
* Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
|
|
195
|
+
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck | `spellcheck`} attribute
|
|
196
|
+
*
|
|
197
|
+
* @public
|
|
198
|
+
* @remarks
|
|
199
|
+
* HTML Attribute: `spellcheck`
|
|
200
|
+
*/
|
|
201
|
+
spellcheck: boolean;
|
|
202
|
+
/**
|
|
203
|
+
* The length of the current value.
|
|
204
|
+
* @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#textLength | 'textLength'} property
|
|
205
|
+
*
|
|
206
|
+
* @public
|
|
207
|
+
*/
|
|
208
|
+
get textLength(): number;
|
|
209
|
+
/**
|
|
210
|
+
* The type of the element, which is always "textarea".
|
|
211
|
+
* @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/type | `type`} property
|
|
212
|
+
*
|
|
213
|
+
* @public
|
|
214
|
+
*/
|
|
215
|
+
get type(): 'textarea';
|
|
216
|
+
/**
|
|
217
|
+
* The element's validity state.
|
|
218
|
+
*
|
|
219
|
+
* @public
|
|
220
|
+
* @remarks
|
|
221
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
|
|
222
|
+
*/
|
|
223
|
+
get validity(): ValidityState;
|
|
224
|
+
/**
|
|
225
|
+
* The validation message.
|
|
226
|
+
*
|
|
227
|
+
* @public
|
|
228
|
+
* @remarks
|
|
229
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
|
|
230
|
+
*/
|
|
231
|
+
get validationMessage(): string;
|
|
232
|
+
/**
|
|
233
|
+
* Determines if the control can be submitted for constraint validation.
|
|
234
|
+
*
|
|
235
|
+
* @public
|
|
236
|
+
* @remarks
|
|
237
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
|
|
238
|
+
*/
|
|
239
|
+
get willValidate(): boolean;
|
|
240
|
+
/**
|
|
241
|
+
* The text content of the element before user interaction.
|
|
242
|
+
* @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#defaultvalue | `defaultValue`} property
|
|
243
|
+
*
|
|
244
|
+
* @public
|
|
245
|
+
* @remarks
|
|
246
|
+
* In order to set the initial/default value, an author should either add the default value in the HTML as the children
|
|
247
|
+
* of the component, or setting this property in JavaScript. Setting `innerHTML`, `innerText`, or `textContent` on this
|
|
248
|
+
* component will not change the default value or the content displayed inside the component.
|
|
249
|
+
*/
|
|
250
|
+
get defaultValue(): string;
|
|
251
|
+
set defaultValue(next: string);
|
|
252
|
+
/**
|
|
253
|
+
* The value of the element.
|
|
254
|
+
*
|
|
255
|
+
* @public
|
|
256
|
+
* @remarks
|
|
257
|
+
* Reflects the `value` property.
|
|
258
|
+
*/
|
|
259
|
+
get value(): string;
|
|
260
|
+
set value(next: string);
|
|
261
|
+
constructor();
|
|
262
|
+
/**
|
|
263
|
+
* @internal
|
|
264
|
+
*/
|
|
265
|
+
connectedCallback(): void;
|
|
266
|
+
/**
|
|
267
|
+
* @internal
|
|
268
|
+
*/
|
|
269
|
+
disconnectedCallback(): void;
|
|
270
|
+
/**
|
|
271
|
+
* Resets the value to its initial value when the form is reset.
|
|
272
|
+
*
|
|
273
|
+
* @internal
|
|
274
|
+
*/
|
|
275
|
+
formResetCallback(): void;
|
|
276
|
+
/**
|
|
277
|
+
* @internal
|
|
278
|
+
*/
|
|
279
|
+
formDisabledCallback(disabled: boolean): void;
|
|
280
|
+
/**
|
|
281
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
|
|
282
|
+
*
|
|
283
|
+
* @internal
|
|
284
|
+
*/
|
|
285
|
+
setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
|
|
286
|
+
/**
|
|
287
|
+
* Checks the validity of the element and returns the result.
|
|
288
|
+
*
|
|
289
|
+
* @public
|
|
290
|
+
* @remarks
|
|
291
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
|
|
292
|
+
*/
|
|
293
|
+
checkValidity(): boolean;
|
|
294
|
+
/**
|
|
295
|
+
* Reports the validity of the element.
|
|
296
|
+
*
|
|
297
|
+
* @public
|
|
298
|
+
* @remarks
|
|
299
|
+
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
|
|
300
|
+
*/
|
|
301
|
+
reportValidity(): boolean;
|
|
302
|
+
/**
|
|
303
|
+
* Sets the custom validity message.
|
|
304
|
+
* @param message - The message to set
|
|
305
|
+
*
|
|
306
|
+
* @public
|
|
307
|
+
*/
|
|
308
|
+
setCustomValidity(message: string | null): void;
|
|
309
|
+
/**
|
|
310
|
+
* Sets the validity of the control.
|
|
311
|
+
*
|
|
312
|
+
* @param flags - Validity flags. If not provided, the control's `validity` will be used.
|
|
313
|
+
* @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
|
|
314
|
+
* @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
|
|
315
|
+
*
|
|
316
|
+
* @internal
|
|
317
|
+
*/
|
|
318
|
+
setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
|
|
319
|
+
/**
|
|
320
|
+
* Selects the content in the element.
|
|
321
|
+
*
|
|
322
|
+
* @public
|
|
323
|
+
*/
|
|
324
|
+
select(): void;
|
|
325
|
+
private setDefaultValue;
|
|
326
|
+
private bindEvents;
|
|
327
|
+
/**
|
|
328
|
+
* Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
|
|
329
|
+
*/
|
|
330
|
+
private getContent;
|
|
331
|
+
private observeControlElAttrs;
|
|
332
|
+
private setDisabledSideEffect;
|
|
333
|
+
private toggleUserValidityState;
|
|
334
|
+
private maybeCreateAutoSizerEl;
|
|
335
|
+
/**
|
|
336
|
+
* @internal
|
|
337
|
+
*/
|
|
338
|
+
handleControlInput(): void;
|
|
339
|
+
/**
|
|
340
|
+
* @internal
|
|
341
|
+
*/
|
|
342
|
+
handleControlChange(): void;
|
|
343
|
+
/**
|
|
344
|
+
* @internal
|
|
345
|
+
*/
|
|
346
|
+
handleControlSelect(): void;
|
|
347
|
+
}
|
|
348
|
+
export declare class TextArea extends BaseTextArea {
|
|
349
|
+
protected labelSlottedNodesChanged(): void;
|
|
350
|
+
/**
|
|
351
|
+
* Indicates the visual appearance of the element.
|
|
352
|
+
*
|
|
353
|
+
* @public
|
|
354
|
+
* @remarks
|
|
355
|
+
* HTML Attribute: `appearance`
|
|
356
|
+
*/
|
|
357
|
+
appearance: TextAreaAppearance;
|
|
358
|
+
protected appearanceChanged(prev: TextAreaAppearance | undefined, next: TextAreaAppearance | undefined): void;
|
|
359
|
+
/**
|
|
360
|
+
* Indicates whether the textarea should be a block-level element.
|
|
361
|
+
*
|
|
362
|
+
* @public
|
|
363
|
+
* @remarks
|
|
364
|
+
* HTML Attribute: `block`
|
|
365
|
+
*/
|
|
366
|
+
block: boolean;
|
|
367
|
+
protected blockChanged(): void;
|
|
368
|
+
/**
|
|
369
|
+
* Sets the size of the control.
|
|
370
|
+
*
|
|
371
|
+
* @public
|
|
372
|
+
* @remarks
|
|
373
|
+
* HTML Attribute: `size`
|
|
374
|
+
*/
|
|
375
|
+
size?: TextAreaSize;
|
|
376
|
+
protected sizeChanged(prev: TextAreaSize | undefined, next: TextAreaSize | undefined): void;
|
|
377
|
+
/**
|
|
378
|
+
* @internal
|
|
379
|
+
*/
|
|
380
|
+
handleChange(_: any, propertyName: string): void;
|
|
381
|
+
/**
|
|
382
|
+
* @internal
|
|
383
|
+
*/
|
|
384
|
+
connectedCallback(): void;
|
|
385
|
+
/**
|
|
386
|
+
* @internal
|
|
387
|
+
*/
|
|
388
|
+
disconnectedCallback(): void;
|
|
389
|
+
private maybeDisplayShadow;
|
|
390
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TextArea } from './textarea.js';
|
|
2
|
+
/**
|
|
3
|
+
* The Fluent Textarea Element definition.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
* @remarks
|
|
7
|
+
* HTML Element: `<fluent-textarea>`
|
|
8
|
+
*/
|
|
9
|
+
export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TextArea>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { ValuesOf } from '../utils/typings.js';
|
|
2
|
+
/**
|
|
3
|
+
* Values for the `size` attribute on TextArea elements.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export declare const TextAreaSize: {
|
|
8
|
+
readonly small: "small";
|
|
9
|
+
readonly medium: "medium";
|
|
10
|
+
readonly large: "large";
|
|
11
|
+
};
|
|
12
|
+
export type TextAreaSize = ValuesOf<typeof TextAreaSize>;
|
|
13
|
+
/**
|
|
14
|
+
* Values for the `appearance` attribute on TextArea elements.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export declare const TextAreaAppearance: {
|
|
19
|
+
readonly outline: "outline";
|
|
20
|
+
readonly filledLighter: "filled-lighter";
|
|
21
|
+
readonly filledDarker: "filled-darker";
|
|
22
|
+
};
|
|
23
|
+
export type TextAreaAppearance = ValuesOf<typeof TextAreaAppearance>;
|
|
24
|
+
export declare const TextAreaAppearancesForDisplayShadow: Partial<TextAreaAppearance[]>;
|
|
25
|
+
/**
|
|
26
|
+
* Values for the `autocomplete` attribute on TextArea elements.
|
|
27
|
+
*
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
export declare const TextAreaAutocomplete: {
|
|
31
|
+
readonly on: "on";
|
|
32
|
+
readonly off: "off";
|
|
33
|
+
};
|
|
34
|
+
export type TextAreaAutocomplete = ValuesOf<typeof TextAreaAutocomplete>;
|
|
35
|
+
/**
|
|
36
|
+
* Values for the `resize` attribute on TextArea elements.
|
|
37
|
+
*/
|
|
38
|
+
export declare const TextAreaResize: {
|
|
39
|
+
readonly none: "none";
|
|
40
|
+
readonly both: "both";
|
|
41
|
+
readonly horizontal: "horizontal";
|
|
42
|
+
readonly vertical: "vertical";
|
|
43
|
+
};
|
|
44
|
+
export type TextAreaResize = ValuesOf<typeof TextAreaResize>;
|
|
45
|
+
export declare const TextAreaResizableResize: Partial<TextAreaResize[]>;
|
|
46
|
+
export declare const TextAreaVerticallyResizableResize: Partial<TextAreaResize[]>;
|
|
47
|
+
export declare const TextAreaHorizontallyResizableResize: Partial<TextAreaResize[]>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ElementViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { TextArea } from './textarea.js';
|
|
3
|
+
/**
|
|
4
|
+
* Generates a template for the TextArea component.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export declare function textAreaTemplate<T extends TextArea>(): ElementViewTemplate<T>;
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export declare const template: ElementViewTemplate<TextArea>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
|
|
2
|
-
export { AnchorButton } from './anchor-button.js';
|
|
2
|
+
export { BaseAnchor, AnchorButton } from './anchor-button.js';
|
|
3
3
|
export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
|
|
4
4
|
export { template as AnchorButtonTemplate } from './anchor-button.template.js';
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}
|