@descope/web-components-ui 1.0.228 → 1.0.229
Sign up to get free protection for your applications and to get access to all the features.
- 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
|