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