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