@descope/web-components-ui 1.0.83 → 1.0.84
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +415 -311
- 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/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/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
@@ -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 = {
|