@descope/web-components-ui 1.0.221 → 1.0.223
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +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
|