@descope/web-components-ui 1.0.291 → 1.0.293
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1102 -819
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1123 -793
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-policy-validation-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPasswordClass.js +30 -2
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +51 -3
- package/src/components/descope-new-password/index.js +1 -0
- package/src/components/descope-policy-validation/PolicyValidationClass.js +220 -0
- package/src/components/descope-policy-validation/helpers.js +2 -0
- package/src/components/descope-policy-validation/index.js +5 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/inputWrapper.js +3 -1
- package/src/theme/components/newPassword.js +5 -0
- package/src/theme/components/policyValidation.js +29 -0
package/dist/index.esm.js
CHANGED
@@ -1354,7 +1354,7 @@ const clickableMixin = (superclass) =>
|
|
1354
1354
|
}
|
1355
1355
|
};
|
1356
1356
|
|
1357
|
-
const componentName$
|
1357
|
+
const componentName$Q = getComponentName('button');
|
1358
1358
|
|
1359
1359
|
const resetStyles = `
|
1360
1360
|
:host {
|
@@ -1392,7 +1392,7 @@ const iconStyles = `
|
|
1392
1392
|
|
1393
1393
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1394
1394
|
|
1395
|
-
const { host: host$
|
1395
|
+
const { host: host$m, label: label$a } = {
|
1396
1396
|
host: { selector: () => ':host' },
|
1397
1397
|
label: { selector: '::part(label)' },
|
1398
1398
|
};
|
@@ -1404,7 +1404,7 @@ const ButtonClass = compose(
|
|
1404
1404
|
mappings: {
|
1405
1405
|
hostWidth: { property: 'width' },
|
1406
1406
|
hostHeight: { property: 'height' },
|
1407
|
-
hostDirection: { ...host$
|
1407
|
+
hostDirection: { ...host$m, property: 'direction' },
|
1408
1408
|
fontSize: {},
|
1409
1409
|
fontFamily: {},
|
1410
1410
|
|
@@ -1456,7 +1456,7 @@ const ButtonClass = compose(
|
|
1456
1456
|
}
|
1457
1457
|
`,
|
1458
1458
|
excludeAttrsSync: ['tabindex'],
|
1459
|
-
componentName: componentName$
|
1459
|
+
componentName: componentName$Q,
|
1460
1460
|
})
|
1461
1461
|
);
|
1462
1462
|
|
@@ -1493,7 +1493,7 @@ loadingIndicatorStyles = `
|
|
1493
1493
|
}
|
1494
1494
|
`;
|
1495
1495
|
|
1496
|
-
customElements.define(componentName$
|
1496
|
+
customElements.define(componentName$Q, ButtonClass);
|
1497
1497
|
|
1498
1498
|
const createBaseInputClass = (...args) =>
|
1499
1499
|
compose(
|
@@ -1503,11 +1503,11 @@ const createBaseInputClass = (...args) =>
|
|
1503
1503
|
inputEventsDispatchingMixin
|
1504
1504
|
)(createBaseClass(...args));
|
1505
1505
|
|
1506
|
-
const componentName$
|
1506
|
+
const componentName$P = getComponentName('boolean-field-internal');
|
1507
1507
|
|
1508
1508
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1509
1509
|
|
1510
|
-
const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$
|
1510
|
+
const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
|
1511
1511
|
|
1512
1512
|
class BooleanInputInternal extends BaseInputClass$8 {
|
1513
1513
|
static get observedAttributes() {
|
@@ -1583,14 +1583,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1583
1583
|
|
1584
1584
|
const template = document.createElement('template');
|
1585
1585
|
template.innerHTML = `
|
1586
|
-
<${componentName$
|
1586
|
+
<${componentName$P}
|
1587
1587
|
tabindex="-1"
|
1588
1588
|
slot="input"
|
1589
|
-
></${componentName$
|
1589
|
+
></${componentName$P}>
|
1590
1590
|
`;
|
1591
1591
|
|
1592
1592
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1593
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1593
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$P);
|
1594
1594
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1595
1595
|
|
1596
1596
|
forwardAttrs(this, this.inputElement, {
|
@@ -1789,10 +1789,10 @@ descope-boolean-field-internal {
|
|
1789
1789
|
}
|
1790
1790
|
`;
|
1791
1791
|
|
1792
|
-
const componentName$
|
1792
|
+
const componentName$O = getComponentName('checkbox');
|
1793
1793
|
|
1794
1794
|
const {
|
1795
|
-
host: host$
|
1795
|
+
host: host$l,
|
1796
1796
|
component: component$1,
|
1797
1797
|
checkboxElement,
|
1798
1798
|
checkboxSurface,
|
@@ -1814,10 +1814,10 @@ const {
|
|
1814
1814
|
const CheckboxClass = compose(
|
1815
1815
|
createStyleMixin({
|
1816
1816
|
mappings: {
|
1817
|
-
hostWidth: { ...host$
|
1818
|
-
hostDirection: { ...host$
|
1817
|
+
hostWidth: { ...host$l, property: 'width' },
|
1818
|
+
hostDirection: { ...host$l, property: 'direction' },
|
1819
1819
|
|
1820
|
-
fontSize: [host$
|
1820
|
+
fontSize: [host$l, checkboxElement, checkboxLabel$1],
|
1821
1821
|
fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
|
1822
1822
|
|
1823
1823
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -1895,18 +1895,18 @@ const CheckboxClass = compose(
|
|
1895
1895
|
}
|
1896
1896
|
`,
|
1897
1897
|
excludeAttrsSync: ['label', 'tabindex'],
|
1898
|
-
componentName: componentName$
|
1898
|
+
componentName: componentName$O,
|
1899
1899
|
})
|
1900
1900
|
);
|
1901
1901
|
|
1902
|
-
customElements.define(componentName$
|
1902
|
+
customElements.define(componentName$P, BooleanInputInternal);
|
1903
1903
|
|
1904
|
-
customElements.define(componentName$
|
1904
|
+
customElements.define(componentName$O, CheckboxClass);
|
1905
1905
|
|
1906
|
-
const componentName$
|
1906
|
+
const componentName$N = getComponentName('switch-toggle');
|
1907
1907
|
|
1908
1908
|
const {
|
1909
|
-
host: host$
|
1909
|
+
host: host$k,
|
1910
1910
|
component,
|
1911
1911
|
checkboxElement: track,
|
1912
1912
|
checkboxSurface: knob,
|
@@ -1928,8 +1928,8 @@ const {
|
|
1928
1928
|
const SwitchToggleClass = compose(
|
1929
1929
|
createStyleMixin({
|
1930
1930
|
mappings: {
|
1931
|
-
hostWidth: { ...host$
|
1932
|
-
hostDirection: { ...host$
|
1931
|
+
hostWidth: { ...host$k, property: 'width' },
|
1932
|
+
hostDirection: { ...host$k, property: 'direction' },
|
1933
1933
|
|
1934
1934
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1935
1935
|
fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
|
@@ -2035,17 +2035,17 @@ const SwitchToggleClass = compose(
|
|
2035
2035
|
}
|
2036
2036
|
`,
|
2037
2037
|
excludeAttrsSync: ['label', 'tabindex'],
|
2038
|
-
componentName: componentName$
|
2038
|
+
componentName: componentName$N,
|
2039
2039
|
})
|
2040
2040
|
);
|
2041
2041
|
|
2042
|
-
customElements.define(componentName$
|
2042
|
+
customElements.define(componentName$N, SwitchToggleClass);
|
2043
2043
|
|
2044
|
-
const componentName$
|
2044
|
+
const componentName$M = getComponentName('loader-linear');
|
2045
2045
|
|
2046
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2046
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > div' }) {
|
2047
2047
|
static get componentName() {
|
2048
|
-
return componentName$
|
2048
|
+
return componentName$M;
|
2049
2049
|
}
|
2050
2050
|
|
2051
2051
|
constructor() {
|
@@ -2081,18 +2081,18 @@ const selectors$2 = {
|
|
2081
2081
|
host: { selector: () => ':host' },
|
2082
2082
|
};
|
2083
2083
|
|
2084
|
-
const { after: after$1, host: host$
|
2084
|
+
const { after: after$1, host: host$j } = selectors$2;
|
2085
2085
|
|
2086
2086
|
const LoaderLinearClass = compose(
|
2087
2087
|
createStyleMixin({
|
2088
2088
|
mappings: {
|
2089
2089
|
hostDisplay: {},
|
2090
|
-
hostWidth: { ...host$
|
2090
|
+
hostWidth: { ...host$j, property: 'width' },
|
2091
2091
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
2092
2092
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
2093
2093
|
verticalPadding: [
|
2094
|
-
{ ...host$
|
2095
|
-
{ ...host$
|
2094
|
+
{ ...host$j, property: 'padding-top' },
|
2095
|
+
{ ...host$j, property: 'padding-bottom' },
|
2096
2096
|
],
|
2097
2097
|
barBackgroundColor: { property: 'background-color' },
|
2098
2098
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -2106,11 +2106,11 @@ const LoaderLinearClass = compose(
|
|
2106
2106
|
componentNameValidationMixin
|
2107
2107
|
)(RawLoaderLinear);
|
2108
2108
|
|
2109
|
-
customElements.define(componentName$
|
2109
|
+
customElements.define(componentName$M, LoaderLinearClass);
|
2110
2110
|
|
2111
|
-
const componentName$
|
2111
|
+
const componentName$L = getComponentName('loader-radial');
|
2112
2112
|
|
2113
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2113
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
|
2114
2114
|
constructor() {
|
2115
2115
|
super();
|
2116
2116
|
|
@@ -2154,11 +2154,11 @@ const LoaderRadialClass = compose(
|
|
2154
2154
|
componentNameValidationMixin
|
2155
2155
|
)(RawLoaderRadial);
|
2156
2156
|
|
2157
|
-
customElements.define(componentName$
|
2157
|
+
customElements.define(componentName$L, LoaderRadialClass);
|
2158
2158
|
|
2159
|
-
const componentName$
|
2159
|
+
const componentName$K = getComponentName('container');
|
2160
2160
|
|
2161
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2161
|
+
class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
|
2162
2162
|
constructor() {
|
2163
2163
|
super();
|
2164
2164
|
|
@@ -2211,13 +2211,13 @@ const ContainerClass = compose(
|
|
2211
2211
|
componentNameValidationMixin
|
2212
2212
|
)(RawContainer);
|
2213
2213
|
|
2214
|
-
customElements.define(componentName$
|
2214
|
+
customElements.define(componentName$K, ContainerClass);
|
2215
2215
|
|
2216
2216
|
// eslint-disable-next-line max-classes-per-file
|
2217
2217
|
|
2218
|
-
const componentName$
|
2218
|
+
const componentName$J = getComponentName('text');
|
2219
2219
|
|
2220
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2220
|
+
class RawText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > slot' }) {
|
2221
2221
|
constructor() {
|
2222
2222
|
super();
|
2223
2223
|
|
@@ -2277,8 +2277,8 @@ const TextClass = compose(
|
|
2277
2277
|
customTextMixin
|
2278
2278
|
)(RawText);
|
2279
2279
|
|
2280
|
-
const componentName$
|
2281
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2280
|
+
const componentName$I = getComponentName('divider');
|
2281
|
+
class RawDivider extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
|
2282
2282
|
constructor() {
|
2283
2283
|
super();
|
2284
2284
|
|
@@ -2324,7 +2324,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$H, baseS
|
|
2324
2324
|
}
|
2325
2325
|
|
2326
2326
|
const textVars$3 = TextClass.cssVarList;
|
2327
|
-
const { host: host$
|
2327
|
+
const { host: host$i, before, after, text: text$3 } = {
|
2328
2328
|
host: { selector: () => ':host' },
|
2329
2329
|
before: { selector: '::before' },
|
2330
2330
|
after: { selector: '::after' },
|
@@ -2334,8 +2334,8 @@ const { host: host$h, before, after, text: text$3 } = {
|
|
2334
2334
|
const DividerClass = compose(
|
2335
2335
|
createStyleMixin({
|
2336
2336
|
mappings: {
|
2337
|
-
hostWidth: { ...host$
|
2338
|
-
hostPadding: { ...host$
|
2337
|
+
hostWidth: { ...host$i, property: 'width' },
|
2338
|
+
hostPadding: { ...host$i, property: 'padding' },
|
2339
2339
|
hostDirection: { ...text$3, property: 'direction' },
|
2340
2340
|
|
2341
2341
|
minHeight: {},
|
@@ -2377,12 +2377,12 @@ const DividerClass = compose(
|
|
2377
2377
|
componentNameValidationMixin
|
2378
2378
|
)(RawDivider);
|
2379
2379
|
|
2380
|
-
customElements.define(componentName$
|
2380
|
+
customElements.define(componentName$J, TextClass);
|
2381
2381
|
|
2382
|
-
customElements.define(componentName$
|
2382
|
+
customElements.define(componentName$I, DividerClass);
|
2383
2383
|
|
2384
2384
|
const {
|
2385
|
-
host: host$
|
2385
|
+
host: host$h,
|
2386
2386
|
label: label$9,
|
2387
2387
|
placeholder: placeholder$3,
|
2388
2388
|
requiredIndicator: requiredIndicator$9,
|
@@ -2407,12 +2407,12 @@ const {
|
|
2407
2407
|
|
2408
2408
|
var textFieldMappings = {
|
2409
2409
|
// we apply font-size also on the host so we can set its width with em
|
2410
|
-
fontSize: [{}, host$
|
2410
|
+
fontSize: [{}, host$h],
|
2411
2411
|
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2412
2412
|
|
2413
|
-
hostWidth: { ...host$
|
2414
|
-
hostMinWidth: { ...host$
|
2415
|
-
hostDirection: { ...host$
|
2413
|
+
hostWidth: { ...host$h, property: 'width' },
|
2414
|
+
hostMinWidth: { ...host$h, property: 'min-width' },
|
2415
|
+
hostDirection: { ...host$h, property: 'direction' },
|
2416
2416
|
|
2417
2417
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2418
2418
|
|
@@ -2457,7 +2457,7 @@ var textFieldMappings = {
|
|
2457
2457
|
],
|
2458
2458
|
};
|
2459
2459
|
|
2460
|
-
const componentName$
|
2460
|
+
const componentName$H = getComponentName('email-field');
|
2461
2461
|
|
2462
2462
|
const customMixin$8 = (superclass) =>
|
2463
2463
|
class EmailFieldMixinClass extends superclass {
|
@@ -2492,15 +2492,15 @@ const EmailFieldClass = compose(
|
|
2492
2492
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2493
2493
|
`,
|
2494
2494
|
excludeAttrsSync: ['tabindex'],
|
2495
|
-
componentName: componentName$
|
2495
|
+
componentName: componentName$H,
|
2496
2496
|
})
|
2497
2497
|
);
|
2498
2498
|
|
2499
|
-
customElements.define(componentName$
|
2499
|
+
customElements.define(componentName$H, EmailFieldClass);
|
2500
2500
|
|
2501
|
-
const componentName$
|
2501
|
+
const componentName$G = getComponentName('link');
|
2502
2502
|
|
2503
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2503
|
+
class RawLink extends createBaseClass({ componentName: componentName$G, baseSelector: ':host a' }) {
|
2504
2504
|
constructor() {
|
2505
2505
|
super();
|
2506
2506
|
|
@@ -2546,12 +2546,12 @@ const selectors$1 = {
|
|
2546
2546
|
text: { selector: () => TextClass.componentName },
|
2547
2547
|
};
|
2548
2548
|
|
2549
|
-
const { anchor, text: text$2, host: host$
|
2549
|
+
const { anchor, text: text$2, host: host$g, wrapper: wrapper$1 } = selectors$1;
|
2550
2550
|
|
2551
2551
|
const LinkClass = compose(
|
2552
2552
|
createStyleMixin({
|
2553
2553
|
mappings: {
|
2554
|
-
hostWidth: { ...host$
|
2554
|
+
hostWidth: { ...host$g, property: 'width' },
|
2555
2555
|
hostDirection: { ...text$2, property: 'direction' },
|
2556
2556
|
textAlign: wrapper$1,
|
2557
2557
|
textColor: [
|
@@ -2565,7 +2565,7 @@ const LinkClass = compose(
|
|
2565
2565
|
componentNameValidationMixin
|
2566
2566
|
)(RawLink);
|
2567
2567
|
|
2568
|
-
customElements.define(componentName$
|
2568
|
+
customElements.define(componentName$G, LinkClass);
|
2569
2569
|
|
2570
2570
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2571
2571
|
let style;
|
@@ -2617,37 +2617,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2617
2617
|
return CssVarImageClass;
|
2618
2618
|
};
|
2619
2619
|
|
2620
|
-
const componentName$
|
2620
|
+
const componentName$F = getComponentName('logo');
|
2621
2621
|
|
2622
2622
|
const LogoClass = createCssVarImageClass({
|
2623
|
-
componentName: componentName$
|
2623
|
+
componentName: componentName$F,
|
2624
2624
|
varName: 'url',
|
2625
2625
|
fallbackVarName: 'fallbackUrl',
|
2626
2626
|
});
|
2627
2627
|
|
2628
|
-
customElements.define(componentName$
|
2628
|
+
customElements.define(componentName$F, LogoClass);
|
2629
2629
|
|
2630
|
-
const componentName$
|
2630
|
+
const componentName$E = getComponentName('totp-image');
|
2631
2631
|
|
2632
2632
|
const TotpImageClass = createCssVarImageClass({
|
2633
|
-
componentName: componentName$
|
2633
|
+
componentName: componentName$E,
|
2634
2634
|
varName: 'url',
|
2635
2635
|
fallbackVarName: 'fallbackUrl',
|
2636
2636
|
});
|
2637
2637
|
|
2638
|
-
customElements.define(componentName$
|
2638
|
+
customElements.define(componentName$E, TotpImageClass);
|
2639
2639
|
|
2640
|
-
const componentName$
|
2640
|
+
const componentName$D = getComponentName('notp-image');
|
2641
2641
|
|
2642
2642
|
const NotpImageClass = createCssVarImageClass({
|
2643
|
-
componentName: componentName$
|
2643
|
+
componentName: componentName$D,
|
2644
2644
|
varName: 'url',
|
2645
2645
|
fallbackVarName: 'fallbackUrl',
|
2646
2646
|
});
|
2647
2647
|
|
2648
|
-
customElements.define(componentName$
|
2648
|
+
customElements.define(componentName$D, NotpImageClass);
|
2649
2649
|
|
2650
|
-
const componentName$
|
2650
|
+
const componentName$C = getComponentName('number-field');
|
2651
2651
|
|
2652
2652
|
const NumberFieldClass = compose(
|
2653
2653
|
createStyleMixin({
|
@@ -2673,11 +2673,11 @@ const NumberFieldClass = compose(
|
|
2673
2673
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2674
2674
|
`,
|
2675
2675
|
excludeAttrsSync: ['tabindex'],
|
2676
|
-
componentName: componentName$
|
2676
|
+
componentName: componentName$C,
|
2677
2677
|
})
|
2678
2678
|
);
|
2679
2679
|
|
2680
|
-
customElements.define(componentName$
|
2680
|
+
customElements.define(componentName$C, NumberFieldClass);
|
2681
2681
|
|
2682
2682
|
const focusElement = (ele) => {
|
2683
2683
|
ele?.focus();
|
@@ -2695,13 +2695,13 @@ const getSanitizedCharacters = (str) => {
|
|
2695
2695
|
|
2696
2696
|
/* eslint-disable no-param-reassign */
|
2697
2697
|
|
2698
|
-
const componentName$
|
2698
|
+
const componentName$B = getComponentName('passcode-internal');
|
2699
2699
|
|
2700
2700
|
const observedAttributes$5 = ['digits', 'loading'];
|
2701
2701
|
|
2702
2702
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2703
2703
|
|
2704
|
-
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$
|
2704
|
+
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
|
2705
2705
|
|
2706
2706
|
class PasscodeInternal extends BaseInputClass$7 {
|
2707
2707
|
static get observedAttributes() {
|
@@ -2927,7 +2927,7 @@ class PasscodeInternal extends BaseInputClass$7 {
|
|
2927
2927
|
}
|
2928
2928
|
}
|
2929
2929
|
|
2930
|
-
const componentName$
|
2930
|
+
const componentName$A = getComponentName('text-field');
|
2931
2931
|
|
2932
2932
|
const observedAttrs = ['type'];
|
2933
2933
|
|
@@ -2977,11 +2977,11 @@ const TextFieldClass = compose(
|
|
2977
2977
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2978
2978
|
`,
|
2979
2979
|
excludeAttrsSync: ['tabindex'],
|
2980
|
-
componentName: componentName$
|
2980
|
+
componentName: componentName$A,
|
2981
2981
|
})
|
2982
2982
|
);
|
2983
2983
|
|
2984
|
-
const componentName$
|
2984
|
+
const componentName$z = getComponentName('passcode');
|
2985
2985
|
|
2986
2986
|
const observedAttributes$4 = ['digits'];
|
2987
2987
|
|
@@ -3000,17 +3000,17 @@ const customMixin$6 = (superclass) =>
|
|
3000
3000
|
const template = document.createElement('template');
|
3001
3001
|
|
3002
3002
|
template.innerHTML = `
|
3003
|
-
<${componentName$
|
3003
|
+
<${componentName$B}
|
3004
3004
|
bordered="true"
|
3005
3005
|
name="code"
|
3006
3006
|
tabindex="-1"
|
3007
3007
|
slot="input"
|
3008
|
-
><slot></slot></${componentName$
|
3008
|
+
><slot></slot></${componentName$B}>
|
3009
3009
|
`;
|
3010
3010
|
|
3011
3011
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3012
3012
|
|
3013
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3013
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$B);
|
3014
3014
|
|
3015
3015
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
3016
3016
|
}
|
@@ -3025,7 +3025,7 @@ const customMixin$6 = (superclass) =>
|
|
3025
3025
|
};
|
3026
3026
|
|
3027
3027
|
const {
|
3028
|
-
host: host$
|
3028
|
+
host: host$f,
|
3029
3029
|
digitField,
|
3030
3030
|
label: label$8,
|
3031
3031
|
requiredIndicator: requiredIndicator$8,
|
@@ -3048,10 +3048,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
3048
3048
|
const PasscodeClass = compose(
|
3049
3049
|
createStyleMixin({
|
3050
3050
|
mappings: {
|
3051
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
3051
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$f],
|
3052
3052
|
hostWidth: { property: 'width' },
|
3053
|
-
hostDirection: { ...host$
|
3054
|
-
fontFamily: [host$
|
3053
|
+
hostDirection: { ...host$f, property: 'direction' },
|
3054
|
+
fontFamily: [host$f, { ...label$8 }],
|
3055
3055
|
labelTextColor: [
|
3056
3056
|
{ ...label$8, property: 'color' },
|
3057
3057
|
{ ...requiredIndicator$8, property: 'color' },
|
@@ -3157,15 +3157,15 @@ const PasscodeClass = compose(
|
|
3157
3157
|
${resetInputCursor('vaadin-text-field')}
|
3158
3158
|
`,
|
3159
3159
|
excludeAttrsSync: ['tabindex'],
|
3160
|
-
componentName: componentName$
|
3160
|
+
componentName: componentName$z,
|
3161
3161
|
})
|
3162
3162
|
);
|
3163
3163
|
|
3164
|
-
customElements.define(componentName$
|
3164
|
+
customElements.define(componentName$A, TextFieldClass);
|
3165
3165
|
|
3166
|
-
customElements.define(componentName$
|
3166
|
+
customElements.define(componentName$B, PasscodeInternal);
|
3167
3167
|
|
3168
|
-
customElements.define(componentName$
|
3168
|
+
customElements.define(componentName$z, PasscodeClass);
|
3169
3169
|
|
3170
3170
|
const passwordDraggableMixin = (superclass) =>
|
3171
3171
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3201,10 +3201,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3201
3201
|
}
|
3202
3202
|
};
|
3203
3203
|
|
3204
|
-
const componentName$
|
3204
|
+
const componentName$y = getComponentName('password');
|
3205
3205
|
|
3206
3206
|
const {
|
3207
|
-
host: host$
|
3207
|
+
host: host$e,
|
3208
3208
|
inputField: inputField$5,
|
3209
3209
|
inputElement: inputElement$2,
|
3210
3210
|
inputElementPlaceholder,
|
@@ -3230,10 +3230,10 @@ const {
|
|
3230
3230
|
const PasswordClass = compose(
|
3231
3231
|
createStyleMixin({
|
3232
3232
|
mappings: {
|
3233
|
-
hostWidth: { ...host$
|
3234
|
-
hostMinWidth: { ...host$
|
3235
|
-
hostDirection: { ...host$
|
3236
|
-
fontSize: [{}, host$
|
3233
|
+
hostWidth: { ...host$e, property: 'width' },
|
3234
|
+
hostMinWidth: { ...host$e, property: 'min-width' },
|
3235
|
+
hostDirection: { ...host$e, property: 'direction' },
|
3236
|
+
fontSize: [{}, host$e],
|
3237
3237
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3238
3238
|
inputHeight: { ...inputField$5, property: 'height' },
|
3239
3239
|
inputHorizontalPadding: [
|
@@ -3330,16 +3330,16 @@ const PasswordClass = compose(
|
|
3330
3330
|
}
|
3331
3331
|
`,
|
3332
3332
|
excludeAttrsSync: ['tabindex'],
|
3333
|
-
componentName: componentName$
|
3333
|
+
componentName: componentName$y,
|
3334
3334
|
})
|
3335
3335
|
);
|
3336
3336
|
|
3337
|
-
customElements.define(componentName$
|
3337
|
+
customElements.define(componentName$y, PasswordClass);
|
3338
3338
|
|
3339
|
-
const componentName$
|
3339
|
+
const componentName$x = getComponentName('text-area');
|
3340
3340
|
|
3341
3341
|
const {
|
3342
|
-
host: host$
|
3342
|
+
host: host$d,
|
3343
3343
|
label: label$6,
|
3344
3344
|
placeholder: placeholder$2,
|
3345
3345
|
inputField: inputField$4,
|
@@ -3361,10 +3361,10 @@ const {
|
|
3361
3361
|
const TextAreaClass = compose(
|
3362
3362
|
createStyleMixin({
|
3363
3363
|
mappings: {
|
3364
|
-
hostWidth: { ...host$
|
3365
|
-
hostMinWidth: { ...host$
|
3366
|
-
hostDirection: { ...host$
|
3367
|
-
fontSize: [host$
|
3364
|
+
hostWidth: { ...host$d, property: 'width' },
|
3365
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
3366
|
+
hostDirection: { ...host$d, property: 'direction' },
|
3367
|
+
fontSize: [host$d, textArea$2],
|
3368
3368
|
fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
|
3369
3369
|
labelTextColor: [
|
3370
3370
|
{ ...label$6, property: 'color' },
|
@@ -3412,17 +3412,17 @@ const TextAreaClass = compose(
|
|
3412
3412
|
${resetInputCursor('vaadin-text-area')}
|
3413
3413
|
`,
|
3414
3414
|
excludeAttrsSync: ['tabindex'],
|
3415
|
-
componentName: componentName$
|
3415
|
+
componentName: componentName$x,
|
3416
3416
|
})
|
3417
3417
|
);
|
3418
3418
|
|
3419
|
-
customElements.define(componentName$
|
3419
|
+
customElements.define(componentName$x, TextAreaClass);
|
3420
3420
|
|
3421
3421
|
const observedAttributes$3 = ['src', 'alt'];
|
3422
3422
|
|
3423
|
-
const componentName$
|
3423
|
+
const componentName$w = getComponentName('image');
|
3424
3424
|
|
3425
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3425
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$w, baseSelector: ':host > img' });
|
3426
3426
|
class RawImage extends BaseClass$1 {
|
3427
3427
|
static get observedAttributes() {
|
3428
3428
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3462,9 +3462,9 @@ const ImageClass = compose(
|
|
3462
3462
|
draggableMixin
|
3463
3463
|
)(RawImage);
|
3464
3464
|
|
3465
|
-
customElements.define(componentName$
|
3465
|
+
customElements.define(componentName$w, ImageClass);
|
3466
3466
|
|
3467
|
-
const componentName$
|
3467
|
+
const componentName$v = getComponentName('combo-box');
|
3468
3468
|
|
3469
3469
|
const ComboBoxMixin = (superclass) =>
|
3470
3470
|
class ComboBoxMixinClass extends superclass {
|
@@ -3690,7 +3690,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3690
3690
|
};
|
3691
3691
|
|
3692
3692
|
const {
|
3693
|
-
host: host$
|
3693
|
+
host: host$c,
|
3694
3694
|
inputField: inputField$3,
|
3695
3695
|
inputElement: inputElement$1,
|
3696
3696
|
placeholder: placeholder$1,
|
@@ -3716,10 +3716,10 @@ const {
|
|
3716
3716
|
const ComboBoxClass = compose(
|
3717
3717
|
createStyleMixin({
|
3718
3718
|
mappings: {
|
3719
|
-
hostWidth: { ...host$
|
3720
|
-
hostDirection: { ...host$
|
3719
|
+
hostWidth: { ...host$c, property: 'width' },
|
3720
|
+
hostDirection: { ...host$c, property: 'direction' },
|
3721
3721
|
// we apply font-size also on the host so we can set its width with em
|
3722
|
-
fontSize: [{}, host$
|
3722
|
+
fontSize: [{}, host$c],
|
3723
3723
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
3724
3724
|
labelTextColor: [
|
3725
3725
|
{ ...label$5, property: 'color' },
|
@@ -3847,12 +3847,12 @@ const ComboBoxClass = compose(
|
|
3847
3847
|
// and reset items to an empty array, and opening the list box with no items
|
3848
3848
|
// to display.
|
3849
3849
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3850
|
-
componentName: componentName$
|
3850
|
+
componentName: componentName$v,
|
3851
3851
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3852
3852
|
})
|
3853
3853
|
);
|
3854
3854
|
|
3855
|
-
customElements.define(componentName$
|
3855
|
+
customElements.define(componentName$v, ComboBoxClass);
|
3856
3856
|
|
3857
3857
|
var CountryCodes = [
|
3858
3858
|
// United States should be the first option
|
@@ -5095,7 +5095,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5095
5095
|
</div>
|
5096
5096
|
`;
|
5097
5097
|
|
5098
|
-
const componentName$
|
5098
|
+
const componentName$u = getComponentName('phone-field-internal');
|
5099
5099
|
|
5100
5100
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5101
5101
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -5107,7 +5107,7 @@ const mapAttrs$1 = {
|
|
5107
5107
|
|
5108
5108
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5109
5109
|
|
5110
|
-
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$
|
5110
|
+
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
|
5111
5111
|
|
5112
5112
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
5113
5113
|
static get observedAttributes() {
|
@@ -5279,12 +5279,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5279
5279
|
}
|
5280
5280
|
};
|
5281
5281
|
|
5282
|
-
customElements.define(componentName$
|
5282
|
+
customElements.define(componentName$u, PhoneFieldInternal$1);
|
5283
5283
|
|
5284
5284
|
const textVars$1 = TextFieldClass.cssVarList;
|
5285
5285
|
const comboVars = ComboBoxClass.cssVarList;
|
5286
5286
|
|
5287
|
-
const componentName$
|
5287
|
+
const componentName$t = getComponentName('phone-field');
|
5288
5288
|
|
5289
5289
|
const customMixin$5 = (superclass) =>
|
5290
5290
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5298,15 +5298,15 @@ const customMixin$5 = (superclass) =>
|
|
5298
5298
|
const template = document.createElement('template');
|
5299
5299
|
|
5300
5300
|
template.innerHTML = `
|
5301
|
-
<${componentName$
|
5301
|
+
<${componentName$u}
|
5302
5302
|
tabindex="-1"
|
5303
5303
|
slot="input"
|
5304
|
-
></${componentName$
|
5304
|
+
></${componentName$u}>
|
5305
5305
|
`;
|
5306
5306
|
|
5307
5307
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5308
5308
|
|
5309
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5309
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$u);
|
5310
5310
|
|
5311
5311
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5312
5312
|
includeAttrs: [
|
@@ -5326,7 +5326,7 @@ const customMixin$5 = (superclass) =>
|
|
5326
5326
|
};
|
5327
5327
|
|
5328
5328
|
const {
|
5329
|
-
host: host$
|
5329
|
+
host: host$b,
|
5330
5330
|
label: label$4,
|
5331
5331
|
requiredIndicator: requiredIndicator$4,
|
5332
5332
|
inputField: inputField$2,
|
@@ -5351,7 +5351,7 @@ const PhoneFieldClass = compose(
|
|
5351
5351
|
createStyleMixin({
|
5352
5352
|
mappings: {
|
5353
5353
|
fontSize: [
|
5354
|
-
host$
|
5354
|
+
host$b,
|
5355
5355
|
inputField$2,
|
5356
5356
|
{
|
5357
5357
|
selector: TextFieldClass.componentName,
|
@@ -5372,11 +5372,11 @@ const PhoneFieldClass = compose(
|
|
5372
5372
|
},
|
5373
5373
|
],
|
5374
5374
|
hostWidth: [
|
5375
|
-
{ ...host$
|
5375
|
+
{ ...host$b, property: 'width' },
|
5376
5376
|
{ ...phoneInput$1, property: 'width' },
|
5377
5377
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5378
5378
|
],
|
5379
|
-
hostDirection: { ...host$
|
5379
|
+
hostDirection: { ...host$b, property: 'direction' },
|
5380
5380
|
|
5381
5381
|
inputBorderStyle: [
|
5382
5382
|
{ ...inputField$2, property: 'border-style' },
|
@@ -5502,17 +5502,17 @@ const PhoneFieldClass = compose(
|
|
5502
5502
|
${resetInputLabelPosition('vaadin-text-field')}
|
5503
5503
|
`,
|
5504
5504
|
excludeAttrsSync: ['tabindex'],
|
5505
|
-
componentName: componentName$
|
5505
|
+
componentName: componentName$t,
|
5506
5506
|
})
|
5507
5507
|
);
|
5508
5508
|
|
5509
|
-
customElements.define(componentName$
|
5509
|
+
customElements.define(componentName$t, PhoneFieldClass);
|
5510
5510
|
|
5511
5511
|
const getCountryByCodeId = (countryCode) => {
|
5512
5512
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5513
5513
|
};
|
5514
5514
|
|
5515
|
-
const componentName$
|
5515
|
+
const componentName$s = getComponentName('phone-field-internal-input-box');
|
5516
5516
|
|
5517
5517
|
const observedAttributes$2 = [
|
5518
5518
|
'disabled',
|
@@ -5526,7 +5526,7 @@ const mapAttrs = {
|
|
5526
5526
|
'phone-input-placeholder': 'placeholder',
|
5527
5527
|
};
|
5528
5528
|
|
5529
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
5529
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
|
5530
5530
|
|
5531
5531
|
class PhoneFieldInternal extends BaseInputClass$5 {
|
5532
5532
|
static get observedAttributes() {
|
@@ -5665,11 +5665,11 @@ class PhoneFieldInternal extends BaseInputClass$5 {
|
|
5665
5665
|
}
|
5666
5666
|
}
|
5667
5667
|
|
5668
|
-
customElements.define(componentName$
|
5668
|
+
customElements.define(componentName$s, PhoneFieldInternal);
|
5669
5669
|
|
5670
5670
|
const textVars = TextFieldClass.cssVarList;
|
5671
5671
|
|
5672
|
-
const componentName$
|
5672
|
+
const componentName$r = getComponentName('phone-input-box-field');
|
5673
5673
|
|
5674
5674
|
const customMixin$4 = (superclass) =>
|
5675
5675
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5683,15 +5683,15 @@ const customMixin$4 = (superclass) =>
|
|
5683
5683
|
const template = document.createElement('template');
|
5684
5684
|
|
5685
5685
|
template.innerHTML = `
|
5686
|
-
<${componentName$
|
5686
|
+
<${componentName$s}
|
5687
5687
|
tabindex="-1"
|
5688
5688
|
slot="input"
|
5689
|
-
></${componentName$
|
5689
|
+
></${componentName$s}>
|
5690
5690
|
`;
|
5691
5691
|
|
5692
5692
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5693
5693
|
|
5694
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5694
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
5695
5695
|
|
5696
5696
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5697
5697
|
includeAttrs: [
|
@@ -5708,7 +5708,7 @@ const customMixin$4 = (superclass) =>
|
|
5708
5708
|
}
|
5709
5709
|
};
|
5710
5710
|
|
5711
|
-
const { host: host$
|
5711
|
+
const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
5712
5712
|
host: { selector: () => ':host' },
|
5713
5713
|
label: { selector: '::part(label)' },
|
5714
5714
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5722,7 +5722,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5722
5722
|
createStyleMixin({
|
5723
5723
|
mappings: {
|
5724
5724
|
fontSize: [
|
5725
|
-
host$
|
5725
|
+
host$a,
|
5726
5726
|
inputField$1,
|
5727
5727
|
{
|
5728
5728
|
selector: TextFieldClass.componentName,
|
@@ -5730,9 +5730,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
5730
5730
|
},
|
5731
5731
|
],
|
5732
5732
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
5733
|
-
hostWidth: { ...host$
|
5734
|
-
hostMinWidth: { ...host$
|
5735
|
-
hostDirection: { ...host$
|
5733
|
+
hostWidth: { ...host$a, property: 'width' },
|
5734
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
5735
|
+
hostDirection: { ...host$a, property: 'direction' },
|
5736
5736
|
|
5737
5737
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5738
5738
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -5824,16 +5824,239 @@ const PhoneFieldInputBoxClass = compose(
|
|
5824
5824
|
${resetInputLabelPosition('vaadin-text-field')}
|
5825
5825
|
`,
|
5826
5826
|
excludeAttrsSync: ['tabindex'],
|
5827
|
-
componentName: componentName$
|
5827
|
+
componentName: componentName$r,
|
5828
5828
|
})
|
5829
5829
|
);
|
5830
5830
|
|
5831
|
-
customElements.define(componentName$
|
5831
|
+
customElements.define(componentName$r, PhoneFieldInputBoxClass);
|
5832
|
+
|
5833
|
+
const componentName$q = getComponentName('new-password-internal');
|
5834
|
+
|
5835
|
+
const interpolateString = (template, values) =>
|
5836
|
+
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
5837
|
+
|
5838
|
+
// eslint-disable-next-line max-classes-per-file
|
5839
|
+
|
5840
|
+
const componentName$p = getComponentName('policy-validation');
|
5841
|
+
|
5842
|
+
const overrideAttrs = ['data-password-policy-value-minlength'];
|
5843
|
+
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
5844
|
+
const policyAttrs = ['label', 'value', ...dataAttrs];
|
5845
|
+
|
5846
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
5847
|
+
#availablePolicies;
|
5848
|
+
|
5849
|
+
#activePolicies = [];
|
5850
|
+
|
5851
|
+
#overrides;
|
5852
|
+
|
5853
|
+
static get observedAttributes() {
|
5854
|
+
return policyAttrs;
|
5855
|
+
}
|
5856
|
+
|
5857
|
+
constructor() {
|
5858
|
+
super();
|
5859
|
+
|
5860
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
5861
|
+
<div>
|
5862
|
+
<div class="label"></div>
|
5863
|
+
<ul></ul>
|
5864
|
+
</div>
|
5865
|
+
<style>
|
5866
|
+
:host > div {
|
5867
|
+
width: 100%;
|
5868
|
+
display: flex;
|
5869
|
+
flex-direction: column;
|
5870
|
+
box-sizing: border-box;
|
5871
|
+
}
|
5872
|
+
.label {
|
5873
|
+
max-width: 100%;
|
5874
|
+
text-wrap: wrap;
|
5875
|
+
overflow-wrap: break-word;
|
5876
|
+
}
|
5877
|
+
.hide-label .label {
|
5878
|
+
display: none;
|
5879
|
+
}
|
5880
|
+
ul {
|
5881
|
+
display: flex;
|
5882
|
+
flex-direction: column;
|
5883
|
+
padding: 0;
|
5884
|
+
margin: 0;
|
5885
|
+
}
|
5886
|
+
ul, li {
|
5887
|
+
margin: 0;
|
5888
|
+
padding: 0;
|
5889
|
+
list-style: none;
|
5890
|
+
}
|
5891
|
+
li::before {
|
5892
|
+
display: inline-block;
|
5893
|
+
width: 1em;
|
5894
|
+
text-align: center;
|
5895
|
+
}
|
5896
|
+
</style>
|
5897
|
+
`;
|
5898
|
+
|
5899
|
+
this.panel = this.shadowRoot.querySelector(':host > div');
|
5900
|
+
this.label = this.shadowRoot.querySelector('.label');
|
5901
|
+
this.list = this.shadowRoot.querySelector('ul');
|
5902
|
+
}
|
5903
|
+
|
5904
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
5905
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
5906
|
+
if (oldValue !== newValue) {
|
5907
|
+
if (attrName === 'label') {
|
5908
|
+
this.updateLabel(newValue);
|
5909
|
+
}
|
5910
|
+
|
5911
|
+
// we're don't know the order in which the attributes are forwarded, so we're trying to render every time
|
5912
|
+
// once `data` and `active-policies` are populated, the render will be executed.
|
5913
|
+
// once the `overrides` object is updated, we want to re-render the panel.
|
5914
|
+
if (dataAttrs.includes(attrName)) {
|
5915
|
+
if (attrName === 'data') {
|
5916
|
+
try {
|
5917
|
+
this.availablePolicies = JSON.parse(newValue);
|
5918
|
+
} catch {
|
5919
|
+
// eslint-disable-next-line no-console
|
5920
|
+
console.error('Failed to set available policies');
|
5921
|
+
}
|
5922
|
+
}
|
5923
|
+
if (attrName === 'active-policies') {
|
5924
|
+
this.#activePolicies = (newValue || '').split(',');
|
5925
|
+
}
|
5926
|
+
|
5927
|
+
if (attrName === 'data-password-policy-value-minlength') {
|
5928
|
+
const ln = Number(newValue);
|
5929
|
+
if (!Number.isNaN(ln) && ln > 0) {
|
5930
|
+
this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
|
5931
|
+
}
|
5932
|
+
}
|
5933
|
+
}
|
5934
|
+
|
5935
|
+
this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
|
5936
|
+
}
|
5937
|
+
}
|
5938
|
+
|
5939
|
+
get availablePolicies() {
|
5940
|
+
return this.#availablePolicies || [];
|
5941
|
+
}
|
5942
|
+
|
5943
|
+
set availablePolicies(val) {
|
5944
|
+
this.#availablePolicies = val;
|
5945
|
+
}
|
5946
|
+
|
5947
|
+
get value() {
|
5948
|
+
return this.getAttribute('value') || '';
|
5949
|
+
}
|
5950
|
+
|
5951
|
+
validate() {
|
5952
|
+
let policies = this.#availablePolicies;
|
5953
|
+
|
5954
|
+
if (this.#overrides) {
|
5955
|
+
policies = this.#availablePolicies.map((policy) =>
|
5956
|
+
this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
|
5957
|
+
);
|
5958
|
+
}
|
5959
|
+
|
5960
|
+
return this.#activePolicies.reduce((results, id) => {
|
5961
|
+
const policy = policies.find((p) => p.id === id);
|
5962
|
+
|
5963
|
+
if (!policy) {
|
5964
|
+
return results;
|
5965
|
+
}
|
5966
|
+
|
5967
|
+
const { pattern, message, data } = policy;
|
5968
|
+
|
5969
|
+
if (!pattern || !message) {
|
5970
|
+
return results;
|
5971
|
+
}
|
5972
|
+
|
5973
|
+
const exp = new RegExp(interpolateString(pattern, data));
|
5974
|
+
|
5975
|
+
const validationResult = {
|
5976
|
+
valid: exp.test(this.value),
|
5977
|
+
message: interpolateString(message, data),
|
5978
|
+
id,
|
5979
|
+
};
|
5980
|
+
|
5981
|
+
results.push(validationResult);
|
5982
|
+
|
5983
|
+
return results;
|
5984
|
+
}, []);
|
5985
|
+
}
|
5986
|
+
|
5987
|
+
get isValid() {
|
5988
|
+
return !this.validate().some(({ valid }) => valid === false);
|
5989
|
+
}
|
5990
|
+
|
5991
|
+
getValidationItemTemplate({ valid, message }) {
|
5992
|
+
const status = !this.value ? 'none' : valid;
|
5993
|
+
return `
|
5994
|
+
<li class="item" data-valid="${status}">
|
5995
|
+
<span class="message">${message}</span>
|
5996
|
+
</li>
|
5997
|
+
`;
|
5998
|
+
}
|
5999
|
+
|
6000
|
+
renderItems(availablePolicies, activePolicies) {
|
6001
|
+
if (!availablePolicies || !activePolicies.length) {
|
6002
|
+
return;
|
6003
|
+
}
|
6004
|
+
|
6005
|
+
this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
|
6006
|
+
}
|
6007
|
+
|
6008
|
+
updateLabel(val) {
|
6009
|
+
if (!val) {
|
6010
|
+
this.classList.add('hide-label');
|
6011
|
+
this.label.innerHTML = '';
|
6012
|
+
} else {
|
6013
|
+
this.label.innerHTML = val;
|
6014
|
+
this.classList.remove('hide-label');
|
6015
|
+
}
|
6016
|
+
}
|
6017
|
+
}
|
6018
|
+
|
6019
|
+
const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
|
6020
|
+
host: { selector: () => ':host > div' },
|
6021
|
+
item: { selector: () => '.item' },
|
6022
|
+
symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
|
6023
|
+
symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
|
6024
|
+
symbolError: { selector: () => '.item[data-valid="false"]::before' },
|
6025
|
+
};
|
6026
|
+
|
6027
|
+
const PolicyValidationClass = compose(
|
6028
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
6029
|
+
createStyleMixin({
|
6030
|
+
mappings: {
|
6031
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
6032
|
+
fontSize: {},
|
6033
|
+
fontFamily: {},
|
6034
|
+
padding: {},
|
6035
|
+
borderWidth: { ...host$9, property: 'border-width' },
|
6036
|
+
borderStyle: { ...host$9, property: 'border-style' },
|
6037
|
+
borderColor: { ...host$9, property: 'border-color' },
|
6038
|
+
borderRadius: { ...host$9, property: 'border-radius' },
|
6039
|
+
backgroundColor: { ...host$9, property: 'background-color' },
|
6040
|
+
textColor: { property: 'color' },
|
6041
|
+
labelMargin: { ...host$9, property: 'gap' },
|
6042
|
+
itemsSpacing: { ...item, property: 'line-height' },
|
6043
|
+
itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
|
6044
|
+
itemSymbolErrorColor: { ...symbolError, property: 'color' },
|
6045
|
+
itemSymbolDefault: { ...symbolDefault, property: 'content' },
|
6046
|
+
itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
|
6047
|
+
itemSymbolError: { ...symbolError, property: 'content' },
|
6048
|
+
},
|
6049
|
+
}),
|
6050
|
+
draggableMixin,
|
6051
|
+
componentNameValidationMixin
|
6052
|
+
)(RawPolicyValidation);
|
5832
6053
|
|
5833
|
-
|
6054
|
+
customElements.define(componentName$p, PolicyValidationClass);
|
5834
6055
|
|
5835
6056
|
const componentName$o = getComponentName('new-password');
|
5836
6057
|
|
6058
|
+
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
6059
|
+
|
5837
6060
|
const customMixin$3 = (superclass) =>
|
5838
6061
|
class NewPasswordMixinClass extends superclass {
|
5839
6062
|
init() {
|
@@ -5842,16 +6065,16 @@ const customMixin$3 = (superclass) =>
|
|
5842
6065
|
const template = document.createElement('template');
|
5843
6066
|
|
5844
6067
|
template.innerHTML = `
|
5845
|
-
<${componentName$
|
6068
|
+
<${componentName$q}
|
5846
6069
|
name="new-password"
|
5847
6070
|
tabindex="-1"
|
5848
6071
|
slot="input"
|
5849
|
-
></${componentName$
|
6072
|
+
></${componentName$q}>
|
5850
6073
|
`;
|
5851
6074
|
|
5852
6075
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5853
6076
|
|
5854
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6077
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$q);
|
5855
6078
|
|
5856
6079
|
forwardAttrs(this, this.inputElement, {
|
5857
6080
|
includeAttrs: [
|
@@ -5867,18 +6090,32 @@ const customMixin$3 = (superclass) =>
|
|
5867
6090
|
'invalid',
|
5868
6091
|
'readonly',
|
5869
6092
|
'draggable',
|
6093
|
+
'has-validation',
|
6094
|
+
'policy-label',
|
6095
|
+
'active-policies',
|
6096
|
+
'available-policies',
|
6097
|
+
'data-password-policy-value-minlength',
|
5870
6098
|
],
|
5871
6099
|
});
|
5872
6100
|
}
|
5873
6101
|
};
|
5874
6102
|
|
5875
|
-
const {
|
6103
|
+
const {
|
6104
|
+
host: host$8,
|
6105
|
+
label: label$2,
|
6106
|
+
internalInputsWrapper,
|
6107
|
+
errorMessage: errorMessage$3,
|
6108
|
+
helperText: helperText$2,
|
6109
|
+
passwordInput,
|
6110
|
+
policyPreview,
|
6111
|
+
} = {
|
5876
6112
|
host: { selector: () => ':host' },
|
5877
6113
|
label: { selector: '::part(label)' },
|
5878
6114
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
5879
6115
|
helperText: { selector: '::part(helper-text)' },
|
5880
6116
|
errorMessage: { selector: '::part(error-message)' },
|
5881
6117
|
passwordInput: { selector: 'descope-password' },
|
6118
|
+
policyPreview: { selector: 'descope-policy-validation' },
|
5882
6119
|
};
|
5883
6120
|
|
5884
6121
|
const NewPasswordClass = compose(
|
@@ -5902,6 +6139,11 @@ const NewPasswordClass = compose(
|
|
5902
6139
|
],
|
5903
6140
|
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
5904
6141
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
6142
|
+
policyPreviewBackgroundColor: {
|
6143
|
+
...policyPreview,
|
6144
|
+
property: policyPreviewVars.backgroundColor,
|
6145
|
+
},
|
6146
|
+
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
5905
6147
|
},
|
5906
6148
|
}),
|
5907
6149
|
draggableMixin,
|
@@ -5940,7 +6182,6 @@ const NewPasswordClass = compose(
|
|
5940
6182
|
-webkit-mask-image: none;
|
5941
6183
|
min-height: 0;
|
5942
6184
|
width: 100%;
|
5943
|
-
height: 100%;
|
5944
6185
|
padding: 0;
|
5945
6186
|
}
|
5946
6187
|
descope-new-password-internal > .wrapper {
|
@@ -5956,6 +6197,13 @@ const NewPasswordClass = compose(
|
|
5956
6197
|
descope-new-password-internal vaadin-password-field::before {
|
5957
6198
|
height: initial;
|
5958
6199
|
}
|
6200
|
+
descope-policy-validation {
|
6201
|
+
margin-top: 8px;
|
6202
|
+
display: flex;
|
6203
|
+
}
|
6204
|
+
descope-policy-validation.hidden {
|
6205
|
+
display: none;
|
6206
|
+
}
|
5959
6207
|
`,
|
5960
6208
|
excludeAttrsSync: ['tabindex'],
|
5961
6209
|
componentName: componentName$o,
|
@@ -5969,6 +6217,7 @@ const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
|
|
5969
6217
|
|
5970
6218
|
const passwordInputAttrs = ['password-label', 'password-placeholder'];
|
5971
6219
|
const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
|
6220
|
+
const policyPanelAttrs = ['has-validation'];
|
5972
6221
|
const commonAttrs = [
|
5973
6222
|
'disabled',
|
5974
6223
|
'bordered',
|
@@ -5981,9 +6230,14 @@ const commonAttrs = [
|
|
5981
6230
|
'autocomplete',
|
5982
6231
|
];
|
5983
6232
|
|
5984
|
-
const inputRelatedAttrs = [].concat(
|
6233
|
+
const inputRelatedAttrs = [].concat(
|
6234
|
+
commonAttrs,
|
6235
|
+
passwordInputAttrs,
|
6236
|
+
confirmInputAttrs,
|
6237
|
+
policyPanelAttrs
|
6238
|
+
);
|
5985
6239
|
|
5986
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
6240
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
|
5987
6241
|
|
5988
6242
|
class NewPasswordInternal extends BaseInputClass$4 {
|
5989
6243
|
static get observedAttributes() {
|
@@ -6013,7 +6267,15 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6013
6267
|
return this.getAttribute('has-confirm') === 'true';
|
6014
6268
|
}
|
6015
6269
|
|
6270
|
+
get hasValidation() {
|
6271
|
+
return this.getAttribute('has-validation') === 'true';
|
6272
|
+
}
|
6273
|
+
|
6016
6274
|
getValidity() {
|
6275
|
+
if (!this.policyPanel.isValid) {
|
6276
|
+
return { patternMismatch: true };
|
6277
|
+
}
|
6278
|
+
|
6017
6279
|
if (this.isRequired && !this.value) {
|
6018
6280
|
return { valueMissing: true };
|
6019
6281
|
}
|
@@ -6044,7 +6306,12 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6044
6306
|
}
|
6045
6307
|
|
6046
6308
|
renderInputs(shouldRenderConfirm) {
|
6047
|
-
let template =
|
6309
|
+
let template = `
|
6310
|
+
<div>
|
6311
|
+
<descope-password data-id="password"></descope-password>
|
6312
|
+
<descope-policy-validation></descope-policy-validation>
|
6313
|
+
</div>
|
6314
|
+
`;
|
6048
6315
|
|
6049
6316
|
if (shouldRenderConfirm) {
|
6050
6317
|
template += `<descope-password data-id="confirm"></descope-password>`;
|
@@ -6054,6 +6321,7 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6054
6321
|
|
6055
6322
|
this.passwordInput = this.querySelector('[data-id="password"]');
|
6056
6323
|
this.confirmInput = this.querySelector('[data-id="confirm"]');
|
6324
|
+
this.policyPanel = this.querySelector('descope-policy-validation');
|
6057
6325
|
|
6058
6326
|
this.inputs = [this.passwordInput, this.confirmInput];
|
6059
6327
|
|
@@ -6064,6 +6332,23 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6064
6332
|
[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
|
6065
6333
|
this.attributeChangedCallback(attr, null, this.getAttribute(attr));
|
6066
6334
|
});
|
6335
|
+
|
6336
|
+
this.passwordInput.addEventListener('input', (e) => {
|
6337
|
+
this.policyPanel.setAttribute('value', e.target.value);
|
6338
|
+
});
|
6339
|
+
|
6340
|
+
forwardAttrs(this, this.policyPanel, {
|
6341
|
+
includeAttrs: [
|
6342
|
+
'policy-label',
|
6343
|
+
'available-policies',
|
6344
|
+
'active-policies',
|
6345
|
+
'data-password-policy-value-minlength',
|
6346
|
+
],
|
6347
|
+
mapAttrs: {
|
6348
|
+
'policy-label': 'label',
|
6349
|
+
'available-policies': 'data',
|
6350
|
+
},
|
6351
|
+
});
|
6067
6352
|
}
|
6068
6353
|
|
6069
6354
|
// the inputs are not required but we still want it to have a required
|
@@ -6123,6 +6408,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6123
6408
|
value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
|
6124
6409
|
}
|
6125
6410
|
|
6411
|
+
hidePolicy() {
|
6412
|
+
this.policyPanel.classList.add('hidden');
|
6413
|
+
}
|
6414
|
+
|
6415
|
+
showPolicy() {
|
6416
|
+
this.policyPanel.classList.remove('hidden');
|
6417
|
+
}
|
6418
|
+
|
6126
6419
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
6127
6420
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6128
6421
|
|
@@ -6144,11 +6437,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
|
|
6144
6437
|
newValue
|
6145
6438
|
);
|
6146
6439
|
}
|
6440
|
+
if (attrName === 'has-validation') {
|
6441
|
+
newValue === 'true' ? this.showPolicy() : this.hidePolicy();
|
6442
|
+
}
|
6147
6443
|
}
|
6148
6444
|
}
|
6149
6445
|
}
|
6150
6446
|
|
6151
|
-
customElements.define(componentName$
|
6447
|
+
customElements.define(componentName$q, NewPasswordInternal);
|
6152
6448
|
|
6153
6449
|
customElements.define(componentName$o, NewPasswordClass);
|
6154
6450
|
|
@@ -10144,33 +10440,33 @@ const globals = {
|
|
10144
10440
|
fonts,
|
10145
10441
|
direction,
|
10146
10442
|
};
|
10147
|
-
const vars$
|
10443
|
+
const vars$D = getThemeVars(globals);
|
10148
10444
|
|
10149
|
-
const globalRefs$
|
10445
|
+
const globalRefs$m = getThemeRefs(globals);
|
10150
10446
|
const compVars$5 = ButtonClass.cssVarList;
|
10151
10447
|
|
10152
10448
|
const mode = {
|
10153
|
-
primary: globalRefs$
|
10154
|
-
secondary: globalRefs$
|
10155
|
-
success: globalRefs$
|
10156
|
-
error: globalRefs$
|
10157
|
-
surface: globalRefs$
|
10449
|
+
primary: globalRefs$m.colors.primary,
|
10450
|
+
secondary: globalRefs$m.colors.secondary,
|
10451
|
+
success: globalRefs$m.colors.success,
|
10452
|
+
error: globalRefs$m.colors.error,
|
10453
|
+
surface: globalRefs$m.colors.surface,
|
10158
10454
|
};
|
10159
10455
|
|
10160
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
10456
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$Q);
|
10161
10457
|
|
10162
10458
|
const button = {
|
10163
10459
|
...helperTheme$3,
|
10164
10460
|
|
10165
|
-
[compVars$5.fontFamily]: globalRefs$
|
10461
|
+
[compVars$5.fontFamily]: globalRefs$m.fonts.font1.family,
|
10166
10462
|
|
10167
10463
|
[compVars$5.cursor]: 'pointer',
|
10168
10464
|
[compVars$5.hostHeight]: '3em',
|
10169
10465
|
[compVars$5.hostWidth]: 'auto',
|
10170
|
-
[compVars$5.hostDirection]: globalRefs$
|
10466
|
+
[compVars$5.hostDirection]: globalRefs$m.direction,
|
10171
10467
|
|
10172
|
-
[compVars$5.borderRadius]: globalRefs$
|
10173
|
-
[compVars$5.borderWidth]: globalRefs$
|
10468
|
+
[compVars$5.borderRadius]: globalRefs$m.radius.sm,
|
10469
|
+
[compVars$5.borderWidth]: globalRefs$m.border.xs,
|
10174
10470
|
[compVars$5.borderStyle]: 'solid',
|
10175
10471
|
[compVars$5.borderColor]: 'transparent',
|
10176
10472
|
|
@@ -10213,10 +10509,10 @@ const button = {
|
|
10213
10509
|
},
|
10214
10510
|
|
10215
10511
|
_disabled: {
|
10216
|
-
[helperVars$3.main]: globalRefs$
|
10217
|
-
[helperVars$3.dark]: globalRefs$
|
10218
|
-
[helperVars$3.light]: globalRefs$
|
10219
|
-
[helperVars$3.contrast]: globalRefs$
|
10512
|
+
[helperVars$3.main]: globalRefs$m.colors.surface.light,
|
10513
|
+
[helperVars$3.dark]: globalRefs$m.colors.surface.dark,
|
10514
|
+
[helperVars$3.light]: globalRefs$m.colors.surface.light,
|
10515
|
+
[helperVars$3.contrast]: globalRefs$m.colors.surface.main,
|
10220
10516
|
},
|
10221
10517
|
|
10222
10518
|
variant: {
|
@@ -10264,7 +10560,7 @@ const button = {
|
|
10264
10560
|
},
|
10265
10561
|
};
|
10266
10562
|
|
10267
|
-
const vars$
|
10563
|
+
const vars$C = {
|
10268
10564
|
...compVars$5,
|
10269
10565
|
...helperVars$3,
|
10270
10566
|
};
|
@@ -10272,26 +10568,28 @@ const vars$B = {
|
|
10272
10568
|
var button$1 = /*#__PURE__*/Object.freeze({
|
10273
10569
|
__proto__: null,
|
10274
10570
|
default: button,
|
10275
|
-
vars: vars$
|
10571
|
+
vars: vars$C
|
10276
10572
|
});
|
10277
10573
|
|
10278
10574
|
const componentName = getComponentName('input-wrapper');
|
10279
|
-
const globalRefs$
|
10575
|
+
const globalRefs$l = getThemeRefs(globals);
|
10280
10576
|
|
10281
|
-
const [theme$1, refs, vars$
|
10577
|
+
const [theme$1, refs, vars$B] = createHelperVars(
|
10282
10578
|
{
|
10283
|
-
labelTextColor: globalRefs$
|
10284
|
-
|
10285
|
-
|
10579
|
+
labelTextColor: globalRefs$l.colors.surface.dark,
|
10580
|
+
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
10581
|
+
valueTextColor: globalRefs$l.colors.surface.contrast,
|
10582
|
+
placeholderTextColor: globalRefs$l.colors.surface.dark,
|
10286
10583
|
requiredIndicator: "'*'",
|
10287
|
-
|
10288
|
-
|
10584
|
+
helperTextColor: globalRefs$l.colors.surface.dark,
|
10585
|
+
errorMessageTextColor: globalRefs$l.colors.error.main,
|
10586
|
+
successMessageTextColor: globalRefs$l.colors.success.main,
|
10289
10587
|
|
10290
|
-
borderWidth: globalRefs$
|
10291
|
-
borderRadius: globalRefs$
|
10588
|
+
borderWidth: globalRefs$l.border.xs,
|
10589
|
+
borderRadius: globalRefs$l.radius.xs,
|
10292
10590
|
borderColor: 'transparent',
|
10293
10591
|
|
10294
|
-
outlineWidth: globalRefs$
|
10592
|
+
outlineWidth: globalRefs$l.border.sm,
|
10295
10593
|
outlineStyle: 'solid',
|
10296
10594
|
outlineColor: 'transparent',
|
10297
10595
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -10302,11 +10600,11 @@ const [theme$1, refs, vars$A] = createHelperVars(
|
|
10302
10600
|
horizontalPadding: '0.5em',
|
10303
10601
|
verticalPadding: '0.5em',
|
10304
10602
|
|
10305
|
-
backgroundColor: globalRefs$
|
10603
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
10306
10604
|
|
10307
|
-
fontFamily: globalRefs$
|
10605
|
+
fontFamily: globalRefs$l.fonts.font1.family,
|
10308
10606
|
|
10309
|
-
direction: globalRefs$
|
10607
|
+
direction: globalRefs$l.direction,
|
10310
10608
|
|
10311
10609
|
overlayOpacity: '0.3',
|
10312
10610
|
|
@@ -10322,28 +10620,28 @@ const [theme$1, refs, vars$A] = createHelperVars(
|
|
10322
10620
|
},
|
10323
10621
|
|
10324
10622
|
_focused: {
|
10325
|
-
outlineColor: globalRefs$
|
10623
|
+
outlineColor: globalRefs$l.colors.surface.light,
|
10326
10624
|
_invalid: {
|
10327
|
-
outlineColor: globalRefs$
|
10625
|
+
outlineColor: globalRefs$l.colors.error.main,
|
10328
10626
|
},
|
10329
10627
|
},
|
10330
10628
|
|
10331
10629
|
_bordered: {
|
10332
|
-
outlineWidth: globalRefs$
|
10333
|
-
borderColor: globalRefs$
|
10630
|
+
outlineWidth: globalRefs$l.border.xs,
|
10631
|
+
borderColor: globalRefs$l.colors.surface.light,
|
10334
10632
|
borderStyle: 'solid',
|
10335
10633
|
_invalid: {
|
10336
|
-
borderColor: globalRefs$
|
10634
|
+
borderColor: globalRefs$l.colors.error.main,
|
10337
10635
|
},
|
10338
10636
|
},
|
10339
10637
|
|
10340
10638
|
_disabled: {
|
10341
|
-
labelTextColor: globalRefs$
|
10342
|
-
borderColor: globalRefs$
|
10343
|
-
valueTextColor: globalRefs$
|
10344
|
-
placeholderTextColor: globalRefs$
|
10345
|
-
helperTextColor: globalRefs$
|
10346
|
-
backgroundColor: globalRefs$
|
10639
|
+
labelTextColor: globalRefs$l.colors.surface.light,
|
10640
|
+
borderColor: globalRefs$l.colors.surface.light,
|
10641
|
+
valueTextColor: globalRefs$l.colors.surface.light,
|
10642
|
+
placeholderTextColor: globalRefs$l.colors.surface.light,
|
10643
|
+
helperTextColor: globalRefs$l.colors.surface.light,
|
10644
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
10347
10645
|
},
|
10348
10646
|
},
|
10349
10647
|
componentName
|
@@ -10353,22 +10651,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
10353
10651
|
__proto__: null,
|
10354
10652
|
default: theme$1,
|
10355
10653
|
refs: refs,
|
10356
|
-
vars: vars$
|
10654
|
+
vars: vars$B
|
10357
10655
|
});
|
10358
10656
|
|
10359
|
-
const vars$
|
10657
|
+
const vars$A = TextFieldClass.cssVarList;
|
10360
10658
|
|
10361
10659
|
const textField = {
|
10660
|
+
[vars$A.hostWidth]: refs.width,
|
10661
|
+
[vars$A.hostMinWidth]: refs.minWidth,
|
10662
|
+
[vars$A.hostDirection]: refs.direction,
|
10663
|
+
[vars$A.fontSize]: refs.fontSize,
|
10664
|
+
[vars$A.fontFamily]: refs.fontFamily,
|
10665
|
+
[vars$A.labelTextColor]: refs.labelTextColor,
|
10666
|
+
[vars$A.labelRequiredIndicator]: refs.requiredIndicator,
|
10667
|
+
[vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
|
10668
|
+
[vars$A.inputValueTextColor]: refs.valueTextColor,
|
10669
|
+
[vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
|
10670
|
+
[vars$A.inputBorderWidth]: refs.borderWidth,
|
10671
|
+
[vars$A.inputBorderStyle]: refs.borderStyle,
|
10672
|
+
[vars$A.inputBorderColor]: refs.borderColor,
|
10673
|
+
[vars$A.inputBorderRadius]: refs.borderRadius,
|
10674
|
+
[vars$A.inputOutlineWidth]: refs.outlineWidth,
|
10675
|
+
[vars$A.inputOutlineStyle]: refs.outlineStyle,
|
10676
|
+
[vars$A.inputOutlineColor]: refs.outlineColor,
|
10677
|
+
[vars$A.inputOutlineOffset]: refs.outlineOffset,
|
10678
|
+
[vars$A.inputBackgroundColor]: refs.backgroundColor,
|
10679
|
+
[vars$A.inputHeight]: refs.inputHeight,
|
10680
|
+
[vars$A.inputHorizontalPadding]: refs.horizontalPadding,
|
10681
|
+
[vars$A.helperTextColor]: refs.helperTextColor,
|
10682
|
+
textAlign: {
|
10683
|
+
right: { [vars$A.inputTextAlign]: 'right' },
|
10684
|
+
left: { [vars$A.inputTextAlign]: 'left' },
|
10685
|
+
center: { [vars$A.inputTextAlign]: 'center' },
|
10686
|
+
},
|
10687
|
+
};
|
10688
|
+
|
10689
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
10690
|
+
__proto__: null,
|
10691
|
+
default: textField,
|
10692
|
+
textField: textField,
|
10693
|
+
vars: vars$A
|
10694
|
+
});
|
10695
|
+
|
10696
|
+
const globalRefs$k = getThemeRefs(globals);
|
10697
|
+
const vars$z = PasswordClass.cssVarList;
|
10698
|
+
|
10699
|
+
const password = {
|
10362
10700
|
[vars$z.hostWidth]: refs.width,
|
10363
|
-
[vars$z.hostMinWidth]: refs.minWidth,
|
10364
10701
|
[vars$z.hostDirection]: refs.direction,
|
10365
10702
|
[vars$z.fontSize]: refs.fontSize,
|
10366
10703
|
[vars$z.fontFamily]: refs.fontFamily,
|
10367
10704
|
[vars$z.labelTextColor]: refs.labelTextColor,
|
10368
|
-
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
10369
10705
|
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
10706
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
10707
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
10708
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
10709
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
10370
10710
|
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
10371
|
-
[vars$z.
|
10711
|
+
[vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10372
10712
|
[vars$z.inputBorderWidth]: refs.borderWidth,
|
10373
10713
|
[vars$z.inputBorderStyle]: refs.borderStyle,
|
10374
10714
|
[vars$z.inputBorderColor]: refs.borderColor,
|
@@ -10377,40 +10717,29 @@ const textField = {
|
|
10377
10717
|
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
10378
10718
|
[vars$z.inputOutlineColor]: refs.outlineColor,
|
10379
10719
|
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
10380
|
-
[vars$z.
|
10381
|
-
[vars$z.
|
10382
|
-
[vars$z.
|
10383
|
-
[vars$z.helperTextColor]: refs.helperTextColor,
|
10384
|
-
textAlign: {
|
10385
|
-
right: { [vars$z.inputTextAlign]: 'right' },
|
10386
|
-
left: { [vars$z.inputTextAlign]: 'left' },
|
10387
|
-
center: { [vars$z.inputTextAlign]: 'center' },
|
10388
|
-
},
|
10720
|
+
[vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
|
10721
|
+
[vars$z.revealButtonSize]: refs.toggleButtonSize,
|
10722
|
+
[vars$z.revealButtonColor]: refs.placeholderTextColor,
|
10389
10723
|
};
|
10390
10724
|
|
10391
|
-
var
|
10725
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
10392
10726
|
__proto__: null,
|
10393
|
-
default:
|
10394
|
-
textField: textField,
|
10727
|
+
default: password,
|
10395
10728
|
vars: vars$z
|
10396
10729
|
});
|
10397
10730
|
|
10398
|
-
const
|
10399
|
-
const vars$y = PasswordClass.cssVarList;
|
10731
|
+
const vars$y = NumberFieldClass.cssVarList;
|
10400
10732
|
|
10401
|
-
const
|
10733
|
+
const numberField = {
|
10402
10734
|
[vars$y.hostWidth]: refs.width,
|
10735
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
10403
10736
|
[vars$y.hostDirection]: refs.direction,
|
10404
10737
|
[vars$y.fontSize]: refs.fontSize,
|
10405
10738
|
[vars$y.fontFamily]: refs.fontFamily,
|
10406
10739
|
[vars$y.labelTextColor]: refs.labelTextColor,
|
10407
10740
|
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
10408
|
-
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
10409
|
-
[vars$y.inputHeight]: refs.inputHeight,
|
10410
|
-
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
10411
|
-
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10412
10741
|
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
10413
|
-
[vars$y.
|
10742
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
10414
10743
|
[vars$y.inputBorderWidth]: refs.borderWidth,
|
10415
10744
|
[vars$y.inputBorderStyle]: refs.borderStyle,
|
10416
10745
|
[vars$y.inputBorderColor]: refs.borderColor,
|
@@ -10419,20 +10748,21 @@ const password = {
|
|
10419
10748
|
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
10420
10749
|
[vars$y.inputOutlineColor]: refs.outlineColor,
|
10421
10750
|
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
10422
|
-
[vars$y.
|
10423
|
-
[vars$y.
|
10424
|
-
[vars$y.
|
10751
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
10752
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10753
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
10754
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
10425
10755
|
};
|
10426
10756
|
|
10427
|
-
var
|
10757
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
10428
10758
|
__proto__: null,
|
10429
|
-
default:
|
10759
|
+
default: numberField,
|
10430
10760
|
vars: vars$y
|
10431
10761
|
});
|
10432
10762
|
|
10433
|
-
const vars$x =
|
10763
|
+
const vars$x = EmailFieldClass.cssVarList;
|
10434
10764
|
|
10435
|
-
const
|
10765
|
+
const emailField = {
|
10436
10766
|
[vars$x.hostWidth]: refs.width,
|
10437
10767
|
[vars$x.hostMinWidth]: refs.minWidth,
|
10438
10768
|
[vars$x.hostDirection]: refs.direction,
|
@@ -10441,6 +10771,7 @@ const numberField = {
|
|
10441
10771
|
[vars$x.labelTextColor]: refs.labelTextColor,
|
10442
10772
|
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
10443
10773
|
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
10774
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
10444
10775
|
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
10445
10776
|
[vars$x.inputBorderWidth]: refs.borderWidth,
|
10446
10777
|
[vars$x.inputBorderStyle]: refs.borderStyle,
|
@@ -10451,200 +10782,167 @@ const numberField = {
|
|
10451
10782
|
[vars$x.inputOutlineColor]: refs.outlineColor,
|
10452
10783
|
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
10453
10784
|
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
10454
|
-
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
10455
10785
|
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
10456
10786
|
[vars$x.inputHeight]: refs.inputHeight,
|
10457
10787
|
};
|
10458
10788
|
|
10459
|
-
var
|
10789
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
10460
10790
|
__proto__: null,
|
10461
|
-
default:
|
10791
|
+
default: emailField,
|
10462
10792
|
vars: vars$x
|
10463
10793
|
});
|
10464
10794
|
|
10465
|
-
const vars$w =
|
10795
|
+
const vars$w = TextAreaClass.cssVarList;
|
10466
10796
|
|
10467
|
-
const
|
10797
|
+
const textArea = {
|
10468
10798
|
[vars$w.hostWidth]: refs.width,
|
10469
10799
|
[vars$w.hostMinWidth]: refs.minWidth,
|
10470
10800
|
[vars$w.hostDirection]: refs.direction,
|
10471
10801
|
[vars$w.fontSize]: refs.fontSize,
|
10472
10802
|
[vars$w.fontFamily]: refs.fontFamily,
|
10473
10803
|
[vars$w.labelTextColor]: refs.labelTextColor,
|
10804
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
10474
10805
|
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
10806
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
10475
10807
|
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
10476
|
-
[vars$w.
|
10477
|
-
[vars$w.
|
10808
|
+
[vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10809
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
10478
10810
|
[vars$w.inputBorderWidth]: refs.borderWidth,
|
10479
10811
|
[vars$w.inputBorderStyle]: refs.borderStyle,
|
10480
10812
|
[vars$w.inputBorderColor]: refs.borderColor,
|
10481
|
-
[vars$w.inputBorderRadius]: refs.borderRadius,
|
10482
10813
|
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
10483
10814
|
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
10484
10815
|
[vars$w.inputOutlineColor]: refs.outlineColor,
|
10485
10816
|
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
10486
|
-
[vars$w.
|
10487
|
-
[vars$w.
|
10488
|
-
|
10817
|
+
[vars$w.inputResizeType]: 'vertical',
|
10818
|
+
[vars$w.inputMinHeight]: '5em',
|
10819
|
+
textAlign: {
|
10820
|
+
right: { [vars$w.inputTextAlign]: 'right' },
|
10821
|
+
left: { [vars$w.inputTextAlign]: 'left' },
|
10822
|
+
center: { [vars$w.inputTextAlign]: 'center' },
|
10823
|
+
},
|
10824
|
+
|
10825
|
+
_readonly: {
|
10826
|
+
[vars$w.inputResizeType]: 'none',
|
10827
|
+
},
|
10489
10828
|
};
|
10490
10829
|
|
10491
|
-
var
|
10830
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
10492
10831
|
__proto__: null,
|
10493
|
-
default:
|
10832
|
+
default: textArea,
|
10494
10833
|
vars: vars$w
|
10495
10834
|
});
|
10496
10835
|
|
10497
|
-
const vars$v =
|
10836
|
+
const vars$v = CheckboxClass.cssVarList;
|
10837
|
+
const checkboxSize = '1.35em';
|
10498
10838
|
|
10499
|
-
const
|
10839
|
+
const checkbox = {
|
10500
10840
|
[vars$v.hostWidth]: refs.width,
|
10501
|
-
[vars$v.hostMinWidth]: refs.minWidth,
|
10502
10841
|
[vars$v.hostDirection]: refs.direction,
|
10503
10842
|
[vars$v.fontSize]: refs.fontSize,
|
10504
10843
|
[vars$v.fontFamily]: refs.fontFamily,
|
10505
10844
|
[vars$v.labelTextColor]: refs.labelTextColor,
|
10506
10845
|
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
10846
|
+
[vars$v.labelFontWeight]: '400',
|
10847
|
+
[vars$v.labelLineHeight]: checkboxSize,
|
10848
|
+
[vars$v.labelSpacing]: '1em',
|
10507
10849
|
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
10508
|
-
[vars$v.
|
10509
|
-
[vars$v.
|
10510
|
-
[vars$v.
|
10850
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
10851
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
10852
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
10853
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
10511
10854
|
[vars$v.inputBorderRadius]: refs.borderRadius,
|
10855
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
10512
10856
|
[vars$v.inputBorderWidth]: refs.borderWidth,
|
10513
10857
|
[vars$v.inputBorderStyle]: refs.borderStyle,
|
10514
|
-
[vars$v.
|
10515
|
-
[vars$v.
|
10516
|
-
|
10517
|
-
|
10518
|
-
|
10519
|
-
[vars$v.inputResizeType]: 'vertical',
|
10520
|
-
[vars$v.inputMinHeight]: '5em',
|
10521
|
-
textAlign: {
|
10522
|
-
right: { [vars$v.inputTextAlign]: 'right' },
|
10523
|
-
left: { [vars$v.inputTextAlign]: 'left' },
|
10524
|
-
center: { [vars$v.inputTextAlign]: 'center' },
|
10858
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
10859
|
+
[vars$v.inputSize]: checkboxSize,
|
10860
|
+
|
10861
|
+
_checked: {
|
10862
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
10525
10863
|
},
|
10526
10864
|
|
10527
|
-
|
10528
|
-
[vars$v.
|
10865
|
+
_disabled: {
|
10866
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
10529
10867
|
},
|
10530
10868
|
};
|
10531
10869
|
|
10532
|
-
var
|
10870
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10533
10871
|
__proto__: null,
|
10534
|
-
default:
|
10872
|
+
default: checkbox,
|
10535
10873
|
vars: vars$v
|
10536
10874
|
});
|
10537
10875
|
|
10538
|
-
const
|
10539
|
-
const
|
10876
|
+
const knobMargin = '2px';
|
10877
|
+
const checkboxHeight = '1.25em';
|
10540
10878
|
|
10541
|
-
const
|
10879
|
+
const globalRefs$j = getThemeRefs(globals);
|
10880
|
+
const vars$u = SwitchToggleClass.cssVarList;
|
10881
|
+
|
10882
|
+
const switchToggle = {
|
10542
10883
|
[vars$u.hostWidth]: refs.width,
|
10543
10884
|
[vars$u.hostDirection]: refs.direction,
|
10544
10885
|
[vars$u.fontSize]: refs.fontSize,
|
10545
10886
|
[vars$u.fontFamily]: refs.fontFamily,
|
10546
|
-
|
10547
|
-
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
10548
|
-
[vars$u.labelFontWeight]: '400',
|
10549
|
-
[vars$u.labelLineHeight]: checkboxSize,
|
10550
|
-
[vars$u.labelSpacing]: '1em',
|
10551
|
-
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10887
|
+
|
10552
10888
|
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
10553
10889
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
10554
10890
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
10555
10891
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
10556
|
-
[vars$u.inputBorderRadius]: refs.borderRadius,
|
10557
|
-
[vars$u.inputBorderColor]: refs.borderColor,
|
10558
|
-
[vars$u.inputBorderWidth]: refs.borderWidth,
|
10559
|
-
[vars$u.inputBorderStyle]: refs.borderStyle,
|
10560
|
-
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
10561
|
-
[vars$u.inputSize]: checkboxSize,
|
10562
|
-
|
10563
|
-
_checked: {
|
10564
|
-
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
10565
|
-
},
|
10566
|
-
|
10567
|
-
_disabled: {
|
10568
|
-
[vars$u.labelTextColor]: refs.labelTextColor,
|
10569
|
-
},
|
10570
|
-
};
|
10571
|
-
|
10572
|
-
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10573
|
-
__proto__: null,
|
10574
|
-
default: checkbox,
|
10575
|
-
vars: vars$u
|
10576
|
-
});
|
10577
|
-
|
10578
|
-
const knobMargin = '2px';
|
10579
|
-
const checkboxHeight = '1.25em';
|
10580
10892
|
|
10581
|
-
|
10582
|
-
|
10893
|
+
[vars$u.trackBorderStyle]: refs.borderStyle,
|
10894
|
+
[vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10895
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
10896
|
+
[vars$u.trackBackgroundColor]: refs.backgroundColor,
|
10897
|
+
[vars$u.trackBorderRadius]: globalRefs$j.radius.md,
|
10898
|
+
[vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10899
|
+
[vars$u.trackHeight]: checkboxHeight,
|
10900
|
+
|
10901
|
+
[vars$u.knobSize]: `calc(1em - ${knobMargin})`,
|
10902
|
+
[vars$u.knobRadius]: '50%',
|
10903
|
+
[vars$u.knobTopOffset]: '1px',
|
10904
|
+
[vars$u.knobLeftOffset]: knobMargin,
|
10905
|
+
[vars$u.knobColor]: refs.labelTextColor,
|
10906
|
+
[vars$u.knobTransitionDuration]: '0.3s',
|
10583
10907
|
|
10584
|
-
|
10585
|
-
[vars$
|
10586
|
-
[vars$
|
10587
|
-
[vars$
|
10588
|
-
[vars$
|
10589
|
-
|
10590
|
-
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
10591
|
-
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
10592
|
-
[vars$t.inputOutlineColor]: refs.outlineColor,
|
10593
|
-
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
10594
|
-
|
10595
|
-
[vars$t.trackBorderStyle]: refs.borderStyle,
|
10596
|
-
[vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10597
|
-
[vars$t.trackBorderColor]: refs.borderColor,
|
10598
|
-
[vars$t.trackBackgroundColor]: refs.backgroundColor,
|
10599
|
-
[vars$t.trackBorderRadius]: globalRefs$h.radius.md,
|
10600
|
-
[vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10601
|
-
[vars$t.trackHeight]: checkboxHeight,
|
10602
|
-
|
10603
|
-
[vars$t.knobSize]: `calc(1em - ${knobMargin})`,
|
10604
|
-
[vars$t.knobRadius]: '50%',
|
10605
|
-
[vars$t.knobTopOffset]: '1px',
|
10606
|
-
[vars$t.knobLeftOffset]: knobMargin,
|
10607
|
-
[vars$t.knobColor]: refs.labelTextColor,
|
10608
|
-
[vars$t.knobTransitionDuration]: '0.3s',
|
10609
|
-
|
10610
|
-
[vars$t.labelTextColor]: refs.labelTextColor,
|
10611
|
-
[vars$t.labelFontWeight]: '400',
|
10612
|
-
[vars$t.labelLineHeight]: '1.35em',
|
10613
|
-
[vars$t.labelSpacing]: '1em',
|
10614
|
-
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
10615
|
-
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
10908
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10909
|
+
[vars$u.labelFontWeight]: '400',
|
10910
|
+
[vars$u.labelLineHeight]: '1.35em',
|
10911
|
+
[vars$u.labelSpacing]: '1em',
|
10912
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
10913
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10616
10914
|
|
10617
10915
|
_checked: {
|
10618
|
-
[vars$
|
10619
|
-
[vars$
|
10620
|
-
[vars$
|
10621
|
-
[vars$
|
10916
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
10917
|
+
[vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
|
10918
|
+
[vars$u.knobColor]: refs.valueTextColor,
|
10919
|
+
[vars$u.knobTextColor]: refs.valueTextColor,
|
10622
10920
|
},
|
10623
10921
|
|
10624
10922
|
_disabled: {
|
10625
|
-
[vars$
|
10626
|
-
[vars$
|
10627
|
-
[vars$
|
10628
|
-
[vars$
|
10923
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
10924
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
|
10925
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
10926
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10629
10927
|
_checked: {
|
10630
|
-
[vars$
|
10631
|
-
[vars$
|
10928
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
10929
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
10632
10930
|
},
|
10633
10931
|
},
|
10634
10932
|
|
10635
10933
|
_invalid: {
|
10636
|
-
[vars$
|
10637
|
-
[vars$
|
10934
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
|
10935
|
+
[vars$u.knobColor]: globalRefs$j.colors.error.main,
|
10638
10936
|
},
|
10639
10937
|
};
|
10640
10938
|
|
10641
10939
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
10642
10940
|
__proto__: null,
|
10643
10941
|
default: switchToggle,
|
10644
|
-
vars: vars$
|
10942
|
+
vars: vars$u
|
10645
10943
|
});
|
10646
10944
|
|
10647
|
-
const globalRefs$
|
10945
|
+
const globalRefs$i = getThemeRefs(globals);
|
10648
10946
|
|
10649
10947
|
const compVars$4 = ContainerClass.cssVarList;
|
10650
10948
|
|
@@ -10666,7 +10964,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
10666
10964
|
horizontalAlignment,
|
10667
10965
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
10668
10966
|
},
|
10669
|
-
componentName$
|
10967
|
+
componentName$K
|
10670
10968
|
);
|
10671
10969
|
|
10672
10970
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -10676,10 +10974,10 @@ const container = {
|
|
10676
10974
|
|
10677
10975
|
[compVars$4.hostWidth]: '100%',
|
10678
10976
|
[compVars$4.boxShadow]: 'none',
|
10679
|
-
[compVars$4.backgroundColor]: globalRefs$
|
10680
|
-
[compVars$4.color]: globalRefs$
|
10977
|
+
[compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
|
10978
|
+
[compVars$4.color]: globalRefs$i.colors.surface.contrast,
|
10681
10979
|
[compVars$4.borderRadius]: '0px',
|
10682
|
-
[compVars$4.hostDirection]: globalRefs$
|
10980
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
10683
10981
|
|
10684
10982
|
verticalPadding: {
|
10685
10983
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
@@ -10725,34 +11023,34 @@ const container = {
|
|
10725
11023
|
|
10726
11024
|
shadow: {
|
10727
11025
|
sm: {
|
10728
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11026
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
|
10729
11027
|
},
|
10730
11028
|
md: {
|
10731
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11029
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
|
10732
11030
|
},
|
10733
11031
|
lg: {
|
10734
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11032
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
|
10735
11033
|
},
|
10736
11034
|
xl: {
|
10737
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11035
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
|
10738
11036
|
},
|
10739
11037
|
'2xl': {
|
10740
11038
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
10741
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11039
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
|
10742
11040
|
},
|
10743
11041
|
},
|
10744
11042
|
|
10745
11043
|
borderRadius: {
|
10746
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
10747
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
10748
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
10749
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
10750
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
10751
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
11044
|
+
sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
|
11045
|
+
md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
|
11046
|
+
lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
|
11047
|
+
xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
|
11048
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
|
11049
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
|
10752
11050
|
},
|
10753
11051
|
};
|
10754
11052
|
|
10755
|
-
const vars$
|
11053
|
+
const vars$t = {
|
10756
11054
|
...compVars$4,
|
10757
11055
|
...helperVars$2,
|
10758
11056
|
};
|
@@ -10760,166 +11058,166 @@ const vars$s = {
|
|
10760
11058
|
var container$1 = /*#__PURE__*/Object.freeze({
|
10761
11059
|
__proto__: null,
|
10762
11060
|
default: container,
|
10763
|
-
vars: vars$
|
11061
|
+
vars: vars$t
|
10764
11062
|
});
|
10765
11063
|
|
10766
|
-
const vars$
|
11064
|
+
const vars$s = LogoClass.cssVarList;
|
10767
11065
|
|
10768
11066
|
const logo$2 = {
|
10769
|
-
[vars$
|
11067
|
+
[vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
10770
11068
|
};
|
10771
11069
|
|
10772
11070
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
10773
11071
|
__proto__: null,
|
10774
11072
|
default: logo$2,
|
10775
|
-
vars: vars$
|
11073
|
+
vars: vars$s
|
10776
11074
|
});
|
10777
11075
|
|
10778
|
-
const vars$
|
11076
|
+
const vars$r = TotpImageClass.cssVarList;
|
10779
11077
|
|
10780
11078
|
const logo$1 = {
|
10781
|
-
[vars$
|
11079
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
10782
11080
|
};
|
10783
11081
|
|
10784
11082
|
var totpImage = /*#__PURE__*/Object.freeze({
|
10785
11083
|
__proto__: null,
|
10786
11084
|
default: logo$1,
|
10787
|
-
vars: vars$
|
11085
|
+
vars: vars$r
|
10788
11086
|
});
|
10789
11087
|
|
10790
|
-
const vars$
|
11088
|
+
const vars$q = NotpImageClass.cssVarList;
|
10791
11089
|
|
10792
11090
|
const logo = {
|
10793
|
-
[vars$
|
11091
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
10794
11092
|
};
|
10795
11093
|
|
10796
11094
|
var notpImage = /*#__PURE__*/Object.freeze({
|
10797
11095
|
__proto__: null,
|
10798
11096
|
default: logo,
|
10799
|
-
vars: vars$
|
11097
|
+
vars: vars$q
|
10800
11098
|
});
|
10801
11099
|
|
10802
|
-
const globalRefs$
|
10803
|
-
const vars$
|
11100
|
+
const globalRefs$h = getThemeRefs(globals);
|
11101
|
+
const vars$p = TextClass.cssVarList;
|
10804
11102
|
|
10805
11103
|
const text = {
|
10806
|
-
[vars$
|
10807
|
-
[vars$
|
10808
|
-
[vars$
|
10809
|
-
[vars$
|
11104
|
+
[vars$p.hostDirection]: globalRefs$h.direction,
|
11105
|
+
[vars$p.textLineHeight]: '1.35em',
|
11106
|
+
[vars$p.textAlign]: 'left',
|
11107
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
10810
11108
|
variant: {
|
10811
11109
|
h1: {
|
10812
|
-
[vars$
|
10813
|
-
[vars$
|
10814
|
-
[vars$
|
11110
|
+
[vars$p.fontSize]: globalRefs$h.typography.h1.size,
|
11111
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
|
11112
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h1.font,
|
10815
11113
|
},
|
10816
11114
|
h2: {
|
10817
|
-
[vars$
|
10818
|
-
[vars$
|
10819
|
-
[vars$
|
11115
|
+
[vars$p.fontSize]: globalRefs$h.typography.h2.size,
|
11116
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
|
11117
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h2.font,
|
10820
11118
|
},
|
10821
11119
|
h3: {
|
10822
|
-
[vars$
|
10823
|
-
[vars$
|
10824
|
-
[vars$
|
11120
|
+
[vars$p.fontSize]: globalRefs$h.typography.h3.size,
|
11121
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
|
11122
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h3.font,
|
10825
11123
|
},
|
10826
11124
|
subtitle1: {
|
10827
|
-
[vars$
|
10828
|
-
[vars$
|
10829
|
-
[vars$
|
11125
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
|
11126
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
|
11127
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
|
10830
11128
|
},
|
10831
11129
|
subtitle2: {
|
10832
|
-
[vars$
|
10833
|
-
[vars$
|
10834
|
-
[vars$
|
11130
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
|
11131
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
|
11132
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
|
10835
11133
|
},
|
10836
11134
|
body1: {
|
10837
|
-
[vars$
|
10838
|
-
[vars$
|
10839
|
-
[vars$
|
11135
|
+
[vars$p.fontSize]: globalRefs$h.typography.body1.size,
|
11136
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
|
11137
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body1.font,
|
10840
11138
|
},
|
10841
11139
|
body2: {
|
10842
|
-
[vars$
|
10843
|
-
[vars$
|
10844
|
-
[vars$
|
11140
|
+
[vars$p.fontSize]: globalRefs$h.typography.body2.size,
|
11141
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
|
11142
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body2.font,
|
10845
11143
|
},
|
10846
11144
|
},
|
10847
11145
|
|
10848
11146
|
mode: {
|
10849
11147
|
primary: {
|
10850
|
-
[vars$
|
11148
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.contrast,
|
10851
11149
|
},
|
10852
11150
|
secondary: {
|
10853
|
-
[vars$
|
11151
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
10854
11152
|
},
|
10855
11153
|
error: {
|
10856
|
-
[vars$
|
11154
|
+
[vars$p.textColor]: globalRefs$h.colors.error.main,
|
10857
11155
|
},
|
10858
11156
|
success: {
|
10859
|
-
[vars$
|
11157
|
+
[vars$p.textColor]: globalRefs$h.colors.success.main,
|
10860
11158
|
},
|
10861
11159
|
},
|
10862
11160
|
|
10863
11161
|
textAlign: {
|
10864
|
-
right: { [vars$
|
10865
|
-
left: { [vars$
|
10866
|
-
center: { [vars$
|
11162
|
+
right: { [vars$p.textAlign]: 'right' },
|
11163
|
+
left: { [vars$p.textAlign]: 'left' },
|
11164
|
+
center: { [vars$p.textAlign]: 'center' },
|
10867
11165
|
},
|
10868
11166
|
|
10869
11167
|
_fullWidth: {
|
10870
|
-
[vars$
|
11168
|
+
[vars$p.hostWidth]: '100%',
|
10871
11169
|
},
|
10872
11170
|
|
10873
11171
|
_italic: {
|
10874
|
-
[vars$
|
11172
|
+
[vars$p.fontStyle]: 'italic',
|
10875
11173
|
},
|
10876
11174
|
|
10877
11175
|
_uppercase: {
|
10878
|
-
[vars$
|
11176
|
+
[vars$p.textTransform]: 'uppercase',
|
10879
11177
|
},
|
10880
11178
|
|
10881
11179
|
_lowercase: {
|
10882
|
-
[vars$
|
11180
|
+
[vars$p.textTransform]: 'lowercase',
|
10883
11181
|
},
|
10884
11182
|
};
|
10885
11183
|
|
10886
11184
|
var text$1 = /*#__PURE__*/Object.freeze({
|
10887
11185
|
__proto__: null,
|
10888
11186
|
default: text,
|
10889
|
-
vars: vars$
|
11187
|
+
vars: vars$p
|
10890
11188
|
});
|
10891
11189
|
|
10892
|
-
const globalRefs$
|
10893
|
-
const vars$
|
11190
|
+
const globalRefs$g = getThemeRefs(globals);
|
11191
|
+
const vars$o = LinkClass.cssVarList;
|
10894
11192
|
|
10895
11193
|
const link = {
|
10896
|
-
[vars$
|
10897
|
-
[vars$
|
11194
|
+
[vars$o.hostDirection]: globalRefs$g.direction,
|
11195
|
+
[vars$o.cursor]: 'pointer',
|
10898
11196
|
|
10899
|
-
[vars$
|
11197
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
10900
11198
|
|
10901
11199
|
textAlign: {
|
10902
|
-
right: { [vars$
|
10903
|
-
left: { [vars$
|
10904
|
-
center: { [vars$
|
11200
|
+
right: { [vars$o.textAlign]: 'right' },
|
11201
|
+
left: { [vars$o.textAlign]: 'left' },
|
11202
|
+
center: { [vars$o.textAlign]: 'center' },
|
10905
11203
|
},
|
10906
11204
|
|
10907
11205
|
_fullWidth: {
|
10908
|
-
[vars$
|
11206
|
+
[vars$o.hostWidth]: '100%',
|
10909
11207
|
},
|
10910
11208
|
|
10911
11209
|
mode: {
|
10912
11210
|
primary: {
|
10913
|
-
[vars$
|
11211
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
10914
11212
|
},
|
10915
11213
|
secondary: {
|
10916
|
-
[vars$
|
11214
|
+
[vars$o.textColor]: globalRefs$g.colors.secondary.main,
|
10917
11215
|
},
|
10918
11216
|
error: {
|
10919
|
-
[vars$
|
11217
|
+
[vars$o.textColor]: globalRefs$g.colors.error.main,
|
10920
11218
|
},
|
10921
11219
|
success: {
|
10922
|
-
[vars$
|
11220
|
+
[vars$o.textColor]: globalRefs$g.colors.success.main,
|
10923
11221
|
},
|
10924
11222
|
},
|
10925
11223
|
};
|
@@ -10927,10 +11225,10 @@ const link = {
|
|
10927
11225
|
var link$1 = /*#__PURE__*/Object.freeze({
|
10928
11226
|
__proto__: null,
|
10929
11227
|
default: link,
|
10930
|
-
vars: vars$
|
11228
|
+
vars: vars$o
|
10931
11229
|
});
|
10932
11230
|
|
10933
|
-
const globalRefs$
|
11231
|
+
const globalRefs$f = getThemeRefs(globals);
|
10934
11232
|
const compVars$3 = DividerClass.cssVarList;
|
10935
11233
|
|
10936
11234
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -10938,18 +11236,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
10938
11236
|
thickness: '2px',
|
10939
11237
|
spacing: '10px',
|
10940
11238
|
},
|
10941
|
-
componentName$
|
11239
|
+
componentName$I
|
10942
11240
|
);
|
10943
11241
|
|
10944
11242
|
const divider = {
|
10945
11243
|
...helperTheme$1,
|
10946
11244
|
|
10947
|
-
[compVars$3.hostDirection]: globalRefs$
|
11245
|
+
[compVars$3.hostDirection]: globalRefs$f.direction,
|
10948
11246
|
[compVars$3.alignItems]: 'center',
|
10949
11247
|
[compVars$3.flexDirection]: 'row',
|
10950
11248
|
[compVars$3.alignSelf]: 'stretch',
|
10951
11249
|
[compVars$3.hostWidth]: '100%',
|
10952
|
-
[compVars$3.stripeColor]: globalRefs$
|
11250
|
+
[compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
|
10953
11251
|
[compVars$3.stripeColorOpacity]: '0.5',
|
10954
11252
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
10955
11253
|
[compVars$3.labelTextWidth]: 'fit-content',
|
@@ -10969,7 +11267,7 @@ const divider = {
|
|
10969
11267
|
},
|
10970
11268
|
};
|
10971
11269
|
|
10972
|
-
const vars$
|
11270
|
+
const vars$n = {
|
10973
11271
|
...compVars$3,
|
10974
11272
|
...helperVars$1,
|
10975
11273
|
};
|
@@ -10977,111 +11275,111 @@ const vars$m = {
|
|
10977
11275
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
10978
11276
|
__proto__: null,
|
10979
11277
|
default: divider,
|
10980
|
-
vars: vars$
|
11278
|
+
vars: vars$n
|
10981
11279
|
});
|
10982
11280
|
|
10983
|
-
const vars$
|
11281
|
+
const vars$m = PasscodeClass.cssVarList;
|
10984
11282
|
|
10985
11283
|
const passcode = {
|
10986
|
-
[vars$
|
10987
|
-
[vars$
|
10988
|
-
[vars$
|
10989
|
-
[vars$
|
10990
|
-
[vars$
|
10991
|
-
[vars$
|
10992
|
-
[vars$
|
10993
|
-
[vars$
|
10994
|
-
[vars$
|
10995
|
-
[vars$
|
10996
|
-
[vars$
|
10997
|
-
[vars$
|
10998
|
-
[vars$
|
10999
|
-
[vars$
|
11000
|
-
[vars$
|
11284
|
+
[vars$m.hostDirection]: refs.direction,
|
11285
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
11286
|
+
[vars$m.fontSize]: refs.fontSize,
|
11287
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
11288
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
11289
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
11290
|
+
[vars$m.digitValueTextColor]: refs.valueTextColor,
|
11291
|
+
[vars$m.digitPadding]: '0',
|
11292
|
+
[vars$m.digitTextAlign]: 'center',
|
11293
|
+
[vars$m.digitSpacing]: '4px',
|
11294
|
+
[vars$m.hostWidth]: refs.width,
|
11295
|
+
[vars$m.digitOutlineColor]: 'transparent',
|
11296
|
+
[vars$m.digitOutlineWidth]: refs.outlineWidth,
|
11297
|
+
[vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
11298
|
+
[vars$m.digitSize]: refs.inputHeight,
|
11001
11299
|
|
11002
11300
|
size: {
|
11003
|
-
xs: { [vars$
|
11004
|
-
sm: { [vars$
|
11005
|
-
md: { [vars$
|
11006
|
-
lg: { [vars$
|
11301
|
+
xs: { [vars$m.spinnerSize]: '15px' },
|
11302
|
+
sm: { [vars$m.spinnerSize]: '20px' },
|
11303
|
+
md: { [vars$m.spinnerSize]: '20px' },
|
11304
|
+
lg: { [vars$m.spinnerSize]: '20px' },
|
11007
11305
|
},
|
11008
11306
|
|
11009
11307
|
_hideCursor: {
|
11010
|
-
[vars$
|
11308
|
+
[vars$m.digitCaretTextColor]: 'transparent',
|
11011
11309
|
},
|
11012
11310
|
|
11013
11311
|
_loading: {
|
11014
|
-
[vars$
|
11312
|
+
[vars$m.overlayOpacity]: refs.overlayOpacity,
|
11015
11313
|
},
|
11016
11314
|
};
|
11017
11315
|
|
11018
11316
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
11019
11317
|
__proto__: null,
|
11020
11318
|
default: passcode,
|
11021
|
-
vars: vars$
|
11319
|
+
vars: vars$m
|
11022
11320
|
});
|
11023
11321
|
|
11024
|
-
const globalRefs$
|
11025
|
-
const vars$
|
11322
|
+
const globalRefs$e = getThemeRefs(globals);
|
11323
|
+
const vars$l = LoaderLinearClass.cssVarList;
|
11026
11324
|
|
11027
11325
|
const loaderLinear = {
|
11028
|
-
[vars$
|
11029
|
-
[vars$
|
11326
|
+
[vars$l.hostDisplay]: 'inline-block',
|
11327
|
+
[vars$l.hostWidth]: '100%',
|
11030
11328
|
|
11031
|
-
[vars$
|
11032
|
-
[vars$
|
11329
|
+
[vars$l.barColor]: globalRefs$e.colors.surface.contrast,
|
11330
|
+
[vars$l.barWidth]: '20%',
|
11033
11331
|
|
11034
|
-
[vars$
|
11035
|
-
[vars$
|
11332
|
+
[vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
|
11333
|
+
[vars$l.barBorderRadius]: '4px',
|
11036
11334
|
|
11037
|
-
[vars$
|
11038
|
-
[vars$
|
11039
|
-
[vars$
|
11040
|
-
[vars$
|
11335
|
+
[vars$l.animationDuration]: '2s',
|
11336
|
+
[vars$l.animationTimingFunction]: 'linear',
|
11337
|
+
[vars$l.animationIterationCount]: 'infinite',
|
11338
|
+
[vars$l.verticalPadding]: '0.25em',
|
11041
11339
|
|
11042
11340
|
size: {
|
11043
|
-
xs: { [vars$
|
11044
|
-
sm: { [vars$
|
11045
|
-
md: { [vars$
|
11046
|
-
lg: { [vars$
|
11341
|
+
xs: { [vars$l.barHeight]: '2px' },
|
11342
|
+
sm: { [vars$l.barHeight]: '4px' },
|
11343
|
+
md: { [vars$l.barHeight]: '6px' },
|
11344
|
+
lg: { [vars$l.barHeight]: '8px' },
|
11047
11345
|
},
|
11048
11346
|
|
11049
11347
|
mode: {
|
11050
11348
|
primary: {
|
11051
|
-
[vars$
|
11349
|
+
[vars$l.barColor]: globalRefs$e.colors.primary.main,
|
11052
11350
|
},
|
11053
11351
|
secondary: {
|
11054
|
-
[vars$
|
11352
|
+
[vars$l.barColor]: globalRefs$e.colors.secondary.main,
|
11055
11353
|
},
|
11056
11354
|
},
|
11057
11355
|
|
11058
11356
|
_hidden: {
|
11059
|
-
[vars$
|
11357
|
+
[vars$l.hostDisplay]: 'none',
|
11060
11358
|
},
|
11061
11359
|
};
|
11062
11360
|
|
11063
11361
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
11064
11362
|
__proto__: null,
|
11065
11363
|
default: loaderLinear,
|
11066
|
-
vars: vars$
|
11364
|
+
vars: vars$l
|
11067
11365
|
});
|
11068
11366
|
|
11069
|
-
const globalRefs$
|
11367
|
+
const globalRefs$d = getThemeRefs(globals);
|
11070
11368
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
11071
11369
|
|
11072
11370
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
11073
11371
|
{
|
11074
|
-
spinnerColor: globalRefs$
|
11372
|
+
spinnerColor: globalRefs$d.colors.surface.contrast,
|
11075
11373
|
mode: {
|
11076
11374
|
primary: {
|
11077
|
-
spinnerColor: globalRefs$
|
11375
|
+
spinnerColor: globalRefs$d.colors.primary.main,
|
11078
11376
|
},
|
11079
11377
|
secondary: {
|
11080
|
-
spinnerColor: globalRefs$
|
11378
|
+
spinnerColor: globalRefs$d.colors.secondary.main,
|
11081
11379
|
},
|
11082
11380
|
},
|
11083
11381
|
},
|
11084
|
-
componentName$
|
11382
|
+
componentName$L
|
11085
11383
|
);
|
11086
11384
|
|
11087
11385
|
const loaderRadial = {
|
@@ -11110,7 +11408,7 @@ const loaderRadial = {
|
|
11110
11408
|
[compVars$2.hostDisplay]: 'none',
|
11111
11409
|
},
|
11112
11410
|
};
|
11113
|
-
const vars$
|
11411
|
+
const vars$k = {
|
11114
11412
|
...compVars$2,
|
11115
11413
|
...helperVars,
|
11116
11414
|
};
|
@@ -11118,78 +11416,114 @@ const vars$j = {
|
|
11118
11416
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
11119
11417
|
__proto__: null,
|
11120
11418
|
default: loaderRadial,
|
11121
|
-
vars: vars$
|
11419
|
+
vars: vars$k
|
11122
11420
|
});
|
11123
11421
|
|
11124
|
-
const globalRefs$
|
11125
|
-
const vars$
|
11422
|
+
const globalRefs$c = getThemeRefs(globals);
|
11423
|
+
const vars$j = ComboBoxClass.cssVarList;
|
11126
11424
|
|
11127
11425
|
const comboBox = {
|
11128
|
-
[vars$
|
11129
|
-
[vars$
|
11130
|
-
[vars$
|
11131
|
-
[vars$
|
11132
|
-
[vars$
|
11133
|
-
[vars$
|
11134
|
-
[vars$
|
11135
|
-
[vars$
|
11136
|
-
[vars$
|
11137
|
-
[vars$
|
11138
|
-
[vars$
|
11139
|
-
[vars$
|
11140
|
-
[vars$
|
11141
|
-
[vars$
|
11142
|
-
[vars$
|
11143
|
-
[vars$
|
11144
|
-
[vars$
|
11145
|
-
[vars$
|
11146
|
-
[vars$
|
11147
|
-
[vars$
|
11148
|
-
[vars$
|
11149
|
-
[vars$
|
11150
|
-
[vars$
|
11151
|
-
[vars$
|
11152
|
-
[vars$
|
11153
|
-
[vars$
|
11426
|
+
[vars$j.hostWidth]: refs.width,
|
11427
|
+
[vars$j.hostDirection]: refs.direction,
|
11428
|
+
[vars$j.fontSize]: refs.fontSize,
|
11429
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
11430
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
11431
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
11432
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
11433
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
11434
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
11435
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
11436
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
11437
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
11438
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
11439
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
11440
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
11441
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
11442
|
+
[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11443
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
11444
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
11445
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
11446
|
+
[vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
|
11447
|
+
[vars$j.inputDropdownButtonCursor]: 'pointer',
|
11448
|
+
[vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11449
|
+
[vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
|
11450
|
+
[vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
|
11451
|
+
[vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
|
11154
11452
|
|
11155
11453
|
_readonly: {
|
11156
|
-
[vars$
|
11454
|
+
[vars$j.inputDropdownButtonCursor]: 'default',
|
11157
11455
|
},
|
11158
11456
|
|
11159
11457
|
// Overlay theme exposed via the component:
|
11160
|
-
[vars$
|
11161
|
-
[vars$
|
11162
|
-
[vars$
|
11163
|
-
[vars$
|
11164
|
-
[vars$
|
11165
|
-
[vars$
|
11458
|
+
[vars$j.overlayFontSize]: refs.fontSize,
|
11459
|
+
[vars$j.overlayFontFamily]: refs.fontFamily,
|
11460
|
+
[vars$j.overlayCursor]: 'pointer',
|
11461
|
+
[vars$j.overlayItemBoxShadow]: 'none',
|
11462
|
+
[vars$j.overlayBackground]: refs.backgroundColor,
|
11463
|
+
[vars$j.overlayTextColor]: refs.valueTextColor,
|
11166
11464
|
|
11167
11465
|
// Overlay direct theme:
|
11168
|
-
[vars$
|
11169
|
-
[vars$
|
11466
|
+
[vars$j.overlay.minHeight]: '400px',
|
11467
|
+
[vars$j.overlay.margin]: '0',
|
11170
11468
|
};
|
11171
11469
|
|
11172
11470
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
11173
11471
|
__proto__: null,
|
11174
11472
|
comboBox: comboBox,
|
11175
11473
|
default: comboBox,
|
11176
|
-
vars: vars$
|
11474
|
+
vars: vars$j
|
11177
11475
|
});
|
11178
11476
|
|
11179
|
-
const vars$
|
11477
|
+
const vars$i = ImageClass.cssVarList;
|
11180
11478
|
|
11181
11479
|
const image = {};
|
11182
11480
|
|
11183
11481
|
var image$1 = /*#__PURE__*/Object.freeze({
|
11184
11482
|
__proto__: null,
|
11185
11483
|
default: image,
|
11186
|
-
vars: vars$
|
11484
|
+
vars: vars$i
|
11187
11485
|
});
|
11188
11486
|
|
11189
|
-
const vars$
|
11487
|
+
const vars$h = PhoneFieldClass.cssVarList;
|
11190
11488
|
|
11191
11489
|
const phoneField = {
|
11192
|
-
[vars$
|
11490
|
+
[vars$h.hostWidth]: refs.width,
|
11491
|
+
[vars$h.hostDirection]: refs.direction,
|
11492
|
+
[vars$h.fontSize]: refs.fontSize,
|
11493
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
11494
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
11495
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
11496
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
11497
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
11498
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11499
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
11500
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
11501
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
11502
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
11503
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
11504
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
11505
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
11506
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
11507
|
+
[vars$h.phoneInputWidth]: refs.minWidth,
|
11508
|
+
[vars$h.countryCodeInputWidth]: '5em',
|
11509
|
+
[vars$h.countryCodeDropdownWidth]: '20em',
|
11510
|
+
|
11511
|
+
// '@overlay': {
|
11512
|
+
// overlayItemBackgroundColor: 'red'
|
11513
|
+
// }
|
11514
|
+
};
|
11515
|
+
|
11516
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
11517
|
+
__proto__: null,
|
11518
|
+
default: phoneField,
|
11519
|
+
vars: vars$h
|
11520
|
+
});
|
11521
|
+
|
11522
|
+
const vars$g = PhoneFieldInputBoxClass.cssVarList;
|
11523
|
+
|
11524
|
+
const phoneInputBoxField = {
|
11525
|
+
[vars$g.hostWidth]: '16em',
|
11526
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
11193
11527
|
[vars$g.hostDirection]: refs.direction,
|
11194
11528
|
[vars$g.fontSize]: refs.fontSize,
|
11195
11529
|
[vars$g.fontFamily]: refs.fontFamily,
|
@@ -11206,181 +11540,148 @@ const phoneField = {
|
|
11206
11540
|
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
11207
11541
|
[vars$g.inputOutlineColor]: refs.outlineColor,
|
11208
11542
|
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
11209
|
-
|
11210
|
-
|
11211
|
-
|
11212
|
-
|
11213
|
-
// '@overlay': {
|
11214
|
-
// overlayItemBackgroundColor: 'red'
|
11215
|
-
// }
|
11543
|
+
_fullWidth: {
|
11544
|
+
[vars$g.hostWidth]: refs.width,
|
11545
|
+
},
|
11216
11546
|
};
|
11217
11547
|
|
11218
|
-
var
|
11548
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
11219
11549
|
__proto__: null,
|
11220
|
-
default:
|
11550
|
+
default: phoneInputBoxField,
|
11221
11551
|
vars: vars$g
|
11222
11552
|
});
|
11223
11553
|
|
11224
|
-
const
|
11554
|
+
const globalRefs$b = getThemeRefs(globals);
|
11555
|
+
const vars$f = NewPasswordClass.cssVarList;
|
11225
11556
|
|
11226
|
-
const
|
11227
|
-
[vars$f.hostWidth]:
|
11557
|
+
const newPassword = {
|
11558
|
+
[vars$f.hostWidth]: refs.width,
|
11228
11559
|
[vars$f.hostMinWidth]: refs.minWidth,
|
11229
11560
|
[vars$f.hostDirection]: refs.direction,
|
11230
11561
|
[vars$f.fontSize]: refs.fontSize,
|
11231
11562
|
[vars$f.fontFamily]: refs.fontFamily,
|
11232
|
-
[vars$f.
|
11233
|
-
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
11563
|
+
[vars$f.spaceBetweenInputs]: '1em',
|
11234
11564
|
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
11235
|
-
[vars$f.
|
11236
|
-
[vars$f.
|
11237
|
-
[vars$f.inputBorderStyle]: refs.borderStyle,
|
11238
|
-
[vars$f.inputBorderWidth]: refs.borderWidth,
|
11239
|
-
[vars$f.inputBorderColor]: refs.borderColor,
|
11240
|
-
[vars$f.inputBorderRadius]: refs.borderRadius,
|
11241
|
-
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
11242
|
-
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
11243
|
-
[vars$f.inputOutlineColor]: refs.outlineColor,
|
11244
|
-
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
11245
|
-
_fullWidth: {
|
11246
|
-
[vars$f.hostWidth]: refs.width,
|
11247
|
-
},
|
11248
|
-
};
|
11249
|
-
|
11250
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
11251
|
-
__proto__: null,
|
11252
|
-
default: phoneInputBoxField,
|
11253
|
-
vars: vars$f
|
11254
|
-
});
|
11255
|
-
|
11256
|
-
const vars$e = NewPasswordClass.cssVarList;
|
11257
|
-
|
11258
|
-
const newPassword = {
|
11259
|
-
[vars$e.hostWidth]: refs.width,
|
11260
|
-
[vars$e.hostMinWidth]: refs.minWidth,
|
11261
|
-
[vars$e.hostDirection]: refs.direction,
|
11262
|
-
[vars$e.fontSize]: refs.fontSize,
|
11263
|
-
[vars$e.fontFamily]: refs.fontFamily,
|
11264
|
-
[vars$e.spaceBetweenInputs]: '1em',
|
11265
|
-
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
11565
|
+
[vars$f.policyPreviewBackgroundColor]: 'none',
|
11566
|
+
[vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
|
11266
11567
|
|
11267
11568
|
_required: {
|
11268
11569
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
11269
11570
|
// That's why we fake the required indicator on each input.
|
11270
11571
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
11271
|
-
[vars$
|
11572
|
+
[vars$f.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
11272
11573
|
},
|
11273
11574
|
};
|
11274
11575
|
|
11275
11576
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
11276
11577
|
__proto__: null,
|
11277
11578
|
default: newPassword,
|
11278
|
-
vars: vars$
|
11579
|
+
vars: vars$f
|
11279
11580
|
});
|
11280
11581
|
|
11281
|
-
const vars$
|
11582
|
+
const vars$e = UploadFileClass.cssVarList;
|
11282
11583
|
|
11283
11584
|
const uploadFile = {
|
11284
|
-
[vars$
|
11285
|
-
[vars$
|
11286
|
-
[vars$
|
11585
|
+
[vars$e.hostDirection]: refs.direction,
|
11586
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
11587
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
11287
11588
|
|
11288
|
-
[vars$
|
11589
|
+
[vars$e.iconSize]: '2em',
|
11289
11590
|
|
11290
|
-
[vars$
|
11291
|
-
[vars$
|
11591
|
+
[vars$e.hostPadding]: '0.75em',
|
11592
|
+
[vars$e.gap]: '0.5em',
|
11292
11593
|
|
11293
|
-
[vars$
|
11294
|
-
[vars$
|
11295
|
-
[vars$
|
11594
|
+
[vars$e.fontSize]: '16px',
|
11595
|
+
[vars$e.titleFontWeight]: '500',
|
11596
|
+
[vars$e.lineHeight]: '1em',
|
11296
11597
|
|
11297
|
-
[vars$
|
11298
|
-
[vars$
|
11299
|
-
[vars$
|
11300
|
-
[vars$
|
11598
|
+
[vars$e.borderWidth]: refs.borderWidth,
|
11599
|
+
[vars$e.borderColor]: refs.borderColor,
|
11600
|
+
[vars$e.borderRadius]: refs.borderRadius,
|
11601
|
+
[vars$e.borderStyle]: 'dashed',
|
11301
11602
|
|
11302
11603
|
_required: {
|
11303
|
-
[vars$
|
11604
|
+
[vars$e.requiredIndicator]: refs.requiredIndicator,
|
11304
11605
|
},
|
11305
11606
|
|
11306
11607
|
size: {
|
11307
11608
|
xs: {
|
11308
|
-
[vars$
|
11309
|
-
[vars$
|
11310
|
-
[vars$
|
11311
|
-
[vars$
|
11312
|
-
[vars$
|
11609
|
+
[vars$e.hostHeight]: '196px',
|
11610
|
+
[vars$e.hostWidth]: '200px',
|
11611
|
+
[vars$e.titleFontSize]: '0.875em',
|
11612
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
11613
|
+
[vars$e.lineHeight]: '1.25em',
|
11313
11614
|
},
|
11314
11615
|
sm: {
|
11315
|
-
[vars$
|
11316
|
-
[vars$
|
11317
|
-
[vars$
|
11318
|
-
[vars$
|
11319
|
-
[vars$
|
11616
|
+
[vars$e.hostHeight]: '216px',
|
11617
|
+
[vars$e.hostWidth]: '230px',
|
11618
|
+
[vars$e.titleFontSize]: '1em',
|
11619
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
11620
|
+
[vars$e.lineHeight]: '1.25em',
|
11320
11621
|
},
|
11321
11622
|
md: {
|
11322
|
-
[vars$
|
11323
|
-
[vars$
|
11324
|
-
[vars$
|
11325
|
-
[vars$
|
11326
|
-
[vars$
|
11623
|
+
[vars$e.hostHeight]: '256px',
|
11624
|
+
[vars$e.hostWidth]: '312px',
|
11625
|
+
[vars$e.titleFontSize]: '1.125em',
|
11626
|
+
[vars$e.descriptionFontSize]: '1em',
|
11627
|
+
[vars$e.lineHeight]: '1.5em',
|
11327
11628
|
},
|
11328
11629
|
lg: {
|
11329
|
-
[vars$
|
11330
|
-
[vars$
|
11331
|
-
[vars$
|
11332
|
-
[vars$
|
11333
|
-
[vars$
|
11630
|
+
[vars$e.hostHeight]: '280px',
|
11631
|
+
[vars$e.hostWidth]: '336px',
|
11632
|
+
[vars$e.titleFontSize]: '1.125em',
|
11633
|
+
[vars$e.descriptionFontSize]: '1.125em',
|
11634
|
+
[vars$e.lineHeight]: '1.75em',
|
11334
11635
|
},
|
11335
11636
|
},
|
11336
11637
|
|
11337
11638
|
_fullWidth: {
|
11338
|
-
[vars$
|
11639
|
+
[vars$e.hostWidth]: refs.width,
|
11339
11640
|
},
|
11340
11641
|
};
|
11341
11642
|
|
11342
11643
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
11343
11644
|
__proto__: null,
|
11344
11645
|
default: uploadFile,
|
11345
|
-
vars: vars$
|
11646
|
+
vars: vars$e
|
11346
11647
|
});
|
11347
11648
|
|
11348
|
-
const globalRefs$
|
11649
|
+
const globalRefs$a = getThemeRefs(globals);
|
11349
11650
|
|
11350
|
-
const vars$
|
11651
|
+
const vars$d = ButtonSelectionGroupItemClass.cssVarList;
|
11351
11652
|
|
11352
11653
|
const buttonSelectionGroupItem = {
|
11353
|
-
[vars$
|
11354
|
-
[vars$
|
11355
|
-
[vars$
|
11356
|
-
[vars$
|
11357
|
-
[vars$
|
11358
|
-
[vars$
|
11359
|
-
[vars$
|
11360
|
-
[vars$
|
11654
|
+
[vars$d.hostDirection]: 'inherit',
|
11655
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
|
11656
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
11657
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.light,
|
11658
|
+
[vars$d.borderStyle]: 'solid',
|
11659
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
11660
|
+
[vars$d.outlineColor]: 'transparent',
|
11661
|
+
[vars$d.borderWidth]: globalRefs$a.border.xs,
|
11361
11662
|
|
11362
11663
|
_hover: {
|
11363
|
-
[vars$
|
11664
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
|
11364
11665
|
},
|
11365
11666
|
|
11366
11667
|
_focused: {
|
11367
|
-
[vars$
|
11668
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.light,
|
11368
11669
|
},
|
11369
11670
|
|
11370
11671
|
_selected: {
|
11371
|
-
[vars$
|
11372
|
-
[vars$
|
11373
|
-
[vars$
|
11672
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
|
11673
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
|
11674
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
|
11374
11675
|
},
|
11375
11676
|
};
|
11376
11677
|
|
11377
11678
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
11378
11679
|
__proto__: null,
|
11379
11680
|
default: buttonSelectionGroupItem,
|
11380
|
-
vars: vars$
|
11681
|
+
vars: vars$d
|
11381
11682
|
});
|
11382
11683
|
|
11383
|
-
const globalRefs$
|
11684
|
+
const globalRefs$9 = getThemeRefs(globals);
|
11384
11685
|
|
11385
11686
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
11386
11687
|
[vars.hostDirection]: refs.direction,
|
@@ -11388,84 +11689,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
11388
11689
|
[vars.labelTextColor]: refs.labelTextColor,
|
11389
11690
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
11390
11691
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
11391
|
-
[vars.itemsSpacing]: globalRefs$
|
11692
|
+
[vars.itemsSpacing]: globalRefs$9.spacing.sm,
|
11392
11693
|
[vars.hostWidth]: refs.width,
|
11393
11694
|
});
|
11394
11695
|
|
11395
|
-
const vars$
|
11696
|
+
const vars$c = ButtonSelectionGroupClass.cssVarList;
|
11396
11697
|
|
11397
11698
|
const buttonSelectionGroup = {
|
11398
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11699
|
+
...createBaseButtonSelectionGroupMappings(vars$c),
|
11399
11700
|
};
|
11400
11701
|
|
11401
11702
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
11402
11703
|
__proto__: null,
|
11403
11704
|
default: buttonSelectionGroup,
|
11404
|
-
vars: vars$
|
11705
|
+
vars: vars$c
|
11405
11706
|
});
|
11406
11707
|
|
11407
|
-
const vars$
|
11708
|
+
const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
|
11408
11709
|
|
11409
11710
|
const buttonMultiSelectionGroup = {
|
11410
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11711
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
11411
11712
|
};
|
11412
11713
|
|
11413
11714
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
11414
11715
|
__proto__: null,
|
11415
11716
|
default: buttonMultiSelectionGroup,
|
11416
|
-
vars: vars$
|
11717
|
+
vars: vars$b
|
11417
11718
|
});
|
11418
11719
|
|
11419
|
-
const globalRefs$
|
11720
|
+
const globalRefs$8 = getThemeRefs(globals);
|
11420
11721
|
|
11421
11722
|
const compVars$1 = ModalClass.cssVarList;
|
11422
11723
|
|
11423
11724
|
const modal = {
|
11424
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
11425
|
-
[compVars$1.overlayShadow]: globalRefs$
|
11725
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
|
11726
|
+
[compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
|
11426
11727
|
[compVars$1.overlayWidth]: '540px',
|
11427
11728
|
};
|
11428
11729
|
|
11429
|
-
const vars$
|
11730
|
+
const vars$a = {
|
11430
11731
|
...compVars$1,
|
11431
11732
|
};
|
11432
11733
|
|
11433
11734
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
11434
11735
|
__proto__: null,
|
11435
11736
|
default: modal,
|
11436
|
-
vars: vars$
|
11737
|
+
vars: vars$a
|
11437
11738
|
});
|
11438
11739
|
|
11439
|
-
const globalRefs$
|
11440
|
-
const vars$
|
11740
|
+
const globalRefs$7 = getThemeRefs(globals);
|
11741
|
+
const vars$9 = GridClass.cssVarList;
|
11441
11742
|
|
11442
11743
|
const grid = {
|
11443
|
-
[vars$
|
11444
|
-
[vars$
|
11445
|
-
[vars$
|
11446
|
-
[vars$
|
11447
|
-
[vars$
|
11744
|
+
[vars$9.hostWidth]: '100%',
|
11745
|
+
[vars$9.hostHeight]: '100%',
|
11746
|
+
[vars$9.hostMinHeight]: '400px',
|
11747
|
+
[vars$9.fontWeight]: '400',
|
11748
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
11448
11749
|
|
11449
|
-
[vars$
|
11450
|
-
[vars$
|
11750
|
+
[vars$9.fontSize]: refs.fontSize,
|
11751
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
11451
11752
|
|
11452
|
-
[vars$
|
11453
|
-
[vars$
|
11454
|
-
[vars$
|
11753
|
+
[vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
|
11754
|
+
[vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
|
11755
|
+
[vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
|
11455
11756
|
|
11456
|
-
[vars$
|
11457
|
-
[vars$
|
11458
|
-
[vars$
|
11459
|
-
[vars$
|
11757
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
11758
|
+
[vars$9.borderStyle]: refs.borderStyle,
|
11759
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
11760
|
+
[vars$9.borderColor]: 'transparent',
|
11460
11761
|
|
11461
|
-
[vars$
|
11462
|
-
[vars$
|
11762
|
+
[vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
|
11763
|
+
[vars$9.separatorColor]: globalRefs$7.colors.surface.light,
|
11463
11764
|
|
11464
|
-
[vars$
|
11465
|
-
[vars$
|
11765
|
+
[vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
|
11766
|
+
[vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
|
11466
11767
|
|
11467
11768
|
_bordered: {
|
11468
|
-
[vars$
|
11769
|
+
[vars$9.borderColor]: refs.borderColor,
|
11469
11770
|
},
|
11470
11771
|
};
|
11471
11772
|
|
@@ -11473,53 +11774,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
11473
11774
|
__proto__: null,
|
11474
11775
|
default: grid,
|
11475
11776
|
grid: grid,
|
11476
|
-
vars: vars$
|
11777
|
+
vars: vars$9
|
11477
11778
|
});
|
11478
11779
|
|
11479
|
-
const globalRefs$
|
11480
|
-
const vars$
|
11780
|
+
const globalRefs$6 = getThemeRefs(globals);
|
11781
|
+
const vars$8 = NotificationCardClass.cssVarList;
|
11481
11782
|
|
11482
11783
|
const shadowColor = '#00000020';
|
11483
11784
|
|
11484
11785
|
const notification = {
|
11485
|
-
[vars$
|
11486
|
-
[vars$
|
11487
|
-
[vars$
|
11488
|
-
[vars$
|
11489
|
-
[vars$
|
11490
|
-
[vars$
|
11491
|
-
[vars$
|
11492
|
-
[vars$
|
11493
|
-
[vars$
|
11786
|
+
[vars$8.hostMinWidth]: '415px',
|
11787
|
+
[vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
|
11788
|
+
[vars$8.fontSize]: globalRefs$6.typography.body1.size,
|
11789
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
11790
|
+
[vars$8.textColor]: globalRefs$6.colors.surface.contrast,
|
11791
|
+
[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
|
11792
|
+
[vars$8.verticalPadding]: '0.625em',
|
11793
|
+
[vars$8.horizontalPadding]: '1.5em',
|
11794
|
+
[vars$8.borderRadius]: globalRefs$6.radius.xs,
|
11494
11795
|
|
11495
11796
|
_bordered: {
|
11496
|
-
[vars$
|
11497
|
-
[vars$
|
11498
|
-
[vars$
|
11797
|
+
[vars$8.borderWidth]: globalRefs$6.border.sm,
|
11798
|
+
[vars$8.borderStyle]: 'solid',
|
11799
|
+
[vars$8.borderColor]: 'transparent',
|
11499
11800
|
},
|
11500
11801
|
|
11501
11802
|
size: {
|
11502
|
-
xs: { [vars$
|
11503
|
-
sm: { [vars$
|
11504
|
-
md: { [vars$
|
11505
|
-
lg: { [vars$
|
11803
|
+
xs: { [vars$8.fontSize]: '12px' },
|
11804
|
+
sm: { [vars$8.fontSize]: '14px' },
|
11805
|
+
md: { [vars$8.fontSize]: '16px' },
|
11806
|
+
lg: { [vars$8.fontSize]: '18px' },
|
11506
11807
|
},
|
11507
11808
|
|
11508
11809
|
mode: {
|
11509
11810
|
primary: {
|
11510
|
-
[vars$
|
11511
|
-
[vars$
|
11512
|
-
[vars$
|
11811
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
|
11812
|
+
[vars$8.textColor]: globalRefs$6.colors.primary.contrast,
|
11813
|
+
[vars$8.borderColor]: globalRefs$6.colors.primary.light,
|
11513
11814
|
},
|
11514
11815
|
success: {
|
11515
|
-
[vars$
|
11516
|
-
[vars$
|
11517
|
-
[vars$
|
11816
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.success.main,
|
11817
|
+
[vars$8.textColor]: globalRefs$6.colors.success.contrast,
|
11818
|
+
[vars$8.borderColor]: globalRefs$6.colors.success.light,
|
11518
11819
|
},
|
11519
11820
|
error: {
|
11520
|
-
[vars$
|
11521
|
-
[vars$
|
11522
|
-
[vars$
|
11821
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.error.main,
|
11822
|
+
[vars$8.textColor]: globalRefs$6.colors.error.contrast,
|
11823
|
+
[vars$8.borderColor]: globalRefs$6.colors.error.light,
|
11523
11824
|
},
|
11524
11825
|
},
|
11525
11826
|
};
|
@@ -11527,128 +11828,128 @@ const notification = {
|
|
11527
11828
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
11528
11829
|
__proto__: null,
|
11529
11830
|
default: notification,
|
11530
|
-
vars: vars$
|
11831
|
+
vars: vars$8
|
11531
11832
|
});
|
11532
11833
|
|
11533
|
-
const globalRefs$
|
11534
|
-
const vars$
|
11834
|
+
const globalRefs$5 = getThemeRefs(globals);
|
11835
|
+
const vars$7 = MultiSelectComboBoxClass.cssVarList;
|
11535
11836
|
|
11536
11837
|
const multiSelectComboBox = {
|
11537
|
-
[vars$
|
11538
|
-
[vars$
|
11539
|
-
[vars$
|
11540
|
-
[vars$
|
11541
|
-
[vars$
|
11542
|
-
[vars$
|
11543
|
-
[vars$
|
11544
|
-
[vars$
|
11545
|
-
[vars$
|
11546
|
-
[vars$
|
11547
|
-
[vars$
|
11548
|
-
[vars$
|
11549
|
-
[vars$
|
11550
|
-
[vars$
|
11551
|
-
[vars$
|
11552
|
-
[vars$
|
11553
|
-
[vars$
|
11554
|
-
[vars$
|
11555
|
-
[vars$
|
11556
|
-
[vars$
|
11557
|
-
[vars$
|
11558
|
-
[vars$
|
11559
|
-
[vars$
|
11560
|
-
[vars$
|
11561
|
-
[vars$
|
11562
|
-
[vars$
|
11563
|
-
[vars$
|
11564
|
-
[vars$
|
11565
|
-
[vars$
|
11566
|
-
[vars$
|
11838
|
+
[vars$7.hostWidth]: refs.width,
|
11839
|
+
[vars$7.hostDirection]: refs.direction,
|
11840
|
+
[vars$7.fontSize]: refs.fontSize,
|
11841
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
11842
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
11843
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
11844
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
11845
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
11846
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
11847
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
11848
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
11849
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
11850
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
11851
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
11852
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
11853
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
11854
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11855
|
+
[vars$7.inputBackgroundColor]: refs.backgroundColor,
|
11856
|
+
[vars$7.inputHorizontalPadding]: refs.horizontalPadding,
|
11857
|
+
[vars$7.inputVerticalPadding]: refs.verticalPadding,
|
11858
|
+
[vars$7.inputHeight]: refs.inputHeight,
|
11859
|
+
[vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
|
11860
|
+
[vars$7.inputDropdownButtonCursor]: 'pointer',
|
11861
|
+
[vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11862
|
+
[vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
|
11863
|
+
[vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
|
11864
|
+
[vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
|
11865
|
+
[vars$7.chipFontSize]: refs.chipFontSize,
|
11866
|
+
[vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
|
11867
|
+
[vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
|
11567
11868
|
|
11568
11869
|
_readonly: {
|
11569
|
-
[vars$
|
11870
|
+
[vars$7.inputDropdownButtonCursor]: 'default',
|
11570
11871
|
},
|
11571
11872
|
|
11572
11873
|
// Overlay theme exposed via the component:
|
11573
|
-
[vars$
|
11574
|
-
[vars$
|
11575
|
-
[vars$
|
11576
|
-
[vars$
|
11577
|
-
[vars$
|
11578
|
-
[vars$
|
11874
|
+
[vars$7.overlayFontSize]: refs.fontSize,
|
11875
|
+
[vars$7.overlayFontFamily]: refs.fontFamily,
|
11876
|
+
[vars$7.overlayCursor]: 'pointer',
|
11877
|
+
[vars$7.overlayItemBoxShadow]: 'none',
|
11878
|
+
[vars$7.overlayBackground]: refs.backgroundColor,
|
11879
|
+
[vars$7.overlayTextColor]: refs.valueTextColor,
|
11579
11880
|
|
11580
11881
|
// Overlay direct theme:
|
11581
|
-
[vars$
|
11582
|
-
[vars$
|
11882
|
+
[vars$7.overlay.minHeight]: '400px',
|
11883
|
+
[vars$7.overlay.margin]: '0',
|
11583
11884
|
};
|
11584
11885
|
|
11585
11886
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
11586
11887
|
__proto__: null,
|
11587
11888
|
default: multiSelectComboBox,
|
11588
11889
|
multiSelectComboBox: multiSelectComboBox,
|
11589
|
-
vars: vars$
|
11890
|
+
vars: vars$7
|
11590
11891
|
});
|
11591
11892
|
|
11592
|
-
const globalRefs$
|
11593
|
-
const vars$
|
11893
|
+
const globalRefs$4 = getThemeRefs(globals);
|
11894
|
+
const vars$6 = BadgeClass.cssVarList;
|
11594
11895
|
|
11595
11896
|
const badge = {
|
11596
|
-
[vars$
|
11597
|
-
[vars$
|
11897
|
+
[vars$6.hostWidth]: 'fit-content',
|
11898
|
+
[vars$6.hostDirection]: globalRefs$4.direction,
|
11598
11899
|
|
11599
|
-
[vars$
|
11900
|
+
[vars$6.textAlign]: 'center',
|
11600
11901
|
|
11601
|
-
[vars$
|
11602
|
-
[vars$
|
11902
|
+
[vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
|
11903
|
+
[vars$6.fontWeight]: '400',
|
11603
11904
|
|
11604
|
-
[vars$
|
11605
|
-
[vars$
|
11905
|
+
[vars$6.verticalPadding]: '0.25em',
|
11906
|
+
[vars$6.horizontalPadding]: '0.5em',
|
11606
11907
|
|
11607
|
-
[vars$
|
11608
|
-
[vars$
|
11609
|
-
[vars$
|
11610
|
-
[vars$
|
11908
|
+
[vars$6.borderWidth]: globalRefs$4.border.xs,
|
11909
|
+
[vars$6.borderRadius]: globalRefs$4.radius.xs,
|
11910
|
+
[vars$6.borderColor]: 'transparent',
|
11911
|
+
[vars$6.borderStyle]: 'solid',
|
11611
11912
|
|
11612
11913
|
_fullWidth: {
|
11613
|
-
[vars$
|
11914
|
+
[vars$6.hostWidth]: '100%',
|
11614
11915
|
},
|
11615
11916
|
|
11616
11917
|
size: {
|
11617
|
-
xs: { [vars$
|
11618
|
-
sm: { [vars$
|
11619
|
-
md: { [vars$
|
11620
|
-
lg: { [vars$
|
11918
|
+
xs: { [vars$6.fontSize]: '12px' },
|
11919
|
+
sm: { [vars$6.fontSize]: '14px' },
|
11920
|
+
md: { [vars$6.fontSize]: '16px' },
|
11921
|
+
lg: { [vars$6.fontSize]: '18px' },
|
11621
11922
|
},
|
11622
11923
|
|
11623
11924
|
mode: {
|
11624
11925
|
default: {
|
11625
|
-
[vars$
|
11926
|
+
[vars$6.textColor]: globalRefs$4.colors.surface.dark,
|
11626
11927
|
_bordered: {
|
11627
|
-
[vars$
|
11928
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.light,
|
11628
11929
|
},
|
11629
11930
|
},
|
11630
11931
|
primary: {
|
11631
|
-
[vars$
|
11932
|
+
[vars$6.textColor]: globalRefs$4.colors.primary.main,
|
11632
11933
|
_bordered: {
|
11633
|
-
[vars$
|
11934
|
+
[vars$6.borderColor]: globalRefs$4.colors.primary.light,
|
11634
11935
|
},
|
11635
11936
|
},
|
11636
11937
|
secondary: {
|
11637
|
-
[vars$
|
11938
|
+
[vars$6.textColor]: globalRefs$4.colors.secondary.main,
|
11638
11939
|
_bordered: {
|
11639
|
-
[vars$
|
11940
|
+
[vars$6.borderColor]: globalRefs$4.colors.secondary.light,
|
11640
11941
|
},
|
11641
11942
|
},
|
11642
11943
|
error: {
|
11643
|
-
[vars$
|
11944
|
+
[vars$6.textColor]: globalRefs$4.colors.error.main,
|
11644
11945
|
_bordered: {
|
11645
|
-
[vars$
|
11946
|
+
[vars$6.borderColor]: globalRefs$4.colors.error.light,
|
11646
11947
|
},
|
11647
11948
|
},
|
11648
11949
|
success: {
|
11649
|
-
[vars$
|
11950
|
+
[vars$6.textColor]: globalRefs$4.colors.success.main,
|
11650
11951
|
_bordered: {
|
11651
|
-
[vars$
|
11952
|
+
[vars$6.borderColor]: globalRefs$4.colors.success.light,
|
11652
11953
|
},
|
11653
11954
|
},
|
11654
11955
|
},
|
@@ -11657,19 +11958,19 @@ const badge = {
|
|
11657
11958
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
11658
11959
|
__proto__: null,
|
11659
11960
|
default: badge,
|
11660
|
-
vars: vars$
|
11961
|
+
vars: vars$6
|
11661
11962
|
});
|
11662
11963
|
|
11663
|
-
const globalRefs$
|
11964
|
+
const globalRefs$3 = getThemeRefs(globals);
|
11664
11965
|
const compVars = AvatarClass.cssVarList;
|
11665
11966
|
|
11666
11967
|
const avatar = {
|
11667
|
-
[compVars.hostDirection]: globalRefs$
|
11668
|
-
[compVars.editableIconColor]: globalRefs$
|
11669
|
-
[compVars.editableBorderColor]: globalRefs$
|
11670
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
11671
|
-
[compVars.avatarTextColor]: globalRefs$
|
11672
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
11968
|
+
[compVars.hostDirection]: globalRefs$3.direction,
|
11969
|
+
[compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
|
11970
|
+
[compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
|
11971
|
+
[compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
|
11972
|
+
[compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
|
11973
|
+
[compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
|
11673
11974
|
|
11674
11975
|
_editable: {
|
11675
11976
|
[compVars.cursor]: 'pointer',
|
@@ -11695,79 +11996,107 @@ const avatar = {
|
|
11695
11996
|
},
|
11696
11997
|
};
|
11697
11998
|
|
11698
|
-
const vars$
|
11999
|
+
const vars$5 = {
|
11699
12000
|
...compVars,
|
11700
12001
|
};
|
11701
12002
|
|
11702
12003
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
11703
12004
|
__proto__: null,
|
11704
12005
|
default: avatar,
|
11705
|
-
vars: vars$
|
12006
|
+
vars: vars$5
|
11706
12007
|
});
|
11707
12008
|
|
11708
|
-
const globalRefs$
|
12009
|
+
const globalRefs$2 = getThemeRefs(globals);
|
11709
12010
|
|
11710
|
-
const vars$
|
12011
|
+
const vars$4 = MappingsFieldClass.cssVarList;
|
11711
12012
|
|
11712
12013
|
const mappingsField = {
|
11713
|
-
[vars$
|
11714
|
-
[vars$
|
11715
|
-
[vars$
|
11716
|
-
[vars$
|
11717
|
-
[vars$
|
11718
|
-
[vars$
|
11719
|
-
[vars$
|
11720
|
-
[vars$
|
11721
|
-
[vars$
|
11722
|
-
[vars$
|
12014
|
+
[vars$4.hostWidth]: refs.width,
|
12015
|
+
[vars$4.hostDirection]: refs.direction,
|
12016
|
+
[vars$4.fontSize]: refs.fontSize,
|
12017
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
12018
|
+
[vars$4.separatorFontSize]: '14px',
|
12019
|
+
[vars$4.labelsFontSize]: '14px',
|
12020
|
+
[vars$4.labelsLineHeight]: '1',
|
12021
|
+
[vars$4.labelsMarginBottom]: '6px',
|
12022
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
12023
|
+
[vars$4.itemMarginBottom]: '1em',
|
11723
12024
|
// To be positioned correctly, the min width has to match the text field min width
|
11724
|
-
[vars$
|
12025
|
+
[vars$4.valueLabelMinWidth]: refs.minWidth,
|
11725
12026
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11726
|
-
[vars$
|
11727
|
-
[vars$
|
11728
|
-
[vars$
|
12027
|
+
[vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
|
12028
|
+
[vars$4.separatorWidth]: '70px',
|
12029
|
+
[vars$4.removeButtonWidth]: '60px',
|
11729
12030
|
};
|
11730
12031
|
|
11731
12032
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
11732
12033
|
__proto__: null,
|
11733
12034
|
default: mappingsField,
|
11734
12035
|
mappingsField: mappingsField,
|
11735
|
-
vars: vars$
|
12036
|
+
vars: vars$4
|
11736
12037
|
});
|
11737
12038
|
|
11738
|
-
const globalRefs = getThemeRefs(globals);
|
11739
|
-
const vars$
|
12039
|
+
const globalRefs$1 = getThemeRefs(globals);
|
12040
|
+
const vars$3 = UserAttributeClass.cssVarList;
|
11740
12041
|
|
11741
12042
|
const userAttribute = {
|
11742
|
-
[vars$
|
11743
|
-
[vars$
|
11744
|
-
[vars$
|
11745
|
-
[vars$
|
11746
|
-
[vars$
|
11747
|
-
[vars$
|
12043
|
+
[vars$3.hostDirection]: globalRefs$1.direction,
|
12044
|
+
[vars$3.labelTextWidth]: '150px',
|
12045
|
+
[vars$3.valueTextWidth]: '200px',
|
12046
|
+
[vars$3.badgeMaxWidth]: '85px',
|
12047
|
+
[vars$3.itemsGap]: '16px',
|
12048
|
+
[vars$3.hostMinWidth]: '530px',
|
11748
12049
|
_fullWidth: {
|
11749
|
-
[vars$
|
12050
|
+
[vars$3.hostWidth]: '100%',
|
11750
12051
|
},
|
11751
12052
|
};
|
11752
12053
|
|
11753
12054
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
11754
12055
|
__proto__: null,
|
11755
12056
|
default: userAttribute,
|
11756
|
-
vars: vars$
|
12057
|
+
vars: vars$3
|
11757
12058
|
});
|
11758
12059
|
|
11759
|
-
const vars$
|
12060
|
+
const vars$2 = SamlGroupMappingsClass.cssVarList;
|
11760
12061
|
|
11761
12062
|
const samlGroupMappings = {
|
11762
|
-
[vars$
|
11763
|
-
[vars$
|
11764
|
-
[vars$
|
12063
|
+
[vars$2.hostWidth]: refs.width,
|
12064
|
+
[vars$2.hostDirection]: refs.direction,
|
12065
|
+
[vars$2.groupNameInputMarginBottom]: '1em',
|
11765
12066
|
};
|
11766
12067
|
|
11767
12068
|
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
11768
12069
|
__proto__: null,
|
11769
12070
|
default: samlGroupMappings,
|
11770
12071
|
samlGroupMappings: samlGroupMappings,
|
12072
|
+
vars: vars$2
|
12073
|
+
});
|
12074
|
+
|
12075
|
+
const globalRefs = getThemeRefs(globals);
|
12076
|
+
const vars$1 = PolicyValidationClass.cssVarList;
|
12077
|
+
|
12078
|
+
const policyValidation = {
|
12079
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
12080
|
+
[vars$1.fontSize]: refs.labelFontSize,
|
12081
|
+
[vars$1.textColor]: refs.labelTextColor,
|
12082
|
+
[vars$1.borderWidth]: refs.borderWidth,
|
12083
|
+
[vars$1.borderStyle]: refs.borderStyle,
|
12084
|
+
[vars$1.borderColor]: refs.borderColor,
|
12085
|
+
[vars$1.borderRadius]: globalRefs.radius.sm,
|
12086
|
+
[vars$1.backgroundColor]: 'none',
|
12087
|
+
[vars$1.padding]: '0px',
|
12088
|
+
[vars$1.labelMargin]: globalRefs.spacing.sm,
|
12089
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.lg,
|
12090
|
+
[vars$1.itemSymbolDefault]: "'\\2022'", // "•"
|
12091
|
+
[vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
|
12092
|
+
[vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
|
12093
|
+
[vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
|
12094
|
+
[vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
|
12095
|
+
};
|
12096
|
+
|
12097
|
+
var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
12098
|
+
__proto__: null,
|
12099
|
+
default: policyValidation,
|
11771
12100
|
vars: vars$1
|
11772
12101
|
});
|
11773
12102
|
|
@@ -11809,6 +12138,7 @@ const components = {
|
|
11809
12138
|
mappingsField: mappingsField$1,
|
11810
12139
|
userAttribute: userAttribute$1,
|
11811
12140
|
samlGroupMappings: samlGroupMappings$1,
|
12141
|
+
policyValidation: policyValidation$1,
|
11812
12142
|
};
|
11813
12143
|
|
11814
12144
|
const theme = Object.keys(components).reduce(
|
@@ -11821,7 +12151,7 @@ const vars = Object.keys(components).reduce(
|
|
11821
12151
|
);
|
11822
12152
|
|
11823
12153
|
const defaultTheme = { globals, components: theme };
|
11824
|
-
const themeVars = { globals: vars$
|
12154
|
+
const themeVars = { globals: vars$D, components: vars };
|
11825
12155
|
|
11826
12156
|
const colors = {
|
11827
12157
|
surface: {
|
@@ -11867,5 +12197,5 @@ const darkTheme = merge({}, defaultTheme, {
|
|
11867
12197
|
},
|
11868
12198
|
});
|
11869
12199
|
|
11870
|
-
export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
12200
|
+
export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11871
12201
|
//# sourceMappingURL=index.esm.js.map
|