@descope/web-components-ui 1.0.239 → 1.0.241
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1455 -897
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1437 -879
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1438.js +374 -0
- package/dist/umd/1438.js.LICENSE.txt +5 -0
- package/dist/umd/1940.js +303 -0
- package/dist/umd/{849.js → 4595.js} +5 -5
- package/dist/umd/63.js +2 -0
- package/dist/umd/63.js.LICENSE.txt +5 -0
- package/dist/umd/6687.js +9 -0
- package/dist/umd/6687.js.LICENSE.txt +5 -0
- package/dist/umd/7583.js +113 -0
- package/dist/umd/{5977.js.LICENSE.txt → 7583.js.LICENSE.txt} +0 -6
- package/dist/umd/8866.js +183 -0
- package/dist/umd/8866.js.LICENSE.txt +11 -0
- package/dist/umd/9558.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +515 -0
- package/src/components/descope-multi-select-combo-box/index.js +6 -0
- package/src/mixins/inputValidationMixin.js +13 -6
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/inputWrapper.js +4 -4
- package/src/theme/components/multiSelectComboBox.js +57 -0
- package/dist/umd/1932.js +0 -310
- package/dist/umd/5977.js +0 -294
- /package/dist/umd/{1932.js.LICENSE.txt → 1940.js.LICENSE.txt} +0 -0
- /package/dist/umd/{849.js.LICENSE.txt → 4595.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -759,6 +759,14 @@ const inputValidationMixin = (superclass) =>
|
|
759
759
|
return `Maximum length is ${this.getAttribute('maxlength')}. `;
|
760
760
|
}
|
761
761
|
|
762
|
+
get defaultErrorMsgRangeUnderflow() {
|
763
|
+
return `At least ${this.minItemsSelection} items are required.`;
|
764
|
+
}
|
765
|
+
|
766
|
+
get defaultErrorMsgRangeOverflow() {
|
767
|
+
return `At most ${this.maxItemsSelection} items are allowed.`;
|
768
|
+
}
|
769
|
+
|
762
770
|
getErrorMessage(flags) {
|
763
771
|
const {
|
764
772
|
valueMissing,
|
@@ -777,12 +785,7 @@ const inputValidationMixin = (superclass) =>
|
|
777
785
|
return (
|
778
786
|
this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
|
779
787
|
);
|
780
|
-
case patternMismatch ||
|
781
|
-
typeMismatch ||
|
782
|
-
stepMismatch ||
|
783
|
-
rangeOverflow ||
|
784
|
-
rangeUnderflow ||
|
785
|
-
badInput:
|
788
|
+
case patternMismatch || typeMismatch || stepMismatch || badInput:
|
786
789
|
return (
|
787
790
|
this.getAttribute(errorAttributes.patternMismatch) ||
|
788
791
|
this.defaultErrorMsgPatternMismatch
|
@@ -791,6 +794,10 @@ const inputValidationMixin = (superclass) =>
|
|
791
794
|
return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
|
792
795
|
case tooLong:
|
793
796
|
return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
|
797
|
+
case rangeUnderflow:
|
798
|
+
return this.defaultErrorMsgRangeUnderflow;
|
799
|
+
case rangeOverflow:
|
800
|
+
return this.defaultErrorMsgRangeOverflow;
|
794
801
|
case customError:
|
795
802
|
return this.validationMessage;
|
796
803
|
default:
|
@@ -1239,7 +1246,7 @@ const clickableMixin = (superclass) =>
|
|
1239
1246
|
}
|
1240
1247
|
};
|
1241
1248
|
|
1242
|
-
const componentName$
|
1249
|
+
const componentName$E = getComponentName('button');
|
1243
1250
|
|
1244
1251
|
const resetStyles = `
|
1245
1252
|
:host {
|
@@ -1277,7 +1284,7 @@ const iconStyles = `
|
|
1277
1284
|
|
1278
1285
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1279
1286
|
|
1280
|
-
const { host: host$
|
1287
|
+
const { host: host$h, label: label$a } = {
|
1281
1288
|
host: { selector: () => ':host' },
|
1282
1289
|
label: { selector: '::part(label)' },
|
1283
1290
|
};
|
@@ -1289,7 +1296,7 @@ const ButtonClass = compose(
|
|
1289
1296
|
mappings: {
|
1290
1297
|
hostWidth: { property: 'width' },
|
1291
1298
|
hostHeight: { property: 'height' },
|
1292
|
-
hostDirection: { ...host$
|
1299
|
+
hostDirection: { ...host$h, property: 'direction' },
|
1293
1300
|
fontSize: {},
|
1294
1301
|
fontFamily: {},
|
1295
1302
|
|
@@ -1309,8 +1316,8 @@ const ButtonClass = compose(
|
|
1309
1316
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
1310
1317
|
|
1311
1318
|
labelTextColor: { property: 'color' },
|
1312
|
-
labelTextDecoration: { ...label$
|
1313
|
-
labelSpacing: { ...label$
|
1319
|
+
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
1320
|
+
labelSpacing: { ...label$a, property: 'gap' },
|
1314
1321
|
},
|
1315
1322
|
}),
|
1316
1323
|
clickableMixin,
|
@@ -1340,7 +1347,7 @@ const ButtonClass = compose(
|
|
1340
1347
|
}
|
1341
1348
|
`,
|
1342
1349
|
excludeAttrsSync: ['tabindex'],
|
1343
|
-
componentName: componentName$
|
1350
|
+
componentName: componentName$E,
|
1344
1351
|
})
|
1345
1352
|
);
|
1346
1353
|
|
@@ -1377,7 +1384,7 @@ loadingIndicatorStyles = `
|
|
1377
1384
|
}
|
1378
1385
|
`;
|
1379
1386
|
|
1380
|
-
customElements.define(componentName$
|
1387
|
+
customElements.define(componentName$E, ButtonClass);
|
1381
1388
|
|
1382
1389
|
const createBaseInputClass = (...args) =>
|
1383
1390
|
compose(
|
@@ -1387,11 +1394,11 @@ const createBaseInputClass = (...args) =>
|
|
1387
1394
|
inputEventsDispatchingMixin
|
1388
1395
|
)(createBaseClass(...args));
|
1389
1396
|
|
1390
|
-
const componentName$
|
1397
|
+
const componentName$D = getComponentName('boolean-field-internal');
|
1391
1398
|
|
1392
1399
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1393
1400
|
|
1394
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1401
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
|
1395
1402
|
|
1396
1403
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1397
1404
|
static get observedAttributes() {
|
@@ -1467,14 +1474,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1467
1474
|
|
1468
1475
|
const template = document.createElement('template');
|
1469
1476
|
template.innerHTML = `
|
1470
|
-
<${componentName$
|
1477
|
+
<${componentName$D}
|
1471
1478
|
tabindex="-1"
|
1472
1479
|
slot="input"
|
1473
|
-
></${componentName$
|
1480
|
+
></${componentName$D}>
|
1474
1481
|
`;
|
1475
1482
|
|
1476
1483
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1477
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1484
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$D);
|
1478
1485
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1479
1486
|
|
1480
1487
|
forwardAttrs(this, this.inputElement, {
|
@@ -1673,17 +1680,17 @@ descope-boolean-field-internal {
|
|
1673
1680
|
}
|
1674
1681
|
`;
|
1675
1682
|
|
1676
|
-
const componentName$
|
1683
|
+
const componentName$C = getComponentName('checkbox');
|
1677
1684
|
|
1678
1685
|
const {
|
1679
|
-
host: host$
|
1686
|
+
host: host$g,
|
1680
1687
|
component: component$1,
|
1681
1688
|
checkboxElement,
|
1682
1689
|
checkboxSurface,
|
1683
1690
|
checkboxLabel: checkboxLabel$1,
|
1684
|
-
requiredIndicator: requiredIndicator$
|
1685
|
-
helperText: helperText$
|
1686
|
-
errorMessage: errorMessage$
|
1691
|
+
requiredIndicator: requiredIndicator$b,
|
1692
|
+
helperText: helperText$9,
|
1693
|
+
errorMessage: errorMessage$b,
|
1687
1694
|
} = {
|
1688
1695
|
host: { selector: () => ':host' },
|
1689
1696
|
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
@@ -1698,19 +1705,19 @@ const {
|
|
1698
1705
|
const CheckboxClass = compose(
|
1699
1706
|
createStyleMixin({
|
1700
1707
|
mappings: {
|
1701
|
-
hostWidth: { ...host$
|
1702
|
-
hostDirection: { ...host$
|
1708
|
+
hostWidth: { ...host$g, property: 'width' },
|
1709
|
+
hostDirection: { ...host$g, property: 'direction' },
|
1703
1710
|
|
1704
|
-
fontSize: [host$
|
1705
|
-
fontFamily: [checkboxLabel$1, helperText$
|
1711
|
+
fontSize: [host$g, checkboxElement, checkboxLabel$1],
|
1712
|
+
fontFamily: [checkboxLabel$1, helperText$9, errorMessage$b],
|
1706
1713
|
|
1707
1714
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
1708
1715
|
labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
|
1709
1716
|
labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
|
1710
1717
|
labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
|
1711
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1718
|
+
labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
|
1712
1719
|
|
1713
|
-
errorMessageTextColor: { ...errorMessage$
|
1720
|
+
errorMessageTextColor: { ...errorMessage$b, property: 'color' },
|
1714
1721
|
|
1715
1722
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
1716
1723
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
@@ -1779,25 +1786,25 @@ const CheckboxClass = compose(
|
|
1779
1786
|
}
|
1780
1787
|
`,
|
1781
1788
|
excludeAttrsSync: ['label', 'tabindex'],
|
1782
|
-
componentName: componentName$
|
1789
|
+
componentName: componentName$C,
|
1783
1790
|
})
|
1784
1791
|
);
|
1785
1792
|
|
1786
|
-
customElements.define(componentName$
|
1793
|
+
customElements.define(componentName$D, BooleanInputInternal);
|
1787
1794
|
|
1788
|
-
customElements.define(componentName$
|
1795
|
+
customElements.define(componentName$C, CheckboxClass);
|
1789
1796
|
|
1790
|
-
const componentName$
|
1797
|
+
const componentName$B = getComponentName('switch-toggle');
|
1791
1798
|
|
1792
1799
|
const {
|
1793
|
-
host: host$
|
1800
|
+
host: host$f,
|
1794
1801
|
component,
|
1795
1802
|
checkboxElement: track,
|
1796
1803
|
checkboxSurface: knob,
|
1797
1804
|
checkboxLabel,
|
1798
|
-
requiredIndicator: requiredIndicator$
|
1799
|
-
helperText: helperText$
|
1800
|
-
errorMessage: errorMessage$
|
1805
|
+
requiredIndicator: requiredIndicator$a,
|
1806
|
+
helperText: helperText$8,
|
1807
|
+
errorMessage: errorMessage$a,
|
1801
1808
|
} = {
|
1802
1809
|
host: { selector: () => ':host' },
|
1803
1810
|
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
@@ -1812,19 +1819,19 @@ const {
|
|
1812
1819
|
const SwitchToggleClass = compose(
|
1813
1820
|
createStyleMixin({
|
1814
1821
|
mappings: {
|
1815
|
-
hostWidth: { ...host$
|
1816
|
-
hostDirection: { ...host$
|
1822
|
+
hostWidth: { ...host$f, property: 'width' },
|
1823
|
+
hostDirection: { ...host$f, property: 'direction' },
|
1817
1824
|
|
1818
1825
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1819
|
-
fontFamily: [checkboxLabel, helperText$
|
1826
|
+
fontFamily: [checkboxLabel, helperText$8, errorMessage$a],
|
1820
1827
|
|
1821
1828
|
labelTextColor: { ...checkboxLabel, property: 'color' },
|
1822
1829
|
labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
|
1823
1830
|
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
1824
1831
|
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
1825
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1832
|
+
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
1826
1833
|
|
1827
|
-
errorMessageTextColor: { ...errorMessage$
|
1834
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
1828
1835
|
|
1829
1836
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1830
1837
|
trackBorderStyle: { ...track, property: 'border-style' },
|
@@ -1919,17 +1926,17 @@ const SwitchToggleClass = compose(
|
|
1919
1926
|
}
|
1920
1927
|
`,
|
1921
1928
|
excludeAttrsSync: ['label', 'tabindex'],
|
1922
|
-
componentName: componentName$
|
1929
|
+
componentName: componentName$B,
|
1923
1930
|
})
|
1924
1931
|
);
|
1925
1932
|
|
1926
|
-
customElements.define(componentName$
|
1933
|
+
customElements.define(componentName$B, SwitchToggleClass);
|
1927
1934
|
|
1928
|
-
const componentName$
|
1935
|
+
const componentName$A = getComponentName('loader-linear');
|
1929
1936
|
|
1930
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1937
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
|
1931
1938
|
static get componentName() {
|
1932
|
-
return componentName$
|
1939
|
+
return componentName$A;
|
1933
1940
|
}
|
1934
1941
|
|
1935
1942
|
constructor() {
|
@@ -1965,18 +1972,18 @@ const selectors$2 = {
|
|
1965
1972
|
host: { selector: () => ':host' },
|
1966
1973
|
};
|
1967
1974
|
|
1968
|
-
const { after: after$1, host: host$
|
1975
|
+
const { after: after$1, host: host$e } = selectors$2;
|
1969
1976
|
|
1970
1977
|
const LoaderLinearClass = compose(
|
1971
1978
|
createStyleMixin({
|
1972
1979
|
mappings: {
|
1973
1980
|
hostDisplay: {},
|
1974
|
-
hostWidth: { ...host$
|
1981
|
+
hostWidth: { ...host$e, property: 'width' },
|
1975
1982
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
1976
1983
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
1977
1984
|
verticalPadding: [
|
1978
|
-
{ ...host$
|
1979
|
-
{ ...host$
|
1985
|
+
{ ...host$e, property: 'padding-top' },
|
1986
|
+
{ ...host$e, property: 'padding-bottom' },
|
1980
1987
|
],
|
1981
1988
|
barBackgroundColor: { property: 'background-color' },
|
1982
1989
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -1990,11 +1997,11 @@ const LoaderLinearClass = compose(
|
|
1990
1997
|
componentNameValidationMixin
|
1991
1998
|
)(RawLoaderLinear);
|
1992
1999
|
|
1993
|
-
customElements.define(componentName$
|
2000
|
+
customElements.define(componentName$A, LoaderLinearClass);
|
1994
2001
|
|
1995
|
-
const componentName$
|
2002
|
+
const componentName$z = getComponentName('loader-radial');
|
1996
2003
|
|
1997
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2004
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
|
1998
2005
|
constructor() {
|
1999
2006
|
super();
|
2000
2007
|
|
@@ -2038,11 +2045,11 @@ const LoaderRadialClass = compose(
|
|
2038
2045
|
componentNameValidationMixin
|
2039
2046
|
)(RawLoaderRadial);
|
2040
2047
|
|
2041
|
-
customElements.define(componentName$
|
2048
|
+
customElements.define(componentName$z, LoaderRadialClass);
|
2042
2049
|
|
2043
|
-
const componentName$
|
2050
|
+
const componentName$y = getComponentName('container');
|
2044
2051
|
|
2045
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2052
|
+
class RawContainer extends createBaseClass({ componentName: componentName$y, baseSelector: 'slot' }) {
|
2046
2053
|
constructor() {
|
2047
2054
|
super();
|
2048
2055
|
|
@@ -2094,13 +2101,13 @@ const ContainerClass = compose(
|
|
2094
2101
|
componentNameValidationMixin
|
2095
2102
|
)(RawContainer);
|
2096
2103
|
|
2097
|
-
customElements.define(componentName$
|
2104
|
+
customElements.define(componentName$y, ContainerClass);
|
2098
2105
|
|
2099
2106
|
// eslint-disable-next-line max-classes-per-file
|
2100
2107
|
|
2101
|
-
const componentName$
|
2108
|
+
const componentName$x = getComponentName('text');
|
2102
2109
|
|
2103
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2110
|
+
class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
|
2104
2111
|
constructor() {
|
2105
2112
|
super();
|
2106
2113
|
|
@@ -2160,8 +2167,8 @@ const TextClass = compose(
|
|
2160
2167
|
customTextMixin
|
2161
2168
|
)(RawText);
|
2162
2169
|
|
2163
|
-
const componentName$
|
2164
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2170
|
+
const componentName$w = getComponentName('divider');
|
2171
|
+
class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
|
2165
2172
|
constructor() {
|
2166
2173
|
super();
|
2167
2174
|
|
@@ -2207,7 +2214,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$v, baseS
|
|
2207
2214
|
}
|
2208
2215
|
|
2209
2216
|
const textVars$3 = TextClass.cssVarList;
|
2210
|
-
const { host: host$
|
2217
|
+
const { host: host$d, before, after, text: text$3 } = {
|
2211
2218
|
host: { selector: () => ':host' },
|
2212
2219
|
before: { selector: '::before' },
|
2213
2220
|
after: { selector: '::after' },
|
@@ -2217,8 +2224,8 @@ const { host: host$c, before, after, text: text$3 } = {
|
|
2217
2224
|
const DividerClass = compose(
|
2218
2225
|
createStyleMixin({
|
2219
2226
|
mappings: {
|
2220
|
-
hostWidth: { ...host$
|
2221
|
-
hostPadding: { ...host$
|
2227
|
+
hostWidth: { ...host$d, property: 'width' },
|
2228
|
+
hostPadding: { ...host$d, property: 'padding' },
|
2222
2229
|
hostDirection: { ...text$3, property: 'direction' },
|
2223
2230
|
|
2224
2231
|
minHeight: {},
|
@@ -2260,11 +2267,11 @@ const DividerClass = compose(
|
|
2260
2267
|
componentNameValidationMixin
|
2261
2268
|
)(RawDivider);
|
2262
2269
|
|
2263
|
-
customElements.define(componentName$
|
2270
|
+
customElements.define(componentName$x, TextClass);
|
2264
2271
|
|
2265
|
-
customElements.define(componentName$
|
2272
|
+
customElements.define(componentName$w, DividerClass);
|
2266
2273
|
|
2267
|
-
const { host: host$
|
2274
|
+
const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
|
2268
2275
|
{
|
2269
2276
|
host: { selector: () => ':host' },
|
2270
2277
|
label: { selector: '::part(label)' },
|
@@ -2278,48 +2285,48 @@ const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndica
|
|
2278
2285
|
|
2279
2286
|
var textFieldMappings = {
|
2280
2287
|
// we apply font-size also on the host so we can set its width with em
|
2281
|
-
fontSize: [{}, host$
|
2282
|
-
fontFamily: [label$
|
2288
|
+
fontSize: [{}, host$c],
|
2289
|
+
fontFamily: [label$9, inputField$6, helperText$7, errorMessage$9],
|
2283
2290
|
|
2284
|
-
hostWidth: { ...host$
|
2285
|
-
hostMinWidth: { ...host$
|
2286
|
-
hostDirection: { ...host$
|
2291
|
+
hostWidth: { ...host$c, property: 'width' },
|
2292
|
+
hostMinWidth: { ...host$c, property: 'min-width' },
|
2293
|
+
hostDirection: { ...host$c, property: 'direction' },
|
2287
2294
|
|
2288
|
-
inputBackgroundColor: { ...inputField$
|
2295
|
+
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2289
2296
|
|
2290
2297
|
labelTextColor: [
|
2291
|
-
{ ...label$
|
2292
|
-
{ ...requiredIndicator$
|
2298
|
+
{ ...label$9, property: 'color' },
|
2299
|
+
{ ...requiredIndicator$9, property: 'color' },
|
2293
2300
|
],
|
2294
|
-
errorMessageTextColor: { ...errorMessage$
|
2301
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
2295
2302
|
|
2296
|
-
inputValueTextColor: { ...inputField$
|
2303
|
+
inputValueTextColor: { ...inputField$6, property: 'color' },
|
2297
2304
|
inputCaretTextColor: { ...input, property: 'color' },
|
2298
2305
|
|
2299
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2306
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
2300
2307
|
|
2301
|
-
inputBorderColor: { ...inputField$
|
2302
|
-
inputBorderWidth: { ...inputField$
|
2303
|
-
inputBorderStyle: { ...inputField$
|
2304
|
-
inputBorderRadius: { ...inputField$
|
2308
|
+
inputBorderColor: { ...inputField$6, property: 'border-color' },
|
2309
|
+
inputBorderWidth: { ...inputField$6, property: 'border-width' },
|
2310
|
+
inputBorderStyle: { ...inputField$6, property: 'border-style' },
|
2311
|
+
inputBorderRadius: { ...inputField$6, property: 'border-radius' },
|
2305
2312
|
|
2306
|
-
inputHeight: { ...inputField$
|
2313
|
+
inputHeight: { ...inputField$6, property: 'height' },
|
2307
2314
|
inputHorizontalPadding: [
|
2308
2315
|
{ ...input, property: 'padding-left' },
|
2309
2316
|
{ ...input, property: 'padding-right' },
|
2310
2317
|
],
|
2311
2318
|
|
2312
|
-
inputOutlineColor: { ...inputField$
|
2313
|
-
inputOutlineStyle: { ...inputField$
|
2314
|
-
inputOutlineWidth: { ...inputField$
|
2315
|
-
inputOutlineOffset: { ...inputField$
|
2319
|
+
inputOutlineColor: { ...inputField$6, property: 'outline-color' },
|
2320
|
+
inputOutlineStyle: { ...inputField$6, property: 'outline-style' },
|
2321
|
+
inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
|
2322
|
+
inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
|
2316
2323
|
|
2317
2324
|
inputTextAlign: { ...input, property: 'text-align' },
|
2318
2325
|
|
2319
|
-
inputPlaceholderColor: { ...placeholder$
|
2326
|
+
inputPlaceholderColor: { ...placeholder$3, property: 'color' },
|
2320
2327
|
};
|
2321
2328
|
|
2322
|
-
const componentName$
|
2329
|
+
const componentName$v = getComponentName('email-field');
|
2323
2330
|
|
2324
2331
|
const customMixin$7 = (superclass) =>
|
2325
2332
|
class EmailFieldMixinClass extends superclass {
|
@@ -2354,15 +2361,15 @@ const EmailFieldClass = compose(
|
|
2354
2361
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2355
2362
|
`,
|
2356
2363
|
excludeAttrsSync: ['tabindex'],
|
2357
|
-
componentName: componentName$
|
2364
|
+
componentName: componentName$v,
|
2358
2365
|
})
|
2359
2366
|
);
|
2360
2367
|
|
2361
|
-
customElements.define(componentName$
|
2368
|
+
customElements.define(componentName$v, EmailFieldClass);
|
2362
2369
|
|
2363
|
-
const componentName$
|
2370
|
+
const componentName$u = getComponentName('link');
|
2364
2371
|
|
2365
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2372
|
+
class RawLink extends createBaseClass({ componentName: componentName$u, baseSelector: ':host a' }) {
|
2366
2373
|
constructor() {
|
2367
2374
|
super();
|
2368
2375
|
|
@@ -2408,12 +2415,12 @@ const selectors$1 = {
|
|
2408
2415
|
text: { selector: () => TextClass.componentName },
|
2409
2416
|
};
|
2410
2417
|
|
2411
|
-
const { anchor, text: text$2, host: host$
|
2418
|
+
const { anchor, text: text$2, host: host$b, wrapper: wrapper$1 } = selectors$1;
|
2412
2419
|
|
2413
2420
|
const LinkClass = compose(
|
2414
2421
|
createStyleMixin({
|
2415
2422
|
mappings: {
|
2416
|
-
hostWidth: { ...host$
|
2423
|
+
hostWidth: { ...host$b, property: 'width' },
|
2417
2424
|
hostDirection: { ...text$2, property: 'direction' },
|
2418
2425
|
textAlign: wrapper$1,
|
2419
2426
|
textColor: [
|
@@ -2427,7 +2434,7 @@ const LinkClass = compose(
|
|
2427
2434
|
componentNameValidationMixin
|
2428
2435
|
)(RawLink);
|
2429
2436
|
|
2430
|
-
customElements.define(componentName$
|
2437
|
+
customElements.define(componentName$u, LinkClass);
|
2431
2438
|
|
2432
2439
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2433
2440
|
let style;
|
@@ -2479,27 +2486,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2479
2486
|
return CssVarImageClass;
|
2480
2487
|
};
|
2481
2488
|
|
2482
|
-
const componentName$
|
2489
|
+
const componentName$t = getComponentName('logo');
|
2483
2490
|
|
2484
2491
|
const LogoClass = createCssVarImageClass({
|
2485
|
-
componentName: componentName$
|
2492
|
+
componentName: componentName$t,
|
2486
2493
|
varName: 'url',
|
2487
2494
|
fallbackVarName: 'fallbackUrl',
|
2488
2495
|
});
|
2489
2496
|
|
2490
|
-
customElements.define(componentName$
|
2497
|
+
customElements.define(componentName$t, LogoClass);
|
2491
2498
|
|
2492
|
-
const componentName$
|
2499
|
+
const componentName$s = getComponentName('totp-image');
|
2493
2500
|
|
2494
2501
|
const TotpImageClass = createCssVarImageClass({
|
2495
|
-
componentName: componentName$
|
2502
|
+
componentName: componentName$s,
|
2496
2503
|
varName: 'url',
|
2497
2504
|
fallbackVarName: 'fallbackUrl',
|
2498
2505
|
});
|
2499
2506
|
|
2500
|
-
customElements.define(componentName$
|
2507
|
+
customElements.define(componentName$s, TotpImageClass);
|
2501
2508
|
|
2502
|
-
const componentName$
|
2509
|
+
const componentName$r = getComponentName('number-field');
|
2503
2510
|
|
2504
2511
|
const NumberFieldClass = compose(
|
2505
2512
|
createStyleMixin({
|
@@ -2525,11 +2532,11 @@ const NumberFieldClass = compose(
|
|
2525
2532
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2526
2533
|
`,
|
2527
2534
|
excludeAttrsSync: ['tabindex'],
|
2528
|
-
componentName: componentName$
|
2535
|
+
componentName: componentName$r,
|
2529
2536
|
})
|
2530
2537
|
);
|
2531
2538
|
|
2532
|
-
customElements.define(componentName$
|
2539
|
+
customElements.define(componentName$r, NumberFieldClass);
|
2533
2540
|
|
2534
2541
|
const focusElement = (ele) => {
|
2535
2542
|
ele?.focus();
|
@@ -2547,13 +2554,13 @@ const getSanitizedCharacters = (str) => {
|
|
2547
2554
|
|
2548
2555
|
/* eslint-disable no-param-reassign */
|
2549
2556
|
|
2550
|
-
const componentName$
|
2557
|
+
const componentName$q = getComponentName('passcode-internal');
|
2551
2558
|
|
2552
2559
|
const observedAttributes$5 = ['digits'];
|
2553
2560
|
|
2554
2561
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2555
2562
|
|
2556
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2563
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
|
2557
2564
|
|
2558
2565
|
class PasscodeInternal extends BaseInputClass$4 {
|
2559
2566
|
static get observedAttributes() {
|
@@ -2755,7 +2762,7 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2755
2762
|
}
|
2756
2763
|
}
|
2757
2764
|
|
2758
|
-
const componentName$
|
2765
|
+
const componentName$p = getComponentName('text-field');
|
2759
2766
|
|
2760
2767
|
const observedAttrs = ['type'];
|
2761
2768
|
|
@@ -2805,11 +2812,11 @@ const TextFieldClass = compose(
|
|
2805
2812
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2806
2813
|
`,
|
2807
2814
|
excludeAttrsSync: ['tabindex'],
|
2808
|
-
componentName: componentName$
|
2815
|
+
componentName: componentName$p,
|
2809
2816
|
})
|
2810
2817
|
);
|
2811
2818
|
|
2812
|
-
const componentName$
|
2819
|
+
const componentName$o = getComponentName('passcode');
|
2813
2820
|
|
2814
2821
|
const observedAttributes$4 = ['digits'];
|
2815
2822
|
|
@@ -2828,17 +2835,17 @@ const customMixin$5 = (superclass) =>
|
|
2828
2835
|
const template = document.createElement('template');
|
2829
2836
|
|
2830
2837
|
template.innerHTML = `
|
2831
|
-
<${componentName$
|
2838
|
+
<${componentName$q}
|
2832
2839
|
bordered="true"
|
2833
2840
|
name="code"
|
2834
2841
|
tabindex="-1"
|
2835
2842
|
slot="input"
|
2836
|
-
><slot></slot></${componentName$
|
2843
|
+
><slot></slot></${componentName$q}>
|
2837
2844
|
`;
|
2838
2845
|
|
2839
2846
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2840
2847
|
|
2841
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2848
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$q);
|
2842
2849
|
|
2843
2850
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2844
2851
|
}
|
@@ -2853,13 +2860,13 @@ const customMixin$5 = (superclass) =>
|
|
2853
2860
|
};
|
2854
2861
|
|
2855
2862
|
const {
|
2856
|
-
host: host$
|
2863
|
+
host: host$a,
|
2857
2864
|
digitField,
|
2858
|
-
label: label$
|
2859
|
-
requiredIndicator: requiredIndicator$
|
2865
|
+
label: label$8,
|
2866
|
+
requiredIndicator: requiredIndicator$8,
|
2860
2867
|
internalWrapper: internalWrapper$1,
|
2861
2868
|
focusedDigitField,
|
2862
|
-
errorMessage: errorMessage$
|
2869
|
+
errorMessage: errorMessage$8,
|
2863
2870
|
} = {
|
2864
2871
|
host: { selector: () => ':host' },
|
2865
2872
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
@@ -2875,16 +2882,16 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
2875
2882
|
const PasscodeClass = compose(
|
2876
2883
|
createStyleMixin({
|
2877
2884
|
mappings: {
|
2878
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
2885
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$a],
|
2879
2886
|
hostWidth: { property: 'width' },
|
2880
|
-
hostDirection: { ...host$
|
2881
|
-
fontFamily: [host$
|
2887
|
+
hostDirection: { ...host$a, property: 'direction' },
|
2888
|
+
fontFamily: [host$a, { ...label$8 }],
|
2882
2889
|
labelTextColor: [
|
2883
|
-
{ ...label$
|
2884
|
-
{ ...requiredIndicator$
|
2890
|
+
{ ...label$8, property: 'color' },
|
2891
|
+
{ ...requiredIndicator$8, property: 'color' },
|
2885
2892
|
],
|
2886
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2887
|
-
errorMessageTextColor: { ...errorMessage$
|
2893
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
2894
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
2888
2895
|
digitValueTextColor: {
|
2889
2896
|
selector: TextFieldClass.componentName,
|
2890
2897
|
property: textVars$2.inputValueTextColor,
|
@@ -2978,15 +2985,15 @@ const PasscodeClass = compose(
|
|
2978
2985
|
${resetInputCursor('vaadin-text-field')}
|
2979
2986
|
`,
|
2980
2987
|
excludeAttrsSync: ['tabindex'],
|
2981
|
-
componentName: componentName$
|
2988
|
+
componentName: componentName$o,
|
2982
2989
|
})
|
2983
2990
|
);
|
2984
2991
|
|
2985
|
-
customElements.define(componentName$
|
2992
|
+
customElements.define(componentName$p, TextFieldClass);
|
2986
2993
|
|
2987
|
-
customElements.define(componentName$
|
2994
|
+
customElements.define(componentName$q, PasscodeInternal);
|
2988
2995
|
|
2989
|
-
customElements.define(componentName$
|
2996
|
+
customElements.define(componentName$o, PasscodeClass);
|
2990
2997
|
|
2991
2998
|
const passwordDraggableMixin = (superclass) =>
|
2992
2999
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3022,19 +3029,19 @@ const passwordDraggableMixin = (superclass) =>
|
|
3022
3029
|
}
|
3023
3030
|
};
|
3024
3031
|
|
3025
|
-
const componentName$
|
3032
|
+
const componentName$n = getComponentName('password');
|
3026
3033
|
|
3027
3034
|
const {
|
3028
|
-
host: host$
|
3029
|
-
inputField: inputField$
|
3030
|
-
inputElement: inputElement$
|
3035
|
+
host: host$9,
|
3036
|
+
inputField: inputField$5,
|
3037
|
+
inputElement: inputElement$2,
|
3031
3038
|
inputElementPlaceholder,
|
3032
3039
|
revealButtonContainer,
|
3033
3040
|
revealButtonIcon,
|
3034
|
-
label: label$
|
3035
|
-
requiredIndicator: requiredIndicator$
|
3036
|
-
errorMessage: errorMessage$
|
3037
|
-
helperText: helperText$
|
3041
|
+
label: label$7,
|
3042
|
+
requiredIndicator: requiredIndicator$7,
|
3043
|
+
errorMessage: errorMessage$7,
|
3044
|
+
helperText: helperText$6,
|
3038
3045
|
} = {
|
3039
3046
|
host: { selector: () => ':host' },
|
3040
3047
|
inputField: { selector: '::part(input-field)' },
|
@@ -3051,37 +3058,37 @@ const {
|
|
3051
3058
|
const PasswordClass = compose(
|
3052
3059
|
createStyleMixin({
|
3053
3060
|
mappings: {
|
3054
|
-
hostWidth: { ...host$
|
3055
|
-
hostMinWidth: { ...host$
|
3056
|
-
hostDirection: { ...host$
|
3057
|
-
fontSize: [{}, host$
|
3058
|
-
fontFamily: [label$
|
3059
|
-
inputHeight: { ...inputField$
|
3061
|
+
hostWidth: { ...host$9, property: 'width' },
|
3062
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
3063
|
+
hostDirection: { ...host$9, property: 'direction' },
|
3064
|
+
fontSize: [{}, host$9],
|
3065
|
+
fontFamily: [label$7, inputField$5, errorMessage$7, helperText$6],
|
3066
|
+
inputHeight: { ...inputField$5, property: 'height' },
|
3060
3067
|
inputHorizontalPadding: [
|
3061
|
-
{ ...inputElement$
|
3062
|
-
{ ...inputElement$
|
3068
|
+
{ ...inputElement$2, property: 'padding-left' },
|
3069
|
+
{ ...inputElement$2, property: 'padding-right' },
|
3063
3070
|
],
|
3064
|
-
inputBackgroundColor: { ...inputField$
|
3071
|
+
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
3065
3072
|
|
3066
|
-
inputBorderStyle: { ...inputField$
|
3067
|
-
inputBorderWidth: { ...inputField$
|
3068
|
-
inputBorderColor: { ...inputField$
|
3069
|
-
inputBorderRadius: { ...inputField$
|
3073
|
+
inputBorderStyle: { ...inputField$5, property: 'border-style' },
|
3074
|
+
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
3075
|
+
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
3076
|
+
inputBorderRadius: { ...inputField$5, property: 'border-radius' },
|
3070
3077
|
|
3071
|
-
inputOutlineColor: { ...inputField$
|
3072
|
-
inputOutlineStyle: { ...inputField$
|
3073
|
-
inputOutlineOffset: { ...inputField$
|
3074
|
-
inputOutlineWidth: { ...inputField$
|
3078
|
+
inputOutlineColor: { ...inputField$5, property: 'outline-color' },
|
3079
|
+
inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
|
3080
|
+
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
3081
|
+
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
3075
3082
|
|
3076
3083
|
labelTextColor: [
|
3077
|
-
{ ...label$
|
3078
|
-
{ ...requiredIndicator$
|
3084
|
+
{ ...label$7, property: 'color' },
|
3085
|
+
{ ...requiredIndicator$7, property: 'color' },
|
3079
3086
|
],
|
3080
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3081
|
-
errorMessageTextColor: { ...errorMessage$
|
3087
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
3088
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
3082
3089
|
|
3083
3090
|
inputValueTextColor: [
|
3084
|
-
{ ...inputElement$
|
3091
|
+
{ ...inputElement$2, property: 'color' },
|
3085
3092
|
{ ...revealButtonIcon, property: 'color' },
|
3086
3093
|
],
|
3087
3094
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
@@ -3153,23 +3160,23 @@ const PasswordClass = compose(
|
|
3153
3160
|
}
|
3154
3161
|
`,
|
3155
3162
|
excludeAttrsSync: ['tabindex'],
|
3156
|
-
componentName: componentName$
|
3163
|
+
componentName: componentName$n,
|
3157
3164
|
})
|
3158
3165
|
);
|
3159
3166
|
|
3160
|
-
customElements.define(componentName$
|
3167
|
+
customElements.define(componentName$n, PasswordClass);
|
3161
3168
|
|
3162
|
-
const componentName$
|
3169
|
+
const componentName$m = getComponentName('text-area');
|
3163
3170
|
|
3164
3171
|
const {
|
3165
|
-
host: host$
|
3166
|
-
label: label$
|
3167
|
-
placeholder: placeholder$
|
3168
|
-
inputField: inputField$
|
3172
|
+
host: host$8,
|
3173
|
+
label: label$6,
|
3174
|
+
placeholder: placeholder$2,
|
3175
|
+
inputField: inputField$4,
|
3169
3176
|
textArea: textArea$2,
|
3170
|
-
requiredIndicator: requiredIndicator$
|
3171
|
-
helperText: helperText$
|
3172
|
-
errorMessage: errorMessage$
|
3177
|
+
requiredIndicator: requiredIndicator$6,
|
3178
|
+
helperText: helperText$5,
|
3179
|
+
errorMessage: errorMessage$6,
|
3173
3180
|
} = {
|
3174
3181
|
host: { selector: () => ':host' },
|
3175
3182
|
label: { selector: '::part(label)' },
|
@@ -3184,28 +3191,28 @@ const {
|
|
3184
3191
|
const TextAreaClass = compose(
|
3185
3192
|
createStyleMixin({
|
3186
3193
|
mappings: {
|
3187
|
-
hostWidth: { ...host$
|
3188
|
-
hostMinWidth: { ...host$
|
3189
|
-
hostDirection: { ...host$
|
3190
|
-
fontSize: [host$
|
3191
|
-
fontFamily: [label$
|
3194
|
+
hostWidth: { ...host$8, property: 'width' },
|
3195
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
3196
|
+
hostDirection: { ...host$8, property: 'direction' },
|
3197
|
+
fontSize: [host$8, textArea$2],
|
3198
|
+
fontFamily: [label$6, inputField$4, helperText$5, errorMessage$6],
|
3192
3199
|
labelTextColor: [
|
3193
|
-
{ ...label$
|
3194
|
-
{ ...requiredIndicator$
|
3200
|
+
{ ...label$6, property: 'color' },
|
3201
|
+
{ ...requiredIndicator$6, property: 'color' },
|
3195
3202
|
],
|
3196
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3197
|
-
errorMessageTextColor: { ...errorMessage$
|
3198
|
-
inputBackgroundColor: { ...inputField$
|
3203
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
3204
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
3205
|
+
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
3199
3206
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
3200
|
-
inputPlaceholderTextColor: { ...placeholder$
|
3201
|
-
inputBorderWidth: { ...inputField$
|
3202
|
-
inputBorderStyle: { ...inputField$
|
3203
|
-
inputBorderColor: { ...inputField$
|
3204
|
-
inputBorderRadius: { ...inputField$
|
3205
|
-
inputOutlineStyle: { ...inputField$
|
3206
|
-
inputOutlineColor: { ...inputField$
|
3207
|
-
inputOutlineOffset: { ...inputField$
|
3208
|
-
inputOutlineWidth: { ...inputField$
|
3207
|
+
inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
|
3208
|
+
inputBorderWidth: { ...inputField$4, property: 'border-width' },
|
3209
|
+
inputBorderStyle: { ...inputField$4, property: 'border-style' },
|
3210
|
+
inputBorderColor: { ...inputField$4, property: 'border-color' },
|
3211
|
+
inputBorderRadius: { ...inputField$4, property: 'border-radius' },
|
3212
|
+
inputOutlineStyle: { ...inputField$4, property: 'outline-Style' },
|
3213
|
+
inputOutlineColor: { ...inputField$4, property: 'outline-color' },
|
3214
|
+
inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
|
3215
|
+
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
3209
3216
|
inputResizeType: { ...textArea$2, property: 'resize' },
|
3210
3217
|
inputMinHeight: { ...textArea$2, property: 'min-height' },
|
3211
3218
|
},
|
@@ -3234,17 +3241,17 @@ const TextAreaClass = compose(
|
|
3234
3241
|
${resetInputCursor('vaadin-text-area')}
|
3235
3242
|
`,
|
3236
3243
|
excludeAttrsSync: ['tabindex'],
|
3237
|
-
componentName: componentName$
|
3244
|
+
componentName: componentName$m,
|
3238
3245
|
})
|
3239
3246
|
);
|
3240
3247
|
|
3241
|
-
customElements.define(componentName$
|
3248
|
+
customElements.define(componentName$m, TextAreaClass);
|
3242
3249
|
|
3243
3250
|
const observedAttributes$3 = ['src', 'alt'];
|
3244
3251
|
|
3245
|
-
const componentName$
|
3252
|
+
const componentName$l = getComponentName('image');
|
3246
3253
|
|
3247
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3254
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$l, baseSelector: ':host > img' });
|
3248
3255
|
class RawImage extends BaseClass$1 {
|
3249
3256
|
static get observedAttributes() {
|
3250
3257
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3284,9 +3291,9 @@ const ImageClass = compose(
|
|
3284
3291
|
draggableMixin
|
3285
3292
|
)(RawImage);
|
3286
3293
|
|
3287
|
-
customElements.define(componentName$
|
3294
|
+
customElements.define(componentName$l, ImageClass);
|
3288
3295
|
|
3289
|
-
const componentName$
|
3296
|
+
const componentName$k = getComponentName('combo-box');
|
3290
3297
|
|
3291
3298
|
const ComboBoxMixin = (superclass) =>
|
3292
3299
|
class ComboBoxMixinClass extends superclass {
|
@@ -3508,15 +3515,15 @@ const ComboBoxMixin = (superclass) =>
|
|
3508
3515
|
};
|
3509
3516
|
|
3510
3517
|
const {
|
3511
|
-
host: host$
|
3512
|
-
inputField: inputField$
|
3513
|
-
inputElement,
|
3514
|
-
placeholder,
|
3515
|
-
toggle,
|
3516
|
-
label: label$
|
3517
|
-
requiredIndicator: requiredIndicator$
|
3518
|
-
helperText: helperText$
|
3519
|
-
errorMessage: errorMessage$
|
3518
|
+
host: host$7,
|
3519
|
+
inputField: inputField$3,
|
3520
|
+
inputElement: inputElement$1,
|
3521
|
+
placeholder: placeholder$1,
|
3522
|
+
toggle: toggle$1,
|
3523
|
+
label: label$5,
|
3524
|
+
requiredIndicator: requiredIndicator$5,
|
3525
|
+
helperText: helperText$4,
|
3526
|
+
errorMessage: errorMessage$5,
|
3520
3527
|
} = {
|
3521
3528
|
host: { selector: () => ':host' },
|
3522
3529
|
inputField: { selector: '::part(input-field)' },
|
@@ -3532,39 +3539,39 @@ const {
|
|
3532
3539
|
const ComboBoxClass = compose(
|
3533
3540
|
createStyleMixin({
|
3534
3541
|
mappings: {
|
3535
|
-
hostWidth: { ...host$
|
3536
|
-
hostDirection: { ...host$
|
3542
|
+
hostWidth: { ...host$7, property: 'width' },
|
3543
|
+
hostDirection: { ...host$7, property: 'direction' },
|
3537
3544
|
// we apply font-size also on the host so we can set its width with em
|
3538
|
-
fontSize: [{}, host$
|
3539
|
-
fontFamily: [label$
|
3545
|
+
fontSize: [{}, host$7],
|
3546
|
+
fontFamily: [label$5, placeholder$1, inputField$3, helperText$4, errorMessage$5],
|
3540
3547
|
labelTextColor: [
|
3541
|
-
{ ...label$
|
3542
|
-
{ ...requiredIndicator$
|
3548
|
+
{ ...label$5, property: 'color' },
|
3549
|
+
{ ...requiredIndicator$5, property: 'color' },
|
3543
3550
|
],
|
3544
|
-
errorMessageTextColor: { ...errorMessage$
|
3545
|
-
inputHeight: { ...inputField$
|
3546
|
-
inputBackgroundColor: { ...inputField$
|
3547
|
-
inputBorderColor: { ...inputField$
|
3548
|
-
inputBorderWidth: { ...inputField$
|
3549
|
-
inputBorderStyle: { ...inputField$
|
3550
|
-
inputBorderRadius: { ...inputField$
|
3551
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3552
|
-
inputValueTextColor: { ...inputField$
|
3553
|
-
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3554
|
-
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
3555
|
-
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
3556
|
-
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
3551
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
3552
|
+
inputHeight: { ...inputField$3, property: 'height' },
|
3553
|
+
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
3554
|
+
inputBorderColor: { ...inputField$3, property: 'border-color' },
|
3555
|
+
inputBorderWidth: { ...inputField$3, property: 'border-width' },
|
3556
|
+
inputBorderStyle: { ...inputField$3, property: 'border-style' },
|
3557
|
+
inputBorderRadius: { ...inputField$3, property: 'border-radius' },
|
3558
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
3559
|
+
inputValueTextColor: { ...inputField$3, property: 'color' },
|
3560
|
+
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
3561
|
+
inputDropdownButtonCursor: { ...toggle$1, property: 'cursor' },
|
3562
|
+
inputDropdownButtonColor: { ...toggle$1, property: 'color' },
|
3563
|
+
inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
|
3557
3564
|
inputDropdownButtonOffset: [
|
3558
|
-
{ ...toggle, property: 'margin-right' },
|
3559
|
-
{ ...toggle, property: 'margin-left' },
|
3565
|
+
{ ...toggle$1, property: 'margin-right' },
|
3566
|
+
{ ...toggle$1, property: 'margin-left' },
|
3560
3567
|
],
|
3561
|
-
inputOutlineColor: { ...inputField$
|
3562
|
-
inputOutlineWidth: { ...inputField$
|
3563
|
-
inputOutlineStyle: { ...inputField$
|
3564
|
-
inputOutlineOffset: { ...inputField$
|
3568
|
+
inputOutlineColor: { ...inputField$3, property: 'outline-color' },
|
3569
|
+
inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
|
3570
|
+
inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
|
3571
|
+
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
3565
3572
|
inputHorizontalPadding: [
|
3566
|
-
{ ...inputElement, property: 'padding-left' },
|
3567
|
-
{ ...inputElement, property: 'padding-right' },
|
3573
|
+
{ ...inputElement$1, property: 'padding-left' },
|
3574
|
+
{ ...inputElement$1, property: 'padding-right' },
|
3568
3575
|
],
|
3569
3576
|
|
3570
3577
|
// we need to use the variables from the portal mixin
|
@@ -3650,12 +3657,12 @@ const ComboBoxClass = compose(
|
|
3650
3657
|
// and reset items to an empty array, and opening the list box with no items
|
3651
3658
|
// to display.
|
3652
3659
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3653
|
-
componentName: componentName$
|
3660
|
+
componentName: componentName$k,
|
3654
3661
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3655
3662
|
})
|
3656
3663
|
);
|
3657
3664
|
|
3658
|
-
customElements.define(componentName$
|
3665
|
+
customElements.define(componentName$k, ComboBoxClass);
|
3659
3666
|
|
3660
3667
|
var CountryCodes = [
|
3661
3668
|
{
|
@@ -4895,7 +4902,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4895
4902
|
</div>
|
4896
4903
|
`;
|
4897
4904
|
|
4898
|
-
const componentName$
|
4905
|
+
const componentName$j = getComponentName('phone-field-internal');
|
4899
4906
|
|
4900
4907
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4901
4908
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4907,7 +4914,7 @@ const mapAttrs$1 = {
|
|
4907
4914
|
|
4908
4915
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4909
4916
|
|
4910
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4917
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
|
4911
4918
|
|
4912
4919
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4913
4920
|
static get observedAttributes() {
|
@@ -5079,12 +5086,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
5079
5086
|
}
|
5080
5087
|
};
|
5081
5088
|
|
5082
|
-
customElements.define(componentName$
|
5089
|
+
customElements.define(componentName$j, PhoneFieldInternal$1);
|
5083
5090
|
|
5084
5091
|
const textVars$1 = TextFieldClass.cssVarList;
|
5085
5092
|
const comboVars = ComboBoxClass.cssVarList;
|
5086
5093
|
|
5087
|
-
const componentName$
|
5094
|
+
const componentName$i = getComponentName('phone-field');
|
5088
5095
|
|
5089
5096
|
const customMixin$4 = (superclass) =>
|
5090
5097
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5098,15 +5105,15 @@ const customMixin$4 = (superclass) =>
|
|
5098
5105
|
const template = document.createElement('template');
|
5099
5106
|
|
5100
5107
|
template.innerHTML = `
|
5101
|
-
<${componentName$
|
5108
|
+
<${componentName$j}
|
5102
5109
|
tabindex="-1"
|
5103
5110
|
slot="input"
|
5104
|
-
></${componentName$
|
5111
|
+
></${componentName$j}>
|
5105
5112
|
`;
|
5106
5113
|
|
5107
5114
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5108
5115
|
|
5109
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5116
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$j);
|
5110
5117
|
|
5111
5118
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5112
5119
|
includeAttrs: [
|
@@ -5126,15 +5133,15 @@ const customMixin$4 = (superclass) =>
|
|
5126
5133
|
};
|
5127
5134
|
|
5128
5135
|
const {
|
5129
|
-
host: host$
|
5130
|
-
label: label$
|
5131
|
-
requiredIndicator: requiredIndicator$
|
5132
|
-
inputField: inputField$
|
5136
|
+
host: host$6,
|
5137
|
+
label: label$4,
|
5138
|
+
requiredIndicator: requiredIndicator$4,
|
5139
|
+
inputField: inputField$2,
|
5133
5140
|
countryCodeInput,
|
5134
5141
|
phoneInput: phoneInput$1,
|
5135
5142
|
separator,
|
5136
|
-
errorMessage: errorMessage$
|
5137
|
-
helperText: helperText$
|
5143
|
+
errorMessage: errorMessage$4,
|
5144
|
+
helperText: helperText$3,
|
5138
5145
|
} = {
|
5139
5146
|
host: { selector: () => ':host' },
|
5140
5147
|
label: { selector: '::part(label)' },
|
@@ -5151,8 +5158,8 @@ const PhoneFieldClass = compose(
|
|
5151
5158
|
createStyleMixin({
|
5152
5159
|
mappings: {
|
5153
5160
|
fontSize: [
|
5154
|
-
host$
|
5155
|
-
inputField$
|
5161
|
+
host$6,
|
5162
|
+
inputField$2,
|
5156
5163
|
{
|
5157
5164
|
selector: TextFieldClass.componentName,
|
5158
5165
|
property: TextFieldClass.cssVarList.fontSize,
|
@@ -5163,34 +5170,34 @@ const PhoneFieldClass = compose(
|
|
5163
5170
|
},
|
5164
5171
|
],
|
5165
5172
|
fontFamily: [
|
5166
|
-
label$
|
5167
|
-
errorMessage$
|
5168
|
-
helperText$
|
5173
|
+
label$4,
|
5174
|
+
errorMessage$4,
|
5175
|
+
helperText$3,
|
5169
5176
|
{
|
5170
5177
|
...countryCodeInput,
|
5171
5178
|
property: ComboBoxClass.cssVarList.overlay.fontFamily,
|
5172
5179
|
},
|
5173
5180
|
],
|
5174
5181
|
hostWidth: [
|
5175
|
-
{ ...host$
|
5182
|
+
{ ...host$6, property: 'width' },
|
5176
5183
|
{ ...phoneInput$1, property: 'width' },
|
5177
5184
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5178
5185
|
],
|
5179
|
-
hostDirection: { ...host$
|
5186
|
+
hostDirection: { ...host$6, property: 'direction' },
|
5180
5187
|
|
5181
5188
|
inputBorderStyle: [
|
5182
|
-
{ ...inputField$
|
5189
|
+
{ ...inputField$2, property: 'border-style' },
|
5183
5190
|
{ ...separator, property: 'border-left-style' },
|
5184
5191
|
],
|
5185
5192
|
inputBorderWidth: [
|
5186
|
-
{ ...inputField$
|
5193
|
+
{ ...inputField$2, property: 'border-width' },
|
5187
5194
|
{ ...separator, property: 'border-left-width' },
|
5188
5195
|
],
|
5189
5196
|
inputBorderColor: [
|
5190
|
-
{ ...inputField$
|
5197
|
+
{ ...inputField$2, property: 'border-color' },
|
5191
5198
|
{ ...separator, property: 'border-left-color' },
|
5192
5199
|
],
|
5193
|
-
inputBorderRadius: { ...inputField$
|
5200
|
+
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
5194
5201
|
|
5195
5202
|
countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
|
5196
5203
|
countryCodeDropdownWidth: {
|
@@ -5200,11 +5207,11 @@ const PhoneFieldClass = compose(
|
|
5200
5207
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
5201
5208
|
|
5202
5209
|
labelTextColor: [
|
5203
|
-
{ ...label$
|
5204
|
-
{ ...requiredIndicator$
|
5210
|
+
{ ...label$4, property: 'color' },
|
5211
|
+
{ ...requiredIndicator$4, property: 'color' },
|
5205
5212
|
],
|
5206
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
5207
|
-
errorMessageTextColor: { ...errorMessage$
|
5213
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
5214
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
5208
5215
|
|
5209
5216
|
inputValueTextColor: [
|
5210
5217
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
@@ -5218,10 +5225,10 @@ const PhoneFieldClass = compose(
|
|
5218
5225
|
property: comboVars.overlayItemBackgroundColor,
|
5219
5226
|
},
|
5220
5227
|
|
5221
|
-
inputOutlineStyle: { ...inputField$
|
5222
|
-
inputOutlineColor: { ...inputField$
|
5223
|
-
inputOutlineWidth: { ...inputField$
|
5224
|
-
inputOutlineOffset: { ...inputField$
|
5228
|
+
inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
|
5229
|
+
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
5230
|
+
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
5231
|
+
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
5225
5232
|
},
|
5226
5233
|
}),
|
5227
5234
|
draggableMixin,
|
@@ -5302,17 +5309,17 @@ const PhoneFieldClass = compose(
|
|
5302
5309
|
${resetInputLabelPosition('vaadin-text-field')}
|
5303
5310
|
`,
|
5304
5311
|
excludeAttrsSync: ['tabindex'],
|
5305
|
-
componentName: componentName$
|
5312
|
+
componentName: componentName$i,
|
5306
5313
|
})
|
5307
5314
|
);
|
5308
5315
|
|
5309
|
-
customElements.define(componentName$
|
5316
|
+
customElements.define(componentName$i, PhoneFieldClass);
|
5310
5317
|
|
5311
5318
|
const getCountryByCodeId = (countryCode) => {
|
5312
5319
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5313
5320
|
};
|
5314
5321
|
|
5315
|
-
const componentName$
|
5322
|
+
const componentName$h = getComponentName('phone-field-internal-input-box');
|
5316
5323
|
|
5317
5324
|
const observedAttributes$2 = [
|
5318
5325
|
'disabled',
|
@@ -5326,7 +5333,7 @@ const mapAttrs = {
|
|
5326
5333
|
'phone-input-placeholder': 'placeholder',
|
5327
5334
|
};
|
5328
5335
|
|
5329
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5336
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
|
5330
5337
|
|
5331
5338
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5332
5339
|
static get observedAttributes() {
|
@@ -5465,11 +5472,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5465
5472
|
}
|
5466
5473
|
}
|
5467
5474
|
|
5468
|
-
customElements.define(componentName$
|
5475
|
+
customElements.define(componentName$h, PhoneFieldInternal);
|
5469
5476
|
|
5470
5477
|
const textVars = TextFieldClass.cssVarList;
|
5471
5478
|
|
5472
|
-
const componentName$
|
5479
|
+
const componentName$g = getComponentName('phone-input-box-field');
|
5473
5480
|
|
5474
5481
|
const customMixin$3 = (superclass) =>
|
5475
5482
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5483,15 +5490,15 @@ const customMixin$3 = (superclass) =>
|
|
5483
5490
|
const template = document.createElement('template');
|
5484
5491
|
|
5485
5492
|
template.innerHTML = `
|
5486
|
-
<${componentName$
|
5493
|
+
<${componentName$h}
|
5487
5494
|
tabindex="-1"
|
5488
5495
|
slot="input"
|
5489
|
-
></${componentName$
|
5496
|
+
></${componentName$h}>
|
5490
5497
|
`;
|
5491
5498
|
|
5492
5499
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5493
5500
|
|
5494
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5501
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
5495
5502
|
|
5496
5503
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5497
5504
|
includeAttrs: [
|
@@ -5508,7 +5515,7 @@ const customMixin$3 = (superclass) =>
|
|
5508
5515
|
}
|
5509
5516
|
};
|
5510
5517
|
|
5511
|
-
const { host: host$
|
5518
|
+
const { host: host$5, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$3, helperText: helperText$2 } = {
|
5512
5519
|
host: { selector: () => ':host' },
|
5513
5520
|
label: { selector: '::part(label)' },
|
5514
5521
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5522,38 +5529,38 @@ const PhoneFieldInputBoxClass = compose(
|
|
5522
5529
|
createStyleMixin({
|
5523
5530
|
mappings: {
|
5524
5531
|
fontSize: [
|
5525
|
-
host$
|
5526
|
-
inputField,
|
5532
|
+
host$5,
|
5533
|
+
inputField$1,
|
5527
5534
|
{
|
5528
5535
|
selector: TextFieldClass.componentName,
|
5529
5536
|
property: TextFieldClass.cssVarList.fontSize,
|
5530
5537
|
},
|
5531
5538
|
],
|
5532
|
-
fontFamily: [label$
|
5533
|
-
hostWidth: { ...host$
|
5534
|
-
hostMinWidth: { ...host$
|
5535
|
-
hostDirection: { ...host$
|
5539
|
+
fontFamily: [label$3, errorMessage$3, helperText$2],
|
5540
|
+
hostWidth: { ...host$5, property: 'width' },
|
5541
|
+
hostMinWidth: { ...host$5, property: 'min-width' },
|
5542
|
+
hostDirection: { ...host$5, property: 'direction' },
|
5536
5543
|
|
5537
|
-
inputBorderStyle: { ...inputField, property: 'border-style' },
|
5538
|
-
inputBorderWidth: { ...inputField, property: 'border-width' },
|
5539
|
-
inputBorderColor: { ...inputField, property: 'border-color' },
|
5540
|
-
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
5544
|
+
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5545
|
+
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
5546
|
+
inputBorderColor: { ...inputField$1, property: 'border-color' },
|
5547
|
+
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
5541
5548
|
|
5542
5549
|
labelTextColor: [
|
5543
|
-
{ ...label$
|
5544
|
-
{ ...requiredIndicator$
|
5550
|
+
{ ...label$3, property: 'color' },
|
5551
|
+
{ ...requiredIndicator$3, property: 'color' },
|
5545
5552
|
],
|
5546
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
5547
|
-
errorMessageTextColor: { ...errorMessage$
|
5553
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
5554
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
5548
5555
|
|
5549
5556
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
5550
5557
|
|
5551
5558
|
inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
|
5552
5559
|
|
5553
|
-
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
5554
|
-
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
5555
|
-
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
5556
|
-
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
5560
|
+
inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
|
5561
|
+
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
5562
|
+
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
5563
|
+
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
5557
5564
|
},
|
5558
5565
|
}),
|
5559
5566
|
draggableMixin,
|
@@ -5624,15 +5631,15 @@ const PhoneFieldInputBoxClass = compose(
|
|
5624
5631
|
${resetInputLabelPosition('vaadin-text-field')}
|
5625
5632
|
`,
|
5626
5633
|
excludeAttrsSync: ['tabindex'],
|
5627
|
-
componentName: componentName$
|
5634
|
+
componentName: componentName$g,
|
5628
5635
|
})
|
5629
5636
|
);
|
5630
5637
|
|
5631
|
-
customElements.define(componentName$
|
5638
|
+
customElements.define(componentName$g, PhoneFieldInputBoxClass);
|
5632
5639
|
|
5633
|
-
const componentName$
|
5640
|
+
const componentName$f = getComponentName('new-password-internal');
|
5634
5641
|
|
5635
|
-
const componentName$
|
5642
|
+
const componentName$e = getComponentName('new-password');
|
5636
5643
|
|
5637
5644
|
const customMixin$2 = (superclass) =>
|
5638
5645
|
class NewPasswordMixinClass extends superclass {
|
@@ -5642,16 +5649,16 @@ const customMixin$2 = (superclass) =>
|
|
5642
5649
|
const template = document.createElement('template');
|
5643
5650
|
|
5644
5651
|
template.innerHTML = `
|
5645
|
-
<${componentName$
|
5652
|
+
<${componentName$f}
|
5646
5653
|
name="new-password"
|
5647
5654
|
tabindex="-1"
|
5648
5655
|
slot="input"
|
5649
|
-
></${componentName$
|
5656
|
+
></${componentName$f}>
|
5650
5657
|
`;
|
5651
5658
|
|
5652
5659
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5653
5660
|
|
5654
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5661
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$f);
|
5655
5662
|
|
5656
5663
|
forwardAttrs(this, this.inputElement, {
|
5657
5664
|
includeAttrs: [
|
@@ -5672,7 +5679,7 @@ const customMixin$2 = (superclass) =>
|
|
5672
5679
|
}
|
5673
5680
|
};
|
5674
5681
|
|
5675
|
-
const { host: host$
|
5682
|
+
const { host: host$4, label: label$2, internalInputsWrapper, errorMessage: errorMessage$2, helperText: helperText$1, passwordInput } = {
|
5676
5683
|
host: { selector: () => ':host' },
|
5677
5684
|
label: { selector: '::part(label)' },
|
5678
5685
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5685,22 +5692,22 @@ const NewPasswordClass = compose(
|
|
5685
5692
|
createStyleMixin({
|
5686
5693
|
mappings: {
|
5687
5694
|
fontSize: [
|
5688
|
-
host$
|
5695
|
+
host$4,
|
5689
5696
|
{},
|
5690
5697
|
{
|
5691
5698
|
selector: PasswordClass.componentName,
|
5692
5699
|
property: PasswordClass.cssVarList.fontSize,
|
5693
5700
|
},
|
5694
5701
|
],
|
5695
|
-
fontFamily: [label$
|
5696
|
-
errorMessageTextColor: { ...errorMessage$
|
5697
|
-
hostWidth: { ...host$
|
5698
|
-
hostMinWidth: { ...host$
|
5702
|
+
fontFamily: [label$2, errorMessage$2, helperText$1],
|
5703
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
5704
|
+
hostWidth: { ...host$4, property: 'width' },
|
5705
|
+
hostMinWidth: { ...host$4, property: 'min-width' },
|
5699
5706
|
hostDirection: [
|
5700
|
-
{ ...host$
|
5707
|
+
{ ...host$4, property: 'direction' },
|
5701
5708
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
5702
5709
|
],
|
5703
|
-
inputsRequiredIndicator: { ...host$
|
5710
|
+
inputsRequiredIndicator: { ...host$4, property: 'content' },
|
5704
5711
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5705
5712
|
},
|
5706
5713
|
}),
|
@@ -5758,7 +5765,7 @@ const NewPasswordClass = compose(
|
|
5758
5765
|
}
|
5759
5766
|
`,
|
5760
5767
|
excludeAttrsSync: ['tabindex'],
|
5761
|
-
componentName: componentName$
|
5768
|
+
componentName: componentName$e,
|
5762
5769
|
})
|
5763
5770
|
);
|
5764
5771
|
|
@@ -5783,7 +5790,7 @@ const commonAttrs = [
|
|
5783
5790
|
|
5784
5791
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5785
5792
|
|
5786
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5793
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
|
5787
5794
|
|
5788
5795
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5789
5796
|
static get observedAttributes() {
|
@@ -5948,16 +5955,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5948
5955
|
}
|
5949
5956
|
}
|
5950
5957
|
|
5951
|
-
customElements.define(componentName$
|
5958
|
+
customElements.define(componentName$f, NewPasswordInternal);
|
5952
5959
|
|
5953
|
-
customElements.define(componentName$
|
5960
|
+
customElements.define(componentName$e, NewPasswordClass);
|
5954
5961
|
|
5955
|
-
const componentName$
|
5962
|
+
const componentName$d = getComponentName('recaptcha');
|
5956
5963
|
|
5957
5964
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5958
5965
|
|
5959
5966
|
const BaseClass = createBaseClass({
|
5960
|
-
componentName: componentName$
|
5967
|
+
componentName: componentName$d,
|
5961
5968
|
baseSelector: ':host > div',
|
5962
5969
|
});
|
5963
5970
|
class RawRecaptcha extends BaseClass {
|
@@ -6109,7 +6116,7 @@ class RawRecaptcha extends BaseClass {
|
|
6109
6116
|
|
6110
6117
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6111
6118
|
|
6112
|
-
customElements.define(componentName$
|
6119
|
+
customElements.define(componentName$d, RecaptchaClass);
|
6113
6120
|
|
6114
6121
|
const getFileBase64 = (fileObj) => {
|
6115
6122
|
return new Promise((resolve) => {
|
@@ -6123,7 +6130,7 @@ const getFilename = (fileObj) => {
|
|
6123
6130
|
return fileObj.name.replace(/^.*\\/, '');
|
6124
6131
|
};
|
6125
6132
|
|
6126
|
-
const componentName$
|
6133
|
+
const componentName$c = getComponentName('upload-file');
|
6127
6134
|
|
6128
6135
|
const observedAttributes = [
|
6129
6136
|
'title',
|
@@ -6138,7 +6145,7 @@ const observedAttributes = [
|
|
6138
6145
|
'icon',
|
6139
6146
|
];
|
6140
6147
|
|
6141
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6148
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
|
6142
6149
|
|
6143
6150
|
class RawUploadFile extends BaseInputClass {
|
6144
6151
|
static get observedAttributes() {
|
@@ -6310,7 +6317,7 @@ class RawUploadFile extends BaseInputClass {
|
|
6310
6317
|
}
|
6311
6318
|
|
6312
6319
|
const buttonVars = ButtonClass.cssVarList;
|
6313
|
-
const { host: host$
|
6320
|
+
const { host: host$3, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
6314
6321
|
host: { selector: () => ':host' },
|
6315
6322
|
wrapper: { selector: () => ':host > div' },
|
6316
6323
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6329,11 +6336,11 @@ const UploadFileClass = compose(
|
|
6329
6336
|
borderWidth: {},
|
6330
6337
|
borderStyle: {},
|
6331
6338
|
borderRadius: {},
|
6332
|
-
hostHeight: { ...host$
|
6333
|
-
hostWidth: { ...host$
|
6339
|
+
hostHeight: { ...host$3, property: 'height' },
|
6340
|
+
hostWidth: { ...host$3, property: 'width' },
|
6334
6341
|
hostPadding: { property: 'padding' },
|
6335
6342
|
hostDirection: [
|
6336
|
-
{ ...host$
|
6343
|
+
{ ...host$3, property: 'direction' },
|
6337
6344
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
6338
6345
|
],
|
6339
6346
|
gap: { ...wrapper },
|
@@ -6346,19 +6353,19 @@ const UploadFileClass = compose(
|
|
6346
6353
|
{ ...description, property: 'color' },
|
6347
6354
|
],
|
6348
6355
|
iconSize: { ...icon, property: 'width' },
|
6349
|
-
requiredIndicator: { ...requiredIndicator$
|
6356
|
+
requiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
6350
6357
|
},
|
6351
6358
|
}),
|
6352
6359
|
draggableMixin,
|
6353
6360
|
componentNameValidationMixin
|
6354
6361
|
)(RawUploadFile);
|
6355
6362
|
|
6356
|
-
customElements.define(componentName$
|
6363
|
+
customElements.define(componentName$c, UploadFileClass);
|
6357
6364
|
|
6358
|
-
const componentName$
|
6365
|
+
const componentName$b = getComponentName('button-selection-group-internal');
|
6359
6366
|
|
6360
6367
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6361
|
-
componentName: componentName$
|
6368
|
+
componentName: componentName$b,
|
6362
6369
|
baseSelector: 'slot',
|
6363
6370
|
}) {
|
6364
6371
|
constructor() {
|
@@ -6495,7 +6502,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6495
6502
|
}
|
6496
6503
|
}
|
6497
6504
|
|
6498
|
-
const componentName$
|
6505
|
+
const componentName$a = getComponentName('button-selection-group');
|
6499
6506
|
|
6500
6507
|
const customMixin$1 = (superclass) =>
|
6501
6508
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -6570,18 +6577,18 @@ const customMixin$1 = (superclass) =>
|
|
6570
6577
|
const template = document.createElement('template');
|
6571
6578
|
|
6572
6579
|
template.innerHTML = `
|
6573
|
-
<${componentName$
|
6580
|
+
<${componentName$b}
|
6574
6581
|
name="button-selection-group"
|
6575
6582
|
slot="input"
|
6576
6583
|
tabindex="-1"
|
6577
6584
|
>
|
6578
6585
|
<slot></slot>
|
6579
|
-
</${componentName$
|
6586
|
+
</${componentName$b}>
|
6580
6587
|
`;
|
6581
6588
|
|
6582
6589
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6583
6590
|
|
6584
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6591
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
6585
6592
|
|
6586
6593
|
forwardAttrs(this, this.inputElement, {
|
6587
6594
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6600,7 +6607,7 @@ const customMixin$1 = (superclass) =>
|
|
6600
6607
|
}
|
6601
6608
|
};
|
6602
6609
|
|
6603
|
-
const { host: host$
|
6610
|
+
const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$1 } = {
|
6604
6611
|
host: { selector: () => ':host' },
|
6605
6612
|
label: { selector: '::part(label)' },
|
6606
6613
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6611,15 +6618,15 @@ const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage }
|
|
6611
6618
|
const ButtonSelectionGroupClass = compose(
|
6612
6619
|
createStyleMixin({
|
6613
6620
|
mappings: {
|
6614
|
-
hostWidth: { ...host$
|
6615
|
-
hostDirection: { ...host$
|
6616
|
-
fontFamily: host$
|
6621
|
+
hostWidth: { ...host$2, property: 'width' },
|
6622
|
+
hostDirection: { ...host$2, property: 'direction' },
|
6623
|
+
fontFamily: host$2,
|
6617
6624
|
labelTextColor: [
|
6618
|
-
{ ...label, property: 'color' },
|
6619
|
-
{ ...requiredIndicator, property: 'color' },
|
6625
|
+
{ ...label$1, property: 'color' },
|
6626
|
+
{ ...requiredIndicator$1, property: 'color' },
|
6620
6627
|
],
|
6621
|
-
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
6622
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
6628
|
+
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
6629
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
6623
6630
|
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
6624
6631
|
},
|
6625
6632
|
}),
|
@@ -6686,18 +6693,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6686
6693
|
${resetInputCursor('vaadin-text-field')}
|
6687
6694
|
`,
|
6688
6695
|
excludeAttrsSync: ['tabindex'],
|
6689
|
-
componentName: componentName$
|
6696
|
+
componentName: componentName$a,
|
6690
6697
|
})
|
6691
6698
|
);
|
6692
6699
|
|
6693
|
-
customElements.define(componentName$
|
6700
|
+
customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
|
6694
6701
|
|
6695
|
-
customElements.define(componentName$
|
6702
|
+
customElements.define(componentName$a, ButtonSelectionGroupClass);
|
6696
6703
|
|
6697
|
-
const componentName$
|
6704
|
+
const componentName$9 = getComponentName('button-selection-group-item');
|
6698
6705
|
|
6699
6706
|
class RawSelectItem extends createBaseClass({
|
6700
|
-
componentName: componentName$
|
6707
|
+
componentName: componentName$9,
|
6701
6708
|
baseSelector: ':host > descope-button',
|
6702
6709
|
}) {
|
6703
6710
|
get size() {
|
@@ -6795,7 +6802,7 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6795
6802
|
componentNameValidationMixin
|
6796
6803
|
)(RawSelectItem);
|
6797
6804
|
|
6798
|
-
customElements.define(componentName$
|
6805
|
+
customElements.define(componentName$9, ButtonSelectionGroupItemClass);
|
6799
6806
|
|
6800
6807
|
class GridTextColumnClass extends GridSortColumn {
|
6801
6808
|
get sortable() {
|
@@ -6814,9 +6821,9 @@ class GridTextColumnClass extends GridSortColumn {
|
|
6814
6821
|
}
|
6815
6822
|
}
|
6816
6823
|
|
6817
|
-
const componentName$
|
6824
|
+
const componentName$8 = getComponentName('grid-text-column');
|
6818
6825
|
|
6819
|
-
customElements.define(componentName$
|
6826
|
+
customElements.define(componentName$8, GridTextColumnClass);
|
6820
6827
|
|
6821
6828
|
/* eslint-disable no-param-reassign */
|
6822
6829
|
|
@@ -6851,9 +6858,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
|
|
6851
6858
|
|
6852
6859
|
/* eslint-disable no-param-reassign */
|
6853
6860
|
|
6854
|
-
const componentName$
|
6861
|
+
const componentName$7 = getComponentName('grid-custom-column');
|
6855
6862
|
|
6856
|
-
customElements.define(componentName$
|
6863
|
+
customElements.define(componentName$7, GridCustomColumnClass);
|
6857
6864
|
|
6858
6865
|
const createCheckboxEle = () => {
|
6859
6866
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -6911,9 +6918,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
6911
6918
|
}
|
6912
6919
|
}
|
6913
6920
|
|
6914
|
-
const componentName$
|
6921
|
+
const componentName$6 = getComponentName('grid-selection-column');
|
6915
6922
|
|
6916
|
-
customElements.define(componentName$
|
6923
|
+
customElements.define(componentName$6, GridSelectionColumnClass);
|
6917
6924
|
|
6918
6925
|
const isValidDataType = (data) => {
|
6919
6926
|
const isValid = Array.isArray(data);
|
@@ -6925,7 +6932,7 @@ const isValidDataType = (data) => {
|
|
6925
6932
|
return isValid;
|
6926
6933
|
};
|
6927
6934
|
|
6928
|
-
const componentName$
|
6935
|
+
const componentName$5 = getComponentName('grid');
|
6929
6936
|
|
6930
6937
|
const GridMixin = (superclass) =>
|
6931
6938
|
class GridMixinClass extends superclass {
|
@@ -7085,7 +7092,7 @@ const GridMixin = (superclass) =>
|
|
7085
7092
|
};
|
7086
7093
|
|
7087
7094
|
const {
|
7088
|
-
host,
|
7095
|
+
host: host$1,
|
7089
7096
|
headerRow,
|
7090
7097
|
headerRowCell,
|
7091
7098
|
contentRow,
|
@@ -7120,15 +7127,15 @@ const GridClass = compose(
|
|
7120
7127
|
fontWeight: { ...contentRow },
|
7121
7128
|
valueTextColor: { ...contentRow, property: 'color' },
|
7122
7129
|
backgroundColor: [
|
7123
|
-
{ ...host, property: 'background-color' },
|
7130
|
+
{ ...host$1, property: 'background-color' },
|
7124
7131
|
{ ...contentRow, property: 'background-color' },
|
7125
7132
|
],
|
7126
7133
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7127
7134
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7128
|
-
inputBorderColor: { ...host, property: 'border-color' },
|
7129
|
-
inputBorderWidth: { ...host, property: 'border-width' },
|
7130
|
-
inputBorderStyle: { ...host, property: 'border-style' },
|
7131
|
-
inputBorderRadius: { ...host, property: 'border-radius' },
|
7135
|
+
inputBorderColor: { ...host$1, property: 'border-color' },
|
7136
|
+
inputBorderWidth: { ...host$1, property: 'border-width' },
|
7137
|
+
inputBorderStyle: { ...host$1, property: 'border-style' },
|
7138
|
+
inputBorderRadius: { ...host$1, property: 'border-radius' },
|
7132
7139
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7133
7140
|
selectedTextColor: { ...selectedRow, property: 'color' },
|
7134
7141
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
@@ -7157,11 +7164,11 @@ const GridClass = compose(
|
|
7157
7164
|
}
|
7158
7165
|
`,
|
7159
7166
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7160
|
-
componentName: componentName$
|
7167
|
+
componentName: componentName$5,
|
7161
7168
|
})
|
7162
7169
|
);
|
7163
7170
|
|
7164
|
-
customElements.define(componentName$
|
7171
|
+
customElements.define(componentName$5, GridClass);
|
7165
7172
|
|
7166
7173
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
7167
7174
|
|
@@ -7492,33 +7499,33 @@ const globals = {
|
|
7492
7499
|
fonts,
|
7493
7500
|
direction,
|
7494
7501
|
};
|
7495
|
-
const vars$
|
7502
|
+
const vars$w = getThemeVars(globals);
|
7496
7503
|
|
7497
|
-
const globalRefs$
|
7504
|
+
const globalRefs$i = getThemeRefs(globals);
|
7498
7505
|
const compVars$4 = ButtonClass.cssVarList;
|
7499
7506
|
|
7500
7507
|
const mode = {
|
7501
|
-
primary: globalRefs$
|
7502
|
-
secondary: globalRefs$
|
7503
|
-
success: globalRefs$
|
7504
|
-
error: globalRefs$
|
7505
|
-
surface: globalRefs$
|
7508
|
+
primary: globalRefs$i.colors.primary,
|
7509
|
+
secondary: globalRefs$i.colors.secondary,
|
7510
|
+
success: globalRefs$i.colors.success,
|
7511
|
+
error: globalRefs$i.colors.error,
|
7512
|
+
surface: globalRefs$i.colors.surface,
|
7506
7513
|
};
|
7507
7514
|
|
7508
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
7515
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
|
7509
7516
|
|
7510
7517
|
const button = {
|
7511
7518
|
...helperTheme$3,
|
7512
7519
|
|
7513
|
-
[compVars$4.fontFamily]: globalRefs$
|
7520
|
+
[compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
|
7514
7521
|
|
7515
7522
|
[compVars$4.cursor]: 'pointer',
|
7516
7523
|
[compVars$4.hostHeight]: '3em',
|
7517
7524
|
[compVars$4.hostWidth]: 'auto',
|
7518
|
-
[compVars$4.hostDirection]: globalRefs$
|
7525
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
7519
7526
|
|
7520
|
-
[compVars$4.borderRadius]: globalRefs$
|
7521
|
-
[compVars$4.borderWidth]: globalRefs$
|
7527
|
+
[compVars$4.borderRadius]: globalRefs$i.radius.sm,
|
7528
|
+
[compVars$4.borderWidth]: globalRefs$i.border.xs,
|
7522
7529
|
[compVars$4.borderStyle]: 'solid',
|
7523
7530
|
[compVars$4.borderColor]: 'transparent',
|
7524
7531
|
|
@@ -7554,10 +7561,10 @@ const button = {
|
|
7554
7561
|
},
|
7555
7562
|
|
7556
7563
|
_disabled: {
|
7557
|
-
[helperVars$3.main]: globalRefs$
|
7558
|
-
[helperVars$3.dark]: globalRefs$
|
7559
|
-
[helperVars$3.light]: globalRefs$
|
7560
|
-
[helperVars$3.contrast]: globalRefs$
|
7564
|
+
[helperVars$3.main]: globalRefs$i.colors.surface.main,
|
7565
|
+
[helperVars$3.dark]: globalRefs$i.colors.surface.dark,
|
7566
|
+
[helperVars$3.light]: globalRefs$i.colors.surface.light,
|
7567
|
+
[helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
|
7561
7568
|
},
|
7562
7569
|
|
7563
7570
|
variant: {
|
@@ -7599,11 +7606,11 @@ const button = {
|
|
7599
7606
|
},
|
7600
7607
|
|
7601
7608
|
_focused: {
|
7602
|
-
[compVars$4.outlineColor]: globalRefs$
|
7609
|
+
[compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
|
7603
7610
|
},
|
7604
7611
|
};
|
7605
7612
|
|
7606
|
-
const vars$
|
7613
|
+
const vars$v = {
|
7607
7614
|
...compVars$4,
|
7608
7615
|
...helperVars$3,
|
7609
7616
|
};
|
@@ -7611,25 +7618,25 @@ const vars$u = {
|
|
7611
7618
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7612
7619
|
__proto__: null,
|
7613
7620
|
default: button,
|
7614
|
-
vars: vars$
|
7621
|
+
vars: vars$v
|
7615
7622
|
});
|
7616
7623
|
|
7617
|
-
const componentName$
|
7618
|
-
const globalRefs$
|
7624
|
+
const componentName$4 = getComponentName('input-wrapper');
|
7625
|
+
const globalRefs$h = getThemeRefs(globals);
|
7619
7626
|
|
7620
|
-
const [theme$1, refs, vars$
|
7627
|
+
const [theme$1, refs, vars$u] = createHelperVars(
|
7621
7628
|
{
|
7622
|
-
labelTextColor: globalRefs$
|
7623
|
-
valueTextColor: globalRefs$
|
7624
|
-
placeholderTextColor: globalRefs$
|
7629
|
+
labelTextColor: globalRefs$h.colors.surface.contrast,
|
7630
|
+
valueTextColor: globalRefs$h.colors.surface.contrast,
|
7631
|
+
placeholderTextColor: globalRefs$h.colors.surface.main,
|
7625
7632
|
requiredIndicator: "'*'",
|
7626
|
-
errorMessageTextColor: globalRefs$
|
7633
|
+
errorMessageTextColor: globalRefs$h.colors.error.main,
|
7627
7634
|
|
7628
|
-
borderWidth: globalRefs$
|
7629
|
-
borderRadius: globalRefs$
|
7635
|
+
borderWidth: globalRefs$h.border.xs,
|
7636
|
+
borderRadius: globalRefs$h.radius.xs,
|
7630
7637
|
borderColor: 'transparent',
|
7631
7638
|
|
7632
|
-
outlineWidth: globalRefs$
|
7639
|
+
outlineWidth: globalRefs$h.border.sm,
|
7633
7640
|
outlineStyle: 'solid',
|
7634
7641
|
outlineColor: 'transparent',
|
7635
7642
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7640,17 +7647,17 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
7640
7647
|
horizontalPadding: '0.5em',
|
7641
7648
|
verticalPadding: '0.5em',
|
7642
7649
|
|
7643
|
-
backgroundColor: globalRefs$
|
7650
|
+
backgroundColor: globalRefs$h.colors.surface.light,
|
7644
7651
|
|
7645
|
-
fontFamily: globalRefs$
|
7652
|
+
fontFamily: globalRefs$h.fonts.font1.family,
|
7646
7653
|
|
7647
|
-
direction: globalRefs$
|
7654
|
+
direction: globalRefs$h.direction,
|
7648
7655
|
|
7649
7656
|
size: {
|
7650
|
-
xs: { fontSize: '12px' },
|
7651
|
-
sm: { fontSize: '14px' },
|
7652
|
-
md: { fontSize: '16px' },
|
7653
|
-
lg: { fontSize: '18px' },
|
7657
|
+
xs: { fontSize: '12px', chipFontSize: '10px' },
|
7658
|
+
sm: { fontSize: '14px', chipFontSize: '12px' },
|
7659
|
+
md: { fontSize: '16px', chipFontSize: '14px' },
|
7660
|
+
lg: { fontSize: '18px', chipFontSize: '16px' },
|
7654
7661
|
},
|
7655
7662
|
|
7656
7663
|
_fullWidth: {
|
@@ -7658,52 +7665,88 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
7658
7665
|
},
|
7659
7666
|
|
7660
7667
|
_focused: {
|
7661
|
-
outlineColor: globalRefs$
|
7668
|
+
outlineColor: globalRefs$h.colors.surface.main,
|
7662
7669
|
_invalid: {
|
7663
|
-
outlineColor: globalRefs$
|
7670
|
+
outlineColor: globalRefs$h.colors.error.main,
|
7664
7671
|
},
|
7665
7672
|
},
|
7666
7673
|
|
7667
7674
|
_bordered: {
|
7668
|
-
outlineWidth: globalRefs$
|
7669
|
-
borderColor: globalRefs$
|
7675
|
+
outlineWidth: globalRefs$h.border.xs,
|
7676
|
+
borderColor: globalRefs$h.colors.surface.main,
|
7670
7677
|
borderStyle: 'solid',
|
7671
7678
|
_invalid: {
|
7672
|
-
borderColor: globalRefs$
|
7679
|
+
borderColor: globalRefs$h.colors.error.main,
|
7673
7680
|
},
|
7674
7681
|
},
|
7675
7682
|
|
7676
7683
|
_disabled: {
|
7677
|
-
labelTextColor: globalRefs$
|
7678
|
-
borderColor: globalRefs$
|
7679
|
-
valueTextColor: globalRefs$
|
7680
|
-
placeholderTextColor: globalRefs$
|
7681
|
-
backgroundColor: globalRefs$
|
7684
|
+
labelTextColor: globalRefs$h.colors.surface.main,
|
7685
|
+
borderColor: globalRefs$h.colors.surface.main,
|
7686
|
+
valueTextColor: globalRefs$h.colors.surface.dark,
|
7687
|
+
placeholderTextColor: globalRefs$h.colors.surface.dark,
|
7688
|
+
backgroundColor: globalRefs$h.colors.surface.main,
|
7682
7689
|
},
|
7683
7690
|
},
|
7684
|
-
componentName$
|
7691
|
+
componentName$4
|
7685
7692
|
);
|
7686
7693
|
|
7687
7694
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7688
7695
|
__proto__: null,
|
7689
7696
|
default: theme$1,
|
7690
7697
|
refs: refs,
|
7691
|
-
vars: vars$
|
7698
|
+
vars: vars$u
|
7692
7699
|
});
|
7693
7700
|
|
7694
|
-
const vars$
|
7701
|
+
const vars$t = TextFieldClass.cssVarList;
|
7695
7702
|
|
7696
7703
|
const textField = {
|
7697
|
-
[vars$
|
7698
|
-
[vars$
|
7699
|
-
[vars$
|
7700
|
-
[vars$
|
7701
|
-
[vars$
|
7702
|
-
[vars$
|
7703
|
-
[vars$
|
7704
|
+
[vars$t.hostWidth]: refs.width,
|
7705
|
+
[vars$t.hostMinWidth]: refs.minWidth,
|
7706
|
+
[vars$t.hostDirection]: refs.direction,
|
7707
|
+
[vars$t.fontSize]: refs.fontSize,
|
7708
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
7709
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
7710
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
7711
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
7712
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
7713
|
+
[vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
|
7714
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
7715
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
7716
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
7717
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
7718
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
7719
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
7720
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
7721
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
7722
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
7723
|
+
[vars$t.inputHeight]: refs.inputHeight,
|
7724
|
+
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
7725
|
+
};
|
7726
|
+
|
7727
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7728
|
+
__proto__: null,
|
7729
|
+
default: textField,
|
7730
|
+
textField: textField,
|
7731
|
+
vars: vars$t
|
7732
|
+
});
|
7733
|
+
|
7734
|
+
const globalRefs$g = getThemeRefs(globals);
|
7735
|
+
const vars$s = PasswordClass.cssVarList;
|
7736
|
+
|
7737
|
+
const password = {
|
7738
|
+
[vars$s.hostWidth]: refs.width,
|
7739
|
+
[vars$s.hostDirection]: refs.direction,
|
7740
|
+
[vars$s.fontSize]: refs.fontSize,
|
7741
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
7742
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
7704
7743
|
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
7744
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
7745
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
7746
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
7747
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
7705
7748
|
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
7706
|
-
[vars$s.
|
7749
|
+
[vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7707
7750
|
[vars$s.inputBorderWidth]: refs.borderWidth,
|
7708
7751
|
[vars$s.inputBorderStyle]: refs.borderStyle,
|
7709
7752
|
[vars$s.inputBorderColor]: refs.borderColor,
|
@@ -7712,34 +7755,28 @@ const textField = {
|
|
7712
7755
|
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
7713
7756
|
[vars$s.inputOutlineColor]: refs.outlineColor,
|
7714
7757
|
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
7715
|
-
[vars$s.
|
7716
|
-
[vars$s.
|
7717
|
-
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
7758
|
+
[vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
|
7759
|
+
[vars$s.revealButtonSize]: refs.toggleButtonSize,
|
7718
7760
|
};
|
7719
7761
|
|
7720
|
-
var
|
7762
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7721
7763
|
__proto__: null,
|
7722
|
-
default:
|
7723
|
-
textField: textField,
|
7764
|
+
default: password,
|
7724
7765
|
vars: vars$s
|
7725
7766
|
});
|
7726
7767
|
|
7727
|
-
const
|
7728
|
-
const vars$r = PasswordClass.cssVarList;
|
7768
|
+
const vars$r = NumberFieldClass.cssVarList;
|
7729
7769
|
|
7730
|
-
const
|
7770
|
+
const numberField = {
|
7731
7771
|
[vars$r.hostWidth]: refs.width,
|
7772
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
7732
7773
|
[vars$r.hostDirection]: refs.direction,
|
7733
7774
|
[vars$r.fontSize]: refs.fontSize,
|
7734
7775
|
[vars$r.fontFamily]: refs.fontFamily,
|
7735
7776
|
[vars$r.labelTextColor]: refs.labelTextColor,
|
7736
7777
|
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
7737
|
-
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7738
|
-
[vars$r.inputHeight]: refs.inputHeight,
|
7739
|
-
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7740
|
-
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7741
7778
|
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
7742
|
-
[vars$r.
|
7779
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
7743
7780
|
[vars$r.inputBorderWidth]: refs.borderWidth,
|
7744
7781
|
[vars$r.inputBorderStyle]: refs.borderStyle,
|
7745
7782
|
[vars$r.inputBorderColor]: refs.borderColor,
|
@@ -7748,19 +7785,21 @@ const password = {
|
|
7748
7785
|
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7749
7786
|
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7750
7787
|
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7751
|
-
[vars$r.
|
7752
|
-
[vars$r.
|
7788
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7789
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7790
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7791
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
7753
7792
|
};
|
7754
7793
|
|
7755
|
-
var
|
7794
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7756
7795
|
__proto__: null,
|
7757
|
-
default:
|
7796
|
+
default: numberField,
|
7758
7797
|
vars: vars$r
|
7759
7798
|
});
|
7760
7799
|
|
7761
|
-
const vars$q =
|
7800
|
+
const vars$q = EmailFieldClass.cssVarList;
|
7762
7801
|
|
7763
|
-
const
|
7802
|
+
const emailField = {
|
7764
7803
|
[vars$q.hostWidth]: refs.width,
|
7765
7804
|
[vars$q.hostMinWidth]: refs.minWidth,
|
7766
7805
|
[vars$q.hostDirection]: refs.direction,
|
@@ -7769,6 +7808,7 @@ const numberField = {
|
|
7769
7808
|
[vars$q.labelTextColor]: refs.labelTextColor,
|
7770
7809
|
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
7771
7810
|
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
7811
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7772
7812
|
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
7773
7813
|
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7774
7814
|
[vars$q.inputBorderStyle]: refs.borderStyle,
|
@@ -7779,201 +7819,168 @@ const numberField = {
|
|
7779
7819
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7780
7820
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7781
7821
|
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7782
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7783
7822
|
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7784
7823
|
[vars$q.inputHeight]: refs.inputHeight,
|
7785
7824
|
};
|
7786
7825
|
|
7787
|
-
var
|
7826
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7788
7827
|
__proto__: null,
|
7789
|
-
default:
|
7828
|
+
default: emailField,
|
7790
7829
|
vars: vars$q
|
7791
7830
|
});
|
7792
7831
|
|
7793
|
-
const
|
7832
|
+
const globalRefs$f = getThemeRefs(globals);
|
7833
|
+
const vars$p = TextAreaClass.cssVarList;
|
7794
7834
|
|
7795
|
-
const
|
7835
|
+
const textArea = {
|
7796
7836
|
[vars$p.hostWidth]: refs.width,
|
7797
7837
|
[vars$p.hostMinWidth]: refs.minWidth,
|
7798
7838
|
[vars$p.hostDirection]: refs.direction,
|
7799
7839
|
[vars$p.fontSize]: refs.fontSize,
|
7800
7840
|
[vars$p.fontFamily]: refs.fontFamily,
|
7801
7841
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
7842
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7802
7843
|
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7844
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7803
7845
|
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7804
|
-
[vars$p.
|
7805
|
-
[vars$p.
|
7846
|
+
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7847
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
7806
7848
|
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7807
7849
|
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7808
7850
|
[vars$p.inputBorderColor]: refs.borderColor,
|
7809
|
-
[vars$p.inputBorderRadius]: refs.borderRadius,
|
7810
7851
|
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
7811
7852
|
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7812
7853
|
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7813
7854
|
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7814
|
-
[vars$p.
|
7815
|
-
[vars$p.
|
7816
|
-
|
7855
|
+
[vars$p.inputResizeType]: 'vertical',
|
7856
|
+
[vars$p.inputMinHeight]: '5em',
|
7857
|
+
|
7858
|
+
_disabled: {
|
7859
|
+
[vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
7860
|
+
},
|
7861
|
+
|
7862
|
+
_readonly: {
|
7863
|
+
[vars$p.inputResizeType]: 'none',
|
7864
|
+
},
|
7817
7865
|
};
|
7818
7866
|
|
7819
|
-
var
|
7867
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7820
7868
|
__proto__: null,
|
7821
|
-
default:
|
7869
|
+
default: textArea,
|
7822
7870
|
vars: vars$p
|
7823
7871
|
});
|
7824
7872
|
|
7825
|
-
const
|
7826
|
-
const
|
7873
|
+
const vars$o = CheckboxClass.cssVarList;
|
7874
|
+
const checkboxSize = '1.35em';
|
7827
7875
|
|
7828
|
-
const
|
7876
|
+
const checkbox = {
|
7829
7877
|
[vars$o.hostWidth]: refs.width,
|
7830
|
-
[vars$o.hostMinWidth]: refs.minWidth,
|
7831
7878
|
[vars$o.hostDirection]: refs.direction,
|
7832
7879
|
[vars$o.fontSize]: refs.fontSize,
|
7833
7880
|
[vars$o.fontFamily]: refs.fontFamily,
|
7834
7881
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7835
7882
|
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7883
|
+
[vars$o.labelFontWeight]: '400',
|
7884
|
+
[vars$o.labelLineHeight]: checkboxSize,
|
7885
|
+
[vars$o.labelSpacing]: '1em',
|
7836
7886
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7837
|
-
[vars$o.
|
7838
|
-
[vars$o.
|
7839
|
-
[vars$o.
|
7887
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
7888
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7889
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7890
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
7840
7891
|
[vars$o.inputBorderRadius]: refs.borderRadius,
|
7892
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
7841
7893
|
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7842
7894
|
[vars$o.inputBorderStyle]: refs.borderStyle,
|
7843
|
-
[vars$o.
|
7844
|
-
[vars$o.
|
7845
|
-
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
7846
|
-
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7847
|
-
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7848
|
-
[vars$o.inputResizeType]: 'vertical',
|
7849
|
-
[vars$o.inputMinHeight]: '5em',
|
7895
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7896
|
+
[vars$o.inputSize]: checkboxSize,
|
7850
7897
|
|
7851
|
-
|
7852
|
-
[vars$o.
|
7898
|
+
_checked: {
|
7899
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7853
7900
|
},
|
7854
7901
|
|
7855
|
-
|
7856
|
-
[vars$o.
|
7902
|
+
_disabled: {
|
7903
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
7857
7904
|
},
|
7858
7905
|
};
|
7859
7906
|
|
7860
|
-
var
|
7907
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7861
7908
|
__proto__: null,
|
7862
|
-
default:
|
7909
|
+
default: checkbox,
|
7863
7910
|
vars: vars$o
|
7864
7911
|
});
|
7865
7912
|
|
7866
|
-
const
|
7867
|
-
const
|
7913
|
+
const knobMargin = '2px';
|
7914
|
+
const checkboxHeight = '1.25em';
|
7868
7915
|
|
7869
|
-
const
|
7916
|
+
const globalRefs$e = getThemeRefs(globals);
|
7917
|
+
const vars$n = SwitchToggleClass.cssVarList;
|
7918
|
+
|
7919
|
+
const switchToggle = {
|
7870
7920
|
[vars$n.hostWidth]: refs.width,
|
7871
7921
|
[vars$n.hostDirection]: refs.direction,
|
7872
7922
|
[vars$n.fontSize]: refs.fontSize,
|
7873
7923
|
[vars$n.fontFamily]: refs.fontFamily,
|
7874
|
-
|
7875
|
-
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7876
|
-
[vars$n.labelFontWeight]: '400',
|
7877
|
-
[vars$n.labelLineHeight]: checkboxSize,
|
7878
|
-
[vars$n.labelSpacing]: '1em',
|
7879
|
-
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7924
|
+
|
7880
7925
|
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
7881
7926
|
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7882
7927
|
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7883
7928
|
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7884
|
-
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7885
|
-
[vars$n.inputBorderColor]: refs.borderColor,
|
7886
|
-
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7887
|
-
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7888
|
-
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7889
|
-
[vars$n.inputSize]: checkboxSize,
|
7890
|
-
|
7891
|
-
_checked: {
|
7892
|
-
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7893
|
-
},
|
7894
|
-
|
7895
|
-
_disabled: {
|
7896
|
-
[vars$n.labelTextColor]: refs.labelTextColor,
|
7897
|
-
},
|
7898
|
-
};
|
7899
|
-
|
7900
|
-
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7901
|
-
__proto__: null,
|
7902
|
-
default: checkbox,
|
7903
|
-
vars: vars$n
|
7904
|
-
});
|
7905
|
-
|
7906
|
-
const knobMargin = '2px';
|
7907
|
-
const checkboxHeight = '1.25em';
|
7908
7929
|
|
7909
|
-
|
7910
|
-
|
7930
|
+
[vars$n.trackBorderStyle]: refs.borderStyle,
|
7931
|
+
[vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7932
|
+
[vars$n.trackBorderColor]: refs.borderColor,
|
7933
|
+
[vars$n.trackBackgroundColor]: 'none',
|
7934
|
+
[vars$n.trackBorderRadius]: globalRefs$e.radius.md,
|
7935
|
+
[vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7936
|
+
[vars$n.trackHeight]: checkboxHeight,
|
7937
|
+
|
7938
|
+
[vars$n.knobSize]: `calc(1em - ${knobMargin})`,
|
7939
|
+
[vars$n.knobRadius]: '50%',
|
7940
|
+
[vars$n.knobTopOffset]: '1px',
|
7941
|
+
[vars$n.knobLeftOffset]: knobMargin,
|
7942
|
+
[vars$n.knobColor]: refs.valueTextColor,
|
7943
|
+
[vars$n.knobTransitionDuration]: '0.3s',
|
7911
7944
|
|
7912
|
-
|
7913
|
-
[vars$
|
7914
|
-
[vars$
|
7915
|
-
[vars$
|
7916
|
-
[vars$
|
7917
|
-
|
7918
|
-
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
7919
|
-
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7920
|
-
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7921
|
-
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7922
|
-
|
7923
|
-
[vars$m.trackBorderStyle]: refs.borderStyle,
|
7924
|
-
[vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7925
|
-
[vars$m.trackBorderColor]: refs.borderColor,
|
7926
|
-
[vars$m.trackBackgroundColor]: 'none',
|
7927
|
-
[vars$m.trackBorderRadius]: globalRefs$d.radius.md,
|
7928
|
-
[vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7929
|
-
[vars$m.trackHeight]: checkboxHeight,
|
7930
|
-
|
7931
|
-
[vars$m.knobSize]: `calc(1em - ${knobMargin})`,
|
7932
|
-
[vars$m.knobRadius]: '50%',
|
7933
|
-
[vars$m.knobTopOffset]: '1px',
|
7934
|
-
[vars$m.knobLeftOffset]: knobMargin,
|
7935
|
-
[vars$m.knobColor]: refs.valueTextColor,
|
7936
|
-
[vars$m.knobTransitionDuration]: '0.3s',
|
7937
|
-
|
7938
|
-
[vars$m.labelTextColor]: refs.labelTextColor,
|
7939
|
-
[vars$m.labelFontWeight]: '400',
|
7940
|
-
[vars$m.labelLineHeight]: '1.35em',
|
7941
|
-
[vars$m.labelSpacing]: '1em',
|
7942
|
-
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7943
|
-
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7945
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
7946
|
+
[vars$n.labelFontWeight]: '400',
|
7947
|
+
[vars$n.labelLineHeight]: '1.35em',
|
7948
|
+
[vars$n.labelSpacing]: '1em',
|
7949
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7950
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7944
7951
|
|
7945
7952
|
_checked: {
|
7946
|
-
[vars$
|
7947
|
-
[vars$
|
7948
|
-
[vars$
|
7949
|
-
[vars$
|
7950
|
-
[vars$
|
7953
|
+
[vars$n.trackBorderColor]: refs.borderColor,
|
7954
|
+
[vars$n.trackBackgroundColor]: refs.backgroundColor,
|
7955
|
+
[vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
|
7956
|
+
[vars$n.knobColor]: refs.valueTextColor,
|
7957
|
+
[vars$n.knobTextColor]: refs.valueTextColor,
|
7951
7958
|
},
|
7952
7959
|
|
7953
7960
|
_disabled: {
|
7954
|
-
[vars$
|
7955
|
-
[vars$
|
7956
|
-
[vars$
|
7957
|
-
[vars$
|
7961
|
+
[vars$n.knobColor]: globalRefs$e.colors.surface.light,
|
7962
|
+
[vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
|
7963
|
+
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
7964
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
7958
7965
|
_checked: {
|
7959
|
-
[vars$
|
7960
|
-
[vars$
|
7966
|
+
[vars$n.knobColor]: globalRefs$e.colors.surface.light,
|
7967
|
+
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
7961
7968
|
},
|
7962
7969
|
},
|
7963
7970
|
|
7964
7971
|
_invalid: {
|
7965
|
-
[vars$
|
7966
|
-
[vars$
|
7972
|
+
[vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
|
7973
|
+
[vars$n.knobColor]: globalRefs$e.colors.error.main,
|
7967
7974
|
},
|
7968
7975
|
};
|
7969
7976
|
|
7970
7977
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7971
7978
|
__proto__: null,
|
7972
7979
|
default: switchToggle,
|
7973
|
-
vars: vars$
|
7980
|
+
vars: vars$n
|
7974
7981
|
});
|
7975
7982
|
|
7976
|
-
const globalRefs$
|
7983
|
+
const globalRefs$d = getThemeRefs(globals);
|
7977
7984
|
|
7978
7985
|
const compVars$3 = ContainerClass.cssVarList;
|
7979
7986
|
|
@@ -7995,7 +8002,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7995
8002
|
horizontalAlignment,
|
7996
8003
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7997
8004
|
},
|
7998
|
-
componentName$
|
8005
|
+
componentName$y
|
7999
8006
|
);
|
8000
8007
|
|
8001
8008
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -8005,8 +8012,8 @@ const container = {
|
|
8005
8012
|
|
8006
8013
|
[compVars$3.hostWidth]: '100%',
|
8007
8014
|
[compVars$3.boxShadow]: 'none',
|
8008
|
-
[compVars$3.backgroundColor]: globalRefs$
|
8009
|
-
[compVars$3.color]: globalRefs$
|
8015
|
+
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
|
8016
|
+
[compVars$3.color]: globalRefs$d.colors.surface.contrast,
|
8010
8017
|
[compVars$3.borderRadius]: '0px',
|
8011
8018
|
|
8012
8019
|
verticalPadding: {
|
@@ -8053,34 +8060,34 @@ const container = {
|
|
8053
8060
|
|
8054
8061
|
shadow: {
|
8055
8062
|
sm: {
|
8056
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8063
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
|
8057
8064
|
},
|
8058
8065
|
md: {
|
8059
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8066
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
|
8060
8067
|
},
|
8061
8068
|
lg: {
|
8062
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8069
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
|
8063
8070
|
},
|
8064
8071
|
xl: {
|
8065
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8072
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
|
8066
8073
|
},
|
8067
8074
|
'2xl': {
|
8068
8075
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
8069
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8076
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
|
8070
8077
|
},
|
8071
8078
|
},
|
8072
8079
|
|
8073
8080
|
borderRadius: {
|
8074
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
8075
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
8076
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
8077
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
8078
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
8079
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
8081
|
+
sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
|
8082
|
+
md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
|
8083
|
+
lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
|
8084
|
+
xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
|
8085
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
|
8086
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
|
8080
8087
|
},
|
8081
8088
|
};
|
8082
8089
|
|
8083
|
-
const vars$
|
8090
|
+
const vars$m = {
|
8084
8091
|
...compVars$3,
|
8085
8092
|
...helperVars$2,
|
8086
8093
|
};
|
@@ -8088,154 +8095,154 @@ const vars$l = {
|
|
8088
8095
|
var container$1 = /*#__PURE__*/Object.freeze({
|
8089
8096
|
__proto__: null,
|
8090
8097
|
default: container,
|
8091
|
-
vars: vars$
|
8098
|
+
vars: vars$m
|
8092
8099
|
});
|
8093
8100
|
|
8094
|
-
const vars$
|
8101
|
+
const vars$l = LogoClass.cssVarList;
|
8095
8102
|
|
8096
8103
|
const logo$1 = {
|
8097
|
-
[vars$
|
8104
|
+
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
8098
8105
|
};
|
8099
8106
|
|
8100
8107
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
8101
8108
|
__proto__: null,
|
8102
8109
|
default: logo$1,
|
8103
|
-
vars: vars$
|
8110
|
+
vars: vars$l
|
8104
8111
|
});
|
8105
8112
|
|
8106
|
-
const vars$
|
8113
|
+
const vars$k = TotpImageClass.cssVarList;
|
8107
8114
|
|
8108
8115
|
const logo = {
|
8109
|
-
[vars$
|
8116
|
+
[vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
8110
8117
|
};
|
8111
8118
|
|
8112
8119
|
var totpImage = /*#__PURE__*/Object.freeze({
|
8113
8120
|
__proto__: null,
|
8114
8121
|
default: logo,
|
8115
|
-
vars: vars$
|
8122
|
+
vars: vars$k
|
8116
8123
|
});
|
8117
8124
|
|
8118
|
-
const globalRefs$
|
8119
|
-
const vars$
|
8125
|
+
const globalRefs$c = getThemeRefs(globals);
|
8126
|
+
const vars$j = TextClass.cssVarList;
|
8120
8127
|
|
8121
8128
|
const text = {
|
8122
|
-
[vars$
|
8123
|
-
[vars$
|
8124
|
-
[vars$
|
8125
|
-
[vars$
|
8129
|
+
[vars$j.hostDirection]: globalRefs$c.direction,
|
8130
|
+
[vars$j.textLineHeight]: '1.35em',
|
8131
|
+
[vars$j.textAlign]: 'left',
|
8132
|
+
[vars$j.textColor]: globalRefs$c.colors.surface.dark,
|
8126
8133
|
variant: {
|
8127
8134
|
h1: {
|
8128
|
-
[vars$
|
8129
|
-
[vars$
|
8130
|
-
[vars$
|
8135
|
+
[vars$j.fontSize]: globalRefs$c.typography.h1.size,
|
8136
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
|
8137
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h1.font,
|
8131
8138
|
},
|
8132
8139
|
h2: {
|
8133
|
-
[vars$
|
8134
|
-
[vars$
|
8135
|
-
[vars$
|
8140
|
+
[vars$j.fontSize]: globalRefs$c.typography.h2.size,
|
8141
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
|
8142
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h2.font,
|
8136
8143
|
},
|
8137
8144
|
h3: {
|
8138
|
-
[vars$
|
8139
|
-
[vars$
|
8140
|
-
[vars$
|
8145
|
+
[vars$j.fontSize]: globalRefs$c.typography.h3.size,
|
8146
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
|
8147
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h3.font,
|
8141
8148
|
},
|
8142
8149
|
subtitle1: {
|
8143
|
-
[vars$
|
8144
|
-
[vars$
|
8145
|
-
[vars$
|
8150
|
+
[vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
|
8151
|
+
[vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
|
8152
|
+
[vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
|
8146
8153
|
},
|
8147
8154
|
subtitle2: {
|
8148
|
-
[vars$
|
8149
|
-
[vars$
|
8150
|
-
[vars$
|
8155
|
+
[vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
|
8156
|
+
[vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
|
8157
|
+
[vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
|
8151
8158
|
},
|
8152
8159
|
body1: {
|
8153
|
-
[vars$
|
8154
|
-
[vars$
|
8155
|
-
[vars$
|
8160
|
+
[vars$j.fontSize]: globalRefs$c.typography.body1.size,
|
8161
|
+
[vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
|
8162
|
+
[vars$j.fontFamily]: globalRefs$c.typography.body1.font,
|
8156
8163
|
},
|
8157
8164
|
body2: {
|
8158
|
-
[vars$
|
8159
|
-
[vars$
|
8160
|
-
[vars$
|
8165
|
+
[vars$j.fontSize]: globalRefs$c.typography.body2.size,
|
8166
|
+
[vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
|
8167
|
+
[vars$j.fontFamily]: globalRefs$c.typography.body2.font,
|
8161
8168
|
},
|
8162
8169
|
},
|
8163
8170
|
|
8164
8171
|
mode: {
|
8165
8172
|
primary: {
|
8166
|
-
[vars$
|
8173
|
+
[vars$j.textColor]: globalRefs$c.colors.primary.main,
|
8167
8174
|
},
|
8168
8175
|
secondary: {
|
8169
|
-
[vars$
|
8176
|
+
[vars$j.textColor]: globalRefs$c.colors.secondary.main,
|
8170
8177
|
},
|
8171
8178
|
error: {
|
8172
|
-
[vars$
|
8179
|
+
[vars$j.textColor]: globalRefs$c.colors.error.main,
|
8173
8180
|
},
|
8174
8181
|
success: {
|
8175
|
-
[vars$
|
8182
|
+
[vars$j.textColor]: globalRefs$c.colors.success.main,
|
8176
8183
|
},
|
8177
8184
|
},
|
8178
8185
|
|
8179
8186
|
textAlign: {
|
8180
|
-
right: { [vars$
|
8181
|
-
left: { [vars$
|
8182
|
-
center: { [vars$
|
8187
|
+
right: { [vars$j.textAlign]: 'right' },
|
8188
|
+
left: { [vars$j.textAlign]: 'left' },
|
8189
|
+
center: { [vars$j.textAlign]: 'center' },
|
8183
8190
|
},
|
8184
8191
|
|
8185
8192
|
_fullWidth: {
|
8186
|
-
[vars$
|
8193
|
+
[vars$j.hostWidth]: '100%',
|
8187
8194
|
},
|
8188
8195
|
|
8189
8196
|
_italic: {
|
8190
|
-
[vars$
|
8197
|
+
[vars$j.fontStyle]: 'italic',
|
8191
8198
|
},
|
8192
8199
|
|
8193
8200
|
_uppercase: {
|
8194
|
-
[vars$
|
8201
|
+
[vars$j.textTransform]: 'uppercase',
|
8195
8202
|
},
|
8196
8203
|
|
8197
8204
|
_lowercase: {
|
8198
|
-
[vars$
|
8205
|
+
[vars$j.textTransform]: 'lowercase',
|
8199
8206
|
},
|
8200
8207
|
};
|
8201
8208
|
|
8202
8209
|
var text$1 = /*#__PURE__*/Object.freeze({
|
8203
8210
|
__proto__: null,
|
8204
8211
|
default: text,
|
8205
|
-
vars: vars$
|
8212
|
+
vars: vars$j
|
8206
8213
|
});
|
8207
8214
|
|
8208
|
-
const globalRefs$
|
8209
|
-
const vars$
|
8215
|
+
const globalRefs$b = getThemeRefs(globals);
|
8216
|
+
const vars$i = LinkClass.cssVarList;
|
8210
8217
|
|
8211
8218
|
const link = {
|
8212
|
-
[vars$
|
8213
|
-
[vars$
|
8219
|
+
[vars$i.hostDirection]: globalRefs$b.direction,
|
8220
|
+
[vars$i.cursor]: 'pointer',
|
8214
8221
|
|
8215
|
-
[vars$
|
8222
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
8216
8223
|
|
8217
8224
|
textAlign: {
|
8218
|
-
right: { [vars$
|
8219
|
-
left: { [vars$
|
8220
|
-
center: { [vars$
|
8225
|
+
right: { [vars$i.textAlign]: 'right' },
|
8226
|
+
left: { [vars$i.textAlign]: 'left' },
|
8227
|
+
center: { [vars$i.textAlign]: 'center' },
|
8221
8228
|
},
|
8222
8229
|
|
8223
8230
|
_fullWidth: {
|
8224
|
-
[vars$
|
8231
|
+
[vars$i.hostWidth]: '100%',
|
8225
8232
|
},
|
8226
8233
|
|
8227
8234
|
mode: {
|
8228
8235
|
primary: {
|
8229
|
-
[vars$
|
8236
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
8230
8237
|
},
|
8231
8238
|
secondary: {
|
8232
|
-
[vars$
|
8239
|
+
[vars$i.textColor]: globalRefs$b.colors.secondary.main,
|
8233
8240
|
},
|
8234
8241
|
error: {
|
8235
|
-
[vars$
|
8242
|
+
[vars$i.textColor]: globalRefs$b.colors.error.main,
|
8236
8243
|
},
|
8237
8244
|
success: {
|
8238
|
-
[vars$
|
8245
|
+
[vars$i.textColor]: globalRefs$b.colors.success.main,
|
8239
8246
|
},
|
8240
8247
|
},
|
8241
8248
|
};
|
@@ -8243,10 +8250,10 @@ const link = {
|
|
8243
8250
|
var link$1 = /*#__PURE__*/Object.freeze({
|
8244
8251
|
__proto__: null,
|
8245
8252
|
default: link,
|
8246
|
-
vars: vars$
|
8253
|
+
vars: vars$i
|
8247
8254
|
});
|
8248
8255
|
|
8249
|
-
const globalRefs$
|
8256
|
+
const globalRefs$a = getThemeRefs(globals);
|
8250
8257
|
const compVars$2 = DividerClass.cssVarList;
|
8251
8258
|
|
8252
8259
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -8254,18 +8261,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8254
8261
|
thickness: '2px',
|
8255
8262
|
spacing: '10px',
|
8256
8263
|
},
|
8257
|
-
componentName$
|
8264
|
+
componentName$w
|
8258
8265
|
);
|
8259
8266
|
|
8260
8267
|
const divider = {
|
8261
8268
|
...helperTheme$1,
|
8262
8269
|
|
8263
|
-
[compVars$2.hostDirection]: globalRefs$
|
8270
|
+
[compVars$2.hostDirection]: globalRefs$a.direction,
|
8264
8271
|
[compVars$2.alignItems]: 'center',
|
8265
8272
|
[compVars$2.flexDirection]: 'row',
|
8266
8273
|
[compVars$2.alignSelf]: 'stretch',
|
8267
8274
|
[compVars$2.hostWidth]: '100%',
|
8268
|
-
[compVars$2.stripeColor]: globalRefs$
|
8275
|
+
[compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
|
8269
8276
|
[compVars$2.stripeColorOpacity]: '0.5',
|
8270
8277
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8271
8278
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -8285,7 +8292,7 @@ const divider = {
|
|
8285
8292
|
},
|
8286
8293
|
};
|
8287
8294
|
|
8288
|
-
const vars$
|
8295
|
+
const vars$h = {
|
8289
8296
|
...compVars$2,
|
8290
8297
|
...helperVars$1,
|
8291
8298
|
};
|
@@ -8293,100 +8300,100 @@ const vars$g = {
|
|
8293
8300
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
8294
8301
|
__proto__: null,
|
8295
8302
|
default: divider,
|
8296
|
-
vars: vars$
|
8303
|
+
vars: vars$h
|
8297
8304
|
});
|
8298
8305
|
|
8299
|
-
const vars$
|
8306
|
+
const vars$g = PasscodeClass.cssVarList;
|
8300
8307
|
|
8301
8308
|
const passcode = {
|
8302
|
-
[vars$
|
8303
|
-
[vars$
|
8304
|
-
[vars$
|
8305
|
-
[vars$
|
8306
|
-
[vars$
|
8307
|
-
[vars$
|
8308
|
-
[vars$
|
8309
|
-
[vars$
|
8310
|
-
[vars$
|
8311
|
-
[vars$
|
8312
|
-
[vars$
|
8313
|
-
[vars$
|
8314
|
-
[vars$
|
8315
|
-
[vars$
|
8316
|
-
[vars$
|
8309
|
+
[vars$g.hostDirection]: refs.direction,
|
8310
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
8311
|
+
[vars$g.fontSize]: refs.fontSize,
|
8312
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
8313
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
8314
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
8315
|
+
[vars$g.digitValueTextColor]: refs.valueTextColor,
|
8316
|
+
[vars$g.digitPadding]: '0',
|
8317
|
+
[vars$g.digitTextAlign]: 'center',
|
8318
|
+
[vars$g.digitSpacing]: '4px',
|
8319
|
+
[vars$g.hostWidth]: refs.width,
|
8320
|
+
[vars$g.digitOutlineColor]: 'transparent',
|
8321
|
+
[vars$g.digitOutlineWidth]: refs.outlineWidth,
|
8322
|
+
[vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8323
|
+
[vars$g.digitSize]: refs.inputHeight,
|
8317
8324
|
|
8318
8325
|
_hideCursor: {
|
8319
|
-
[vars$
|
8326
|
+
[vars$g.digitCaretTextColor]: 'transparent',
|
8320
8327
|
},
|
8321
8328
|
};
|
8322
8329
|
|
8323
8330
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8324
8331
|
__proto__: null,
|
8325
8332
|
default: passcode,
|
8326
|
-
vars: vars$
|
8333
|
+
vars: vars$g
|
8327
8334
|
});
|
8328
8335
|
|
8329
|
-
const globalRefs$
|
8330
|
-
const vars$
|
8336
|
+
const globalRefs$9 = getThemeRefs(globals);
|
8337
|
+
const vars$f = LoaderLinearClass.cssVarList;
|
8331
8338
|
|
8332
8339
|
const loaderLinear = {
|
8333
|
-
[vars$
|
8334
|
-
[vars$
|
8340
|
+
[vars$f.hostDisplay]: 'inline-block',
|
8341
|
+
[vars$f.hostWidth]: '100%',
|
8335
8342
|
|
8336
|
-
[vars$
|
8337
|
-
[vars$
|
8343
|
+
[vars$f.barColor]: globalRefs$9.colors.surface.contrast,
|
8344
|
+
[vars$f.barWidth]: '20%',
|
8338
8345
|
|
8339
|
-
[vars$
|
8340
|
-
[vars$
|
8346
|
+
[vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
|
8347
|
+
[vars$f.barBorderRadius]: '4px',
|
8341
8348
|
|
8342
|
-
[vars$
|
8343
|
-
[vars$
|
8344
|
-
[vars$
|
8345
|
-
[vars$
|
8349
|
+
[vars$f.animationDuration]: '2s',
|
8350
|
+
[vars$f.animationTimingFunction]: 'linear',
|
8351
|
+
[vars$f.animationIterationCount]: 'infinite',
|
8352
|
+
[vars$f.verticalPadding]: '0.25em',
|
8346
8353
|
|
8347
8354
|
size: {
|
8348
|
-
xs: { [vars$
|
8349
|
-
sm: { [vars$
|
8350
|
-
md: { [vars$
|
8351
|
-
lg: { [vars$
|
8355
|
+
xs: { [vars$f.barHeight]: '2px' },
|
8356
|
+
sm: { [vars$f.barHeight]: '4px' },
|
8357
|
+
md: { [vars$f.barHeight]: '6px' },
|
8358
|
+
lg: { [vars$f.barHeight]: '8px' },
|
8352
8359
|
},
|
8353
8360
|
|
8354
8361
|
mode: {
|
8355
8362
|
primary: {
|
8356
|
-
[vars$
|
8363
|
+
[vars$f.barColor]: globalRefs$9.colors.primary.main,
|
8357
8364
|
},
|
8358
8365
|
secondary: {
|
8359
|
-
[vars$
|
8366
|
+
[vars$f.barColor]: globalRefs$9.colors.secondary.main,
|
8360
8367
|
},
|
8361
8368
|
},
|
8362
8369
|
|
8363
8370
|
_hidden: {
|
8364
|
-
[vars$
|
8371
|
+
[vars$f.hostDisplay]: 'none',
|
8365
8372
|
},
|
8366
8373
|
};
|
8367
8374
|
|
8368
8375
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8369
8376
|
__proto__: null,
|
8370
8377
|
default: loaderLinear,
|
8371
|
-
vars: vars$
|
8378
|
+
vars: vars$f
|
8372
8379
|
});
|
8373
8380
|
|
8374
|
-
const globalRefs$
|
8381
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8375
8382
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
8376
8383
|
|
8377
8384
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8378
8385
|
{
|
8379
|
-
spinnerColor: globalRefs$
|
8386
|
+
spinnerColor: globalRefs$8.colors.surface.contrast,
|
8380
8387
|
mode: {
|
8381
8388
|
primary: {
|
8382
|
-
spinnerColor: globalRefs$
|
8389
|
+
spinnerColor: globalRefs$8.colors.primary.main,
|
8383
8390
|
},
|
8384
8391
|
secondary: {
|
8385
|
-
spinnerColor: globalRefs$
|
8392
|
+
spinnerColor: globalRefs$8.colors.secondary.main,
|
8386
8393
|
},
|
8387
8394
|
},
|
8388
8395
|
},
|
8389
|
-
componentName$
|
8396
|
+
componentName$z
|
8390
8397
|
);
|
8391
8398
|
|
8392
8399
|
const loaderRadial = {
|
@@ -8415,7 +8422,7 @@ const loaderRadial = {
|
|
8415
8422
|
[compVars$1.hostDisplay]: 'none',
|
8416
8423
|
},
|
8417
8424
|
};
|
8418
|
-
const vars$
|
8425
|
+
const vars$e = {
|
8419
8426
|
...compVars$1,
|
8420
8427
|
...helperVars,
|
8421
8428
|
};
|
@@ -8423,76 +8430,112 @@ const vars$d = {
|
|
8423
8430
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
8424
8431
|
__proto__: null,
|
8425
8432
|
default: loaderRadial,
|
8426
|
-
vars: vars$
|
8433
|
+
vars: vars$e
|
8427
8434
|
});
|
8428
8435
|
|
8429
|
-
const globalRefs$
|
8430
|
-
const vars$
|
8436
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8437
|
+
const vars$d = ComboBoxClass.cssVarList;
|
8431
8438
|
|
8432
8439
|
const comboBox = {
|
8433
|
-
[vars$
|
8434
|
-
[vars$
|
8435
|
-
[vars$
|
8436
|
-
[vars$
|
8437
|
-
[vars$
|
8438
|
-
[vars$
|
8439
|
-
[vars$
|
8440
|
-
[vars$
|
8441
|
-
[vars$
|
8442
|
-
[vars$
|
8443
|
-
[vars$
|
8444
|
-
[vars$
|
8445
|
-
[vars$
|
8446
|
-
[vars$
|
8447
|
-
[vars$
|
8448
|
-
[vars$
|
8449
|
-
[vars$
|
8450
|
-
[vars$
|
8451
|
-
[vars$
|
8452
|
-
[vars$
|
8453
|
-
[vars$
|
8454
|
-
[vars$
|
8455
|
-
[vars$
|
8456
|
-
[vars$
|
8457
|
-
[vars$
|
8458
|
-
[vars$
|
8440
|
+
[vars$d.hostWidth]: refs.width,
|
8441
|
+
[vars$d.hostDirection]: refs.direction,
|
8442
|
+
[vars$d.fontSize]: refs.fontSize,
|
8443
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
8444
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
8445
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
8446
|
+
[vars$d.inputBorderColor]: refs.borderColor,
|
8447
|
+
[vars$d.inputBorderWidth]: refs.borderWidth,
|
8448
|
+
[vars$d.inputBorderStyle]: refs.borderStyle,
|
8449
|
+
[vars$d.inputBorderRadius]: refs.borderRadius,
|
8450
|
+
[vars$d.inputOutlineColor]: refs.outlineColor,
|
8451
|
+
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
8452
|
+
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
8453
|
+
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
8454
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
8455
|
+
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
8456
|
+
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8457
|
+
[vars$d.inputBackgroundColor]: refs.backgroundColor,
|
8458
|
+
[vars$d.inputHorizontalPadding]: refs.horizontalPadding,
|
8459
|
+
[vars$d.inputHeight]: refs.inputHeight,
|
8460
|
+
[vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
|
8461
|
+
[vars$d.inputDropdownButtonCursor]: 'pointer',
|
8462
|
+
[vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8463
|
+
[vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
8464
|
+
[vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
|
8465
|
+
[vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
|
8459
8466
|
|
8460
8467
|
_readonly: {
|
8461
|
-
[vars$
|
8468
|
+
[vars$d.inputDropdownButtonCursor]: 'default',
|
8462
8469
|
},
|
8463
8470
|
|
8464
8471
|
// Overlay theme exposed via the component:
|
8465
|
-
[vars$
|
8466
|
-
[vars$
|
8467
|
-
[vars$
|
8468
|
-
[vars$
|
8472
|
+
[vars$d.overlayFontSize]: refs.fontSize,
|
8473
|
+
[vars$d.overlayFontFamily]: refs.fontFamily,
|
8474
|
+
[vars$d.overlayCursor]: 'pointer',
|
8475
|
+
[vars$d.overlayItemBoxShadow]: 'none',
|
8469
8476
|
|
8470
8477
|
// Overlay direct theme:
|
8471
|
-
[vars$
|
8472
|
-
[vars$
|
8478
|
+
[vars$d.overlay.minHeight]: '400px',
|
8479
|
+
[vars$d.overlay.margin]: '0',
|
8473
8480
|
};
|
8474
8481
|
|
8475
8482
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
8476
8483
|
__proto__: null,
|
8477
8484
|
comboBox: comboBox,
|
8478
8485
|
default: comboBox,
|
8479
|
-
vars: vars$
|
8486
|
+
vars: vars$d
|
8480
8487
|
});
|
8481
8488
|
|
8482
|
-
const vars$
|
8489
|
+
const vars$c = ImageClass.cssVarList;
|
8483
8490
|
|
8484
8491
|
const image = {};
|
8485
8492
|
|
8486
8493
|
var image$1 = /*#__PURE__*/Object.freeze({
|
8487
8494
|
__proto__: null,
|
8488
8495
|
default: image,
|
8489
|
-
vars: vars$
|
8496
|
+
vars: vars$c
|
8490
8497
|
});
|
8491
8498
|
|
8492
|
-
const vars$
|
8499
|
+
const vars$b = PhoneFieldClass.cssVarList;
|
8493
8500
|
|
8494
8501
|
const phoneField = {
|
8495
|
-
[vars$
|
8502
|
+
[vars$b.hostWidth]: refs.width,
|
8503
|
+
[vars$b.hostDirection]: refs.direction,
|
8504
|
+
[vars$b.fontSize]: refs.fontSize,
|
8505
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
8506
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
8507
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
8508
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
8509
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
8510
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8511
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
8512
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
8513
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
8514
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
8515
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
8516
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
8517
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
8518
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
8519
|
+
[vars$b.phoneInputWidth]: refs.minWidth,
|
8520
|
+
[vars$b.countryCodeInputWidth]: '5em',
|
8521
|
+
[vars$b.countryCodeDropdownWidth]: '20em',
|
8522
|
+
|
8523
|
+
// '@overlay': {
|
8524
|
+
// overlayItemBackgroundColor: 'red'
|
8525
|
+
// }
|
8526
|
+
};
|
8527
|
+
|
8528
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8529
|
+
__proto__: null,
|
8530
|
+
default: phoneField,
|
8531
|
+
vars: vars$b
|
8532
|
+
});
|
8533
|
+
|
8534
|
+
const vars$a = PhoneFieldInputBoxClass.cssVarList;
|
8535
|
+
|
8536
|
+
const phoneInputBoxField = {
|
8537
|
+
[vars$a.hostWidth]: '16em',
|
8538
|
+
[vars$a.hostMinWidth]: refs.minWidth,
|
8496
8539
|
[vars$a.hostDirection]: refs.direction,
|
8497
8540
|
[vars$a.fontSize]: refs.fontSize,
|
8498
8541
|
[vars$a.fontFamily]: refs.fontFamily,
|
@@ -8509,194 +8552,158 @@ const phoneField = {
|
|
8509
8552
|
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
8510
8553
|
[vars$a.inputOutlineColor]: refs.outlineColor,
|
8511
8554
|
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
8512
|
-
|
8513
|
-
|
8514
|
-
|
8515
|
-
|
8516
|
-
// '@overlay': {
|
8517
|
-
// overlayItemBackgroundColor: 'red'
|
8518
|
-
// }
|
8555
|
+
_fullWidth: {
|
8556
|
+
[vars$a.hostWidth]: refs.width,
|
8557
|
+
},
|
8519
8558
|
};
|
8520
8559
|
|
8521
|
-
var
|
8560
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8522
8561
|
__proto__: null,
|
8523
|
-
default:
|
8562
|
+
default: phoneInputBoxField,
|
8524
8563
|
vars: vars$a
|
8525
8564
|
});
|
8526
8565
|
|
8527
|
-
const vars$9 =
|
8566
|
+
const vars$9 = NewPasswordClass.cssVarList;
|
8528
8567
|
|
8529
|
-
const
|
8530
|
-
[vars$9.hostWidth]:
|
8568
|
+
const newPassword = {
|
8569
|
+
[vars$9.hostWidth]: refs.width,
|
8531
8570
|
[vars$9.hostMinWidth]: refs.minWidth,
|
8532
8571
|
[vars$9.hostDirection]: refs.direction,
|
8533
8572
|
[vars$9.fontSize]: refs.fontSize,
|
8534
8573
|
[vars$9.fontFamily]: refs.fontFamily,
|
8535
|
-
[vars$9.
|
8536
|
-
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
8574
|
+
[vars$9.spaceBetweenInputs]: '1em',
|
8537
8575
|
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
8538
|
-
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
8539
|
-
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8540
|
-
[vars$9.inputBorderStyle]: refs.borderStyle,
|
8541
|
-
[vars$9.inputBorderWidth]: refs.borderWidth,
|
8542
|
-
[vars$9.inputBorderColor]: refs.borderColor,
|
8543
|
-
[vars$9.inputBorderRadius]: refs.borderRadius,
|
8544
|
-
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
8545
|
-
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
8546
|
-
[vars$9.inputOutlineColor]: refs.outlineColor,
|
8547
|
-
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
8548
|
-
_fullWidth: {
|
8549
|
-
[vars$9.hostWidth]: refs.width,
|
8550
|
-
},
|
8551
|
-
};
|
8552
|
-
|
8553
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8554
|
-
__proto__: null,
|
8555
|
-
default: phoneInputBoxField,
|
8556
|
-
vars: vars$9
|
8557
|
-
});
|
8558
|
-
|
8559
|
-
const vars$8 = NewPasswordClass.cssVarList;
|
8560
|
-
|
8561
|
-
const newPassword = {
|
8562
|
-
[vars$8.hostWidth]: refs.width,
|
8563
|
-
[vars$8.hostMinWidth]: refs.minWidth,
|
8564
|
-
[vars$8.hostDirection]: refs.direction,
|
8565
|
-
[vars$8.fontSize]: refs.fontSize,
|
8566
|
-
[vars$8.fontFamily]: refs.fontFamily,
|
8567
|
-
[vars$8.spaceBetweenInputs]: '1em',
|
8568
|
-
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
8569
8576
|
|
8570
8577
|
_required: {
|
8571
8578
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8572
8579
|
// That's why we fake the required indicator on each input.
|
8573
8580
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8574
|
-
[vars$
|
8581
|
+
[vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8575
8582
|
},
|
8576
8583
|
};
|
8577
8584
|
|
8578
8585
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8579
8586
|
__proto__: null,
|
8580
8587
|
default: newPassword,
|
8581
|
-
vars: vars$
|
8588
|
+
vars: vars$9
|
8582
8589
|
});
|
8583
8590
|
|
8584
|
-
const vars$
|
8591
|
+
const vars$8 = UploadFileClass.cssVarList;
|
8585
8592
|
|
8586
8593
|
const uploadFile = {
|
8587
|
-
[vars$
|
8588
|
-
[vars$
|
8589
|
-
[vars$
|
8594
|
+
[vars$8.hostDirection]: refs.direction,
|
8595
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
8596
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
8590
8597
|
|
8591
|
-
[vars$
|
8598
|
+
[vars$8.iconSize]: '2em',
|
8592
8599
|
|
8593
|
-
[vars$
|
8594
|
-
[vars$
|
8600
|
+
[vars$8.hostPadding]: '0.75em',
|
8601
|
+
[vars$8.gap]: '0.5em',
|
8595
8602
|
|
8596
|
-
[vars$
|
8597
|
-
[vars$
|
8598
|
-
[vars$
|
8603
|
+
[vars$8.fontSize]: '16px',
|
8604
|
+
[vars$8.titleFontWeight]: '500',
|
8605
|
+
[vars$8.lineHeight]: '1em',
|
8599
8606
|
|
8600
|
-
[vars$
|
8601
|
-
[vars$
|
8602
|
-
[vars$
|
8603
|
-
[vars$
|
8607
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
8608
|
+
[vars$8.borderColor]: refs.borderColor,
|
8609
|
+
[vars$8.borderRadius]: refs.borderRadius,
|
8610
|
+
[vars$8.borderStyle]: 'dashed',
|
8604
8611
|
|
8605
8612
|
_required: {
|
8606
|
-
[vars$
|
8613
|
+
[vars$8.requiredIndicator]: refs.requiredIndicator,
|
8607
8614
|
},
|
8608
8615
|
|
8609
8616
|
size: {
|
8610
8617
|
xs: {
|
8611
|
-
[vars$
|
8612
|
-
[vars$
|
8613
|
-
[vars$
|
8614
|
-
[vars$
|
8615
|
-
[vars$
|
8618
|
+
[vars$8.hostHeight]: '196px',
|
8619
|
+
[vars$8.hostWidth]: '200px',
|
8620
|
+
[vars$8.titleFontSize]: '0.875em',
|
8621
|
+
[vars$8.descriptionFontSize]: '0.875em',
|
8622
|
+
[vars$8.lineHeight]: '1.25em',
|
8616
8623
|
},
|
8617
8624
|
sm: {
|
8618
|
-
[vars$
|
8619
|
-
[vars$
|
8620
|
-
[vars$
|
8621
|
-
[vars$
|
8622
|
-
[vars$
|
8625
|
+
[vars$8.hostHeight]: '216px',
|
8626
|
+
[vars$8.hostWidth]: '230px',
|
8627
|
+
[vars$8.titleFontSize]: '1em',
|
8628
|
+
[vars$8.descriptionFontSize]: '0.875em',
|
8629
|
+
[vars$8.lineHeight]: '1.25em',
|
8623
8630
|
},
|
8624
8631
|
md: {
|
8625
|
-
[vars$
|
8626
|
-
[vars$
|
8627
|
-
[vars$
|
8628
|
-
[vars$
|
8629
|
-
[vars$
|
8632
|
+
[vars$8.hostHeight]: '256px',
|
8633
|
+
[vars$8.hostWidth]: '312px',
|
8634
|
+
[vars$8.titleFontSize]: '1.125em',
|
8635
|
+
[vars$8.descriptionFontSize]: '1em',
|
8636
|
+
[vars$8.lineHeight]: '1.5em',
|
8630
8637
|
},
|
8631
8638
|
lg: {
|
8632
|
-
[vars$
|
8633
|
-
[vars$
|
8634
|
-
[vars$
|
8635
|
-
[vars$
|
8636
|
-
[vars$
|
8639
|
+
[vars$8.hostHeight]: '280px',
|
8640
|
+
[vars$8.hostWidth]: '336px',
|
8641
|
+
[vars$8.titleFontSize]: '1.125em',
|
8642
|
+
[vars$8.descriptionFontSize]: '1.125em',
|
8643
|
+
[vars$8.lineHeight]: '1.75em',
|
8637
8644
|
},
|
8638
8645
|
},
|
8639
8646
|
|
8640
8647
|
_fullWidth: {
|
8641
|
-
[vars$
|
8648
|
+
[vars$8.hostWidth]: refs.width,
|
8642
8649
|
},
|
8643
8650
|
};
|
8644
8651
|
|
8645
8652
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8646
8653
|
__proto__: null,
|
8647
8654
|
default: uploadFile,
|
8648
|
-
vars: vars$
|
8655
|
+
vars: vars$8
|
8649
8656
|
});
|
8650
8657
|
|
8651
|
-
const globalRefs$
|
8658
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8652
8659
|
|
8653
|
-
const vars$
|
8660
|
+
const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
|
8654
8661
|
|
8655
8662
|
const buttonSelectionGroupItem = {
|
8656
|
-
[vars$
|
8657
|
-
[vars$
|
8658
|
-
[vars$
|
8659
|
-
[vars$
|
8660
|
-
[vars$
|
8661
|
-
[vars$
|
8663
|
+
[vars$7.hostDirection]: 'inherit',
|
8664
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
|
8665
|
+
[vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
8666
|
+
[vars$7.borderColor]: globalRefs$6.colors.surface.main,
|
8667
|
+
[vars$7.borderStyle]: 'solid',
|
8668
|
+
[vars$7.borderRadius]: globalRefs$6.radius.sm,
|
8662
8669
|
|
8663
8670
|
_hover: {
|
8664
|
-
[vars$
|
8671
|
+
[vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8665
8672
|
},
|
8666
8673
|
|
8667
8674
|
_selected: {
|
8668
|
-
[vars$
|
8669
|
-
[vars$
|
8670
|
-
[vars$
|
8675
|
+
[vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
|
8676
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
8677
|
+
[vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
|
8671
8678
|
},
|
8672
8679
|
};
|
8673
8680
|
|
8674
8681
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8675
8682
|
__proto__: null,
|
8676
8683
|
default: buttonSelectionGroupItem,
|
8677
|
-
vars: vars$
|
8684
|
+
vars: vars$7
|
8678
8685
|
});
|
8679
8686
|
|
8680
|
-
const globalRefs$
|
8681
|
-
const vars$
|
8687
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8688
|
+
const vars$6 = ButtonSelectionGroupClass.cssVarList;
|
8682
8689
|
|
8683
8690
|
const buttonSelectionGroup = {
|
8684
|
-
[vars$
|
8685
|
-
[vars$
|
8686
|
-
[vars$
|
8687
|
-
[vars$
|
8688
|
-
[vars$
|
8689
|
-
[vars$
|
8690
|
-
[vars$
|
8691
|
+
[vars$6.hostDirection]: refs.direction,
|
8692
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
8693
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
8694
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
8695
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
8696
|
+
[vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
|
8697
|
+
[vars$6.hostWidth]: refs.width,
|
8691
8698
|
};
|
8692
8699
|
|
8693
8700
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8694
8701
|
__proto__: null,
|
8695
8702
|
default: buttonSelectionGroup,
|
8696
|
-
vars: vars$
|
8703
|
+
vars: vars$6
|
8697
8704
|
});
|
8698
8705
|
|
8699
|
-
const componentName$
|
8706
|
+
const componentName$3 = getComponentName('modal');
|
8700
8707
|
|
8701
8708
|
const customMixin = (superclass) =>
|
8702
8709
|
class ModalMixinClass extends superclass {
|
@@ -8795,59 +8802,59 @@ const ModalClass = compose(
|
|
8795
8802
|
wrappedEleName: 'vaadin-dialog',
|
8796
8803
|
style: () => ``,
|
8797
8804
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8798
|
-
componentName: componentName$
|
8805
|
+
componentName: componentName$3,
|
8799
8806
|
})
|
8800
8807
|
);
|
8801
8808
|
|
8802
|
-
const globalRefs$
|
8809
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8803
8810
|
|
8804
8811
|
const compVars = ModalClass.cssVarList;
|
8805
8812
|
|
8806
8813
|
const modal = {
|
8807
|
-
[compVars.overlayBackgroundColor]: globalRefs$
|
8814
|
+
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
|
8808
8815
|
[compVars.overlayShadow]: 'none',
|
8809
8816
|
[compVars.overlayWidth]: '700px',
|
8810
8817
|
};
|
8811
8818
|
|
8812
|
-
const vars$
|
8819
|
+
const vars$5 = {
|
8813
8820
|
...compVars,
|
8814
8821
|
};
|
8815
8822
|
|
8816
8823
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8817
8824
|
__proto__: null,
|
8818
8825
|
default: modal,
|
8819
|
-
vars: vars$
|
8826
|
+
vars: vars$5
|
8820
8827
|
});
|
8821
8828
|
|
8822
|
-
const globalRefs$
|
8823
|
-
const vars$
|
8829
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8830
|
+
const vars$4 = GridClass.cssVarList;
|
8824
8831
|
|
8825
8832
|
const grid = {
|
8826
|
-
[vars$
|
8827
|
-
[vars$
|
8828
|
-
[vars$
|
8829
|
-
[vars$
|
8833
|
+
[vars$4.hostWidth]: '100%',
|
8834
|
+
[vars$4.hostHeight]: '100%',
|
8835
|
+
[vars$4.hostMinHeight]: '400px',
|
8836
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
|
8830
8837
|
|
8831
|
-
[vars$
|
8832
|
-
[vars$
|
8838
|
+
[vars$4.fontSize]: refs.fontSize,
|
8839
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
8833
8840
|
|
8834
|
-
[vars$
|
8835
|
-
[vars$
|
8836
|
-
[vars$
|
8841
|
+
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
|
8842
|
+
[vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
|
8843
|
+
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
|
8837
8844
|
|
8838
|
-
[vars$
|
8839
|
-
[vars$
|
8840
|
-
[vars$
|
8841
|
-
[vars$
|
8845
|
+
[vars$4.inputBorderWidth]: refs.borderWidth,
|
8846
|
+
[vars$4.inputBorderStyle]: refs.borderStyle,
|
8847
|
+
[vars$4.inputBorderRadius]: refs.borderRadius,
|
8848
|
+
[vars$4.inputBorderColor]: 'transparent',
|
8842
8849
|
|
8843
|
-
[vars$
|
8844
|
-
[vars$
|
8850
|
+
[vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
|
8851
|
+
[vars$4.separatorColor]: globalRefs$3.colors.surface.main,
|
8845
8852
|
|
8846
|
-
[vars$
|
8847
|
-
[vars$
|
8853
|
+
[vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
|
8854
|
+
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
|
8848
8855
|
|
8849
8856
|
_bordered: {
|
8850
|
-
[vars$
|
8857
|
+
[vars$4.inputBorderColor]: refs.borderColor,
|
8851
8858
|
},
|
8852
8859
|
};
|
8853
8860
|
|
@@ -8855,10 +8862,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8855
8862
|
__proto__: null,
|
8856
8863
|
default: grid,
|
8857
8864
|
grid: grid,
|
8858
|
-
vars: vars$
|
8865
|
+
vars: vars$4
|
8859
8866
|
});
|
8860
8867
|
|
8861
|
-
const componentName$
|
8868
|
+
const componentName$2 = getComponentName('notification-card');
|
8862
8869
|
|
8863
8870
|
const notificationCardMixin = (superclass) =>
|
8864
8871
|
class NotificationCardMixinClass extends superclass {
|
@@ -8966,54 +8973,54 @@ const NotificationCardClass = compose(
|
|
8966
8973
|
}
|
8967
8974
|
`,
|
8968
8975
|
excludeAttrsSync: ['tabindex'],
|
8969
|
-
componentName: componentName$
|
8976
|
+
componentName: componentName$2,
|
8970
8977
|
})
|
8971
8978
|
);
|
8972
8979
|
|
8973
|
-
const globalRefs$
|
8974
|
-
const vars$
|
8980
|
+
const globalRefs$2 = getThemeRefs(globals);
|
8981
|
+
const vars$3 = NotificationCardClass.cssVarList;
|
8975
8982
|
|
8976
8983
|
const shadowColor = '#00000020';
|
8977
8984
|
|
8978
8985
|
const notification = {
|
8979
|
-
[vars$
|
8980
|
-
[vars$
|
8981
|
-
[vars$
|
8982
|
-
[vars$
|
8983
|
-
[vars$
|
8984
|
-
[vars$
|
8985
|
-
[vars$
|
8986
|
-
[vars$
|
8987
|
-
[vars$
|
8986
|
+
[vars$3.hostMinWidth]: '415px',
|
8987
|
+
[vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
|
8988
|
+
[vars$3.fontSize]: globalRefs$2.typography.body1.size,
|
8989
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
|
8990
|
+
[vars$3.textColor]: globalRefs$2.colors.surface.contrast,
|
8991
|
+
[vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
|
8992
|
+
[vars$3.verticalPadding]: '0.625em',
|
8993
|
+
[vars$3.horizontalPadding]: '1.5em',
|
8994
|
+
[vars$3.borderRadius]: globalRefs$2.radius.xs,
|
8988
8995
|
|
8989
8996
|
_bordered: {
|
8990
|
-
[vars$
|
8991
|
-
[vars$
|
8992
|
-
[vars$
|
8997
|
+
[vars$3.borderWidth]: globalRefs$2.border.sm,
|
8998
|
+
[vars$3.borderStyle]: 'solid',
|
8999
|
+
[vars$3.borderColor]: 'transparent',
|
8993
9000
|
},
|
8994
9001
|
|
8995
9002
|
size: {
|
8996
|
-
xs: { [vars$
|
8997
|
-
sm: { [vars$
|
8998
|
-
md: { [vars$
|
8999
|
-
lg: { [vars$
|
9003
|
+
xs: { [vars$3.fontSize]: '12px' },
|
9004
|
+
sm: { [vars$3.fontSize]: '14px' },
|
9005
|
+
md: { [vars$3.fontSize]: '16px' },
|
9006
|
+
lg: { [vars$3.fontSize]: '18px' },
|
9000
9007
|
},
|
9001
9008
|
|
9002
9009
|
mode: {
|
9003
9010
|
primary: {
|
9004
|
-
[vars$
|
9005
|
-
[vars$
|
9006
|
-
[vars$
|
9011
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
|
9012
|
+
[vars$3.textColor]: globalRefs$2.colors.primary.contrast,
|
9013
|
+
[vars$3.borderColor]: globalRefs$2.colors.primary.light,
|
9007
9014
|
},
|
9008
9015
|
success: {
|
9009
|
-
[vars$
|
9010
|
-
[vars$
|
9011
|
-
[vars$
|
9016
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.success.main,
|
9017
|
+
[vars$3.textColor]: globalRefs$2.colors.success.contrast,
|
9018
|
+
[vars$3.borderColor]: globalRefs$2.colors.success.light,
|
9012
9019
|
},
|
9013
9020
|
error: {
|
9014
|
-
[vars$
|
9015
|
-
[vars$
|
9016
|
-
[vars$
|
9021
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.error.main,
|
9022
|
+
[vars$3.textColor]: globalRefs$2.colors.error.contrast,
|
9023
|
+
[vars$3.borderColor]: globalRefs$2.colors.error.light,
|
9017
9024
|
},
|
9018
9025
|
},
|
9019
9026
|
};
|
@@ -9021,6 +9028,556 @@ const notification = {
|
|
9021
9028
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
9022
9029
|
__proto__: null,
|
9023
9030
|
default: notification,
|
9031
|
+
vars: vars$3
|
9032
|
+
});
|
9033
|
+
|
9034
|
+
const componentName$1 = getComponentName('multi-select-combo-box');
|
9035
|
+
|
9036
|
+
const MultiSelectComboBoxMixin = (superclass) =>
|
9037
|
+
class MultiSelectComboBoxMixinClass extends superclass {
|
9038
|
+
// eslint-disable-next-line class-methods-use-this
|
9039
|
+
#renderItem = ({ displayName, value, label }) => {
|
9040
|
+
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
9041
|
+
};
|
9042
|
+
|
9043
|
+
#data;
|
9044
|
+
|
9045
|
+
get defaultValues() {
|
9046
|
+
const defaultValuesAttr = this.getAttribute('default-values');
|
9047
|
+
if (defaultValuesAttr) {
|
9048
|
+
try {
|
9049
|
+
const defaultValues = JSON.parse(defaultValuesAttr);
|
9050
|
+
if (this.isValidDataType(defaultValues)) {
|
9051
|
+
return defaultValues;
|
9052
|
+
}
|
9053
|
+
} catch (e) {
|
9054
|
+
// eslint-disable-next-line no-console
|
9055
|
+
console.error('could not parse data string from attribute "default-values" -', e.message);
|
9056
|
+
}
|
9057
|
+
}
|
9058
|
+
return [];
|
9059
|
+
}
|
9060
|
+
|
9061
|
+
get renderItem() {
|
9062
|
+
return this.#renderItem;
|
9063
|
+
}
|
9064
|
+
|
9065
|
+
set renderItem(renderFn) {
|
9066
|
+
this.#renderItem = renderFn;
|
9067
|
+
this.renderItems();
|
9068
|
+
}
|
9069
|
+
|
9070
|
+
get data() {
|
9071
|
+
if (this.#data) return this.#data;
|
9072
|
+
|
9073
|
+
const dataAttr = this.getAttribute('data');
|
9074
|
+
|
9075
|
+
if (dataAttr) {
|
9076
|
+
try {
|
9077
|
+
const data = JSON.parse(dataAttr);
|
9078
|
+
if (this.isValidDataType(data)) {
|
9079
|
+
return data;
|
9080
|
+
}
|
9081
|
+
} catch (e) {
|
9082
|
+
// eslint-disable-next-line no-console
|
9083
|
+
console.error('could not parse data string from attribute "data" -', e.message);
|
9084
|
+
}
|
9085
|
+
}
|
9086
|
+
|
9087
|
+
return [];
|
9088
|
+
}
|
9089
|
+
|
9090
|
+
set data(data) {
|
9091
|
+
if (this.isValidDataType(data)) {
|
9092
|
+
this.#data = data;
|
9093
|
+
this.renderItems();
|
9094
|
+
}
|
9095
|
+
}
|
9096
|
+
|
9097
|
+
get allowCustomValue() {
|
9098
|
+
return this.getAttribute('allow-custom-value') === 'true';
|
9099
|
+
}
|
9100
|
+
|
9101
|
+
get minItemsSelection() {
|
9102
|
+
return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
|
9103
|
+
}
|
9104
|
+
|
9105
|
+
get maxItemsSelection() {
|
9106
|
+
return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
|
9107
|
+
}
|
9108
|
+
|
9109
|
+
// eslint-disable-next-line class-methods-use-this
|
9110
|
+
isValidDataType(data) {
|
9111
|
+
const isValid = Array.isArray(data);
|
9112
|
+
if (!isValid) {
|
9113
|
+
// eslint-disable-next-line no-console
|
9114
|
+
console.error('data and default-values must be an array, received:', data);
|
9115
|
+
}
|
9116
|
+
|
9117
|
+
return isValid;
|
9118
|
+
}
|
9119
|
+
|
9120
|
+
getItemsTemplate() {
|
9121
|
+
return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
|
9122
|
+
}
|
9123
|
+
|
9124
|
+
renderItems() {
|
9125
|
+
const template = this.getItemsTemplate();
|
9126
|
+
if (template) this.innerHTML = template;
|
9127
|
+
}
|
9128
|
+
|
9129
|
+
handleSelectedItems() {
|
9130
|
+
const currentSelected =
|
9131
|
+
this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
|
9132
|
+
|
9133
|
+
this.baseElement.selectedItems = [];
|
9134
|
+
|
9135
|
+
// if previously selected item ID exists in current children, set it as selected
|
9136
|
+
if (currentSelected.length > 0) {
|
9137
|
+
this.value = currentSelected;
|
9138
|
+
}
|
9139
|
+
|
9140
|
+
// otherwise, if default value is specified, set default value as selected item
|
9141
|
+
if (this.value.length === 0) {
|
9142
|
+
this.setDefaultValues();
|
9143
|
+
}
|
9144
|
+
}
|
9145
|
+
|
9146
|
+
// eslint-disable-next-line class-methods-use-this
|
9147
|
+
customValueTransformFn(val) {
|
9148
|
+
return val;
|
9149
|
+
}
|
9150
|
+
|
9151
|
+
// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
|
9152
|
+
// field that it searches the value, and the finaly display value of the input.
|
9153
|
+
// We provide a custom transform function to override that behavior.
|
9154
|
+
setComboBoxDescriptor() {
|
9155
|
+
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
9156
|
+
this.inputElement.constructor.prototype,
|
9157
|
+
'value'
|
9158
|
+
);
|
9159
|
+
|
9160
|
+
const comboBox = this;
|
9161
|
+
|
9162
|
+
Object.defineProperties(this.inputElement, {
|
9163
|
+
value: {
|
9164
|
+
...valueDescriptor,
|
9165
|
+
set(val) {
|
9166
|
+
const transformedValue = comboBox.customValueTransformFn(val) || '';
|
9167
|
+
|
9168
|
+
if (transformedValue === this.value) {
|
9169
|
+
return;
|
9170
|
+
}
|
9171
|
+
|
9172
|
+
valueDescriptor.set.call(this, transformedValue);
|
9173
|
+
},
|
9174
|
+
},
|
9175
|
+
});
|
9176
|
+
}
|
9177
|
+
|
9178
|
+
// vaadin api is to set props on their combo box node,
|
9179
|
+
// in order to avoid it, we are passing the children of this component
|
9180
|
+
// to the items & renderer props, so it will be used as the combo box items
|
9181
|
+
#onChildrenChange() {
|
9182
|
+
const items = Array.from(this.children);
|
9183
|
+
|
9184
|
+
// we want the data-name attribute to be accessible as an object attribute
|
9185
|
+
if (items.length) {
|
9186
|
+
this.removeAttribute('has-no-options');
|
9187
|
+
|
9188
|
+
items.forEach((node) => {
|
9189
|
+
Object.defineProperty(node, 'data-name', {
|
9190
|
+
value: node.getAttribute('data-name'),
|
9191
|
+
configurable: true,
|
9192
|
+
writable: true,
|
9193
|
+
});
|
9194
|
+
Object.defineProperty(node, 'data-id', {
|
9195
|
+
value: node.getAttribute('data-id'),
|
9196
|
+
configurable: true,
|
9197
|
+
writable: true,
|
9198
|
+
});
|
9199
|
+
});
|
9200
|
+
|
9201
|
+
this.baseElement.items = items;
|
9202
|
+
|
9203
|
+
setTimeout(() => {
|
9204
|
+
// set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
|
9205
|
+
this.handleSelectedItems();
|
9206
|
+
}, 0);
|
9207
|
+
} else {
|
9208
|
+
this.baseElement.items = [];
|
9209
|
+
this.setAttribute('has-no-options', '');
|
9210
|
+
}
|
9211
|
+
|
9212
|
+
// use vaadin combobox custom renderer to render options as HTML
|
9213
|
+
// and not via default renderer, which renders only the data-name's value
|
9214
|
+
// in its own HTML template
|
9215
|
+
this.baseElement.renderer = (root, combo, model) => {
|
9216
|
+
// eslint-disable-next-line no-param-reassign
|
9217
|
+
root.innerHTML = model.item.outerHTML;
|
9218
|
+
};
|
9219
|
+
}
|
9220
|
+
|
9221
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
9222
|
+
// we do not want that because it's difficult to style the overlay in this way
|
9223
|
+
// so we override it to open inside the shadow DOM
|
9224
|
+
#overrideOverlaySettings() {
|
9225
|
+
const overlay = this.baseElement.shadowRoot
|
9226
|
+
.querySelector('vaadin-multi-select-combo-box-internal')
|
9227
|
+
.shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
|
9228
|
+
overlay._attachOverlay = () => {
|
9229
|
+
overlay.bringToFront();
|
9230
|
+
};
|
9231
|
+
overlay._detachOverlay = () => {};
|
9232
|
+
overlay._enterModalState = () => {};
|
9233
|
+
}
|
9234
|
+
|
9235
|
+
#handleCustomValues() {
|
9236
|
+
if (this.allowCustomValue) {
|
9237
|
+
this.baseElement.addEventListener('custom-value-set', (e) => {
|
9238
|
+
const newItemHtml = this.#renderItem({
|
9239
|
+
label: e.detail,
|
9240
|
+
displayName: e.detail,
|
9241
|
+
value: e.detail,
|
9242
|
+
});
|
9243
|
+
this.innerHTML += newItemHtml;
|
9244
|
+
// The value needs to be set with a timeout because it needs to execute after
|
9245
|
+
// the custom value is added to items by the children change observer
|
9246
|
+
setTimeout(() => {
|
9247
|
+
this.value = [...this.value, e.detail];
|
9248
|
+
}, 0);
|
9249
|
+
});
|
9250
|
+
}
|
9251
|
+
}
|
9252
|
+
|
9253
|
+
setGetValidity() {
|
9254
|
+
// eslint-disable-next-line func-names
|
9255
|
+
this.getValidity = function () {
|
9256
|
+
if (this.isRequired && !this.value.length) {
|
9257
|
+
return {
|
9258
|
+
valueMissing: true,
|
9259
|
+
};
|
9260
|
+
}
|
9261
|
+
// If the field is not required, no minimum selection can be set
|
9262
|
+
if (
|
9263
|
+
this.isRequired &&
|
9264
|
+
this.minItemsSelection &&
|
9265
|
+
this.value.length < this.minItemsSelection
|
9266
|
+
) {
|
9267
|
+
return {
|
9268
|
+
rangeUnderflow: true,
|
9269
|
+
};
|
9270
|
+
}
|
9271
|
+
if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
|
9272
|
+
return {
|
9273
|
+
rangeOverflow: true,
|
9274
|
+
};
|
9275
|
+
}
|
9276
|
+
return {};
|
9277
|
+
};
|
9278
|
+
}
|
9279
|
+
|
9280
|
+
init() {
|
9281
|
+
super.init?.();
|
9282
|
+
|
9283
|
+
this.setGetValidity();
|
9284
|
+
|
9285
|
+
this.setComboBoxDescriptor();
|
9286
|
+
|
9287
|
+
this.#overrideOverlaySettings();
|
9288
|
+
|
9289
|
+
this.#handleCustomValues();
|
9290
|
+
|
9291
|
+
this.renderItems();
|
9292
|
+
|
9293
|
+
observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
|
9294
|
+
|
9295
|
+
observeChildren(this, this.#onChildrenChange.bind(this));
|
9296
|
+
|
9297
|
+
// Note: we need to forward the `placeholder` because the vaadin component observes it and
|
9298
|
+
// tries to override it, causing us to lose the user set placeholder.
|
9299
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
|
9300
|
+
|
9301
|
+
this.setDefaultValues();
|
9302
|
+
}
|
9303
|
+
|
9304
|
+
setDefaultValues() {
|
9305
|
+
this.value = this.defaultValues;
|
9306
|
+
}
|
9307
|
+
|
9308
|
+
set value(vals) {
|
9309
|
+
if (vals && vals.length > 0) {
|
9310
|
+
const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
|
9311
|
+
|
9312
|
+
if (children?.length > 0) {
|
9313
|
+
this.baseElement.selectedItems = children;
|
9314
|
+
}
|
9315
|
+
} else {
|
9316
|
+
this.baseElement.selectedItems = [];
|
9317
|
+
}
|
9318
|
+
}
|
9319
|
+
|
9320
|
+
get value() {
|
9321
|
+
return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
|
9322
|
+
}
|
9323
|
+
};
|
9324
|
+
|
9325
|
+
const {
|
9326
|
+
host,
|
9327
|
+
inputField,
|
9328
|
+
inputElement,
|
9329
|
+
placeholder,
|
9330
|
+
toggle,
|
9331
|
+
label,
|
9332
|
+
requiredIndicator,
|
9333
|
+
helperText,
|
9334
|
+
errorMessage,
|
9335
|
+
chip,
|
9336
|
+
chipLabel,
|
9337
|
+
overflowChipFirstBorder,
|
9338
|
+
overflowChipSecondBorder,
|
9339
|
+
} = {
|
9340
|
+
host: { selector: () => ':host' },
|
9341
|
+
inputField: { selector: '::part(input-field)' },
|
9342
|
+
inputElement: { selector: 'input' },
|
9343
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
9344
|
+
toggle: { selector: '::part(toggle-button)' },
|
9345
|
+
label: { selector: '::part(label)' },
|
9346
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
9347
|
+
helperText: { selector: '::part(helper-text)' },
|
9348
|
+
errorMessage: { selector: '::part(error-message)' },
|
9349
|
+
chip: { selector: 'vaadin-multi-select-combo-box-chip' },
|
9350
|
+
chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
|
9351
|
+
overflowChipFirstBorder: {
|
9352
|
+
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
|
9353
|
+
},
|
9354
|
+
overflowChipSecondBorder: {
|
9355
|
+
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
|
9356
|
+
},
|
9357
|
+
};
|
9358
|
+
|
9359
|
+
const MultiSelectComboBoxClass = compose(
|
9360
|
+
createStyleMixin({
|
9361
|
+
mappings: {
|
9362
|
+
hostWidth: { ...host, property: 'width' },
|
9363
|
+
hostDirection: { ...host, property: 'direction' },
|
9364
|
+
// we apply font-size also on the host so we can set its width with em
|
9365
|
+
fontSize: [{}, host],
|
9366
|
+
chipFontSize: { ...chipLabel, property: 'font-size' },
|
9367
|
+
fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
|
9368
|
+
labelTextColor: [
|
9369
|
+
{ ...label, property: 'color' },
|
9370
|
+
{ ...requiredIndicator, property: 'color' },
|
9371
|
+
],
|
9372
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
9373
|
+
inputHeight: { ...inputField, property: 'min-height' },
|
9374
|
+
inputBackgroundColor: { ...inputField, property: 'background-color' },
|
9375
|
+
inputBorderColor: { ...inputField, property: 'border-color' },
|
9376
|
+
inputBorderWidth: { ...inputField, property: 'border-width' },
|
9377
|
+
inputBorderStyle: { ...inputField, property: 'border-style' },
|
9378
|
+
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
9379
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
9380
|
+
inputValueTextColor: { ...inputField, property: 'color' },
|
9381
|
+
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
9382
|
+
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
9383
|
+
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
9384
|
+
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
9385
|
+
inputDropdownButtonOffset: [
|
9386
|
+
{ ...toggle, property: 'margin-right' },
|
9387
|
+
{ ...toggle, property: 'margin-left' },
|
9388
|
+
],
|
9389
|
+
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
9390
|
+
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
9391
|
+
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
9392
|
+
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
9393
|
+
inputHorizontalPadding: [
|
9394
|
+
{ ...inputElement, property: 'padding-left' },
|
9395
|
+
{ ...inputElement, property: 'padding-right' },
|
9396
|
+
{ ...inputField, property: 'padding-inline-start' },
|
9397
|
+
],
|
9398
|
+
inputVerticalPadding: [
|
9399
|
+
{ ...inputField, property: 'padding-top' },
|
9400
|
+
{ ...inputField, property: 'padding-bottom' },
|
9401
|
+
],
|
9402
|
+
chipTextColor: { ...chipLabel, property: 'color' },
|
9403
|
+
chipBackgroundColor: [
|
9404
|
+
{ ...chip, property: 'background-color' },
|
9405
|
+
{ ...overflowChipFirstBorder, property: 'border-color' },
|
9406
|
+
{ ...overflowChipSecondBorder, property: 'border-color' },
|
9407
|
+
],
|
9408
|
+
|
9409
|
+
// we need to use the variables from the portal mixin
|
9410
|
+
// so we need to use an arrow function on the selector
|
9411
|
+
// for that to work, because ComboBox is not available
|
9412
|
+
// at this time.
|
9413
|
+
overlayBackground: {
|
9414
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
|
9415
|
+
},
|
9416
|
+
overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
|
9417
|
+
overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
|
9418
|
+
overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
|
9419
|
+
overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
|
9420
|
+
overlayItemBoxShadow: {
|
9421
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
|
9422
|
+
},
|
9423
|
+
overlayItemPaddingInlineStart: {
|
9424
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
|
9425
|
+
},
|
9426
|
+
overlayItemPaddingInlineEnd: {
|
9427
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
|
9428
|
+
},
|
9429
|
+
},
|
9430
|
+
}),
|
9431
|
+
draggableMixin,
|
9432
|
+
portalMixin({
|
9433
|
+
name: 'overlay',
|
9434
|
+
selector: 'vaadin-multi-select-combo-box-internal',
|
9435
|
+
mappings: {
|
9436
|
+
backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
|
9437
|
+
minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
9438
|
+
margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
9439
|
+
cursor: { selector: 'vaadin-multi-select-combo-box-item' },
|
9440
|
+
fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
|
9441
|
+
fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
|
9442
|
+
itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
|
9443
|
+
itemPaddingInlineStart: {
|
9444
|
+
selector: 'vaadin-multi-select-combo-box-item',
|
9445
|
+
property: 'padding-inline-start',
|
9446
|
+
},
|
9447
|
+
itemPaddingInlineEnd: {
|
9448
|
+
selector: 'vaadin-multi-select-combo-box-item',
|
9449
|
+
property: 'padding-inline-end',
|
9450
|
+
},
|
9451
|
+
},
|
9452
|
+
forward: {
|
9453
|
+
include: false,
|
9454
|
+
attributes: ['size'],
|
9455
|
+
},
|
9456
|
+
}),
|
9457
|
+
composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
|
9458
|
+
componentNameValidationMixin,
|
9459
|
+
MultiSelectComboBoxMixin
|
9460
|
+
)(
|
9461
|
+
createProxy({
|
9462
|
+
slots: ['', 'prefix'],
|
9463
|
+
wrappedEleName: 'vaadin-multi-select-combo-box',
|
9464
|
+
style: () => `
|
9465
|
+
:host {
|
9466
|
+
display: inline-flex;
|
9467
|
+
box-sizing: border-box;
|
9468
|
+
-webkit-mask-image: none;
|
9469
|
+
}
|
9470
|
+
${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
|
9471
|
+
${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
|
9472
|
+
${resetInputPlaceholder('vaadin-multi-select-combo-box')}
|
9473
|
+
${resetInputCursor('vaadin-multi-select-combo-box')}
|
9474
|
+
|
9475
|
+
vaadin-multi-select-combo-box {
|
9476
|
+
padding: 0;
|
9477
|
+
width: 100%;
|
9478
|
+
}
|
9479
|
+
vaadin-multi-select-combo-box::before {
|
9480
|
+
height: initial;
|
9481
|
+
}
|
9482
|
+
vaadin-multi-select-combo-box [slot="input"] {
|
9483
|
+
-webkit-mask-image: none;
|
9484
|
+
min-height: 0;
|
9485
|
+
align-self: center;
|
9486
|
+
box-sizing: border-box;
|
9487
|
+
}
|
9488
|
+
|
9489
|
+
::part(input-field) {
|
9490
|
+
padding: 0;
|
9491
|
+
box-shadow: none;
|
9492
|
+
}
|
9493
|
+
${resetInputLabelPosition('vaadin-multi-select-combo-box')}
|
9494
|
+
:host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
|
9495
|
+
display: block;
|
9496
|
+
}
|
9497
|
+
|
9498
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
|
9499
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
|
9500
|
+
left: -4px;
|
9501
|
+
right: -4px;
|
9502
|
+
border-left-width: 0;
|
9503
|
+
border-inline-start-style: solid;
|
9504
|
+
border-inline-start-width: 2px;
|
9505
|
+
}
|
9506
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
|
9507
|
+
left: -8px;
|
9508
|
+
right: -8px;
|
9509
|
+
}
|
9510
|
+
|
9511
|
+
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
9512
|
+
display: none;
|
9513
|
+
}
|
9514
|
+
`,
|
9515
|
+
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
9516
|
+
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
9517
|
+
// and reset items to an empty array, and opening the list box with no items
|
9518
|
+
// to display.
|
9519
|
+
// Note: we exclude `placeholder` because the vaadin component observes it and
|
9520
|
+
// tries to override it, causing us to lose the user set placeholder.
|
9521
|
+
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
9522
|
+
componentName: componentName$1,
|
9523
|
+
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
9524
|
+
})
|
9525
|
+
);
|
9526
|
+
|
9527
|
+
const globalRefs$1 = getThemeRefs(globals);
|
9528
|
+
const vars$2 = MultiSelectComboBoxClass.cssVarList;
|
9529
|
+
|
9530
|
+
const multiSelectComboBox = {
|
9531
|
+
[vars$2.hostWidth]: refs.width,
|
9532
|
+
[vars$2.hostDirection]: refs.direction,
|
9533
|
+
[vars$2.fontSize]: refs.fontSize,
|
9534
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
9535
|
+
[vars$2.labelTextColor]: refs.labelTextColor,
|
9536
|
+
[vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
|
9537
|
+
[vars$2.inputBorderColor]: refs.borderColor,
|
9538
|
+
[vars$2.inputBorderWidth]: refs.borderWidth,
|
9539
|
+
[vars$2.inputBorderStyle]: refs.borderStyle,
|
9540
|
+
[vars$2.inputBorderRadius]: refs.borderRadius,
|
9541
|
+
[vars$2.inputOutlineColor]: refs.outlineColor,
|
9542
|
+
[vars$2.inputOutlineOffset]: refs.outlineOffset,
|
9543
|
+
[vars$2.inputOutlineWidth]: refs.outlineWidth,
|
9544
|
+
[vars$2.inputOutlineStyle]: refs.outlineStyle,
|
9545
|
+
[vars$2.labelRequiredIndicator]: refs.requiredIndicator,
|
9546
|
+
[vars$2.inputValueTextColor]: refs.valueTextColor,
|
9547
|
+
[vars$2.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9548
|
+
[vars$2.inputBackgroundColor]: refs.backgroundColor,
|
9549
|
+
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9550
|
+
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9551
|
+
[vars$2.inputHeight]: refs.inputHeight,
|
9552
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.contrast,
|
9553
|
+
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9554
|
+
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9555
|
+
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
9556
|
+
[vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
|
9557
|
+
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9558
|
+
[vars$2.chipFontSize]: refs.chipFontSize,
|
9559
|
+
[vars$2.chipTextColor]: refs.valueTextColor,
|
9560
|
+
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
|
9561
|
+
|
9562
|
+
_readonly: {
|
9563
|
+
[vars$2.inputDropdownButtonCursor]: 'default',
|
9564
|
+
},
|
9565
|
+
|
9566
|
+
// Overlay theme exposed via the component:
|
9567
|
+
[vars$2.overlayFontSize]: refs.fontSize,
|
9568
|
+
[vars$2.overlayFontFamily]: refs.fontFamily,
|
9569
|
+
[vars$2.overlayCursor]: 'pointer',
|
9570
|
+
[vars$2.overlayItemBoxShadow]: 'none',
|
9571
|
+
|
9572
|
+
// Overlay direct theme:
|
9573
|
+
[vars$2.overlay.minHeight]: '400px',
|
9574
|
+
[vars$2.overlay.margin]: '0',
|
9575
|
+
};
|
9576
|
+
|
9577
|
+
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
9578
|
+
__proto__: null,
|
9579
|
+
default: multiSelectComboBox,
|
9580
|
+
multiSelectComboBox: multiSelectComboBox,
|
9024
9581
|
vars: vars$2
|
9025
9582
|
});
|
9026
9583
|
|
@@ -9175,6 +9732,7 @@ const components = {
|
|
9175
9732
|
modal: modal$1,
|
9176
9733
|
grid: grid$1,
|
9177
9734
|
notificationCard,
|
9735
|
+
multiSelectComboBox: multiSelectComboBox$1,
|
9178
9736
|
badge: badge$1,
|
9179
9737
|
};
|
9180
9738
|
|
@@ -9188,7 +9746,7 @@ const vars = Object.keys(components).reduce(
|
|
9188
9746
|
);
|
9189
9747
|
|
9190
9748
|
const defaultTheme = { globals, components: theme };
|
9191
|
-
const themeVars = { globals: vars$
|
9749
|
+
const themeVars = { globals: vars$w, components: vars };
|
9192
9750
|
|
9193
9751
|
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
9194
9752
|
//# sourceMappingURL=index.esm.js.map
|