@descope/web-components-ui 1.0.177 → 1.0.179
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 +1082 -687
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1166 -772
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/2481.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-single-select-descope-select-item-index-js.js +1 -0
- package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +1 -0
- package/dist/umd/descope-single-select-index-js.js +1 -0
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +4 -4
- package/src/components/descope-button/ButtonClass.js +1 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
- package/src/components/descope-date-picker/index.js +1 -1
- package/src/components/descope-email-field/EmailFieldClass.js +2 -2
- package/src/components/descope-number-field/NumberFieldClass.js +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +1 -1
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -4
- package/src/components/descope-password/PasswordClass.js +2 -2
- package/src/components/descope-single-select/SingleSelectClass.js +130 -0
- package/src/components/descope-single-select/descope-select-item/SelectItemClass.js +102 -0
- package/src/components/descope-single-select/descope-select-item/index.js +6 -0
- package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js +137 -0
- package/src/components/descope-single-select/descope-single-select-internal/index.js +6 -0
- package/src/components/descope-single-select/index.js +6 -0
- package/src/index.cjs.js +3 -0
- package/src/index.js +2 -0
- package/src/mixins/createProxy.js +7 -2
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/single-select/selectItem.js +27 -0
- package/src/theme/components/single-select/singleSelect.js +19 -0
package/dist/index.esm.js
CHANGED
@@ -670,8 +670,13 @@ const createProxy = ({
|
|
670
670
|
super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
|
671
671
|
<style id="create-proxy">${isFunction(style) ? style() : style}</style>
|
672
672
|
<${wrappedEleName}>
|
673
|
-
|
674
|
-
|
673
|
+
${slots
|
674
|
+
.map(
|
675
|
+
(
|
676
|
+
slot // when slot is an empty string, we will create the default slot (without a name)
|
677
|
+
) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
|
678
|
+
)
|
679
|
+
.join('')}
|
675
680
|
</${wrappedEleName}>
|
676
681
|
`;
|
677
682
|
}
|
@@ -1185,7 +1190,7 @@ const clickableMixin = (superclass) =>
|
|
1185
1190
|
}
|
1186
1191
|
};
|
1187
1192
|
|
1188
|
-
const componentName$
|
1193
|
+
const componentName$w = getComponentName('button');
|
1189
1194
|
|
1190
1195
|
const resetStyles = `
|
1191
1196
|
:host {
|
@@ -1223,7 +1228,7 @@ const iconStyles = `
|
|
1223
1228
|
|
1224
1229
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1225
1230
|
|
1226
|
-
const { host: host$
|
1231
|
+
const { host: host$f, label: label$b } = {
|
1227
1232
|
host: { selector: () => ':host' },
|
1228
1233
|
label: { selector: '::part(label)' },
|
1229
1234
|
};
|
@@ -1233,7 +1238,7 @@ let loadingIndicatorStyles;
|
|
1233
1238
|
const ButtonClass = compose(
|
1234
1239
|
createStyleMixin({
|
1235
1240
|
mappings: {
|
1236
|
-
hostWidth: { ...host$
|
1241
|
+
hostWidth: { ...host$f, property: 'width' },
|
1237
1242
|
hostHeight: { property: 'height' },
|
1238
1243
|
fontSize: {},
|
1239
1244
|
fontFamily: {},
|
@@ -1254,8 +1259,8 @@ const ButtonClass = compose(
|
|
1254
1259
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
1255
1260
|
|
1256
1261
|
labelTextColor: { property: 'color' },
|
1257
|
-
labelTextDecoration: { ...label$
|
1258
|
-
labelSpacing: { ...label$
|
1262
|
+
labelTextDecoration: { ...label$b, property: 'text-decoration' },
|
1263
|
+
labelSpacing: { ...label$b, property: 'gap' },
|
1259
1264
|
},
|
1260
1265
|
}),
|
1261
1266
|
clickableMixin,
|
@@ -1263,7 +1268,7 @@ const ButtonClass = compose(
|
|
1263
1268
|
componentNameValidationMixin
|
1264
1269
|
)(
|
1265
1270
|
createProxy({
|
1266
|
-
slots: ['prefix', 'label', 'suffix'],
|
1271
|
+
slots: ['', 'prefix', 'label', 'suffix'],
|
1267
1272
|
wrappedEleName: 'vaadin-button',
|
1268
1273
|
style: () => `
|
1269
1274
|
${resetStyles}
|
@@ -1282,7 +1287,7 @@ const ButtonClass = compose(
|
|
1282
1287
|
}
|
1283
1288
|
`,
|
1284
1289
|
excludeAttrsSync: ['tabindex'],
|
1285
|
-
componentName: componentName$
|
1290
|
+
componentName: componentName$w,
|
1286
1291
|
})
|
1287
1292
|
);
|
1288
1293
|
|
@@ -1319,7 +1324,7 @@ loadingIndicatorStyles = `
|
|
1319
1324
|
}
|
1320
1325
|
`;
|
1321
1326
|
|
1322
|
-
customElements.define(componentName$
|
1327
|
+
customElements.define(componentName$w, ButtonClass);
|
1323
1328
|
|
1324
1329
|
const createBaseInputClass = (...args) =>
|
1325
1330
|
compose(
|
@@ -1329,11 +1334,11 @@ const createBaseInputClass = (...args) =>
|
|
1329
1334
|
inputEventsDispatchingMixin
|
1330
1335
|
)(createBaseClass(...args));
|
1331
1336
|
|
1332
|
-
const componentName$
|
1337
|
+
const componentName$v = getComponentName('boolean-field-internal');
|
1333
1338
|
|
1334
1339
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1335
1340
|
|
1336
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1341
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
|
1337
1342
|
|
1338
1343
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1339
1344
|
constructor() {
|
@@ -1393,14 +1398,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1393
1398
|
|
1394
1399
|
const template = document.createElement('template');
|
1395
1400
|
template.innerHTML = `
|
1396
|
-
<${componentName$
|
1401
|
+
<${componentName$v}
|
1397
1402
|
tabindex="-1"
|
1398
1403
|
slot="input"
|
1399
|
-
></${componentName$
|
1404
|
+
></${componentName$v}>
|
1400
1405
|
`;
|
1401
1406
|
|
1402
1407
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1403
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1408
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$v);
|
1404
1409
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1405
1410
|
|
1406
1411
|
forwardAttrs(this, this.inputElement, {
|
@@ -1580,18 +1585,18 @@ vaadin-checkbox::part(checkbox) {
|
|
1580
1585
|
}
|
1581
1586
|
`;
|
1582
1587
|
|
1583
|
-
const componentName$
|
1588
|
+
const componentName$u = getComponentName('checkbox');
|
1584
1589
|
|
1585
1590
|
const {
|
1586
|
-
host: host$
|
1591
|
+
host: host$e,
|
1587
1592
|
component: component$1,
|
1588
1593
|
checkboxElement,
|
1589
1594
|
checkboxSurface,
|
1590
1595
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1591
|
-
label: label$
|
1592
|
-
requiredIndicator: requiredIndicator$
|
1596
|
+
label: label$a,
|
1597
|
+
requiredIndicator: requiredIndicator$a,
|
1593
1598
|
helperText: helperText$8,
|
1594
|
-
errorMessage: errorMessage$
|
1599
|
+
errorMessage: errorMessage$a,
|
1595
1600
|
} = {
|
1596
1601
|
host: { selector: () => ':host' },
|
1597
1602
|
label: { selector: '::part(label)' },
|
@@ -1607,25 +1612,25 @@ const {
|
|
1607
1612
|
const CheckboxClass = compose(
|
1608
1613
|
createStyleMixin({
|
1609
1614
|
mappings: {
|
1610
|
-
hostWidth: { ...host$
|
1615
|
+
hostWidth: { ...host$e, property: 'width' },
|
1611
1616
|
|
1612
|
-
fontSize: [host$
|
1613
|
-
fontFamily: [label$
|
1617
|
+
fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
|
1618
|
+
fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
|
1614
1619
|
|
1615
1620
|
labelTextColor: [
|
1616
|
-
{ ...label$
|
1617
|
-
{ ...requiredIndicator$
|
1618
|
-
{ ...label$
|
1621
|
+
{ ...label$a, property: 'color' },
|
1622
|
+
{ ...requiredIndicator$a, property: 'color' },
|
1623
|
+
{ ...label$a, property: '-webkit-text-fill-color' },
|
1619
1624
|
],
|
1620
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1621
|
-
errorMessageTextColor: { ...errorMessage$
|
1625
|
+
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
1626
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
1622
1627
|
|
1623
1628
|
labelFontWeight: [
|
1624
|
-
{ ...label$
|
1629
|
+
{ ...label$a, property: 'font-weight' },
|
1625
1630
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
1626
1631
|
],
|
1627
1632
|
labelSpacing: [
|
1628
|
-
{ ...label$
|
1633
|
+
{ ...label$a, property: 'left' },
|
1629
1634
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
1630
1635
|
],
|
1631
1636
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
@@ -1648,8 +1653,8 @@ const CheckboxClass = compose(
|
|
1648
1653
|
{ ...checkboxSurface, property: 'font-size' },
|
1649
1654
|
{ ...component$1, property: 'font-size' },
|
1650
1655
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
1651
|
-
{ ...label$
|
1652
|
-
{ ...label$
|
1656
|
+
{ ...label$a, property: 'margin-left' },
|
1657
|
+
{ ...label$a, property: 'line-height' },
|
1653
1658
|
],
|
1654
1659
|
},
|
1655
1660
|
}),
|
@@ -1670,26 +1675,26 @@ const CheckboxClass = compose(
|
|
1670
1675
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
1671
1676
|
`,
|
1672
1677
|
excludeAttrsSync: ['tabindex'],
|
1673
|
-
componentName: componentName$
|
1678
|
+
componentName: componentName$u,
|
1674
1679
|
})
|
1675
1680
|
);
|
1676
1681
|
|
1677
|
-
customElements.define(componentName$
|
1682
|
+
customElements.define(componentName$v, BooleanInputInternal);
|
1678
1683
|
|
1679
|
-
customElements.define(componentName$
|
1684
|
+
customElements.define(componentName$u, CheckboxClass);
|
1680
1685
|
|
1681
|
-
const componentName$
|
1686
|
+
const componentName$t = getComponentName('switch-toggle');
|
1682
1687
|
|
1683
1688
|
const {
|
1684
|
-
host: host$
|
1689
|
+
host: host$d,
|
1685
1690
|
component,
|
1686
1691
|
checkboxElement: track,
|
1687
1692
|
checkboxSurface: knob,
|
1688
1693
|
checkboxHiddenLabel,
|
1689
|
-
label: label$
|
1690
|
-
requiredIndicator: requiredIndicator$
|
1694
|
+
label: label$9,
|
1695
|
+
requiredIndicator: requiredIndicator$9,
|
1691
1696
|
helperText: helperText$7,
|
1692
|
-
errorMessage: errorMessage$
|
1697
|
+
errorMessage: errorMessage$9,
|
1693
1698
|
} = {
|
1694
1699
|
host: { selector: () => ':host' },
|
1695
1700
|
label: { selector: '::part(label)' },
|
@@ -1705,9 +1710,9 @@ const {
|
|
1705
1710
|
const SwitchToggleClass = compose(
|
1706
1711
|
createStyleMixin({
|
1707
1712
|
mappings: {
|
1708
|
-
hostWidth: { ...host$
|
1709
|
-
fontSize: [component, label$
|
1710
|
-
fontFamily: [label$
|
1713
|
+
hostWidth: { ...host$d, property: 'width' },
|
1714
|
+
fontSize: [component, label$9, checkboxHiddenLabel],
|
1715
|
+
fontFamily: [label$9, helperText$7, errorMessage$9],
|
1711
1716
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1712
1717
|
trackBorderStyle: { ...track, property: 'border-style' },
|
1713
1718
|
trackBorderColor: { ...track, property: 'border-color' },
|
@@ -1731,24 +1736,24 @@ const SwitchToggleClass = compose(
|
|
1731
1736
|
knobLeftOffset: { ...knob, property: 'left' },
|
1732
1737
|
|
1733
1738
|
labelSpacing: [
|
1734
|
-
{ ...label$
|
1739
|
+
{ ...label$9, property: 'padding-left' },
|
1735
1740
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
1736
1741
|
],
|
1737
1742
|
labelLineHeight: [
|
1738
|
-
{ ...label$
|
1743
|
+
{ ...label$9, property: 'line-height' },
|
1739
1744
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
1740
1745
|
],
|
1741
1746
|
labelFontWeight: [
|
1742
|
-
{ ...label$
|
1747
|
+
{ ...label$9, property: 'font-weight' },
|
1743
1748
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
1744
1749
|
],
|
1745
1750
|
labelTextColor: [
|
1746
|
-
{ ...label$
|
1747
|
-
{ ...requiredIndicator$
|
1748
|
-
{ ...label$
|
1751
|
+
{ ...label$9, property: 'color' },
|
1752
|
+
{ ...requiredIndicator$9, property: 'color' },
|
1753
|
+
{ ...label$9, property: '-webkit-text-fill-color' },
|
1749
1754
|
],
|
1750
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1751
|
-
errorMessageTextColor: { ...errorMessage$
|
1755
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
1756
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
1752
1757
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
1753
1758
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
1754
1759
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
@@ -1781,17 +1786,17 @@ const SwitchToggleClass = compose(
|
|
1781
1786
|
}
|
1782
1787
|
`,
|
1783
1788
|
excludeAttrsSync: ['tabindex'],
|
1784
|
-
componentName: componentName$
|
1789
|
+
componentName: componentName$t,
|
1785
1790
|
})
|
1786
1791
|
);
|
1787
1792
|
|
1788
|
-
customElements.define(componentName$
|
1793
|
+
customElements.define(componentName$t, SwitchToggleClass);
|
1789
1794
|
|
1790
|
-
const componentName$
|
1795
|
+
const componentName$s = getComponentName('loader-linear');
|
1791
1796
|
|
1792
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1797
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
1793
1798
|
static get componentName() {
|
1794
|
-
return componentName$
|
1799
|
+
return componentName$s;
|
1795
1800
|
}
|
1796
1801
|
|
1797
1802
|
constructor() {
|
@@ -1827,18 +1832,18 @@ const selectors$1 = {
|
|
1827
1832
|
host: { selector: () => ':host' },
|
1828
1833
|
};
|
1829
1834
|
|
1830
|
-
const { after: after$1, host: host$
|
1835
|
+
const { after: after$1, host: host$c } = selectors$1;
|
1831
1836
|
|
1832
1837
|
const LoaderLinearClass = compose(
|
1833
1838
|
createStyleMixin({
|
1834
1839
|
mappings: {
|
1835
1840
|
hostDisplay: {},
|
1836
|
-
hostWidth: { ...host$
|
1841
|
+
hostWidth: { ...host$c, property: 'width' },
|
1837
1842
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
1838
1843
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
1839
1844
|
verticalPadding: [
|
1840
|
-
{ ...host$
|
1841
|
-
{ ...host$
|
1845
|
+
{ ...host$c, property: 'padding-top' },
|
1846
|
+
{ ...host$c, property: 'padding-bottom' },
|
1842
1847
|
],
|
1843
1848
|
barBackgroundColor: { property: 'background-color' },
|
1844
1849
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -1852,11 +1857,11 @@ const LoaderLinearClass = compose(
|
|
1852
1857
|
componentNameValidationMixin
|
1853
1858
|
)(RawLoaderLinear);
|
1854
1859
|
|
1855
|
-
customElements.define(componentName$
|
1860
|
+
customElements.define(componentName$s, LoaderLinearClass);
|
1856
1861
|
|
1857
|
-
const componentName$
|
1862
|
+
const componentName$r = getComponentName('loader-radial');
|
1858
1863
|
|
1859
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1864
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
1860
1865
|
constructor() {
|
1861
1866
|
super();
|
1862
1867
|
|
@@ -1900,11 +1905,11 @@ const LoaderRadialClass = compose(
|
|
1900
1905
|
componentNameValidationMixin
|
1901
1906
|
)(RawLoaderRadial);
|
1902
1907
|
|
1903
|
-
customElements.define(componentName$
|
1908
|
+
customElements.define(componentName$r, LoaderRadialClass);
|
1904
1909
|
|
1905
|
-
const componentName$
|
1910
|
+
const componentName$q = getComponentName('container');
|
1906
1911
|
|
1907
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1912
|
+
class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
|
1908
1913
|
constructor() {
|
1909
1914
|
super();
|
1910
1915
|
|
@@ -1956,10 +1961,10 @@ const ContainerClass = compose(
|
|
1956
1961
|
componentNameValidationMixin
|
1957
1962
|
)(RawContainer);
|
1958
1963
|
|
1959
|
-
customElements.define(componentName$
|
1964
|
+
customElements.define(componentName$q, ContainerClass);
|
1960
1965
|
|
1961
|
-
const componentName$
|
1962
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1966
|
+
const componentName$p = getComponentName('divider');
|
1967
|
+
class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
1963
1968
|
constructor() {
|
1964
1969
|
super();
|
1965
1970
|
|
@@ -2004,7 +2009,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$m, baseS
|
|
2004
2009
|
}
|
2005
2010
|
}
|
2006
2011
|
|
2007
|
-
const { host: host$
|
2012
|
+
const { host: host$b, before, after, text: text$3 } = {
|
2008
2013
|
host: { selector: () => ':host' },
|
2009
2014
|
before: { selector: '::before' },
|
2010
2015
|
after: { selector: '::after' },
|
@@ -2014,8 +2019,8 @@ const { host: host$a, before, after, text: text$3 } = {
|
|
2014
2019
|
const DividerClass = compose(
|
2015
2020
|
createStyleMixin({
|
2016
2021
|
mappings: {
|
2017
|
-
hostWidth: { ...host$
|
2018
|
-
hostPadding: { ...host$
|
2022
|
+
hostWidth: { ...host$b, property: 'width' },
|
2023
|
+
hostPadding: { ...host$b, property: 'padding' },
|
2019
2024
|
|
2020
2025
|
minHeight: {},
|
2021
2026
|
alignItems: {},
|
@@ -2055,9 +2060,9 @@ const DividerClass = compose(
|
|
2055
2060
|
componentNameValidationMixin
|
2056
2061
|
)(RawDivider);
|
2057
2062
|
|
2058
|
-
const componentName$
|
2063
|
+
const componentName$o = getComponentName('text');
|
2059
2064
|
|
2060
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2065
|
+
class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
|
2061
2066
|
constructor() {
|
2062
2067
|
super();
|
2063
2068
|
|
@@ -2099,11 +2104,11 @@ const TextClass = compose(
|
|
2099
2104
|
componentNameValidationMixin
|
2100
2105
|
)(RawText);
|
2101
2106
|
|
2102
|
-
customElements.define(componentName$
|
2107
|
+
customElements.define(componentName$o, TextClass);
|
2103
2108
|
|
2104
|
-
customElements.define(componentName$
|
2109
|
+
customElements.define(componentName$p, DividerClass);
|
2105
2110
|
|
2106
|
-
const { host: host$
|
2111
|
+
const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2107
2112
|
{
|
2108
2113
|
host: { selector: () => ':host' },
|
2109
2114
|
label: { selector: '::part(label)' },
|
@@ -2117,24 +2122,24 @@ const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndica
|
|
2117
2122
|
|
2118
2123
|
var textFieldMappings = {
|
2119
2124
|
// we apply font-size also on the host so we can set its width with em
|
2120
|
-
fontSize: [{}, host$
|
2121
|
-
fontFamily: [label$
|
2125
|
+
fontSize: [{}, host$a],
|
2126
|
+
fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
|
2122
2127
|
|
2123
|
-
hostWidth: { ...host$
|
2124
|
-
hostMinWidth: { ...host$
|
2128
|
+
hostWidth: { ...host$a, property: 'width' },
|
2129
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
2125
2130
|
|
2126
2131
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
2127
2132
|
|
2128
2133
|
labelTextColor: [
|
2129
|
-
{ ...label$
|
2130
|
-
{ ...requiredIndicator$
|
2134
|
+
{ ...label$8, property: 'color' },
|
2135
|
+
{ ...requiredIndicator$8, property: 'color' },
|
2131
2136
|
],
|
2132
|
-
errorMessageTextColor: { ...errorMessage$
|
2137
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
2133
2138
|
|
2134
2139
|
inputValueTextColor: { ...inputField$5, property: 'color' },
|
2135
2140
|
inputCaretTextColor: { ...input, property: 'color' },
|
2136
2141
|
|
2137
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2142
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
2138
2143
|
|
2139
2144
|
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
2140
2145
|
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
@@ -2157,9 +2162,9 @@ var textFieldMappings = {
|
|
2157
2162
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2158
2163
|
};
|
2159
2164
|
|
2160
|
-
const componentName$
|
2165
|
+
const componentName$n = getComponentName('email-field');
|
2161
2166
|
|
2162
|
-
const customMixin$
|
2167
|
+
const customMixin$6 = (superclass) =>
|
2163
2168
|
class EmailFieldMixinClass extends superclass {
|
2164
2169
|
init() {
|
2165
2170
|
super.init?.();
|
@@ -2173,10 +2178,10 @@ const EmailFieldClass = compose(
|
|
2173
2178
|
draggableMixin,
|
2174
2179
|
composedProxyInputMixin,
|
2175
2180
|
componentNameValidationMixin,
|
2176
|
-
customMixin$
|
2181
|
+
customMixin$6
|
2177
2182
|
)(
|
2178
2183
|
createProxy({
|
2179
|
-
slots: ['suffix'],
|
2184
|
+
slots: ['', 'suffix'],
|
2180
2185
|
wrappedEleName: 'vaadin-email-field',
|
2181
2186
|
style: () => `
|
2182
2187
|
:host {
|
@@ -2187,18 +2192,18 @@ const EmailFieldClass = compose(
|
|
2187
2192
|
}))
|
2188
2193
|
}
|
2189
2194
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2190
|
-
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2195
|
+
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2191
2196
|
`,
|
2192
2197
|
excludeAttrsSync: ['tabindex'],
|
2193
|
-
componentName: componentName$
|
2198
|
+
componentName: componentName$n,
|
2194
2199
|
})
|
2195
2200
|
);
|
2196
2201
|
|
2197
|
-
customElements.define(componentName$
|
2202
|
+
customElements.define(componentName$n, EmailFieldClass);
|
2198
2203
|
|
2199
|
-
const componentName$
|
2204
|
+
const componentName$m = getComponentName('link');
|
2200
2205
|
|
2201
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2206
|
+
class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
|
2202
2207
|
constructor() {
|
2203
2208
|
super();
|
2204
2209
|
|
@@ -2244,12 +2249,12 @@ const selectors = {
|
|
2244
2249
|
text: { selector: () => TextClass.componentName },
|
2245
2250
|
};
|
2246
2251
|
|
2247
|
-
const { anchor, text: text$2, host: host$
|
2252
|
+
const { anchor, text: text$2, host: host$9, wrapper: wrapper$1 } = selectors;
|
2248
2253
|
|
2249
2254
|
const LinkClass = compose(
|
2250
2255
|
createStyleMixin({
|
2251
2256
|
mappings: {
|
2252
|
-
hostWidth: { ...host$
|
2257
|
+
hostWidth: { ...host$9, property: 'width' },
|
2253
2258
|
textAlign: wrapper$1,
|
2254
2259
|
textColor: [
|
2255
2260
|
{ ...anchor, property: 'color' },
|
@@ -2262,7 +2267,7 @@ const LinkClass = compose(
|
|
2262
2267
|
componentNameValidationMixin
|
2263
2268
|
)(RawLink);
|
2264
2269
|
|
2265
|
-
customElements.define(componentName$
|
2270
|
+
customElements.define(componentName$m, LinkClass);
|
2266
2271
|
|
2267
2272
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2268
2273
|
let style;
|
@@ -2314,27 +2319,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2314
2319
|
return CssVarImageClass;
|
2315
2320
|
};
|
2316
2321
|
|
2317
|
-
const componentName$
|
2322
|
+
const componentName$l = getComponentName('logo');
|
2318
2323
|
|
2319
2324
|
const LogoClass = createCssVarImageClass({
|
2320
|
-
componentName: componentName$
|
2325
|
+
componentName: componentName$l,
|
2321
2326
|
varName: 'url',
|
2322
2327
|
fallbackVarName: 'fallbackUrl',
|
2323
2328
|
});
|
2324
2329
|
|
2325
|
-
customElements.define(componentName$
|
2330
|
+
customElements.define(componentName$l, LogoClass);
|
2326
2331
|
|
2327
|
-
const componentName$
|
2332
|
+
const componentName$k = getComponentName('totp-image');
|
2328
2333
|
|
2329
2334
|
const TotpImageClass = createCssVarImageClass({
|
2330
|
-
componentName: componentName$
|
2335
|
+
componentName: componentName$k,
|
2331
2336
|
varName: 'url',
|
2332
2337
|
fallbackVarName: 'fallbackUrl',
|
2333
2338
|
});
|
2334
2339
|
|
2335
|
-
customElements.define(componentName$
|
2340
|
+
customElements.define(componentName$k, TotpImageClass);
|
2336
2341
|
|
2337
|
-
const componentName$
|
2342
|
+
const componentName$j = getComponentName('number-field');
|
2338
2343
|
|
2339
2344
|
const NumberFieldClass = compose(
|
2340
2345
|
createStyleMixin({
|
@@ -2345,7 +2350,7 @@ const NumberFieldClass = compose(
|
|
2345
2350
|
componentNameValidationMixin
|
2346
2351
|
)(
|
2347
2352
|
createProxy({
|
2348
|
-
slots: ['prefix', 'suffix'],
|
2353
|
+
slots: ['', 'prefix', 'suffix'],
|
2349
2354
|
wrappedEleName: 'vaadin-number-field',
|
2350
2355
|
style: () => `
|
2351
2356
|
:host {
|
@@ -2359,11 +2364,11 @@ const NumberFieldClass = compose(
|
|
2359
2364
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2360
2365
|
`,
|
2361
2366
|
excludeAttrsSync: ['tabindex'],
|
2362
|
-
componentName: componentName$
|
2367
|
+
componentName: componentName$j,
|
2363
2368
|
})
|
2364
2369
|
);
|
2365
2370
|
|
2366
|
-
customElements.define(componentName$
|
2371
|
+
customElements.define(componentName$j, NumberFieldClass);
|
2367
2372
|
|
2368
2373
|
const focusElement = (ele) => {
|
2369
2374
|
ele?.focus();
|
@@ -2381,23 +2386,19 @@ const getSanitizedCharacters = (str) => {
|
|
2381
2386
|
|
2382
2387
|
/* eslint-disable no-param-reassign */
|
2383
2388
|
|
2384
|
-
const componentName$
|
2389
|
+
const componentName$i = getComponentName('passcode-internal');
|
2385
2390
|
|
2386
2391
|
const observedAttributes$5 = ['digits'];
|
2387
2392
|
|
2388
2393
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2389
2394
|
|
2390
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2395
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
2391
2396
|
|
2392
2397
|
class PasscodeInternal extends BaseInputClass$4 {
|
2393
2398
|
static get observedAttributes() {
|
2394
2399
|
return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
|
2395
2400
|
}
|
2396
2401
|
|
2397
|
-
static get componentName() {
|
2398
|
-
return componentName$f;
|
2399
|
-
}
|
2400
|
-
|
2401
2402
|
constructor() {
|
2402
2403
|
super();
|
2403
2404
|
|
@@ -2587,11 +2588,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2587
2588
|
}
|
2588
2589
|
}
|
2589
2590
|
|
2590
|
-
const componentName$
|
2591
|
+
const componentName$h = getComponentName('text-field');
|
2591
2592
|
|
2592
2593
|
const observedAttrs = ['type'];
|
2593
2594
|
|
2594
|
-
const customMixin$
|
2595
|
+
const customMixin$5 = (superclass) =>
|
2595
2596
|
class TextFieldClass extends superclass {
|
2596
2597
|
static get observedAttributes() {
|
2597
2598
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2618,7 +2619,7 @@ const TextFieldClass = compose(
|
|
2618
2619
|
draggableMixin,
|
2619
2620
|
composedProxyInputMixin,
|
2620
2621
|
componentNameValidationMixin,
|
2621
|
-
customMixin$
|
2622
|
+
customMixin$5
|
2622
2623
|
)(
|
2623
2624
|
createProxy({
|
2624
2625
|
slots: ['prefix', 'suffix'],
|
@@ -2635,15 +2636,15 @@ const TextFieldClass = compose(
|
|
2635
2636
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2636
2637
|
`,
|
2637
2638
|
excludeAttrsSync: ['tabindex'],
|
2638
|
-
componentName: componentName$
|
2639
|
+
componentName: componentName$h,
|
2639
2640
|
})
|
2640
2641
|
);
|
2641
2642
|
|
2642
|
-
const componentName$
|
2643
|
+
const componentName$g = getComponentName('passcode');
|
2643
2644
|
|
2644
2645
|
const observedAttributes$4 = ['digits'];
|
2645
2646
|
|
2646
|
-
const customMixin$
|
2647
|
+
const customMixin$4 = (superclass) =>
|
2647
2648
|
class PasscodeMixinClass extends superclass {
|
2648
2649
|
static get observedAttributes() {
|
2649
2650
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2658,17 +2659,17 @@ const customMixin$3 = (superclass) =>
|
|
2658
2659
|
const template = document.createElement('template');
|
2659
2660
|
|
2660
2661
|
template.innerHTML = `
|
2661
|
-
<${componentName$
|
2662
|
+
<${componentName$i}
|
2662
2663
|
bordered="true"
|
2663
2664
|
name="code"
|
2664
2665
|
tabindex="-1"
|
2665
2666
|
slot="input"
|
2666
|
-
></${componentName$
|
2667
|
+
><slot></slot></${componentName$i}>
|
2667
2668
|
`;
|
2668
2669
|
|
2669
2670
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2670
2671
|
|
2671
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2672
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
2672
2673
|
|
2673
2674
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2674
2675
|
}
|
@@ -2683,13 +2684,13 @@ const customMixin$3 = (superclass) =>
|
|
2683
2684
|
};
|
2684
2685
|
|
2685
2686
|
const {
|
2686
|
-
host: host$
|
2687
|
+
host: host$8,
|
2687
2688
|
digitField,
|
2688
|
-
label: label$
|
2689
|
-
requiredIndicator: requiredIndicator$
|
2690
|
-
internalWrapper,
|
2689
|
+
label: label$7,
|
2690
|
+
requiredIndicator: requiredIndicator$7,
|
2691
|
+
internalWrapper: internalWrapper$1,
|
2691
2692
|
focusedDigitField,
|
2692
|
-
errorMessage: errorMessage$
|
2693
|
+
errorMessage: errorMessage$7,
|
2693
2694
|
} = {
|
2694
2695
|
host: { selector: () => ':host' },
|
2695
2696
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
@@ -2705,15 +2706,15 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
2705
2706
|
const PasscodeClass = compose(
|
2706
2707
|
createStyleMixin({
|
2707
2708
|
mappings: {
|
2708
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
2709
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
|
2709
2710
|
hostWidth: { property: 'width' },
|
2710
|
-
fontFamily: host$
|
2711
|
+
fontFamily: host$8,
|
2711
2712
|
labelTextColor: [
|
2712
|
-
{ ...label$
|
2713
|
-
{ ...requiredIndicator$
|
2713
|
+
{ ...label$7, property: 'color' },
|
2714
|
+
{ ...requiredIndicator$7, property: 'color' },
|
2714
2715
|
],
|
2715
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2716
|
-
errorMessageTextColor: { ...errorMessage$
|
2716
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
2717
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
2717
2718
|
digitValueTextColor: {
|
2718
2719
|
selector: TextFieldClass.componentName,
|
2719
2720
|
property: textVars$2.inputValueTextColor,
|
@@ -2725,7 +2726,7 @@ const PasscodeClass = compose(
|
|
2725
2726
|
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
2726
2727
|
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
2727
2728
|
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
2728
|
-
digitSpacing: { ...internalWrapper, property: 'gap' },
|
2729
|
+
digitSpacing: { ...internalWrapper$1, property: 'gap' },
|
2729
2730
|
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
2730
2731
|
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
2731
2732
|
|
@@ -2735,7 +2736,7 @@ const PasscodeClass = compose(
|
|
2735
2736
|
draggableMixin,
|
2736
2737
|
composedProxyInputMixin,
|
2737
2738
|
componentNameValidationMixin,
|
2738
|
-
customMixin$
|
2739
|
+
customMixin$4
|
2739
2740
|
)(
|
2740
2741
|
createProxy({
|
2741
2742
|
slots: [],
|
@@ -2806,15 +2807,15 @@ const PasscodeClass = compose(
|
|
2806
2807
|
${resetInputCursor('vaadin-text-field')}
|
2807
2808
|
`,
|
2808
2809
|
excludeAttrsSync: ['tabindex'],
|
2809
|
-
componentName: componentName$
|
2810
|
+
componentName: componentName$g,
|
2810
2811
|
})
|
2811
2812
|
);
|
2812
2813
|
|
2813
|
-
customElements.define(componentName$
|
2814
|
+
customElements.define(componentName$h, TextFieldClass);
|
2814
2815
|
|
2815
|
-
customElements.define(componentName$
|
2816
|
+
customElements.define(componentName$i, PasscodeInternal);
|
2816
2817
|
|
2817
|
-
customElements.define(componentName$
|
2818
|
+
customElements.define(componentName$g, PasscodeClass);
|
2818
2819
|
|
2819
2820
|
const passwordDraggableMixin = (superclass) =>
|
2820
2821
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2850,18 +2851,18 @@ const passwordDraggableMixin = (superclass) =>
|
|
2850
2851
|
}
|
2851
2852
|
};
|
2852
2853
|
|
2853
|
-
const componentName$
|
2854
|
+
const componentName$f = getComponentName('password');
|
2854
2855
|
|
2855
2856
|
const {
|
2856
|
-
host: host$
|
2857
|
+
host: host$7,
|
2857
2858
|
inputField: inputField$4,
|
2858
2859
|
inputElement: inputElement$1,
|
2859
2860
|
inputElementPlaceholder,
|
2860
2861
|
revealButtonContainer,
|
2861
2862
|
revealButtonIcon,
|
2862
|
-
label: label$
|
2863
|
-
requiredIndicator: requiredIndicator$
|
2864
|
-
errorMessage: errorMessage$
|
2863
|
+
label: label$6,
|
2864
|
+
requiredIndicator: requiredIndicator$6,
|
2865
|
+
errorMessage: errorMessage$6,
|
2865
2866
|
helperText: helperText$5,
|
2866
2867
|
} = {
|
2867
2868
|
host: { selector: () => ':host' },
|
@@ -2879,10 +2880,10 @@ const {
|
|
2879
2880
|
const PasswordClass = compose(
|
2880
2881
|
createStyleMixin({
|
2881
2882
|
mappings: {
|
2882
|
-
hostWidth: { ...host$
|
2883
|
-
hostMinWidth: { ...host$
|
2884
|
-
fontSize: [{}, host$
|
2885
|
-
fontFamily: [label$
|
2883
|
+
hostWidth: { ...host$7, property: 'width' },
|
2884
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
2885
|
+
fontSize: [{}, host$7],
|
2886
|
+
fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
|
2886
2887
|
inputHeight: { ...inputField$4, property: 'height' },
|
2887
2888
|
inputHorizontalPadding: [
|
2888
2889
|
{ ...inputElement$1, property: 'padding-left' },
|
@@ -2901,11 +2902,11 @@ const PasswordClass = compose(
|
|
2901
2902
|
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
2902
2903
|
|
2903
2904
|
labelTextColor: [
|
2904
|
-
{ ...label$
|
2905
|
-
{ ...requiredIndicator$
|
2905
|
+
{ ...label$6, property: 'color' },
|
2906
|
+
{ ...requiredIndicator$6, property: 'color' },
|
2906
2907
|
],
|
2907
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2908
|
-
errorMessageTextColor: { ...errorMessage$
|
2908
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
2909
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
2909
2910
|
|
2910
2911
|
inputValueTextColor: [
|
2911
2912
|
{ ...inputElement$1, property: 'color' },
|
@@ -2926,7 +2927,7 @@ const PasswordClass = compose(
|
|
2926
2927
|
passwordDraggableMixin
|
2927
2928
|
)(
|
2928
2929
|
createProxy({
|
2929
|
-
slots: ['suffix'],
|
2930
|
+
slots: ['', 'suffix'],
|
2930
2931
|
wrappedEleName: 'vaadin-password-field',
|
2931
2932
|
style: () => `
|
2932
2933
|
:host {
|
@@ -2951,7 +2952,7 @@ const PasswordClass = compose(
|
|
2951
2952
|
}
|
2952
2953
|
vaadin-password-field[focus-ring]::part(input-field) {
|
2953
2954
|
box-shadow: none;
|
2954
|
-
}
|
2955
|
+
}
|
2955
2956
|
vaadin-password-field > input {
|
2956
2957
|
min-height: 0;
|
2957
2958
|
-webkit-mask-image: none;
|
@@ -2978,23 +2979,23 @@ const PasswordClass = compose(
|
|
2978
2979
|
}
|
2979
2980
|
`,
|
2980
2981
|
excludeAttrsSync: ['tabindex'],
|
2981
|
-
componentName: componentName$
|
2982
|
+
componentName: componentName$f,
|
2982
2983
|
})
|
2983
2984
|
);
|
2984
2985
|
|
2985
|
-
customElements.define(componentName$
|
2986
|
+
customElements.define(componentName$f, PasswordClass);
|
2986
2987
|
|
2987
|
-
const componentName$
|
2988
|
+
const componentName$e = getComponentName('text-area');
|
2988
2989
|
|
2989
2990
|
const {
|
2990
|
-
host: host$
|
2991
|
-
label: label$
|
2991
|
+
host: host$6,
|
2992
|
+
label: label$5,
|
2992
2993
|
placeholder: placeholder$1,
|
2993
2994
|
inputField: inputField$3,
|
2994
2995
|
textArea: textArea$2,
|
2995
|
-
requiredIndicator: requiredIndicator$
|
2996
|
+
requiredIndicator: requiredIndicator$5,
|
2996
2997
|
helperText: helperText$4,
|
2997
|
-
errorMessage: errorMessage$
|
2998
|
+
errorMessage: errorMessage$5,
|
2998
2999
|
} = {
|
2999
3000
|
host: { selector: () => ':host' },
|
3000
3001
|
label: { selector: '::part(label)' },
|
@@ -3009,16 +3010,16 @@ const {
|
|
3009
3010
|
const TextAreaClass = compose(
|
3010
3011
|
createStyleMixin({
|
3011
3012
|
mappings: {
|
3012
|
-
hostWidth: { ...host$
|
3013
|
-
hostMinWidth: { ...host$
|
3014
|
-
fontSize: [host$
|
3015
|
-
fontFamily: [label$
|
3013
|
+
hostWidth: { ...host$6, property: 'width' },
|
3014
|
+
hostMinWidth: { ...host$6, property: 'min-width' },
|
3015
|
+
fontSize: [host$6, textArea$2],
|
3016
|
+
fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
|
3016
3017
|
labelTextColor: [
|
3017
|
-
{ ...label$
|
3018
|
-
{ ...requiredIndicator$
|
3018
|
+
{ ...label$5, property: 'color' },
|
3019
|
+
{ ...requiredIndicator$5, property: 'color' },
|
3019
3020
|
],
|
3020
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3021
|
-
errorMessageTextColor: { ...errorMessage$
|
3021
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
3022
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
3022
3023
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
3023
3024
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
3024
3025
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
@@ -3056,17 +3057,17 @@ const TextAreaClass = compose(
|
|
3056
3057
|
${resetInputCursor('vaadin-text-area')}
|
3057
3058
|
`,
|
3058
3059
|
excludeAttrsSync: ['tabindex'],
|
3059
|
-
componentName: componentName$
|
3060
|
+
componentName: componentName$e,
|
3060
3061
|
})
|
3061
3062
|
);
|
3062
3063
|
|
3063
|
-
customElements.define(componentName$
|
3064
|
+
customElements.define(componentName$e, TextAreaClass);
|
3064
3065
|
|
3065
3066
|
const observedAttributes$3 = ['src', 'alt'];
|
3066
3067
|
|
3067
|
-
const componentName$
|
3068
|
+
const componentName$d = getComponentName('image');
|
3068
3069
|
|
3069
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3070
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
|
3070
3071
|
class RawImage extends BaseClass$1 {
|
3071
3072
|
static get observedAttributes() {
|
3072
3073
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3106,9 +3107,9 @@ const ImageClass = compose(
|
|
3106
3107
|
draggableMixin
|
3107
3108
|
)(RawImage);
|
3108
3109
|
|
3109
|
-
customElements.define(componentName$
|
3110
|
+
customElements.define(componentName$d, ImageClass);
|
3110
3111
|
|
3111
|
-
const componentName$
|
3112
|
+
const componentName$c = getComponentName('combo-box');
|
3112
3113
|
|
3113
3114
|
const ComboBoxMixin = (superclass) =>
|
3114
3115
|
class ComboBoxMixinClass extends superclass {
|
@@ -3160,15 +3161,15 @@ const ComboBoxMixin = (superclass) =>
|
|
3160
3161
|
};
|
3161
3162
|
|
3162
3163
|
const {
|
3163
|
-
host: host$
|
3164
|
+
host: host$5,
|
3164
3165
|
inputField: inputField$2,
|
3165
3166
|
inputElement,
|
3166
3167
|
placeholder,
|
3167
3168
|
toggle,
|
3168
|
-
label: label$
|
3169
|
-
requiredIndicator: requiredIndicator$
|
3169
|
+
label: label$4,
|
3170
|
+
requiredIndicator: requiredIndicator$4,
|
3170
3171
|
helperText: helperText$3,
|
3171
|
-
errorMessage: errorMessage$
|
3172
|
+
errorMessage: errorMessage$4,
|
3172
3173
|
} = {
|
3173
3174
|
host: { selector: () => ':host' },
|
3174
3175
|
inputField: { selector: '::part(input-field)' },
|
@@ -3189,22 +3190,22 @@ const {
|
|
3189
3190
|
const ComboBoxClass = compose(
|
3190
3191
|
createStyleMixin({
|
3191
3192
|
mappings: {
|
3192
|
-
hostWidth: { ...host$
|
3193
|
+
hostWidth: { ...host$5, property: 'width' },
|
3193
3194
|
// we apply font-size also on the host so we can set its width with em
|
3194
|
-
fontSize: [{}, host$
|
3195
|
-
fontFamily: [label$
|
3195
|
+
fontSize: [{}, host$5],
|
3196
|
+
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
3196
3197
|
labelTextColor: [
|
3197
|
-
{ ...label$
|
3198
|
-
{ ...requiredIndicator$
|
3198
|
+
{ ...label$4, property: 'color' },
|
3199
|
+
{ ...requiredIndicator$4, property: 'color' },
|
3199
3200
|
],
|
3200
|
-
errorMessageTextColor: { ...errorMessage$
|
3201
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
3201
3202
|
inputHeight: { ...inputField$2, property: 'height' },
|
3202
3203
|
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
3203
3204
|
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
3204
3205
|
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
3205
3206
|
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
3206
3207
|
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
3207
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3208
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
3208
3209
|
inputValueTextColor: { ...inputField$2, property: 'color' },
|
3209
3210
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3210
3211
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
@@ -3252,7 +3253,7 @@ const ComboBoxClass = compose(
|
|
3252
3253
|
ComboBoxMixin
|
3253
3254
|
)(
|
3254
3255
|
createProxy({
|
3255
|
-
slots: ['prefix'],
|
3256
|
+
slots: ['', 'prefix'],
|
3256
3257
|
wrappedEleName: 'vaadin-combo-box',
|
3257
3258
|
style: () => `
|
3258
3259
|
:host {
|
@@ -3288,12 +3289,12 @@ const ComboBoxClass = compose(
|
|
3288
3289
|
// and reset items to an empty array, and opening the list box with no items
|
3289
3290
|
// to display.
|
3290
3291
|
excludeAttrsSync: ['tabindex', 'size'],
|
3291
|
-
componentName: componentName$
|
3292
|
+
componentName: componentName$c,
|
3292
3293
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3293
3294
|
})
|
3294
3295
|
);
|
3295
3296
|
|
3296
|
-
customElements.define(componentName$
|
3297
|
+
customElements.define(componentName$c, ComboBoxClass);
|
3297
3298
|
|
3298
3299
|
var CountryCodes = [
|
3299
3300
|
{
|
@@ -4533,7 +4534,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4533
4534
|
</div>
|
4534
4535
|
`;
|
4535
4536
|
|
4536
|
-
const componentName$
|
4537
|
+
const componentName$b = getComponentName('phone-field-internal');
|
4537
4538
|
|
4538
4539
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4539
4540
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4545,7 +4546,7 @@ const mapAttrs$1 = {
|
|
4545
4546
|
|
4546
4547
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4547
4548
|
|
4548
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4549
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
4549
4550
|
|
4550
4551
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4551
4552
|
static get observedAttributes() {
|
@@ -4735,14 +4736,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4735
4736
|
}
|
4736
4737
|
};
|
4737
4738
|
|
4738
|
-
customElements.define(componentName$
|
4739
|
+
customElements.define(componentName$b, PhoneFieldInternal$1);
|
4739
4740
|
|
4740
4741
|
const textVars$1 = TextFieldClass.cssVarList;
|
4741
4742
|
const comboVars = ComboBoxClass.cssVarList;
|
4742
4743
|
|
4743
|
-
const componentName$
|
4744
|
+
const componentName$a = getComponentName('phone-field');
|
4744
4745
|
|
4745
|
-
const customMixin$
|
4746
|
+
const customMixin$3 = (superclass) =>
|
4746
4747
|
class PhoneFieldMixinClass extends superclass {
|
4747
4748
|
static get CountryCodes() {
|
4748
4749
|
return CountryCodes;
|
@@ -4754,15 +4755,15 @@ const customMixin$2 = (superclass) =>
|
|
4754
4755
|
const template = document.createElement('template');
|
4755
4756
|
|
4756
4757
|
template.innerHTML = `
|
4757
|
-
<${componentName$
|
4758
|
+
<${componentName$b}
|
4758
4759
|
tabindex="-1"
|
4759
4760
|
slot="input"
|
4760
|
-
></${componentName$
|
4761
|
+
></${componentName$b}>
|
4761
4762
|
`;
|
4762
4763
|
|
4763
4764
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4764
4765
|
|
4765
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4766
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
4766
4767
|
|
4767
4768
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4768
4769
|
includeAttrs: [
|
@@ -4782,14 +4783,14 @@ const customMixin$2 = (superclass) =>
|
|
4782
4783
|
};
|
4783
4784
|
|
4784
4785
|
const {
|
4785
|
-
host: host$
|
4786
|
-
label: label$
|
4787
|
-
requiredIndicator: requiredIndicator$
|
4786
|
+
host: host$4,
|
4787
|
+
label: label$3,
|
4788
|
+
requiredIndicator: requiredIndicator$3,
|
4788
4789
|
inputField: inputField$1,
|
4789
4790
|
countryCodeInput,
|
4790
4791
|
phoneInput: phoneInput$1,
|
4791
4792
|
separator,
|
4792
|
-
errorMessage: errorMessage$
|
4793
|
+
errorMessage: errorMessage$3,
|
4793
4794
|
helperText: helperText$2,
|
4794
4795
|
} = {
|
4795
4796
|
host: { selector: () => ':host' },
|
@@ -4807,7 +4808,7 @@ const PhoneFieldClass = compose(
|
|
4807
4808
|
createStyleMixin({
|
4808
4809
|
mappings: {
|
4809
4810
|
fontSize: [
|
4810
|
-
host$
|
4811
|
+
host$4,
|
4811
4812
|
inputField$1,
|
4812
4813
|
{
|
4813
4814
|
selector: TextFieldClass.componentName,
|
@@ -4819,8 +4820,8 @@ const PhoneFieldClass = compose(
|
|
4819
4820
|
},
|
4820
4821
|
],
|
4821
4822
|
fontFamily: [
|
4822
|
-
label$
|
4823
|
-
errorMessage$
|
4823
|
+
label$3,
|
4824
|
+
errorMessage$3,
|
4824
4825
|
helperText$2,
|
4825
4826
|
{
|
4826
4827
|
...countryCodeInput,
|
@@ -4828,7 +4829,7 @@ const PhoneFieldClass = compose(
|
|
4828
4829
|
},
|
4829
4830
|
],
|
4830
4831
|
hostWidth: [
|
4831
|
-
{ ...host$
|
4832
|
+
{ ...host$4, property: 'width' },
|
4832
4833
|
{ ...phoneInput$1, property: 'width' },
|
4833
4834
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
4834
4835
|
],
|
@@ -4855,11 +4856,11 @@ const PhoneFieldClass = compose(
|
|
4855
4856
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
4856
4857
|
|
4857
4858
|
labelTextColor: [
|
4858
|
-
{ ...label$
|
4859
|
-
{ ...requiredIndicator$
|
4859
|
+
{ ...label$3, property: 'color' },
|
4860
|
+
{ ...requiredIndicator$3, property: 'color' },
|
4860
4861
|
],
|
4861
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
4862
|
-
errorMessageTextColor: { ...errorMessage$
|
4862
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
4863
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
4863
4864
|
|
4864
4865
|
inputValueTextColor: [
|
4865
4866
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
@@ -4881,7 +4882,7 @@ const PhoneFieldClass = compose(
|
|
4881
4882
|
}),
|
4882
4883
|
draggableMixin,
|
4883
4884
|
composedProxyInputMixin,
|
4884
|
-
customMixin$
|
4885
|
+
customMixin$3
|
4885
4886
|
)(
|
4886
4887
|
createProxy({
|
4887
4888
|
slots: [],
|
@@ -4957,17 +4958,17 @@ const PhoneFieldClass = compose(
|
|
4957
4958
|
}
|
4958
4959
|
`,
|
4959
4960
|
excludeAttrsSync: ['tabindex'],
|
4960
|
-
componentName: componentName$
|
4961
|
+
componentName: componentName$a,
|
4961
4962
|
})
|
4962
4963
|
);
|
4963
4964
|
|
4964
|
-
customElements.define(componentName$
|
4965
|
+
customElements.define(componentName$a, PhoneFieldClass);
|
4965
4966
|
|
4966
4967
|
const getCountryByCodeId = (countryCode) => {
|
4967
4968
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
4968
4969
|
};
|
4969
4970
|
|
4970
|
-
const componentName$
|
4971
|
+
const componentName$9 = getComponentName('phone-field-internal-input-box');
|
4971
4972
|
|
4972
4973
|
const observedAttributes$2 = [
|
4973
4974
|
'disabled',
|
@@ -4981,7 +4982,7 @@ const mapAttrs = {
|
|
4981
4982
|
'phone-input-placeholder': 'placeholder',
|
4982
4983
|
};
|
4983
4984
|
|
4984
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
4985
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
|
4985
4986
|
|
4986
4987
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
4987
4988
|
static get observedAttributes() {
|
@@ -5120,13 +5121,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5120
5121
|
}
|
5121
5122
|
}
|
5122
5123
|
|
5123
|
-
customElements.define(componentName$
|
5124
|
+
customElements.define(componentName$9, PhoneFieldInternal);
|
5124
5125
|
|
5125
5126
|
const textVars = TextFieldClass.cssVarList;
|
5126
5127
|
|
5127
|
-
const componentName$
|
5128
|
+
const componentName$8 = getComponentName('phone-input-box-field');
|
5128
5129
|
|
5129
|
-
const customMixin$
|
5130
|
+
const customMixin$2 = (superclass) =>
|
5130
5131
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5131
5132
|
static get CountryCodes() {
|
5132
5133
|
return CountryCodes;
|
@@ -5138,15 +5139,15 @@ const customMixin$1 = (superclass) =>
|
|
5138
5139
|
const template = document.createElement('template');
|
5139
5140
|
|
5140
5141
|
template.innerHTML = `
|
5141
|
-
<${componentName$
|
5142
|
+
<${componentName$9}
|
5142
5143
|
tabindex="-1"
|
5143
5144
|
slot="input"
|
5144
|
-
></${componentName$
|
5145
|
+
></${componentName$9}>
|
5145
5146
|
`;
|
5146
5147
|
|
5147
5148
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5148
5149
|
|
5149
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5150
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
5150
5151
|
|
5151
5152
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5152
5153
|
includeAttrs: [
|
@@ -5163,7 +5164,7 @@ const customMixin$1 = (superclass) =>
|
|
5163
5164
|
}
|
5164
5165
|
};
|
5165
5166
|
|
5166
|
-
const { host: host$
|
5167
|
+
const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
5167
5168
|
host: { selector: () => ':host' },
|
5168
5169
|
label: { selector: '::part(label)' },
|
5169
5170
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5177,16 +5178,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
5177
5178
|
createStyleMixin({
|
5178
5179
|
mappings: {
|
5179
5180
|
fontSize: [
|
5180
|
-
host$
|
5181
|
+
host$3,
|
5181
5182
|
inputField,
|
5182
5183
|
{
|
5183
5184
|
selector: TextFieldClass.componentName,
|
5184
5185
|
property: TextFieldClass.cssVarList.fontSize,
|
5185
5186
|
},
|
5186
5187
|
],
|
5187
|
-
fontFamily: [label$
|
5188
|
-
hostWidth: { ...host$
|
5189
|
-
hostMinWidth: { ...host$
|
5188
|
+
fontFamily: [label$2, errorMessage$2, helperText$1],
|
5189
|
+
hostWidth: { ...host$3, property: 'width' },
|
5190
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
5190
5191
|
|
5191
5192
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
5192
5193
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
@@ -5194,11 +5195,11 @@ const PhoneFieldInputBoxClass = compose(
|
|
5194
5195
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
5195
5196
|
|
5196
5197
|
labelTextColor: [
|
5197
|
-
{ ...label$
|
5198
|
-
{ ...requiredIndicator$
|
5198
|
+
{ ...label$2, property: 'color' },
|
5199
|
+
{ ...requiredIndicator$2, property: 'color' },
|
5199
5200
|
],
|
5200
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
5201
|
-
errorMessageTextColor: { ...errorMessage$
|
5201
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
5202
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
5202
5203
|
|
5203
5204
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
5204
5205
|
|
@@ -5212,7 +5213,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5212
5213
|
}),
|
5213
5214
|
draggableMixin,
|
5214
5215
|
composedProxyInputMixin,
|
5215
|
-
customMixin$
|
5216
|
+
customMixin$2
|
5216
5217
|
)(
|
5217
5218
|
createProxy({
|
5218
5219
|
slots: [],
|
@@ -5278,17 +5279,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5278
5279
|
}
|
5279
5280
|
`,
|
5280
5281
|
excludeAttrsSync: ['tabindex'],
|
5281
|
-
componentName: componentName$
|
5282
|
+
componentName: componentName$8,
|
5282
5283
|
})
|
5283
5284
|
);
|
5284
5285
|
|
5285
|
-
customElements.define(componentName$
|
5286
|
+
customElements.define(componentName$8, PhoneFieldInputBoxClass);
|
5286
5287
|
|
5287
|
-
const componentName$
|
5288
|
+
const componentName$7 = getComponentName('new-password-internal');
|
5288
5289
|
|
5289
|
-
const componentName$
|
5290
|
+
const componentName$6 = getComponentName('new-password');
|
5290
5291
|
|
5291
|
-
const customMixin = (superclass) =>
|
5292
|
+
const customMixin$1 = (superclass) =>
|
5292
5293
|
class NewPasswordMixinClass extends superclass {
|
5293
5294
|
init() {
|
5294
5295
|
super.init?.();
|
@@ -5296,16 +5297,16 @@ const customMixin = (superclass) =>
|
|
5296
5297
|
const template = document.createElement('template');
|
5297
5298
|
|
5298
5299
|
template.innerHTML = `
|
5299
|
-
<${componentName$
|
5300
|
+
<${componentName$7}
|
5300
5301
|
name="new-password"
|
5301
5302
|
tabindex="-1"
|
5302
5303
|
slot="input"
|
5303
|
-
></${componentName$
|
5304
|
+
></${componentName$7}>
|
5304
5305
|
`;
|
5305
5306
|
|
5306
5307
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5307
5308
|
|
5308
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5309
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$7);
|
5309
5310
|
|
5310
5311
|
forwardAttrs(this, this.inputElement, {
|
5311
5312
|
includeAttrs: [
|
@@ -5326,7 +5327,7 @@ const customMixin = (superclass) =>
|
|
5326
5327
|
}
|
5327
5328
|
};
|
5328
5329
|
|
5329
|
-
const { host: host$
|
5330
|
+
const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
5330
5331
|
host: { selector: () => ':host' },
|
5331
5332
|
label: { selector: '::part(label)' },
|
5332
5333
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5338,24 +5339,24 @@ const NewPasswordClass = compose(
|
|
5338
5339
|
createStyleMixin({
|
5339
5340
|
mappings: {
|
5340
5341
|
fontSize: [
|
5341
|
-
host$
|
5342
|
+
host$2,
|
5342
5343
|
{},
|
5343
5344
|
{
|
5344
5345
|
selector: PasswordClass.componentName,
|
5345
5346
|
property: PasswordClass.cssVarList.fontSize,
|
5346
5347
|
},
|
5347
5348
|
],
|
5348
|
-
fontFamily: [label, errorMessage, helperText],
|
5349
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
5350
|
-
hostWidth: { ...host$
|
5351
|
-
hostMinWidth: { ...host$
|
5352
|
-
inputsRequiredIndicator: { ...host$
|
5349
|
+
fontFamily: [label$1, errorMessage$1, helperText],
|
5350
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
5351
|
+
hostWidth: { ...host$2, property: 'width' },
|
5352
|
+
hostMinWidth: { ...host$2, property: 'min-width' },
|
5353
|
+
inputsRequiredIndicator: { ...host$2, property: 'content' },
|
5353
5354
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5354
5355
|
},
|
5355
5356
|
}),
|
5356
5357
|
draggableMixin,
|
5357
5358
|
composedProxyInputMixin,
|
5358
|
-
customMixin
|
5359
|
+
customMixin$1
|
5359
5360
|
)(
|
5360
5361
|
createProxy({
|
5361
5362
|
slots: [],
|
@@ -5404,7 +5405,7 @@ const NewPasswordClass = compose(
|
|
5404
5405
|
},
|
5405
5406
|
`,
|
5406
5407
|
excludeAttrsSync: ['tabindex'],
|
5407
|
-
componentName: componentName$
|
5408
|
+
componentName: componentName$6,
|
5408
5409
|
})
|
5409
5410
|
);
|
5410
5411
|
|
@@ -5428,7 +5429,7 @@ const commonAttrs = [
|
|
5428
5429
|
|
5429
5430
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5430
5431
|
|
5431
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5432
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
5432
5433
|
|
5433
5434
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5434
5435
|
static get observedAttributes() {
|
@@ -5588,16 +5589,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5588
5589
|
}
|
5589
5590
|
}
|
5590
5591
|
|
5591
|
-
customElements.define(componentName$
|
5592
|
+
customElements.define(componentName$7, NewPasswordInternal);
|
5592
5593
|
|
5593
|
-
customElements.define(componentName$
|
5594
|
+
customElements.define(componentName$6, NewPasswordClass);
|
5594
5595
|
|
5595
|
-
const componentName$
|
5596
|
+
const componentName$5 = getComponentName('recaptcha');
|
5596
5597
|
|
5597
5598
|
const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
|
5598
5599
|
|
5599
5600
|
const BaseClass = createBaseClass({
|
5600
|
-
componentName: componentName$
|
5601
|
+
componentName: componentName$5,
|
5601
5602
|
baseSelector: ':host > div',
|
5602
5603
|
});
|
5603
5604
|
class RawRecaptcha extends BaseClass {
|
@@ -5747,7 +5748,7 @@ class RawRecaptcha extends BaseClass {
|
|
5747
5748
|
|
5748
5749
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
5749
5750
|
|
5750
|
-
customElements.define(componentName$
|
5751
|
+
customElements.define(componentName$5, RecaptchaClass);
|
5751
5752
|
|
5752
5753
|
const getFileBase64 = (fileObj) => {
|
5753
5754
|
return new Promise((resolve) => {
|
@@ -5761,7 +5762,7 @@ const getFilename = (fileObj) => {
|
|
5761
5762
|
return fileObj.name.replace(/^.*\\/, '');
|
5762
5763
|
};
|
5763
5764
|
|
5764
|
-
const componentName$
|
5765
|
+
const componentName$4 = getComponentName('upload-file');
|
5765
5766
|
|
5766
5767
|
const observedAttributes = [
|
5767
5768
|
'title',
|
@@ -5776,7 +5777,7 @@ const observedAttributes = [
|
|
5776
5777
|
'icon',
|
5777
5778
|
];
|
5778
5779
|
|
5779
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
5780
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
|
5780
5781
|
|
5781
5782
|
class RawUploadFile extends BaseInputClass {
|
5782
5783
|
static get observedAttributes() {
|
@@ -5938,7 +5939,7 @@ class RawUploadFile extends BaseInputClass {
|
|
5938
5939
|
}
|
5939
5940
|
}
|
5940
5941
|
|
5941
|
-
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
5942
|
+
const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
5942
5943
|
host: { selector: () => ':host' },
|
5943
5944
|
wrapper: { selector: () => ':host > div' },
|
5944
5945
|
icon: { selector: () => '.icon' },
|
@@ -5957,8 +5958,8 @@ const UploadFileClass = compose(
|
|
5957
5958
|
borderWidth: {},
|
5958
5959
|
borderStyle: {},
|
5959
5960
|
borderRadius: {},
|
5960
|
-
hostHeight: { ...host, property: 'height' },
|
5961
|
-
hostWidth: { ...host, property: 'width' },
|
5961
|
+
hostHeight: { ...host$1, property: 'height' },
|
5962
|
+
hostWidth: { ...host$1, property: 'width' },
|
5962
5963
|
hostPadding: { property: 'padding' },
|
5963
5964
|
gap: { ...wrapper },
|
5964
5965
|
lineHeight: { ...wrapper, property: 'line-height' },
|
@@ -5970,107 +5971,452 @@ const UploadFileClass = compose(
|
|
5970
5971
|
{ ...description, property: 'color' },
|
5971
5972
|
],
|
5972
5973
|
iconSize: { ...icon, property: 'width' },
|
5973
|
-
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
5974
|
+
requiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
5974
5975
|
},
|
5975
5976
|
}),
|
5976
5977
|
draggableMixin,
|
5977
5978
|
componentNameValidationMixin
|
5978
5979
|
)(RawUploadFile);
|
5979
5980
|
|
5980
|
-
customElements.define(componentName$
|
5981
|
-
|
5982
|
-
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
5981
|
+
customElements.define(componentName$4, UploadFileClass);
|
5983
5982
|
|
5984
|
-
const
|
5985
|
-
return Object.entries(theme).reduce((acc, [key, val]) => {
|
5986
|
-
if (val?.constructor !== Object) {
|
5987
|
-
return merge(acc, getTransformation(path.concat(key), val));
|
5988
|
-
}
|
5989
|
-
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
5990
|
-
}, {});
|
5991
|
-
};
|
5983
|
+
const componentName$3 = getComponentName('single-select-internal');
|
5992
5984
|
|
5993
|
-
|
5994
|
-
|
5985
|
+
class SingleSelectInternalClass extends createBaseInputClass({
|
5986
|
+
componentName: componentName$3,
|
5987
|
+
baseSelector: 'slot',
|
5988
|
+
}) {
|
5989
|
+
constructor() {
|
5990
|
+
super();
|
5995
5991
|
|
5996
|
-
|
5997
|
-
|
5998
|
-
|
5999
|
-
|
6000
|
-
|
6001
|
-
|
6002
|
-
|
6003
|
-
|
5992
|
+
this.innerHTML = `
|
5993
|
+
<style>
|
5994
|
+
slot {
|
5995
|
+
box-sizing: border-box;
|
5996
|
+
width: 100%;
|
5997
|
+
display: flex;
|
5998
|
+
flex-wrap: wrap;
|
5999
|
+
}
|
6000
|
+
</style>
|
6001
|
+
<slot part="wrapper"></slot>
|
6002
|
+
`;
|
6004
6003
|
}
|
6005
|
-
};
|
6006
|
-
|
6007
|
-
const themeToCSSVarsObj = (theme) =>
|
6008
|
-
transformTheme(theme, [], (path, val) => ({
|
6009
|
-
[getVarName(path)]: getCssVarValue(val),
|
6010
|
-
}));
|
6011
6004
|
|
6012
|
-
|
6013
|
-
transformTheme(theme, [], (path) =>
|
6014
|
-
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
6015
|
-
);
|
6005
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
6016
6006
|
|
6017
|
-
|
6018
|
-
|
6007
|
+
get items() {
|
6008
|
+
return this.querySelector('slot').assignedElements();
|
6009
|
+
}
|
6019
6010
|
|
6020
|
-
|
6021
|
-
|
6022
|
-
|
6023
|
-
''
|
6024
|
-
);
|
6011
|
+
get isReadonly() {
|
6012
|
+
return this.getAttribute('readonly') === 'true';
|
6013
|
+
}
|
6025
6014
|
|
6026
|
-
|
6015
|
+
getSelectedNode() {
|
6016
|
+
return this.items.find((item) => item.hasAttribute('selected'));
|
6017
|
+
}
|
6027
6018
|
|
6028
|
-
|
6029
|
-
|
6019
|
+
get size() {
|
6020
|
+
return this.getAttribute('size') || 'md';
|
6021
|
+
}
|
6030
6022
|
|
6031
|
-
|
6032
|
-
|
6033
|
-
|
6034
|
-
const property = restPath.pop();
|
6035
|
-
const componentName = getComponentName(component);
|
6023
|
+
removeSelected() {
|
6024
|
+
this.getSelectedNode()?.removeAttribute('selected');
|
6025
|
+
}
|
6036
6026
|
|
6037
|
-
|
6038
|
-
|
6039
|
-
|
6027
|
+
onNodeClick(e) {
|
6028
|
+
if (!this.isReadonly) {
|
6029
|
+
this.setSelected(e.target);
|
6030
|
+
this.#dispatchChange();
|
6040
6031
|
}
|
6032
|
+
}
|
6041
6033
|
|
6042
|
-
|
6043
|
-
|
6044
|
-
|
6045
|
-
|
6046
|
-
let themeName = BASE_THEME_SECTION;
|
6047
|
-
|
6048
|
-
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
6049
|
-
themeName = restPath.shift();
|
6034
|
+
setSelected(node) {
|
6035
|
+
if (node !== this.getSelectedNode()) {
|
6036
|
+
this.removeSelected();
|
6037
|
+
node?.setAttribute('selected', 'true');
|
6050
6038
|
}
|
6039
|
+
}
|
6051
6040
|
|
6052
|
-
|
6053
|
-
|
6054
|
-
|
6055
|
-
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
6041
|
+
get value() {
|
6042
|
+
return this.getSelectedNode()?.value;
|
6043
|
+
}
|
6056
6044
|
|
6057
|
-
|
6045
|
+
set value(value) {
|
6046
|
+
const node = this.items.find((child) => child.value === value);
|
6047
|
+
this.setSelected(node);
|
6048
|
+
}
|
6058
6049
|
|
6059
|
-
|
6060
|
-
|
6061
|
-
|
6062
|
-
|
6063
|
-
|
6064
|
-
|
6065
|
-
|
6050
|
+
get defaultValue() {
|
6051
|
+
return this.getAttribute('default-value');
|
6052
|
+
}
|
6053
|
+
|
6054
|
+
setDefaultValue() {
|
6055
|
+
// we want to defer this action until all attributes are synched
|
6056
|
+
setTimeout(() => {
|
6057
|
+
if (this.defaultValue) {
|
6058
|
+
this.value = this.defaultValue;
|
6059
|
+
this.setCustomValidity();
|
6066
6060
|
}
|
6061
|
+
});
|
6062
|
+
}
|
6067
6063
|
|
6068
|
-
|
6069
|
-
|
6064
|
+
onSizeChange() {
|
6065
|
+
this.items.forEach((item) => {
|
6066
|
+
item.setAttribute('size', this.size);
|
6067
|
+
});
|
6068
|
+
}
|
6070
6069
|
|
6071
|
-
|
6070
|
+
getValidity() {
|
6071
|
+
if (this.isRequired && !this.value) {
|
6072
|
+
return { valueMissing: true };
|
6073
|
+
}
|
6072
6074
|
|
6073
|
-
return {
|
6075
|
+
return {};
|
6076
|
+
}
|
6077
|
+
|
6078
|
+
onObservedAttributeChange(attrs) {
|
6079
|
+
attrs.forEach((attr) => {
|
6080
|
+
switch (attr) {
|
6081
|
+
case 'size':
|
6082
|
+
this.onSizeChange();
|
6083
|
+
break;
|
6084
|
+
}
|
6085
|
+
});
|
6086
|
+
}
|
6087
|
+
|
6088
|
+
init() {
|
6089
|
+
// we are adding listeners before calling to super because it's stopping the events
|
6090
|
+
this.addEventListener('focus', (e) => {
|
6091
|
+
// we want to ignore focus events we are dispatching
|
6092
|
+
if (e.isTrusted) {
|
6093
|
+
this.items[0].focus();
|
6094
|
+
}
|
6095
|
+
});
|
6096
|
+
|
6097
|
+
super.init?.();
|
6098
|
+
this.setDefaultValue();
|
6099
|
+
|
6100
|
+
observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
|
6101
|
+
|
6102
|
+
observeChildren(this, ({ addedNodes }) => {
|
6103
|
+
addedNodes.forEach((node) => {
|
6104
|
+
node.addEventListener('click', this.onNodeClick.bind(this));
|
6105
|
+
node.setAttribute('size', this.size);
|
6106
|
+
});
|
6107
|
+
});
|
6108
|
+
}
|
6109
|
+
}
|
6110
|
+
|
6111
|
+
const componentName$2 = getComponentName('single-select');
|
6112
|
+
|
6113
|
+
const customMixin = (superclass) =>
|
6114
|
+
class SingleSelectMixinClass extends superclass {
|
6115
|
+
init() {
|
6116
|
+
super.init?.();
|
6117
|
+
const template = document.createElement('template');
|
6118
|
+
|
6119
|
+
template.innerHTML = `
|
6120
|
+
<${componentName$3}
|
6121
|
+
name="single-select"
|
6122
|
+
slot="input"
|
6123
|
+
tabindex="-1"
|
6124
|
+
>
|
6125
|
+
<slot></slot>
|
6126
|
+
</${componentName$3}>
|
6127
|
+
`;
|
6128
|
+
|
6129
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
6130
|
+
|
6131
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
6132
|
+
|
6133
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
|
6134
|
+
}
|
6135
|
+
};
|
6136
|
+
|
6137
|
+
const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
6138
|
+
host: { selector: () => ':host' },
|
6139
|
+
label: { selector: '::part(label)' },
|
6140
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6141
|
+
internalWrapper: { selector: 'descope-single-select-internal slot' },
|
6142
|
+
errorMessage: { selector: '::part(error-message)' },
|
6143
|
+
};
|
6144
|
+
|
6145
|
+
const SingleSelectClass = compose(
|
6146
|
+
createStyleMixin({
|
6147
|
+
mappings: {
|
6148
|
+
hostWidth: { ...host, property: 'width' },
|
6149
|
+
fontFamily: host,
|
6150
|
+
labelTextColor: [
|
6151
|
+
{ ...label, property: 'color' },
|
6152
|
+
{ ...requiredIndicator, property: 'color' },
|
6153
|
+
],
|
6154
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
6155
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
6156
|
+
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
6157
|
+
},
|
6158
|
+
}),
|
6159
|
+
draggableMixin,
|
6160
|
+
composedProxyInputMixin,
|
6161
|
+
componentNameValidationMixin,
|
6162
|
+
customMixin
|
6163
|
+
)(
|
6164
|
+
createProxy({
|
6165
|
+
slots: [],
|
6166
|
+
wrappedEleName: 'vaadin-text-field',
|
6167
|
+
style: () => `
|
6168
|
+
:host {
|
6169
|
+
display: inline-flex;
|
6170
|
+
max-width: 100%;
|
6171
|
+
}
|
6172
|
+
${resetInputFieldDefaultWidth()}
|
6173
|
+
:host::after {
|
6174
|
+
background-color: transparent;
|
6175
|
+
}
|
6176
|
+
:host::part(input-field)::after {
|
6177
|
+
background-color: transparent;
|
6178
|
+
}
|
6179
|
+
|
6180
|
+
descope-single-select-internal {
|
6181
|
+
-webkit-mask-image: none;
|
6182
|
+
padding: 0;
|
6183
|
+
width: 100%;
|
6184
|
+
height: 100%;
|
6185
|
+
display:inline-block;
|
6186
|
+
min-height: initial;
|
6187
|
+
}
|
6188
|
+
|
6189
|
+
vaadin-text-field::part(input-field) {
|
6190
|
+
background-color: transparent;
|
6191
|
+
padding: 0;
|
6192
|
+
overflow: hidden;
|
6193
|
+
-webkit-mask-image: none;
|
6194
|
+
}
|
6195
|
+
|
6196
|
+
vaadin-text-field {
|
6197
|
+
margin: 0;
|
6198
|
+
padding: 0;
|
6199
|
+
width: 100%
|
6200
|
+
}
|
6201
|
+
|
6202
|
+
vaadin-text-field::before {
|
6203
|
+
height: 0;
|
6204
|
+
}
|
6205
|
+
|
6206
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
6207
|
+
opacity: 1;
|
6208
|
+
}
|
6209
|
+
|
6210
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
6211
|
+
border: 0 solid;
|
6212
|
+
}
|
6213
|
+
|
6214
|
+
vaadin-text-field::part(input-field) {
|
6215
|
+
box-shadow: none;
|
6216
|
+
}
|
6217
|
+
|
6218
|
+
${resetInputCursor('vaadin-text-field')}
|
6219
|
+
`,
|
6220
|
+
excludeAttrsSync: ['tabindex'],
|
6221
|
+
componentName: componentName$2,
|
6222
|
+
})
|
6223
|
+
);
|
6224
|
+
|
6225
|
+
customElements.define(componentName$3, SingleSelectInternalClass);
|
6226
|
+
|
6227
|
+
customElements.define(componentName$2, SingleSelectClass);
|
6228
|
+
|
6229
|
+
const componentName$1 = getComponentName('select-item');
|
6230
|
+
|
6231
|
+
class RawSelectItem extends createBaseClass({
|
6232
|
+
componentName: componentName$1,
|
6233
|
+
baseSelector: ':host > descope-button',
|
6234
|
+
}) {
|
6235
|
+
get size() {
|
6236
|
+
return this.getAttribute('size') || 'md';
|
6237
|
+
}
|
6238
|
+
|
6239
|
+
get variant() {
|
6240
|
+
return this.getAttribute('variant') || 'contained';
|
6241
|
+
}
|
6242
|
+
|
6243
|
+
get value() {
|
6244
|
+
return this.getAttribute('value') || '';
|
6245
|
+
}
|
6246
|
+
|
6247
|
+
set value(value) {
|
6248
|
+
this.setAttribute('value', value);
|
6249
|
+
}
|
6250
|
+
|
6251
|
+
constructor() {
|
6252
|
+
super();
|
6253
|
+
|
6254
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
6255
|
+
<style>
|
6256
|
+
descope-button {
|
6257
|
+
max-width: 100%;
|
6258
|
+
}
|
6259
|
+
descope-button > slot {
|
6260
|
+
width: 100%;
|
6261
|
+
overflow: hidden;
|
6262
|
+
text-overflow: ellipsis;
|
6263
|
+
display: inline-block;
|
6264
|
+
}
|
6265
|
+
:host {
|
6266
|
+
display: inline-block;
|
6267
|
+
max-width: 100%
|
6268
|
+
}
|
6269
|
+
</style>
|
6270
|
+
<descope-button variant="${this.variant}" size="${this.size}" mode="primary">
|
6271
|
+
<slot></slot>
|
6272
|
+
</descope-button>
|
6273
|
+
`;
|
6274
|
+
|
6275
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
6276
|
+
}
|
6277
|
+
|
6278
|
+
handleFocus() {
|
6279
|
+
this.shadowRoot.querySelector('descope-button')?.focus();
|
6280
|
+
}
|
6281
|
+
|
6282
|
+
focus() {
|
6283
|
+
this.handleFocus();
|
6284
|
+
}
|
6285
|
+
|
6286
|
+
init() {
|
6287
|
+
super.init();
|
6288
|
+
this.addEventListener('focus', (e) => {
|
6289
|
+
// we want to ignore focus events we are dispatching
|
6290
|
+
if (e.isTrusted) {
|
6291
|
+
this.handleFocus();
|
6292
|
+
}
|
6293
|
+
});
|
6294
|
+
}
|
6295
|
+
}
|
6296
|
+
|
6297
|
+
const SelectItemClass = compose(
|
6298
|
+
createStyleMixin({
|
6299
|
+
mappings: {
|
6300
|
+
backgroundColor: {
|
6301
|
+
selector: () => ButtonClass.componentName,
|
6302
|
+
property: ButtonClass.cssVarList.backgroundColor,
|
6303
|
+
},
|
6304
|
+
labelTextColor: {
|
6305
|
+
selector: () => ButtonClass.componentName,
|
6306
|
+
property: ButtonClass.cssVarList.labelTextColor,
|
6307
|
+
},
|
6308
|
+
borderColor: {
|
6309
|
+
selector: () => ButtonClass.componentName,
|
6310
|
+
property: ButtonClass.cssVarList.borderColor,
|
6311
|
+
},
|
6312
|
+
borderStyle: {
|
6313
|
+
selector: () => ButtonClass.componentName,
|
6314
|
+
property: ButtonClass.cssVarList.borderStyle,
|
6315
|
+
},
|
6316
|
+
borderRadius: {
|
6317
|
+
selector: () => ButtonClass.componentName,
|
6318
|
+
property: ButtonClass.cssVarList.borderRadius,
|
6319
|
+
},
|
6320
|
+
},
|
6321
|
+
}),
|
6322
|
+
draggableMixin,
|
6323
|
+
componentNameValidationMixin
|
6324
|
+
)(RawSelectItem);
|
6325
|
+
|
6326
|
+
customElements.define(componentName$1, SelectItemClass);
|
6327
|
+
|
6328
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
6329
|
+
|
6330
|
+
const transformTheme = (theme, path, getTransformation) => {
|
6331
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
6332
|
+
if (val?.constructor !== Object) {
|
6333
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
6334
|
+
}
|
6335
|
+
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
6336
|
+
}, {});
|
6337
|
+
};
|
6338
|
+
|
6339
|
+
const stringifyArray = (strArr) =>
|
6340
|
+
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
6341
|
+
|
6342
|
+
const getCssVarValue = (val) => {
|
6343
|
+
switch (true) {
|
6344
|
+
case Array.isArray(val):
|
6345
|
+
return stringifyArray(val);
|
6346
|
+
case isUrl(val):
|
6347
|
+
return `url(${val})`;
|
6348
|
+
default:
|
6349
|
+
return val;
|
6350
|
+
}
|
6351
|
+
};
|
6352
|
+
|
6353
|
+
const themeToCSSVarsObj = (theme) =>
|
6354
|
+
transformTheme(theme, [], (path, val) => ({
|
6355
|
+
[getVarName(path)]: getCssVarValue(val),
|
6356
|
+
}));
|
6357
|
+
|
6358
|
+
const getThemeRefs = (theme, prefix) =>
|
6359
|
+
transformTheme(theme, [], (path) =>
|
6360
|
+
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
6361
|
+
);
|
6362
|
+
|
6363
|
+
const getThemeVars = (theme, prefix) =>
|
6364
|
+
transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
|
6365
|
+
|
6366
|
+
const globalsThemeToStyle = (theme, themeName = '') => {
|
6367
|
+
const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
|
6368
|
+
(acc, entry) => `${acc}${entry.join(':')};\n`,
|
6369
|
+
''
|
6370
|
+
);
|
6371
|
+
|
6372
|
+
if (!themeName) return style;
|
6373
|
+
|
6374
|
+
return `*[data-theme="${themeName}"] {${style}}`;
|
6375
|
+
};
|
6376
|
+
|
6377
|
+
const componentsThemeToStyleObj = (componentsTheme) =>
|
6378
|
+
transformTheme(componentsTheme, [], (path, val) => {
|
6379
|
+
const [component, ...restPath] = path;
|
6380
|
+
const property = restPath.pop();
|
6381
|
+
const componentName = getComponentName(component);
|
6382
|
+
|
6383
|
+
if (property === 'undefined') {
|
6384
|
+
// eslint-disable-next-line no-console
|
6385
|
+
console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
|
6386
|
+
}
|
6387
|
+
|
6388
|
+
// we need a support for portal components theme (e.g. overlay)
|
6389
|
+
// this allows us to generate those themes under different sections
|
6390
|
+
// if the theme has root level attribute that starts with #
|
6391
|
+
// we are generating a new theme
|
6392
|
+
let themeName = BASE_THEME_SECTION;
|
6393
|
+
|
6394
|
+
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
6395
|
+
themeName = restPath.shift();
|
6396
|
+
}
|
6397
|
+
|
6398
|
+
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
6399
|
+
// starts with underscore -> attribute selector
|
6400
|
+
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
6401
|
+
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
6402
|
+
|
6403
|
+
const nextSection = restPath[idx + 1];
|
6404
|
+
|
6405
|
+
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
6406
|
+
// eslint-disable-next-line no-console
|
6407
|
+
console.error(
|
6408
|
+
'theme generator',
|
6409
|
+
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
6410
|
+
);
|
6411
|
+
return acc;
|
6412
|
+
}
|
6413
|
+
|
6414
|
+
return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
6415
|
+
}, '');
|
6416
|
+
|
6417
|
+
const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
|
6418
|
+
|
6419
|
+
return {
|
6074
6420
|
[componentName]: {
|
6075
6421
|
[themeName]: {
|
6076
6422
|
[selector]: {
|
@@ -6305,32 +6651,32 @@ const globals = {
|
|
6305
6651
|
shadow,
|
6306
6652
|
fonts,
|
6307
6653
|
};
|
6308
|
-
const vars$
|
6654
|
+
const vars$r = getThemeVars(globals);
|
6309
6655
|
|
6310
|
-
const globalRefs$
|
6656
|
+
const globalRefs$d = getThemeRefs(globals);
|
6311
6657
|
const compVars$3 = ButtonClass.cssVarList;
|
6312
6658
|
|
6313
6659
|
const mode = {
|
6314
|
-
primary: globalRefs$
|
6315
|
-
secondary: globalRefs$
|
6316
|
-
success: globalRefs$
|
6317
|
-
error: globalRefs$
|
6318
|
-
surface: globalRefs$
|
6660
|
+
primary: globalRefs$d.colors.primary,
|
6661
|
+
secondary: globalRefs$d.colors.secondary,
|
6662
|
+
success: globalRefs$d.colors.success,
|
6663
|
+
error: globalRefs$d.colors.error,
|
6664
|
+
surface: globalRefs$d.colors.surface,
|
6319
6665
|
};
|
6320
6666
|
|
6321
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
6667
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
|
6322
6668
|
|
6323
6669
|
const button = {
|
6324
6670
|
...helperTheme$3,
|
6325
6671
|
|
6326
|
-
[compVars$3.fontFamily]: globalRefs$
|
6672
|
+
[compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
|
6327
6673
|
|
6328
6674
|
[compVars$3.cursor]: 'pointer',
|
6329
6675
|
[compVars$3.hostHeight]: '3em',
|
6330
6676
|
[compVars$3.hostWidth]: 'auto',
|
6331
6677
|
|
6332
|
-
[compVars$3.borderRadius]: globalRefs$
|
6333
|
-
[compVars$3.borderWidth]: globalRefs$
|
6678
|
+
[compVars$3.borderRadius]: globalRefs$d.radius.sm,
|
6679
|
+
[compVars$3.borderWidth]: globalRefs$d.border.xs,
|
6334
6680
|
[compVars$3.borderStyle]: 'solid',
|
6335
6681
|
[compVars$3.borderColor]: 'transparent',
|
6336
6682
|
|
@@ -6404,11 +6750,11 @@ const button = {
|
|
6404
6750
|
},
|
6405
6751
|
|
6406
6752
|
_focused: {
|
6407
|
-
[compVars$3.outlineColor]: globalRefs$
|
6753
|
+
[compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
|
6408
6754
|
},
|
6409
6755
|
};
|
6410
6756
|
|
6411
|
-
const vars$
|
6757
|
+
const vars$q = {
|
6412
6758
|
...compVars$3,
|
6413
6759
|
...helperVars$3,
|
6414
6760
|
};
|
@@ -6416,25 +6762,25 @@ const vars$o = {
|
|
6416
6762
|
var button$1 = /*#__PURE__*/Object.freeze({
|
6417
6763
|
__proto__: null,
|
6418
6764
|
default: button,
|
6419
|
-
vars: vars$
|
6765
|
+
vars: vars$q
|
6420
6766
|
});
|
6421
6767
|
|
6422
6768
|
const componentName = getComponentName('input-wrapper');
|
6423
|
-
const globalRefs$
|
6769
|
+
const globalRefs$c = getThemeRefs(globals);
|
6424
6770
|
|
6425
|
-
const [theme$1, refs, vars$
|
6771
|
+
const [theme$1, refs, vars$p] = createHelperVars(
|
6426
6772
|
{
|
6427
|
-
labelTextColor: globalRefs$
|
6428
|
-
valueTextColor: globalRefs$
|
6429
|
-
placeholderTextColor: globalRefs$
|
6773
|
+
labelTextColor: globalRefs$c.colors.surface.contrast,
|
6774
|
+
valueTextColor: globalRefs$c.colors.surface.contrast,
|
6775
|
+
placeholderTextColor: globalRefs$c.colors.surface.main,
|
6430
6776
|
requiredIndicator: "'*'",
|
6431
|
-
errorMessageTextColor: globalRefs$
|
6777
|
+
errorMessageTextColor: globalRefs$c.colors.error.main,
|
6432
6778
|
|
6433
|
-
borderWidth: globalRefs$
|
6434
|
-
borderRadius: globalRefs$
|
6779
|
+
borderWidth: globalRefs$c.border.xs,
|
6780
|
+
borderRadius: globalRefs$c.radius.xs,
|
6435
6781
|
borderColor: 'transparent',
|
6436
6782
|
|
6437
|
-
outlineWidth: globalRefs$
|
6783
|
+
outlineWidth: globalRefs$c.border.sm,
|
6438
6784
|
outlineStyle: 'solid',
|
6439
6785
|
outlineColor: 'transparent',
|
6440
6786
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -6445,9 +6791,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
6445
6791
|
horizontalPadding: '0.5em',
|
6446
6792
|
verticalPadding: '0.5em',
|
6447
6793
|
|
6448
|
-
backgroundColor: globalRefs$
|
6794
|
+
backgroundColor: globalRefs$c.colors.surface.light,
|
6449
6795
|
|
6450
|
-
fontFamily: globalRefs$
|
6796
|
+
fontFamily: globalRefs$c.fonts.font1.family,
|
6451
6797
|
|
6452
6798
|
size: {
|
6453
6799
|
xs: { fontSize: '12px' },
|
@@ -6461,27 +6807,27 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
6461
6807
|
},
|
6462
6808
|
|
6463
6809
|
_focused: {
|
6464
|
-
outlineColor: globalRefs$
|
6810
|
+
outlineColor: globalRefs$c.colors.surface.main,
|
6465
6811
|
_invalid: {
|
6466
|
-
outlineColor: globalRefs$
|
6812
|
+
outlineColor: globalRefs$c.colors.error.main,
|
6467
6813
|
},
|
6468
6814
|
},
|
6469
6815
|
|
6470
6816
|
_bordered: {
|
6471
|
-
outlineWidth: globalRefs$
|
6472
|
-
borderColor: globalRefs$
|
6817
|
+
outlineWidth: globalRefs$c.border.xs,
|
6818
|
+
borderColor: globalRefs$c.colors.surface.main,
|
6473
6819
|
borderStyle: 'solid',
|
6474
6820
|
_invalid: {
|
6475
|
-
borderColor: globalRefs$
|
6821
|
+
borderColor: globalRefs$c.colors.error.main,
|
6476
6822
|
},
|
6477
6823
|
},
|
6478
6824
|
|
6479
6825
|
_disabled: {
|
6480
|
-
labelTextColor: globalRefs$
|
6481
|
-
borderColor: globalRefs$
|
6482
|
-
valueTextColor: globalRefs$
|
6483
|
-
placeholderTextColor: globalRefs$
|
6484
|
-
backgroundColor: globalRefs$
|
6826
|
+
labelTextColor: globalRefs$c.colors.surface.main,
|
6827
|
+
borderColor: globalRefs$c.colors.surface.main,
|
6828
|
+
valueTextColor: globalRefs$c.colors.surface.dark,
|
6829
|
+
placeholderTextColor: globalRefs$c.colors.surface.dark,
|
6830
|
+
backgroundColor: globalRefs$c.colors.surface.main,
|
6485
6831
|
},
|
6486
6832
|
},
|
6487
6833
|
componentName
|
@@ -6491,18 +6837,82 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
6491
6837
|
__proto__: null,
|
6492
6838
|
default: theme$1,
|
6493
6839
|
refs: refs,
|
6494
|
-
vars: vars$
|
6840
|
+
vars: vars$p
|
6495
6841
|
});
|
6496
6842
|
|
6497
|
-
const vars$
|
6843
|
+
const vars$o = TextFieldClass.cssVarList;
|
6498
6844
|
|
6499
6845
|
const textField = {
|
6846
|
+
[vars$o.hostWidth]: refs.width,
|
6847
|
+
[vars$o.hostMinWidth]: refs.minWidth,
|
6848
|
+
[vars$o.fontSize]: refs.fontSize,
|
6849
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
6850
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
6851
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
6852
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
6853
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
6854
|
+
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
6855
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
6856
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
6857
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
6858
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
6859
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
6860
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
6861
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
6862
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
6863
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
6864
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
6865
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
6866
|
+
};
|
6867
|
+
|
6868
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
6869
|
+
__proto__: null,
|
6870
|
+
default: textField,
|
6871
|
+
textField: textField,
|
6872
|
+
vars: vars$o
|
6873
|
+
});
|
6874
|
+
|
6875
|
+
const globalRefs$b = getThemeRefs(globals);
|
6876
|
+
const vars$n = PasswordClass.cssVarList;
|
6877
|
+
|
6878
|
+
const password = {
|
6879
|
+
[vars$n.hostWidth]: refs.width,
|
6880
|
+
[vars$n.fontSize]: refs.fontSize,
|
6881
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
6882
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
6883
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
6884
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
6885
|
+
[vars$n.inputHeight]: refs.inputHeight,
|
6886
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
6887
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
6888
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
6889
|
+
[vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6890
|
+
[vars$n.inputBorderWidth]: refs.borderWidth,
|
6891
|
+
[vars$n.inputBorderStyle]: refs.borderStyle,
|
6892
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
6893
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
6894
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
6895
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
6896
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
6897
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
6898
|
+
[vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
|
6899
|
+
[vars$n.revealButtonSize]: refs.toggleButtonSize,
|
6900
|
+
};
|
6901
|
+
|
6902
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
6903
|
+
__proto__: null,
|
6904
|
+
default: password,
|
6905
|
+
vars: vars$n
|
6906
|
+
});
|
6907
|
+
|
6908
|
+
const vars$m = NumberFieldClass.cssVarList;
|
6909
|
+
|
6910
|
+
const numberField = {
|
6500
6911
|
[vars$m.hostWidth]: refs.width,
|
6501
6912
|
[vars$m.hostMinWidth]: refs.minWidth,
|
6502
6913
|
[vars$m.fontSize]: refs.fontSize,
|
6503
6914
|
[vars$m.fontFamily]: refs.fontFamily,
|
6504
6915
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
6505
|
-
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
6506
6916
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
6507
6917
|
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
6508
6918
|
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
@@ -6515,32 +6925,29 @@ const textField = {
|
|
6515
6925
|
[vars$m.inputOutlineColor]: refs.outlineColor,
|
6516
6926
|
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
6517
6927
|
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
6518
|
-
[vars$m.
|
6928
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
6519
6929
|
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
6930
|
+
[vars$m.inputHeight]: refs.inputHeight,
|
6520
6931
|
};
|
6521
6932
|
|
6522
|
-
var
|
6933
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
6523
6934
|
__proto__: null,
|
6524
|
-
default:
|
6525
|
-
textField: textField,
|
6935
|
+
default: numberField,
|
6526
6936
|
vars: vars$m
|
6527
6937
|
});
|
6528
6938
|
|
6529
|
-
const
|
6530
|
-
const vars$l = PasswordClass.cssVarList;
|
6939
|
+
const vars$l = EmailFieldClass.cssVarList;
|
6531
6940
|
|
6532
|
-
const
|
6941
|
+
const emailField = {
|
6533
6942
|
[vars$l.hostWidth]: refs.width,
|
6943
|
+
[vars$l.hostMinWidth]: refs.minWidth,
|
6534
6944
|
[vars$l.fontSize]: refs.fontSize,
|
6535
6945
|
[vars$l.fontFamily]: refs.fontFamily,
|
6536
6946
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
6537
6947
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
6538
|
-
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6539
|
-
[vars$l.inputHeight]: refs.inputHeight,
|
6540
|
-
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
6541
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6542
6948
|
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
6543
|
-
[vars$l.
|
6949
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6950
|
+
[vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
|
6544
6951
|
[vars$l.inputBorderWidth]: refs.borderWidth,
|
6545
6952
|
[vars$l.inputBorderStyle]: refs.borderStyle,
|
6546
6953
|
[vars$l.inputBorderColor]: refs.borderColor,
|
@@ -6549,227 +6956,166 @@ const password = {
|
|
6549
6956
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
6550
6957
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
6551
6958
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
6552
|
-
[vars$l.
|
6553
|
-
[vars$l.
|
6959
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
6960
|
+
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6961
|
+
[vars$l.inputHeight]: refs.inputHeight,
|
6554
6962
|
};
|
6555
6963
|
|
6556
|
-
var
|
6964
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
6557
6965
|
__proto__: null,
|
6558
|
-
default:
|
6966
|
+
default: emailField,
|
6559
6967
|
vars: vars$l
|
6560
6968
|
});
|
6561
6969
|
|
6562
|
-
const
|
6970
|
+
const globalRefs$a = getThemeRefs(globals);
|
6971
|
+
const vars$k = TextAreaClass.cssVarList;
|
6563
6972
|
|
6564
|
-
const
|
6973
|
+
const textArea = {
|
6565
6974
|
[vars$k.hostWidth]: refs.width,
|
6566
6975
|
[vars$k.hostMinWidth]: refs.minWidth,
|
6567
|
-
[vars$k.fontSize]:
|
6976
|
+
[vars$k.fontSize]: globalRefs$a.typography.body2.size,
|
6568
6977
|
[vars$k.fontFamily]: refs.fontFamily,
|
6569
6978
|
[vars$k.labelTextColor]: refs.labelTextColor,
|
6979
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
6570
6980
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
6981
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
6571
6982
|
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
6572
|
-
[vars$k.
|
6983
|
+
[vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6984
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
6573
6985
|
[vars$k.inputBorderWidth]: refs.borderWidth,
|
6574
6986
|
[vars$k.inputBorderStyle]: refs.borderStyle,
|
6575
6987
|
[vars$k.inputBorderColor]: refs.borderColor,
|
6576
|
-
[vars$k.inputBorderRadius]: refs.borderRadius,
|
6577
6988
|
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
6578
6989
|
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
6579
6990
|
[vars$k.inputOutlineColor]: refs.outlineColor,
|
6580
6991
|
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
6581
|
-
[vars$k.
|
6582
|
-
[vars$k.
|
6583
|
-
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
6584
|
-
[vars$k.inputHeight]: refs.inputHeight,
|
6585
|
-
};
|
6586
|
-
|
6587
|
-
var numberField$1 = /*#__PURE__*/Object.freeze({
|
6588
|
-
__proto__: null,
|
6589
|
-
default: numberField,
|
6590
|
-
vars: vars$k
|
6591
|
-
});
|
6592
|
-
|
6593
|
-
const vars$j = EmailFieldClass.cssVarList;
|
6594
|
-
|
6595
|
-
const emailField = {
|
6596
|
-
[vars$j.hostWidth]: refs.width,
|
6597
|
-
[vars$j.hostMinWidth]: refs.minWidth,
|
6598
|
-
[vars$j.fontSize]: refs.fontSize,
|
6599
|
-
[vars$j.fontFamily]: refs.fontFamily,
|
6600
|
-
[vars$j.labelTextColor]: refs.labelTextColor,
|
6601
|
-
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
6602
|
-
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
6603
|
-
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
6604
|
-
[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
|
6605
|
-
[vars$j.inputBorderWidth]: refs.borderWidth,
|
6606
|
-
[vars$j.inputBorderStyle]: refs.borderStyle,
|
6607
|
-
[vars$j.inputBorderColor]: refs.borderColor,
|
6608
|
-
[vars$j.inputBorderRadius]: refs.borderRadius,
|
6609
|
-
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
6610
|
-
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
6611
|
-
[vars$j.inputOutlineColor]: refs.outlineColor,
|
6612
|
-
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
6613
|
-
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
6614
|
-
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
6615
|
-
[vars$j.inputHeight]: refs.inputHeight,
|
6616
|
-
};
|
6617
|
-
|
6618
|
-
var emailField$1 = /*#__PURE__*/Object.freeze({
|
6619
|
-
__proto__: null,
|
6620
|
-
default: emailField,
|
6621
|
-
vars: vars$j
|
6622
|
-
});
|
6623
|
-
|
6624
|
-
const globalRefs$8 = getThemeRefs(globals);
|
6625
|
-
const vars$i = TextAreaClass.cssVarList;
|
6626
|
-
|
6627
|
-
const textArea = {
|
6628
|
-
[vars$i.hostWidth]: refs.width,
|
6629
|
-
[vars$i.hostMinWidth]: refs.minWidth,
|
6630
|
-
[vars$i.fontSize]: globalRefs$8.typography.body2.size,
|
6631
|
-
[vars$i.fontFamily]: refs.fontFamily,
|
6632
|
-
[vars$i.labelTextColor]: refs.labelTextColor,
|
6633
|
-
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
6634
|
-
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
6635
|
-
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
6636
|
-
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
6637
|
-
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6638
|
-
[vars$i.inputBorderRadius]: refs.borderRadius,
|
6639
|
-
[vars$i.inputBorderWidth]: refs.borderWidth,
|
6640
|
-
[vars$i.inputBorderStyle]: refs.borderStyle,
|
6641
|
-
[vars$i.inputBorderColor]: refs.borderColor,
|
6642
|
-
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
6643
|
-
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
6644
|
-
[vars$i.inputOutlineColor]: refs.outlineColor,
|
6645
|
-
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
6646
|
-
[vars$i.inputResizeType]: 'vertical',
|
6647
|
-
[vars$i.inputMinHeight]: '5em',
|
6992
|
+
[vars$k.inputResizeType]: 'vertical',
|
6993
|
+
[vars$k.inputMinHeight]: '5em',
|
6648
6994
|
|
6649
6995
|
_disabled: {
|
6650
|
-
[vars$
|
6996
|
+
[vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
6651
6997
|
},
|
6652
6998
|
|
6653
6999
|
_readonly: {
|
6654
|
-
[vars$
|
7000
|
+
[vars$k.inputResizeType]: 'none',
|
6655
7001
|
},
|
6656
7002
|
};
|
6657
7003
|
|
6658
7004
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
6659
7005
|
__proto__: null,
|
6660
7006
|
default: textArea,
|
6661
|
-
vars: vars$
|
7007
|
+
vars: vars$k
|
6662
7008
|
});
|
6663
7009
|
|
6664
|
-
const vars$
|
7010
|
+
const vars$j = CheckboxClass.cssVarList;
|
6665
7011
|
|
6666
7012
|
const checkbox = {
|
6667
|
-
[vars$
|
6668
|
-
[vars$
|
6669
|
-
[vars$
|
6670
|
-
[vars$
|
6671
|
-
[vars$
|
6672
|
-
[vars$
|
6673
|
-
[vars$
|
6674
|
-
[vars$
|
6675
|
-
[vars$
|
6676
|
-
[vars$
|
6677
|
-
[vars$
|
6678
|
-
[vars$
|
6679
|
-
[vars$
|
6680
|
-
[vars$
|
6681
|
-
[vars$
|
6682
|
-
[vars$
|
6683
|
-
[vars$
|
6684
|
-
[vars$
|
7013
|
+
[vars$j.hostWidth]: refs.width,
|
7014
|
+
[vars$j.fontSize]: refs.fontSize,
|
7015
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
7016
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
7017
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
7018
|
+
[vars$j.labelFontWeight]: '400',
|
7019
|
+
[vars$j.labelSpacing]: '0.75em',
|
7020
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
7021
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
7022
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
7023
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
7024
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
7025
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
7026
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
7027
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
7028
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
7029
|
+
[vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
|
7030
|
+
[vars$j.inputSize]: '2em',
|
6685
7031
|
|
6686
7032
|
_checked: {
|
6687
|
-
[vars$
|
6688
|
-
[vars$
|
7033
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
7034
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
6689
7035
|
},
|
6690
7036
|
|
6691
7037
|
_disabled: {
|
6692
|
-
[vars$
|
7038
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
6693
7039
|
},
|
6694
7040
|
};
|
6695
7041
|
|
6696
7042
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
6697
7043
|
__proto__: null,
|
6698
7044
|
default: checkbox,
|
6699
|
-
vars: vars$
|
7045
|
+
vars: vars$j
|
6700
7046
|
});
|
6701
7047
|
|
6702
7048
|
const knobMargin = '2px';
|
6703
7049
|
const checkboxHeight = '1.25em';
|
6704
7050
|
|
6705
|
-
const globalRefs$
|
6706
|
-
const vars$
|
7051
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7052
|
+
const vars$i = SwitchToggleClass.cssVarList;
|
6707
7053
|
|
6708
7054
|
const switchToggle = {
|
6709
|
-
[vars$
|
6710
|
-
[vars$
|
6711
|
-
|
6712
|
-
[vars$
|
6713
|
-
[vars$
|
6714
|
-
[vars$
|
6715
|
-
[vars$
|
6716
|
-
|
6717
|
-
[vars$
|
6718
|
-
[vars$
|
6719
|
-
[vars$
|
6720
|
-
[vars$
|
6721
|
-
[vars$
|
6722
|
-
[vars$
|
6723
|
-
[vars$
|
6724
|
-
|
6725
|
-
[vars$
|
6726
|
-
[vars$
|
6727
|
-
[vars$
|
6728
|
-
[vars$
|
6729
|
-
[vars$
|
6730
|
-
[vars$
|
6731
|
-
|
6732
|
-
[vars$
|
6733
|
-
[vars$
|
6734
|
-
[vars$
|
6735
|
-
[vars$
|
6736
|
-
[vars$
|
6737
|
-
[vars$
|
6738
|
-
|
6739
|
-
[vars$
|
7055
|
+
[vars$i.fontSize]: refs.fontSize,
|
7056
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
7057
|
+
|
7058
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
7059
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
7060
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
7061
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
7062
|
+
|
7063
|
+
[vars$i.trackBorderStyle]: refs.borderStyle,
|
7064
|
+
[vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7065
|
+
[vars$i.trackBorderColor]: refs.borderColor,
|
7066
|
+
[vars$i.trackBackgroundColor]: 'none',
|
7067
|
+
[vars$i.trackBorderRadius]: globalRefs$9.radius.md,
|
7068
|
+
[vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7069
|
+
[vars$i.trackHeight]: checkboxHeight,
|
7070
|
+
|
7071
|
+
[vars$i.knobSize]: `calc(1em - ${knobMargin})`,
|
7072
|
+
[vars$i.knobRadius]: '50%',
|
7073
|
+
[vars$i.knobTopOffset]: '1px',
|
7074
|
+
[vars$i.knobLeftOffset]: knobMargin,
|
7075
|
+
[vars$i.knobColor]: refs.valueTextColor,
|
7076
|
+
[vars$i.knobTransitionDuration]: '0.3s',
|
7077
|
+
|
7078
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
7079
|
+
[vars$i.labelFontWeight]: '400',
|
7080
|
+
[vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
7081
|
+
[vars$i.labelSpacing]: '0.25em',
|
7082
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
7083
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
7084
|
+
|
7085
|
+
[vars$i.hostWidth]: refs.width,
|
6740
7086
|
|
6741
7087
|
_checked: {
|
6742
|
-
[vars$
|
6743
|
-
[vars$
|
6744
|
-
[vars$
|
6745
|
-
[vars$
|
6746
|
-
[vars$
|
7088
|
+
[vars$i.trackBorderColor]: refs.borderColor,
|
7089
|
+
[vars$i.trackBackgroundColor]: refs.backgroundColor,
|
7090
|
+
[vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
|
7091
|
+
[vars$i.knobColor]: refs.valueTextColor,
|
7092
|
+
[vars$i.knobTextColor]: refs.valueTextColor,
|
6747
7093
|
},
|
6748
7094
|
|
6749
7095
|
_disabled: {
|
6750
|
-
[vars$
|
6751
|
-
[vars$
|
6752
|
-
[vars$
|
6753
|
-
[vars$
|
7096
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
7097
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
|
7098
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
7099
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
6754
7100
|
_checked: {
|
6755
|
-
[vars$
|
6756
|
-
[vars$
|
7101
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
7102
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
6757
7103
|
},
|
6758
7104
|
},
|
6759
7105
|
|
6760
7106
|
_invalid: {
|
6761
|
-
[vars$
|
6762
|
-
[vars$
|
7107
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
|
7108
|
+
[vars$i.knobColor]: globalRefs$9.colors.error.main,
|
6763
7109
|
},
|
6764
7110
|
};
|
6765
7111
|
|
6766
7112
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
6767
7113
|
__proto__: null,
|
6768
7114
|
default: switchToggle,
|
6769
|
-
vars: vars$
|
7115
|
+
vars: vars$i
|
6770
7116
|
});
|
6771
7117
|
|
6772
|
-
const globalRefs$
|
7118
|
+
const globalRefs$8 = getThemeRefs(globals);
|
6773
7119
|
|
6774
7120
|
const compVars$2 = ContainerClass.cssVarList;
|
6775
7121
|
|
@@ -6791,7 +7137,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
6791
7137
|
horizontalAlignment,
|
6792
7138
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
6793
7139
|
},
|
6794
|
-
componentName$
|
7140
|
+
componentName$q
|
6795
7141
|
);
|
6796
7142
|
|
6797
7143
|
const { shadowColor } = helperRefs$2;
|
@@ -6801,8 +7147,8 @@ const container = {
|
|
6801
7147
|
|
6802
7148
|
[compVars$2.hostWidth]: '100%',
|
6803
7149
|
[compVars$2.boxShadow]: 'none',
|
6804
|
-
[compVars$2.backgroundColor]: globalRefs$
|
6805
|
-
[compVars$2.color]: globalRefs$
|
7150
|
+
[compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
|
7151
|
+
[compVars$2.color]: globalRefs$8.colors.surface.contrast,
|
6806
7152
|
|
6807
7153
|
verticalPadding: {
|
6808
7154
|
sm: { [compVars$2.verticalPadding]: '5px' },
|
@@ -6848,34 +7194,34 @@ const container = {
|
|
6848
7194
|
|
6849
7195
|
shadow: {
|
6850
7196
|
sm: {
|
6851
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7197
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
6852
7198
|
},
|
6853
7199
|
md: {
|
6854
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7200
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
6855
7201
|
},
|
6856
7202
|
lg: {
|
6857
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7203
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
6858
7204
|
},
|
6859
7205
|
xl: {
|
6860
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7206
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
|
6861
7207
|
},
|
6862
7208
|
'2xl': {
|
6863
7209
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
6864
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7210
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
|
6865
7211
|
},
|
6866
7212
|
},
|
6867
7213
|
|
6868
7214
|
borderRadius: {
|
6869
|
-
sm: { [compVars$2.borderRadius]: globalRefs$
|
6870
|
-
md: { [compVars$2.borderRadius]: globalRefs$
|
6871
|
-
lg: { [compVars$2.borderRadius]: globalRefs$
|
6872
|
-
xl: { [compVars$2.borderRadius]: globalRefs$
|
6873
|
-
'2xl': { [compVars$2.borderRadius]: globalRefs$
|
6874
|
-
'3xl': { [compVars$2.borderRadius]: globalRefs$
|
7215
|
+
sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
|
7216
|
+
md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
|
7217
|
+
lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
|
7218
|
+
xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
|
7219
|
+
'2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
|
7220
|
+
'3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
|
6875
7221
|
},
|
6876
7222
|
};
|
6877
7223
|
|
6878
|
-
const vars$
|
7224
|
+
const vars$h = {
|
6879
7225
|
...compVars$2,
|
6880
7226
|
...helperVars$2,
|
6881
7227
|
};
|
@@ -6883,152 +7229,152 @@ const vars$f = {
|
|
6883
7229
|
var container$1 = /*#__PURE__*/Object.freeze({
|
6884
7230
|
__proto__: null,
|
6885
7231
|
default: container,
|
6886
|
-
vars: vars$
|
7232
|
+
vars: vars$h
|
6887
7233
|
});
|
6888
7234
|
|
6889
|
-
const vars$
|
7235
|
+
const vars$g = LogoClass.cssVarList;
|
6890
7236
|
|
6891
7237
|
const logo$1 = {
|
6892
|
-
[vars$
|
7238
|
+
[vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
6893
7239
|
};
|
6894
7240
|
|
6895
7241
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
6896
7242
|
__proto__: null,
|
6897
7243
|
default: logo$1,
|
6898
|
-
vars: vars$
|
7244
|
+
vars: vars$g
|
6899
7245
|
});
|
6900
7246
|
|
6901
|
-
const vars$
|
7247
|
+
const vars$f = TotpImageClass.cssVarList;
|
6902
7248
|
|
6903
7249
|
const logo = {
|
6904
|
-
[vars$
|
7250
|
+
[vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
6905
7251
|
};
|
6906
7252
|
|
6907
7253
|
var totpImage = /*#__PURE__*/Object.freeze({
|
6908
7254
|
__proto__: null,
|
6909
7255
|
default: logo,
|
6910
|
-
vars: vars$
|
7256
|
+
vars: vars$f
|
6911
7257
|
});
|
6912
7258
|
|
6913
|
-
const globalRefs$
|
6914
|
-
const vars$
|
7259
|
+
const globalRefs$7 = getThemeRefs(globals);
|
7260
|
+
const vars$e = TextClass.cssVarList;
|
6915
7261
|
|
6916
7262
|
const text = {
|
6917
|
-
[vars$
|
6918
|
-
[vars$
|
6919
|
-
[vars$
|
7263
|
+
[vars$e.textLineHeight]: '1em',
|
7264
|
+
[vars$e.textAlign]: 'left',
|
7265
|
+
[vars$e.textColor]: globalRefs$7.colors.surface.dark,
|
6920
7266
|
variant: {
|
6921
7267
|
h1: {
|
6922
|
-
[vars$
|
6923
|
-
[vars$
|
6924
|
-
[vars$
|
7268
|
+
[vars$e.fontSize]: globalRefs$7.typography.h1.size,
|
7269
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
|
7270
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h1.font,
|
6925
7271
|
},
|
6926
7272
|
h2: {
|
6927
|
-
[vars$
|
6928
|
-
[vars$
|
6929
|
-
[vars$
|
7273
|
+
[vars$e.fontSize]: globalRefs$7.typography.h2.size,
|
7274
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
|
7275
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h2.font,
|
6930
7276
|
},
|
6931
7277
|
h3: {
|
6932
|
-
[vars$
|
6933
|
-
[vars$
|
6934
|
-
[vars$
|
7278
|
+
[vars$e.fontSize]: globalRefs$7.typography.h3.size,
|
7279
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
|
7280
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h3.font,
|
6935
7281
|
},
|
6936
7282
|
subtitle1: {
|
6937
|
-
[vars$
|
6938
|
-
[vars$
|
6939
|
-
[vars$
|
7283
|
+
[vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
|
7284
|
+
[vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
7285
|
+
[vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
|
6940
7286
|
},
|
6941
7287
|
subtitle2: {
|
6942
|
-
[vars$
|
6943
|
-
[vars$
|
6944
|
-
[vars$
|
7288
|
+
[vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
|
7289
|
+
[vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
7290
|
+
[vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
|
6945
7291
|
},
|
6946
7292
|
body1: {
|
6947
|
-
[vars$
|
6948
|
-
[vars$
|
6949
|
-
[vars$
|
7293
|
+
[vars$e.fontSize]: globalRefs$7.typography.body1.size,
|
7294
|
+
[vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
|
7295
|
+
[vars$e.fontFamily]: globalRefs$7.typography.body1.font,
|
6950
7296
|
},
|
6951
7297
|
body2: {
|
6952
|
-
[vars$
|
6953
|
-
[vars$
|
6954
|
-
[vars$
|
7298
|
+
[vars$e.fontSize]: globalRefs$7.typography.body2.size,
|
7299
|
+
[vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
|
7300
|
+
[vars$e.fontFamily]: globalRefs$7.typography.body2.font,
|
6955
7301
|
},
|
6956
7302
|
},
|
6957
7303
|
|
6958
7304
|
mode: {
|
6959
7305
|
primary: {
|
6960
|
-
[vars$
|
7306
|
+
[vars$e.textColor]: globalRefs$7.colors.primary.main,
|
6961
7307
|
},
|
6962
7308
|
secondary: {
|
6963
|
-
[vars$
|
7309
|
+
[vars$e.textColor]: globalRefs$7.colors.secondary.main,
|
6964
7310
|
},
|
6965
7311
|
error: {
|
6966
|
-
[vars$
|
7312
|
+
[vars$e.textColor]: globalRefs$7.colors.error.main,
|
6967
7313
|
},
|
6968
7314
|
success: {
|
6969
|
-
[vars$
|
7315
|
+
[vars$e.textColor]: globalRefs$7.colors.success.main,
|
6970
7316
|
},
|
6971
7317
|
},
|
6972
7318
|
|
6973
7319
|
textAlign: {
|
6974
|
-
right: { [vars$
|
6975
|
-
left: { [vars$
|
6976
|
-
center: { [vars$
|
7320
|
+
right: { [vars$e.textAlign]: 'right' },
|
7321
|
+
left: { [vars$e.textAlign]: 'left' },
|
7322
|
+
center: { [vars$e.textAlign]: 'center' },
|
6977
7323
|
},
|
6978
7324
|
|
6979
7325
|
_fullWidth: {
|
6980
|
-
[vars$
|
7326
|
+
[vars$e.hostWidth]: '100%',
|
6981
7327
|
},
|
6982
7328
|
|
6983
7329
|
_italic: {
|
6984
|
-
[vars$
|
7330
|
+
[vars$e.fontStyle]: 'italic',
|
6985
7331
|
},
|
6986
7332
|
|
6987
7333
|
_uppercase: {
|
6988
|
-
[vars$
|
7334
|
+
[vars$e.textTransform]: 'uppercase',
|
6989
7335
|
},
|
6990
7336
|
|
6991
7337
|
_lowercase: {
|
6992
|
-
[vars$
|
7338
|
+
[vars$e.textTransform]: 'lowercase',
|
6993
7339
|
},
|
6994
7340
|
};
|
6995
7341
|
|
6996
7342
|
var text$1 = /*#__PURE__*/Object.freeze({
|
6997
7343
|
__proto__: null,
|
6998
7344
|
default: text,
|
6999
|
-
vars: vars$
|
7345
|
+
vars: vars$e
|
7000
7346
|
});
|
7001
7347
|
|
7002
|
-
const globalRefs$
|
7003
|
-
const vars$
|
7348
|
+
const globalRefs$6 = getThemeRefs(globals);
|
7349
|
+
const vars$d = LinkClass.cssVarList;
|
7004
7350
|
|
7005
7351
|
const link = {
|
7006
|
-
[vars$
|
7352
|
+
[vars$d.cursor]: 'pointer',
|
7007
7353
|
|
7008
|
-
[vars$
|
7354
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
7009
7355
|
|
7010
7356
|
textAlign: {
|
7011
|
-
right: { [vars$
|
7012
|
-
left: { [vars$
|
7013
|
-
center: { [vars$
|
7357
|
+
right: { [vars$d.textAlign]: 'right' },
|
7358
|
+
left: { [vars$d.textAlign]: 'left' },
|
7359
|
+
center: { [vars$d.textAlign]: 'center' },
|
7014
7360
|
},
|
7015
7361
|
|
7016
7362
|
_fullWidth: {
|
7017
|
-
[vars$
|
7363
|
+
[vars$d.hostWidth]: '100%',
|
7018
7364
|
},
|
7019
7365
|
|
7020
7366
|
mode: {
|
7021
7367
|
primary: {
|
7022
|
-
[vars$
|
7368
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
7023
7369
|
},
|
7024
7370
|
secondary: {
|
7025
|
-
[vars$
|
7371
|
+
[vars$d.textColor]: globalRefs$6.colors.secondary.main,
|
7026
7372
|
},
|
7027
7373
|
error: {
|
7028
|
-
[vars$
|
7374
|
+
[vars$d.textColor]: globalRefs$6.colors.error.main,
|
7029
7375
|
},
|
7030
7376
|
success: {
|
7031
|
-
[vars$
|
7377
|
+
[vars$d.textColor]: globalRefs$6.colors.success.main,
|
7032
7378
|
},
|
7033
7379
|
},
|
7034
7380
|
};
|
@@ -7036,10 +7382,10 @@ const link = {
|
|
7036
7382
|
var link$1 = /*#__PURE__*/Object.freeze({
|
7037
7383
|
__proto__: null,
|
7038
7384
|
default: link,
|
7039
|
-
vars: vars$
|
7385
|
+
vars: vars$d
|
7040
7386
|
});
|
7041
7387
|
|
7042
|
-
const globalRefs$
|
7388
|
+
const globalRefs$5 = getThemeRefs(globals);
|
7043
7389
|
const compVars$1 = DividerClass.cssVarList;
|
7044
7390
|
|
7045
7391
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -7047,7 +7393,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
7047
7393
|
thickness: '2px',
|
7048
7394
|
spacing: '10px',
|
7049
7395
|
},
|
7050
|
-
componentName$
|
7396
|
+
componentName$p
|
7051
7397
|
);
|
7052
7398
|
|
7053
7399
|
const divider = {
|
@@ -7057,7 +7403,7 @@ const divider = {
|
|
7057
7403
|
[compVars$1.flexDirection]: 'row',
|
7058
7404
|
[compVars$1.alignSelf]: 'stretch',
|
7059
7405
|
[compVars$1.hostWidth]: '100%',
|
7060
|
-
[compVars$1.stripeColor]: globalRefs$
|
7406
|
+
[compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
|
7061
7407
|
[compVars$1.stripeColorOpacity]: '0.5',
|
7062
7408
|
[compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
|
7063
7409
|
[compVars$1.labelTextWidth]: 'fit-content',
|
@@ -7076,7 +7422,7 @@ const divider = {
|
|
7076
7422
|
},
|
7077
7423
|
};
|
7078
7424
|
|
7079
|
-
const vars$
|
7425
|
+
const vars$c = {
|
7080
7426
|
...compVars$1,
|
7081
7427
|
...helperVars$1,
|
7082
7428
|
};
|
@@ -7084,99 +7430,99 @@ const vars$a = {
|
|
7084
7430
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
7085
7431
|
__proto__: null,
|
7086
7432
|
default: divider,
|
7087
|
-
vars: vars$
|
7433
|
+
vars: vars$c
|
7088
7434
|
});
|
7089
7435
|
|
7090
|
-
const vars$
|
7436
|
+
const vars$b = PasscodeClass.cssVarList;
|
7091
7437
|
|
7092
7438
|
const passcode = {
|
7093
|
-
[vars$
|
7094
|
-
[vars$
|
7095
|
-
[vars$
|
7096
|
-
[vars$
|
7097
|
-
[vars$
|
7098
|
-
[vars$
|
7099
|
-
[vars$
|
7100
|
-
[vars$
|
7101
|
-
[vars$
|
7102
|
-
[vars$
|
7103
|
-
[vars$
|
7104
|
-
[vars$
|
7105
|
-
[vars$
|
7106
|
-
[vars$
|
7439
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
7440
|
+
[vars$b.fontSize]: refs.fontSize,
|
7441
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
7442
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
7443
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
7444
|
+
[vars$b.digitValueTextColor]: refs.valueTextColor,
|
7445
|
+
[vars$b.digitPadding]: '0',
|
7446
|
+
[vars$b.digitTextAlign]: 'center',
|
7447
|
+
[vars$b.digitSpacing]: '4px',
|
7448
|
+
[vars$b.hostWidth]: refs.width,
|
7449
|
+
[vars$b.digitOutlineColor]: 'transparent',
|
7450
|
+
[vars$b.digitOutlineWidth]: refs.outlineWidth,
|
7451
|
+
[vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
7452
|
+
[vars$b.digitSize]: refs.inputHeight,
|
7107
7453
|
|
7108
7454
|
_hideCursor: {
|
7109
|
-
[vars$
|
7455
|
+
[vars$b.digitCaretTextColor]: 'transparent',
|
7110
7456
|
},
|
7111
7457
|
};
|
7112
7458
|
|
7113
7459
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
7114
7460
|
__proto__: null,
|
7115
7461
|
default: passcode,
|
7116
|
-
vars: vars$
|
7462
|
+
vars: vars$b
|
7117
7463
|
});
|
7118
7464
|
|
7119
|
-
const globalRefs$
|
7120
|
-
const vars$
|
7465
|
+
const globalRefs$4 = getThemeRefs(globals);
|
7466
|
+
const vars$a = LoaderLinearClass.cssVarList;
|
7121
7467
|
|
7122
7468
|
const loaderLinear = {
|
7123
|
-
[vars$
|
7124
|
-
[vars$
|
7469
|
+
[vars$a.hostDisplay]: 'inline-block',
|
7470
|
+
[vars$a.hostWidth]: '100%',
|
7125
7471
|
|
7126
|
-
[vars$
|
7127
|
-
[vars$
|
7472
|
+
[vars$a.barColor]: globalRefs$4.colors.surface.contrast,
|
7473
|
+
[vars$a.barWidth]: '20%',
|
7128
7474
|
|
7129
|
-
[vars$
|
7130
|
-
[vars$
|
7475
|
+
[vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
7476
|
+
[vars$a.barBorderRadius]: '4px',
|
7131
7477
|
|
7132
|
-
[vars$
|
7133
|
-
[vars$
|
7134
|
-
[vars$
|
7135
|
-
[vars$
|
7478
|
+
[vars$a.animationDuration]: '2s',
|
7479
|
+
[vars$a.animationTimingFunction]: 'linear',
|
7480
|
+
[vars$a.animationIterationCount]: 'infinite',
|
7481
|
+
[vars$a.verticalPadding]: '0.25em',
|
7136
7482
|
|
7137
7483
|
size: {
|
7138
|
-
xs: { [vars$
|
7139
|
-
sm: { [vars$
|
7140
|
-
md: { [vars$
|
7141
|
-
lg: { [vars$
|
7484
|
+
xs: { [vars$a.barHeight]: '2px' },
|
7485
|
+
sm: { [vars$a.barHeight]: '4px' },
|
7486
|
+
md: { [vars$a.barHeight]: '6px' },
|
7487
|
+
lg: { [vars$a.barHeight]: '8px' },
|
7142
7488
|
},
|
7143
7489
|
|
7144
7490
|
mode: {
|
7145
7491
|
primary: {
|
7146
|
-
[vars$
|
7492
|
+
[vars$a.barColor]: globalRefs$4.colors.primary.main,
|
7147
7493
|
},
|
7148
7494
|
secondary: {
|
7149
|
-
[vars$
|
7495
|
+
[vars$a.barColor]: globalRefs$4.colors.secondary.main,
|
7150
7496
|
},
|
7151
7497
|
},
|
7152
7498
|
|
7153
7499
|
_hidden: {
|
7154
|
-
[vars$
|
7500
|
+
[vars$a.hostDisplay]: 'none',
|
7155
7501
|
},
|
7156
7502
|
};
|
7157
7503
|
|
7158
7504
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
7159
7505
|
__proto__: null,
|
7160
7506
|
default: loaderLinear,
|
7161
|
-
vars: vars$
|
7507
|
+
vars: vars$a
|
7162
7508
|
});
|
7163
7509
|
|
7164
|
-
const globalRefs$
|
7510
|
+
const globalRefs$3 = getThemeRefs(globals);
|
7165
7511
|
const compVars = LoaderRadialClass.cssVarList;
|
7166
7512
|
|
7167
7513
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
7168
7514
|
{
|
7169
|
-
spinnerColor: globalRefs$
|
7515
|
+
spinnerColor: globalRefs$3.colors.surface.contrast,
|
7170
7516
|
mode: {
|
7171
7517
|
primary: {
|
7172
|
-
spinnerColor: globalRefs$
|
7518
|
+
spinnerColor: globalRefs$3.colors.primary.main,
|
7173
7519
|
},
|
7174
7520
|
secondary: {
|
7175
|
-
spinnerColor: globalRefs$
|
7521
|
+
spinnerColor: globalRefs$3.colors.secondary.main,
|
7176
7522
|
},
|
7177
7523
|
},
|
7178
7524
|
},
|
7179
|
-
componentName$
|
7525
|
+
componentName$r
|
7180
7526
|
);
|
7181
7527
|
|
7182
7528
|
const loaderRadial = {
|
@@ -7205,7 +7551,7 @@ const loaderRadial = {
|
|
7205
7551
|
[compVars.hostDisplay]: 'none',
|
7206
7552
|
},
|
7207
7553
|
};
|
7208
|
-
const vars$
|
7554
|
+
const vars$9 = {
|
7209
7555
|
...compVars,
|
7210
7556
|
...helperVars,
|
7211
7557
|
};
|
@@ -7213,43 +7559,43 @@ const vars$7 = {
|
|
7213
7559
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
7214
7560
|
__proto__: null,
|
7215
7561
|
default: loaderRadial,
|
7216
|
-
vars: vars$
|
7562
|
+
vars: vars$9
|
7217
7563
|
});
|
7218
7564
|
|
7219
|
-
const globalRefs = getThemeRefs(globals);
|
7220
|
-
const vars$
|
7565
|
+
const globalRefs$2 = getThemeRefs(globals);
|
7566
|
+
const vars$8 = ComboBoxClass.cssVarList;
|
7221
7567
|
|
7222
7568
|
const comboBox = {
|
7223
|
-
[vars$
|
7224
|
-
[vars$
|
7225
|
-
[vars$
|
7226
|
-
[vars$
|
7227
|
-
[vars$
|
7228
|
-
[vars$
|
7229
|
-
[vars$
|
7230
|
-
[vars$
|
7231
|
-
[vars$
|
7232
|
-
[vars$
|
7233
|
-
[vars$
|
7234
|
-
[vars$
|
7235
|
-
[vars$
|
7236
|
-
[vars$
|
7237
|
-
[vars$
|
7238
|
-
[vars$
|
7239
|
-
[vars$
|
7240
|
-
[vars$
|
7241
|
-
[vars$
|
7242
|
-
[vars$
|
7243
|
-
[vars$
|
7244
|
-
[vars$
|
7245
|
-
[vars$
|
7569
|
+
[vars$8.hostWidth]: refs.width,
|
7570
|
+
[vars$8.fontSize]: refs.fontSize,
|
7571
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
7572
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
7573
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
7574
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
7575
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
7576
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
7577
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
7578
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
7579
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
7580
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
7581
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
7582
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
7583
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
7584
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7585
|
+
[vars$8.inputBackgroundColor]: refs.backgroundColor,
|
7586
|
+
[vars$8.inputHorizontalPadding]: refs.horizontalPadding,
|
7587
|
+
[vars$8.inputHeight]: refs.inputHeight,
|
7588
|
+
[vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
|
7589
|
+
[vars$8.inputDropdownButtonCursor]: 'pointer',
|
7590
|
+
[vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
|
7591
|
+
[vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
|
7246
7592
|
|
7247
7593
|
_readonly: {
|
7248
|
-
[vars$
|
7594
|
+
[vars$8.inputDropdownButtonCursor]: 'default',
|
7249
7595
|
},
|
7250
7596
|
|
7251
|
-
[vars$
|
7252
|
-
[vars$
|
7597
|
+
[vars$8.overlay.minHeight]: '400px',
|
7598
|
+
[vars$8.overlay.margin]: '0 auto',
|
7253
7599
|
|
7254
7600
|
// [vars.overlayCursor]: 'pointer',
|
7255
7601
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
@@ -7260,41 +7606,41 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
7260
7606
|
__proto__: null,
|
7261
7607
|
comboBox: comboBox,
|
7262
7608
|
default: comboBox,
|
7263
|
-
vars: vars$
|
7609
|
+
vars: vars$8
|
7264
7610
|
});
|
7265
7611
|
|
7266
|
-
const vars$
|
7612
|
+
const vars$7 = ImageClass.cssVarList;
|
7267
7613
|
|
7268
7614
|
const image = {};
|
7269
7615
|
|
7270
7616
|
var image$1 = /*#__PURE__*/Object.freeze({
|
7271
7617
|
__proto__: null,
|
7272
7618
|
default: image,
|
7273
|
-
vars: vars$
|
7619
|
+
vars: vars$7
|
7274
7620
|
});
|
7275
7621
|
|
7276
|
-
const vars$
|
7622
|
+
const vars$6 = PhoneFieldClass.cssVarList;
|
7277
7623
|
|
7278
7624
|
const phoneField = {
|
7279
|
-
[vars$
|
7280
|
-
[vars$
|
7281
|
-
[vars$
|
7282
|
-
[vars$
|
7283
|
-
[vars$
|
7284
|
-
[vars$
|
7285
|
-
[vars$
|
7286
|
-
[vars$
|
7287
|
-
[vars$
|
7288
|
-
[vars$
|
7289
|
-
[vars$
|
7290
|
-
[vars$
|
7291
|
-
[vars$
|
7292
|
-
[vars$
|
7293
|
-
[vars$
|
7294
|
-
[vars$
|
7295
|
-
[vars$
|
7296
|
-
[vars$
|
7297
|
-
[vars$
|
7625
|
+
[vars$6.hostWidth]: refs.width,
|
7626
|
+
[vars$6.fontSize]: refs.fontSize,
|
7627
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
7628
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
7629
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
7630
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
7631
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
7632
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7633
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
7634
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
7635
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
7636
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
7637
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
7638
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
7639
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
7640
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
7641
|
+
[vars$6.phoneInputWidth]: refs.minWidth,
|
7642
|
+
[vars$6.countryCodeInputWidth]: '5em',
|
7643
|
+
[vars$6.countryCodeDropdownWidth]: '20em',
|
7298
7644
|
|
7299
7645
|
// '@overlay': {
|
7300
7646
|
// overlayItemBackgroundColor: 'red'
|
@@ -7304,127 +7650,173 @@ const phoneField = {
|
|
7304
7650
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7305
7651
|
__proto__: null,
|
7306
7652
|
default: phoneField,
|
7307
|
-
vars: vars$
|
7653
|
+
vars: vars$6
|
7308
7654
|
});
|
7309
7655
|
|
7310
|
-
const vars$
|
7656
|
+
const vars$5 = PhoneFieldInputBoxClass.cssVarList;
|
7311
7657
|
|
7312
7658
|
const phoneInputBoxField = {
|
7313
|
-
[vars$
|
7314
|
-
[vars$
|
7315
|
-
[vars$
|
7316
|
-
[vars$
|
7317
|
-
[vars$
|
7318
|
-
[vars$
|
7319
|
-
[vars$
|
7320
|
-
[vars$
|
7321
|
-
[vars$
|
7322
|
-
[vars$
|
7323
|
-
[vars$
|
7324
|
-
[vars$
|
7325
|
-
[vars$
|
7326
|
-
[vars$
|
7327
|
-
[vars$
|
7328
|
-
[vars$
|
7329
|
-
[vars$
|
7659
|
+
[vars$5.hostWidth]: '16em',
|
7660
|
+
[vars$5.hostMinWidth]: refs.minWidth,
|
7661
|
+
[vars$5.fontSize]: refs.fontSize,
|
7662
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
7663
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
7664
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
7665
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
7666
|
+
[vars$5.inputValueTextColor]: refs.valueTextColor,
|
7667
|
+
[vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7668
|
+
[vars$5.inputBorderStyle]: refs.borderStyle,
|
7669
|
+
[vars$5.inputBorderWidth]: refs.borderWidth,
|
7670
|
+
[vars$5.inputBorderColor]: refs.borderColor,
|
7671
|
+
[vars$5.inputBorderRadius]: refs.borderRadius,
|
7672
|
+
[vars$5.inputOutlineStyle]: refs.outlineStyle,
|
7673
|
+
[vars$5.inputOutlineWidth]: refs.outlineWidth,
|
7674
|
+
[vars$5.inputOutlineColor]: refs.outlineColor,
|
7675
|
+
[vars$5.inputOutlineOffset]: refs.outlineOffset,
|
7330
7676
|
_fullWidth: {
|
7331
|
-
[vars$
|
7677
|
+
[vars$5.hostWidth]: refs.width,
|
7332
7678
|
},
|
7333
7679
|
};
|
7334
7680
|
|
7335
7681
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7336
7682
|
__proto__: null,
|
7337
7683
|
default: phoneInputBoxField,
|
7338
|
-
vars: vars$
|
7684
|
+
vars: vars$5
|
7339
7685
|
});
|
7340
7686
|
|
7341
|
-
const vars$
|
7687
|
+
const vars$4 = NewPasswordClass.cssVarList;
|
7342
7688
|
|
7343
7689
|
const newPassword = {
|
7344
|
-
[vars$
|
7345
|
-
[vars$
|
7346
|
-
[vars$
|
7347
|
-
[vars$
|
7348
|
-
[vars$
|
7349
|
-
[vars$
|
7690
|
+
[vars$4.hostWidth]: refs.width,
|
7691
|
+
[vars$4.hostMinWidth]: refs.minWidth,
|
7692
|
+
[vars$4.fontSize]: refs.fontSize,
|
7693
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
7694
|
+
[vars$4.spaceBetweenInputs]: '1em',
|
7695
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
7350
7696
|
|
7351
7697
|
_required: {
|
7352
7698
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7353
7699
|
// That's why we fake the required indicator on each input.
|
7354
7700
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7355
|
-
[vars$
|
7701
|
+
[vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7356
7702
|
},
|
7357
7703
|
};
|
7358
7704
|
|
7359
7705
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7360
7706
|
__proto__: null,
|
7361
7707
|
default: newPassword,
|
7362
|
-
vars: vars$
|
7708
|
+
vars: vars$4
|
7363
7709
|
});
|
7364
7710
|
|
7365
|
-
const vars$
|
7711
|
+
const vars$3 = UploadFileClass.cssVarList;
|
7366
7712
|
|
7367
7713
|
const uploadFile = {
|
7368
|
-
[vars$
|
7369
|
-
[vars$
|
7714
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
7715
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
7370
7716
|
|
7371
|
-
[vars$
|
7717
|
+
[vars$3.iconSize]: '2em',
|
7372
7718
|
|
7373
|
-
[vars$
|
7374
|
-
[vars$
|
7719
|
+
[vars$3.hostPadding]: '0.75em',
|
7720
|
+
[vars$3.gap]: '0.5em',
|
7375
7721
|
|
7376
|
-
[vars$
|
7377
|
-
[vars$
|
7378
|
-
[vars$
|
7722
|
+
[vars$3.fontSize]: '16px',
|
7723
|
+
[vars$3.titleFontWeight]: '500',
|
7724
|
+
[vars$3.lineHeight]: '1em',
|
7379
7725
|
|
7380
|
-
[vars$
|
7381
|
-
[vars$
|
7382
|
-
[vars$
|
7383
|
-
[vars$
|
7726
|
+
[vars$3.borderWidth]: refs.borderWidth,
|
7727
|
+
[vars$3.borderColor]: refs.borderColor,
|
7728
|
+
[vars$3.borderRadius]: refs.borderRadius,
|
7729
|
+
[vars$3.borderStyle]: 'dashed',
|
7384
7730
|
|
7385
7731
|
_required: {
|
7386
|
-
[vars$
|
7732
|
+
[vars$3.requiredIndicator]: refs.requiredIndicator,
|
7387
7733
|
},
|
7388
7734
|
|
7389
7735
|
size: {
|
7390
7736
|
xs: {
|
7391
|
-
[vars$
|
7392
|
-
[vars$
|
7393
|
-
[vars$
|
7394
|
-
[vars$
|
7395
|
-
[vars$
|
7737
|
+
[vars$3.hostHeight]: '196px',
|
7738
|
+
[vars$3.hostWidth]: '200px',
|
7739
|
+
[vars$3.titleFontSize]: '0.875em',
|
7740
|
+
[vars$3.descriptionFontSize]: '0.875em',
|
7741
|
+
[vars$3.lineHeight]: '1.25em',
|
7396
7742
|
},
|
7397
7743
|
sm: {
|
7398
|
-
[vars$
|
7399
|
-
[vars$
|
7400
|
-
[vars$
|
7401
|
-
[vars$
|
7402
|
-
[vars$
|
7744
|
+
[vars$3.hostHeight]: '216px',
|
7745
|
+
[vars$3.hostWidth]: '230px',
|
7746
|
+
[vars$3.titleFontSize]: '1em',
|
7747
|
+
[vars$3.descriptionFontSize]: '0.875em',
|
7748
|
+
[vars$3.lineHeight]: '1.25em',
|
7403
7749
|
},
|
7404
7750
|
md: {
|
7405
|
-
[vars$
|
7406
|
-
[vars$
|
7407
|
-
[vars$
|
7408
|
-
[vars$
|
7409
|
-
[vars$
|
7751
|
+
[vars$3.hostHeight]: '256px',
|
7752
|
+
[vars$3.hostWidth]: '312px',
|
7753
|
+
[vars$3.titleFontSize]: '1.125em',
|
7754
|
+
[vars$3.descriptionFontSize]: '1em',
|
7755
|
+
[vars$3.lineHeight]: '1.5em',
|
7410
7756
|
},
|
7411
7757
|
lg: {
|
7412
|
-
[vars$
|
7413
|
-
[vars$
|
7414
|
-
[vars$
|
7415
|
-
[vars$
|
7416
|
-
[vars$
|
7758
|
+
[vars$3.hostHeight]: '280px',
|
7759
|
+
[vars$3.hostWidth]: '336px',
|
7760
|
+
[vars$3.titleFontSize]: '1.125em',
|
7761
|
+
[vars$3.descriptionFontSize]: '1.125em',
|
7762
|
+
[vars$3.lineHeight]: '1.75em',
|
7417
7763
|
},
|
7418
7764
|
},
|
7419
7765
|
|
7420
7766
|
_fullWidth: {
|
7421
|
-
[vars$
|
7767
|
+
[vars$3.hostWidth]: refs.width,
|
7422
7768
|
},
|
7423
7769
|
};
|
7424
7770
|
|
7425
7771
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7426
7772
|
__proto__: null,
|
7427
7773
|
default: uploadFile,
|
7774
|
+
vars: vars$3
|
7775
|
+
});
|
7776
|
+
|
7777
|
+
const globalRefs$1 = getThemeRefs(globals);
|
7778
|
+
|
7779
|
+
const vars$2 = SelectItemClass.cssVarList;
|
7780
|
+
|
7781
|
+
const selectItem = {
|
7782
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
|
7783
|
+
[vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
7784
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
7785
|
+
[vars$2.borderStyle]: 'solid',
|
7786
|
+
[vars$2.borderRadius]: globalRefs$1.radius.sm,
|
7787
|
+
|
7788
|
+
_hover: {
|
7789
|
+
[vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7790
|
+
},
|
7791
|
+
|
7792
|
+
_selected: {
|
7793
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
|
7794
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
|
7795
|
+
[vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
|
7796
|
+
},
|
7797
|
+
};
|
7798
|
+
|
7799
|
+
var selectItem$1 = /*#__PURE__*/Object.freeze({
|
7800
|
+
__proto__: null,
|
7801
|
+
default: selectItem,
|
7802
|
+
vars: vars$2
|
7803
|
+
});
|
7804
|
+
|
7805
|
+
const globalRefs = getThemeRefs(globals);
|
7806
|
+
const vars$1 = SingleSelectClass.cssVarList;
|
7807
|
+
|
7808
|
+
const singleSelect = {
|
7809
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
7810
|
+
[vars$1.labelTextColor]: refs.labelTextColor,
|
7811
|
+
[vars$1.labelRequiredIndicator]: refs.requiredIndicator,
|
7812
|
+
[vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
|
7813
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.sm,
|
7814
|
+
[vars$1.hostWidth]: refs.width,
|
7815
|
+
};
|
7816
|
+
|
7817
|
+
var singleSelect$1 = /*#__PURE__*/Object.freeze({
|
7818
|
+
__proto__: null,
|
7819
|
+
default: singleSelect,
|
7428
7820
|
vars: vars$1
|
7429
7821
|
});
|
7430
7822
|
|
@@ -7453,6 +7845,8 @@ const components = {
|
|
7453
7845
|
newPassword: newPassword$1,
|
7454
7846
|
inputWrapper,
|
7455
7847
|
uploadFile: uploadFile$1,
|
7848
|
+
selectItem: selectItem$1,
|
7849
|
+
singleSelect: singleSelect$1,
|
7456
7850
|
};
|
7457
7851
|
|
7458
7852
|
const theme = Object.keys(components).reduce(
|
@@ -7465,7 +7859,7 @@ const vars = Object.keys(components).reduce(
|
|
7465
7859
|
);
|
7466
7860
|
|
7467
7861
|
const defaultTheme = { globals, components: theme };
|
7468
|
-
const themeVars = { globals: vars$
|
7862
|
+
const themeVars = { globals: vars$r, components: vars };
|
7469
7863
|
|
7470
|
-
export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, 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 };
|
7864
|
+
export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SelectItemClass, SingleSelectClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
7471
7865
|
//# sourceMappingURL=index.esm.js.map
|