@descope/web-components-ui 1.0.228 → 1.0.230
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +826 -601
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +720 -592
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1769.js +360 -0
- package/dist/umd/1932.js +1 -1
- package/dist/umd/1990.js +1 -1
- package/dist/umd/2269.js +2 -0
- package/dist/umd/2269.js.LICENSE.txt +5 -0
- package/dist/umd/3585.js +1 -1
- package/dist/umd/3878.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6091.js +123 -0
- package/dist/umd/{4746.js.LICENSE.txt → 6091.js.LICENSE.txt} +0 -6
- package/dist/umd/6542.js +288 -0
- package/dist/umd/6542.js.LICENSE.txt +11 -0
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7514.js +1 -1
- package/dist/umd/9211.js +1 -1
- package/dist/umd/9320.js +2 -0
- package/dist/umd/9320.js.LICENSE.txt +5 -0
- package/dist/umd/9437.js +1 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -0
- package/dist/umd/descope-notification-index-js.js +1 -0
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-grid/GridClass.js +8 -1
- package/src/components/descope-notification/NotificationClass.js +104 -0
- package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +67 -0
- package/src/components/descope-notification/descope-notification-card/index.js +6 -0
- package/src/components/descope-notification/descope-notification-container.js +13 -0
- package/src/components/descope-notification/index.js +8 -0
- package/src/index.cjs.js +1 -0
- package/src/mixins/normalizeBooleanAttributesMixin.js +2 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/notificationCard.js +54 -0
- package/dist/umd/1419.js +0 -360
- package/dist/umd/4746.js +0 -123
- /package/dist/umd/{1419.js.LICENSE.txt → 1769.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -563,6 +563,8 @@ const booleanAttributesList = [
|
|
563
563
|
'opened',
|
564
564
|
'active',
|
565
565
|
'password-visible',
|
566
|
+
'opening',
|
567
|
+
'closing',
|
566
568
|
];
|
567
569
|
|
568
570
|
const isBooleanAttribute = (attr) => {
|
@@ -1237,7 +1239,7 @@ const clickableMixin = (superclass) =>
|
|
1237
1239
|
}
|
1238
1240
|
};
|
1239
1241
|
|
1240
|
-
const componentName$
|
1242
|
+
const componentName$C = getComponentName('button');
|
1241
1243
|
|
1242
1244
|
const resetStyles = `
|
1243
1245
|
:host {
|
@@ -1334,7 +1336,7 @@ const ButtonClass = compose(
|
|
1334
1336
|
}
|
1335
1337
|
`,
|
1336
1338
|
excludeAttrsSync: ['tabindex'],
|
1337
|
-
componentName: componentName$
|
1339
|
+
componentName: componentName$C,
|
1338
1340
|
})
|
1339
1341
|
);
|
1340
1342
|
|
@@ -1371,7 +1373,7 @@ loadingIndicatorStyles = `
|
|
1371
1373
|
}
|
1372
1374
|
`;
|
1373
1375
|
|
1374
|
-
customElements.define(componentName$
|
1376
|
+
customElements.define(componentName$C, ButtonClass);
|
1375
1377
|
|
1376
1378
|
const createBaseInputClass = (...args) =>
|
1377
1379
|
compose(
|
@@ -1381,11 +1383,11 @@ const createBaseInputClass = (...args) =>
|
|
1381
1383
|
inputEventsDispatchingMixin
|
1382
1384
|
)(createBaseClass(...args));
|
1383
1385
|
|
1384
|
-
const componentName$
|
1386
|
+
const componentName$B = getComponentName('boolean-field-internal');
|
1385
1387
|
|
1386
1388
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1387
1389
|
|
1388
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1390
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
|
1389
1391
|
|
1390
1392
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1391
1393
|
static get observedAttributes() {
|
@@ -1461,14 +1463,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1461
1463
|
|
1462
1464
|
const template = document.createElement('template');
|
1463
1465
|
template.innerHTML = `
|
1464
|
-
<${componentName$
|
1466
|
+
<${componentName$B}
|
1465
1467
|
tabindex="-1"
|
1466
1468
|
slot="input"
|
1467
|
-
></${componentName$
|
1469
|
+
></${componentName$B}>
|
1468
1470
|
`;
|
1469
1471
|
|
1470
1472
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1471
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1473
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$B);
|
1472
1474
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1473
1475
|
|
1474
1476
|
forwardAttrs(this, this.inputElement, {
|
@@ -1639,7 +1641,7 @@ descope-boolean-field-internal {
|
|
1639
1641
|
}
|
1640
1642
|
`;
|
1641
1643
|
|
1642
|
-
const componentName$
|
1644
|
+
const componentName$A = getComponentName('checkbox');
|
1643
1645
|
|
1644
1646
|
const {
|
1645
1647
|
host: host$f,
|
@@ -1740,15 +1742,15 @@ const CheckboxClass = compose(
|
|
1740
1742
|
}
|
1741
1743
|
`,
|
1742
1744
|
excludeAttrsSync: ['label', 'tabindex'],
|
1743
|
-
componentName: componentName$
|
1745
|
+
componentName: componentName$A,
|
1744
1746
|
})
|
1745
1747
|
);
|
1746
1748
|
|
1747
|
-
customElements.define(componentName$
|
1749
|
+
customElements.define(componentName$B, BooleanInputInternal);
|
1748
1750
|
|
1749
|
-
customElements.define(componentName$
|
1751
|
+
customElements.define(componentName$A, CheckboxClass);
|
1750
1752
|
|
1751
|
-
const componentName$
|
1753
|
+
const componentName$z = getComponentName('switch-toggle');
|
1752
1754
|
|
1753
1755
|
const {
|
1754
1756
|
host: host$e,
|
@@ -1875,17 +1877,17 @@ const SwitchToggleClass = compose(
|
|
1875
1877
|
}
|
1876
1878
|
`,
|
1877
1879
|
excludeAttrsSync: ['label', 'tabindex'],
|
1878
|
-
componentName: componentName$
|
1880
|
+
componentName: componentName$z,
|
1879
1881
|
})
|
1880
1882
|
);
|
1881
1883
|
|
1882
|
-
customElements.define(componentName$
|
1884
|
+
customElements.define(componentName$z, SwitchToggleClass);
|
1883
1885
|
|
1884
|
-
const componentName$
|
1886
|
+
const componentName$y = getComponentName('loader-linear');
|
1885
1887
|
|
1886
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1888
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
|
1887
1889
|
static get componentName() {
|
1888
|
-
return componentName$
|
1890
|
+
return componentName$y;
|
1889
1891
|
}
|
1890
1892
|
|
1891
1893
|
constructor() {
|
@@ -1946,11 +1948,11 @@ const LoaderLinearClass = compose(
|
|
1946
1948
|
componentNameValidationMixin
|
1947
1949
|
)(RawLoaderLinear);
|
1948
1950
|
|
1949
|
-
customElements.define(componentName$
|
1951
|
+
customElements.define(componentName$y, LoaderLinearClass);
|
1950
1952
|
|
1951
|
-
const componentName$
|
1953
|
+
const componentName$x = getComponentName('loader-radial');
|
1952
1954
|
|
1953
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1955
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
|
1954
1956
|
constructor() {
|
1955
1957
|
super();
|
1956
1958
|
|
@@ -1994,11 +1996,11 @@ const LoaderRadialClass = compose(
|
|
1994
1996
|
componentNameValidationMixin
|
1995
1997
|
)(RawLoaderRadial);
|
1996
1998
|
|
1997
|
-
customElements.define(componentName$
|
1999
|
+
customElements.define(componentName$x, LoaderRadialClass);
|
1998
2000
|
|
1999
|
-
const componentName$
|
2001
|
+
const componentName$w = getComponentName('container');
|
2000
2002
|
|
2001
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2003
|
+
class RawContainer extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
|
2002
2004
|
constructor() {
|
2003
2005
|
super();
|
2004
2006
|
|
@@ -2050,10 +2052,10 @@ const ContainerClass = compose(
|
|
2050
2052
|
componentNameValidationMixin
|
2051
2053
|
)(RawContainer);
|
2052
2054
|
|
2053
|
-
customElements.define(componentName$
|
2055
|
+
customElements.define(componentName$w, ContainerClass);
|
2054
2056
|
|
2055
|
-
const componentName$
|
2056
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2057
|
+
const componentName$v = getComponentName('divider');
|
2058
|
+
class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
2057
2059
|
constructor() {
|
2058
2060
|
super();
|
2059
2061
|
|
@@ -2151,9 +2153,9 @@ const DividerClass = compose(
|
|
2151
2153
|
|
2152
2154
|
// eslint-disable-next-line max-classes-per-file
|
2153
2155
|
|
2154
|
-
const componentName$
|
2156
|
+
const componentName$u = getComponentName('text');
|
2155
2157
|
|
2156
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2158
|
+
class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
|
2157
2159
|
constructor() {
|
2158
2160
|
super();
|
2159
2161
|
|
@@ -2212,9 +2214,9 @@ const TextClass = compose(
|
|
2212
2214
|
customTextMixin
|
2213
2215
|
)(RawText);
|
2214
2216
|
|
2215
|
-
customElements.define(componentName$
|
2217
|
+
customElements.define(componentName$u, TextClass);
|
2216
2218
|
|
2217
|
-
customElements.define(componentName$
|
2219
|
+
customElements.define(componentName$v, DividerClass);
|
2218
2220
|
|
2219
2221
|
const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2220
2222
|
{
|
@@ -2270,7 +2272,7 @@ var textFieldMappings = {
|
|
2270
2272
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2271
2273
|
};
|
2272
2274
|
|
2273
|
-
const componentName$
|
2275
|
+
const componentName$t = getComponentName('email-field');
|
2274
2276
|
|
2275
2277
|
const customMixin$7 = (superclass) =>
|
2276
2278
|
class EmailFieldMixinClass extends superclass {
|
@@ -2304,15 +2306,15 @@ const EmailFieldClass = compose(
|
|
2304
2306
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2305
2307
|
`,
|
2306
2308
|
excludeAttrsSync: ['tabindex'],
|
2307
|
-
componentName: componentName$
|
2309
|
+
componentName: componentName$t,
|
2308
2310
|
})
|
2309
2311
|
);
|
2310
2312
|
|
2311
|
-
customElements.define(componentName$
|
2313
|
+
customElements.define(componentName$t, EmailFieldClass);
|
2312
2314
|
|
2313
|
-
const componentName$
|
2315
|
+
const componentName$s = getComponentName('link');
|
2314
2316
|
|
2315
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2317
|
+
class RawLink extends createBaseClass({ componentName: componentName$s, baseSelector: ':host a' }) {
|
2316
2318
|
constructor() {
|
2317
2319
|
super();
|
2318
2320
|
|
@@ -2376,7 +2378,7 @@ const LinkClass = compose(
|
|
2376
2378
|
componentNameValidationMixin
|
2377
2379
|
)(RawLink);
|
2378
2380
|
|
2379
|
-
customElements.define(componentName$
|
2381
|
+
customElements.define(componentName$s, LinkClass);
|
2380
2382
|
|
2381
2383
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2382
2384
|
let style;
|
@@ -2428,27 +2430,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2428
2430
|
return CssVarImageClass;
|
2429
2431
|
};
|
2430
2432
|
|
2431
|
-
const componentName$
|
2433
|
+
const componentName$r = getComponentName('logo');
|
2432
2434
|
|
2433
2435
|
const LogoClass = createCssVarImageClass({
|
2434
|
-
componentName: componentName$
|
2436
|
+
componentName: componentName$r,
|
2435
2437
|
varName: 'url',
|
2436
2438
|
fallbackVarName: 'fallbackUrl',
|
2437
2439
|
});
|
2438
2440
|
|
2439
|
-
customElements.define(componentName$
|
2441
|
+
customElements.define(componentName$r, LogoClass);
|
2440
2442
|
|
2441
|
-
const componentName$
|
2443
|
+
const componentName$q = getComponentName('totp-image');
|
2442
2444
|
|
2443
2445
|
const TotpImageClass = createCssVarImageClass({
|
2444
|
-
componentName: componentName$
|
2446
|
+
componentName: componentName$q,
|
2445
2447
|
varName: 'url',
|
2446
2448
|
fallbackVarName: 'fallbackUrl',
|
2447
2449
|
});
|
2448
2450
|
|
2449
|
-
customElements.define(componentName$
|
2451
|
+
customElements.define(componentName$q, TotpImageClass);
|
2450
2452
|
|
2451
|
-
const componentName$
|
2453
|
+
const componentName$p = getComponentName('number-field');
|
2452
2454
|
|
2453
2455
|
const NumberFieldClass = compose(
|
2454
2456
|
createStyleMixin({
|
@@ -2473,11 +2475,11 @@ const NumberFieldClass = compose(
|
|
2473
2475
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2474
2476
|
`,
|
2475
2477
|
excludeAttrsSync: ['tabindex'],
|
2476
|
-
componentName: componentName$
|
2478
|
+
componentName: componentName$p,
|
2477
2479
|
})
|
2478
2480
|
);
|
2479
2481
|
|
2480
|
-
customElements.define(componentName$
|
2482
|
+
customElements.define(componentName$p, NumberFieldClass);
|
2481
2483
|
|
2482
2484
|
const focusElement = (ele) => {
|
2483
2485
|
ele?.focus();
|
@@ -2495,13 +2497,13 @@ const getSanitizedCharacters = (str) => {
|
|
2495
2497
|
|
2496
2498
|
/* eslint-disable no-param-reassign */
|
2497
2499
|
|
2498
|
-
const componentName$
|
2500
|
+
const componentName$o = getComponentName('passcode-internal');
|
2499
2501
|
|
2500
2502
|
const observedAttributes$5 = ['digits'];
|
2501
2503
|
|
2502
2504
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2503
2505
|
|
2504
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2506
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
2505
2507
|
|
2506
2508
|
class PasscodeInternal extends BaseInputClass$4 {
|
2507
2509
|
static get observedAttributes() {
|
@@ -2698,7 +2700,7 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2698
2700
|
}
|
2699
2701
|
}
|
2700
2702
|
|
2701
|
-
const componentName$
|
2703
|
+
const componentName$n = getComponentName('text-field');
|
2702
2704
|
|
2703
2705
|
const observedAttrs = ['type'];
|
2704
2706
|
|
@@ -2747,11 +2749,11 @@ const TextFieldClass = compose(
|
|
2747
2749
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2748
2750
|
`,
|
2749
2751
|
excludeAttrsSync: ['tabindex'],
|
2750
|
-
componentName: componentName$
|
2752
|
+
componentName: componentName$n,
|
2751
2753
|
})
|
2752
2754
|
);
|
2753
2755
|
|
2754
|
-
const componentName$
|
2756
|
+
const componentName$m = getComponentName('passcode');
|
2755
2757
|
|
2756
2758
|
const observedAttributes$4 = ['digits'];
|
2757
2759
|
|
@@ -2770,17 +2772,17 @@ const customMixin$5 = (superclass) =>
|
|
2770
2772
|
const template = document.createElement('template');
|
2771
2773
|
|
2772
2774
|
template.innerHTML = `
|
2773
|
-
<${componentName$
|
2775
|
+
<${componentName$o}
|
2774
2776
|
bordered="true"
|
2775
2777
|
name="code"
|
2776
2778
|
tabindex="-1"
|
2777
2779
|
slot="input"
|
2778
|
-
><slot></slot></${componentName$
|
2780
|
+
><slot></slot></${componentName$o}>
|
2779
2781
|
`;
|
2780
2782
|
|
2781
2783
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2782
2784
|
|
2783
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2785
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
2784
2786
|
|
2785
2787
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2786
2788
|
}
|
@@ -2918,15 +2920,15 @@ const PasscodeClass = compose(
|
|
2918
2920
|
${resetInputCursor('vaadin-text-field')}
|
2919
2921
|
`,
|
2920
2922
|
excludeAttrsSync: ['tabindex'],
|
2921
|
-
componentName: componentName$
|
2923
|
+
componentName: componentName$m,
|
2922
2924
|
})
|
2923
2925
|
);
|
2924
2926
|
|
2925
|
-
customElements.define(componentName$
|
2927
|
+
customElements.define(componentName$n, TextFieldClass);
|
2926
2928
|
|
2927
|
-
customElements.define(componentName$
|
2929
|
+
customElements.define(componentName$o, PasscodeInternal);
|
2928
2930
|
|
2929
|
-
customElements.define(componentName$
|
2931
|
+
customElements.define(componentName$m, PasscodeClass);
|
2930
2932
|
|
2931
2933
|
const passwordDraggableMixin = (superclass) =>
|
2932
2934
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2962,7 +2964,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2962
2964
|
}
|
2963
2965
|
};
|
2964
2966
|
|
2965
|
-
const componentName$
|
2967
|
+
const componentName$l = getComponentName('password');
|
2966
2968
|
|
2967
2969
|
const {
|
2968
2970
|
host: host$8,
|
@@ -3091,13 +3093,13 @@ const PasswordClass = compose(
|
|
3091
3093
|
}
|
3092
3094
|
`,
|
3093
3095
|
excludeAttrsSync: ['tabindex'],
|
3094
|
-
componentName: componentName$
|
3096
|
+
componentName: componentName$l,
|
3095
3097
|
})
|
3096
3098
|
);
|
3097
3099
|
|
3098
|
-
customElements.define(componentName$
|
3100
|
+
customElements.define(componentName$l, PasswordClass);
|
3099
3101
|
|
3100
|
-
const componentName$
|
3102
|
+
const componentName$k = getComponentName('text-area');
|
3101
3103
|
|
3102
3104
|
const {
|
3103
3105
|
host: host$7,
|
@@ -3170,17 +3172,17 @@ const TextAreaClass = compose(
|
|
3170
3172
|
${resetInputCursor('vaadin-text-area')}
|
3171
3173
|
`,
|
3172
3174
|
excludeAttrsSync: ['tabindex'],
|
3173
|
-
componentName: componentName$
|
3175
|
+
componentName: componentName$k,
|
3174
3176
|
})
|
3175
3177
|
);
|
3176
3178
|
|
3177
|
-
customElements.define(componentName$
|
3179
|
+
customElements.define(componentName$k, TextAreaClass);
|
3178
3180
|
|
3179
3181
|
const observedAttributes$3 = ['src', 'alt'];
|
3180
3182
|
|
3181
|
-
const componentName$
|
3183
|
+
const componentName$j = getComponentName('image');
|
3182
3184
|
|
3183
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3185
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$j, baseSelector: ':host > img' });
|
3184
3186
|
class RawImage extends BaseClass$1 {
|
3185
3187
|
static get observedAttributes() {
|
3186
3188
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3220,9 +3222,9 @@ const ImageClass = compose(
|
|
3220
3222
|
draggableMixin
|
3221
3223
|
)(RawImage);
|
3222
3224
|
|
3223
|
-
customElements.define(componentName$
|
3225
|
+
customElements.define(componentName$j, ImageClass);
|
3224
3226
|
|
3225
|
-
const componentName$
|
3227
|
+
const componentName$i = getComponentName('combo-box');
|
3226
3228
|
|
3227
3229
|
const ComboBoxMixin = (superclass) =>
|
3228
3230
|
class ComboBoxMixinClass extends superclass {
|
@@ -3573,12 +3575,12 @@ const ComboBoxClass = compose(
|
|
3573
3575
|
// and reset items to an empty array, and opening the list box with no items
|
3574
3576
|
// to display.
|
3575
3577
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3576
|
-
componentName: componentName$
|
3578
|
+
componentName: componentName$i,
|
3577
3579
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3578
3580
|
})
|
3579
3581
|
);
|
3580
3582
|
|
3581
|
-
customElements.define(componentName$
|
3583
|
+
customElements.define(componentName$i, ComboBoxClass);
|
3582
3584
|
|
3583
3585
|
var CountryCodes = [
|
3584
3586
|
{
|
@@ -4818,7 +4820,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4818
4820
|
</div>
|
4819
4821
|
`;
|
4820
4822
|
|
4821
|
-
const componentName$
|
4823
|
+
const componentName$h = getComponentName('phone-field-internal');
|
4822
4824
|
|
4823
4825
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4824
4826
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4830,7 +4832,7 @@ const mapAttrs$1 = {
|
|
4830
4832
|
|
4831
4833
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4832
4834
|
|
4833
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4835
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
|
4834
4836
|
|
4835
4837
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4836
4838
|
static get observedAttributes() {
|
@@ -5002,12 +5004,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
5002
5004
|
}
|
5003
5005
|
};
|
5004
5006
|
|
5005
|
-
customElements.define(componentName$
|
5007
|
+
customElements.define(componentName$h, PhoneFieldInternal$1);
|
5006
5008
|
|
5007
5009
|
const textVars$1 = TextFieldClass.cssVarList;
|
5008
5010
|
const comboVars = ComboBoxClass.cssVarList;
|
5009
5011
|
|
5010
|
-
const componentName$
|
5012
|
+
const componentName$g = getComponentName('phone-field');
|
5011
5013
|
|
5012
5014
|
const customMixin$4 = (superclass) =>
|
5013
5015
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5021,15 +5023,15 @@ const customMixin$4 = (superclass) =>
|
|
5021
5023
|
const template = document.createElement('template');
|
5022
5024
|
|
5023
5025
|
template.innerHTML = `
|
5024
|
-
<${componentName$
|
5026
|
+
<${componentName$h}
|
5025
5027
|
tabindex="-1"
|
5026
5028
|
slot="input"
|
5027
|
-
></${componentName$
|
5029
|
+
></${componentName$h}>
|
5028
5030
|
`;
|
5029
5031
|
|
5030
5032
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5031
5033
|
|
5032
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5034
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
5033
5035
|
|
5034
5036
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5035
5037
|
includeAttrs: [
|
@@ -5224,17 +5226,17 @@ const PhoneFieldClass = compose(
|
|
5224
5226
|
}
|
5225
5227
|
`,
|
5226
5228
|
excludeAttrsSync: ['tabindex'],
|
5227
|
-
componentName: componentName$
|
5229
|
+
componentName: componentName$g,
|
5228
5230
|
})
|
5229
5231
|
);
|
5230
5232
|
|
5231
|
-
customElements.define(componentName$
|
5233
|
+
customElements.define(componentName$g, PhoneFieldClass);
|
5232
5234
|
|
5233
5235
|
const getCountryByCodeId = (countryCode) => {
|
5234
5236
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5235
5237
|
};
|
5236
5238
|
|
5237
|
-
const componentName$
|
5239
|
+
const componentName$f = getComponentName('phone-field-internal-input-box');
|
5238
5240
|
|
5239
5241
|
const observedAttributes$2 = [
|
5240
5242
|
'disabled',
|
@@ -5248,7 +5250,7 @@ const mapAttrs = {
|
|
5248
5250
|
'phone-input-placeholder': 'placeholder',
|
5249
5251
|
};
|
5250
5252
|
|
5251
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5253
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
|
5252
5254
|
|
5253
5255
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5254
5256
|
static get observedAttributes() {
|
@@ -5387,11 +5389,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5387
5389
|
}
|
5388
5390
|
}
|
5389
5391
|
|
5390
|
-
customElements.define(componentName$
|
5392
|
+
customElements.define(componentName$f, PhoneFieldInternal);
|
5391
5393
|
|
5392
5394
|
const textVars = TextFieldClass.cssVarList;
|
5393
5395
|
|
5394
|
-
const componentName$
|
5396
|
+
const componentName$e = getComponentName('phone-input-box-field');
|
5395
5397
|
|
5396
5398
|
const customMixin$3 = (superclass) =>
|
5397
5399
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5405,15 +5407,15 @@ const customMixin$3 = (superclass) =>
|
|
5405
5407
|
const template = document.createElement('template');
|
5406
5408
|
|
5407
5409
|
template.innerHTML = `
|
5408
|
-
<${componentName$
|
5410
|
+
<${componentName$f}
|
5409
5411
|
tabindex="-1"
|
5410
5412
|
slot="input"
|
5411
|
-
></${componentName$
|
5413
|
+
></${componentName$f}>
|
5412
5414
|
`;
|
5413
5415
|
|
5414
5416
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5415
5417
|
|
5416
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5418
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$f);
|
5417
5419
|
|
5418
5420
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5419
5421
|
includeAttrs: [
|
@@ -5545,15 +5547,15 @@ const PhoneFieldInputBoxClass = compose(
|
|
5545
5547
|
}
|
5546
5548
|
`,
|
5547
5549
|
excludeAttrsSync: ['tabindex'],
|
5548
|
-
componentName: componentName$
|
5550
|
+
componentName: componentName$e,
|
5549
5551
|
})
|
5550
5552
|
);
|
5551
5553
|
|
5552
|
-
customElements.define(componentName$
|
5554
|
+
customElements.define(componentName$e, PhoneFieldInputBoxClass);
|
5553
5555
|
|
5554
|
-
const componentName$
|
5556
|
+
const componentName$d = getComponentName('new-password-internal');
|
5555
5557
|
|
5556
|
-
const componentName$
|
5558
|
+
const componentName$c = getComponentName('new-password');
|
5557
5559
|
|
5558
5560
|
const customMixin$2 = (superclass) =>
|
5559
5561
|
class NewPasswordMixinClass extends superclass {
|
@@ -5563,16 +5565,16 @@ const customMixin$2 = (superclass) =>
|
|
5563
5565
|
const template = document.createElement('template');
|
5564
5566
|
|
5565
5567
|
template.innerHTML = `
|
5566
|
-
<${componentName$
|
5568
|
+
<${componentName$d}
|
5567
5569
|
name="new-password"
|
5568
5570
|
tabindex="-1"
|
5569
5571
|
slot="input"
|
5570
|
-
></${componentName$
|
5572
|
+
></${componentName$d}>
|
5571
5573
|
`;
|
5572
5574
|
|
5573
5575
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5574
5576
|
|
5575
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5577
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
5576
5578
|
|
5577
5579
|
forwardAttrs(this, this.inputElement, {
|
5578
5580
|
includeAttrs: [
|
@@ -5671,7 +5673,7 @@ const NewPasswordClass = compose(
|
|
5671
5673
|
},
|
5672
5674
|
`,
|
5673
5675
|
excludeAttrsSync: ['tabindex'],
|
5674
|
-
componentName: componentName$
|
5676
|
+
componentName: componentName$c,
|
5675
5677
|
})
|
5676
5678
|
);
|
5677
5679
|
|
@@ -5696,7 +5698,7 @@ const commonAttrs = [
|
|
5696
5698
|
|
5697
5699
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5698
5700
|
|
5699
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5701
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
|
5700
5702
|
|
5701
5703
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5702
5704
|
static get observedAttributes() {
|
@@ -5856,16 +5858,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5856
5858
|
}
|
5857
5859
|
}
|
5858
5860
|
|
5859
|
-
customElements.define(componentName$
|
5861
|
+
customElements.define(componentName$d, NewPasswordInternal);
|
5860
5862
|
|
5861
|
-
customElements.define(componentName$
|
5863
|
+
customElements.define(componentName$c, NewPasswordClass);
|
5862
5864
|
|
5863
|
-
const componentName$
|
5865
|
+
const componentName$b = getComponentName('recaptcha');
|
5864
5866
|
|
5865
5867
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5866
5868
|
|
5867
5869
|
const BaseClass = createBaseClass({
|
5868
|
-
componentName: componentName$
|
5870
|
+
componentName: componentName$b,
|
5869
5871
|
baseSelector: ':host > div',
|
5870
5872
|
});
|
5871
5873
|
class RawRecaptcha extends BaseClass {
|
@@ -6017,7 +6019,7 @@ class RawRecaptcha extends BaseClass {
|
|
6017
6019
|
|
6018
6020
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6019
6021
|
|
6020
|
-
customElements.define(componentName$
|
6022
|
+
customElements.define(componentName$b, RecaptchaClass);
|
6021
6023
|
|
6022
6024
|
const getFileBase64 = (fileObj) => {
|
6023
6025
|
return new Promise((resolve) => {
|
@@ -6031,7 +6033,7 @@ const getFilename = (fileObj) => {
|
|
6031
6033
|
return fileObj.name.replace(/^.*\\/, '');
|
6032
6034
|
};
|
6033
6035
|
|
6034
|
-
const componentName$
|
6036
|
+
const componentName$a = getComponentName('upload-file');
|
6035
6037
|
|
6036
6038
|
const observedAttributes = [
|
6037
6039
|
'title',
|
@@ -6046,7 +6048,7 @@ const observedAttributes = [
|
|
6046
6048
|
'icon',
|
6047
6049
|
];
|
6048
6050
|
|
6049
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6051
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$a, baseSelector: ':host > div' });
|
6050
6052
|
|
6051
6053
|
class RawUploadFile extends BaseInputClass {
|
6052
6054
|
static get observedAttributes() {
|
@@ -6256,12 +6258,12 @@ const UploadFileClass = compose(
|
|
6256
6258
|
componentNameValidationMixin
|
6257
6259
|
)(RawUploadFile);
|
6258
6260
|
|
6259
|
-
customElements.define(componentName$
|
6261
|
+
customElements.define(componentName$a, UploadFileClass);
|
6260
6262
|
|
6261
|
-
const componentName$
|
6263
|
+
const componentName$9 = getComponentName('button-selection-group-internal');
|
6262
6264
|
|
6263
6265
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6264
|
-
componentName: componentName$
|
6266
|
+
componentName: componentName$9,
|
6265
6267
|
baseSelector: 'slot',
|
6266
6268
|
}) {
|
6267
6269
|
constructor() {
|
@@ -6398,7 +6400,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6398
6400
|
}
|
6399
6401
|
}
|
6400
6402
|
|
6401
|
-
const componentName$
|
6403
|
+
const componentName$8 = getComponentName('button-selection-group');
|
6402
6404
|
|
6403
6405
|
const customMixin$1 = (superclass) =>
|
6404
6406
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -6473,18 +6475,18 @@ const customMixin$1 = (superclass) =>
|
|
6473
6475
|
const template = document.createElement('template');
|
6474
6476
|
|
6475
6477
|
template.innerHTML = `
|
6476
|
-
<${componentName$
|
6478
|
+
<${componentName$9}
|
6477
6479
|
name="button-selection-group"
|
6478
6480
|
slot="input"
|
6479
6481
|
tabindex="-1"
|
6480
6482
|
>
|
6481
6483
|
<slot></slot>
|
6482
|
-
</${componentName$
|
6484
|
+
</${componentName$9}>
|
6483
6485
|
`;
|
6484
6486
|
|
6485
6487
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6486
6488
|
|
6487
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6489
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
6488
6490
|
|
6489
6491
|
forwardAttrs(this, this.inputElement, {
|
6490
6492
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6587,18 +6589,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6587
6589
|
${resetInputCursor('vaadin-text-field')}
|
6588
6590
|
`,
|
6589
6591
|
excludeAttrsSync: ['tabindex'],
|
6590
|
-
componentName: componentName$
|
6592
|
+
componentName: componentName$8,
|
6591
6593
|
})
|
6592
6594
|
);
|
6593
6595
|
|
6594
|
-
customElements.define(componentName$
|
6596
|
+
customElements.define(componentName$9, ButtonSelectionGroupInternalClass);
|
6595
6597
|
|
6596
|
-
customElements.define(componentName$
|
6598
|
+
customElements.define(componentName$8, ButtonSelectionGroupClass);
|
6597
6599
|
|
6598
|
-
const componentName$
|
6600
|
+
const componentName$7 = getComponentName('button-selection-group-item');
|
6599
6601
|
|
6600
6602
|
class RawSelectItem extends createBaseClass({
|
6601
|
-
componentName: componentName$
|
6603
|
+
componentName: componentName$7,
|
6602
6604
|
baseSelector: ':host > descope-button',
|
6603
6605
|
}) {
|
6604
6606
|
get size() {
|
@@ -6692,17 +6694,17 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6692
6694
|
componentNameValidationMixin
|
6693
6695
|
)(RawSelectItem);
|
6694
6696
|
|
6695
|
-
customElements.define(componentName$
|
6697
|
+
customElements.define(componentName$7, ButtonSelectionGroupItemClass);
|
6696
6698
|
|
6697
|
-
const componentName$
|
6699
|
+
const componentName$6 = getComponentName('grid-text-column');
|
6698
6700
|
|
6699
6701
|
class GridTextColumnClass extends GridColumn {}
|
6700
6702
|
|
6701
|
-
customElements.define(componentName$
|
6703
|
+
customElements.define(componentName$6, GridTextColumnClass);
|
6702
6704
|
|
6703
6705
|
/* eslint-disable no-param-reassign */
|
6704
6706
|
|
6705
|
-
const componentName$
|
6707
|
+
const componentName$5 = getComponentName('grid-status-column');
|
6706
6708
|
class GridStatusColumnClass extends GridColumn {
|
6707
6709
|
_defaultRenderer(cell, _col, model) {
|
6708
6710
|
const contentAttr = this.getAttribute('status');
|
@@ -6720,11 +6722,11 @@ class GridStatusColumnClass extends GridColumn {
|
|
6720
6722
|
}
|
6721
6723
|
}
|
6722
6724
|
|
6723
|
-
customElements.define(componentName$
|
6725
|
+
customElements.define(componentName$5, GridStatusColumnClass);
|
6724
6726
|
|
6725
6727
|
/* eslint-disable class-methods-use-this */
|
6726
6728
|
|
6727
|
-
const componentName$
|
6729
|
+
const componentName$4 = getComponentName('grid-selection-column');
|
6728
6730
|
|
6729
6731
|
const createCheckboxEle = () => {
|
6730
6732
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -6779,7 +6781,7 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
6779
6781
|
}
|
6780
6782
|
}
|
6781
6783
|
|
6782
|
-
customElements.define(componentName$
|
6784
|
+
customElements.define(componentName$4, GridSelectionColumnClass);
|
6783
6785
|
|
6784
6786
|
const isValidDataType = (data) => {
|
6785
6787
|
const isValid = Array.isArray(data);
|
@@ -6791,7 +6793,7 @@ const isValidDataType = (data) => {
|
|
6791
6793
|
return isValid;
|
6792
6794
|
};
|
6793
6795
|
|
6794
|
-
const componentName$
|
6796
|
+
const componentName$3 = getComponentName('grid');
|
6795
6797
|
|
6796
6798
|
const GridMixin = (superclass) =>
|
6797
6799
|
class GridMixinClass extends superclass {
|
@@ -6915,9 +6917,16 @@ const GridMixin = (superclass) =>
|
|
6915
6917
|
const itemsIds = new Set(
|
6916
6918
|
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
6917
6919
|
);
|
6918
|
-
|
6920
|
+
|
6921
|
+
const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
6919
6922
|
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
6920
6923
|
);
|
6924
|
+
|
6925
|
+
// we want to update the selected items only if there is a reason,
|
6926
|
+
// to prevent redundant notifications
|
6927
|
+
if (this.grid.selectedItems.length !== newSelectedItems.length) {
|
6928
|
+
this.grid.selectedItems = newSelectedItems;
|
6929
|
+
}
|
6921
6930
|
}
|
6922
6931
|
}
|
6923
6932
|
}
|
@@ -7006,11 +7015,11 @@ const GridClass = compose(
|
|
7006
7015
|
}
|
7007
7016
|
`,
|
7008
7017
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7009
|
-
componentName: componentName$
|
7018
|
+
componentName: componentName$3,
|
7010
7019
|
})
|
7011
7020
|
);
|
7012
7021
|
|
7013
|
-
customElements.define(componentName$
|
7022
|
+
customElements.define(componentName$3, GridClass);
|
7014
7023
|
|
7015
7024
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
7016
7025
|
|
@@ -7338,32 +7347,32 @@ const globals = {
|
|
7338
7347
|
shadow,
|
7339
7348
|
fonts,
|
7340
7349
|
};
|
7341
|
-
const vars$
|
7350
|
+
const vars$u = getThemeVars(globals);
|
7342
7351
|
|
7343
|
-
const globalRefs$
|
7352
|
+
const globalRefs$f = getThemeRefs(globals);
|
7344
7353
|
const compVars$4 = ButtonClass.cssVarList;
|
7345
7354
|
|
7346
7355
|
const mode = {
|
7347
|
-
primary: globalRefs$
|
7348
|
-
secondary: globalRefs$
|
7349
|
-
success: globalRefs$
|
7350
|
-
error: globalRefs$
|
7351
|
-
surface: globalRefs$
|
7356
|
+
primary: globalRefs$f.colors.primary,
|
7357
|
+
secondary: globalRefs$f.colors.secondary,
|
7358
|
+
success: globalRefs$f.colors.success,
|
7359
|
+
error: globalRefs$f.colors.error,
|
7360
|
+
surface: globalRefs$f.colors.surface,
|
7352
7361
|
};
|
7353
7362
|
|
7354
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
7363
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$C);
|
7355
7364
|
|
7356
7365
|
const button = {
|
7357
7366
|
...helperTheme$3,
|
7358
7367
|
|
7359
|
-
[compVars$4.fontFamily]: globalRefs$
|
7368
|
+
[compVars$4.fontFamily]: globalRefs$f.fonts.font1.family,
|
7360
7369
|
|
7361
7370
|
[compVars$4.cursor]: 'pointer',
|
7362
7371
|
[compVars$4.hostHeight]: '3em',
|
7363
7372
|
[compVars$4.hostWidth]: 'auto',
|
7364
7373
|
|
7365
|
-
[compVars$4.borderRadius]: globalRefs$
|
7366
|
-
[compVars$4.borderWidth]: globalRefs$
|
7374
|
+
[compVars$4.borderRadius]: globalRefs$f.radius.sm,
|
7375
|
+
[compVars$4.borderWidth]: globalRefs$f.border.xs,
|
7367
7376
|
[compVars$4.borderStyle]: 'solid',
|
7368
7377
|
[compVars$4.borderColor]: 'transparent',
|
7369
7378
|
|
@@ -7399,10 +7408,10 @@ const button = {
|
|
7399
7408
|
},
|
7400
7409
|
|
7401
7410
|
_disabled: {
|
7402
|
-
[helperVars$3.main]: globalRefs$
|
7403
|
-
[helperVars$3.dark]: globalRefs$
|
7404
|
-
[helperVars$3.light]: globalRefs$
|
7405
|
-
[helperVars$3.contrast]: globalRefs$
|
7411
|
+
[helperVars$3.main]: globalRefs$f.colors.surface.main,
|
7412
|
+
[helperVars$3.dark]: globalRefs$f.colors.surface.dark,
|
7413
|
+
[helperVars$3.light]: globalRefs$f.colors.surface.light,
|
7414
|
+
[helperVars$3.contrast]: globalRefs$f.colors.surface.contrast,
|
7406
7415
|
},
|
7407
7416
|
|
7408
7417
|
variant: {
|
@@ -7444,11 +7453,11 @@ const button = {
|
|
7444
7453
|
},
|
7445
7454
|
|
7446
7455
|
_focused: {
|
7447
|
-
[compVars$4.outlineColor]: globalRefs$
|
7456
|
+
[compVars$4.outlineColor]: globalRefs$f.colors.surface.main,
|
7448
7457
|
},
|
7449
7458
|
};
|
7450
7459
|
|
7451
|
-
const vars$
|
7460
|
+
const vars$t = {
|
7452
7461
|
...compVars$4,
|
7453
7462
|
...helperVars$3,
|
7454
7463
|
};
|
@@ -7456,25 +7465,25 @@ const vars$s = {
|
|
7456
7465
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7457
7466
|
__proto__: null,
|
7458
7467
|
default: button,
|
7459
|
-
vars: vars$
|
7468
|
+
vars: vars$t
|
7460
7469
|
});
|
7461
7470
|
|
7462
|
-
const componentName$
|
7463
|
-
const globalRefs$
|
7471
|
+
const componentName$2 = getComponentName('input-wrapper');
|
7472
|
+
const globalRefs$e = getThemeRefs(globals);
|
7464
7473
|
|
7465
|
-
const [theme$1, refs, vars$
|
7474
|
+
const [theme$1, refs, vars$s] = createHelperVars(
|
7466
7475
|
{
|
7467
|
-
labelTextColor: globalRefs$
|
7468
|
-
valueTextColor: globalRefs$
|
7469
|
-
placeholderTextColor: globalRefs$
|
7476
|
+
labelTextColor: globalRefs$e.colors.surface.contrast,
|
7477
|
+
valueTextColor: globalRefs$e.colors.surface.contrast,
|
7478
|
+
placeholderTextColor: globalRefs$e.colors.surface.main,
|
7470
7479
|
requiredIndicator: "'*'",
|
7471
|
-
errorMessageTextColor: globalRefs$
|
7480
|
+
errorMessageTextColor: globalRefs$e.colors.error.main,
|
7472
7481
|
|
7473
|
-
borderWidth: globalRefs$
|
7474
|
-
borderRadius: globalRefs$
|
7482
|
+
borderWidth: globalRefs$e.border.xs,
|
7483
|
+
borderRadius: globalRefs$e.radius.xs,
|
7475
7484
|
borderColor: 'transparent',
|
7476
7485
|
|
7477
|
-
outlineWidth: globalRefs$
|
7486
|
+
outlineWidth: globalRefs$e.border.sm,
|
7478
7487
|
outlineStyle: 'solid',
|
7479
7488
|
outlineColor: 'transparent',
|
7480
7489
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7485,9 +7494,9 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
7485
7494
|
horizontalPadding: '0.5em',
|
7486
7495
|
verticalPadding: '0.5em',
|
7487
7496
|
|
7488
|
-
backgroundColor: globalRefs$
|
7497
|
+
backgroundColor: globalRefs$e.colors.surface.light,
|
7489
7498
|
|
7490
|
-
fontFamily: globalRefs$
|
7499
|
+
fontFamily: globalRefs$e.fonts.font1.family,
|
7491
7500
|
|
7492
7501
|
size: {
|
7493
7502
|
xs: { fontSize: '12px' },
|
@@ -7501,51 +7510,86 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
7501
7510
|
},
|
7502
7511
|
|
7503
7512
|
_focused: {
|
7504
|
-
outlineColor: globalRefs$
|
7513
|
+
outlineColor: globalRefs$e.colors.surface.main,
|
7505
7514
|
_invalid: {
|
7506
|
-
outlineColor: globalRefs$
|
7515
|
+
outlineColor: globalRefs$e.colors.error.main,
|
7507
7516
|
},
|
7508
7517
|
},
|
7509
7518
|
|
7510
7519
|
_bordered: {
|
7511
|
-
outlineWidth: globalRefs$
|
7512
|
-
borderColor: globalRefs$
|
7520
|
+
outlineWidth: globalRefs$e.border.xs,
|
7521
|
+
borderColor: globalRefs$e.colors.surface.main,
|
7513
7522
|
borderStyle: 'solid',
|
7514
7523
|
_invalid: {
|
7515
|
-
borderColor: globalRefs$
|
7524
|
+
borderColor: globalRefs$e.colors.error.main,
|
7516
7525
|
},
|
7517
7526
|
},
|
7518
7527
|
|
7519
7528
|
_disabled: {
|
7520
|
-
labelTextColor: globalRefs$
|
7521
|
-
borderColor: globalRefs$
|
7522
|
-
valueTextColor: globalRefs$
|
7523
|
-
placeholderTextColor: globalRefs$
|
7524
|
-
backgroundColor: globalRefs$
|
7529
|
+
labelTextColor: globalRefs$e.colors.surface.main,
|
7530
|
+
borderColor: globalRefs$e.colors.surface.main,
|
7531
|
+
valueTextColor: globalRefs$e.colors.surface.dark,
|
7532
|
+
placeholderTextColor: globalRefs$e.colors.surface.dark,
|
7533
|
+
backgroundColor: globalRefs$e.colors.surface.main,
|
7525
7534
|
},
|
7526
7535
|
},
|
7527
|
-
componentName$
|
7536
|
+
componentName$2
|
7528
7537
|
);
|
7529
7538
|
|
7530
7539
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7531
7540
|
__proto__: null,
|
7532
7541
|
default: theme$1,
|
7533
7542
|
refs: refs,
|
7534
|
-
vars: vars$
|
7543
|
+
vars: vars$s
|
7535
7544
|
});
|
7536
7545
|
|
7537
|
-
const vars$
|
7546
|
+
const vars$r = TextFieldClass.cssVarList;
|
7538
7547
|
|
7539
7548
|
const textField = {
|
7549
|
+
[vars$r.hostWidth]: refs.width,
|
7550
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
7551
|
+
[vars$r.fontSize]: refs.fontSize,
|
7552
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
7553
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
7554
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7555
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
7556
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
7557
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
7558
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
7559
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
7560
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
7561
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
7562
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
7563
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7564
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7565
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7566
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7567
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
7568
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7569
|
+
};
|
7570
|
+
|
7571
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7572
|
+
__proto__: null,
|
7573
|
+
default: textField,
|
7574
|
+
textField: textField,
|
7575
|
+
vars: vars$r
|
7576
|
+
});
|
7577
|
+
|
7578
|
+
const globalRefs$d = getThemeRefs(globals);
|
7579
|
+
const vars$q = PasswordClass.cssVarList;
|
7580
|
+
|
7581
|
+
const password = {
|
7540
7582
|
[vars$q.hostWidth]: refs.width,
|
7541
|
-
[vars$q.hostMinWidth]: refs.minWidth,
|
7542
7583
|
[vars$q.fontSize]: refs.fontSize,
|
7543
7584
|
[vars$q.fontFamily]: refs.fontFamily,
|
7544
7585
|
[vars$q.labelTextColor]: refs.labelTextColor,
|
7545
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7546
7586
|
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
7587
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7588
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
7589
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7590
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7547
7591
|
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
7548
|
-
[vars$q.
|
7592
|
+
[vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7549
7593
|
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7550
7594
|
[vars$q.inputBorderStyle]: refs.borderStyle,
|
7551
7595
|
[vars$q.inputBorderColor]: refs.borderColor,
|
@@ -7554,33 +7598,27 @@ const textField = {
|
|
7554
7598
|
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
7555
7599
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7556
7600
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7557
|
-
[vars$q.
|
7558
|
-
[vars$q.
|
7559
|
-
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7601
|
+
[vars$q.revealButtonOffset]: globalRefs$d.spacing.md,
|
7602
|
+
[vars$q.revealButtonSize]: refs.toggleButtonSize,
|
7560
7603
|
};
|
7561
7604
|
|
7562
|
-
var
|
7605
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7563
7606
|
__proto__: null,
|
7564
|
-
default:
|
7565
|
-
textField: textField,
|
7607
|
+
default: password,
|
7566
7608
|
vars: vars$q
|
7567
7609
|
});
|
7568
7610
|
|
7569
|
-
const
|
7570
|
-
const vars$p = PasswordClass.cssVarList;
|
7611
|
+
const vars$p = NumberFieldClass.cssVarList;
|
7571
7612
|
|
7572
|
-
const
|
7613
|
+
const numberField = {
|
7573
7614
|
[vars$p.hostWidth]: refs.width,
|
7615
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
7574
7616
|
[vars$p.fontSize]: refs.fontSize,
|
7575
7617
|
[vars$p.fontFamily]: refs.fontFamily,
|
7576
7618
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
7577
7619
|
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7578
|
-
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7579
|
-
[vars$p.inputHeight]: refs.inputHeight,
|
7580
|
-
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7581
|
-
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7582
7620
|
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7583
|
-
[vars$p.
|
7621
|
+
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
7584
7622
|
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7585
7623
|
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7586
7624
|
[vars$p.inputBorderColor]: refs.borderColor,
|
@@ -7589,19 +7627,21 @@ const password = {
|
|
7589
7627
|
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7590
7628
|
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7591
7629
|
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7592
|
-
[vars$p.
|
7593
|
-
[vars$p.
|
7630
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7631
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7632
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7633
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
7594
7634
|
};
|
7595
7635
|
|
7596
|
-
var
|
7636
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7597
7637
|
__proto__: null,
|
7598
|
-
default:
|
7638
|
+
default: numberField,
|
7599
7639
|
vars: vars$p
|
7600
7640
|
});
|
7601
7641
|
|
7602
|
-
const vars$o =
|
7642
|
+
const vars$o = EmailFieldClass.cssVarList;
|
7603
7643
|
|
7604
|
-
const
|
7644
|
+
const emailField = {
|
7605
7645
|
[vars$o.hostWidth]: refs.width,
|
7606
7646
|
[vars$o.hostMinWidth]: refs.minWidth,
|
7607
7647
|
[vars$o.fontSize]: refs.fontSize,
|
@@ -7609,6 +7649,7 @@ const numberField = {
|
|
7609
7649
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7610
7650
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7611
7651
|
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7652
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7612
7653
|
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
7613
7654
|
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7614
7655
|
[vars$o.inputBorderStyle]: refs.borderStyle,
|
@@ -7619,197 +7660,165 @@ const numberField = {
|
|
7619
7660
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7620
7661
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7621
7662
|
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7622
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7623
7663
|
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
7624
7664
|
[vars$o.inputHeight]: refs.inputHeight,
|
7625
7665
|
};
|
7626
7666
|
|
7627
|
-
var
|
7667
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7628
7668
|
__proto__: null,
|
7629
|
-
default:
|
7669
|
+
default: emailField,
|
7630
7670
|
vars: vars$o
|
7631
7671
|
});
|
7632
7672
|
|
7633
|
-
const
|
7673
|
+
const globalRefs$c = getThemeRefs(globals);
|
7674
|
+
const vars$n = TextAreaClass.cssVarList;
|
7634
7675
|
|
7635
|
-
const
|
7676
|
+
const textArea = {
|
7636
7677
|
[vars$n.hostWidth]: refs.width,
|
7637
7678
|
[vars$n.hostMinWidth]: refs.minWidth,
|
7638
7679
|
[vars$n.fontSize]: refs.fontSize,
|
7639
7680
|
[vars$n.fontFamily]: refs.fontFamily,
|
7640
7681
|
[vars$n.labelTextColor]: refs.labelTextColor,
|
7682
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7641
7683
|
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7684
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7642
7685
|
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7643
|
-
[vars$n.
|
7644
|
-
[vars$n.
|
7686
|
+
[vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7687
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7645
7688
|
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7646
7689
|
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7647
7690
|
[vars$n.inputBorderColor]: refs.borderColor,
|
7648
|
-
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7649
7691
|
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
7650
7692
|
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7651
7693
|
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7652
7694
|
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7653
|
-
[vars$n.
|
7654
|
-
[vars$n.
|
7655
|
-
|
7695
|
+
[vars$n.inputResizeType]: 'vertical',
|
7696
|
+
[vars$n.inputMinHeight]: '5em',
|
7697
|
+
|
7698
|
+
_disabled: {
|
7699
|
+
[vars$n.inputBackgroundColor]: globalRefs$c.colors.surface.light,
|
7700
|
+
},
|
7701
|
+
|
7702
|
+
_readonly: {
|
7703
|
+
[vars$n.inputResizeType]: 'none',
|
7704
|
+
},
|
7656
7705
|
};
|
7657
7706
|
|
7658
|
-
var
|
7707
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7659
7708
|
__proto__: null,
|
7660
|
-
default:
|
7709
|
+
default: textArea,
|
7661
7710
|
vars: vars$n
|
7662
7711
|
});
|
7663
7712
|
|
7664
|
-
const
|
7665
|
-
const
|
7713
|
+
const vars$m = CheckboxClass.cssVarList;
|
7714
|
+
const checkboxSize = '1.35em';
|
7666
7715
|
|
7667
|
-
const
|
7716
|
+
const checkbox = {
|
7668
7717
|
[vars$m.hostWidth]: refs.width,
|
7669
|
-
[vars$m.hostMinWidth]: refs.minWidth,
|
7670
7718
|
[vars$m.fontSize]: refs.fontSize,
|
7671
7719
|
[vars$m.fontFamily]: refs.fontFamily,
|
7672
7720
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
7673
7721
|
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7722
|
+
[vars$m.labelFontWeight]: '400',
|
7723
|
+
[vars$m.labelLineHeight]: checkboxSize,
|
7724
|
+
[vars$m.labelSpacing]: '1em',
|
7674
7725
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7675
|
-
[vars$m.
|
7676
|
-
[vars$m.
|
7677
|
-
[vars$m.
|
7726
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
7727
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7728
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7729
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7678
7730
|
[vars$m.inputBorderRadius]: refs.borderRadius,
|
7731
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
7679
7732
|
[vars$m.inputBorderWidth]: refs.borderWidth,
|
7680
7733
|
[vars$m.inputBorderStyle]: refs.borderStyle,
|
7681
|
-
[vars$m.
|
7682
|
-
[vars$m.
|
7683
|
-
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7684
|
-
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7685
|
-
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7686
|
-
[vars$m.inputResizeType]: 'vertical',
|
7687
|
-
[vars$m.inputMinHeight]: '5em',
|
7734
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
7735
|
+
[vars$m.inputSize]: checkboxSize,
|
7688
7736
|
|
7689
|
-
|
7690
|
-
[vars$m.
|
7737
|
+
_checked: {
|
7738
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
7691
7739
|
},
|
7692
7740
|
|
7693
|
-
|
7694
|
-
[vars$m.
|
7741
|
+
_disabled: {
|
7742
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
7695
7743
|
},
|
7696
7744
|
};
|
7697
7745
|
|
7698
|
-
var
|
7746
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7699
7747
|
__proto__: null,
|
7700
|
-
default:
|
7748
|
+
default: checkbox,
|
7701
7749
|
vars: vars$m
|
7702
7750
|
});
|
7703
7751
|
|
7704
|
-
const
|
7705
|
-
const
|
7752
|
+
const knobMargin = '2px';
|
7753
|
+
const checkboxHeight = '1.25em';
|
7706
7754
|
|
7707
|
-
const
|
7755
|
+
const globalRefs$b = getThemeRefs(globals);
|
7756
|
+
const vars$l = SwitchToggleClass.cssVarList;
|
7757
|
+
|
7758
|
+
const switchToggle = {
|
7708
7759
|
[vars$l.hostWidth]: refs.width,
|
7709
7760
|
[vars$l.fontSize]: refs.fontSize,
|
7710
7761
|
[vars$l.fontFamily]: refs.fontFamily,
|
7711
|
-
|
7712
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7713
|
-
[vars$l.labelFontWeight]: '400',
|
7714
|
-
[vars$l.labelLineHeight]: checkboxSize,
|
7715
|
-
[vars$l.labelSpacing]: '1em',
|
7716
|
-
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7762
|
+
|
7717
7763
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7718
7764
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7719
7765
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7720
7766
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7721
|
-
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7722
|
-
[vars$l.inputBorderColor]: refs.borderColor,
|
7723
|
-
[vars$l.inputBorderWidth]: refs.borderWidth,
|
7724
|
-
[vars$l.inputBorderStyle]: refs.borderStyle,
|
7725
|
-
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
7726
|
-
[vars$l.inputSize]: checkboxSize,
|
7727
|
-
|
7728
|
-
_checked: {
|
7729
|
-
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
7730
|
-
},
|
7731
|
-
|
7732
|
-
_disabled: {
|
7733
|
-
[vars$l.labelTextColor]: refs.labelTextColor,
|
7734
|
-
},
|
7735
|
-
};
|
7736
|
-
|
7737
|
-
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7738
|
-
__proto__: null,
|
7739
|
-
default: checkbox,
|
7740
|
-
vars: vars$l
|
7741
|
-
});
|
7742
7767
|
|
7743
|
-
|
7744
|
-
|
7768
|
+
[vars$l.trackBorderStyle]: refs.borderStyle,
|
7769
|
+
[vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7770
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
7771
|
+
[vars$l.trackBackgroundColor]: 'none',
|
7772
|
+
[vars$l.trackBorderRadius]: globalRefs$b.radius.md,
|
7773
|
+
[vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7774
|
+
[vars$l.trackHeight]: checkboxHeight,
|
7775
|
+
|
7776
|
+
[vars$l.knobSize]: `calc(1em - ${knobMargin})`,
|
7777
|
+
[vars$l.knobRadius]: '50%',
|
7778
|
+
[vars$l.knobTopOffset]: '1px',
|
7779
|
+
[vars$l.knobLeftOffset]: knobMargin,
|
7780
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
7781
|
+
[vars$l.knobTransitionDuration]: '0.3s',
|
7745
7782
|
|
7746
|
-
|
7747
|
-
|
7748
|
-
|
7749
|
-
|
7750
|
-
[vars$
|
7751
|
-
[vars$
|
7752
|
-
[vars$k.fontFamily]: refs.fontFamily,
|
7753
|
-
|
7754
|
-
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
7755
|
-
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7756
|
-
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7757
|
-
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7758
|
-
|
7759
|
-
[vars$k.trackBorderStyle]: refs.borderStyle,
|
7760
|
-
[vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7761
|
-
[vars$k.trackBorderColor]: refs.borderColor,
|
7762
|
-
[vars$k.trackBackgroundColor]: 'none',
|
7763
|
-
[vars$k.trackBorderRadius]: globalRefs$a.radius.md,
|
7764
|
-
[vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7765
|
-
[vars$k.trackHeight]: checkboxHeight,
|
7766
|
-
|
7767
|
-
[vars$k.knobSize]: `calc(1em - ${knobMargin})`,
|
7768
|
-
[vars$k.knobRadius]: '50%',
|
7769
|
-
[vars$k.knobTopOffset]: '1px',
|
7770
|
-
[vars$k.knobLeftOffset]: knobMargin,
|
7771
|
-
[vars$k.knobColor]: refs.valueTextColor,
|
7772
|
-
[vars$k.knobTransitionDuration]: '0.3s',
|
7773
|
-
|
7774
|
-
[vars$k.labelTextColor]: refs.labelTextColor,
|
7775
|
-
[vars$k.labelFontWeight]: '400',
|
7776
|
-
[vars$k.labelLineHeight]: '1.35em',
|
7777
|
-
[vars$k.labelSpacing]: '1em',
|
7778
|
-
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
7779
|
-
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
7783
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7784
|
+
[vars$l.labelFontWeight]: '400',
|
7785
|
+
[vars$l.labelLineHeight]: '1.35em',
|
7786
|
+
[vars$l.labelSpacing]: '1em',
|
7787
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7788
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7780
7789
|
|
7781
7790
|
_checked: {
|
7782
|
-
[vars$
|
7783
|
-
[vars$
|
7784
|
-
[vars$
|
7785
|
-
[vars$
|
7786
|
-
[vars$
|
7791
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
7792
|
+
[vars$l.trackBackgroundColor]: refs.backgroundColor,
|
7793
|
+
[vars$l.knobLeftOffset]: `calc(100% - var(${vars$l.knobSize}) - ${knobMargin})`,
|
7794
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
7795
|
+
[vars$l.knobTextColor]: refs.valueTextColor,
|
7787
7796
|
},
|
7788
7797
|
|
7789
7798
|
_disabled: {
|
7790
|
-
[vars$
|
7791
|
-
[vars$
|
7792
|
-
[vars$
|
7793
|
-
[vars$
|
7799
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
7800
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.surface.main,
|
7801
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
7802
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7794
7803
|
_checked: {
|
7795
|
-
[vars$
|
7796
|
-
[vars$
|
7804
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
7805
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
7797
7806
|
},
|
7798
7807
|
},
|
7799
7808
|
|
7800
7809
|
_invalid: {
|
7801
|
-
[vars$
|
7802
|
-
[vars$
|
7810
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
|
7811
|
+
[vars$l.knobColor]: globalRefs$b.colors.error.main,
|
7803
7812
|
},
|
7804
7813
|
};
|
7805
7814
|
|
7806
7815
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7807
7816
|
__proto__: null,
|
7808
7817
|
default: switchToggle,
|
7809
|
-
vars: vars$
|
7818
|
+
vars: vars$l
|
7810
7819
|
});
|
7811
7820
|
|
7812
|
-
const globalRefs$
|
7821
|
+
const globalRefs$a = getThemeRefs(globals);
|
7813
7822
|
|
7814
7823
|
const compVars$3 = ContainerClass.cssVarList;
|
7815
7824
|
|
@@ -7831,18 +7840,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7831
7840
|
horizontalAlignment,
|
7832
7841
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7833
7842
|
},
|
7834
|
-
componentName$
|
7843
|
+
componentName$w
|
7835
7844
|
);
|
7836
7845
|
|
7837
|
-
const { shadowColor } = helperRefs$2;
|
7846
|
+
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
7838
7847
|
|
7839
7848
|
const container = {
|
7840
7849
|
...helperTheme$2,
|
7841
7850
|
|
7842
7851
|
[compVars$3.hostWidth]: '100%',
|
7843
7852
|
[compVars$3.boxShadow]: 'none',
|
7844
|
-
[compVars$3.backgroundColor]: globalRefs$
|
7845
|
-
[compVars$3.color]: globalRefs$
|
7853
|
+
[compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
|
7854
|
+
[compVars$3.color]: globalRefs$a.colors.surface.contrast,
|
7846
7855
|
[compVars$3.borderRadius]: '0px',
|
7847
7856
|
|
7848
7857
|
verticalPadding: {
|
@@ -7889,34 +7898,34 @@ const container = {
|
|
7889
7898
|
|
7890
7899
|
shadow: {
|
7891
7900
|
sm: {
|
7892
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7901
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
|
7893
7902
|
},
|
7894
7903
|
md: {
|
7895
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7904
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
|
7896
7905
|
},
|
7897
7906
|
lg: {
|
7898
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7907
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
|
7899
7908
|
},
|
7900
7909
|
xl: {
|
7901
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7910
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
|
7902
7911
|
},
|
7903
7912
|
'2xl': {
|
7904
7913
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
7905
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7914
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
|
7906
7915
|
},
|
7907
7916
|
},
|
7908
7917
|
|
7909
7918
|
borderRadius: {
|
7910
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
7911
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
7912
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
7913
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
7914
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
7915
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
7919
|
+
sm: { [compVars$3.borderRadius]: globalRefs$a.radius.sm },
|
7920
|
+
md: { [compVars$3.borderRadius]: globalRefs$a.radius.md },
|
7921
|
+
lg: { [compVars$3.borderRadius]: globalRefs$a.radius.lg },
|
7922
|
+
xl: { [compVars$3.borderRadius]: globalRefs$a.radius.xl },
|
7923
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$a.radius['2xl'] },
|
7924
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$a.radius['3xl'] },
|
7916
7925
|
},
|
7917
7926
|
};
|
7918
7927
|
|
7919
|
-
const vars$
|
7928
|
+
const vars$k = {
|
7920
7929
|
...compVars$3,
|
7921
7930
|
...helperVars$2,
|
7922
7931
|
};
|
@@ -7924,152 +7933,152 @@ const vars$j = {
|
|
7924
7933
|
var container$1 = /*#__PURE__*/Object.freeze({
|
7925
7934
|
__proto__: null,
|
7926
7935
|
default: container,
|
7927
|
-
vars: vars$
|
7936
|
+
vars: vars$k
|
7928
7937
|
});
|
7929
7938
|
|
7930
|
-
const vars$
|
7939
|
+
const vars$j = LogoClass.cssVarList;
|
7931
7940
|
|
7932
7941
|
const logo$1 = {
|
7933
|
-
[vars$
|
7942
|
+
[vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
7934
7943
|
};
|
7935
7944
|
|
7936
7945
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
7937
7946
|
__proto__: null,
|
7938
7947
|
default: logo$1,
|
7939
|
-
vars: vars$
|
7948
|
+
vars: vars$j
|
7940
7949
|
});
|
7941
7950
|
|
7942
|
-
const vars$
|
7951
|
+
const vars$i = TotpImageClass.cssVarList;
|
7943
7952
|
|
7944
7953
|
const logo = {
|
7945
|
-
[vars$
|
7954
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
7946
7955
|
};
|
7947
7956
|
|
7948
7957
|
var totpImage = /*#__PURE__*/Object.freeze({
|
7949
7958
|
__proto__: null,
|
7950
7959
|
default: logo,
|
7951
|
-
vars: vars$
|
7960
|
+
vars: vars$i
|
7952
7961
|
});
|
7953
7962
|
|
7954
|
-
const globalRefs$
|
7955
|
-
const vars$
|
7963
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7964
|
+
const vars$h = TextClass.cssVarList;
|
7956
7965
|
|
7957
7966
|
const text = {
|
7958
|
-
[vars$
|
7959
|
-
[vars$
|
7960
|
-
[vars$
|
7967
|
+
[vars$h.textLineHeight]: '1.35em',
|
7968
|
+
[vars$h.textAlign]: 'left',
|
7969
|
+
[vars$h.textColor]: globalRefs$9.colors.surface.dark,
|
7961
7970
|
variant: {
|
7962
7971
|
h1: {
|
7963
|
-
[vars$
|
7964
|
-
[vars$
|
7965
|
-
[vars$
|
7972
|
+
[vars$h.fontSize]: globalRefs$9.typography.h1.size,
|
7973
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h1.weight,
|
7974
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h1.font,
|
7966
7975
|
},
|
7967
7976
|
h2: {
|
7968
|
-
[vars$
|
7969
|
-
[vars$
|
7970
|
-
[vars$
|
7977
|
+
[vars$h.fontSize]: globalRefs$9.typography.h2.size,
|
7978
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h2.weight,
|
7979
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h2.font,
|
7971
7980
|
},
|
7972
7981
|
h3: {
|
7973
|
-
[vars$
|
7974
|
-
[vars$
|
7975
|
-
[vars$
|
7982
|
+
[vars$h.fontSize]: globalRefs$9.typography.h3.size,
|
7983
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h3.weight,
|
7984
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h3.font,
|
7976
7985
|
},
|
7977
7986
|
subtitle1: {
|
7978
|
-
[vars$
|
7979
|
-
[vars$
|
7980
|
-
[vars$
|
7987
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle1.size,
|
7988
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle1.weight,
|
7989
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle1.font,
|
7981
7990
|
},
|
7982
7991
|
subtitle2: {
|
7983
|
-
[vars$
|
7984
|
-
[vars$
|
7985
|
-
[vars$
|
7992
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle2.size,
|
7993
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle2.weight,
|
7994
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle2.font,
|
7986
7995
|
},
|
7987
7996
|
body1: {
|
7988
|
-
[vars$
|
7989
|
-
[vars$
|
7990
|
-
[vars$
|
7997
|
+
[vars$h.fontSize]: globalRefs$9.typography.body1.size,
|
7998
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body1.weight,
|
7999
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body1.font,
|
7991
8000
|
},
|
7992
8001
|
body2: {
|
7993
|
-
[vars$
|
7994
|
-
[vars$
|
7995
|
-
[vars$
|
8002
|
+
[vars$h.fontSize]: globalRefs$9.typography.body2.size,
|
8003
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body2.weight,
|
8004
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body2.font,
|
7996
8005
|
},
|
7997
8006
|
},
|
7998
8007
|
|
7999
8008
|
mode: {
|
8000
8009
|
primary: {
|
8001
|
-
[vars$
|
8010
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
8002
8011
|
},
|
8003
8012
|
secondary: {
|
8004
|
-
[vars$
|
8013
|
+
[vars$h.textColor]: globalRefs$9.colors.secondary.main,
|
8005
8014
|
},
|
8006
8015
|
error: {
|
8007
|
-
[vars$
|
8016
|
+
[vars$h.textColor]: globalRefs$9.colors.error.main,
|
8008
8017
|
},
|
8009
8018
|
success: {
|
8010
|
-
[vars$
|
8019
|
+
[vars$h.textColor]: globalRefs$9.colors.success.main,
|
8011
8020
|
},
|
8012
8021
|
},
|
8013
8022
|
|
8014
8023
|
textAlign: {
|
8015
|
-
right: { [vars$
|
8016
|
-
left: { [vars$
|
8017
|
-
center: { [vars$
|
8024
|
+
right: { [vars$h.textAlign]: 'right' },
|
8025
|
+
left: { [vars$h.textAlign]: 'left' },
|
8026
|
+
center: { [vars$h.textAlign]: 'center' },
|
8018
8027
|
},
|
8019
8028
|
|
8020
8029
|
_fullWidth: {
|
8021
|
-
[vars$
|
8030
|
+
[vars$h.hostWidth]: '100%',
|
8022
8031
|
},
|
8023
8032
|
|
8024
8033
|
_italic: {
|
8025
|
-
[vars$
|
8034
|
+
[vars$h.fontStyle]: 'italic',
|
8026
8035
|
},
|
8027
8036
|
|
8028
8037
|
_uppercase: {
|
8029
|
-
[vars$
|
8038
|
+
[vars$h.textTransform]: 'uppercase',
|
8030
8039
|
},
|
8031
8040
|
|
8032
8041
|
_lowercase: {
|
8033
|
-
[vars$
|
8042
|
+
[vars$h.textTransform]: 'lowercase',
|
8034
8043
|
},
|
8035
8044
|
};
|
8036
8045
|
|
8037
8046
|
var text$1 = /*#__PURE__*/Object.freeze({
|
8038
8047
|
__proto__: null,
|
8039
8048
|
default: text,
|
8040
|
-
vars: vars$
|
8049
|
+
vars: vars$h
|
8041
8050
|
});
|
8042
8051
|
|
8043
|
-
const globalRefs$
|
8044
|
-
const vars$
|
8052
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8053
|
+
const vars$g = LinkClass.cssVarList;
|
8045
8054
|
|
8046
8055
|
const link = {
|
8047
|
-
[vars$
|
8056
|
+
[vars$g.cursor]: 'pointer',
|
8048
8057
|
|
8049
|
-
[vars$
|
8058
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
8050
8059
|
|
8051
8060
|
textAlign: {
|
8052
|
-
right: { [vars$
|
8053
|
-
left: { [vars$
|
8054
|
-
center: { [vars$
|
8061
|
+
right: { [vars$g.textAlign]: 'right' },
|
8062
|
+
left: { [vars$g.textAlign]: 'left' },
|
8063
|
+
center: { [vars$g.textAlign]: 'center' },
|
8055
8064
|
},
|
8056
8065
|
|
8057
8066
|
_fullWidth: {
|
8058
|
-
[vars$
|
8067
|
+
[vars$g.hostWidth]: '100%',
|
8059
8068
|
},
|
8060
8069
|
|
8061
8070
|
mode: {
|
8062
8071
|
primary: {
|
8063
|
-
[vars$
|
8072
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
8064
8073
|
},
|
8065
8074
|
secondary: {
|
8066
|
-
[vars$
|
8075
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
8067
8076
|
},
|
8068
8077
|
error: {
|
8069
|
-
[vars$
|
8078
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
8070
8079
|
},
|
8071
8080
|
success: {
|
8072
|
-
[vars$
|
8081
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
8073
8082
|
},
|
8074
8083
|
},
|
8075
8084
|
};
|
@@ -8077,10 +8086,10 @@ const link = {
|
|
8077
8086
|
var link$1 = /*#__PURE__*/Object.freeze({
|
8078
8087
|
__proto__: null,
|
8079
8088
|
default: link,
|
8080
|
-
vars: vars$
|
8089
|
+
vars: vars$g
|
8081
8090
|
});
|
8082
8091
|
|
8083
|
-
const globalRefs$
|
8092
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8084
8093
|
const compVars$2 = DividerClass.cssVarList;
|
8085
8094
|
|
8086
8095
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -8088,7 +8097,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8088
8097
|
thickness: '2px',
|
8089
8098
|
spacing: '10px',
|
8090
8099
|
},
|
8091
|
-
componentName$
|
8100
|
+
componentName$v
|
8092
8101
|
);
|
8093
8102
|
|
8094
8103
|
const divider = {
|
@@ -8098,7 +8107,7 @@ const divider = {
|
|
8098
8107
|
[compVars$2.flexDirection]: 'row',
|
8099
8108
|
[compVars$2.alignSelf]: 'stretch',
|
8100
8109
|
[compVars$2.hostWidth]: '100%',
|
8101
|
-
[compVars$2.stripeColor]: globalRefs$
|
8110
|
+
[compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
|
8102
8111
|
[compVars$2.stripeColorOpacity]: '0.5',
|
8103
8112
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8104
8113
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -8117,7 +8126,7 @@ const divider = {
|
|
8117
8126
|
},
|
8118
8127
|
};
|
8119
8128
|
|
8120
|
-
const vars$
|
8129
|
+
const vars$f = {
|
8121
8130
|
...compVars$2,
|
8122
8131
|
...helperVars$1,
|
8123
8132
|
};
|
@@ -8125,99 +8134,99 @@ const vars$e = {
|
|
8125
8134
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
8126
8135
|
__proto__: null,
|
8127
8136
|
default: divider,
|
8128
|
-
vars: vars$
|
8137
|
+
vars: vars$f
|
8129
8138
|
});
|
8130
8139
|
|
8131
|
-
const vars$
|
8140
|
+
const vars$e = PasscodeClass.cssVarList;
|
8132
8141
|
|
8133
8142
|
const passcode = {
|
8134
|
-
[vars$
|
8135
|
-
[vars$
|
8136
|
-
[vars$
|
8137
|
-
[vars$
|
8138
|
-
[vars$
|
8139
|
-
[vars$
|
8140
|
-
[vars$
|
8141
|
-
[vars$
|
8142
|
-
[vars$
|
8143
|
-
[vars$
|
8144
|
-
[vars$
|
8145
|
-
[vars$
|
8146
|
-
[vars$
|
8147
|
-
[vars$
|
8143
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
8144
|
+
[vars$e.fontSize]: refs.fontSize,
|
8145
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
8146
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
8147
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
8148
|
+
[vars$e.digitValueTextColor]: refs.valueTextColor,
|
8149
|
+
[vars$e.digitPadding]: '0',
|
8150
|
+
[vars$e.digitTextAlign]: 'center',
|
8151
|
+
[vars$e.digitSpacing]: '4px',
|
8152
|
+
[vars$e.hostWidth]: refs.width,
|
8153
|
+
[vars$e.digitOutlineColor]: 'transparent',
|
8154
|
+
[vars$e.digitOutlineWidth]: refs.outlineWidth,
|
8155
|
+
[vars$e.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8156
|
+
[vars$e.digitSize]: refs.inputHeight,
|
8148
8157
|
|
8149
8158
|
_hideCursor: {
|
8150
|
-
[vars$
|
8159
|
+
[vars$e.digitCaretTextColor]: 'transparent',
|
8151
8160
|
},
|
8152
8161
|
};
|
8153
8162
|
|
8154
8163
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8155
8164
|
__proto__: null,
|
8156
8165
|
default: passcode,
|
8157
|
-
vars: vars$
|
8166
|
+
vars: vars$e
|
8158
8167
|
});
|
8159
8168
|
|
8160
|
-
const globalRefs$
|
8161
|
-
const vars$
|
8169
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8170
|
+
const vars$d = LoaderLinearClass.cssVarList;
|
8162
8171
|
|
8163
8172
|
const loaderLinear = {
|
8164
|
-
[vars$
|
8165
|
-
[vars$
|
8173
|
+
[vars$d.hostDisplay]: 'inline-block',
|
8174
|
+
[vars$d.hostWidth]: '100%',
|
8166
8175
|
|
8167
|
-
[vars$
|
8168
|
-
[vars$
|
8176
|
+
[vars$d.barColor]: globalRefs$6.colors.surface.contrast,
|
8177
|
+
[vars$d.barWidth]: '20%',
|
8169
8178
|
|
8170
|
-
[vars$
|
8171
|
-
[vars$
|
8179
|
+
[vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
|
8180
|
+
[vars$d.barBorderRadius]: '4px',
|
8172
8181
|
|
8173
|
-
[vars$
|
8174
|
-
[vars$
|
8175
|
-
[vars$
|
8176
|
-
[vars$
|
8182
|
+
[vars$d.animationDuration]: '2s',
|
8183
|
+
[vars$d.animationTimingFunction]: 'linear',
|
8184
|
+
[vars$d.animationIterationCount]: 'infinite',
|
8185
|
+
[vars$d.verticalPadding]: '0.25em',
|
8177
8186
|
|
8178
8187
|
size: {
|
8179
|
-
xs: { [vars$
|
8180
|
-
sm: { [vars$
|
8181
|
-
md: { [vars$
|
8182
|
-
lg: { [vars$
|
8188
|
+
xs: { [vars$d.barHeight]: '2px' },
|
8189
|
+
sm: { [vars$d.barHeight]: '4px' },
|
8190
|
+
md: { [vars$d.barHeight]: '6px' },
|
8191
|
+
lg: { [vars$d.barHeight]: '8px' },
|
8183
8192
|
},
|
8184
8193
|
|
8185
8194
|
mode: {
|
8186
8195
|
primary: {
|
8187
|
-
[vars$
|
8196
|
+
[vars$d.barColor]: globalRefs$6.colors.primary.main,
|
8188
8197
|
},
|
8189
8198
|
secondary: {
|
8190
|
-
[vars$
|
8199
|
+
[vars$d.barColor]: globalRefs$6.colors.secondary.main,
|
8191
8200
|
},
|
8192
8201
|
},
|
8193
8202
|
|
8194
8203
|
_hidden: {
|
8195
|
-
[vars$
|
8204
|
+
[vars$d.hostDisplay]: 'none',
|
8196
8205
|
},
|
8197
8206
|
};
|
8198
8207
|
|
8199
8208
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8200
8209
|
__proto__: null,
|
8201
8210
|
default: loaderLinear,
|
8202
|
-
vars: vars$
|
8211
|
+
vars: vars$d
|
8203
8212
|
});
|
8204
8213
|
|
8205
|
-
const globalRefs$
|
8214
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8206
8215
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
8207
8216
|
|
8208
8217
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8209
8218
|
{
|
8210
|
-
spinnerColor: globalRefs$
|
8219
|
+
spinnerColor: globalRefs$5.colors.surface.contrast,
|
8211
8220
|
mode: {
|
8212
8221
|
primary: {
|
8213
|
-
spinnerColor: globalRefs$
|
8222
|
+
spinnerColor: globalRefs$5.colors.primary.main,
|
8214
8223
|
},
|
8215
8224
|
secondary: {
|
8216
|
-
spinnerColor: globalRefs$
|
8225
|
+
spinnerColor: globalRefs$5.colors.secondary.main,
|
8217
8226
|
},
|
8218
8227
|
},
|
8219
8228
|
},
|
8220
|
-
componentName$
|
8229
|
+
componentName$x
|
8221
8230
|
);
|
8222
8231
|
|
8223
8232
|
const loaderRadial = {
|
@@ -8246,7 +8255,7 @@ const loaderRadial = {
|
|
8246
8255
|
[compVars$1.hostDisplay]: 'none',
|
8247
8256
|
},
|
8248
8257
|
};
|
8249
|
-
const vars$
|
8258
|
+
const vars$c = {
|
8250
8259
|
...compVars$1,
|
8251
8260
|
...helperVars,
|
8252
8261
|
};
|
@@ -8254,73 +8263,108 @@ const vars$b = {
|
|
8254
8263
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
8255
8264
|
__proto__: null,
|
8256
8265
|
default: loaderRadial,
|
8257
|
-
vars: vars$
|
8266
|
+
vars: vars$c
|
8258
8267
|
});
|
8259
8268
|
|
8260
|
-
const globalRefs$
|
8261
|
-
const vars$
|
8269
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8270
|
+
const vars$b = ComboBoxClass.cssVarList;
|
8262
8271
|
|
8263
8272
|
const comboBox = {
|
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$
|
8279
|
-
[vars$
|
8280
|
-
[vars$
|
8281
|
-
[vars$
|
8282
|
-
[vars$
|
8283
|
-
[vars$
|
8284
|
-
[vars$
|
8285
|
-
[vars$
|
8286
|
-
[vars$
|
8273
|
+
[vars$b.hostWidth]: refs.width,
|
8274
|
+
[vars$b.fontSize]: refs.fontSize,
|
8275
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
8276
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
8277
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
8278
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
8279
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
8280
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
8281
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
8282
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
8283
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
8284
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
8285
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
8286
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
8287
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
8288
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8289
|
+
[vars$b.inputBackgroundColor]: refs.backgroundColor,
|
8290
|
+
[vars$b.inputHorizontalPadding]: refs.horizontalPadding,
|
8291
|
+
[vars$b.inputHeight]: refs.inputHeight,
|
8292
|
+
[vars$b.inputDropdownButtonColor]: globalRefs$4.colors.surface.contrast,
|
8293
|
+
[vars$b.inputDropdownButtonCursor]: 'pointer',
|
8294
|
+
[vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8295
|
+
[vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
8287
8296
|
|
8288
8297
|
_readonly: {
|
8289
|
-
[vars$
|
8298
|
+
[vars$b.inputDropdownButtonCursor]: 'default',
|
8290
8299
|
},
|
8291
8300
|
|
8292
8301
|
// Overlay theme exposed via the component:
|
8293
|
-
[vars$
|
8294
|
-
[vars$
|
8295
|
-
[vars$
|
8296
|
-
[vars$
|
8302
|
+
[vars$b.overlayFontSize]: refs.fontSize,
|
8303
|
+
[vars$b.overlayFontFamily]: refs.fontFamily,
|
8304
|
+
[vars$b.overlayCursor]: 'pointer',
|
8305
|
+
[vars$b.overlayItemBoxShadow]: 'none',
|
8297
8306
|
|
8298
8307
|
// Overlay direct theme:
|
8299
|
-
[vars$
|
8300
|
-
[vars$
|
8308
|
+
[vars$b.overlay.minHeight]: '400px',
|
8309
|
+
[vars$b.overlay.margin]: '0',
|
8301
8310
|
};
|
8302
8311
|
|
8303
8312
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
8304
8313
|
__proto__: null,
|
8305
8314
|
comboBox: comboBox,
|
8306
8315
|
default: comboBox,
|
8307
|
-
vars: vars$
|
8316
|
+
vars: vars$b
|
8308
8317
|
});
|
8309
8318
|
|
8310
|
-
const vars$
|
8319
|
+
const vars$a = ImageClass.cssVarList;
|
8311
8320
|
|
8312
8321
|
const image = {};
|
8313
8322
|
|
8314
8323
|
var image$1 = /*#__PURE__*/Object.freeze({
|
8315
8324
|
__proto__: null,
|
8316
8325
|
default: image,
|
8317
|
-
vars: vars$
|
8326
|
+
vars: vars$a
|
8318
8327
|
});
|
8319
8328
|
|
8320
|
-
const vars$
|
8329
|
+
const vars$9 = PhoneFieldClass.cssVarList;
|
8321
8330
|
|
8322
8331
|
const phoneField = {
|
8323
|
-
[vars$
|
8332
|
+
[vars$9.hostWidth]: refs.width,
|
8333
|
+
[vars$9.fontSize]: refs.fontSize,
|
8334
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
8335
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
8336
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
8337
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
8338
|
+
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
8339
|
+
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8340
|
+
[vars$9.inputBorderStyle]: refs.borderStyle,
|
8341
|
+
[vars$9.inputBorderWidth]: refs.borderWidth,
|
8342
|
+
[vars$9.inputBorderColor]: refs.borderColor,
|
8343
|
+
[vars$9.inputBorderRadius]: refs.borderRadius,
|
8344
|
+
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
8345
|
+
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
8346
|
+
[vars$9.inputOutlineColor]: refs.outlineColor,
|
8347
|
+
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
8348
|
+
[vars$9.phoneInputWidth]: refs.minWidth,
|
8349
|
+
[vars$9.countryCodeInputWidth]: '5em',
|
8350
|
+
[vars$9.countryCodeDropdownWidth]: '20em',
|
8351
|
+
|
8352
|
+
// '@overlay': {
|
8353
|
+
// overlayItemBackgroundColor: 'red'
|
8354
|
+
// }
|
8355
|
+
};
|
8356
|
+
|
8357
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8358
|
+
__proto__: null,
|
8359
|
+
default: phoneField,
|
8360
|
+
vars: vars$9
|
8361
|
+
});
|
8362
|
+
|
8363
|
+
const vars$8 = PhoneFieldInputBoxClass.cssVarList;
|
8364
|
+
|
8365
|
+
const phoneInputBoxField = {
|
8366
|
+
[vars$8.hostWidth]: '16em',
|
8367
|
+
[vars$8.hostMinWidth]: refs.minWidth,
|
8324
8368
|
[vars$8.fontSize]: refs.fontSize,
|
8325
8369
|
[vars$8.fontFamily]: refs.fontFamily,
|
8326
8370
|
[vars$8.labelTextColor]: refs.labelTextColor,
|
@@ -8336,189 +8380,154 @@ const phoneField = {
|
|
8336
8380
|
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
8337
8381
|
[vars$8.inputOutlineColor]: refs.outlineColor,
|
8338
8382
|
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
8339
|
-
[vars$8.phoneInputWidth]: refs.minWidth,
|
8340
|
-
[vars$8.countryCodeInputWidth]: '5em',
|
8341
|
-
[vars$8.countryCodeDropdownWidth]: '20em',
|
8342
|
-
|
8343
|
-
// '@overlay': {
|
8344
|
-
// overlayItemBackgroundColor: 'red'
|
8345
|
-
// }
|
8346
|
-
};
|
8347
|
-
|
8348
|
-
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8349
|
-
__proto__: null,
|
8350
|
-
default: phoneField,
|
8351
|
-
vars: vars$8
|
8352
|
-
});
|
8353
|
-
|
8354
|
-
const vars$7 = PhoneFieldInputBoxClass.cssVarList;
|
8355
|
-
|
8356
|
-
const phoneInputBoxField = {
|
8357
|
-
[vars$7.hostWidth]: '16em',
|
8358
|
-
[vars$7.hostMinWidth]: refs.minWidth,
|
8359
|
-
[vars$7.fontSize]: refs.fontSize,
|
8360
|
-
[vars$7.fontFamily]: refs.fontFamily,
|
8361
|
-
[vars$7.labelTextColor]: refs.labelTextColor,
|
8362
|
-
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
8363
|
-
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8364
|
-
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
8365
|
-
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8366
|
-
[vars$7.inputBorderStyle]: refs.borderStyle,
|
8367
|
-
[vars$7.inputBorderWidth]: refs.borderWidth,
|
8368
|
-
[vars$7.inputBorderColor]: refs.borderColor,
|
8369
|
-
[vars$7.inputBorderRadius]: refs.borderRadius,
|
8370
|
-
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
8371
|
-
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
8372
|
-
[vars$7.inputOutlineColor]: refs.outlineColor,
|
8373
|
-
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
8374
8383
|
_fullWidth: {
|
8375
|
-
[vars$
|
8384
|
+
[vars$8.hostWidth]: refs.width,
|
8376
8385
|
},
|
8377
8386
|
};
|
8378
8387
|
|
8379
8388
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8380
8389
|
__proto__: null,
|
8381
8390
|
default: phoneInputBoxField,
|
8382
|
-
vars: vars$
|
8391
|
+
vars: vars$8
|
8383
8392
|
});
|
8384
8393
|
|
8385
|
-
const vars$
|
8394
|
+
const vars$7 = NewPasswordClass.cssVarList;
|
8386
8395
|
|
8387
8396
|
const newPassword = {
|
8388
|
-
[vars$
|
8389
|
-
[vars$
|
8390
|
-
[vars$
|
8391
|
-
[vars$
|
8392
|
-
[vars$
|
8393
|
-
[vars$
|
8397
|
+
[vars$7.hostWidth]: refs.width,
|
8398
|
+
[vars$7.hostMinWidth]: refs.minWidth,
|
8399
|
+
[vars$7.fontSize]: refs.fontSize,
|
8400
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
8401
|
+
[vars$7.spaceBetweenInputs]: '1em',
|
8402
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8394
8403
|
|
8395
8404
|
_required: {
|
8396
8405
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8397
8406
|
// That's why we fake the required indicator on each input.
|
8398
8407
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8399
|
-
[vars$
|
8408
|
+
[vars$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8400
8409
|
},
|
8401
8410
|
};
|
8402
8411
|
|
8403
8412
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8404
8413
|
__proto__: null,
|
8405
8414
|
default: newPassword,
|
8406
|
-
vars: vars$
|
8415
|
+
vars: vars$7
|
8407
8416
|
});
|
8408
8417
|
|
8409
|
-
const vars$
|
8418
|
+
const vars$6 = UploadFileClass.cssVarList;
|
8410
8419
|
|
8411
8420
|
const uploadFile = {
|
8412
|
-
[vars$
|
8413
|
-
[vars$
|
8421
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
8422
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
8414
8423
|
|
8415
|
-
[vars$
|
8424
|
+
[vars$6.iconSize]: '2em',
|
8416
8425
|
|
8417
|
-
[vars$
|
8418
|
-
[vars$
|
8426
|
+
[vars$6.hostPadding]: '0.75em',
|
8427
|
+
[vars$6.gap]: '0.5em',
|
8419
8428
|
|
8420
|
-
[vars$
|
8421
|
-
[vars$
|
8422
|
-
[vars$
|
8429
|
+
[vars$6.fontSize]: '16px',
|
8430
|
+
[vars$6.titleFontWeight]: '500',
|
8431
|
+
[vars$6.lineHeight]: '1em',
|
8423
8432
|
|
8424
|
-
[vars$
|
8425
|
-
[vars$
|
8426
|
-
[vars$
|
8427
|
-
[vars$
|
8433
|
+
[vars$6.borderWidth]: refs.borderWidth,
|
8434
|
+
[vars$6.borderColor]: refs.borderColor,
|
8435
|
+
[vars$6.borderRadius]: refs.borderRadius,
|
8436
|
+
[vars$6.borderStyle]: 'dashed',
|
8428
8437
|
|
8429
8438
|
_required: {
|
8430
|
-
[vars$
|
8439
|
+
[vars$6.requiredIndicator]: refs.requiredIndicator,
|
8431
8440
|
},
|
8432
8441
|
|
8433
8442
|
size: {
|
8434
8443
|
xs: {
|
8435
|
-
[vars$
|
8436
|
-
[vars$
|
8437
|
-
[vars$
|
8438
|
-
[vars$
|
8439
|
-
[vars$
|
8444
|
+
[vars$6.hostHeight]: '196px',
|
8445
|
+
[vars$6.hostWidth]: '200px',
|
8446
|
+
[vars$6.titleFontSize]: '0.875em',
|
8447
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
8448
|
+
[vars$6.lineHeight]: '1.25em',
|
8440
8449
|
},
|
8441
8450
|
sm: {
|
8442
|
-
[vars$
|
8443
|
-
[vars$
|
8444
|
-
[vars$
|
8445
|
-
[vars$
|
8446
|
-
[vars$
|
8451
|
+
[vars$6.hostHeight]: '216px',
|
8452
|
+
[vars$6.hostWidth]: '230px',
|
8453
|
+
[vars$6.titleFontSize]: '1em',
|
8454
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
8455
|
+
[vars$6.lineHeight]: '1.25em',
|
8447
8456
|
},
|
8448
8457
|
md: {
|
8449
|
-
[vars$
|
8450
|
-
[vars$
|
8451
|
-
[vars$
|
8452
|
-
[vars$
|
8453
|
-
[vars$
|
8458
|
+
[vars$6.hostHeight]: '256px',
|
8459
|
+
[vars$6.hostWidth]: '312px',
|
8460
|
+
[vars$6.titleFontSize]: '1.125em',
|
8461
|
+
[vars$6.descriptionFontSize]: '1em',
|
8462
|
+
[vars$6.lineHeight]: '1.5em',
|
8454
8463
|
},
|
8455
8464
|
lg: {
|
8456
|
-
[vars$
|
8457
|
-
[vars$
|
8458
|
-
[vars$
|
8459
|
-
[vars$
|
8460
|
-
[vars$
|
8465
|
+
[vars$6.hostHeight]: '280px',
|
8466
|
+
[vars$6.hostWidth]: '336px',
|
8467
|
+
[vars$6.titleFontSize]: '1.125em',
|
8468
|
+
[vars$6.descriptionFontSize]: '1.125em',
|
8469
|
+
[vars$6.lineHeight]: '1.75em',
|
8461
8470
|
},
|
8462
8471
|
},
|
8463
8472
|
|
8464
8473
|
_fullWidth: {
|
8465
|
-
[vars$
|
8474
|
+
[vars$6.hostWidth]: refs.width,
|
8466
8475
|
},
|
8467
8476
|
};
|
8468
8477
|
|
8469
8478
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8470
8479
|
__proto__: null,
|
8471
8480
|
default: uploadFile,
|
8472
|
-
vars: vars$
|
8481
|
+
vars: vars$6
|
8473
8482
|
});
|
8474
8483
|
|
8475
|
-
const globalRefs$
|
8484
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8476
8485
|
|
8477
|
-
const vars$
|
8486
|
+
const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
|
8478
8487
|
|
8479
8488
|
const buttonSelectionGroupItem = {
|
8480
|
-
[vars$
|
8481
|
-
[vars$
|
8482
|
-
[vars$
|
8483
|
-
[vars$
|
8484
|
-
[vars$
|
8489
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
|
8490
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
|
8491
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.main,
|
8492
|
+
[vars$5.borderStyle]: 'solid',
|
8493
|
+
[vars$5.borderRadius]: globalRefs$3.radius.sm,
|
8485
8494
|
|
8486
8495
|
_hover: {
|
8487
|
-
[vars$
|
8496
|
+
[vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8488
8497
|
},
|
8489
8498
|
|
8490
8499
|
_selected: {
|
8491
|
-
[vars$
|
8492
|
-
[vars$
|
8493
|
-
[vars$
|
8500
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.contrast,
|
8501
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.contrast,
|
8502
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.light,
|
8494
8503
|
},
|
8495
8504
|
};
|
8496
8505
|
|
8497
8506
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8498
8507
|
__proto__: null,
|
8499
8508
|
default: buttonSelectionGroupItem,
|
8500
|
-
vars: vars$
|
8509
|
+
vars: vars$5
|
8501
8510
|
});
|
8502
8511
|
|
8503
|
-
const globalRefs$
|
8504
|
-
const vars$
|
8512
|
+
const globalRefs$2 = getThemeRefs(globals);
|
8513
|
+
const vars$4 = ButtonSelectionGroupClass.cssVarList;
|
8505
8514
|
|
8506
8515
|
const buttonSelectionGroup = {
|
8507
|
-
[vars$
|
8508
|
-
[vars$
|
8509
|
-
[vars$
|
8510
|
-
[vars$
|
8511
|
-
[vars$
|
8512
|
-
[vars$
|
8516
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
8517
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
8518
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
8519
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
8520
|
+
[vars$4.itemsSpacing]: globalRefs$2.spacing.sm,
|
8521
|
+
[vars$4.hostWidth]: refs.width,
|
8513
8522
|
};
|
8514
8523
|
|
8515
8524
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8516
8525
|
__proto__: null,
|
8517
8526
|
default: buttonSelectionGroup,
|
8518
|
-
vars: vars$
|
8527
|
+
vars: vars$4
|
8519
8528
|
});
|
8520
8529
|
|
8521
|
-
const componentName = getComponentName('modal');
|
8530
|
+
const componentName$1 = getComponentName('modal');
|
8522
8531
|
|
8523
8532
|
const customMixin = (superclass) =>
|
8524
8533
|
class ModalMixinClass extends superclass {
|
@@ -8614,7 +8623,7 @@ const ModalClass = compose(
|
|
8614
8623
|
wrappedEleName: 'vaadin-dialog',
|
8615
8624
|
style: () => ``,
|
8616
8625
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8617
|
-
componentName,
|
8626
|
+
componentName: componentName$1,
|
8618
8627
|
})
|
8619
8628
|
);
|
8620
8629
|
|
@@ -8625,44 +8634,44 @@ const modal = {
|
|
8625
8634
|
[compVars.overlayWidth]: '700px',
|
8626
8635
|
};
|
8627
8636
|
|
8628
|
-
const vars$
|
8637
|
+
const vars$3 = {
|
8629
8638
|
...compVars,
|
8630
8639
|
};
|
8631
8640
|
|
8632
8641
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8633
8642
|
__proto__: null,
|
8634
8643
|
default: modal,
|
8635
|
-
vars: vars$
|
8644
|
+
vars: vars$3
|
8636
8645
|
});
|
8637
8646
|
|
8638
|
-
const globalRefs = getThemeRefs(globals);
|
8639
|
-
const vars$
|
8647
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8648
|
+
const vars$2 = GridClass.cssVarList;
|
8640
8649
|
|
8641
8650
|
const grid = {
|
8642
|
-
[vars$
|
8643
|
-
[vars$
|
8644
|
-
[vars$
|
8651
|
+
[vars$2.hostWidth]: '100%',
|
8652
|
+
[vars$2.hostHeight]: '100%',
|
8653
|
+
[vars$2.hostMinHeight]: '400px',
|
8645
8654
|
|
8646
|
-
[vars$
|
8647
|
-
[vars$
|
8655
|
+
[vars$2.fontSize]: refs.fontSize,
|
8656
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
8648
8657
|
|
8649
|
-
[vars$
|
8650
|
-
[vars$
|
8651
|
-
[vars$
|
8658
|
+
[vars$2.sortIndicatorsColor]: globalRefs$1.colors.primary.main,
|
8659
|
+
[vars$2.activeSortIndicator]: globalRefs$1.colors.primary.main,
|
8660
|
+
[vars$2.resizeHandleColor]: globalRefs$1.colors.surface.main,
|
8652
8661
|
|
8653
|
-
[vars$
|
8654
|
-
[vars$
|
8655
|
-
[vars$
|
8656
|
-
[vars$
|
8662
|
+
[vars$2.inputBorderWidth]: refs.borderWidth,
|
8663
|
+
[vars$2.inputBorderStyle]: refs.borderStyle,
|
8664
|
+
[vars$2.inputBorderRadius]: refs.borderRadius,
|
8665
|
+
[vars$2.inputBorderColor]: 'transparent',
|
8657
8666
|
|
8658
|
-
[vars$
|
8667
|
+
[vars$2.separatorColor]: refs.borderColor,
|
8659
8668
|
|
8660
|
-
[vars$
|
8661
|
-
[vars$
|
8662
|
-
[vars$
|
8669
|
+
[vars$2.valueTextColor]: globalRefs$1.colors.surface.contrast,
|
8670
|
+
[vars$2.selectedBackgroundColor]: globalRefs$1.colors.primary.main,
|
8671
|
+
[vars$2.selectedTextColor]: globalRefs$1.colors.primary.contrast,
|
8663
8672
|
|
8664
8673
|
_bordered: {
|
8665
|
-
[vars$
|
8674
|
+
[vars$2.inputBorderColor]: refs.borderColor,
|
8666
8675
|
},
|
8667
8676
|
};
|
8668
8677
|
|
@@ -8670,6 +8679,124 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8670
8679
|
__proto__: null,
|
8671
8680
|
default: grid,
|
8672
8681
|
grid: grid,
|
8682
|
+
vars: vars$2
|
8683
|
+
});
|
8684
|
+
|
8685
|
+
const componentName = getComponentName('notification-card');
|
8686
|
+
|
8687
|
+
const notificationCardMixin = (superclass) =>
|
8688
|
+
class NotificationCardMixinClass extends superclass {
|
8689
|
+
close() {
|
8690
|
+
// if animation is not applied to the element, the node will not be removed
|
8691
|
+
// from the DOM. We should avoid that. So, if in any case we allow
|
8692
|
+
// customizing the animation - we should check if animation is applied
|
8693
|
+
// and if it's not applied - remove the elemnt from the DOM and dispatch
|
8694
|
+
// `card-closed` event.
|
8695
|
+
this.baseElement.addEventListener('animationend', () => {
|
8696
|
+
this.remove();
|
8697
|
+
this.dispatchEvent(new Event('card-closed'));
|
8698
|
+
});
|
8699
|
+
|
8700
|
+
this.setAttribute('opened', 'false');
|
8701
|
+
}
|
8702
|
+
};
|
8703
|
+
|
8704
|
+
const NotificationCardClass = compose(
|
8705
|
+
createStyleMixin({
|
8706
|
+
mappings: {
|
8707
|
+
hostMinWidth: { selector: () => '::part(content)', property: 'min-width' },
|
8708
|
+
fontFamily: {},
|
8709
|
+
fontSize: {},
|
8710
|
+
backgroundColor: { selector: () => '::part(content)' },
|
8711
|
+
textColor: { property: 'color' },
|
8712
|
+
boxShadow: {},
|
8713
|
+
borderWidth: { selector: () => '::part(content)', property: 'border-width' },
|
8714
|
+
borderColor: { selector: () => '::part(content)', property: 'border-color' },
|
8715
|
+
borderStyle: { selector: () => '::part(content)', property: 'border-style' },
|
8716
|
+
borderRadius: [
|
8717
|
+
{ selector: () => '::part(content)', property: 'border-radius' },
|
8718
|
+
{ selector: () => '::part(overlay)', property: 'border-radius' },
|
8719
|
+
],
|
8720
|
+
verticalPadding: [
|
8721
|
+
{ selector: () => '::part(content)', property: 'padding-top' },
|
8722
|
+
{ selector: () => '::part(content)', property: 'padding-bottom' },
|
8723
|
+
],
|
8724
|
+
horizontalPadding: [
|
8725
|
+
{ selector: () => '::part(content)', property: 'padding-right' },
|
8726
|
+
{ selector: () => '::part(content)', property: 'padding-left' },
|
8727
|
+
],
|
8728
|
+
},
|
8729
|
+
}),
|
8730
|
+
notificationCardMixin
|
8731
|
+
)(
|
8732
|
+
createProxy({
|
8733
|
+
slots: [''],
|
8734
|
+
wrappedEleName: 'vaadin-notification-card',
|
8735
|
+
style: () => `
|
8736
|
+
vaadin-notification-card {
|
8737
|
+
box-shadow: none;
|
8738
|
+
}
|
8739
|
+
::part(overlay) {
|
8740
|
+
box-shadow: none;
|
8741
|
+
background: none;
|
8742
|
+
}
|
8743
|
+
`,
|
8744
|
+
excludeAttrsSync: ['tabindex'],
|
8745
|
+
componentName,
|
8746
|
+
})
|
8747
|
+
);
|
8748
|
+
|
8749
|
+
const globalRefs = getThemeRefs(globals);
|
8750
|
+
const vars$1 = NotificationCardClass.cssVarList;
|
8751
|
+
|
8752
|
+
const shadowColor = '#00000020';
|
8753
|
+
|
8754
|
+
const notification = {
|
8755
|
+
[vars$1.hostMinWidth]: '415px',
|
8756
|
+
[vars$1.fontFamily]: globalRefs.fonts.font1.family,
|
8757
|
+
[vars$1.fontSize]: globalRefs.typography.body1.size,
|
8758
|
+
[vars$1.backgroundColor]: globalRefs.colors.surface.main,
|
8759
|
+
[vars$1.textColor]: globalRefs.colors.surface.contrast,
|
8760
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
|
8761
|
+
[vars$1.verticalPadding]: '0.45em',
|
8762
|
+
[vars$1.horizontalPadding]: '1em',
|
8763
|
+
[vars$1.borderRadius]: globalRefs.radius.md,
|
8764
|
+
|
8765
|
+
_bordered: {
|
8766
|
+
[vars$1.borderWidth]: globalRefs.border.sm,
|
8767
|
+
[vars$1.borderStyle]: 'solid',
|
8768
|
+
[vars$1.borderColor]: 'transparent',
|
8769
|
+
},
|
8770
|
+
|
8771
|
+
size: {
|
8772
|
+
xs: { [vars$1.fontSize]: '12px' },
|
8773
|
+
sm: { [vars$1.fontSize]: '14px' },
|
8774
|
+
md: { [vars$1.fontSize]: '16px' },
|
8775
|
+
lg: { [vars$1.fontSize]: '18px' },
|
8776
|
+
},
|
8777
|
+
|
8778
|
+
mode: {
|
8779
|
+
primary: {
|
8780
|
+
[vars$1.backgroundColor]: globalRefs.colors.primary.main,
|
8781
|
+
[vars$1.textColor]: globalRefs.colors.primary.contrast,
|
8782
|
+
[vars$1.borderColor]: globalRefs.colors.primary.light,
|
8783
|
+
},
|
8784
|
+
success: {
|
8785
|
+
[vars$1.backgroundColor]: globalRefs.colors.success.main,
|
8786
|
+
[vars$1.textColor]: globalRefs.colors.success.contrast,
|
8787
|
+
[vars$1.borderColor]: globalRefs.colors.success.light,
|
8788
|
+
},
|
8789
|
+
error: {
|
8790
|
+
[vars$1.backgroundColor]: globalRefs.colors.error.main,
|
8791
|
+
[vars$1.textColor]: globalRefs.colors.error.contrast,
|
8792
|
+
[vars$1.borderColor]: globalRefs.colors.error.light,
|
8793
|
+
},
|
8794
|
+
},
|
8795
|
+
};
|
8796
|
+
|
8797
|
+
var notificationCard = /*#__PURE__*/Object.freeze({
|
8798
|
+
__proto__: null,
|
8799
|
+
default: notification,
|
8673
8800
|
vars: vars$1
|
8674
8801
|
});
|
8675
8802
|
|
@@ -8702,6 +8829,7 @@ const components = {
|
|
8702
8829
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8703
8830
|
modal: modal$1,
|
8704
8831
|
grid: grid$1,
|
8832
|
+
notificationCard,
|
8705
8833
|
};
|
8706
8834
|
|
8707
8835
|
const theme = Object.keys(components).reduce(
|
@@ -8714,7 +8842,7 @@ const vars = Object.keys(components).reduce(
|
|
8714
8842
|
);
|
8715
8843
|
|
8716
8844
|
const defaultTheme = { globals, components: theme };
|
8717
|
-
const themeVars = { globals: vars$
|
8845
|
+
const themeVars = { globals: vars$u, components: vars };
|
8718
8846
|
|
8719
8847
|
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 };
|
8720
8848
|
//# sourceMappingURL=index.esm.js.map
|