@descope/web-components-ui 1.0.97 → 1.0.99
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +245 -162
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/0.js +1 -0
- package/dist/umd/447.js +1 -1
- package/dist/umd/878.js +1 -1
- package/dist/umd/890.js +1 -0
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createBaseInputClass.js +1 -2
- package/src/components/descope-email-field/EmailField.js +4 -2
- package/src/components/descope-link/Link.js +1 -2
- package/src/components/descope-loader-linear/LoaderLinear.js +1 -1
- package/src/components/descope-passcode/Passcode.js +12 -4
- package/src/components/descope-password-field/PasswordField.js +21 -5
- package/src/components/descope-password-field/passwordDraggableMixin.js +33 -0
- package/src/components/descope-text-area/TextArea.js +38 -20
- package/src/components/descope-text-field/TextField.js +4 -2
- package/src/components/descope-text-field/textFieldMappings.js +7 -3
- package/src/mixins/createStyleMixin/index.js +4 -7
- package/src/mixins/draggableMixin.js +6 -4
- package/src/mixins/index.js +0 -1
- package/src/mixins/inputValidationMixin.js +5 -1
- package/src/mixins/proxyInputMixin.js +1 -1
- package/src/theme/components/checkbox.js +1 -1
- package/src/theme/components/container.js +10 -1
- package/src/theme/components/passcode.js +3 -3
- package/src/theme/components/passwordField.js +11 -1
- package/src/theme/components/textArea.js +9 -9
- package/src/theme/components/textField.js +6 -7
- package/src/theme/globals.js +5 -3
- package/dist/umd/387.js +0 -1
- package/dist/umd/988.js +0 -1
- package/src/mixins/readOnlyMixin.js +0 -18
package/dist/index.esm.js
CHANGED
@@ -308,6 +308,10 @@ const createStyleMixin =
|
|
308
308
|
this.#styleAttributes = Object.keys(mappings).map((key) =>
|
309
309
|
kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
|
310
310
|
);
|
311
|
+
|
312
|
+
this.#createMappingStyle();
|
313
|
+
this.#createComponentTheme();
|
314
|
+
this.#createOverridesStyle();
|
311
315
|
}
|
312
316
|
|
313
317
|
get componentTheme() {
|
@@ -378,15 +382,8 @@ const createStyleMixin =
|
|
378
382
|
init() {
|
379
383
|
super.init?.();
|
380
384
|
if (this.shadowRoot.isConnected) {
|
381
|
-
|
382
385
|
this.#addClassName(superclass.componentName);
|
383
386
|
|
384
|
-
// TODO: we should do everything we can on the constructor
|
385
|
-
// when dragging & dropping these styles are created over & over
|
386
|
-
this.#createMappingStyle();
|
387
|
-
this.#createComponentTheme();
|
388
|
-
this.#createOverridesStyle();
|
389
|
-
|
390
387
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
391
388
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
|
392
389
|
}
|
@@ -423,22 +420,24 @@ const draggableMixin = (superclass) =>
|
|
423
420
|
}
|
424
421
|
}
|
425
422
|
|
426
|
-
get
|
423
|
+
get isDraggable() {
|
427
424
|
return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
|
428
425
|
}
|
429
426
|
|
430
427
|
init() {
|
431
|
-
|
432
428
|
// because we are delegating the focus from the outer component,
|
433
429
|
// the D&D is not working well in the page editor
|
434
430
|
// in order to solve it we are making the inner component focusable on mouse down
|
435
431
|
// and removing it on complete
|
436
432
|
this.addEventListener('mousedown', (e) => {
|
437
|
-
if (this
|
433
|
+
if (this.isDraggable) {
|
434
|
+
const prevTabIndex = this.baseElement.getAttribute('tabindex');
|
438
435
|
this.baseElement.setAttribute('tabindex', '-1');
|
439
436
|
|
440
437
|
const onComplete = () => {
|
441
|
-
|
438
|
+
prevTabIndex ?
|
439
|
+
this.baseElement.setAttribute('tabindex', prevTabIndex) :
|
440
|
+
this.baseElement.removeAttribute('tabindex');
|
442
441
|
|
443
442
|
e.target.removeEventListener('mouseup', onComplete);
|
444
443
|
e.target.removeEventListener('dragend', onComplete);
|
@@ -701,7 +700,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
701
700
|
}
|
702
701
|
|
703
702
|
#setValidity() {
|
704
|
-
const validity = this.getValidity();
|
703
|
+
const validity = this.isReadOnly ? {} : this.getValidity();
|
705
704
|
this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
|
706
705
|
}
|
707
706
|
|
@@ -742,6 +741,10 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
742
741
|
return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
|
743
742
|
}
|
744
743
|
|
744
|
+
get isReadOnly() {
|
745
|
+
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
746
|
+
}
|
747
|
+
|
745
748
|
get pattern() {
|
746
749
|
return this.getAttribute('pattern')
|
747
750
|
}
|
@@ -879,7 +882,7 @@ const proxyInputMixin = (superclass) =>
|
|
879
882
|
this.#dispatchChange();
|
880
883
|
});
|
881
884
|
|
882
|
-
this.addEventListener('blur', () => {
|
885
|
+
this.#inputElement.addEventListener('blur', () => {
|
883
886
|
if (!this.checkValidity()) {
|
884
887
|
this.setAttribute('invalid', 'true');
|
885
888
|
this.#handleErrorMessage();
|
@@ -989,25 +992,6 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
|
|
989
992
|
}
|
990
993
|
};
|
991
994
|
|
992
|
-
const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
|
993
|
-
get isReadOnly() {
|
994
|
-
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
995
|
-
}
|
996
|
-
|
997
|
-
init() {
|
998
|
-
['focus', 'blur'].forEach(event => {
|
999
|
-
this.addEventListener(event, (e) => {
|
1000
|
-
if (this.isReadOnly) {
|
1001
|
-
e.stopImmediatePropagation();
|
1002
|
-
e.preventDefault();
|
1003
|
-
}
|
1004
|
-
}, true);
|
1005
|
-
});
|
1006
|
-
|
1007
|
-
super.init?.();
|
1008
|
-
}
|
1009
|
-
};
|
1010
|
-
|
1011
995
|
const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
1012
996
|
init() {
|
1013
997
|
this.#blockNativeEvents();
|
@@ -1110,7 +1094,7 @@ const iconStyles = `
|
|
1110
1094
|
|
1111
1095
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1112
1096
|
|
1113
|
-
const { host: host$
|
1097
|
+
const { host: host$a, label: label$7 } = {
|
1114
1098
|
host: { selector: () => ':host' },
|
1115
1099
|
label: { selector: '::part(label)' },
|
1116
1100
|
};
|
@@ -1119,7 +1103,7 @@ const Button = compose(
|
|
1119
1103
|
createStyleMixin({
|
1120
1104
|
mappings: {
|
1121
1105
|
color: {},
|
1122
|
-
textDecoration: label$
|
1106
|
+
textDecoration: label$7,
|
1123
1107
|
fontSize: {},
|
1124
1108
|
cursor: {},
|
1125
1109
|
backgroundColor: {},
|
@@ -1127,8 +1111,8 @@ const Button = compose(
|
|
1127
1111
|
borderColor: {},
|
1128
1112
|
borderStyle: {},
|
1129
1113
|
borderWidth: {},
|
1130
|
-
width: host$
|
1131
|
-
gap: label$
|
1114
|
+
width: host$a,
|
1115
|
+
gap: label$7,
|
1132
1116
|
verticalPadding: [
|
1133
1117
|
{ property: 'padding-top' },
|
1134
1118
|
{ property: 'padding-bottom' },
|
@@ -1190,7 +1174,6 @@ customElements.define(componentName$o, Button);
|
|
1190
1174
|
const createBaseInputClass = (...args) => compose(
|
1191
1175
|
inputValidationMixin,
|
1192
1176
|
changeMixin,
|
1193
|
-
readOnlyMixin,
|
1194
1177
|
normalizeBooleanAttributesMixin,
|
1195
1178
|
inputEventsDispatchingMixin
|
1196
1179
|
)(createBaseClass(...args));
|
@@ -1356,13 +1339,13 @@ descope-boolean-field-internal {
|
|
1356
1339
|
const componentName$m = getComponentName('checkbox');
|
1357
1340
|
|
1358
1341
|
const {
|
1359
|
-
host: host$
|
1342
|
+
host: host$9,
|
1360
1343
|
component: component$1,
|
1361
1344
|
checkboxElement,
|
1362
1345
|
checkboxSurface,
|
1363
1346
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1364
|
-
label: label$
|
1365
|
-
requiredIndicator: requiredIndicator$
|
1347
|
+
label: label$6,
|
1348
|
+
requiredIndicator: requiredIndicator$5
|
1366
1349
|
} = {
|
1367
1350
|
host: { selector: () => ':host' },
|
1368
1351
|
label: { selector: '::part(label)' },
|
@@ -1376,7 +1359,7 @@ const {
|
|
1376
1359
|
const Checkbox = compose(
|
1377
1360
|
createStyleMixin({
|
1378
1361
|
mappings: {
|
1379
|
-
width: host$
|
1362
|
+
width: host$9,
|
1380
1363
|
cursor: component$1,
|
1381
1364
|
|
1382
1365
|
// Checkbox
|
@@ -1384,7 +1367,7 @@ const Checkbox = compose(
|
|
1384
1367
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1385
1368
|
checkboxWidth: [
|
1386
1369
|
{ ...checkboxElement, property: 'width' },
|
1387
|
-
{ ...label$
|
1370
|
+
{ ...label$6, property: 'margin-left' }
|
1388
1371
|
],
|
1389
1372
|
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1390
1373
|
|
@@ -1399,24 +1382,24 @@ const Checkbox = compose(
|
|
1399
1382
|
|
1400
1383
|
// Label
|
1401
1384
|
labelFontSize: [
|
1402
|
-
{ ...label$
|
1385
|
+
{ ...label$6, property: 'font-size' },
|
1403
1386
|
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1404
1387
|
],
|
1405
1388
|
labelLineHeight: [
|
1406
|
-
{ ...label$
|
1389
|
+
{ ...label$6, property: 'line-height' },
|
1407
1390
|
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1408
1391
|
],
|
1409
1392
|
labelFontWeight: [
|
1410
|
-
{ ...label$
|
1393
|
+
{ ...label$6, property: 'font-weight' },
|
1411
1394
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
1412
1395
|
],
|
1413
1396
|
labelMargin: [
|
1414
|
-
{ ...label$
|
1397
|
+
{ ...label$6, property: 'left' },
|
1415
1398
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' }
|
1416
1399
|
],
|
1417
1400
|
labelTextColor: [
|
1418
|
-
{ ...label$
|
1419
|
-
{ ...requiredIndicator$
|
1401
|
+
{ ...label$6, property: 'color' },
|
1402
|
+
{ ...requiredIndicator$5, property: 'color' },
|
1420
1403
|
],
|
1421
1404
|
},
|
1422
1405
|
}),
|
@@ -1448,13 +1431,13 @@ customElements.define(componentName$m, Checkbox);
|
|
1448
1431
|
const componentName$l = getComponentName('switch-toggle');
|
1449
1432
|
|
1450
1433
|
const {
|
1451
|
-
host: host$
|
1434
|
+
host: host$8,
|
1452
1435
|
component,
|
1453
1436
|
checkboxElement: track,
|
1454
1437
|
checkboxSurface: knob,
|
1455
1438
|
checkboxHiddenLabel,
|
1456
|
-
label: label$
|
1457
|
-
requiredIndicator: requiredIndicator$
|
1439
|
+
label: label$5,
|
1440
|
+
requiredIndicator: requiredIndicator$4,
|
1458
1441
|
} = {
|
1459
1442
|
host: { selector: () => ':host' },
|
1460
1443
|
label: { selector: '::part(label)' },
|
@@ -1468,9 +1451,9 @@ const {
|
|
1468
1451
|
const SwitchToggle = compose(
|
1469
1452
|
createStyleMixin({
|
1470
1453
|
mappings: {
|
1471
|
-
width: host$
|
1454
|
+
width: host$8,
|
1472
1455
|
cursor: [component, checkboxHiddenLabel, track],
|
1473
|
-
fontSize: [component, label$
|
1456
|
+
fontSize: [component, label$5, checkboxHiddenLabel],
|
1474
1457
|
|
1475
1458
|
// Track
|
1476
1459
|
trackBorderWidth: { ...track, property: 'border-width' },
|
@@ -1507,20 +1490,20 @@ const SwitchToggle = compose(
|
|
1507
1490
|
|
1508
1491
|
// Label
|
1509
1492
|
labelMargin: [
|
1510
|
-
{ ...label$
|
1493
|
+
{ ...label$5, property: 'padding-left' },
|
1511
1494
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1512
1495
|
],
|
1513
1496
|
labelLineHeight: [
|
1514
|
-
{ ...label$
|
1497
|
+
{ ...label$5, property: 'line-height' },
|
1515
1498
|
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1516
1499
|
],
|
1517
1500
|
labelFontWeight: [
|
1518
|
-
{ ...label$
|
1501
|
+
{ ...label$5, property: 'font-weight' },
|
1519
1502
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1520
1503
|
],
|
1521
1504
|
labelTextColor: [
|
1522
|
-
{ ...label$
|
1523
|
-
{ ...requiredIndicator$
|
1505
|
+
{ ...label$5, property: 'color' },
|
1506
|
+
{ ...requiredIndicator$4, property: 'color' },
|
1524
1507
|
],
|
1525
1508
|
},
|
1526
1509
|
}),
|
@@ -1575,7 +1558,7 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
|
|
1575
1558
|
}
|
1576
1559
|
:host {
|
1577
1560
|
position: relative;
|
1578
|
-
display:
|
1561
|
+
display: flex;
|
1579
1562
|
}
|
1580
1563
|
div::after {
|
1581
1564
|
content: '';
|
@@ -1593,19 +1576,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
|
|
1593
1576
|
}
|
1594
1577
|
}
|
1595
1578
|
|
1596
|
-
const selectors$
|
1579
|
+
const selectors$3 = {
|
1597
1580
|
root: {},
|
1598
1581
|
after: { selector: '::after' },
|
1599
1582
|
host: { selector: () => ':host' }
|
1600
1583
|
};
|
1601
1584
|
|
1602
|
-
const { root: root$1, after: after$1, host: host$
|
1585
|
+
const { root: root$1, after: after$1, host: host$7 } = selectors$3;
|
1603
1586
|
|
1604
1587
|
const LoaderLinear = compose(
|
1605
1588
|
createStyleMixin({
|
1606
1589
|
mappings: {
|
1607
1590
|
display: root$1,
|
1608
|
-
width: host$
|
1591
|
+
width: host$7,
|
1609
1592
|
height: [root$1, after$1],
|
1610
1593
|
borderRadius: [root$1, after$1],
|
1611
1594
|
surfaceColor: [{ property: 'background-color' }],
|
@@ -1800,7 +1783,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
|
|
1800
1783
|
}
|
1801
1784
|
}
|
1802
1785
|
|
1803
|
-
const selectors$
|
1786
|
+
const selectors$2 = {
|
1804
1787
|
root: { selector: '' },
|
1805
1788
|
before: { selector: '::before' },
|
1806
1789
|
after: { selector: '::after' },
|
@@ -1808,7 +1791,7 @@ const selectors$3 = {
|
|
1808
1791
|
host: { selector: () => ':host' },
|
1809
1792
|
};
|
1810
1793
|
|
1811
|
-
const { root, before, after, text: text$2, host: host$
|
1794
|
+
const { root, before, after, text: text$2, host: host$6 } = selectors$2;
|
1812
1795
|
|
1813
1796
|
const Divider = compose(
|
1814
1797
|
createStyleMixin({
|
@@ -1819,8 +1802,8 @@ const Divider = compose(
|
|
1819
1802
|
alignSelf: root,
|
1820
1803
|
flexDirection: root,
|
1821
1804
|
textPadding: { ...text$2, property: 'padding' },
|
1822
|
-
width: host$
|
1823
|
-
padding: host$
|
1805
|
+
width: host$6,
|
1806
|
+
padding: host$6,
|
1824
1807
|
backgroundColor: [before, after],
|
1825
1808
|
opacity: [before, after],
|
1826
1809
|
textWidth: { ...text$2, property: 'width' },
|
@@ -1880,7 +1863,7 @@ customElements.define(componentName$f, Text);
|
|
1880
1863
|
|
1881
1864
|
customElements.define(componentName$g, Divider);
|
1882
1865
|
|
1883
|
-
const selectors$
|
1866
|
+
const selectors$1 = {
|
1884
1867
|
label: '::part(label)',
|
1885
1868
|
inputWrapper: '::part(input-field)',
|
1886
1869
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
@@ -1890,37 +1873,41 @@ const selectors$2 = {
|
|
1890
1873
|
};
|
1891
1874
|
|
1892
1875
|
var textFieldMappings = {
|
1893
|
-
backgroundColor: { selector: selectors$
|
1894
|
-
color: { selector: selectors$
|
1895
|
-
width: { selector: selectors$
|
1876
|
+
backgroundColor: { selector: selectors$1.inputWrapper },
|
1877
|
+
color: { selector: selectors$1.inputWrapper },
|
1878
|
+
width: { selector: selectors$1.host },
|
1896
1879
|
borderColor: [
|
1897
|
-
{ selector: selectors$
|
1898
|
-
{ selector: selectors$
|
1880
|
+
{ selector: selectors$1.inputWrapper },
|
1881
|
+
{ selector: selectors$1.readOnlyInput }
|
1899
1882
|
],
|
1900
1883
|
borderWidth: [
|
1901
|
-
{ selector: selectors$
|
1902
|
-
{ selector: selectors$
|
1884
|
+
{ selector: selectors$1.inputWrapper },
|
1885
|
+
{ selector: selectors$1.readOnlyInput }
|
1903
1886
|
],
|
1904
1887
|
borderStyle: [
|
1905
|
-
{ selector: selectors$
|
1906
|
-
{ selector: selectors$
|
1888
|
+
{ selector: selectors$1.inputWrapper },
|
1889
|
+
{ selector: selectors$1.readOnlyInput }
|
1907
1890
|
],
|
1908
|
-
borderRadius: { selector: selectors$
|
1909
|
-
boxShadow: { selector: selectors$
|
1891
|
+
borderRadius: { selector: selectors$1.inputWrapper },
|
1892
|
+
boxShadow: { selector: selectors$1.inputWrapper },
|
1910
1893
|
|
1911
1894
|
// we apply font-size also on the host so we can set its width with em
|
1912
|
-
fontSize: [{}, { selector: selectors$
|
1913
|
-
|
1914
|
-
height: { selector: selectors$
|
1915
|
-
padding: { selector: selectors$
|
1916
|
-
margin: { selector: selectors$
|
1917
|
-
caretColor: { selector: selectors$
|
1918
|
-
outlineColor: { selector: selectors$
|
1919
|
-
outlineStyle: { selector: selectors$
|
1920
|
-
outlineWidth:
|
1921
|
-
|
1922
|
-
|
1923
|
-
|
1895
|
+
fontSize: [{}, { selector: selectors$1.host }],
|
1896
|
+
|
1897
|
+
height: { selector: selectors$1.inputWrapper },
|
1898
|
+
padding: { selector: selectors$1.inputWrapper },
|
1899
|
+
margin: { selector: selectors$1.inputWrapper },
|
1900
|
+
caretColor: { selector: selectors$1.input },
|
1901
|
+
outlineColor: { selector: selectors$1.inputWrapper },
|
1902
|
+
outlineStyle: { selector: selectors$1.inputWrapper },
|
1903
|
+
outlineWidth: [
|
1904
|
+
{ selector: selectors$1.inputWrapper },
|
1905
|
+
// we need to make sure there is enough space for the outline
|
1906
|
+
{ property: 'padding' }
|
1907
|
+
],
|
1908
|
+
outlineOffset: { selector: selectors$1.inputWrapper },
|
1909
|
+
textAlign: { selector: selectors$1.input },
|
1910
|
+
placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
|
1924
1911
|
};
|
1925
1912
|
|
1926
1913
|
const componentName$e = getComponentName('email-field');
|
@@ -1952,8 +1939,11 @@ overrides$4 = `
|
|
1952
1939
|
}
|
1953
1940
|
vaadin-email-field {
|
1954
1941
|
margin: 0;
|
1955
|
-
padding: 0;
|
1956
1942
|
width: 100%;
|
1943
|
+
box-sizing: border-box;
|
1944
|
+
}
|
1945
|
+
vaadin-email-field::before {
|
1946
|
+
height: 0;
|
1957
1947
|
}
|
1958
1948
|
vaadin-email-field::part(input-field) {
|
1959
1949
|
overflow: hidden;
|
@@ -1978,7 +1968,6 @@ overrides$4 = `
|
|
1978
1968
|
cursor: text;
|
1979
1969
|
}
|
1980
1970
|
vaadin-email-field[required]::part(required-indicator)::after {
|
1981
|
-
font-size: "12px";
|
1982
1971
|
content: "*";
|
1983
1972
|
color: var(${EmailField.cssVarList.color});
|
1984
1973
|
}
|
@@ -1993,7 +1982,6 @@ const componentName$d = getComponentName('link');
|
|
1993
1982
|
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
1994
1983
|
constructor() {
|
1995
1984
|
super();
|
1996
|
-
document.createElement('template');
|
1997
1985
|
|
1998
1986
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
1999
1987
|
<style>
|
@@ -2026,19 +2014,19 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
|
|
2026
2014
|
}
|
2027
2015
|
}
|
2028
2016
|
|
2029
|
-
const selectors
|
2030
|
-
host: { selector: () => 'host' },
|
2017
|
+
const selectors = {
|
2018
|
+
host: { selector: () => ':host' },
|
2031
2019
|
anchor: {},
|
2032
2020
|
wrapper: {selector: () => ':host > div'},
|
2033
2021
|
text: { selector: () => Text.componentName }
|
2034
2022
|
};
|
2035
2023
|
|
2036
|
-
const { anchor, text: text$1, host: host$
|
2024
|
+
const { anchor, text: text$1, host: host$5, wrapper } = selectors;
|
2037
2025
|
|
2038
2026
|
const Link = compose(
|
2039
2027
|
createStyleMixin({
|
2040
2028
|
mappings: {
|
2041
|
-
width: host$
|
2029
|
+
width: host$5,
|
2042
2030
|
textAlign: wrapper,
|
2043
2031
|
color: [anchor, { ...text$1, property: Text.cssVarList.color }],
|
2044
2032
|
cursor: anchor,
|
@@ -2419,6 +2407,7 @@ overrides$2 = `
|
|
2419
2407
|
padding: 0;
|
2420
2408
|
width: 100%;
|
2421
2409
|
height: 100%;
|
2410
|
+
box-sizing: border-box;
|
2422
2411
|
}
|
2423
2412
|
|
2424
2413
|
vaadin-text-field::part(input-field) {
|
@@ -2454,10 +2443,11 @@ overrides$2 = `
|
|
2454
2443
|
content: "*";
|
2455
2444
|
color: var(${TextField.cssVarList.color});
|
2456
2445
|
}
|
2457
|
-
vaadin-text-field
|
2458
|
-
|
2446
|
+
vaadin-text-field::part(input-field)::after {
|
2447
|
+
opacity: 0 !important;
|
2459
2448
|
}
|
2460
2449
|
|
2450
|
+
|
2461
2451
|
vaadin-text-field::before {
|
2462
2452
|
height: unset;
|
2463
2453
|
}
|
@@ -2499,8 +2489,8 @@ const customMixin$2 = (superclass) =>
|
|
2499
2489
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2500
2490
|
textFieldMappings;
|
2501
2491
|
|
2502
|
-
const { digitField, label: label$
|
2503
|
-
|
2492
|
+
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
|
2493
|
+
focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
|
2504
2494
|
digitField: { selector: () => TextField.componentName },
|
2505
2495
|
label: { selector: '> label' },
|
2506
2496
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -2521,13 +2511,16 @@ const Passcode = compose(
|
|
2521
2511
|
// ideally, this would be part of the text field
|
2522
2512
|
{ ...internalWrapper, property: 'padding' }
|
2523
2513
|
],
|
2524
|
-
color: [restTextFieldMappings.color, label$
|
2514
|
+
color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
|
2525
2515
|
padding: { ...digitField, property: textVars$1.padding },
|
2526
2516
|
margin: { ...digitField, property: textVars$1.margin },
|
2527
2517
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
2528
2518
|
caretColor: { ...digitField, property: textVars$1.caretColor },
|
2529
2519
|
digitsGap: { ...internalWrapper, property: 'gap' },
|
2530
|
-
|
2520
|
+
focusedDigitFieldBorderColor: [
|
2521
|
+
{ ...focusedDigitField, property: textVars$1.borderColor },
|
2522
|
+
{ ...focusedDigitField, property: textVars$1.outlineColor }
|
2523
|
+
]
|
2531
2524
|
},
|
2532
2525
|
}),
|
2533
2526
|
draggableMixin,
|
@@ -2543,6 +2536,12 @@ const Passcode = compose(
|
|
2543
2536
|
--vaadin-field-default-width: auto;
|
2544
2537
|
display: inline-block;
|
2545
2538
|
}
|
2539
|
+
:host::after {
|
2540
|
+
background-color: transparent;
|
2541
|
+
}
|
2542
|
+
:host::part(input-field)::after {
|
2543
|
+
background-color: transparent;
|
2544
|
+
}
|
2546
2545
|
|
2547
2546
|
descope-passcode-internal {
|
2548
2547
|
-webkit-mask-image: none;
|
@@ -2589,7 +2588,6 @@ const Passcode = compose(
|
|
2589
2588
|
}
|
2590
2589
|
|
2591
2590
|
vaadin-text-field[required]::part(required-indicator)::after {
|
2592
|
-
font-size: "12px";
|
2593
2591
|
content: "*";
|
2594
2592
|
}
|
2595
2593
|
vaadin-text-field[readonly]::part(input-field)::after {
|
@@ -2607,17 +2605,49 @@ customElements.define(componentName$a, PasscodeInternal);
|
|
2607
2605
|
|
2608
2606
|
customElements.define(componentName$8, Passcode);
|
2609
2607
|
|
2608
|
+
const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
|
2609
|
+
get isReadOnly() {
|
2610
|
+
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
2611
|
+
}
|
2612
|
+
|
2613
|
+
init() {
|
2614
|
+
// there is an issue in Chrome that input field with type password cannot be D&D
|
2615
|
+
// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
|
2616
|
+
// and return the original type when done
|
2617
|
+
this.addEventListener('mousedown', (e) => {
|
2618
|
+
if (this.isDraggable & this.isReadOnly) {
|
2619
|
+
const inputEle = this.baseElement.querySelector('input');
|
2620
|
+
|
2621
|
+
const prevType = inputEle.getAttribute('type');
|
2622
|
+
inputEle.setAttribute('type', 'text');
|
2623
|
+
|
2624
|
+
const onComplete = () => {
|
2625
|
+
inputEle.setAttribute('type', prevType);
|
2626
|
+
|
2627
|
+
e.target.removeEventListener('mouseup', onComplete);
|
2628
|
+
e.target.removeEventListener('dragend', onComplete);
|
2629
|
+
};
|
2630
|
+
|
2631
|
+
e.target.addEventListener('mouseup', onComplete, { once: true });
|
2632
|
+
e.target.addEventListener('dragend', onComplete, { once: true });
|
2633
|
+
}
|
2634
|
+
});
|
2635
|
+
|
2636
|
+
super.init?.();
|
2637
|
+
}
|
2638
|
+
};
|
2639
|
+
|
2610
2640
|
const componentName$7 = getComponentName('password-field');
|
2611
2641
|
|
2612
2642
|
const {
|
2613
|
-
host: host$
|
2643
|
+
host: host$4,
|
2614
2644
|
inputWrapper: inputWrapper$1,
|
2615
2645
|
inputElement,
|
2616
2646
|
inputElementPlaceholder,
|
2617
2647
|
revealButton,
|
2618
2648
|
revealButtonIcon,
|
2619
|
-
label: label$
|
2620
|
-
requiredIndicator: requiredIndicator$
|
2649
|
+
label: label$3,
|
2650
|
+
requiredIndicator: requiredIndicator$2
|
2621
2651
|
} = {
|
2622
2652
|
host: () => ':host',
|
2623
2653
|
inputWrapper: { selector: '::part(input-field)' },
|
@@ -2632,56 +2662,71 @@ const {
|
|
2632
2662
|
const PasswordField = compose(
|
2633
2663
|
createStyleMixin({
|
2634
2664
|
mappings: {
|
2665
|
+
width: { selector: host$4 },
|
2635
2666
|
wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
|
2636
2667
|
wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
|
2637
2668
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2638
2669
|
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2639
2670
|
labelTextColor: [
|
2640
|
-
{ ...label$
|
2641
|
-
{ ...requiredIndicator$
|
2671
|
+
{ ...label$3, property: 'color' },
|
2672
|
+
{ ...requiredIndicator$2, property: 'color' }
|
2642
2673
|
],
|
2643
2674
|
inputTextColor: [
|
2644
2675
|
{ ...inputElement, property: 'color' },
|
2645
2676
|
{ ...revealButtonIcon, property: 'color' }
|
2646
2677
|
],
|
2647
2678
|
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2648
|
-
fontSize: [{}, host$
|
2679
|
+
fontSize: [{}, host$4],
|
2649
2680
|
height: inputWrapper$1,
|
2650
2681
|
padding: inputWrapper$1,
|
2651
2682
|
pointerCursor: [
|
2652
2683
|
{ ...revealButton, property: 'cursor' },
|
2653
|
-
{ ...label$
|
2654
|
-
{ ...requiredIndicator$
|
2684
|
+
{ ...label$3, property: 'cursor' },
|
2685
|
+
{ ...requiredIndicator$2, property: 'cursor' }
|
2686
|
+
],
|
2687
|
+
outlineColor: { ...inputWrapper$1 },
|
2688
|
+
outlineStyle: { ...inputWrapper$1 },
|
2689
|
+
outlineWidth: [
|
2690
|
+
{ ...inputWrapper$1 },
|
2691
|
+
// we need to make sure there is enough space for the outline
|
2692
|
+
{ property: 'padding' }
|
2655
2693
|
],
|
2694
|
+
backgroundColor: inputWrapper$1
|
2656
2695
|
}
|
2657
2696
|
}),
|
2658
2697
|
draggableMixin,
|
2659
2698
|
proxyInputMixin,
|
2660
|
-
componentNameValidationMixin
|
2699
|
+
componentNameValidationMixin,
|
2700
|
+
passwordDraggableMixin
|
2661
2701
|
)(
|
2662
2702
|
createProxy({
|
2663
2703
|
slots: ['suffix'],
|
2664
2704
|
wrappedEleName: 'vaadin-password-field',
|
2665
2705
|
style: `
|
2666
2706
|
:host {
|
2667
|
-
display: inline-
|
2707
|
+
display: inline-flex;
|
2668
2708
|
}
|
2669
2709
|
vaadin-password-field {
|
2670
2710
|
width: 100%;
|
2671
|
-
padding: 0;
|
2672
2711
|
}
|
2673
2712
|
vaadin-password-field > input {
|
2674
2713
|
min-height: 0;
|
2675
2714
|
}
|
2676
|
-
|
2677
|
-
|
2715
|
+
|
2716
|
+
vaadin-password-field[readonly] > input:placeholder-shown {
|
2717
|
+
opacity: 1;
|
2678
2718
|
}
|
2719
|
+
|
2679
2720
|
vaadin-password-field::part(input-field)::after {
|
2680
2721
|
opacity: 0;
|
2681
2722
|
}
|
2682
2723
|
vaadin-password-field::before {
|
2683
2724
|
height: initial;
|
2684
2725
|
}
|
2726
|
+
|
2727
|
+
vaadin-password-field[required]::part(required-indicator)::after {
|
2728
|
+
content: "*";
|
2729
|
+
}
|
2685
2730
|
`,
|
2686
2731
|
excludeAttrsSync: ['tabindex'],
|
2687
2732
|
componentName: componentName$7
|
@@ -2692,11 +2737,20 @@ customElements.define(componentName$7, PasswordField);
|
|
2692
2737
|
|
2693
2738
|
const componentName$6 = getComponentName('text-area');
|
2694
2739
|
|
2695
|
-
const
|
2696
|
-
|
2697
|
-
|
2698
|
-
|
2699
|
-
|
2740
|
+
const {
|
2741
|
+
host: host$3,
|
2742
|
+
placeholder: placeholder$1,
|
2743
|
+
input: input$1,
|
2744
|
+
textArea: textArea$1,
|
2745
|
+
label: label$2,
|
2746
|
+
requiredIndicator: requiredIndicator$1
|
2747
|
+
} = {
|
2748
|
+
host: { selector: () => ':host' },
|
2749
|
+
textArea: { selector: '> textarea' },
|
2750
|
+
label: { selector: '::part(label)' },
|
2751
|
+
input: { selector: '::part(input-field)' },
|
2752
|
+
placeholder: { selector: 'textarea:placeholder-shown' },
|
2753
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2700
2754
|
};
|
2701
2755
|
|
2702
2756
|
let overrides$1 = ``;
|
@@ -2704,19 +2758,24 @@ let overrides$1 = ``;
|
|
2704
2758
|
const TextArea = compose(
|
2705
2759
|
createStyleMixin({
|
2706
2760
|
mappings: {
|
2707
|
-
resize:
|
2708
|
-
color:
|
2761
|
+
resize: textArea$1,
|
2762
|
+
color: textArea$1,
|
2709
2763
|
cursor: {},
|
2710
|
-
|
2711
|
-
|
2712
|
-
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2718
|
-
|
2719
|
-
|
2764
|
+
labelColor: [
|
2765
|
+
{ ...label$2, property: 'color' },
|
2766
|
+
{ ...requiredIndicator$1, property: 'color' }
|
2767
|
+
],
|
2768
|
+
placeholderColor: { ...placeholder$1, property: 'color' },
|
2769
|
+
width: host$3,
|
2770
|
+
backgroundColor: input$1,
|
2771
|
+
borderWidth: input$1,
|
2772
|
+
borderStyle: input$1,
|
2773
|
+
borderColor: input$1,
|
2774
|
+
borderRadius: input$1,
|
2775
|
+
outlineWidth: input$1,
|
2776
|
+
outlineStyle: input$1,
|
2777
|
+
outlineColor: input$1,
|
2778
|
+
outlineOffset: [input$1, { property: 'padding' }],
|
2720
2779
|
}
|
2721
2780
|
}),
|
2722
2781
|
draggableMixin,
|
@@ -2740,6 +2799,7 @@ overrides$1 = `
|
|
2740
2799
|
vaadin-text-area {
|
2741
2800
|
margin: 0;
|
2742
2801
|
width: 100%;
|
2802
|
+
box-sizing: border-box;
|
2743
2803
|
}
|
2744
2804
|
vaadin-text-area > label,
|
2745
2805
|
vaadin-text-area::part(input-field) {
|
@@ -2748,10 +2808,13 @@ overrides$1 = `
|
|
2748
2808
|
vaadin-text-area[focused]::part(input-field) {
|
2749
2809
|
cursor: text;
|
2750
2810
|
}
|
2751
|
-
vaadin-text-area::part(required-indicator)::after {
|
2752
|
-
font-size: "12px";
|
2811
|
+
vaadin-text-area[required]::part(required-indicator)::after {
|
2753
2812
|
content: "*";
|
2754
|
-
}
|
2813
|
+
}
|
2814
|
+
vaadin-text-area[disabled] > textarea:placeholder-shown,
|
2815
|
+
vaadin-text-area[readonly] > textarea:placeholder-shown {
|
2816
|
+
opacity: 1;
|
2817
|
+
}
|
2755
2818
|
`;
|
2756
2819
|
|
2757
2820
|
customElements.define(componentName$6, TextArea);
|
@@ -5125,12 +5188,12 @@ const typography = {
|
|
5125
5188
|
},
|
5126
5189
|
body1: {
|
5127
5190
|
font: fontsRef.font1.family,
|
5128
|
-
weight: '
|
5191
|
+
weight: '400',
|
5129
5192
|
size: '16px'
|
5130
5193
|
},
|
5131
5194
|
body2: {
|
5132
5195
|
font: fontsRef.font1.family,
|
5133
|
-
weight: '
|
5196
|
+
weight: '400',
|
5134
5197
|
size: '14px'
|
5135
5198
|
}
|
5136
5199
|
};
|
@@ -5156,7 +5219,9 @@ const radius = {
|
|
5156
5219
|
sm: '10px',
|
5157
5220
|
md: '15px',
|
5158
5221
|
lg: '20px',
|
5159
|
-
xl: '25px'
|
5222
|
+
xl: '25px',
|
5223
|
+
'2xl': '30px',
|
5224
|
+
'3xl': '35px'
|
5160
5225
|
};
|
5161
5226
|
|
5162
5227
|
const shadow = {
|
@@ -5274,31 +5339,32 @@ const globalRefs$e = getThemeRefs(globals);
|
|
5274
5339
|
const vars$f = TextField.cssVarList;
|
5275
5340
|
|
5276
5341
|
const textField = (vars) => ({
|
5342
|
+
[vars.padding]: '0 1em',
|
5343
|
+
|
5344
|
+
[vars.outlineWidth]: '2px',
|
5345
|
+
[vars.outlineStyle]: 'solid',
|
5346
|
+
[vars.outlineColor]: 'transparent',
|
5347
|
+
|
5277
5348
|
size: {
|
5278
5349
|
xs: {
|
5279
5350
|
[vars.height]: '14px',
|
5280
5351
|
[vars.fontSize]: '8px',
|
5281
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5282
5352
|
},
|
5283
5353
|
sm: {
|
5284
5354
|
[vars.height]: '20px',
|
5285
5355
|
[vars.fontSize]: '10px',
|
5286
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5287
5356
|
},
|
5288
5357
|
md: {
|
5289
5358
|
[vars.height]: '30px',
|
5290
5359
|
[vars.fontSize]: '14px',
|
5291
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.md}`
|
5292
5360
|
},
|
5293
5361
|
lg: {
|
5294
5362
|
[vars.height]: '40px',
|
5295
5363
|
[vars.fontSize]: '20px',
|
5296
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5297
5364
|
},
|
5298
5365
|
xl: {
|
5299
5366
|
[vars.height]: '50px',
|
5300
5367
|
[vars.fontSize]: '25px',
|
5301
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5302
5368
|
}
|
5303
5369
|
},
|
5304
5370
|
|
@@ -5323,8 +5389,6 @@ const textField = (vars) => ({
|
|
5323
5389
|
},
|
5324
5390
|
|
5325
5391
|
_focused: {
|
5326
|
-
[vars.outlineWidth]: '2px',
|
5327
|
-
[vars.outlineStyle]: 'solid',
|
5328
5392
|
[vars.outlineColor]: globalRefs$e.colors.surface.main
|
5329
5393
|
},
|
5330
5394
|
|
@@ -5351,6 +5415,11 @@ const passwordField = {
|
|
5351
5415
|
[vars$e.wrapperBorderWidth]: '1px',
|
5352
5416
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5353
5417
|
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
|
5418
|
+
[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
|
5419
|
+
|
5420
|
+
[vars$e.outlineWidth]: '2px',
|
5421
|
+
[vars$e.outlineStyle]: 'solid',
|
5422
|
+
[vars$e.outlineColor]: 'transparent',
|
5354
5423
|
|
5355
5424
|
[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
|
5356
5425
|
[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
|
@@ -5392,11 +5461,16 @@ const passwordField = {
|
|
5392
5461
|
[vars$e.width]: '100%'
|
5393
5462
|
},
|
5394
5463
|
|
5464
|
+
_focused: {
|
5465
|
+
[vars$e.outlineColor]: globalRefs$d.colors.surface.main
|
5466
|
+
},
|
5467
|
+
|
5395
5468
|
_invalid: {
|
5396
5469
|
[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
|
5397
5470
|
[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
|
5398
5471
|
[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
|
5399
|
-
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
|
5472
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main,
|
5473
|
+
[vars$e.outlineColor]: globalRefs$d.colors.error.main,
|
5400
5474
|
},
|
5401
5475
|
};
|
5402
5476
|
|
@@ -5412,36 +5486,36 @@ const globalRefs$c = getThemeRefs(globals);
|
|
5412
5486
|
const vars$d = TextArea.cssVarList;
|
5413
5487
|
|
5414
5488
|
const textArea = {
|
5415
|
-
[vars$d.
|
5489
|
+
[vars$d.labelColor]: globalRefs$c.colors.surface.contrast,
|
5490
|
+
[vars$d.placeholderColor]: globalRefs$c.colors.surface.main,
|
5491
|
+
[vars$d.color]: globalRefs$c.colors.surface.contrast,
|
5492
|
+
|
5416
5493
|
[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
|
5417
5494
|
[vars$d.resize]: 'vertical',
|
5418
5495
|
|
5419
5496
|
[vars$d.borderRadius]: globalRefs$c.radius.sm,
|
5420
5497
|
[vars$d.borderWidth]: '1px',
|
5421
5498
|
[vars$d.borderStyle]: 'solid',
|
5422
|
-
[vars$d.borderColor]:
|
5499
|
+
[vars$d.borderColor]: globalRefs$c.colors.surface.main,
|
5423
5500
|
[vars$d.outlineWidth]: '2px',
|
5424
5501
|
[vars$d.outlineStyle]: 'solid',
|
5425
5502
|
[vars$d.outlineColor]: 'transparent',
|
5503
|
+
[vars$d.outlineOffset]: '0px',
|
5426
5504
|
|
5427
|
-
|
5428
|
-
|
5429
|
-
[vars$d.borderColor]: globalRefs$c.colors.surface.main
|
5505
|
+
_fullWidth: {
|
5506
|
+
[vars$d.width]: '100%'
|
5430
5507
|
},
|
5431
5508
|
|
5432
5509
|
_focused: {
|
5433
5510
|
[vars$d.outlineColor]: globalRefs$c.colors.surface.main
|
5434
5511
|
},
|
5435
5512
|
|
5436
|
-
_fullWidth: {
|
5437
|
-
[vars$d.width]: '100%'
|
5438
|
-
},
|
5439
|
-
|
5440
5513
|
_disabled: {
|
5441
5514
|
[vars$d.cursor]: 'not-allowed'
|
5442
5515
|
},
|
5443
5516
|
|
5444
5517
|
_invalid: {
|
5518
|
+
[vars$d.labelColor]: globalRefs$c.colors.error.main,
|
5445
5519
|
[vars$d.outlineColor]: globalRefs$c.colors.error.main
|
5446
5520
|
}
|
5447
5521
|
};
|
@@ -5461,7 +5535,7 @@ const checkbox = {
|
|
5461
5535
|
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5462
5536
|
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5463
5537
|
|
5464
|
-
[vars$c.checkboxRadius]: globalRefs$b.radius.
|
5538
|
+
[vars$c.checkboxRadius]: globalRefs$b.radius.xs,
|
5465
5539
|
|
5466
5540
|
size: {
|
5467
5541
|
xs: {
|
@@ -5676,7 +5750,7 @@ const container = {
|
|
5676
5750
|
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
5677
5751
|
},
|
5678
5752
|
'2xl': {
|
5679
|
-
[helperVars.shadowColor]: '#00000050',
|
5753
|
+
[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
5680
5754
|
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
5681
5755
|
},
|
5682
5756
|
},
|
@@ -5691,6 +5765,15 @@ const container = {
|
|
5691
5765
|
lg: {
|
5692
5766
|
[vars$a.borderRadius]: globalRefs$9.radius.lg
|
5693
5767
|
},
|
5768
|
+
xl: {
|
5769
|
+
[vars$a.borderRadius]: globalRefs$9.radius.xl
|
5770
|
+
},
|
5771
|
+
'2xl': {
|
5772
|
+
[vars$a.borderRadius]: globalRefs$9.radius['2xl']
|
5773
|
+
},
|
5774
|
+
'3xl': {
|
5775
|
+
[vars$a.borderRadius]: globalRefs$9.radius['3xl']
|
5776
|
+
},
|
5694
5777
|
}
|
5695
5778
|
};
|
5696
5779
|
|
@@ -5869,12 +5952,12 @@ const globalRefs$5 = getThemeRefs(globals);
|
|
5869
5952
|
const passcode = {
|
5870
5953
|
[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
|
5871
5954
|
[vars$5.outlineWidth]: '2px',
|
5872
|
-
[vars$5.outlineColor]:
|
5955
|
+
[vars$5.outlineColor]: 'transparent',
|
5873
5956
|
[vars$5.padding]: '0',
|
5874
5957
|
[vars$5.textAlign]: 'center',
|
5875
5958
|
[vars$5.borderColor]: 'transparent',
|
5876
5959
|
[vars$5.digitsGap]: '4px',
|
5877
|
-
[vars$5.
|
5960
|
+
[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
|
5878
5961
|
|
5879
5962
|
_hideCursor: {
|
5880
5963
|
[vars$5.caretColor]: 'transparent',
|
@@ -5895,7 +5978,7 @@ const passcode = {
|
|
5895
5978
|
_invalid: {
|
5896
5979
|
[vars$5.borderColor]: globalRefs$5.colors.error.main,
|
5897
5980
|
[vars$5.color]: globalRefs$5.colors.error.main,
|
5898
|
-
[vars$5.
|
5981
|
+
[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.error.light,
|
5899
5982
|
},
|
5900
5983
|
};
|
5901
5984
|
|