@descope/web-components-ui 1.0.173 → 1.0.175
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +784 -587
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +989 -630
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/{descope-phone-field-descope-phone-field-internal-index-js.js → 7262.js} +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
- package/dist/umd/{descope-phone-field-index-js.js → phone-fields-descope-phone-field-index-js.js} +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -0
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/PhoneFieldClass.js +8 -7
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/PhoneFieldInternal.js +36 -19
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/index.js +2 -2
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/index.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +173 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +147 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js +5 -0
- package/src/components/phone-fields/descope-phone-input-box-field/index.js +9 -0
- package/src/components/phone-fields/helpers.js +5 -0
- package/src/index.cjs.js +2 -1
- package/src/index.d.ts +2 -1
- package/src/index.js +2 -1
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/phoneField.js +1 -1
- package/src/theme/components/phoneInputBoxField.js +30 -0
- /package/src/components/{descope-phone-field → phone-fields}/CountryCodes.js +0 -0
- /package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/helpers.js +0 -0
package/dist/index.esm.js
CHANGED
@@ -700,7 +700,7 @@ const createProxy = ({
|
|
700
700
|
return ProxyClass;
|
701
701
|
};
|
702
702
|
|
703
|
-
const observedAttributes$
|
703
|
+
const observedAttributes$6 = ['required', 'pattern'];
|
704
704
|
|
705
705
|
const errorAttributes = {
|
706
706
|
valueMissing: 'data-errormessage-value-missing',
|
@@ -711,7 +711,7 @@ const errorAttributes = {
|
|
711
711
|
const inputValidationMixin = (superclass) =>
|
712
712
|
class InputValidationMixinClass extends superclass {
|
713
713
|
static get observedAttributes() {
|
714
|
-
return [...(superclass.observedAttributes || []), ...observedAttributes$
|
714
|
+
return [...(superclass.observedAttributes || []), ...observedAttributes$6];
|
715
715
|
}
|
716
716
|
|
717
717
|
static get formAssociated() {
|
@@ -842,7 +842,7 @@ const inputValidationMixin = (superclass) =>
|
|
842
842
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
843
843
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
844
844
|
|
845
|
-
if (observedAttributes$
|
845
|
+
if (observedAttributes$6.includes(attrName)) {
|
846
846
|
this.#setValidity();
|
847
847
|
}
|
848
848
|
}
|
@@ -1185,7 +1185,7 @@ const clickableMixin = (superclass) =>
|
|
1185
1185
|
}
|
1186
1186
|
};
|
1187
1187
|
|
1188
|
-
const componentName$
|
1188
|
+
const componentName$t = getComponentName('button');
|
1189
1189
|
|
1190
1190
|
const resetStyles = `
|
1191
1191
|
:host {
|
@@ -1223,7 +1223,7 @@ const iconStyles = `
|
|
1223
1223
|
|
1224
1224
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1225
1225
|
|
1226
|
-
const { host: host$
|
1226
|
+
const { host: host$e, label: label$a } = {
|
1227
1227
|
host: { selector: () => ':host' },
|
1228
1228
|
label: { selector: '::part(label)' },
|
1229
1229
|
};
|
@@ -1233,7 +1233,7 @@ let loadingIndicatorStyles;
|
|
1233
1233
|
const ButtonClass = compose(
|
1234
1234
|
createStyleMixin({
|
1235
1235
|
mappings: {
|
1236
|
-
hostWidth: { ...host$
|
1236
|
+
hostWidth: { ...host$e, property: 'width' },
|
1237
1237
|
hostHeight: { property: 'height' },
|
1238
1238
|
fontSize: {},
|
1239
1239
|
fontFamily: {},
|
@@ -1255,8 +1255,8 @@ const ButtonClass = compose(
|
|
1255
1255
|
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
1256
1256
|
|
1257
1257
|
labelTextColor: { property: 'color' },
|
1258
|
-
labelTextDecoration: { ...label$
|
1259
|
-
labelSpacing: { ...label$
|
1258
|
+
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
1259
|
+
labelSpacing: { ...label$a, property: 'gap' },
|
1260
1260
|
},
|
1261
1261
|
}),
|
1262
1262
|
clickableMixin,
|
@@ -1279,7 +1279,7 @@ const ButtonClass = compose(
|
|
1279
1279
|
}
|
1280
1280
|
`,
|
1281
1281
|
excludeAttrsSync: ['tabindex'],
|
1282
|
-
componentName: componentName$
|
1282
|
+
componentName: componentName$t,
|
1283
1283
|
})
|
1284
1284
|
);
|
1285
1285
|
|
@@ -1316,7 +1316,7 @@ loadingIndicatorStyles = `
|
|
1316
1316
|
}
|
1317
1317
|
`;
|
1318
1318
|
|
1319
|
-
customElements.define(componentName$
|
1319
|
+
customElements.define(componentName$t, ButtonClass);
|
1320
1320
|
|
1321
1321
|
const createBaseInputClass = (...args) =>
|
1322
1322
|
compose(
|
@@ -1326,13 +1326,13 @@ const createBaseInputClass = (...args) =>
|
|
1326
1326
|
inputEventsDispatchingMixin
|
1327
1327
|
)(createBaseClass(...args));
|
1328
1328
|
|
1329
|
-
const componentName$
|
1329
|
+
const componentName$s = getComponentName('boolean-field-internal');
|
1330
1330
|
|
1331
1331
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1332
1332
|
|
1333
|
-
const BaseInputClass$
|
1333
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
|
1334
1334
|
|
1335
|
-
class BooleanInputInternal extends BaseInputClass$
|
1335
|
+
class BooleanInputInternal extends BaseInputClass$5 {
|
1336
1336
|
constructor() {
|
1337
1337
|
super();
|
1338
1338
|
this.innerHTML = `
|
@@ -1390,14 +1390,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1390
1390
|
|
1391
1391
|
const template = document.createElement('template');
|
1392
1392
|
template.innerHTML = `
|
1393
|
-
<${componentName$
|
1393
|
+
<${componentName$s}
|
1394
1394
|
tabindex="-1"
|
1395
1395
|
slot="input"
|
1396
|
-
></${componentName$
|
1396
|
+
></${componentName$s}>
|
1397
1397
|
`;
|
1398
1398
|
|
1399
1399
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1400
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1400
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
1401
1401
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1402
1402
|
|
1403
1403
|
forwardAttrs(this, this.inputElement, {
|
@@ -1577,18 +1577,18 @@ vaadin-checkbox::part(checkbox) {
|
|
1577
1577
|
}
|
1578
1578
|
`;
|
1579
1579
|
|
1580
|
-
const componentName$
|
1580
|
+
const componentName$r = getComponentName('checkbox');
|
1581
1581
|
|
1582
1582
|
const {
|
1583
|
-
host: host$
|
1583
|
+
host: host$d,
|
1584
1584
|
component: component$1,
|
1585
1585
|
checkboxElement,
|
1586
1586
|
checkboxSurface,
|
1587
1587
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1588
|
-
label: label$
|
1589
|
-
requiredIndicator: requiredIndicator$
|
1590
|
-
helperText: helperText$
|
1591
|
-
errorMessage: errorMessage$
|
1588
|
+
label: label$9,
|
1589
|
+
requiredIndicator: requiredIndicator$9,
|
1590
|
+
helperText: helperText$8,
|
1591
|
+
errorMessage: errorMessage$9,
|
1592
1592
|
} = {
|
1593
1593
|
host: { selector: () => ':host' },
|
1594
1594
|
label: { selector: '::part(label)' },
|
@@ -1604,25 +1604,25 @@ const {
|
|
1604
1604
|
const CheckboxClass = compose(
|
1605
1605
|
createStyleMixin({
|
1606
1606
|
mappings: {
|
1607
|
-
hostWidth: { ...host$
|
1607
|
+
hostWidth: { ...host$d, property: 'width' },
|
1608
1608
|
|
1609
|
-
fontSize: [host$
|
1610
|
-
fontFamily: [label$
|
1609
|
+
fontSize: [host$d, checkboxElement, label$9, checkboxHiddenLabel$1],
|
1610
|
+
fontFamily: [label$9, checkboxHiddenLabel$1, helperText$8, errorMessage$9],
|
1611
1611
|
|
1612
1612
|
labelTextColor: [
|
1613
|
-
{ ...label$
|
1614
|
-
{ ...requiredIndicator$
|
1615
|
-
{ ...label$
|
1613
|
+
{ ...label$9, property: 'color' },
|
1614
|
+
{ ...requiredIndicator$9, property: 'color' },
|
1615
|
+
{ ...label$9, property: '-webkit-text-fill-color' },
|
1616
1616
|
],
|
1617
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1618
|
-
errorMessageTextColor: { ...errorMessage$
|
1617
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
1618
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
1619
1619
|
|
1620
1620
|
labelFontWeight: [
|
1621
|
-
{ ...label$
|
1621
|
+
{ ...label$9, property: 'font-weight' },
|
1622
1622
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
1623
1623
|
],
|
1624
1624
|
labelSpacing: [
|
1625
|
-
{ ...label$
|
1625
|
+
{ ...label$9, property: 'left' },
|
1626
1626
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
1627
1627
|
],
|
1628
1628
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
@@ -1645,8 +1645,8 @@ const CheckboxClass = compose(
|
|
1645
1645
|
{ ...checkboxSurface, property: 'font-size' },
|
1646
1646
|
{ ...component$1, property: 'font-size' },
|
1647
1647
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
1648
|
-
{ ...label$
|
1649
|
-
{ ...label$
|
1648
|
+
{ ...label$9, property: 'margin-left' },
|
1649
|
+
{ ...label$9, property: 'line-height' },
|
1650
1650
|
],
|
1651
1651
|
},
|
1652
1652
|
}),
|
@@ -1667,26 +1667,26 @@ const CheckboxClass = compose(
|
|
1667
1667
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
1668
1668
|
`,
|
1669
1669
|
excludeAttrsSync: ['tabindex'],
|
1670
|
-
componentName: componentName$
|
1670
|
+
componentName: componentName$r,
|
1671
1671
|
})
|
1672
1672
|
);
|
1673
1673
|
|
1674
|
-
customElements.define(componentName$
|
1674
|
+
customElements.define(componentName$s, BooleanInputInternal);
|
1675
1675
|
|
1676
|
-
customElements.define(componentName$
|
1676
|
+
customElements.define(componentName$r, CheckboxClass);
|
1677
1677
|
|
1678
|
-
const componentName$
|
1678
|
+
const componentName$q = getComponentName('switch-toggle');
|
1679
1679
|
|
1680
1680
|
const {
|
1681
|
-
host: host$
|
1681
|
+
host: host$c,
|
1682
1682
|
component,
|
1683
1683
|
checkboxElement: track,
|
1684
1684
|
checkboxSurface: knob,
|
1685
1685
|
checkboxHiddenLabel,
|
1686
|
-
label: label$
|
1687
|
-
requiredIndicator: requiredIndicator$
|
1688
|
-
helperText: helperText$
|
1689
|
-
errorMessage: errorMessage$
|
1686
|
+
label: label$8,
|
1687
|
+
requiredIndicator: requiredIndicator$8,
|
1688
|
+
helperText: helperText$7,
|
1689
|
+
errorMessage: errorMessage$8,
|
1690
1690
|
} = {
|
1691
1691
|
host: { selector: () => ':host' },
|
1692
1692
|
label: { selector: '::part(label)' },
|
@@ -1702,9 +1702,9 @@ const {
|
|
1702
1702
|
const SwitchToggleClass = compose(
|
1703
1703
|
createStyleMixin({
|
1704
1704
|
mappings: {
|
1705
|
-
hostWidth: { ...host$
|
1706
|
-
fontSize: [component, label$
|
1707
|
-
fontFamily: [label$
|
1705
|
+
hostWidth: { ...host$c, property: 'width' },
|
1706
|
+
fontSize: [component, label$8, checkboxHiddenLabel],
|
1707
|
+
fontFamily: [label$8, helperText$7, errorMessage$8],
|
1708
1708
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1709
1709
|
trackBorderStyle: { ...track, property: 'border-style' },
|
1710
1710
|
trackBorderColor: { ...track, property: 'border-color' },
|
@@ -1728,24 +1728,24 @@ const SwitchToggleClass = compose(
|
|
1728
1728
|
knobLeftOffset: { ...knob, property: 'left' },
|
1729
1729
|
|
1730
1730
|
labelSpacing: [
|
1731
|
-
{ ...label$
|
1731
|
+
{ ...label$8, property: 'padding-left' },
|
1732
1732
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
1733
1733
|
],
|
1734
1734
|
labelLineHeight: [
|
1735
|
-
{ ...label$
|
1735
|
+
{ ...label$8, property: 'line-height' },
|
1736
1736
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
1737
1737
|
],
|
1738
1738
|
labelFontWeight: [
|
1739
|
-
{ ...label$
|
1739
|
+
{ ...label$8, property: 'font-weight' },
|
1740
1740
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
1741
1741
|
],
|
1742
1742
|
labelTextColor: [
|
1743
|
-
{ ...label$
|
1744
|
-
{ ...requiredIndicator$
|
1745
|
-
{ ...label$
|
1743
|
+
{ ...label$8, property: 'color' },
|
1744
|
+
{ ...requiredIndicator$8, property: 'color' },
|
1745
|
+
{ ...label$8, property: '-webkit-text-fill-color' },
|
1746
1746
|
],
|
1747
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
1748
|
-
errorMessageTextColor: { ...errorMessage$
|
1747
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
1748
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
1749
1749
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
1750
1750
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
1751
1751
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
@@ -1778,17 +1778,17 @@ const SwitchToggleClass = compose(
|
|
1778
1778
|
}
|
1779
1779
|
`,
|
1780
1780
|
excludeAttrsSync: ['tabindex'],
|
1781
|
-
componentName: componentName$
|
1781
|
+
componentName: componentName$q,
|
1782
1782
|
})
|
1783
1783
|
);
|
1784
1784
|
|
1785
|
-
customElements.define(componentName$
|
1785
|
+
customElements.define(componentName$q, SwitchToggleClass);
|
1786
1786
|
|
1787
|
-
const componentName$
|
1787
|
+
const componentName$p = getComponentName('loader-linear');
|
1788
1788
|
|
1789
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1789
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
1790
1790
|
static get componentName() {
|
1791
|
-
return componentName$
|
1791
|
+
return componentName$p;
|
1792
1792
|
}
|
1793
1793
|
|
1794
1794
|
constructor() {
|
@@ -1824,18 +1824,18 @@ const selectors$1 = {
|
|
1824
1824
|
host: { selector: () => ':host' },
|
1825
1825
|
};
|
1826
1826
|
|
1827
|
-
const { after: after$1, host: host$
|
1827
|
+
const { after: after$1, host: host$b } = selectors$1;
|
1828
1828
|
|
1829
1829
|
const LoaderLinearClass = compose(
|
1830
1830
|
createStyleMixin({
|
1831
1831
|
mappings: {
|
1832
1832
|
hostDisplay: {},
|
1833
|
-
hostWidth: { ...host$
|
1833
|
+
hostWidth: { ...host$b, property: 'width' },
|
1834
1834
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
1835
1835
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
1836
1836
|
verticalPadding: [
|
1837
|
-
{ ...host$
|
1838
|
-
{ ...host$
|
1837
|
+
{ ...host$b, property: 'padding-top' },
|
1838
|
+
{ ...host$b, property: 'padding-bottom' },
|
1839
1839
|
],
|
1840
1840
|
barBackgroundColor: { property: 'background-color' },
|
1841
1841
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -1849,11 +1849,11 @@ const LoaderLinearClass = compose(
|
|
1849
1849
|
componentNameValidationMixin
|
1850
1850
|
)(RawLoaderLinear);
|
1851
1851
|
|
1852
|
-
customElements.define(componentName$
|
1852
|
+
customElements.define(componentName$p, LoaderLinearClass);
|
1853
1853
|
|
1854
|
-
const componentName$
|
1854
|
+
const componentName$o = getComponentName('loader-radial');
|
1855
1855
|
|
1856
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1856
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
|
1857
1857
|
constructor() {
|
1858
1858
|
super();
|
1859
1859
|
|
@@ -1897,11 +1897,11 @@ const LoaderRadialClass = compose(
|
|
1897
1897
|
componentNameValidationMixin
|
1898
1898
|
)(RawLoaderRadial);
|
1899
1899
|
|
1900
|
-
customElements.define(componentName$
|
1900
|
+
customElements.define(componentName$o, LoaderRadialClass);
|
1901
1901
|
|
1902
|
-
const componentName$
|
1902
|
+
const componentName$n = getComponentName('container');
|
1903
1903
|
|
1904
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1904
|
+
class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
|
1905
1905
|
constructor() {
|
1906
1906
|
super();
|
1907
1907
|
|
@@ -1953,10 +1953,10 @@ const ContainerClass = compose(
|
|
1953
1953
|
componentNameValidationMixin
|
1954
1954
|
)(RawContainer);
|
1955
1955
|
|
1956
|
-
customElements.define(componentName$
|
1956
|
+
customElements.define(componentName$n, ContainerClass);
|
1957
1957
|
|
1958
|
-
const componentName$
|
1959
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1958
|
+
const componentName$m = getComponentName('divider');
|
1959
|
+
class RawDivider extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
|
1960
1960
|
constructor() {
|
1961
1961
|
super();
|
1962
1962
|
|
@@ -2001,7 +2001,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$k, baseS
|
|
2001
2001
|
}
|
2002
2002
|
}
|
2003
2003
|
|
2004
|
-
const { host: host$
|
2004
|
+
const { host: host$a, before, after, text: text$3 } = {
|
2005
2005
|
host: { selector: () => ':host' },
|
2006
2006
|
before: { selector: '::before' },
|
2007
2007
|
after: { selector: '::after' },
|
@@ -2011,8 +2011,8 @@ const { host: host$9, before, after, text: text$3 } = {
|
|
2011
2011
|
const DividerClass = compose(
|
2012
2012
|
createStyleMixin({
|
2013
2013
|
mappings: {
|
2014
|
-
hostWidth: { ...host$
|
2015
|
-
hostPadding: { ...host$
|
2014
|
+
hostWidth: { ...host$a, property: 'width' },
|
2015
|
+
hostPadding: { ...host$a, property: 'padding' },
|
2016
2016
|
|
2017
2017
|
minHeight: {},
|
2018
2018
|
alignItems: {},
|
@@ -2052,9 +2052,9 @@ const DividerClass = compose(
|
|
2052
2052
|
componentNameValidationMixin
|
2053
2053
|
)(RawDivider);
|
2054
2054
|
|
2055
|
-
const componentName$
|
2055
|
+
const componentName$l = getComponentName('text');
|
2056
2056
|
|
2057
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2057
|
+
class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
|
2058
2058
|
constructor() {
|
2059
2059
|
super();
|
2060
2060
|
|
@@ -2096,11 +2096,11 @@ const TextClass = compose(
|
|
2096
2096
|
componentNameValidationMixin
|
2097
2097
|
)(RawText);
|
2098
2098
|
|
2099
|
-
customElements.define(componentName$
|
2099
|
+
customElements.define(componentName$l, TextClass);
|
2100
2100
|
|
2101
|
-
customElements.define(componentName$
|
2101
|
+
customElements.define(componentName$m, DividerClass);
|
2102
2102
|
|
2103
|
-
const { host: host$
|
2103
|
+
const { host: host$9, label: label$7, placeholder: placeholder$2, requiredIndicator: requiredIndicator$7, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$7 } =
|
2104
2104
|
{
|
2105
2105
|
host: { selector: () => ':host' },
|
2106
2106
|
label: { selector: '::part(label)' },
|
@@ -2114,49 +2114,49 @@ const { host: host$8, label: label$6, placeholder: placeholder$2, requiredIndica
|
|
2114
2114
|
|
2115
2115
|
var textFieldMappings = {
|
2116
2116
|
// we apply font-size also on the host so we can set its width with em
|
2117
|
-
fontSize: [{}, host$
|
2118
|
-
fontFamily: [label$
|
2117
|
+
fontSize: [{}, host$9],
|
2118
|
+
fontFamily: [label$7, inputField$5, helperText$6, errorMessage$7],
|
2119
2119
|
|
2120
|
-
hostWidth: { ...host$
|
2121
|
-
hostMinWidth: { ...host$
|
2120
|
+
hostWidth: { ...host$9, property: 'width' },
|
2121
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
2122
2122
|
|
2123
|
-
inputBackgroundColor: { ...inputField$
|
2123
|
+
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
2124
2124
|
|
2125
2125
|
labelTextColor: [
|
2126
|
-
{ ...label$
|
2127
|
-
{ ...requiredIndicator$
|
2126
|
+
{ ...label$7, property: 'color' },
|
2127
|
+
{ ...requiredIndicator$7, property: 'color' },
|
2128
2128
|
],
|
2129
|
-
errorMessageTextColor: { ...errorMessage$
|
2129
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
2130
2130
|
|
2131
|
-
inputValueTextColor: { ...inputField$
|
2131
|
+
inputValueTextColor: { ...inputField$5, property: 'color' },
|
2132
2132
|
inputCaretTextColor: { ...input, property: 'color' },
|
2133
2133
|
|
2134
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2134
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
2135
2135
|
|
2136
|
-
inputBorderColor: { ...inputField$
|
2137
|
-
inputBorderWidth: { ...inputField$
|
2138
|
-
inputBorderStyle: { ...inputField$
|
2139
|
-
inputBorderRadius: { ...inputField$
|
2136
|
+
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
2137
|
+
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
2138
|
+
inputBorderStyle: { ...inputField$5, property: 'border-style' },
|
2139
|
+
inputBorderRadius: { ...inputField$5, property: 'border-radius' },
|
2140
2140
|
|
2141
|
-
inputHeight: { ...inputField$
|
2141
|
+
inputHeight: { ...inputField$5, property: 'height' },
|
2142
2142
|
inputHorizontalPadding: [
|
2143
2143
|
{ ...input, property: 'padding-left' },
|
2144
2144
|
{ ...input, property: 'padding-right' },
|
2145
2145
|
],
|
2146
2146
|
|
2147
|
-
inputOutlineColor: { ...inputField$
|
2148
|
-
inputOutlineStyle: { ...inputField$
|
2149
|
-
inputOutlineWidth: { ...inputField$
|
2150
|
-
inputOutlineOffset: { ...inputField$
|
2147
|
+
inputOutlineColor: { ...inputField$5, property: 'outline-color' },
|
2148
|
+
inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
|
2149
|
+
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
2150
|
+
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
2151
2151
|
|
2152
2152
|
inputTextAlign: { ...input, property: 'text-align' },
|
2153
2153
|
|
2154
2154
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2155
2155
|
};
|
2156
2156
|
|
2157
|
-
const componentName$
|
2157
|
+
const componentName$k = getComponentName('email-field');
|
2158
2158
|
|
2159
|
-
const customMixin$
|
2159
|
+
const customMixin$5 = (superclass) =>
|
2160
2160
|
class EmailFieldMixinClass extends superclass {
|
2161
2161
|
init() {
|
2162
2162
|
super.init?.();
|
@@ -2170,7 +2170,7 @@ const EmailFieldClass = compose(
|
|
2170
2170
|
draggableMixin,
|
2171
2171
|
composedProxyInputMixin,
|
2172
2172
|
componentNameValidationMixin,
|
2173
|
-
customMixin$
|
2173
|
+
customMixin$5
|
2174
2174
|
)(
|
2175
2175
|
createProxy({
|
2176
2176
|
slots: ['suffix'],
|
@@ -2187,15 +2187,15 @@ const EmailFieldClass = compose(
|
|
2187
2187
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2188
2188
|
`,
|
2189
2189
|
excludeAttrsSync: ['tabindex'],
|
2190
|
-
componentName: componentName$
|
2190
|
+
componentName: componentName$k,
|
2191
2191
|
})
|
2192
2192
|
);
|
2193
2193
|
|
2194
|
-
customElements.define(componentName$
|
2194
|
+
customElements.define(componentName$k, EmailFieldClass);
|
2195
2195
|
|
2196
|
-
const componentName$
|
2196
|
+
const componentName$j = getComponentName('link');
|
2197
2197
|
|
2198
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2198
|
+
class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
|
2199
2199
|
constructor() {
|
2200
2200
|
super();
|
2201
2201
|
|
@@ -2241,12 +2241,12 @@ const selectors = {
|
|
2241
2241
|
text: { selector: () => TextClass.componentName },
|
2242
2242
|
};
|
2243
2243
|
|
2244
|
-
const { anchor, text: text$2, host: host$
|
2244
|
+
const { anchor, text: text$2, host: host$8, wrapper: wrapper$1 } = selectors;
|
2245
2245
|
|
2246
2246
|
const LinkClass = compose(
|
2247
2247
|
createStyleMixin({
|
2248
2248
|
mappings: {
|
2249
|
-
hostWidth: { ...host$
|
2249
|
+
hostWidth: { ...host$8, property: 'width' },
|
2250
2250
|
textAlign: wrapper$1,
|
2251
2251
|
textColor: [
|
2252
2252
|
{ ...anchor, property: 'color' },
|
@@ -2259,7 +2259,7 @@ const LinkClass = compose(
|
|
2259
2259
|
componentNameValidationMixin
|
2260
2260
|
)(RawLink);
|
2261
2261
|
|
2262
|
-
customElements.define(componentName$
|
2262
|
+
customElements.define(componentName$j, LinkClass);
|
2263
2263
|
|
2264
2264
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2265
2265
|
let style;
|
@@ -2311,27 +2311,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2311
2311
|
return CssVarImageClass;
|
2312
2312
|
};
|
2313
2313
|
|
2314
|
-
const componentName$
|
2314
|
+
const componentName$i = getComponentName('logo');
|
2315
2315
|
|
2316
2316
|
const LogoClass = createCssVarImageClass({
|
2317
|
-
componentName: componentName$
|
2317
|
+
componentName: componentName$i,
|
2318
2318
|
varName: 'url',
|
2319
2319
|
fallbackVarName: 'fallbackUrl',
|
2320
2320
|
});
|
2321
2321
|
|
2322
|
-
customElements.define(componentName$
|
2322
|
+
customElements.define(componentName$i, LogoClass);
|
2323
2323
|
|
2324
|
-
const componentName$
|
2324
|
+
const componentName$h = getComponentName('totp-image');
|
2325
2325
|
|
2326
2326
|
const TotpImageClass = createCssVarImageClass({
|
2327
|
-
componentName: componentName$
|
2327
|
+
componentName: componentName$h,
|
2328
2328
|
varName: 'url',
|
2329
2329
|
fallbackVarName: 'fallbackUrl',
|
2330
2330
|
});
|
2331
2331
|
|
2332
|
-
customElements.define(componentName$
|
2332
|
+
customElements.define(componentName$h, TotpImageClass);
|
2333
2333
|
|
2334
|
-
const componentName$
|
2334
|
+
const componentName$g = getComponentName('number-field');
|
2335
2335
|
|
2336
2336
|
const NumberFieldClass = compose(
|
2337
2337
|
createStyleMixin({
|
@@ -2356,11 +2356,11 @@ const NumberFieldClass = compose(
|
|
2356
2356
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2357
2357
|
`,
|
2358
2358
|
excludeAttrsSync: ['tabindex'],
|
2359
|
-
componentName: componentName$
|
2359
|
+
componentName: componentName$g,
|
2360
2360
|
})
|
2361
2361
|
);
|
2362
2362
|
|
2363
|
-
customElements.define(componentName$
|
2363
|
+
customElements.define(componentName$g, NumberFieldClass);
|
2364
2364
|
|
2365
2365
|
const focusElement = (ele) => {
|
2366
2366
|
ele?.focus();
|
@@ -2378,21 +2378,21 @@ const getSanitizedCharacters = (str) => {
|
|
2378
2378
|
|
2379
2379
|
/* eslint-disable no-param-reassign */
|
2380
2380
|
|
2381
|
-
const componentName$
|
2381
|
+
const componentName$f = getComponentName('passcode-internal');
|
2382
2382
|
|
2383
|
-
const observedAttributes$
|
2383
|
+
const observedAttributes$5 = ['digits'];
|
2384
2384
|
|
2385
2385
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2386
2386
|
|
2387
|
-
const BaseInputClass$
|
2387
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
|
2388
2388
|
|
2389
|
-
class PasscodeInternal extends BaseInputClass$
|
2389
|
+
class PasscodeInternal extends BaseInputClass$4 {
|
2390
2390
|
static get observedAttributes() {
|
2391
|
-
return observedAttributes$
|
2391
|
+
return observedAttributes$5.concat(BaseInputClass$4.observedAttributes || []);
|
2392
2392
|
}
|
2393
2393
|
|
2394
2394
|
static get componentName() {
|
2395
|
-
return componentName$
|
2395
|
+
return componentName$f;
|
2396
2396
|
}
|
2397
2397
|
|
2398
2398
|
constructor() {
|
@@ -2571,7 +2571,7 @@ class PasscodeInternal extends BaseInputClass$3 {
|
|
2571
2571
|
|
2572
2572
|
// sync attributes to inputs
|
2573
2573
|
if (oldValue !== newValue) {
|
2574
|
-
if (observedAttributes$
|
2574
|
+
if (observedAttributes$5.includes(attrName)) {
|
2575
2575
|
if (attrName === 'digits') {
|
2576
2576
|
this.renderInputs();
|
2577
2577
|
}
|
@@ -2584,11 +2584,11 @@ class PasscodeInternal extends BaseInputClass$3 {
|
|
2584
2584
|
}
|
2585
2585
|
}
|
2586
2586
|
|
2587
|
-
const componentName$
|
2587
|
+
const componentName$e = getComponentName('text-field');
|
2588
2588
|
|
2589
2589
|
const observedAttrs = ['type'];
|
2590
2590
|
|
2591
|
-
const customMixin$
|
2591
|
+
const customMixin$4 = (superclass) =>
|
2592
2592
|
class TextFieldClass extends superclass {
|
2593
2593
|
static get observedAttributes() {
|
2594
2594
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2615,7 +2615,7 @@ const TextFieldClass = compose(
|
|
2615
2615
|
draggableMixin,
|
2616
2616
|
composedProxyInputMixin,
|
2617
2617
|
componentNameValidationMixin,
|
2618
|
-
customMixin$
|
2618
|
+
customMixin$4
|
2619
2619
|
)(
|
2620
2620
|
createProxy({
|
2621
2621
|
slots: ['prefix', 'suffix'],
|
@@ -2632,18 +2632,18 @@ const TextFieldClass = compose(
|
|
2632
2632
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2633
2633
|
`,
|
2634
2634
|
excludeAttrsSync: ['tabindex'],
|
2635
|
-
componentName: componentName$
|
2635
|
+
componentName: componentName$e,
|
2636
2636
|
})
|
2637
2637
|
);
|
2638
2638
|
|
2639
|
-
const componentName$
|
2639
|
+
const componentName$d = getComponentName('passcode');
|
2640
2640
|
|
2641
|
-
const observedAttributes$
|
2641
|
+
const observedAttributes$4 = ['digits'];
|
2642
2642
|
|
2643
|
-
const customMixin$
|
2643
|
+
const customMixin$3 = (superclass) =>
|
2644
2644
|
class PasscodeMixinClass extends superclass {
|
2645
2645
|
static get observedAttributes() {
|
2646
|
-
return observedAttributes$
|
2646
|
+
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
2647
2647
|
}
|
2648
2648
|
|
2649
2649
|
get digits() {
|
@@ -2655,17 +2655,17 @@ const customMixin$2 = (superclass) =>
|
|
2655
2655
|
const template = document.createElement('template');
|
2656
2656
|
|
2657
2657
|
template.innerHTML = `
|
2658
|
-
<${componentName$
|
2658
|
+
<${componentName$f}
|
2659
2659
|
bordered="true"
|
2660
2660
|
name="code"
|
2661
2661
|
tabindex="-1"
|
2662
2662
|
slot="input"
|
2663
|
-
></${componentName$
|
2663
|
+
></${componentName$f}>
|
2664
2664
|
`;
|
2665
2665
|
|
2666
2666
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2667
2667
|
|
2668
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2668
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$f);
|
2669
2669
|
|
2670
2670
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2671
2671
|
}
|
@@ -2680,13 +2680,13 @@ const customMixin$2 = (superclass) =>
|
|
2680
2680
|
};
|
2681
2681
|
|
2682
2682
|
const {
|
2683
|
-
host: host$
|
2683
|
+
host: host$7,
|
2684
2684
|
digitField,
|
2685
|
-
label: label$
|
2686
|
-
requiredIndicator: requiredIndicator$
|
2685
|
+
label: label$6,
|
2686
|
+
requiredIndicator: requiredIndicator$6,
|
2687
2687
|
internalWrapper,
|
2688
2688
|
focusedDigitField,
|
2689
|
-
errorMessage: errorMessage$
|
2689
|
+
errorMessage: errorMessage$6,
|
2690
2690
|
} = {
|
2691
2691
|
host: { selector: () => ':host' },
|
2692
2692
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
@@ -2697,42 +2697,42 @@ const {
|
|
2697
2697
|
errorMessage: { selector: '::part(error-message)' },
|
2698
2698
|
};
|
2699
2699
|
|
2700
|
-
const textVars$
|
2700
|
+
const textVars$2 = TextFieldClass.cssVarList;
|
2701
2701
|
|
2702
2702
|
const PasscodeClass = compose(
|
2703
2703
|
createStyleMixin({
|
2704
2704
|
mappings: {
|
2705
|
-
fontSize: [{ ...digitField, property: textVars$
|
2705
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
|
2706
2706
|
hostWidth: { property: 'width' },
|
2707
|
-
fontFamily: host$
|
2707
|
+
fontFamily: host$7,
|
2708
2708
|
labelTextColor: [
|
2709
|
-
{ ...label$
|
2710
|
-
{ ...requiredIndicator$
|
2709
|
+
{ ...label$6, property: 'color' },
|
2710
|
+
{ ...requiredIndicator$6, property: 'color' },
|
2711
2711
|
],
|
2712
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2713
|
-
errorMessageTextColor: { ...errorMessage$
|
2712
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
2713
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
2714
2714
|
digitValueTextColor: {
|
2715
2715
|
selector: TextFieldClass.componentName,
|
2716
|
-
property: textVars$
|
2716
|
+
property: textVars$2.inputValueTextColor,
|
2717
2717
|
},
|
2718
2718
|
digitSize: [
|
2719
2719
|
{ ...digitField, property: 'height' },
|
2720
2720
|
{ ...digitField, property: 'width' },
|
2721
2721
|
],
|
2722
|
-
digitPadding: { ...digitField, property: textVars$
|
2723
|
-
digitTextAlign: { ...digitField, property: textVars$
|
2724
|
-
digitCaretTextColor: { ...digitField, property: textVars$
|
2722
|
+
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
2723
|
+
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
2724
|
+
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
2725
2725
|
digitSpacing: { ...internalWrapper, property: 'gap' },
|
2726
|
-
digitOutlineColor: { ...digitField, property: textVars$
|
2727
|
-
digitOutlineWidth: { ...digitField, property: textVars$
|
2726
|
+
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
2727
|
+
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
2728
2728
|
|
2729
|
-
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$
|
2729
|
+
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
|
2730
2730
|
},
|
2731
2731
|
}),
|
2732
2732
|
draggableMixin,
|
2733
2733
|
composedProxyInputMixin,
|
2734
2734
|
componentNameValidationMixin,
|
2735
|
-
customMixin$
|
2735
|
+
customMixin$3
|
2736
2736
|
)(
|
2737
2737
|
createProxy({
|
2738
2738
|
slots: [],
|
@@ -2768,7 +2768,7 @@ const PasscodeClass = compose(
|
|
2768
2768
|
|
2769
2769
|
descope-passcode-internal descope-text-field {
|
2770
2770
|
min-width: 2em;
|
2771
|
-
max-width: var(${textVars$
|
2771
|
+
max-width: var(${textVars$2.inputHeight});
|
2772
2772
|
}
|
2773
2773
|
|
2774
2774
|
vaadin-text-field::part(input-field) {
|
@@ -2803,15 +2803,15 @@ const PasscodeClass = compose(
|
|
2803
2803
|
${resetInputCursor('vaadin-text-field')}
|
2804
2804
|
`,
|
2805
2805
|
excludeAttrsSync: ['tabindex'],
|
2806
|
-
componentName: componentName$
|
2806
|
+
componentName: componentName$d,
|
2807
2807
|
})
|
2808
2808
|
);
|
2809
2809
|
|
2810
|
-
customElements.define(componentName$
|
2810
|
+
customElements.define(componentName$e, TextFieldClass);
|
2811
2811
|
|
2812
|
-
customElements.define(componentName$
|
2812
|
+
customElements.define(componentName$f, PasscodeInternal);
|
2813
2813
|
|
2814
|
-
customElements.define(componentName$
|
2814
|
+
customElements.define(componentName$d, PasscodeClass);
|
2815
2815
|
|
2816
2816
|
const passwordDraggableMixin = (superclass) =>
|
2817
2817
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2847,19 +2847,19 @@ const passwordDraggableMixin = (superclass) =>
|
|
2847
2847
|
}
|
2848
2848
|
};
|
2849
2849
|
|
2850
|
-
const componentName$
|
2850
|
+
const componentName$c = getComponentName('password');
|
2851
2851
|
|
2852
2852
|
const {
|
2853
|
-
host: host$
|
2854
|
-
inputField: inputField$
|
2853
|
+
host: host$6,
|
2854
|
+
inputField: inputField$4,
|
2855
2855
|
inputElement: inputElement$1,
|
2856
2856
|
inputElementPlaceholder,
|
2857
2857
|
revealButtonContainer,
|
2858
2858
|
revealButtonIcon,
|
2859
|
-
label: label$
|
2860
|
-
requiredIndicator: requiredIndicator$
|
2861
|
-
errorMessage: errorMessage$
|
2862
|
-
helperText: helperText$
|
2859
|
+
label: label$5,
|
2860
|
+
requiredIndicator: requiredIndicator$5,
|
2861
|
+
errorMessage: errorMessage$5,
|
2862
|
+
helperText: helperText$5,
|
2863
2863
|
} = {
|
2864
2864
|
host: { selector: () => ':host' },
|
2865
2865
|
inputField: { selector: '::part(input-field)' },
|
@@ -2876,33 +2876,33 @@ const {
|
|
2876
2876
|
const PasswordClass = compose(
|
2877
2877
|
createStyleMixin({
|
2878
2878
|
mappings: {
|
2879
|
-
hostWidth: { ...host$
|
2880
|
-
hostMinWidth: { ...host$
|
2881
|
-
fontSize: [{}, host$
|
2882
|
-
fontFamily: [label$
|
2883
|
-
inputHeight: { ...inputField$
|
2879
|
+
hostWidth: { ...host$6, property: 'width' },
|
2880
|
+
hostMinWidth: { ...host$6, property: 'min-width' },
|
2881
|
+
fontSize: [{}, host$6],
|
2882
|
+
fontFamily: [label$5, inputField$4, errorMessage$5, helperText$5],
|
2883
|
+
inputHeight: { ...inputField$4, property: 'height' },
|
2884
2884
|
inputHorizontalPadding: [
|
2885
2885
|
{ ...inputElement$1, property: 'padding-left' },
|
2886
2886
|
{ ...inputElement$1, property: 'padding-right' },
|
2887
2887
|
],
|
2888
|
-
inputBackgroundColor: { ...inputField$
|
2888
|
+
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
2889
2889
|
|
2890
|
-
inputBorderStyle: { ...inputField$
|
2891
|
-
inputBorderWidth: { ...inputField$
|
2892
|
-
inputBorderColor: { ...inputField$
|
2893
|
-
inputBorderRadius: { ...inputField$
|
2890
|
+
inputBorderStyle: { ...inputField$4, property: 'border-style' },
|
2891
|
+
inputBorderWidth: { ...inputField$4, property: 'border-width' },
|
2892
|
+
inputBorderColor: { ...inputField$4, property: 'border-color' },
|
2893
|
+
inputBorderRadius: { ...inputField$4, property: 'border-radius' },
|
2894
2894
|
|
2895
|
-
inputOutlineColor: { ...inputField$
|
2896
|
-
inputOutlineStyle: { ...inputField$
|
2897
|
-
inputOutlineOffset: { ...inputField$
|
2898
|
-
inputOutlineWidth: { ...inputField$
|
2895
|
+
inputOutlineColor: { ...inputField$4, property: 'outline-color' },
|
2896
|
+
inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
|
2897
|
+
inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
|
2898
|
+
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
2899
2899
|
|
2900
2900
|
labelTextColor: [
|
2901
|
-
{ ...label$
|
2902
|
-
{ ...requiredIndicator$
|
2901
|
+
{ ...label$5, property: 'color' },
|
2902
|
+
{ ...requiredIndicator$5, property: 'color' },
|
2903
2903
|
],
|
2904
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
2905
|
-
errorMessageTextColor: { ...errorMessage$
|
2904
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
2905
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
2906
2906
|
|
2907
2907
|
inputValueTextColor: [
|
2908
2908
|
{ ...inputElement$1, property: 'color' },
|
@@ -2975,23 +2975,23 @@ const PasswordClass = compose(
|
|
2975
2975
|
}
|
2976
2976
|
`,
|
2977
2977
|
excludeAttrsSync: ['tabindex'],
|
2978
|
-
componentName: componentName$
|
2978
|
+
componentName: componentName$c,
|
2979
2979
|
})
|
2980
2980
|
);
|
2981
2981
|
|
2982
|
-
customElements.define(componentName$
|
2982
|
+
customElements.define(componentName$c, PasswordClass);
|
2983
2983
|
|
2984
|
-
const componentName$
|
2984
|
+
const componentName$b = getComponentName('text-area');
|
2985
2985
|
|
2986
2986
|
const {
|
2987
|
-
host: host$
|
2988
|
-
label: label$
|
2987
|
+
host: host$5,
|
2988
|
+
label: label$4,
|
2989
2989
|
placeholder: placeholder$1,
|
2990
|
-
inputField: inputField$
|
2990
|
+
inputField: inputField$3,
|
2991
2991
|
textArea: textArea$2,
|
2992
|
-
requiredIndicator: requiredIndicator$
|
2993
|
-
helperText: helperText$
|
2994
|
-
errorMessage: errorMessage$
|
2992
|
+
requiredIndicator: requiredIndicator$4,
|
2993
|
+
helperText: helperText$4,
|
2994
|
+
errorMessage: errorMessage$4,
|
2995
2995
|
} = {
|
2996
2996
|
host: { selector: () => ':host' },
|
2997
2997
|
label: { selector: '::part(label)' },
|
@@ -3006,27 +3006,27 @@ const {
|
|
3006
3006
|
const TextAreaClass = compose(
|
3007
3007
|
createStyleMixin({
|
3008
3008
|
mappings: {
|
3009
|
-
hostWidth: { ...host$
|
3010
|
-
hostMinWidth: { ...host$
|
3011
|
-
fontSize: [host$
|
3012
|
-
fontFamily: [label$
|
3009
|
+
hostWidth: { ...host$5, property: 'width' },
|
3010
|
+
hostMinWidth: { ...host$5, property: 'min-width' },
|
3011
|
+
fontSize: [host$5, textArea$2],
|
3012
|
+
fontFamily: [label$4, inputField$3, helperText$4, errorMessage$4],
|
3013
3013
|
labelTextColor: [
|
3014
|
-
{ ...label$
|
3015
|
-
{ ...requiredIndicator$
|
3014
|
+
{ ...label$4, property: 'color' },
|
3015
|
+
{ ...requiredIndicator$4, property: 'color' },
|
3016
3016
|
],
|
3017
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3018
|
-
errorMessageTextColor: { ...errorMessage$
|
3019
|
-
inputBackgroundColor: { ...inputField$
|
3017
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
3018
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
3019
|
+
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
3020
3020
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
3021
3021
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
3022
|
-
inputBorderWidth: { ...inputField$
|
3023
|
-
inputBorderStyle: { ...inputField$
|
3024
|
-
inputBorderColor: { ...inputField$
|
3025
|
-
inputBorderRadius: { ...inputField$
|
3026
|
-
inputOutlineStyle: { ...inputField$
|
3027
|
-
inputOutlineColor: { ...inputField$
|
3028
|
-
inputOutlineOffset: { ...inputField$
|
3029
|
-
inputOutlineWidth: { ...inputField$
|
3022
|
+
inputBorderWidth: { ...inputField$3, property: 'border-width' },
|
3023
|
+
inputBorderStyle: { ...inputField$3, property: 'border-style' },
|
3024
|
+
inputBorderColor: { ...inputField$3, property: 'border-color' },
|
3025
|
+
inputBorderRadius: { ...inputField$3, property: 'border-radius' },
|
3026
|
+
inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
|
3027
|
+
inputOutlineColor: { ...inputField$3, property: 'outline-color' },
|
3028
|
+
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
3029
|
+
inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
|
3030
3030
|
inputResizeType: { ...textArea$2, property: 'resize' },
|
3031
3031
|
inputMinHeight: { ...textArea$2, property: 'min-height' },
|
3032
3032
|
},
|
@@ -3053,20 +3053,20 @@ const TextAreaClass = compose(
|
|
3053
3053
|
${resetInputCursor('vaadin-text-area')}
|
3054
3054
|
`,
|
3055
3055
|
excludeAttrsSync: ['tabindex'],
|
3056
|
-
componentName: componentName$
|
3056
|
+
componentName: componentName$b,
|
3057
3057
|
})
|
3058
3058
|
);
|
3059
3059
|
|
3060
|
-
customElements.define(componentName$
|
3060
|
+
customElements.define(componentName$b, TextAreaClass);
|
3061
3061
|
|
3062
|
-
const observedAttributes$
|
3062
|
+
const observedAttributes$3 = ['src', 'alt'];
|
3063
3063
|
|
3064
|
-
const componentName$
|
3064
|
+
const componentName$a = getComponentName('image');
|
3065
3065
|
|
3066
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3066
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$a, baseSelector: ':host > img' });
|
3067
3067
|
class RawImage extends BaseClass$1 {
|
3068
3068
|
static get observedAttributes() {
|
3069
|
-
return observedAttributes$
|
3069
|
+
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
3070
3070
|
}
|
3071
3071
|
|
3072
3072
|
constructor() {
|
@@ -3089,7 +3089,7 @@ class RawImage extends BaseClass$1 {
|
|
3089
3089
|
connectedCallback() {
|
3090
3090
|
super.connectedCallback?.();
|
3091
3091
|
|
3092
|
-
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$
|
3092
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$3 });
|
3093
3093
|
}
|
3094
3094
|
}
|
3095
3095
|
|
@@ -3103,9 +3103,9 @@ const ImageClass = compose(
|
|
3103
3103
|
draggableMixin
|
3104
3104
|
)(RawImage);
|
3105
3105
|
|
3106
|
-
customElements.define(componentName$
|
3106
|
+
customElements.define(componentName$a, ImageClass);
|
3107
3107
|
|
3108
|
-
const componentName$
|
3108
|
+
const componentName$9 = getComponentName('combo-box');
|
3109
3109
|
|
3110
3110
|
const ComboBoxMixin = (superclass) =>
|
3111
3111
|
class ComboBoxMixinClass extends superclass {
|
@@ -3157,15 +3157,15 @@ const ComboBoxMixin = (superclass) =>
|
|
3157
3157
|
};
|
3158
3158
|
|
3159
3159
|
const {
|
3160
|
-
host: host$
|
3161
|
-
inputField: inputField$
|
3160
|
+
host: host$4,
|
3161
|
+
inputField: inputField$2,
|
3162
3162
|
inputElement,
|
3163
3163
|
placeholder,
|
3164
3164
|
toggle,
|
3165
|
-
label: label$
|
3166
|
-
requiredIndicator: requiredIndicator$
|
3167
|
-
helperText: helperText$
|
3168
|
-
errorMessage: errorMessage$
|
3165
|
+
label: label$3,
|
3166
|
+
requiredIndicator: requiredIndicator$3,
|
3167
|
+
helperText: helperText$3,
|
3168
|
+
errorMessage: errorMessage$3,
|
3169
3169
|
} = {
|
3170
3170
|
host: { selector: () => ':host' },
|
3171
3171
|
inputField: { selector: '::part(input-field)' },
|
@@ -3186,23 +3186,23 @@ const {
|
|
3186
3186
|
const ComboBoxClass = compose(
|
3187
3187
|
createStyleMixin({
|
3188
3188
|
mappings: {
|
3189
|
-
hostWidth: { ...host$
|
3189
|
+
hostWidth: { ...host$4, property: 'width' },
|
3190
3190
|
// we apply font-size also on the host so we can set its width with em
|
3191
|
-
fontSize: [{}, host$
|
3192
|
-
fontFamily: [label$
|
3191
|
+
fontSize: [{}, host$4],
|
3192
|
+
fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
|
3193
3193
|
labelTextColor: [
|
3194
|
-
{ ...label$
|
3195
|
-
{ ...requiredIndicator$
|
3194
|
+
{ ...label$3, property: 'color' },
|
3195
|
+
{ ...requiredIndicator$3, property: 'color' },
|
3196
3196
|
],
|
3197
|
-
errorMessageTextColor: { ...errorMessage$
|
3198
|
-
inputHeight: { ...inputField$
|
3199
|
-
inputBackgroundColor: { ...inputField$
|
3200
|
-
inputBorderColor: { ...inputField$
|
3201
|
-
inputBorderWidth: { ...inputField$
|
3202
|
-
inputBorderStyle: { ...inputField$
|
3203
|
-
inputBorderRadius: { ...inputField$
|
3204
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
3205
|
-
inputValueTextColor: { ...inputField$
|
3197
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
3198
|
+
inputHeight: { ...inputField$2, property: 'height' },
|
3199
|
+
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
3200
|
+
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
3201
|
+
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
3202
|
+
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
3203
|
+
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
3204
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
3205
|
+
inputValueTextColor: { ...inputField$2, property: 'color' },
|
3206
3206
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3207
3207
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
3208
3208
|
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
@@ -3211,10 +3211,10 @@ const ComboBoxClass = compose(
|
|
3211
3211
|
{ ...toggle, property: 'margin-right' },
|
3212
3212
|
{ ...toggle, property: 'margin-left' },
|
3213
3213
|
],
|
3214
|
-
inputOutlineColor: { ...inputField$
|
3215
|
-
inputOutlineWidth: { ...inputField$
|
3216
|
-
inputOutlineStyle: { ...inputField$
|
3217
|
-
inputOutlineOffset: { ...inputField$
|
3214
|
+
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
3215
|
+
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
3216
|
+
inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
|
3217
|
+
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
3218
3218
|
inputHorizontalPadding: [
|
3219
3219
|
{ ...inputElement, property: 'padding-left' },
|
3220
3220
|
{ ...inputElement, property: 'padding-right' },
|
@@ -3285,12 +3285,12 @@ const ComboBoxClass = compose(
|
|
3285
3285
|
// and reset items to an empty array, and opening the list box with no items
|
3286
3286
|
// to display.
|
3287
3287
|
excludeAttrsSync: ['tabindex', 'size'],
|
3288
|
-
componentName: componentName$
|
3288
|
+
componentName: componentName$9,
|
3289
3289
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3290
3290
|
})
|
3291
3291
|
);
|
3292
3292
|
|
3293
|
-
customElements.define(componentName$
|
3293
|
+
customElements.define(componentName$9, ComboBoxClass);
|
3294
3294
|
|
3295
3295
|
var CountryCodes = [
|
3296
3296
|
{
|
@@ -4530,10 +4530,10 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4530
4530
|
</div>
|
4531
4531
|
`;
|
4532
4532
|
|
4533
|
-
const componentName$
|
4533
|
+
const componentName$8 = getComponentName('phone-field-internal');
|
4534
4534
|
|
4535
4535
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4536
|
-
const countryAttrs = ['country-input-placeholder', 'default-code'];
|
4536
|
+
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
4537
4537
|
const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
|
4538
4538
|
const mapAttrs = {
|
4539
4539
|
'country-input-placeholder': 'placeholder',
|
@@ -4542,27 +4542,28 @@ const mapAttrs = {
|
|
4542
4542
|
|
4543
4543
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4544
4544
|
|
4545
|
-
const BaseInputClass$
|
4545
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
|
4546
4546
|
|
4547
|
-
class PhoneFieldInternal extends BaseInputClass$
|
4547
|
+
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4548
4548
|
static get observedAttributes() {
|
4549
|
-
return [].concat(BaseInputClass$
|
4549
|
+
return [].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs$1);
|
4550
4550
|
}
|
4551
4551
|
|
4552
4552
|
constructor() {
|
4553
4553
|
super();
|
4554
4554
|
|
4555
4555
|
this.innerHTML = `
|
4556
|
-
|
4557
|
-
|
4558
|
-
|
4559
|
-
|
4560
|
-
|
4561
|
-
|
4562
|
-
|
4563
|
-
|
4564
|
-
|
4565
|
-
|
4556
|
+
<div>
|
4557
|
+
<descope-combo-box
|
4558
|
+
item-label-path="data-name"
|
4559
|
+
item-value-path="data-id"
|
4560
|
+
>
|
4561
|
+
${CountryCodes.map((item) => comboBoxItem(item)).join('')}
|
4562
|
+
</descope-combo-box>
|
4563
|
+
<div class="separator"></div>
|
4564
|
+
<descope-text-field type="tel"></descope-text-field>
|
4565
|
+
</div>
|
4566
|
+
`;
|
4566
4567
|
|
4567
4568
|
this.countryCodeInput = this.querySelector('descope-combo-box');
|
4568
4569
|
this.phoneNumberInput = this.querySelector('descope-text-field');
|
@@ -4570,10 +4571,10 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
4570
4571
|
}
|
4571
4572
|
|
4572
4573
|
get value() {
|
4573
|
-
if (!this.
|
4574
|
+
if (!this.phoneNumberValue) {
|
4574
4575
|
return '';
|
4575
4576
|
}
|
4576
|
-
return this.
|
4577
|
+
return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
|
4577
4578
|
}
|
4578
4579
|
|
4579
4580
|
set value(val) {
|
@@ -4610,7 +4611,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
4610
4611
|
if (hasMinPhoneLength) {
|
4611
4612
|
return { tooShort: true };
|
4612
4613
|
}
|
4613
|
-
if (
|
4614
|
+
if (hasPhone && !hasCode) {
|
4614
4615
|
return { valueMissing: true };
|
4615
4616
|
}
|
4616
4617
|
return {};
|
@@ -4627,14 +4628,27 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
4627
4628
|
this.setComboBoxDescriptor();
|
4628
4629
|
}
|
4629
4630
|
|
4631
|
+
getRestrictedCountries() {
|
4632
|
+
return this.getAttribute('restrict-countries')?.split(',') || [];
|
4633
|
+
}
|
4634
|
+
|
4630
4635
|
getCountryByDialCode(countryDialCode) {
|
4631
|
-
return this.countryCodeInput.items
|
4636
|
+
return this.countryCodeInput.items?.find(
|
4632
4637
|
(c) => c.getAttribute('data-dial-code') === countryDialCode
|
4633
4638
|
);
|
4634
4639
|
}
|
4635
4640
|
|
4636
4641
|
getCountryByCodeId(countryCode) {
|
4637
|
-
return this.countryCodeInput.items
|
4642
|
+
return this.countryCodeInput.items?.find((c) => c['data-id'] === countryCode)?.['data-name'];
|
4643
|
+
}
|
4644
|
+
|
4645
|
+
updateCountryCodeItems(restrictCountries) {
|
4646
|
+
const items = restrictCountries.length
|
4647
|
+
? CountryCodes.filter((c) => restrictCountries.includes(c.code))
|
4648
|
+
: CountryCodes;
|
4649
|
+
this.querySelector('descope-combo-box').innerHTML = items
|
4650
|
+
.map((item) => comboBoxItem(item))
|
4651
|
+
.join('');
|
4638
4652
|
}
|
4639
4653
|
|
4640
4654
|
handleDefaultCountryCode(countryCode) {
|
@@ -4711,18 +4725,21 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
4711
4725
|
this.phoneNumberInput.setAttribute(attr, newValue);
|
4712
4726
|
}
|
4713
4727
|
}
|
4728
|
+
if (attrName === 'restrict-countries') {
|
4729
|
+
this.updateCountryCodeItems(this.getRestrictedCountries());
|
4730
|
+
}
|
4714
4731
|
}
|
4715
4732
|
}
|
4716
|
-
}
|
4733
|
+
};
|
4717
4734
|
|
4718
|
-
customElements.define(componentName$
|
4735
|
+
customElements.define(componentName$8, PhoneFieldInternal$1);
|
4719
4736
|
|
4720
|
-
const textVars = TextFieldClass.cssVarList;
|
4737
|
+
const textVars$1 = TextFieldClass.cssVarList;
|
4721
4738
|
const comboVars = ComboBoxClass.cssVarList;
|
4722
4739
|
|
4723
|
-
const componentName$
|
4740
|
+
const componentName$7 = getComponentName('phone-field');
|
4724
4741
|
|
4725
|
-
const customMixin$
|
4742
|
+
const customMixin$2 = (superclass) =>
|
4726
4743
|
class PhoneFieldMixinClass extends superclass {
|
4727
4744
|
static get CountryCodes() {
|
4728
4745
|
return CountryCodes;
|
@@ -4734,15 +4751,15 @@ const customMixin$1 = (superclass) =>
|
|
4734
4751
|
const template = document.createElement('template');
|
4735
4752
|
|
4736
4753
|
template.innerHTML = `
|
4737
|
-
<${componentName$
|
4754
|
+
<${componentName$8}
|
4738
4755
|
tabindex="-1"
|
4739
4756
|
slot="input"
|
4740
|
-
></${componentName$
|
4757
|
+
></${componentName$8}>
|
4741
4758
|
`;
|
4742
4759
|
|
4743
4760
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4744
4761
|
|
4745
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4762
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
4746
4763
|
|
4747
4764
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4748
4765
|
includeAttrs: [
|
@@ -4755,21 +4772,22 @@ const customMixin$1 = (superclass) =>
|
|
4755
4772
|
'country-input-placeholder',
|
4756
4773
|
'phone-input-placeholder',
|
4757
4774
|
'disabled',
|
4775
|
+
'restrict-countries',
|
4758
4776
|
],
|
4759
4777
|
});
|
4760
4778
|
}
|
4761
4779
|
};
|
4762
4780
|
|
4763
4781
|
const {
|
4764
|
-
host: host$
|
4765
|
-
label: label$
|
4766
|
-
requiredIndicator: requiredIndicator$
|
4767
|
-
inputField,
|
4782
|
+
host: host$3,
|
4783
|
+
label: label$2,
|
4784
|
+
requiredIndicator: requiredIndicator$2,
|
4785
|
+
inputField: inputField$1,
|
4768
4786
|
countryCodeInput,
|
4769
|
-
phoneInput,
|
4787
|
+
phoneInput: phoneInput$1,
|
4770
4788
|
separator,
|
4771
|
-
errorMessage: errorMessage$
|
4772
|
-
helperText: helperText$
|
4789
|
+
errorMessage: errorMessage$2,
|
4790
|
+
helperText: helperText$2,
|
4773
4791
|
} = {
|
4774
4792
|
host: { selector: () => ':host' },
|
4775
4793
|
label: { selector: '::part(label)' },
|
@@ -4786,8 +4804,8 @@ const PhoneFieldClass = compose(
|
|
4786
4804
|
createStyleMixin({
|
4787
4805
|
mappings: {
|
4788
4806
|
fontSize: [
|
4789
|
-
host$
|
4790
|
-
inputField,
|
4807
|
+
host$3,
|
4808
|
+
inputField$1,
|
4791
4809
|
{
|
4792
4810
|
selector: TextFieldClass.componentName,
|
4793
4811
|
property: TextFieldClass.cssVarList.fontSize,
|
@@ -4798,69 +4816,69 @@ const PhoneFieldClass = compose(
|
|
4798
4816
|
},
|
4799
4817
|
],
|
4800
4818
|
fontFamily: [
|
4801
|
-
label$
|
4802
|
-
errorMessage$
|
4803
|
-
helperText$
|
4819
|
+
label$2,
|
4820
|
+
errorMessage$2,
|
4821
|
+
helperText$2,
|
4804
4822
|
{
|
4805
4823
|
...countryCodeInput,
|
4806
4824
|
property: ComboBoxClass.cssVarList.overlay.fontFamily,
|
4807
4825
|
},
|
4808
4826
|
],
|
4809
4827
|
hostWidth: [
|
4810
|
-
{ ...host$
|
4811
|
-
{ ...phoneInput, property: 'width' },
|
4828
|
+
{ ...host$3, property: 'width' },
|
4829
|
+
{ ...phoneInput$1, property: 'width' },
|
4812
4830
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
4813
4831
|
],
|
4814
4832
|
|
4815
4833
|
inputBorderStyle: [
|
4816
|
-
{ ...inputField, property: 'border-style' },
|
4834
|
+
{ ...inputField$1, property: 'border-style' },
|
4817
4835
|
{ ...separator, property: 'border-left-style' },
|
4818
4836
|
],
|
4819
4837
|
inputBorderWidth: [
|
4820
|
-
{ ...inputField, property: 'border-width' },
|
4838
|
+
{ ...inputField$1, property: 'border-width' },
|
4821
4839
|
{ ...separator, property: 'border-left-width' },
|
4822
4840
|
],
|
4823
4841
|
inputBorderColor: [
|
4824
|
-
{ ...inputField, property: 'border-color' },
|
4842
|
+
{ ...inputField$1, property: 'border-color' },
|
4825
4843
|
{ ...separator, property: 'border-left-color' },
|
4826
4844
|
],
|
4827
|
-
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
4845
|
+
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
4828
4846
|
|
4829
4847
|
countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
|
4830
4848
|
countryCodeDropdownWidth: {
|
4831
4849
|
...countryCodeInput,
|
4832
4850
|
property: '--vaadin-combo-box-overlay-width',
|
4833
4851
|
},
|
4834
|
-
phoneInputWidth: { ...phoneInput, property: 'width' },
|
4852
|
+
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
4835
4853
|
|
4836
4854
|
labelTextColor: [
|
4837
|
-
{ ...label$
|
4838
|
-
{ ...requiredIndicator$
|
4855
|
+
{ ...label$2, property: 'color' },
|
4856
|
+
{ ...requiredIndicator$2, property: 'color' },
|
4839
4857
|
],
|
4840
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
4841
|
-
errorMessageTextColor: { ...errorMessage$
|
4858
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
4859
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
4842
4860
|
|
4843
4861
|
inputValueTextColor: [
|
4844
|
-
{ ...phoneInput, property: textVars.inputValueTextColor },
|
4862
|
+
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
4845
4863
|
{ ...countryCodeInput, property: comboVars.inputValueTextColor },
|
4846
4864
|
],
|
4847
4865
|
|
4848
|
-
inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
|
4866
|
+
inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$1.inputPlaceholderColor },
|
4849
4867
|
|
4850
4868
|
overlayItemBackgroundColor: {
|
4851
4869
|
selector: 'descope-combo-box',
|
4852
4870
|
property: comboVars.overlayItemBackgroundColor,
|
4853
4871
|
},
|
4854
4872
|
|
4855
|
-
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
4856
|
-
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
4857
|
-
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
4858
|
-
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
4873
|
+
inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
|
4874
|
+
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
4875
|
+
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
4876
|
+
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
4859
4877
|
},
|
4860
4878
|
}),
|
4861
4879
|
draggableMixin,
|
4862
4880
|
composedProxyInputMixin,
|
4863
|
-
customMixin$
|
4881
|
+
customMixin$2
|
4864
4882
|
)(
|
4865
4883
|
createProxy({
|
4866
4884
|
slots: [],
|
@@ -4923,10 +4941,10 @@ const PhoneFieldClass = compose(
|
|
4923
4941
|
}
|
4924
4942
|
descope-text-field {
|
4925
4943
|
flex-grow: 1;
|
4926
|
-
${textVars.inputOutlineWidth}: 0;
|
4927
|
-
${textVars.inputOutlineOffset}: 0;
|
4928
|
-
${textVars.inputBorderWidth}: 0;
|
4929
|
-
${textVars.inputBorderRadius}: 0;
|
4944
|
+
${textVars$1.inputOutlineWidth}: 0;
|
4945
|
+
${textVars$1.inputOutlineOffset}: 0;
|
4946
|
+
${textVars$1.inputBorderWidth}: 0;
|
4947
|
+
${textVars$1.inputBorderRadius}: 0;
|
4930
4948
|
}
|
4931
4949
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
4932
4950
|
opacity: 1;
|
@@ -4936,51 +4954,360 @@ const PhoneFieldClass = compose(
|
|
4936
4954
|
}
|
4937
4955
|
`,
|
4938
4956
|
excludeAttrsSync: ['tabindex'],
|
4939
|
-
componentName: componentName$
|
4957
|
+
componentName: componentName$7,
|
4940
4958
|
})
|
4941
4959
|
);
|
4942
4960
|
|
4943
|
-
customElements.define(componentName$
|
4961
|
+
customElements.define(componentName$7, PhoneFieldClass);
|
4944
4962
|
|
4945
|
-
const
|
4963
|
+
const getCountryByCodeId = (countryCode) => {
|
4964
|
+
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
4965
|
+
};
|
4946
4966
|
|
4947
|
-
const componentName$
|
4967
|
+
const componentName$6 = getComponentName('phone-field-internal-input-box');
|
4948
4968
|
|
4949
|
-
const
|
4950
|
-
class NewPasswordMixinClass extends superclass {
|
4951
|
-
init() {
|
4952
|
-
super.init?.();
|
4969
|
+
const observedAttributes$2 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'placeholder'];
|
4953
4970
|
|
4954
|
-
|
4971
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
4955
4972
|
|
4956
|
-
|
4957
|
-
|
4958
|
-
|
4959
|
-
|
4960
|
-
slot="input"
|
4961
|
-
></${componentName$4}>
|
4962
|
-
`;
|
4973
|
+
class PhoneFieldInternal extends BaseInputClass$2 {
|
4974
|
+
static get observedAttributes() {
|
4975
|
+
return [].concat(BaseInputClass$2.observedAttributes || [], observedAttributes$2);
|
4976
|
+
}
|
4963
4977
|
|
4964
|
-
|
4978
|
+
constructor() {
|
4979
|
+
super();
|
4965
4980
|
|
4966
|
-
|
4981
|
+
this.innerHTML = `
|
4982
|
+
<div>
|
4983
|
+
<descope-text-field tabindex="1"></descope-text-field>
|
4984
|
+
</div>
|
4985
|
+
`;
|
4967
4986
|
|
4968
|
-
|
4969
|
-
|
4970
|
-
|
4971
|
-
|
4972
|
-
|
4973
|
-
|
4974
|
-
|
4975
|
-
|
4976
|
-
|
4977
|
-
|
4978
|
-
|
4979
|
-
|
4980
|
-
|
4981
|
-
|
4982
|
-
|
4983
|
-
|
4987
|
+
this.phoneNumberInput = this.querySelector('descope-text-field');
|
4988
|
+
}
|
4989
|
+
|
4990
|
+
get defaultCountryCode() {
|
4991
|
+
return getCountryByCodeId(this.getAttribute('default-code'));
|
4992
|
+
}
|
4993
|
+
|
4994
|
+
get hasDefaultCode() {
|
4995
|
+
return !!this.getAttribute('default-code');
|
4996
|
+
}
|
4997
|
+
|
4998
|
+
get value() {
|
4999
|
+
if (!this.phoneNumberValue) {
|
5000
|
+
return '';
|
5001
|
+
}
|
5002
|
+
|
5003
|
+
if (this.hasDefaultCode) {
|
5004
|
+
// we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
|
5005
|
+
// e.g.:
|
5006
|
+
// +972-12345 => +972-12345
|
5007
|
+
// 972-12345 => +972-12345
|
5008
|
+
// 12345 => +972-12345
|
5009
|
+
//
|
5010
|
+
// we also want to handle any extra dash if added in the start of the phone number
|
5011
|
+
// e.g.:
|
5012
|
+
// +972--12345 => +972-12345
|
5013
|
+
const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
|
5014
|
+
return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
|
5015
|
+
}
|
5016
|
+
|
5017
|
+
return this.phoneNumberInput.value;
|
5018
|
+
}
|
5019
|
+
|
5020
|
+
set value(val) {
|
5021
|
+
this.phoneNumberInput.value = val;
|
5022
|
+
}
|
5023
|
+
|
5024
|
+
get phoneNumberValue() {
|
5025
|
+
return this.phoneNumberInput.value;
|
5026
|
+
}
|
5027
|
+
|
5028
|
+
get minLength() {
|
5029
|
+
return parseInt(this.getAttribute('minlength'), 10) || 0;
|
5030
|
+
}
|
5031
|
+
|
5032
|
+
get maxLength() {
|
5033
|
+
return parseInt(this.getAttribute('maxlength'), 10) || 50;
|
5034
|
+
}
|
5035
|
+
|
5036
|
+
getValidity() {
|
5037
|
+
const validPhonePattern = /^\+\d{1,4}-(?:\d-?){1,15}$/;
|
5038
|
+
const stripValue = this.value.replace(/\D/g, '');
|
5039
|
+
|
5040
|
+
if (this.isRequired && !this.value) {
|
5041
|
+
return { valueMissing: true };
|
5042
|
+
}
|
5043
|
+
|
5044
|
+
if (stripValue.length < this.minLength) {
|
5045
|
+
return { tooShort: true };
|
5046
|
+
}
|
5047
|
+
|
5048
|
+
if (stripValue.length > this.maxLength) {
|
5049
|
+
return { tooLong: true };
|
5050
|
+
}
|
5051
|
+
|
5052
|
+
if (!validPhonePattern.test(this.value)) {
|
5053
|
+
return { patternMismatch: true };
|
5054
|
+
}
|
5055
|
+
|
5056
|
+
return {};
|
5057
|
+
}
|
5058
|
+
|
5059
|
+
init() {
|
5060
|
+
this.addEventListener('focus', (e) => {
|
5061
|
+
// we want to ignore focus events we are dispatching
|
5062
|
+
if (e.isTrusted) this.phoneNumberInput.focus();
|
5063
|
+
});
|
5064
|
+
|
5065
|
+
super.init?.();
|
5066
|
+
this.initInputs();
|
5067
|
+
}
|
5068
|
+
|
5069
|
+
getCountryByDialCode(countryDialCode) {
|
5070
|
+
return this.countryCodeInput.items?.find(
|
5071
|
+
(c) => c.getAttribute('data-dial-code') === countryDialCode
|
5072
|
+
);
|
5073
|
+
}
|
5074
|
+
|
5075
|
+
initInputs() {
|
5076
|
+
// Sanitize phone input value to filter everything but digits
|
5077
|
+
this.phoneNumberInput.addEventListener('input', (e) => {
|
5078
|
+
if (e.target.value.length === 1 && e.target.value === '-') {
|
5079
|
+
e.target.value = '';
|
5080
|
+
}
|
5081
|
+
|
5082
|
+
e.target.value = e.target.value
|
5083
|
+
.replace(/(?!^)\+/g, '')
|
5084
|
+
.replace('--', '-')
|
5085
|
+
.replace('+-', '+');
|
5086
|
+
|
5087
|
+
const telDigitsRegExp = /^[+\d-]+$/;
|
5088
|
+
const sanitizedInput = e.target.value
|
5089
|
+
.split('')
|
5090
|
+
.filter((char) => telDigitsRegExp.test(char))
|
5091
|
+
.join('');
|
5092
|
+
|
5093
|
+
e.target.value = sanitizedInput;
|
5094
|
+
});
|
5095
|
+
|
5096
|
+
this.handleFocusEventsDispatching([this.phoneNumberInput]);
|
5097
|
+
this.handleInputEventDispatching();
|
5098
|
+
}
|
5099
|
+
|
5100
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
5101
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
5102
|
+
|
5103
|
+
if (oldValue !== newValue && observedAttributes$2.includes(attrName)) {
|
5104
|
+
this.phoneNumberInput.setAttribute(attrName, newValue);
|
5105
|
+
}
|
5106
|
+
}
|
5107
|
+
}
|
5108
|
+
|
5109
|
+
customElements.define(componentName$6, PhoneFieldInternal);
|
5110
|
+
|
5111
|
+
const textVars = TextFieldClass.cssVarList;
|
5112
|
+
|
5113
|
+
const componentName$5 = getComponentName('phone-input-box-field');
|
5114
|
+
|
5115
|
+
const customMixin$1 = (superclass) =>
|
5116
|
+
class PhoneInputBoxFieldMixinClass extends superclass {
|
5117
|
+
static get CountryCodes() {
|
5118
|
+
return CountryCodes;
|
5119
|
+
}
|
5120
|
+
|
5121
|
+
init() {
|
5122
|
+
super.init?.();
|
5123
|
+
|
5124
|
+
const template = document.createElement('template');
|
5125
|
+
|
5126
|
+
template.innerHTML = `
|
5127
|
+
<${componentName$6}
|
5128
|
+
tabindex="-1"
|
5129
|
+
slot="input"
|
5130
|
+
></${componentName$6}>
|
5131
|
+
`;
|
5132
|
+
|
5133
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
5134
|
+
|
5135
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
5136
|
+
|
5137
|
+
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5138
|
+
includeAttrs: [
|
5139
|
+
'size',
|
5140
|
+
'bordered',
|
5141
|
+
'invalid',
|
5142
|
+
'minlength',
|
5143
|
+
'maxlength',
|
5144
|
+
'default-code',
|
5145
|
+
'disabled',
|
5146
|
+
],
|
5147
|
+
});
|
5148
|
+
}
|
5149
|
+
};
|
5150
|
+
|
5151
|
+
const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
|
5152
|
+
host: { selector: () => ':host' },
|
5153
|
+
label: { selector: '::part(label)' },
|
5154
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
5155
|
+
inputField: { selector: '::part(input-field)' },
|
5156
|
+
phoneInput: { selector: () => 'descope-text-field' },
|
5157
|
+
helperText: { selector: '::part(helper-text)' },
|
5158
|
+
errorMessage: { selector: '::part(error-message)' },
|
5159
|
+
};
|
5160
|
+
|
5161
|
+
const PhoneFieldInputBoxClass = compose(
|
5162
|
+
createStyleMixin({
|
5163
|
+
mappings: {
|
5164
|
+
fontSize: [
|
5165
|
+
host$2,
|
5166
|
+
inputField,
|
5167
|
+
{
|
5168
|
+
selector: TextFieldClass.componentName,
|
5169
|
+
property: TextFieldClass.cssVarList.fontSize,
|
5170
|
+
},
|
5171
|
+
],
|
5172
|
+
fontFamily: [label$1, errorMessage$1, helperText$1],
|
5173
|
+
hostWidth: { ...host$2, property: 'width' },
|
5174
|
+
hostMinWidth: { ...host$2, property: 'min-width' },
|
5175
|
+
|
5176
|
+
inputBorderStyle: { ...inputField, property: 'border-style' },
|
5177
|
+
inputBorderWidth: { ...inputField, property: 'border-width' },
|
5178
|
+
inputBorderColor: { ...inputField, property: 'border-color' },
|
5179
|
+
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
5180
|
+
|
5181
|
+
labelTextColor: [
|
5182
|
+
{ ...label$1, property: 'color' },
|
5183
|
+
{ ...requiredIndicator$1, property: 'color' },
|
5184
|
+
],
|
5185
|
+
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
5186
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
5187
|
+
|
5188
|
+
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
5189
|
+
|
5190
|
+
inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
|
5191
|
+
|
5192
|
+
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
5193
|
+
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
5194
|
+
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
5195
|
+
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
5196
|
+
},
|
5197
|
+
}),
|
5198
|
+
draggableMixin,
|
5199
|
+
composedProxyInputMixin,
|
5200
|
+
customMixin$1
|
5201
|
+
)(
|
5202
|
+
createProxy({
|
5203
|
+
slots: [],
|
5204
|
+
wrappedEleName: 'vaadin-text-field',
|
5205
|
+
style: () => `
|
5206
|
+
:host {
|
5207
|
+
display: inline-flex;
|
5208
|
+
max-width: 100%;
|
5209
|
+
box-sizing: border-box;
|
5210
|
+
}
|
5211
|
+
${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}
|
5212
|
+
${resetInputCursor('vaadin-text-field')}
|
5213
|
+
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
5214
|
+
${resetInputFieldDefaultWidth()}
|
5215
|
+
|
5216
|
+
vaadin-text-field {
|
5217
|
+
width: 100%;
|
5218
|
+
height: 100%;
|
5219
|
+
box-sizing: border-box;
|
5220
|
+
padding: 0;
|
5221
|
+
}
|
5222
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
5223
|
+
box-shadow: none;
|
5224
|
+
}
|
5225
|
+
vaadin-text-field::before {
|
5226
|
+
height: 0;
|
5227
|
+
}
|
5228
|
+
vaadin-text-field::part(input-field) {
|
5229
|
+
padding: 0;
|
5230
|
+
min-height: 0;
|
5231
|
+
background: transparent;
|
5232
|
+
overflow: hidden;
|
5233
|
+
-webkit-mask-image: none;
|
5234
|
+
}
|
5235
|
+
descope-phone-field-internal-input-box {
|
5236
|
+
-webkit-mask-image: none;
|
5237
|
+
padding: 0;
|
5238
|
+
min-height: 0;
|
5239
|
+
width: 100%;
|
5240
|
+
height: 100%;
|
5241
|
+
}
|
5242
|
+
descope-phone-field-internal-input-box > div {
|
5243
|
+
width: 100%;
|
5244
|
+
height: 100%;
|
5245
|
+
}
|
5246
|
+
descope-phone-field-internal-input-box .separator {
|
5247
|
+
flex: 0;
|
5248
|
+
border: none;
|
5249
|
+
}
|
5250
|
+
descope-text-field {
|
5251
|
+
flex-grow: 1;
|
5252
|
+
width: 100%;
|
5253
|
+
${textVars.inputOutlineWidth}: 0;
|
5254
|
+
${textVars.inputOutlineOffset}: 0;
|
5255
|
+
${textVars.inputBorderWidth}: 0;
|
5256
|
+
${textVars.inputBorderRadius}: 0;
|
5257
|
+
}
|
5258
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
5259
|
+
opacity: 1;
|
5260
|
+
}
|
5261
|
+
vaadin-text-field::part(input-field)::after {
|
5262
|
+
border: none;
|
5263
|
+
}
|
5264
|
+
`,
|
5265
|
+
excludeAttrsSync: ['tabindex'],
|
5266
|
+
componentName: componentName$5,
|
5267
|
+
})
|
5268
|
+
);
|
5269
|
+
|
5270
|
+
customElements.define(componentName$5, PhoneFieldInputBoxClass);
|
5271
|
+
|
5272
|
+
const componentName$4 = getComponentName('new-password-internal');
|
5273
|
+
|
5274
|
+
const componentName$3 = getComponentName('new-password');
|
5275
|
+
|
5276
|
+
const customMixin = (superclass) =>
|
5277
|
+
class NewPasswordMixinClass extends superclass {
|
5278
|
+
init() {
|
5279
|
+
super.init?.();
|
5280
|
+
|
5281
|
+
const template = document.createElement('template');
|
5282
|
+
|
5283
|
+
template.innerHTML = `
|
5284
|
+
<${componentName$4}
|
5285
|
+
name="new-password"
|
5286
|
+
tabindex="-1"
|
5287
|
+
slot="input"
|
5288
|
+
></${componentName$4}>
|
5289
|
+
`;
|
5290
|
+
|
5291
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
5292
|
+
|
5293
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$4);
|
5294
|
+
|
5295
|
+
forwardAttrs(this, this.inputElement, {
|
5296
|
+
includeAttrs: [
|
5297
|
+
'password-label',
|
5298
|
+
'password-placeholder',
|
5299
|
+
'confirm-label',
|
5300
|
+
'confirm-placeholder',
|
5301
|
+
'full-width',
|
5302
|
+
'size',
|
5303
|
+
'bordered',
|
5304
|
+
'label',
|
5305
|
+
'has-confirm',
|
5306
|
+
'invalid',
|
5307
|
+
'readonly',
|
5308
|
+
'draggable',
|
5309
|
+
],
|
5310
|
+
});
|
4984
5311
|
}
|
4985
5312
|
};
|
4986
5313
|
|
@@ -5963,7 +6290,7 @@ const globals = {
|
|
5963
6290
|
shadow,
|
5964
6291
|
fonts,
|
5965
6292
|
};
|
5966
|
-
const vars$
|
6293
|
+
const vars$p = getThemeVars(globals);
|
5967
6294
|
|
5968
6295
|
const globalRefs$b = getThemeRefs(globals);
|
5969
6296
|
const compVars$3 = ButtonClass.cssVarList;
|
@@ -5976,7 +6303,7 @@ const mode = {
|
|
5976
6303
|
surface: globalRefs$b.colors.surface,
|
5977
6304
|
};
|
5978
6305
|
|
5979
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
6306
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
|
5980
6307
|
|
5981
6308
|
const verticalPaddingRatio = 3;
|
5982
6309
|
const horizontalPaddingRatio = 2;
|
@@ -6063,7 +6390,7 @@ const button = {
|
|
6063
6390
|
},
|
6064
6391
|
};
|
6065
6392
|
|
6066
|
-
const vars$
|
6393
|
+
const vars$o = {
|
6067
6394
|
...compVars$3,
|
6068
6395
|
...helperVars$3,
|
6069
6396
|
};
|
@@ -6071,13 +6398,13 @@ const vars$n = {
|
|
6071
6398
|
var button$1 = /*#__PURE__*/Object.freeze({
|
6072
6399
|
__proto__: null,
|
6073
6400
|
default: button,
|
6074
|
-
vars: vars$
|
6401
|
+
vars: vars$o
|
6075
6402
|
});
|
6076
6403
|
|
6077
6404
|
const componentName = getComponentName('input-wrapper');
|
6078
6405
|
const globalRefs$a = getThemeRefs(globals);
|
6079
6406
|
|
6080
|
-
const [theme$1, refs, vars$
|
6407
|
+
const [theme$1, refs, vars$n] = createHelperVars(
|
6081
6408
|
{
|
6082
6409
|
labelTextColor: globalRefs$a.colors.surface.contrast,
|
6083
6410
|
valueTextColor: globalRefs$a.colors.surface.contrast,
|
@@ -6146,21 +6473,56 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
6146
6473
|
__proto__: null,
|
6147
6474
|
default: theme$1,
|
6148
6475
|
refs: refs,
|
6149
|
-
vars: vars$
|
6476
|
+
vars: vars$n
|
6150
6477
|
});
|
6151
6478
|
|
6152
|
-
const vars$
|
6479
|
+
const vars$m = TextFieldClass.cssVarList;
|
6153
6480
|
|
6154
6481
|
const textField = {
|
6482
|
+
[vars$m.hostWidth]: refs.width,
|
6483
|
+
[vars$m.hostMinWidth]: refs.minWidth,
|
6484
|
+
[vars$m.fontSize]: refs.fontSize,
|
6485
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
6486
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
6487
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
6488
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
6489
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
6490
|
+
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
6491
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
6492
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
6493
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
6494
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
6495
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
6496
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
6497
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
6498
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
6499
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
6500
|
+
[vars$m.inputHeight]: refs.inputHeight,
|
6501
|
+
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
6502
|
+
};
|
6503
|
+
|
6504
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
6505
|
+
__proto__: null,
|
6506
|
+
default: textField,
|
6507
|
+
textField: textField,
|
6508
|
+
vars: vars$m
|
6509
|
+
});
|
6510
|
+
|
6511
|
+
const globalRefs$9 = getThemeRefs(globals);
|
6512
|
+
const vars$l = PasswordClass.cssVarList;
|
6513
|
+
|
6514
|
+
const password = {
|
6155
6515
|
[vars$l.hostWidth]: refs.width,
|
6156
|
-
[vars$l.hostMinWidth]: refs.minWidth,
|
6157
6516
|
[vars$l.fontSize]: refs.fontSize,
|
6158
6517
|
[vars$l.fontFamily]: refs.fontFamily,
|
6159
6518
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
6160
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6161
6519
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
6520
|
+
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6521
|
+
[vars$l.inputHeight]: refs.inputHeight,
|
6522
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
6523
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
6162
6524
|
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
6163
|
-
[vars$l.
|
6525
|
+
[vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6164
6526
|
[vars$l.inputBorderWidth]: refs.borderWidth,
|
6165
6527
|
[vars$l.inputBorderStyle]: refs.borderStyle,
|
6166
6528
|
[vars$l.inputBorderColor]: refs.borderColor,
|
@@ -6169,33 +6531,27 @@ const textField = {
|
|
6169
6531
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
6170
6532
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
6171
6533
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
6172
|
-
[vars$l.
|
6173
|
-
[vars$l.
|
6174
|
-
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
6534
|
+
[vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
|
6535
|
+
[vars$l.revealButtonSize]: refs.toggleButtonSize,
|
6175
6536
|
};
|
6176
6537
|
|
6177
|
-
var
|
6538
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
6178
6539
|
__proto__: null,
|
6179
|
-
default:
|
6180
|
-
textField: textField,
|
6540
|
+
default: password,
|
6181
6541
|
vars: vars$l
|
6182
6542
|
});
|
6183
6543
|
|
6184
|
-
const
|
6185
|
-
const vars$k = PasswordClass.cssVarList;
|
6544
|
+
const vars$k = NumberFieldClass.cssVarList;
|
6186
6545
|
|
6187
|
-
const
|
6546
|
+
const numberField = {
|
6188
6547
|
[vars$k.hostWidth]: refs.width,
|
6548
|
+
[vars$k.hostMinWidth]: refs.minWidth,
|
6189
6549
|
[vars$k.fontSize]: refs.fontSize,
|
6190
6550
|
[vars$k.fontFamily]: refs.fontFamily,
|
6191
6551
|
[vars$k.labelTextColor]: refs.labelTextColor,
|
6192
6552
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
6193
|
-
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
6194
|
-
[vars$k.inputHeight]: refs.inputHeight,
|
6195
|
-
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
6196
|
-
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
6197
6553
|
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
6198
|
-
[vars$k.
|
6554
|
+
[vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
|
6199
6555
|
[vars$k.inputBorderWidth]: refs.borderWidth,
|
6200
6556
|
[vars$k.inputBorderStyle]: refs.borderStyle,
|
6201
6557
|
[vars$k.inputBorderColor]: refs.borderColor,
|
@@ -6204,19 +6560,21 @@ const password = {
|
|
6204
6560
|
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
6205
6561
|
[vars$k.inputOutlineColor]: refs.outlineColor,
|
6206
6562
|
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
6207
|
-
[vars$k.
|
6208
|
-
[vars$k.
|
6563
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
6564
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
6565
|
+
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
6566
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
6209
6567
|
};
|
6210
6568
|
|
6211
|
-
var
|
6569
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
6212
6570
|
__proto__: null,
|
6213
|
-
default:
|
6571
|
+
default: numberField,
|
6214
6572
|
vars: vars$k
|
6215
6573
|
});
|
6216
6574
|
|
6217
|
-
const vars$j =
|
6575
|
+
const vars$j = EmailFieldClass.cssVarList;
|
6218
6576
|
|
6219
|
-
const
|
6577
|
+
const emailField = {
|
6220
6578
|
[vars$j.hostWidth]: refs.width,
|
6221
6579
|
[vars$j.hostMinWidth]: refs.minWidth,
|
6222
6580
|
[vars$j.fontSize]: refs.fontSize,
|
@@ -6224,6 +6582,7 @@ const numberField = {
|
|
6224
6582
|
[vars$j.labelTextColor]: refs.labelTextColor,
|
6225
6583
|
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
6226
6584
|
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
6585
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
6227
6586
|
[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
|
6228
6587
|
[vars$j.inputBorderWidth]: refs.borderWidth,
|
6229
6588
|
[vars$j.inputBorderStyle]: refs.borderStyle,
|
@@ -6234,194 +6593,162 @@ const numberField = {
|
|
6234
6593
|
[vars$j.inputOutlineColor]: refs.outlineColor,
|
6235
6594
|
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
6236
6595
|
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
6237
|
-
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
6238
6596
|
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
6239
6597
|
[vars$j.inputHeight]: refs.inputHeight,
|
6240
6598
|
};
|
6241
6599
|
|
6242
|
-
var
|
6600
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
6243
6601
|
__proto__: null,
|
6244
|
-
default:
|
6602
|
+
default: emailField,
|
6245
6603
|
vars: vars$j
|
6246
6604
|
});
|
6247
6605
|
|
6248
|
-
const
|
6606
|
+
const globalRefs$8 = getThemeRefs(globals);
|
6607
|
+
const vars$i = TextAreaClass.cssVarList;
|
6249
6608
|
|
6250
|
-
const
|
6609
|
+
const textArea = {
|
6251
6610
|
[vars$i.hostWidth]: refs.width,
|
6252
6611
|
[vars$i.hostMinWidth]: refs.minWidth,
|
6253
|
-
[vars$i.fontSize]:
|
6612
|
+
[vars$i.fontSize]: globalRefs$8.typography.body2.size,
|
6254
6613
|
[vars$i.fontFamily]: refs.fontFamily,
|
6255
6614
|
[vars$i.labelTextColor]: refs.labelTextColor,
|
6615
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
6256
6616
|
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
6617
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
6257
6618
|
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
6258
|
-
[vars$i.
|
6259
|
-
[vars$i.
|
6619
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6620
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
6260
6621
|
[vars$i.inputBorderWidth]: refs.borderWidth,
|
6261
6622
|
[vars$i.inputBorderStyle]: refs.borderStyle,
|
6262
6623
|
[vars$i.inputBorderColor]: refs.borderColor,
|
6263
|
-
[vars$i.inputBorderRadius]: refs.borderRadius,
|
6264
6624
|
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
6265
6625
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
6266
6626
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
6267
6627
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
6268
|
-
[vars$i.
|
6269
|
-
[vars$i.
|
6270
|
-
|
6628
|
+
[vars$i.inputResizeType]: 'vertical',
|
6629
|
+
[vars$i.inputMinHeight]: '5em',
|
6630
|
+
|
6631
|
+
_disabled: {
|
6632
|
+
[vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
|
6633
|
+
},
|
6634
|
+
|
6635
|
+
_readonly: {
|
6636
|
+
[vars$i.inputResizeType]: 'none',
|
6637
|
+
},
|
6271
6638
|
};
|
6272
6639
|
|
6273
|
-
var
|
6640
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
6274
6641
|
__proto__: null,
|
6275
|
-
default:
|
6642
|
+
default: textArea,
|
6276
6643
|
vars: vars$i
|
6277
6644
|
});
|
6278
6645
|
|
6279
|
-
const
|
6280
|
-
const vars$h = TextAreaClass.cssVarList;
|
6646
|
+
const vars$h = CheckboxClass.cssVarList;
|
6281
6647
|
|
6282
|
-
const
|
6648
|
+
const checkbox = {
|
6283
6649
|
[vars$h.hostWidth]: refs.width,
|
6284
|
-
[vars$h.
|
6285
|
-
[vars$h.fontSize]: globalRefs$8.typography.body2.size,
|
6650
|
+
[vars$h.fontSize]: refs.fontSize,
|
6286
6651
|
[vars$h.fontFamily]: refs.fontFamily,
|
6287
6652
|
[vars$h.labelTextColor]: refs.labelTextColor,
|
6288
6653
|
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
6654
|
+
[vars$h.labelFontWeight]: '400',
|
6655
|
+
[vars$h.labelSpacing]: '0.75em',
|
6289
6656
|
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
6290
|
-
[vars$h.
|
6291
|
-
[vars$h.
|
6292
|
-
[vars$h.
|
6657
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
6658
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
6659
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
6660
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
6293
6661
|
[vars$h.inputBorderRadius]: refs.borderRadius,
|
6662
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
6294
6663
|
[vars$h.inputBorderWidth]: refs.borderWidth,
|
6295
6664
|
[vars$h.inputBorderStyle]: refs.borderStyle,
|
6296
|
-
[vars$h.
|
6297
|
-
[vars$h.
|
6298
|
-
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
6299
|
-
[vars$h.inputOutlineColor]: refs.outlineColor,
|
6300
|
-
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
6301
|
-
[vars$h.inputResizeType]: 'vertical',
|
6302
|
-
[vars$h.inputMinHeight]: '5em',
|
6665
|
+
[vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
|
6666
|
+
[vars$h.inputSize]: '2em',
|
6303
6667
|
|
6304
|
-
|
6305
|
-
[vars$h.inputBackgroundColor]:
|
6668
|
+
_checked: {
|
6669
|
+
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
6670
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
6306
6671
|
},
|
6307
6672
|
|
6308
|
-
|
6309
|
-
[vars$h.
|
6673
|
+
_disabled: {
|
6674
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
6310
6675
|
},
|
6311
6676
|
};
|
6312
6677
|
|
6313
|
-
var
|
6678
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
6314
6679
|
__proto__: null,
|
6315
|
-
default:
|
6680
|
+
default: checkbox,
|
6316
6681
|
vars: vars$h
|
6317
6682
|
});
|
6318
6683
|
|
6319
|
-
const
|
6684
|
+
const knobMargin = '2px';
|
6685
|
+
const checkboxHeight = '1.25em';
|
6686
|
+
|
6687
|
+
const globalRefs$7 = getThemeRefs(globals);
|
6688
|
+
const vars$g = SwitchToggleClass.cssVarList;
|
6320
6689
|
|
6321
|
-
const
|
6322
|
-
[vars$g.hostWidth]: refs.width,
|
6690
|
+
const switchToggle = {
|
6323
6691
|
[vars$g.fontSize]: refs.fontSize,
|
6324
6692
|
[vars$g.fontFamily]: refs.fontFamily,
|
6325
|
-
|
6326
|
-
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
6327
|
-
[vars$g.labelFontWeight]: '400',
|
6328
|
-
[vars$g.labelSpacing]: '0.75em',
|
6329
|
-
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
6693
|
+
|
6330
6694
|
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
6331
6695
|
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
6332
6696
|
[vars$g.inputOutlineColor]: refs.outlineColor,
|
6333
6697
|
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
6334
|
-
[vars$g.inputBorderRadius]: refs.borderRadius,
|
6335
|
-
[vars$g.inputBorderColor]: refs.borderColor,
|
6336
|
-
[vars$g.inputBorderWidth]: refs.borderWidth,
|
6337
|
-
[vars$g.inputBorderStyle]: refs.borderStyle,
|
6338
|
-
[vars$g.inputBackgroundColor]: refs.inputBackgroundColor,
|
6339
|
-
[vars$g.inputSize]: '2em',
|
6340
6698
|
|
6341
|
-
|
6342
|
-
|
6343
|
-
|
6344
|
-
|
6699
|
+
[vars$g.trackBorderStyle]: refs.borderStyle,
|
6700
|
+
[vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
6701
|
+
[vars$g.trackBorderColor]: refs.borderColor,
|
6702
|
+
[vars$g.trackBackgroundColor]: 'none',
|
6703
|
+
[vars$g.trackBorderRadius]: globalRefs$7.radius.md,
|
6704
|
+
[vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
6705
|
+
[vars$g.trackHeight]: checkboxHeight,
|
6706
|
+
|
6707
|
+
[vars$g.knobSize]: `calc(1em - ${knobMargin})`,
|
6708
|
+
[vars$g.knobRadius]: '50%',
|
6709
|
+
[vars$g.knobTopOffset]: '1px',
|
6710
|
+
[vars$g.knobLeftOffset]: knobMargin,
|
6711
|
+
[vars$g.knobColor]: refs.valueTextColor,
|
6712
|
+
[vars$g.knobTransitionDuration]: '0.3s',
|
6345
6713
|
|
6346
|
-
|
6347
|
-
|
6348
|
-
}
|
6349
|
-
|
6350
|
-
|
6351
|
-
|
6352
|
-
__proto__: null,
|
6353
|
-
default: checkbox,
|
6354
|
-
vars: vars$g
|
6355
|
-
});
|
6356
|
-
|
6357
|
-
const knobMargin = '2px';
|
6358
|
-
const checkboxHeight = '1.25em';
|
6359
|
-
|
6360
|
-
const globalRefs$7 = getThemeRefs(globals);
|
6361
|
-
const vars$f = SwitchToggleClass.cssVarList;
|
6714
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
6715
|
+
[vars$g.labelFontWeight]: '400',
|
6716
|
+
[vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
6717
|
+
[vars$g.labelSpacing]: '0.25em',
|
6718
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
6719
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
6362
6720
|
|
6363
|
-
|
6364
|
-
[vars$f.fontSize]: refs.fontSize,
|
6365
|
-
[vars$f.fontFamily]: refs.fontFamily,
|
6366
|
-
|
6367
|
-
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
6368
|
-
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
6369
|
-
[vars$f.inputOutlineColor]: refs.outlineColor,
|
6370
|
-
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
6371
|
-
|
6372
|
-
[vars$f.trackBorderStyle]: refs.borderStyle,
|
6373
|
-
[vars$f.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
6374
|
-
[vars$f.trackBorderColor]: refs.borderColor,
|
6375
|
-
[vars$f.trackBackgroundColor]: 'none',
|
6376
|
-
[vars$f.trackBorderRadius]: globalRefs$7.radius.md,
|
6377
|
-
[vars$f.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
6378
|
-
[vars$f.trackHeight]: checkboxHeight,
|
6379
|
-
|
6380
|
-
[vars$f.knobSize]: `calc(1em - ${knobMargin})`,
|
6381
|
-
[vars$f.knobRadius]: '50%',
|
6382
|
-
[vars$f.knobTopOffset]: '1px',
|
6383
|
-
[vars$f.knobLeftOffset]: knobMargin,
|
6384
|
-
[vars$f.knobColor]: refs.valueTextColor,
|
6385
|
-
[vars$f.knobTransitionDuration]: '0.3s',
|
6386
|
-
|
6387
|
-
[vars$f.labelTextColor]: refs.labelTextColor,
|
6388
|
-
[vars$f.labelFontWeight]: '400',
|
6389
|
-
[vars$f.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
6390
|
-
[vars$f.labelSpacing]: '0.25em',
|
6391
|
-
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
6392
|
-
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
6393
|
-
|
6394
|
-
[vars$f.hostWidth]: refs.width,
|
6721
|
+
[vars$g.hostWidth]: refs.width,
|
6395
6722
|
|
6396
6723
|
_checked: {
|
6397
|
-
[vars$
|
6398
|
-
[vars$
|
6399
|
-
[vars$
|
6400
|
-
[vars$
|
6401
|
-
[vars$
|
6724
|
+
[vars$g.trackBorderColor]: refs.borderColor,
|
6725
|
+
[vars$g.trackBackgroundColor]: refs.backgroundColor,
|
6726
|
+
[vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
|
6727
|
+
[vars$g.knobColor]: refs.valueTextColor,
|
6728
|
+
[vars$g.knobTextColor]: refs.valueTextColor,
|
6402
6729
|
},
|
6403
6730
|
|
6404
6731
|
_disabled: {
|
6405
|
-
[vars$
|
6406
|
-
[vars$
|
6407
|
-
[vars$
|
6408
|
-
[vars$
|
6732
|
+
[vars$g.knobColor]: globalRefs$7.colors.surface.light,
|
6733
|
+
[vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
|
6734
|
+
[vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
6735
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
6409
6736
|
_checked: {
|
6410
|
-
[vars$
|
6411
|
-
[vars$
|
6737
|
+
[vars$g.knobColor]: globalRefs$7.colors.surface.light,
|
6738
|
+
[vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
6412
6739
|
},
|
6413
6740
|
},
|
6414
6741
|
|
6415
6742
|
_invalid: {
|
6416
|
-
[vars$
|
6417
|
-
[vars$
|
6743
|
+
[vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
|
6744
|
+
[vars$g.knobColor]: globalRefs$7.colors.error.main,
|
6418
6745
|
},
|
6419
6746
|
};
|
6420
6747
|
|
6421
6748
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
6422
6749
|
__proto__: null,
|
6423
6750
|
default: switchToggle,
|
6424
|
-
vars: vars$
|
6751
|
+
vars: vars$g
|
6425
6752
|
});
|
6426
6753
|
|
6427
6754
|
const globalRefs$6 = getThemeRefs(globals);
|
@@ -6446,7 +6773,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
6446
6773
|
horizontalAlignment,
|
6447
6774
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
6448
6775
|
},
|
6449
|
-
componentName$
|
6776
|
+
componentName$n
|
6450
6777
|
);
|
6451
6778
|
|
6452
6779
|
const { shadowColor } = helperRefs$2;
|
@@ -6530,7 +6857,7 @@ const container = {
|
|
6530
6857
|
},
|
6531
6858
|
};
|
6532
6859
|
|
6533
|
-
const vars$
|
6860
|
+
const vars$f = {
|
6534
6861
|
...compVars$2,
|
6535
6862
|
...helperVars$2,
|
6536
6863
|
};
|
@@ -6538,152 +6865,152 @@ const vars$e = {
|
|
6538
6865
|
var container$1 = /*#__PURE__*/Object.freeze({
|
6539
6866
|
__proto__: null,
|
6540
6867
|
default: container,
|
6541
|
-
vars: vars$
|
6868
|
+
vars: vars$f
|
6542
6869
|
});
|
6543
6870
|
|
6544
|
-
const vars$
|
6871
|
+
const vars$e = LogoClass.cssVarList;
|
6545
6872
|
|
6546
6873
|
const logo$1 = {
|
6547
|
-
[vars$
|
6874
|
+
[vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
6548
6875
|
};
|
6549
6876
|
|
6550
6877
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
6551
6878
|
__proto__: null,
|
6552
6879
|
default: logo$1,
|
6553
|
-
vars: vars$
|
6880
|
+
vars: vars$e
|
6554
6881
|
});
|
6555
6882
|
|
6556
|
-
const vars$
|
6883
|
+
const vars$d = TotpImageClass.cssVarList;
|
6557
6884
|
|
6558
6885
|
const logo = {
|
6559
|
-
[vars$
|
6886
|
+
[vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
6560
6887
|
};
|
6561
6888
|
|
6562
6889
|
var totpImage = /*#__PURE__*/Object.freeze({
|
6563
6890
|
__proto__: null,
|
6564
6891
|
default: logo,
|
6565
|
-
vars: vars$
|
6892
|
+
vars: vars$d
|
6566
6893
|
});
|
6567
6894
|
|
6568
6895
|
const globalRefs$5 = getThemeRefs(globals);
|
6569
|
-
const vars$
|
6896
|
+
const vars$c = TextClass.cssVarList;
|
6570
6897
|
|
6571
6898
|
const text = {
|
6572
|
-
[vars$
|
6573
|
-
[vars$
|
6574
|
-
[vars$
|
6899
|
+
[vars$c.textLineHeight]: '1em',
|
6900
|
+
[vars$c.textAlign]: 'left',
|
6901
|
+
[vars$c.textColor]: globalRefs$5.colors.surface.dark,
|
6575
6902
|
variant: {
|
6576
6903
|
h1: {
|
6577
|
-
[vars$
|
6578
|
-
[vars$
|
6579
|
-
[vars$
|
6904
|
+
[vars$c.fontSize]: globalRefs$5.typography.h1.size,
|
6905
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
|
6906
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h1.font,
|
6580
6907
|
},
|
6581
6908
|
h2: {
|
6582
|
-
[vars$
|
6583
|
-
[vars$
|
6584
|
-
[vars$
|
6909
|
+
[vars$c.fontSize]: globalRefs$5.typography.h2.size,
|
6910
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
|
6911
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h2.font,
|
6585
6912
|
},
|
6586
6913
|
h3: {
|
6587
|
-
[vars$
|
6588
|
-
[vars$
|
6589
|
-
[vars$
|
6914
|
+
[vars$c.fontSize]: globalRefs$5.typography.h3.size,
|
6915
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
|
6916
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h3.font,
|
6590
6917
|
},
|
6591
6918
|
subtitle1: {
|
6592
|
-
[vars$
|
6593
|
-
[vars$
|
6594
|
-
[vars$
|
6919
|
+
[vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
|
6920
|
+
[vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
|
6921
|
+
[vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
|
6595
6922
|
},
|
6596
6923
|
subtitle2: {
|
6597
|
-
[vars$
|
6598
|
-
[vars$
|
6599
|
-
[vars$
|
6924
|
+
[vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
|
6925
|
+
[vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
|
6926
|
+
[vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
|
6600
6927
|
},
|
6601
6928
|
body1: {
|
6602
|
-
[vars$
|
6603
|
-
[vars$
|
6604
|
-
[vars$
|
6929
|
+
[vars$c.fontSize]: globalRefs$5.typography.body1.size,
|
6930
|
+
[vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
|
6931
|
+
[vars$c.fontFamily]: globalRefs$5.typography.body1.font,
|
6605
6932
|
},
|
6606
6933
|
body2: {
|
6607
|
-
[vars$
|
6608
|
-
[vars$
|
6609
|
-
[vars$
|
6934
|
+
[vars$c.fontSize]: globalRefs$5.typography.body2.size,
|
6935
|
+
[vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
|
6936
|
+
[vars$c.fontFamily]: globalRefs$5.typography.body2.font,
|
6610
6937
|
},
|
6611
6938
|
},
|
6612
6939
|
|
6613
6940
|
mode: {
|
6614
6941
|
primary: {
|
6615
|
-
[vars$
|
6942
|
+
[vars$c.textColor]: globalRefs$5.colors.primary.main,
|
6616
6943
|
},
|
6617
6944
|
secondary: {
|
6618
|
-
[vars$
|
6945
|
+
[vars$c.textColor]: globalRefs$5.colors.secondary.main,
|
6619
6946
|
},
|
6620
6947
|
error: {
|
6621
|
-
[vars$
|
6948
|
+
[vars$c.textColor]: globalRefs$5.colors.error.main,
|
6622
6949
|
},
|
6623
6950
|
success: {
|
6624
|
-
[vars$
|
6951
|
+
[vars$c.textColor]: globalRefs$5.colors.success.main,
|
6625
6952
|
},
|
6626
6953
|
},
|
6627
6954
|
|
6628
6955
|
textAlign: {
|
6629
|
-
right: { [vars$
|
6630
|
-
left: { [vars$
|
6631
|
-
center: { [vars$
|
6956
|
+
right: { [vars$c.textAlign]: 'right' },
|
6957
|
+
left: { [vars$c.textAlign]: 'left' },
|
6958
|
+
center: { [vars$c.textAlign]: 'center' },
|
6632
6959
|
},
|
6633
6960
|
|
6634
6961
|
_fullWidth: {
|
6635
|
-
[vars$
|
6962
|
+
[vars$c.hostWidth]: '100%',
|
6636
6963
|
},
|
6637
6964
|
|
6638
6965
|
_italic: {
|
6639
|
-
[vars$
|
6966
|
+
[vars$c.fontStyle]: 'italic',
|
6640
6967
|
},
|
6641
6968
|
|
6642
6969
|
_uppercase: {
|
6643
|
-
[vars$
|
6970
|
+
[vars$c.textTransform]: 'uppercase',
|
6644
6971
|
},
|
6645
6972
|
|
6646
6973
|
_lowercase: {
|
6647
|
-
[vars$
|
6974
|
+
[vars$c.textTransform]: 'lowercase',
|
6648
6975
|
},
|
6649
6976
|
};
|
6650
6977
|
|
6651
6978
|
var text$1 = /*#__PURE__*/Object.freeze({
|
6652
6979
|
__proto__: null,
|
6653
6980
|
default: text,
|
6654
|
-
vars: vars$
|
6981
|
+
vars: vars$c
|
6655
6982
|
});
|
6656
6983
|
|
6657
6984
|
const globalRefs$4 = getThemeRefs(globals);
|
6658
|
-
const vars$
|
6985
|
+
const vars$b = LinkClass.cssVarList;
|
6659
6986
|
|
6660
6987
|
const link = {
|
6661
|
-
[vars$
|
6988
|
+
[vars$b.cursor]: 'pointer',
|
6662
6989
|
|
6663
|
-
[vars$
|
6990
|
+
[vars$b.textColor]: globalRefs$4.colors.primary.main,
|
6664
6991
|
|
6665
6992
|
textAlign: {
|
6666
|
-
right: { [vars$
|
6667
|
-
left: { [vars$
|
6668
|
-
center: { [vars$
|
6993
|
+
right: { [vars$b.textAlign]: 'right' },
|
6994
|
+
left: { [vars$b.textAlign]: 'left' },
|
6995
|
+
center: { [vars$b.textAlign]: 'center' },
|
6669
6996
|
},
|
6670
6997
|
|
6671
6998
|
_fullWidth: {
|
6672
|
-
[vars$
|
6999
|
+
[vars$b.hostWidth]: '100%',
|
6673
7000
|
},
|
6674
7001
|
|
6675
7002
|
mode: {
|
6676
7003
|
primary: {
|
6677
|
-
[vars$
|
7004
|
+
[vars$b.textColor]: globalRefs$4.colors.primary.main,
|
6678
7005
|
},
|
6679
7006
|
secondary: {
|
6680
|
-
[vars$
|
7007
|
+
[vars$b.textColor]: globalRefs$4.colors.secondary.main,
|
6681
7008
|
},
|
6682
7009
|
error: {
|
6683
|
-
[vars$
|
7010
|
+
[vars$b.textColor]: globalRefs$4.colors.error.main,
|
6684
7011
|
},
|
6685
7012
|
success: {
|
6686
|
-
[vars$
|
7013
|
+
[vars$b.textColor]: globalRefs$4.colors.success.main,
|
6687
7014
|
},
|
6688
7015
|
},
|
6689
7016
|
};
|
@@ -6691,7 +7018,7 @@ const link = {
|
|
6691
7018
|
var link$1 = /*#__PURE__*/Object.freeze({
|
6692
7019
|
__proto__: null,
|
6693
7020
|
default: link,
|
6694
|
-
vars: vars$
|
7021
|
+
vars: vars$b
|
6695
7022
|
});
|
6696
7023
|
|
6697
7024
|
const globalRefs$3 = getThemeRefs(globals);
|
@@ -6702,7 +7029,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
6702
7029
|
thickness: '2px',
|
6703
7030
|
spacing: '10px',
|
6704
7031
|
},
|
6705
|
-
componentName$
|
7032
|
+
componentName$m
|
6706
7033
|
);
|
6707
7034
|
|
6708
7035
|
const divider = {
|
@@ -6731,7 +7058,7 @@ const divider = {
|
|
6731
7058
|
},
|
6732
7059
|
};
|
6733
7060
|
|
6734
|
-
const vars$
|
7061
|
+
const vars$a = {
|
6735
7062
|
...compVars$1,
|
6736
7063
|
...helperVars$1,
|
6737
7064
|
};
|
@@ -6739,81 +7066,81 @@ const vars$9 = {
|
|
6739
7066
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
6740
7067
|
__proto__: null,
|
6741
7068
|
default: divider,
|
6742
|
-
vars: vars$
|
7069
|
+
vars: vars$a
|
6743
7070
|
});
|
6744
7071
|
|
6745
|
-
const vars$
|
7072
|
+
const vars$9 = PasscodeClass.cssVarList;
|
6746
7073
|
|
6747
7074
|
const passcode = {
|
6748
|
-
[vars$
|
6749
|
-
[vars$
|
6750
|
-
[vars$
|
6751
|
-
[vars$
|
6752
|
-
[vars$
|
6753
|
-
[vars$
|
6754
|
-
[vars$
|
6755
|
-
[vars$
|
6756
|
-
[vars$
|
6757
|
-
[vars$
|
6758
|
-
[vars$
|
6759
|
-
[vars$
|
6760
|
-
[vars$
|
6761
|
-
[vars$
|
7075
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
7076
|
+
[vars$9.fontSize]: refs.fontSize,
|
7077
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
7078
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
7079
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
7080
|
+
[vars$9.digitValueTextColor]: refs.valueTextColor,
|
7081
|
+
[vars$9.digitPadding]: '0',
|
7082
|
+
[vars$9.digitTextAlign]: 'center',
|
7083
|
+
[vars$9.digitSpacing]: '4px',
|
7084
|
+
[vars$9.hostWidth]: refs.width,
|
7085
|
+
[vars$9.digitOutlineColor]: 'transparent',
|
7086
|
+
[vars$9.digitOutlineWidth]: refs.outlineWidth,
|
7087
|
+
[vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
7088
|
+
[vars$9.digitSize]: refs.inputHeight,
|
6762
7089
|
|
6763
7090
|
_hideCursor: {
|
6764
|
-
[vars$
|
7091
|
+
[vars$9.digitCaretTextColor]: 'transparent',
|
6765
7092
|
},
|
6766
7093
|
};
|
6767
7094
|
|
6768
7095
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
6769
7096
|
__proto__: null,
|
6770
7097
|
default: passcode,
|
6771
|
-
vars: vars$
|
7098
|
+
vars: vars$9
|
6772
7099
|
});
|
6773
7100
|
|
6774
7101
|
const globalRefs$2 = getThemeRefs(globals);
|
6775
|
-
const vars$
|
7102
|
+
const vars$8 = LoaderLinearClass.cssVarList;
|
6776
7103
|
|
6777
7104
|
const loaderLinear = {
|
6778
|
-
[vars$
|
6779
|
-
[vars$
|
7105
|
+
[vars$8.hostDisplay]: 'inline-block',
|
7106
|
+
[vars$8.hostWidth]: '100%',
|
6780
7107
|
|
6781
|
-
[vars$
|
6782
|
-
[vars$
|
7108
|
+
[vars$8.barColor]: globalRefs$2.colors.surface.contrast,
|
7109
|
+
[vars$8.barWidth]: '20%',
|
6783
7110
|
|
6784
|
-
[vars$
|
6785
|
-
[vars$
|
7111
|
+
[vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
|
7112
|
+
[vars$8.barBorderRadius]: '4px',
|
6786
7113
|
|
6787
|
-
[vars$
|
6788
|
-
[vars$
|
6789
|
-
[vars$
|
6790
|
-
[vars$
|
7114
|
+
[vars$8.animationDuration]: '2s',
|
7115
|
+
[vars$8.animationTimingFunction]: 'linear',
|
7116
|
+
[vars$8.animationIterationCount]: 'infinite',
|
7117
|
+
[vars$8.verticalPadding]: '0.25em',
|
6791
7118
|
|
6792
7119
|
size: {
|
6793
|
-
xs: { [vars$
|
6794
|
-
sm: { [vars$
|
6795
|
-
md: { [vars$
|
6796
|
-
lg: { [vars$
|
7120
|
+
xs: { [vars$8.barHeight]: '2px' },
|
7121
|
+
sm: { [vars$8.barHeight]: '4px' },
|
7122
|
+
md: { [vars$8.barHeight]: '6px' },
|
7123
|
+
lg: { [vars$8.barHeight]: '8px' },
|
6797
7124
|
},
|
6798
7125
|
|
6799
7126
|
mode: {
|
6800
7127
|
primary: {
|
6801
|
-
[vars$
|
7128
|
+
[vars$8.barColor]: globalRefs$2.colors.primary.main,
|
6802
7129
|
},
|
6803
7130
|
secondary: {
|
6804
|
-
[vars$
|
7131
|
+
[vars$8.barColor]: globalRefs$2.colors.secondary.main,
|
6805
7132
|
},
|
6806
7133
|
},
|
6807
7134
|
|
6808
7135
|
_hidden: {
|
6809
|
-
[vars$
|
7136
|
+
[vars$8.hostDisplay]: 'none',
|
6810
7137
|
},
|
6811
7138
|
};
|
6812
7139
|
|
6813
7140
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
6814
7141
|
__proto__: null,
|
6815
7142
|
default: loaderLinear,
|
6816
|
-
vars: vars$
|
7143
|
+
vars: vars$8
|
6817
7144
|
});
|
6818
7145
|
|
6819
7146
|
const globalRefs$1 = getThemeRefs(globals);
|
@@ -6831,7 +7158,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
6831
7158
|
},
|
6832
7159
|
},
|
6833
7160
|
},
|
6834
|
-
componentName$
|
7161
|
+
componentName$o
|
6835
7162
|
);
|
6836
7163
|
|
6837
7164
|
const loaderRadial = {
|
@@ -6860,7 +7187,7 @@ const loaderRadial = {
|
|
6860
7187
|
[compVars.hostDisplay]: 'none',
|
6861
7188
|
},
|
6862
7189
|
};
|
6863
|
-
const vars$
|
7190
|
+
const vars$7 = {
|
6864
7191
|
...compVars,
|
6865
7192
|
...helperVars,
|
6866
7193
|
};
|
@@ -6868,43 +7195,43 @@ const vars$6 = {
|
|
6868
7195
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
6869
7196
|
__proto__: null,
|
6870
7197
|
default: loaderRadial,
|
6871
|
-
vars: vars$
|
7198
|
+
vars: vars$7
|
6872
7199
|
});
|
6873
7200
|
|
6874
7201
|
const globalRefs = getThemeRefs(globals);
|
6875
|
-
const vars$
|
7202
|
+
const vars$6 = ComboBoxClass.cssVarList;
|
6876
7203
|
|
6877
7204
|
const comboBox = {
|
6878
|
-
[vars$
|
6879
|
-
[vars$
|
6880
|
-
[vars$
|
6881
|
-
[vars$
|
6882
|
-
[vars$
|
6883
|
-
[vars$
|
6884
|
-
[vars$
|
6885
|
-
[vars$
|
6886
|
-
[vars$
|
6887
|
-
[vars$
|
6888
|
-
[vars$
|
6889
|
-
[vars$
|
6890
|
-
[vars$
|
6891
|
-
[vars$
|
6892
|
-
[vars$
|
6893
|
-
[vars$
|
6894
|
-
[vars$
|
6895
|
-
[vars$
|
6896
|
-
[vars$
|
6897
|
-
[vars$
|
6898
|
-
[vars$
|
6899
|
-
[vars$
|
6900
|
-
[vars$
|
7205
|
+
[vars$6.hostWidth]: refs.width,
|
7206
|
+
[vars$6.fontSize]: refs.fontSize,
|
7207
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
7208
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
7209
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
7210
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
7211
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
7212
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
7213
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
7214
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
7215
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
7216
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
7217
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
7218
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
7219
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
7220
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7221
|
+
[vars$6.inputBackgroundColor]: refs.backgroundColor,
|
7222
|
+
[vars$6.inputHorizontalPadding]: refs.horizontalPadding,
|
7223
|
+
[vars$6.inputHeight]: refs.inputHeight,
|
7224
|
+
[vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
|
7225
|
+
[vars$6.inputDropdownButtonCursor]: 'pointer',
|
7226
|
+
[vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
|
7227
|
+
[vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
6901
7228
|
|
6902
7229
|
_readonly: {
|
6903
|
-
[vars$
|
7230
|
+
[vars$6.inputDropdownButtonCursor]: 'default',
|
6904
7231
|
},
|
6905
7232
|
|
6906
|
-
[vars$
|
6907
|
-
[vars$
|
7233
|
+
[vars$6.overlay.minHeight]: '400px',
|
7234
|
+
[vars$6.overlay.margin]: '0 auto',
|
6908
7235
|
|
6909
7236
|
// [vars.overlayCursor]: 'pointer',
|
6910
7237
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
@@ -6915,23 +7242,58 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
6915
7242
|
__proto__: null,
|
6916
7243
|
comboBox: comboBox,
|
6917
7244
|
default: comboBox,
|
6918
|
-
vars: vars$
|
7245
|
+
vars: vars$6
|
6919
7246
|
});
|
6920
7247
|
|
6921
|
-
const vars$
|
7248
|
+
const vars$5 = ImageClass.cssVarList;
|
6922
7249
|
|
6923
7250
|
const image = {};
|
6924
7251
|
|
6925
7252
|
var image$1 = /*#__PURE__*/Object.freeze({
|
6926
7253
|
__proto__: null,
|
6927
7254
|
default: image,
|
6928
|
-
vars: vars$
|
7255
|
+
vars: vars$5
|
6929
7256
|
});
|
6930
7257
|
|
6931
|
-
const vars$
|
7258
|
+
const vars$4 = PhoneFieldClass.cssVarList;
|
6932
7259
|
|
6933
7260
|
const phoneField = {
|
6934
|
-
[vars$
|
7261
|
+
[vars$4.hostWidth]: refs.width,
|
7262
|
+
[vars$4.fontSize]: refs.fontSize,
|
7263
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
7264
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
7265
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
7266
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
7267
|
+
[vars$4.inputValueTextColor]: refs.valueTextColor,
|
7268
|
+
[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7269
|
+
[vars$4.inputBorderStyle]: refs.borderStyle,
|
7270
|
+
[vars$4.inputBorderWidth]: refs.borderWidth,
|
7271
|
+
[vars$4.inputBorderColor]: refs.borderColor,
|
7272
|
+
[vars$4.inputBorderRadius]: refs.borderRadius,
|
7273
|
+
[vars$4.inputOutlineStyle]: refs.outlineStyle,
|
7274
|
+
[vars$4.inputOutlineWidth]: refs.outlineWidth,
|
7275
|
+
[vars$4.inputOutlineColor]: refs.outlineColor,
|
7276
|
+
[vars$4.inputOutlineOffset]: refs.outlineOffset,
|
7277
|
+
[vars$4.phoneInputWidth]: refs.minWidth,
|
7278
|
+
[vars$4.countryCodeInputWidth]: '5em',
|
7279
|
+
[vars$4.countryCodeDropdownWidth]: '20em',
|
7280
|
+
|
7281
|
+
// '@overlay': {
|
7282
|
+
// overlayItemBackgroundColor: 'red'
|
7283
|
+
// }
|
7284
|
+
};
|
7285
|
+
|
7286
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7287
|
+
__proto__: null,
|
7288
|
+
default: phoneField,
|
7289
|
+
vars: vars$4
|
7290
|
+
});
|
7291
|
+
|
7292
|
+
const vars$3 = PhoneFieldInputBoxClass.cssVarList;
|
7293
|
+
|
7294
|
+
const phoneInputBoxField = {
|
7295
|
+
[vars$3.hostWidth]: '16em',
|
7296
|
+
[vars$3.hostMinWidth]: refs.minWidth,
|
6935
7297
|
[vars$3.fontSize]: refs.fontSize,
|
6936
7298
|
[vars$3.fontFamily]: refs.fontFamily,
|
6937
7299
|
[vars$3.labelTextColor]: refs.labelTextColor,
|
@@ -6947,18 +7309,14 @@ const phoneField = {
|
|
6947
7309
|
[vars$3.inputOutlineWidth]: refs.outlineWidth,
|
6948
7310
|
[vars$3.inputOutlineColor]: refs.outlineColor,
|
6949
7311
|
[vars$3.inputOutlineOffset]: refs.outlineOffset,
|
6950
|
-
|
6951
|
-
|
6952
|
-
|
6953
|
-
|
6954
|
-
// '@overlay': {
|
6955
|
-
// overlayItemBackgroundColor: 'red'
|
6956
|
-
// }
|
7312
|
+
_fullWidth: {
|
7313
|
+
[vars$3.hostWidth]: refs.width,
|
7314
|
+
},
|
6957
7315
|
};
|
6958
7316
|
|
6959
|
-
var
|
7317
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
6960
7318
|
__proto__: null,
|
6961
|
-
default:
|
7319
|
+
default: phoneInputBoxField,
|
6962
7320
|
vars: vars$3
|
6963
7321
|
});
|
6964
7322
|
|
@@ -7073,6 +7431,7 @@ const components = {
|
|
7073
7431
|
comboBox: comboBox$1,
|
7074
7432
|
image: image$1,
|
7075
7433
|
phoneField: phoneField$1,
|
7434
|
+
phoneInputBoxField: phoneInputBoxField$1,
|
7076
7435
|
newPassword: newPassword$1,
|
7077
7436
|
inputWrapper,
|
7078
7437
|
uploadFile: uploadFile$1,
|
@@ -7088,7 +7447,7 @@ const vars = Object.keys(components).reduce(
|
|
7088
7447
|
);
|
7089
7448
|
|
7090
7449
|
const defaultTheme = { globals, components: theme };
|
7091
|
-
const themeVars = { globals: vars$
|
7450
|
+
const themeVars = { globals: vars$p, components: vars };
|
7092
7451
|
|
7093
|
-
export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
7452
|
+
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 };
|
7094
7453
|
//# sourceMappingURL=index.esm.js.map
|