@descope/web-components-ui 1.0.227 → 1.0.229
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +868 -602
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +763 -593
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1769.js +360 -0
- package/dist/umd/1932.js +1 -1
- package/dist/umd/1990.js +1 -1
- package/dist/umd/2269.js +2 -0
- package/dist/umd/2269.js.LICENSE.txt +5 -0
- package/dist/umd/3585.js +1 -1
- package/dist/umd/3878.js +1 -1
- package/dist/umd/4803.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6091.js +123 -0
- package/dist/umd/{4746.js.LICENSE.txt → 6091.js.LICENSE.txt} +0 -6
- package/dist/umd/6542.js +288 -0
- package/dist/umd/6542.js.LICENSE.txt +11 -0
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7514.js +1 -1
- package/dist/umd/9211.js +1 -1
- package/dist/umd/9320.js +2 -0
- package/dist/umd/9320.js.LICENSE.txt +5 -0
- package/dist/umd/9437.js +1 -1
- package/dist/umd/boolean-fields-descope-boolean-field-internal-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -0
- package/dist/umd/descope-notification-index-js.js +1 -0
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +2 -1
- package/src/components/boolean-fields/booleanFieldMixin.js +9 -1
- package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js +16 -0
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +4 -0
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +8 -0
- package/src/components/descope-grid/GridClass.js +8 -1
- package/src/components/descope-notification/NotificationClass.js +119 -0
- package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js +67 -0
- package/src/components/descope-notification/descope-notification-card/index.js +6 -0
- package/src/components/descope-notification/descope-notification-container.js +13 -0
- package/src/components/descope-notification/index.js +8 -0
- package/src/index.cjs.js +1 -0
- package/src/mixins/normalizeBooleanAttributesMixin.js +2 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/notificationCard.js +57 -0
- package/dist/umd/1419.js +0 -360
- package/dist/umd/4746.js +0 -123
- /package/dist/umd/{1419.js.LICENSE.txt → 1769.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -13,6 +13,7 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
|
13
13
|
import merge from 'lodash.merge';
|
14
14
|
import set from 'lodash.set';
|
15
15
|
import Color from 'color';
|
16
|
+
import '@vaadin/notification';
|
16
17
|
|
17
18
|
const kebabCase = (str) =>
|
18
19
|
str
|
@@ -563,6 +564,8 @@ const booleanAttributesList = [
|
|
563
564
|
'opened',
|
564
565
|
'active',
|
565
566
|
'password-visible',
|
567
|
+
'opening',
|
568
|
+
'closing',
|
566
569
|
];
|
567
570
|
|
568
571
|
const isBooleanAttribute = (attr) => {
|
@@ -1237,7 +1240,7 @@ const clickableMixin = (superclass) =>
|
|
1237
1240
|
}
|
1238
1241
|
};
|
1239
1242
|
|
1240
|
-
const componentName$
|
1243
|
+
const componentName$C = getComponentName('button');
|
1241
1244
|
|
1242
1245
|
const resetStyles = `
|
1243
1246
|
:host {
|
@@ -1334,7 +1337,7 @@ const ButtonClass = compose(
|
|
1334
1337
|
}
|
1335
1338
|
`,
|
1336
1339
|
excludeAttrsSync: ['tabindex'],
|
1337
|
-
componentName: componentName$
|
1340
|
+
componentName: componentName$C,
|
1338
1341
|
})
|
1339
1342
|
);
|
1340
1343
|
|
@@ -1371,7 +1374,7 @@ loadingIndicatorStyles = `
|
|
1371
1374
|
}
|
1372
1375
|
`;
|
1373
1376
|
|
1374
|
-
customElements.define(componentName$
|
1377
|
+
customElements.define(componentName$C, ButtonClass);
|
1375
1378
|
|
1376
1379
|
const createBaseInputClass = (...args) =>
|
1377
1380
|
compose(
|
@@ -1381,13 +1384,17 @@ const createBaseInputClass = (...args) =>
|
|
1381
1384
|
inputEventsDispatchingMixin
|
1382
1385
|
)(createBaseClass(...args));
|
1383
1386
|
|
1384
|
-
const componentName$
|
1387
|
+
const componentName$B = getComponentName('boolean-field-internal');
|
1385
1388
|
|
1386
1389
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1387
1390
|
|
1388
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1391
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
|
1389
1392
|
|
1390
1393
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1394
|
+
static get observedAttributes() {
|
1395
|
+
return ['readonly'];
|
1396
|
+
}
|
1397
|
+
|
1391
1398
|
constructor() {
|
1392
1399
|
super();
|
1393
1400
|
this.innerHTML = `
|
@@ -1430,6 +1437,18 @@ class BooleanInputInternal extends BaseInputClass$5 {
|
|
1430
1437
|
this.handleFocusEventsDispatching([this.checkbox]);
|
1431
1438
|
}
|
1432
1439
|
|
1440
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
1441
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
1442
|
+
|
1443
|
+
if (attrName === 'readonly') {
|
1444
|
+
this.onReadOnlyChange(newValue !== null);
|
1445
|
+
}
|
1446
|
+
}
|
1447
|
+
|
1448
|
+
onReadOnlyChange(val) {
|
1449
|
+
this.baseElement.setAttribute('inert', val);
|
1450
|
+
}
|
1451
|
+
|
1433
1452
|
getValidity() {
|
1434
1453
|
if (this.isRequired && !this.value) {
|
1435
1454
|
return { valueMissing: true };
|
@@ -1445,18 +1464,26 @@ const booleanFieldMixin = (superclass) =>
|
|
1445
1464
|
|
1446
1465
|
const template = document.createElement('template');
|
1447
1466
|
template.innerHTML = `
|
1448
|
-
<${componentName$
|
1467
|
+
<${componentName$B}
|
1449
1468
|
tabindex="-1"
|
1450
1469
|
slot="input"
|
1451
|
-
></${componentName$
|
1470
|
+
></${componentName$B}>
|
1452
1471
|
`;
|
1453
1472
|
|
1454
1473
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1455
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1474
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$B);
|
1456
1475
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1457
1476
|
|
1458
1477
|
forwardAttrs(this, this.inputElement, {
|
1459
|
-
includeAttrs: [
|
1478
|
+
includeAttrs: [
|
1479
|
+
'required',
|
1480
|
+
'full-width',
|
1481
|
+
'size',
|
1482
|
+
'label',
|
1483
|
+
'invalid',
|
1484
|
+
'disabled',
|
1485
|
+
'readonly',
|
1486
|
+
],
|
1460
1487
|
});
|
1461
1488
|
|
1462
1489
|
forwardProps(this.inputElement, this, ['checked']);
|
@@ -1615,7 +1642,7 @@ descope-boolean-field-internal {
|
|
1615
1642
|
}
|
1616
1643
|
`;
|
1617
1644
|
|
1618
|
-
const componentName$
|
1645
|
+
const componentName$A = getComponentName('checkbox');
|
1619
1646
|
|
1620
1647
|
const {
|
1621
1648
|
host: host$f,
|
@@ -1710,17 +1737,21 @@ const CheckboxClass = compose(
|
|
1710
1737
|
top: 0;
|
1711
1738
|
left: 0;
|
1712
1739
|
}
|
1740
|
+
|
1741
|
+
vaadin-text-field::part(input-field)::after {
|
1742
|
+
content: none;
|
1743
|
+
}
|
1713
1744
|
`,
|
1714
1745
|
excludeAttrsSync: ['label', 'tabindex'],
|
1715
|
-
componentName: componentName$
|
1746
|
+
componentName: componentName$A,
|
1716
1747
|
})
|
1717
1748
|
);
|
1718
1749
|
|
1719
|
-
customElements.define(componentName$
|
1750
|
+
customElements.define(componentName$B, BooleanInputInternal);
|
1720
1751
|
|
1721
|
-
customElements.define(componentName$
|
1752
|
+
customElements.define(componentName$A, CheckboxClass);
|
1722
1753
|
|
1723
|
-
const componentName$
|
1754
|
+
const componentName$z = getComponentName('switch-toggle');
|
1724
1755
|
|
1725
1756
|
const {
|
1726
1757
|
host: host$e,
|
@@ -1803,6 +1834,14 @@ const SwitchToggleClass = compose(
|
|
1803
1834
|
max-width: 100%;
|
1804
1835
|
}
|
1805
1836
|
|
1837
|
+
vaadin-text-field {
|
1838
|
+
width: 100%;
|
1839
|
+
}
|
1840
|
+
|
1841
|
+
vaadin-text-field::part(input-field)::after {
|
1842
|
+
content: none;
|
1843
|
+
}
|
1844
|
+
|
1806
1845
|
descope-boolean-field-internal {
|
1807
1846
|
padding: 0;
|
1808
1847
|
width: 100%;
|
@@ -1839,17 +1878,17 @@ const SwitchToggleClass = compose(
|
|
1839
1878
|
}
|
1840
1879
|
`,
|
1841
1880
|
excludeAttrsSync: ['label', 'tabindex'],
|
1842
|
-
componentName: componentName$
|
1881
|
+
componentName: componentName$z,
|
1843
1882
|
})
|
1844
1883
|
);
|
1845
1884
|
|
1846
|
-
customElements.define(componentName$
|
1885
|
+
customElements.define(componentName$z, SwitchToggleClass);
|
1847
1886
|
|
1848
|
-
const componentName$
|
1887
|
+
const componentName$y = getComponentName('loader-linear');
|
1849
1888
|
|
1850
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1889
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
|
1851
1890
|
static get componentName() {
|
1852
|
-
return componentName$
|
1891
|
+
return componentName$y;
|
1853
1892
|
}
|
1854
1893
|
|
1855
1894
|
constructor() {
|
@@ -1910,11 +1949,11 @@ const LoaderLinearClass = compose(
|
|
1910
1949
|
componentNameValidationMixin
|
1911
1950
|
)(RawLoaderLinear);
|
1912
1951
|
|
1913
|
-
customElements.define(componentName$
|
1952
|
+
customElements.define(componentName$y, LoaderLinearClass);
|
1914
1953
|
|
1915
|
-
const componentName$
|
1954
|
+
const componentName$x = getComponentName('loader-radial');
|
1916
1955
|
|
1917
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1956
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
|
1918
1957
|
constructor() {
|
1919
1958
|
super();
|
1920
1959
|
|
@@ -1958,11 +1997,11 @@ const LoaderRadialClass = compose(
|
|
1958
1997
|
componentNameValidationMixin
|
1959
1998
|
)(RawLoaderRadial);
|
1960
1999
|
|
1961
|
-
customElements.define(componentName$
|
2000
|
+
customElements.define(componentName$x, LoaderRadialClass);
|
1962
2001
|
|
1963
|
-
const componentName$
|
2002
|
+
const componentName$w = getComponentName('container');
|
1964
2003
|
|
1965
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2004
|
+
class RawContainer extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
|
1966
2005
|
constructor() {
|
1967
2006
|
super();
|
1968
2007
|
|
@@ -2014,10 +2053,10 @@ const ContainerClass = compose(
|
|
2014
2053
|
componentNameValidationMixin
|
2015
2054
|
)(RawContainer);
|
2016
2055
|
|
2017
|
-
customElements.define(componentName$
|
2056
|
+
customElements.define(componentName$w, ContainerClass);
|
2018
2057
|
|
2019
|
-
const componentName$
|
2020
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2058
|
+
const componentName$v = getComponentName('divider');
|
2059
|
+
class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
2021
2060
|
constructor() {
|
2022
2061
|
super();
|
2023
2062
|
|
@@ -2115,9 +2154,9 @@ const DividerClass = compose(
|
|
2115
2154
|
|
2116
2155
|
// eslint-disable-next-line max-classes-per-file
|
2117
2156
|
|
2118
|
-
const componentName$
|
2157
|
+
const componentName$u = getComponentName('text');
|
2119
2158
|
|
2120
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2159
|
+
class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
|
2121
2160
|
constructor() {
|
2122
2161
|
super();
|
2123
2162
|
|
@@ -2176,9 +2215,9 @@ const TextClass = compose(
|
|
2176
2215
|
customTextMixin
|
2177
2216
|
)(RawText);
|
2178
2217
|
|
2179
|
-
customElements.define(componentName$
|
2218
|
+
customElements.define(componentName$u, TextClass);
|
2180
2219
|
|
2181
|
-
customElements.define(componentName$
|
2220
|
+
customElements.define(componentName$v, DividerClass);
|
2182
2221
|
|
2183
2222
|
const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2184
2223
|
{
|
@@ -2234,7 +2273,7 @@ var textFieldMappings = {
|
|
2234
2273
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2235
2274
|
};
|
2236
2275
|
|
2237
|
-
const componentName$
|
2276
|
+
const componentName$t = getComponentName('email-field');
|
2238
2277
|
|
2239
2278
|
const customMixin$7 = (superclass) =>
|
2240
2279
|
class EmailFieldMixinClass extends superclass {
|
@@ -2268,15 +2307,15 @@ const EmailFieldClass = compose(
|
|
2268
2307
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2269
2308
|
`,
|
2270
2309
|
excludeAttrsSync: ['tabindex'],
|
2271
|
-
componentName: componentName$
|
2310
|
+
componentName: componentName$t,
|
2272
2311
|
})
|
2273
2312
|
);
|
2274
2313
|
|
2275
|
-
customElements.define(componentName$
|
2314
|
+
customElements.define(componentName$t, EmailFieldClass);
|
2276
2315
|
|
2277
|
-
const componentName$
|
2316
|
+
const componentName$s = getComponentName('link');
|
2278
2317
|
|
2279
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2318
|
+
class RawLink extends createBaseClass({ componentName: componentName$s, baseSelector: ':host a' }) {
|
2280
2319
|
constructor() {
|
2281
2320
|
super();
|
2282
2321
|
|
@@ -2340,7 +2379,7 @@ const LinkClass = compose(
|
|
2340
2379
|
componentNameValidationMixin
|
2341
2380
|
)(RawLink);
|
2342
2381
|
|
2343
|
-
customElements.define(componentName$
|
2382
|
+
customElements.define(componentName$s, LinkClass);
|
2344
2383
|
|
2345
2384
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2346
2385
|
let style;
|
@@ -2392,27 +2431,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2392
2431
|
return CssVarImageClass;
|
2393
2432
|
};
|
2394
2433
|
|
2395
|
-
const componentName$
|
2434
|
+
const componentName$r = getComponentName('logo');
|
2396
2435
|
|
2397
2436
|
const LogoClass = createCssVarImageClass({
|
2398
|
-
componentName: componentName$
|
2437
|
+
componentName: componentName$r,
|
2399
2438
|
varName: 'url',
|
2400
2439
|
fallbackVarName: 'fallbackUrl',
|
2401
2440
|
});
|
2402
2441
|
|
2403
|
-
customElements.define(componentName$
|
2442
|
+
customElements.define(componentName$r, LogoClass);
|
2404
2443
|
|
2405
|
-
const componentName$
|
2444
|
+
const componentName$q = getComponentName('totp-image');
|
2406
2445
|
|
2407
2446
|
const TotpImageClass = createCssVarImageClass({
|
2408
|
-
componentName: componentName$
|
2447
|
+
componentName: componentName$q,
|
2409
2448
|
varName: 'url',
|
2410
2449
|
fallbackVarName: 'fallbackUrl',
|
2411
2450
|
});
|
2412
2451
|
|
2413
|
-
customElements.define(componentName$
|
2452
|
+
customElements.define(componentName$q, TotpImageClass);
|
2414
2453
|
|
2415
|
-
const componentName$
|
2454
|
+
const componentName$p = getComponentName('number-field');
|
2416
2455
|
|
2417
2456
|
const NumberFieldClass = compose(
|
2418
2457
|
createStyleMixin({
|
@@ -2437,11 +2476,11 @@ const NumberFieldClass = compose(
|
|
2437
2476
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2438
2477
|
`,
|
2439
2478
|
excludeAttrsSync: ['tabindex'],
|
2440
|
-
componentName: componentName$
|
2479
|
+
componentName: componentName$p,
|
2441
2480
|
})
|
2442
2481
|
);
|
2443
2482
|
|
2444
|
-
customElements.define(componentName$
|
2483
|
+
customElements.define(componentName$p, NumberFieldClass);
|
2445
2484
|
|
2446
2485
|
const focusElement = (ele) => {
|
2447
2486
|
ele?.focus();
|
@@ -2459,13 +2498,13 @@ const getSanitizedCharacters = (str) => {
|
|
2459
2498
|
|
2460
2499
|
/* eslint-disable no-param-reassign */
|
2461
2500
|
|
2462
|
-
const componentName$
|
2501
|
+
const componentName$o = getComponentName('passcode-internal');
|
2463
2502
|
|
2464
2503
|
const observedAttributes$5 = ['digits'];
|
2465
2504
|
|
2466
2505
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2467
2506
|
|
2468
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2507
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
2469
2508
|
|
2470
2509
|
class PasscodeInternal extends BaseInputClass$4 {
|
2471
2510
|
static get observedAttributes() {
|
@@ -2662,7 +2701,7 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2662
2701
|
}
|
2663
2702
|
}
|
2664
2703
|
|
2665
|
-
const componentName$
|
2704
|
+
const componentName$n = getComponentName('text-field');
|
2666
2705
|
|
2667
2706
|
const observedAttrs = ['type'];
|
2668
2707
|
|
@@ -2711,11 +2750,11 @@ const TextFieldClass = compose(
|
|
2711
2750
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2712
2751
|
`,
|
2713
2752
|
excludeAttrsSync: ['tabindex'],
|
2714
|
-
componentName: componentName$
|
2753
|
+
componentName: componentName$n,
|
2715
2754
|
})
|
2716
2755
|
);
|
2717
2756
|
|
2718
|
-
const componentName$
|
2757
|
+
const componentName$m = getComponentName('passcode');
|
2719
2758
|
|
2720
2759
|
const observedAttributes$4 = ['digits'];
|
2721
2760
|
|
@@ -2734,17 +2773,17 @@ const customMixin$5 = (superclass) =>
|
|
2734
2773
|
const template = document.createElement('template');
|
2735
2774
|
|
2736
2775
|
template.innerHTML = `
|
2737
|
-
<${componentName$
|
2776
|
+
<${componentName$o}
|
2738
2777
|
bordered="true"
|
2739
2778
|
name="code"
|
2740
2779
|
tabindex="-1"
|
2741
2780
|
slot="input"
|
2742
|
-
><slot></slot></${componentName$
|
2781
|
+
><slot></slot></${componentName$o}>
|
2743
2782
|
`;
|
2744
2783
|
|
2745
2784
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2746
2785
|
|
2747
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2786
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
2748
2787
|
|
2749
2788
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2750
2789
|
}
|
@@ -2882,15 +2921,15 @@ const PasscodeClass = compose(
|
|
2882
2921
|
${resetInputCursor('vaadin-text-field')}
|
2883
2922
|
`,
|
2884
2923
|
excludeAttrsSync: ['tabindex'],
|
2885
|
-
componentName: componentName$
|
2924
|
+
componentName: componentName$m,
|
2886
2925
|
})
|
2887
2926
|
);
|
2888
2927
|
|
2889
|
-
customElements.define(componentName$
|
2928
|
+
customElements.define(componentName$n, TextFieldClass);
|
2890
2929
|
|
2891
|
-
customElements.define(componentName$
|
2930
|
+
customElements.define(componentName$o, PasscodeInternal);
|
2892
2931
|
|
2893
|
-
customElements.define(componentName$
|
2932
|
+
customElements.define(componentName$m, PasscodeClass);
|
2894
2933
|
|
2895
2934
|
const passwordDraggableMixin = (superclass) =>
|
2896
2935
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2926,7 +2965,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2926
2965
|
}
|
2927
2966
|
};
|
2928
2967
|
|
2929
|
-
const componentName$
|
2968
|
+
const componentName$l = getComponentName('password');
|
2930
2969
|
|
2931
2970
|
const {
|
2932
2971
|
host: host$8,
|
@@ -3055,13 +3094,13 @@ const PasswordClass = compose(
|
|
3055
3094
|
}
|
3056
3095
|
`,
|
3057
3096
|
excludeAttrsSync: ['tabindex'],
|
3058
|
-
componentName: componentName$
|
3097
|
+
componentName: componentName$l,
|
3059
3098
|
})
|
3060
3099
|
);
|
3061
3100
|
|
3062
|
-
customElements.define(componentName$
|
3101
|
+
customElements.define(componentName$l, PasswordClass);
|
3063
3102
|
|
3064
|
-
const componentName$
|
3103
|
+
const componentName$k = getComponentName('text-area');
|
3065
3104
|
|
3066
3105
|
const {
|
3067
3106
|
host: host$7,
|
@@ -3134,17 +3173,17 @@ const TextAreaClass = compose(
|
|
3134
3173
|
${resetInputCursor('vaadin-text-area')}
|
3135
3174
|
`,
|
3136
3175
|
excludeAttrsSync: ['tabindex'],
|
3137
|
-
componentName: componentName$
|
3176
|
+
componentName: componentName$k,
|
3138
3177
|
})
|
3139
3178
|
);
|
3140
3179
|
|
3141
|
-
customElements.define(componentName$
|
3180
|
+
customElements.define(componentName$k, TextAreaClass);
|
3142
3181
|
|
3143
3182
|
const observedAttributes$3 = ['src', 'alt'];
|
3144
3183
|
|
3145
|
-
const componentName$
|
3184
|
+
const componentName$j = getComponentName('image');
|
3146
3185
|
|
3147
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3186
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$j, baseSelector: ':host > img' });
|
3148
3187
|
class RawImage extends BaseClass$1 {
|
3149
3188
|
static get observedAttributes() {
|
3150
3189
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3184,9 +3223,9 @@ const ImageClass = compose(
|
|
3184
3223
|
draggableMixin
|
3185
3224
|
)(RawImage);
|
3186
3225
|
|
3187
|
-
customElements.define(componentName$
|
3226
|
+
customElements.define(componentName$j, ImageClass);
|
3188
3227
|
|
3189
|
-
const componentName$
|
3228
|
+
const componentName$i = getComponentName('combo-box');
|
3190
3229
|
|
3191
3230
|
const ComboBoxMixin = (superclass) =>
|
3192
3231
|
class ComboBoxMixinClass extends superclass {
|
@@ -3537,12 +3576,12 @@ const ComboBoxClass = compose(
|
|
3537
3576
|
// and reset items to an empty array, and opening the list box with no items
|
3538
3577
|
// to display.
|
3539
3578
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3540
|
-
componentName: componentName$
|
3579
|
+
componentName: componentName$i,
|
3541
3580
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3542
3581
|
})
|
3543
3582
|
);
|
3544
3583
|
|
3545
|
-
customElements.define(componentName$
|
3584
|
+
customElements.define(componentName$i, ComboBoxClass);
|
3546
3585
|
|
3547
3586
|
var CountryCodes = [
|
3548
3587
|
{
|
@@ -4782,7 +4821,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4782
4821
|
</div>
|
4783
4822
|
`;
|
4784
4823
|
|
4785
|
-
const componentName$
|
4824
|
+
const componentName$h = getComponentName('phone-field-internal');
|
4786
4825
|
|
4787
4826
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4788
4827
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4794,7 +4833,7 @@ const mapAttrs$1 = {
|
|
4794
4833
|
|
4795
4834
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4796
4835
|
|
4797
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4836
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
|
4798
4837
|
|
4799
4838
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4800
4839
|
static get observedAttributes() {
|
@@ -4966,12 +5005,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4966
5005
|
}
|
4967
5006
|
};
|
4968
5007
|
|
4969
|
-
customElements.define(componentName$
|
5008
|
+
customElements.define(componentName$h, PhoneFieldInternal$1);
|
4970
5009
|
|
4971
5010
|
const textVars$1 = TextFieldClass.cssVarList;
|
4972
5011
|
const comboVars = ComboBoxClass.cssVarList;
|
4973
5012
|
|
4974
|
-
const componentName$
|
5013
|
+
const componentName$g = getComponentName('phone-field');
|
4975
5014
|
|
4976
5015
|
const customMixin$4 = (superclass) =>
|
4977
5016
|
class PhoneFieldMixinClass extends superclass {
|
@@ -4985,15 +5024,15 @@ const customMixin$4 = (superclass) =>
|
|
4985
5024
|
const template = document.createElement('template');
|
4986
5025
|
|
4987
5026
|
template.innerHTML = `
|
4988
|
-
<${componentName$
|
5027
|
+
<${componentName$h}
|
4989
5028
|
tabindex="-1"
|
4990
5029
|
slot="input"
|
4991
|
-
></${componentName$
|
5030
|
+
></${componentName$h}>
|
4992
5031
|
`;
|
4993
5032
|
|
4994
5033
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4995
5034
|
|
4996
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5035
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
4997
5036
|
|
4998
5037
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4999
5038
|
includeAttrs: [
|
@@ -5188,17 +5227,17 @@ const PhoneFieldClass = compose(
|
|
5188
5227
|
}
|
5189
5228
|
`,
|
5190
5229
|
excludeAttrsSync: ['tabindex'],
|
5191
|
-
componentName: componentName$
|
5230
|
+
componentName: componentName$g,
|
5192
5231
|
})
|
5193
5232
|
);
|
5194
5233
|
|
5195
|
-
customElements.define(componentName$
|
5234
|
+
customElements.define(componentName$g, PhoneFieldClass);
|
5196
5235
|
|
5197
5236
|
const getCountryByCodeId = (countryCode) => {
|
5198
5237
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5199
5238
|
};
|
5200
5239
|
|
5201
|
-
const componentName$
|
5240
|
+
const componentName$f = getComponentName('phone-field-internal-input-box');
|
5202
5241
|
|
5203
5242
|
const observedAttributes$2 = [
|
5204
5243
|
'disabled',
|
@@ -5212,7 +5251,7 @@ const mapAttrs = {
|
|
5212
5251
|
'phone-input-placeholder': 'placeholder',
|
5213
5252
|
};
|
5214
5253
|
|
5215
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5254
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
|
5216
5255
|
|
5217
5256
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5218
5257
|
static get observedAttributes() {
|
@@ -5351,11 +5390,11 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5351
5390
|
}
|
5352
5391
|
}
|
5353
5392
|
|
5354
|
-
customElements.define(componentName$
|
5393
|
+
customElements.define(componentName$f, PhoneFieldInternal);
|
5355
5394
|
|
5356
5395
|
const textVars = TextFieldClass.cssVarList;
|
5357
5396
|
|
5358
|
-
const componentName$
|
5397
|
+
const componentName$e = getComponentName('phone-input-box-field');
|
5359
5398
|
|
5360
5399
|
const customMixin$3 = (superclass) =>
|
5361
5400
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5369,15 +5408,15 @@ const customMixin$3 = (superclass) =>
|
|
5369
5408
|
const template = document.createElement('template');
|
5370
5409
|
|
5371
5410
|
template.innerHTML = `
|
5372
|
-
<${componentName$
|
5411
|
+
<${componentName$f}
|
5373
5412
|
tabindex="-1"
|
5374
5413
|
slot="input"
|
5375
|
-
></${componentName$
|
5414
|
+
></${componentName$f}>
|
5376
5415
|
`;
|
5377
5416
|
|
5378
5417
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5379
5418
|
|
5380
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5419
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$f);
|
5381
5420
|
|
5382
5421
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5383
5422
|
includeAttrs: [
|
@@ -5509,15 +5548,15 @@ const PhoneFieldInputBoxClass = compose(
|
|
5509
5548
|
}
|
5510
5549
|
`,
|
5511
5550
|
excludeAttrsSync: ['tabindex'],
|
5512
|
-
componentName: componentName$
|
5551
|
+
componentName: componentName$e,
|
5513
5552
|
})
|
5514
5553
|
);
|
5515
5554
|
|
5516
|
-
customElements.define(componentName$
|
5555
|
+
customElements.define(componentName$e, PhoneFieldInputBoxClass);
|
5517
5556
|
|
5518
|
-
const componentName$
|
5557
|
+
const componentName$d = getComponentName('new-password-internal');
|
5519
5558
|
|
5520
|
-
const componentName$
|
5559
|
+
const componentName$c = getComponentName('new-password');
|
5521
5560
|
|
5522
5561
|
const customMixin$2 = (superclass) =>
|
5523
5562
|
class NewPasswordMixinClass extends superclass {
|
@@ -5527,16 +5566,16 @@ const customMixin$2 = (superclass) =>
|
|
5527
5566
|
const template = document.createElement('template');
|
5528
5567
|
|
5529
5568
|
template.innerHTML = `
|
5530
|
-
<${componentName$
|
5569
|
+
<${componentName$d}
|
5531
5570
|
name="new-password"
|
5532
5571
|
tabindex="-1"
|
5533
5572
|
slot="input"
|
5534
|
-
></${componentName$
|
5573
|
+
></${componentName$d}>
|
5535
5574
|
`;
|
5536
5575
|
|
5537
5576
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5538
5577
|
|
5539
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5578
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
5540
5579
|
|
5541
5580
|
forwardAttrs(this, this.inputElement, {
|
5542
5581
|
includeAttrs: [
|
@@ -5635,7 +5674,7 @@ const NewPasswordClass = compose(
|
|
5635
5674
|
},
|
5636
5675
|
`,
|
5637
5676
|
excludeAttrsSync: ['tabindex'],
|
5638
|
-
componentName: componentName$
|
5677
|
+
componentName: componentName$c,
|
5639
5678
|
})
|
5640
5679
|
);
|
5641
5680
|
|
@@ -5660,7 +5699,7 @@ const commonAttrs = [
|
|
5660
5699
|
|
5661
5700
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5662
5701
|
|
5663
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5702
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
|
5664
5703
|
|
5665
5704
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5666
5705
|
static get observedAttributes() {
|
@@ -5820,16 +5859,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5820
5859
|
}
|
5821
5860
|
}
|
5822
5861
|
|
5823
|
-
customElements.define(componentName$
|
5862
|
+
customElements.define(componentName$d, NewPasswordInternal);
|
5824
5863
|
|
5825
|
-
customElements.define(componentName$
|
5864
|
+
customElements.define(componentName$c, NewPasswordClass);
|
5826
5865
|
|
5827
|
-
const componentName$
|
5866
|
+
const componentName$b = getComponentName('recaptcha');
|
5828
5867
|
|
5829
5868
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5830
5869
|
|
5831
5870
|
const BaseClass = createBaseClass({
|
5832
|
-
componentName: componentName$
|
5871
|
+
componentName: componentName$b,
|
5833
5872
|
baseSelector: ':host > div',
|
5834
5873
|
});
|
5835
5874
|
class RawRecaptcha extends BaseClass {
|
@@ -5981,7 +6020,7 @@ class RawRecaptcha extends BaseClass {
|
|
5981
6020
|
|
5982
6021
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
5983
6022
|
|
5984
|
-
customElements.define(componentName$
|
6023
|
+
customElements.define(componentName$b, RecaptchaClass);
|
5985
6024
|
|
5986
6025
|
const getFileBase64 = (fileObj) => {
|
5987
6026
|
return new Promise((resolve) => {
|
@@ -5995,7 +6034,7 @@ const getFilename = (fileObj) => {
|
|
5995
6034
|
return fileObj.name.replace(/^.*\\/, '');
|
5996
6035
|
};
|
5997
6036
|
|
5998
|
-
const componentName$
|
6037
|
+
const componentName$a = getComponentName('upload-file');
|
5999
6038
|
|
6000
6039
|
const observedAttributes = [
|
6001
6040
|
'title',
|
@@ -6010,7 +6049,7 @@ const observedAttributes = [
|
|
6010
6049
|
'icon',
|
6011
6050
|
];
|
6012
6051
|
|
6013
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6052
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$a, baseSelector: ':host > div' });
|
6014
6053
|
|
6015
6054
|
class RawUploadFile extends BaseInputClass {
|
6016
6055
|
static get observedAttributes() {
|
@@ -6220,12 +6259,12 @@ const UploadFileClass = compose(
|
|
6220
6259
|
componentNameValidationMixin
|
6221
6260
|
)(RawUploadFile);
|
6222
6261
|
|
6223
|
-
customElements.define(componentName$
|
6262
|
+
customElements.define(componentName$a, UploadFileClass);
|
6224
6263
|
|
6225
|
-
const componentName$
|
6264
|
+
const componentName$9 = getComponentName('button-selection-group-internal');
|
6226
6265
|
|
6227
6266
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6228
|
-
componentName: componentName$
|
6267
|
+
componentName: componentName$9,
|
6229
6268
|
baseSelector: 'slot',
|
6230
6269
|
}) {
|
6231
6270
|
constructor() {
|
@@ -6362,7 +6401,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6362
6401
|
}
|
6363
6402
|
}
|
6364
6403
|
|
6365
|
-
const componentName$
|
6404
|
+
const componentName$8 = getComponentName('button-selection-group');
|
6366
6405
|
|
6367
6406
|
const customMixin$1 = (superclass) =>
|
6368
6407
|
class ButtonSelectionGroupMixinClass extends superclass {
|
@@ -6437,18 +6476,18 @@ const customMixin$1 = (superclass) =>
|
|
6437
6476
|
const template = document.createElement('template');
|
6438
6477
|
|
6439
6478
|
template.innerHTML = `
|
6440
|
-
<${componentName$
|
6479
|
+
<${componentName$9}
|
6441
6480
|
name="button-selection-group"
|
6442
6481
|
slot="input"
|
6443
6482
|
tabindex="-1"
|
6444
6483
|
>
|
6445
6484
|
<slot></slot>
|
6446
|
-
</${componentName$
|
6485
|
+
</${componentName$9}>
|
6447
6486
|
`;
|
6448
6487
|
|
6449
6488
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6450
6489
|
|
6451
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6490
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
6452
6491
|
|
6453
6492
|
forwardAttrs(this, this.inputElement, {
|
6454
6493
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6551,18 +6590,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6551
6590
|
${resetInputCursor('vaadin-text-field')}
|
6552
6591
|
`,
|
6553
6592
|
excludeAttrsSync: ['tabindex'],
|
6554
|
-
componentName: componentName$
|
6593
|
+
componentName: componentName$8,
|
6555
6594
|
})
|
6556
6595
|
);
|
6557
6596
|
|
6558
|
-
customElements.define(componentName$
|
6597
|
+
customElements.define(componentName$9, ButtonSelectionGroupInternalClass);
|
6559
6598
|
|
6560
|
-
customElements.define(componentName$
|
6599
|
+
customElements.define(componentName$8, ButtonSelectionGroupClass);
|
6561
6600
|
|
6562
|
-
const componentName$
|
6601
|
+
const componentName$7 = getComponentName('button-selection-group-item');
|
6563
6602
|
|
6564
6603
|
class RawSelectItem extends createBaseClass({
|
6565
|
-
componentName: componentName$
|
6604
|
+
componentName: componentName$7,
|
6566
6605
|
baseSelector: ':host > descope-button',
|
6567
6606
|
}) {
|
6568
6607
|
get size() {
|
@@ -6656,17 +6695,17 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6656
6695
|
componentNameValidationMixin
|
6657
6696
|
)(RawSelectItem);
|
6658
6697
|
|
6659
|
-
customElements.define(componentName$
|
6698
|
+
customElements.define(componentName$7, ButtonSelectionGroupItemClass);
|
6660
6699
|
|
6661
|
-
const componentName$
|
6700
|
+
const componentName$6 = getComponentName('grid-text-column');
|
6662
6701
|
|
6663
6702
|
class GridTextColumnClass extends GridColumn {}
|
6664
6703
|
|
6665
|
-
customElements.define(componentName$
|
6704
|
+
customElements.define(componentName$6, GridTextColumnClass);
|
6666
6705
|
|
6667
6706
|
/* eslint-disable no-param-reassign */
|
6668
6707
|
|
6669
|
-
const componentName$
|
6708
|
+
const componentName$5 = getComponentName('grid-status-column');
|
6670
6709
|
class GridStatusColumnClass extends GridColumn {
|
6671
6710
|
_defaultRenderer(cell, _col, model) {
|
6672
6711
|
const contentAttr = this.getAttribute('status');
|
@@ -6684,11 +6723,11 @@ class GridStatusColumnClass extends GridColumn {
|
|
6684
6723
|
}
|
6685
6724
|
}
|
6686
6725
|
|
6687
|
-
customElements.define(componentName$
|
6726
|
+
customElements.define(componentName$5, GridStatusColumnClass);
|
6688
6727
|
|
6689
6728
|
/* eslint-disable class-methods-use-this */
|
6690
6729
|
|
6691
|
-
const componentName$
|
6730
|
+
const componentName$4 = getComponentName('grid-selection-column');
|
6692
6731
|
|
6693
6732
|
const createCheckboxEle = () => {
|
6694
6733
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -6743,7 +6782,7 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
6743
6782
|
}
|
6744
6783
|
}
|
6745
6784
|
|
6746
|
-
customElements.define(componentName$
|
6785
|
+
customElements.define(componentName$4, GridSelectionColumnClass);
|
6747
6786
|
|
6748
6787
|
const isValidDataType = (data) => {
|
6749
6788
|
const isValid = Array.isArray(data);
|
@@ -6755,7 +6794,7 @@ const isValidDataType = (data) => {
|
|
6755
6794
|
return isValid;
|
6756
6795
|
};
|
6757
6796
|
|
6758
|
-
const componentName$
|
6797
|
+
const componentName$3 = getComponentName('grid');
|
6759
6798
|
|
6760
6799
|
const GridMixin = (superclass) =>
|
6761
6800
|
class GridMixinClass extends superclass {
|
@@ -6879,9 +6918,16 @@ const GridMixin = (superclass) =>
|
|
6879
6918
|
const itemsIds = new Set(
|
6880
6919
|
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
6881
6920
|
);
|
6882
|
-
|
6921
|
+
|
6922
|
+
const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
6883
6923
|
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
6884
6924
|
);
|
6925
|
+
|
6926
|
+
// we want to update the selected items only if there is a reason,
|
6927
|
+
// to prevent redundant notifications
|
6928
|
+
if (this.grid.selectedItems.length !== newSelectedItems.length) {
|
6929
|
+
this.grid.selectedItems = newSelectedItems;
|
6930
|
+
}
|
6885
6931
|
}
|
6886
6932
|
}
|
6887
6933
|
}
|
@@ -6970,11 +7016,11 @@ const GridClass = compose(
|
|
6970
7016
|
}
|
6971
7017
|
`,
|
6972
7018
|
excludeAttrsSync: ['columns', 'tabindex'],
|
6973
|
-
componentName: componentName$
|
7019
|
+
componentName: componentName$3,
|
6974
7020
|
})
|
6975
7021
|
);
|
6976
7022
|
|
6977
|
-
customElements.define(componentName$
|
7023
|
+
customElements.define(componentName$3, GridClass);
|
6978
7024
|
|
6979
7025
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
6980
7026
|
|
@@ -7302,32 +7348,32 @@ const globals = {
|
|
7302
7348
|
shadow,
|
7303
7349
|
fonts,
|
7304
7350
|
};
|
7305
|
-
const vars$
|
7351
|
+
const vars$u = getThemeVars(globals);
|
7306
7352
|
|
7307
|
-
const globalRefs$
|
7353
|
+
const globalRefs$f = getThemeRefs(globals);
|
7308
7354
|
const compVars$4 = ButtonClass.cssVarList;
|
7309
7355
|
|
7310
7356
|
const mode = {
|
7311
|
-
primary: globalRefs$
|
7312
|
-
secondary: globalRefs$
|
7313
|
-
success: globalRefs$
|
7314
|
-
error: globalRefs$
|
7315
|
-
surface: globalRefs$
|
7357
|
+
primary: globalRefs$f.colors.primary,
|
7358
|
+
secondary: globalRefs$f.colors.secondary,
|
7359
|
+
success: globalRefs$f.colors.success,
|
7360
|
+
error: globalRefs$f.colors.error,
|
7361
|
+
surface: globalRefs$f.colors.surface,
|
7316
7362
|
};
|
7317
7363
|
|
7318
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
7364
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$C);
|
7319
7365
|
|
7320
7366
|
const button = {
|
7321
7367
|
...helperTheme$3,
|
7322
7368
|
|
7323
|
-
[compVars$4.fontFamily]: globalRefs$
|
7369
|
+
[compVars$4.fontFamily]: globalRefs$f.fonts.font1.family,
|
7324
7370
|
|
7325
7371
|
[compVars$4.cursor]: 'pointer',
|
7326
7372
|
[compVars$4.hostHeight]: '3em',
|
7327
7373
|
[compVars$4.hostWidth]: 'auto',
|
7328
7374
|
|
7329
|
-
[compVars$4.borderRadius]: globalRefs$
|
7330
|
-
[compVars$4.borderWidth]: globalRefs$
|
7375
|
+
[compVars$4.borderRadius]: globalRefs$f.radius.sm,
|
7376
|
+
[compVars$4.borderWidth]: globalRefs$f.border.xs,
|
7331
7377
|
[compVars$4.borderStyle]: 'solid',
|
7332
7378
|
[compVars$4.borderColor]: 'transparent',
|
7333
7379
|
|
@@ -7363,10 +7409,10 @@ const button = {
|
|
7363
7409
|
},
|
7364
7410
|
|
7365
7411
|
_disabled: {
|
7366
|
-
[helperVars$3.main]: globalRefs$
|
7367
|
-
[helperVars$3.dark]: globalRefs$
|
7368
|
-
[helperVars$3.light]: globalRefs$
|
7369
|
-
[helperVars$3.contrast]: globalRefs$
|
7412
|
+
[helperVars$3.main]: globalRefs$f.colors.surface.main,
|
7413
|
+
[helperVars$3.dark]: globalRefs$f.colors.surface.dark,
|
7414
|
+
[helperVars$3.light]: globalRefs$f.colors.surface.light,
|
7415
|
+
[helperVars$3.contrast]: globalRefs$f.colors.surface.contrast,
|
7370
7416
|
},
|
7371
7417
|
|
7372
7418
|
variant: {
|
@@ -7408,11 +7454,11 @@ const button = {
|
|
7408
7454
|
},
|
7409
7455
|
|
7410
7456
|
_focused: {
|
7411
|
-
[compVars$4.outlineColor]: globalRefs$
|
7457
|
+
[compVars$4.outlineColor]: globalRefs$f.colors.surface.main,
|
7412
7458
|
},
|
7413
7459
|
};
|
7414
7460
|
|
7415
|
-
const vars$
|
7461
|
+
const vars$t = {
|
7416
7462
|
...compVars$4,
|
7417
7463
|
...helperVars$3,
|
7418
7464
|
};
|
@@ -7420,25 +7466,25 @@ const vars$s = {
|
|
7420
7466
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7421
7467
|
__proto__: null,
|
7422
7468
|
default: button,
|
7423
|
-
vars: vars$
|
7469
|
+
vars: vars$t
|
7424
7470
|
});
|
7425
7471
|
|
7426
|
-
const componentName$
|
7427
|
-
const globalRefs$
|
7472
|
+
const componentName$2 = getComponentName('input-wrapper');
|
7473
|
+
const globalRefs$e = getThemeRefs(globals);
|
7428
7474
|
|
7429
|
-
const [theme$1, refs, vars$
|
7475
|
+
const [theme$1, refs, vars$s] = createHelperVars(
|
7430
7476
|
{
|
7431
|
-
labelTextColor: globalRefs$
|
7432
|
-
valueTextColor: globalRefs$
|
7433
|
-
placeholderTextColor: globalRefs$
|
7477
|
+
labelTextColor: globalRefs$e.colors.surface.contrast,
|
7478
|
+
valueTextColor: globalRefs$e.colors.surface.contrast,
|
7479
|
+
placeholderTextColor: globalRefs$e.colors.surface.main,
|
7434
7480
|
requiredIndicator: "'*'",
|
7435
|
-
errorMessageTextColor: globalRefs$
|
7481
|
+
errorMessageTextColor: globalRefs$e.colors.error.main,
|
7436
7482
|
|
7437
|
-
borderWidth: globalRefs$
|
7438
|
-
borderRadius: globalRefs$
|
7483
|
+
borderWidth: globalRefs$e.border.xs,
|
7484
|
+
borderRadius: globalRefs$e.radius.xs,
|
7439
7485
|
borderColor: 'transparent',
|
7440
7486
|
|
7441
|
-
outlineWidth: globalRefs$
|
7487
|
+
outlineWidth: globalRefs$e.border.sm,
|
7442
7488
|
outlineStyle: 'solid',
|
7443
7489
|
outlineColor: 'transparent',
|
7444
7490
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7449,9 +7495,9 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
7449
7495
|
horizontalPadding: '0.5em',
|
7450
7496
|
verticalPadding: '0.5em',
|
7451
7497
|
|
7452
|
-
backgroundColor: globalRefs$
|
7498
|
+
backgroundColor: globalRefs$e.colors.surface.light,
|
7453
7499
|
|
7454
|
-
fontFamily: globalRefs$
|
7500
|
+
fontFamily: globalRefs$e.fonts.font1.family,
|
7455
7501
|
|
7456
7502
|
size: {
|
7457
7503
|
xs: { fontSize: '12px' },
|
@@ -7465,51 +7511,86 @@ const [theme$1, refs, vars$r] = createHelperVars(
|
|
7465
7511
|
},
|
7466
7512
|
|
7467
7513
|
_focused: {
|
7468
|
-
outlineColor: globalRefs$
|
7514
|
+
outlineColor: globalRefs$e.colors.surface.main,
|
7469
7515
|
_invalid: {
|
7470
|
-
outlineColor: globalRefs$
|
7516
|
+
outlineColor: globalRefs$e.colors.error.main,
|
7471
7517
|
},
|
7472
7518
|
},
|
7473
7519
|
|
7474
7520
|
_bordered: {
|
7475
|
-
outlineWidth: globalRefs$
|
7476
|
-
borderColor: globalRefs$
|
7521
|
+
outlineWidth: globalRefs$e.border.xs,
|
7522
|
+
borderColor: globalRefs$e.colors.surface.main,
|
7477
7523
|
borderStyle: 'solid',
|
7478
7524
|
_invalid: {
|
7479
|
-
borderColor: globalRefs$
|
7525
|
+
borderColor: globalRefs$e.colors.error.main,
|
7480
7526
|
},
|
7481
7527
|
},
|
7482
7528
|
|
7483
7529
|
_disabled: {
|
7484
|
-
labelTextColor: globalRefs$
|
7485
|
-
borderColor: globalRefs$
|
7486
|
-
valueTextColor: globalRefs$
|
7487
|
-
placeholderTextColor: globalRefs$
|
7488
|
-
backgroundColor: globalRefs$
|
7530
|
+
labelTextColor: globalRefs$e.colors.surface.main,
|
7531
|
+
borderColor: globalRefs$e.colors.surface.main,
|
7532
|
+
valueTextColor: globalRefs$e.colors.surface.dark,
|
7533
|
+
placeholderTextColor: globalRefs$e.colors.surface.dark,
|
7534
|
+
backgroundColor: globalRefs$e.colors.surface.main,
|
7489
7535
|
},
|
7490
7536
|
},
|
7491
|
-
componentName$
|
7537
|
+
componentName$2
|
7492
7538
|
);
|
7493
7539
|
|
7494
7540
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7495
7541
|
__proto__: null,
|
7496
7542
|
default: theme$1,
|
7497
7543
|
refs: refs,
|
7498
|
-
vars: vars$
|
7544
|
+
vars: vars$s
|
7499
7545
|
});
|
7500
7546
|
|
7501
|
-
const vars$
|
7547
|
+
const vars$r = TextFieldClass.cssVarList;
|
7502
7548
|
|
7503
7549
|
const textField = {
|
7550
|
+
[vars$r.hostWidth]: refs.width,
|
7551
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
7552
|
+
[vars$r.fontSize]: refs.fontSize,
|
7553
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
7554
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
7555
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7556
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
7557
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
7558
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
7559
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
7560
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
7561
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
7562
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
7563
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
7564
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7565
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7566
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7567
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7568
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
7569
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7570
|
+
};
|
7571
|
+
|
7572
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7573
|
+
__proto__: null,
|
7574
|
+
default: textField,
|
7575
|
+
textField: textField,
|
7576
|
+
vars: vars$r
|
7577
|
+
});
|
7578
|
+
|
7579
|
+
const globalRefs$d = getThemeRefs(globals);
|
7580
|
+
const vars$q = PasswordClass.cssVarList;
|
7581
|
+
|
7582
|
+
const password = {
|
7504
7583
|
[vars$q.hostWidth]: refs.width,
|
7505
|
-
[vars$q.hostMinWidth]: refs.minWidth,
|
7506
7584
|
[vars$q.fontSize]: refs.fontSize,
|
7507
7585
|
[vars$q.fontFamily]: refs.fontFamily,
|
7508
7586
|
[vars$q.labelTextColor]: refs.labelTextColor,
|
7509
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7510
7587
|
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
7588
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7589
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
7590
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7591
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7511
7592
|
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
7512
|
-
[vars$q.
|
7593
|
+
[vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7513
7594
|
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7514
7595
|
[vars$q.inputBorderStyle]: refs.borderStyle,
|
7515
7596
|
[vars$q.inputBorderColor]: refs.borderColor,
|
@@ -7518,33 +7599,27 @@ const textField = {
|
|
7518
7599
|
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
7519
7600
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7520
7601
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7521
|
-
[vars$q.
|
7522
|
-
[vars$q.
|
7523
|
-
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7602
|
+
[vars$q.revealButtonOffset]: globalRefs$d.spacing.md,
|
7603
|
+
[vars$q.revealButtonSize]: refs.toggleButtonSize,
|
7524
7604
|
};
|
7525
7605
|
|
7526
|
-
var
|
7606
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7527
7607
|
__proto__: null,
|
7528
|
-
default:
|
7529
|
-
textField: textField,
|
7608
|
+
default: password,
|
7530
7609
|
vars: vars$q
|
7531
7610
|
});
|
7532
7611
|
|
7533
|
-
const
|
7534
|
-
const vars$p = PasswordClass.cssVarList;
|
7612
|
+
const vars$p = NumberFieldClass.cssVarList;
|
7535
7613
|
|
7536
|
-
const
|
7614
|
+
const numberField = {
|
7537
7615
|
[vars$p.hostWidth]: refs.width,
|
7616
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
7538
7617
|
[vars$p.fontSize]: refs.fontSize,
|
7539
7618
|
[vars$p.fontFamily]: refs.fontFamily,
|
7540
7619
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
7541
7620
|
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7542
|
-
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7543
|
-
[vars$p.inputHeight]: refs.inputHeight,
|
7544
|
-
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7545
|
-
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7546
7621
|
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7547
|
-
[vars$p.
|
7622
|
+
[vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
|
7548
7623
|
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7549
7624
|
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7550
7625
|
[vars$p.inputBorderColor]: refs.borderColor,
|
@@ -7553,19 +7628,21 @@ const password = {
|
|
7553
7628
|
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7554
7629
|
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7555
7630
|
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7556
|
-
[vars$p.
|
7557
|
-
[vars$p.
|
7631
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7632
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7633
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7634
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
7558
7635
|
};
|
7559
7636
|
|
7560
|
-
var
|
7637
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7561
7638
|
__proto__: null,
|
7562
|
-
default:
|
7639
|
+
default: numberField,
|
7563
7640
|
vars: vars$p
|
7564
7641
|
});
|
7565
7642
|
|
7566
|
-
const vars$o =
|
7643
|
+
const vars$o = EmailFieldClass.cssVarList;
|
7567
7644
|
|
7568
|
-
const
|
7645
|
+
const emailField = {
|
7569
7646
|
[vars$o.hostWidth]: refs.width,
|
7570
7647
|
[vars$o.hostMinWidth]: refs.minWidth,
|
7571
7648
|
[vars$o.fontSize]: refs.fontSize,
|
@@ -7573,6 +7650,7 @@ const numberField = {
|
|
7573
7650
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7574
7651
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7575
7652
|
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7653
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7576
7654
|
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
7577
7655
|
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7578
7656
|
[vars$o.inputBorderStyle]: refs.borderStyle,
|
@@ -7583,197 +7661,165 @@ const numberField = {
|
|
7583
7661
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7584
7662
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7585
7663
|
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7586
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7587
7664
|
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
7588
7665
|
[vars$o.inputHeight]: refs.inputHeight,
|
7589
7666
|
};
|
7590
7667
|
|
7591
|
-
var
|
7668
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7592
7669
|
__proto__: null,
|
7593
|
-
default:
|
7670
|
+
default: emailField,
|
7594
7671
|
vars: vars$o
|
7595
7672
|
});
|
7596
7673
|
|
7597
|
-
const
|
7674
|
+
const globalRefs$c = getThemeRefs(globals);
|
7675
|
+
const vars$n = TextAreaClass.cssVarList;
|
7598
7676
|
|
7599
|
-
const
|
7677
|
+
const textArea = {
|
7600
7678
|
[vars$n.hostWidth]: refs.width,
|
7601
7679
|
[vars$n.hostMinWidth]: refs.minWidth,
|
7602
7680
|
[vars$n.fontSize]: refs.fontSize,
|
7603
7681
|
[vars$n.fontFamily]: refs.fontFamily,
|
7604
7682
|
[vars$n.labelTextColor]: refs.labelTextColor,
|
7683
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7605
7684
|
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7685
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7606
7686
|
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7607
|
-
[vars$n.
|
7608
|
-
[vars$n.
|
7687
|
+
[vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7688
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7609
7689
|
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7610
7690
|
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7611
7691
|
[vars$n.inputBorderColor]: refs.borderColor,
|
7612
|
-
[vars$n.inputBorderRadius]: refs.borderRadius,
|
7613
7692
|
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
7614
7693
|
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7615
7694
|
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7616
7695
|
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7617
|
-
[vars$n.
|
7618
|
-
[vars$n.
|
7619
|
-
|
7696
|
+
[vars$n.inputResizeType]: 'vertical',
|
7697
|
+
[vars$n.inputMinHeight]: '5em',
|
7698
|
+
|
7699
|
+
_disabled: {
|
7700
|
+
[vars$n.inputBackgroundColor]: globalRefs$c.colors.surface.light,
|
7701
|
+
},
|
7702
|
+
|
7703
|
+
_readonly: {
|
7704
|
+
[vars$n.inputResizeType]: 'none',
|
7705
|
+
},
|
7620
7706
|
};
|
7621
7707
|
|
7622
|
-
var
|
7708
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7623
7709
|
__proto__: null,
|
7624
|
-
default:
|
7710
|
+
default: textArea,
|
7625
7711
|
vars: vars$n
|
7626
7712
|
});
|
7627
7713
|
|
7628
|
-
const
|
7629
|
-
const
|
7714
|
+
const vars$m = CheckboxClass.cssVarList;
|
7715
|
+
const checkboxSize = '1.35em';
|
7630
7716
|
|
7631
|
-
const
|
7717
|
+
const checkbox = {
|
7632
7718
|
[vars$m.hostWidth]: refs.width,
|
7633
|
-
[vars$m.hostMinWidth]: refs.minWidth,
|
7634
7719
|
[vars$m.fontSize]: refs.fontSize,
|
7635
7720
|
[vars$m.fontFamily]: refs.fontFamily,
|
7636
7721
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
7637
7722
|
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7723
|
+
[vars$m.labelFontWeight]: '400',
|
7724
|
+
[vars$m.labelLineHeight]: checkboxSize,
|
7725
|
+
[vars$m.labelSpacing]: '1em',
|
7638
7726
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7639
|
-
[vars$m.
|
7640
|
-
[vars$m.
|
7641
|
-
[vars$m.
|
7727
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
7728
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7729
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7730
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7642
7731
|
[vars$m.inputBorderRadius]: refs.borderRadius,
|
7732
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
7643
7733
|
[vars$m.inputBorderWidth]: refs.borderWidth,
|
7644
7734
|
[vars$m.inputBorderStyle]: refs.borderStyle,
|
7645
|
-
[vars$m.
|
7646
|
-
[vars$m.
|
7647
|
-
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7648
|
-
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7649
|
-
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7650
|
-
[vars$m.inputResizeType]: 'vertical',
|
7651
|
-
[vars$m.inputMinHeight]: '5em',
|
7735
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
7736
|
+
[vars$m.inputSize]: checkboxSize,
|
7652
7737
|
|
7653
|
-
|
7654
|
-
[vars$m.
|
7738
|
+
_checked: {
|
7739
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
7655
7740
|
},
|
7656
7741
|
|
7657
|
-
|
7658
|
-
[vars$m.
|
7742
|
+
_disabled: {
|
7743
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
7659
7744
|
},
|
7660
7745
|
};
|
7661
7746
|
|
7662
|
-
var
|
7747
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7663
7748
|
__proto__: null,
|
7664
|
-
default:
|
7749
|
+
default: checkbox,
|
7665
7750
|
vars: vars$m
|
7666
7751
|
});
|
7667
7752
|
|
7668
|
-
const
|
7669
|
-
const
|
7753
|
+
const knobMargin = '2px';
|
7754
|
+
const checkboxHeight = '1.25em';
|
7670
7755
|
|
7671
|
-
const
|
7756
|
+
const globalRefs$b = getThemeRefs(globals);
|
7757
|
+
const vars$l = SwitchToggleClass.cssVarList;
|
7758
|
+
|
7759
|
+
const switchToggle = {
|
7672
7760
|
[vars$l.hostWidth]: refs.width,
|
7673
7761
|
[vars$l.fontSize]: refs.fontSize,
|
7674
7762
|
[vars$l.fontFamily]: refs.fontFamily,
|
7675
|
-
|
7676
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7677
|
-
[vars$l.labelFontWeight]: '400',
|
7678
|
-
[vars$l.labelLineHeight]: checkboxSize,
|
7679
|
-
[vars$l.labelSpacing]: '1em',
|
7680
|
-
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7763
|
+
|
7681
7764
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7682
7765
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7683
7766
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7684
7767
|
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7685
|
-
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7686
|
-
[vars$l.inputBorderColor]: refs.borderColor,
|
7687
|
-
[vars$l.inputBorderWidth]: refs.borderWidth,
|
7688
|
-
[vars$l.inputBorderStyle]: refs.borderStyle,
|
7689
|
-
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
7690
|
-
[vars$l.inputSize]: checkboxSize,
|
7691
7768
|
|
7692
|
-
|
7693
|
-
|
7694
|
-
|
7695
|
-
|
7696
|
-
|
7697
|
-
|
7698
|
-
|
7699
|
-
|
7769
|
+
[vars$l.trackBorderStyle]: refs.borderStyle,
|
7770
|
+
[vars$l.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7771
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
7772
|
+
[vars$l.trackBackgroundColor]: 'none',
|
7773
|
+
[vars$l.trackBorderRadius]: globalRefs$b.radius.md,
|
7774
|
+
[vars$l.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7775
|
+
[vars$l.trackHeight]: checkboxHeight,
|
7776
|
+
|
7777
|
+
[vars$l.knobSize]: `calc(1em - ${knobMargin})`,
|
7778
|
+
[vars$l.knobRadius]: '50%',
|
7779
|
+
[vars$l.knobTopOffset]: '1px',
|
7780
|
+
[vars$l.knobLeftOffset]: knobMargin,
|
7781
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
7782
|
+
[vars$l.knobTransitionDuration]: '0.3s',
|
7700
7783
|
|
7701
|
-
|
7702
|
-
|
7703
|
-
|
7704
|
-
vars:
|
7705
|
-
|
7706
|
-
|
7707
|
-
const knobMargin = '2px';
|
7708
|
-
const checkboxHeight = '1.25em';
|
7709
|
-
|
7710
|
-
const globalRefs$a = getThemeRefs(globals);
|
7711
|
-
const vars$k = SwitchToggleClass.cssVarList;
|
7712
|
-
|
7713
|
-
const switchToggle = {
|
7714
|
-
[vars$k.hostWidth]: refs.width,
|
7715
|
-
[vars$k.fontSize]: refs.fontSize,
|
7716
|
-
[vars$k.fontFamily]: refs.fontFamily,
|
7717
|
-
|
7718
|
-
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
7719
|
-
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7720
|
-
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7721
|
-
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7722
|
-
|
7723
|
-
[vars$k.trackBorderStyle]: refs.borderStyle,
|
7724
|
-
[vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7725
|
-
[vars$k.trackBorderColor]: refs.borderColor,
|
7726
|
-
[vars$k.trackBackgroundColor]: 'none',
|
7727
|
-
[vars$k.trackBorderRadius]: globalRefs$a.radius.md,
|
7728
|
-
[vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7729
|
-
[vars$k.trackHeight]: checkboxHeight,
|
7730
|
-
|
7731
|
-
[vars$k.knobSize]: `calc(1em - ${knobMargin})`,
|
7732
|
-
[vars$k.knobRadius]: '50%',
|
7733
|
-
[vars$k.knobTopOffset]: '1px',
|
7734
|
-
[vars$k.knobLeftOffset]: knobMargin,
|
7735
|
-
[vars$k.knobColor]: refs.valueTextColor,
|
7736
|
-
[vars$k.knobTransitionDuration]: '0.3s',
|
7737
|
-
|
7738
|
-
[vars$k.labelTextColor]: refs.labelTextColor,
|
7739
|
-
[vars$k.labelFontWeight]: '400',
|
7740
|
-
[vars$k.labelLineHeight]: '1.35em',
|
7741
|
-
[vars$k.labelSpacing]: '1em',
|
7742
|
-
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
7743
|
-
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
7784
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7785
|
+
[vars$l.labelFontWeight]: '400',
|
7786
|
+
[vars$l.labelLineHeight]: '1.35em',
|
7787
|
+
[vars$l.labelSpacing]: '1em',
|
7788
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7789
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7744
7790
|
|
7745
7791
|
_checked: {
|
7746
|
-
[vars$
|
7747
|
-
[vars$
|
7748
|
-
[vars$
|
7749
|
-
[vars$
|
7750
|
-
[vars$
|
7792
|
+
[vars$l.trackBorderColor]: refs.borderColor,
|
7793
|
+
[vars$l.trackBackgroundColor]: refs.backgroundColor,
|
7794
|
+
[vars$l.knobLeftOffset]: `calc(100% - var(${vars$l.knobSize}) - ${knobMargin})`,
|
7795
|
+
[vars$l.knobColor]: refs.valueTextColor,
|
7796
|
+
[vars$l.knobTextColor]: refs.valueTextColor,
|
7751
7797
|
},
|
7752
7798
|
|
7753
7799
|
_disabled: {
|
7754
|
-
[vars$
|
7755
|
-
[vars$
|
7756
|
-
[vars$
|
7757
|
-
[vars$
|
7800
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
7801
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.surface.main,
|
7802
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
7803
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7758
7804
|
_checked: {
|
7759
|
-
[vars$
|
7760
|
-
[vars$
|
7805
|
+
[vars$l.knobColor]: globalRefs$b.colors.surface.light,
|
7806
|
+
[vars$l.trackBackgroundColor]: globalRefs$b.colors.surface.main,
|
7761
7807
|
},
|
7762
7808
|
},
|
7763
7809
|
|
7764
7810
|
_invalid: {
|
7765
|
-
[vars$
|
7766
|
-
[vars$
|
7811
|
+
[vars$l.trackBorderColor]: globalRefs$b.colors.error.main,
|
7812
|
+
[vars$l.knobColor]: globalRefs$b.colors.error.main,
|
7767
7813
|
},
|
7768
7814
|
};
|
7769
7815
|
|
7770
7816
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7771
7817
|
__proto__: null,
|
7772
7818
|
default: switchToggle,
|
7773
|
-
vars: vars$
|
7819
|
+
vars: vars$l
|
7774
7820
|
});
|
7775
7821
|
|
7776
|
-
const globalRefs$
|
7822
|
+
const globalRefs$a = getThemeRefs(globals);
|
7777
7823
|
|
7778
7824
|
const compVars$3 = ContainerClass.cssVarList;
|
7779
7825
|
|
@@ -7795,18 +7841,18 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7795
7841
|
horizontalAlignment,
|
7796
7842
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7797
7843
|
},
|
7798
|
-
componentName$
|
7844
|
+
componentName$w
|
7799
7845
|
);
|
7800
7846
|
|
7801
|
-
const { shadowColor } = helperRefs$2;
|
7847
|
+
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
7802
7848
|
|
7803
7849
|
const container = {
|
7804
7850
|
...helperTheme$2,
|
7805
7851
|
|
7806
7852
|
[compVars$3.hostWidth]: '100%',
|
7807
7853
|
[compVars$3.boxShadow]: 'none',
|
7808
|
-
[compVars$3.backgroundColor]: globalRefs$
|
7809
|
-
[compVars$3.color]: globalRefs$
|
7854
|
+
[compVars$3.backgroundColor]: globalRefs$a.colors.surface.light,
|
7855
|
+
[compVars$3.color]: globalRefs$a.colors.surface.contrast,
|
7810
7856
|
[compVars$3.borderRadius]: '0px',
|
7811
7857
|
|
7812
7858
|
verticalPadding: {
|
@@ -7853,34 +7899,34 @@ const container = {
|
|
7853
7899
|
|
7854
7900
|
shadow: {
|
7855
7901
|
sm: {
|
7856
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7902
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.sm} ${shadowColor$1}`,
|
7857
7903
|
},
|
7858
7904
|
md: {
|
7859
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7905
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.md} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.md} ${shadowColor$1}`,
|
7860
7906
|
},
|
7861
7907
|
lg: {
|
7862
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7908
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.lg} ${shadowColor$1}`,
|
7863
7909
|
},
|
7864
7910
|
xl: {
|
7865
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7911
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor$1}`,
|
7866
7912
|
},
|
7867
7913
|
'2xl': {
|
7868
7914
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
7869
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
7915
|
+
[compVars$3.boxShadow]: `${globalRefs$a.shadow.wide['2xl']} ${shadowColor$1}`,
|
7870
7916
|
},
|
7871
7917
|
},
|
7872
7918
|
|
7873
7919
|
borderRadius: {
|
7874
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
7875
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
7876
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
7877
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
7878
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
7879
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
7920
|
+
sm: { [compVars$3.borderRadius]: globalRefs$a.radius.sm },
|
7921
|
+
md: { [compVars$3.borderRadius]: globalRefs$a.radius.md },
|
7922
|
+
lg: { [compVars$3.borderRadius]: globalRefs$a.radius.lg },
|
7923
|
+
xl: { [compVars$3.borderRadius]: globalRefs$a.radius.xl },
|
7924
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$a.radius['2xl'] },
|
7925
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$a.radius['3xl'] },
|
7880
7926
|
},
|
7881
7927
|
};
|
7882
7928
|
|
7883
|
-
const vars$
|
7929
|
+
const vars$k = {
|
7884
7930
|
...compVars$3,
|
7885
7931
|
...helperVars$2,
|
7886
7932
|
};
|
@@ -7888,152 +7934,152 @@ const vars$j = {
|
|
7888
7934
|
var container$1 = /*#__PURE__*/Object.freeze({
|
7889
7935
|
__proto__: null,
|
7890
7936
|
default: container,
|
7891
|
-
vars: vars$
|
7937
|
+
vars: vars$k
|
7892
7938
|
});
|
7893
7939
|
|
7894
|
-
const vars$
|
7940
|
+
const vars$j = LogoClass.cssVarList;
|
7895
7941
|
|
7896
7942
|
const logo$1 = {
|
7897
|
-
[vars$
|
7943
|
+
[vars$j.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
7898
7944
|
};
|
7899
7945
|
|
7900
7946
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
7901
7947
|
__proto__: null,
|
7902
7948
|
default: logo$1,
|
7903
|
-
vars: vars$
|
7949
|
+
vars: vars$j
|
7904
7950
|
});
|
7905
7951
|
|
7906
|
-
const vars$
|
7952
|
+
const vars$i = TotpImageClass.cssVarList;
|
7907
7953
|
|
7908
7954
|
const logo = {
|
7909
|
-
[vars$
|
7955
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
7910
7956
|
};
|
7911
7957
|
|
7912
7958
|
var totpImage = /*#__PURE__*/Object.freeze({
|
7913
7959
|
__proto__: null,
|
7914
7960
|
default: logo,
|
7915
|
-
vars: vars$
|
7961
|
+
vars: vars$i
|
7916
7962
|
});
|
7917
7963
|
|
7918
|
-
const globalRefs$
|
7919
|
-
const vars$
|
7964
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7965
|
+
const vars$h = TextClass.cssVarList;
|
7920
7966
|
|
7921
7967
|
const text = {
|
7922
|
-
[vars$
|
7923
|
-
[vars$
|
7924
|
-
[vars$
|
7968
|
+
[vars$h.textLineHeight]: '1.35em',
|
7969
|
+
[vars$h.textAlign]: 'left',
|
7970
|
+
[vars$h.textColor]: globalRefs$9.colors.surface.dark,
|
7925
7971
|
variant: {
|
7926
7972
|
h1: {
|
7927
|
-
[vars$
|
7928
|
-
[vars$
|
7929
|
-
[vars$
|
7973
|
+
[vars$h.fontSize]: globalRefs$9.typography.h1.size,
|
7974
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h1.weight,
|
7975
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h1.font,
|
7930
7976
|
},
|
7931
7977
|
h2: {
|
7932
|
-
[vars$
|
7933
|
-
[vars$
|
7934
|
-
[vars$
|
7978
|
+
[vars$h.fontSize]: globalRefs$9.typography.h2.size,
|
7979
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h2.weight,
|
7980
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h2.font,
|
7935
7981
|
},
|
7936
7982
|
h3: {
|
7937
|
-
[vars$
|
7938
|
-
[vars$
|
7939
|
-
[vars$
|
7983
|
+
[vars$h.fontSize]: globalRefs$9.typography.h3.size,
|
7984
|
+
[vars$h.fontWeight]: globalRefs$9.typography.h3.weight,
|
7985
|
+
[vars$h.fontFamily]: globalRefs$9.typography.h3.font,
|
7940
7986
|
},
|
7941
7987
|
subtitle1: {
|
7942
|
-
[vars$
|
7943
|
-
[vars$
|
7944
|
-
[vars$
|
7988
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle1.size,
|
7989
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle1.weight,
|
7990
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle1.font,
|
7945
7991
|
},
|
7946
7992
|
subtitle2: {
|
7947
|
-
[vars$
|
7948
|
-
[vars$
|
7949
|
-
[vars$
|
7993
|
+
[vars$h.fontSize]: globalRefs$9.typography.subtitle2.size,
|
7994
|
+
[vars$h.fontWeight]: globalRefs$9.typography.subtitle2.weight,
|
7995
|
+
[vars$h.fontFamily]: globalRefs$9.typography.subtitle2.font,
|
7950
7996
|
},
|
7951
7997
|
body1: {
|
7952
|
-
[vars$
|
7953
|
-
[vars$
|
7954
|
-
[vars$
|
7998
|
+
[vars$h.fontSize]: globalRefs$9.typography.body1.size,
|
7999
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body1.weight,
|
8000
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body1.font,
|
7955
8001
|
},
|
7956
8002
|
body2: {
|
7957
|
-
[vars$
|
7958
|
-
[vars$
|
7959
|
-
[vars$
|
8003
|
+
[vars$h.fontSize]: globalRefs$9.typography.body2.size,
|
8004
|
+
[vars$h.fontWeight]: globalRefs$9.typography.body2.weight,
|
8005
|
+
[vars$h.fontFamily]: globalRefs$9.typography.body2.font,
|
7960
8006
|
},
|
7961
8007
|
},
|
7962
8008
|
|
7963
8009
|
mode: {
|
7964
8010
|
primary: {
|
7965
|
-
[vars$
|
8011
|
+
[vars$h.textColor]: globalRefs$9.colors.primary.main,
|
7966
8012
|
},
|
7967
8013
|
secondary: {
|
7968
|
-
[vars$
|
8014
|
+
[vars$h.textColor]: globalRefs$9.colors.secondary.main,
|
7969
8015
|
},
|
7970
8016
|
error: {
|
7971
|
-
[vars$
|
8017
|
+
[vars$h.textColor]: globalRefs$9.colors.error.main,
|
7972
8018
|
},
|
7973
8019
|
success: {
|
7974
|
-
[vars$
|
8020
|
+
[vars$h.textColor]: globalRefs$9.colors.success.main,
|
7975
8021
|
},
|
7976
8022
|
},
|
7977
8023
|
|
7978
8024
|
textAlign: {
|
7979
|
-
right: { [vars$
|
7980
|
-
left: { [vars$
|
7981
|
-
center: { [vars$
|
8025
|
+
right: { [vars$h.textAlign]: 'right' },
|
8026
|
+
left: { [vars$h.textAlign]: 'left' },
|
8027
|
+
center: { [vars$h.textAlign]: 'center' },
|
7982
8028
|
},
|
7983
8029
|
|
7984
8030
|
_fullWidth: {
|
7985
|
-
[vars$
|
8031
|
+
[vars$h.hostWidth]: '100%',
|
7986
8032
|
},
|
7987
8033
|
|
7988
8034
|
_italic: {
|
7989
|
-
[vars$
|
8035
|
+
[vars$h.fontStyle]: 'italic',
|
7990
8036
|
},
|
7991
8037
|
|
7992
8038
|
_uppercase: {
|
7993
|
-
[vars$
|
8039
|
+
[vars$h.textTransform]: 'uppercase',
|
7994
8040
|
},
|
7995
8041
|
|
7996
8042
|
_lowercase: {
|
7997
|
-
[vars$
|
8043
|
+
[vars$h.textTransform]: 'lowercase',
|
7998
8044
|
},
|
7999
8045
|
};
|
8000
8046
|
|
8001
8047
|
var text$1 = /*#__PURE__*/Object.freeze({
|
8002
8048
|
__proto__: null,
|
8003
8049
|
default: text,
|
8004
|
-
vars: vars$
|
8050
|
+
vars: vars$h
|
8005
8051
|
});
|
8006
8052
|
|
8007
|
-
const globalRefs$
|
8008
|
-
const vars$
|
8053
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8054
|
+
const vars$g = LinkClass.cssVarList;
|
8009
8055
|
|
8010
8056
|
const link = {
|
8011
|
-
[vars$
|
8057
|
+
[vars$g.cursor]: 'pointer',
|
8012
8058
|
|
8013
|
-
[vars$
|
8059
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
8014
8060
|
|
8015
8061
|
textAlign: {
|
8016
|
-
right: { [vars$
|
8017
|
-
left: { [vars$
|
8018
|
-
center: { [vars$
|
8062
|
+
right: { [vars$g.textAlign]: 'right' },
|
8063
|
+
left: { [vars$g.textAlign]: 'left' },
|
8064
|
+
center: { [vars$g.textAlign]: 'center' },
|
8019
8065
|
},
|
8020
8066
|
|
8021
8067
|
_fullWidth: {
|
8022
|
-
[vars$
|
8068
|
+
[vars$g.hostWidth]: '100%',
|
8023
8069
|
},
|
8024
8070
|
|
8025
8071
|
mode: {
|
8026
8072
|
primary: {
|
8027
|
-
[vars$
|
8073
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
8028
8074
|
},
|
8029
8075
|
secondary: {
|
8030
|
-
[vars$
|
8076
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
8031
8077
|
},
|
8032
8078
|
error: {
|
8033
|
-
[vars$
|
8079
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
8034
8080
|
},
|
8035
8081
|
success: {
|
8036
|
-
[vars$
|
8082
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
8037
8083
|
},
|
8038
8084
|
},
|
8039
8085
|
};
|
@@ -8041,10 +8087,10 @@ const link = {
|
|
8041
8087
|
var link$1 = /*#__PURE__*/Object.freeze({
|
8042
8088
|
__proto__: null,
|
8043
8089
|
default: link,
|
8044
|
-
vars: vars$
|
8090
|
+
vars: vars$g
|
8045
8091
|
});
|
8046
8092
|
|
8047
|
-
const globalRefs$
|
8093
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8048
8094
|
const compVars$2 = DividerClass.cssVarList;
|
8049
8095
|
|
8050
8096
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -8052,7 +8098,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8052
8098
|
thickness: '2px',
|
8053
8099
|
spacing: '10px',
|
8054
8100
|
},
|
8055
|
-
componentName$
|
8101
|
+
componentName$v
|
8056
8102
|
);
|
8057
8103
|
|
8058
8104
|
const divider = {
|
@@ -8062,7 +8108,7 @@ const divider = {
|
|
8062
8108
|
[compVars$2.flexDirection]: 'row',
|
8063
8109
|
[compVars$2.alignSelf]: 'stretch',
|
8064
8110
|
[compVars$2.hostWidth]: '100%',
|
8065
|
-
[compVars$2.stripeColor]: globalRefs$
|
8111
|
+
[compVars$2.stripeColor]: globalRefs$7.colors.surface.main,
|
8066
8112
|
[compVars$2.stripeColorOpacity]: '0.5',
|
8067
8113
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8068
8114
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -8081,7 +8127,7 @@ const divider = {
|
|
8081
8127
|
},
|
8082
8128
|
};
|
8083
8129
|
|
8084
|
-
const vars$
|
8130
|
+
const vars$f = {
|
8085
8131
|
...compVars$2,
|
8086
8132
|
...helperVars$1,
|
8087
8133
|
};
|
@@ -8089,99 +8135,99 @@ const vars$e = {
|
|
8089
8135
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
8090
8136
|
__proto__: null,
|
8091
8137
|
default: divider,
|
8092
|
-
vars: vars$
|
8138
|
+
vars: vars$f
|
8093
8139
|
});
|
8094
8140
|
|
8095
|
-
const vars$
|
8141
|
+
const vars$e = PasscodeClass.cssVarList;
|
8096
8142
|
|
8097
8143
|
const passcode = {
|
8098
|
-
[vars$
|
8099
|
-
[vars$
|
8100
|
-
[vars$
|
8101
|
-
[vars$
|
8102
|
-
[vars$
|
8103
|
-
[vars$
|
8104
|
-
[vars$
|
8105
|
-
[vars$
|
8106
|
-
[vars$
|
8107
|
-
[vars$
|
8108
|
-
[vars$
|
8109
|
-
[vars$
|
8110
|
-
[vars$
|
8111
|
-
[vars$
|
8144
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
8145
|
+
[vars$e.fontSize]: refs.fontSize,
|
8146
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
8147
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
8148
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
8149
|
+
[vars$e.digitValueTextColor]: refs.valueTextColor,
|
8150
|
+
[vars$e.digitPadding]: '0',
|
8151
|
+
[vars$e.digitTextAlign]: 'center',
|
8152
|
+
[vars$e.digitSpacing]: '4px',
|
8153
|
+
[vars$e.hostWidth]: refs.width,
|
8154
|
+
[vars$e.digitOutlineColor]: 'transparent',
|
8155
|
+
[vars$e.digitOutlineWidth]: refs.outlineWidth,
|
8156
|
+
[vars$e.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8157
|
+
[vars$e.digitSize]: refs.inputHeight,
|
8112
8158
|
|
8113
8159
|
_hideCursor: {
|
8114
|
-
[vars$
|
8160
|
+
[vars$e.digitCaretTextColor]: 'transparent',
|
8115
8161
|
},
|
8116
8162
|
};
|
8117
8163
|
|
8118
8164
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8119
8165
|
__proto__: null,
|
8120
8166
|
default: passcode,
|
8121
|
-
vars: vars$
|
8167
|
+
vars: vars$e
|
8122
8168
|
});
|
8123
8169
|
|
8124
|
-
const globalRefs$
|
8125
|
-
const vars$
|
8170
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8171
|
+
const vars$d = LoaderLinearClass.cssVarList;
|
8126
8172
|
|
8127
8173
|
const loaderLinear = {
|
8128
|
-
[vars$
|
8129
|
-
[vars$
|
8174
|
+
[vars$d.hostDisplay]: 'inline-block',
|
8175
|
+
[vars$d.hostWidth]: '100%',
|
8130
8176
|
|
8131
|
-
[vars$
|
8132
|
-
[vars$
|
8177
|
+
[vars$d.barColor]: globalRefs$6.colors.surface.contrast,
|
8178
|
+
[vars$d.barWidth]: '20%',
|
8133
8179
|
|
8134
|
-
[vars$
|
8135
|
-
[vars$
|
8180
|
+
[vars$d.barBackgroundColor]: globalRefs$6.colors.surface.main,
|
8181
|
+
[vars$d.barBorderRadius]: '4px',
|
8136
8182
|
|
8137
|
-
[vars$
|
8138
|
-
[vars$
|
8139
|
-
[vars$
|
8140
|
-
[vars$
|
8183
|
+
[vars$d.animationDuration]: '2s',
|
8184
|
+
[vars$d.animationTimingFunction]: 'linear',
|
8185
|
+
[vars$d.animationIterationCount]: 'infinite',
|
8186
|
+
[vars$d.verticalPadding]: '0.25em',
|
8141
8187
|
|
8142
8188
|
size: {
|
8143
|
-
xs: { [vars$
|
8144
|
-
sm: { [vars$
|
8145
|
-
md: { [vars$
|
8146
|
-
lg: { [vars$
|
8189
|
+
xs: { [vars$d.barHeight]: '2px' },
|
8190
|
+
sm: { [vars$d.barHeight]: '4px' },
|
8191
|
+
md: { [vars$d.barHeight]: '6px' },
|
8192
|
+
lg: { [vars$d.barHeight]: '8px' },
|
8147
8193
|
},
|
8148
8194
|
|
8149
8195
|
mode: {
|
8150
8196
|
primary: {
|
8151
|
-
[vars$
|
8197
|
+
[vars$d.barColor]: globalRefs$6.colors.primary.main,
|
8152
8198
|
},
|
8153
8199
|
secondary: {
|
8154
|
-
[vars$
|
8200
|
+
[vars$d.barColor]: globalRefs$6.colors.secondary.main,
|
8155
8201
|
},
|
8156
8202
|
},
|
8157
8203
|
|
8158
8204
|
_hidden: {
|
8159
|
-
[vars$
|
8205
|
+
[vars$d.hostDisplay]: 'none',
|
8160
8206
|
},
|
8161
8207
|
};
|
8162
8208
|
|
8163
8209
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8164
8210
|
__proto__: null,
|
8165
8211
|
default: loaderLinear,
|
8166
|
-
vars: vars$
|
8212
|
+
vars: vars$d
|
8167
8213
|
});
|
8168
8214
|
|
8169
|
-
const globalRefs$
|
8215
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8170
8216
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
8171
8217
|
|
8172
8218
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8173
8219
|
{
|
8174
|
-
spinnerColor: globalRefs$
|
8220
|
+
spinnerColor: globalRefs$5.colors.surface.contrast,
|
8175
8221
|
mode: {
|
8176
8222
|
primary: {
|
8177
|
-
spinnerColor: globalRefs$
|
8223
|
+
spinnerColor: globalRefs$5.colors.primary.main,
|
8178
8224
|
},
|
8179
8225
|
secondary: {
|
8180
|
-
spinnerColor: globalRefs$
|
8226
|
+
spinnerColor: globalRefs$5.colors.secondary.main,
|
8181
8227
|
},
|
8182
8228
|
},
|
8183
8229
|
},
|
8184
|
-
componentName$
|
8230
|
+
componentName$x
|
8185
8231
|
);
|
8186
8232
|
|
8187
8233
|
const loaderRadial = {
|
@@ -8210,7 +8256,7 @@ const loaderRadial = {
|
|
8210
8256
|
[compVars$1.hostDisplay]: 'none',
|
8211
8257
|
},
|
8212
8258
|
};
|
8213
|
-
const vars$
|
8259
|
+
const vars$c = {
|
8214
8260
|
...compVars$1,
|
8215
8261
|
...helperVars,
|
8216
8262
|
};
|
@@ -8218,73 +8264,108 @@ const vars$b = {
|
|
8218
8264
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
8219
8265
|
__proto__: null,
|
8220
8266
|
default: loaderRadial,
|
8221
|
-
vars: vars$
|
8267
|
+
vars: vars$c
|
8222
8268
|
});
|
8223
8269
|
|
8224
|
-
const globalRefs$
|
8225
|
-
const vars$
|
8270
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8271
|
+
const vars$b = ComboBoxClass.cssVarList;
|
8226
8272
|
|
8227
8273
|
const comboBox = {
|
8228
|
-
[vars$
|
8229
|
-
[vars$
|
8230
|
-
[vars$
|
8231
|
-
[vars$
|
8232
|
-
[vars$
|
8233
|
-
[vars$
|
8234
|
-
[vars$
|
8235
|
-
[vars$
|
8236
|
-
[vars$
|
8237
|
-
[vars$
|
8238
|
-
[vars$
|
8239
|
-
[vars$
|
8240
|
-
[vars$
|
8241
|
-
[vars$
|
8242
|
-
[vars$
|
8243
|
-
[vars$
|
8244
|
-
[vars$
|
8245
|
-
[vars$
|
8246
|
-
[vars$
|
8247
|
-
[vars$
|
8248
|
-
[vars$
|
8249
|
-
[vars$
|
8250
|
-
[vars$
|
8274
|
+
[vars$b.hostWidth]: refs.width,
|
8275
|
+
[vars$b.fontSize]: refs.fontSize,
|
8276
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
8277
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
8278
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
8279
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
8280
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
8281
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
8282
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
8283
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
8284
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
8285
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
8286
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
8287
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
8288
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
8289
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8290
|
+
[vars$b.inputBackgroundColor]: refs.backgroundColor,
|
8291
|
+
[vars$b.inputHorizontalPadding]: refs.horizontalPadding,
|
8292
|
+
[vars$b.inputHeight]: refs.inputHeight,
|
8293
|
+
[vars$b.inputDropdownButtonColor]: globalRefs$4.colors.surface.contrast,
|
8294
|
+
[vars$b.inputDropdownButtonCursor]: 'pointer',
|
8295
|
+
[vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8296
|
+
[vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
8251
8297
|
|
8252
8298
|
_readonly: {
|
8253
|
-
[vars$
|
8299
|
+
[vars$b.inputDropdownButtonCursor]: 'default',
|
8254
8300
|
},
|
8255
8301
|
|
8256
8302
|
// Overlay theme exposed via the component:
|
8257
|
-
[vars$
|
8258
|
-
[vars$
|
8259
|
-
[vars$
|
8260
|
-
[vars$
|
8303
|
+
[vars$b.overlayFontSize]: refs.fontSize,
|
8304
|
+
[vars$b.overlayFontFamily]: refs.fontFamily,
|
8305
|
+
[vars$b.overlayCursor]: 'pointer',
|
8306
|
+
[vars$b.overlayItemBoxShadow]: 'none',
|
8261
8307
|
|
8262
8308
|
// Overlay direct theme:
|
8263
|
-
[vars$
|
8264
|
-
[vars$
|
8309
|
+
[vars$b.overlay.minHeight]: '400px',
|
8310
|
+
[vars$b.overlay.margin]: '0',
|
8265
8311
|
};
|
8266
8312
|
|
8267
8313
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
8268
8314
|
__proto__: null,
|
8269
8315
|
comboBox: comboBox,
|
8270
8316
|
default: comboBox,
|
8271
|
-
vars: vars$
|
8317
|
+
vars: vars$b
|
8272
8318
|
});
|
8273
8319
|
|
8274
|
-
const vars$
|
8320
|
+
const vars$a = ImageClass.cssVarList;
|
8275
8321
|
|
8276
8322
|
const image = {};
|
8277
8323
|
|
8278
8324
|
var image$1 = /*#__PURE__*/Object.freeze({
|
8279
8325
|
__proto__: null,
|
8280
8326
|
default: image,
|
8281
|
-
vars: vars$
|
8327
|
+
vars: vars$a
|
8282
8328
|
});
|
8283
8329
|
|
8284
|
-
const vars$
|
8330
|
+
const vars$9 = PhoneFieldClass.cssVarList;
|
8285
8331
|
|
8286
8332
|
const phoneField = {
|
8287
|
-
[vars$
|
8333
|
+
[vars$9.hostWidth]: refs.width,
|
8334
|
+
[vars$9.fontSize]: refs.fontSize,
|
8335
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
8336
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
8337
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
8338
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
8339
|
+
[vars$9.inputValueTextColor]: refs.valueTextColor,
|
8340
|
+
[vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8341
|
+
[vars$9.inputBorderStyle]: refs.borderStyle,
|
8342
|
+
[vars$9.inputBorderWidth]: refs.borderWidth,
|
8343
|
+
[vars$9.inputBorderColor]: refs.borderColor,
|
8344
|
+
[vars$9.inputBorderRadius]: refs.borderRadius,
|
8345
|
+
[vars$9.inputOutlineStyle]: refs.outlineStyle,
|
8346
|
+
[vars$9.inputOutlineWidth]: refs.outlineWidth,
|
8347
|
+
[vars$9.inputOutlineColor]: refs.outlineColor,
|
8348
|
+
[vars$9.inputOutlineOffset]: refs.outlineOffset,
|
8349
|
+
[vars$9.phoneInputWidth]: refs.minWidth,
|
8350
|
+
[vars$9.countryCodeInputWidth]: '5em',
|
8351
|
+
[vars$9.countryCodeDropdownWidth]: '20em',
|
8352
|
+
|
8353
|
+
// '@overlay': {
|
8354
|
+
// overlayItemBackgroundColor: 'red'
|
8355
|
+
// }
|
8356
|
+
};
|
8357
|
+
|
8358
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8359
|
+
__proto__: null,
|
8360
|
+
default: phoneField,
|
8361
|
+
vars: vars$9
|
8362
|
+
});
|
8363
|
+
|
8364
|
+
const vars$8 = PhoneFieldInputBoxClass.cssVarList;
|
8365
|
+
|
8366
|
+
const phoneInputBoxField = {
|
8367
|
+
[vars$8.hostWidth]: '16em',
|
8368
|
+
[vars$8.hostMinWidth]: refs.minWidth,
|
8288
8369
|
[vars$8.fontSize]: refs.fontSize,
|
8289
8370
|
[vars$8.fontFamily]: refs.fontFamily,
|
8290
8371
|
[vars$8.labelTextColor]: refs.labelTextColor,
|
@@ -8300,189 +8381,154 @@ const phoneField = {
|
|
8300
8381
|
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
8301
8382
|
[vars$8.inputOutlineColor]: refs.outlineColor,
|
8302
8383
|
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
8303
|
-
[vars$8.phoneInputWidth]: refs.minWidth,
|
8304
|
-
[vars$8.countryCodeInputWidth]: '5em',
|
8305
|
-
[vars$8.countryCodeDropdownWidth]: '20em',
|
8306
|
-
|
8307
|
-
// '@overlay': {
|
8308
|
-
// overlayItemBackgroundColor: 'red'
|
8309
|
-
// }
|
8310
|
-
};
|
8311
|
-
|
8312
|
-
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
8313
|
-
__proto__: null,
|
8314
|
-
default: phoneField,
|
8315
|
-
vars: vars$8
|
8316
|
-
});
|
8317
|
-
|
8318
|
-
const vars$7 = PhoneFieldInputBoxClass.cssVarList;
|
8319
|
-
|
8320
|
-
const phoneInputBoxField = {
|
8321
|
-
[vars$7.hostWidth]: '16em',
|
8322
|
-
[vars$7.hostMinWidth]: refs.minWidth,
|
8323
|
-
[vars$7.fontSize]: refs.fontSize,
|
8324
|
-
[vars$7.fontFamily]: refs.fontFamily,
|
8325
|
-
[vars$7.labelTextColor]: refs.labelTextColor,
|
8326
|
-
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
8327
|
-
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8328
|
-
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
8329
|
-
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8330
|
-
[vars$7.inputBorderStyle]: refs.borderStyle,
|
8331
|
-
[vars$7.inputBorderWidth]: refs.borderWidth,
|
8332
|
-
[vars$7.inputBorderColor]: refs.borderColor,
|
8333
|
-
[vars$7.inputBorderRadius]: refs.borderRadius,
|
8334
|
-
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
8335
|
-
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
8336
|
-
[vars$7.inputOutlineColor]: refs.outlineColor,
|
8337
|
-
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
8338
8384
|
_fullWidth: {
|
8339
|
-
[vars$
|
8385
|
+
[vars$8.hostWidth]: refs.width,
|
8340
8386
|
},
|
8341
8387
|
};
|
8342
8388
|
|
8343
8389
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8344
8390
|
__proto__: null,
|
8345
8391
|
default: phoneInputBoxField,
|
8346
|
-
vars: vars$
|
8392
|
+
vars: vars$8
|
8347
8393
|
});
|
8348
8394
|
|
8349
|
-
const vars$
|
8395
|
+
const vars$7 = NewPasswordClass.cssVarList;
|
8350
8396
|
|
8351
8397
|
const newPassword = {
|
8352
|
-
[vars$
|
8353
|
-
[vars$
|
8354
|
-
[vars$
|
8355
|
-
[vars$
|
8356
|
-
[vars$
|
8357
|
-
[vars$
|
8398
|
+
[vars$7.hostWidth]: refs.width,
|
8399
|
+
[vars$7.hostMinWidth]: refs.minWidth,
|
8400
|
+
[vars$7.fontSize]: refs.fontSize,
|
8401
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
8402
|
+
[vars$7.spaceBetweenInputs]: '1em',
|
8403
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8358
8404
|
|
8359
8405
|
_required: {
|
8360
8406
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8361
8407
|
// That's why we fake the required indicator on each input.
|
8362
8408
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8363
|
-
[vars$
|
8409
|
+
[vars$7.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8364
8410
|
},
|
8365
8411
|
};
|
8366
8412
|
|
8367
8413
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8368
8414
|
__proto__: null,
|
8369
8415
|
default: newPassword,
|
8370
|
-
vars: vars$
|
8416
|
+
vars: vars$7
|
8371
8417
|
});
|
8372
8418
|
|
8373
|
-
const vars$
|
8419
|
+
const vars$6 = UploadFileClass.cssVarList;
|
8374
8420
|
|
8375
8421
|
const uploadFile = {
|
8376
|
-
[vars$
|
8377
|
-
[vars$
|
8422
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
8423
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
8378
8424
|
|
8379
|
-
[vars$
|
8425
|
+
[vars$6.iconSize]: '2em',
|
8380
8426
|
|
8381
|
-
[vars$
|
8382
|
-
[vars$
|
8427
|
+
[vars$6.hostPadding]: '0.75em',
|
8428
|
+
[vars$6.gap]: '0.5em',
|
8383
8429
|
|
8384
|
-
[vars$
|
8385
|
-
[vars$
|
8386
|
-
[vars$
|
8430
|
+
[vars$6.fontSize]: '16px',
|
8431
|
+
[vars$6.titleFontWeight]: '500',
|
8432
|
+
[vars$6.lineHeight]: '1em',
|
8387
8433
|
|
8388
|
-
[vars$
|
8389
|
-
[vars$
|
8390
|
-
[vars$
|
8391
|
-
[vars$
|
8434
|
+
[vars$6.borderWidth]: refs.borderWidth,
|
8435
|
+
[vars$6.borderColor]: refs.borderColor,
|
8436
|
+
[vars$6.borderRadius]: refs.borderRadius,
|
8437
|
+
[vars$6.borderStyle]: 'dashed',
|
8392
8438
|
|
8393
8439
|
_required: {
|
8394
|
-
[vars$
|
8440
|
+
[vars$6.requiredIndicator]: refs.requiredIndicator,
|
8395
8441
|
},
|
8396
8442
|
|
8397
8443
|
size: {
|
8398
8444
|
xs: {
|
8399
|
-
[vars$
|
8400
|
-
[vars$
|
8401
|
-
[vars$
|
8402
|
-
[vars$
|
8403
|
-
[vars$
|
8445
|
+
[vars$6.hostHeight]: '196px',
|
8446
|
+
[vars$6.hostWidth]: '200px',
|
8447
|
+
[vars$6.titleFontSize]: '0.875em',
|
8448
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
8449
|
+
[vars$6.lineHeight]: '1.25em',
|
8404
8450
|
},
|
8405
8451
|
sm: {
|
8406
|
-
[vars$
|
8407
|
-
[vars$
|
8408
|
-
[vars$
|
8409
|
-
[vars$
|
8410
|
-
[vars$
|
8452
|
+
[vars$6.hostHeight]: '216px',
|
8453
|
+
[vars$6.hostWidth]: '230px',
|
8454
|
+
[vars$6.titleFontSize]: '1em',
|
8455
|
+
[vars$6.descriptionFontSize]: '0.875em',
|
8456
|
+
[vars$6.lineHeight]: '1.25em',
|
8411
8457
|
},
|
8412
8458
|
md: {
|
8413
|
-
[vars$
|
8414
|
-
[vars$
|
8415
|
-
[vars$
|
8416
|
-
[vars$
|
8417
|
-
[vars$
|
8459
|
+
[vars$6.hostHeight]: '256px',
|
8460
|
+
[vars$6.hostWidth]: '312px',
|
8461
|
+
[vars$6.titleFontSize]: '1.125em',
|
8462
|
+
[vars$6.descriptionFontSize]: '1em',
|
8463
|
+
[vars$6.lineHeight]: '1.5em',
|
8418
8464
|
},
|
8419
8465
|
lg: {
|
8420
|
-
[vars$
|
8421
|
-
[vars$
|
8422
|
-
[vars$
|
8423
|
-
[vars$
|
8424
|
-
[vars$
|
8466
|
+
[vars$6.hostHeight]: '280px',
|
8467
|
+
[vars$6.hostWidth]: '336px',
|
8468
|
+
[vars$6.titleFontSize]: '1.125em',
|
8469
|
+
[vars$6.descriptionFontSize]: '1.125em',
|
8470
|
+
[vars$6.lineHeight]: '1.75em',
|
8425
8471
|
},
|
8426
8472
|
},
|
8427
8473
|
|
8428
8474
|
_fullWidth: {
|
8429
|
-
[vars$
|
8475
|
+
[vars$6.hostWidth]: refs.width,
|
8430
8476
|
},
|
8431
8477
|
};
|
8432
8478
|
|
8433
8479
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8434
8480
|
__proto__: null,
|
8435
8481
|
default: uploadFile,
|
8436
|
-
vars: vars$
|
8482
|
+
vars: vars$6
|
8437
8483
|
});
|
8438
8484
|
|
8439
|
-
const globalRefs$
|
8485
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8440
8486
|
|
8441
|
-
const vars$
|
8487
|
+
const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
|
8442
8488
|
|
8443
8489
|
const buttonSelectionGroupItem = {
|
8444
|
-
[vars$
|
8445
|
-
[vars$
|
8446
|
-
[vars$
|
8447
|
-
[vars$
|
8448
|
-
[vars$
|
8490
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
|
8491
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
|
8492
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.main,
|
8493
|
+
[vars$5.borderStyle]: 'solid',
|
8494
|
+
[vars$5.borderRadius]: globalRefs$3.radius.sm,
|
8449
8495
|
|
8450
8496
|
_hover: {
|
8451
|
-
[vars$
|
8497
|
+
[vars$5.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8452
8498
|
},
|
8453
8499
|
|
8454
8500
|
_selected: {
|
8455
|
-
[vars$
|
8456
|
-
[vars$
|
8457
|
-
[vars$
|
8501
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.contrast,
|
8502
|
+
[vars$5.backgroundColor]: globalRefs$3.colors.surface.contrast,
|
8503
|
+
[vars$5.labelTextColor]: globalRefs$3.colors.surface.light,
|
8458
8504
|
},
|
8459
8505
|
};
|
8460
8506
|
|
8461
8507
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8462
8508
|
__proto__: null,
|
8463
8509
|
default: buttonSelectionGroupItem,
|
8464
|
-
vars: vars$
|
8510
|
+
vars: vars$5
|
8465
8511
|
});
|
8466
8512
|
|
8467
|
-
const globalRefs$
|
8468
|
-
const vars$
|
8513
|
+
const globalRefs$2 = getThemeRefs(globals);
|
8514
|
+
const vars$4 = ButtonSelectionGroupClass.cssVarList;
|
8469
8515
|
|
8470
8516
|
const buttonSelectionGroup = {
|
8471
|
-
[vars$
|
8472
|
-
[vars$
|
8473
|
-
[vars$
|
8474
|
-
[vars$
|
8475
|
-
[vars$
|
8476
|
-
[vars$
|
8517
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
8518
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
8519
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
8520
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
8521
|
+
[vars$4.itemsSpacing]: globalRefs$2.spacing.sm,
|
8522
|
+
[vars$4.hostWidth]: refs.width,
|
8477
8523
|
};
|
8478
8524
|
|
8479
8525
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8480
8526
|
__proto__: null,
|
8481
8527
|
default: buttonSelectionGroup,
|
8482
|
-
vars: vars$
|
8528
|
+
vars: vars$4
|
8483
8529
|
});
|
8484
8530
|
|
8485
|
-
const componentName = getComponentName('modal');
|
8531
|
+
const componentName$1 = getComponentName('modal');
|
8486
8532
|
|
8487
8533
|
const customMixin = (superclass) =>
|
8488
8534
|
class ModalMixinClass extends superclass {
|
@@ -8578,7 +8624,7 @@ const ModalClass = compose(
|
|
8578
8624
|
wrappedEleName: 'vaadin-dialog',
|
8579
8625
|
style: () => ``,
|
8580
8626
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8581
|
-
componentName,
|
8627
|
+
componentName: componentName$1,
|
8582
8628
|
})
|
8583
8629
|
);
|
8584
8630
|
|
@@ -8589,44 +8635,44 @@ const modal = {
|
|
8589
8635
|
[compVars.overlayWidth]: '700px',
|
8590
8636
|
};
|
8591
8637
|
|
8592
|
-
const vars$
|
8638
|
+
const vars$3 = {
|
8593
8639
|
...compVars,
|
8594
8640
|
};
|
8595
8641
|
|
8596
8642
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
8597
8643
|
__proto__: null,
|
8598
8644
|
default: modal,
|
8599
|
-
vars: vars$
|
8645
|
+
vars: vars$3
|
8600
8646
|
});
|
8601
8647
|
|
8602
|
-
const globalRefs = getThemeRefs(globals);
|
8603
|
-
const vars$
|
8648
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8649
|
+
const vars$2 = GridClass.cssVarList;
|
8604
8650
|
|
8605
8651
|
const grid = {
|
8606
|
-
[vars$
|
8607
|
-
[vars$
|
8608
|
-
[vars$
|
8652
|
+
[vars$2.hostWidth]: '100%',
|
8653
|
+
[vars$2.hostHeight]: '100%',
|
8654
|
+
[vars$2.hostMinHeight]: '400px',
|
8609
8655
|
|
8610
|
-
[vars$
|
8611
|
-
[vars$
|
8656
|
+
[vars$2.fontSize]: refs.fontSize,
|
8657
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
8612
8658
|
|
8613
|
-
[vars$
|
8614
|
-
[vars$
|
8615
|
-
[vars$
|
8659
|
+
[vars$2.sortIndicatorsColor]: globalRefs$1.colors.primary.main,
|
8660
|
+
[vars$2.activeSortIndicator]: globalRefs$1.colors.primary.main,
|
8661
|
+
[vars$2.resizeHandleColor]: globalRefs$1.colors.surface.main,
|
8616
8662
|
|
8617
|
-
[vars$
|
8618
|
-
[vars$
|
8619
|
-
[vars$
|
8620
|
-
[vars$
|
8663
|
+
[vars$2.inputBorderWidth]: refs.borderWidth,
|
8664
|
+
[vars$2.inputBorderStyle]: refs.borderStyle,
|
8665
|
+
[vars$2.inputBorderRadius]: refs.borderRadius,
|
8666
|
+
[vars$2.inputBorderColor]: 'transparent',
|
8621
8667
|
|
8622
|
-
[vars$
|
8668
|
+
[vars$2.separatorColor]: refs.borderColor,
|
8623
8669
|
|
8624
|
-
[vars$
|
8625
|
-
[vars$
|
8626
|
-
[vars$
|
8670
|
+
[vars$2.valueTextColor]: globalRefs$1.colors.surface.contrast,
|
8671
|
+
[vars$2.selectedBackgroundColor]: globalRefs$1.colors.primary.main,
|
8672
|
+
[vars$2.selectedTextColor]: globalRefs$1.colors.primary.contrast,
|
8627
8673
|
|
8628
8674
|
_bordered: {
|
8629
|
-
[vars$
|
8675
|
+
[vars$2.inputBorderColor]: refs.borderColor,
|
8630
8676
|
},
|
8631
8677
|
};
|
8632
8678
|
|
@@ -8634,6 +8680,129 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
8634
8680
|
__proto__: null,
|
8635
8681
|
default: grid,
|
8636
8682
|
grid: grid,
|
8683
|
+
vars: vars$2
|
8684
|
+
});
|
8685
|
+
|
8686
|
+
const componentName = getComponentName('notification-card');
|
8687
|
+
|
8688
|
+
const notificationCardMixin = (superclass) =>
|
8689
|
+
class NotificationCardMixinClass extends superclass {
|
8690
|
+
close() {
|
8691
|
+
// if animation is not applied to the element, the node will not be removed
|
8692
|
+
// from the DOM. We should avoid that. So, if in any case we allow
|
8693
|
+
// customizing the animation - we should check if animation is applied
|
8694
|
+
// and if it's not applied - remove the elemnt from the DOM and dispatch
|
8695
|
+
// `card-closed` event.
|
8696
|
+
this.baseElement.addEventListener('animationend', () => {
|
8697
|
+
this.remove();
|
8698
|
+
this.dispatchEvent(new Event('card-closed'));
|
8699
|
+
});
|
8700
|
+
|
8701
|
+
this.setAttribute('opened', 'false');
|
8702
|
+
}
|
8703
|
+
};
|
8704
|
+
|
8705
|
+
const NotificationCardClass = compose(
|
8706
|
+
createStyleMixin({
|
8707
|
+
mappings: {
|
8708
|
+
hostMinWidth: { selector: () => '::part(content)', property: 'min-width' },
|
8709
|
+
fontFamily: {},
|
8710
|
+
fontSize: {},
|
8711
|
+
backgroundColor: { selector: () => '::part(content)' },
|
8712
|
+
textColor: { property: 'color' },
|
8713
|
+
boxShadow: {},
|
8714
|
+
borderWidth: { selector: () => '::part(content)', property: 'border-width' },
|
8715
|
+
borderColor: { selector: () => '::part(content)', property: 'border-color' },
|
8716
|
+
borderStyle: { selector: () => '::part(content)', property: 'border-style' },
|
8717
|
+
borderRadius: [
|
8718
|
+
{ selector: () => '::part(content)', property: 'border-radius' },
|
8719
|
+
{ selector: () => '::part(overlay)', property: 'border-radius' },
|
8720
|
+
],
|
8721
|
+
verticalPadding: [
|
8722
|
+
{ selector: () => '::part(content)', property: 'padding-top' },
|
8723
|
+
{ selector: () => '::part(content)', property: 'padding-bottom' },
|
8724
|
+
],
|
8725
|
+
horizontalPadding: [
|
8726
|
+
{ selector: () => '::part(content)', property: 'padding-right' },
|
8727
|
+
{ selector: () => '::part(content)', property: 'padding-left' },
|
8728
|
+
],
|
8729
|
+
},
|
8730
|
+
}),
|
8731
|
+
notificationCardMixin
|
8732
|
+
)(
|
8733
|
+
createProxy({
|
8734
|
+
slots: [''],
|
8735
|
+
wrappedEleName: 'vaadin-notification-card',
|
8736
|
+
style: () => `
|
8737
|
+
vaadin-notification-card {
|
8738
|
+
box-shadow: none;
|
8739
|
+
}
|
8740
|
+
::part(overlay) {
|
8741
|
+
box-shadow: none;
|
8742
|
+
background: none;
|
8743
|
+
}
|
8744
|
+
`,
|
8745
|
+
excludeAttrsSync: ['tabindex'],
|
8746
|
+
componentName,
|
8747
|
+
})
|
8748
|
+
);
|
8749
|
+
|
8750
|
+
customElements.define(componentName, NotificationCardClass);
|
8751
|
+
|
8752
|
+
const globalRefs = getThemeRefs(globals);
|
8753
|
+
const vars$1 = NotificationCardClass.cssVarList;
|
8754
|
+
|
8755
|
+
const shadowColor = '#00000020';
|
8756
|
+
|
8757
|
+
const notification = {
|
8758
|
+
[vars$1.hostMinWidth]: '415px',
|
8759
|
+
[vars$1.fontFamily]: globalRefs.fonts.font1.family,
|
8760
|
+
[vars$1.fontSize]: globalRefs.typography.body1.size,
|
8761
|
+
[vars$1.backgroundColor]: globalRefs.colors.surface.main,
|
8762
|
+
[vars$1.textColor]: globalRefs.colors.surface.contrast,
|
8763
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
|
8764
|
+
[vars$1.verticalPadding]: '0.45em',
|
8765
|
+
[vars$1.horizontalPadding]: '1em',
|
8766
|
+
[vars$1.verticalMargin]: '1em',
|
8767
|
+
[vars$1.horizontalMargin]: '1em',
|
8768
|
+
[vars$1.borderRadius]: globalRefs.radius.md,
|
8769
|
+
[vars$1.contentSpacing]: '0.5em',
|
8770
|
+
|
8771
|
+
_bordered: {
|
8772
|
+
[vars$1.borderWidth]: globalRefs.border.sm,
|
8773
|
+
[vars$1.borderStyle]: 'solid',
|
8774
|
+
[vars$1.borderColor]: 'transparent',
|
8775
|
+
},
|
8776
|
+
|
8777
|
+
size: {
|
8778
|
+
xs: { [vars$1.fontSize]: '12px' },
|
8779
|
+
sm: { [vars$1.fontSize]: '14px' },
|
8780
|
+
md: { [vars$1.fontSize]: '16px' },
|
8781
|
+
lg: { [vars$1.fontSize]: '18px' },
|
8782
|
+
},
|
8783
|
+
|
8784
|
+
mode: {
|
8785
|
+
primary: {
|
8786
|
+
[vars$1.backgroundColor]: globalRefs.colors.primary.main,
|
8787
|
+
[vars$1.textColor]: globalRefs.colors.primary.contrast,
|
8788
|
+
[vars$1.borderColor]: globalRefs.colors.primary.light,
|
8789
|
+
},
|
8790
|
+
success: {
|
8791
|
+
[vars$1.backgroundColor]: globalRefs.colors.success.main,
|
8792
|
+
[vars$1.textColor]: globalRefs.colors.success.contrast,
|
8793
|
+
[vars$1.borderColor]: globalRefs.colors.success.light,
|
8794
|
+
},
|
8795
|
+
error: {
|
8796
|
+
[vars$1.backgroundColor]: globalRefs.colors.error.main,
|
8797
|
+
[vars$1.textColor]: globalRefs.colors.error.contrast,
|
8798
|
+
[vars$1.borderColor]: globalRefs.colors.error.light,
|
8799
|
+
},
|
8800
|
+
},
|
8801
|
+
};
|
8802
|
+
|
8803
|
+
var notificationCard = /*#__PURE__*/Object.freeze({
|
8804
|
+
__proto__: null,
|
8805
|
+
default: notification,
|
8637
8806
|
vars: vars$1
|
8638
8807
|
});
|
8639
8808
|
|
@@ -8666,6 +8835,7 @@ const components = {
|
|
8666
8835
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8667
8836
|
modal: modal$1,
|
8668
8837
|
grid: grid$1,
|
8838
|
+
notificationCard,
|
8669
8839
|
};
|
8670
8840
|
|
8671
8841
|
const theme = Object.keys(components).reduce(
|
@@ -8678,7 +8848,7 @@ const vars = Object.keys(components).reduce(
|
|
8678
8848
|
);
|
8679
8849
|
|
8680
8850
|
const defaultTheme = { globals, components: theme };
|
8681
|
-
const themeVars = { globals: vars$
|
8851
|
+
const themeVars = { globals: vars$u, components: vars };
|
8682
8852
|
|
8683
8853
|
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
8684
8854
|
//# sourceMappingURL=index.esm.js.map
|