@descope/web-components-ui 1.0.235 → 1.0.237
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +770 -647
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +796 -643
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/7044.js +1 -0
- package/dist/umd/descope-badge-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-badge/BadgeClass.js +54 -0
- package/src/components/descope-badge/index.js +5 -0
- package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +31 -0
- package/src/components/descope-grid/descope-grid-custom-column/index.js +7 -0
- package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js +57 -0
- package/src/components/descope-grid/descope-grid-selection-column/index.js +1 -56
- package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js +18 -0
- package/src/components/descope-grid/descope-grid-text-column/index.js +1 -10
- package/src/components/descope-grid/index.js +1 -1
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/theme/components/badge.js +71 -0
- package/src/theme/components/index.js +2 -0
- package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +0 -1
- package/src/components/descope-grid/descope-grid-status-column/index.js +0 -25
package/dist/index.esm.js
CHANGED
@@ -1239,7 +1239,7 @@ const clickableMixin = (superclass) =>
|
|
1239
1239
|
}
|
1240
1240
|
};
|
1241
1241
|
|
1242
|
-
const componentName$
|
1242
|
+
const componentName$D = getComponentName('button');
|
1243
1243
|
|
1244
1244
|
const resetStyles = `
|
1245
1245
|
:host {
|
@@ -1340,7 +1340,7 @@ const ButtonClass = compose(
|
|
1340
1340
|
}
|
1341
1341
|
`,
|
1342
1342
|
excludeAttrsSync: ['tabindex'],
|
1343
|
-
componentName: componentName$
|
1343
|
+
componentName: componentName$D,
|
1344
1344
|
})
|
1345
1345
|
);
|
1346
1346
|
|
@@ -1377,7 +1377,7 @@ loadingIndicatorStyles = `
|
|
1377
1377
|
}
|
1378
1378
|
`;
|
1379
1379
|
|
1380
|
-
customElements.define(componentName$
|
1380
|
+
customElements.define(componentName$D, ButtonClass);
|
1381
1381
|
|
1382
1382
|
const createBaseInputClass = (...args) =>
|
1383
1383
|
compose(
|
@@ -1387,11 +1387,11 @@ const createBaseInputClass = (...args) =>
|
|
1387
1387
|
inputEventsDispatchingMixin
|
1388
1388
|
)(createBaseClass(...args));
|
1389
1389
|
|
1390
|
-
const componentName$
|
1390
|
+
const componentName$C = getComponentName('boolean-field-internal');
|
1391
1391
|
|
1392
1392
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1393
1393
|
|
1394
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1394
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
|
1395
1395
|
|
1396
1396
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1397
1397
|
static get observedAttributes() {
|
@@ -1467,14 +1467,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1467
1467
|
|
1468
1468
|
const template = document.createElement('template');
|
1469
1469
|
template.innerHTML = `
|
1470
|
-
<${componentName$
|
1470
|
+
<${componentName$C}
|
1471
1471
|
tabindex="-1"
|
1472
1472
|
slot="input"
|
1473
|
-
></${componentName$
|
1473
|
+
></${componentName$C}>
|
1474
1474
|
`;
|
1475
1475
|
|
1476
1476
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1477
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1477
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$C);
|
1478
1478
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1479
1479
|
|
1480
1480
|
forwardAttrs(this, this.inputElement, {
|
@@ -1673,7 +1673,7 @@ descope-boolean-field-internal {
|
|
1673
1673
|
}
|
1674
1674
|
`;
|
1675
1675
|
|
1676
|
-
const componentName$
|
1676
|
+
const componentName$B = getComponentName('checkbox');
|
1677
1677
|
|
1678
1678
|
const {
|
1679
1679
|
host: host$f,
|
@@ -1779,15 +1779,15 @@ const CheckboxClass = compose(
|
|
1779
1779
|
}
|
1780
1780
|
`,
|
1781
1781
|
excludeAttrsSync: ['label', 'tabindex'],
|
1782
|
-
componentName: componentName$
|
1782
|
+
componentName: componentName$B,
|
1783
1783
|
})
|
1784
1784
|
);
|
1785
1785
|
|
1786
|
-
customElements.define(componentName$
|
1786
|
+
customElements.define(componentName$C, BooleanInputInternal);
|
1787
1787
|
|
1788
|
-
customElements.define(componentName$
|
1788
|
+
customElements.define(componentName$B, CheckboxClass);
|
1789
1789
|
|
1790
|
-
const componentName$
|
1790
|
+
const componentName$A = getComponentName('switch-toggle');
|
1791
1791
|
|
1792
1792
|
const {
|
1793
1793
|
host: host$e,
|
@@ -1919,17 +1919,17 @@ const SwitchToggleClass = compose(
|
|
1919
1919
|
}
|
1920
1920
|
`,
|
1921
1921
|
excludeAttrsSync: ['label', 'tabindex'],
|
1922
|
-
componentName: componentName$
|
1922
|
+
componentName: componentName$A,
|
1923
1923
|
})
|
1924
1924
|
);
|
1925
1925
|
|
1926
|
-
customElements.define(componentName$
|
1926
|
+
customElements.define(componentName$A, SwitchToggleClass);
|
1927
1927
|
|
1928
|
-
const componentName$
|
1928
|
+
const componentName$z = getComponentName('loader-linear');
|
1929
1929
|
|
1930
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1930
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
|
1931
1931
|
static get componentName() {
|
1932
|
-
return componentName$
|
1932
|
+
return componentName$z;
|
1933
1933
|
}
|
1934
1934
|
|
1935
1935
|
constructor() {
|
@@ -1990,11 +1990,11 @@ const LoaderLinearClass = compose(
|
|
1990
1990
|
componentNameValidationMixin
|
1991
1991
|
)(RawLoaderLinear);
|
1992
1992
|
|
1993
|
-
customElements.define(componentName$
|
1993
|
+
customElements.define(componentName$z, LoaderLinearClass);
|
1994
1994
|
|
1995
|
-
const componentName$
|
1995
|
+
const componentName$y = getComponentName('loader-radial');
|
1996
1996
|
|
1997
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1997
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
|
1998
1998
|
constructor() {
|
1999
1999
|
super();
|
2000
2000
|
|
@@ -2038,11 +2038,11 @@ const LoaderRadialClass = compose(
|
|
2038
2038
|
componentNameValidationMixin
|
2039
2039
|
)(RawLoaderRadial);
|
2040
2040
|
|
2041
|
-
customElements.define(componentName$
|
2041
|
+
customElements.define(componentName$y, LoaderRadialClass);
|
2042
2042
|
|
2043
|
-
const componentName$
|
2043
|
+
const componentName$x = getComponentName('container');
|
2044
2044
|
|
2045
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2045
|
+
class RawContainer extends createBaseClass({ componentName: componentName$x, baseSelector: 'slot' }) {
|
2046
2046
|
constructor() {
|
2047
2047
|
super();
|
2048
2048
|
|
@@ -2094,13 +2094,13 @@ const ContainerClass = compose(
|
|
2094
2094
|
componentNameValidationMixin
|
2095
2095
|
)(RawContainer);
|
2096
2096
|
|
2097
|
-
customElements.define(componentName$
|
2097
|
+
customElements.define(componentName$x, ContainerClass);
|
2098
2098
|
|
2099
2099
|
// eslint-disable-next-line max-classes-per-file
|
2100
2100
|
|
2101
|
-
const componentName$
|
2101
|
+
const componentName$w = getComponentName('text');
|
2102
2102
|
|
2103
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2103
|
+
class RawText extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
|
2104
2104
|
constructor() {
|
2105
2105
|
super();
|
2106
2106
|
|
@@ -2160,8 +2160,8 @@ const TextClass = compose(
|
|
2160
2160
|
customTextMixin
|
2161
2161
|
)(RawText);
|
2162
2162
|
|
2163
|
-
const componentName$
|
2164
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2163
|
+
const componentName$v = getComponentName('divider');
|
2164
|
+
class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
2165
2165
|
constructor() {
|
2166
2166
|
super();
|
2167
2167
|
|
@@ -2260,9 +2260,9 @@ const DividerClass = compose(
|
|
2260
2260
|
componentNameValidationMixin
|
2261
2261
|
)(RawDivider);
|
2262
2262
|
|
2263
|
-
customElements.define(componentName$
|
2263
|
+
customElements.define(componentName$w, TextClass);
|
2264
2264
|
|
2265
|
-
customElements.define(componentName$
|
2265
|
+
customElements.define(componentName$v, DividerClass);
|
2266
2266
|
|
2267
2267
|
const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2268
2268
|
{
|
@@ -2319,7 +2319,7 @@ var textFieldMappings = {
|
|
2319
2319
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2320
2320
|
};
|
2321
2321
|
|
2322
|
-
const componentName$
|
2322
|
+
const componentName$u = getComponentName('email-field');
|
2323
2323
|
|
2324
2324
|
const customMixin$7 = (superclass) =>
|
2325
2325
|
class EmailFieldMixinClass extends superclass {
|
@@ -2354,15 +2354,15 @@ const EmailFieldClass = compose(
|
|
2354
2354
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2355
2355
|
`,
|
2356
2356
|
excludeAttrsSync: ['tabindex'],
|
2357
|
-
componentName: componentName$
|
2357
|
+
componentName: componentName$u,
|
2358
2358
|
})
|
2359
2359
|
);
|
2360
2360
|
|
2361
|
-
customElements.define(componentName$
|
2361
|
+
customElements.define(componentName$u, EmailFieldClass);
|
2362
2362
|
|
2363
|
-
const componentName$
|
2363
|
+
const componentName$t = getComponentName('link');
|
2364
2364
|
|
2365
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2365
|
+
class RawLink extends createBaseClass({ componentName: componentName$t, baseSelector: ':host a' }) {
|
2366
2366
|
constructor() {
|
2367
2367
|
super();
|
2368
2368
|
|
@@ -2427,7 +2427,7 @@ const LinkClass = compose(
|
|
2427
2427
|
componentNameValidationMixin
|
2428
2428
|
)(RawLink);
|
2429
2429
|
|
2430
|
-
customElements.define(componentName$
|
2430
|
+
customElements.define(componentName$t, LinkClass);
|
2431
2431
|
|
2432
2432
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2433
2433
|
let style;
|
@@ -2479,27 +2479,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2479
2479
|
return CssVarImageClass;
|
2480
2480
|
};
|
2481
2481
|
|
2482
|
-
const componentName$
|
2482
|
+
const componentName$s = getComponentName('logo');
|
2483
2483
|
|
2484
2484
|
const LogoClass = createCssVarImageClass({
|
2485
|
-
componentName: componentName$
|
2485
|
+
componentName: componentName$s,
|
2486
2486
|
varName: 'url',
|
2487
2487
|
fallbackVarName: 'fallbackUrl',
|
2488
2488
|
});
|
2489
2489
|
|
2490
|
-
customElements.define(componentName$
|
2490
|
+
customElements.define(componentName$s, LogoClass);
|
2491
2491
|
|
2492
|
-
const componentName$
|
2492
|
+
const componentName$r = getComponentName('totp-image');
|
2493
2493
|
|
2494
2494
|
const TotpImageClass = createCssVarImageClass({
|
2495
|
-
componentName: componentName$
|
2495
|
+
componentName: componentName$r,
|
2496
2496
|
varName: 'url',
|
2497
2497
|
fallbackVarName: 'fallbackUrl',
|
2498
2498
|
});
|
2499
2499
|
|
2500
|
-
customElements.define(componentName$
|
2500
|
+
customElements.define(componentName$r, TotpImageClass);
|
2501
2501
|
|
2502
|
-
const componentName$
|
2502
|
+
const componentName$q = getComponentName('number-field');
|
2503
2503
|
|
2504
2504
|
const NumberFieldClass = compose(
|
2505
2505
|
createStyleMixin({
|
@@ -2525,11 +2525,11 @@ const NumberFieldClass = compose(
|
|
2525
2525
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2526
2526
|
`,
|
2527
2527
|
excludeAttrsSync: ['tabindex'],
|
2528
|
-
componentName: componentName$
|
2528
|
+
componentName: componentName$q,
|
2529
2529
|
})
|
2530
2530
|
);
|
2531
2531
|
|
2532
|
-
customElements.define(componentName$
|
2532
|
+
customElements.define(componentName$q, NumberFieldClass);
|
2533
2533
|
|
2534
2534
|
const focusElement = (ele) => {
|
2535
2535
|
ele?.focus();
|
@@ -2547,13 +2547,13 @@ const getSanitizedCharacters = (str) => {
|
|
2547
2547
|
|
2548
2548
|
/* eslint-disable no-param-reassign */
|
2549
2549
|
|
2550
|
-
const componentName$
|
2550
|
+
const componentName$p = getComponentName('passcode-internal');
|
2551
2551
|
|
2552
2552
|
const observedAttributes$5 = ['digits'];
|
2553
2553
|
|
2554
2554
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2555
2555
|
|
2556
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2556
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
2557
2557
|
|
2558
2558
|
class PasscodeInternal extends BaseInputClass$4 {
|
2559
2559
|
static get observedAttributes() {
|
@@ -2755,7 +2755,7 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2755
2755
|
}
|
2756
2756
|
}
|
2757
2757
|
|
2758
|
-
const componentName$
|
2758
|
+
const componentName$o = getComponentName('text-field');
|
2759
2759
|
|
2760
2760
|
const observedAttrs = ['type'];
|
2761
2761
|
|
@@ -2805,11 +2805,11 @@ const TextFieldClass = compose(
|
|
2805
2805
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2806
2806
|
`,
|
2807
2807
|
excludeAttrsSync: ['tabindex'],
|
2808
|
-
componentName: componentName$
|
2808
|
+
componentName: componentName$o,
|
2809
2809
|
})
|
2810
2810
|
);
|
2811
2811
|
|
2812
|
-
const componentName$
|
2812
|
+
const componentName$n = getComponentName('passcode');
|
2813
2813
|
|
2814
2814
|
const observedAttributes$4 = ['digits'];
|
2815
2815
|
|
@@ -2828,17 +2828,17 @@ const customMixin$5 = (superclass) =>
|
|
2828
2828
|
const template = document.createElement('template');
|
2829
2829
|
|
2830
2830
|
template.innerHTML = `
|
2831
|
-
<${componentName$
|
2831
|
+
<${componentName$p}
|
2832
2832
|
bordered="true"
|
2833
2833
|
name="code"
|
2834
2834
|
tabindex="-1"
|
2835
2835
|
slot="input"
|
2836
|
-
><slot></slot></${componentName$
|
2836
|
+
><slot></slot></${componentName$p}>
|
2837
2837
|
`;
|
2838
2838
|
|
2839
2839
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2840
2840
|
|
2841
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2841
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
2842
2842
|
|
2843
2843
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2844
2844
|
}
|
@@ -2978,15 +2978,15 @@ const PasscodeClass = compose(
|
|
2978
2978
|
${resetInputCursor('vaadin-text-field')}
|
2979
2979
|
`,
|
2980
2980
|
excludeAttrsSync: ['tabindex'],
|
2981
|
-
componentName: componentName$
|
2981
|
+
componentName: componentName$n,
|
2982
2982
|
})
|
2983
2983
|
);
|
2984
2984
|
|
2985
|
-
customElements.define(componentName$
|
2985
|
+
customElements.define(componentName$o, TextFieldClass);
|
2986
2986
|
|
2987
|
-
customElements.define(componentName$
|
2987
|
+
customElements.define(componentName$p, PasscodeInternal);
|
2988
2988
|
|
2989
|
-
customElements.define(componentName$
|
2989
|
+
customElements.define(componentName$n, PasscodeClass);
|
2990
2990
|
|
2991
2991
|
const passwordDraggableMixin = (superclass) =>
|
2992
2992
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3022,7 +3022,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
3022
3022
|
}
|
3023
3023
|
};
|
3024
3024
|
|
3025
|
-
const componentName$
|
3025
|
+
const componentName$m = getComponentName('password');
|
3026
3026
|
|
3027
3027
|
const {
|
3028
3028
|
host: host$8,
|
@@ -3153,13 +3153,13 @@ const PasswordClass = compose(
|
|
3153
3153
|
}
|
3154
3154
|
`,
|
3155
3155
|
excludeAttrsSync: ['tabindex'],
|
3156
|
-
componentName: componentName$
|
3156
|
+
componentName: componentName$m,
|
3157
3157
|
})
|
3158
3158
|
);
|
3159
3159
|
|
3160
|
-
customElements.define(componentName$
|
3160
|
+
customElements.define(componentName$m, PasswordClass);
|
3161
3161
|
|
3162
|
-
const componentName$
|
3162
|
+
const componentName$l = getComponentName('text-area');
|
3163
3163
|
|
3164
3164
|
const {
|
3165
3165
|
host: host$7,
|
@@ -3234,17 +3234,17 @@ const TextAreaClass = compose(
|
|
3234
3234
|
${resetInputCursor('vaadin-text-area')}
|
3235
3235
|
`,
|
3236
3236
|
excludeAttrsSync: ['tabindex'],
|
3237
|
-
componentName: componentName$
|
3237
|
+
componentName: componentName$l,
|
3238
3238
|
})
|
3239
3239
|
);
|
3240
3240
|
|
3241
|
-
customElements.define(componentName$
|
3241
|
+
customElements.define(componentName$l, TextAreaClass);
|
3242
3242
|
|
3243
3243
|
const observedAttributes$3 = ['src', 'alt'];
|
3244
3244
|
|
3245
|
-
const componentName$
|
3245
|
+
const componentName$k = getComponentName('image');
|
3246
3246
|
|
3247
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3247
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$k, baseSelector: ':host > img' });
|
3248
3248
|
class RawImage extends BaseClass$1 {
|
3249
3249
|
static get observedAttributes() {
|
3250
3250
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3284,9 +3284,9 @@ const ImageClass = compose(
|
|
3284
3284
|
draggableMixin
|
3285
3285
|
)(RawImage);
|
3286
3286
|
|
3287
|
-
customElements.define(componentName$
|
3287
|
+
customElements.define(componentName$k, ImageClass);
|
3288
3288
|
|
3289
|
-
const componentName$
|
3289
|
+
const componentName$j = getComponentName('combo-box');
|
3290
3290
|
|
3291
3291
|
const ComboBoxMixin = (superclass) =>
|
3292
3292
|
class ComboBoxMixinClass extends superclass {
|
@@ -3650,12 +3650,12 @@ const ComboBoxClass = compose(
|
|
3650
3650
|
// and reset items to an empty array, and opening the list box with no items
|
3651
3651
|
// to display.
|
3652
3652
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3653
|
-
componentName: componentName$
|
3653
|
+
componentName: componentName$j,
|
3654
3654
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3655
3655
|
})
|
3656
3656
|
);
|
3657
3657
|
|
3658
|
-
customElements.define(componentName$
|
3658
|
+
customElements.define(componentName$j, ComboBoxClass);
|
3659
3659
|
|
3660
3660
|
var CountryCodes = [
|
3661
3661
|
{
|
@@ -4895,7 +4895,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4895
4895
|
</div>
|
4896
4896
|
`;
|
4897
4897
|
|
4898
|
-
const componentName$
|
4898
|
+
const componentName$i = getComponentName('phone-field-internal');
|
4899
4899
|
|
4900
4900
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4901
4901
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4907,7 +4907,7 @@ const mapAttrs$1 = {
|
|
4907
4907
|
|
4908
4908
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4909
4909
|
|
4910
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4910
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
4911
4911
|
|
4912
4912
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4913
4913
|
static get observedAttributes() {
|
@@ -5079,12 +5079,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
5079
5079
|
}
|
5080
5080
|
};
|
5081
5081
|
|
5082
|
-
customElements.define(componentName$
|
5082
|
+
customElements.define(componentName$i, PhoneFieldInternal$1);
|
5083
5083
|
|
5084
5084
|
const textVars$1 = TextFieldClass.cssVarList;
|
5085
5085
|
const comboVars = ComboBoxClass.cssVarList;
|
5086
5086
|
|
5087
|
-
const componentName$
|
5087
|
+
const componentName$h = getComponentName('phone-field');
|
5088
5088
|
|
5089
5089
|
const customMixin$4 = (superclass) =>
|
5090
5090
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5098,15 +5098,15 @@ const customMixin$4 = (superclass) =>
|
|
5098
5098
|
const template = document.createElement('template');
|
5099
5099
|
|
5100
5100
|
template.innerHTML = `
|
5101
|
-
<${componentName$
|
5101
|
+
<${componentName$i}
|
5102
5102
|
tabindex="-1"
|
5103
5103
|
slot="input"
|
5104
|
-
></${componentName$
|
5104
|
+
></${componentName$i}>
|
5105
5105
|
`;
|
5106
5106
|
|
5107
5107
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5108
5108
|
|
5109
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5109
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
5110
5110
|
|
5111
5111
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5112
5112
|
includeAttrs: [
|
@@ -5302,17 +5302,17 @@ const PhoneFieldClass = compose(
|
|
5302
5302
|
${resetInputLabelPosition('vaadin-text-field')}
|
5303
5303
|
`,
|
5304
5304
|
excludeAttrsSync: ['tabindex'],
|
5305
|
-
componentName: componentName$
|
5305
|
+
componentName: componentName$h,
|
5306
5306
|
})
|
5307
5307
|
);
|
5308
5308
|
|
5309
|
-
customElements.define(componentName$
|
5309
|
+
customElements.define(componentName$h, PhoneFieldClass);
|
5310
5310
|
|
5311
5311
|
const getCountryByCodeId = (countryCode) => {
|
5312
5312
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5313
5313
|
};
|
5314
5314
|
|
5315
|
-
const componentName$
|
5315
|
+
const componentName$g = getComponentName('phone-field-internal-input-box');
|
5316
5316
|
|
5317
5317
|
const observedAttributes$2 = [
|
5318
5318
|
'disabled',
|
@@ -5326,7 +5326,7 @@ const mapAttrs = {
|
|
5326
5326
|
'phone-input-placeholder': 'placeholder',
|
5327
5327
|
};
|
5328
5328
|
|
5329
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5329
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
|
5330
5330
|
|
5331
5331
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5332
5332
|
static get observedAttributes() {
|
@@ -5465,11 +5465,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5465
5465
|
}
|
5466
5466
|
}
|
5467
5467
|
|
5468
|
-
customElements.define(componentName$
|
5468
|
+
customElements.define(componentName$g, PhoneFieldInternal);
|
5469
5469
|
|
5470
5470
|
const textVars = TextFieldClass.cssVarList;
|
5471
5471
|
|
5472
|
-
const componentName$
|
5472
|
+
const componentName$f = getComponentName('phone-input-box-field');
|
5473
5473
|
|
5474
5474
|
const customMixin$3 = (superclass) =>
|
5475
5475
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5483,15 +5483,15 @@ const customMixin$3 = (superclass) =>
|
|
5483
5483
|
const template = document.createElement('template');
|
5484
5484
|
|
5485
5485
|
template.innerHTML = `
|
5486
|
-
<${componentName$
|
5486
|
+
<${componentName$g}
|
5487
5487
|
tabindex="-1"
|
5488
5488
|
slot="input"
|
5489
|
-
></${componentName$
|
5489
|
+
></${componentName$g}>
|
5490
5490
|
`;
|
5491
5491
|
|
5492
5492
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5493
5493
|
|
5494
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5494
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
5495
5495
|
|
5496
5496
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5497
5497
|
includeAttrs: [
|
@@ -5624,15 +5624,15 @@ const PhoneFieldInputBoxClass = compose(
|
|
5624
5624
|
${resetInputLabelPosition('vaadin-text-field')}
|
5625
5625
|
`,
|
5626
5626
|
excludeAttrsSync: ['tabindex'],
|
5627
|
-
componentName: componentName$
|
5627
|
+
componentName: componentName$f,
|
5628
5628
|
})
|
5629
5629
|
);
|
5630
5630
|
|
5631
|
-
customElements.define(componentName$
|
5631
|
+
customElements.define(componentName$f, PhoneFieldInputBoxClass);
|
5632
5632
|
|
5633
|
-
const componentName$
|
5633
|
+
const componentName$e = getComponentName('new-password-internal');
|
5634
5634
|
|
5635
|
-
const componentName$
|
5635
|
+
const componentName$d = getComponentName('new-password');
|
5636
5636
|
|
5637
5637
|
const customMixin$2 = (superclass) =>
|
5638
5638
|
class NewPasswordMixinClass extends superclass {
|
@@ -5642,16 +5642,16 @@ const customMixin$2 = (superclass) =>
|
|
5642
5642
|
const template = document.createElement('template');
|
5643
5643
|
|
5644
5644
|
template.innerHTML = `
|
5645
|
-
<${componentName$
|
5645
|
+
<${componentName$e}
|
5646
5646
|
name="new-password"
|
5647
5647
|
tabindex="-1"
|
5648
5648
|
slot="input"
|
5649
|
-
></${componentName$
|
5649
|
+
></${componentName$e}>
|
5650
5650
|
`;
|
5651
5651
|
|
5652
5652
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5653
5653
|
|
5654
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5654
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
5655
5655
|
|
5656
5656
|
forwardAttrs(this, this.inputElement, {
|
5657
5657
|
includeAttrs: [
|
@@ -5758,7 +5758,7 @@ const NewPasswordClass = compose(
|
|
5758
5758
|
}
|
5759
5759
|
`,
|
5760
5760
|
excludeAttrsSync: ['tabindex'],
|
5761
|
-
componentName: componentName$
|
5761
|
+
componentName: componentName$d,
|
5762
5762
|
})
|
5763
5763
|
);
|
5764
5764
|
|
@@ -5783,7 +5783,7 @@ const commonAttrs = [
|
|
5783
5783
|
|
5784
5784
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5785
5785
|
|
5786
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5786
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
|
5787
5787
|
|
5788
5788
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5789
5789
|
static get observedAttributes() {
|
@@ -5948,16 +5948,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5948
5948
|
}
|
5949
5949
|
}
|
5950
5950
|
|
5951
|
-
customElements.define(componentName$
|
5951
|
+
customElements.define(componentName$e, NewPasswordInternal);
|
5952
5952
|
|
5953
|
-
customElements.define(componentName$
|
5953
|
+
customElements.define(componentName$d, NewPasswordClass);
|
5954
5954
|
|
5955
|
-
const componentName$
|
5955
|
+
const componentName$c = getComponentName('recaptcha');
|
5956
5956
|
|
5957
5957
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5958
5958
|
|
5959
5959
|
const BaseClass = createBaseClass({
|
5960
|
-
componentName: componentName$
|
5960
|
+
componentName: componentName$c,
|
5961
5961
|
baseSelector: ':host > div',
|
5962
5962
|
});
|
5963
5963
|
class RawRecaptcha extends BaseClass {
|
@@ -6109,7 +6109,7 @@ class RawRecaptcha extends BaseClass {
|
|
6109
6109
|
|
6110
6110
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6111
6111
|
|
6112
|
-
customElements.define(componentName$
|
6112
|
+
customElements.define(componentName$c, RecaptchaClass);
|
6113
6113
|
|
6114
6114
|
const getFileBase64 = (fileObj) => {
|
6115
6115
|
return new Promise((resolve) => {
|
@@ -6123,7 +6123,7 @@ const getFilename = (fileObj) => {
|
|
6123
6123
|
return fileObj.name.replace(/^.*\\/, '');
|
6124
6124
|
};
|
6125
6125
|
|
6126
|
-
const componentName$
|
6126
|
+
const componentName$b = getComponentName('upload-file');
|
6127
6127
|
|
6128
6128
|
const observedAttributes = [
|
6129
6129
|
'title',
|
@@ -6138,7 +6138,7 @@ const observedAttributes = [
|
|
6138
6138
|
'icon',
|
6139
6139
|
];
|
6140
6140
|
|
6141
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6141
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$b, baseSelector: ':host > div' });
|
6142
6142
|
|
6143
6143
|
class RawUploadFile extends BaseInputClass {
|
6144
6144
|
static get observedAttributes() {
|
@@ -6353,12 +6353,12 @@ const UploadFileClass = compose(
|
|
6353
6353
|
componentNameValidationMixin
|
6354
6354
|
)(RawUploadFile);
|
6355
6355
|
|
6356
|
-
customElements.define(componentName$
|
6356
|
+
customElements.define(componentName$b, UploadFileClass);
|
6357
6357
|
|
6358
|
-
const componentName$
|
6358
|
+
const componentName$a = getComponentName('button-selection-group-internal');
|
6359
6359
|
|
6360
6360
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6361
|
-
componentName: componentName$
|
6361
|
+
componentName: componentName$a,
|
6362
6362
|
baseSelector: 'slot',
|
6363
6363
|
}) {
|
6364
6364
|
constructor() {
|
@@ -6495,7 +6495,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6495
6495
|
}
|
6496
6496
|
}
|
6497
6497
|
|
6498
|
-
const componentName$
|
6498
|
+
const componentName$9 = getComponentName('button-selection-group');
|
6499
6499
|
|
6500
6500
|
const customMixin$1 = (superclass) =>
|
6501
6501
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -6570,18 +6570,18 @@ const customMixin$1 = (superclass) =>
|
|
6570
6570
|
const template = document.createElement('template');
|
6571
6571
|
|
6572
6572
|
template.innerHTML = `
|
6573
|
-
<${componentName$
|
6573
|
+
<${componentName$a}
|
6574
6574
|
name="button-selection-group"
|
6575
6575
|
slot="input"
|
6576
6576
|
tabindex="-1"
|
6577
6577
|
>
|
6578
6578
|
<slot></slot>
|
6579
|
-
</${componentName$
|
6579
|
+
</${componentName$a}>
|
6580
6580
|
`;
|
6581
6581
|
|
6582
6582
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6583
6583
|
|
6584
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6584
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
6585
6585
|
|
6586
6586
|
forwardAttrs(this, this.inputElement, {
|
6587
6587
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6686,18 +6686,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6686
6686
|
${resetInputCursor('vaadin-text-field')}
|
6687
6687
|
`,
|
6688
6688
|
excludeAttrsSync: ['tabindex'],
|
6689
|
-
componentName: componentName$
|
6689
|
+
componentName: componentName$9,
|
6690
6690
|
})
|
6691
6691
|
);
|
6692
6692
|
|
6693
|
-
customElements.define(componentName$
|
6693
|
+
customElements.define(componentName$a, ButtonSelectionGroupInternalClass);
|
6694
6694
|
|
6695
|
-
customElements.define(componentName$
|
6695
|
+
customElements.define(componentName$9, ButtonSelectionGroupClass);
|
6696
6696
|
|
6697
|
-
const componentName$
|
6697
|
+
const componentName$8 = getComponentName('button-selection-group-item');
|
6698
6698
|
|
6699
6699
|
class RawSelectItem extends createBaseClass({
|
6700
|
-
componentName: componentName$
|
6700
|
+
componentName: componentName$8,
|
6701
6701
|
baseSelector: ':host > descope-button',
|
6702
6702
|
}) {
|
6703
6703
|
get size() {
|
@@ -6795,39 +6795,65 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6795
6795
|
componentNameValidationMixin
|
6796
6796
|
)(RawSelectItem);
|
6797
6797
|
|
6798
|
-
customElements.define(componentName$
|
6798
|
+
customElements.define(componentName$8, ButtonSelectionGroupItemClass);
|
6799
|
+
|
6800
|
+
class GridTextColumnClass extends GridSortColumn {
|
6801
|
+
get sortable() {
|
6802
|
+
return this.getAttribute('sortable') === 'true';
|
6803
|
+
}
|
6804
|
+
|
6805
|
+
_defaultHeaderRenderer(root, _column) {
|
6806
|
+
if (this.sortable) {
|
6807
|
+
super._defaultHeaderRenderer(root, _column);
|
6808
|
+
|
6809
|
+
return;
|
6810
|
+
}
|
6799
6811
|
|
6800
|
-
|
6812
|
+
// eslint-disable-next-line no-param-reassign
|
6813
|
+
root.innerHTML = this.__getHeader(this.header, this.path);
|
6814
|
+
}
|
6815
|
+
}
|
6801
6816
|
|
6802
|
-
|
6817
|
+
const componentName$7 = getComponentName('grid-text-column');
|
6803
6818
|
|
6804
|
-
customElements.define(componentName$
|
6819
|
+
customElements.define(componentName$7, GridTextColumnClass);
|
6805
6820
|
|
6806
6821
|
/* eslint-disable no-param-reassign */
|
6807
6822
|
|
6808
|
-
|
6809
|
-
class GridStatusColumnClass extends GridSortColumn {
|
6823
|
+
class GridCustomColumnClass extends GridTextColumnClass {
|
6810
6824
|
_defaultRenderer(cell, _col, model) {
|
6811
|
-
const
|
6812
|
-
|
6825
|
+
const content = model.item[this.path];
|
6826
|
+
|
6827
|
+
// we get a list of elements that can be used to render the content
|
6828
|
+
// each element can have a "pattern" attribute which contains regex expression
|
6829
|
+
// we are going over the elements, and when finding an element which is pattern matches the data,
|
6830
|
+
// we are cloning this element, and injecting the data as its child
|
6831
|
+
const contentEle = Array.from(this.children).find((child) => {
|
6832
|
+
const pattern = child.getAttribute('pattern');
|
6833
|
+
if (!pattern) return true;
|
6834
|
+
|
6835
|
+
const regEx = new RegExp(pattern);
|
6836
|
+
return regEx.test(content);
|
6837
|
+
});
|
6838
|
+
|
6839
|
+
if (!contentEle) {
|
6813
6840
|
cell.innerHTML = model.item[this.path];
|
6841
|
+
|
6814
6842
|
return;
|
6815
6843
|
}
|
6816
6844
|
|
6817
|
-
const
|
6818
|
-
|
6819
|
-
|
6820
|
-
cell.
|
6821
|
-
model.item[this.path] ? 'lightgreen' : 'pink'
|
6822
|
-
};">${label}</div>`;
|
6845
|
+
const newEle = contentEle.cloneNode(true);
|
6846
|
+
newEle.innerHTML = content;
|
6847
|
+
cell.innerHTML = '';
|
6848
|
+
cell.append(newEle);
|
6823
6849
|
}
|
6824
6850
|
}
|
6825
6851
|
|
6826
|
-
|
6852
|
+
/* eslint-disable no-param-reassign */
|
6827
6853
|
|
6828
|
-
|
6854
|
+
const componentName$6 = getComponentName('grid-custom-column');
|
6829
6855
|
|
6830
|
-
|
6856
|
+
customElements.define(componentName$6, GridCustomColumnClass);
|
6831
6857
|
|
6832
6858
|
const createCheckboxEle = () => {
|
6833
6859
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -6841,8 +6867,10 @@ const createCheckboxEle = () => {
|
|
6841
6867
|
const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
|
6842
6868
|
|
6843
6869
|
class GridSelectionColumnClass extends GridSelectionColumn {
|
6870
|
+
// eslint-disable-next-line class-methods-use-this
|
6844
6871
|
_onHeaderRendererOrBindingChanged() {}
|
6845
6872
|
|
6873
|
+
// eslint-disable-next-line class-methods-use-this
|
6846
6874
|
_headerRenderer(cell) {
|
6847
6875
|
const grid = cell.parentNode;
|
6848
6876
|
|
@@ -6865,6 +6893,7 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
6865
6893
|
checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
|
6866
6894
|
}
|
6867
6895
|
|
6896
|
+
// eslint-disable-next-line class-methods-use-this
|
6868
6897
|
_defaultRenderer(cell, col, model) {
|
6869
6898
|
const grid = cell.parentNode;
|
6870
6899
|
|
@@ -6882,7 +6911,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
6882
6911
|
}
|
6883
6912
|
}
|
6884
6913
|
|
6885
|
-
|
6914
|
+
const componentName$5 = getComponentName('grid-selection-column');
|
6915
|
+
|
6916
|
+
customElements.define(componentName$5, GridSelectionColumnClass);
|
6886
6917
|
|
6887
6918
|
const isValidDataType = (data) => {
|
6888
6919
|
const isValid = Array.isArray(data);
|
@@ -6894,7 +6925,7 @@ const isValidDataType = (data) => {
|
|
6894
6925
|
return isValid;
|
6895
6926
|
};
|
6896
6927
|
|
6897
|
-
const componentName$
|
6928
|
+
const componentName$4 = getComponentName('grid');
|
6898
6929
|
|
6899
6930
|
const GridMixin = (superclass) =>
|
6900
6931
|
class GridMixinClass extends superclass {
|
@@ -7119,11 +7150,11 @@ const GridClass = compose(
|
|
7119
7150
|
}
|
7120
7151
|
`,
|
7121
7152
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7122
|
-
componentName: componentName$
|
7153
|
+
componentName: componentName$4,
|
7123
7154
|
})
|
7124
7155
|
);
|
7125
7156
|
|
7126
|
-
customElements.define(componentName$
|
7157
|
+
customElements.define(componentName$4, GridClass);
|
7127
7158
|
|
7128
7159
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
7129
7160
|
|
@@ -7454,33 +7485,33 @@ const globals = {
|
|
7454
7485
|
fonts,
|
7455
7486
|
direction,
|
7456
7487
|
};
|
7457
|
-
const vars$
|
7488
|
+
const vars$v = getThemeVars(globals);
|
7458
7489
|
|
7459
|
-
const globalRefs$
|
7490
|
+
const globalRefs$g = getThemeRefs(globals);
|
7460
7491
|
const compVars$4 = ButtonClass.cssVarList;
|
7461
7492
|
|
7462
7493
|
const mode = {
|
7463
|
-
primary: globalRefs$
|
7464
|
-
secondary: globalRefs$
|
7465
|
-
success: globalRefs$
|
7466
|
-
error: globalRefs$
|
7467
|
-
surface: globalRefs$
|
7494
|
+
primary: globalRefs$g.colors.primary,
|
7495
|
+
secondary: globalRefs$g.colors.secondary,
|
7496
|
+
success: globalRefs$g.colors.success,
|
7497
|
+
error: globalRefs$g.colors.error,
|
7498
|
+
surface: globalRefs$g.colors.surface,
|
7468
7499
|
};
|
7469
7500
|
|
7470
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
7501
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$D);
|
7471
7502
|
|
7472
7503
|
const button = {
|
7473
7504
|
...helperTheme$3,
|
7474
7505
|
|
7475
|
-
[compVars$4.fontFamily]: globalRefs$
|
7506
|
+
[compVars$4.fontFamily]: globalRefs$g.fonts.font1.family,
|
7476
7507
|
|
7477
7508
|
[compVars$4.cursor]: 'pointer',
|
7478
7509
|
[compVars$4.hostHeight]: '3em',
|
7479
7510
|
[compVars$4.hostWidth]: 'auto',
|
7480
|
-
[compVars$4.hostDirection]: globalRefs$
|
7511
|
+
[compVars$4.hostDirection]: globalRefs$g.direction,
|
7481
7512
|
|
7482
|
-
[compVars$4.borderRadius]: globalRefs$
|
7483
|
-
[compVars$4.borderWidth]: globalRefs$
|
7513
|
+
[compVars$4.borderRadius]: globalRefs$g.radius.sm,
|
7514
|
+
[compVars$4.borderWidth]: globalRefs$g.border.xs,
|
7484
7515
|
[compVars$4.borderStyle]: 'solid',
|
7485
7516
|
[compVars$4.borderColor]: 'transparent',
|
7486
7517
|
|
@@ -7516,10 +7547,10 @@ const button = {
|
|
7516
7547
|
},
|
7517
7548
|
|
7518
7549
|
_disabled: {
|
7519
|
-
[helperVars$3.main]: globalRefs$
|
7520
|
-
[helperVars$3.dark]: globalRefs$
|
7521
|
-
[helperVars$3.light]: globalRefs$
|
7522
|
-
[helperVars$3.contrast]: globalRefs$
|
7550
|
+
[helperVars$3.main]: globalRefs$g.colors.surface.main,
|
7551
|
+
[helperVars$3.dark]: globalRefs$g.colors.surface.dark,
|
7552
|
+
[helperVars$3.light]: globalRefs$g.colors.surface.light,
|
7553
|
+
[helperVars$3.contrast]: globalRefs$g.colors.surface.contrast,
|
7523
7554
|
},
|
7524
7555
|
|
7525
7556
|
variant: {
|
@@ -7561,11 +7592,11 @@ const button = {
|
|
7561
7592
|
},
|
7562
7593
|
|
7563
7594
|
_focused: {
|
7564
|
-
[compVars$4.outlineColor]: globalRefs$
|
7595
|
+
[compVars$4.outlineColor]: globalRefs$g.colors.surface.main,
|
7565
7596
|
},
|
7566
7597
|
};
|
7567
7598
|
|
7568
|
-
const vars$
|
7599
|
+
const vars$u = {
|
7569
7600
|
...compVars$4,
|
7570
7601
|
...helperVars$3,
|
7571
7602
|
};
|
@@ -7573,25 +7604,25 @@ const vars$t = {
|
|
7573
7604
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7574
7605
|
__proto__: null,
|
7575
7606
|
default: button,
|
7576
|
-
vars: vars$
|
7607
|
+
vars: vars$u
|
7577
7608
|
});
|
7578
7609
|
|
7579
|
-
const componentName$
|
7580
|
-
const globalRefs$
|
7610
|
+
const componentName$3 = getComponentName('input-wrapper');
|
7611
|
+
const globalRefs$f = getThemeRefs(globals);
|
7581
7612
|
|
7582
|
-
const [theme$1, refs, vars$
|
7613
|
+
const [theme$1, refs, vars$t] = createHelperVars(
|
7583
7614
|
{
|
7584
|
-
labelTextColor: globalRefs$
|
7585
|
-
valueTextColor: globalRefs$
|
7586
|
-
placeholderTextColor: globalRefs$
|
7615
|
+
labelTextColor: globalRefs$f.colors.surface.contrast,
|
7616
|
+
valueTextColor: globalRefs$f.colors.surface.contrast,
|
7617
|
+
placeholderTextColor: globalRefs$f.colors.surface.main,
|
7587
7618
|
requiredIndicator: "'*'",
|
7588
|
-
errorMessageTextColor: globalRefs$
|
7619
|
+
errorMessageTextColor: globalRefs$f.colors.error.main,
|
7589
7620
|
|
7590
|
-
borderWidth: globalRefs$
|
7591
|
-
borderRadius: globalRefs$
|
7621
|
+
borderWidth: globalRefs$f.border.xs,
|
7622
|
+
borderRadius: globalRefs$f.radius.xs,
|
7592
7623
|
borderColor: 'transparent',
|
7593
7624
|
|
7594
|
-
outlineWidth: globalRefs$
|
7625
|
+
outlineWidth: globalRefs$f.border.sm,
|
7595
7626
|
outlineStyle: 'solid',
|
7596
7627
|
outlineColor: 'transparent',
|
7597
7628
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7602,11 +7633,11 @@ const [theme$1, refs, vars$s] = createHelperVars(
|
|
7602
7633
|
horizontalPadding: '0.5em',
|
7603
7634
|
verticalPadding: '0.5em',
|
7604
7635
|
|
7605
|
-
backgroundColor: globalRefs$
|
7636
|
+
backgroundColor: globalRefs$f.colors.surface.light,
|
7606
7637
|
|
7607
|
-
fontFamily: globalRefs$
|
7638
|
+
fontFamily: globalRefs$f.fonts.font1.family,
|
7608
7639
|
|
7609
|
-
direction: globalRefs$
|
7640
|
+
direction: globalRefs$f.direction,
|
7610
7641
|
|
7611
7642
|
size: {
|
7612
7643
|
xs: { fontSize: '12px' },
|
@@ -7620,52 +7651,88 @@ const [theme$1, refs, vars$s] = createHelperVars(
|
|
7620
7651
|
},
|
7621
7652
|
|
7622
7653
|
_focused: {
|
7623
|
-
outlineColor: globalRefs$
|
7654
|
+
outlineColor: globalRefs$f.colors.surface.main,
|
7624
7655
|
_invalid: {
|
7625
|
-
outlineColor: globalRefs$
|
7656
|
+
outlineColor: globalRefs$f.colors.error.main,
|
7626
7657
|
},
|
7627
7658
|
},
|
7628
7659
|
|
7629
7660
|
_bordered: {
|
7630
|
-
outlineWidth: globalRefs$
|
7631
|
-
borderColor: globalRefs$
|
7661
|
+
outlineWidth: globalRefs$f.border.xs,
|
7662
|
+
borderColor: globalRefs$f.colors.surface.main,
|
7632
7663
|
borderStyle: 'solid',
|
7633
7664
|
_invalid: {
|
7634
|
-
borderColor: globalRefs$
|
7665
|
+
borderColor: globalRefs$f.colors.error.main,
|
7635
7666
|
},
|
7636
7667
|
},
|
7637
7668
|
|
7638
7669
|
_disabled: {
|
7639
|
-
labelTextColor: globalRefs$
|
7640
|
-
borderColor: globalRefs$
|
7641
|
-
valueTextColor: globalRefs$
|
7642
|
-
placeholderTextColor: globalRefs$
|
7643
|
-
backgroundColor: globalRefs$
|
7670
|
+
labelTextColor: globalRefs$f.colors.surface.main,
|
7671
|
+
borderColor: globalRefs$f.colors.surface.main,
|
7672
|
+
valueTextColor: globalRefs$f.colors.surface.dark,
|
7673
|
+
placeholderTextColor: globalRefs$f.colors.surface.dark,
|
7674
|
+
backgroundColor: globalRefs$f.colors.surface.main,
|
7644
7675
|
},
|
7645
7676
|
},
|
7646
|
-
componentName$
|
7677
|
+
componentName$3
|
7647
7678
|
);
|
7648
7679
|
|
7649
7680
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7650
7681
|
__proto__: null,
|
7651
7682
|
default: theme$1,
|
7652
7683
|
refs: refs,
|
7653
|
-
vars: vars$
|
7684
|
+
vars: vars$t
|
7654
7685
|
});
|
7655
7686
|
|
7656
|
-
const vars$
|
7687
|
+
const vars$s = TextFieldClass.cssVarList;
|
7657
7688
|
|
7658
7689
|
const textField = {
|
7690
|
+
[vars$s.hostWidth]: refs.width,
|
7691
|
+
[vars$s.hostMinWidth]: refs.minWidth,
|
7692
|
+
[vars$s.hostDirection]: refs.direction,
|
7693
|
+
[vars$s.fontSize]: refs.fontSize,
|
7694
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
7695
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
7696
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
7697
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
7698
|
+
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
7699
|
+
[vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
|
7700
|
+
[vars$s.inputBorderWidth]: refs.borderWidth,
|
7701
|
+
[vars$s.inputBorderStyle]: refs.borderStyle,
|
7702
|
+
[vars$s.inputBorderColor]: refs.borderColor,
|
7703
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
7704
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
7705
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
7706
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
7707
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
7708
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
7709
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
7710
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
7711
|
+
};
|
7712
|
+
|
7713
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7714
|
+
__proto__: null,
|
7715
|
+
default: textField,
|
7716
|
+
textField: textField,
|
7717
|
+
vars: vars$s
|
7718
|
+
});
|
7719
|
+
|
7720
|
+
const globalRefs$e = getThemeRefs(globals);
|
7721
|
+
const vars$r = PasswordClass.cssVarList;
|
7722
|
+
|
7723
|
+
const password = {
|
7659
7724
|
[vars$r.hostWidth]: refs.width,
|
7660
|
-
[vars$r.hostMinWidth]: refs.minWidth,
|
7661
7725
|
[vars$r.hostDirection]: refs.direction,
|
7662
7726
|
[vars$r.fontSize]: refs.fontSize,
|
7663
7727
|
[vars$r.fontFamily]: refs.fontFamily,
|
7664
7728
|
[vars$r.labelTextColor]: refs.labelTextColor,
|
7665
|
-
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7666
7729
|
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
7730
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7731
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
7732
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7733
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7667
7734
|
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
7668
|
-
[vars$r.
|
7735
|
+
[vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7669
7736
|
[vars$r.inputBorderWidth]: refs.borderWidth,
|
7670
7737
|
[vars$r.inputBorderStyle]: refs.borderStyle,
|
7671
7738
|
[vars$r.inputBorderColor]: refs.borderColor,
|
@@ -7674,34 +7741,28 @@ const textField = {
|
|
7674
7741
|
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7675
7742
|
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7676
7743
|
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7677
|
-
[vars$r.
|
7678
|
-
[vars$r.
|
7679
|
-
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7744
|
+
[vars$r.revealButtonOffset]: globalRefs$e.spacing.md,
|
7745
|
+
[vars$r.revealButtonSize]: refs.toggleButtonSize,
|
7680
7746
|
};
|
7681
7747
|
|
7682
|
-
var
|
7748
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7683
7749
|
__proto__: null,
|
7684
|
-
default:
|
7685
|
-
textField: textField,
|
7750
|
+
default: password,
|
7686
7751
|
vars: vars$r
|
7687
7752
|
});
|
7688
7753
|
|
7689
|
-
const
|
7690
|
-
const vars$q = PasswordClass.cssVarList;
|
7754
|
+
const vars$q = NumberFieldClass.cssVarList;
|
7691
7755
|
|
7692
|
-
const
|
7756
|
+
const numberField = {
|
7693
7757
|
[vars$q.hostWidth]: refs.width,
|
7758
|
+
[vars$q.hostMinWidth]: refs.minWidth,
|
7694
7759
|
[vars$q.hostDirection]: refs.direction,
|
7695
7760
|
[vars$q.fontSize]: refs.fontSize,
|
7696
7761
|
[vars$q.fontFamily]: refs.fontFamily,
|
7697
7762
|
[vars$q.labelTextColor]: refs.labelTextColor,
|
7698
7763
|
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
7699
|
-
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7700
|
-
[vars$q.inputHeight]: refs.inputHeight,
|
7701
|
-
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7702
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7703
7764
|
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
7704
|
-
[vars$q.
|
7765
|
+
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
7705
7766
|
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7706
7767
|
[vars$q.inputBorderStyle]: refs.borderStyle,
|
7707
7768
|
[vars$q.inputBorderColor]: refs.borderColor,
|
@@ -7710,19 +7771,21 @@ const password = {
|
|
7710
7771
|
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
7711
7772
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7712
7773
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7713
|
-
[vars$q.
|
7714
|
-
[vars$q.
|
7774
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7775
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7776
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7777
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
7715
7778
|
};
|
7716
7779
|
|
7717
|
-
var
|
7780
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7718
7781
|
__proto__: null,
|
7719
|
-
default:
|
7782
|
+
default: numberField,
|
7720
7783
|
vars: vars$q
|
7721
7784
|
});
|
7722
7785
|
|
7723
|
-
const vars$p =
|
7786
|
+
const vars$p = EmailFieldClass.cssVarList;
|
7724
7787
|
|
7725
|
-
const
|
7788
|
+
const emailField = {
|
7726
7789
|
[vars$p.hostWidth]: refs.width,
|
7727
7790
|
[vars$p.hostMinWidth]: refs.minWidth,
|
7728
7791
|
[vars$p.hostDirection]: refs.direction,
|
@@ -7731,6 +7794,7 @@ const numberField = {
|
|
7731
7794
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
7732
7795
|
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7733
7796
|
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7797
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7734
7798
|
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
7735
7799
|
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7736
7800
|
[vars$p.inputBorderStyle]: refs.borderStyle,
|
@@ -7741,201 +7805,168 @@ const numberField = {
|
|
7741
7805
|
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7742
7806
|
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7743
7807
|
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7744
|
-
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7745
7808
|
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7746
7809
|
[vars$p.inputHeight]: refs.inputHeight,
|
7747
7810
|
};
|
7748
7811
|
|
7749
|
-
var
|
7812
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7750
7813
|
__proto__: null,
|
7751
|
-
default:
|
7814
|
+
default: emailField,
|
7752
7815
|
vars: vars$p
|
7753
7816
|
});
|
7754
7817
|
|
7755
|
-
const
|
7818
|
+
const globalRefs$d = getThemeRefs(globals);
|
7819
|
+
const vars$o = TextAreaClass.cssVarList;
|
7756
7820
|
|
7757
|
-
const
|
7821
|
+
const textArea = {
|
7758
7822
|
[vars$o.hostWidth]: refs.width,
|
7759
7823
|
[vars$o.hostMinWidth]: refs.minWidth,
|
7760
7824
|
[vars$o.hostDirection]: refs.direction,
|
7761
7825
|
[vars$o.fontSize]: refs.fontSize,
|
7762
7826
|
[vars$o.fontFamily]: refs.fontFamily,
|
7763
7827
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7828
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7764
7829
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7830
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7765
7831
|
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7766
|
-
[vars$o.
|
7767
|
-
[vars$o.
|
7832
|
+
[vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7833
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
7768
7834
|
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7769
7835
|
[vars$o.inputBorderStyle]: refs.borderStyle,
|
7770
7836
|
[vars$o.inputBorderColor]: refs.borderColor,
|
7771
|
-
[vars$o.inputBorderRadius]: refs.borderRadius,
|
7772
7837
|
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
7773
7838
|
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
7774
7839
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7775
7840
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7776
|
-
[vars$o.
|
7777
|
-
[vars$o.
|
7778
|
-
|
7841
|
+
[vars$o.inputResizeType]: 'vertical',
|
7842
|
+
[vars$o.inputMinHeight]: '5em',
|
7843
|
+
|
7844
|
+
_disabled: {
|
7845
|
+
[vars$o.inputBackgroundColor]: globalRefs$d.colors.surface.light,
|
7846
|
+
},
|
7847
|
+
|
7848
|
+
_readonly: {
|
7849
|
+
[vars$o.inputResizeType]: 'none',
|
7850
|
+
},
|
7779
7851
|
};
|
7780
7852
|
|
7781
|
-
var
|
7853
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7782
7854
|
__proto__: null,
|
7783
|
-
default:
|
7855
|
+
default: textArea,
|
7784
7856
|
vars: vars$o
|
7785
7857
|
});
|
7786
7858
|
|
7787
|
-
const
|
7788
|
-
const
|
7859
|
+
const vars$n = CheckboxClass.cssVarList;
|
7860
|
+
const checkboxSize = '1.35em';
|
7789
7861
|
|
7790
|
-
const
|
7862
|
+
const checkbox = {
|
7791
7863
|
[vars$n.hostWidth]: refs.width,
|
7792
|
-
[vars$n.hostMinWidth]: refs.minWidth,
|
7793
7864
|
[vars$n.hostDirection]: refs.direction,
|
7794
7865
|
[vars$n.fontSize]: refs.fontSize,
|
7795
7866
|
[vars$n.fontFamily]: refs.fontFamily,
|
7796
7867
|
[vars$n.labelTextColor]: refs.labelTextColor,
|
7797
7868
|
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7869
|
+
[vars$n.labelFontWeight]: '400',
|
7870
|
+
[vars$n.labelLineHeight]: checkboxSize,
|
7871
|
+
[vars$n.labelSpacing]: '1em',
|
7798
7872
|
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7799
|
-
[vars$n.
|
7800
|
-
[vars$n.
|
7801
|
-
[vars$n.
|
7873
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
7874
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7875
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7876
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7802
7877
|
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7878
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
7803
7879
|
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7804
7880
|
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7805
|
-
[vars$n.
|
7806
|
-
[vars$n.
|
7807
|
-
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7808
|
-
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7809
|
-
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7810
|
-
[vars$n.inputResizeType]: 'vertical',
|
7811
|
-
[vars$n.inputMinHeight]: '5em',
|
7881
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7882
|
+
[vars$n.inputSize]: checkboxSize,
|
7812
7883
|
|
7813
|
-
|
7814
|
-
[vars$n.
|
7884
|
+
_checked: {
|
7885
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7815
7886
|
},
|
7816
7887
|
|
7817
|
-
|
7818
|
-
[vars$n.
|
7888
|
+
_disabled: {
|
7889
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
7819
7890
|
},
|
7820
7891
|
};
|
7821
7892
|
|
7822
|
-
var
|
7893
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7823
7894
|
__proto__: null,
|
7824
|
-
default:
|
7895
|
+
default: checkbox,
|
7825
7896
|
vars: vars$n
|
7826
7897
|
});
|
7827
7898
|
|
7828
|
-
const
|
7829
|
-
const
|
7899
|
+
const knobMargin = '2px';
|
7900
|
+
const checkboxHeight = '1.25em';
|
7830
7901
|
|
7831
|
-
const
|
7902
|
+
const globalRefs$c = getThemeRefs(globals);
|
7903
|
+
const vars$m = SwitchToggleClass.cssVarList;
|
7904
|
+
|
7905
|
+
const switchToggle = {
|
7832
7906
|
[vars$m.hostWidth]: refs.width,
|
7833
7907
|
[vars$m.hostDirection]: refs.direction,
|
7834
7908
|
[vars$m.fontSize]: refs.fontSize,
|
7835
7909
|
[vars$m.fontFamily]: refs.fontFamily,
|
7836
|
-
|
7837
|
-
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7838
|
-
[vars$m.labelFontWeight]: '400',
|
7839
|
-
[vars$m.labelLineHeight]: checkboxSize,
|
7840
|
-
[vars$m.labelSpacing]: '1em',
|
7841
|
-
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7910
|
+
|
7842
7911
|
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
7843
7912
|
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7844
7913
|
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7845
7914
|
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7846
|
-
[vars$m.inputBorderRadius]: refs.borderRadius,
|
7847
|
-
[vars$m.inputBorderColor]: refs.borderColor,
|
7848
|
-
[vars$m.inputBorderWidth]: refs.borderWidth,
|
7849
|
-
[vars$m.inputBorderStyle]: refs.borderStyle,
|
7850
|
-
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
7851
|
-
[vars$m.inputSize]: checkboxSize,
|
7852
7915
|
|
7853
|
-
|
7854
|
-
|
7855
|
-
|
7916
|
+
[vars$m.trackBorderStyle]: refs.borderStyle,
|
7917
|
+
[vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7918
|
+
[vars$m.trackBorderColor]: refs.borderColor,
|
7919
|
+
[vars$m.trackBackgroundColor]: 'none',
|
7920
|
+
[vars$m.trackBorderRadius]: globalRefs$c.radius.md,
|
7921
|
+
[vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7922
|
+
[vars$m.trackHeight]: checkboxHeight,
|
7923
|
+
|
7924
|
+
[vars$m.knobSize]: `calc(1em - ${knobMargin})`,
|
7925
|
+
[vars$m.knobRadius]: '50%',
|
7926
|
+
[vars$m.knobTopOffset]: '1px',
|
7927
|
+
[vars$m.knobLeftOffset]: knobMargin,
|
7928
|
+
[vars$m.knobColor]: refs.valueTextColor,
|
7929
|
+
[vars$m.knobTransitionDuration]: '0.3s',
|
7856
7930
|
|
7857
|
-
|
7858
|
-
|
7859
|
-
|
7860
|
-
|
7861
|
-
|
7862
|
-
|
7863
|
-
__proto__: null,
|
7864
|
-
default: checkbox,
|
7865
|
-
vars: vars$m
|
7866
|
-
});
|
7867
|
-
|
7868
|
-
const knobMargin = '2px';
|
7869
|
-
const checkboxHeight = '1.25em';
|
7870
|
-
|
7871
|
-
const globalRefs$b = getThemeRefs(globals);
|
7872
|
-
const vars$l = SwitchToggleClass.cssVarList;
|
7873
|
-
|
7874
|
-
const switchToggle = {
|
7875
|
-
[vars$l.hostWidth]: refs.width,
|
7876
|
-
[vars$l.hostDirection]: refs.direction,
|
7877
|
-
[vars$l.fontSize]: refs.fontSize,
|
7878
|
-
[vars$l.fontFamily]: refs.fontFamily,
|
7879
|
-
|
7880
|
-
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7881
|
-
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7882
|
-
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7883
|
-
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7884
|
-
|
7885
|
-
[vars$l.trackBorderStyle]: refs.borderStyle,
|
7886
|
-
[vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7887
|
-
[vars$l.trackBorderColor]: refs.borderColor,
|
7888
|
-
[vars$l.trackBackgroundColor]: 'none',
|
7889
|
-
[vars$l.trackBorderRadius]: globalRefs$b.radius.md,
|
7890
|
-
[vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7891
|
-
[vars$l.trackHeight]: checkboxHeight,
|
7892
|
-
|
7893
|
-
[vars$l.knobSize]: `calc(1em - ${knobMargin})`,
|
7894
|
-
[vars$l.knobRadius]: '50%',
|
7895
|
-
[vars$l.knobTopOffset]: '1px',
|
7896
|
-
[vars$l.knobLeftOffset]: knobMargin,
|
7897
|
-
[vars$l.knobColor]: refs.valueTextColor,
|
7898
|
-
[vars$l.knobTransitionDuration]: '0.3s',
|
7899
|
-
|
7900
|
-
[vars$l.labelTextColor]: refs.labelTextColor,
|
7901
|
-
[vars$l.labelFontWeight]: '400',
|
7902
|
-
[vars$l.labelLineHeight]: '1.35em',
|
7903
|
-
[vars$l.labelSpacing]: '1em',
|
7904
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7905
|
-
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7931
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
7932
|
+
[vars$m.labelFontWeight]: '400',
|
7933
|
+
[vars$m.labelLineHeight]: '1.35em',
|
7934
|
+
[vars$m.labelSpacing]: '1em',
|
7935
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7936
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7906
7937
|
|
7907
7938
|
_checked: {
|
7908
|
-
[vars$
|
7909
|
-
[vars$
|
7910
|
-
[vars$
|
7911
|
-
[vars$
|
7912
|
-
[vars$
|
7939
|
+
[vars$m.trackBorderColor]: refs.borderColor,
|
7940
|
+
[vars$m.trackBackgroundColor]: refs.backgroundColor,
|
7941
|
+
[vars$m.knobLeftOffset]: `calc(100% - var(${vars$m.knobSize}) - ${knobMargin})`,
|
7942
|
+
[vars$m.knobColor]: refs.valueTextColor,
|
7943
|
+
[vars$m.knobTextColor]: refs.valueTextColor,
|
7913
7944
|
},
|
7914
7945
|
|
7915
7946
|
_disabled: {
|
7916
|
-
[vars$
|
7917
|
-
[vars$
|
7918
|
-
[vars$
|
7919
|
-
[vars$
|
7947
|
+
[vars$m.knobColor]: globalRefs$c.colors.surface.light,
|
7948
|
+
[vars$m.trackBorderColor]: globalRefs$c.colors.surface.main,
|
7949
|
+
[vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
|
7950
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
7920
7951
|
_checked: {
|
7921
|
-
[vars$
|
7922
|
-
[vars$
|
7952
|
+
[vars$m.knobColor]: globalRefs$c.colors.surface.light,
|
7953
|
+
[vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
|
7923
7954
|
},
|
7924
7955
|
},
|
7925
7956
|
|
7926
7957
|
_invalid: {
|
7927
|
-
[vars$
|
7928
|
-
[vars$
|
7958
|
+
[vars$m.trackBorderColor]: globalRefs$c.colors.error.main,
|
7959
|
+
[vars$m.knobColor]: globalRefs$c.colors.error.main,
|
7929
7960
|
},
|
7930
7961
|
};
|
7931
7962
|
|
7932
7963
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7933
7964
|
__proto__: null,
|
7934
7965
|
default: switchToggle,
|
7935
|
-
vars: vars$
|
7966
|
+
vars: vars$m
|
7936
7967
|
});
|
7937
7968
|
|
7938
|
-
const globalRefs$
|
7969
|
+
const globalRefs$b = getThemeRefs(globals);
|
7939
7970
|
|
7940
7971
|
const compVars$3 = ContainerClass.cssVarList;
|
7941
7972
|
|
@@ -7957,7 +7988,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7957
7988
|
horizontalAlignment,
|
7958
7989
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7959
7990
|
},
|
7960
|
-
componentName$
|
7991
|
+
componentName$x
|
7961
7992
|
);
|
7962
7993
|
|
7963
7994
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -7967,8 +7998,8 @@ const container = {
|
|
7967
7998
|
|
7968
7999
|
[compVars$3.hostWidth]: '100%',
|
7969
8000
|
[compVars$3.boxShadow]: 'none',
|
7970
|
-
[compVars$3.backgroundColor]: globalRefs$
|
7971
|
-
[compVars$3.color]: globalRefs$
|
8001
|
+
[compVars$3.backgroundColor]: globalRefs$b.colors.surface.light,
|
8002
|
+
[compVars$3.color]: globalRefs$b.colors.surface.contrast,
|
7972
8003
|
[compVars$3.borderRadius]: '0px',
|
7973
8004
|
|
7974
8005
|
verticalPadding: {
|
@@ -8015,34 +8046,34 @@ const container = {
|
|
8015
8046
|
|
8016
8047
|
shadow: {
|
8017
8048
|
sm: {
|
8018
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8049
|
+
[compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.sm} ${shadowColor$1}`,
|
8019
8050
|
},
|
8020
8051
|
md: {
|
8021
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8052
|
+
[compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.md} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.md} ${shadowColor$1}`,
|
8022
8053
|
},
|
8023
8054
|
lg: {
|
8024
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8055
|
+
[compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.lg} ${shadowColor$1}`,
|
8025
8056
|
},
|
8026
8057
|
xl: {
|
8027
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8058
|
+
[compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.xl} ${shadowColor$1}`,
|
8028
8059
|
},
|
8029
8060
|
'2xl': {
|
8030
8061
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
8031
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
8062
|
+
[compVars$3.boxShadow]: `${globalRefs$b.shadow.wide['2xl']} ${shadowColor$1}`,
|
8032
8063
|
},
|
8033
8064
|
},
|
8034
8065
|
|
8035
8066
|
borderRadius: {
|
8036
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
8037
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
8038
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
8039
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
8040
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
8041
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
8067
|
+
sm: { [compVars$3.borderRadius]: globalRefs$b.radius.sm },
|
8068
|
+
md: { [compVars$3.borderRadius]: globalRefs$b.radius.md },
|
8069
|
+
lg: { [compVars$3.borderRadius]: globalRefs$b.radius.lg },
|
8070
|
+
xl: { [compVars$3.borderRadius]: globalRefs$b.radius.xl },
|
8071
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$b.radius['2xl'] },
|
8072
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$b.radius['3xl'] },
|
8042
8073
|
},
|
8043
8074
|
};
|
8044
8075
|
|
8045
|
-
const vars$
|
8076
|
+
const vars$l = {
|
8046
8077
|
...compVars$3,
|
8047
8078
|
...helperVars$2,
|
8048
8079
|
};
|
@@ -8050,154 +8081,154 @@ const vars$k = {
|
|
8050
8081
|
var container$1 = /*#__PURE__*/Object.freeze({
|
8051
8082
|
__proto__: null,
|
8052
8083
|
default: container,
|
8053
|
-
vars: vars$
|
8084
|
+
vars: vars$l
|
8054
8085
|
});
|
8055
8086
|
|
8056
|
-
const vars$
|
8087
|
+
const vars$k = LogoClass.cssVarList;
|
8057
8088
|
|
8058
8089
|
const logo$1 = {
|
8059
|
-
[vars$
|
8090
|
+
[vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
8060
8091
|
};
|
8061
8092
|
|
8062
8093
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
8063
8094
|
__proto__: null,
|
8064
8095
|
default: logo$1,
|
8065
|
-
vars: vars$
|
8096
|
+
vars: vars$k
|
8066
8097
|
});
|
8067
8098
|
|
8068
|
-
const vars$
|
8099
|
+
const vars$j = TotpImageClass.cssVarList;
|
8069
8100
|
|
8070
8101
|
const logo = {
|
8071
|
-
[vars$
|
8102
|
+
[vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
8072
8103
|
};
|
8073
8104
|
|
8074
8105
|
var totpImage = /*#__PURE__*/Object.freeze({
|
8075
8106
|
__proto__: null,
|
8076
8107
|
default: logo,
|
8077
|
-
vars: vars$
|
8108
|
+
vars: vars$j
|
8078
8109
|
});
|
8079
8110
|
|
8080
|
-
const globalRefs$
|
8081
|
-
const vars$
|
8111
|
+
const globalRefs$a = getThemeRefs(globals);
|
8112
|
+
const vars$i = TextClass.cssVarList;
|
8082
8113
|
|
8083
8114
|
const text = {
|
8084
|
-
[vars$
|
8085
|
-
[vars$
|
8086
|
-
[vars$
|
8087
|
-
[vars$
|
8115
|
+
[vars$i.hostDirection]: globalRefs$a.direction,
|
8116
|
+
[vars$i.textLineHeight]: '1.35em',
|
8117
|
+
[vars$i.textAlign]: 'left',
|
8118
|
+
[vars$i.textColor]: globalRefs$a.colors.surface.dark,
|
8088
8119
|
variant: {
|
8089
8120
|
h1: {
|
8090
|
-
[vars$
|
8091
|
-
[vars$
|
8092
|
-
[vars$
|
8121
|
+
[vars$i.fontSize]: globalRefs$a.typography.h1.size,
|
8122
|
+
[vars$i.fontWeight]: globalRefs$a.typography.h1.weight,
|
8123
|
+
[vars$i.fontFamily]: globalRefs$a.typography.h1.font,
|
8093
8124
|
},
|
8094
8125
|
h2: {
|
8095
|
-
[vars$
|
8096
|
-
[vars$
|
8097
|
-
[vars$
|
8126
|
+
[vars$i.fontSize]: globalRefs$a.typography.h2.size,
|
8127
|
+
[vars$i.fontWeight]: globalRefs$a.typography.h2.weight,
|
8128
|
+
[vars$i.fontFamily]: globalRefs$a.typography.h2.font,
|
8098
8129
|
},
|
8099
8130
|
h3: {
|
8100
|
-
[vars$
|
8101
|
-
[vars$
|
8102
|
-
[vars$
|
8131
|
+
[vars$i.fontSize]: globalRefs$a.typography.h3.size,
|
8132
|
+
[vars$i.fontWeight]: globalRefs$a.typography.h3.weight,
|
8133
|
+
[vars$i.fontFamily]: globalRefs$a.typography.h3.font,
|
8103
8134
|
},
|
8104
8135
|
subtitle1: {
|
8105
|
-
[vars$
|
8106
|
-
[vars$
|
8107
|
-
[vars$
|
8136
|
+
[vars$i.fontSize]: globalRefs$a.typography.subtitle1.size,
|
8137
|
+
[vars$i.fontWeight]: globalRefs$a.typography.subtitle1.weight,
|
8138
|
+
[vars$i.fontFamily]: globalRefs$a.typography.subtitle1.font,
|
8108
8139
|
},
|
8109
8140
|
subtitle2: {
|
8110
|
-
[vars$
|
8111
|
-
[vars$
|
8112
|
-
[vars$
|
8141
|
+
[vars$i.fontSize]: globalRefs$a.typography.subtitle2.size,
|
8142
|
+
[vars$i.fontWeight]: globalRefs$a.typography.subtitle2.weight,
|
8143
|
+
[vars$i.fontFamily]: globalRefs$a.typography.subtitle2.font,
|
8113
8144
|
},
|
8114
8145
|
body1: {
|
8115
|
-
[vars$
|
8116
|
-
[vars$
|
8117
|
-
[vars$
|
8146
|
+
[vars$i.fontSize]: globalRefs$a.typography.body1.size,
|
8147
|
+
[vars$i.fontWeight]: globalRefs$a.typography.body1.weight,
|
8148
|
+
[vars$i.fontFamily]: globalRefs$a.typography.body1.font,
|
8118
8149
|
},
|
8119
8150
|
body2: {
|
8120
|
-
[vars$
|
8121
|
-
[vars$
|
8122
|
-
[vars$
|
8151
|
+
[vars$i.fontSize]: globalRefs$a.typography.body2.size,
|
8152
|
+
[vars$i.fontWeight]: globalRefs$a.typography.body2.weight,
|
8153
|
+
[vars$i.fontFamily]: globalRefs$a.typography.body2.font,
|
8123
8154
|
},
|
8124
8155
|
},
|
8125
8156
|
|
8126
8157
|
mode: {
|
8127
8158
|
primary: {
|
8128
|
-
[vars$
|
8159
|
+
[vars$i.textColor]: globalRefs$a.colors.primary.main,
|
8129
8160
|
},
|
8130
8161
|
secondary: {
|
8131
|
-
[vars$
|
8162
|
+
[vars$i.textColor]: globalRefs$a.colors.secondary.main,
|
8132
8163
|
},
|
8133
8164
|
error: {
|
8134
|
-
[vars$
|
8165
|
+
[vars$i.textColor]: globalRefs$a.colors.error.main,
|
8135
8166
|
},
|
8136
8167
|
success: {
|
8137
|
-
[vars$
|
8168
|
+
[vars$i.textColor]: globalRefs$a.colors.success.main,
|
8138
8169
|
},
|
8139
8170
|
},
|
8140
8171
|
|
8141
8172
|
textAlign: {
|
8142
|
-
right: { [vars$
|
8143
|
-
left: { [vars$
|
8144
|
-
center: { [vars$
|
8173
|
+
right: { [vars$i.textAlign]: 'right' },
|
8174
|
+
left: { [vars$i.textAlign]: 'left' },
|
8175
|
+
center: { [vars$i.textAlign]: 'center' },
|
8145
8176
|
},
|
8146
8177
|
|
8147
8178
|
_fullWidth: {
|
8148
|
-
[vars$
|
8179
|
+
[vars$i.hostWidth]: '100%',
|
8149
8180
|
},
|
8150
8181
|
|
8151
8182
|
_italic: {
|
8152
|
-
[vars$
|
8183
|
+
[vars$i.fontStyle]: 'italic',
|
8153
8184
|
},
|
8154
8185
|
|
8155
8186
|
_uppercase: {
|
8156
|
-
[vars$
|
8187
|
+
[vars$i.textTransform]: 'uppercase',
|
8157
8188
|
},
|
8158
8189
|
|
8159
8190
|
_lowercase: {
|
8160
|
-
[vars$
|
8191
|
+
[vars$i.textTransform]: 'lowercase',
|
8161
8192
|
},
|
8162
8193
|
};
|
8163
8194
|
|
8164
8195
|
var text$1 = /*#__PURE__*/Object.freeze({
|
8165
8196
|
__proto__: null,
|
8166
8197
|
default: text,
|
8167
|
-
vars: vars$
|
8198
|
+
vars: vars$i
|
8168
8199
|
});
|
8169
8200
|
|
8170
|
-
const globalRefs$
|
8171
|
-
const vars$
|
8201
|
+
const globalRefs$9 = getThemeRefs(globals);
|
8202
|
+
const vars$h = LinkClass.cssVarList;
|
8172
8203
|
|
8173
8204
|
const link = {
|
8174
|
-
[vars$
|
8175
|
-
[vars$
|
8205
|
+
[vars$h.hostDirection]: globalRefs$9.direction,
|
8206
|
+
[vars$h.cursor]: 'pointer',
|
8176
8207
|
|
8177
|
-
[vars$
|
8208
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
8178
8209
|
|
8179
8210
|
textAlign: {
|
8180
|
-
right: { [vars$
|
8181
|
-
left: { [vars$
|
8182
|
-
center: { [vars$
|
8211
|
+
right: { [vars$h.textAlign]: 'right' },
|
8212
|
+
left: { [vars$h.textAlign]: 'left' },
|
8213
|
+
center: { [vars$h.textAlign]: 'center' },
|
8183
8214
|
},
|
8184
8215
|
|
8185
8216
|
_fullWidth: {
|
8186
|
-
[vars$
|
8217
|
+
[vars$h.hostWidth]: '100%',
|
8187
8218
|
},
|
8188
8219
|
|
8189
8220
|
mode: {
|
8190
8221
|
primary: {
|
8191
|
-
[vars$
|
8222
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
8192
8223
|
},
|
8193
8224
|
secondary: {
|
8194
|
-
[vars$
|
8225
|
+
[vars$h.textColor]: globalRefs$9.colors.secondary.main,
|
8195
8226
|
},
|
8196
8227
|
error: {
|
8197
|
-
[vars$
|
8228
|
+
[vars$h.textColor]: globalRefs$9.colors.error.main,
|
8198
8229
|
},
|
8199
8230
|
success: {
|
8200
|
-
[vars$
|
8231
|
+
[vars$h.textColor]: globalRefs$9.colors.success.main,
|
8201
8232
|
},
|
8202
8233
|
},
|
8203
8234
|
};
|
@@ -8205,10 +8236,10 @@ const link = {
|
|
8205
8236
|
var link$1 = /*#__PURE__*/Object.freeze({
|
8206
8237
|
__proto__: null,
|
8207
8238
|
default: link,
|
8208
|
-
vars: vars$
|
8239
|
+
vars: vars$h
|
8209
8240
|
});
|
8210
8241
|
|
8211
|
-
const globalRefs$
|
8242
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8212
8243
|
const compVars$2 = DividerClass.cssVarList;
|
8213
8244
|
|
8214
8245
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -8216,18 +8247,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8216
8247
|
thickness: '2px',
|
8217
8248
|
spacing: '10px',
|
8218
8249
|
},
|
8219
|
-
componentName$
|
8250
|
+
componentName$v
|
8220
8251
|
);
|
8221
8252
|
|
8222
8253
|
const divider = {
|
8223
8254
|
...helperTheme$1,
|
8224
8255
|
|
8225
|
-
[compVars$2.hostDirection]: globalRefs$
|
8256
|
+
[compVars$2.hostDirection]: globalRefs$8.direction,
|
8226
8257
|
[compVars$2.alignItems]: 'center',
|
8227
8258
|
[compVars$2.flexDirection]: 'row',
|
8228
8259
|
[compVars$2.alignSelf]: 'stretch',
|
8229
8260
|
[compVars$2.hostWidth]: '100%',
|
8230
|
-
[compVars$2.stripeColor]: globalRefs$
|
8261
|
+
[compVars$2.stripeColor]: globalRefs$8.colors.surface.main,
|
8231
8262
|
[compVars$2.stripeColorOpacity]: '0.5',
|
8232
8263
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8233
8264
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -8247,7 +8278,7 @@ const divider = {
|
|
8247
8278
|
},
|
8248
8279
|
};
|
8249
8280
|
|
8250
|
-
const vars$
|
8281
|
+
const vars$g = {
|
8251
8282
|
...compVars$2,
|
8252
8283
|
...helperVars$1,
|
8253
8284
|
};
|
@@ -8255,100 +8286,100 @@ const vars$f = {
|
|
8255
8286
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
8256
8287
|
__proto__: null,
|
8257
8288
|
default: divider,
|
8258
|
-
vars: vars$
|
8289
|
+
vars: vars$g
|
8259
8290
|
});
|
8260
8291
|
|
8261
|
-
const vars$
|
8292
|
+
const vars$f = PasscodeClass.cssVarList;
|
8262
8293
|
|
8263
8294
|
const passcode = {
|
8264
|
-
[vars$
|
8265
|
-
[vars$
|
8266
|
-
[vars$
|
8267
|
-
[vars$
|
8268
|
-
[vars$
|
8269
|
-
[vars$
|
8270
|
-
[vars$
|
8271
|
-
[vars$
|
8272
|
-
[vars$
|
8273
|
-
[vars$
|
8274
|
-
[vars$
|
8275
|
-
[vars$
|
8276
|
-
[vars$
|
8277
|
-
[vars$
|
8278
|
-
[vars$
|
8295
|
+
[vars$f.hostDirection]: refs.direction,
|
8296
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
8297
|
+
[vars$f.fontSize]: refs.fontSize,
|
8298
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
8299
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
8300
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
8301
|
+
[vars$f.digitValueTextColor]: refs.valueTextColor,
|
8302
|
+
[vars$f.digitPadding]: '0',
|
8303
|
+
[vars$f.digitTextAlign]: 'center',
|
8304
|
+
[vars$f.digitSpacing]: '4px',
|
8305
|
+
[vars$f.hostWidth]: refs.width,
|
8306
|
+
[vars$f.digitOutlineColor]: 'transparent',
|
8307
|
+
[vars$f.digitOutlineWidth]: refs.outlineWidth,
|
8308
|
+
[vars$f.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8309
|
+
[vars$f.digitSize]: refs.inputHeight,
|
8279
8310
|
|
8280
8311
|
_hideCursor: {
|
8281
|
-
[vars$
|
8312
|
+
[vars$f.digitCaretTextColor]: 'transparent',
|
8282
8313
|
},
|
8283
8314
|
};
|
8284
8315
|
|
8285
8316
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8286
8317
|
__proto__: null,
|
8287
8318
|
default: passcode,
|
8288
|
-
vars: vars$
|
8319
|
+
vars: vars$f
|
8289
8320
|
});
|
8290
8321
|
|
8291
|
-
const globalRefs$
|
8292
|
-
const vars$
|
8322
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8323
|
+
const vars$e = LoaderLinearClass.cssVarList;
|
8293
8324
|
|
8294
8325
|
const loaderLinear = {
|
8295
|
-
[vars$
|
8296
|
-
[vars$
|
8326
|
+
[vars$e.hostDisplay]: 'inline-block',
|
8327
|
+
[vars$e.hostWidth]: '100%',
|
8297
8328
|
|
8298
|
-
[vars$
|
8299
|
-
[vars$
|
8329
|
+
[vars$e.barColor]: globalRefs$7.colors.surface.contrast,
|
8330
|
+
[vars$e.barWidth]: '20%',
|
8300
8331
|
|
8301
|
-
[vars$
|
8302
|
-
[vars$
|
8332
|
+
[vars$e.barBackgroundColor]: globalRefs$7.colors.surface.main,
|
8333
|
+
[vars$e.barBorderRadius]: '4px',
|
8303
8334
|
|
8304
|
-
[vars$
|
8305
|
-
[vars$
|
8306
|
-
[vars$
|
8307
|
-
[vars$
|
8335
|
+
[vars$e.animationDuration]: '2s',
|
8336
|
+
[vars$e.animationTimingFunction]: 'linear',
|
8337
|
+
[vars$e.animationIterationCount]: 'infinite',
|
8338
|
+
[vars$e.verticalPadding]: '0.25em',
|
8308
8339
|
|
8309
8340
|
size: {
|
8310
|
-
xs: { [vars$
|
8311
|
-
sm: { [vars$
|
8312
|
-
md: { [vars$
|
8313
|
-
lg: { [vars$
|
8341
|
+
xs: { [vars$e.barHeight]: '2px' },
|
8342
|
+
sm: { [vars$e.barHeight]: '4px' },
|
8343
|
+
md: { [vars$e.barHeight]: '6px' },
|
8344
|
+
lg: { [vars$e.barHeight]: '8px' },
|
8314
8345
|
},
|
8315
8346
|
|
8316
8347
|
mode: {
|
8317
8348
|
primary: {
|
8318
|
-
[vars$
|
8349
|
+
[vars$e.barColor]: globalRefs$7.colors.primary.main,
|
8319
8350
|
},
|
8320
8351
|
secondary: {
|
8321
|
-
[vars$
|
8352
|
+
[vars$e.barColor]: globalRefs$7.colors.secondary.main,
|
8322
8353
|
},
|
8323
8354
|
},
|
8324
8355
|
|
8325
8356
|
_hidden: {
|
8326
|
-
[vars$
|
8357
|
+
[vars$e.hostDisplay]: 'none',
|
8327
8358
|
},
|
8328
8359
|
};
|
8329
8360
|
|
8330
8361
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8331
8362
|
__proto__: null,
|
8332
8363
|
default: loaderLinear,
|
8333
|
-
vars: vars$
|
8364
|
+
vars: vars$e
|
8334
8365
|
});
|
8335
8366
|
|
8336
|
-
const globalRefs$
|
8367
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8337
8368
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
8338
8369
|
|
8339
8370
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8340
8371
|
{
|
8341
|
-
spinnerColor: globalRefs$
|
8372
|
+
spinnerColor: globalRefs$6.colors.surface.contrast,
|
8342
8373
|
mode: {
|
8343
8374
|
primary: {
|
8344
|
-
spinnerColor: globalRefs$
|
8375
|
+
spinnerColor: globalRefs$6.colors.primary.main,
|
8345
8376
|
},
|
8346
8377
|
secondary: {
|
8347
|
-
spinnerColor: globalRefs$
|
8378
|
+
spinnerColor: globalRefs$6.colors.secondary.main,
|
8348
8379
|
},
|
8349
8380
|
},
|
8350
8381
|
},
|
8351
|
-
componentName$
|
8382
|
+
componentName$y
|
8352
8383
|
);
|
8353
8384
|
|
8354
8385
|
const loaderRadial = {
|
@@ -8377,7 +8408,7 @@ const loaderRadial = {
|
|
8377
8408
|
[compVars$1.hostDisplay]: 'none',
|
8378
8409
|
},
|
8379
8410
|
};
|
8380
|
-
const vars$
|
8411
|
+
const vars$d = {
|
8381
8412
|
...compVars$1,
|
8382
8413
|
...helperVars,
|
8383
8414
|
};
|
@@ -8385,76 +8416,112 @@ const vars$c = {
|
|
8385
8416
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
8386
8417
|
__proto__: null,
|
8387
8418
|
default: loaderRadial,
|
8388
|
-
vars: vars$
|
8419
|
+
vars: vars$d
|
8389
8420
|
});
|
8390
8421
|
|
8391
|
-
const globalRefs$
|
8392
|
-
const vars$
|
8422
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8423
|
+
const vars$c = ComboBoxClass.cssVarList;
|
8393
8424
|
|
8394
8425
|
const comboBox = {
|
8395
|
-
[vars$
|
8396
|
-
[vars$
|
8397
|
-
[vars$
|
8398
|
-
[vars$
|
8399
|
-
[vars$
|
8400
|
-
[vars$
|
8401
|
-
[vars$
|
8402
|
-
[vars$
|
8403
|
-
[vars$
|
8404
|
-
[vars$
|
8405
|
-
[vars$
|
8406
|
-
[vars$
|
8407
|
-
[vars$
|
8408
|
-
[vars$
|
8409
|
-
[vars$
|
8410
|
-
[vars$
|
8411
|
-
[vars$
|
8412
|
-
[vars$
|
8413
|
-
[vars$
|
8414
|
-
[vars$
|
8415
|
-
[vars$
|
8416
|
-
[vars$
|
8417
|
-
[vars$
|
8418
|
-
[vars$
|
8419
|
-
[vars$
|
8420
|
-
[vars$
|
8426
|
+
[vars$c.hostWidth]: refs.width,
|
8427
|
+
[vars$c.hostDirection]: refs.direction,
|
8428
|
+
[vars$c.fontSize]: refs.fontSize,
|
8429
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
8430
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
8431
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
8432
|
+
[vars$c.inputBorderColor]: refs.borderColor,
|
8433
|
+
[vars$c.inputBorderWidth]: refs.borderWidth,
|
8434
|
+
[vars$c.inputBorderStyle]: refs.borderStyle,
|
8435
|
+
[vars$c.inputBorderRadius]: refs.borderRadius,
|
8436
|
+
[vars$c.inputOutlineColor]: refs.outlineColor,
|
8437
|
+
[vars$c.inputOutlineOffset]: refs.outlineOffset,
|
8438
|
+
[vars$c.inputOutlineWidth]: refs.outlineWidth,
|
8439
|
+
[vars$c.inputOutlineStyle]: refs.outlineStyle,
|
8440
|
+
[vars$c.labelRequiredIndicator]: refs.requiredIndicator,
|
8441
|
+
[vars$c.inputValueTextColor]: refs.valueTextColor,
|
8442
|
+
[vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8443
|
+
[vars$c.inputBackgroundColor]: refs.backgroundColor,
|
8444
|
+
[vars$c.inputHorizontalPadding]: refs.horizontalPadding,
|
8445
|
+
[vars$c.inputHeight]: refs.inputHeight,
|
8446
|
+
[vars$c.inputDropdownButtonColor]: globalRefs$5.colors.surface.contrast,
|
8447
|
+
[vars$c.inputDropdownButtonCursor]: 'pointer',
|
8448
|
+
[vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8449
|
+
[vars$c.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
|
8450
|
+
[vars$c.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
|
8451
|
+
[vars$c.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
|
8421
8452
|
|
8422
8453
|
_readonly: {
|
8423
|
-
[vars$
|
8454
|
+
[vars$c.inputDropdownButtonCursor]: 'default',
|
8424
8455
|
},
|
8425
8456
|
|
8426
8457
|
// Overlay theme exposed via the component:
|
8427
|
-
[vars$
|
8428
|
-
[vars$
|
8429
|
-
[vars$
|
8430
|
-
[vars$
|
8458
|
+
[vars$c.overlayFontSize]: refs.fontSize,
|
8459
|
+
[vars$c.overlayFontFamily]: refs.fontFamily,
|
8460
|
+
[vars$c.overlayCursor]: 'pointer',
|
8461
|
+
[vars$c.overlayItemBoxShadow]: 'none',
|
8431
8462
|
|
8432
8463
|
// Overlay direct theme:
|
8433
|
-
[vars$
|
8434
|
-
[vars$
|
8464
|
+
[vars$c.overlay.minHeight]: '400px',
|
8465
|
+
[vars$c.overlay.margin]: '0',
|
8435
8466
|
};
|
8436
8467
|
|
8437
8468
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
8438
8469
|
__proto__: null,
|
8439
8470
|
comboBox: comboBox,
|
8440
8471
|
default: comboBox,
|
8441
|
-
vars: vars$
|
8472
|
+
vars: vars$c
|
8442
8473
|
});
|
8443
8474
|
|
8444
|
-
const vars$
|
8475
|
+
const vars$b = ImageClass.cssVarList;
|
8445
8476
|
|
8446
8477
|
const image = {};
|
8447
8478
|
|
8448
8479
|
var image$1 = /*#__PURE__*/Object.freeze({
|
8449
8480
|
__proto__: null,
|
8450
8481
|
default: image,
|
8451
|
-
vars: vars$
|
8482
|
+
vars: vars$b
|
8452
8483
|
});
|
8453
8484
|
|
8454
|
-
const vars$
|
8485
|
+
const vars$a = PhoneFieldClass.cssVarList;
|
8455
8486
|
|
8456
8487
|
const phoneField = {
|
8457
|
-
[vars$
|
8488
|
+
[vars$a.hostWidth]: refs.width,
|
8489
|
+
[vars$a.hostDirection]: refs.direction,
|
8490
|
+
[vars$a.fontSize]: refs.fontSize,
|
8491
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
8492
|
+
[vars$a.labelTextColor]: refs.labelTextColor,
|
8493
|
+
[vars$a.labelRequiredIndicator]: refs.requiredIndicator,
|
8494
|
+
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
8495
|
+
[vars$a.inputValueTextColor]: refs.valueTextColor,
|
8496
|
+
[vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8497
|
+
[vars$a.inputBorderStyle]: refs.borderStyle,
|
8498
|
+
[vars$a.inputBorderWidth]: refs.borderWidth,
|
8499
|
+
[vars$a.inputBorderColor]: refs.borderColor,
|
8500
|
+
[vars$a.inputBorderRadius]: refs.borderRadius,
|
8501
|
+
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
8502
|
+
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
8503
|
+
[vars$a.inputOutlineColor]: refs.outlineColor,
|
8504
|
+
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
8505
|
+
[vars$a.phoneInputWidth]: refs.minWidth,
|
8506
|
+
[vars$a.countryCodeInputWidth]: '5em',
|
8507
|
+
[vars$a.countryCodeDropdownWidth]: '20em',
|
8508
|
+
|
8509
|
+
// '@overlay': {
|
8510
|
+
// overlayItemBackgroundColor: 'red'
|
8511
|
+
// }
|
8512
|
+
};
|
8513
|
+
|
8514
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8515
|
+
__proto__: null,
|
8516
|
+
default: phoneField,
|
8517
|
+
vars: vars$a
|
8518
|
+
});
|
8519
|
+
|
8520
|
+
const vars$9 = PhoneFieldInputBoxClass.cssVarList;
|
8521
|
+
|
8522
|
+
const phoneInputBoxField = {
|
8523
|
+
[vars$9.hostWidth]: '16em',
|
8524
|
+
[vars$9.hostMinWidth]: refs.minWidth,
|
8458
8525
|
[vars$9.hostDirection]: refs.direction,
|
8459
8526
|
[vars$9.fontSize]: refs.fontSize,
|
8460
8527
|
[vars$9.fontFamily]: refs.fontFamily,
|
@@ -8471,194 +8538,158 @@ const phoneField = {
|
|
8471
8538
|
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
8472
8539
|
[vars$9.inputOutlineColor]: refs.outlineColor,
|
8473
8540
|
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
8474
|
-
|
8475
|
-
|
8476
|
-
|
8477
|
-
|
8478
|
-
// '@overlay': {
|
8479
|
-
// overlayItemBackgroundColor: 'red'
|
8480
|
-
// }
|
8541
|
+
_fullWidth: {
|
8542
|
+
[vars$9.hostWidth]: refs.width,
|
8543
|
+
},
|
8481
8544
|
};
|
8482
8545
|
|
8483
|
-
var
|
8546
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8484
8547
|
__proto__: null,
|
8485
|
-
default:
|
8548
|
+
default: phoneInputBoxField,
|
8486
8549
|
vars: vars$9
|
8487
8550
|
});
|
8488
8551
|
|
8489
|
-
const vars$8 =
|
8552
|
+
const vars$8 = NewPasswordClass.cssVarList;
|
8490
8553
|
|
8491
|
-
const
|
8492
|
-
[vars$8.hostWidth]:
|
8554
|
+
const newPassword = {
|
8555
|
+
[vars$8.hostWidth]: refs.width,
|
8493
8556
|
[vars$8.hostMinWidth]: refs.minWidth,
|
8494
8557
|
[vars$8.hostDirection]: refs.direction,
|
8495
8558
|
[vars$8.fontSize]: refs.fontSize,
|
8496
8559
|
[vars$8.fontFamily]: refs.fontFamily,
|
8497
|
-
[vars$8.
|
8498
|
-
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
8560
|
+
[vars$8.spaceBetweenInputs]: '1em',
|
8499
8561
|
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
8500
|
-
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
8501
|
-
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8502
|
-
[vars$8.inputBorderStyle]: refs.borderStyle,
|
8503
|
-
[vars$8.inputBorderWidth]: refs.borderWidth,
|
8504
|
-
[vars$8.inputBorderColor]: refs.borderColor,
|
8505
|
-
[vars$8.inputBorderRadius]: refs.borderRadius,
|
8506
|
-
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
8507
|
-
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
8508
|
-
[vars$8.inputOutlineColor]: refs.outlineColor,
|
8509
|
-
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
8510
|
-
_fullWidth: {
|
8511
|
-
[vars$8.hostWidth]: refs.width,
|
8512
|
-
},
|
8513
|
-
};
|
8514
|
-
|
8515
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8516
|
-
__proto__: null,
|
8517
|
-
default: phoneInputBoxField,
|
8518
|
-
vars: vars$8
|
8519
|
-
});
|
8520
|
-
|
8521
|
-
const vars$7 = NewPasswordClass.cssVarList;
|
8522
|
-
|
8523
|
-
const newPassword = {
|
8524
|
-
[vars$7.hostWidth]: refs.width,
|
8525
|
-
[vars$7.hostMinWidth]: refs.minWidth,
|
8526
|
-
[vars$7.hostDirection]: refs.direction,
|
8527
|
-
[vars$7.fontSize]: refs.fontSize,
|
8528
|
-
[vars$7.fontFamily]: refs.fontFamily,
|
8529
|
-
[vars$7.spaceBetweenInputs]: '1em',
|
8530
|
-
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8531
8562
|
|
8532
8563
|
_required: {
|
8533
8564
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8534
8565
|
// That's why we fake the required indicator on each input.
|
8535
8566
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8536
|
-
[vars$
|
8567
|
+
[vars$8.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8537
8568
|
},
|
8538
8569
|
};
|
8539
8570
|
|
8540
8571
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8541
8572
|
__proto__: null,
|
8542
8573
|
default: newPassword,
|
8543
|
-
vars: vars$
|
8574
|
+
vars: vars$8
|
8544
8575
|
});
|
8545
8576
|
|
8546
|
-
const vars$
|
8577
|
+
const vars$7 = UploadFileClass.cssVarList;
|
8547
8578
|
|
8548
8579
|
const uploadFile = {
|
8549
|
-
[vars$
|
8550
|
-
[vars$
|
8551
|
-
[vars$
|
8580
|
+
[vars$7.hostDirection]: refs.direction,
|
8581
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
8582
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
8552
8583
|
|
8553
|
-
[vars$
|
8584
|
+
[vars$7.iconSize]: '2em',
|
8554
8585
|
|
8555
|
-
[vars$
|
8556
|
-
[vars$
|
8586
|
+
[vars$7.hostPadding]: '0.75em',
|
8587
|
+
[vars$7.gap]: '0.5em',
|
8557
8588
|
|
8558
|
-
[vars$
|
8559
|
-
[vars$
|
8560
|
-
[vars$
|
8589
|
+
[vars$7.fontSize]: '16px',
|
8590
|
+
[vars$7.titleFontWeight]: '500',
|
8591
|
+
[vars$7.lineHeight]: '1em',
|
8561
8592
|
|
8562
|
-
[vars$
|
8563
|
-
[vars$
|
8564
|
-
[vars$
|
8565
|
-
[vars$
|
8593
|
+
[vars$7.borderWidth]: refs.borderWidth,
|
8594
|
+
[vars$7.borderColor]: refs.borderColor,
|
8595
|
+
[vars$7.borderRadius]: refs.borderRadius,
|
8596
|
+
[vars$7.borderStyle]: 'dashed',
|
8566
8597
|
|
8567
8598
|
_required: {
|
8568
|
-
[vars$
|
8599
|
+
[vars$7.requiredIndicator]: refs.requiredIndicator,
|
8569
8600
|
},
|
8570
8601
|
|
8571
8602
|
size: {
|
8572
8603
|
xs: {
|
8573
|
-
[vars$
|
8574
|
-
[vars$
|
8575
|
-
[vars$
|
8576
|
-
[vars$
|
8577
|
-
[vars$
|
8604
|
+
[vars$7.hostHeight]: '196px',
|
8605
|
+
[vars$7.hostWidth]: '200px',
|
8606
|
+
[vars$7.titleFontSize]: '0.875em',
|
8607
|
+
[vars$7.descriptionFontSize]: '0.875em',
|
8608
|
+
[vars$7.lineHeight]: '1.25em',
|
8578
8609
|
},
|
8579
8610
|
sm: {
|
8580
|
-
[vars$
|
8581
|
-
[vars$
|
8582
|
-
[vars$
|
8583
|
-
[vars$
|
8584
|
-
[vars$
|
8611
|
+
[vars$7.hostHeight]: '216px',
|
8612
|
+
[vars$7.hostWidth]: '230px',
|
8613
|
+
[vars$7.titleFontSize]: '1em',
|
8614
|
+
[vars$7.descriptionFontSize]: '0.875em',
|
8615
|
+
[vars$7.lineHeight]: '1.25em',
|
8585
8616
|
},
|
8586
8617
|
md: {
|
8587
|
-
[vars$
|
8588
|
-
[vars$
|
8589
|
-
[vars$
|
8590
|
-
[vars$
|
8591
|
-
[vars$
|
8618
|
+
[vars$7.hostHeight]: '256px',
|
8619
|
+
[vars$7.hostWidth]: '312px',
|
8620
|
+
[vars$7.titleFontSize]: '1.125em',
|
8621
|
+
[vars$7.descriptionFontSize]: '1em',
|
8622
|
+
[vars$7.lineHeight]: '1.5em',
|
8592
8623
|
},
|
8593
8624
|
lg: {
|
8594
|
-
[vars$
|
8595
|
-
[vars$
|
8596
|
-
[vars$
|
8597
|
-
[vars$
|
8598
|
-
[vars$
|
8625
|
+
[vars$7.hostHeight]: '280px',
|
8626
|
+
[vars$7.hostWidth]: '336px',
|
8627
|
+
[vars$7.titleFontSize]: '1.125em',
|
8628
|
+
[vars$7.descriptionFontSize]: '1.125em',
|
8629
|
+
[vars$7.lineHeight]: '1.75em',
|
8599
8630
|
},
|
8600
8631
|
},
|
8601
8632
|
|
8602
8633
|
_fullWidth: {
|
8603
|
-
[vars$
|
8634
|
+
[vars$7.hostWidth]: refs.width,
|
8604
8635
|
},
|
8605
8636
|
};
|
8606
8637
|
|
8607
8638
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8608
8639
|
__proto__: null,
|
8609
8640
|
default: uploadFile,
|
8610
|
-
vars: vars$
|
8641
|
+
vars: vars$7
|
8611
8642
|
});
|
8612
8643
|
|
8613
|
-
const globalRefs$
|
8644
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8614
8645
|
|
8615
|
-
const vars$
|
8646
|
+
const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
|
8616
8647
|
|
8617
8648
|
const buttonSelectionGroupItem = {
|
8618
|
-
[vars$
|
8619
|
-
[vars$
|
8620
|
-
[vars$
|
8621
|
-
[vars$
|
8622
|
-
[vars$
|
8623
|
-
[vars$
|
8649
|
+
[vars$6.hostDirection]: 'inherit',
|
8650
|
+
[vars$6.backgroundColor]: globalRefs$4.colors.surface.light,
|
8651
|
+
[vars$6.labelTextColor]: globalRefs$4.colors.surface.contrast,
|
8652
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.main,
|
8653
|
+
[vars$6.borderStyle]: 'solid',
|
8654
|
+
[vars$6.borderRadius]: globalRefs$4.radius.sm,
|
8624
8655
|
|
8625
8656
|
_hover: {
|
8626
|
-
[vars$
|
8657
|
+
[vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8627
8658
|
},
|
8628
8659
|
|
8629
8660
|
_selected: {
|
8630
|
-
[vars$
|
8631
|
-
[vars$
|
8632
|
-
[vars$
|
8661
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.contrast,
|
8662
|
+
[vars$6.backgroundColor]: globalRefs$4.colors.surface.contrast,
|
8663
|
+
[vars$6.labelTextColor]: globalRefs$4.colors.surface.light,
|
8633
8664
|
},
|
8634
8665
|
};
|
8635
8666
|
|
8636
8667
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8637
8668
|
__proto__: null,
|
8638
8669
|
default: buttonSelectionGroupItem,
|
8639
|
-
vars: vars$
|
8670
|
+
vars: vars$6
|
8640
8671
|
});
|
8641
8672
|
|
8642
|
-
const globalRefs$
|
8643
|
-
const vars$
|
8673
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8674
|
+
const vars$5 = ButtonSelectionGroupClass.cssVarList;
|
8644
8675
|
|
8645
8676
|
const buttonSelectionGroup = {
|
8646
|
-
[vars$
|
8647
|
-
[vars$
|
8648
|
-
[vars$
|
8649
|
-
[vars$
|
8650
|
-
[vars$
|
8651
|
-
[vars$
|
8652
|
-
[vars$
|
8677
|
+
[vars$5.hostDirection]: refs.direction,
|
8678
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
8679
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
8680
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
8681
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
8682
|
+
[vars$5.itemsSpacing]: globalRefs$3.spacing.sm,
|
8683
|
+
[vars$5.hostWidth]: refs.width,
|
8653
8684
|
};
|
8654
8685
|
|
8655
8686
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8656
8687
|
__proto__: null,
|
8657
8688
|
default: buttonSelectionGroup,
|
8658
|
-
vars: vars$
|
8689
|
+
vars: vars$5
|
8659
8690
|
});
|
8660
8691
|
|
8661
|
-
const componentName$
|
8692
|
+
const componentName$2 = getComponentName('modal');
|
8662
8693
|
|
8663
8694
|
const customMixin = (superclass) =>
|
8664
8695
|
class ModalMixinClass extends superclass {
|
@@ -8754,7 +8785,7 @@ const ModalClass = compose(
|
|
8754
8785
|
wrappedEleName: 'vaadin-dialog',
|
8755
8786
|
style: () => ``,
|
8756
8787
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8757
|
-
componentName: componentName$
|
8788
|
+
componentName: componentName$2,
|
8758
8789
|
})
|
8759
8790
|
);
|
8760
8791
|
|
@@ -8765,44 +8796,44 @@ const modal = {
|
|
8765
8796
|
[compVars.overlayWidth]: '700px',
|
8766
8797
|
};
|
8767
8798
|
|
8768
|
-
const vars$
|
8799
|
+
const vars$4 = {
|
8769
8800
|
...compVars,
|
8770
8801
|
};
|
8771
8802
|
|
8772
8803
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8773
8804
|
__proto__: null,
|
8774
8805
|
default: modal,
|
8775
|
-
vars: vars$
|
8806
|
+
vars: vars$4
|
8776
8807
|
});
|
8777
8808
|
|
8778
|
-
const globalRefs$
|
8779
|
-
const vars$
|
8809
|
+
const globalRefs$2 = getThemeRefs(globals);
|
8810
|
+
const vars$3 = GridClass.cssVarList;
|
8780
8811
|
|
8781
8812
|
const grid = {
|
8782
|
-
[vars$
|
8783
|
-
[vars$
|
8784
|
-
[vars$
|
8813
|
+
[vars$3.hostWidth]: '100%',
|
8814
|
+
[vars$3.hostHeight]: '100%',
|
8815
|
+
[vars$3.hostMinHeight]: '400px',
|
8785
8816
|
|
8786
|
-
[vars$
|
8787
|
-
[vars$
|
8817
|
+
[vars$3.fontSize]: refs.fontSize,
|
8818
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
8788
8819
|
|
8789
|
-
[vars$
|
8790
|
-
[vars$
|
8791
|
-
[vars$
|
8820
|
+
[vars$3.sortIndicatorsColor]: globalRefs$2.colors.primary.main,
|
8821
|
+
[vars$3.activeSortIndicator]: globalRefs$2.colors.primary.main,
|
8822
|
+
[vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
|
8792
8823
|
|
8793
|
-
[vars$
|
8794
|
-
[vars$
|
8795
|
-
[vars$
|
8796
|
-
[vars$
|
8824
|
+
[vars$3.inputBorderWidth]: refs.borderWidth,
|
8825
|
+
[vars$3.inputBorderStyle]: refs.borderStyle,
|
8826
|
+
[vars$3.inputBorderRadius]: refs.borderRadius,
|
8827
|
+
[vars$3.inputBorderColor]: 'transparent',
|
8797
8828
|
|
8798
|
-
[vars$
|
8829
|
+
[vars$3.separatorColor]: refs.borderColor,
|
8799
8830
|
|
8800
|
-
[vars$
|
8801
|
-
[vars$
|
8802
|
-
[vars$
|
8831
|
+
[vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
|
8832
|
+
[vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.main,
|
8833
|
+
[vars$3.selectedTextColor]: globalRefs$2.colors.primary.contrast,
|
8803
8834
|
|
8804
8835
|
_bordered: {
|
8805
|
-
[vars$
|
8836
|
+
[vars$3.inputBorderColor]: refs.borderColor,
|
8806
8837
|
},
|
8807
8838
|
};
|
8808
8839
|
|
@@ -8810,10 +8841,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8810
8841
|
__proto__: null,
|
8811
8842
|
default: grid,
|
8812
8843
|
grid: grid,
|
8813
|
-
vars: vars$
|
8844
|
+
vars: vars$3
|
8814
8845
|
});
|
8815
8846
|
|
8816
|
-
const componentName = getComponentName('notification-card');
|
8847
|
+
const componentName$1 = getComponentName('notification-card');
|
8817
8848
|
|
8818
8849
|
const notificationCardMixin = (superclass) =>
|
8819
8850
|
class NotificationCardMixinClass extends superclass {
|
@@ -8921,30 +8952,136 @@ const NotificationCardClass = compose(
|
|
8921
8952
|
}
|
8922
8953
|
`,
|
8923
8954
|
excludeAttrsSync: ['tabindex'],
|
8924
|
-
componentName,
|
8955
|
+
componentName: componentName$1,
|
8925
8956
|
})
|
8926
8957
|
);
|
8927
8958
|
|
8928
|
-
const globalRefs = getThemeRefs(globals);
|
8929
|
-
const vars$
|
8959
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8960
|
+
const vars$2 = NotificationCardClass.cssVarList;
|
8930
8961
|
|
8931
8962
|
const shadowColor = '#00000020';
|
8932
8963
|
|
8933
8964
|
const notification = {
|
8934
|
-
[vars$
|
8935
|
-
[vars$
|
8936
|
-
[vars$
|
8937
|
-
[vars$
|
8938
|
-
[vars$
|
8939
|
-
[vars$
|
8940
|
-
[vars$
|
8941
|
-
[vars$
|
8942
|
-
[vars$
|
8965
|
+
[vars$2.hostMinWidth]: '415px',
|
8966
|
+
[vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
|
8967
|
+
[vars$2.fontSize]: globalRefs$1.typography.body1.size,
|
8968
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
|
8969
|
+
[vars$2.textColor]: globalRefs$1.colors.surface.contrast,
|
8970
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
|
8971
|
+
[vars$2.verticalPadding]: '0.45em',
|
8972
|
+
[vars$2.horizontalPadding]: '1em',
|
8973
|
+
[vars$2.borderRadius]: globalRefs$1.radius.md,
|
8943
8974
|
|
8944
8975
|
_bordered: {
|
8945
|
-
[vars$
|
8946
|
-
[vars$
|
8947
|
-
[vars$
|
8976
|
+
[vars$2.borderWidth]: globalRefs$1.border.sm,
|
8977
|
+
[vars$2.borderStyle]: 'solid',
|
8978
|
+
[vars$2.borderColor]: 'transparent',
|
8979
|
+
},
|
8980
|
+
|
8981
|
+
size: {
|
8982
|
+
xs: { [vars$2.fontSize]: '12px' },
|
8983
|
+
sm: { [vars$2.fontSize]: '14px' },
|
8984
|
+
md: { [vars$2.fontSize]: '16px' },
|
8985
|
+
lg: { [vars$2.fontSize]: '18px' },
|
8986
|
+
},
|
8987
|
+
|
8988
|
+
mode: {
|
8989
|
+
primary: {
|
8990
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.primary.main,
|
8991
|
+
[vars$2.textColor]: globalRefs$1.colors.primary.contrast,
|
8992
|
+
[vars$2.borderColor]: globalRefs$1.colors.primary.light,
|
8993
|
+
},
|
8994
|
+
success: {
|
8995
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.success.main,
|
8996
|
+
[vars$2.textColor]: globalRefs$1.colors.success.contrast,
|
8997
|
+
[vars$2.borderColor]: globalRefs$1.colors.success.light,
|
8998
|
+
},
|
8999
|
+
error: {
|
9000
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.error.main,
|
9001
|
+
[vars$2.textColor]: globalRefs$1.colors.error.contrast,
|
9002
|
+
[vars$2.borderColor]: globalRefs$1.colors.error.light,
|
9003
|
+
},
|
9004
|
+
},
|
9005
|
+
};
|
9006
|
+
|
9007
|
+
var notificationCard = /*#__PURE__*/Object.freeze({
|
9008
|
+
__proto__: null,
|
9009
|
+
default: notification,
|
9010
|
+
vars: vars$2
|
9011
|
+
});
|
9012
|
+
|
9013
|
+
const componentName = getComponentName('badge');
|
9014
|
+
|
9015
|
+
class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
|
9016
|
+
constructor() {
|
9017
|
+
super();
|
9018
|
+
|
9019
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
9020
|
+
<style>
|
9021
|
+
:host {
|
9022
|
+
display: inline-flex;
|
9023
|
+
}
|
9024
|
+
:host > div {
|
9025
|
+
width: 100%;
|
9026
|
+
}
|
9027
|
+
</style>
|
9028
|
+
<div>
|
9029
|
+
<slot></slot>
|
9030
|
+
</div>
|
9031
|
+
`;
|
9032
|
+
}
|
9033
|
+
}
|
9034
|
+
|
9035
|
+
const BadgeClass = compose(
|
9036
|
+
createStyleMixin({
|
9037
|
+
mappings: {
|
9038
|
+
hostWidth: [{ selector: () => ':host', property: 'width' }],
|
9039
|
+
hostDirection: { property: 'direction' },
|
9040
|
+
|
9041
|
+
fontFamily: {},
|
9042
|
+
fontSize: {},
|
9043
|
+
fontWeight: {},
|
9044
|
+
textTransform: {},
|
9045
|
+
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
9046
|
+
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
9047
|
+
|
9048
|
+
borderWidth: {},
|
9049
|
+
borderStyle: {},
|
9050
|
+
borderColor: {},
|
9051
|
+
borderRadius: {},
|
9052
|
+
|
9053
|
+
backgroundColor: {},
|
9054
|
+
|
9055
|
+
textColor: { property: 'color' },
|
9056
|
+
textAlign: {},
|
9057
|
+
},
|
9058
|
+
}),
|
9059
|
+
draggableMixin,
|
9060
|
+
componentNameValidationMixin
|
9061
|
+
)(RawBadge);
|
9062
|
+
|
9063
|
+
const globalRefs = getThemeRefs(globals);
|
9064
|
+
const vars$1 = BadgeClass.cssVarList;
|
9065
|
+
|
9066
|
+
const badge = {
|
9067
|
+
[vars$1.hostWidth]: 'fit-content',
|
9068
|
+
[vars$1.hostDirection]: globalRefs.direction,
|
9069
|
+
|
9070
|
+
[vars$1.textAlign]: 'center',
|
9071
|
+
|
9072
|
+
[vars$1.fontFamily]: globalRefs.fonts.font1.family,
|
9073
|
+
[vars$1.fontWeight]: '400',
|
9074
|
+
|
9075
|
+
[vars$1.verticalPadding]: '0.25em',
|
9076
|
+
[vars$1.horizontalPadding]: '0.5em',
|
9077
|
+
|
9078
|
+
[vars$1.borderWidth]: globalRefs.border.xs,
|
9079
|
+
[vars$1.borderRadius]: globalRefs.radius.sm,
|
9080
|
+
[vars$1.borderColor]: 'transparent',
|
9081
|
+
[vars$1.borderStyle]: 'solid',
|
9082
|
+
|
9083
|
+
_fullWidth: {
|
9084
|
+
[vars$1.hostWidth]: '100%',
|
8948
9085
|
},
|
8949
9086
|
|
8950
9087
|
size: {
|
@@ -8955,27 +9092,42 @@ const notification = {
|
|
8955
9092
|
},
|
8956
9093
|
|
8957
9094
|
mode: {
|
9095
|
+
default: {
|
9096
|
+
[vars$1.textColor]: globalRefs.colors.surface.dark,
|
9097
|
+
_bordered: {
|
9098
|
+
[vars$1.borderColor]: globalRefs.colors.surface.main,
|
9099
|
+
},
|
9100
|
+
},
|
8958
9101
|
primary: {
|
8959
|
-
[vars$1.
|
8960
|
-
|
8961
|
-
|
9102
|
+
[vars$1.textColor]: globalRefs.colors.primary.main,
|
9103
|
+
_bordered: {
|
9104
|
+
[vars$1.borderColor]: globalRefs.colors.primary.light,
|
9105
|
+
},
|
8962
9106
|
},
|
8963
|
-
|
8964
|
-
[vars$1.
|
8965
|
-
|
8966
|
-
|
9107
|
+
secondary: {
|
9108
|
+
[vars$1.textColor]: globalRefs.colors.secondary.main,
|
9109
|
+
_bordered: {
|
9110
|
+
[vars$1.borderColor]: globalRefs.colors.secondary.light,
|
9111
|
+
},
|
8967
9112
|
},
|
8968
9113
|
error: {
|
8969
|
-
[vars$1.backgroundColor]: globalRefs.colors.error.main,
|
8970
|
-
[vars$1.textColor]: globalRefs.colors.error.contrast,
|
8971
9114
|
[vars$1.borderColor]: globalRefs.colors.error.light,
|
9115
|
+
_bordered: {
|
9116
|
+
[vars$1.textColor]: globalRefs.colors.error.main,
|
9117
|
+
},
|
9118
|
+
},
|
9119
|
+
success: {
|
9120
|
+
[vars$1.textColor]: globalRefs.colors.success.main,
|
9121
|
+
_bordered: {
|
9122
|
+
[vars$1.borderColor]: globalRefs.colors.success.light,
|
9123
|
+
},
|
8972
9124
|
},
|
8973
9125
|
},
|
8974
9126
|
};
|
8975
9127
|
|
8976
|
-
var
|
9128
|
+
var badge$1 = /*#__PURE__*/Object.freeze({
|
8977
9129
|
__proto__: null,
|
8978
|
-
default:
|
9130
|
+
default: badge,
|
8979
9131
|
vars: vars$1
|
8980
9132
|
});
|
8981
9133
|
|
@@ -9009,6 +9161,7 @@ const components = {
|
|
9009
9161
|
modal: modal$1,
|
9010
9162
|
grid: grid$1,
|
9011
9163
|
notificationCard,
|
9164
|
+
badge: badge$1,
|
9012
9165
|
};
|
9013
9166
|
|
9014
9167
|
const theme = Object.keys(components).reduce(
|
@@ -9021,7 +9174,7 @@ const vars = Object.keys(components).reduce(
|
|
9021
9174
|
);
|
9022
9175
|
|
9023
9176
|
const defaultTheme = { globals, components: theme };
|
9024
|
-
const themeVars = { globals: vars$
|
9177
|
+
const themeVars = { globals: vars$v, components: vars };
|
9025
9178
|
|
9026
9179
|
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
9027
9180
|
//# sourceMappingURL=index.esm.js.map
|