@descope/web-components-ui 1.0.83 → 1.0.85
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/dist/index.esm.js +417 -313
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/18.js +577 -0
- package/dist/umd/{233.js.LICENSE.txt → 18.js.LICENSE.txt} +6 -0
- package/dist/umd/803.js +1 -0
- package/dist/umd/988.js +1 -1
- package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +1 -0
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -0
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -0
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/booleanFieldMixin.js +38 -0
- package/src/components/boolean-fields/commonStyles.js +59 -0
- package/src/components/{descope-checkbox/descope-checkbox-internal/CheckboxInternal.js → boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js} +3 -3
- package/src/components/boolean-fields/descope-boolean-field-internal/index.js +3 -0
- package/src/components/{descope-checkbox → boolean-fields/descope-checkbox}/Checkbox.js +7 -95
- package/src/components/{descope-checkbox → boolean-fields/descope-checkbox}/index.js +3 -1
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggle.js +124 -0
- package/src/components/boolean-fields/descope-switch-toggle/index.js +8 -0
- package/src/components/descope-container/Container.js +2 -1
- package/src/index.js +2 -2
- package/src/index.umd.js +5 -0
- package/src/mixins/proxyInputMixin.js +2 -2
- package/src/theme/components/checkbox.js +3 -6
- package/src/theme/components/container.js +1 -0
- package/src/theme/components/switchToggle.js +71 -4
- package/dist/umd/233.js +0 -577
- package/dist/umd/786.js +0 -2
- package/dist/umd/786.js.LICENSE.txt +0 -17
- package/dist/umd/descope-checkbox-descope-checkbox-internal-index-js.js +0 -1
- package/dist/umd/descope-checkbox-index-js.js +0 -1
- package/dist/umd/descope-switch-toggle-index-js.js +0 -1
- package/src/components/descope-checkbox/descope-checkbox-internal/index.js +0 -3
- package/src/components/descope-switch-toggle/SwitchToggle.js +0 -89
- package/src/components/descope-switch-toggle/index.js +0 -6
package/dist/index.esm.js
CHANGED
@@ -777,8 +777,8 @@ const proxyInputMixin = (superclass) =>
|
|
777
777
|
}
|
778
778
|
|
779
779
|
get inputElement() {
|
780
|
-
const inputSlot = this.baseElement.shadowRoot
|
781
|
-
const textAreaSlot = this.baseElement.shadowRoot
|
780
|
+
const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
|
781
|
+
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
782
782
|
|
783
783
|
this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
|
784
784
|
|
@@ -1051,7 +1051,7 @@ const iconStyles = `
|
|
1051
1051
|
}
|
1052
1052
|
`;
|
1053
1053
|
|
1054
|
-
const { label: label$
|
1054
|
+
const { label: label$5, host: host$9 } = {
|
1055
1055
|
label: { selector: '::part(label)' },
|
1056
1056
|
host: { selector: () => ':host' }
|
1057
1057
|
};
|
@@ -1061,16 +1061,16 @@ const Button = compose(
|
|
1061
1061
|
mappings: {
|
1062
1062
|
backgroundColor: {},
|
1063
1063
|
borderRadius: {},
|
1064
|
-
color: label$
|
1064
|
+
color: label$5,
|
1065
1065
|
borderColor: {},
|
1066
1066
|
borderStyle: {},
|
1067
1067
|
borderWidth: {},
|
1068
1068
|
fontSize: {},
|
1069
1069
|
height: {},
|
1070
|
-
width: host$
|
1070
|
+
width: host$9,
|
1071
1071
|
cursor: {},
|
1072
|
-
padding: label$
|
1073
|
-
textDecoration: label$
|
1072
|
+
padding: label$5,
|
1073
|
+
textDecoration: label$5
|
1074
1074
|
}
|
1075
1075
|
}),
|
1076
1076
|
draggableMixin,
|
@@ -1129,7 +1129,7 @@ const createBaseInputClass = (...args) => compose(
|
|
1129
1129
|
inputEventsDispatchingMixin
|
1130
1130
|
)(createBaseClass(...args));
|
1131
1131
|
|
1132
|
-
const componentName$n = getComponentName('
|
1132
|
+
const componentName$n = getComponentName('boolean-field-internal');
|
1133
1133
|
|
1134
1134
|
const forwardAttributes$1 = [
|
1135
1135
|
'disabled',
|
@@ -1140,7 +1140,7 @@ const forwardAttributes$1 = [
|
|
1140
1140
|
|
1141
1141
|
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
1142
1142
|
|
1143
|
-
class
|
1143
|
+
class BooleanInputInternal extends BaseInputClass$3 {
|
1144
1144
|
constructor() {
|
1145
1145
|
super();
|
1146
1146
|
this.innerHTML = `
|
@@ -1191,52 +1191,112 @@ class CheckboxInternal extends BaseInputClass$3 {
|
|
1191
1191
|
};
|
1192
1192
|
}
|
1193
1193
|
|
1194
|
-
const
|
1194
|
+
const booleanFieldMixin = (superclass) =>
|
1195
|
+
class BooleanFieldMixinClass extends superclass {
|
1196
|
+
constructor() {
|
1197
|
+
super();
|
1198
|
+
}
|
1195
1199
|
|
1196
|
-
|
1197
|
-
|
1198
|
-
constructor() {
|
1199
|
-
super();
|
1200
|
-
}
|
1200
|
+
init() {
|
1201
|
+
super.init?.();
|
1201
1202
|
|
1202
|
-
|
1203
|
-
|
1204
|
-
|
1205
|
-
const template = document.createElement('template');
|
1206
|
-
template.innerHTML = `
|
1203
|
+
const template = document.createElement('template');
|
1204
|
+
template.innerHTML = `
|
1207
1205
|
<${componentName$n}
|
1208
1206
|
tabindex="-1"
|
1209
1207
|
slot="input"
|
1210
1208
|
></${componentName$n}>
|
1211
1209
|
`;
|
1212
1210
|
|
1213
|
-
|
1214
|
-
|
1215
|
-
|
1211
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
1212
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
1213
|
+
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1214
|
+
|
1215
|
+
forwardAttrs(this, this.inputElement, {
|
1216
|
+
includeAttrs: [
|
1217
|
+
'required',
|
1218
|
+
'full-width',
|
1219
|
+
'size',
|
1220
|
+
'label',
|
1221
|
+
'invalid',
|
1222
|
+
]
|
1223
|
+
});
|
1224
|
+
|
1225
|
+
forwardProps(this.inputElement, this, ['checked']);
|
1226
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
|
1227
|
+
}
|
1228
|
+
};
|
1216
1229
|
|
1217
|
-
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
|
1222
|
-
|
1223
|
-
|
1224
|
-
|
1225
|
-
});
|
1230
|
+
var commonStyles = `
|
1231
|
+
:host {
|
1232
|
+
--vaadin-field-default-width: auto;
|
1233
|
+
display: inline-flex;
|
1234
|
+
}
|
1235
|
+
.wrapper {
|
1236
|
+
display: flex;
|
1237
|
+
}
|
1226
1238
|
|
1227
|
-
|
1228
|
-
|
1229
|
-
|
1230
|
-
|
1239
|
+
vaadin-text-field {
|
1240
|
+
position: relative;
|
1241
|
+
padding: 0;
|
1242
|
+
display: inline-flex;
|
1243
|
+
align-items: flex-start;
|
1244
|
+
}
|
1245
|
+
vaadin-text-field::before {
|
1246
|
+
height: 0;
|
1247
|
+
margin: 0;
|
1248
|
+
}
|
1249
|
+
vaadin-text-field::part(label) {
|
1250
|
+
position: absolute;
|
1251
|
+
top: 0;
|
1252
|
+
}
|
1253
|
+
vaadin-text-field::part(input-field) {
|
1254
|
+
padding: 0;
|
1255
|
+
background: none;
|
1256
|
+
min-height: 0;
|
1257
|
+
}
|
1258
|
+
vaadin-text-field::part(input-field)::after {
|
1259
|
+
background: none;
|
1260
|
+
}
|
1261
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
1262
|
+
box-shadow: none;
|
1263
|
+
}
|
1264
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
1265
|
+
content: "*";
|
1266
|
+
}
|
1267
|
+
|
1268
|
+
vaadin-checkbox [slot="label"] {
|
1269
|
+
align-self: flex-start;
|
1270
|
+
opacity: 0;
|
1271
|
+
padding: 0;
|
1272
|
+
}
|
1273
|
+
[required] vaadin-checkbox [slot="label"] {
|
1274
|
+
padding-right: 1em;
|
1275
|
+
}
|
1276
|
+
vaadin-checkbox::part(checkbox) {
|
1277
|
+
margin: 0;
|
1278
|
+
}
|
1279
|
+
vaadin-checkbox[focus-ring]::part(checkbox) {
|
1280
|
+
box-shadow: none;
|
1281
|
+
}
|
1282
|
+
|
1283
|
+
descope-boolean-field-internal {
|
1284
|
+
-webkit-mask-image: none;
|
1285
|
+
min-height: 0;
|
1286
|
+
padding: 0;
|
1287
|
+
}
|
1288
|
+
`;
|
1289
|
+
|
1290
|
+
const componentName$m = getComponentName('checkbox');
|
1231
1291
|
|
1232
1292
|
const {
|
1233
|
-
host: host$
|
1234
|
-
component,
|
1293
|
+
host: host$8,
|
1294
|
+
component: component$1,
|
1235
1295
|
checkboxElement,
|
1236
1296
|
checkboxSurface,
|
1237
|
-
checkboxHiddenLabel,
|
1238
|
-
label: label$
|
1239
|
-
requiredIndicator: requiredIndicator$
|
1297
|
+
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1298
|
+
label: label$4,
|
1299
|
+
requiredIndicator: requiredIndicator$4
|
1240
1300
|
} = {
|
1241
1301
|
host: { selector: () => ':host' },
|
1242
1302
|
label: { selector: '::part(label)' },
|
@@ -1250,15 +1310,15 @@ const {
|
|
1250
1310
|
const Checkbox = compose(
|
1251
1311
|
createStyleMixin({
|
1252
1312
|
mappings: {
|
1253
|
-
width: host$
|
1254
|
-
cursor: component,
|
1313
|
+
width: host$8,
|
1314
|
+
cursor: component$1,
|
1255
1315
|
|
1256
1316
|
// Checkbox
|
1257
1317
|
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1258
1318
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1259
1319
|
checkboxWidth: [
|
1260
1320
|
{ ...checkboxElement, property: 'width' },
|
1261
|
-
{ ...label$
|
1321
|
+
{ ...label$4, property: 'margin-left' }
|
1262
1322
|
],
|
1263
1323
|
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1264
1324
|
|
@@ -1268,13 +1328,121 @@ const Checkbox = compose(
|
|
1268
1328
|
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
1269
1329
|
|
1270
1330
|
// Checkmark
|
1271
|
-
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
|
1331
|
+
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component$1, property: 'font-size' }],
|
1272
1332
|
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
1273
1333
|
|
1274
1334
|
// Label
|
1275
1335
|
labelFontSize: [
|
1276
|
-
{ ...label$
|
1277
|
-
{ ...checkboxHiddenLabel, property: 'font-size' }
|
1336
|
+
{ ...label$4, property: 'font-size' },
|
1337
|
+
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1338
|
+
],
|
1339
|
+
labelLineHeight: [
|
1340
|
+
{ ...label$4, property: 'line-height' },
|
1341
|
+
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1342
|
+
],
|
1343
|
+
labelFontWeight: [
|
1344
|
+
{ ...label$4, property: 'font-weight' },
|
1345
|
+
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
1346
|
+
],
|
1347
|
+
labelMargin: [
|
1348
|
+
{ ...label$4, property: 'left' },
|
1349
|
+
{ ...checkboxHiddenLabel$1, property: 'padding-left' }
|
1350
|
+
],
|
1351
|
+
labelTextColor: [
|
1352
|
+
{ ...label$4, property: 'color' },
|
1353
|
+
{ ...requiredIndicator$4, property: 'color' },
|
1354
|
+
],
|
1355
|
+
},
|
1356
|
+
}),
|
1357
|
+
draggableMixin,
|
1358
|
+
proxyInputMixin,
|
1359
|
+
componentNameValidationMixin,
|
1360
|
+
booleanFieldMixin
|
1361
|
+
)(
|
1362
|
+
createProxy({
|
1363
|
+
slots: [],
|
1364
|
+
wrappedEleName: 'vaadin-text-field',
|
1365
|
+
style: `
|
1366
|
+
${commonStyles}
|
1367
|
+
|
1368
|
+
vaadin-checkbox [slot="label"] {
|
1369
|
+
height: 100%;
|
1370
|
+
cursor: pointer;
|
1371
|
+
}
|
1372
|
+
`,
|
1373
|
+
excludeAttrsSync: ['tabindex'],
|
1374
|
+
componentName: componentName$m
|
1375
|
+
})
|
1376
|
+
);
|
1377
|
+
|
1378
|
+
customElements.define(componentName$n, BooleanInputInternal);
|
1379
|
+
|
1380
|
+
customElements.define(componentName$m, Checkbox);
|
1381
|
+
|
1382
|
+
const componentName$l = getComponentName('switch-toggle');
|
1383
|
+
|
1384
|
+
const {
|
1385
|
+
host: host$7,
|
1386
|
+
component,
|
1387
|
+
checkboxElement: track,
|
1388
|
+
checkboxSurface: knob,
|
1389
|
+
checkboxHiddenLabel,
|
1390
|
+
label: label$3,
|
1391
|
+
requiredIndicator: requiredIndicator$3,
|
1392
|
+
} = {
|
1393
|
+
host: { selector: () => ':host' },
|
1394
|
+
label: { selector: '::part(label)' },
|
1395
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
1396
|
+
component: { selector: 'vaadin-checkbox' },
|
1397
|
+
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
1398
|
+
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
1399
|
+
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
1400
|
+
};
|
1401
|
+
|
1402
|
+
const SwitchToggle = compose(
|
1403
|
+
createStyleMixin({
|
1404
|
+
mappings: {
|
1405
|
+
width: host$7,
|
1406
|
+
cursor: [component, checkboxHiddenLabel, track],
|
1407
|
+
fontSize: [component, label$3, checkboxHiddenLabel],
|
1408
|
+
|
1409
|
+
// Track
|
1410
|
+
trackBorderWidth: { ...track, property: 'border-width' },
|
1411
|
+
trackBorderStyle: { ...track, property: 'border-style' },
|
1412
|
+
trackBorderColor: { ...track, property: 'border-color' },
|
1413
|
+
|
1414
|
+
// Checkbox
|
1415
|
+
trackBackgroundColor: { ...track, property: 'background-color' },
|
1416
|
+
trackRadius: { ...track, property: 'border-radius' },
|
1417
|
+
|
1418
|
+
trackWidth: [
|
1419
|
+
{ ...track, property: 'width' },
|
1420
|
+
],
|
1421
|
+
trackHeight: [
|
1422
|
+
{ ...knob, property: 'font-size' },
|
1423
|
+
{ ...track, property: 'height' }
|
1424
|
+
],
|
1425
|
+
switchOutlineWidth: { ...track, property: 'outline-width' },
|
1426
|
+
switchOutlineOffset: { ...track, property: 'outline-offset' },
|
1427
|
+
switchOutlineColor: { ...track, property: 'outline-color' },
|
1428
|
+
switchOutlineStyle: { ...track, property: 'outline-style' },
|
1429
|
+
|
1430
|
+
// Knob
|
1431
|
+
knobSize: [
|
1432
|
+
{ ...knob, property: 'width' },
|
1433
|
+
{ ...knob, property: 'height' },
|
1434
|
+
],
|
1435
|
+
knobTextColor: { ...knob, property: 'color' },
|
1436
|
+
knobRadius: { ...knob, property: 'border-radius' },
|
1437
|
+
knobTransition: { ...knob, property: 'transition' },
|
1438
|
+
knobColor: { ...knob, property: 'background-color' },
|
1439
|
+
knobTopOffset: { ...knob, property: 'top' },
|
1440
|
+
knobPosition: { ...knob, property: 'left' },
|
1441
|
+
|
1442
|
+
// Label
|
1443
|
+
labelMargin: [
|
1444
|
+
{ ...label$3, property: 'padding-left' },
|
1445
|
+
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1278
1446
|
],
|
1279
1447
|
labelLineHeight: [
|
1280
1448
|
{ ...label$3, property: 'line-height' },
|
@@ -1284,10 +1452,6 @@ const Checkbox = compose(
|
|
1284
1452
|
{ ...label$3, property: 'font-weight' },
|
1285
1453
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1286
1454
|
],
|
1287
|
-
labelMargin: [
|
1288
|
-
{ ...label$3, property: 'left' },
|
1289
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1290
|
-
],
|
1291
1455
|
labelTextColor: [
|
1292
1456
|
{ ...label$3, property: 'color' },
|
1293
1457
|
{ ...requiredIndicator$3, property: 'color' },
|
@@ -1297,86 +1461,42 @@ const Checkbox = compose(
|
|
1297
1461
|
draggableMixin,
|
1298
1462
|
proxyInputMixin,
|
1299
1463
|
componentNameValidationMixin,
|
1300
|
-
|
1464
|
+
booleanFieldMixin
|
1301
1465
|
)(
|
1302
1466
|
createProxy({
|
1303
1467
|
slots: [],
|
1304
1468
|
wrappedEleName: 'vaadin-text-field',
|
1305
|
-
style: `
|
1306
|
-
|
1307
|
-
--vaadin-field-default-width: auto;
|
1308
|
-
display: inline-flex;
|
1309
|
-
}
|
1310
|
-
.wrapper {
|
1311
|
-
display: flex;
|
1312
|
-
}
|
1469
|
+
style: () => `
|
1470
|
+
${commonStyles}
|
1313
1471
|
|
1314
|
-
vaadin-text-field {
|
1315
|
-
position: relative;
|
1316
|
-
padding: 0;
|
1317
|
-
display: inline-flex;
|
1318
|
-
align-items: flex-start;
|
1319
|
-
}
|
1320
|
-
vaadin-text-field[focus-ring]::part(input-field) {
|
1321
|
-
box-shadow: none;
|
1322
|
-
}
|
1323
|
-
vaadin-text-field::before {
|
1324
|
-
height: auto;
|
1325
|
-
margin: 0;
|
1326
|
-
}
|
1327
|
-
vaadin-text-field::part(input-field) {
|
1328
|
-
padding: 0;
|
1329
|
-
background: none;
|
1330
|
-
min-height: 0;
|
1331
|
-
}
|
1332
|
-
vaadin-text-field::part(input-field)::after {
|
1333
|
-
background: none;
|
1334
|
-
}
|
1335
1472
|
vaadin-text-field::part(label) {
|
1336
|
-
|
1337
|
-
top: 0;
|
1338
|
-
}
|
1339
|
-
vaadin-text-field[required]::part(required-indicator)::after {
|
1340
|
-
content: "*";
|
1473
|
+
left: calc(var(${SwitchToggle.cssVarList.trackWidth}) + var(${SwitchToggle.cssVarList.trackBorderWidth}) * 2);
|
1341
1474
|
}
|
1342
1475
|
|
1343
|
-
vaadin-checkbox
|
1344
|
-
|
1345
|
-
height: 100%;
|
1346
|
-
align-self: flex-start;
|
1347
|
-
padding: 0;
|
1348
|
-
cursor: pointer;
|
1476
|
+
vaadin-checkbox[active]::part(checkbox) {
|
1477
|
+
transform: none;
|
1349
1478
|
}
|
1350
|
-
|
1351
|
-
|
1352
|
-
}
|
1353
|
-
vaadin-checkbox::part(checkbox) {
|
1354
|
-
margin: 0;
|
1355
|
-
}
|
1356
|
-
vaadin-checkbox[focus-ring]::part(checkbox) {
|
1357
|
-
box-shadow: none;
|
1479
|
+
vaadin-checkbox[checked]::part(checkbox) {
|
1480
|
+
background: none;
|
1358
1481
|
}
|
1359
|
-
|
1360
|
-
|
1361
|
-
|
1362
|
-
|
1363
|
-
padding: 0;
|
1482
|
+
vaadin-checkbox::part(checkbox)::after {
|
1483
|
+
position: absolute;
|
1484
|
+
opacity: 1;
|
1485
|
+
content: '';
|
1364
1486
|
}
|
1365
1487
|
`,
|
1366
1488
|
excludeAttrsSync: ['tabindex'],
|
1367
|
-
componentName: componentName$
|
1489
|
+
componentName: componentName$l
|
1368
1490
|
})
|
1369
1491
|
);
|
1370
1492
|
|
1371
|
-
customElements.define(componentName$
|
1372
|
-
|
1373
|
-
customElements.define(componentName$m, Checkbox);
|
1493
|
+
customElements.define(componentName$l, SwitchToggle);
|
1374
1494
|
|
1375
|
-
const componentName$
|
1495
|
+
const componentName$k = getComponentName('loader-linear');
|
1376
1496
|
|
1377
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1497
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
|
1378
1498
|
static get componentName() {
|
1379
|
-
return componentName$
|
1499
|
+
return componentName$k;
|
1380
1500
|
}
|
1381
1501
|
constructor() {
|
1382
1502
|
super();
|
@@ -1434,11 +1554,11 @@ const LoaderLinear = compose(
|
|
1434
1554
|
componentNameValidationMixin
|
1435
1555
|
)(RawLoaderLinear);
|
1436
1556
|
|
1437
|
-
customElements.define(componentName$
|
1557
|
+
customElements.define(componentName$k, LoaderLinear);
|
1438
1558
|
|
1439
|
-
const componentName$
|
1559
|
+
const componentName$j = getComponentName('loader-radial');
|
1440
1560
|
|
1441
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1561
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
1442
1562
|
constructor() {
|
1443
1563
|
super();
|
1444
1564
|
|
@@ -1484,11 +1604,11 @@ const LoaderRadial = compose(
|
|
1484
1604
|
componentNameValidationMixin
|
1485
1605
|
)(RawLoaderRadial);
|
1486
1606
|
|
1487
|
-
customElements.define(componentName$
|
1607
|
+
customElements.define(componentName$j, LoaderRadial);
|
1488
1608
|
|
1489
|
-
const componentName$
|
1609
|
+
const componentName$i = getComponentName('container');
|
1490
1610
|
|
1491
|
-
class RawContainer extends createBaseClass({componentName: componentName$
|
1611
|
+
class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
|
1492
1612
|
constructor() {
|
1493
1613
|
super();
|
1494
1614
|
|
@@ -1529,6 +1649,7 @@ const Container = compose(
|
|
1529
1649
|
justifyContent: {},
|
1530
1650
|
alignItems: {},
|
1531
1651
|
gap: {},
|
1652
|
+
flexWrap: {},
|
1532
1653
|
|
1533
1654
|
backgroundColor: {},
|
1534
1655
|
borderRadius: {},
|
@@ -1544,26 +1665,26 @@ const Container = compose(
|
|
1544
1665
|
componentNameValidationMixin
|
1545
1666
|
)(RawContainer);
|
1546
1667
|
|
1547
|
-
customElements.define(componentName$
|
1668
|
+
customElements.define(componentName$i, Container);
|
1548
1669
|
|
1549
|
-
const componentName$
|
1670
|
+
const componentName$h = getComponentName('date-picker');
|
1550
1671
|
|
1551
1672
|
const DatePicker = compose(
|
1552
1673
|
draggableMixin,
|
1553
1674
|
componentNameValidationMixin
|
1554
1675
|
)(
|
1555
1676
|
createProxy({
|
1556
|
-
componentName: componentName$
|
1677
|
+
componentName: componentName$h,
|
1557
1678
|
slots: ['prefix', 'suffix'],
|
1558
1679
|
wrappedEleName: 'vaadin-date-picker',
|
1559
1680
|
style: ``
|
1560
1681
|
})
|
1561
1682
|
);
|
1562
1683
|
|
1563
|
-
customElements.define(componentName$
|
1684
|
+
customElements.define(componentName$h, DatePicker);
|
1564
1685
|
|
1565
|
-
const componentName$
|
1566
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1686
|
+
const componentName$g = getComponentName('divider');
|
1687
|
+
class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
|
1567
1688
|
constructor() {
|
1568
1689
|
super();
|
1569
1690
|
|
@@ -1641,9 +1762,9 @@ const Divider = compose(
|
|
1641
1762
|
componentNameValidationMixin
|
1642
1763
|
)(RawDivider);
|
1643
1764
|
|
1644
|
-
const componentName$
|
1765
|
+
const componentName$f = getComponentName('text');
|
1645
1766
|
|
1646
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
1767
|
+
class RawText extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
|
1647
1768
|
constructor() {
|
1648
1769
|
super();
|
1649
1770
|
|
@@ -1685,9 +1806,9 @@ const Text = compose(
|
|
1685
1806
|
componentNameValidationMixin
|
1686
1807
|
)(RawText);
|
1687
1808
|
|
1688
|
-
customElements.define(componentName$
|
1809
|
+
customElements.define(componentName$f, Text);
|
1689
1810
|
|
1690
|
-
customElements.define(componentName$
|
1811
|
+
customElements.define(componentName$g, Divider);
|
1691
1812
|
|
1692
1813
|
const selectors$2 = {
|
1693
1814
|
label: '::part(label)',
|
@@ -1732,9 +1853,9 @@ var textFieldMappings = {
|
|
1732
1853
|
placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
|
1733
1854
|
};
|
1734
1855
|
|
1735
|
-
const componentName$
|
1856
|
+
const componentName$e = getComponentName('email-field');
|
1736
1857
|
|
1737
|
-
let overrides$
|
1858
|
+
let overrides$5 = ``;
|
1738
1859
|
|
1739
1860
|
const EmailField = compose(
|
1740
1861
|
createStyleMixin({
|
@@ -1749,13 +1870,13 @@ const EmailField = compose(
|
|
1749
1870
|
createProxy({
|
1750
1871
|
slots: ['suffix'],
|
1751
1872
|
wrappedEleName: 'vaadin-email-field',
|
1752
|
-
style: () => overrides$
|
1873
|
+
style: () => overrides$5,
|
1753
1874
|
excludeAttrsSync: ['tabindex'],
|
1754
|
-
componentName: componentName$
|
1875
|
+
componentName: componentName$e
|
1755
1876
|
})
|
1756
1877
|
);
|
1757
1878
|
|
1758
|
-
overrides$
|
1879
|
+
overrides$5 = `
|
1759
1880
|
:host {
|
1760
1881
|
display: inline-block;
|
1761
1882
|
}
|
@@ -1795,10 +1916,10 @@ overrides$6 = `
|
|
1795
1916
|
}
|
1796
1917
|
`;
|
1797
1918
|
|
1798
|
-
customElements.define(componentName$
|
1919
|
+
customElements.define(componentName$e, EmailField);
|
1799
1920
|
|
1800
|
-
const componentName$
|
1801
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
1921
|
+
const componentName$d = getComponentName('link');
|
1922
|
+
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
1802
1923
|
constructor() {
|
1803
1924
|
super();
|
1804
1925
|
document.createElement('template');
|
@@ -1859,14 +1980,14 @@ const Link = compose(
|
|
1859
1980
|
componentNameValidationMixin
|
1860
1981
|
)(RawLink);
|
1861
1982
|
|
1862
|
-
customElements.define(componentName$
|
1983
|
+
customElements.define(componentName$d, Link);
|
1863
1984
|
|
1864
|
-
const componentName$
|
1985
|
+
const componentName$c = getComponentName('logo');
|
1865
1986
|
|
1866
1987
|
let style;
|
1867
1988
|
const getStyle = () => style;
|
1868
1989
|
|
1869
|
-
class RawLogo extends createBaseClass({ componentName: componentName$
|
1990
|
+
class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
|
1870
1991
|
constructor() {
|
1871
1992
|
super();
|
1872
1993
|
|
@@ -1904,11 +2025,11 @@ style = `
|
|
1904
2025
|
}
|
1905
2026
|
`;
|
1906
2027
|
|
1907
|
-
customElements.define(componentName$
|
2028
|
+
customElements.define(componentName$c, Logo);
|
1908
2029
|
|
1909
|
-
const componentName$
|
2030
|
+
const componentName$b = getComponentName('number-field');
|
1910
2031
|
|
1911
|
-
let overrides$
|
2032
|
+
let overrides$4 = ``;
|
1912
2033
|
|
1913
2034
|
const NumberField = compose(
|
1914
2035
|
createStyleMixin({
|
@@ -1923,13 +2044,13 @@ const NumberField = compose(
|
|
1923
2044
|
createProxy({
|
1924
2045
|
slots: ['prefix', 'suffix'],
|
1925
2046
|
wrappedEleName: 'vaadin-number-field',
|
1926
|
-
style: () => overrides$
|
2047
|
+
style: () => overrides$4,
|
1927
2048
|
excludeAttrsSync: ['tabindex'],
|
1928
|
-
componentName: componentName$
|
2049
|
+
componentName: componentName$b
|
1929
2050
|
})
|
1930
2051
|
);
|
1931
2052
|
|
1932
|
-
overrides$
|
2053
|
+
overrides$4 = `
|
1933
2054
|
:host {
|
1934
2055
|
display: inline-block;
|
1935
2056
|
}
|
@@ -1969,7 +2090,7 @@ overrides$5 = `
|
|
1969
2090
|
}
|
1970
2091
|
`;
|
1971
2092
|
|
1972
|
-
customElements.define(componentName$
|
2093
|
+
customElements.define(componentName$b, NumberField);
|
1973
2094
|
|
1974
2095
|
const focusElement = (ele) => {
|
1975
2096
|
ele?.focus();
|
@@ -1985,7 +2106,7 @@ const getSanitizedCharacters = (str) => {
|
|
1985
2106
|
return [...pin]; // creating array of chars
|
1986
2107
|
};
|
1987
2108
|
|
1988
|
-
const componentName$
|
2109
|
+
const componentName$a = getComponentName('passcode-internal');
|
1989
2110
|
|
1990
2111
|
const observedAttributes$1 = [
|
1991
2112
|
'digits'
|
@@ -1999,7 +2120,7 @@ const forwardAttributes = [
|
|
1999
2120
|
'readonly'
|
2000
2121
|
];
|
2001
2122
|
|
2002
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
2123
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
|
2003
2124
|
|
2004
2125
|
class PasscodeInternal extends BaseInputClass$2 {
|
2005
2126
|
static get observedAttributes() {
|
@@ -2007,7 +2128,7 @@ class PasscodeInternal extends BaseInputClass$2 {
|
|
2007
2128
|
}
|
2008
2129
|
|
2009
2130
|
static get componentName() {
|
2010
|
-
return componentName$
|
2131
|
+
return componentName$a;
|
2011
2132
|
}
|
2012
2133
|
|
2013
2134
|
#dispatchBlur = createDispatchEvent.bind(this, 'blur')
|
@@ -2173,9 +2294,9 @@ class PasscodeInternal extends BaseInputClass$2 {
|
|
2173
2294
|
}
|
2174
2295
|
}
|
2175
2296
|
|
2176
|
-
const componentName$
|
2297
|
+
const componentName$9 = getComponentName('text-field');
|
2177
2298
|
|
2178
|
-
let overrides$
|
2299
|
+
let overrides$3 = ``;
|
2179
2300
|
|
2180
2301
|
const observedAttrs = ['type'];
|
2181
2302
|
|
@@ -2211,13 +2332,13 @@ const TextField = compose(
|
|
2211
2332
|
createProxy({
|
2212
2333
|
slots: ['prefix', 'suffix'],
|
2213
2334
|
wrappedEleName: 'vaadin-text-field',
|
2214
|
-
style: () => overrides$
|
2335
|
+
style: () => overrides$3,
|
2215
2336
|
excludeAttrsSync: ['tabindex'],
|
2216
|
-
componentName: componentName$
|
2337
|
+
componentName: componentName$9
|
2217
2338
|
})
|
2218
2339
|
);
|
2219
2340
|
|
2220
|
-
overrides$
|
2341
|
+
overrides$3 = `
|
2221
2342
|
:host {
|
2222
2343
|
display: inline-block;
|
2223
2344
|
--vaadin-field-default-width: auto;
|
@@ -2270,7 +2391,7 @@ overrides$4 = `
|
|
2270
2391
|
}
|
2271
2392
|
`;
|
2272
2393
|
|
2273
|
-
const componentName$
|
2394
|
+
const componentName$8 = getComponentName('passcode');
|
2274
2395
|
|
2275
2396
|
const customMixin$2 = (superclass) =>
|
2276
2397
|
class PasscodeClass extends superclass {
|
@@ -2287,17 +2408,17 @@ const customMixin$2 = (superclass) =>
|
|
2287
2408
|
const template = document.createElement('template');
|
2288
2409
|
|
2289
2410
|
template.innerHTML = `
|
2290
|
-
<${componentName$
|
2411
|
+
<${componentName$a}
|
2291
2412
|
bordered="true"
|
2292
2413
|
name="code"
|
2293
2414
|
tabindex="-1"
|
2294
2415
|
slot="input"
|
2295
|
-
></${componentName$
|
2416
|
+
></${componentName$a}>
|
2296
2417
|
`;
|
2297
2418
|
|
2298
2419
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2299
2420
|
|
2300
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2421
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
2301
2422
|
|
2302
2423
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2303
2424
|
}
|
@@ -2403,19 +2524,19 @@ const Passcode = compose(
|
|
2403
2524
|
}
|
2404
2525
|
`,
|
2405
2526
|
excludeAttrsSync: ['tabindex'],
|
2406
|
-
componentName: componentName$
|
2527
|
+
componentName: componentName$8
|
2407
2528
|
})
|
2408
2529
|
);
|
2409
2530
|
|
2410
|
-
customElements.define(componentName$
|
2531
|
+
customElements.define(componentName$9, TextField);
|
2411
2532
|
|
2412
|
-
customElements.define(componentName$
|
2533
|
+
customElements.define(componentName$a, PasscodeInternal);
|
2413
2534
|
|
2414
|
-
customElements.define(componentName$
|
2535
|
+
customElements.define(componentName$8, Passcode);
|
2415
2536
|
|
2416
|
-
const componentName$
|
2537
|
+
const componentName$7 = getComponentName('password-field');
|
2417
2538
|
|
2418
|
-
let overrides$
|
2539
|
+
let overrides$2 = ``;
|
2419
2540
|
|
2420
2541
|
const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
|
2421
2542
|
host: () => ':host',
|
@@ -2457,13 +2578,13 @@ const PasswordField = compose(
|
|
2457
2578
|
createProxy({
|
2458
2579
|
slots: ['suffix'],
|
2459
2580
|
wrappedEleName: 'vaadin-password-field',
|
2460
|
-
style: () => overrides$
|
2581
|
+
style: () => overrides$2,
|
2461
2582
|
excludeAttrsSync: ['tabindex'],
|
2462
|
-
componentName: componentName$
|
2583
|
+
componentName: componentName$7
|
2463
2584
|
})
|
2464
2585
|
);
|
2465
2586
|
|
2466
|
-
overrides$
|
2587
|
+
overrides$2 = `
|
2467
2588
|
:host {
|
2468
2589
|
display: inline-block;
|
2469
2590
|
}
|
@@ -2484,87 +2605,7 @@ overrides$3 = `
|
|
2484
2605
|
}
|
2485
2606
|
`;
|
2486
2607
|
|
2487
|
-
customElements.define(componentName$
|
2488
|
-
|
2489
|
-
const componentName$7 = getComponentName('switch-toggle');
|
2490
|
-
|
2491
|
-
let overrides$2 = ``;
|
2492
|
-
|
2493
|
-
const SwitchToggle = compose(
|
2494
|
-
createStyleMixin({
|
2495
|
-
mappings: {
|
2496
|
-
width: { selector: () => ':host' },
|
2497
|
-
cursor: [{}, { selector: '> label' }]
|
2498
|
-
}
|
2499
|
-
}),
|
2500
|
-
draggableMixin,
|
2501
|
-
proxyInputMixin,
|
2502
|
-
componentNameValidationMixin
|
2503
|
-
)(
|
2504
|
-
createProxy({
|
2505
|
-
slots: [],
|
2506
|
-
wrappedEleName: 'vaadin-checkbox',
|
2507
|
-
style: () => overrides$2,
|
2508
|
-
excludeAttrsSync: ['tabindex'],
|
2509
|
-
componentName: componentName$7
|
2510
|
-
})
|
2511
|
-
);
|
2512
|
-
|
2513
|
-
overrides$2 = `
|
2514
|
-
:host {
|
2515
|
-
display: inline-block;
|
2516
|
-
}
|
2517
|
-
|
2518
|
-
:host {
|
2519
|
-
--margin: 7px;
|
2520
|
-
--width: var(${SwitchToggle.cssVarList.width});
|
2521
|
-
--height: calc(var(--width) / 2);
|
2522
|
-
--radius: var(--height);
|
2523
|
-
--knobSize: calc(var(--height) - 5px);
|
2524
|
-
--bgColor: #fff;
|
2525
|
-
--knobBgColor: #000;
|
2526
|
-
}
|
2527
|
-
vaadin-checkbox : {
|
2528
|
-
width: 100%;
|
2529
|
-
}
|
2530
|
-
vaadin-checkbox>label {
|
2531
|
-
cursor: pointer;
|
2532
|
-
border: 1px solid;
|
2533
|
-
text-indent: -99999px;
|
2534
|
-
display: block;
|
2535
|
-
position: relative;
|
2536
|
-
width: var(--width);
|
2537
|
-
height: var(--height);
|
2538
|
-
background: var(--bgColor);
|
2539
|
-
border-radius: var(--radius);
|
2540
|
-
}
|
2541
|
-
vaadin-checkbox>label::after {
|
2542
|
-
content: '';
|
2543
|
-
position: absolute;
|
2544
|
-
transition: 0.3s;
|
2545
|
-
top: var(--margin);
|
2546
|
-
left: var(--margin);
|
2547
|
-
width: var(--knobSize);
|
2548
|
-
height: var(--knobSize);
|
2549
|
-
background: var(--knobBgColor);
|
2550
|
-
border-radius: var(--knobSize);
|
2551
|
-
}
|
2552
|
-
vaadin-checkbox::part(checkbox) {
|
2553
|
-
height: 0;
|
2554
|
-
width: 0;
|
2555
|
-
visibility: hidden;
|
2556
|
-
margin: 0;
|
2557
|
-
}
|
2558
|
-
vaadin-checkbox[checked]>label::after {
|
2559
|
-
transform: translateX(-100%);
|
2560
|
-
left: calc(100% - var(--margin));
|
2561
|
-
}
|
2562
|
-
vaadin-checkbox[active]>label::after {
|
2563
|
-
width: calc(var(--knobSize) + 15px);
|
2564
|
-
}
|
2565
|
-
`;
|
2566
|
-
|
2567
|
-
customElements.define(componentName$7, SwitchToggle);
|
2608
|
+
customElements.define(componentName$7, PasswordField);
|
2568
2609
|
|
2569
2610
|
const componentName$6 = getComponentName('text-area');
|
2570
2611
|
|
@@ -4999,15 +5040,15 @@ var globals = {
|
|
4999
5040
|
fonts
|
5000
5041
|
};
|
5001
5042
|
|
5002
|
-
const globalRefs$
|
5043
|
+
const globalRefs$e = getThemeRefs(globals);
|
5003
5044
|
const vars$g = Button.cssVarList;
|
5004
5045
|
|
5005
5046
|
const mode = {
|
5006
|
-
primary: globalRefs$
|
5007
|
-
secondary: globalRefs$
|
5008
|
-
success: globalRefs$
|
5009
|
-
error: globalRefs$
|
5010
|
-
surface: globalRefs$
|
5047
|
+
primary: globalRefs$e.colors.primary,
|
5048
|
+
secondary: globalRefs$e.colors.secondary,
|
5049
|
+
success: globalRefs$e.colors.success,
|
5050
|
+
error: globalRefs$e.colors.error,
|
5051
|
+
surface: globalRefs$e.colors.surface
|
5011
5052
|
};
|
5012
5053
|
|
5013
5054
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
@@ -5019,31 +5060,31 @@ const button = {
|
|
5019
5060
|
xs: {
|
5020
5061
|
[vars$g.height]: '10px',
|
5021
5062
|
[vars$g.fontSize]: '10px',
|
5022
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5063
|
+
[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5023
5064
|
},
|
5024
5065
|
sm: {
|
5025
5066
|
[vars$g.height]: '20px',
|
5026
5067
|
[vars$g.fontSize]: '10px',
|
5027
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5068
|
+
[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5028
5069
|
},
|
5029
5070
|
md: {
|
5030
5071
|
[vars$g.height]: '30px',
|
5031
5072
|
[vars$g.fontSize]: '14px',
|
5032
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5073
|
+
[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
|
5033
5074
|
},
|
5034
5075
|
lg: {
|
5035
5076
|
[vars$g.height]: '40px',
|
5036
5077
|
[vars$g.fontSize]: '20px',
|
5037
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5078
|
+
[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5038
5079
|
},
|
5039
5080
|
xl: {
|
5040
5081
|
[vars$g.height]: '50px',
|
5041
5082
|
[vars$g.fontSize]: '25px',
|
5042
|
-
[vars$g.padding]: `0 ${globalRefs$
|
5083
|
+
[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5043
5084
|
}
|
5044
5085
|
},
|
5045
5086
|
|
5046
|
-
[vars$g.borderRadius]: globalRefs$
|
5087
|
+
[vars$g.borderRadius]: globalRefs$e.radius.lg,
|
5047
5088
|
[vars$g.cursor]: 'pointer',
|
5048
5089
|
[vars$g.borderWidth]: '2px',
|
5049
5090
|
[vars$g.borderStyle]: 'solid',
|
@@ -5089,7 +5130,7 @@ const button = {
|
|
5089
5130
|
}
|
5090
5131
|
};
|
5091
5132
|
|
5092
|
-
const globalRefs$
|
5133
|
+
const globalRefs$d = getThemeRefs(globals);
|
5093
5134
|
|
5094
5135
|
const vars$f = TextField.cssVarList;
|
5095
5136
|
|
@@ -5098,44 +5139,44 @@ const textField = (vars) => ({
|
|
5098
5139
|
xs: {
|
5099
5140
|
[vars.height]: '14px',
|
5100
5141
|
[vars.fontSize]: '8px',
|
5101
|
-
[vars.padding]: `0 ${globalRefs$
|
5142
|
+
[vars.padding]: `0 ${globalRefs$d.spacing.xs}`
|
5102
5143
|
},
|
5103
5144
|
sm: {
|
5104
5145
|
[vars.height]: '20px',
|
5105
5146
|
[vars.fontSize]: '10px',
|
5106
|
-
[vars.padding]: `0 ${globalRefs$
|
5147
|
+
[vars.padding]: `0 ${globalRefs$d.spacing.sm}`
|
5107
5148
|
},
|
5108
5149
|
md: {
|
5109
5150
|
[vars.height]: '30px',
|
5110
5151
|
[vars.fontSize]: '14px',
|
5111
|
-
[vars.padding]: `0 ${globalRefs$
|
5152
|
+
[vars.padding]: `0 ${globalRefs$d.spacing.md}`
|
5112
5153
|
},
|
5113
5154
|
lg: {
|
5114
5155
|
[vars.height]: '40px',
|
5115
5156
|
[vars.fontSize]: '20px',
|
5116
|
-
[vars.padding]: `0 ${globalRefs$
|
5157
|
+
[vars.padding]: `0 ${globalRefs$d.spacing.lg}`
|
5117
5158
|
},
|
5118
5159
|
xl: {
|
5119
5160
|
[vars.height]: '50px',
|
5120
5161
|
[vars.fontSize]: '25px',
|
5121
|
-
[vars.padding]: `0 ${globalRefs$
|
5162
|
+
[vars.padding]: `0 ${globalRefs$d.spacing.xl}`
|
5122
5163
|
}
|
5123
5164
|
},
|
5124
5165
|
|
5125
|
-
[vars.color]: globalRefs$
|
5126
|
-
[vars.placeholderColor]: globalRefs$
|
5166
|
+
[vars.color]: globalRefs$d.colors.surface.contrast,
|
5167
|
+
[vars.placeholderColor]: globalRefs$d.colors.surface.main,
|
5127
5168
|
|
5128
|
-
[vars.backgroundColor]: globalRefs$
|
5169
|
+
[vars.backgroundColor]: globalRefs$d.colors.surface.light,
|
5129
5170
|
|
5130
5171
|
[vars.borderWidth]: '1px',
|
5131
5172
|
[vars.borderStyle]: 'solid',
|
5132
5173
|
[vars.borderColor]: 'transparent',
|
5133
|
-
[vars.borderRadius]: globalRefs$
|
5174
|
+
[vars.borderRadius]: globalRefs$d.radius.sm,
|
5134
5175
|
|
5135
5176
|
_disabled: {
|
5136
|
-
[vars.color]: globalRefs$
|
5137
|
-
[vars.placeholderColor]: globalRefs$
|
5138
|
-
[vars.backgroundColor]: globalRefs$
|
5177
|
+
[vars.color]: globalRefs$d.colors.surface.dark,
|
5178
|
+
[vars.placeholderColor]: globalRefs$d.colors.surface.light,
|
5179
|
+
[vars.backgroundColor]: globalRefs$d.colors.surface.main
|
5139
5180
|
},
|
5140
5181
|
|
5141
5182
|
_fullWidth: {
|
@@ -5145,24 +5186,24 @@ const textField = (vars) => ({
|
|
5145
5186
|
_focused: {
|
5146
5187
|
[vars.outlineWidth]: '2px',
|
5147
5188
|
[vars.outlineStyle]: 'solid',
|
5148
|
-
[vars.outlineColor]: globalRefs$
|
5189
|
+
[vars.outlineColor]: globalRefs$d.colors.surface.main
|
5149
5190
|
},
|
5150
5191
|
|
5151
5192
|
_bordered: {
|
5152
|
-
[vars.borderColor]: globalRefs$
|
5193
|
+
[vars.borderColor]: globalRefs$d.colors.surface.main
|
5153
5194
|
},
|
5154
5195
|
|
5155
5196
|
_invalid: {
|
5156
|
-
[vars.borderColor]: globalRefs$
|
5157
|
-
[vars.color]: globalRefs$
|
5158
|
-
[vars.outlineColor]: globalRefs$
|
5159
|
-
[vars.placeholderColor]: globalRefs$
|
5197
|
+
[vars.borderColor]: globalRefs$d.colors.error.main,
|
5198
|
+
[vars.color]: globalRefs$d.colors.error.main,
|
5199
|
+
[vars.outlineColor]: globalRefs$d.colors.error.light,
|
5200
|
+
[vars.placeholderColor]: globalRefs$d.colors.error.light
|
5160
5201
|
}
|
5161
5202
|
});
|
5162
5203
|
|
5163
5204
|
var textField$1 = textField(vars$f);
|
5164
5205
|
|
5165
|
-
const globalRefs$
|
5206
|
+
const globalRefs$c = getThemeRefs(globals);
|
5166
5207
|
|
5167
5208
|
const vars$e = PasswordField.cssVarList;
|
5168
5209
|
|
@@ -5170,11 +5211,11 @@ const passwordField = {
|
|
5170
5211
|
[vars$e.wrapperBorderStyle]: 'solid',
|
5171
5212
|
[vars$e.wrapperBorderWidth]: '1px',
|
5172
5213
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5173
|
-
[vars$e.wrapperBorderRadius]: globalRefs$
|
5214
|
+
[vars$e.wrapperBorderRadius]: globalRefs$c.radius.sm,
|
5174
5215
|
|
5175
|
-
[vars$e.labelTextColor]: globalRefs$
|
5176
|
-
[vars$e.inputTextColor]: globalRefs$
|
5177
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5216
|
+
[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
|
5217
|
+
[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
|
5218
|
+
[vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
|
5178
5219
|
|
5179
5220
|
[vars$e.pointerCursor]: 'pointer',
|
5180
5221
|
|
@@ -5205,7 +5246,7 @@ const passwordField = {
|
|
5205
5246
|
|
5206
5247
|
_bordered: {
|
5207
5248
|
[vars$e.padding]: `0 0.5em`,
|
5208
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5249
|
+
[vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
|
5209
5250
|
},
|
5210
5251
|
|
5211
5252
|
_fullWidth: {
|
@@ -5213,10 +5254,10 @@ const passwordField = {
|
|
5213
5254
|
},
|
5214
5255
|
|
5215
5256
|
_invalid: {
|
5216
|
-
[vars$e.labelTextColor]: globalRefs$
|
5217
|
-
[vars$e.inputTextColor]: globalRefs$
|
5218
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5219
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5257
|
+
[vars$e.labelTextColor]: globalRefs$c.colors.error.main,
|
5258
|
+
[vars$e.inputTextColor]: globalRefs$c.colors.error.main,
|
5259
|
+
[vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
|
5260
|
+
[vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main
|
5220
5261
|
},
|
5221
5262
|
};
|
5222
5263
|
|
@@ -5228,16 +5269,16 @@ const emailField = {
|
|
5228
5269
|
...textField(EmailField.cssVarList)
|
5229
5270
|
};
|
5230
5271
|
|
5231
|
-
const globalRefs$
|
5272
|
+
const globalRefs$b = getThemeRefs(globals);
|
5232
5273
|
const vars$d = TextArea.cssVarList;
|
5233
5274
|
|
5234
5275
|
const textArea = {
|
5235
5276
|
[vars$d.width]: '100%',
|
5236
|
-
[vars$d.color]: globalRefs$
|
5237
|
-
[vars$d.backgroundColor]: globalRefs$
|
5277
|
+
[vars$d.color]: globalRefs$b.colors.primary.main,
|
5278
|
+
[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
|
5238
5279
|
[vars$d.resize]: 'vertical',
|
5239
5280
|
|
5240
|
-
[vars$d.borderRadius]: globalRefs$
|
5281
|
+
[vars$d.borderRadius]: globalRefs$b.radius.sm,
|
5241
5282
|
[vars$d.borderWidth]: '1px',
|
5242
5283
|
[vars$d.borderStyle]: 'solid',
|
5243
5284
|
[vars$d.borderColor]: 'transparent',
|
@@ -5246,11 +5287,11 @@ const textArea = {
|
|
5246
5287
|
|
5247
5288
|
|
5248
5289
|
_bordered: {
|
5249
|
-
[vars$d.borderColor]: globalRefs$
|
5290
|
+
[vars$d.borderColor]: globalRefs$b.colors.surface.main
|
5250
5291
|
},
|
5251
5292
|
|
5252
5293
|
_focused: {
|
5253
|
-
[vars$d.outlineColor]: globalRefs$
|
5294
|
+
[vars$d.outlineColor]: globalRefs$b.colors.surface.main
|
5254
5295
|
},
|
5255
5296
|
|
5256
5297
|
_fullWidth: {
|
@@ -5262,55 +5303,52 @@ const textArea = {
|
|
5262
5303
|
},
|
5263
5304
|
|
5264
5305
|
_invalid: {
|
5265
|
-
[vars$d.outlineColor]: globalRefs$
|
5306
|
+
[vars$d.outlineColor]: globalRefs$b.colors.error.main
|
5266
5307
|
}
|
5267
5308
|
};
|
5268
5309
|
|
5269
|
-
const globalRefs$
|
5310
|
+
const globalRefs$a = getThemeRefs(globals);
|
5270
5311
|
const vars$c = Checkbox.cssVarList;
|
5271
5312
|
|
5272
5313
|
const checkbox = {
|
5273
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5314
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
|
5274
5315
|
|
5275
5316
|
[vars$c.labelFontSize]: '12px',
|
5276
5317
|
[vars$c.labelFontWeight]: '400',
|
5277
|
-
[vars$c.labelTextColor]: globalRefs$
|
5318
|
+
[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
5278
5319
|
[vars$c.cursor]: 'pointer',
|
5279
5320
|
|
5280
5321
|
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5281
5322
|
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5282
5323
|
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5283
5324
|
|
5325
|
+
[vars$c.checkboxRadius]: globalRefs$a.radius.sm,
|
5326
|
+
|
5284
5327
|
size: {
|
5285
5328
|
xs: {
|
5286
5329
|
[vars$c.labelFontSize]: '12px',
|
5287
5330
|
[vars$c.labelLineHeight]: '1.1em',
|
5288
5331
|
[vars$c.checkmarkSize]: '18px',
|
5289
|
-
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5290
5332
|
},
|
5291
5333
|
sm: {
|
5292
5334
|
[vars$c.labelFontSize]: '14px',
|
5293
5335
|
[vars$c.labelLineHeight]: '1.2em',
|
5294
5336
|
[vars$c.checkmarkSize]: '22px',
|
5295
|
-
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5296
5337
|
},
|
5297
5338
|
md: {
|
5298
5339
|
[vars$c.labelFontSize]: '16px',
|
5299
5340
|
[vars$c.labelLineHeight]: '1.35em',
|
5300
5341
|
[vars$c.checkmarkSize]: '26px',
|
5301
|
-
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5302
5342
|
},
|
5303
5343
|
lg: {
|
5304
5344
|
[vars$c.labelFontSize]: '20px',
|
5305
5345
|
[vars$c.labelLineHeight]: '1.5em',
|
5306
5346
|
[vars$c.checkmarkSize]: '34px',
|
5307
|
-
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5308
5347
|
},
|
5309
5348
|
xl: {
|
5310
5349
|
[vars$c.labelFontSize]: '20px',
|
5311
5350
|
[vars$c.labelLineHeight]: '1.75em',
|
5312
5351
|
[vars$c.checkmarkSize]: '38px',
|
5313
|
-
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5314
5352
|
}
|
5315
5353
|
},
|
5316
5354
|
|
@@ -5319,33 +5357,98 @@ const checkbox = {
|
|
5319
5357
|
},
|
5320
5358
|
|
5321
5359
|
_checked: {
|
5322
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5323
|
-
[vars$c.checkmarkTextColor]: globalRefs$
|
5360
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
|
5361
|
+
[vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
|
5324
5362
|
},
|
5325
5363
|
|
5326
5364
|
_disabled: {
|
5327
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5365
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
|
5328
5366
|
},
|
5329
5367
|
|
5330
5368
|
_focusRing: {
|
5331
5369
|
[vars$c.checkboxOutlineWidth]: '2px',
|
5332
5370
|
[vars$c.checkboxOutlineOffset]: '1px',
|
5333
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5371
|
+
[vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
|
5334
5372
|
[vars$c.checkboxOutlineStyle]: 'solid'
|
5335
5373
|
},
|
5336
5374
|
|
5337
5375
|
_invalid: {
|
5338
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5339
|
-
[vars$c.labelTextColor]: globalRefs$
|
5376
|
+
[vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
|
5377
|
+
[vars$c.labelTextColor]: globalRefs$a.colors.error.main
|
5340
5378
|
},
|
5341
5379
|
|
5342
5380
|
};
|
5343
5381
|
|
5382
|
+
const knobMargin = '2px';
|
5383
|
+
const checkboxHeight = '1.25em';
|
5384
|
+
const trackBorderWidth = '2px';
|
5385
|
+
|
5386
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5344
5387
|
const vars$b = SwitchToggle.cssVarList;
|
5345
5388
|
|
5346
5389
|
const switchToggle = {
|
5347
|
-
|
5348
|
-
|
5390
|
+
size: {
|
5391
|
+
xs: { [vars$b.fontSize]: '8px' },
|
5392
|
+
sm: { [vars$b.fontSize]: '12px' },
|
5393
|
+
md: { [vars$b.fontSize]: '16px' },
|
5394
|
+
lg: { [vars$b.fontSize]: '20px' },
|
5395
|
+
xl: { [vars$b.fontSize]: '24px' }
|
5396
|
+
},
|
5397
|
+
|
5398
|
+
[vars$b.cursor]: 'pointer',
|
5399
|
+
|
5400
|
+
[vars$b.trackBorderStyle]: 'solid',
|
5401
|
+
[vars$b.trackBorderWidth]: trackBorderWidth,
|
5402
|
+
[vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
|
5403
|
+
|
5404
|
+
[vars$b.trackBackgroundColor]: 'none',
|
5405
|
+
[vars$b.trackRadius]: globalRefs$9.radius.md,
|
5406
|
+
[vars$b.trackWidth]: '2.5em',
|
5407
|
+
[vars$b.trackHeight]: checkboxHeight,
|
5408
|
+
|
5409
|
+
[vars$b.knobSize]: `calc(1em - ${knobMargin})`,
|
5410
|
+
[vars$b.knobRadius]: '50%',
|
5411
|
+
[vars$b.knobTopOffset]: '1px',
|
5412
|
+
[vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
|
5413
|
+
[vars$b.knobPosition]: knobMargin,
|
5414
|
+
[vars$b.knobTransition]: '0.3s',
|
5415
|
+
|
5416
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
5417
|
+
[vars$b.labelFontWeight]: '400',
|
5418
|
+
[vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
5419
|
+
[vars$b.labelMargin]: '0.25em',
|
5420
|
+
|
5421
|
+
_fullWidth: {
|
5422
|
+
[vars$b.width]: '100%',
|
5423
|
+
},
|
5424
|
+
|
5425
|
+
_checked: {
|
5426
|
+
[vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
|
5427
|
+
[vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
|
5428
|
+
[vars$b.knobColor]: globalRefs$9.colors.primary.main,
|
5429
|
+
[vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
|
5430
|
+
},
|
5431
|
+
|
5432
|
+
_disabled: {
|
5433
|
+
[vars$b.cursor]: 'not-allowed', // todo: fix cursor
|
5434
|
+
[vars$b.knobColor]: globalRefs$9.colors.surface.main,
|
5435
|
+
[vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
|
5436
|
+
[vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
|
5437
|
+
},
|
5438
|
+
|
5439
|
+
_focusRing: {
|
5440
|
+
[vars$b.switchOutlineWidth]: '2px',
|
5441
|
+
[vars$b.switchOutlineOffset]: '1px',
|
5442
|
+
[vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
|
5443
|
+
[vars$b.switchOutlineStyle]: 'solid'
|
5444
|
+
},
|
5445
|
+
|
5446
|
+
_invalid: {
|
5447
|
+
[vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
|
5448
|
+
[vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
|
5449
|
+
[vars$b.knobColor]: globalRefs$9.colors.error.main,
|
5450
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.error.main
|
5451
|
+
},
|
5349
5452
|
};
|
5350
5453
|
|
5351
5454
|
const globalRefs$8 = getThemeRefs(globals);
|
@@ -5389,6 +5492,7 @@ const container = {
|
|
5389
5492
|
[vars$a.flexDirection]: 'row',
|
5390
5493
|
[vars$a.alignItems]: helperRefs$1.verticalAlignment,
|
5391
5494
|
[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
|
5495
|
+
[vars$a.flexWrap]: 'wrap',
|
5392
5496
|
horizontalAlignment: {
|
5393
5497
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
5394
5498
|
}
|
@@ -5590,7 +5694,7 @@ const vars$6 = Divider.cssVarList;
|
|
5590
5694
|
|
5591
5695
|
const thickness = '2px';
|
5592
5696
|
const textPaddingSize = '10px';
|
5593
|
-
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$
|
5697
|
+
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
|
5594
5698
|
|
5595
5699
|
|
5596
5700
|
const divider = {
|