@descope/web-components-ui 1.0.221 → 1.0.223
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +790 -642
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +778 -631
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1037.js +2 -0
- package/dist/umd/1037.js.LICENSE.txt +5 -0
- package/dist/umd/1932.js +310 -0
- package/dist/umd/1932.js.LICENSE.txt +5 -0
- package/dist/umd/1990.js +1 -1
- package/dist/umd/262.js +2 -0
- package/dist/umd/262.js.LICENSE.txt +5 -0
- package/dist/umd/3660.js +17 -0
- package/dist/umd/3660.js.LICENSE.txt +23 -0
- package/dist/umd/3952.js +123 -0
- package/dist/umd/{1883.js → 4273.js} +5 -5
- package/dist/umd/5345.js +94 -0
- package/dist/umd/5345.js.LICENSE.txt +11 -0
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6116.js +8 -8
- package/dist/umd/7056.js +1 -1
- package/dist/umd/7101.js +1 -1
- package/dist/umd/7196.js +360 -0
- package/dist/umd/{1852.js.LICENSE.txt → 7196.js.LICENSE.txt} +0 -12
- package/dist/umd/8725.js +2 -2
- package/dist/umd/9211.js +2 -2
- package/dist/umd/9437.js +1 -1
- package/dist/umd/9515.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +3 -2
- package/src/components/descope-modal/ModalClass.js +109 -0
- package/src/components/descope-modal/index.js +6 -0
- package/src/index.cjs.js +1 -0
- package/src/mixins/createStyleMixin/helpers.js +2 -2
- package/src/mixins/createStyleMixin/index.js +2 -2
- package/src/mixins/portalMixin.js +24 -4
- package/src/theme/components/button.js +7 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/modal.js +16 -0
- package/dist/umd/1852.js +0 -375
- package/dist/umd/4767.js +0 -215
- /package/dist/umd/{4767.js.LICENSE.txt → 3952.js.LICENSE.txt} +0 -0
- /package/dist/umd/{1883.js.LICENSE.txt → 4273.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -231,11 +231,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
|
|
231
231
|
|
232
232
|
const cssVarName = getCssVarName(componentName, attr);
|
233
233
|
|
234
|
-
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
|
234
|
+
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
|
235
235
|
style.add(
|
236
236
|
createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
|
237
237
|
isFunction(property) ? property() : property,
|
238
|
-
createCssVarFallback(cssVarName)
|
238
|
+
createCssVarFallback(cssVarName) + (important ? '!important' : '')
|
239
239
|
);
|
240
240
|
});
|
241
241
|
});
|
@@ -392,10 +392,10 @@ const createStyleMixin =
|
|
392
392
|
(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
|
393
393
|
}
|
394
394
|
|
395
|
-
init() {
|
395
|
+
async init() {
|
396
396
|
super.init?.();
|
397
397
|
if (this.shadowRoot.isConnected) {
|
398
|
-
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
398
|
+
this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
|
399
399
|
|
400
400
|
this.#addClassName(componentName);
|
401
401
|
|
@@ -1048,7 +1048,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
|
|
1048
1048
|
|
1049
1049
|
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
1050
1050
|
|
1051
|
-
const
|
1051
|
+
const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
1052
|
+
new Promise((res) => {
|
1053
|
+
const MAX_RETRIES = 20;
|
1054
|
+
const ele = getRootElementFn(that);
|
1055
|
+
let counter = 0;
|
1056
|
+
|
1057
|
+
const check = () => {
|
1058
|
+
if (counter > MAX_RETRIES) {
|
1059
|
+
// eslint-disable-next-line no-console
|
1060
|
+
console.error('could not get shadow root for element', ele);
|
1061
|
+
res(ele);
|
1062
|
+
return;
|
1063
|
+
}
|
1064
|
+
|
1065
|
+
counter++;
|
1066
|
+
|
1067
|
+
if (!ele.shadowRoot) setTimeout(check);
|
1068
|
+
else res(ele.shadowRoot);
|
1069
|
+
};
|
1070
|
+
check();
|
1071
|
+
});
|
1052
1072
|
|
1053
1073
|
const portalMixin =
|
1054
1074
|
({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
|
@@ -1078,17 +1098,17 @@ const portalMixin =
|
|
1078
1098
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
1079
1099
|
const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
|
1080
1100
|
|
1081
|
-
return portal
|
1101
|
+
return portal;
|
1082
1102
|
};
|
1083
1103
|
|
1084
1104
|
super({
|
1085
|
-
getRootElement,
|
1105
|
+
getRootElement: withWaitForShadowRoot(getRootElement),
|
1086
1106
|
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
1087
1107
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
1088
1108
|
baseSelector: ':host',
|
1089
1109
|
});
|
1090
1110
|
|
1091
|
-
this.#portalEle =
|
1111
|
+
this.#portalEle = getRootElement(this);
|
1092
1112
|
}
|
1093
1113
|
|
1094
1114
|
#handleHoverAttribute() {
|
@@ -1214,7 +1234,7 @@ const clickableMixin = (superclass) =>
|
|
1214
1234
|
}
|
1215
1235
|
};
|
1216
1236
|
|
1217
|
-
const componentName$
|
1237
|
+
const componentName$x = getComponentName('button');
|
1218
1238
|
|
1219
1239
|
const resetStyles = `
|
1220
1240
|
:host {
|
@@ -1311,7 +1331,7 @@ const ButtonClass = compose(
|
|
1311
1331
|
}
|
1312
1332
|
`,
|
1313
1333
|
excludeAttrsSync: ['tabindex'],
|
1314
|
-
componentName: componentName$
|
1334
|
+
componentName: componentName$x,
|
1315
1335
|
})
|
1316
1336
|
);
|
1317
1337
|
|
@@ -1348,7 +1368,7 @@ loadingIndicatorStyles = `
|
|
1348
1368
|
}
|
1349
1369
|
`;
|
1350
1370
|
|
1351
|
-
customElements.define(componentName$
|
1371
|
+
customElements.define(componentName$x, ButtonClass);
|
1352
1372
|
|
1353
1373
|
const createBaseInputClass = (...args) =>
|
1354
1374
|
compose(
|
@@ -1358,11 +1378,11 @@ const createBaseInputClass = (...args) =>
|
|
1358
1378
|
inputEventsDispatchingMixin
|
1359
1379
|
)(createBaseClass(...args));
|
1360
1380
|
|
1361
|
-
const componentName$
|
1381
|
+
const componentName$w = getComponentName('boolean-field-internal');
|
1362
1382
|
|
1363
1383
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1364
1384
|
|
1365
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1385
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
|
1366
1386
|
|
1367
1387
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1368
1388
|
constructor() {
|
@@ -1422,14 +1442,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1422
1442
|
|
1423
1443
|
const template = document.createElement('template');
|
1424
1444
|
template.innerHTML = `
|
1425
|
-
<${componentName$
|
1445
|
+
<${componentName$w}
|
1426
1446
|
tabindex="-1"
|
1427
1447
|
slot="input"
|
1428
|
-
></${componentName$
|
1448
|
+
></${componentName$w}>
|
1429
1449
|
`;
|
1430
1450
|
|
1431
1451
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1432
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1452
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$w);
|
1433
1453
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1434
1454
|
|
1435
1455
|
forwardAttrs(this, this.inputElement, {
|
@@ -1592,7 +1612,7 @@ descope-boolean-field-internal {
|
|
1592
1612
|
}
|
1593
1613
|
`;
|
1594
1614
|
|
1595
|
-
const componentName$
|
1615
|
+
const componentName$v = getComponentName('checkbox');
|
1596
1616
|
|
1597
1617
|
const {
|
1598
1618
|
host: host$e,
|
@@ -1689,15 +1709,15 @@ const CheckboxClass = compose(
|
|
1689
1709
|
}
|
1690
1710
|
`,
|
1691
1711
|
excludeAttrsSync: ['label', 'tabindex'],
|
1692
|
-
componentName: componentName$
|
1712
|
+
componentName: componentName$v,
|
1693
1713
|
})
|
1694
1714
|
);
|
1695
1715
|
|
1696
|
-
customElements.define(componentName$
|
1716
|
+
customElements.define(componentName$w, BooleanInputInternal);
|
1697
1717
|
|
1698
|
-
customElements.define(componentName$
|
1718
|
+
customElements.define(componentName$v, CheckboxClass);
|
1699
1719
|
|
1700
|
-
const componentName$
|
1720
|
+
const componentName$u = getComponentName('switch-toggle');
|
1701
1721
|
|
1702
1722
|
const {
|
1703
1723
|
host: host$d,
|
@@ -1816,17 +1836,17 @@ const SwitchToggleClass = compose(
|
|
1816
1836
|
}
|
1817
1837
|
`,
|
1818
1838
|
excludeAttrsSync: ['label', 'tabindex'],
|
1819
|
-
componentName: componentName$
|
1839
|
+
componentName: componentName$u,
|
1820
1840
|
})
|
1821
1841
|
);
|
1822
1842
|
|
1823
|
-
customElements.define(componentName$
|
1843
|
+
customElements.define(componentName$u, SwitchToggleClass);
|
1824
1844
|
|
1825
|
-
const componentName$
|
1845
|
+
const componentName$t = getComponentName('loader-linear');
|
1826
1846
|
|
1827
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1847
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
|
1828
1848
|
static get componentName() {
|
1829
|
-
return componentName$
|
1849
|
+
return componentName$t;
|
1830
1850
|
}
|
1831
1851
|
|
1832
1852
|
constructor() {
|
@@ -1887,11 +1907,11 @@ const LoaderLinearClass = compose(
|
|
1887
1907
|
componentNameValidationMixin
|
1888
1908
|
)(RawLoaderLinear);
|
1889
1909
|
|
1890
|
-
customElements.define(componentName$
|
1910
|
+
customElements.define(componentName$t, LoaderLinearClass);
|
1891
1911
|
|
1892
|
-
const componentName$
|
1912
|
+
const componentName$s = getComponentName('loader-radial');
|
1893
1913
|
|
1894
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1914
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
|
1895
1915
|
constructor() {
|
1896
1916
|
super();
|
1897
1917
|
|
@@ -1935,11 +1955,11 @@ const LoaderRadialClass = compose(
|
|
1935
1955
|
componentNameValidationMixin
|
1936
1956
|
)(RawLoaderRadial);
|
1937
1957
|
|
1938
|
-
customElements.define(componentName$
|
1958
|
+
customElements.define(componentName$s, LoaderRadialClass);
|
1939
1959
|
|
1940
|
-
const componentName$
|
1960
|
+
const componentName$r = getComponentName('container');
|
1941
1961
|
|
1942
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1962
|
+
class RawContainer extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > slot' }) {
|
1943
1963
|
constructor() {
|
1944
1964
|
super();
|
1945
1965
|
|
@@ -1991,10 +2011,10 @@ const ContainerClass = compose(
|
|
1991
2011
|
componentNameValidationMixin
|
1992
2012
|
)(RawContainer);
|
1993
2013
|
|
1994
|
-
customElements.define(componentName$
|
2014
|
+
customElements.define(componentName$r, ContainerClass);
|
1995
2015
|
|
1996
|
-
const componentName$
|
1997
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2016
|
+
const componentName$q = getComponentName('divider');
|
2017
|
+
class RawDivider extends createBaseClass({ componentName: componentName$q, baseSelector: ':host > div' }) {
|
1998
2018
|
constructor() {
|
1999
2019
|
super();
|
2000
2020
|
|
@@ -2092,9 +2112,9 @@ const DividerClass = compose(
|
|
2092
2112
|
|
2093
2113
|
// eslint-disable-next-line max-classes-per-file
|
2094
2114
|
|
2095
|
-
const componentName$
|
2115
|
+
const componentName$p = getComponentName('text');
|
2096
2116
|
|
2097
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2117
|
+
class RawText extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > slot' }) {
|
2098
2118
|
constructor() {
|
2099
2119
|
super();
|
2100
2120
|
|
@@ -2153,9 +2173,9 @@ const TextClass = compose(
|
|
2153
2173
|
customTextMixin
|
2154
2174
|
)(RawText);
|
2155
2175
|
|
2156
|
-
customElements.define(componentName$
|
2176
|
+
customElements.define(componentName$p, TextClass);
|
2157
2177
|
|
2158
|
-
customElements.define(componentName$
|
2178
|
+
customElements.define(componentName$q, DividerClass);
|
2159
2179
|
|
2160
2180
|
const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2161
2181
|
{
|
@@ -2211,9 +2231,9 @@ var textFieldMappings = {
|
|
2211
2231
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2212
2232
|
};
|
2213
2233
|
|
2214
|
-
const componentName$
|
2234
|
+
const componentName$o = getComponentName('email-field');
|
2215
2235
|
|
2216
|
-
const customMixin$
|
2236
|
+
const customMixin$7 = (superclass) =>
|
2217
2237
|
class EmailFieldMixinClass extends superclass {
|
2218
2238
|
init() {
|
2219
2239
|
super.init?.();
|
@@ -2227,7 +2247,7 @@ const EmailFieldClass = compose(
|
|
2227
2247
|
draggableMixin,
|
2228
2248
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2229
2249
|
componentNameValidationMixin,
|
2230
|
-
customMixin$
|
2250
|
+
customMixin$7
|
2231
2251
|
)(
|
2232
2252
|
createProxy({
|
2233
2253
|
slots: ['', 'suffix'],
|
@@ -2245,15 +2265,15 @@ const EmailFieldClass = compose(
|
|
2245
2265
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2246
2266
|
`,
|
2247
2267
|
excludeAttrsSync: ['tabindex'],
|
2248
|
-
componentName: componentName$
|
2268
|
+
componentName: componentName$o,
|
2249
2269
|
})
|
2250
2270
|
);
|
2251
2271
|
|
2252
|
-
customElements.define(componentName$
|
2272
|
+
customElements.define(componentName$o, EmailFieldClass);
|
2253
2273
|
|
2254
|
-
const componentName$
|
2274
|
+
const componentName$n = getComponentName('link');
|
2255
2275
|
|
2256
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2276
|
+
class RawLink extends createBaseClass({ componentName: componentName$n, baseSelector: ':host a' }) {
|
2257
2277
|
constructor() {
|
2258
2278
|
super();
|
2259
2279
|
|
@@ -2317,7 +2337,7 @@ const LinkClass = compose(
|
|
2317
2337
|
componentNameValidationMixin
|
2318
2338
|
)(RawLink);
|
2319
2339
|
|
2320
|
-
customElements.define(componentName$
|
2340
|
+
customElements.define(componentName$n, LinkClass);
|
2321
2341
|
|
2322
2342
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2323
2343
|
let style;
|
@@ -2369,27 +2389,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2369
2389
|
return CssVarImageClass;
|
2370
2390
|
};
|
2371
2391
|
|
2372
|
-
const componentName$
|
2392
|
+
const componentName$m = getComponentName('logo');
|
2373
2393
|
|
2374
2394
|
const LogoClass = createCssVarImageClass({
|
2375
|
-
componentName: componentName$
|
2395
|
+
componentName: componentName$m,
|
2376
2396
|
varName: 'url',
|
2377
2397
|
fallbackVarName: 'fallbackUrl',
|
2378
2398
|
});
|
2379
2399
|
|
2380
|
-
customElements.define(componentName$
|
2400
|
+
customElements.define(componentName$m, LogoClass);
|
2381
2401
|
|
2382
|
-
const componentName$
|
2402
|
+
const componentName$l = getComponentName('totp-image');
|
2383
2403
|
|
2384
2404
|
const TotpImageClass = createCssVarImageClass({
|
2385
|
-
componentName: componentName$
|
2405
|
+
componentName: componentName$l,
|
2386
2406
|
varName: 'url',
|
2387
2407
|
fallbackVarName: 'fallbackUrl',
|
2388
2408
|
});
|
2389
2409
|
|
2390
|
-
customElements.define(componentName$
|
2410
|
+
customElements.define(componentName$l, TotpImageClass);
|
2391
2411
|
|
2392
|
-
const componentName$
|
2412
|
+
const componentName$k = getComponentName('number-field');
|
2393
2413
|
|
2394
2414
|
const NumberFieldClass = compose(
|
2395
2415
|
createStyleMixin({
|
@@ -2414,11 +2434,11 @@ const NumberFieldClass = compose(
|
|
2414
2434
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2415
2435
|
`,
|
2416
2436
|
excludeAttrsSync: ['tabindex'],
|
2417
|
-
componentName: componentName$
|
2437
|
+
componentName: componentName$k,
|
2418
2438
|
})
|
2419
2439
|
);
|
2420
2440
|
|
2421
|
-
customElements.define(componentName$
|
2441
|
+
customElements.define(componentName$k, NumberFieldClass);
|
2422
2442
|
|
2423
2443
|
const focusElement = (ele) => {
|
2424
2444
|
ele?.focus();
|
@@ -2436,13 +2456,13 @@ const getSanitizedCharacters = (str) => {
|
|
2436
2456
|
|
2437
2457
|
/* eslint-disable no-param-reassign */
|
2438
2458
|
|
2439
|
-
const componentName$
|
2459
|
+
const componentName$j = getComponentName('passcode-internal');
|
2440
2460
|
|
2441
2461
|
const observedAttributes$5 = ['digits'];
|
2442
2462
|
|
2443
2463
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2444
2464
|
|
2445
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2465
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
|
2446
2466
|
|
2447
2467
|
class PasscodeInternal extends BaseInputClass$4 {
|
2448
2468
|
static get observedAttributes() {
|
@@ -2639,11 +2659,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2639
2659
|
}
|
2640
2660
|
}
|
2641
2661
|
|
2642
|
-
const componentName$
|
2662
|
+
const componentName$i = getComponentName('text-field');
|
2643
2663
|
|
2644
2664
|
const observedAttrs = ['type'];
|
2645
2665
|
|
2646
|
-
const customMixin$
|
2666
|
+
const customMixin$6 = (superclass) =>
|
2647
2667
|
class TextFieldClass extends superclass {
|
2648
2668
|
static get observedAttributes() {
|
2649
2669
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2670,7 +2690,7 @@ const TextFieldClass = compose(
|
|
2670
2690
|
draggableMixin,
|
2671
2691
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2672
2692
|
componentNameValidationMixin,
|
2673
|
-
customMixin$
|
2693
|
+
customMixin$6
|
2674
2694
|
)(
|
2675
2695
|
createProxy({
|
2676
2696
|
slots: ['prefix', 'suffix'],
|
@@ -2688,15 +2708,15 @@ const TextFieldClass = compose(
|
|
2688
2708
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2689
2709
|
`,
|
2690
2710
|
excludeAttrsSync: ['tabindex'],
|
2691
|
-
componentName: componentName$
|
2711
|
+
componentName: componentName$i,
|
2692
2712
|
})
|
2693
2713
|
);
|
2694
2714
|
|
2695
|
-
const componentName$
|
2715
|
+
const componentName$h = getComponentName('passcode');
|
2696
2716
|
|
2697
2717
|
const observedAttributes$4 = ['digits'];
|
2698
2718
|
|
2699
|
-
const customMixin$
|
2719
|
+
const customMixin$5 = (superclass) =>
|
2700
2720
|
class PasscodeMixinClass extends superclass {
|
2701
2721
|
static get observedAttributes() {
|
2702
2722
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2711,17 +2731,17 @@ const customMixin$4 = (superclass) =>
|
|
2711
2731
|
const template = document.createElement('template');
|
2712
2732
|
|
2713
2733
|
template.innerHTML = `
|
2714
|
-
<${componentName$
|
2734
|
+
<${componentName$j}
|
2715
2735
|
bordered="true"
|
2716
2736
|
name="code"
|
2717
2737
|
tabindex="-1"
|
2718
2738
|
slot="input"
|
2719
|
-
><slot></slot></${componentName$
|
2739
|
+
><slot></slot></${componentName$j}>
|
2720
2740
|
`;
|
2721
2741
|
|
2722
2742
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2723
2743
|
|
2724
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2744
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$j);
|
2725
2745
|
|
2726
2746
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2727
2747
|
}
|
@@ -2788,7 +2808,7 @@ const PasscodeClass = compose(
|
|
2788
2808
|
draggableMixin,
|
2789
2809
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2790
2810
|
componentNameValidationMixin,
|
2791
|
-
customMixin$
|
2811
|
+
customMixin$5
|
2792
2812
|
)(
|
2793
2813
|
createProxy({
|
2794
2814
|
slots: [],
|
@@ -2859,15 +2879,15 @@ const PasscodeClass = compose(
|
|
2859
2879
|
${resetInputCursor('vaadin-text-field')}
|
2860
2880
|
`,
|
2861
2881
|
excludeAttrsSync: ['tabindex'],
|
2862
|
-
componentName: componentName$
|
2882
|
+
componentName: componentName$h,
|
2863
2883
|
})
|
2864
2884
|
);
|
2865
2885
|
|
2866
|
-
customElements.define(componentName$
|
2886
|
+
customElements.define(componentName$i, TextFieldClass);
|
2867
2887
|
|
2868
|
-
customElements.define(componentName$
|
2888
|
+
customElements.define(componentName$j, PasscodeInternal);
|
2869
2889
|
|
2870
|
-
customElements.define(componentName$
|
2890
|
+
customElements.define(componentName$h, PasscodeClass);
|
2871
2891
|
|
2872
2892
|
const passwordDraggableMixin = (superclass) =>
|
2873
2893
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2903,7 +2923,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2903
2923
|
}
|
2904
2924
|
};
|
2905
2925
|
|
2906
|
-
const componentName$
|
2926
|
+
const componentName$g = getComponentName('password');
|
2907
2927
|
|
2908
2928
|
const {
|
2909
2929
|
host: host$7,
|
@@ -3032,13 +3052,13 @@ const PasswordClass = compose(
|
|
3032
3052
|
}
|
3033
3053
|
`,
|
3034
3054
|
excludeAttrsSync: ['tabindex'],
|
3035
|
-
componentName: componentName$
|
3055
|
+
componentName: componentName$g,
|
3036
3056
|
})
|
3037
3057
|
);
|
3038
3058
|
|
3039
|
-
customElements.define(componentName$
|
3059
|
+
customElements.define(componentName$g, PasswordClass);
|
3040
3060
|
|
3041
|
-
const componentName$
|
3061
|
+
const componentName$f = getComponentName('text-area');
|
3042
3062
|
|
3043
3063
|
const {
|
3044
3064
|
host: host$6,
|
@@ -3111,17 +3131,17 @@ const TextAreaClass = compose(
|
|
3111
3131
|
${resetInputCursor('vaadin-text-area')}
|
3112
3132
|
`,
|
3113
3133
|
excludeAttrsSync: ['tabindex'],
|
3114
|
-
componentName: componentName$
|
3134
|
+
componentName: componentName$f,
|
3115
3135
|
})
|
3116
3136
|
);
|
3117
3137
|
|
3118
|
-
customElements.define(componentName$
|
3138
|
+
customElements.define(componentName$f, TextAreaClass);
|
3119
3139
|
|
3120
3140
|
const observedAttributes$3 = ['src', 'alt'];
|
3121
3141
|
|
3122
|
-
const componentName$
|
3142
|
+
const componentName$e = getComponentName('image');
|
3123
3143
|
|
3124
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3144
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$e, baseSelector: ':host > img' });
|
3125
3145
|
class RawImage extends BaseClass$1 {
|
3126
3146
|
static get observedAttributes() {
|
3127
3147
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3161,9 +3181,9 @@ const ImageClass = compose(
|
|
3161
3181
|
draggableMixin
|
3162
3182
|
)(RawImage);
|
3163
3183
|
|
3164
|
-
customElements.define(componentName$
|
3184
|
+
customElements.define(componentName$e, ImageClass);
|
3165
3185
|
|
3166
|
-
const componentName$
|
3186
|
+
const componentName$d = getComponentName('combo-box');
|
3167
3187
|
|
3168
3188
|
const ComboBoxMixin = (superclass) =>
|
3169
3189
|
class ComboBoxMixinClass extends superclass {
|
@@ -3514,12 +3534,12 @@ const ComboBoxClass = compose(
|
|
3514
3534
|
// and reset items to an empty array, and opening the list box with no items
|
3515
3535
|
// to display.
|
3516
3536
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3517
|
-
componentName: componentName$
|
3537
|
+
componentName: componentName$d,
|
3518
3538
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3519
3539
|
})
|
3520
3540
|
);
|
3521
3541
|
|
3522
|
-
customElements.define(componentName$
|
3542
|
+
customElements.define(componentName$d, ComboBoxClass);
|
3523
3543
|
|
3524
3544
|
var CountryCodes = [
|
3525
3545
|
{
|
@@ -4759,7 +4779,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4759
4779
|
</div>
|
4760
4780
|
`;
|
4761
4781
|
|
4762
|
-
const componentName$
|
4782
|
+
const componentName$c = getComponentName('phone-field-internal');
|
4763
4783
|
|
4764
4784
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4765
4785
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4771,7 +4791,7 @@ const mapAttrs$1 = {
|
|
4771
4791
|
|
4772
4792
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4773
4793
|
|
4774
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4794
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
|
4775
4795
|
|
4776
4796
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4777
4797
|
static get observedAttributes() {
|
@@ -4943,14 +4963,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4943
4963
|
}
|
4944
4964
|
};
|
4945
4965
|
|
4946
|
-
customElements.define(componentName$
|
4966
|
+
customElements.define(componentName$c, PhoneFieldInternal$1);
|
4947
4967
|
|
4948
4968
|
const textVars$1 = TextFieldClass.cssVarList;
|
4949
4969
|
const comboVars = ComboBoxClass.cssVarList;
|
4950
4970
|
|
4951
|
-
const componentName$
|
4971
|
+
const componentName$b = getComponentName('phone-field');
|
4952
4972
|
|
4953
|
-
const customMixin$
|
4973
|
+
const customMixin$4 = (superclass) =>
|
4954
4974
|
class PhoneFieldMixinClass extends superclass {
|
4955
4975
|
static get CountryCodes() {
|
4956
4976
|
return CountryCodes;
|
@@ -4962,15 +4982,15 @@ const customMixin$3 = (superclass) =>
|
|
4962
4982
|
const template = document.createElement('template');
|
4963
4983
|
|
4964
4984
|
template.innerHTML = `
|
4965
|
-
<${componentName$
|
4985
|
+
<${componentName$c}
|
4966
4986
|
tabindex="-1"
|
4967
4987
|
slot="input"
|
4968
|
-
></${componentName$
|
4988
|
+
></${componentName$c}>
|
4969
4989
|
`;
|
4970
4990
|
|
4971
4991
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4972
4992
|
|
4973
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4993
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
4974
4994
|
|
4975
4995
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4976
4996
|
includeAttrs: [
|
@@ -5089,7 +5109,7 @@ const PhoneFieldClass = compose(
|
|
5089
5109
|
}),
|
5090
5110
|
draggableMixin,
|
5091
5111
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5092
|
-
customMixin$
|
5112
|
+
customMixin$4
|
5093
5113
|
)(
|
5094
5114
|
createProxy({
|
5095
5115
|
slots: [],
|
@@ -5165,17 +5185,17 @@ const PhoneFieldClass = compose(
|
|
5165
5185
|
}
|
5166
5186
|
`,
|
5167
5187
|
excludeAttrsSync: ['tabindex'],
|
5168
|
-
componentName: componentName$
|
5188
|
+
componentName: componentName$b,
|
5169
5189
|
})
|
5170
5190
|
);
|
5171
5191
|
|
5172
|
-
customElements.define(componentName$
|
5192
|
+
customElements.define(componentName$b, PhoneFieldClass);
|
5173
5193
|
|
5174
5194
|
const getCountryByCodeId = (countryCode) => {
|
5175
5195
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5176
5196
|
};
|
5177
5197
|
|
5178
|
-
const componentName$
|
5198
|
+
const componentName$a = getComponentName('phone-field-internal-input-box');
|
5179
5199
|
|
5180
5200
|
const observedAttributes$2 = [
|
5181
5201
|
'disabled',
|
@@ -5189,7 +5209,7 @@ const mapAttrs = {
|
|
5189
5209
|
'phone-input-placeholder': 'placeholder',
|
5190
5210
|
};
|
5191
5211
|
|
5192
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5212
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
|
5193
5213
|
|
5194
5214
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5195
5215
|
static get observedAttributes() {
|
@@ -5328,13 +5348,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5328
5348
|
}
|
5329
5349
|
}
|
5330
5350
|
|
5331
|
-
customElements.define(componentName$
|
5351
|
+
customElements.define(componentName$a, PhoneFieldInternal);
|
5332
5352
|
|
5333
5353
|
const textVars = TextFieldClass.cssVarList;
|
5334
5354
|
|
5335
|
-
const componentName$
|
5355
|
+
const componentName$9 = getComponentName('phone-input-box-field');
|
5336
5356
|
|
5337
|
-
const customMixin$
|
5357
|
+
const customMixin$3 = (superclass) =>
|
5338
5358
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5339
5359
|
static get CountryCodes() {
|
5340
5360
|
return CountryCodes;
|
@@ -5346,15 +5366,15 @@ const customMixin$2 = (superclass) =>
|
|
5346
5366
|
const template = document.createElement('template');
|
5347
5367
|
|
5348
5368
|
template.innerHTML = `
|
5349
|
-
<${componentName$
|
5369
|
+
<${componentName$a}
|
5350
5370
|
tabindex="-1"
|
5351
5371
|
slot="input"
|
5352
|
-
></${componentName$
|
5372
|
+
></${componentName$a}>
|
5353
5373
|
`;
|
5354
5374
|
|
5355
5375
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5356
5376
|
|
5357
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5377
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
5358
5378
|
|
5359
5379
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5360
5380
|
includeAttrs: [
|
@@ -5420,7 +5440,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5420
5440
|
}),
|
5421
5441
|
draggableMixin,
|
5422
5442
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5423
|
-
customMixin$
|
5443
|
+
customMixin$3
|
5424
5444
|
)(
|
5425
5445
|
createProxy({
|
5426
5446
|
slots: [],
|
@@ -5486,17 +5506,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5486
5506
|
}
|
5487
5507
|
`,
|
5488
5508
|
excludeAttrsSync: ['tabindex'],
|
5489
|
-
componentName: componentName$
|
5509
|
+
componentName: componentName$9,
|
5490
5510
|
})
|
5491
5511
|
);
|
5492
5512
|
|
5493
|
-
customElements.define(componentName$
|
5513
|
+
customElements.define(componentName$9, PhoneFieldInputBoxClass);
|
5494
5514
|
|
5495
|
-
const componentName$
|
5515
|
+
const componentName$8 = getComponentName('new-password-internal');
|
5496
5516
|
|
5497
|
-
const componentName$
|
5517
|
+
const componentName$7 = getComponentName('new-password');
|
5498
5518
|
|
5499
|
-
const customMixin$
|
5519
|
+
const customMixin$2 = (superclass) =>
|
5500
5520
|
class NewPasswordMixinClass extends superclass {
|
5501
5521
|
init() {
|
5502
5522
|
super.init?.();
|
@@ -5504,16 +5524,16 @@ const customMixin$1 = (superclass) =>
|
|
5504
5524
|
const template = document.createElement('template');
|
5505
5525
|
|
5506
5526
|
template.innerHTML = `
|
5507
|
-
<${componentName$
|
5527
|
+
<${componentName$8}
|
5508
5528
|
name="new-password"
|
5509
5529
|
tabindex="-1"
|
5510
5530
|
slot="input"
|
5511
|
-
></${componentName$
|
5531
|
+
></${componentName$8}>
|
5512
5532
|
`;
|
5513
5533
|
|
5514
5534
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5515
5535
|
|
5516
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5536
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
5517
5537
|
|
5518
5538
|
forwardAttrs(this, this.inputElement, {
|
5519
5539
|
includeAttrs: [
|
@@ -5563,7 +5583,7 @@ const NewPasswordClass = compose(
|
|
5563
5583
|
}),
|
5564
5584
|
draggableMixin,
|
5565
5585
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5566
|
-
customMixin$
|
5586
|
+
customMixin$2
|
5567
5587
|
)(
|
5568
5588
|
createProxy({
|
5569
5589
|
slots: [],
|
@@ -5612,7 +5632,7 @@ const NewPasswordClass = compose(
|
|
5612
5632
|
},
|
5613
5633
|
`,
|
5614
5634
|
excludeAttrsSync: ['tabindex'],
|
5615
|
-
componentName: componentName$
|
5635
|
+
componentName: componentName$7,
|
5616
5636
|
})
|
5617
5637
|
);
|
5618
5638
|
|
@@ -5637,7 +5657,7 @@ const commonAttrs = [
|
|
5637
5657
|
|
5638
5658
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5639
5659
|
|
5640
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5660
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
|
5641
5661
|
|
5642
5662
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5643
5663
|
static get observedAttributes() {
|
@@ -5797,16 +5817,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5797
5817
|
}
|
5798
5818
|
}
|
5799
5819
|
|
5800
|
-
customElements.define(componentName$
|
5820
|
+
customElements.define(componentName$8, NewPasswordInternal);
|
5801
5821
|
|
5802
|
-
customElements.define(componentName$
|
5822
|
+
customElements.define(componentName$7, NewPasswordClass);
|
5803
5823
|
|
5804
|
-
const componentName$
|
5824
|
+
const componentName$6 = getComponentName('recaptcha');
|
5805
5825
|
|
5806
5826
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5807
5827
|
|
5808
5828
|
const BaseClass = createBaseClass({
|
5809
|
-
componentName: componentName$
|
5829
|
+
componentName: componentName$6,
|
5810
5830
|
baseSelector: ':host > div',
|
5811
5831
|
});
|
5812
5832
|
class RawRecaptcha extends BaseClass {
|
@@ -5958,7 +5978,7 @@ class RawRecaptcha extends BaseClass {
|
|
5958
5978
|
|
5959
5979
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
5960
5980
|
|
5961
|
-
customElements.define(componentName$
|
5981
|
+
customElements.define(componentName$6, RecaptchaClass);
|
5962
5982
|
|
5963
5983
|
const getFileBase64 = (fileObj) => {
|
5964
5984
|
return new Promise((resolve) => {
|
@@ -5972,7 +5992,7 @@ const getFilename = (fileObj) => {
|
|
5972
5992
|
return fileObj.name.replace(/^.*\\/, '');
|
5973
5993
|
};
|
5974
5994
|
|
5975
|
-
const componentName$
|
5995
|
+
const componentName$5 = getComponentName('upload-file');
|
5976
5996
|
|
5977
5997
|
const observedAttributes = [
|
5978
5998
|
'title',
|
@@ -5987,7 +6007,7 @@ const observedAttributes = [
|
|
5987
6007
|
'icon',
|
5988
6008
|
];
|
5989
6009
|
|
5990
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6010
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: ':host > div' });
|
5991
6011
|
|
5992
6012
|
class RawUploadFile extends BaseInputClass {
|
5993
6013
|
static get observedAttributes() {
|
@@ -6197,12 +6217,12 @@ const UploadFileClass = compose(
|
|
6197
6217
|
componentNameValidationMixin
|
6198
6218
|
)(RawUploadFile);
|
6199
6219
|
|
6200
|
-
customElements.define(componentName$
|
6220
|
+
customElements.define(componentName$5, UploadFileClass);
|
6201
6221
|
|
6202
|
-
const componentName$
|
6222
|
+
const componentName$4 = getComponentName('button-selection-group-internal');
|
6203
6223
|
|
6204
6224
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6205
|
-
componentName: componentName$
|
6225
|
+
componentName: componentName$4,
|
6206
6226
|
baseSelector: 'slot',
|
6207
6227
|
}) {
|
6208
6228
|
constructor() {
|
@@ -6339,9 +6359,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6339
6359
|
}
|
6340
6360
|
}
|
6341
6361
|
|
6342
|
-
const componentName$
|
6362
|
+
const componentName$3 = getComponentName('button-selection-group');
|
6343
6363
|
|
6344
|
-
const customMixin = (superclass) =>
|
6364
|
+
const customMixin$1 = (superclass) =>
|
6345
6365
|
class ButtonSelectionGroupMixinClass extends superclass {
|
6346
6366
|
// eslint-disable-next-line class-methods-use-this
|
6347
6367
|
#renderItem = ({ value, label }) =>
|
@@ -6414,18 +6434,18 @@ const customMixin = (superclass) =>
|
|
6414
6434
|
const template = document.createElement('template');
|
6415
6435
|
|
6416
6436
|
template.innerHTML = `
|
6417
|
-
<${componentName$
|
6437
|
+
<${componentName$4}
|
6418
6438
|
name="button-selection-group"
|
6419
6439
|
slot="input"
|
6420
6440
|
tabindex="-1"
|
6421
6441
|
>
|
6422
6442
|
<slot></slot>
|
6423
|
-
</${componentName$
|
6443
|
+
</${componentName$4}>
|
6424
6444
|
`;
|
6425
6445
|
|
6426
6446
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6427
6447
|
|
6428
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6448
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$4);
|
6429
6449
|
|
6430
6450
|
forwardAttrs(this, this.inputElement, {
|
6431
6451
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6469,7 +6489,7 @@ const ButtonSelectionGroupClass = compose(
|
|
6469
6489
|
draggableMixin,
|
6470
6490
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6471
6491
|
componentNameValidationMixin,
|
6472
|
-
customMixin
|
6492
|
+
customMixin$1
|
6473
6493
|
)(
|
6474
6494
|
createProxy({
|
6475
6495
|
slots: [],
|
@@ -6528,18 +6548,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6528
6548
|
${resetInputCursor('vaadin-text-field')}
|
6529
6549
|
`,
|
6530
6550
|
excludeAttrsSync: ['tabindex'],
|
6531
|
-
componentName: componentName$
|
6551
|
+
componentName: componentName$3,
|
6532
6552
|
})
|
6533
6553
|
);
|
6534
6554
|
|
6535
|
-
customElements.define(componentName$
|
6555
|
+
customElements.define(componentName$4, ButtonSelectionGroupInternalClass);
|
6536
6556
|
|
6537
|
-
customElements.define(componentName$
|
6557
|
+
customElements.define(componentName$3, ButtonSelectionGroupClass);
|
6538
6558
|
|
6539
|
-
const componentName$
|
6559
|
+
const componentName$2 = getComponentName('button-selection-group-item');
|
6540
6560
|
|
6541
6561
|
class RawSelectItem extends createBaseClass({
|
6542
|
-
componentName: componentName$
|
6562
|
+
componentName: componentName$2,
|
6543
6563
|
baseSelector: ':host > descope-button',
|
6544
6564
|
}) {
|
6545
6565
|
get size() {
|
@@ -6633,7 +6653,7 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6633
6653
|
componentNameValidationMixin
|
6634
6654
|
)(RawSelectItem);
|
6635
6655
|
|
6636
|
-
customElements.define(componentName$
|
6656
|
+
customElements.define(componentName$2, ButtonSelectionGroupItemClass);
|
6637
6657
|
|
6638
6658
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
6639
6659
|
|
@@ -6961,10 +6981,10 @@ const globals = {
|
|
6961
6981
|
shadow,
|
6962
6982
|
fonts,
|
6963
6983
|
};
|
6964
|
-
const vars$
|
6984
|
+
const vars$s = getThemeVars(globals);
|
6965
6985
|
|
6966
6986
|
const globalRefs$d = getThemeRefs(globals);
|
6967
|
-
const compVars$
|
6987
|
+
const compVars$4 = ButtonClass.cssVarList;
|
6968
6988
|
|
6969
6989
|
const mode = {
|
6970
6990
|
primary: globalRefs$d.colors.primary,
|
@@ -6974,111 +6994,118 @@ const mode = {
|
|
6974
6994
|
surface: globalRefs$d.colors.surface,
|
6975
6995
|
};
|
6976
6996
|
|
6977
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
6997
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$x);
|
6978
6998
|
|
6979
6999
|
const button = {
|
6980
7000
|
...helperTheme$3,
|
6981
7001
|
|
6982
|
-
[compVars$
|
7002
|
+
[compVars$4.fontFamily]: globalRefs$d.fonts.font1.family,
|
6983
7003
|
|
6984
|
-
[compVars$
|
6985
|
-
[compVars$
|
6986
|
-
[compVars$
|
7004
|
+
[compVars$4.cursor]: 'pointer',
|
7005
|
+
[compVars$4.hostHeight]: '3em',
|
7006
|
+
[compVars$4.hostWidth]: 'auto',
|
6987
7007
|
|
6988
|
-
[compVars$
|
6989
|
-
[compVars$
|
6990
|
-
[compVars$
|
6991
|
-
[compVars$
|
7008
|
+
[compVars$4.borderRadius]: globalRefs$d.radius.sm,
|
7009
|
+
[compVars$4.borderWidth]: globalRefs$d.border.xs,
|
7010
|
+
[compVars$4.borderStyle]: 'solid',
|
7011
|
+
[compVars$4.borderColor]: 'transparent',
|
6992
7012
|
|
6993
|
-
[compVars$
|
7013
|
+
[compVars$4.labelSpacing]: '0.25em',
|
6994
7014
|
|
6995
|
-
[compVars$
|
7015
|
+
[compVars$4.verticalPadding]: '1em',
|
6996
7016
|
|
6997
|
-
[compVars$
|
6998
|
-
[compVars$
|
6999
|
-
[compVars$
|
7000
|
-
[compVars$
|
7017
|
+
[compVars$4.outlineWidth]: globals.border.sm,
|
7018
|
+
[compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
|
7019
|
+
[compVars$4.outlineStyle]: 'solid',
|
7020
|
+
[compVars$4.outlineColor]: 'transparent',
|
7001
7021
|
|
7002
7022
|
size: {
|
7003
|
-
xs: { [compVars$
|
7004
|
-
sm: { [compVars$
|
7005
|
-
md: { [compVars$
|
7006
|
-
lg: { [compVars$
|
7023
|
+
xs: { [compVars$4.fontSize]: '12px' },
|
7024
|
+
sm: { [compVars$4.fontSize]: '14px' },
|
7025
|
+
md: { [compVars$4.fontSize]: '16px' },
|
7026
|
+
lg: { [compVars$4.fontSize]: '18px' },
|
7007
7027
|
},
|
7008
7028
|
|
7009
7029
|
_square: {
|
7010
|
-
[compVars$
|
7011
|
-
[compVars$
|
7012
|
-
[compVars$
|
7030
|
+
[compVars$4.hostHeight]: '3em',
|
7031
|
+
[compVars$4.hostWidth]: '3em',
|
7032
|
+
[compVars$4.verticalPadding]: '0',
|
7013
7033
|
},
|
7014
7034
|
|
7015
7035
|
_fullWidth: {
|
7016
|
-
[compVars$
|
7036
|
+
[compVars$4.hostWidth]: '100%',
|
7017
7037
|
},
|
7018
7038
|
|
7019
7039
|
_loading: {
|
7020
|
-
[compVars$
|
7021
|
-
[compVars$
|
7040
|
+
[compVars$4.cursor]: 'wait',
|
7041
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7042
|
+
},
|
7043
|
+
|
7044
|
+
_disabled: {
|
7045
|
+
[helperVars$3.main]: globalRefs$d.colors.surface.main,
|
7046
|
+
[helperVars$3.dark]: globalRefs$d.colors.surface.dark,
|
7047
|
+
[helperVars$3.light]: globalRefs$d.colors.surface.light,
|
7048
|
+
[helperVars$3.contrast]: globalRefs$d.colors.surface.contrast,
|
7022
7049
|
},
|
7023
7050
|
|
7024
7051
|
variant: {
|
7025
7052
|
contained: {
|
7026
|
-
[compVars$
|
7027
|
-
[compVars$
|
7053
|
+
[compVars$4.labelTextColor]: helperRefs$3.contrast,
|
7054
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7028
7055
|
_hover: {
|
7029
|
-
[compVars$
|
7056
|
+
[compVars$4.backgroundColor]: helperRefs$3.dark,
|
7030
7057
|
_loading: {
|
7031
|
-
[compVars$
|
7058
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7032
7059
|
},
|
7033
7060
|
},
|
7034
7061
|
_active: {
|
7035
|
-
[compVars$
|
7062
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7036
7063
|
},
|
7037
7064
|
},
|
7038
7065
|
|
7039
7066
|
outline: {
|
7040
|
-
[compVars$
|
7041
|
-
[compVars$
|
7067
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7068
|
+
[compVars$4.borderColor]: 'currentColor',
|
7042
7069
|
_hover: {
|
7043
|
-
[compVars$
|
7070
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7044
7071
|
},
|
7045
7072
|
_active: {
|
7046
|
-
[compVars$
|
7073
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7047
7074
|
},
|
7048
7075
|
},
|
7049
7076
|
|
7050
7077
|
link: {
|
7051
|
-
[compVars$
|
7078
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7052
7079
|
_hover: {
|
7053
|
-
[compVars$
|
7054
|
-
[compVars$
|
7080
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7081
|
+
[compVars$4.labelTextDecoration]: 'underline',
|
7055
7082
|
},
|
7056
7083
|
_active: {
|
7057
|
-
[compVars$
|
7084
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7058
7085
|
},
|
7059
7086
|
},
|
7060
7087
|
},
|
7061
7088
|
|
7062
7089
|
_focused: {
|
7063
|
-
[compVars$
|
7090
|
+
[compVars$4.outlineColor]: globalRefs$d.colors.surface.main,
|
7064
7091
|
},
|
7065
7092
|
};
|
7066
7093
|
|
7067
|
-
const vars$
|
7068
|
-
...compVars$
|
7094
|
+
const vars$r = {
|
7095
|
+
...compVars$4,
|
7069
7096
|
...helperVars$3,
|
7070
7097
|
};
|
7071
7098
|
|
7072
7099
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7073
7100
|
__proto__: null,
|
7074
7101
|
default: button,
|
7075
|
-
vars: vars$
|
7102
|
+
vars: vars$r
|
7076
7103
|
});
|
7077
7104
|
|
7078
|
-
const componentName = getComponentName('input-wrapper');
|
7105
|
+
const componentName$1 = getComponentName('input-wrapper');
|
7079
7106
|
const globalRefs$c = getThemeRefs(globals);
|
7080
7107
|
|
7081
|
-
const [theme$1, refs, vars$
|
7108
|
+
const [theme$1, refs, vars$q] = createHelperVars(
|
7082
7109
|
{
|
7083
7110
|
labelTextColor: globalRefs$c.colors.surface.contrast,
|
7084
7111
|
valueTextColor: globalRefs$c.colors.surface.contrast,
|
@@ -7140,28 +7167,63 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
7140
7167
|
backgroundColor: globalRefs$c.colors.surface.main,
|
7141
7168
|
},
|
7142
7169
|
},
|
7143
|
-
componentName
|
7170
|
+
componentName$1
|
7144
7171
|
);
|
7145
7172
|
|
7146
7173
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7147
7174
|
__proto__: null,
|
7148
7175
|
default: theme$1,
|
7149
7176
|
refs: refs,
|
7150
|
-
vars: vars$
|
7177
|
+
vars: vars$q
|
7151
7178
|
});
|
7152
7179
|
|
7153
|
-
const vars$
|
7180
|
+
const vars$p = TextFieldClass.cssVarList;
|
7154
7181
|
|
7155
7182
|
const textField = {
|
7183
|
+
[vars$p.hostWidth]: refs.width,
|
7184
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
7185
|
+
[vars$p.fontSize]: refs.fontSize,
|
7186
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
7187
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
7188
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7189
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7190
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7191
|
+
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
7192
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7193
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7194
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
7195
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
7196
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
7197
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7198
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7199
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7200
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7201
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
7202
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7203
|
+
};
|
7204
|
+
|
7205
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7206
|
+
__proto__: null,
|
7207
|
+
default: textField,
|
7208
|
+
textField: textField,
|
7209
|
+
vars: vars$p
|
7210
|
+
});
|
7211
|
+
|
7212
|
+
const globalRefs$b = getThemeRefs(globals);
|
7213
|
+
const vars$o = PasswordClass.cssVarList;
|
7214
|
+
|
7215
|
+
const password = {
|
7156
7216
|
[vars$o.hostWidth]: refs.width,
|
7157
|
-
[vars$o.hostMinWidth]: refs.minWidth,
|
7158
7217
|
[vars$o.fontSize]: refs.fontSize,
|
7159
7218
|
[vars$o.fontFamily]: refs.fontFamily,
|
7160
7219
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7161
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7162
7220
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7221
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
7222
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
7223
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7224
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7163
7225
|
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7164
|
-
[vars$o.
|
7226
|
+
[vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7165
7227
|
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7166
7228
|
[vars$o.inputBorderStyle]: refs.borderStyle,
|
7167
7229
|
[vars$o.inputBorderColor]: refs.borderColor,
|
@@ -7170,33 +7232,27 @@ const textField = {
|
|
7170
7232
|
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
7171
7233
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7172
7234
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7173
|
-
[vars$o.
|
7174
|
-
[vars$o.
|
7175
|
-
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
7235
|
+
[vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
|
7236
|
+
[vars$o.revealButtonSize]: refs.toggleButtonSize,
|
7176
7237
|
};
|
7177
7238
|
|
7178
|
-
var
|
7239
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7179
7240
|
__proto__: null,
|
7180
|
-
default:
|
7181
|
-
textField: textField,
|
7241
|
+
default: password,
|
7182
7242
|
vars: vars$o
|
7183
7243
|
});
|
7184
7244
|
|
7185
|
-
const
|
7186
|
-
const vars$n = PasswordClass.cssVarList;
|
7245
|
+
const vars$n = NumberFieldClass.cssVarList;
|
7187
7246
|
|
7188
|
-
const
|
7247
|
+
const numberField = {
|
7189
7248
|
[vars$n.hostWidth]: refs.width,
|
7249
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
7190
7250
|
[vars$n.fontSize]: refs.fontSize,
|
7191
7251
|
[vars$n.fontFamily]: refs.fontFamily,
|
7192
7252
|
[vars$n.labelTextColor]: refs.labelTextColor,
|
7193
7253
|
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7194
|
-
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
7195
|
-
[vars$n.inputHeight]: refs.inputHeight,
|
7196
|
-
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7197
|
-
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7198
7254
|
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7199
|
-
[vars$n.
|
7255
|
+
[vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
|
7200
7256
|
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7201
7257
|
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7202
7258
|
[vars$n.inputBorderColor]: refs.borderColor,
|
@@ -7205,19 +7261,21 @@ const password = {
|
|
7205
7261
|
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7206
7262
|
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7207
7263
|
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7208
|
-
[vars$n.
|
7209
|
-
[vars$n.
|
7264
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7265
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7266
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
7267
|
+
[vars$n.inputHeight]: refs.inputHeight,
|
7210
7268
|
};
|
7211
7269
|
|
7212
|
-
var
|
7270
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7213
7271
|
__proto__: null,
|
7214
|
-
default:
|
7272
|
+
default: numberField,
|
7215
7273
|
vars: vars$n
|
7216
7274
|
});
|
7217
7275
|
|
7218
|
-
const vars$m =
|
7276
|
+
const vars$m = EmailFieldClass.cssVarList;
|
7219
7277
|
|
7220
|
-
const
|
7278
|
+
const emailField = {
|
7221
7279
|
[vars$m.hostWidth]: refs.width,
|
7222
7280
|
[vars$m.hostMinWidth]: refs.minWidth,
|
7223
7281
|
[vars$m.fontSize]: refs.fontSize,
|
@@ -7225,6 +7283,7 @@ const numberField = {
|
|
7225
7283
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
7226
7284
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7227
7285
|
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
7286
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7228
7287
|
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
7229
7288
|
[vars$m.inputBorderWidth]: refs.borderWidth,
|
7230
7289
|
[vars$m.inputBorderStyle]: refs.borderStyle,
|
@@ -7235,199 +7294,167 @@ const numberField = {
|
|
7235
7294
|
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7236
7295
|
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7237
7296
|
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
7238
|
-
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7239
7297
|
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
7240
7298
|
[vars$m.inputHeight]: refs.inputHeight,
|
7241
7299
|
};
|
7242
7300
|
|
7243
|
-
var
|
7301
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7244
7302
|
__proto__: null,
|
7245
|
-
default:
|
7303
|
+
default: emailField,
|
7246
7304
|
vars: vars$m
|
7247
7305
|
});
|
7248
7306
|
|
7249
|
-
const
|
7307
|
+
const globalRefs$a = getThemeRefs(globals);
|
7308
|
+
const vars$l = TextAreaClass.cssVarList;
|
7250
7309
|
|
7251
|
-
const
|
7310
|
+
const textArea = {
|
7252
7311
|
[vars$l.hostWidth]: refs.width,
|
7253
7312
|
[vars$l.hostMinWidth]: refs.minWidth,
|
7254
7313
|
[vars$l.fontSize]: refs.fontSize,
|
7255
7314
|
[vars$l.fontFamily]: refs.fontFamily,
|
7256
7315
|
[vars$l.labelTextColor]: refs.labelTextColor,
|
7316
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7257
7317
|
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7318
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
7258
7319
|
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
7259
|
-
[vars$l.
|
7260
|
-
[vars$l.
|
7320
|
+
[vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7321
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7261
7322
|
[vars$l.inputBorderWidth]: refs.borderWidth,
|
7262
7323
|
[vars$l.inputBorderStyle]: refs.borderStyle,
|
7263
7324
|
[vars$l.inputBorderColor]: refs.borderColor,
|
7264
|
-
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7265
7325
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7266
7326
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7267
7327
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7268
7328
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7269
|
-
[vars$l.
|
7270
|
-
[vars$l.
|
7271
|
-
|
7329
|
+
[vars$l.inputResizeType]: 'vertical',
|
7330
|
+
[vars$l.inputMinHeight]: '5em',
|
7331
|
+
|
7332
|
+
_disabled: {
|
7333
|
+
[vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
7334
|
+
},
|
7335
|
+
|
7336
|
+
_readonly: {
|
7337
|
+
[vars$l.inputResizeType]: 'none',
|
7338
|
+
},
|
7272
7339
|
};
|
7273
7340
|
|
7274
|
-
var
|
7341
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7275
7342
|
__proto__: null,
|
7276
|
-
default:
|
7343
|
+
default: textArea,
|
7277
7344
|
vars: vars$l
|
7278
7345
|
});
|
7279
7346
|
|
7280
|
-
const
|
7281
|
-
const
|
7347
|
+
const vars$k = CheckboxClass.cssVarList;
|
7348
|
+
const checkboxSize = '1.35em';
|
7282
7349
|
|
7283
|
-
const
|
7350
|
+
const checkbox = {
|
7284
7351
|
[vars$k.hostWidth]: refs.width,
|
7285
|
-
[vars$k.hostMinWidth]: refs.minWidth,
|
7286
7352
|
[vars$k.fontSize]: refs.fontSize,
|
7287
7353
|
[vars$k.fontFamily]: refs.fontFamily,
|
7288
7354
|
[vars$k.labelTextColor]: refs.labelTextColor,
|
7289
7355
|
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
7356
|
+
[vars$k.labelFontWeight]: '400',
|
7357
|
+
[vars$k.labelLineHeight]: checkboxSize,
|
7358
|
+
[vars$k.labelSpacing]: '1em',
|
7290
7359
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
7291
|
-
[vars$k.
|
7292
|
-
[vars$k.
|
7293
|
-
[vars$k.
|
7360
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
7361
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7362
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7363
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7294
7364
|
[vars$k.inputBorderRadius]: refs.borderRadius,
|
7365
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
7295
7366
|
[vars$k.inputBorderWidth]: refs.borderWidth,
|
7296
7367
|
[vars$k.inputBorderStyle]: refs.borderStyle,
|
7297
|
-
[vars$k.
|
7298
|
-
[vars$k.
|
7299
|
-
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7300
|
-
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7301
|
-
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7302
|
-
[vars$k.inputResizeType]: 'vertical',
|
7303
|
-
[vars$k.inputMinHeight]: '5em',
|
7368
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
7369
|
+
[vars$k.inputSize]: checkboxSize,
|
7304
7370
|
|
7305
|
-
|
7306
|
-
[vars$k.
|
7371
|
+
_checked: {
|
7372
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
7307
7373
|
},
|
7308
7374
|
|
7309
|
-
|
7310
|
-
[vars$k.
|
7375
|
+
_disabled: {
|
7376
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
7311
7377
|
},
|
7312
7378
|
};
|
7313
7379
|
|
7314
|
-
var
|
7380
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7315
7381
|
__proto__: null,
|
7316
|
-
default:
|
7382
|
+
default: checkbox,
|
7317
7383
|
vars: vars$k
|
7318
7384
|
});
|
7319
7385
|
|
7320
|
-
const
|
7321
|
-
const
|
7386
|
+
const knobMargin = '2px';
|
7387
|
+
const checkboxHeight = '1.25em';
|
7322
7388
|
|
7323
|
-
const
|
7389
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7390
|
+
const vars$j = SwitchToggleClass.cssVarList;
|
7391
|
+
|
7392
|
+
const switchToggle = {
|
7324
7393
|
[vars$j.hostWidth]: refs.width,
|
7325
7394
|
[vars$j.fontSize]: refs.fontSize,
|
7326
7395
|
[vars$j.fontFamily]: refs.fontFamily,
|
7327
|
-
|
7328
|
-
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
7329
|
-
[vars$j.labelFontWeight]: '400',
|
7330
|
-
[vars$j.labelLineHeight]: checkboxSize,
|
7331
|
-
[vars$j.labelSpacing]: '1em',
|
7332
|
-
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
7396
|
+
|
7333
7397
|
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
7334
7398
|
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
7335
7399
|
[vars$j.inputOutlineColor]: refs.outlineColor,
|
7336
7400
|
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
7337
|
-
[vars$j.inputBorderRadius]: refs.borderRadius,
|
7338
|
-
[vars$j.inputBorderColor]: refs.borderColor,
|
7339
|
-
[vars$j.inputBorderWidth]: refs.borderWidth,
|
7340
|
-
[vars$j.inputBorderStyle]: refs.borderStyle,
|
7341
|
-
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
7342
|
-
[vars$j.inputSize]: checkboxSize,
|
7343
|
-
|
7344
|
-
_checked: {
|
7345
|
-
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
7346
|
-
},
|
7347
7401
|
|
7348
|
-
|
7349
|
-
|
7350
|
-
|
7351
|
-
|
7402
|
+
[vars$j.trackBorderStyle]: refs.borderStyle,
|
7403
|
+
[vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7404
|
+
[vars$j.trackBorderColor]: refs.borderColor,
|
7405
|
+
[vars$j.trackBackgroundColor]: 'none',
|
7406
|
+
[vars$j.trackBorderRadius]: globalRefs$9.radius.md,
|
7407
|
+
[vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7408
|
+
[vars$j.trackHeight]: checkboxHeight,
|
7409
|
+
|
7410
|
+
[vars$j.knobSize]: `calc(1em - ${knobMargin})`,
|
7411
|
+
[vars$j.knobRadius]: '50%',
|
7412
|
+
[vars$j.knobTopOffset]: '1px',
|
7413
|
+
[vars$j.knobLeftOffset]: knobMargin,
|
7414
|
+
[vars$j.knobColor]: refs.valueTextColor,
|
7415
|
+
[vars$j.knobTransitionDuration]: '0.3s',
|
7352
7416
|
|
7353
|
-
|
7354
|
-
|
7355
|
-
|
7356
|
-
vars:
|
7357
|
-
|
7358
|
-
|
7359
|
-
const knobMargin = '2px';
|
7360
|
-
const checkboxHeight = '1.25em';
|
7361
|
-
|
7362
|
-
const globalRefs$9 = getThemeRefs(globals);
|
7363
|
-
const vars$i = SwitchToggleClass.cssVarList;
|
7364
|
-
|
7365
|
-
const switchToggle = {
|
7366
|
-
[vars$i.hostWidth]: refs.width,
|
7367
|
-
[vars$i.fontSize]: refs.fontSize,
|
7368
|
-
[vars$i.fontFamily]: refs.fontFamily,
|
7369
|
-
|
7370
|
-
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
7371
|
-
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
7372
|
-
[vars$i.inputOutlineColor]: refs.outlineColor,
|
7373
|
-
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
7374
|
-
|
7375
|
-
[vars$i.trackBorderStyle]: refs.borderStyle,
|
7376
|
-
[vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7377
|
-
[vars$i.trackBorderColor]: refs.borderColor,
|
7378
|
-
[vars$i.trackBackgroundColor]: 'none',
|
7379
|
-
[vars$i.trackBorderRadius]: globalRefs$9.radius.md,
|
7380
|
-
[vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7381
|
-
[vars$i.trackHeight]: checkboxHeight,
|
7382
|
-
|
7383
|
-
[vars$i.knobSize]: `calc(1em - ${knobMargin})`,
|
7384
|
-
[vars$i.knobRadius]: '50%',
|
7385
|
-
[vars$i.knobTopOffset]: '1px',
|
7386
|
-
[vars$i.knobLeftOffset]: knobMargin,
|
7387
|
-
[vars$i.knobColor]: refs.valueTextColor,
|
7388
|
-
[vars$i.knobTransitionDuration]: '0.3s',
|
7389
|
-
|
7390
|
-
[vars$i.labelTextColor]: refs.labelTextColor,
|
7391
|
-
[vars$i.labelFontWeight]: '400',
|
7392
|
-
[vars$i.labelLineHeight]: '1.35em',
|
7393
|
-
[vars$i.labelSpacing]: '1em',
|
7394
|
-
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
7395
|
-
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
7417
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
7418
|
+
[vars$j.labelFontWeight]: '400',
|
7419
|
+
[vars$j.labelLineHeight]: '1.35em',
|
7420
|
+
[vars$j.labelSpacing]: '1em',
|
7421
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
7422
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
7396
7423
|
|
7397
7424
|
_checked: {
|
7398
|
-
[vars$
|
7399
|
-
[vars$
|
7400
|
-
[vars$
|
7401
|
-
[vars$
|
7402
|
-
[vars$
|
7425
|
+
[vars$j.trackBorderColor]: refs.borderColor,
|
7426
|
+
[vars$j.trackBackgroundColor]: refs.backgroundColor,
|
7427
|
+
[vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
|
7428
|
+
[vars$j.knobColor]: refs.valueTextColor,
|
7429
|
+
[vars$j.knobTextColor]: refs.valueTextColor,
|
7403
7430
|
},
|
7404
7431
|
|
7405
7432
|
_disabled: {
|
7406
|
-
[vars$
|
7407
|
-
[vars$
|
7408
|
-
[vars$
|
7409
|
-
[vars$
|
7433
|
+
[vars$j.knobColor]: globalRefs$9.colors.surface.light,
|
7434
|
+
[vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
|
7435
|
+
[vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
7436
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
7410
7437
|
_checked: {
|
7411
|
-
[vars$
|
7412
|
-
[vars$
|
7438
|
+
[vars$j.knobColor]: globalRefs$9.colors.surface.light,
|
7439
|
+
[vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
7413
7440
|
},
|
7414
7441
|
},
|
7415
7442
|
|
7416
7443
|
_invalid: {
|
7417
|
-
[vars$
|
7418
|
-
[vars$
|
7444
|
+
[vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
|
7445
|
+
[vars$j.knobColor]: globalRefs$9.colors.error.main,
|
7419
7446
|
},
|
7420
7447
|
};
|
7421
7448
|
|
7422
7449
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7423
7450
|
__proto__: null,
|
7424
7451
|
default: switchToggle,
|
7425
|
-
vars: vars$
|
7452
|
+
vars: vars$j
|
7426
7453
|
});
|
7427
7454
|
|
7428
7455
|
const globalRefs$8 = getThemeRefs(globals);
|
7429
7456
|
|
7430
|
-
const compVars$
|
7457
|
+
const compVars$3 = ContainerClass.cssVarList;
|
7431
7458
|
|
7432
7459
|
const verticalAlignment = {
|
7433
7460
|
start: { verticalAlignment: 'start' },
|
@@ -7447,7 +7474,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7447
7474
|
horizontalAlignment,
|
7448
7475
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7449
7476
|
},
|
7450
|
-
componentName$
|
7477
|
+
componentName$r
|
7451
7478
|
);
|
7452
7479
|
|
7453
7480
|
const { shadowColor } = helperRefs$2;
|
@@ -7455,30 +7482,30 @@ const { shadowColor } = helperRefs$2;
|
|
7455
7482
|
const container = {
|
7456
7483
|
...helperTheme$2,
|
7457
7484
|
|
7458
|
-
[compVars$
|
7459
|
-
[compVars$
|
7460
|
-
[compVars$
|
7461
|
-
[compVars$
|
7462
|
-
[compVars$
|
7485
|
+
[compVars$3.hostWidth]: '100%',
|
7486
|
+
[compVars$3.boxShadow]: 'none',
|
7487
|
+
[compVars$3.backgroundColor]: globalRefs$8.colors.surface.light,
|
7488
|
+
[compVars$3.color]: globalRefs$8.colors.surface.contrast,
|
7489
|
+
[compVars$3.borderRadius]: '0px',
|
7463
7490
|
|
7464
7491
|
verticalPadding: {
|
7465
|
-
sm: { [compVars$
|
7466
|
-
md: { [compVars$
|
7467
|
-
lg: { [compVars$
|
7492
|
+
sm: { [compVars$3.verticalPadding]: '5px' },
|
7493
|
+
md: { [compVars$3.verticalPadding]: '10px' },
|
7494
|
+
lg: { [compVars$3.verticalPadding]: '20px' },
|
7468
7495
|
},
|
7469
7496
|
|
7470
7497
|
horizontalPadding: {
|
7471
|
-
sm: { [compVars$
|
7472
|
-
md: { [compVars$
|
7473
|
-
lg: { [compVars$
|
7498
|
+
sm: { [compVars$3.horizontalPadding]: '5px' },
|
7499
|
+
md: { [compVars$3.horizontalPadding]: '10px' },
|
7500
|
+
lg: { [compVars$3.horizontalPadding]: '20px' },
|
7474
7501
|
},
|
7475
7502
|
|
7476
7503
|
direction: {
|
7477
7504
|
row: {
|
7478
|
-
[compVars$
|
7479
|
-
[compVars$
|
7480
|
-
[compVars$
|
7481
|
-
[compVars$
|
7505
|
+
[compVars$3.flexDirection]: 'row',
|
7506
|
+
[compVars$3.alignItems]: helperRefs$2.verticalAlignment,
|
7507
|
+
[compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
|
7508
|
+
[compVars$3.flexWrap]: 'wrap',
|
7482
7509
|
horizontalAlignment: {
|
7483
7510
|
spaceBetween: {
|
7484
7511
|
[helperVars$2.horizontalAlignment]: 'space-between',
|
@@ -7486,9 +7513,9 @@ const container = {
|
|
7486
7513
|
},
|
7487
7514
|
},
|
7488
7515
|
column: {
|
7489
|
-
[compVars$
|
7490
|
-
[compVars$
|
7491
|
-
[compVars$
|
7516
|
+
[compVars$3.flexDirection]: 'column',
|
7517
|
+
[compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
|
7518
|
+
[compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
|
7492
7519
|
verticalAlignment: {
|
7493
7520
|
spaceBetween: {
|
7494
7521
|
[helperVars$2.verticalAlignment]: 'space-between',
|
@@ -7498,194 +7525,194 @@ const container = {
|
|
7498
7525
|
},
|
7499
7526
|
|
7500
7527
|
spaceBetween: {
|
7501
|
-
sm: { [compVars$
|
7502
|
-
md: { [compVars$
|
7503
|
-
lg: { [compVars$
|
7528
|
+
sm: { [compVars$3.gap]: '10px' },
|
7529
|
+
md: { [compVars$3.gap]: '20px' },
|
7530
|
+
lg: { [compVars$3.gap]: '30px' },
|
7504
7531
|
},
|
7505
7532
|
|
7506
7533
|
shadow: {
|
7507
7534
|
sm: {
|
7508
|
-
[compVars$
|
7535
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
7509
7536
|
},
|
7510
7537
|
md: {
|
7511
|
-
[compVars$
|
7538
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
7512
7539
|
},
|
7513
7540
|
lg: {
|
7514
|
-
[compVars$
|
7541
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
7515
7542
|
},
|
7516
7543
|
xl: {
|
7517
|
-
[compVars$
|
7544
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
|
7518
7545
|
},
|
7519
7546
|
'2xl': {
|
7520
7547
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
7521
|
-
[compVars$
|
7548
|
+
[compVars$3.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
|
7522
7549
|
},
|
7523
7550
|
},
|
7524
7551
|
|
7525
7552
|
borderRadius: {
|
7526
|
-
sm: { [compVars$
|
7527
|
-
md: { [compVars$
|
7528
|
-
lg: { [compVars$
|
7529
|
-
xl: { [compVars$
|
7530
|
-
'2xl': { [compVars$
|
7531
|
-
'3xl': { [compVars$
|
7553
|
+
sm: { [compVars$3.borderRadius]: globalRefs$8.radius.sm },
|
7554
|
+
md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
|
7555
|
+
lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
|
7556
|
+
xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
|
7557
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
|
7558
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
|
7532
7559
|
},
|
7533
7560
|
};
|
7534
7561
|
|
7535
|
-
const vars$
|
7536
|
-
...compVars$
|
7562
|
+
const vars$i = {
|
7563
|
+
...compVars$3,
|
7537
7564
|
...helperVars$2,
|
7538
7565
|
};
|
7539
7566
|
|
7540
7567
|
var container$1 = /*#__PURE__*/Object.freeze({
|
7541
7568
|
__proto__: null,
|
7542
7569
|
default: container,
|
7543
|
-
vars: vars$
|
7570
|
+
vars: vars$i
|
7544
7571
|
});
|
7545
7572
|
|
7546
|
-
const vars$
|
7573
|
+
const vars$h = LogoClass.cssVarList;
|
7547
7574
|
|
7548
7575
|
const logo$1 = {
|
7549
|
-
[vars$
|
7576
|
+
[vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
7550
7577
|
};
|
7551
7578
|
|
7552
7579
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
7553
7580
|
__proto__: null,
|
7554
7581
|
default: logo$1,
|
7555
|
-
vars: vars$
|
7582
|
+
vars: vars$h
|
7556
7583
|
});
|
7557
7584
|
|
7558
|
-
const vars$
|
7585
|
+
const vars$g = TotpImageClass.cssVarList;
|
7559
7586
|
|
7560
7587
|
const logo = {
|
7561
|
-
[vars$
|
7588
|
+
[vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
7562
7589
|
};
|
7563
7590
|
|
7564
7591
|
var totpImage = /*#__PURE__*/Object.freeze({
|
7565
7592
|
__proto__: null,
|
7566
7593
|
default: logo,
|
7567
|
-
vars: vars$
|
7594
|
+
vars: vars$g
|
7568
7595
|
});
|
7569
7596
|
|
7570
7597
|
const globalRefs$7 = getThemeRefs(globals);
|
7571
|
-
const vars$
|
7598
|
+
const vars$f = TextClass.cssVarList;
|
7572
7599
|
|
7573
7600
|
const text = {
|
7574
|
-
[vars$
|
7575
|
-
[vars$
|
7576
|
-
[vars$
|
7601
|
+
[vars$f.textLineHeight]: '1.35em',
|
7602
|
+
[vars$f.textAlign]: 'left',
|
7603
|
+
[vars$f.textColor]: globalRefs$7.colors.surface.dark,
|
7577
7604
|
variant: {
|
7578
7605
|
h1: {
|
7579
|
-
[vars$
|
7580
|
-
[vars$
|
7581
|
-
[vars$
|
7606
|
+
[vars$f.fontSize]: globalRefs$7.typography.h1.size,
|
7607
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
|
7608
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h1.font,
|
7582
7609
|
},
|
7583
7610
|
h2: {
|
7584
|
-
[vars$
|
7585
|
-
[vars$
|
7586
|
-
[vars$
|
7611
|
+
[vars$f.fontSize]: globalRefs$7.typography.h2.size,
|
7612
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
|
7613
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h2.font,
|
7587
7614
|
},
|
7588
7615
|
h3: {
|
7589
|
-
[vars$
|
7590
|
-
[vars$
|
7591
|
-
[vars$
|
7616
|
+
[vars$f.fontSize]: globalRefs$7.typography.h3.size,
|
7617
|
+
[vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
|
7618
|
+
[vars$f.fontFamily]: globalRefs$7.typography.h3.font,
|
7592
7619
|
},
|
7593
7620
|
subtitle1: {
|
7594
|
-
[vars$
|
7595
|
-
[vars$
|
7596
|
-
[vars$
|
7621
|
+
[vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
|
7622
|
+
[vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
7623
|
+
[vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
|
7597
7624
|
},
|
7598
7625
|
subtitle2: {
|
7599
|
-
[vars$
|
7600
|
-
[vars$
|
7601
|
-
[vars$
|
7626
|
+
[vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
|
7627
|
+
[vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
7628
|
+
[vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
|
7602
7629
|
},
|
7603
7630
|
body1: {
|
7604
|
-
[vars$
|
7605
|
-
[vars$
|
7606
|
-
[vars$
|
7631
|
+
[vars$f.fontSize]: globalRefs$7.typography.body1.size,
|
7632
|
+
[vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
|
7633
|
+
[vars$f.fontFamily]: globalRefs$7.typography.body1.font,
|
7607
7634
|
},
|
7608
7635
|
body2: {
|
7609
|
-
[vars$
|
7610
|
-
[vars$
|
7611
|
-
[vars$
|
7636
|
+
[vars$f.fontSize]: globalRefs$7.typography.body2.size,
|
7637
|
+
[vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
|
7638
|
+
[vars$f.fontFamily]: globalRefs$7.typography.body2.font,
|
7612
7639
|
},
|
7613
7640
|
},
|
7614
7641
|
|
7615
7642
|
mode: {
|
7616
7643
|
primary: {
|
7617
|
-
[vars$
|
7644
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
7618
7645
|
},
|
7619
7646
|
secondary: {
|
7620
|
-
[vars$
|
7647
|
+
[vars$f.textColor]: globalRefs$7.colors.secondary.main,
|
7621
7648
|
},
|
7622
7649
|
error: {
|
7623
|
-
[vars$
|
7650
|
+
[vars$f.textColor]: globalRefs$7.colors.error.main,
|
7624
7651
|
},
|
7625
7652
|
success: {
|
7626
|
-
[vars$
|
7653
|
+
[vars$f.textColor]: globalRefs$7.colors.success.main,
|
7627
7654
|
},
|
7628
7655
|
},
|
7629
7656
|
|
7630
7657
|
textAlign: {
|
7631
|
-
right: { [vars$
|
7632
|
-
left: { [vars$
|
7633
|
-
center: { [vars$
|
7658
|
+
right: { [vars$f.textAlign]: 'right' },
|
7659
|
+
left: { [vars$f.textAlign]: 'left' },
|
7660
|
+
center: { [vars$f.textAlign]: 'center' },
|
7634
7661
|
},
|
7635
7662
|
|
7636
7663
|
_fullWidth: {
|
7637
|
-
[vars$
|
7664
|
+
[vars$f.hostWidth]: '100%',
|
7638
7665
|
},
|
7639
7666
|
|
7640
7667
|
_italic: {
|
7641
|
-
[vars$
|
7668
|
+
[vars$f.fontStyle]: 'italic',
|
7642
7669
|
},
|
7643
7670
|
|
7644
7671
|
_uppercase: {
|
7645
|
-
[vars$
|
7672
|
+
[vars$f.textTransform]: 'uppercase',
|
7646
7673
|
},
|
7647
7674
|
|
7648
7675
|
_lowercase: {
|
7649
|
-
[vars$
|
7676
|
+
[vars$f.textTransform]: 'lowercase',
|
7650
7677
|
},
|
7651
7678
|
};
|
7652
7679
|
|
7653
7680
|
var text$1 = /*#__PURE__*/Object.freeze({
|
7654
7681
|
__proto__: null,
|
7655
7682
|
default: text,
|
7656
|
-
vars: vars$
|
7683
|
+
vars: vars$f
|
7657
7684
|
});
|
7658
7685
|
|
7659
7686
|
const globalRefs$6 = getThemeRefs(globals);
|
7660
|
-
const vars$
|
7687
|
+
const vars$e = LinkClass.cssVarList;
|
7661
7688
|
|
7662
7689
|
const link = {
|
7663
|
-
[vars$
|
7690
|
+
[vars$e.cursor]: 'pointer',
|
7664
7691
|
|
7665
|
-
[vars$
|
7692
|
+
[vars$e.textColor]: globalRefs$6.colors.primary.main,
|
7666
7693
|
|
7667
7694
|
textAlign: {
|
7668
|
-
right: { [vars$
|
7669
|
-
left: { [vars$
|
7670
|
-
center: { [vars$
|
7695
|
+
right: { [vars$e.textAlign]: 'right' },
|
7696
|
+
left: { [vars$e.textAlign]: 'left' },
|
7697
|
+
center: { [vars$e.textAlign]: 'center' },
|
7671
7698
|
},
|
7672
7699
|
|
7673
7700
|
_fullWidth: {
|
7674
|
-
[vars$
|
7701
|
+
[vars$e.hostWidth]: '100%',
|
7675
7702
|
},
|
7676
7703
|
|
7677
7704
|
mode: {
|
7678
7705
|
primary: {
|
7679
|
-
[vars$
|
7706
|
+
[vars$e.textColor]: globalRefs$6.colors.primary.main,
|
7680
7707
|
},
|
7681
7708
|
secondary: {
|
7682
|
-
[vars$
|
7709
|
+
[vars$e.textColor]: globalRefs$6.colors.secondary.main,
|
7683
7710
|
},
|
7684
7711
|
error: {
|
7685
|
-
[vars$
|
7712
|
+
[vars$e.textColor]: globalRefs$6.colors.error.main,
|
7686
7713
|
},
|
7687
7714
|
success: {
|
7688
|
-
[vars$
|
7715
|
+
[vars$e.textColor]: globalRefs$6.colors.success.main,
|
7689
7716
|
},
|
7690
7717
|
},
|
7691
7718
|
};
|
@@ -7693,133 +7720,133 @@ const link = {
|
|
7693
7720
|
var link$1 = /*#__PURE__*/Object.freeze({
|
7694
7721
|
__proto__: null,
|
7695
7722
|
default: link,
|
7696
|
-
vars: vars$
|
7723
|
+
vars: vars$e
|
7697
7724
|
});
|
7698
7725
|
|
7699
7726
|
const globalRefs$5 = getThemeRefs(globals);
|
7700
|
-
const compVars$
|
7727
|
+
const compVars$2 = DividerClass.cssVarList;
|
7701
7728
|
|
7702
7729
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
7703
7730
|
{
|
7704
7731
|
thickness: '2px',
|
7705
7732
|
spacing: '10px',
|
7706
7733
|
},
|
7707
|
-
componentName$
|
7734
|
+
componentName$q
|
7708
7735
|
);
|
7709
7736
|
|
7710
7737
|
const divider = {
|
7711
7738
|
...helperTheme$1,
|
7712
7739
|
|
7713
|
-
[compVars$
|
7714
|
-
[compVars$
|
7715
|
-
[compVars$
|
7716
|
-
[compVars$
|
7717
|
-
[compVars$
|
7718
|
-
[compVars$
|
7719
|
-
[compVars$
|
7720
|
-
[compVars$
|
7721
|
-
[compVars$
|
7722
|
-
[compVars$
|
7740
|
+
[compVars$2.alignItems]: 'center',
|
7741
|
+
[compVars$2.flexDirection]: 'row',
|
7742
|
+
[compVars$2.alignSelf]: 'stretch',
|
7743
|
+
[compVars$2.hostWidth]: '100%',
|
7744
|
+
[compVars$2.stripeColor]: globalRefs$5.colors.surface.main,
|
7745
|
+
[compVars$2.stripeColorOpacity]: '0.5',
|
7746
|
+
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
7747
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
7748
|
+
[compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
|
7749
|
+
[compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
7723
7750
|
|
7724
7751
|
_vertical: {
|
7725
|
-
[compVars$
|
7726
|
-
[compVars$
|
7727
|
-
[compVars$
|
7728
|
-
[compVars$
|
7729
|
-
[compVars$
|
7730
|
-
[compVars$
|
7731
|
-
[compVars$
|
7732
|
-
[compVars$
|
7752
|
+
[compVars$2.minHeight]: '200px',
|
7753
|
+
[compVars$2.flexDirection]: 'column',
|
7754
|
+
[compVars$2.hostWidth]: 'fit-content',
|
7755
|
+
[compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
7756
|
+
[compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
|
7757
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
7758
|
+
[compVars$2.labelTextMaxWidth]: '100%',
|
7759
|
+
[compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
7733
7760
|
},
|
7734
7761
|
};
|
7735
7762
|
|
7736
|
-
const vars$
|
7737
|
-
...compVars$
|
7763
|
+
const vars$d = {
|
7764
|
+
...compVars$2,
|
7738
7765
|
...helperVars$1,
|
7739
7766
|
};
|
7740
7767
|
|
7741
7768
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
7742
7769
|
__proto__: null,
|
7743
7770
|
default: divider,
|
7744
|
-
vars: vars$
|
7771
|
+
vars: vars$d
|
7745
7772
|
});
|
7746
7773
|
|
7747
|
-
const vars$
|
7774
|
+
const vars$c = PasscodeClass.cssVarList;
|
7748
7775
|
|
7749
7776
|
const passcode = {
|
7750
|
-
[vars$
|
7751
|
-
[vars$
|
7752
|
-
[vars$
|
7753
|
-
[vars$
|
7754
|
-
[vars$
|
7755
|
-
[vars$
|
7756
|
-
[vars$
|
7757
|
-
[vars$
|
7758
|
-
[vars$
|
7759
|
-
[vars$
|
7760
|
-
[vars$
|
7761
|
-
[vars$
|
7762
|
-
[vars$
|
7763
|
-
[vars$
|
7777
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
7778
|
+
[vars$c.fontSize]: refs.fontSize,
|
7779
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
7780
|
+
[vars$c.labelRequiredIndicator]: refs.requiredIndicator,
|
7781
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
7782
|
+
[vars$c.digitValueTextColor]: refs.valueTextColor,
|
7783
|
+
[vars$c.digitPadding]: '0',
|
7784
|
+
[vars$c.digitTextAlign]: 'center',
|
7785
|
+
[vars$c.digitSpacing]: '4px',
|
7786
|
+
[vars$c.hostWidth]: refs.width,
|
7787
|
+
[vars$c.digitOutlineColor]: 'transparent',
|
7788
|
+
[vars$c.digitOutlineWidth]: refs.outlineWidth,
|
7789
|
+
[vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
7790
|
+
[vars$c.digitSize]: refs.inputHeight,
|
7764
7791
|
|
7765
7792
|
_hideCursor: {
|
7766
|
-
[vars$
|
7793
|
+
[vars$c.digitCaretTextColor]: 'transparent',
|
7767
7794
|
},
|
7768
7795
|
};
|
7769
7796
|
|
7770
7797
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
7771
7798
|
__proto__: null,
|
7772
7799
|
default: passcode,
|
7773
|
-
vars: vars$
|
7800
|
+
vars: vars$c
|
7774
7801
|
});
|
7775
7802
|
|
7776
7803
|
const globalRefs$4 = getThemeRefs(globals);
|
7777
|
-
const vars$
|
7804
|
+
const vars$b = LoaderLinearClass.cssVarList;
|
7778
7805
|
|
7779
7806
|
const loaderLinear = {
|
7780
|
-
[vars$
|
7781
|
-
[vars$
|
7807
|
+
[vars$b.hostDisplay]: 'inline-block',
|
7808
|
+
[vars$b.hostWidth]: '100%',
|
7782
7809
|
|
7783
|
-
[vars$
|
7784
|
-
[vars$
|
7810
|
+
[vars$b.barColor]: globalRefs$4.colors.surface.contrast,
|
7811
|
+
[vars$b.barWidth]: '20%',
|
7785
7812
|
|
7786
|
-
[vars$
|
7787
|
-
[vars$
|
7813
|
+
[vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
7814
|
+
[vars$b.barBorderRadius]: '4px',
|
7788
7815
|
|
7789
|
-
[vars$
|
7790
|
-
[vars$
|
7791
|
-
[vars$
|
7792
|
-
[vars$
|
7816
|
+
[vars$b.animationDuration]: '2s',
|
7817
|
+
[vars$b.animationTimingFunction]: 'linear',
|
7818
|
+
[vars$b.animationIterationCount]: 'infinite',
|
7819
|
+
[vars$b.verticalPadding]: '0.25em',
|
7793
7820
|
|
7794
7821
|
size: {
|
7795
|
-
xs: { [vars$
|
7796
|
-
sm: { [vars$
|
7797
|
-
md: { [vars$
|
7798
|
-
lg: { [vars$
|
7822
|
+
xs: { [vars$b.barHeight]: '2px' },
|
7823
|
+
sm: { [vars$b.barHeight]: '4px' },
|
7824
|
+
md: { [vars$b.barHeight]: '6px' },
|
7825
|
+
lg: { [vars$b.barHeight]: '8px' },
|
7799
7826
|
},
|
7800
7827
|
|
7801
7828
|
mode: {
|
7802
7829
|
primary: {
|
7803
|
-
[vars$
|
7830
|
+
[vars$b.barColor]: globalRefs$4.colors.primary.main,
|
7804
7831
|
},
|
7805
7832
|
secondary: {
|
7806
|
-
[vars$
|
7833
|
+
[vars$b.barColor]: globalRefs$4.colors.secondary.main,
|
7807
7834
|
},
|
7808
7835
|
},
|
7809
7836
|
|
7810
7837
|
_hidden: {
|
7811
|
-
[vars$
|
7838
|
+
[vars$b.hostDisplay]: 'none',
|
7812
7839
|
},
|
7813
7840
|
};
|
7814
7841
|
|
7815
7842
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
7816
7843
|
__proto__: null,
|
7817
7844
|
default: loaderLinear,
|
7818
|
-
vars: vars$
|
7845
|
+
vars: vars$b
|
7819
7846
|
});
|
7820
7847
|
|
7821
7848
|
const globalRefs$3 = getThemeRefs(globals);
|
7822
|
-
const compVars = LoaderRadialClass.cssVarList;
|
7849
|
+
const compVars$1 = LoaderRadialClass.cssVarList;
|
7823
7850
|
|
7824
7851
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
7825
7852
|
{
|
@@ -7833,110 +7860,145 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
7833
7860
|
},
|
7834
7861
|
},
|
7835
7862
|
},
|
7836
|
-
componentName$
|
7863
|
+
componentName$s
|
7837
7864
|
);
|
7838
7865
|
|
7839
7866
|
const loaderRadial = {
|
7840
7867
|
...helperTheme,
|
7841
7868
|
|
7842
|
-
[compVars.animationDuration]: '2s',
|
7843
|
-
[compVars.animationTimingFunction]: 'linear',
|
7844
|
-
[compVars.animationIterationCount]: 'infinite',
|
7845
|
-
[compVars.spinnerBorderStyle]: 'solid',
|
7846
|
-
[compVars.spinnerBorderWidth]: '0.2em',
|
7847
|
-
[compVars.spinnerBorderRadius]: '50%',
|
7848
|
-
[compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
7849
|
-
[compVars.spinnerQuadrant2Color]: 'transparent',
|
7850
|
-
[compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
7851
|
-
[compVars.spinnerQuadrant4Color]: 'transparent',
|
7869
|
+
[compVars$1.animationDuration]: '2s',
|
7870
|
+
[compVars$1.animationTimingFunction]: 'linear',
|
7871
|
+
[compVars$1.animationIterationCount]: 'infinite',
|
7872
|
+
[compVars$1.spinnerBorderStyle]: 'solid',
|
7873
|
+
[compVars$1.spinnerBorderWidth]: '0.2em',
|
7874
|
+
[compVars$1.spinnerBorderRadius]: '50%',
|
7875
|
+
[compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
7876
|
+
[compVars$1.spinnerQuadrant2Color]: 'transparent',
|
7877
|
+
[compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
7878
|
+
[compVars$1.spinnerQuadrant4Color]: 'transparent',
|
7852
7879
|
|
7853
7880
|
size: {
|
7854
|
-
xs: { [compVars.spinnerSize]: '20px' },
|
7855
|
-
sm: { [compVars.spinnerSize]: '30px' },
|
7856
|
-
md: { [compVars.spinnerSize]: '40px' },
|
7857
|
-
lg: { [compVars.spinnerSize]: '60px' },
|
7858
|
-
xl: { [compVars.spinnerSize]: '80px' },
|
7881
|
+
xs: { [compVars$1.spinnerSize]: '20px' },
|
7882
|
+
sm: { [compVars$1.spinnerSize]: '30px' },
|
7883
|
+
md: { [compVars$1.spinnerSize]: '40px' },
|
7884
|
+
lg: { [compVars$1.spinnerSize]: '60px' },
|
7885
|
+
xl: { [compVars$1.spinnerSize]: '80px' },
|
7859
7886
|
},
|
7860
7887
|
|
7861
7888
|
_hidden: {
|
7862
|
-
[compVars.hostDisplay]: 'none',
|
7889
|
+
[compVars$1.hostDisplay]: 'none',
|
7863
7890
|
},
|
7864
7891
|
};
|
7865
|
-
const vars$
|
7866
|
-
...compVars,
|
7892
|
+
const vars$a = {
|
7893
|
+
...compVars$1,
|
7867
7894
|
...helperVars,
|
7868
7895
|
};
|
7869
7896
|
|
7870
7897
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
7871
7898
|
__proto__: null,
|
7872
7899
|
default: loaderRadial,
|
7873
|
-
vars: vars$
|
7900
|
+
vars: vars$a
|
7874
7901
|
});
|
7875
7902
|
|
7876
7903
|
const globalRefs$2 = getThemeRefs(globals);
|
7877
|
-
const vars$
|
7904
|
+
const vars$9 = ComboBoxClass.cssVarList;
|
7878
7905
|
|
7879
7906
|
const comboBox = {
|
7880
|
-
[vars$
|
7881
|
-
[vars$
|
7882
|
-
[vars$
|
7883
|
-
[vars$
|
7884
|
-
[vars$
|
7885
|
-
[vars$
|
7886
|
-
[vars$
|
7887
|
-
[vars$
|
7888
|
-
[vars$
|
7889
|
-
[vars$
|
7890
|
-
[vars$
|
7891
|
-
[vars$
|
7892
|
-
[vars$
|
7893
|
-
[vars$
|
7894
|
-
[vars$
|
7895
|
-
[vars$
|
7896
|
-
[vars$
|
7897
|
-
[vars$
|
7898
|
-
[vars$
|
7899
|
-
[vars$
|
7900
|
-
[vars$
|
7901
|
-
[vars$
|
7902
|
-
[vars$
|
7907
|
+
[vars$9.hostWidth]: refs.width,
|
7908
|
+
[vars$9.fontSize]: refs.fontSize,
|
7909
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
7910
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
7911
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
7912
|
+
[vars$9.inputBorderColor]: refs.borderColor,
|
7913
|
+
[vars$9.inputBorderWidth]: refs.borderWidth,
|
7914
|
+
[vars$9.inputBorderStyle]: refs.borderStyle,
|
7915
|
+
[vars$9.inputBorderRadius]: refs.borderRadius,
|
7916
|
+
[vars$9.inputOutlineColor]: refs.outlineColor,
|
7917
|
+
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
7918
|
+
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
7919
|
+
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
7920
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
7921
|
+
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
7922
|
+
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7923
|
+
[vars$9.inputBackgroundColor]: refs.backgroundColor,
|
7924
|
+
[vars$9.inputHorizontalPadding]: refs.horizontalPadding,
|
7925
|
+
[vars$9.inputHeight]: refs.inputHeight,
|
7926
|
+
[vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
|
7927
|
+
[vars$9.inputDropdownButtonCursor]: 'pointer',
|
7928
|
+
[vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
|
7929
|
+
[vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
|
7903
7930
|
|
7904
7931
|
_readonly: {
|
7905
|
-
[vars$
|
7932
|
+
[vars$9.inputDropdownButtonCursor]: 'default',
|
7906
7933
|
},
|
7907
7934
|
|
7908
7935
|
// Overlay theme exposed via the component:
|
7909
|
-
[vars$
|
7910
|
-
[vars$
|
7911
|
-
[vars$
|
7912
|
-
[vars$
|
7936
|
+
[vars$9.overlayFontSize]: refs.fontSize,
|
7937
|
+
[vars$9.overlayFontFamily]: refs.fontFamily,
|
7938
|
+
[vars$9.overlayCursor]: 'pointer',
|
7939
|
+
[vars$9.overlayItemBoxShadow]: 'none',
|
7913
7940
|
|
7914
7941
|
// Overlay direct theme:
|
7915
|
-
[vars$
|
7916
|
-
[vars$
|
7942
|
+
[vars$9.overlay.minHeight]: '400px',
|
7943
|
+
[vars$9.overlay.margin]: '0',
|
7917
7944
|
};
|
7918
7945
|
|
7919
7946
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
7920
7947
|
__proto__: null,
|
7921
7948
|
comboBox: comboBox,
|
7922
7949
|
default: comboBox,
|
7923
|
-
vars: vars$
|
7950
|
+
vars: vars$9
|
7924
7951
|
});
|
7925
7952
|
|
7926
|
-
const vars$
|
7953
|
+
const vars$8 = ImageClass.cssVarList;
|
7927
7954
|
|
7928
7955
|
const image = {};
|
7929
7956
|
|
7930
7957
|
var image$1 = /*#__PURE__*/Object.freeze({
|
7931
7958
|
__proto__: null,
|
7932
7959
|
default: image,
|
7933
|
-
vars: vars$
|
7960
|
+
vars: vars$8
|
7934
7961
|
});
|
7935
7962
|
|
7936
|
-
const vars$
|
7963
|
+
const vars$7 = PhoneFieldClass.cssVarList;
|
7937
7964
|
|
7938
7965
|
const phoneField = {
|
7939
|
-
[vars$
|
7966
|
+
[vars$7.hostWidth]: refs.width,
|
7967
|
+
[vars$7.fontSize]: refs.fontSize,
|
7968
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
7969
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
7970
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
7971
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
7972
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
7973
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7974
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
7975
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
7976
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
7977
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
7978
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
7979
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
7980
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
7981
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
7982
|
+
[vars$7.phoneInputWidth]: refs.minWidth,
|
7983
|
+
[vars$7.countryCodeInputWidth]: '5em',
|
7984
|
+
[vars$7.countryCodeDropdownWidth]: '20em',
|
7985
|
+
|
7986
|
+
// '@overlay': {
|
7987
|
+
// overlayItemBackgroundColor: 'red'
|
7988
|
+
// }
|
7989
|
+
};
|
7990
|
+
|
7991
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7992
|
+
__proto__: null,
|
7993
|
+
default: phoneField,
|
7994
|
+
vars: vars$7
|
7995
|
+
});
|
7996
|
+
|
7997
|
+
const vars$6 = PhoneFieldInputBoxClass.cssVarList;
|
7998
|
+
|
7999
|
+
const phoneInputBoxField = {
|
8000
|
+
[vars$6.hostWidth]: '16em',
|
8001
|
+
[vars$6.hostMinWidth]: refs.minWidth,
|
7940
8002
|
[vars$6.fontSize]: refs.fontSize,
|
7941
8003
|
[vars$6.fontFamily]: refs.fontFamily,
|
7942
8004
|
[vars$6.labelTextColor]: refs.labelTextColor,
|
@@ -7952,185 +8014,269 @@ const phoneField = {
|
|
7952
8014
|
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
7953
8015
|
[vars$6.inputOutlineColor]: refs.outlineColor,
|
7954
8016
|
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
7955
|
-
[vars$6.phoneInputWidth]: refs.minWidth,
|
7956
|
-
[vars$6.countryCodeInputWidth]: '5em',
|
7957
|
-
[vars$6.countryCodeDropdownWidth]: '20em',
|
7958
|
-
|
7959
|
-
// '@overlay': {
|
7960
|
-
// overlayItemBackgroundColor: 'red'
|
7961
|
-
// }
|
7962
|
-
};
|
7963
|
-
|
7964
|
-
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7965
|
-
__proto__: null,
|
7966
|
-
default: phoneField,
|
7967
|
-
vars: vars$6
|
7968
|
-
});
|
7969
|
-
|
7970
|
-
const vars$5 = PhoneFieldInputBoxClass.cssVarList;
|
7971
|
-
|
7972
|
-
const phoneInputBoxField = {
|
7973
|
-
[vars$5.hostWidth]: '16em',
|
7974
|
-
[vars$5.hostMinWidth]: refs.minWidth,
|
7975
|
-
[vars$5.fontSize]: refs.fontSize,
|
7976
|
-
[vars$5.fontFamily]: refs.fontFamily,
|
7977
|
-
[vars$5.labelTextColor]: refs.labelTextColor,
|
7978
|
-
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
7979
|
-
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
7980
|
-
[vars$5.inputValueTextColor]: refs.valueTextColor,
|
7981
|
-
[vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7982
|
-
[vars$5.inputBorderStyle]: refs.borderStyle,
|
7983
|
-
[vars$5.inputBorderWidth]: refs.borderWidth,
|
7984
|
-
[vars$5.inputBorderColor]: refs.borderColor,
|
7985
|
-
[vars$5.inputBorderRadius]: refs.borderRadius,
|
7986
|
-
[vars$5.inputOutlineStyle]: refs.outlineStyle,
|
7987
|
-
[vars$5.inputOutlineWidth]: refs.outlineWidth,
|
7988
|
-
[vars$5.inputOutlineColor]: refs.outlineColor,
|
7989
|
-
[vars$5.inputOutlineOffset]: refs.outlineOffset,
|
7990
8017
|
_fullWidth: {
|
7991
|
-
[vars$
|
8018
|
+
[vars$6.hostWidth]: refs.width,
|
7992
8019
|
},
|
7993
8020
|
};
|
7994
8021
|
|
7995
8022
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7996
8023
|
__proto__: null,
|
7997
8024
|
default: phoneInputBoxField,
|
7998
|
-
vars: vars$
|
8025
|
+
vars: vars$6
|
7999
8026
|
});
|
8000
8027
|
|
8001
|
-
const vars$
|
8028
|
+
const vars$5 = NewPasswordClass.cssVarList;
|
8002
8029
|
|
8003
8030
|
const newPassword = {
|
8004
|
-
[vars$
|
8005
|
-
[vars$
|
8006
|
-
[vars$
|
8007
|
-
[vars$
|
8008
|
-
[vars$
|
8009
|
-
[vars$
|
8031
|
+
[vars$5.hostWidth]: refs.width,
|
8032
|
+
[vars$5.hostMinWidth]: refs.minWidth,
|
8033
|
+
[vars$5.fontSize]: refs.fontSize,
|
8034
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
8035
|
+
[vars$5.spaceBetweenInputs]: '1em',
|
8036
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
8010
8037
|
|
8011
8038
|
_required: {
|
8012
8039
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8013
8040
|
// That's why we fake the required indicator on each input.
|
8014
8041
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8015
|
-
[vars$
|
8042
|
+
[vars$5.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8016
8043
|
},
|
8017
8044
|
};
|
8018
8045
|
|
8019
8046
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8020
8047
|
__proto__: null,
|
8021
8048
|
default: newPassword,
|
8022
|
-
vars: vars$
|
8049
|
+
vars: vars$5
|
8023
8050
|
});
|
8024
8051
|
|
8025
|
-
const vars$
|
8052
|
+
const vars$4 = UploadFileClass.cssVarList;
|
8026
8053
|
|
8027
8054
|
const uploadFile = {
|
8028
|
-
[vars$
|
8029
|
-
[vars$
|
8055
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
8056
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
8030
8057
|
|
8031
|
-
[vars$
|
8058
|
+
[vars$4.iconSize]: '2em',
|
8032
8059
|
|
8033
|
-
[vars$
|
8034
|
-
[vars$
|
8060
|
+
[vars$4.hostPadding]: '0.75em',
|
8061
|
+
[vars$4.gap]: '0.5em',
|
8035
8062
|
|
8036
|
-
[vars$
|
8037
|
-
[vars$
|
8038
|
-
[vars$
|
8063
|
+
[vars$4.fontSize]: '16px',
|
8064
|
+
[vars$4.titleFontWeight]: '500',
|
8065
|
+
[vars$4.lineHeight]: '1em',
|
8039
8066
|
|
8040
|
-
[vars$
|
8041
|
-
[vars$
|
8042
|
-
[vars$
|
8043
|
-
[vars$
|
8067
|
+
[vars$4.borderWidth]: refs.borderWidth,
|
8068
|
+
[vars$4.borderColor]: refs.borderColor,
|
8069
|
+
[vars$4.borderRadius]: refs.borderRadius,
|
8070
|
+
[vars$4.borderStyle]: 'dashed',
|
8044
8071
|
|
8045
8072
|
_required: {
|
8046
|
-
[vars$
|
8073
|
+
[vars$4.requiredIndicator]: refs.requiredIndicator,
|
8047
8074
|
},
|
8048
8075
|
|
8049
8076
|
size: {
|
8050
8077
|
xs: {
|
8051
|
-
[vars$
|
8052
|
-
[vars$
|
8053
|
-
[vars$
|
8054
|
-
[vars$
|
8055
|
-
[vars$
|
8078
|
+
[vars$4.hostHeight]: '196px',
|
8079
|
+
[vars$4.hostWidth]: '200px',
|
8080
|
+
[vars$4.titleFontSize]: '0.875em',
|
8081
|
+
[vars$4.descriptionFontSize]: '0.875em',
|
8082
|
+
[vars$4.lineHeight]: '1.25em',
|
8056
8083
|
},
|
8057
8084
|
sm: {
|
8058
|
-
[vars$
|
8059
|
-
[vars$
|
8060
|
-
[vars$
|
8061
|
-
[vars$
|
8062
|
-
[vars$
|
8085
|
+
[vars$4.hostHeight]: '216px',
|
8086
|
+
[vars$4.hostWidth]: '230px',
|
8087
|
+
[vars$4.titleFontSize]: '1em',
|
8088
|
+
[vars$4.descriptionFontSize]: '0.875em',
|
8089
|
+
[vars$4.lineHeight]: '1.25em',
|
8063
8090
|
},
|
8064
8091
|
md: {
|
8065
|
-
[vars$
|
8066
|
-
[vars$
|
8067
|
-
[vars$
|
8068
|
-
[vars$
|
8069
|
-
[vars$
|
8092
|
+
[vars$4.hostHeight]: '256px',
|
8093
|
+
[vars$4.hostWidth]: '312px',
|
8094
|
+
[vars$4.titleFontSize]: '1.125em',
|
8095
|
+
[vars$4.descriptionFontSize]: '1em',
|
8096
|
+
[vars$4.lineHeight]: '1.5em',
|
8070
8097
|
},
|
8071
8098
|
lg: {
|
8072
|
-
[vars$
|
8073
|
-
[vars$
|
8074
|
-
[vars$
|
8075
|
-
[vars$
|
8076
|
-
[vars$
|
8099
|
+
[vars$4.hostHeight]: '280px',
|
8100
|
+
[vars$4.hostWidth]: '336px',
|
8101
|
+
[vars$4.titleFontSize]: '1.125em',
|
8102
|
+
[vars$4.descriptionFontSize]: '1.125em',
|
8103
|
+
[vars$4.lineHeight]: '1.75em',
|
8077
8104
|
},
|
8078
8105
|
},
|
8079
8106
|
|
8080
8107
|
_fullWidth: {
|
8081
|
-
[vars$
|
8108
|
+
[vars$4.hostWidth]: refs.width,
|
8082
8109
|
},
|
8083
8110
|
};
|
8084
8111
|
|
8085
8112
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8086
8113
|
__proto__: null,
|
8087
8114
|
default: uploadFile,
|
8088
|
-
vars: vars$
|
8115
|
+
vars: vars$4
|
8089
8116
|
});
|
8090
8117
|
|
8091
8118
|
const globalRefs$1 = getThemeRefs(globals);
|
8092
8119
|
|
8093
|
-
const vars$
|
8120
|
+
const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
|
8094
8121
|
|
8095
8122
|
const buttonSelectionGroupItem = {
|
8096
|
-
[vars$
|
8097
|
-
[vars$
|
8098
|
-
[vars$
|
8099
|
-
[vars$
|
8100
|
-
[vars$
|
8123
|
+
[vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
|
8124
|
+
[vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
8125
|
+
[vars$3.borderColor]: globalRefs$1.colors.surface.main,
|
8126
|
+
[vars$3.borderStyle]: 'solid',
|
8127
|
+
[vars$3.borderRadius]: globalRefs$1.radius.sm,
|
8101
8128
|
|
8102
8129
|
_hover: {
|
8103
|
-
[vars$
|
8130
|
+
[vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8104
8131
|
},
|
8105
8132
|
|
8106
8133
|
_selected: {
|
8107
|
-
[vars$
|
8108
|
-
[vars$
|
8109
|
-
[vars$
|
8134
|
+
[vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
|
8135
|
+
[vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
|
8136
|
+
[vars$3.labelTextColor]: globalRefs$1.colors.surface.light,
|
8110
8137
|
},
|
8111
8138
|
};
|
8112
8139
|
|
8113
8140
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8114
8141
|
__proto__: null,
|
8115
8142
|
default: buttonSelectionGroupItem,
|
8116
|
-
vars: vars$
|
8143
|
+
vars: vars$3
|
8117
8144
|
});
|
8118
8145
|
|
8119
8146
|
const globalRefs = getThemeRefs(globals);
|
8120
|
-
const vars$
|
8147
|
+
const vars$2 = ButtonSelectionGroupClass.cssVarList;
|
8121
8148
|
|
8122
8149
|
const buttonSelectionGroup = {
|
8123
|
-
[vars$
|
8124
|
-
[vars$
|
8125
|
-
[vars$
|
8126
|
-
[vars$
|
8127
|
-
[vars$
|
8128
|
-
[vars$
|
8150
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
8151
|
+
[vars$2.labelTextColor]: refs.labelTextColor,
|
8152
|
+
[vars$2.labelRequiredIndicator]: refs.requiredIndicator,
|
8153
|
+
[vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
|
8154
|
+
[vars$2.itemsSpacing]: globalRefs.spacing.sm,
|
8155
|
+
[vars$2.hostWidth]: refs.width,
|
8129
8156
|
};
|
8130
8157
|
|
8131
8158
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8132
8159
|
__proto__: null,
|
8133
8160
|
default: buttonSelectionGroup,
|
8161
|
+
vars: vars$2
|
8162
|
+
});
|
8163
|
+
|
8164
|
+
const componentName = getComponentName('modal');
|
8165
|
+
|
8166
|
+
const customMixin = (superclass) =>
|
8167
|
+
class ModalMixinClass extends superclass {
|
8168
|
+
get opened() {
|
8169
|
+
return this.getAttribute('opened') === 'true';
|
8170
|
+
}
|
8171
|
+
|
8172
|
+
handleOpened() {
|
8173
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
8174
|
+
if (this.opened) {
|
8175
|
+
this.style.display = '';
|
8176
|
+
} else {
|
8177
|
+
this.style.display = 'none';
|
8178
|
+
}
|
8179
|
+
}
|
8180
|
+
|
8181
|
+
init() {
|
8182
|
+
super.init?.();
|
8183
|
+
this.style.display = 'none';
|
8184
|
+
|
8185
|
+
// vaadin-dialog might not be loaded in time
|
8186
|
+
// in order to make sure it's loaded before this block is running
|
8187
|
+
// we are wrapping it with setTimeout
|
8188
|
+
setTimeout(() => {
|
8189
|
+
// we want to sync descope-modal content through vaadin-dialog into the overlay
|
8190
|
+
// so we are adding a slot to the overlay, which allows us to forward the content from
|
8191
|
+
// vaadin-dialog to vaadin-dialog-overlay
|
8192
|
+
this.baseElement.shadowRoot
|
8193
|
+
.querySelector('vaadin-dialog-overlay')
|
8194
|
+
.appendChild(document.createElement('slot'));
|
8195
|
+
|
8196
|
+
this.#overrideOverlaySettings();
|
8197
|
+
|
8198
|
+
// we need to always open the modal in `opened=false`
|
8199
|
+
// to prevent it from rendering outside the dialog
|
8200
|
+
// first, we have to run `overrideOverlaySettings` to setup
|
8201
|
+
// the component.
|
8202
|
+
this.handleOpened();
|
8203
|
+
});
|
8204
|
+
}
|
8205
|
+
|
8206
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
8207
|
+
// we do not want that because it's difficult to style the overlay in this way
|
8208
|
+
// so we override it to open inside the shadow DOM
|
8209
|
+
#overrideOverlaySettings() {
|
8210
|
+
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
|
8211
|
+
|
8212
|
+
overlay._attachOverlay = () => {
|
8213
|
+
overlay.bringToFront();
|
8214
|
+
this.baseElement.setAttribute('style', 'display:flex!important;');
|
8215
|
+
};
|
8216
|
+
overlay._detachOverlay = () => {
|
8217
|
+
this.baseElement.style.display = 'none';
|
8218
|
+
};
|
8219
|
+
overlay._enterModalState = () => {};
|
8220
|
+
|
8221
|
+
overlay.close = () => false;
|
8222
|
+
}
|
8223
|
+
};
|
8224
|
+
|
8225
|
+
const ModalClass = compose(
|
8226
|
+
createStyleMixin({
|
8227
|
+
mappings: {
|
8228
|
+
overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
|
8229
|
+
overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
|
8230
|
+
overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
|
8231
|
+
},
|
8232
|
+
}),
|
8233
|
+
portalMixin({
|
8234
|
+
name: 'overlay',
|
8235
|
+
selector: '',
|
8236
|
+
mappings: {
|
8237
|
+
hostDisplay: {
|
8238
|
+
selector: () => ':host(.descope-modal)',
|
8239
|
+
property: 'display',
|
8240
|
+
important: true,
|
8241
|
+
},
|
8242
|
+
backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
|
8243
|
+
width: { selector: () => '::part(overlay)', property: 'width' },
|
8244
|
+
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8245
|
+
},
|
8246
|
+
forward: {
|
8247
|
+
include: false,
|
8248
|
+
attributes: ['opened'],
|
8249
|
+
},
|
8250
|
+
}),
|
8251
|
+
draggableMixin,
|
8252
|
+
componentNameValidationMixin,
|
8253
|
+
customMixin
|
8254
|
+
)(
|
8255
|
+
createProxy({
|
8256
|
+
slots: [''],
|
8257
|
+
wrappedEleName: 'vaadin-dialog',
|
8258
|
+
style: () => ``,
|
8259
|
+
excludeAttrsSync: ['tabindex', 'opened'],
|
8260
|
+
componentName,
|
8261
|
+
})
|
8262
|
+
);
|
8263
|
+
|
8264
|
+
const compVars = ModalClass.cssVarList;
|
8265
|
+
|
8266
|
+
const modal = {
|
8267
|
+
[compVars.hostWidth]: '400px',
|
8268
|
+
[compVars.hostHeight]: '400px',
|
8269
|
+
[compVars.overlayShadow]: 'none',
|
8270
|
+
[compVars.overlayWidth]: '700px',
|
8271
|
+
};
|
8272
|
+
|
8273
|
+
const vars$1 = {
|
8274
|
+
...compVars,
|
8275
|
+
};
|
8276
|
+
|
8277
|
+
var modal$1 = /*#__PURE__*/Object.freeze({
|
8278
|
+
__proto__: null,
|
8279
|
+
default: modal,
|
8134
8280
|
vars: vars$1
|
8135
8281
|
});
|
8136
8282
|
|
@@ -8161,6 +8307,7 @@ const components = {
|
|
8161
8307
|
uploadFile: uploadFile$1,
|
8162
8308
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
8163
8309
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8310
|
+
modal: modal$1,
|
8164
8311
|
};
|
8165
8312
|
|
8166
8313
|
const theme = Object.keys(components).reduce(
|
@@ -8173,7 +8320,7 @@ const vars = Object.keys(components).reduce(
|
|
8173
8320
|
);
|
8174
8321
|
|
8175
8322
|
const defaultTheme = { globals, components: theme };
|
8176
|
-
const themeVars = { globals: vars$
|
8323
|
+
const themeVars = { globals: vars$s, components: vars };
|
8177
8324
|
|
8178
8325
|
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, 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 };
|
8179
8326
|
//# sourceMappingURL=index.esm.js.map
|