@descope/web-components-ui 1.0.176 → 1.0.178
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1094 -693
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +1179 -779
- 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 +1 -1
- package/src/components/descope-button/ButtonClass.js +5 -2
- 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.d.ts +0 -1
- package/src/index.js +2 -0
- package/src/mixins/createProxy.js +7 -2
- package/src/theme/components/button.js +8 -5
- 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: {},
|
@@ -1252,11 +1257,10 @@ const ButtonClass = compose(
|
|
1252
1257
|
borderWidth: {},
|
1253
1258
|
|
1254
1259
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
1255
|
-
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
1256
1260
|
|
1257
1261
|
labelTextColor: { property: 'color' },
|
1258
|
-
labelTextDecoration: { ...label$
|
1259
|
-
labelSpacing: { ...label$
|
1262
|
+
labelTextDecoration: { ...label$b, property: 'text-decoration' },
|
1263
|
+
labelSpacing: { ...label$b, property: 'gap' },
|
1260
1264
|
},
|
1261
1265
|
}),
|
1262
1266
|
clickableMixin,
|
@@ -1264,7 +1268,7 @@ const ButtonClass = compose(
|
|
1264
1268
|
componentNameValidationMixin
|
1265
1269
|
)(
|
1266
1270
|
createProxy({
|
1267
|
-
slots: ['prefix', 'label', 'suffix'],
|
1271
|
+
slots: ['', 'prefix', 'label', 'suffix'],
|
1268
1272
|
wrappedEleName: 'vaadin-button',
|
1269
1273
|
style: () => `
|
1270
1274
|
${resetStyles}
|
@@ -1277,9 +1281,13 @@ const ButtonClass = compose(
|
|
1277
1281
|
vaadin-button {
|
1278
1282
|
height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
1279
1283
|
}
|
1284
|
+
[square="true"]:not([full-width="true"]) {
|
1285
|
+
width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
1286
|
+
padding: 0;
|
1287
|
+
}
|
1280
1288
|
`,
|
1281
1289
|
excludeAttrsSync: ['tabindex'],
|
1282
|
-
componentName: componentName$
|
1290
|
+
componentName: componentName$w,
|
1283
1291
|
})
|
1284
1292
|
);
|
1285
1293
|
|
@@ -1316,7 +1324,7 @@ loadingIndicatorStyles = `
|
|
1316
1324
|
}
|
1317
1325
|
`;
|
1318
1326
|
|
1319
|
-
customElements.define(componentName$
|
1327
|
+
customElements.define(componentName$w, ButtonClass);
|
1320
1328
|
|
1321
1329
|
const createBaseInputClass = (...args) =>
|
1322
1330
|
compose(
|
@@ -1326,11 +1334,11 @@ const createBaseInputClass = (...args) =>
|
|
1326
1334
|
inputEventsDispatchingMixin
|
1327
1335
|
)(createBaseClass(...args));
|
1328
1336
|
|
1329
|
-
const componentName$
|
1337
|
+
const componentName$v = getComponentName('boolean-field-internal');
|
1330
1338
|
|
1331
1339
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1332
1340
|
|
1333
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1341
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
|
1334
1342
|
|
1335
1343
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1336
1344
|
constructor() {
|
@@ -1390,14 +1398,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1390
1398
|
|
1391
1399
|
const template = document.createElement('template');
|
1392
1400
|
template.innerHTML = `
|
1393
|
-
<${componentName$
|
1401
|
+
<${componentName$v}
|
1394
1402
|
tabindex="-1"
|
1395
1403
|
slot="input"
|
1396
|
-
></${componentName$
|
1404
|
+
></${componentName$v}>
|
1397
1405
|
`;
|
1398
1406
|
|
1399
1407
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1400
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1408
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$v);
|
1401
1409
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1402
1410
|
|
1403
1411
|
forwardAttrs(this, this.inputElement, {
|
@@ -1577,18 +1585,18 @@ vaadin-checkbox::part(checkbox) {
|
|
1577
1585
|
}
|
1578
1586
|
`;
|
1579
1587
|
|
1580
|
-
const componentName$
|
1588
|
+
const componentName$u = getComponentName('checkbox');
|
1581
1589
|
|
1582
1590
|
const {
|
1583
|
-
host: host$
|
1591
|
+
host: host$e,
|
1584
1592
|
component: component$1,
|
1585
1593
|
checkboxElement,
|
1586
1594
|
checkboxSurface,
|
1587
1595
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1588
|
-
label: label$
|
1589
|
-
requiredIndicator: requiredIndicator$
|
1596
|
+
label: label$a,
|
1597
|
+
requiredIndicator: requiredIndicator$a,
|
1590
1598
|
helperText: helperText$8,
|
1591
|
-
errorMessage: errorMessage$
|
1599
|
+
errorMessage: errorMessage$a,
|
1592
1600
|
} = {
|
1593
1601
|
host: { selector: () => ':host' },
|
1594
1602
|
label: { selector: '::part(label)' },
|
@@ -1604,25 +1612,25 @@ const {
|
|
1604
1612
|
const CheckboxClass = compose(
|
1605
1613
|
createStyleMixin({
|
1606
1614
|
mappings: {
|
1607
|
-
hostWidth: { ...host$
|
1615
|
+
hostWidth: { ...host$e, property: 'width' },
|
1608
1616
|
|
1609
|
-
fontSize: [host$
|
1610
|
-
fontFamily: [label$
|
1617
|
+
fontSize: [host$e, checkboxElement, label$a, checkboxHiddenLabel$1],
|
1618
|
+
fontFamily: [label$a, checkboxHiddenLabel$1, helperText$8, errorMessage$a],
|
1611
1619
|
|
1612
1620
|
labelTextColor: [
|
1613
|
-
{ ...label$
|
1614
|
-
{ ...requiredIndicator$
|
1615
|
-
{ ...label$
|
1621
|
+
{ ...label$a, property: 'color' },
|
1622
|
+
{ ...requiredIndicator$a, property: 'color' },
|
1623
|
+
{ ...label$a, property: '-webkit-text-fill-color' },
|
1616
1624
|
],
|
1617
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1618
|
-
errorMessageTextColor: { ...errorMessage$
|
1625
|
+
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
1626
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
1619
1627
|
|
1620
1628
|
labelFontWeight: [
|
1621
|
-
{ ...label$
|
1629
|
+
{ ...label$a, property: 'font-weight' },
|
1622
1630
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
1623
1631
|
],
|
1624
1632
|
labelSpacing: [
|
1625
|
-
{ ...label$
|
1633
|
+
{ ...label$a, property: 'left' },
|
1626
1634
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
1627
1635
|
],
|
1628
1636
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
@@ -1645,8 +1653,8 @@ const CheckboxClass = compose(
|
|
1645
1653
|
{ ...checkboxSurface, property: 'font-size' },
|
1646
1654
|
{ ...component$1, property: 'font-size' },
|
1647
1655
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
1648
|
-
{ ...label$
|
1649
|
-
{ ...label$
|
1656
|
+
{ ...label$a, property: 'margin-left' },
|
1657
|
+
{ ...label$a, property: 'line-height' },
|
1650
1658
|
],
|
1651
1659
|
},
|
1652
1660
|
}),
|
@@ -1667,26 +1675,26 @@ const CheckboxClass = compose(
|
|
1667
1675
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
1668
1676
|
`,
|
1669
1677
|
excludeAttrsSync: ['tabindex'],
|
1670
|
-
componentName: componentName$
|
1678
|
+
componentName: componentName$u,
|
1671
1679
|
})
|
1672
1680
|
);
|
1673
1681
|
|
1674
|
-
customElements.define(componentName$
|
1682
|
+
customElements.define(componentName$v, BooleanInputInternal);
|
1675
1683
|
|
1676
|
-
customElements.define(componentName$
|
1684
|
+
customElements.define(componentName$u, CheckboxClass);
|
1677
1685
|
|
1678
|
-
const componentName$
|
1686
|
+
const componentName$t = getComponentName('switch-toggle');
|
1679
1687
|
|
1680
1688
|
const {
|
1681
|
-
host: host$
|
1689
|
+
host: host$d,
|
1682
1690
|
component,
|
1683
1691
|
checkboxElement: track,
|
1684
1692
|
checkboxSurface: knob,
|
1685
1693
|
checkboxHiddenLabel,
|
1686
|
-
label: label$
|
1687
|
-
requiredIndicator: requiredIndicator$
|
1694
|
+
label: label$9,
|
1695
|
+
requiredIndicator: requiredIndicator$9,
|
1688
1696
|
helperText: helperText$7,
|
1689
|
-
errorMessage: errorMessage$
|
1697
|
+
errorMessage: errorMessage$9,
|
1690
1698
|
} = {
|
1691
1699
|
host: { selector: () => ':host' },
|
1692
1700
|
label: { selector: '::part(label)' },
|
@@ -1702,9 +1710,9 @@ const {
|
|
1702
1710
|
const SwitchToggleClass = compose(
|
1703
1711
|
createStyleMixin({
|
1704
1712
|
mappings: {
|
1705
|
-
hostWidth: { ...host$
|
1706
|
-
fontSize: [component, label$
|
1707
|
-
fontFamily: [label$
|
1713
|
+
hostWidth: { ...host$d, property: 'width' },
|
1714
|
+
fontSize: [component, label$9, checkboxHiddenLabel],
|
1715
|
+
fontFamily: [label$9, helperText$7, errorMessage$9],
|
1708
1716
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1709
1717
|
trackBorderStyle: { ...track, property: 'border-style' },
|
1710
1718
|
trackBorderColor: { ...track, property: 'border-color' },
|
@@ -1728,24 +1736,24 @@ const SwitchToggleClass = compose(
|
|
1728
1736
|
knobLeftOffset: { ...knob, property: 'left' },
|
1729
1737
|
|
1730
1738
|
labelSpacing: [
|
1731
|
-
{ ...label$
|
1739
|
+
{ ...label$9, property: 'padding-left' },
|
1732
1740
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
1733
1741
|
],
|
1734
1742
|
labelLineHeight: [
|
1735
|
-
{ ...label$
|
1743
|
+
{ ...label$9, property: 'line-height' },
|
1736
1744
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
1737
1745
|
],
|
1738
1746
|
labelFontWeight: [
|
1739
|
-
{ ...label$
|
1747
|
+
{ ...label$9, property: 'font-weight' },
|
1740
1748
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
1741
1749
|
],
|
1742
1750
|
labelTextColor: [
|
1743
|
-
{ ...label$
|
1744
|
-
{ ...requiredIndicator$
|
1745
|
-
{ ...label$
|
1751
|
+
{ ...label$9, property: 'color' },
|
1752
|
+
{ ...requiredIndicator$9, property: 'color' },
|
1753
|
+
{ ...label$9, property: '-webkit-text-fill-color' },
|
1746
1754
|
],
|
1747
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1748
|
-
errorMessageTextColor: { ...errorMessage$
|
1755
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
1756
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
1749
1757
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
1750
1758
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
1751
1759
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
@@ -1778,17 +1786,17 @@ const SwitchToggleClass = compose(
|
|
1778
1786
|
}
|
1779
1787
|
`,
|
1780
1788
|
excludeAttrsSync: ['tabindex'],
|
1781
|
-
componentName: componentName$
|
1789
|
+
componentName: componentName$t,
|
1782
1790
|
})
|
1783
1791
|
);
|
1784
1792
|
|
1785
|
-
customElements.define(componentName$
|
1793
|
+
customElements.define(componentName$t, SwitchToggleClass);
|
1786
1794
|
|
1787
|
-
const componentName$
|
1795
|
+
const componentName$s = getComponentName('loader-linear');
|
1788
1796
|
|
1789
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1797
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
1790
1798
|
static get componentName() {
|
1791
|
-
return componentName$
|
1799
|
+
return componentName$s;
|
1792
1800
|
}
|
1793
1801
|
|
1794
1802
|
constructor() {
|
@@ -1824,18 +1832,18 @@ const selectors$1 = {
|
|
1824
1832
|
host: { selector: () => ':host' },
|
1825
1833
|
};
|
1826
1834
|
|
1827
|
-
const { after: after$1, host: host$
|
1835
|
+
const { after: after$1, host: host$c } = selectors$1;
|
1828
1836
|
|
1829
1837
|
const LoaderLinearClass = compose(
|
1830
1838
|
createStyleMixin({
|
1831
1839
|
mappings: {
|
1832
1840
|
hostDisplay: {},
|
1833
|
-
hostWidth: { ...host$
|
1841
|
+
hostWidth: { ...host$c, property: 'width' },
|
1834
1842
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
1835
1843
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
1836
1844
|
verticalPadding: [
|
1837
|
-
{ ...host$
|
1838
|
-
{ ...host$
|
1845
|
+
{ ...host$c, property: 'padding-top' },
|
1846
|
+
{ ...host$c, property: 'padding-bottom' },
|
1839
1847
|
],
|
1840
1848
|
barBackgroundColor: { property: 'background-color' },
|
1841
1849
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -1849,11 +1857,11 @@ const LoaderLinearClass = compose(
|
|
1849
1857
|
componentNameValidationMixin
|
1850
1858
|
)(RawLoaderLinear);
|
1851
1859
|
|
1852
|
-
customElements.define(componentName$
|
1860
|
+
customElements.define(componentName$s, LoaderLinearClass);
|
1853
1861
|
|
1854
|
-
const componentName$
|
1862
|
+
const componentName$r = getComponentName('loader-radial');
|
1855
1863
|
|
1856
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1864
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
1857
1865
|
constructor() {
|
1858
1866
|
super();
|
1859
1867
|
|
@@ -1897,11 +1905,11 @@ const LoaderRadialClass = compose(
|
|
1897
1905
|
componentNameValidationMixin
|
1898
1906
|
)(RawLoaderRadial);
|
1899
1907
|
|
1900
|
-
customElements.define(componentName$
|
1908
|
+
customElements.define(componentName$r, LoaderRadialClass);
|
1901
1909
|
|
1902
|
-
const componentName$
|
1910
|
+
const componentName$q = getComponentName('container');
|
1903
1911
|
|
1904
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1912
|
+
class RawContainer extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > slot' }) {
|
1905
1913
|
constructor() {
|
1906
1914
|
super();
|
1907
1915
|
|
@@ -1953,10 +1961,10 @@ const ContainerClass = compose(
|
|
1953
1961
|
componentNameValidationMixin
|
1954
1962
|
)(RawContainer);
|
1955
1963
|
|
1956
|
-
customElements.define(componentName$
|
1964
|
+
customElements.define(componentName$q, ContainerClass);
|
1957
1965
|
|
1958
|
-
const componentName$
|
1959
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1966
|
+
const componentName$p = getComponentName('divider');
|
1967
|
+
class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
1960
1968
|
constructor() {
|
1961
1969
|
super();
|
1962
1970
|
|
@@ -2001,7 +2009,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$m, baseS
|
|
2001
2009
|
}
|
2002
2010
|
}
|
2003
2011
|
|
2004
|
-
const { host: host$
|
2012
|
+
const { host: host$b, before, after, text: text$3 } = {
|
2005
2013
|
host: { selector: () => ':host' },
|
2006
2014
|
before: { selector: '::before' },
|
2007
2015
|
after: { selector: '::after' },
|
@@ -2011,8 +2019,8 @@ const { host: host$a, before, after, text: text$3 } = {
|
|
2011
2019
|
const DividerClass = compose(
|
2012
2020
|
createStyleMixin({
|
2013
2021
|
mappings: {
|
2014
|
-
hostWidth: { ...host$
|
2015
|
-
hostPadding: { ...host$
|
2022
|
+
hostWidth: { ...host$b, property: 'width' },
|
2023
|
+
hostPadding: { ...host$b, property: 'padding' },
|
2016
2024
|
|
2017
2025
|
minHeight: {},
|
2018
2026
|
alignItems: {},
|
@@ -2052,9 +2060,9 @@ const DividerClass = compose(
|
|
2052
2060
|
componentNameValidationMixin
|
2053
2061
|
)(RawDivider);
|
2054
2062
|
|
2055
|
-
const componentName$
|
2063
|
+
const componentName$o = getComponentName('text');
|
2056
2064
|
|
2057
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2065
|
+
class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
|
2058
2066
|
constructor() {
|
2059
2067
|
super();
|
2060
2068
|
|
@@ -2096,11 +2104,11 @@ const TextClass = compose(
|
|
2096
2104
|
componentNameValidationMixin
|
2097
2105
|
)(RawText);
|
2098
2106
|
|
2099
|
-
customElements.define(componentName$
|
2107
|
+
customElements.define(componentName$o, TextClass);
|
2100
2108
|
|
2101
|
-
customElements.define(componentName$
|
2109
|
+
customElements.define(componentName$p, DividerClass);
|
2102
2110
|
|
2103
|
-
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 } =
|
2104
2112
|
{
|
2105
2113
|
host: { selector: () => ':host' },
|
2106
2114
|
label: { selector: '::part(label)' },
|
@@ -2114,24 +2122,24 @@ const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndica
|
|
2114
2122
|
|
2115
2123
|
var textFieldMappings = {
|
2116
2124
|
// we apply font-size also on the host so we can set its width with em
|
2117
|
-
fontSize: [{}, host$
|
2118
|
-
fontFamily: [label$
|
2125
|
+
fontSize: [{}, host$a],
|
2126
|
+
fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
|
2119
2127
|
|
2120
|
-
hostWidth: { ...host$
|
2121
|
-
hostMinWidth: { ...host$
|
2128
|
+
hostWidth: { ...host$a, property: 'width' },
|
2129
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
2122
2130
|
|
2123
2131
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
2124
2132
|
|
2125
2133
|
labelTextColor: [
|
2126
|
-
{ ...label$
|
2127
|
-
{ ...requiredIndicator$
|
2134
|
+
{ ...label$8, property: 'color' },
|
2135
|
+
{ ...requiredIndicator$8, property: 'color' },
|
2128
2136
|
],
|
2129
|
-
errorMessageTextColor: { ...errorMessage$
|
2137
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
2130
2138
|
|
2131
2139
|
inputValueTextColor: { ...inputField$5, property: 'color' },
|
2132
2140
|
inputCaretTextColor: { ...input, property: 'color' },
|
2133
2141
|
|
2134
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2142
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
2135
2143
|
|
2136
2144
|
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
2137
2145
|
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
@@ -2154,9 +2162,9 @@ var textFieldMappings = {
|
|
2154
2162
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2155
2163
|
};
|
2156
2164
|
|
2157
|
-
const componentName$
|
2165
|
+
const componentName$n = getComponentName('email-field');
|
2158
2166
|
|
2159
|
-
const customMixin$
|
2167
|
+
const customMixin$6 = (superclass) =>
|
2160
2168
|
class EmailFieldMixinClass extends superclass {
|
2161
2169
|
init() {
|
2162
2170
|
super.init?.();
|
@@ -2170,10 +2178,10 @@ const EmailFieldClass = compose(
|
|
2170
2178
|
draggableMixin,
|
2171
2179
|
composedProxyInputMixin,
|
2172
2180
|
componentNameValidationMixin,
|
2173
|
-
customMixin$
|
2181
|
+
customMixin$6
|
2174
2182
|
)(
|
2175
2183
|
createProxy({
|
2176
|
-
slots: ['suffix'],
|
2184
|
+
slots: ['', 'suffix'],
|
2177
2185
|
wrappedEleName: 'vaadin-email-field',
|
2178
2186
|
style: () => `
|
2179
2187
|
:host {
|
@@ -2184,18 +2192,18 @@ const EmailFieldClass = compose(
|
|
2184
2192
|
}))
|
2185
2193
|
}
|
2186
2194
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2187
|
-
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2195
|
+
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2188
2196
|
`,
|
2189
2197
|
excludeAttrsSync: ['tabindex'],
|
2190
|
-
componentName: componentName$
|
2198
|
+
componentName: componentName$n,
|
2191
2199
|
})
|
2192
2200
|
);
|
2193
2201
|
|
2194
|
-
customElements.define(componentName$
|
2202
|
+
customElements.define(componentName$n, EmailFieldClass);
|
2195
2203
|
|
2196
|
-
const componentName$
|
2204
|
+
const componentName$m = getComponentName('link');
|
2197
2205
|
|
2198
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2206
|
+
class RawLink extends createBaseClass({ componentName: componentName$m, baseSelector: ':host a' }) {
|
2199
2207
|
constructor() {
|
2200
2208
|
super();
|
2201
2209
|
|
@@ -2241,12 +2249,12 @@ const selectors = {
|
|
2241
2249
|
text: { selector: () => TextClass.componentName },
|
2242
2250
|
};
|
2243
2251
|
|
2244
|
-
const { anchor, text: text$2, host: host$
|
2252
|
+
const { anchor, text: text$2, host: host$9, wrapper: wrapper$1 } = selectors;
|
2245
2253
|
|
2246
2254
|
const LinkClass = compose(
|
2247
2255
|
createStyleMixin({
|
2248
2256
|
mappings: {
|
2249
|
-
hostWidth: { ...host$
|
2257
|
+
hostWidth: { ...host$9, property: 'width' },
|
2250
2258
|
textAlign: wrapper$1,
|
2251
2259
|
textColor: [
|
2252
2260
|
{ ...anchor, property: 'color' },
|
@@ -2259,7 +2267,7 @@ const LinkClass = compose(
|
|
2259
2267
|
componentNameValidationMixin
|
2260
2268
|
)(RawLink);
|
2261
2269
|
|
2262
|
-
customElements.define(componentName$
|
2270
|
+
customElements.define(componentName$m, LinkClass);
|
2263
2271
|
|
2264
2272
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2265
2273
|
let style;
|
@@ -2311,27 +2319,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2311
2319
|
return CssVarImageClass;
|
2312
2320
|
};
|
2313
2321
|
|
2314
|
-
const componentName$
|
2322
|
+
const componentName$l = getComponentName('logo');
|
2315
2323
|
|
2316
2324
|
const LogoClass = createCssVarImageClass({
|
2317
|
-
componentName: componentName$
|
2325
|
+
componentName: componentName$l,
|
2318
2326
|
varName: 'url',
|
2319
2327
|
fallbackVarName: 'fallbackUrl',
|
2320
2328
|
});
|
2321
2329
|
|
2322
|
-
customElements.define(componentName$
|
2330
|
+
customElements.define(componentName$l, LogoClass);
|
2323
2331
|
|
2324
|
-
const componentName$
|
2332
|
+
const componentName$k = getComponentName('totp-image');
|
2325
2333
|
|
2326
2334
|
const TotpImageClass = createCssVarImageClass({
|
2327
|
-
componentName: componentName$
|
2335
|
+
componentName: componentName$k,
|
2328
2336
|
varName: 'url',
|
2329
2337
|
fallbackVarName: 'fallbackUrl',
|
2330
2338
|
});
|
2331
2339
|
|
2332
|
-
customElements.define(componentName$
|
2340
|
+
customElements.define(componentName$k, TotpImageClass);
|
2333
2341
|
|
2334
|
-
const componentName$
|
2342
|
+
const componentName$j = getComponentName('number-field');
|
2335
2343
|
|
2336
2344
|
const NumberFieldClass = compose(
|
2337
2345
|
createStyleMixin({
|
@@ -2342,7 +2350,7 @@ const NumberFieldClass = compose(
|
|
2342
2350
|
componentNameValidationMixin
|
2343
2351
|
)(
|
2344
2352
|
createProxy({
|
2345
|
-
slots: ['prefix', 'suffix'],
|
2353
|
+
slots: ['', 'prefix', 'suffix'],
|
2346
2354
|
wrappedEleName: 'vaadin-number-field',
|
2347
2355
|
style: () => `
|
2348
2356
|
:host {
|
@@ -2356,11 +2364,11 @@ const NumberFieldClass = compose(
|
|
2356
2364
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2357
2365
|
`,
|
2358
2366
|
excludeAttrsSync: ['tabindex'],
|
2359
|
-
componentName: componentName$
|
2367
|
+
componentName: componentName$j,
|
2360
2368
|
})
|
2361
2369
|
);
|
2362
2370
|
|
2363
|
-
customElements.define(componentName$
|
2371
|
+
customElements.define(componentName$j, NumberFieldClass);
|
2364
2372
|
|
2365
2373
|
const focusElement = (ele) => {
|
2366
2374
|
ele?.focus();
|
@@ -2378,23 +2386,19 @@ const getSanitizedCharacters = (str) => {
|
|
2378
2386
|
|
2379
2387
|
/* eslint-disable no-param-reassign */
|
2380
2388
|
|
2381
|
-
const componentName$
|
2389
|
+
const componentName$i = getComponentName('passcode-internal');
|
2382
2390
|
|
2383
2391
|
const observedAttributes$5 = ['digits'];
|
2384
2392
|
|
2385
2393
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2386
2394
|
|
2387
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2395
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
2388
2396
|
|
2389
2397
|
class PasscodeInternal extends BaseInputClass$4 {
|
2390
2398
|
static get observedAttributes() {
|
2391
2399
|
return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
|
2392
2400
|
}
|
2393
2401
|
|
2394
|
-
static get componentName() {
|
2395
|
-
return componentName$f;
|
2396
|
-
}
|
2397
|
-
|
2398
2402
|
constructor() {
|
2399
2403
|
super();
|
2400
2404
|
|
@@ -2584,11 +2588,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2584
2588
|
}
|
2585
2589
|
}
|
2586
2590
|
|
2587
|
-
const componentName$
|
2591
|
+
const componentName$h = getComponentName('text-field');
|
2588
2592
|
|
2589
2593
|
const observedAttrs = ['type'];
|
2590
2594
|
|
2591
|
-
const customMixin$
|
2595
|
+
const customMixin$5 = (superclass) =>
|
2592
2596
|
class TextFieldClass extends superclass {
|
2593
2597
|
static get observedAttributes() {
|
2594
2598
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2615,7 +2619,7 @@ const TextFieldClass = compose(
|
|
2615
2619
|
draggableMixin,
|
2616
2620
|
composedProxyInputMixin,
|
2617
2621
|
componentNameValidationMixin,
|
2618
|
-
customMixin$
|
2622
|
+
customMixin$5
|
2619
2623
|
)(
|
2620
2624
|
createProxy({
|
2621
2625
|
slots: ['prefix', 'suffix'],
|
@@ -2632,15 +2636,15 @@ const TextFieldClass = compose(
|
|
2632
2636
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2633
2637
|
`,
|
2634
2638
|
excludeAttrsSync: ['tabindex'],
|
2635
|
-
componentName: componentName$
|
2639
|
+
componentName: componentName$h,
|
2636
2640
|
})
|
2637
2641
|
);
|
2638
2642
|
|
2639
|
-
const componentName$
|
2643
|
+
const componentName$g = getComponentName('passcode');
|
2640
2644
|
|
2641
2645
|
const observedAttributes$4 = ['digits'];
|
2642
2646
|
|
2643
|
-
const customMixin$
|
2647
|
+
const customMixin$4 = (superclass) =>
|
2644
2648
|
class PasscodeMixinClass extends superclass {
|
2645
2649
|
static get observedAttributes() {
|
2646
2650
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2655,17 +2659,17 @@ const customMixin$3 = (superclass) =>
|
|
2655
2659
|
const template = document.createElement('template');
|
2656
2660
|
|
2657
2661
|
template.innerHTML = `
|
2658
|
-
<${componentName$
|
2662
|
+
<${componentName$i}
|
2659
2663
|
bordered="true"
|
2660
2664
|
name="code"
|
2661
2665
|
tabindex="-1"
|
2662
2666
|
slot="input"
|
2663
|
-
></${componentName$
|
2667
|
+
><slot></slot></${componentName$i}>
|
2664
2668
|
`;
|
2665
2669
|
|
2666
2670
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2667
2671
|
|
2668
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2672
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
2669
2673
|
|
2670
2674
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2671
2675
|
}
|
@@ -2680,13 +2684,13 @@ const customMixin$3 = (superclass) =>
|
|
2680
2684
|
};
|
2681
2685
|
|
2682
2686
|
const {
|
2683
|
-
host: host$
|
2687
|
+
host: host$8,
|
2684
2688
|
digitField,
|
2685
|
-
label: label$
|
2686
|
-
requiredIndicator: requiredIndicator$
|
2687
|
-
internalWrapper,
|
2689
|
+
label: label$7,
|
2690
|
+
requiredIndicator: requiredIndicator$7,
|
2691
|
+
internalWrapper: internalWrapper$1,
|
2688
2692
|
focusedDigitField,
|
2689
|
-
errorMessage: errorMessage$
|
2693
|
+
errorMessage: errorMessage$7,
|
2690
2694
|
} = {
|
2691
2695
|
host: { selector: () => ':host' },
|
2692
2696
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
@@ -2702,15 +2706,15 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
2702
2706
|
const PasscodeClass = compose(
|
2703
2707
|
createStyleMixin({
|
2704
2708
|
mappings: {
|
2705
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
2709
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
|
2706
2710
|
hostWidth: { property: 'width' },
|
2707
|
-
fontFamily: host$
|
2711
|
+
fontFamily: host$8,
|
2708
2712
|
labelTextColor: [
|
2709
|
-
{ ...label$
|
2710
|
-
{ ...requiredIndicator$
|
2713
|
+
{ ...label$7, property: 'color' },
|
2714
|
+
{ ...requiredIndicator$7, property: 'color' },
|
2711
2715
|
],
|
2712
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2713
|
-
errorMessageTextColor: { ...errorMessage$
|
2716
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
2717
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
2714
2718
|
digitValueTextColor: {
|
2715
2719
|
selector: TextFieldClass.componentName,
|
2716
2720
|
property: textVars$2.inputValueTextColor,
|
@@ -2722,7 +2726,7 @@ const PasscodeClass = compose(
|
|
2722
2726
|
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
2723
2727
|
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
2724
2728
|
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
2725
|
-
digitSpacing: { ...internalWrapper, property: 'gap' },
|
2729
|
+
digitSpacing: { ...internalWrapper$1, property: 'gap' },
|
2726
2730
|
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
2727
2731
|
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
2728
2732
|
|
@@ -2732,7 +2736,7 @@ const PasscodeClass = compose(
|
|
2732
2736
|
draggableMixin,
|
2733
2737
|
composedProxyInputMixin,
|
2734
2738
|
componentNameValidationMixin,
|
2735
|
-
customMixin$
|
2739
|
+
customMixin$4
|
2736
2740
|
)(
|
2737
2741
|
createProxy({
|
2738
2742
|
slots: [],
|
@@ -2803,15 +2807,15 @@ const PasscodeClass = compose(
|
|
2803
2807
|
${resetInputCursor('vaadin-text-field')}
|
2804
2808
|
`,
|
2805
2809
|
excludeAttrsSync: ['tabindex'],
|
2806
|
-
componentName: componentName$
|
2810
|
+
componentName: componentName$g,
|
2807
2811
|
})
|
2808
2812
|
);
|
2809
2813
|
|
2810
|
-
customElements.define(componentName$
|
2814
|
+
customElements.define(componentName$h, TextFieldClass);
|
2811
2815
|
|
2812
|
-
customElements.define(componentName$
|
2816
|
+
customElements.define(componentName$i, PasscodeInternal);
|
2813
2817
|
|
2814
|
-
customElements.define(componentName$
|
2818
|
+
customElements.define(componentName$g, PasscodeClass);
|
2815
2819
|
|
2816
2820
|
const passwordDraggableMixin = (superclass) =>
|
2817
2821
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2847,18 +2851,18 @@ const passwordDraggableMixin = (superclass) =>
|
|
2847
2851
|
}
|
2848
2852
|
};
|
2849
2853
|
|
2850
|
-
const componentName$
|
2854
|
+
const componentName$f = getComponentName('password');
|
2851
2855
|
|
2852
2856
|
const {
|
2853
|
-
host: host$
|
2857
|
+
host: host$7,
|
2854
2858
|
inputField: inputField$4,
|
2855
2859
|
inputElement: inputElement$1,
|
2856
2860
|
inputElementPlaceholder,
|
2857
2861
|
revealButtonContainer,
|
2858
2862
|
revealButtonIcon,
|
2859
|
-
label: label$
|
2860
|
-
requiredIndicator: requiredIndicator$
|
2861
|
-
errorMessage: errorMessage$
|
2863
|
+
label: label$6,
|
2864
|
+
requiredIndicator: requiredIndicator$6,
|
2865
|
+
errorMessage: errorMessage$6,
|
2862
2866
|
helperText: helperText$5,
|
2863
2867
|
} = {
|
2864
2868
|
host: { selector: () => ':host' },
|
@@ -2876,10 +2880,10 @@ const {
|
|
2876
2880
|
const PasswordClass = compose(
|
2877
2881
|
createStyleMixin({
|
2878
2882
|
mappings: {
|
2879
|
-
hostWidth: { ...host$
|
2880
|
-
hostMinWidth: { ...host$
|
2881
|
-
fontSize: [{}, host$
|
2882
|
-
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],
|
2883
2887
|
inputHeight: { ...inputField$4, property: 'height' },
|
2884
2888
|
inputHorizontalPadding: [
|
2885
2889
|
{ ...inputElement$1, property: 'padding-left' },
|
@@ -2898,11 +2902,11 @@ const PasswordClass = compose(
|
|
2898
2902
|
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
2899
2903
|
|
2900
2904
|
labelTextColor: [
|
2901
|
-
{ ...label$
|
2902
|
-
{ ...requiredIndicator$
|
2905
|
+
{ ...label$6, property: 'color' },
|
2906
|
+
{ ...requiredIndicator$6, property: 'color' },
|
2903
2907
|
],
|
2904
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2905
|
-
errorMessageTextColor: { ...errorMessage$
|
2908
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
2909
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
2906
2910
|
|
2907
2911
|
inputValueTextColor: [
|
2908
2912
|
{ ...inputElement$1, property: 'color' },
|
@@ -2923,7 +2927,7 @@ const PasswordClass = compose(
|
|
2923
2927
|
passwordDraggableMixin
|
2924
2928
|
)(
|
2925
2929
|
createProxy({
|
2926
|
-
slots: ['suffix'],
|
2930
|
+
slots: ['', 'suffix'],
|
2927
2931
|
wrappedEleName: 'vaadin-password-field',
|
2928
2932
|
style: () => `
|
2929
2933
|
:host {
|
@@ -2948,7 +2952,7 @@ const PasswordClass = compose(
|
|
2948
2952
|
}
|
2949
2953
|
vaadin-password-field[focus-ring]::part(input-field) {
|
2950
2954
|
box-shadow: none;
|
2951
|
-
}
|
2955
|
+
}
|
2952
2956
|
vaadin-password-field > input {
|
2953
2957
|
min-height: 0;
|
2954
2958
|
-webkit-mask-image: none;
|
@@ -2975,23 +2979,23 @@ const PasswordClass = compose(
|
|
2975
2979
|
}
|
2976
2980
|
`,
|
2977
2981
|
excludeAttrsSync: ['tabindex'],
|
2978
|
-
componentName: componentName$
|
2982
|
+
componentName: componentName$f,
|
2979
2983
|
})
|
2980
2984
|
);
|
2981
2985
|
|
2982
|
-
customElements.define(componentName$
|
2986
|
+
customElements.define(componentName$f, PasswordClass);
|
2983
2987
|
|
2984
|
-
const componentName$
|
2988
|
+
const componentName$e = getComponentName('text-area');
|
2985
2989
|
|
2986
2990
|
const {
|
2987
|
-
host: host$
|
2988
|
-
label: label$
|
2991
|
+
host: host$6,
|
2992
|
+
label: label$5,
|
2989
2993
|
placeholder: placeholder$1,
|
2990
2994
|
inputField: inputField$3,
|
2991
2995
|
textArea: textArea$2,
|
2992
|
-
requiredIndicator: requiredIndicator$
|
2996
|
+
requiredIndicator: requiredIndicator$5,
|
2993
2997
|
helperText: helperText$4,
|
2994
|
-
errorMessage: errorMessage$
|
2998
|
+
errorMessage: errorMessage$5,
|
2995
2999
|
} = {
|
2996
3000
|
host: { selector: () => ':host' },
|
2997
3001
|
label: { selector: '::part(label)' },
|
@@ -3006,16 +3010,16 @@ const {
|
|
3006
3010
|
const TextAreaClass = compose(
|
3007
3011
|
createStyleMixin({
|
3008
3012
|
mappings: {
|
3009
|
-
hostWidth: { ...host$
|
3010
|
-
hostMinWidth: { ...host$
|
3011
|
-
fontSize: [host$
|
3012
|
-
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],
|
3013
3017
|
labelTextColor: [
|
3014
|
-
{ ...label$
|
3015
|
-
{ ...requiredIndicator$
|
3018
|
+
{ ...label$5, property: 'color' },
|
3019
|
+
{ ...requiredIndicator$5, property: 'color' },
|
3016
3020
|
],
|
3017
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3018
|
-
errorMessageTextColor: { ...errorMessage$
|
3021
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
3022
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
3019
3023
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
3020
3024
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
3021
3025
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
@@ -3053,17 +3057,17 @@ const TextAreaClass = compose(
|
|
3053
3057
|
${resetInputCursor('vaadin-text-area')}
|
3054
3058
|
`,
|
3055
3059
|
excludeAttrsSync: ['tabindex'],
|
3056
|
-
componentName: componentName$
|
3060
|
+
componentName: componentName$e,
|
3057
3061
|
})
|
3058
3062
|
);
|
3059
3063
|
|
3060
|
-
customElements.define(componentName$
|
3064
|
+
customElements.define(componentName$e, TextAreaClass);
|
3061
3065
|
|
3062
3066
|
const observedAttributes$3 = ['src', 'alt'];
|
3063
3067
|
|
3064
|
-
const componentName$
|
3068
|
+
const componentName$d = getComponentName('image');
|
3065
3069
|
|
3066
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3070
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
|
3067
3071
|
class RawImage extends BaseClass$1 {
|
3068
3072
|
static get observedAttributes() {
|
3069
3073
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3103,9 +3107,9 @@ const ImageClass = compose(
|
|
3103
3107
|
draggableMixin
|
3104
3108
|
)(RawImage);
|
3105
3109
|
|
3106
|
-
customElements.define(componentName$
|
3110
|
+
customElements.define(componentName$d, ImageClass);
|
3107
3111
|
|
3108
|
-
const componentName$
|
3112
|
+
const componentName$c = getComponentName('combo-box');
|
3109
3113
|
|
3110
3114
|
const ComboBoxMixin = (superclass) =>
|
3111
3115
|
class ComboBoxMixinClass extends superclass {
|
@@ -3157,15 +3161,15 @@ const ComboBoxMixin = (superclass) =>
|
|
3157
3161
|
};
|
3158
3162
|
|
3159
3163
|
const {
|
3160
|
-
host: host$
|
3164
|
+
host: host$5,
|
3161
3165
|
inputField: inputField$2,
|
3162
3166
|
inputElement,
|
3163
3167
|
placeholder,
|
3164
3168
|
toggle,
|
3165
|
-
label: label$
|
3166
|
-
requiredIndicator: requiredIndicator$
|
3169
|
+
label: label$4,
|
3170
|
+
requiredIndicator: requiredIndicator$4,
|
3167
3171
|
helperText: helperText$3,
|
3168
|
-
errorMessage: errorMessage$
|
3172
|
+
errorMessage: errorMessage$4,
|
3169
3173
|
} = {
|
3170
3174
|
host: { selector: () => ':host' },
|
3171
3175
|
inputField: { selector: '::part(input-field)' },
|
@@ -3186,22 +3190,22 @@ const {
|
|
3186
3190
|
const ComboBoxClass = compose(
|
3187
3191
|
createStyleMixin({
|
3188
3192
|
mappings: {
|
3189
|
-
hostWidth: { ...host$
|
3193
|
+
hostWidth: { ...host$5, property: 'width' },
|
3190
3194
|
// we apply font-size also on the host so we can set its width with em
|
3191
|
-
fontSize: [{}, host$
|
3192
|
-
fontFamily: [label$
|
3195
|
+
fontSize: [{}, host$5],
|
3196
|
+
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
3193
3197
|
labelTextColor: [
|
3194
|
-
{ ...label$
|
3195
|
-
{ ...requiredIndicator$
|
3198
|
+
{ ...label$4, property: 'color' },
|
3199
|
+
{ ...requiredIndicator$4, property: 'color' },
|
3196
3200
|
],
|
3197
|
-
errorMessageTextColor: { ...errorMessage$
|
3201
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
3198
3202
|
inputHeight: { ...inputField$2, property: 'height' },
|
3199
3203
|
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
3200
3204
|
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
3201
3205
|
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
3202
3206
|
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
3203
3207
|
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
3204
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3208
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
3205
3209
|
inputValueTextColor: { ...inputField$2, property: 'color' },
|
3206
3210
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3207
3211
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
@@ -3249,7 +3253,7 @@ const ComboBoxClass = compose(
|
|
3249
3253
|
ComboBoxMixin
|
3250
3254
|
)(
|
3251
3255
|
createProxy({
|
3252
|
-
slots: ['prefix'],
|
3256
|
+
slots: ['', 'prefix'],
|
3253
3257
|
wrappedEleName: 'vaadin-combo-box',
|
3254
3258
|
style: () => `
|
3255
3259
|
:host {
|
@@ -3285,12 +3289,12 @@ const ComboBoxClass = compose(
|
|
3285
3289
|
// and reset items to an empty array, and opening the list box with no items
|
3286
3290
|
// to display.
|
3287
3291
|
excludeAttrsSync: ['tabindex', 'size'],
|
3288
|
-
componentName: componentName$
|
3292
|
+
componentName: componentName$c,
|
3289
3293
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3290
3294
|
})
|
3291
3295
|
);
|
3292
3296
|
|
3293
|
-
customElements.define(componentName$
|
3297
|
+
customElements.define(componentName$c, ComboBoxClass);
|
3294
3298
|
|
3295
3299
|
var CountryCodes = [
|
3296
3300
|
{
|
@@ -4530,7 +4534,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4530
4534
|
</div>
|
4531
4535
|
`;
|
4532
4536
|
|
4533
|
-
const componentName$
|
4537
|
+
const componentName$b = getComponentName('phone-field-internal');
|
4534
4538
|
|
4535
4539
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4536
4540
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4542,7 +4546,7 @@ const mapAttrs$1 = {
|
|
4542
4546
|
|
4543
4547
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4544
4548
|
|
4545
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4549
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
4546
4550
|
|
4547
4551
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4548
4552
|
static get observedAttributes() {
|
@@ -4732,14 +4736,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4732
4736
|
}
|
4733
4737
|
};
|
4734
4738
|
|
4735
|
-
customElements.define(componentName$
|
4739
|
+
customElements.define(componentName$b, PhoneFieldInternal$1);
|
4736
4740
|
|
4737
4741
|
const textVars$1 = TextFieldClass.cssVarList;
|
4738
4742
|
const comboVars = ComboBoxClass.cssVarList;
|
4739
4743
|
|
4740
|
-
const componentName$
|
4744
|
+
const componentName$a = getComponentName('phone-field');
|
4741
4745
|
|
4742
|
-
const customMixin$
|
4746
|
+
const customMixin$3 = (superclass) =>
|
4743
4747
|
class PhoneFieldMixinClass extends superclass {
|
4744
4748
|
static get CountryCodes() {
|
4745
4749
|
return CountryCodes;
|
@@ -4751,15 +4755,15 @@ const customMixin$2 = (superclass) =>
|
|
4751
4755
|
const template = document.createElement('template');
|
4752
4756
|
|
4753
4757
|
template.innerHTML = `
|
4754
|
-
<${componentName$
|
4758
|
+
<${componentName$b}
|
4755
4759
|
tabindex="-1"
|
4756
4760
|
slot="input"
|
4757
|
-
></${componentName$
|
4761
|
+
></${componentName$b}>
|
4758
4762
|
`;
|
4759
4763
|
|
4760
4764
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4761
4765
|
|
4762
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4766
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
4763
4767
|
|
4764
4768
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4765
4769
|
includeAttrs: [
|
@@ -4779,14 +4783,14 @@ const customMixin$2 = (superclass) =>
|
|
4779
4783
|
};
|
4780
4784
|
|
4781
4785
|
const {
|
4782
|
-
host: host$
|
4783
|
-
label: label$
|
4784
|
-
requiredIndicator: requiredIndicator$
|
4786
|
+
host: host$4,
|
4787
|
+
label: label$3,
|
4788
|
+
requiredIndicator: requiredIndicator$3,
|
4785
4789
|
inputField: inputField$1,
|
4786
4790
|
countryCodeInput,
|
4787
4791
|
phoneInput: phoneInput$1,
|
4788
4792
|
separator,
|
4789
|
-
errorMessage: errorMessage$
|
4793
|
+
errorMessage: errorMessage$3,
|
4790
4794
|
helperText: helperText$2,
|
4791
4795
|
} = {
|
4792
4796
|
host: { selector: () => ':host' },
|
@@ -4804,7 +4808,7 @@ const PhoneFieldClass = compose(
|
|
4804
4808
|
createStyleMixin({
|
4805
4809
|
mappings: {
|
4806
4810
|
fontSize: [
|
4807
|
-
host$
|
4811
|
+
host$4,
|
4808
4812
|
inputField$1,
|
4809
4813
|
{
|
4810
4814
|
selector: TextFieldClass.componentName,
|
@@ -4816,8 +4820,8 @@ const PhoneFieldClass = compose(
|
|
4816
4820
|
},
|
4817
4821
|
],
|
4818
4822
|
fontFamily: [
|
4819
|
-
label$
|
4820
|
-
errorMessage$
|
4823
|
+
label$3,
|
4824
|
+
errorMessage$3,
|
4821
4825
|
helperText$2,
|
4822
4826
|
{
|
4823
4827
|
...countryCodeInput,
|
@@ -4825,7 +4829,7 @@ const PhoneFieldClass = compose(
|
|
4825
4829
|
},
|
4826
4830
|
],
|
4827
4831
|
hostWidth: [
|
4828
|
-
{ ...host$
|
4832
|
+
{ ...host$4, property: 'width' },
|
4829
4833
|
{ ...phoneInput$1, property: 'width' },
|
4830
4834
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
4831
4835
|
],
|
@@ -4852,11 +4856,11 @@ const PhoneFieldClass = compose(
|
|
4852
4856
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
4853
4857
|
|
4854
4858
|
labelTextColor: [
|
4855
|
-
{ ...label$
|
4856
|
-
{ ...requiredIndicator$
|
4859
|
+
{ ...label$3, property: 'color' },
|
4860
|
+
{ ...requiredIndicator$3, property: 'color' },
|
4857
4861
|
],
|
4858
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
4859
|
-
errorMessageTextColor: { ...errorMessage$
|
4862
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
4863
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
4860
4864
|
|
4861
4865
|
inputValueTextColor: [
|
4862
4866
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
@@ -4878,7 +4882,7 @@ const PhoneFieldClass = compose(
|
|
4878
4882
|
}),
|
4879
4883
|
draggableMixin,
|
4880
4884
|
composedProxyInputMixin,
|
4881
|
-
customMixin$
|
4885
|
+
customMixin$3
|
4882
4886
|
)(
|
4883
4887
|
createProxy({
|
4884
4888
|
slots: [],
|
@@ -4954,17 +4958,17 @@ const PhoneFieldClass = compose(
|
|
4954
4958
|
}
|
4955
4959
|
`,
|
4956
4960
|
excludeAttrsSync: ['tabindex'],
|
4957
|
-
componentName: componentName$
|
4961
|
+
componentName: componentName$a,
|
4958
4962
|
})
|
4959
4963
|
);
|
4960
4964
|
|
4961
|
-
customElements.define(componentName$
|
4965
|
+
customElements.define(componentName$a, PhoneFieldClass);
|
4962
4966
|
|
4963
4967
|
const getCountryByCodeId = (countryCode) => {
|
4964
4968
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
4965
4969
|
};
|
4966
4970
|
|
4967
|
-
const componentName$
|
4971
|
+
const componentName$9 = getComponentName('phone-field-internal-input-box');
|
4968
4972
|
|
4969
4973
|
const observedAttributes$2 = [
|
4970
4974
|
'disabled',
|
@@ -4978,7 +4982,7 @@ const mapAttrs = {
|
|
4978
4982
|
'phone-input-placeholder': 'placeholder',
|
4979
4983
|
};
|
4980
4984
|
|
4981
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
4985
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
|
4982
4986
|
|
4983
4987
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
4984
4988
|
static get observedAttributes() {
|
@@ -5117,13 +5121,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5117
5121
|
}
|
5118
5122
|
}
|
5119
5123
|
|
5120
|
-
customElements.define(componentName$
|
5124
|
+
customElements.define(componentName$9, PhoneFieldInternal);
|
5121
5125
|
|
5122
5126
|
const textVars = TextFieldClass.cssVarList;
|
5123
5127
|
|
5124
|
-
const componentName$
|
5128
|
+
const componentName$8 = getComponentName('phone-input-box-field');
|
5125
5129
|
|
5126
|
-
const customMixin$
|
5130
|
+
const customMixin$2 = (superclass) =>
|
5127
5131
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5128
5132
|
static get CountryCodes() {
|
5129
5133
|
return CountryCodes;
|
@@ -5135,15 +5139,15 @@ const customMixin$1 = (superclass) =>
|
|
5135
5139
|
const template = document.createElement('template');
|
5136
5140
|
|
5137
5141
|
template.innerHTML = `
|
5138
|
-
<${componentName$
|
5142
|
+
<${componentName$9}
|
5139
5143
|
tabindex="-1"
|
5140
5144
|
slot="input"
|
5141
|
-
></${componentName$
|
5145
|
+
></${componentName$9}>
|
5142
5146
|
`;
|
5143
5147
|
|
5144
5148
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5145
5149
|
|
5146
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5150
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
5147
5151
|
|
5148
5152
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5149
5153
|
includeAttrs: [
|
@@ -5160,7 +5164,7 @@ const customMixin$1 = (superclass) =>
|
|
5160
5164
|
}
|
5161
5165
|
};
|
5162
5166
|
|
5163
|
-
const { host: host$
|
5167
|
+
const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
5164
5168
|
host: { selector: () => ':host' },
|
5165
5169
|
label: { selector: '::part(label)' },
|
5166
5170
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5174,16 +5178,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
5174
5178
|
createStyleMixin({
|
5175
5179
|
mappings: {
|
5176
5180
|
fontSize: [
|
5177
|
-
host$
|
5181
|
+
host$3,
|
5178
5182
|
inputField,
|
5179
5183
|
{
|
5180
5184
|
selector: TextFieldClass.componentName,
|
5181
5185
|
property: TextFieldClass.cssVarList.fontSize,
|
5182
5186
|
},
|
5183
5187
|
],
|
5184
|
-
fontFamily: [label$
|
5185
|
-
hostWidth: { ...host$
|
5186
|
-
hostMinWidth: { ...host$
|
5188
|
+
fontFamily: [label$2, errorMessage$2, helperText$1],
|
5189
|
+
hostWidth: { ...host$3, property: 'width' },
|
5190
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
5187
5191
|
|
5188
5192
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
5189
5193
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
@@ -5191,11 +5195,11 @@ const PhoneFieldInputBoxClass = compose(
|
|
5191
5195
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
5192
5196
|
|
5193
5197
|
labelTextColor: [
|
5194
|
-
{ ...label$
|
5195
|
-
{ ...requiredIndicator$
|
5198
|
+
{ ...label$2, property: 'color' },
|
5199
|
+
{ ...requiredIndicator$2, property: 'color' },
|
5196
5200
|
],
|
5197
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
5198
|
-
errorMessageTextColor: { ...errorMessage$
|
5201
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
5202
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
5199
5203
|
|
5200
5204
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
5201
5205
|
|
@@ -5209,7 +5213,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5209
5213
|
}),
|
5210
5214
|
draggableMixin,
|
5211
5215
|
composedProxyInputMixin,
|
5212
|
-
customMixin$
|
5216
|
+
customMixin$2
|
5213
5217
|
)(
|
5214
5218
|
createProxy({
|
5215
5219
|
slots: [],
|
@@ -5275,17 +5279,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5275
5279
|
}
|
5276
5280
|
`,
|
5277
5281
|
excludeAttrsSync: ['tabindex'],
|
5278
|
-
componentName: componentName$
|
5282
|
+
componentName: componentName$8,
|
5279
5283
|
})
|
5280
5284
|
);
|
5281
5285
|
|
5282
|
-
customElements.define(componentName$
|
5286
|
+
customElements.define(componentName$8, PhoneFieldInputBoxClass);
|
5283
5287
|
|
5284
|
-
const componentName$
|
5288
|
+
const componentName$7 = getComponentName('new-password-internal');
|
5285
5289
|
|
5286
|
-
const componentName$
|
5290
|
+
const componentName$6 = getComponentName('new-password');
|
5287
5291
|
|
5288
|
-
const customMixin = (superclass) =>
|
5292
|
+
const customMixin$1 = (superclass) =>
|
5289
5293
|
class NewPasswordMixinClass extends superclass {
|
5290
5294
|
init() {
|
5291
5295
|
super.init?.();
|
@@ -5293,16 +5297,16 @@ const customMixin = (superclass) =>
|
|
5293
5297
|
const template = document.createElement('template');
|
5294
5298
|
|
5295
5299
|
template.innerHTML = `
|
5296
|
-
<${componentName$
|
5300
|
+
<${componentName$7}
|
5297
5301
|
name="new-password"
|
5298
5302
|
tabindex="-1"
|
5299
5303
|
slot="input"
|
5300
|
-
></${componentName$
|
5304
|
+
></${componentName$7}>
|
5301
5305
|
`;
|
5302
5306
|
|
5303
5307
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5304
5308
|
|
5305
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5309
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$7);
|
5306
5310
|
|
5307
5311
|
forwardAttrs(this, this.inputElement, {
|
5308
5312
|
includeAttrs: [
|
@@ -5323,7 +5327,7 @@ const customMixin = (superclass) =>
|
|
5323
5327
|
}
|
5324
5328
|
};
|
5325
5329
|
|
5326
|
-
const { host: host$
|
5330
|
+
const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
5327
5331
|
host: { selector: () => ':host' },
|
5328
5332
|
label: { selector: '::part(label)' },
|
5329
5333
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5335,24 +5339,24 @@ const NewPasswordClass = compose(
|
|
5335
5339
|
createStyleMixin({
|
5336
5340
|
mappings: {
|
5337
5341
|
fontSize: [
|
5338
|
-
host$
|
5342
|
+
host$2,
|
5339
5343
|
{},
|
5340
5344
|
{
|
5341
5345
|
selector: PasswordClass.componentName,
|
5342
5346
|
property: PasswordClass.cssVarList.fontSize,
|
5343
5347
|
},
|
5344
5348
|
],
|
5345
|
-
fontFamily: [label, errorMessage, helperText],
|
5346
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
5347
|
-
hostWidth: { ...host$
|
5348
|
-
hostMinWidth: { ...host$
|
5349
|
-
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' },
|
5350
5354
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5351
5355
|
},
|
5352
5356
|
}),
|
5353
5357
|
draggableMixin,
|
5354
5358
|
composedProxyInputMixin,
|
5355
|
-
customMixin
|
5359
|
+
customMixin$1
|
5356
5360
|
)(
|
5357
5361
|
createProxy({
|
5358
5362
|
slots: [],
|
@@ -5401,7 +5405,7 @@ const NewPasswordClass = compose(
|
|
5401
5405
|
},
|
5402
5406
|
`,
|
5403
5407
|
excludeAttrsSync: ['tabindex'],
|
5404
|
-
componentName: componentName$
|
5408
|
+
componentName: componentName$6,
|
5405
5409
|
})
|
5406
5410
|
);
|
5407
5411
|
|
@@ -5425,7 +5429,7 @@ const commonAttrs = [
|
|
5425
5429
|
|
5426
5430
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5427
5431
|
|
5428
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5432
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
5429
5433
|
|
5430
5434
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5431
5435
|
static get observedAttributes() {
|
@@ -5585,16 +5589,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5585
5589
|
}
|
5586
5590
|
}
|
5587
5591
|
|
5588
|
-
customElements.define(componentName$
|
5592
|
+
customElements.define(componentName$7, NewPasswordInternal);
|
5589
5593
|
|
5590
|
-
customElements.define(componentName$
|
5594
|
+
customElements.define(componentName$6, NewPasswordClass);
|
5591
5595
|
|
5592
|
-
const componentName$
|
5596
|
+
const componentName$5 = getComponentName('recaptcha');
|
5593
5597
|
|
5594
5598
|
const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
|
5595
5599
|
|
5596
5600
|
const BaseClass = createBaseClass({
|
5597
|
-
componentName: componentName$
|
5601
|
+
componentName: componentName$5,
|
5598
5602
|
baseSelector: ':host > div',
|
5599
5603
|
});
|
5600
5604
|
class RawRecaptcha extends BaseClass {
|
@@ -5744,7 +5748,7 @@ class RawRecaptcha extends BaseClass {
|
|
5744
5748
|
|
5745
5749
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
5746
5750
|
|
5747
|
-
customElements.define(componentName$
|
5751
|
+
customElements.define(componentName$5, RecaptchaClass);
|
5748
5752
|
|
5749
5753
|
const getFileBase64 = (fileObj) => {
|
5750
5754
|
return new Promise((resolve) => {
|
@@ -5758,7 +5762,7 @@ const getFilename = (fileObj) => {
|
|
5758
5762
|
return fileObj.name.replace(/^.*\\/, '');
|
5759
5763
|
};
|
5760
5764
|
|
5761
|
-
const componentName$
|
5765
|
+
const componentName$4 = getComponentName('upload-file');
|
5762
5766
|
|
5763
5767
|
const observedAttributes = [
|
5764
5768
|
'title',
|
@@ -5773,7 +5777,7 @@ const observedAttributes = [
|
|
5773
5777
|
'icon',
|
5774
5778
|
];
|
5775
5779
|
|
5776
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
5780
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
|
5777
5781
|
|
5778
5782
|
class RawUploadFile extends BaseInputClass {
|
5779
5783
|
static get observedAttributes() {
|
@@ -5935,7 +5939,7 @@ class RawUploadFile extends BaseInputClass {
|
|
5935
5939
|
}
|
5936
5940
|
}
|
5937
5941
|
|
5938
|
-
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
5942
|
+
const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
5939
5943
|
host: { selector: () => ':host' },
|
5940
5944
|
wrapper: { selector: () => ':host > div' },
|
5941
5945
|
icon: { selector: () => '.icon' },
|
@@ -5954,8 +5958,8 @@ const UploadFileClass = compose(
|
|
5954
5958
|
borderWidth: {},
|
5955
5959
|
borderStyle: {},
|
5956
5960
|
borderRadius: {},
|
5957
|
-
hostHeight: { ...host, property: 'height' },
|
5958
|
-
hostWidth: { ...host, property: 'width' },
|
5961
|
+
hostHeight: { ...host$1, property: 'height' },
|
5962
|
+
hostWidth: { ...host$1, property: 'width' },
|
5959
5963
|
hostPadding: { property: 'padding' },
|
5960
5964
|
gap: { ...wrapper },
|
5961
5965
|
lineHeight: { ...wrapper, property: 'line-height' },
|
@@ -5967,107 +5971,452 @@ const UploadFileClass = compose(
|
|
5967
5971
|
{ ...description, property: 'color' },
|
5968
5972
|
],
|
5969
5973
|
iconSize: { ...icon, property: 'width' },
|
5970
|
-
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
5974
|
+
requiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
5971
5975
|
},
|
5972
5976
|
}),
|
5973
5977
|
draggableMixin,
|
5974
5978
|
componentNameValidationMixin
|
5975
5979
|
)(RawUploadFile);
|
5976
5980
|
|
5977
|
-
customElements.define(componentName$
|
5981
|
+
customElements.define(componentName$4, UploadFileClass);
|
5978
5982
|
|
5979
|
-
const
|
5980
|
-
|
5981
|
-
const transformTheme = (theme, path, getTransformation) => {
|
5982
|
-
return Object.entries(theme).reduce((acc, [key, val]) => {
|
5983
|
-
if (val?.constructor !== Object) {
|
5984
|
-
return merge(acc, getTransformation(path.concat(key), val));
|
5985
|
-
}
|
5986
|
-
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
5987
|
-
}, {});
|
5988
|
-
};
|
5983
|
+
const componentName$3 = getComponentName('single-select-internal');
|
5989
5984
|
|
5990
|
-
|
5991
|
-
|
5985
|
+
class SingleSelectInternalClass extends createBaseInputClass({
|
5986
|
+
componentName: componentName$3,
|
5987
|
+
baseSelector: 'slot',
|
5988
|
+
}) {
|
5989
|
+
constructor() {
|
5990
|
+
super();
|
5992
5991
|
|
5993
|
-
|
5994
|
-
|
5995
|
-
|
5996
|
-
|
5997
|
-
|
5998
|
-
|
5999
|
-
|
6000
|
-
|
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
|
+
`;
|
6001
6003
|
}
|
6002
|
-
};
|
6003
|
-
|
6004
|
-
const themeToCSSVarsObj = (theme) =>
|
6005
|
-
transformTheme(theme, [], (path, val) => ({
|
6006
|
-
[getVarName(path)]: getCssVarValue(val),
|
6007
|
-
}));
|
6008
6004
|
|
6009
|
-
|
6010
|
-
transformTheme(theme, [], (path) =>
|
6011
|
-
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
6012
|
-
);
|
6005
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
6013
6006
|
|
6014
|
-
|
6015
|
-
|
6007
|
+
get items() {
|
6008
|
+
return this.querySelector('slot').assignedElements();
|
6009
|
+
}
|
6016
6010
|
|
6017
|
-
|
6018
|
-
|
6019
|
-
|
6020
|
-
''
|
6021
|
-
);
|
6011
|
+
get isReadonly() {
|
6012
|
+
return this.getAttribute('readonly') === 'true';
|
6013
|
+
}
|
6022
6014
|
|
6023
|
-
|
6015
|
+
getSelectedNode() {
|
6016
|
+
return this.items.find((item) => item.hasAttribute('selected'));
|
6017
|
+
}
|
6024
6018
|
|
6025
|
-
|
6026
|
-
|
6019
|
+
get size() {
|
6020
|
+
return this.getAttribute('size') || 'md';
|
6021
|
+
}
|
6027
6022
|
|
6028
|
-
|
6029
|
-
|
6030
|
-
|
6031
|
-
const property = restPath.pop();
|
6032
|
-
const componentName = getComponentName(component);
|
6023
|
+
removeSelected() {
|
6024
|
+
this.getSelectedNode()?.removeAttribute('selected');
|
6025
|
+
}
|
6033
6026
|
|
6034
|
-
|
6035
|
-
|
6036
|
-
|
6027
|
+
onNodeClick(e) {
|
6028
|
+
if (!this.isReadonly) {
|
6029
|
+
this.setSelected(e.target);
|
6030
|
+
this.#dispatchChange();
|
6037
6031
|
}
|
6032
|
+
}
|
6038
6033
|
|
6039
|
-
|
6040
|
-
|
6041
|
-
|
6042
|
-
|
6043
|
-
let themeName = BASE_THEME_SECTION;
|
6044
|
-
|
6045
|
-
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
6046
|
-
themeName = restPath.shift();
|
6034
|
+
setSelected(node) {
|
6035
|
+
if (node !== this.getSelectedNode()) {
|
6036
|
+
this.removeSelected();
|
6037
|
+
node?.setAttribute('selected', 'true');
|
6047
6038
|
}
|
6039
|
+
}
|
6048
6040
|
|
6049
|
-
|
6050
|
-
|
6051
|
-
|
6052
|
-
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
6041
|
+
get value() {
|
6042
|
+
return this.getSelectedNode()?.value;
|
6043
|
+
}
|
6053
6044
|
|
6054
|
-
|
6045
|
+
set value(value) {
|
6046
|
+
const node = this.items.find((child) => child.value === value);
|
6047
|
+
this.setSelected(node);
|
6048
|
+
}
|
6055
6049
|
|
6056
|
-
|
6057
|
-
|
6058
|
-
|
6059
|
-
'theme generator',
|
6060
|
-
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
6061
|
-
);
|
6062
|
-
return acc;
|
6063
|
-
}
|
6050
|
+
get defaultValue() {
|
6051
|
+
return this.getAttribute('default-value');
|
6052
|
+
}
|
6064
6053
|
|
6065
|
-
|
6066
|
-
|
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();
|
6060
|
+
}
|
6061
|
+
});
|
6062
|
+
}
|
6067
6063
|
|
6068
|
-
|
6064
|
+
onSizeChange() {
|
6065
|
+
this.items.forEach((item) => {
|
6066
|
+
item.setAttribute('size', this.size);
|
6067
|
+
});
|
6068
|
+
}
|
6069
6069
|
|
6070
|
-
|
6070
|
+
getValidity() {
|
6071
|
+
if (this.isRequired && !this.value) {
|
6072
|
+
return { valueMissing: true };
|
6073
|
+
}
|
6074
|
+
|
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 {
|
6071
6420
|
[componentName]: {
|
6072
6421
|
[themeName]: {
|
6073
6422
|
[selector]: {
|
@@ -6302,41 +6651,38 @@ const globals = {
|
|
6302
6651
|
shadow,
|
6303
6652
|
fonts,
|
6304
6653
|
};
|
6305
|
-
const vars$
|
6654
|
+
const vars$r = getThemeVars(globals);
|
6306
6655
|
|
6307
|
-
const globalRefs$
|
6656
|
+
const globalRefs$d = getThemeRefs(globals);
|
6308
6657
|
const compVars$3 = ButtonClass.cssVarList;
|
6309
6658
|
|
6310
6659
|
const mode = {
|
6311
|
-
primary: globalRefs$
|
6312
|
-
secondary: globalRefs$
|
6313
|
-
success: globalRefs$
|
6314
|
-
error: globalRefs$
|
6315
|
-
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,
|
6316
6665
|
};
|
6317
6666
|
|
6318
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
6319
|
-
|
6320
|
-
const verticalPaddingRatio = 3;
|
6321
|
-
const horizontalPaddingRatio = 2;
|
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',
|
6676
|
+
[compVars$3.hostWidth]: 'auto',
|
6330
6677
|
|
6331
|
-
[compVars$3.borderRadius]: globalRefs$
|
6332
|
-
[compVars$3.borderWidth]: globalRefs$
|
6678
|
+
[compVars$3.borderRadius]: globalRefs$d.radius.sm,
|
6679
|
+
[compVars$3.borderWidth]: globalRefs$d.border.xs,
|
6333
6680
|
[compVars$3.borderStyle]: 'solid',
|
6334
6681
|
[compVars$3.borderColor]: 'transparent',
|
6335
6682
|
|
6336
6683
|
[compVars$3.labelSpacing]: '0.25em',
|
6337
6684
|
|
6338
|
-
[compVars$3.verticalPadding]:
|
6339
|
-
[compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
|
6685
|
+
[compVars$3.verticalPadding]: '1em',
|
6340
6686
|
|
6341
6687
|
[compVars$3.outlineWidth]: globals.border.sm,
|
6342
6688
|
[compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
|
@@ -6350,6 +6696,12 @@ const button = {
|
|
6350
6696
|
lg: { [compVars$3.fontSize]: '18px' },
|
6351
6697
|
},
|
6352
6698
|
|
6699
|
+
_square: {
|
6700
|
+
[compVars$3.hostHeight]: '3em',
|
6701
|
+
[compVars$3.hostWidth]: '3em',
|
6702
|
+
[compVars$3.verticalPadding]: '0',
|
6703
|
+
},
|
6704
|
+
|
6353
6705
|
_fullWidth: {
|
6354
6706
|
[compVars$3.hostWidth]: '100%',
|
6355
6707
|
},
|
@@ -6398,11 +6750,11 @@ const button = {
|
|
6398
6750
|
},
|
6399
6751
|
|
6400
6752
|
_focused: {
|
6401
|
-
[compVars$3.outlineColor]: globalRefs$
|
6753
|
+
[compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
|
6402
6754
|
},
|
6403
6755
|
};
|
6404
6756
|
|
6405
|
-
const vars$
|
6757
|
+
const vars$q = {
|
6406
6758
|
...compVars$3,
|
6407
6759
|
...helperVars$3,
|
6408
6760
|
};
|
@@ -6410,25 +6762,25 @@ const vars$o = {
|
|
6410
6762
|
var button$1 = /*#__PURE__*/Object.freeze({
|
6411
6763
|
__proto__: null,
|
6412
6764
|
default: button,
|
6413
|
-
vars: vars$
|
6765
|
+
vars: vars$q
|
6414
6766
|
});
|
6415
6767
|
|
6416
6768
|
const componentName = getComponentName('input-wrapper');
|
6417
|
-
const globalRefs$
|
6769
|
+
const globalRefs$c = getThemeRefs(globals);
|
6418
6770
|
|
6419
|
-
const [theme$1, refs, vars$
|
6771
|
+
const [theme$1, refs, vars$p] = createHelperVars(
|
6420
6772
|
{
|
6421
|
-
labelTextColor: globalRefs$
|
6422
|
-
valueTextColor: globalRefs$
|
6423
|
-
placeholderTextColor: globalRefs$
|
6773
|
+
labelTextColor: globalRefs$c.colors.surface.contrast,
|
6774
|
+
valueTextColor: globalRefs$c.colors.surface.contrast,
|
6775
|
+
placeholderTextColor: globalRefs$c.colors.surface.main,
|
6424
6776
|
requiredIndicator: "'*'",
|
6425
|
-
errorMessageTextColor: globalRefs$
|
6777
|
+
errorMessageTextColor: globalRefs$c.colors.error.main,
|
6426
6778
|
|
6427
|
-
borderWidth: globalRefs$
|
6428
|
-
borderRadius: globalRefs$
|
6779
|
+
borderWidth: globalRefs$c.border.xs,
|
6780
|
+
borderRadius: globalRefs$c.radius.xs,
|
6429
6781
|
borderColor: 'transparent',
|
6430
6782
|
|
6431
|
-
outlineWidth: globalRefs$
|
6783
|
+
outlineWidth: globalRefs$c.border.sm,
|
6432
6784
|
outlineStyle: 'solid',
|
6433
6785
|
outlineColor: 'transparent',
|
6434
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
|
@@ -6439,9 +6791,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
6439
6791
|
horizontalPadding: '0.5em',
|
6440
6792
|
verticalPadding: '0.5em',
|
6441
6793
|
|
6442
|
-
backgroundColor: globalRefs$
|
6794
|
+
backgroundColor: globalRefs$c.colors.surface.light,
|
6443
6795
|
|
6444
|
-
fontFamily: globalRefs$
|
6796
|
+
fontFamily: globalRefs$c.fonts.font1.family,
|
6445
6797
|
|
6446
6798
|
size: {
|
6447
6799
|
xs: { fontSize: '12px' },
|
@@ -6455,27 +6807,27 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
6455
6807
|
},
|
6456
6808
|
|
6457
6809
|
_focused: {
|
6458
|
-
outlineColor: globalRefs$
|
6810
|
+
outlineColor: globalRefs$c.colors.surface.main,
|
6459
6811
|
_invalid: {
|
6460
|
-
outlineColor: globalRefs$
|
6812
|
+
outlineColor: globalRefs$c.colors.error.main,
|
6461
6813
|
},
|
6462
6814
|
},
|
6463
6815
|
|
6464
6816
|
_bordered: {
|
6465
|
-
outlineWidth: globalRefs$
|
6466
|
-
borderColor: globalRefs$
|
6817
|
+
outlineWidth: globalRefs$c.border.xs,
|
6818
|
+
borderColor: globalRefs$c.colors.surface.main,
|
6467
6819
|
borderStyle: 'solid',
|
6468
6820
|
_invalid: {
|
6469
|
-
borderColor: globalRefs$
|
6821
|
+
borderColor: globalRefs$c.colors.error.main,
|
6470
6822
|
},
|
6471
6823
|
},
|
6472
6824
|
|
6473
6825
|
_disabled: {
|
6474
|
-
labelTextColor: globalRefs$
|
6475
|
-
borderColor: globalRefs$
|
6476
|
-
valueTextColor: globalRefs$
|
6477
|
-
placeholderTextColor: globalRefs$
|
6478
|
-
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,
|
6479
6831
|
},
|
6480
6832
|
},
|
6481
6833
|
componentName
|
@@ -6485,18 +6837,82 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
6485
6837
|
__proto__: null,
|
6486
6838
|
default: theme$1,
|
6487
6839
|
refs: refs,
|
6488
|
-
vars: vars$
|
6840
|
+
vars: vars$p
|
6489
6841
|
});
|
6490
6842
|
|
6491
|
-
const vars$
|
6843
|
+
const vars$o = TextFieldClass.cssVarList;
|
6492
6844
|
|
6493
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 = {
|
6494
6911
|
[vars$m.hostWidth]: refs.width,
|
6495
6912
|
[vars$m.hostMinWidth]: refs.minWidth,
|
6496
6913
|
[vars$m.fontSize]: refs.fontSize,
|
6497
6914
|
[vars$m.fontFamily]: refs.fontFamily,
|
6498
6915
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
6499
|
-
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
6500
6916
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
6501
6917
|
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
6502
6918
|
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
@@ -6509,32 +6925,29 @@ const textField = {
|
|
6509
6925
|
[vars$m.inputOutlineColor]: refs.outlineColor,
|
6510
6926
|
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
6511
6927
|
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
6512
|
-
[vars$m.
|
6928
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
6513
6929
|
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
6930
|
+
[vars$m.inputHeight]: refs.inputHeight,
|
6514
6931
|
};
|
6515
6932
|
|
6516
|
-
var
|
6933
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
6517
6934
|
__proto__: null,
|
6518
|
-
default:
|
6519
|
-
textField: textField,
|
6935
|
+
default: numberField,
|
6520
6936
|
vars: vars$m
|
6521
6937
|
});
|
6522
6938
|
|
6523
|
-
const
|
6524
|
-
const vars$l = PasswordClass.cssVarList;
|
6939
|
+
const vars$l = EmailFieldClass.cssVarList;
|
6525
6940
|
|
6526
|
-
const
|
6941
|
+
const emailField = {
|
6527
6942
|
[vars$l.hostWidth]: refs.width,
|
6943
|
+
[vars$l.hostMinWidth]: refs.minWidth,
|
6528
6944
|
[vars$l.fontSize]: refs.fontSize,
|
6529
6945
|
[vars$l.fontFamily]: refs.fontFamily,
|
6530
6946
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
6531
6947
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
6532
|
-
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6533
|
-
[vars$l.inputHeight]: refs.inputHeight,
|
6534
|
-
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
6535
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6536
6948
|
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
6537
|
-
[vars$l.
|
6949
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6950
|
+
[vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
|
6538
6951
|
[vars$l.inputBorderWidth]: refs.borderWidth,
|
6539
6952
|
[vars$l.inputBorderStyle]: refs.borderStyle,
|
6540
6953
|
[vars$l.inputBorderColor]: refs.borderColor,
|
@@ -6543,227 +6956,166 @@ const password = {
|
|
6543
6956
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
6544
6957
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
6545
6958
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
6546
|
-
[vars$l.
|
6547
|
-
[vars$l.
|
6959
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
6960
|
+
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6961
|
+
[vars$l.inputHeight]: refs.inputHeight,
|
6548
6962
|
};
|
6549
6963
|
|
6550
|
-
var
|
6964
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
6551
6965
|
__proto__: null,
|
6552
|
-
default:
|
6966
|
+
default: emailField,
|
6553
6967
|
vars: vars$l
|
6554
6968
|
});
|
6555
6969
|
|
6556
|
-
const
|
6970
|
+
const globalRefs$a = getThemeRefs(globals);
|
6971
|
+
const vars$k = TextAreaClass.cssVarList;
|
6557
6972
|
|
6558
|
-
const
|
6973
|
+
const textArea = {
|
6559
6974
|
[vars$k.hostWidth]: refs.width,
|
6560
6975
|
[vars$k.hostMinWidth]: refs.minWidth,
|
6561
|
-
[vars$k.fontSize]:
|
6976
|
+
[vars$k.fontSize]: globalRefs$a.typography.body2.size,
|
6562
6977
|
[vars$k.fontFamily]: refs.fontFamily,
|
6563
6978
|
[vars$k.labelTextColor]: refs.labelTextColor,
|
6979
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
6564
6980
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
6981
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
6565
6982
|
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
6566
|
-
[vars$k.
|
6983
|
+
[vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6984
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
6567
6985
|
[vars$k.inputBorderWidth]: refs.borderWidth,
|
6568
6986
|
[vars$k.inputBorderStyle]: refs.borderStyle,
|
6569
6987
|
[vars$k.inputBorderColor]: refs.borderColor,
|
6570
|
-
[vars$k.inputBorderRadius]: refs.borderRadius,
|
6571
6988
|
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
6572
6989
|
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
6573
6990
|
[vars$k.inputOutlineColor]: refs.outlineColor,
|
6574
6991
|
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
6575
|
-
[vars$k.
|
6576
|
-
[vars$k.
|
6577
|
-
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
6578
|
-
[vars$k.inputHeight]: refs.inputHeight,
|
6579
|
-
};
|
6580
|
-
|
6581
|
-
var numberField$1 = /*#__PURE__*/Object.freeze({
|
6582
|
-
__proto__: null,
|
6583
|
-
default: numberField,
|
6584
|
-
vars: vars$k
|
6585
|
-
});
|
6586
|
-
|
6587
|
-
const vars$j = EmailFieldClass.cssVarList;
|
6588
|
-
|
6589
|
-
const emailField = {
|
6590
|
-
[vars$j.hostWidth]: refs.width,
|
6591
|
-
[vars$j.hostMinWidth]: refs.minWidth,
|
6592
|
-
[vars$j.fontSize]: refs.fontSize,
|
6593
|
-
[vars$j.fontFamily]: refs.fontFamily,
|
6594
|
-
[vars$j.labelTextColor]: refs.labelTextColor,
|
6595
|
-
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
6596
|
-
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
6597
|
-
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
6598
|
-
[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
|
6599
|
-
[vars$j.inputBorderWidth]: refs.borderWidth,
|
6600
|
-
[vars$j.inputBorderStyle]: refs.borderStyle,
|
6601
|
-
[vars$j.inputBorderColor]: refs.borderColor,
|
6602
|
-
[vars$j.inputBorderRadius]: refs.borderRadius,
|
6603
|
-
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
6604
|
-
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
6605
|
-
[vars$j.inputOutlineColor]: refs.outlineColor,
|
6606
|
-
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
6607
|
-
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
6608
|
-
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
6609
|
-
[vars$j.inputHeight]: refs.inputHeight,
|
6610
|
-
};
|
6611
|
-
|
6612
|
-
var emailField$1 = /*#__PURE__*/Object.freeze({
|
6613
|
-
__proto__: null,
|
6614
|
-
default: emailField,
|
6615
|
-
vars: vars$j
|
6616
|
-
});
|
6617
|
-
|
6618
|
-
const globalRefs$8 = getThemeRefs(globals);
|
6619
|
-
const vars$i = TextAreaClass.cssVarList;
|
6620
|
-
|
6621
|
-
const textArea = {
|
6622
|
-
[vars$i.hostWidth]: refs.width,
|
6623
|
-
[vars$i.hostMinWidth]: refs.minWidth,
|
6624
|
-
[vars$i.fontSize]: globalRefs$8.typography.body2.size,
|
6625
|
-
[vars$i.fontFamily]: refs.fontFamily,
|
6626
|
-
[vars$i.labelTextColor]: refs.labelTextColor,
|
6627
|
-
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
6628
|
-
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
6629
|
-
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
6630
|
-
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
6631
|
-
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6632
|
-
[vars$i.inputBorderRadius]: refs.borderRadius,
|
6633
|
-
[vars$i.inputBorderWidth]: refs.borderWidth,
|
6634
|
-
[vars$i.inputBorderStyle]: refs.borderStyle,
|
6635
|
-
[vars$i.inputBorderColor]: refs.borderColor,
|
6636
|
-
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
6637
|
-
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
6638
|
-
[vars$i.inputOutlineColor]: refs.outlineColor,
|
6639
|
-
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
6640
|
-
[vars$i.inputResizeType]: 'vertical',
|
6641
|
-
[vars$i.inputMinHeight]: '5em',
|
6992
|
+
[vars$k.inputResizeType]: 'vertical',
|
6993
|
+
[vars$k.inputMinHeight]: '5em',
|
6642
6994
|
|
6643
6995
|
_disabled: {
|
6644
|
-
[vars$
|
6996
|
+
[vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
6645
6997
|
},
|
6646
6998
|
|
6647
6999
|
_readonly: {
|
6648
|
-
[vars$
|
7000
|
+
[vars$k.inputResizeType]: 'none',
|
6649
7001
|
},
|
6650
7002
|
};
|
6651
7003
|
|
6652
7004
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
6653
7005
|
__proto__: null,
|
6654
7006
|
default: textArea,
|
6655
|
-
vars: vars$
|
7007
|
+
vars: vars$k
|
6656
7008
|
});
|
6657
7009
|
|
6658
|
-
const vars$
|
7010
|
+
const vars$j = CheckboxClass.cssVarList;
|
6659
7011
|
|
6660
7012
|
const checkbox = {
|
6661
|
-
[vars$
|
6662
|
-
[vars$
|
6663
|
-
[vars$
|
6664
|
-
[vars$
|
6665
|
-
[vars$
|
6666
|
-
[vars$
|
6667
|
-
[vars$
|
6668
|
-
[vars$
|
6669
|
-
[vars$
|
6670
|
-
[vars$
|
6671
|
-
[vars$
|
6672
|
-
[vars$
|
6673
|
-
[vars$
|
6674
|
-
[vars$
|
6675
|
-
[vars$
|
6676
|
-
[vars$
|
6677
|
-
[vars$
|
6678
|
-
[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',
|
6679
7031
|
|
6680
7032
|
_checked: {
|
6681
|
-
[vars$
|
6682
|
-
[vars$
|
7033
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
7034
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
6683
7035
|
},
|
6684
7036
|
|
6685
7037
|
_disabled: {
|
6686
|
-
[vars$
|
7038
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
6687
7039
|
},
|
6688
7040
|
};
|
6689
7041
|
|
6690
7042
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
6691
7043
|
__proto__: null,
|
6692
7044
|
default: checkbox,
|
6693
|
-
vars: vars$
|
7045
|
+
vars: vars$j
|
6694
7046
|
});
|
6695
7047
|
|
6696
7048
|
const knobMargin = '2px';
|
6697
7049
|
const checkboxHeight = '1.25em';
|
6698
7050
|
|
6699
|
-
const globalRefs$
|
6700
|
-
const vars$
|
7051
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7052
|
+
const vars$i = SwitchToggleClass.cssVarList;
|
6701
7053
|
|
6702
7054
|
const switchToggle = {
|
6703
|
-
[vars$
|
6704
|
-
[vars$
|
6705
|
-
|
6706
|
-
[vars$
|
6707
|
-
[vars$
|
6708
|
-
[vars$
|
6709
|
-
[vars$
|
6710
|
-
|
6711
|
-
[vars$
|
6712
|
-
[vars$
|
6713
|
-
[vars$
|
6714
|
-
[vars$
|
6715
|
-
[vars$
|
6716
|
-
[vars$
|
6717
|
-
[vars$
|
6718
|
-
|
6719
|
-
[vars$
|
6720
|
-
[vars$
|
6721
|
-
[vars$
|
6722
|
-
[vars$
|
6723
|
-
[vars$
|
6724
|
-
[vars$
|
6725
|
-
|
6726
|
-
[vars$
|
6727
|
-
[vars$
|
6728
|
-
[vars$
|
6729
|
-
[vars$
|
6730
|
-
[vars$
|
6731
|
-
[vars$
|
6732
|
-
|
6733
|
-
[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,
|
6734
7086
|
|
6735
7087
|
_checked: {
|
6736
|
-
[vars$
|
6737
|
-
[vars$
|
6738
|
-
[vars$
|
6739
|
-
[vars$
|
6740
|
-
[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,
|
6741
7093
|
},
|
6742
7094
|
|
6743
7095
|
_disabled: {
|
6744
|
-
[vars$
|
6745
|
-
[vars$
|
6746
|
-
[vars$
|
6747
|
-
[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,
|
6748
7100
|
_checked: {
|
6749
|
-
[vars$
|
6750
|
-
[vars$
|
7101
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
7102
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
6751
7103
|
},
|
6752
7104
|
},
|
6753
7105
|
|
6754
7106
|
_invalid: {
|
6755
|
-
[vars$
|
6756
|
-
[vars$
|
7107
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
|
7108
|
+
[vars$i.knobColor]: globalRefs$9.colors.error.main,
|
6757
7109
|
},
|
6758
7110
|
};
|
6759
7111
|
|
6760
7112
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
6761
7113
|
__proto__: null,
|
6762
7114
|
default: switchToggle,
|
6763
|
-
vars: vars$
|
7115
|
+
vars: vars$i
|
6764
7116
|
});
|
6765
7117
|
|
6766
|
-
const globalRefs$
|
7118
|
+
const globalRefs$8 = getThemeRefs(globals);
|
6767
7119
|
|
6768
7120
|
const compVars$2 = ContainerClass.cssVarList;
|
6769
7121
|
|
@@ -6785,7 +7137,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
6785
7137
|
horizontalAlignment,
|
6786
7138
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
6787
7139
|
},
|
6788
|
-
componentName$
|
7140
|
+
componentName$q
|
6789
7141
|
);
|
6790
7142
|
|
6791
7143
|
const { shadowColor } = helperRefs$2;
|
@@ -6795,8 +7147,8 @@ const container = {
|
|
6795
7147
|
|
6796
7148
|
[compVars$2.hostWidth]: '100%',
|
6797
7149
|
[compVars$2.boxShadow]: 'none',
|
6798
|
-
[compVars$2.backgroundColor]: globalRefs$
|
6799
|
-
[compVars$2.color]: globalRefs$
|
7150
|
+
[compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
|
7151
|
+
[compVars$2.color]: globalRefs$8.colors.surface.contrast,
|
6800
7152
|
|
6801
7153
|
verticalPadding: {
|
6802
7154
|
sm: { [compVars$2.verticalPadding]: '5px' },
|
@@ -6842,34 +7194,34 @@ const container = {
|
|
6842
7194
|
|
6843
7195
|
shadow: {
|
6844
7196
|
sm: {
|
6845
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7197
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
6846
7198
|
},
|
6847
7199
|
md: {
|
6848
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7200
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
6849
7201
|
},
|
6850
7202
|
lg: {
|
6851
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7203
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
6852
7204
|
},
|
6853
7205
|
xl: {
|
6854
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7206
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
|
6855
7207
|
},
|
6856
7208
|
'2xl': {
|
6857
7209
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
6858
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
7210
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
|
6859
7211
|
},
|
6860
7212
|
},
|
6861
7213
|
|
6862
7214
|
borderRadius: {
|
6863
|
-
sm: { [compVars$2.borderRadius]: globalRefs$
|
6864
|
-
md: { [compVars$2.borderRadius]: globalRefs$
|
6865
|
-
lg: { [compVars$2.borderRadius]: globalRefs$
|
6866
|
-
xl: { [compVars$2.borderRadius]: globalRefs$
|
6867
|
-
'2xl': { [compVars$2.borderRadius]: globalRefs$
|
6868
|
-
'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'] },
|
6869
7221
|
},
|
6870
7222
|
};
|
6871
7223
|
|
6872
|
-
const vars$
|
7224
|
+
const vars$h = {
|
6873
7225
|
...compVars$2,
|
6874
7226
|
...helperVars$2,
|
6875
7227
|
};
|
@@ -6877,152 +7229,152 @@ const vars$f = {
|
|
6877
7229
|
var container$1 = /*#__PURE__*/Object.freeze({
|
6878
7230
|
__proto__: null,
|
6879
7231
|
default: container,
|
6880
|
-
vars: vars$
|
7232
|
+
vars: vars$h
|
6881
7233
|
});
|
6882
7234
|
|
6883
|
-
const vars$
|
7235
|
+
const vars$g = LogoClass.cssVarList;
|
6884
7236
|
|
6885
7237
|
const logo$1 = {
|
6886
|
-
[vars$
|
7238
|
+
[vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
6887
7239
|
};
|
6888
7240
|
|
6889
7241
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
6890
7242
|
__proto__: null,
|
6891
7243
|
default: logo$1,
|
6892
|
-
vars: vars$
|
7244
|
+
vars: vars$g
|
6893
7245
|
});
|
6894
7246
|
|
6895
|
-
const vars$
|
7247
|
+
const vars$f = TotpImageClass.cssVarList;
|
6896
7248
|
|
6897
7249
|
const logo = {
|
6898
|
-
[vars$
|
7250
|
+
[vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
6899
7251
|
};
|
6900
7252
|
|
6901
7253
|
var totpImage = /*#__PURE__*/Object.freeze({
|
6902
7254
|
__proto__: null,
|
6903
7255
|
default: logo,
|
6904
|
-
vars: vars$
|
7256
|
+
vars: vars$f
|
6905
7257
|
});
|
6906
7258
|
|
6907
|
-
const globalRefs$
|
6908
|
-
const vars$
|
7259
|
+
const globalRefs$7 = getThemeRefs(globals);
|
7260
|
+
const vars$e = TextClass.cssVarList;
|
6909
7261
|
|
6910
7262
|
const text = {
|
6911
|
-
[vars$
|
6912
|
-
[vars$
|
6913
|
-
[vars$
|
7263
|
+
[vars$e.textLineHeight]: '1em',
|
7264
|
+
[vars$e.textAlign]: 'left',
|
7265
|
+
[vars$e.textColor]: globalRefs$7.colors.surface.dark,
|
6914
7266
|
variant: {
|
6915
7267
|
h1: {
|
6916
|
-
[vars$
|
6917
|
-
[vars$
|
6918
|
-
[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,
|
6919
7271
|
},
|
6920
7272
|
h2: {
|
6921
|
-
[vars$
|
6922
|
-
[vars$
|
6923
|
-
[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,
|
6924
7276
|
},
|
6925
7277
|
h3: {
|
6926
|
-
[vars$
|
6927
|
-
[vars$
|
6928
|
-
[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,
|
6929
7281
|
},
|
6930
7282
|
subtitle1: {
|
6931
|
-
[vars$
|
6932
|
-
[vars$
|
6933
|
-
[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,
|
6934
7286
|
},
|
6935
7287
|
subtitle2: {
|
6936
|
-
[vars$
|
6937
|
-
[vars$
|
6938
|
-
[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,
|
6939
7291
|
},
|
6940
7292
|
body1: {
|
6941
|
-
[vars$
|
6942
|
-
[vars$
|
6943
|
-
[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,
|
6944
7296
|
},
|
6945
7297
|
body2: {
|
6946
|
-
[vars$
|
6947
|
-
[vars$
|
6948
|
-
[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,
|
6949
7301
|
},
|
6950
7302
|
},
|
6951
7303
|
|
6952
7304
|
mode: {
|
6953
7305
|
primary: {
|
6954
|
-
[vars$
|
7306
|
+
[vars$e.textColor]: globalRefs$7.colors.primary.main,
|
6955
7307
|
},
|
6956
7308
|
secondary: {
|
6957
|
-
[vars$
|
7309
|
+
[vars$e.textColor]: globalRefs$7.colors.secondary.main,
|
6958
7310
|
},
|
6959
7311
|
error: {
|
6960
|
-
[vars$
|
7312
|
+
[vars$e.textColor]: globalRefs$7.colors.error.main,
|
6961
7313
|
},
|
6962
7314
|
success: {
|
6963
|
-
[vars$
|
7315
|
+
[vars$e.textColor]: globalRefs$7.colors.success.main,
|
6964
7316
|
},
|
6965
7317
|
},
|
6966
7318
|
|
6967
7319
|
textAlign: {
|
6968
|
-
right: { [vars$
|
6969
|
-
left: { [vars$
|
6970
|
-
center: { [vars$
|
7320
|
+
right: { [vars$e.textAlign]: 'right' },
|
7321
|
+
left: { [vars$e.textAlign]: 'left' },
|
7322
|
+
center: { [vars$e.textAlign]: 'center' },
|
6971
7323
|
},
|
6972
7324
|
|
6973
7325
|
_fullWidth: {
|
6974
|
-
[vars$
|
7326
|
+
[vars$e.hostWidth]: '100%',
|
6975
7327
|
},
|
6976
7328
|
|
6977
7329
|
_italic: {
|
6978
|
-
[vars$
|
7330
|
+
[vars$e.fontStyle]: 'italic',
|
6979
7331
|
},
|
6980
7332
|
|
6981
7333
|
_uppercase: {
|
6982
|
-
[vars$
|
7334
|
+
[vars$e.textTransform]: 'uppercase',
|
6983
7335
|
},
|
6984
7336
|
|
6985
7337
|
_lowercase: {
|
6986
|
-
[vars$
|
7338
|
+
[vars$e.textTransform]: 'lowercase',
|
6987
7339
|
},
|
6988
7340
|
};
|
6989
7341
|
|
6990
7342
|
var text$1 = /*#__PURE__*/Object.freeze({
|
6991
7343
|
__proto__: null,
|
6992
7344
|
default: text,
|
6993
|
-
vars: vars$
|
7345
|
+
vars: vars$e
|
6994
7346
|
});
|
6995
7347
|
|
6996
|
-
const globalRefs$
|
6997
|
-
const vars$
|
7348
|
+
const globalRefs$6 = getThemeRefs(globals);
|
7349
|
+
const vars$d = LinkClass.cssVarList;
|
6998
7350
|
|
6999
7351
|
const link = {
|
7000
|
-
[vars$
|
7352
|
+
[vars$d.cursor]: 'pointer',
|
7001
7353
|
|
7002
|
-
[vars$
|
7354
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
7003
7355
|
|
7004
7356
|
textAlign: {
|
7005
|
-
right: { [vars$
|
7006
|
-
left: { [vars$
|
7007
|
-
center: { [vars$
|
7357
|
+
right: { [vars$d.textAlign]: 'right' },
|
7358
|
+
left: { [vars$d.textAlign]: 'left' },
|
7359
|
+
center: { [vars$d.textAlign]: 'center' },
|
7008
7360
|
},
|
7009
7361
|
|
7010
7362
|
_fullWidth: {
|
7011
|
-
[vars$
|
7363
|
+
[vars$d.hostWidth]: '100%',
|
7012
7364
|
},
|
7013
7365
|
|
7014
7366
|
mode: {
|
7015
7367
|
primary: {
|
7016
|
-
[vars$
|
7368
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
7017
7369
|
},
|
7018
7370
|
secondary: {
|
7019
|
-
[vars$
|
7371
|
+
[vars$d.textColor]: globalRefs$6.colors.secondary.main,
|
7020
7372
|
},
|
7021
7373
|
error: {
|
7022
|
-
[vars$
|
7374
|
+
[vars$d.textColor]: globalRefs$6.colors.error.main,
|
7023
7375
|
},
|
7024
7376
|
success: {
|
7025
|
-
[vars$
|
7377
|
+
[vars$d.textColor]: globalRefs$6.colors.success.main,
|
7026
7378
|
},
|
7027
7379
|
},
|
7028
7380
|
};
|
@@ -7030,10 +7382,10 @@ const link = {
|
|
7030
7382
|
var link$1 = /*#__PURE__*/Object.freeze({
|
7031
7383
|
__proto__: null,
|
7032
7384
|
default: link,
|
7033
|
-
vars: vars$
|
7385
|
+
vars: vars$d
|
7034
7386
|
});
|
7035
7387
|
|
7036
|
-
const globalRefs$
|
7388
|
+
const globalRefs$5 = getThemeRefs(globals);
|
7037
7389
|
const compVars$1 = DividerClass.cssVarList;
|
7038
7390
|
|
7039
7391
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -7041,7 +7393,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
7041
7393
|
thickness: '2px',
|
7042
7394
|
spacing: '10px',
|
7043
7395
|
},
|
7044
|
-
componentName$
|
7396
|
+
componentName$p
|
7045
7397
|
);
|
7046
7398
|
|
7047
7399
|
const divider = {
|
@@ -7051,7 +7403,7 @@ const divider = {
|
|
7051
7403
|
[compVars$1.flexDirection]: 'row',
|
7052
7404
|
[compVars$1.alignSelf]: 'stretch',
|
7053
7405
|
[compVars$1.hostWidth]: '100%',
|
7054
|
-
[compVars$1.stripeColor]: globalRefs$
|
7406
|
+
[compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
|
7055
7407
|
[compVars$1.stripeColorOpacity]: '0.5',
|
7056
7408
|
[compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
|
7057
7409
|
[compVars$1.labelTextWidth]: 'fit-content',
|
@@ -7070,7 +7422,7 @@ const divider = {
|
|
7070
7422
|
},
|
7071
7423
|
};
|
7072
7424
|
|
7073
|
-
const vars$
|
7425
|
+
const vars$c = {
|
7074
7426
|
...compVars$1,
|
7075
7427
|
...helperVars$1,
|
7076
7428
|
};
|
@@ -7078,99 +7430,99 @@ const vars$a = {
|
|
7078
7430
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
7079
7431
|
__proto__: null,
|
7080
7432
|
default: divider,
|
7081
|
-
vars: vars$
|
7433
|
+
vars: vars$c
|
7082
7434
|
});
|
7083
7435
|
|
7084
|
-
const vars$
|
7436
|
+
const vars$b = PasscodeClass.cssVarList;
|
7085
7437
|
|
7086
7438
|
const passcode = {
|
7087
|
-
[vars$
|
7088
|
-
[vars$
|
7089
|
-
[vars$
|
7090
|
-
[vars$
|
7091
|
-
[vars$
|
7092
|
-
[vars$
|
7093
|
-
[vars$
|
7094
|
-
[vars$
|
7095
|
-
[vars$
|
7096
|
-
[vars$
|
7097
|
-
[vars$
|
7098
|
-
[vars$
|
7099
|
-
[vars$
|
7100
|
-
[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,
|
7101
7453
|
|
7102
7454
|
_hideCursor: {
|
7103
|
-
[vars$
|
7455
|
+
[vars$b.digitCaretTextColor]: 'transparent',
|
7104
7456
|
},
|
7105
7457
|
};
|
7106
7458
|
|
7107
7459
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
7108
7460
|
__proto__: null,
|
7109
7461
|
default: passcode,
|
7110
|
-
vars: vars$
|
7462
|
+
vars: vars$b
|
7111
7463
|
});
|
7112
7464
|
|
7113
|
-
const globalRefs$
|
7114
|
-
const vars$
|
7465
|
+
const globalRefs$4 = getThemeRefs(globals);
|
7466
|
+
const vars$a = LoaderLinearClass.cssVarList;
|
7115
7467
|
|
7116
7468
|
const loaderLinear = {
|
7117
|
-
[vars$
|
7118
|
-
[vars$
|
7469
|
+
[vars$a.hostDisplay]: 'inline-block',
|
7470
|
+
[vars$a.hostWidth]: '100%',
|
7119
7471
|
|
7120
|
-
[vars$
|
7121
|
-
[vars$
|
7472
|
+
[vars$a.barColor]: globalRefs$4.colors.surface.contrast,
|
7473
|
+
[vars$a.barWidth]: '20%',
|
7122
7474
|
|
7123
|
-
[vars$
|
7124
|
-
[vars$
|
7475
|
+
[vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
7476
|
+
[vars$a.barBorderRadius]: '4px',
|
7125
7477
|
|
7126
|
-
[vars$
|
7127
|
-
[vars$
|
7128
|
-
[vars$
|
7129
|
-
[vars$
|
7478
|
+
[vars$a.animationDuration]: '2s',
|
7479
|
+
[vars$a.animationTimingFunction]: 'linear',
|
7480
|
+
[vars$a.animationIterationCount]: 'infinite',
|
7481
|
+
[vars$a.verticalPadding]: '0.25em',
|
7130
7482
|
|
7131
7483
|
size: {
|
7132
|
-
xs: { [vars$
|
7133
|
-
sm: { [vars$
|
7134
|
-
md: { [vars$
|
7135
|
-
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' },
|
7136
7488
|
},
|
7137
7489
|
|
7138
7490
|
mode: {
|
7139
7491
|
primary: {
|
7140
|
-
[vars$
|
7492
|
+
[vars$a.barColor]: globalRefs$4.colors.primary.main,
|
7141
7493
|
},
|
7142
7494
|
secondary: {
|
7143
|
-
[vars$
|
7495
|
+
[vars$a.barColor]: globalRefs$4.colors.secondary.main,
|
7144
7496
|
},
|
7145
7497
|
},
|
7146
7498
|
|
7147
7499
|
_hidden: {
|
7148
|
-
[vars$
|
7500
|
+
[vars$a.hostDisplay]: 'none',
|
7149
7501
|
},
|
7150
7502
|
};
|
7151
7503
|
|
7152
7504
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
7153
7505
|
__proto__: null,
|
7154
7506
|
default: loaderLinear,
|
7155
|
-
vars: vars$
|
7507
|
+
vars: vars$a
|
7156
7508
|
});
|
7157
7509
|
|
7158
|
-
const globalRefs$
|
7510
|
+
const globalRefs$3 = getThemeRefs(globals);
|
7159
7511
|
const compVars = LoaderRadialClass.cssVarList;
|
7160
7512
|
|
7161
7513
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
7162
7514
|
{
|
7163
|
-
spinnerColor: globalRefs$
|
7515
|
+
spinnerColor: globalRefs$3.colors.surface.contrast,
|
7164
7516
|
mode: {
|
7165
7517
|
primary: {
|
7166
|
-
spinnerColor: globalRefs$
|
7518
|
+
spinnerColor: globalRefs$3.colors.primary.main,
|
7167
7519
|
},
|
7168
7520
|
secondary: {
|
7169
|
-
spinnerColor: globalRefs$
|
7521
|
+
spinnerColor: globalRefs$3.colors.secondary.main,
|
7170
7522
|
},
|
7171
7523
|
},
|
7172
7524
|
},
|
7173
|
-
componentName$
|
7525
|
+
componentName$r
|
7174
7526
|
);
|
7175
7527
|
|
7176
7528
|
const loaderRadial = {
|
@@ -7199,7 +7551,7 @@ const loaderRadial = {
|
|
7199
7551
|
[compVars.hostDisplay]: 'none',
|
7200
7552
|
},
|
7201
7553
|
};
|
7202
|
-
const vars$
|
7554
|
+
const vars$9 = {
|
7203
7555
|
...compVars,
|
7204
7556
|
...helperVars,
|
7205
7557
|
};
|
@@ -7207,43 +7559,43 @@ const vars$7 = {
|
|
7207
7559
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
7208
7560
|
__proto__: null,
|
7209
7561
|
default: loaderRadial,
|
7210
|
-
vars: vars$
|
7562
|
+
vars: vars$9
|
7211
7563
|
});
|
7212
7564
|
|
7213
|
-
const globalRefs = getThemeRefs(globals);
|
7214
|
-
const vars$
|
7565
|
+
const globalRefs$2 = getThemeRefs(globals);
|
7566
|
+
const vars$8 = ComboBoxClass.cssVarList;
|
7215
7567
|
|
7216
7568
|
const comboBox = {
|
7217
|
-
[vars$
|
7218
|
-
[vars$
|
7219
|
-
[vars$
|
7220
|
-
[vars$
|
7221
|
-
[vars$
|
7222
|
-
[vars$
|
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$
|
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,
|
7240
7592
|
|
7241
7593
|
_readonly: {
|
7242
|
-
[vars$
|
7594
|
+
[vars$8.inputDropdownButtonCursor]: 'default',
|
7243
7595
|
},
|
7244
7596
|
|
7245
|
-
[vars$
|
7246
|
-
[vars$
|
7597
|
+
[vars$8.overlay.minHeight]: '400px',
|
7598
|
+
[vars$8.overlay.margin]: '0 auto',
|
7247
7599
|
|
7248
7600
|
// [vars.overlayCursor]: 'pointer',
|
7249
7601
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
@@ -7254,41 +7606,41 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
7254
7606
|
__proto__: null,
|
7255
7607
|
comboBox: comboBox,
|
7256
7608
|
default: comboBox,
|
7257
|
-
vars: vars$
|
7609
|
+
vars: vars$8
|
7258
7610
|
});
|
7259
7611
|
|
7260
|
-
const vars$
|
7612
|
+
const vars$7 = ImageClass.cssVarList;
|
7261
7613
|
|
7262
7614
|
const image = {};
|
7263
7615
|
|
7264
7616
|
var image$1 = /*#__PURE__*/Object.freeze({
|
7265
7617
|
__proto__: null,
|
7266
7618
|
default: image,
|
7267
|
-
vars: vars$
|
7619
|
+
vars: vars$7
|
7268
7620
|
});
|
7269
7621
|
|
7270
|
-
const vars$
|
7622
|
+
const vars$6 = PhoneFieldClass.cssVarList;
|
7271
7623
|
|
7272
7624
|
const phoneField = {
|
7273
|
-
[vars$
|
7274
|
-
[vars$
|
7275
|
-
[vars$
|
7276
|
-
[vars$
|
7277
|
-
[vars$
|
7278
|
-
[vars$
|
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$
|
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',
|
7292
7644
|
|
7293
7645
|
// '@overlay': {
|
7294
7646
|
// overlayItemBackgroundColor: 'red'
|
@@ -7298,127 +7650,173 @@ const phoneField = {
|
|
7298
7650
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7299
7651
|
__proto__: null,
|
7300
7652
|
default: phoneField,
|
7301
|
-
vars: vars$
|
7653
|
+
vars: vars$6
|
7302
7654
|
});
|
7303
7655
|
|
7304
|
-
const vars$
|
7656
|
+
const vars$5 = PhoneFieldInputBoxClass.cssVarList;
|
7305
7657
|
|
7306
7658
|
const phoneInputBoxField = {
|
7307
|
-
[vars$
|
7308
|
-
[vars$
|
7309
|
-
[vars$
|
7310
|
-
[vars$
|
7311
|
-
[vars$
|
7312
|
-
[vars$
|
7313
|
-
[vars$
|
7314
|
-
[vars$
|
7315
|
-
[vars$
|
7316
|
-
[vars$
|
7317
|
-
[vars$
|
7318
|
-
[vars$
|
7319
|
-
[vars$
|
7320
|
-
[vars$
|
7321
|
-
[vars$
|
7322
|
-
[vars$
|
7323
|
-
[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,
|
7324
7676
|
_fullWidth: {
|
7325
|
-
[vars$
|
7677
|
+
[vars$5.hostWidth]: refs.width,
|
7326
7678
|
},
|
7327
7679
|
};
|
7328
7680
|
|
7329
7681
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7330
7682
|
__proto__: null,
|
7331
7683
|
default: phoneInputBoxField,
|
7332
|
-
vars: vars$
|
7684
|
+
vars: vars$5
|
7333
7685
|
});
|
7334
7686
|
|
7335
|
-
const vars$
|
7687
|
+
const vars$4 = NewPasswordClass.cssVarList;
|
7336
7688
|
|
7337
7689
|
const newPassword = {
|
7338
|
-
[vars$
|
7339
|
-
[vars$
|
7340
|
-
[vars$
|
7341
|
-
[vars$
|
7342
|
-
[vars$
|
7343
|
-
[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,
|
7344
7696
|
|
7345
7697
|
_required: {
|
7346
7698
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7347
7699
|
// That's why we fake the required indicator on each input.
|
7348
7700
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7349
|
-
[vars$
|
7701
|
+
[vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7350
7702
|
},
|
7351
7703
|
};
|
7352
7704
|
|
7353
7705
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7354
7706
|
__proto__: null,
|
7355
7707
|
default: newPassword,
|
7356
|
-
vars: vars$
|
7708
|
+
vars: vars$4
|
7357
7709
|
});
|
7358
7710
|
|
7359
|
-
const vars$
|
7711
|
+
const vars$3 = UploadFileClass.cssVarList;
|
7360
7712
|
|
7361
7713
|
const uploadFile = {
|
7362
|
-
[vars$
|
7363
|
-
[vars$
|
7714
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
7715
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
7364
7716
|
|
7365
|
-
[vars$
|
7717
|
+
[vars$3.iconSize]: '2em',
|
7366
7718
|
|
7367
|
-
[vars$
|
7368
|
-
[vars$
|
7719
|
+
[vars$3.hostPadding]: '0.75em',
|
7720
|
+
[vars$3.gap]: '0.5em',
|
7369
7721
|
|
7370
|
-
[vars$
|
7371
|
-
[vars$
|
7372
|
-
[vars$
|
7722
|
+
[vars$3.fontSize]: '16px',
|
7723
|
+
[vars$3.titleFontWeight]: '500',
|
7724
|
+
[vars$3.lineHeight]: '1em',
|
7373
7725
|
|
7374
|
-
[vars$
|
7375
|
-
[vars$
|
7376
|
-
[vars$
|
7377
|
-
[vars$
|
7726
|
+
[vars$3.borderWidth]: refs.borderWidth,
|
7727
|
+
[vars$3.borderColor]: refs.borderColor,
|
7728
|
+
[vars$3.borderRadius]: refs.borderRadius,
|
7729
|
+
[vars$3.borderStyle]: 'dashed',
|
7378
7730
|
|
7379
7731
|
_required: {
|
7380
|
-
[vars$
|
7732
|
+
[vars$3.requiredIndicator]: refs.requiredIndicator,
|
7381
7733
|
},
|
7382
7734
|
|
7383
7735
|
size: {
|
7384
7736
|
xs: {
|
7385
|
-
[vars$
|
7386
|
-
[vars$
|
7387
|
-
[vars$
|
7388
|
-
[vars$
|
7389
|
-
[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',
|
7390
7742
|
},
|
7391
7743
|
sm: {
|
7392
|
-
[vars$
|
7393
|
-
[vars$
|
7394
|
-
[vars$
|
7395
|
-
[vars$
|
7396
|
-
[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',
|
7397
7749
|
},
|
7398
7750
|
md: {
|
7399
|
-
[vars$
|
7400
|
-
[vars$
|
7401
|
-
[vars$
|
7402
|
-
[vars$
|
7403
|
-
[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',
|
7404
7756
|
},
|
7405
7757
|
lg: {
|
7406
|
-
[vars$
|
7407
|
-
[vars$
|
7408
|
-
[vars$
|
7409
|
-
[vars$
|
7410
|
-
[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',
|
7411
7763
|
},
|
7412
7764
|
},
|
7413
7765
|
|
7414
7766
|
_fullWidth: {
|
7415
|
-
[vars$
|
7767
|
+
[vars$3.hostWidth]: refs.width,
|
7416
7768
|
},
|
7417
7769
|
};
|
7418
7770
|
|
7419
7771
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7420
7772
|
__proto__: null,
|
7421
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,
|
7422
7820
|
vars: vars$1
|
7423
7821
|
});
|
7424
7822
|
|
@@ -7447,6 +7845,8 @@ const components = {
|
|
7447
7845
|
newPassword: newPassword$1,
|
7448
7846
|
inputWrapper,
|
7449
7847
|
uploadFile: uploadFile$1,
|
7848
|
+
selectItem: selectItem$1,
|
7849
|
+
singleSelect: singleSelect$1,
|
7450
7850
|
};
|
7451
7851
|
|
7452
7852
|
const theme = Object.keys(components).reduce(
|
@@ -7459,7 +7859,7 @@ const vars = Object.keys(components).reduce(
|
|
7459
7859
|
);
|
7460
7860
|
|
7461
7861
|
const defaultTheme = { globals, components: theme };
|
7462
|
-
const themeVars = { globals: vars$
|
7862
|
+
const themeVars = { globals: vars$r, components: vars };
|
7463
7863
|
|
7464
|
-
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 };
|
7465
7865
|
//# sourceMappingURL=index.esm.js.map
|