@fluentui/web-components 3.0.0-beta.31 → 3.0.0-beta.32
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 +18 -2
- package/dist/dts/anchor-button/anchor-button.d.ts +1 -1
- package/dist/dts/checkbox/checkbox.d.ts +13 -1
- package/dist/dts/divider/divider.d.ts +18 -0
- package/dist/dts/image/image.d.ts +36 -0
- package/dist/dts/label/label.d.ts +24 -0
- package/dist/dts/link/link.d.ts +12 -0
- package/dist/dts/progress-bar/progress-bar.d.ts +18 -0
- package/dist/dts/spinner/spinner.d.ts +13 -1
- package/dist/dts/styles/states/index.d.ts +65 -0
- package/dist/dts/text-input/text-input.d.ts +12 -0
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/checkbox/checkbox.js +26 -0
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/checkbox.styles.js +6 -5
- package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
- package/dist/esm/divider/divider.js +47 -2
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/divider/divider.styles.js +31 -30
- package/dist/esm/divider/divider.styles.js.map +1 -1
- package/dist/esm/image/image.js +68 -0
- package/dist/esm/image/image.js.map +1 -1
- package/dist/esm/image/image.styles.js +10 -9
- package/dist/esm/image/image.styles.js.map +1 -1
- package/dist/esm/label/label.js +41 -0
- package/dist/esm/label/label.js.map +1 -1
- package/dist/esm/label/label.styles.js +7 -6
- package/dist/esm/label/label.styles.js.map +1 -1
- package/dist/esm/link/link.js +22 -0
- package/dist/esm/link/link.js.map +1 -1
- package/dist/esm/link/link.styles.js +5 -4
- package/dist/esm/link/link.styles.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.js +40 -0
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.styles.js +7 -6
- package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/esm/spinner/spinner.js +27 -0
- package/dist/esm/spinner/spinner.js.map +1 -1
- package/dist/esm/spinner/spinner.styles.js +9 -8
- package/dist/esm/spinner/spinner.styles.js.map +1 -1
- package/dist/esm/styles/states/index.js +65 -0
- package/dist/esm/styles/states/index.js.map +1 -1
- package/dist/esm/text-input/text-input.js +27 -0
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/text-input/text-input.styles.js +23 -22
- package/dist/esm/text-input/text-input.styles.js.map +1 -1
- package/dist/web-components.d.ts +147 -3
- package/dist/web-components.js +307 -15
- package/dist/web-components.min.js +277 -277
- package/package.json +1 -1
|
@@ -1,10 +1,37 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, FASTElement } from '@microsoft/fast-element';
|
|
3
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
3
4
|
/**
|
|
4
5
|
* The base class used for constructing a fluent-spinner custom element
|
|
5
6
|
* @public
|
|
6
7
|
*/
|
|
7
8
|
export class Spinner extends FASTElement {
|
|
9
|
+
/**
|
|
10
|
+
* Handles changes to size attribute custom states
|
|
11
|
+
* @param prev - the previous state
|
|
12
|
+
* @param next - the next state
|
|
13
|
+
*/
|
|
14
|
+
sizeChanged(prev, next) {
|
|
15
|
+
if (prev) {
|
|
16
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
17
|
+
}
|
|
18
|
+
if (next) {
|
|
19
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Handles changes to appearance attribute custom states
|
|
24
|
+
* @param prev - the previous state
|
|
25
|
+
* @param next - the next state
|
|
26
|
+
*/
|
|
27
|
+
appearanceChanged(prev, next) {
|
|
28
|
+
if (prev) {
|
|
29
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
30
|
+
}
|
|
31
|
+
if (next) {
|
|
32
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
8
35
|
constructor() {
|
|
9
36
|
super();
|
|
10
37
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAkBtC;;;;OAIG;IACI,WAAW,CAAC,IAA6B,EAAE,IAA6B;QAC7E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAWD;;;;OAIG;IACI,iBAAiB,CAAC,IAAmC,EAAE,IAAmC;QAC/F,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvDV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAmDjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,aAAa,CAAC;IAC7C,CAAC;CACF;AA3CC;IADC,IAAI;qCACqB;AAuB1B;IADC,IAAI;2CACiC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utils/index.js';
|
|
3
3
|
import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
|
|
4
|
+
import { extraLargeState, extraSmallState, hugeState, invertedState, largeState, smallState, tinyState, } from '../styles/states/index.js';
|
|
4
5
|
export const styles = css `
|
|
5
6
|
${display('flex')}
|
|
6
7
|
|
|
@@ -11,27 +12,27 @@ export const styles = css `
|
|
|
11
12
|
width: 32px;
|
|
12
13
|
contain: content;
|
|
13
14
|
}
|
|
14
|
-
:host(
|
|
15
|
+
:host(${tinyState}) {
|
|
15
16
|
height: 20px;
|
|
16
17
|
width: 20px;
|
|
17
18
|
}
|
|
18
|
-
:host(
|
|
19
|
+
:host(${extraSmallState}) {
|
|
19
20
|
height: 24px;
|
|
20
21
|
width: 24px;
|
|
21
22
|
}
|
|
22
|
-
:host(
|
|
23
|
+
:host(${smallState}) {
|
|
23
24
|
height: 28px;
|
|
24
25
|
width: 28px;
|
|
25
26
|
}
|
|
26
|
-
:host(
|
|
27
|
+
:host(${largeState}) {
|
|
27
28
|
height: 36px;
|
|
28
29
|
width: 36px;
|
|
29
30
|
}
|
|
30
|
-
:host(
|
|
31
|
+
:host(${extraLargeState}) {
|
|
31
32
|
height: 40px;
|
|
32
33
|
width: 40px;
|
|
33
34
|
}
|
|
34
|
-
:host(
|
|
35
|
+
:host(${hugeState}) {
|
|
35
36
|
height: 44px;
|
|
36
37
|
width: 44px;
|
|
37
38
|
}
|
|
@@ -46,7 +47,7 @@ export const styles = css `
|
|
|
46
47
|
stroke-width: 1.5px;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
|
-
:host(
|
|
50
|
+
:host(${invertedState}) .background {
|
|
50
51
|
stroke: rgba(255, 255, 255, 0.2);
|
|
51
52
|
}
|
|
52
53
|
|
|
@@ -61,7 +62,7 @@ export const styles = css `
|
|
|
61
62
|
animation: spin-infinite 3s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
|
|
62
63
|
}
|
|
63
64
|
|
|
64
|
-
:host(
|
|
65
|
+
:host(${invertedState}) .indicator {
|
|
65
66
|
stroke: ${colorNeutralStrokeOnBrand2};
|
|
66
67
|
}
|
|
67
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC7G,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UAST,SAAS;;;;UAIT,eAAe;;;;UAIf,UAAU;;;;UAIV,UAAU;;;;UAIV,eAAe;;;;UAIf,SAAS;;;;;;;;;;;cAWL,iBAAiB;;;;UAIrB,aAAa;;;;;cAKT,iBAAiB;;;;;;;;;;UAUrB,aAAa;cACT,0BAA0B;;;;;;;;;;;;;;;;;CAiBvC,CAAC"}
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* Selector for the `filled-lighter` state.
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export const filledLighterState = css.partial `:is([state--filled-lighter], :state(filled-lighter))`;
|
|
7
|
+
/**
|
|
8
|
+
* Selector for the `filled-darker` state.
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export const filledDarkerState = css.partial `:is([state--filled-darker], :state(filled-darker))`;
|
|
2
12
|
/**
|
|
3
13
|
* Selector for the `ghost` state.
|
|
4
14
|
* @public
|
|
5
15
|
*/
|
|
6
16
|
export const ghostState = css.partial `:is([state--ghost], :state(ghost))`;
|
|
17
|
+
/**
|
|
18
|
+
* Selector for the `inverted` state.
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
export const invertedState = css.partial `:is([state--inverted], :state(inverted))`;
|
|
7
22
|
/**
|
|
8
23
|
* Selector for the `primary` state.
|
|
9
24
|
* @public
|
|
@@ -14,6 +29,11 @@ export const primaryState = css.partial `:is([state--primary], :state(primary))`
|
|
|
14
29
|
* @public
|
|
15
30
|
*/
|
|
16
31
|
export const outlineState = css.partial `:is([state--outline], :state(outline))`;
|
|
32
|
+
/**
|
|
33
|
+
* Selector for the `strong` state.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export const strongState = css.partial `:is([state--strong], :state(strong))`;
|
|
17
37
|
/**
|
|
18
38
|
* Selector for the `subtle` state.
|
|
19
39
|
* @public
|
|
@@ -24,6 +44,11 @@ export const subtleState = css.partial `:is([state--subtle], :state(subtle))`;
|
|
|
24
44
|
* @public
|
|
25
45
|
*/
|
|
26
46
|
export const tintState = css.partial `:is([state--tint], :state(tint))`;
|
|
47
|
+
/**
|
|
48
|
+
* Selector for the `underline` state.
|
|
49
|
+
* @public
|
|
50
|
+
*/
|
|
51
|
+
export const underlineState = css.partial `:is([state--underline], :state(underline))`;
|
|
27
52
|
/**
|
|
28
53
|
* Selector for the `transparent` state.
|
|
29
54
|
* @public
|
|
@@ -69,6 +94,26 @@ export const largeState = css.partial `:is([state--large], :state(large))`;
|
|
|
69
94
|
* @public
|
|
70
95
|
*/
|
|
71
96
|
export const extraLargeState = css.partial `:is([state--extra-large], :state(extra-large))`;
|
|
97
|
+
/**
|
|
98
|
+
* Selector for the `huge` state.
|
|
99
|
+
* @public
|
|
100
|
+
*/
|
|
101
|
+
export const hugeState = css.partial `:is([state--huge], :state(huge))`;
|
|
102
|
+
/**
|
|
103
|
+
* Selector for the `alignment` start state.
|
|
104
|
+
* @public
|
|
105
|
+
*/
|
|
106
|
+
export const alignStartState = css.partial `:is([state--align-start], :state(align-start))`;
|
|
107
|
+
/**
|
|
108
|
+
* Selector for the `alignment` end state.
|
|
109
|
+
* @public
|
|
110
|
+
*/
|
|
111
|
+
export const alignEndState = css.partial `:is([state--align-end], :state(align-end))`;
|
|
112
|
+
/**
|
|
113
|
+
* Selector for the `inset` state.
|
|
114
|
+
* @public
|
|
115
|
+
*/
|
|
116
|
+
export const insetState = css.partial `:is([state--inset], :state(inset))`;
|
|
72
117
|
/**
|
|
73
118
|
* Selector for the `iconOnly` state.
|
|
74
119
|
* @public
|
|
@@ -79,6 +124,16 @@ export const iconOnlyState = css.partial `:is([state--icon], :state(icon))`;
|
|
|
79
124
|
* @public
|
|
80
125
|
*/
|
|
81
126
|
export const pressedState = css.partial `:is([state--pressed], :state(pressed))`;
|
|
127
|
+
/**
|
|
128
|
+
* Selector for the `brand` state.
|
|
129
|
+
* @public
|
|
130
|
+
*/
|
|
131
|
+
export const brandState = css.partial `:is([state--brand], :state(brand))`;
|
|
132
|
+
/**
|
|
133
|
+
* Selector for the `error` state.
|
|
134
|
+
* @public
|
|
135
|
+
*/
|
|
136
|
+
export const errorState = css.partial `:is([state--error], :state(error))`;
|
|
82
137
|
/**
|
|
83
138
|
* Selector for the `danger` state.
|
|
84
139
|
* @public
|
|
@@ -109,4 +164,14 @@ export const successState = css.partial `:is([state--success], :state(success))`
|
|
|
109
164
|
* @public
|
|
110
165
|
*/
|
|
111
166
|
export const warningState = css.partial `:is([state--warning], :state(warning))`;
|
|
167
|
+
/**
|
|
168
|
+
* Selector for the `vertical` state.
|
|
169
|
+
* @public
|
|
170
|
+
*/
|
|
171
|
+
export const verticalState = css.partial `:is([state--vertical], :state(vertical))`;
|
|
172
|
+
/**
|
|
173
|
+
* Selector for the `horizontal` state.
|
|
174
|
+
* @public
|
|
175
|
+
*/
|
|
176
|
+
export const horizontalState = css.partial `:is([state--horizontal], :state(horizontal))`;
|
|
112
177
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAE3E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAEtF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { attr, FASTElement, nullableNumberConverter, Observable, observable } from '@microsoft/fast-element';
|
|
3
3
|
import { StartEnd } from '../patterns/start-end.js';
|
|
4
4
|
import { applyMixins } from '../utils/apply-mixins.js';
|
|
5
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
5
6
|
import { ImplicitSubmissionBlockingTypes, TextInputType } from './text-input.options.js';
|
|
6
7
|
/**
|
|
7
8
|
* A Text Input Custom HTML Element.
|
|
@@ -45,6 +46,32 @@ export class TextInput extends FASTElement {
|
|
|
45
46
|
*/
|
|
46
47
|
this.elementInternals = this.attachInternals();
|
|
47
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* Handles changes to appearance attribute custom states
|
|
51
|
+
* @param prev - the previous state
|
|
52
|
+
* @param next - the next state
|
|
53
|
+
*/
|
|
54
|
+
appearanceChanged(prev, next) {
|
|
55
|
+
if (prev) {
|
|
56
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
57
|
+
}
|
|
58
|
+
if (next) {
|
|
59
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Handles changes to `control-size` attribute custom states
|
|
64
|
+
* @param prev - the previous state
|
|
65
|
+
* @param next - the next state
|
|
66
|
+
*/
|
|
67
|
+
controlSizeChanged(prev, next) {
|
|
68
|
+
if (prev) {
|
|
69
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
70
|
+
}
|
|
71
|
+
if (next) {
|
|
72
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
48
75
|
/**
|
|
49
76
|
* Updates the control label visibility based on the presence of default slotted content.
|
|
50
77
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7G,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
3
3
|
import { display } from '../utils/display.js';
|
|
4
|
+
import { filledDarkerState, filledLighterState, largeState, outlineState, smallState, underlineState, } from '../styles/states/index.js';
|
|
4
5
|
/**
|
|
5
6
|
* Styles for the TextInput component.
|
|
6
7
|
*
|
|
@@ -120,7 +121,7 @@ export const styles = css `
|
|
|
120
121
|
:host(:focus-within:active) .root:after {
|
|
121
122
|
border-bottom-color: ${colorCompoundBrandStrokePressed};
|
|
122
123
|
}
|
|
123
|
-
:host(
|
|
124
|
+
:host(${outlineState}:focus-within) .root {
|
|
124
125
|
border: ${strokeWidthThin} solid ${colorNeutralStroke1};
|
|
125
126
|
}
|
|
126
127
|
:host(:focus-within) .control {
|
|
@@ -139,70 +140,70 @@ export const styles = css `
|
|
|
139
140
|
color: ${colorNeutralForegroundInverted};
|
|
140
141
|
background-color: ${colorNeutralBackgroundInverted};
|
|
141
142
|
}
|
|
142
|
-
:host(
|
|
143
|
+
:host(${smallState}) .control {
|
|
143
144
|
font-size: ${fontSizeBase200};
|
|
144
145
|
font-weight: ${fontWeightRegular};
|
|
145
146
|
line-height: ${lineHeightBase200};
|
|
146
147
|
}
|
|
147
|
-
:host(
|
|
148
|
+
:host(${smallState}) .root {
|
|
148
149
|
height: 24px;
|
|
149
150
|
gap: ${spacingHorizontalXXS};
|
|
150
151
|
padding: 0 ${spacingHorizontalSNudge};
|
|
151
152
|
}
|
|
152
|
-
:host(
|
|
153
|
-
:host(
|
|
153
|
+
:host(${smallState}) ::slotted([slot='start']),
|
|
154
|
+
:host(${smallState}) ::slotted([slot='end']) {
|
|
154
155
|
font-size: ${fontSizeBase400};
|
|
155
156
|
}
|
|
156
|
-
:host(
|
|
157
|
+
:host(${largeState}) .control {
|
|
157
158
|
font-size: ${fontSizeBase400};
|
|
158
159
|
font-weight: ${fontWeightRegular};
|
|
159
160
|
line-height: ${lineHeightBase400};
|
|
160
161
|
}
|
|
161
|
-
:host(
|
|
162
|
+
:host(${largeState}) .root {
|
|
162
163
|
height: 40px;
|
|
163
164
|
gap: ${spacingHorizontalS};
|
|
164
165
|
padding: 0 ${spacingHorizontalM};
|
|
165
166
|
}
|
|
166
|
-
:host(
|
|
167
|
-
:host(
|
|
167
|
+
:host(${largeState}) ::slotted([slot='start']),
|
|
168
|
+
:host(${largeState}) ::slotted([slot='end']) {
|
|
168
169
|
font-size: ${fontSizeBase600};
|
|
169
170
|
}
|
|
170
|
-
:host(
|
|
171
|
+
:host(${underlineState}) .root {
|
|
171
172
|
background: ${colorTransparentBackground};
|
|
172
173
|
border: 0;
|
|
173
174
|
border-radius: 0;
|
|
174
175
|
border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
|
|
175
176
|
}
|
|
176
|
-
:host(
|
|
177
|
+
:host(${underlineState}:hover) .root {
|
|
177
178
|
border-bottom-color: ${colorNeutralStrokeAccessibleHover};
|
|
178
179
|
}
|
|
179
|
-
:host(
|
|
180
|
+
:host(${underlineState}:active) .root {
|
|
180
181
|
border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
|
|
181
182
|
}
|
|
182
|
-
:host(
|
|
183
|
+
:host(${underlineState}:focus-within) .root {
|
|
183
184
|
border: 0;
|
|
184
185
|
border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
|
|
185
186
|
}
|
|
186
|
-
:host([
|
|
187
|
+
:host(${underlineState}[disabled]) .root {
|
|
187
188
|
border-bottom-color: ${colorNeutralStrokeDisabled};
|
|
188
189
|
}
|
|
189
|
-
:host(
|
|
190
|
-
:host(
|
|
190
|
+
:host(${filledLighterState}) .root,
|
|
191
|
+
:host(${filledDarkerState}) .root {
|
|
191
192
|
border: ${strokeWidthThin} solid ${colorTransparentStroke};
|
|
192
193
|
box-shadow: ${shadow2};
|
|
193
194
|
}
|
|
194
|
-
:host(
|
|
195
|
+
:host(${filledLighterState}) .root {
|
|
195
196
|
background: ${colorNeutralBackground1};
|
|
196
197
|
}
|
|
197
|
-
:host(
|
|
198
|
+
:host(${filledDarkerState}) .root {
|
|
198
199
|
background: ${colorNeutralBackground3};
|
|
199
200
|
}
|
|
200
|
-
:host(
|
|
201
|
-
:host(
|
|
201
|
+
:host(${filledLighterState}:hover) .root,
|
|
202
|
+
:host(${filledDarkerState}:hover) .root {
|
|
202
203
|
border-color: ${colorTransparentStrokeInteractive};
|
|
203
204
|
}
|
|
204
|
-
:host(
|
|
205
|
-
:host(
|
|
205
|
+
:host(${filledLighterState}:active) .root,
|
|
206
|
+
:host(${filledDarkerState}:active) .root {
|
|
206
207
|
border-color: ${colorTransparentStrokeInteractive};
|
|
207
208
|
background: ${colorNeutralBackground3};
|
|
208
209
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"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"}
|