@descope/web-components-ui 1.0.80 → 1.0.82
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +364 -87
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/387.js +1 -1
- package/dist/umd/988.js +1 -1
- package/dist/umd/descope-checkbox-descope-checkbox-internal-index-js.js +1 -0
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-checkbox/Checkbox.js +161 -13
- package/src/components/descope-checkbox/descope-checkbox-internal/CheckboxInternal.js +63 -0
- package/src/components/descope-checkbox/descope-checkbox-internal/index.js +3 -0
- package/src/components/descope-checkbox/index.js +3 -3
- package/src/components/descope-password-field/PasswordField.js +3 -1
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +1 -1
- package/src/components/descope-switch-toggle/SwitchToggle.js +1 -1
- package/src/components/descope-switch-toggle/index.js +1 -1
- package/src/helpers/componentHelpers.js +3 -3
- package/src/mixins/createProxy.js +1 -2
- package/src/theme/components/checkbox.js +71 -1
- package/src/theme/components/switchToggle.js +4 -4
package/dist/index.esm.js
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
import '@vaadin/button';
|
2
2
|
import '@vaadin/checkbox';
|
3
|
+
import '@vaadin/text-field';
|
3
4
|
import '@vaadin/date-picker';
|
4
5
|
import '@vaadin/email-field';
|
5
6
|
import '@vaadin/number-field';
|
6
|
-
import '@vaadin/text-field';
|
7
7
|
import '@vaadin/password-field';
|
8
8
|
import '@vaadin/text-area';
|
9
9
|
import '@vaadin/combo-box';
|
@@ -118,15 +118,15 @@ const forwardProps = (src, target, props = []) => {
|
|
118
118
|
const config = props.reduce((acc, prop) => Object.assign(acc, {
|
119
119
|
[prop]: {
|
120
120
|
get() {
|
121
|
-
return
|
121
|
+
return src[prop]
|
122
122
|
},
|
123
123
|
set(v) {
|
124
|
-
|
124
|
+
src[prop] = v;
|
125
125
|
}
|
126
126
|
}
|
127
127
|
}), {});
|
128
128
|
|
129
|
-
Object.defineProperties(
|
129
|
+
Object.defineProperties(target, config);
|
130
130
|
};
|
131
131
|
|
132
132
|
class ComponentsThemeManager {
|
@@ -580,9 +580,8 @@ const createProxy = ({
|
|
580
580
|
this.#dispatchFocus();
|
581
581
|
});
|
582
582
|
|
583
|
-
|
584
583
|
// this is needed for components that uses props, such as combo box
|
585
|
-
forwardProps(this, this
|
584
|
+
forwardProps(this.baseElement, this, includeForwardProps);
|
586
585
|
|
587
586
|
syncAttrs(this.baseElement, this, {
|
588
587
|
excludeAttrs: excludeAttrsSync,
|
@@ -1029,7 +1028,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1029
1028
|
}
|
1030
1029
|
};
|
1031
1030
|
|
1032
|
-
const componentName$
|
1031
|
+
const componentName$o = getComponentName('button');
|
1033
1032
|
|
1034
1033
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1035
1034
|
const resetStyles = `
|
@@ -1052,7 +1051,7 @@ const iconStyles = `
|
|
1052
1051
|
}
|
1053
1052
|
`;
|
1054
1053
|
|
1055
|
-
const { label: label$
|
1054
|
+
const { label: label$4, host: host$8 } = {
|
1056
1055
|
label: { selector: '::part(label)' },
|
1057
1056
|
host: { selector: () => ':host' }
|
1058
1057
|
};
|
@@ -1062,16 +1061,16 @@ const Button = compose(
|
|
1062
1061
|
mappings: {
|
1063
1062
|
backgroundColor: {},
|
1064
1063
|
borderRadius: {},
|
1065
|
-
color: label$
|
1064
|
+
color: label$4,
|
1066
1065
|
borderColor: {},
|
1067
1066
|
borderStyle: {},
|
1068
1067
|
borderWidth: {},
|
1069
1068
|
fontSize: {},
|
1070
1069
|
height: {},
|
1071
|
-
width: host$
|
1070
|
+
width: host$8,
|
1072
1071
|
cursor: {},
|
1073
|
-
padding: label$
|
1074
|
-
textDecoration: label$
|
1072
|
+
padding: label$4,
|
1073
|
+
textDecoration: label$4
|
1075
1074
|
}
|
1076
1075
|
}),
|
1077
1076
|
draggableMixin,
|
@@ -1083,7 +1082,7 @@ const Button = compose(
|
|
1083
1082
|
style: () =>
|
1084
1083
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
1085
1084
|
excludeAttrsSync: ['tabindex'],
|
1086
|
-
componentName: componentName$
|
1085
|
+
componentName: componentName$o
|
1087
1086
|
})
|
1088
1087
|
);
|
1089
1088
|
|
@@ -1120,31 +1119,245 @@ const loadingIndicatorStyles = `
|
|
1120
1119
|
}
|
1121
1120
|
`;
|
1122
1121
|
|
1123
|
-
customElements.define(componentName$
|
1122
|
+
customElements.define(componentName$o, Button);
|
1123
|
+
|
1124
|
+
const createBaseInputClass = (...args) => compose(
|
1125
|
+
inputValidationMixin,
|
1126
|
+
changeMixin,
|
1127
|
+
readOnlyMixin,
|
1128
|
+
normalizeBooleanAttributesMixin,
|
1129
|
+
inputEventsDispatchingMixin
|
1130
|
+
)(createBaseClass(...args));
|
1131
|
+
|
1132
|
+
const componentName$n = getComponentName('checkbox-internal');
|
1133
|
+
|
1134
|
+
const forwardAttributes$1 = [
|
1135
|
+
'disabled',
|
1136
|
+
'label',
|
1137
|
+
'invalid',
|
1138
|
+
'readonly'
|
1139
|
+
];
|
1140
|
+
|
1141
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
1142
|
+
|
1143
|
+
class CheckboxInternal extends BaseInputClass$3 {
|
1144
|
+
constructor() {
|
1145
|
+
super();
|
1146
|
+
this.innerHTML = `
|
1147
|
+
<div class="wrapper">
|
1148
|
+
<vaadin-checkbox></vaadin-checkbox>
|
1149
|
+
</div>
|
1150
|
+
`;
|
1151
|
+
this.wrapperEle = this.querySelector('div');
|
1152
|
+
this.checkbox = this.querySelector('vaadin-checkbox');
|
1153
|
+
}
|
1154
|
+
|
1155
|
+
get value() {
|
1156
|
+
return this.checkbox?.checked;
|
1157
|
+
}
|
1158
|
+
|
1159
|
+
set value(val) {
|
1160
|
+
this.checkbox.checked = val;
|
1161
|
+
}
|
1162
|
+
|
1163
|
+
get checked() {
|
1164
|
+
return this.value;
|
1165
|
+
}
|
1166
|
+
|
1167
|
+
set checked(val) {
|
1168
|
+
this.value = val;
|
1169
|
+
}
|
1170
|
+
|
1171
|
+
init() {
|
1172
|
+
this.addEventListener('focus', (e) => {
|
1173
|
+
if (e.isTrusted) {
|
1174
|
+
this.checkbox.focus();
|
1175
|
+
}
|
1176
|
+
});
|
1177
|
+
super.init?.();
|
1178
|
+
|
1179
|
+
forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
|
1180
|
+
syncAttrs(this, this.checkbox, { includeAttrs: ['checked', 'focused', 'focus-ring'] });
|
1181
|
+
}
|
1182
|
+
|
1183
|
+
getValidity() {
|
1184
|
+
if (this.isRequired && !this.value) {
|
1185
|
+
return { valueMissing: true };
|
1186
|
+
}
|
1187
|
+
return {}
|
1188
|
+
};
|
1189
|
+
}
|
1124
1190
|
|
1125
1191
|
const componentName$m = getComponentName('checkbox');
|
1126
1192
|
|
1193
|
+
const customMixin$4 = (superclass) =>
|
1194
|
+
class CheckboxMixinClass extends superclass {
|
1195
|
+
constructor() {
|
1196
|
+
super();
|
1197
|
+
}
|
1198
|
+
|
1199
|
+
init() {
|
1200
|
+
super.init?.();
|
1201
|
+
|
1202
|
+
const template = document.createElement('template');
|
1203
|
+
template.innerHTML = `
|
1204
|
+
<${componentName$n}
|
1205
|
+
tabindex="-1"
|
1206
|
+
slot="input"
|
1207
|
+
></${componentName$n}>
|
1208
|
+
`;
|
1209
|
+
|
1210
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
1211
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
1212
|
+
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1213
|
+
|
1214
|
+
forwardAttrs(this, this.inputElement, {
|
1215
|
+
includeAttrs: [
|
1216
|
+
'required',
|
1217
|
+
'full-width',
|
1218
|
+
'size',
|
1219
|
+
'label',
|
1220
|
+
'invalid',
|
1221
|
+
]
|
1222
|
+
});
|
1223
|
+
|
1224
|
+
forwardProps(this.inputElement, this, ['checked']);
|
1225
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['checked', 'focused', 'focus-ring'] });
|
1226
|
+
}
|
1227
|
+
};
|
1228
|
+
|
1229
|
+
const {
|
1230
|
+
host: host$7,
|
1231
|
+
component,
|
1232
|
+
checkboxElement,
|
1233
|
+
checkboxSurface,
|
1234
|
+
checkboxHiddenLabel,
|
1235
|
+
label: label$3,
|
1236
|
+
requiredIndicator: requiredIndicator$3
|
1237
|
+
} = {
|
1238
|
+
host: { selector: () => ':host' },
|
1239
|
+
label: { selector: '::part(label)' },
|
1240
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
1241
|
+
component: { selector: 'vaadin-checkbox' },
|
1242
|
+
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
1243
|
+
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
1244
|
+
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
1245
|
+
};
|
1246
|
+
|
1127
1247
|
const Checkbox = compose(
|
1128
1248
|
createStyleMixin({
|
1129
1249
|
mappings: {
|
1130
|
-
width:
|
1131
|
-
cursor:
|
1132
|
-
|
1250
|
+
width: host$7,
|
1251
|
+
cursor: component,
|
1252
|
+
|
1253
|
+
// Checkbox
|
1254
|
+
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1255
|
+
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1256
|
+
checkboxWidth: [
|
1257
|
+
{ ...checkboxElement, property: 'width' },
|
1258
|
+
{ ...label$3, property: 'margin-left' }
|
1259
|
+
],
|
1260
|
+
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1261
|
+
|
1262
|
+
checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
1263
|
+
checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
1264
|
+
checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
1265
|
+
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
1266
|
+
|
1267
|
+
// Checkmark
|
1268
|
+
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
|
1269
|
+
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
1270
|
+
|
1271
|
+
// Label
|
1272
|
+
labelFontSize: [
|
1273
|
+
{ ...label$3, property: 'font-size' },
|
1274
|
+
{ ...checkboxHiddenLabel, property: 'font-size' }
|
1275
|
+
],
|
1276
|
+
labelLineHeight: [
|
1277
|
+
{ ...label$3, property: 'line-height' },
|
1278
|
+
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1279
|
+
],
|
1280
|
+
labelFontWeight: [
|
1281
|
+
{ ...label$3, property: 'font-weight' },
|
1282
|
+
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1283
|
+
],
|
1284
|
+
labelMargin: [
|
1285
|
+
{ ...label$3, property: 'left' },
|
1286
|
+
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1287
|
+
],
|
1288
|
+
labelTextColor: [
|
1289
|
+
{ ...label$3, property: 'color' },
|
1290
|
+
{ ...requiredIndicator$3, property: 'color' },
|
1291
|
+
],
|
1292
|
+
},
|
1133
1293
|
}),
|
1134
1294
|
draggableMixin,
|
1135
1295
|
proxyInputMixin,
|
1136
|
-
componentNameValidationMixin
|
1296
|
+
componentNameValidationMixin,
|
1297
|
+
customMixin$4
|
1137
1298
|
)(
|
1138
1299
|
createProxy({
|
1139
1300
|
slots: [],
|
1140
|
-
wrappedEleName: 'vaadin-
|
1301
|
+
wrappedEleName: 'vaadin-text-field',
|
1141
1302
|
style: `
|
1142
1303
|
:host {
|
1143
|
-
|
1304
|
+
--vaadin-field-default-width: auto;
|
1305
|
+
display: inline-flex;
|
1144
1306
|
}
|
1145
|
-
|
1146
|
-
|
1147
|
-
|
1307
|
+
.wrapper {
|
1308
|
+
display: flex;
|
1309
|
+
}
|
1310
|
+
|
1311
|
+
vaadin-text-field {
|
1312
|
+
position: relative;
|
1313
|
+
padding: 0;
|
1314
|
+
display: inline-flex;
|
1315
|
+
align-items: flex-start;
|
1316
|
+
}
|
1317
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
1318
|
+
box-shadow: none;
|
1319
|
+
}
|
1320
|
+
vaadin-text-field::before {
|
1321
|
+
height: auto;
|
1322
|
+
margin: 0;
|
1323
|
+
}
|
1324
|
+
vaadin-text-field::part(input-field) {
|
1325
|
+
padding: 0;
|
1326
|
+
background: none;
|
1327
|
+
min-height: 0;
|
1328
|
+
}
|
1329
|
+
vaadin-text-field::part(input-field)::after {
|
1330
|
+
background: none;
|
1331
|
+
}
|
1332
|
+
vaadin-text-field::part(label) {
|
1333
|
+
position: absolute;
|
1334
|
+
top: 0;
|
1335
|
+
}
|
1336
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
1337
|
+
content: "*";
|
1338
|
+
}
|
1339
|
+
|
1340
|
+
vaadin-checkbox [slot="label"] {
|
1341
|
+
opacity: 0;
|
1342
|
+
height: 100%;
|
1343
|
+
align-self: flex-start;
|
1344
|
+
padding: 0;
|
1345
|
+
cursor: pointer;
|
1346
|
+
}
|
1347
|
+
[required] vaadin-checkbox [slot="label"] {
|
1348
|
+
padding-right: 1em;
|
1349
|
+
}
|
1350
|
+
vaadin-checkbox::part(checkbox) {
|
1351
|
+
margin: 0;
|
1352
|
+
}
|
1353
|
+
vaadin-checkbox[focus-ring]::part(checkbox) {
|
1354
|
+
box-shadow: none;
|
1355
|
+
}
|
1356
|
+
|
1357
|
+
descope-checkbox-internal {
|
1358
|
+
-webkit-mask-image: none;
|
1359
|
+
min-height: 0;
|
1360
|
+
padding: 0;
|
1148
1361
|
}
|
1149
1362
|
`,
|
1150
1363
|
excludeAttrsSync: ['tabindex'],
|
@@ -1152,6 +1365,8 @@ const Checkbox = compose(
|
|
1152
1365
|
})
|
1153
1366
|
);
|
1154
1367
|
|
1368
|
+
customElements.define(componentName$n, CheckboxInternal);
|
1369
|
+
|
1155
1370
|
customElements.define(componentName$m, Checkbox);
|
1156
1371
|
|
1157
1372
|
const componentName$l = getComponentName('loader-linear');
|
@@ -1753,14 +1968,6 @@ overrides$5 = `
|
|
1753
1968
|
|
1754
1969
|
customElements.define(componentName$c, NumberField);
|
1755
1970
|
|
1756
|
-
const createBaseInputClass = (...args) => compose(
|
1757
|
-
inputValidationMixin,
|
1758
|
-
changeMixin,
|
1759
|
-
readOnlyMixin,
|
1760
|
-
normalizeBooleanAttributesMixin,
|
1761
|
-
inputEventsDispatchingMixin
|
1762
|
-
)(createBaseClass(...args));
|
1763
|
-
|
1764
1971
|
const focusElement = (ele) => {
|
1765
1972
|
ele?.focus();
|
1766
1973
|
ele?.setSelectionRange(1, 1);
|
@@ -2259,7 +2466,9 @@ overrides$3 = `
|
|
2259
2466
|
}
|
2260
2467
|
vaadin-password-field {
|
2261
2468
|
width: 100%;
|
2262
|
-
|
2469
|
+
}
|
2470
|
+
vaadin-password-field > input {
|
2471
|
+
min-height: 0;
|
2263
2472
|
}
|
2264
2473
|
vaadin-password-field::part(input-field) {
|
2265
2474
|
background: transparent;
|
@@ -2281,7 +2490,7 @@ let overrides$2 = ``;
|
|
2281
2490
|
const SwitchToggle = compose(
|
2282
2491
|
createStyleMixin({
|
2283
2492
|
mappings: {
|
2284
|
-
width: {selector: () => ':host'},
|
2493
|
+
width: { selector: () => ':host' },
|
2285
2494
|
cursor: [{}, { selector: '> label' }]
|
2286
2495
|
}
|
2287
2496
|
}),
|
@@ -4787,18 +4996,18 @@ var globals = {
|
|
4787
4996
|
fonts
|
4788
4997
|
};
|
4789
4998
|
|
4790
|
-
const globalRefs$
|
4999
|
+
const globalRefs$d = getThemeRefs(globals);
|
4791
5000
|
const vars$g = Button.cssVarList;
|
4792
5001
|
|
4793
5002
|
const mode = {
|
4794
|
-
primary: globalRefs$
|
4795
|
-
secondary: globalRefs$
|
4796
|
-
success: globalRefs$
|
4797
|
-
error: globalRefs$
|
4798
|
-
surface: globalRefs$
|
5003
|
+
primary: globalRefs$d.colors.primary,
|
5004
|
+
secondary: globalRefs$d.colors.secondary,
|
5005
|
+
success: globalRefs$d.colors.success,
|
5006
|
+
error: globalRefs$d.colors.error,
|
5007
|
+
surface: globalRefs$d.colors.surface
|
4799
5008
|
};
|
4800
5009
|
|
4801
|
-
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$
|
5010
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
4802
5011
|
|
4803
5012
|
const button = {
|
4804
5013
|
...helperTheme$2,
|
@@ -4807,31 +5016,31 @@ const button = {
|
|
4807
5016
|
xs: {
|
4808
5017
|
[vars$g.height]: '10px',
|
4809
5018
|
[vars$g.fontSize]: '10px',
|
4810
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5019
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.xs}`
|
4811
5020
|
},
|
4812
5021
|
sm: {
|
4813
5022
|
[vars$g.height]: '20px',
|
4814
5023
|
[vars$g.fontSize]: '10px',
|
4815
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5024
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.sm}`
|
4816
5025
|
},
|
4817
5026
|
md: {
|
4818
5027
|
[vars$g.height]: '30px',
|
4819
5028
|
[vars$g.fontSize]: '14px',
|
4820
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5029
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.md}`
|
4821
5030
|
},
|
4822
5031
|
lg: {
|
4823
5032
|
[vars$g.height]: '40px',
|
4824
5033
|
[vars$g.fontSize]: '20px',
|
4825
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5034
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.lg}`
|
4826
5035
|
},
|
4827
5036
|
xl: {
|
4828
5037
|
[vars$g.height]: '50px',
|
4829
5038
|
[vars$g.fontSize]: '25px',
|
4830
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5039
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.xl}`
|
4831
5040
|
}
|
4832
5041
|
},
|
4833
5042
|
|
4834
|
-
[vars$g.borderRadius]: globalRefs$
|
5043
|
+
[vars$g.borderRadius]: globalRefs$d.radius.lg,
|
4835
5044
|
[vars$g.cursor]: 'pointer',
|
4836
5045
|
[vars$g.borderWidth]: '2px',
|
4837
5046
|
[vars$g.borderStyle]: 'solid',
|
@@ -4877,7 +5086,7 @@ const button = {
|
|
4877
5086
|
}
|
4878
5087
|
};
|
4879
5088
|
|
4880
|
-
const globalRefs$
|
5089
|
+
const globalRefs$c = getThemeRefs(globals);
|
4881
5090
|
|
4882
5091
|
const vars$f = TextField.cssVarList;
|
4883
5092
|
|
@@ -4886,44 +5095,44 @@ const textField = (vars) => ({
|
|
4886
5095
|
xs: {
|
4887
5096
|
[vars.height]: '14px',
|
4888
5097
|
[vars.fontSize]: '8px',
|
4889
|
-
[vars.padding]: `0 ${globalRefs$
|
5098
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.xs}`
|
4890
5099
|
},
|
4891
5100
|
sm: {
|
4892
5101
|
[vars.height]: '20px',
|
4893
5102
|
[vars.fontSize]: '10px',
|
4894
|
-
[vars.padding]: `0 ${globalRefs$
|
5103
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.sm}`
|
4895
5104
|
},
|
4896
5105
|
md: {
|
4897
5106
|
[vars.height]: '30px',
|
4898
5107
|
[vars.fontSize]: '14px',
|
4899
|
-
[vars.padding]: `0 ${globalRefs$
|
5108
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.md}`
|
4900
5109
|
},
|
4901
5110
|
lg: {
|
4902
5111
|
[vars.height]: '40px',
|
4903
5112
|
[vars.fontSize]: '20px',
|
4904
|
-
[vars.padding]: `0 ${globalRefs$
|
5113
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.lg}`
|
4905
5114
|
},
|
4906
5115
|
xl: {
|
4907
5116
|
[vars.height]: '50px',
|
4908
5117
|
[vars.fontSize]: '25px',
|
4909
|
-
[vars.padding]: `0 ${globalRefs$
|
5118
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.xl}`
|
4910
5119
|
}
|
4911
5120
|
},
|
4912
5121
|
|
4913
|
-
[vars.color]: globalRefs$
|
4914
|
-
[vars.placeholderColor]: globalRefs$
|
5122
|
+
[vars.color]: globalRefs$c.colors.surface.contrast,
|
5123
|
+
[vars.placeholderColor]: globalRefs$c.colors.surface.main,
|
4915
5124
|
|
4916
|
-
[vars.backgroundColor]: globalRefs$
|
5125
|
+
[vars.backgroundColor]: globalRefs$c.colors.surface.light,
|
4917
5126
|
|
4918
5127
|
[vars.borderWidth]: '1px',
|
4919
5128
|
[vars.borderStyle]: 'solid',
|
4920
5129
|
[vars.borderColor]: 'transparent',
|
4921
|
-
[vars.borderRadius]: globalRefs$
|
5130
|
+
[vars.borderRadius]: globalRefs$c.radius.sm,
|
4922
5131
|
|
4923
5132
|
_disabled: {
|
4924
|
-
[vars.color]: globalRefs$
|
4925
|
-
[vars.placeholderColor]: globalRefs$
|
4926
|
-
[vars.backgroundColor]: globalRefs$
|
5133
|
+
[vars.color]: globalRefs$c.colors.surface.dark,
|
5134
|
+
[vars.placeholderColor]: globalRefs$c.colors.surface.light,
|
5135
|
+
[vars.backgroundColor]: globalRefs$c.colors.surface.main
|
4927
5136
|
},
|
4928
5137
|
|
4929
5138
|
_fullWidth: {
|
@@ -4933,24 +5142,24 @@ const textField = (vars) => ({
|
|
4933
5142
|
_focused: {
|
4934
5143
|
[vars.outlineWidth]: '2px',
|
4935
5144
|
[vars.outlineStyle]: 'solid',
|
4936
|
-
[vars.outlineColor]: globalRefs$
|
5145
|
+
[vars.outlineColor]: globalRefs$c.colors.surface.main
|
4937
5146
|
},
|
4938
5147
|
|
4939
5148
|
_bordered: {
|
4940
|
-
[vars.borderColor]: globalRefs$
|
5149
|
+
[vars.borderColor]: globalRefs$c.colors.surface.main
|
4941
5150
|
},
|
4942
5151
|
|
4943
5152
|
_invalid: {
|
4944
|
-
[vars.borderColor]: globalRefs$
|
4945
|
-
[vars.color]: globalRefs$
|
4946
|
-
[vars.outlineColor]: globalRefs$
|
4947
|
-
[vars.placeholderColor]: globalRefs$
|
5153
|
+
[vars.borderColor]: globalRefs$c.colors.error.main,
|
5154
|
+
[vars.color]: globalRefs$c.colors.error.main,
|
5155
|
+
[vars.outlineColor]: globalRefs$c.colors.error.light,
|
5156
|
+
[vars.placeholderColor]: globalRefs$c.colors.error.light
|
4948
5157
|
}
|
4949
5158
|
});
|
4950
5159
|
|
4951
5160
|
var textField$1 = textField(vars$f);
|
4952
5161
|
|
4953
|
-
const globalRefs$
|
5162
|
+
const globalRefs$b = getThemeRefs(globals);
|
4954
5163
|
|
4955
5164
|
const vars$e = PasswordField.cssVarList;
|
4956
5165
|
|
@@ -4958,11 +5167,11 @@ const passwordField = {
|
|
4958
5167
|
[vars$e.wrapperBorderStyle]: 'solid',
|
4959
5168
|
[vars$e.wrapperBorderWidth]: '1px',
|
4960
5169
|
[vars$e.wrapperBorderColor]: 'transparent',
|
4961
|
-
[vars$e.wrapperBorderRadius]: globalRefs$
|
5170
|
+
[vars$e.wrapperBorderRadius]: globalRefs$b.radius.sm,
|
4962
5171
|
|
4963
|
-
[vars$e.labelTextColor]: globalRefs$
|
4964
|
-
[vars$e.inputTextColor]: globalRefs$
|
4965
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5172
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
|
5173
|
+
[vars$e.inputTextColor]: globalRefs$b.colors.surface.contrast,
|
5174
|
+
[vars$e.placeholderTextColor]: globalRefs$b.colors.surface.main,
|
4966
5175
|
|
4967
5176
|
[vars$e.pointerCursor]: 'pointer',
|
4968
5177
|
|
@@ -4993,7 +5202,7 @@ const passwordField = {
|
|
4993
5202
|
|
4994
5203
|
_bordered: {
|
4995
5204
|
[vars$e.padding]: `0 0.5em`,
|
4996
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5205
|
+
[vars$e.wrapperBorderColor]: globalRefs$b.colors.surface.main
|
4997
5206
|
},
|
4998
5207
|
|
4999
5208
|
_fullWidth: {
|
@@ -5001,10 +5210,10 @@ const passwordField = {
|
|
5001
5210
|
},
|
5002
5211
|
|
5003
5212
|
_invalid: {
|
5004
|
-
[vars$e.labelTextColor]: globalRefs$
|
5005
|
-
[vars$e.inputTextColor]: globalRefs$
|
5006
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5007
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5213
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.error.main,
|
5214
|
+
[vars$e.inputTextColor]: globalRefs$b.colors.error.main,
|
5215
|
+
[vars$e.placeholderTextColor]: globalRefs$b.colors.error.light,
|
5216
|
+
[vars$e.wrapperBorderColor]: globalRefs$b.colors.error.main
|
5008
5217
|
},
|
5009
5218
|
};
|
5010
5219
|
|
@@ -5016,16 +5225,16 @@ const emailField = {
|
|
5016
5225
|
...textField(EmailField.cssVarList)
|
5017
5226
|
};
|
5018
5227
|
|
5019
|
-
const globalRefs$
|
5228
|
+
const globalRefs$a = getThemeRefs(globals);
|
5020
5229
|
const vars$d = TextArea.cssVarList;
|
5021
5230
|
|
5022
5231
|
const textArea = {
|
5023
5232
|
[vars$d.width]: '100%',
|
5024
|
-
[vars$d.color]: globalRefs$
|
5025
|
-
[vars$d.backgroundColor]: globalRefs$
|
5233
|
+
[vars$d.color]: globalRefs$a.colors.primary.main,
|
5234
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.light,
|
5026
5235
|
[vars$d.resize]: 'vertical',
|
5027
5236
|
|
5028
|
-
[vars$d.borderRadius]: globalRefs$
|
5237
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
5029
5238
|
[vars$d.borderWidth]: '1px',
|
5030
5239
|
[vars$d.borderStyle]: 'solid',
|
5031
5240
|
[vars$d.borderColor]: 'transparent',
|
@@ -5034,11 +5243,11 @@ const textArea = {
|
|
5034
5243
|
|
5035
5244
|
|
5036
5245
|
_bordered: {
|
5037
|
-
[vars$d.borderColor]: globalRefs$
|
5246
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.main
|
5038
5247
|
},
|
5039
5248
|
|
5040
5249
|
_focused: {
|
5041
|
-
[vars$d.outlineColor]: globalRefs$
|
5250
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.main
|
5042
5251
|
},
|
5043
5252
|
|
5044
5253
|
_fullWidth: {
|
@@ -5050,22 +5259,90 @@ const textArea = {
|
|
5050
5259
|
},
|
5051
5260
|
|
5052
5261
|
_invalid: {
|
5053
|
-
[vars$d.outlineColor]: globalRefs$
|
5262
|
+
[vars$d.outlineColor]: globalRefs$a.colors.error.main
|
5054
5263
|
}
|
5055
5264
|
};
|
5056
5265
|
|
5266
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5057
5267
|
const vars$c = Checkbox.cssVarList;
|
5058
5268
|
|
5059
5269
|
const checkbox = {
|
5270
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
|
5271
|
+
|
5272
|
+
[vars$c.labelFontSize]: '12px',
|
5273
|
+
[vars$c.labelFontWeight]: '400',
|
5274
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
5060
5275
|
[vars$c.cursor]: 'pointer',
|
5061
|
-
|
5276
|
+
|
5277
|
+
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5278
|
+
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5279
|
+
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5280
|
+
|
5281
|
+
size: {
|
5282
|
+
xs: {
|
5283
|
+
[vars$c.labelFontSize]: '12px',
|
5284
|
+
[vars$c.labelLineHeight]: '1.1em',
|
5285
|
+
[vars$c.checkmarkSize]: '18px',
|
5286
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5287
|
+
},
|
5288
|
+
sm: {
|
5289
|
+
[vars$c.labelFontSize]: '14px',
|
5290
|
+
[vars$c.labelLineHeight]: '1.2em',
|
5291
|
+
[vars$c.checkmarkSize]: '22px',
|
5292
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5293
|
+
},
|
5294
|
+
md: {
|
5295
|
+
[vars$c.labelFontSize]: '16px',
|
5296
|
+
[vars$c.labelLineHeight]: '1.35em',
|
5297
|
+
[vars$c.checkmarkSize]: '26px',
|
5298
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5299
|
+
},
|
5300
|
+
lg: {
|
5301
|
+
[vars$c.labelFontSize]: '20px',
|
5302
|
+
[vars$c.labelLineHeight]: '1.5em',
|
5303
|
+
[vars$c.checkmarkSize]: '34px',
|
5304
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5305
|
+
},
|
5306
|
+
xl: {
|
5307
|
+
[vars$c.labelFontSize]: '20px',
|
5308
|
+
[vars$c.labelLineHeight]: '1.75em',
|
5309
|
+
[vars$c.checkmarkSize]: '38px',
|
5310
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5311
|
+
}
|
5312
|
+
},
|
5313
|
+
|
5314
|
+
_fullWidth: {
|
5315
|
+
[vars$c.width]: '100%',
|
5316
|
+
},
|
5317
|
+
|
5318
|
+
_checked: {
|
5319
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.primary.main,
|
5320
|
+
[vars$c.checkmarkTextColor]: globalRefs$9.colors.primary.contrast,
|
5321
|
+
},
|
5322
|
+
|
5323
|
+
_disabled: {
|
5324
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
|
5325
|
+
},
|
5326
|
+
|
5327
|
+
_focusRing: {
|
5328
|
+
[vars$c.checkboxOutlineWidth]: '2px',
|
5329
|
+
[vars$c.checkboxOutlineOffset]: '1px',
|
5330
|
+
[vars$c.checkboxOutlineColor]: globalRefs$9.colors.primary.main,
|
5331
|
+
[vars$c.checkboxOutlineStyle]: 'solid'
|
5332
|
+
},
|
5333
|
+
|
5334
|
+
_invalid: {
|
5335
|
+
[vars$c.checkboxOutlineColor]: globalRefs$9.colors.error.main,
|
5336
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.error.main
|
5337
|
+
},
|
5338
|
+
|
5062
5339
|
};
|
5063
5340
|
|
5064
5341
|
const vars$b = SwitchToggle.cssVarList;
|
5065
5342
|
|
5066
|
-
const
|
5067
|
-
|
5068
|
-
|
5343
|
+
const switchToggle = {
|
5344
|
+
[vars$b.width]: '70px',
|
5345
|
+
[vars$b.cursor]: [{}, { selector: '> label' }]
|
5069
5346
|
};
|
5070
5347
|
|
5071
5348
|
const globalRefs$8 = getThemeRefs(globals);
|
@@ -5648,7 +5925,7 @@ var components = {
|
|
5648
5925
|
emailField,
|
5649
5926
|
textArea,
|
5650
5927
|
checkbox,
|
5651
|
-
switchToggle
|
5928
|
+
switchToggle,
|
5652
5929
|
container,
|
5653
5930
|
logo,
|
5654
5931
|
text,
|