@fluentui/web-components 3.0.0-beta.115 → 3.0.0-beta.117
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 +89 -0
- package/dist/esm/accordion/accordion.js +3 -5
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/dialog/dialog.d.ts +3 -0
- package/dist/esm/dialog/dialog.js +22 -0
- package/dist/esm/dialog/dialog.js.map +1 -1
- package/dist/esm/dialog/dialog.template.js +0 -4
- package/dist/esm/dialog/dialog.template.js.map +1 -1
- package/dist/esm/divider/divider.options.d.ts +1 -4
- package/dist/esm/drawer/drawer.d.ts +14 -0
- package/dist/esm/drawer/drawer.js +50 -0
- package/dist/esm/drawer/drawer.js.map +1 -1
- package/dist/esm/drawer/drawer.template.js +1 -4
- package/dist/esm/drawer/drawer.template.js.map +1 -1
- package/dist/esm/field/field.base.d.ts +1 -0
- package/dist/esm/field/field.base.js +13 -4
- package/dist/esm/field/field.base.js.map +1 -1
- package/dist/esm/field/field.template.js +2 -10
- package/dist/esm/field/field.template.js.map +1 -1
- package/dist/esm/radio-group/radio-group.options.d.ts +1 -4
- package/dist/esm/slider/slider.template.js +0 -1
- package/dist/esm/slider/slider.template.js.map +1 -1
- package/dist/esm/tablist/tablist.options.d.ts +1 -4
- package/dist/esm/textarea/textarea.base.d.ts +1 -0
- package/dist/esm/textarea/textarea.base.js +14 -6
- package/dist/esm/textarea/textarea.base.js.map +1 -1
- package/dist/esm/textarea/textarea.template.js +2 -14
- package/dist/esm/textarea/textarea.template.js.map +1 -1
- package/dist/esm/utils/element-internals.js +0 -3
- package/dist/esm/utils/element-internals.js.map +1 -1
- package/dist/esm/utils/language.d.ts +1 -1
- package/dist/web-components.d.ts +22 -12
- package/dist/web-components.js +97 -32
- package/dist/web-components.min.js +103 -103
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { whitespaceFilter } from '../utils/index.js';
|
|
3
4
|
import { hasMatchingState, swapStates, toggleState } from '../utils/element-internals.js';
|
|
4
5
|
import { TextAreaResize } from './textarea.options.js';
|
|
5
6
|
/**
|
|
@@ -30,10 +31,11 @@ export class BaseTextArea extends FASTElement {
|
|
|
30
31
|
this.value = next;
|
|
31
32
|
}
|
|
32
33
|
labelSlottedNodesChanged() {
|
|
34
|
+
this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
|
|
33
35
|
if (this.labelEl) {
|
|
34
|
-
this.labelEl.hidden = !this.
|
|
36
|
+
this.labelEl.hidden = !this.filteredLabelSlottedNodes.length;
|
|
35
37
|
}
|
|
36
|
-
this.
|
|
38
|
+
this.filteredLabelSlottedNodes.forEach(node => {
|
|
37
39
|
node.disabled = this.disabled;
|
|
38
40
|
node.required = this.required;
|
|
39
41
|
});
|
|
@@ -67,8 +69,8 @@ export class BaseTextArea extends FASTElement {
|
|
|
67
69
|
}
|
|
68
70
|
requiredChanged() {
|
|
69
71
|
this.elementInternals.ariaRequired = `${!!this.required}`;
|
|
70
|
-
if (this.
|
|
71
|
-
this.
|
|
72
|
+
if (this.filteredLabelSlottedNodes?.length) {
|
|
73
|
+
this.filteredLabelSlottedNodes.forEach(node => (node.required = this.required));
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
resizeChanged(prev, next) {
|
|
@@ -167,6 +169,12 @@ export class BaseTextArea extends FASTElement {
|
|
|
167
169
|
* @internal
|
|
168
170
|
*/
|
|
169
171
|
this.elementInternals = this.attachInternals();
|
|
172
|
+
this.filteredLabelSlottedNodes = [];
|
|
173
|
+
/**
|
|
174
|
+
* The list of nodes that are assigned to the `label` slot.
|
|
175
|
+
* @internal
|
|
176
|
+
*/
|
|
177
|
+
this.labelSlottedNodes = [];
|
|
170
178
|
this.userInteracted = false;
|
|
171
179
|
this.preConnectControlEl = document.createElement('textarea');
|
|
172
180
|
/**
|
|
@@ -377,8 +385,8 @@ export class BaseTextArea extends FASTElement {
|
|
|
377
385
|
if (this.controlEl) {
|
|
378
386
|
this.controlEl.disabled = disabled;
|
|
379
387
|
}
|
|
380
|
-
if (this.
|
|
381
|
-
this.
|
|
388
|
+
if (this.filteredLabelSlottedNodes?.length) {
|
|
389
|
+
this.filteredLabelSlottedNodes.forEach(node => (node.disabled = this.disabled));
|
|
382
390
|
}
|
|
383
391
|
}
|
|
384
392
|
toggleUserValidityState() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.base.js","sourceRoot":"","sources":["../../../src/textarea/textarea.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"textarea.base.js","sourceRoot":"","sources":["../../../src/textarea/textarea.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { html, ref, slotted } from '@microsoft/fast-element';
|
|
2
|
-
import { whitespaceFilter } from '../utils/index.js';
|
|
3
2
|
/**
|
|
4
3
|
* Generates a template for the TextArea component.
|
|
5
4
|
*
|
|
@@ -9,13 +8,7 @@ export function textAreaTemplate() {
|
|
|
9
8
|
return html `
|
|
10
9
|
<template>
|
|
11
10
|
<label ${ref('labelEl')} for="control" part="label">
|
|
12
|
-
<slot
|
|
13
|
-
name="label"
|
|
14
|
-
${slotted({
|
|
15
|
-
property: 'labelSlottedNodes',
|
|
16
|
-
filter: whitespaceFilter,
|
|
17
|
-
})}
|
|
18
|
-
></slot>
|
|
11
|
+
<slot name="label" ${slotted('labelSlottedNodes')}></slot>
|
|
19
12
|
</label>
|
|
20
13
|
<div class="root" part="root">
|
|
21
14
|
<textarea
|
|
@@ -37,12 +30,7 @@ export function textAreaTemplate() {
|
|
|
37
30
|
></textarea>
|
|
38
31
|
</div>
|
|
39
32
|
<div hidden>
|
|
40
|
-
<slot
|
|
41
|
-
${slotted({
|
|
42
|
-
property: 'defaultSlottedNodes',
|
|
43
|
-
filter: whitespaceFilter,
|
|
44
|
-
})}
|
|
45
|
-
></slot>
|
|
33
|
+
<slot ${slotted('defaultSlottedNodes')}></slot>
|
|
46
34
|
</div>
|
|
47
35
|
</template>
|
|
48
36
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;6BACA,OAAO,CAAC,mBAAmB,CAAC;;;;YAI7C,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;gBAI/B,OAAO,CAAC,qBAAqB,CAAC;;;GAG3C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}
|
|
@@ -42,13 +42,10 @@ export function toggleState(elementInternals, state, force) {
|
|
|
42
42
|
elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
45
|
-
// @ts-expect-error - Baseline 2024
|
|
46
45
|
if (force ?? !elementInternals.states.has(state)) {
|
|
47
|
-
// @ts-expect-error - Baseline 2024
|
|
48
46
|
elementInternals.states.add(state);
|
|
49
47
|
return;
|
|
50
48
|
}
|
|
51
|
-
// @ts-expect-error - Baseline 2024
|
|
52
49
|
elementInternals.states.delete(state);
|
|
53
50
|
}
|
|
54
51
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["../../../src/utils/element-internals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAQxD,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAEpC;;;GAGG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAiC,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAmB,KAAQ;IACtD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QAC1B,SAAS;aACN,GAAG,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC;aAC/E,GAAG,CAAC,KAAK,CAAC,CAAqB,CAAC;AACvC,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CACzB,gBAA8C,EAC9C,KAAyB,EACzB,KAAe;IAEf,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAChC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC9B,gBAAgB,CAAC,UAAW,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5E,OAAO;IACT,CAAC;IACD,
|
|
1
|
+
{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["../../../src/utils/element-internals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAQxD,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAEpC;;;GAGG;AACH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAiC,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAmB,KAAQ;IACtD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QAC1B,SAAS;aACN,GAAG,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC;aAC/E,GAAG,CAAC,KAAK,CAAC,CAAqB,CAAC;AACvC,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CACzB,gBAA8C,EAC9C,KAAyB,EACzB,KAAe;IAEf,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAChC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC9B,gBAAgB,CAAC,UAAW,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5E,OAAO;IACT,CAAC;IACD,IAAI,KAAK,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,OAAO;IACT,CAAC;IACD,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACxC,CAAC;AAED;;;GAGG;AACH,MAAM,gBAAgB,GAAG,IAAI,OAAO,EAAuC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAA0C,EAAE,KAAyB;IACpG,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;QACjC,OAAO,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CACxB,gBAAkC,EAClC,OAA2B,EAAE,EAC7B,OAA2B,EAAE,EAC7B,MAA+B,EAC/B,SAAiB,EAAE;IAEnB,WAAW,CAAC,gBAAgB,EAAE,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,IAAI,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;QAC9C,WAAW,CAAC,gBAAgB,EAAE,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;IAC1D,CAAC;AACH,CAAC"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -2084,6 +2084,7 @@ export declare class BaseDropdown extends FASTElement {
|
|
|
2084
2084
|
* @public
|
|
2085
2085
|
*/
|
|
2086
2086
|
export declare class BaseField extends FASTElement {
|
|
2087
|
+
private slottedInputObserver;
|
|
2087
2088
|
/**
|
|
2088
2089
|
* The slotted label elements.
|
|
2089
2090
|
*
|
|
@@ -2614,6 +2615,7 @@ export declare class BaseTextArea extends FASTElement {
|
|
|
2614
2615
|
*/
|
|
2615
2616
|
defaultSlottedNodes: Node[];
|
|
2616
2617
|
protected defaultSlottedNodesChanged(): void;
|
|
2618
|
+
private filteredLabelSlottedNodes;
|
|
2617
2619
|
/**
|
|
2618
2620
|
* The list of nodes that are assigned to the `label` slot.
|
|
2619
2621
|
* @internal
|
|
@@ -6214,6 +6216,9 @@ export declare class Dialog extends FASTElement {
|
|
|
6214
6216
|
* The type of the dialog modal
|
|
6215
6217
|
*/
|
|
6216
6218
|
type: DialogType;
|
|
6219
|
+
protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
|
|
6220
|
+
/** @internal */
|
|
6221
|
+
connectedCallback(): void;
|
|
6217
6222
|
/**
|
|
6218
6223
|
* @public
|
|
6219
6224
|
* Method to emit an event before the dialog's open state changes
|
|
@@ -6398,10 +6403,7 @@ export declare const DividerDefinition: FASTElementDefinition<typeof Divider>;
|
|
|
6398
6403
|
* @public
|
|
6399
6404
|
*/
|
|
6400
6405
|
export declare const DividerOrientation: {
|
|
6401
|
-
readonly horizontal: "horizontal";
|
|
6402
|
-
* Divider roles
|
|
6403
|
-
* @public
|
|
6404
|
-
*/
|
|
6406
|
+
readonly horizontal: "horizontal";
|
|
6405
6407
|
readonly vertical: "vertical";
|
|
6406
6408
|
};
|
|
6407
6409
|
|
|
@@ -6466,6 +6468,7 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
|
|
|
6466
6468
|
* @method show - Method to show the drawer.
|
|
6467
6469
|
* @method hide - Method to hide the drawer.
|
|
6468
6470
|
* @method clickHandler - Handles click events on the drawer.
|
|
6471
|
+
* @method cancelHandler - Handles cancel events on the drawer.
|
|
6469
6472
|
* @method emitToggle - Emits an event after the dialog's open state changes.
|
|
6470
6473
|
* @method emitBeforeToggle - Emits an event before the dialog's open state changes.
|
|
6471
6474
|
*
|
|
@@ -6474,12 +6477,14 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
|
|
|
6474
6477
|
* @tag fluent-drawer
|
|
6475
6478
|
*/
|
|
6476
6479
|
export declare class Drawer extends FASTElement {
|
|
6480
|
+
protected roleAttrObserver: MutationObserver;
|
|
6477
6481
|
/**
|
|
6478
6482
|
* @public
|
|
6479
6483
|
* Determines whether the drawer should be displayed as modal or non-modal
|
|
6480
6484
|
* When rendered as a modal, an overlay is applied over the rest of the view.
|
|
6481
6485
|
*/
|
|
6482
6486
|
type: DrawerType;
|
|
6487
|
+
protected typeChanged(): void;
|
|
6483
6488
|
/**
|
|
6484
6489
|
* @public
|
|
6485
6490
|
* The ID of the element that labels the drawer.
|
|
@@ -6507,6 +6512,10 @@ export declare class Drawer extends FASTElement {
|
|
|
6507
6512
|
* The dialog element.
|
|
6508
6513
|
*/
|
|
6509
6514
|
dialog: HTMLDialogElement;
|
|
6515
|
+
/** @internal */
|
|
6516
|
+
connectedCallback(): void;
|
|
6517
|
+
/** @internal */
|
|
6518
|
+
disconnectedCallback(): void;
|
|
6510
6519
|
/**
|
|
6511
6520
|
* @public
|
|
6512
6521
|
* Method to emit an event after the dialog's open state changes
|
|
@@ -6536,6 +6545,13 @@ export declare class Drawer extends FASTElement {
|
|
|
6536
6545
|
* Handles click events on the drawer.
|
|
6537
6546
|
*/
|
|
6538
6547
|
clickHandler(event: Event): boolean;
|
|
6548
|
+
/**
|
|
6549
|
+
* @public
|
|
6550
|
+
* Handles cancel events on the drawer.
|
|
6551
|
+
*/
|
|
6552
|
+
cancelHandler(): void;
|
|
6553
|
+
protected observeRoleAttr(): void;
|
|
6554
|
+
protected updateDialogRole(): void;
|
|
6539
6555
|
}
|
|
6540
6556
|
|
|
6541
6557
|
/**
|
|
@@ -9105,10 +9121,7 @@ export declare const RadioGroupDefinition: FASTElementDefinition<typeof RadioGro
|
|
|
9105
9121
|
* @public
|
|
9106
9122
|
*/
|
|
9107
9123
|
export declare const RadioGroupOrientation: {
|
|
9108
|
-
readonly horizontal: "horizontal";
|
|
9109
|
-
* Radio Group orientation
|
|
9110
|
-
* @public
|
|
9111
|
-
*/
|
|
9124
|
+
readonly horizontal: "horizontal";
|
|
9112
9125
|
readonly vertical: "vertical";
|
|
9113
9126
|
};
|
|
9114
9127
|
|
|
@@ -10275,10 +10288,7 @@ export declare const TablistDefinition: FASTElementDefinition<typeof Tablist>;
|
|
|
10275
10288
|
* @public
|
|
10276
10289
|
*/
|
|
10277
10290
|
export declare const TablistOrientation: {
|
|
10278
|
-
readonly horizontal: "horizontal";
|
|
10279
|
-
* The appearance of the component
|
|
10280
|
-
* @public
|
|
10281
|
-
*/
|
|
10291
|
+
readonly horizontal: "horizontal";
|
|
10282
10292
|
readonly vertical: "vertical";
|
|
10283
10293
|
};
|
|
10284
10294
|
|
package/dist/web-components.js
CHANGED
|
@@ -4727,10 +4727,8 @@ class Accordion extends FASTElement {
|
|
|
4727
4727
|
children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
|
|
4728
4728
|
this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
|
|
4729
4729
|
this.accordionItems.forEach((item, index) => {
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
Observable.getNotifier(item).subscribe(this, "expanded");
|
|
4733
|
-
}
|
|
4730
|
+
item.addEventListener("click", this.expandedChangedHandler);
|
|
4731
|
+
Observable.getNotifier(item).subscribe(this, "expanded");
|
|
4734
4732
|
});
|
|
4735
4733
|
if (this.isSingleExpandMode()) {
|
|
4736
4734
|
const expandedItem = this.findExpandedItem();
|
|
@@ -6719,6 +6717,26 @@ class Dialog extends FASTElement {
|
|
|
6719
6717
|
});
|
|
6720
6718
|
};
|
|
6721
6719
|
}
|
|
6720
|
+
typeChanged(prev, next) {
|
|
6721
|
+
if (!this.dialog) {
|
|
6722
|
+
return;
|
|
6723
|
+
}
|
|
6724
|
+
if (next === DialogType.alert) {
|
|
6725
|
+
this.dialog.setAttribute("role", "alertdialog");
|
|
6726
|
+
} else {
|
|
6727
|
+
this.dialog.removeAttribute("role");
|
|
6728
|
+
}
|
|
6729
|
+
if (next !== DialogType.nonModal) {
|
|
6730
|
+
this.dialog.setAttribute("aria-modal", "true");
|
|
6731
|
+
} else {
|
|
6732
|
+
this.dialog.removeAttribute("aria-modal");
|
|
6733
|
+
}
|
|
6734
|
+
}
|
|
6735
|
+
/** @internal */
|
|
6736
|
+
connectedCallback() {
|
|
6737
|
+
super.connectedCallback();
|
|
6738
|
+
this.typeChanged(void 0, this.type);
|
|
6739
|
+
}
|
|
6722
6740
|
/**
|
|
6723
6741
|
* @public
|
|
6724
6742
|
* Method to show the dialog
|
|
@@ -6765,7 +6783,7 @@ __decorateClass$D([attr({
|
|
|
6765
6783
|
})], Dialog.prototype, "ariaLabelledby", 2);
|
|
6766
6784
|
__decorateClass$D([attr], Dialog.prototype, "type", 2);
|
|
6767
6785
|
|
|
6768
|
-
const template$y = html`<dialog
|
|
6786
|
+
const template$y = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
|
|
6769
6787
|
|
|
6770
6788
|
const styles$x = css`
|
|
6771
6789
|
@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
@@ -6968,6 +6986,28 @@ class Drawer extends FASTElement {
|
|
|
6968
6986
|
});
|
|
6969
6987
|
};
|
|
6970
6988
|
}
|
|
6989
|
+
typeChanged() {
|
|
6990
|
+
if (!this.dialog) {
|
|
6991
|
+
return;
|
|
6992
|
+
}
|
|
6993
|
+
this.updateDialogRole();
|
|
6994
|
+
if (this.type === DrawerType.modal) {
|
|
6995
|
+
this.dialog.setAttribute("aria-modal", "true");
|
|
6996
|
+
} else {
|
|
6997
|
+
this.dialog.removeAttribute("aria-modal");
|
|
6998
|
+
}
|
|
6999
|
+
}
|
|
7000
|
+
/** @internal */
|
|
7001
|
+
connectedCallback() {
|
|
7002
|
+
super.connectedCallback();
|
|
7003
|
+
this.typeChanged();
|
|
7004
|
+
this.observeRoleAttr();
|
|
7005
|
+
}
|
|
7006
|
+
/** @internal */
|
|
7007
|
+
disconnectedCallback() {
|
|
7008
|
+
super.disconnectedCallback();
|
|
7009
|
+
this.roleAttrObserver.disconnect();
|
|
7010
|
+
}
|
|
6971
7011
|
/**
|
|
6972
7012
|
* @public
|
|
6973
7013
|
* Method to show the drawer
|
|
@@ -7005,6 +7045,32 @@ class Drawer extends FASTElement {
|
|
|
7005
7045
|
}
|
|
7006
7046
|
return true;
|
|
7007
7047
|
}
|
|
7048
|
+
/**
|
|
7049
|
+
* @public
|
|
7050
|
+
* Handles cancel events on the drawer.
|
|
7051
|
+
*/
|
|
7052
|
+
cancelHandler() {
|
|
7053
|
+
this.hide();
|
|
7054
|
+
}
|
|
7055
|
+
observeRoleAttr() {
|
|
7056
|
+
if (this.roleAttrObserver) {
|
|
7057
|
+
return;
|
|
7058
|
+
}
|
|
7059
|
+
this.roleAttrObserver = new MutationObserver(() => {
|
|
7060
|
+
this.updateDialogRole();
|
|
7061
|
+
});
|
|
7062
|
+
this.roleAttrObserver.observe(this, {
|
|
7063
|
+
attributes: true,
|
|
7064
|
+
attributeFilter: ["role"]
|
|
7065
|
+
});
|
|
7066
|
+
}
|
|
7067
|
+
updateDialogRole() {
|
|
7068
|
+
console.log(this.role);
|
|
7069
|
+
if (!this.dialog) {
|
|
7070
|
+
return;
|
|
7071
|
+
}
|
|
7072
|
+
this.dialog.role = this.type === DrawerType.modal ? "dialog" : this.role;
|
|
7073
|
+
}
|
|
7008
7074
|
}
|
|
7009
7075
|
__decorateClass$A([attr], Drawer.prototype, "type", 2);
|
|
7010
7076
|
__decorateClass$A([attr({
|
|
@@ -7025,7 +7091,7 @@ const styles$u = css`
|
|
|
7025
7091
|
:host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
|
|
7026
7092
|
|
|
7027
7093
|
function drawerTemplate() {
|
|
7028
|
-
return html`<dialog class="dialog" part="dialog"
|
|
7094
|
+
return html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.cancelHandler()}" ${ref("dialog")}><slot></slot></dialog>`;
|
|
7029
7095
|
}
|
|
7030
7096
|
const template$v = drawerTemplate();
|
|
7031
7097
|
|
|
@@ -7977,9 +8043,9 @@ class BaseField extends FASTElement {
|
|
|
7977
8043
|
* @internal
|
|
7978
8044
|
*/
|
|
7979
8045
|
slottedInputsChanged(prev, next) {
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
this.
|
|
8046
|
+
const filtered = next?.filter(node => node.nodeType === Node.ELEMENT_NODE) ?? [];
|
|
8047
|
+
if (filtered?.length) {
|
|
8048
|
+
this.input = filtered?.[0];
|
|
7983
8049
|
}
|
|
7984
8050
|
}
|
|
7985
8051
|
/**
|
|
@@ -7992,6 +8058,11 @@ class BaseField extends FASTElement {
|
|
|
7992
8058
|
if (next) {
|
|
7993
8059
|
this.setStates();
|
|
7994
8060
|
this.setLabelProperties();
|
|
8061
|
+
this.slottedInputObserver.observe(this.input, {
|
|
8062
|
+
attributes: true,
|
|
8063
|
+
attributeFilter: ["disabled", "required", "readonly"],
|
|
8064
|
+
subtree: true
|
|
8065
|
+
});
|
|
7995
8066
|
}
|
|
7996
8067
|
}
|
|
7997
8068
|
/**
|
|
@@ -8022,8 +8093,12 @@ class BaseField extends FASTElement {
|
|
|
8022
8093
|
this.addEventListener("invalid", this.invalidHandler, {
|
|
8023
8094
|
capture: true
|
|
8024
8095
|
});
|
|
8096
|
+
this.slottedInputObserver = new MutationObserver(() => {
|
|
8097
|
+
this.setStates();
|
|
8098
|
+
});
|
|
8025
8099
|
}
|
|
8026
8100
|
disconnectedCallback() {
|
|
8101
|
+
this.slottedInputObserver.disconnect();
|
|
8027
8102
|
this.removeEventListener("invalid", this.invalidHandler, {
|
|
8028
8103
|
capture: true
|
|
8029
8104
|
});
|
|
@@ -8095,7 +8170,7 @@ class BaseField extends FASTElement {
|
|
|
8095
8170
|
}
|
|
8096
8171
|
}
|
|
8097
8172
|
setValidationStates() {
|
|
8098
|
-
if (!this.input
|
|
8173
|
+
if (!this.input?.validity) {
|
|
8099
8174
|
return;
|
|
8100
8175
|
}
|
|
8101
8176
|
for (const [flag, value] of Object.entries(ValidationFlags)) {
|
|
@@ -8131,14 +8206,7 @@ const styles$r = css`
|
|
|
8131
8206
|
|
|
8132
8207
|
:host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*' / '';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
|
|
8133
8208
|
|
|
8134
|
-
const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${
|
|
8135
|
-
property: "slottedInputs",
|
|
8136
|
-
attributes: true,
|
|
8137
|
-
attributeFilter: ["disabled", "required", "readonly"],
|
|
8138
|
-
subtree: true,
|
|
8139
|
-
selector: '[slot="input"]',
|
|
8140
|
-
filter: elements()
|
|
8141
|
-
})}><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
|
|
8209
|
+
const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input" ${slotted("slottedInputs")}></slot><slot name="message" part="message" ${slotted({
|
|
8142
8210
|
property: "messageSlot",
|
|
8143
8211
|
filter: elements("[flag]")
|
|
8144
8212
|
})}></slot></template>`;
|
|
@@ -11062,7 +11130,7 @@ const styles$d = css`
|
|
|
11062
11130
|
.track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
|
|
11063
11131
|
|
|
11064
11132
|
function sliderTemplate(options = {}) {
|
|
11065
|
-
return html`<template
|
|
11133
|
+
return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
|
|
11066
11134
|
}
|
|
11067
11135
|
const template$d = sliderTemplate({
|
|
11068
11136
|
thumb: `<div class="thumb"></div>`
|
|
@@ -12104,6 +12172,8 @@ class BaseTextArea extends FASTElement {
|
|
|
12104
12172
|
* @internal
|
|
12105
12173
|
*/
|
|
12106
12174
|
this.elementInternals = this.attachInternals();
|
|
12175
|
+
this.filteredLabelSlottedNodes = [];
|
|
12176
|
+
this.labelSlottedNodes = [];
|
|
12107
12177
|
this.userInteracted = false;
|
|
12108
12178
|
this.preConnectControlEl = document.createElement("textarea");
|
|
12109
12179
|
this.autoResize = false;
|
|
@@ -12120,10 +12190,11 @@ class BaseTextArea extends FASTElement {
|
|
|
12120
12190
|
this.value = next;
|
|
12121
12191
|
}
|
|
12122
12192
|
labelSlottedNodesChanged() {
|
|
12193
|
+
this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
|
|
12123
12194
|
if (this.labelEl) {
|
|
12124
|
-
this.labelEl.hidden = !this.
|
|
12195
|
+
this.labelEl.hidden = !this.filteredLabelSlottedNodes.length;
|
|
12125
12196
|
}
|
|
12126
|
-
this.
|
|
12197
|
+
this.filteredLabelSlottedNodes.forEach(node => {
|
|
12127
12198
|
node.disabled = this.disabled;
|
|
12128
12199
|
node.required = this.required;
|
|
12129
12200
|
});
|
|
@@ -12157,8 +12228,8 @@ class BaseTextArea extends FASTElement {
|
|
|
12157
12228
|
}
|
|
12158
12229
|
requiredChanged() {
|
|
12159
12230
|
this.elementInternals.ariaRequired = `${!!this.required}`;
|
|
12160
|
-
if (this.
|
|
12161
|
-
this.
|
|
12231
|
+
if (this.filteredLabelSlottedNodes?.length) {
|
|
12232
|
+
this.filteredLabelSlottedNodes.forEach(node => node.required = this.required);
|
|
12162
12233
|
}
|
|
12163
12234
|
}
|
|
12164
12235
|
resizeChanged(prev, next) {
|
|
@@ -12393,8 +12464,8 @@ class BaseTextArea extends FASTElement {
|
|
|
12393
12464
|
if (this.controlEl) {
|
|
12394
12465
|
this.controlEl.disabled = disabled;
|
|
12395
12466
|
}
|
|
12396
|
-
if (this.
|
|
12397
|
-
this.
|
|
12467
|
+
if (this.filteredLabelSlottedNodes?.length) {
|
|
12468
|
+
this.filteredLabelSlottedNodes.forEach(node => node.disabled = this.disabled);
|
|
12398
12469
|
}
|
|
12399
12470
|
}
|
|
12400
12471
|
toggleUserValidityState() {
|
|
@@ -12567,13 +12638,7 @@ const styles$6 = css`
|
|
|
12567
12638
|
:host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
|
|
12568
12639
|
|
|
12569
12640
|
function textAreaTemplate() {
|
|
12570
|
-
return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted({
|
|
12571
|
-
property: "labelSlottedNodes",
|
|
12572
|
-
filter: whitespaceFilter
|
|
12573
|
-
})}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted({
|
|
12574
|
-
property: "defaultSlottedNodes",
|
|
12575
|
-
filter: whitespaceFilter
|
|
12576
|
-
})}></slot></div></template>`;
|
|
12641
|
+
return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
|
|
12577
12642
|
}
|
|
12578
12643
|
const template$6 = textAreaTemplate();
|
|
12579
12644
|
|