@descope/web-components-ui 1.0.289 → 1.0.290
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1144 -881
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1143 -879
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2106.js +1 -1
- package/dist/umd/7911.js +73 -0
- package/dist/umd/7911.js.LICENSE.txt +17 -0
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-badge-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/package.json +4 -2
- package/src/components/descope-avatar/AvatarClass.js +7 -5
- package/src/components/descope-badge/BadgeClass.js +3 -0
- package/src/components/descope-text/TextClass.js +1 -1
- package/src/components/descope-user-attribute/UserAttributeClass.js +228 -0
- package/src/components/descope-user-attribute/delete.svg +3 -0
- package/src/components/descope-user-attribute/edit.svg +3 -0
- package/src/components/descope-user-attribute/index.js +9 -0
- package/src/helpers/themeHelpers/componentsThemeManager.js +4 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/avatar.js +4 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/userAttribute.js +20 -0
package/dist/index.esm.js
CHANGED
@@ -209,6 +209,10 @@ class ComponentsThemeManager {
|
|
209
209
|
this.#themes = themes;
|
210
210
|
this.#notify();
|
211
211
|
}
|
212
|
+
|
213
|
+
get hasThemes() {
|
214
|
+
return !!Object.keys(this.#themes).length;
|
215
|
+
}
|
212
216
|
}
|
213
217
|
|
214
218
|
const componentsThemeManager = new ComponentsThemeManager();
|
@@ -1343,7 +1347,7 @@ const clickableMixin = (superclass) =>
|
|
1343
1347
|
}
|
1344
1348
|
};
|
1345
1349
|
|
1346
|
-
const componentName$
|
1350
|
+
const componentName$N = getComponentName('button');
|
1347
1351
|
|
1348
1352
|
const resetStyles = `
|
1349
1353
|
:host {
|
@@ -1381,7 +1385,7 @@ const iconStyles = `
|
|
1381
1385
|
|
1382
1386
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1383
1387
|
|
1384
|
-
const { host: host$
|
1388
|
+
const { host: host$k, label: label$a } = {
|
1385
1389
|
host: { selector: () => ':host' },
|
1386
1390
|
label: { selector: '::part(label)' },
|
1387
1391
|
};
|
@@ -1393,7 +1397,7 @@ const ButtonClass = compose(
|
|
1393
1397
|
mappings: {
|
1394
1398
|
hostWidth: { property: 'width' },
|
1395
1399
|
hostHeight: { property: 'height' },
|
1396
|
-
hostDirection: { ...host$
|
1400
|
+
hostDirection: { ...host$k, property: 'direction' },
|
1397
1401
|
fontSize: {},
|
1398
1402
|
fontFamily: {},
|
1399
1403
|
|
@@ -1445,7 +1449,7 @@ const ButtonClass = compose(
|
|
1445
1449
|
}
|
1446
1450
|
`,
|
1447
1451
|
excludeAttrsSync: ['tabindex'],
|
1448
|
-
componentName: componentName$
|
1452
|
+
componentName: componentName$N,
|
1449
1453
|
})
|
1450
1454
|
);
|
1451
1455
|
|
@@ -1482,7 +1486,7 @@ loadingIndicatorStyles = `
|
|
1482
1486
|
}
|
1483
1487
|
`;
|
1484
1488
|
|
1485
|
-
customElements.define(componentName$
|
1489
|
+
customElements.define(componentName$N, ButtonClass);
|
1486
1490
|
|
1487
1491
|
const createBaseInputClass = (...args) =>
|
1488
1492
|
compose(
|
@@ -1492,11 +1496,11 @@ const createBaseInputClass = (...args) =>
|
|
1492
1496
|
inputEventsDispatchingMixin
|
1493
1497
|
)(createBaseClass(...args));
|
1494
1498
|
|
1495
|
-
const componentName$
|
1499
|
+
const componentName$M = getComponentName('boolean-field-internal');
|
1496
1500
|
|
1497
1501
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1498
1502
|
|
1499
|
-
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$
|
1503
|
+
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$M, baseSelector: 'div' });
|
1500
1504
|
|
1501
1505
|
class BooleanInputInternal extends BaseInputClass$7 {
|
1502
1506
|
static get observedAttributes() {
|
@@ -1572,14 +1576,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1572
1576
|
|
1573
1577
|
const template = document.createElement('template');
|
1574
1578
|
template.innerHTML = `
|
1575
|
-
<${componentName$
|
1579
|
+
<${componentName$M}
|
1576
1580
|
tabindex="-1"
|
1577
1581
|
slot="input"
|
1578
|
-
></${componentName$
|
1582
|
+
></${componentName$M}>
|
1579
1583
|
`;
|
1580
1584
|
|
1581
1585
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1582
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1586
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$M);
|
1583
1587
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1584
1588
|
|
1585
1589
|
forwardAttrs(this, this.inputElement, {
|
@@ -1778,10 +1782,10 @@ descope-boolean-field-internal {
|
|
1778
1782
|
}
|
1779
1783
|
`;
|
1780
1784
|
|
1781
|
-
const componentName$
|
1785
|
+
const componentName$L = getComponentName('checkbox');
|
1782
1786
|
|
1783
1787
|
const {
|
1784
|
-
host: host$
|
1788
|
+
host: host$j,
|
1785
1789
|
component: component$1,
|
1786
1790
|
checkboxElement,
|
1787
1791
|
checkboxSurface,
|
@@ -1803,10 +1807,10 @@ const {
|
|
1803
1807
|
const CheckboxClass = compose(
|
1804
1808
|
createStyleMixin({
|
1805
1809
|
mappings: {
|
1806
|
-
hostWidth: { ...host$
|
1807
|
-
hostDirection: { ...host$
|
1810
|
+
hostWidth: { ...host$j, property: 'width' },
|
1811
|
+
hostDirection: { ...host$j, property: 'direction' },
|
1808
1812
|
|
1809
|
-
fontSize: [host$
|
1813
|
+
fontSize: [host$j, checkboxElement, checkboxLabel$1],
|
1810
1814
|
fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
|
1811
1815
|
|
1812
1816
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -1884,18 +1888,18 @@ const CheckboxClass = compose(
|
|
1884
1888
|
}
|
1885
1889
|
`,
|
1886
1890
|
excludeAttrsSync: ['label', 'tabindex'],
|
1887
|
-
componentName: componentName$
|
1891
|
+
componentName: componentName$L,
|
1888
1892
|
})
|
1889
1893
|
);
|
1890
1894
|
|
1891
|
-
customElements.define(componentName$
|
1895
|
+
customElements.define(componentName$M, BooleanInputInternal);
|
1892
1896
|
|
1893
|
-
customElements.define(componentName$
|
1897
|
+
customElements.define(componentName$L, CheckboxClass);
|
1894
1898
|
|
1895
|
-
const componentName$
|
1899
|
+
const componentName$K = getComponentName('switch-toggle');
|
1896
1900
|
|
1897
1901
|
const {
|
1898
|
-
host: host$
|
1902
|
+
host: host$i,
|
1899
1903
|
component,
|
1900
1904
|
checkboxElement: track,
|
1901
1905
|
checkboxSurface: knob,
|
@@ -1917,8 +1921,8 @@ const {
|
|
1917
1921
|
const SwitchToggleClass = compose(
|
1918
1922
|
createStyleMixin({
|
1919
1923
|
mappings: {
|
1920
|
-
hostWidth: { ...host$
|
1921
|
-
hostDirection: { ...host$
|
1924
|
+
hostWidth: { ...host$i, property: 'width' },
|
1925
|
+
hostDirection: { ...host$i, property: 'direction' },
|
1922
1926
|
|
1923
1927
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1924
1928
|
fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
|
@@ -2024,17 +2028,17 @@ const SwitchToggleClass = compose(
|
|
2024
2028
|
}
|
2025
2029
|
`,
|
2026
2030
|
excludeAttrsSync: ['label', 'tabindex'],
|
2027
|
-
componentName: componentName$
|
2031
|
+
componentName: componentName$K,
|
2028
2032
|
})
|
2029
2033
|
);
|
2030
2034
|
|
2031
|
-
customElements.define(componentName$
|
2035
|
+
customElements.define(componentName$K, SwitchToggleClass);
|
2032
2036
|
|
2033
|
-
const componentName$
|
2037
|
+
const componentName$J = getComponentName('loader-linear');
|
2034
2038
|
|
2035
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2039
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
|
2036
2040
|
static get componentName() {
|
2037
|
-
return componentName$
|
2041
|
+
return componentName$J;
|
2038
2042
|
}
|
2039
2043
|
|
2040
2044
|
constructor() {
|
@@ -2070,18 +2074,18 @@ const selectors$2 = {
|
|
2070
2074
|
host: { selector: () => ':host' },
|
2071
2075
|
};
|
2072
2076
|
|
2073
|
-
const { after: after$1, host: host$
|
2077
|
+
const { after: after$1, host: host$h } = selectors$2;
|
2074
2078
|
|
2075
2079
|
const LoaderLinearClass = compose(
|
2076
2080
|
createStyleMixin({
|
2077
2081
|
mappings: {
|
2078
2082
|
hostDisplay: {},
|
2079
|
-
hostWidth: { ...host$
|
2083
|
+
hostWidth: { ...host$h, property: 'width' },
|
2080
2084
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
2081
2085
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
2082
2086
|
verticalPadding: [
|
2083
|
-
{ ...host$
|
2084
|
-
{ ...host$
|
2087
|
+
{ ...host$h, property: 'padding-top' },
|
2088
|
+
{ ...host$h, property: 'padding-bottom' },
|
2085
2089
|
],
|
2086
2090
|
barBackgroundColor: { property: 'background-color' },
|
2087
2091
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -2095,11 +2099,11 @@ const LoaderLinearClass = compose(
|
|
2095
2099
|
componentNameValidationMixin
|
2096
2100
|
)(RawLoaderLinear);
|
2097
2101
|
|
2098
|
-
customElements.define(componentName$
|
2102
|
+
customElements.define(componentName$J, LoaderLinearClass);
|
2099
2103
|
|
2100
|
-
const componentName$
|
2104
|
+
const componentName$I = getComponentName('loader-radial');
|
2101
2105
|
|
2102
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2106
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
|
2103
2107
|
constructor() {
|
2104
2108
|
super();
|
2105
2109
|
|
@@ -2143,11 +2147,11 @@ const LoaderRadialClass = compose(
|
|
2143
2147
|
componentNameValidationMixin
|
2144
2148
|
)(RawLoaderRadial);
|
2145
2149
|
|
2146
|
-
customElements.define(componentName$
|
2150
|
+
customElements.define(componentName$I, LoaderRadialClass);
|
2147
2151
|
|
2148
|
-
const componentName$
|
2152
|
+
const componentName$H = getComponentName('container');
|
2149
2153
|
|
2150
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2154
|
+
class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
|
2151
2155
|
constructor() {
|
2152
2156
|
super();
|
2153
2157
|
|
@@ -2200,13 +2204,13 @@ const ContainerClass = compose(
|
|
2200
2204
|
componentNameValidationMixin
|
2201
2205
|
)(RawContainer);
|
2202
2206
|
|
2203
|
-
customElements.define(componentName$
|
2207
|
+
customElements.define(componentName$H, ContainerClass);
|
2204
2208
|
|
2205
2209
|
// eslint-disable-next-line max-classes-per-file
|
2206
2210
|
|
2207
|
-
const componentName$
|
2211
|
+
const componentName$G = getComponentName('text');
|
2208
2212
|
|
2209
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2213
|
+
class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
|
2210
2214
|
constructor() {
|
2211
2215
|
super();
|
2212
2216
|
|
@@ -2220,7 +2224,7 @@ class RawText extends createBaseClass({ componentName: componentName$F, baseSele
|
|
2220
2224
|
display: inline-block;
|
2221
2225
|
}
|
2222
2226
|
</style>
|
2223
|
-
<slot></slot>
|
2227
|
+
<slot part="text-wrapper"></slot>
|
2224
2228
|
`;
|
2225
2229
|
}
|
2226
2230
|
}
|
@@ -2266,8 +2270,8 @@ const TextClass = compose(
|
|
2266
2270
|
customTextMixin
|
2267
2271
|
)(RawText);
|
2268
2272
|
|
2269
|
-
const componentName$
|
2270
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2273
|
+
const componentName$F = getComponentName('divider');
|
2274
|
+
class RawDivider extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
|
2271
2275
|
constructor() {
|
2272
2276
|
super();
|
2273
2277
|
|
@@ -2313,7 +2317,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$E, baseS
|
|
2313
2317
|
}
|
2314
2318
|
|
2315
2319
|
const textVars$3 = TextClass.cssVarList;
|
2316
|
-
const { host: host$
|
2320
|
+
const { host: host$g, before, after, text: text$3 } = {
|
2317
2321
|
host: { selector: () => ':host' },
|
2318
2322
|
before: { selector: '::before' },
|
2319
2323
|
after: { selector: '::after' },
|
@@ -2323,8 +2327,8 @@ const { host: host$f, before, after, text: text$3 } = {
|
|
2323
2327
|
const DividerClass = compose(
|
2324
2328
|
createStyleMixin({
|
2325
2329
|
mappings: {
|
2326
|
-
hostWidth: { ...host$
|
2327
|
-
hostPadding: { ...host$
|
2330
|
+
hostWidth: { ...host$g, property: 'width' },
|
2331
|
+
hostPadding: { ...host$g, property: 'padding' },
|
2328
2332
|
hostDirection: { ...text$3, property: 'direction' },
|
2329
2333
|
|
2330
2334
|
minHeight: {},
|
@@ -2366,12 +2370,12 @@ const DividerClass = compose(
|
|
2366
2370
|
componentNameValidationMixin
|
2367
2371
|
)(RawDivider);
|
2368
2372
|
|
2369
|
-
customElements.define(componentName$
|
2373
|
+
customElements.define(componentName$G, TextClass);
|
2370
2374
|
|
2371
|
-
customElements.define(componentName$
|
2375
|
+
customElements.define(componentName$F, DividerClass);
|
2372
2376
|
|
2373
2377
|
const {
|
2374
|
-
host: host$
|
2378
|
+
host: host$f,
|
2375
2379
|
label: label$9,
|
2376
2380
|
placeholder: placeholder$3,
|
2377
2381
|
requiredIndicator: requiredIndicator$9,
|
@@ -2396,12 +2400,12 @@ const {
|
|
2396
2400
|
|
2397
2401
|
var textFieldMappings = {
|
2398
2402
|
// we apply font-size also on the host so we can set its width with em
|
2399
|
-
fontSize: [{}, host$
|
2403
|
+
fontSize: [{}, host$f],
|
2400
2404
|
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2401
2405
|
|
2402
|
-
hostWidth: { ...host$
|
2403
|
-
hostMinWidth: { ...host$
|
2404
|
-
hostDirection: { ...host$
|
2406
|
+
hostWidth: { ...host$f, property: 'width' },
|
2407
|
+
hostMinWidth: { ...host$f, property: 'min-width' },
|
2408
|
+
hostDirection: { ...host$f, property: 'direction' },
|
2405
2409
|
|
2406
2410
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2407
2411
|
|
@@ -2446,7 +2450,7 @@ var textFieldMappings = {
|
|
2446
2450
|
],
|
2447
2451
|
};
|
2448
2452
|
|
2449
|
-
const componentName$
|
2453
|
+
const componentName$E = getComponentName('email-field');
|
2450
2454
|
|
2451
2455
|
const customMixin$7 = (superclass) =>
|
2452
2456
|
class EmailFieldMixinClass extends superclass {
|
@@ -2481,15 +2485,15 @@ const EmailFieldClass = compose(
|
|
2481
2485
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2482
2486
|
`,
|
2483
2487
|
excludeAttrsSync: ['tabindex'],
|
2484
|
-
componentName: componentName$
|
2488
|
+
componentName: componentName$E,
|
2485
2489
|
})
|
2486
2490
|
);
|
2487
2491
|
|
2488
|
-
customElements.define(componentName$
|
2492
|
+
customElements.define(componentName$E, EmailFieldClass);
|
2489
2493
|
|
2490
|
-
const componentName$
|
2494
|
+
const componentName$D = getComponentName('link');
|
2491
2495
|
|
2492
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2496
|
+
class RawLink extends createBaseClass({ componentName: componentName$D, baseSelector: ':host a' }) {
|
2493
2497
|
constructor() {
|
2494
2498
|
super();
|
2495
2499
|
|
@@ -2535,12 +2539,12 @@ const selectors$1 = {
|
|
2535
2539
|
text: { selector: () => TextClass.componentName },
|
2536
2540
|
};
|
2537
2541
|
|
2538
|
-
const { anchor, text: text$2, host: host$
|
2542
|
+
const { anchor, text: text$2, host: host$e, wrapper: wrapper$1 } = selectors$1;
|
2539
2543
|
|
2540
2544
|
const LinkClass = compose(
|
2541
2545
|
createStyleMixin({
|
2542
2546
|
mappings: {
|
2543
|
-
hostWidth: { ...host$
|
2547
|
+
hostWidth: { ...host$e, property: 'width' },
|
2544
2548
|
hostDirection: { ...text$2, property: 'direction' },
|
2545
2549
|
textAlign: wrapper$1,
|
2546
2550
|
textColor: [
|
@@ -2554,7 +2558,7 @@ const LinkClass = compose(
|
|
2554
2558
|
componentNameValidationMixin
|
2555
2559
|
)(RawLink);
|
2556
2560
|
|
2557
|
-
customElements.define(componentName$
|
2561
|
+
customElements.define(componentName$D, LinkClass);
|
2558
2562
|
|
2559
2563
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2560
2564
|
let style;
|
@@ -2606,37 +2610,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2606
2610
|
return CssVarImageClass;
|
2607
2611
|
};
|
2608
2612
|
|
2609
|
-
const componentName$
|
2613
|
+
const componentName$C = getComponentName('logo');
|
2610
2614
|
|
2611
2615
|
const LogoClass = createCssVarImageClass({
|
2612
|
-
componentName: componentName$
|
2616
|
+
componentName: componentName$C,
|
2613
2617
|
varName: 'url',
|
2614
2618
|
fallbackVarName: 'fallbackUrl',
|
2615
2619
|
});
|
2616
2620
|
|
2617
|
-
customElements.define(componentName$
|
2621
|
+
customElements.define(componentName$C, LogoClass);
|
2618
2622
|
|
2619
|
-
const componentName$
|
2623
|
+
const componentName$B = getComponentName('totp-image');
|
2620
2624
|
|
2621
2625
|
const TotpImageClass = createCssVarImageClass({
|
2622
|
-
componentName: componentName$
|
2626
|
+
componentName: componentName$B,
|
2623
2627
|
varName: 'url',
|
2624
2628
|
fallbackVarName: 'fallbackUrl',
|
2625
2629
|
});
|
2626
2630
|
|
2627
|
-
customElements.define(componentName$
|
2631
|
+
customElements.define(componentName$B, TotpImageClass);
|
2628
2632
|
|
2629
|
-
const componentName$
|
2633
|
+
const componentName$A = getComponentName('notp-image');
|
2630
2634
|
|
2631
2635
|
const NotpImageClass = createCssVarImageClass({
|
2632
|
-
componentName: componentName$
|
2636
|
+
componentName: componentName$A,
|
2633
2637
|
varName: 'url',
|
2634
2638
|
fallbackVarName: 'fallbackUrl',
|
2635
2639
|
});
|
2636
2640
|
|
2637
|
-
customElements.define(componentName$
|
2641
|
+
customElements.define(componentName$A, NotpImageClass);
|
2638
2642
|
|
2639
|
-
const componentName$
|
2643
|
+
const componentName$z = getComponentName('number-field');
|
2640
2644
|
|
2641
2645
|
const NumberFieldClass = compose(
|
2642
2646
|
createStyleMixin({
|
@@ -2662,11 +2666,11 @@ const NumberFieldClass = compose(
|
|
2662
2666
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2663
2667
|
`,
|
2664
2668
|
excludeAttrsSync: ['tabindex'],
|
2665
|
-
componentName: componentName$
|
2669
|
+
componentName: componentName$z,
|
2666
2670
|
})
|
2667
2671
|
);
|
2668
2672
|
|
2669
|
-
customElements.define(componentName$
|
2673
|
+
customElements.define(componentName$z, NumberFieldClass);
|
2670
2674
|
|
2671
2675
|
const focusElement = (ele) => {
|
2672
2676
|
ele?.focus();
|
@@ -2684,13 +2688,13 @@ const getSanitizedCharacters = (str) => {
|
|
2684
2688
|
|
2685
2689
|
/* eslint-disable no-param-reassign */
|
2686
2690
|
|
2687
|
-
const componentName$
|
2691
|
+
const componentName$y = getComponentName('passcode-internal');
|
2688
2692
|
|
2689
2693
|
const observedAttributes$5 = ['digits', 'loading'];
|
2690
2694
|
|
2691
2695
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2692
2696
|
|
2693
|
-
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$
|
2697
|
+
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
|
2694
2698
|
|
2695
2699
|
class PasscodeInternal extends BaseInputClass$6 {
|
2696
2700
|
static get observedAttributes() {
|
@@ -2916,7 +2920,7 @@ class PasscodeInternal extends BaseInputClass$6 {
|
|
2916
2920
|
}
|
2917
2921
|
}
|
2918
2922
|
|
2919
|
-
const componentName$
|
2923
|
+
const componentName$x = getComponentName('text-field');
|
2920
2924
|
|
2921
2925
|
const observedAttrs = ['type'];
|
2922
2926
|
|
@@ -2966,11 +2970,11 @@ const TextFieldClass = compose(
|
|
2966
2970
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2967
2971
|
`,
|
2968
2972
|
excludeAttrsSync: ['tabindex'],
|
2969
|
-
componentName: componentName$
|
2973
|
+
componentName: componentName$x,
|
2970
2974
|
})
|
2971
2975
|
);
|
2972
2976
|
|
2973
|
-
const componentName$
|
2977
|
+
const componentName$w = getComponentName('passcode');
|
2974
2978
|
|
2975
2979
|
const observedAttributes$4 = ['digits'];
|
2976
2980
|
|
@@ -2989,17 +2993,17 @@ const customMixin$5 = (superclass) =>
|
|
2989
2993
|
const template = document.createElement('template');
|
2990
2994
|
|
2991
2995
|
template.innerHTML = `
|
2992
|
-
<${componentName$
|
2996
|
+
<${componentName$y}
|
2993
2997
|
bordered="true"
|
2994
2998
|
name="code"
|
2995
2999
|
tabindex="-1"
|
2996
3000
|
slot="input"
|
2997
|
-
><slot></slot></${componentName$
|
3001
|
+
><slot></slot></${componentName$y}>
|
2998
3002
|
`;
|
2999
3003
|
|
3000
3004
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3001
3005
|
|
3002
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3006
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$y);
|
3003
3007
|
|
3004
3008
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
3005
3009
|
}
|
@@ -3014,7 +3018,7 @@ const customMixin$5 = (superclass) =>
|
|
3014
3018
|
};
|
3015
3019
|
|
3016
3020
|
const {
|
3017
|
-
host: host$
|
3021
|
+
host: host$d,
|
3018
3022
|
digitField,
|
3019
3023
|
label: label$8,
|
3020
3024
|
requiredIndicator: requiredIndicator$8,
|
@@ -3037,10 +3041,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
3037
3041
|
const PasscodeClass = compose(
|
3038
3042
|
createStyleMixin({
|
3039
3043
|
mappings: {
|
3040
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
3044
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$d],
|
3041
3045
|
hostWidth: { property: 'width' },
|
3042
|
-
hostDirection: { ...host$
|
3043
|
-
fontFamily: [host$
|
3046
|
+
hostDirection: { ...host$d, property: 'direction' },
|
3047
|
+
fontFamily: [host$d, { ...label$8 }],
|
3044
3048
|
labelTextColor: [
|
3045
3049
|
{ ...label$8, property: 'color' },
|
3046
3050
|
{ ...requiredIndicator$8, property: 'color' },
|
@@ -3146,15 +3150,15 @@ const PasscodeClass = compose(
|
|
3146
3150
|
${resetInputCursor('vaadin-text-field')}
|
3147
3151
|
`,
|
3148
3152
|
excludeAttrsSync: ['tabindex'],
|
3149
|
-
componentName: componentName$
|
3153
|
+
componentName: componentName$w,
|
3150
3154
|
})
|
3151
3155
|
);
|
3152
3156
|
|
3153
|
-
customElements.define(componentName$
|
3157
|
+
customElements.define(componentName$x, TextFieldClass);
|
3154
3158
|
|
3155
|
-
customElements.define(componentName$
|
3159
|
+
customElements.define(componentName$y, PasscodeInternal);
|
3156
3160
|
|
3157
|
-
customElements.define(componentName$
|
3161
|
+
customElements.define(componentName$w, PasscodeClass);
|
3158
3162
|
|
3159
3163
|
const passwordDraggableMixin = (superclass) =>
|
3160
3164
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3190,10 +3194,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3190
3194
|
}
|
3191
3195
|
};
|
3192
3196
|
|
3193
|
-
const componentName$
|
3197
|
+
const componentName$v = getComponentName('password');
|
3194
3198
|
|
3195
3199
|
const {
|
3196
|
-
host: host$
|
3200
|
+
host: host$c,
|
3197
3201
|
inputField: inputField$5,
|
3198
3202
|
inputElement: inputElement$2,
|
3199
3203
|
inputElementPlaceholder,
|
@@ -3219,10 +3223,10 @@ const {
|
|
3219
3223
|
const PasswordClass = compose(
|
3220
3224
|
createStyleMixin({
|
3221
3225
|
mappings: {
|
3222
|
-
hostWidth: { ...host$
|
3223
|
-
hostMinWidth: { ...host$
|
3224
|
-
hostDirection: { ...host$
|
3225
|
-
fontSize: [{}, host$
|
3226
|
+
hostWidth: { ...host$c, property: 'width' },
|
3227
|
+
hostMinWidth: { ...host$c, property: 'min-width' },
|
3228
|
+
hostDirection: { ...host$c, property: 'direction' },
|
3229
|
+
fontSize: [{}, host$c],
|
3226
3230
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3227
3231
|
inputHeight: { ...inputField$5, property: 'height' },
|
3228
3232
|
inputHorizontalPadding: [
|
@@ -3319,16 +3323,16 @@ const PasswordClass = compose(
|
|
3319
3323
|
}
|
3320
3324
|
`,
|
3321
3325
|
excludeAttrsSync: ['tabindex'],
|
3322
|
-
componentName: componentName$
|
3326
|
+
componentName: componentName$v,
|
3323
3327
|
})
|
3324
3328
|
);
|
3325
3329
|
|
3326
|
-
customElements.define(componentName$
|
3330
|
+
customElements.define(componentName$v, PasswordClass);
|
3327
3331
|
|
3328
|
-
const componentName$
|
3332
|
+
const componentName$u = getComponentName('text-area');
|
3329
3333
|
|
3330
3334
|
const {
|
3331
|
-
host: host$
|
3335
|
+
host: host$b,
|
3332
3336
|
label: label$6,
|
3333
3337
|
placeholder: placeholder$2,
|
3334
3338
|
inputField: inputField$4,
|
@@ -3350,10 +3354,10 @@ const {
|
|
3350
3354
|
const TextAreaClass = compose(
|
3351
3355
|
createStyleMixin({
|
3352
3356
|
mappings: {
|
3353
|
-
hostWidth: { ...host$
|
3354
|
-
hostMinWidth: { ...host$
|
3355
|
-
hostDirection: { ...host$
|
3356
|
-
fontSize: [host$
|
3357
|
+
hostWidth: { ...host$b, property: 'width' },
|
3358
|
+
hostMinWidth: { ...host$b, property: 'min-width' },
|
3359
|
+
hostDirection: { ...host$b, property: 'direction' },
|
3360
|
+
fontSize: [host$b, textArea$2],
|
3357
3361
|
fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
|
3358
3362
|
labelTextColor: [
|
3359
3363
|
{ ...label$6, property: 'color' },
|
@@ -3401,17 +3405,17 @@ const TextAreaClass = compose(
|
|
3401
3405
|
${resetInputCursor('vaadin-text-area')}
|
3402
3406
|
`,
|
3403
3407
|
excludeAttrsSync: ['tabindex'],
|
3404
|
-
componentName: componentName$
|
3408
|
+
componentName: componentName$u,
|
3405
3409
|
})
|
3406
3410
|
);
|
3407
3411
|
|
3408
|
-
customElements.define(componentName$
|
3412
|
+
customElements.define(componentName$u, TextAreaClass);
|
3409
3413
|
|
3410
3414
|
const observedAttributes$3 = ['src', 'alt'];
|
3411
3415
|
|
3412
|
-
const componentName$
|
3416
|
+
const componentName$t = getComponentName('image');
|
3413
3417
|
|
3414
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3418
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$t, baseSelector: ':host > img' });
|
3415
3419
|
class RawImage extends BaseClass$1 {
|
3416
3420
|
static get observedAttributes() {
|
3417
3421
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3451,9 +3455,9 @@ const ImageClass = compose(
|
|
3451
3455
|
draggableMixin
|
3452
3456
|
)(RawImage);
|
3453
3457
|
|
3454
|
-
customElements.define(componentName$
|
3458
|
+
customElements.define(componentName$t, ImageClass);
|
3455
3459
|
|
3456
|
-
const componentName$
|
3460
|
+
const componentName$s = getComponentName('combo-box');
|
3457
3461
|
|
3458
3462
|
const ComboBoxMixin = (superclass) =>
|
3459
3463
|
class ComboBoxMixinClass extends superclass {
|
@@ -3679,7 +3683,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3679
3683
|
};
|
3680
3684
|
|
3681
3685
|
const {
|
3682
|
-
host: host$
|
3686
|
+
host: host$a,
|
3683
3687
|
inputField: inputField$3,
|
3684
3688
|
inputElement: inputElement$1,
|
3685
3689
|
placeholder: placeholder$1,
|
@@ -3705,10 +3709,10 @@ const {
|
|
3705
3709
|
const ComboBoxClass = compose(
|
3706
3710
|
createStyleMixin({
|
3707
3711
|
mappings: {
|
3708
|
-
hostWidth: { ...host$
|
3709
|
-
hostDirection: { ...host$
|
3712
|
+
hostWidth: { ...host$a, property: 'width' },
|
3713
|
+
hostDirection: { ...host$a, property: 'direction' },
|
3710
3714
|
// we apply font-size also on the host so we can set its width with em
|
3711
|
-
fontSize: [{}, host$
|
3715
|
+
fontSize: [{}, host$a],
|
3712
3716
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
3713
3717
|
labelTextColor: [
|
3714
3718
|
{ ...label$5, property: 'color' },
|
@@ -3836,12 +3840,12 @@ const ComboBoxClass = compose(
|
|
3836
3840
|
// and reset items to an empty array, and opening the list box with no items
|
3837
3841
|
// to display.
|
3838
3842
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3839
|
-
componentName: componentName$
|
3843
|
+
componentName: componentName$s,
|
3840
3844
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3841
3845
|
})
|
3842
3846
|
);
|
3843
3847
|
|
3844
|
-
customElements.define(componentName$
|
3848
|
+
customElements.define(componentName$s, ComboBoxClass);
|
3845
3849
|
|
3846
3850
|
var CountryCodes = [
|
3847
3851
|
// United States should be the first option
|
@@ -5084,7 +5088,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5084
5088
|
</div>
|
5085
5089
|
`;
|
5086
5090
|
|
5087
|
-
const componentName$
|
5091
|
+
const componentName$r = getComponentName('phone-field-internal');
|
5088
5092
|
|
5089
5093
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5090
5094
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -5096,7 +5100,7 @@ const mapAttrs$1 = {
|
|
5096
5100
|
|
5097
5101
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5098
5102
|
|
5099
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
5103
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
|
5100
5104
|
|
5101
5105
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
|
5102
5106
|
static get observedAttributes() {
|
@@ -5268,12 +5272,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
|
|
5268
5272
|
}
|
5269
5273
|
};
|
5270
5274
|
|
5271
|
-
customElements.define(componentName$
|
5275
|
+
customElements.define(componentName$r, PhoneFieldInternal$1);
|
5272
5276
|
|
5273
5277
|
const textVars$1 = TextFieldClass.cssVarList;
|
5274
5278
|
const comboVars = ComboBoxClass.cssVarList;
|
5275
5279
|
|
5276
|
-
const componentName$
|
5280
|
+
const componentName$q = getComponentName('phone-field');
|
5277
5281
|
|
5278
5282
|
const customMixin$4 = (superclass) =>
|
5279
5283
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5287,15 +5291,15 @@ const customMixin$4 = (superclass) =>
|
|
5287
5291
|
const template = document.createElement('template');
|
5288
5292
|
|
5289
5293
|
template.innerHTML = `
|
5290
|
-
<${componentName$
|
5294
|
+
<${componentName$r}
|
5291
5295
|
tabindex="-1"
|
5292
5296
|
slot="input"
|
5293
|
-
></${componentName$
|
5297
|
+
></${componentName$r}>
|
5294
5298
|
`;
|
5295
5299
|
|
5296
5300
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5297
5301
|
|
5298
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5302
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$r);
|
5299
5303
|
|
5300
5304
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5301
5305
|
includeAttrs: [
|
@@ -5315,7 +5319,7 @@ const customMixin$4 = (superclass) =>
|
|
5315
5319
|
};
|
5316
5320
|
|
5317
5321
|
const {
|
5318
|
-
host: host$
|
5322
|
+
host: host$9,
|
5319
5323
|
label: label$4,
|
5320
5324
|
requiredIndicator: requiredIndicator$4,
|
5321
5325
|
inputField: inputField$2,
|
@@ -5340,7 +5344,7 @@ const PhoneFieldClass = compose(
|
|
5340
5344
|
createStyleMixin({
|
5341
5345
|
mappings: {
|
5342
5346
|
fontSize: [
|
5343
|
-
host$
|
5347
|
+
host$9,
|
5344
5348
|
inputField$2,
|
5345
5349
|
{
|
5346
5350
|
selector: TextFieldClass.componentName,
|
@@ -5361,11 +5365,11 @@ const PhoneFieldClass = compose(
|
|
5361
5365
|
},
|
5362
5366
|
],
|
5363
5367
|
hostWidth: [
|
5364
|
-
{ ...host$
|
5368
|
+
{ ...host$9, property: 'width' },
|
5365
5369
|
{ ...phoneInput$1, property: 'width' },
|
5366
5370
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5367
5371
|
],
|
5368
|
-
hostDirection: { ...host$
|
5372
|
+
hostDirection: { ...host$9, property: 'direction' },
|
5369
5373
|
|
5370
5374
|
inputBorderStyle: [
|
5371
5375
|
{ ...inputField$2, property: 'border-style' },
|
@@ -5491,17 +5495,17 @@ const PhoneFieldClass = compose(
|
|
5491
5495
|
${resetInputLabelPosition('vaadin-text-field')}
|
5492
5496
|
`,
|
5493
5497
|
excludeAttrsSync: ['tabindex'],
|
5494
|
-
componentName: componentName$
|
5498
|
+
componentName: componentName$q,
|
5495
5499
|
})
|
5496
5500
|
);
|
5497
5501
|
|
5498
|
-
customElements.define(componentName$
|
5502
|
+
customElements.define(componentName$q, PhoneFieldClass);
|
5499
5503
|
|
5500
5504
|
const getCountryByCodeId = (countryCode) => {
|
5501
5505
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5502
5506
|
};
|
5503
5507
|
|
5504
|
-
const componentName$
|
5508
|
+
const componentName$p = getComponentName('phone-field-internal-input-box');
|
5505
5509
|
|
5506
5510
|
const observedAttributes$2 = [
|
5507
5511
|
'disabled',
|
@@ -5515,7 +5519,7 @@ const mapAttrs = {
|
|
5515
5519
|
'phone-input-placeholder': 'placeholder',
|
5516
5520
|
};
|
5517
5521
|
|
5518
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
5522
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
5519
5523
|
|
5520
5524
|
class PhoneFieldInternal extends BaseInputClass$4 {
|
5521
5525
|
static get observedAttributes() {
|
@@ -5654,11 +5658,11 @@ class PhoneFieldInternal extends BaseInputClass$4 {
|
|
5654
5658
|
}
|
5655
5659
|
}
|
5656
5660
|
|
5657
|
-
customElements.define(componentName$
|
5661
|
+
customElements.define(componentName$p, PhoneFieldInternal);
|
5658
5662
|
|
5659
5663
|
const textVars = TextFieldClass.cssVarList;
|
5660
5664
|
|
5661
|
-
const componentName$
|
5665
|
+
const componentName$o = getComponentName('phone-input-box-field');
|
5662
5666
|
|
5663
5667
|
const customMixin$3 = (superclass) =>
|
5664
5668
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
@@ -5672,15 +5676,15 @@ const customMixin$3 = (superclass) =>
|
|
5672
5676
|
const template = document.createElement('template');
|
5673
5677
|
|
5674
5678
|
template.innerHTML = `
|
5675
|
-
<${componentName$
|
5679
|
+
<${componentName$p}
|
5676
5680
|
tabindex="-1"
|
5677
5681
|
slot="input"
|
5678
|
-
></${componentName$
|
5682
|
+
></${componentName$p}>
|
5679
5683
|
`;
|
5680
5684
|
|
5681
5685
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5682
5686
|
|
5683
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5687
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
5684
5688
|
|
5685
5689
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5686
5690
|
includeAttrs: [
|
@@ -5697,7 +5701,7 @@ const customMixin$3 = (superclass) =>
|
|
5697
5701
|
}
|
5698
5702
|
};
|
5699
5703
|
|
5700
|
-
const { host: host$
|
5704
|
+
const { host: host$8, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
5701
5705
|
host: { selector: () => ':host' },
|
5702
5706
|
label: { selector: '::part(label)' },
|
5703
5707
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5711,7 +5715,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5711
5715
|
createStyleMixin({
|
5712
5716
|
mappings: {
|
5713
5717
|
fontSize: [
|
5714
|
-
host$
|
5718
|
+
host$8,
|
5715
5719
|
inputField$1,
|
5716
5720
|
{
|
5717
5721
|
selector: TextFieldClass.componentName,
|
@@ -5719,9 +5723,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
5719
5723
|
},
|
5720
5724
|
],
|
5721
5725
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
5722
|
-
hostWidth: { ...host$
|
5723
|
-
hostMinWidth: { ...host$
|
5724
|
-
hostDirection: { ...host$
|
5726
|
+
hostWidth: { ...host$8, property: 'width' },
|
5727
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
5728
|
+
hostDirection: { ...host$8, property: 'direction' },
|
5725
5729
|
|
5726
5730
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5727
5731
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -5813,15 +5817,15 @@ const PhoneFieldInputBoxClass = compose(
|
|
5813
5817
|
${resetInputLabelPosition('vaadin-text-field')}
|
5814
5818
|
`,
|
5815
5819
|
excludeAttrsSync: ['tabindex'],
|
5816
|
-
componentName: componentName$
|
5820
|
+
componentName: componentName$o,
|
5817
5821
|
})
|
5818
5822
|
);
|
5819
5823
|
|
5820
|
-
customElements.define(componentName$
|
5824
|
+
customElements.define(componentName$o, PhoneFieldInputBoxClass);
|
5821
5825
|
|
5822
|
-
const componentName$
|
5826
|
+
const componentName$n = getComponentName('new-password-internal');
|
5823
5827
|
|
5824
|
-
const componentName$
|
5828
|
+
const componentName$m = getComponentName('new-password');
|
5825
5829
|
|
5826
5830
|
const customMixin$2 = (superclass) =>
|
5827
5831
|
class NewPasswordMixinClass extends superclass {
|
@@ -5831,16 +5835,16 @@ const customMixin$2 = (superclass) =>
|
|
5831
5835
|
const template = document.createElement('template');
|
5832
5836
|
|
5833
5837
|
template.innerHTML = `
|
5834
|
-
<${componentName$
|
5838
|
+
<${componentName$n}
|
5835
5839
|
name="new-password"
|
5836
5840
|
tabindex="-1"
|
5837
5841
|
slot="input"
|
5838
|
-
></${componentName$
|
5842
|
+
></${componentName$n}>
|
5839
5843
|
`;
|
5840
5844
|
|
5841
5845
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5842
5846
|
|
5843
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5847
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
5844
5848
|
|
5845
5849
|
forwardAttrs(this, this.inputElement, {
|
5846
5850
|
includeAttrs: [
|
@@ -5861,7 +5865,7 @@ const customMixin$2 = (superclass) =>
|
|
5861
5865
|
}
|
5862
5866
|
};
|
5863
5867
|
|
5864
|
-
const { host: host$
|
5868
|
+
const { host: host$7, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
5865
5869
|
host: { selector: () => ':host' },
|
5866
5870
|
label: { selector: '::part(label)' },
|
5867
5871
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5874,7 +5878,7 @@ const NewPasswordClass = compose(
|
|
5874
5878
|
createStyleMixin({
|
5875
5879
|
mappings: {
|
5876
5880
|
fontSize: [
|
5877
|
-
host$
|
5881
|
+
host$7,
|
5878
5882
|
{},
|
5879
5883
|
{
|
5880
5884
|
selector: PasswordClass.componentName,
|
@@ -5883,13 +5887,13 @@ const NewPasswordClass = compose(
|
|
5883
5887
|
],
|
5884
5888
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
5885
5889
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
5886
|
-
hostWidth: { ...host$
|
5887
|
-
hostMinWidth: { ...host$
|
5890
|
+
hostWidth: { ...host$7, property: 'width' },
|
5891
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
5888
5892
|
hostDirection: [
|
5889
|
-
{ ...host$
|
5893
|
+
{ ...host$7, property: 'direction' },
|
5890
5894
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
5891
5895
|
],
|
5892
|
-
inputsRequiredIndicator: { ...host$
|
5896
|
+
inputsRequiredIndicator: { ...host$7, property: 'content' },
|
5893
5897
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5894
5898
|
},
|
5895
5899
|
}),
|
@@ -5947,7 +5951,7 @@ const NewPasswordClass = compose(
|
|
5947
5951
|
}
|
5948
5952
|
`,
|
5949
5953
|
excludeAttrsSync: ['tabindex'],
|
5950
|
-
componentName: componentName$
|
5954
|
+
componentName: componentName$m,
|
5951
5955
|
})
|
5952
5956
|
);
|
5953
5957
|
|
@@ -5972,7 +5976,7 @@ const commonAttrs = [
|
|
5972
5976
|
|
5973
5977
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5974
5978
|
|
5975
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
5979
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
5976
5980
|
|
5977
5981
|
class NewPasswordInternal extends BaseInputClass$3 {
|
5978
5982
|
static get observedAttributes() {
|
@@ -6137,16 +6141,16 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6137
6141
|
}
|
6138
6142
|
}
|
6139
6143
|
|
6140
|
-
customElements.define(componentName$
|
6144
|
+
customElements.define(componentName$n, NewPasswordInternal);
|
6141
6145
|
|
6142
|
-
customElements.define(componentName$
|
6146
|
+
customElements.define(componentName$m, NewPasswordClass);
|
6143
6147
|
|
6144
|
-
const componentName$
|
6148
|
+
const componentName$l = getComponentName('recaptcha');
|
6145
6149
|
|
6146
6150
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
6147
6151
|
|
6148
6152
|
const BaseClass = createBaseClass({
|
6149
|
-
componentName: componentName$
|
6153
|
+
componentName: componentName$l,
|
6150
6154
|
baseSelector: ':host > div',
|
6151
6155
|
});
|
6152
6156
|
class RawRecaptcha extends BaseClass {
|
@@ -6298,7 +6302,7 @@ class RawRecaptcha extends BaseClass {
|
|
6298
6302
|
|
6299
6303
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6300
6304
|
|
6301
|
-
customElements.define(componentName$
|
6305
|
+
customElements.define(componentName$l, RecaptchaClass);
|
6302
6306
|
|
6303
6307
|
const getFileBase64 = (fileObj) => {
|
6304
6308
|
return new Promise((resolve) => {
|
@@ -6312,7 +6316,7 @@ const getFilename = (fileObj) => {
|
|
6312
6316
|
return fileObj.name.replace(/^.*\\/, '');
|
6313
6317
|
};
|
6314
6318
|
|
6315
|
-
const componentName$
|
6319
|
+
const componentName$k = getComponentName('upload-file');
|
6316
6320
|
|
6317
6321
|
const observedAttributes = [
|
6318
6322
|
'title',
|
@@ -6327,7 +6331,7 @@ const observedAttributes = [
|
|
6327
6331
|
'icon',
|
6328
6332
|
];
|
6329
6333
|
|
6330
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
6334
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$k, baseSelector: ':host > div' });
|
6331
6335
|
|
6332
6336
|
class RawUploadFile extends BaseInputClass$2 {
|
6333
6337
|
static get observedAttributes() {
|
@@ -6499,7 +6503,7 @@ class RawUploadFile extends BaseInputClass$2 {
|
|
6499
6503
|
}
|
6500
6504
|
|
6501
6505
|
const buttonVars = ButtonClass.cssVarList;
|
6502
|
-
const { host: host$
|
6506
|
+
const { host: host$6, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
6503
6507
|
host: { selector: () => ':host' },
|
6504
6508
|
wrapper: { selector: () => ':host > div' },
|
6505
6509
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6518,11 +6522,11 @@ const UploadFileClass = compose(
|
|
6518
6522
|
borderWidth: {},
|
6519
6523
|
borderStyle: {},
|
6520
6524
|
borderRadius: {},
|
6521
|
-
hostHeight: { ...host$
|
6522
|
-
hostWidth: { ...host$
|
6525
|
+
hostHeight: { ...host$6, property: 'height' },
|
6526
|
+
hostWidth: { ...host$6, property: 'width' },
|
6523
6527
|
hostPadding: { property: 'padding' },
|
6524
6528
|
hostDirection: [
|
6525
|
-
{ ...host$
|
6529
|
+
{ ...host$6, property: 'direction' },
|
6526
6530
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
6527
6531
|
],
|
6528
6532
|
gap: { ...wrapper },
|
@@ -6542,7 +6546,7 @@ const UploadFileClass = compose(
|
|
6542
6546
|
componentNameValidationMixin
|
6543
6547
|
)(RawUploadFile);
|
6544
6548
|
|
6545
|
-
customElements.define(componentName$
|
6549
|
+
customElements.define(componentName$k, UploadFileClass);
|
6546
6550
|
|
6547
6551
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
6548
6552
|
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
@@ -6640,10 +6644,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
6640
6644
|
return BaseButtonSelectionGroupInternalClass;
|
6641
6645
|
};
|
6642
6646
|
|
6643
|
-
const componentName$
|
6647
|
+
const componentName$j = getComponentName('button-selection-group-internal');
|
6644
6648
|
|
6645
6649
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6646
|
-
componentName$
|
6650
|
+
componentName$j
|
6647
6651
|
) {
|
6648
6652
|
getSelectedNode() {
|
6649
6653
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -6799,7 +6803,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
6799
6803
|
}
|
6800
6804
|
};
|
6801
6805
|
|
6802
|
-
const { host: host$
|
6806
|
+
const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
6803
6807
|
host: { selector: () => ':host' },
|
6804
6808
|
label: { selector: '::part(label)' },
|
6805
6809
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6808,9 +6812,9 @@ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
6808
6812
|
};
|
6809
6813
|
|
6810
6814
|
const buttonSelectionGroupMappings = {
|
6811
|
-
hostWidth: { ...host$
|
6812
|
-
hostDirection: { ...host$
|
6813
|
-
fontFamily: host$
|
6815
|
+
hostWidth: { ...host$5, property: 'width' },
|
6816
|
+
hostDirection: { ...host$5, property: 'direction' },
|
6817
|
+
fontFamily: host$5,
|
6814
6818
|
labelTextColor: [
|
6815
6819
|
{ ...label$1, property: 'color' },
|
6816
6820
|
{ ...requiredIndicator$1, property: 'color' },
|
@@ -6875,7 +6879,7 @@ const buttonSelectionGroupStyles = `
|
|
6875
6879
|
${resetInputCursor('vaadin-text-field')}
|
6876
6880
|
`;
|
6877
6881
|
|
6878
|
-
const componentName$
|
6882
|
+
const componentName$i = getComponentName('button-selection-group');
|
6879
6883
|
|
6880
6884
|
const buttonSelectionGroupMixin = (superclass) =>
|
6881
6885
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -6884,19 +6888,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
6884
6888
|
const template = document.createElement('template');
|
6885
6889
|
|
6886
6890
|
template.innerHTML = `
|
6887
|
-
<${componentName$
|
6891
|
+
<${componentName$j}
|
6888
6892
|
name="button-selection-group"
|
6889
6893
|
slot="input"
|
6890
6894
|
tabindex="-1"
|
6891
6895
|
part="internal-component"
|
6892
6896
|
>
|
6893
6897
|
<slot></slot>
|
6894
|
-
</${componentName$
|
6898
|
+
</${componentName$j}>
|
6895
6899
|
`;
|
6896
6900
|
|
6897
6901
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6898
6902
|
|
6899
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6903
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$j);
|
6900
6904
|
|
6901
6905
|
forwardAttrs(this, this.inputElement, {
|
6902
6906
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6921,16 +6925,16 @@ const ButtonSelectionGroupClass = compose(
|
|
6921
6925
|
wrappedEleName: 'vaadin-text-field',
|
6922
6926
|
style: () => buttonSelectionGroupStyles,
|
6923
6927
|
excludeAttrsSync: ['tabindex'],
|
6924
|
-
componentName: componentName$
|
6928
|
+
componentName: componentName$i,
|
6925
6929
|
})
|
6926
6930
|
);
|
6927
6931
|
|
6928
|
-
customElements.define(componentName$
|
6932
|
+
customElements.define(componentName$j, ButtonSelectionGroupInternalClass);
|
6929
6933
|
|
6930
|
-
const componentName$
|
6934
|
+
const componentName$h = getComponentName('button-selection-group-item');
|
6931
6935
|
|
6932
6936
|
class RawSelectItem extends createBaseClass({
|
6933
|
-
componentName: componentName$
|
6937
|
+
componentName: componentName$h,
|
6934
6938
|
baseSelector: ':host > descope-button',
|
6935
6939
|
}) {
|
6936
6940
|
get size() {
|
@@ -7037,14 +7041,14 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7037
7041
|
componentNameValidationMixin
|
7038
7042
|
)(RawSelectItem);
|
7039
7043
|
|
7040
|
-
customElements.define(componentName$
|
7044
|
+
customElements.define(componentName$h, ButtonSelectionGroupItemClass);
|
7041
7045
|
|
7042
|
-
customElements.define(componentName$
|
7046
|
+
customElements.define(componentName$i, ButtonSelectionGroupClass);
|
7043
7047
|
|
7044
|
-
const componentName$
|
7048
|
+
const componentName$g = getComponentName('button-multi-selection-group-internal');
|
7045
7049
|
|
7046
7050
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
7047
|
-
componentName$
|
7051
|
+
componentName$g
|
7048
7052
|
) {
|
7049
7053
|
#getSelectedNodes() {
|
7050
7054
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -7147,7 +7151,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
7147
7151
|
}
|
7148
7152
|
}
|
7149
7153
|
|
7150
|
-
const componentName$
|
7154
|
+
const componentName$f = getComponentName('button-multi-selection-group');
|
7151
7155
|
|
7152
7156
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
7153
7157
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -7156,19 +7160,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
7156
7160
|
const template = document.createElement('template');
|
7157
7161
|
|
7158
7162
|
template.innerHTML = `
|
7159
|
-
<${componentName$
|
7163
|
+
<${componentName$g}
|
7160
7164
|
name="button-selection-group"
|
7161
7165
|
slot="input"
|
7162
7166
|
tabindex="-1"
|
7163
7167
|
part="internal-component"
|
7164
7168
|
>
|
7165
7169
|
<slot></slot>
|
7166
|
-
</${componentName$
|
7170
|
+
</${componentName$g}>
|
7167
7171
|
`;
|
7168
7172
|
|
7169
7173
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7170
7174
|
|
7171
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7175
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
7172
7176
|
|
7173
7177
|
forwardAttrs(this, this.inputElement, {
|
7174
7178
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -7193,13 +7197,13 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
7193
7197
|
wrappedEleName: 'vaadin-text-field',
|
7194
7198
|
style: () => buttonSelectionGroupStyles,
|
7195
7199
|
excludeAttrsSync: ['tabindex'],
|
7196
|
-
componentName: componentName$
|
7200
|
+
componentName: componentName$f,
|
7197
7201
|
})
|
7198
7202
|
);
|
7199
7203
|
|
7200
|
-
customElements.define(componentName$
|
7204
|
+
customElements.define(componentName$g, ButtonMultiSelectionGroupInternalClass);
|
7201
7205
|
|
7202
|
-
customElements.define(componentName$
|
7206
|
+
customElements.define(componentName$f, ButtonMultiSelectionGroupClass);
|
7203
7207
|
|
7204
7208
|
/* eslint-disable no-param-reassign */
|
7205
7209
|
|
@@ -7227,9 +7231,9 @@ class GridTextColumnClass extends GridSortColumn {
|
|
7227
7231
|
}
|
7228
7232
|
}
|
7229
7233
|
|
7230
|
-
const componentName$
|
7234
|
+
const componentName$e = getComponentName('grid-text-column');
|
7231
7235
|
|
7232
|
-
customElements.define(componentName$
|
7236
|
+
customElements.define(componentName$e, GridTextColumnClass);
|
7233
7237
|
|
7234
7238
|
/* eslint-disable no-param-reassign */
|
7235
7239
|
|
@@ -7264,9 +7268,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
|
|
7264
7268
|
|
7265
7269
|
/* eslint-disable no-param-reassign */
|
7266
7270
|
|
7267
|
-
const componentName$
|
7271
|
+
const componentName$d = getComponentName('grid-custom-column');
|
7268
7272
|
|
7269
|
-
customElements.define(componentName$
|
7273
|
+
customElements.define(componentName$d, GridCustomColumnClass);
|
7270
7274
|
|
7271
7275
|
const createCheckboxEle = () => {
|
7272
7276
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -7325,9 +7329,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
7325
7329
|
}
|
7326
7330
|
}
|
7327
7331
|
|
7328
|
-
const componentName$
|
7332
|
+
const componentName$c = getComponentName('grid-selection-column');
|
7329
7333
|
|
7330
|
-
customElements.define(componentName$
|
7334
|
+
customElements.define(componentName$c, GridSelectionColumnClass);
|
7331
7335
|
|
7332
7336
|
const isValidDataType = (data) => {
|
7333
7337
|
const isValid = Array.isArray(data);
|
@@ -7339,7 +7343,7 @@ const isValidDataType = (data) => {
|
|
7339
7343
|
return isValid;
|
7340
7344
|
};
|
7341
7345
|
|
7342
|
-
const componentName$
|
7346
|
+
const componentName$b = getComponentName('grid');
|
7343
7347
|
|
7344
7348
|
const GridMixin = (superclass) =>
|
7345
7349
|
class GridMixinClass extends superclass {
|
@@ -7499,7 +7503,7 @@ const GridMixin = (superclass) =>
|
|
7499
7503
|
};
|
7500
7504
|
|
7501
7505
|
const {
|
7502
|
-
host: host$
|
7506
|
+
host: host$4,
|
7503
7507
|
headerRow,
|
7504
7508
|
headerRowCell,
|
7505
7509
|
contentRow,
|
@@ -7534,15 +7538,15 @@ const GridClass = compose(
|
|
7534
7538
|
fontWeight: { ...contentRow },
|
7535
7539
|
valueTextColor: { ...contentRow, property: 'color' },
|
7536
7540
|
backgroundColor: [
|
7537
|
-
{ ...host$
|
7541
|
+
{ ...host$4, property: 'background-color' },
|
7538
7542
|
{ ...contentRow, property: 'background-color' },
|
7539
7543
|
],
|
7540
7544
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7541
7545
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7542
|
-
borderColor: { ...host$
|
7543
|
-
borderWidth: { ...host$
|
7544
|
-
borderStyle: { ...host$
|
7545
|
-
borderRadius: { ...host$
|
7546
|
+
borderColor: { ...host$4, property: 'border-color' },
|
7547
|
+
borderWidth: { ...host$4, property: 'border-width' },
|
7548
|
+
borderStyle: { ...host$4, property: 'border-style' },
|
7549
|
+
borderRadius: { ...host$4, property: 'border-radius' },
|
7546
7550
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7547
7551
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7548
7552
|
separatorColor: [
|
@@ -7575,13 +7579,13 @@ const GridClass = compose(
|
|
7575
7579
|
}
|
7576
7580
|
`,
|
7577
7581
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7578
|
-
componentName: componentName$
|
7582
|
+
componentName: componentName$b,
|
7579
7583
|
})
|
7580
7584
|
);
|
7581
7585
|
|
7582
|
-
customElements.define(componentName$
|
7586
|
+
customElements.define(componentName$b, GridClass);
|
7583
7587
|
|
7584
|
-
const componentName$
|
7588
|
+
const componentName$a = getComponentName('multi-select-combo-box');
|
7585
7589
|
|
7586
7590
|
const multiSelectComboBoxMixin = (superclass) =>
|
7587
7591
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -7969,7 +7973,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7969
7973
|
};
|
7970
7974
|
|
7971
7975
|
const {
|
7972
|
-
host: host$
|
7976
|
+
host: host$3,
|
7973
7977
|
inputField,
|
7974
7978
|
inputElement,
|
7975
7979
|
placeholder,
|
@@ -8007,10 +8011,10 @@ const {
|
|
8007
8011
|
const MultiSelectComboBoxClass = compose(
|
8008
8012
|
createStyleMixin({
|
8009
8013
|
mappings: {
|
8010
|
-
hostWidth: { ...host$
|
8011
|
-
hostDirection: { ...host$
|
8014
|
+
hostWidth: { ...host$3, property: 'width' },
|
8015
|
+
hostDirection: { ...host$3, property: 'direction' },
|
8012
8016
|
// we apply font-size also on the host so we can set its width with em
|
8013
|
-
fontSize: [{}, host$
|
8017
|
+
fontSize: [{}, host$3],
|
8014
8018
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
8015
8019
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
8016
8020
|
labelTextColor: [
|
@@ -8185,16 +8189,16 @@ const MultiSelectComboBoxClass = compose(
|
|
8185
8189
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
8186
8190
|
// tries to override it, causing us to lose the user set placeholder.
|
8187
8191
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
8188
|
-
componentName: componentName$
|
8192
|
+
componentName: componentName$a,
|
8189
8193
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
8190
8194
|
})
|
8191
8195
|
);
|
8192
8196
|
|
8193
|
-
customElements.define(componentName$
|
8197
|
+
customElements.define(componentName$a, MultiSelectComboBoxClass);
|
8194
8198
|
|
8195
|
-
const componentName$
|
8199
|
+
const componentName$9 = getComponentName('badge');
|
8196
8200
|
|
8197
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
8201
|
+
class RawBadge extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
|
8198
8202
|
constructor() {
|
8199
8203
|
super();
|
8200
8204
|
|
@@ -8205,6 +8209,9 @@ class RawBadge extends createBaseClass({ componentName: componentName$8, baseSel
|
|
8205
8209
|
}
|
8206
8210
|
:host > div {
|
8207
8211
|
width: 100%;
|
8212
|
+
text-overflow: ellipsis;
|
8213
|
+
overflow: hidden;
|
8214
|
+
white-space: nowrap;
|
8208
8215
|
}
|
8209
8216
|
</style>
|
8210
8217
|
<div>
|
@@ -8242,9 +8249,9 @@ const BadgeClass = compose(
|
|
8242
8249
|
componentNameValidationMixin
|
8243
8250
|
)(RawBadge);
|
8244
8251
|
|
8245
|
-
customElements.define(componentName$
|
8252
|
+
customElements.define(componentName$9, BadgeClass);
|
8246
8253
|
|
8247
|
-
const componentName$
|
8254
|
+
const componentName$8 = getComponentName('modal');
|
8248
8255
|
|
8249
8256
|
const customMixin$1 = (superclass) =>
|
8250
8257
|
class ModalMixinClass extends superclass {
|
@@ -8343,11 +8350,11 @@ const ModalClass = compose(
|
|
8343
8350
|
wrappedEleName: 'vaadin-dialog',
|
8344
8351
|
style: () => ``,
|
8345
8352
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8346
|
-
componentName: componentName$
|
8353
|
+
componentName: componentName$8,
|
8347
8354
|
})
|
8348
8355
|
);
|
8349
8356
|
|
8350
|
-
customElements.define(componentName$
|
8357
|
+
customElements.define(componentName$8, ModalClass);
|
8351
8358
|
|
8352
8359
|
const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
|
8353
8360
|
|
@@ -8358,7 +8365,7 @@ if (!vaadinContainerClass) {
|
|
8358
8365
|
class NotificationContainerClass extends vaadinContainerClass {}
|
8359
8366
|
customElements.define(getComponentName('notification-container'), NotificationContainerClass);
|
8360
8367
|
|
8361
|
-
const componentName$
|
8368
|
+
const componentName$7 = getComponentName('notification-card');
|
8362
8369
|
|
8363
8370
|
const notificationCardMixin = (superclass) =>
|
8364
8371
|
class NotificationCardMixinClass extends superclass {
|
@@ -8466,13 +8473,13 @@ const NotificationCardClass = compose(
|
|
8466
8473
|
}
|
8467
8474
|
`,
|
8468
8475
|
excludeAttrsSync: ['tabindex'],
|
8469
|
-
componentName: componentName$
|
8476
|
+
componentName: componentName$7,
|
8470
8477
|
})
|
8471
8478
|
);
|
8472
8479
|
|
8473
|
-
customElements.define(componentName$
|
8480
|
+
customElements.define(componentName$7, NotificationCardClass);
|
8474
8481
|
|
8475
|
-
const componentName$
|
8482
|
+
const componentName$6 = getComponentName('notification');
|
8476
8483
|
|
8477
8484
|
const NotificationMixin = (superclass) =>
|
8478
8485
|
class NotificationMixinClass extends superclass {
|
@@ -8567,14 +8574,14 @@ const NotificationClass = compose(
|
|
8567
8574
|
createProxy({
|
8568
8575
|
wrappedEleName: 'vaadin-notification',
|
8569
8576
|
excludeAttrsSync: ['tabindex'],
|
8570
|
-
componentName: componentName$
|
8577
|
+
componentName: componentName$6,
|
8571
8578
|
})
|
8572
8579
|
);
|
8573
8580
|
|
8574
|
-
customElements.define(componentName$
|
8581
|
+
customElements.define(componentName$6, NotificationClass);
|
8575
8582
|
|
8576
|
-
const componentName$
|
8577
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
8583
|
+
const componentName$5 = getComponentName('avatar');
|
8584
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSelector: ':host > .wrapper' }) {
|
8578
8585
|
constructor() {
|
8579
8586
|
super();
|
8580
8587
|
|
@@ -8584,7 +8591,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8584
8591
|
display: inline-flex;
|
8585
8592
|
}
|
8586
8593
|
|
8587
|
-
.
|
8594
|
+
.editableBadge {
|
8588
8595
|
border: 1px solid;
|
8589
8596
|
border-radius: 100%;
|
8590
8597
|
height: fit-content;
|
@@ -8620,7 +8627,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8620
8627
|
|
8621
8628
|
<div class="wrapper">
|
8622
8629
|
<vaadin-avatar></vaadin-avatar>
|
8623
|
-
<div class="
|
8630
|
+
<div class="editableBadge">
|
8624
8631
|
<vaadin-icon icon="vaadin:pencil"></vaadin-icon>
|
8625
8632
|
</div>
|
8626
8633
|
</div>
|
@@ -8629,10 +8636,11 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8629
8636
|
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
8630
8637
|
|
8631
8638
|
forwardAttrs(this, this.avatarComponent, {
|
8632
|
-
includeAttrs: ['name', 'img'],
|
8639
|
+
includeAttrs: ['display-name', 'img'],
|
8640
|
+
mapAttrs: { 'display-name': 'name' },
|
8633
8641
|
});
|
8634
8642
|
|
8635
|
-
const editableIcon = this.shadowRoot.querySelector('.
|
8643
|
+
const editableIcon = this.shadowRoot.querySelector('.editableBadge');
|
8636
8644
|
|
8637
8645
|
observeAttributes(
|
8638
8646
|
this,
|
@@ -8648,18 +8656,19 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8648
8656
|
}
|
8649
8657
|
}
|
8650
8658
|
|
8651
|
-
const { host: host$
|
8659
|
+
const { host: host$2, editableBadge, avatar: avatar$2 } = {
|
8652
8660
|
host: { selector: () => ':host' },
|
8653
|
-
editableBadge: { selector: '> .
|
8661
|
+
editableBadge: { selector: '> .editableBadge' },
|
8654
8662
|
avatar: { selector: 'vaadin-avatar' },
|
8655
8663
|
};
|
8656
8664
|
|
8657
8665
|
const AvatarClass = compose(
|
8658
8666
|
createStyleMixin({
|
8659
8667
|
mappings: {
|
8660
|
-
hostWidth: { ...host$
|
8661
|
-
hostHeight: { ...host$
|
8662
|
-
|
8668
|
+
hostWidth: { ...host$2, property: 'width' },
|
8669
|
+
hostHeight: { ...host$2, property: 'height' },
|
8670
|
+
cursor: [avatar$2, host$2],
|
8671
|
+
hostDirection: { ...host$2, property: 'direction' },
|
8663
8672
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
8664
8673
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
8665
8674
|
editableIconColor: { ...editableBadge, property: 'color' },
|
@@ -8671,11 +8680,11 @@ const AvatarClass = compose(
|
|
8671
8680
|
componentNameValidationMixin
|
8672
8681
|
)(RawAvatar);
|
8673
8682
|
|
8674
|
-
customElements.define(componentName$
|
8683
|
+
customElements.define(componentName$5, AvatarClass);
|
8675
8684
|
|
8676
|
-
const componentName$
|
8685
|
+
const componentName$4 = getComponentName('mappings-field-internal');
|
8677
8686
|
|
8678
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
8687
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
|
8679
8688
|
|
8680
8689
|
class MappingsFieldInternal extends BaseInputClass$1 {
|
8681
8690
|
#errorItem;
|
@@ -8910,7 +8919,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8910
8919
|
}
|
8911
8920
|
}
|
8912
8921
|
|
8913
|
-
const componentName$
|
8922
|
+
const componentName$3 = getComponentName('mappings-field');
|
8914
8923
|
|
8915
8924
|
const customMixin = (superclass) =>
|
8916
8925
|
class MappingsFieldMixinClass extends superclass {
|
@@ -8939,14 +8948,14 @@ const customMixin = (superclass) =>
|
|
8939
8948
|
const template = document.createElement('template');
|
8940
8949
|
|
8941
8950
|
template.innerHTML = `
|
8942
|
-
<${componentName$
|
8951
|
+
<${componentName$4}
|
8943
8952
|
tabindex="-1"
|
8944
|
-
></${componentName$
|
8953
|
+
></${componentName$4}>
|
8945
8954
|
`;
|
8946
8955
|
|
8947
8956
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8948
8957
|
|
8949
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8958
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$4);
|
8950
8959
|
|
8951
8960
|
forwardAttrs(this, this.inputElement, {
|
8952
8961
|
includeAttrs: [
|
@@ -8969,7 +8978,7 @@ const customMixin = (superclass) =>
|
|
8969
8978
|
};
|
8970
8979
|
|
8971
8980
|
const {
|
8972
|
-
host,
|
8981
|
+
host: host$1,
|
8973
8982
|
helperText,
|
8974
8983
|
errorMessage,
|
8975
8984
|
mappingItem,
|
@@ -8993,10 +9002,10 @@ const {
|
|
8993
9002
|
const MappingsFieldClass = compose(
|
8994
9003
|
createStyleMixin({
|
8995
9004
|
mappings: {
|
8996
|
-
hostWidth: { ...host, property: 'width' },
|
8997
|
-
hostDirection: { ...host, property: 'direction' },
|
9005
|
+
hostWidth: { ...host$1, property: 'width' },
|
9006
|
+
hostDirection: { ...host$1, property: 'direction' },
|
8998
9007
|
// we apply font-size also on the host so we can set its width with em
|
8999
|
-
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
9008
|
+
fontSize: [{}, host$1, { ...separator, property: 'margin-top' }],
|
9000
9009
|
fontFamily: [helperText, errorMessage, labels],
|
9001
9010
|
separatorFontSize: { ...separator, property: 'font-size' },
|
9002
9011
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
@@ -9062,17 +9071,17 @@ const MappingsFieldClass = compose(
|
|
9062
9071
|
'options',
|
9063
9072
|
'error-message',
|
9064
9073
|
],
|
9065
|
-
componentName: componentName$
|
9074
|
+
componentName: componentName$3,
|
9066
9075
|
})
|
9067
9076
|
);
|
9068
9077
|
|
9069
|
-
customElements.define(componentName$
|
9078
|
+
customElements.define(componentName$4, MappingsFieldInternal);
|
9070
9079
|
|
9071
|
-
const componentName$
|
9080
|
+
const componentName$2 = getComponentName('mapping-item');
|
9072
9081
|
|
9073
9082
|
const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
|
9074
9083
|
|
9075
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
9084
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: 'div' });
|
9076
9085
|
|
9077
9086
|
class MappingItem extends BaseInputClass {
|
9078
9087
|
static get observedAttributes() {
|
@@ -9222,9 +9231,238 @@ class MappingItem extends BaseInputClass {
|
|
9222
9231
|
}
|
9223
9232
|
}
|
9224
9233
|
|
9225
|
-
customElements.define(componentName$
|
9234
|
+
customElements.define(componentName$2, MappingItem);
|
9235
|
+
|
9236
|
+
customElements.define(componentName$3, MappingsFieldClass);
|
9237
|
+
|
9238
|
+
function deleteIcon() {
|
9239
|
+
return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
9240
|
+
}
|
9241
|
+
|
9242
|
+
function editIcon() {
|
9243
|
+
return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
9244
|
+
}
|
9245
|
+
|
9246
|
+
const componentName$1 = getComponentName('user-attribute');
|
9247
|
+
class RawUserAttribute extends createBaseClass({
|
9248
|
+
componentName: componentName$1,
|
9249
|
+
baseSelector: ':host > .root',
|
9250
|
+
}) {
|
9251
|
+
constructor() {
|
9252
|
+
super();
|
9253
|
+
|
9254
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
9255
|
+
<style>
|
9256
|
+
:host {
|
9257
|
+
display: inline-flex;
|
9258
|
+
}
|
9259
|
+
|
9260
|
+
vaadin-icon {
|
9261
|
+
color: currentcolor;
|
9262
|
+
}
|
9263
|
+
|
9264
|
+
.root {
|
9265
|
+
display: flex;
|
9266
|
+
width: 100%;
|
9267
|
+
height: 100%;
|
9268
|
+
align-items: center;
|
9269
|
+
}
|
9270
|
+
|
9271
|
+
.btn-wrapper {
|
9272
|
+
display: flex;
|
9273
|
+
justify-content: space-between;
|
9274
|
+
align-items: center;
|
9275
|
+
flex-grow: 0;
|
9276
|
+
}
|
9277
|
+
|
9278
|
+
.text-wrapper {
|
9279
|
+
display: flex;
|
9280
|
+
align-items: center;
|
9281
|
+
flex-grow: 1;
|
9282
|
+
}
|
9283
|
+
|
9284
|
+
descope-text::part(text-wrapper) {
|
9285
|
+
text-overflow: ellipsis;
|
9286
|
+
overflow: hidden;
|
9287
|
+
white-space: nowrap;
|
9288
|
+
width: initial;
|
9289
|
+
}
|
9290
|
+
|
9291
|
+
descope-text {
|
9292
|
+
display: inline-flex;
|
9293
|
+
}
|
9294
|
+
|
9295
|
+
descope-badge {
|
9296
|
+
margin-inline-end: 10px;
|
9297
|
+
}
|
9298
|
+
|
9299
|
+
descope-text[data-id="label-text"].required:after {
|
9300
|
+
content: '*';
|
9301
|
+
color: var(${TextClass.cssVarList.textColor});
|
9302
|
+
}
|
9303
|
+
</style>
|
9304
|
+
|
9305
|
+
|
9306
|
+
<div class="root">
|
9307
|
+
<div class="text-wrapper">
|
9308
|
+
<descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
|
9309
|
+
<descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
|
9310
|
+
</div>
|
9311
|
+
|
9312
|
+
<div class="btn-wrapper">
|
9313
|
+
<descope-badge mode="default" bordered="true" size="xs"></descope-badge>
|
9314
|
+
<descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
|
9315
|
+
<vaadin-icon src=${editIcon}></vaadin-icon>
|
9316
|
+
</descope-button>
|
9317
|
+
<descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
|
9318
|
+
<vaadin-icon src=${deleteIcon}></vaadin-icon>
|
9319
|
+
</descope-button>
|
9320
|
+
</div
|
9321
|
+
</div>
|
9322
|
+
`;
|
9323
|
+
|
9324
|
+
this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
|
9325
|
+
this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
|
9326
|
+
this.badge = this.shadowRoot.querySelector('descope-badge');
|
9327
|
+
this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
|
9328
|
+
this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
|
9329
|
+
}
|
9330
|
+
|
9331
|
+
onLabelChange() {
|
9332
|
+
this.labelText.innerText = this.label;
|
9333
|
+
this.labelText.setAttribute('title', this.label);
|
9334
|
+
}
|
9335
|
+
|
9336
|
+
onValueOrPlaceholderChange() {
|
9337
|
+
const text = this.value || this.placeholder;
|
9338
|
+
const mode = this.value ? 'primary' : 'secondary';
|
9339
|
+
|
9340
|
+
this.valueText.innerText = text;
|
9341
|
+
this.valueText.setAttribute('title', text);
|
9342
|
+
this.valueText.setAttribute('mode', mode);
|
9343
|
+
}
|
9344
|
+
|
9345
|
+
onBadgeLabelChange() {
|
9346
|
+
if (!this.badgeLabel) {
|
9347
|
+
this.badge.style.display = 'none';
|
9348
|
+
} else {
|
9349
|
+
this.badge.innerText = this.badgeLabel;
|
9350
|
+
this.badge.style.display = '';
|
9351
|
+
}
|
9352
|
+
}
|
9353
|
+
|
9354
|
+
onBadgeTooltipTextChange() {
|
9355
|
+
this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
|
9356
|
+
}
|
9357
|
+
|
9358
|
+
onIsRequiredChange() {
|
9359
|
+
this.labelText.classList.toggle('required', this.isRequired);
|
9360
|
+
}
|
9361
|
+
|
9362
|
+
get label() {
|
9363
|
+
return this.getAttribute('label') || '';
|
9364
|
+
}
|
9365
|
+
|
9366
|
+
get value() {
|
9367
|
+
return this.getAttribute('value') || '';
|
9368
|
+
}
|
9369
|
+
|
9370
|
+
get placeholder() {
|
9371
|
+
return this.getAttribute('placeholder') || '';
|
9372
|
+
}
|
9373
|
+
|
9374
|
+
get isRequired() {
|
9375
|
+
return this.getAttribute('required') === 'true';
|
9376
|
+
}
|
9377
|
+
|
9378
|
+
get badgeLabel() {
|
9379
|
+
return this.getAttribute('badge-label') || '';
|
9380
|
+
}
|
9381
|
+
|
9382
|
+
get badgeTooltipText() {
|
9383
|
+
return this.getAttribute('badge-tooltip-text') || '';
|
9384
|
+
}
|
9385
|
+
|
9386
|
+
init() {
|
9387
|
+
this.onLabelChange();
|
9388
|
+
this.onValueOrPlaceholderChange();
|
9389
|
+
this.onIsRequiredChange();
|
9390
|
+
this.onBadgeLabelChange();
|
9391
|
+
this.onBadgeTooltipTextChange();
|
9392
|
+
|
9393
|
+
this.deleteButton.addEventListener('click', () =>
|
9394
|
+
this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
|
9395
|
+
);
|
9396
|
+
|
9397
|
+
this.editButton.addEventListener('click', () =>
|
9398
|
+
this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
|
9399
|
+
);
|
9400
|
+
}
|
9401
|
+
|
9402
|
+
static get observedAttributes() {
|
9403
|
+
return [
|
9404
|
+
'label',
|
9405
|
+
'value',
|
9406
|
+
'placeholder',
|
9407
|
+
'required',
|
9408
|
+
'badge-label',
|
9409
|
+
'badge-tooltip-text',
|
9410
|
+
].concat(super.observedAttributes);
|
9411
|
+
}
|
9412
|
+
|
9413
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
9414
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
9415
|
+
|
9416
|
+
if (oldValue === newValue) {
|
9417
|
+
return;
|
9418
|
+
}
|
9419
|
+
|
9420
|
+
if (name === 'label') {
|
9421
|
+
this.onLabelChange();
|
9422
|
+
} else if (name === 'value' || name === 'placeholder') {
|
9423
|
+
this.onValueOrPlaceholderChange();
|
9424
|
+
} else if (name === 'required') {
|
9425
|
+
this.onIsRequiredChange();
|
9426
|
+
} else if (name === 'badge-label') {
|
9427
|
+
this.onBadgeLabelChange();
|
9428
|
+
} else if (name === 'badge-tooltip-text') {
|
9429
|
+
this.onBadgeTooltipTextChange();
|
9430
|
+
}
|
9431
|
+
}
|
9432
|
+
}
|
9433
|
+
|
9434
|
+
const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
|
9435
|
+
host: { selector: () => ':host' },
|
9436
|
+
textFields: { selector: 'descope-text' },
|
9437
|
+
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
9438
|
+
labelText: { selector: 'descope-text[data-id="label-text"]' },
|
9439
|
+
buttons: { selector: 'descope-button' },
|
9440
|
+
badge: { selector: 'descope-badge' },
|
9441
|
+
textWrapper: { selector: ' .text-wrapper' },
|
9442
|
+
};
|
9443
|
+
|
9444
|
+
const UserAttributeClass = compose(
|
9445
|
+
createStyleMixin({
|
9446
|
+
mappings: {
|
9447
|
+
hostWidth: { ...host, property: 'width' },
|
9448
|
+
hostMinWidth: { ...host, property: 'min-width' },
|
9449
|
+
hostDirection: [
|
9450
|
+
{ ...host, property: 'direction' },
|
9451
|
+
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
9452
|
+
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
9453
|
+
{ ...badge$2, property: BadgeClass.cssVarList.hostDirection },
|
9454
|
+
],
|
9455
|
+
labelTextWidth: { ...labelText, property: 'width' },
|
9456
|
+
valueTextWidth: { ...valueText, property: 'width' },
|
9457
|
+
badgeMaxWidth: { ...badge$2, property: 'max-width' },
|
9458
|
+
itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
|
9459
|
+
},
|
9460
|
+
}),
|
9461
|
+
draggableMixin,
|
9462
|
+
componentNameValidationMixin
|
9463
|
+
)(RawUserAttribute);
|
9226
9464
|
|
9227
|
-
customElements.define(componentName$
|
9465
|
+
customElements.define(componentName$1, UserAttributeClass);
|
9228
9466
|
|
9229
9467
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
9230
9468
|
|
@@ -9656,33 +9894,33 @@ const globals = {
|
|
9656
9894
|
fonts,
|
9657
9895
|
direction,
|
9658
9896
|
};
|
9659
|
-
const vars$
|
9897
|
+
const vars$B = getThemeVars(globals);
|
9660
9898
|
|
9661
|
-
const globalRefs$
|
9899
|
+
const globalRefs$k = getThemeRefs(globals);
|
9662
9900
|
const compVars$5 = ButtonClass.cssVarList;
|
9663
9901
|
|
9664
9902
|
const mode = {
|
9665
|
-
primary: globalRefs$
|
9666
|
-
secondary: globalRefs$
|
9667
|
-
success: globalRefs$
|
9668
|
-
error: globalRefs$
|
9669
|
-
surface: globalRefs$
|
9903
|
+
primary: globalRefs$k.colors.primary,
|
9904
|
+
secondary: globalRefs$k.colors.secondary,
|
9905
|
+
success: globalRefs$k.colors.success,
|
9906
|
+
error: globalRefs$k.colors.error,
|
9907
|
+
surface: globalRefs$k.colors.surface,
|
9670
9908
|
};
|
9671
9909
|
|
9672
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
9910
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
|
9673
9911
|
|
9674
9912
|
const button = {
|
9675
9913
|
...helperTheme$3,
|
9676
9914
|
|
9677
|
-
[compVars$5.fontFamily]: globalRefs$
|
9915
|
+
[compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
|
9678
9916
|
|
9679
9917
|
[compVars$5.cursor]: 'pointer',
|
9680
9918
|
[compVars$5.hostHeight]: '3em',
|
9681
9919
|
[compVars$5.hostWidth]: 'auto',
|
9682
|
-
[compVars$5.hostDirection]: globalRefs$
|
9920
|
+
[compVars$5.hostDirection]: globalRefs$k.direction,
|
9683
9921
|
|
9684
|
-
[compVars$5.borderRadius]: globalRefs$
|
9685
|
-
[compVars$5.borderWidth]: globalRefs$
|
9922
|
+
[compVars$5.borderRadius]: globalRefs$k.radius.sm,
|
9923
|
+
[compVars$5.borderWidth]: globalRefs$k.border.xs,
|
9686
9924
|
[compVars$5.borderStyle]: 'solid',
|
9687
9925
|
[compVars$5.borderColor]: 'transparent',
|
9688
9926
|
|
@@ -9725,10 +9963,10 @@ const button = {
|
|
9725
9963
|
},
|
9726
9964
|
|
9727
9965
|
_disabled: {
|
9728
|
-
[helperVars$3.main]: globalRefs$
|
9729
|
-
[helperVars$3.dark]: globalRefs$
|
9730
|
-
[helperVars$3.light]: globalRefs$
|
9731
|
-
[helperVars$3.contrast]: globalRefs$
|
9966
|
+
[helperVars$3.main]: globalRefs$k.colors.surface.light,
|
9967
|
+
[helperVars$3.dark]: globalRefs$k.colors.surface.dark,
|
9968
|
+
[helperVars$3.light]: globalRefs$k.colors.surface.light,
|
9969
|
+
[helperVars$3.contrast]: globalRefs$k.colors.surface.main,
|
9732
9970
|
},
|
9733
9971
|
|
9734
9972
|
variant: {
|
@@ -9776,7 +10014,7 @@ const button = {
|
|
9776
10014
|
},
|
9777
10015
|
};
|
9778
10016
|
|
9779
|
-
const vars$
|
10017
|
+
const vars$A = {
|
9780
10018
|
...compVars$5,
|
9781
10019
|
...helperVars$3,
|
9782
10020
|
};
|
@@ -9784,26 +10022,26 @@ const vars$z = {
|
|
9784
10022
|
var button$1 = /*#__PURE__*/Object.freeze({
|
9785
10023
|
__proto__: null,
|
9786
10024
|
default: button,
|
9787
|
-
vars: vars$
|
10025
|
+
vars: vars$A
|
9788
10026
|
});
|
9789
10027
|
|
9790
10028
|
const componentName = getComponentName('input-wrapper');
|
9791
|
-
const globalRefs$
|
10029
|
+
const globalRefs$j = getThemeRefs(globals);
|
9792
10030
|
|
9793
|
-
const [theme$1, refs, vars$
|
10031
|
+
const [theme$1, refs, vars$z] = createHelperVars(
|
9794
10032
|
{
|
9795
|
-
labelTextColor: globalRefs$
|
9796
|
-
valueTextColor: globalRefs$
|
9797
|
-
placeholderTextColor: globalRefs$
|
10033
|
+
labelTextColor: globalRefs$j.colors.surface.dark,
|
10034
|
+
valueTextColor: globalRefs$j.colors.surface.contrast,
|
10035
|
+
placeholderTextColor: globalRefs$j.colors.surface.dark,
|
9798
10036
|
requiredIndicator: "'*'",
|
9799
|
-
errorMessageTextColor: globalRefs$
|
9800
|
-
helperTextColor: globalRefs$
|
10037
|
+
errorMessageTextColor: globalRefs$j.colors.error.main,
|
10038
|
+
helperTextColor: globalRefs$j.colors.surface.dark,
|
9801
10039
|
|
9802
|
-
borderWidth: globalRefs$
|
9803
|
-
borderRadius: globalRefs$
|
10040
|
+
borderWidth: globalRefs$j.border.xs,
|
10041
|
+
borderRadius: globalRefs$j.radius.xs,
|
9804
10042
|
borderColor: 'transparent',
|
9805
10043
|
|
9806
|
-
outlineWidth: globalRefs$
|
10044
|
+
outlineWidth: globalRefs$j.border.sm,
|
9807
10045
|
outlineStyle: 'solid',
|
9808
10046
|
outlineColor: 'transparent',
|
9809
10047
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -9814,11 +10052,11 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
9814
10052
|
horizontalPadding: '0.5em',
|
9815
10053
|
verticalPadding: '0.5em',
|
9816
10054
|
|
9817
|
-
backgroundColor: globalRefs$
|
10055
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
9818
10056
|
|
9819
|
-
fontFamily: globalRefs$
|
10057
|
+
fontFamily: globalRefs$j.fonts.font1.family,
|
9820
10058
|
|
9821
|
-
direction: globalRefs$
|
10059
|
+
direction: globalRefs$j.direction,
|
9822
10060
|
|
9823
10061
|
overlayOpacity: '0.3',
|
9824
10062
|
|
@@ -9834,28 +10072,28 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
9834
10072
|
},
|
9835
10073
|
|
9836
10074
|
_focused: {
|
9837
|
-
outlineColor: globalRefs$
|
10075
|
+
outlineColor: globalRefs$j.colors.surface.light,
|
9838
10076
|
_invalid: {
|
9839
|
-
outlineColor: globalRefs$
|
10077
|
+
outlineColor: globalRefs$j.colors.error.main,
|
9840
10078
|
},
|
9841
10079
|
},
|
9842
10080
|
|
9843
10081
|
_bordered: {
|
9844
|
-
outlineWidth: globalRefs$
|
9845
|
-
borderColor: globalRefs$
|
10082
|
+
outlineWidth: globalRefs$j.border.xs,
|
10083
|
+
borderColor: globalRefs$j.colors.surface.light,
|
9846
10084
|
borderStyle: 'solid',
|
9847
10085
|
_invalid: {
|
9848
|
-
borderColor: globalRefs$
|
10086
|
+
borderColor: globalRefs$j.colors.error.main,
|
9849
10087
|
},
|
9850
10088
|
},
|
9851
10089
|
|
9852
10090
|
_disabled: {
|
9853
|
-
labelTextColor: globalRefs$
|
9854
|
-
borderColor: globalRefs$
|
9855
|
-
valueTextColor: globalRefs$
|
9856
|
-
placeholderTextColor: globalRefs$
|
9857
|
-
helperTextColor: globalRefs$
|
9858
|
-
backgroundColor: globalRefs$
|
10091
|
+
labelTextColor: globalRefs$j.colors.surface.light,
|
10092
|
+
borderColor: globalRefs$j.colors.surface.light,
|
10093
|
+
valueTextColor: globalRefs$j.colors.surface.light,
|
10094
|
+
placeholderTextColor: globalRefs$j.colors.surface.light,
|
10095
|
+
helperTextColor: globalRefs$j.colors.surface.light,
|
10096
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
9859
10097
|
},
|
9860
10098
|
},
|
9861
10099
|
componentName
|
@@ -9865,22 +10103,64 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
9865
10103
|
__proto__: null,
|
9866
10104
|
default: theme$1,
|
9867
10105
|
refs: refs,
|
9868
|
-
vars: vars$
|
10106
|
+
vars: vars$z
|
9869
10107
|
});
|
9870
10108
|
|
9871
|
-
const vars$
|
10109
|
+
const vars$y = TextFieldClass.cssVarList;
|
9872
10110
|
|
9873
10111
|
const textField = {
|
10112
|
+
[vars$y.hostWidth]: refs.width,
|
10113
|
+
[vars$y.hostMinWidth]: refs.minWidth,
|
10114
|
+
[vars$y.hostDirection]: refs.direction,
|
10115
|
+
[vars$y.fontSize]: refs.fontSize,
|
10116
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
10117
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
10118
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10119
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
10120
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
10121
|
+
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
10122
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
10123
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
10124
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
10125
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
10126
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
10127
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
10128
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
10129
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
10130
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
10131
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
10132
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
10133
|
+
[vars$y.helperTextColor]: refs.helperTextColor,
|
10134
|
+
textAlign: {
|
10135
|
+
right: { [vars$y.inputTextAlign]: 'right' },
|
10136
|
+
left: { [vars$y.inputTextAlign]: 'left' },
|
10137
|
+
center: { [vars$y.inputTextAlign]: 'center' },
|
10138
|
+
},
|
10139
|
+
};
|
10140
|
+
|
10141
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
10142
|
+
__proto__: null,
|
10143
|
+
default: textField,
|
10144
|
+
textField: textField,
|
10145
|
+
vars: vars$y
|
10146
|
+
});
|
10147
|
+
|
10148
|
+
const globalRefs$i = getThemeRefs(globals);
|
10149
|
+
const vars$x = PasswordClass.cssVarList;
|
10150
|
+
|
10151
|
+
const password = {
|
9874
10152
|
[vars$x.hostWidth]: refs.width,
|
9875
|
-
[vars$x.hostMinWidth]: refs.minWidth,
|
9876
10153
|
[vars$x.hostDirection]: refs.direction,
|
9877
10154
|
[vars$x.fontSize]: refs.fontSize,
|
9878
10155
|
[vars$x.fontFamily]: refs.fontFamily,
|
9879
10156
|
[vars$x.labelTextColor]: refs.labelTextColor,
|
9880
|
-
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
9881
10157
|
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
10158
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
10159
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
10160
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
10161
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
9882
10162
|
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
9883
|
-
[vars$x.
|
10163
|
+
[vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9884
10164
|
[vars$x.inputBorderWidth]: refs.borderWidth,
|
9885
10165
|
[vars$x.inputBorderStyle]: refs.borderStyle,
|
9886
10166
|
[vars$x.inputBorderColor]: refs.borderColor,
|
@@ -9889,40 +10169,29 @@ const textField = {
|
|
9889
10169
|
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
9890
10170
|
[vars$x.inputOutlineColor]: refs.outlineColor,
|
9891
10171
|
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
9892
|
-
[vars$x.
|
9893
|
-
[vars$x.
|
9894
|
-
[vars$x.
|
9895
|
-
[vars$x.helperTextColor]: refs.helperTextColor,
|
9896
|
-
textAlign: {
|
9897
|
-
right: { [vars$x.inputTextAlign]: 'right' },
|
9898
|
-
left: { [vars$x.inputTextAlign]: 'left' },
|
9899
|
-
center: { [vars$x.inputTextAlign]: 'center' },
|
9900
|
-
},
|
10172
|
+
[vars$x.revealButtonOffset]: globalRefs$i.spacing.md,
|
10173
|
+
[vars$x.revealButtonSize]: refs.toggleButtonSize,
|
10174
|
+
[vars$x.revealButtonColor]: refs.placeholderTextColor,
|
9901
10175
|
};
|
9902
10176
|
|
9903
|
-
var
|
10177
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
9904
10178
|
__proto__: null,
|
9905
|
-
default:
|
9906
|
-
textField: textField,
|
10179
|
+
default: password,
|
9907
10180
|
vars: vars$x
|
9908
10181
|
});
|
9909
10182
|
|
9910
|
-
const
|
9911
|
-
const vars$w = PasswordClass.cssVarList;
|
10183
|
+
const vars$w = NumberFieldClass.cssVarList;
|
9912
10184
|
|
9913
|
-
const
|
10185
|
+
const numberField = {
|
9914
10186
|
[vars$w.hostWidth]: refs.width,
|
10187
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
9915
10188
|
[vars$w.hostDirection]: refs.direction,
|
9916
10189
|
[vars$w.fontSize]: refs.fontSize,
|
9917
10190
|
[vars$w.fontFamily]: refs.fontFamily,
|
9918
10191
|
[vars$w.labelTextColor]: refs.labelTextColor,
|
9919
10192
|
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
9920
|
-
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
9921
|
-
[vars$w.inputHeight]: refs.inputHeight,
|
9922
|
-
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
9923
|
-
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
9924
10193
|
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
9925
|
-
[vars$w.
|
10194
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
9926
10195
|
[vars$w.inputBorderWidth]: refs.borderWidth,
|
9927
10196
|
[vars$w.inputBorderStyle]: refs.borderStyle,
|
9928
10197
|
[vars$w.inputBorderColor]: refs.borderColor,
|
@@ -9931,20 +10200,21 @@ const password = {
|
|
9931
10200
|
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
9932
10201
|
[vars$w.inputOutlineColor]: refs.outlineColor,
|
9933
10202
|
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
9934
|
-
[vars$w.
|
9935
|
-
[vars$w.
|
9936
|
-
[vars$w.
|
10203
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
10204
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
10205
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
10206
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
9937
10207
|
};
|
9938
10208
|
|
9939
|
-
var
|
10209
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
9940
10210
|
__proto__: null,
|
9941
|
-
default:
|
10211
|
+
default: numberField,
|
9942
10212
|
vars: vars$w
|
9943
10213
|
});
|
9944
10214
|
|
9945
|
-
const vars$v =
|
10215
|
+
const vars$v = EmailFieldClass.cssVarList;
|
9946
10216
|
|
9947
|
-
const
|
10217
|
+
const emailField = {
|
9948
10218
|
[vars$v.hostWidth]: refs.width,
|
9949
10219
|
[vars$v.hostMinWidth]: refs.minWidth,
|
9950
10220
|
[vars$v.hostDirection]: refs.direction,
|
@@ -9953,6 +10223,7 @@ const numberField = {
|
|
9953
10223
|
[vars$v.labelTextColor]: refs.labelTextColor,
|
9954
10224
|
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
9955
10225
|
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
10226
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
9956
10227
|
[vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
|
9957
10228
|
[vars$v.inputBorderWidth]: refs.borderWidth,
|
9958
10229
|
[vars$v.inputBorderStyle]: refs.borderStyle,
|
@@ -9963,200 +10234,167 @@ const numberField = {
|
|
9963
10234
|
[vars$v.inputOutlineColor]: refs.outlineColor,
|
9964
10235
|
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
9965
10236
|
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
9966
|
-
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
9967
10237
|
[vars$v.inputHorizontalPadding]: refs.horizontalPadding,
|
9968
10238
|
[vars$v.inputHeight]: refs.inputHeight,
|
9969
10239
|
};
|
9970
10240
|
|
9971
|
-
var
|
10241
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
9972
10242
|
__proto__: null,
|
9973
|
-
default:
|
10243
|
+
default: emailField,
|
9974
10244
|
vars: vars$v
|
9975
10245
|
});
|
9976
10246
|
|
9977
|
-
const vars$u =
|
10247
|
+
const vars$u = TextAreaClass.cssVarList;
|
9978
10248
|
|
9979
|
-
const
|
10249
|
+
const textArea = {
|
9980
10250
|
[vars$u.hostWidth]: refs.width,
|
9981
10251
|
[vars$u.hostMinWidth]: refs.minWidth,
|
9982
10252
|
[vars$u.hostDirection]: refs.direction,
|
9983
10253
|
[vars$u.fontSize]: refs.fontSize,
|
9984
10254
|
[vars$u.fontFamily]: refs.fontFamily,
|
9985
10255
|
[vars$u.labelTextColor]: refs.labelTextColor,
|
10256
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
9986
10257
|
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10258
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
9987
10259
|
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
9988
|
-
[vars$u.
|
9989
|
-
[vars$u.
|
10260
|
+
[vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10261
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
9990
10262
|
[vars$u.inputBorderWidth]: refs.borderWidth,
|
9991
10263
|
[vars$u.inputBorderStyle]: refs.borderStyle,
|
9992
10264
|
[vars$u.inputBorderColor]: refs.borderColor,
|
9993
|
-
[vars$u.inputBorderRadius]: refs.borderRadius,
|
9994
10265
|
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
9995
10266
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
9996
10267
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
9997
10268
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
9998
|
-
[vars$u.
|
9999
|
-
[vars$u.
|
10000
|
-
|
10269
|
+
[vars$u.inputResizeType]: 'vertical',
|
10270
|
+
[vars$u.inputMinHeight]: '5em',
|
10271
|
+
textAlign: {
|
10272
|
+
right: { [vars$u.inputTextAlign]: 'right' },
|
10273
|
+
left: { [vars$u.inputTextAlign]: 'left' },
|
10274
|
+
center: { [vars$u.inputTextAlign]: 'center' },
|
10275
|
+
},
|
10276
|
+
|
10277
|
+
_readonly: {
|
10278
|
+
[vars$u.inputResizeType]: 'none',
|
10279
|
+
},
|
10001
10280
|
};
|
10002
10281
|
|
10003
|
-
var
|
10282
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
10004
10283
|
__proto__: null,
|
10005
|
-
default:
|
10284
|
+
default: textArea,
|
10006
10285
|
vars: vars$u
|
10007
10286
|
});
|
10008
10287
|
|
10009
|
-
const vars$t =
|
10288
|
+
const vars$t = CheckboxClass.cssVarList;
|
10289
|
+
const checkboxSize = '1.35em';
|
10010
10290
|
|
10011
|
-
const
|
10291
|
+
const checkbox = {
|
10012
10292
|
[vars$t.hostWidth]: refs.width,
|
10013
|
-
[vars$t.hostMinWidth]: refs.minWidth,
|
10014
10293
|
[vars$t.hostDirection]: refs.direction,
|
10015
10294
|
[vars$t.fontSize]: refs.fontSize,
|
10016
10295
|
[vars$t.fontFamily]: refs.fontFamily,
|
10017
10296
|
[vars$t.labelTextColor]: refs.labelTextColor,
|
10018
10297
|
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
10298
|
+
[vars$t.labelFontWeight]: '400',
|
10299
|
+
[vars$t.labelLineHeight]: checkboxSize,
|
10300
|
+
[vars$t.labelSpacing]: '1em',
|
10019
10301
|
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
10020
|
-
[vars$t.
|
10021
|
-
[vars$t.
|
10022
|
-
[vars$t.
|
10302
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
10303
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
10304
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
10305
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
10023
10306
|
[vars$t.inputBorderRadius]: refs.borderRadius,
|
10307
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
10024
10308
|
[vars$t.inputBorderWidth]: refs.borderWidth,
|
10025
10309
|
[vars$t.inputBorderStyle]: refs.borderStyle,
|
10026
|
-
[vars$t.
|
10027
|
-
[vars$t.
|
10028
|
-
|
10029
|
-
|
10030
|
-
|
10031
|
-
[vars$t.inputResizeType]: 'vertical',
|
10032
|
-
[vars$t.inputMinHeight]: '5em',
|
10033
|
-
textAlign: {
|
10034
|
-
right: { [vars$t.inputTextAlign]: 'right' },
|
10035
|
-
left: { [vars$t.inputTextAlign]: 'left' },
|
10036
|
-
center: { [vars$t.inputTextAlign]: 'center' },
|
10310
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
10311
|
+
[vars$t.inputSize]: checkboxSize,
|
10312
|
+
|
10313
|
+
_checked: {
|
10314
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
10037
10315
|
},
|
10038
10316
|
|
10039
|
-
|
10040
|
-
[vars$t.
|
10317
|
+
_disabled: {
|
10318
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
10041
10319
|
},
|
10042
10320
|
};
|
10043
10321
|
|
10044
|
-
var
|
10322
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10045
10323
|
__proto__: null,
|
10046
|
-
default:
|
10324
|
+
default: checkbox,
|
10047
10325
|
vars: vars$t
|
10048
10326
|
});
|
10049
10327
|
|
10050
|
-
const
|
10051
|
-
const
|
10328
|
+
const knobMargin = '2px';
|
10329
|
+
const checkboxHeight = '1.25em';
|
10052
10330
|
|
10053
|
-
const
|
10331
|
+
const globalRefs$h = getThemeRefs(globals);
|
10332
|
+
const vars$s = SwitchToggleClass.cssVarList;
|
10333
|
+
|
10334
|
+
const switchToggle = {
|
10054
10335
|
[vars$s.hostWidth]: refs.width,
|
10055
10336
|
[vars$s.hostDirection]: refs.direction,
|
10056
10337
|
[vars$s.fontSize]: refs.fontSize,
|
10057
10338
|
[vars$s.fontFamily]: refs.fontFamily,
|
10058
|
-
|
10059
|
-
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
10060
|
-
[vars$s.labelFontWeight]: '400',
|
10061
|
-
[vars$s.labelLineHeight]: checkboxSize,
|
10062
|
-
[vars$s.labelSpacing]: '1em',
|
10063
|
-
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
10339
|
+
|
10064
10340
|
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
10065
10341
|
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
10066
10342
|
[vars$s.inputOutlineColor]: refs.outlineColor,
|
10067
10343
|
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
10068
|
-
[vars$s.inputBorderRadius]: refs.borderRadius,
|
10069
|
-
[vars$s.inputBorderColor]: refs.borderColor,
|
10070
|
-
[vars$s.inputBorderWidth]: refs.borderWidth,
|
10071
|
-
[vars$s.inputBorderStyle]: refs.borderStyle,
|
10072
|
-
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
10073
|
-
[vars$s.inputSize]: checkboxSize,
|
10074
|
-
|
10075
|
-
_checked: {
|
10076
|
-
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
10077
|
-
},
|
10078
|
-
|
10079
|
-
_disabled: {
|
10080
|
-
[vars$s.labelTextColor]: refs.labelTextColor,
|
10081
|
-
},
|
10082
|
-
};
|
10083
|
-
|
10084
|
-
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10085
|
-
__proto__: null,
|
10086
|
-
default: checkbox,
|
10087
|
-
vars: vars$s
|
10088
|
-
});
|
10089
|
-
|
10090
|
-
const knobMargin = '2px';
|
10091
|
-
const checkboxHeight = '1.25em';
|
10092
10344
|
|
10093
|
-
|
10094
|
-
|
10345
|
+
[vars$s.trackBorderStyle]: refs.borderStyle,
|
10346
|
+
[vars$s.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10347
|
+
[vars$s.trackBorderColor]: refs.borderColor,
|
10348
|
+
[vars$s.trackBackgroundColor]: refs.backgroundColor,
|
10349
|
+
[vars$s.trackBorderRadius]: globalRefs$h.radius.md,
|
10350
|
+
[vars$s.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10351
|
+
[vars$s.trackHeight]: checkboxHeight,
|
10352
|
+
|
10353
|
+
[vars$s.knobSize]: `calc(1em - ${knobMargin})`,
|
10354
|
+
[vars$s.knobRadius]: '50%',
|
10355
|
+
[vars$s.knobTopOffset]: '1px',
|
10356
|
+
[vars$s.knobLeftOffset]: knobMargin,
|
10357
|
+
[vars$s.knobColor]: refs.labelTextColor,
|
10358
|
+
[vars$s.knobTransitionDuration]: '0.3s',
|
10095
10359
|
|
10096
|
-
|
10097
|
-
[vars$
|
10098
|
-
[vars$
|
10099
|
-
[vars$
|
10100
|
-
[vars$
|
10101
|
-
|
10102
|
-
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
10103
|
-
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
10104
|
-
[vars$r.inputOutlineColor]: refs.outlineColor,
|
10105
|
-
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
10106
|
-
|
10107
|
-
[vars$r.trackBorderStyle]: refs.borderStyle,
|
10108
|
-
[vars$r.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10109
|
-
[vars$r.trackBorderColor]: refs.borderColor,
|
10110
|
-
[vars$r.trackBackgroundColor]: refs.backgroundColor,
|
10111
|
-
[vars$r.trackBorderRadius]: globalRefs$g.radius.md,
|
10112
|
-
[vars$r.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10113
|
-
[vars$r.trackHeight]: checkboxHeight,
|
10114
|
-
|
10115
|
-
[vars$r.knobSize]: `calc(1em - ${knobMargin})`,
|
10116
|
-
[vars$r.knobRadius]: '50%',
|
10117
|
-
[vars$r.knobTopOffset]: '1px',
|
10118
|
-
[vars$r.knobLeftOffset]: knobMargin,
|
10119
|
-
[vars$r.knobColor]: refs.labelTextColor,
|
10120
|
-
[vars$r.knobTransitionDuration]: '0.3s',
|
10121
|
-
|
10122
|
-
[vars$r.labelTextColor]: refs.labelTextColor,
|
10123
|
-
[vars$r.labelFontWeight]: '400',
|
10124
|
-
[vars$r.labelLineHeight]: '1.35em',
|
10125
|
-
[vars$r.labelSpacing]: '1em',
|
10126
|
-
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
10127
|
-
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
10360
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
10361
|
+
[vars$s.labelFontWeight]: '400',
|
10362
|
+
[vars$s.labelLineHeight]: '1.35em',
|
10363
|
+
[vars$s.labelSpacing]: '1em',
|
10364
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
10365
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
10128
10366
|
|
10129
10367
|
_checked: {
|
10130
|
-
[vars$
|
10131
|
-
[vars$
|
10132
|
-
[vars$
|
10133
|
-
[vars$
|
10368
|
+
[vars$s.trackBorderColor]: refs.borderColor,
|
10369
|
+
[vars$s.knobLeftOffset]: `calc(100% - var(${vars$s.knobSize}) - ${knobMargin})`,
|
10370
|
+
[vars$s.knobColor]: refs.valueTextColor,
|
10371
|
+
[vars$s.knobTextColor]: refs.valueTextColor,
|
10134
10372
|
},
|
10135
10373
|
|
10136
10374
|
_disabled: {
|
10137
|
-
[vars$
|
10138
|
-
[vars$
|
10139
|
-
[vars$
|
10140
|
-
[vars$
|
10375
|
+
[vars$s.knobColor]: globalRefs$h.colors.surface.light,
|
10376
|
+
[vars$s.trackBorderColor]: globalRefs$h.colors.surface.light,
|
10377
|
+
[vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
10378
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
10141
10379
|
_checked: {
|
10142
|
-
[vars$
|
10143
|
-
[vars$
|
10380
|
+
[vars$s.knobColor]: globalRefs$h.colors.surface.light,
|
10381
|
+
[vars$s.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
10144
10382
|
},
|
10145
10383
|
},
|
10146
10384
|
|
10147
10385
|
_invalid: {
|
10148
|
-
[vars$
|
10149
|
-
[vars$
|
10386
|
+
[vars$s.trackBorderColor]: globalRefs$h.colors.error.main,
|
10387
|
+
[vars$s.knobColor]: globalRefs$h.colors.error.main,
|
10150
10388
|
},
|
10151
10389
|
};
|
10152
10390
|
|
10153
10391
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
10154
10392
|
__proto__: null,
|
10155
10393
|
default: switchToggle,
|
10156
|
-
vars: vars$
|
10394
|
+
vars: vars$s
|
10157
10395
|
});
|
10158
10396
|
|
10159
|
-
const globalRefs$
|
10397
|
+
const globalRefs$g = getThemeRefs(globals);
|
10160
10398
|
|
10161
10399
|
const compVars$4 = ContainerClass.cssVarList;
|
10162
10400
|
|
@@ -10178,7 +10416,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
10178
10416
|
horizontalAlignment,
|
10179
10417
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
10180
10418
|
},
|
10181
|
-
componentName$
|
10419
|
+
componentName$H
|
10182
10420
|
);
|
10183
10421
|
|
10184
10422
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -10188,10 +10426,10 @@ const container = {
|
|
10188
10426
|
|
10189
10427
|
[compVars$4.hostWidth]: '100%',
|
10190
10428
|
[compVars$4.boxShadow]: 'none',
|
10191
|
-
[compVars$4.backgroundColor]: globalRefs$
|
10192
|
-
[compVars$4.color]: globalRefs$
|
10429
|
+
[compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
|
10430
|
+
[compVars$4.color]: globalRefs$g.colors.surface.contrast,
|
10193
10431
|
[compVars$4.borderRadius]: '0px',
|
10194
|
-
[compVars$4.hostDirection]: globalRefs$
|
10432
|
+
[compVars$4.hostDirection]: globalRefs$g.direction,
|
10195
10433
|
|
10196
10434
|
verticalPadding: {
|
10197
10435
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
@@ -10237,34 +10475,34 @@ const container = {
|
|
10237
10475
|
|
10238
10476
|
shadow: {
|
10239
10477
|
sm: {
|
10240
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10478
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
|
10241
10479
|
},
|
10242
10480
|
md: {
|
10243
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10481
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
|
10244
10482
|
},
|
10245
10483
|
lg: {
|
10246
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10484
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
|
10247
10485
|
},
|
10248
10486
|
xl: {
|
10249
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10487
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
|
10250
10488
|
},
|
10251
10489
|
'2xl': {
|
10252
10490
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
10253
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10491
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
|
10254
10492
|
},
|
10255
10493
|
},
|
10256
10494
|
|
10257
10495
|
borderRadius: {
|
10258
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
10259
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
10260
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
10261
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
10262
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
10263
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
10496
|
+
sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
|
10497
|
+
md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
|
10498
|
+
lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
|
10499
|
+
xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
|
10500
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
|
10501
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
|
10264
10502
|
},
|
10265
10503
|
};
|
10266
10504
|
|
10267
|
-
const vars$
|
10505
|
+
const vars$r = {
|
10268
10506
|
...compVars$4,
|
10269
10507
|
...helperVars$2,
|
10270
10508
|
};
|
@@ -10272,166 +10510,166 @@ const vars$q = {
|
|
10272
10510
|
var container$1 = /*#__PURE__*/Object.freeze({
|
10273
10511
|
__proto__: null,
|
10274
10512
|
default: container,
|
10275
|
-
vars: vars$
|
10513
|
+
vars: vars$r
|
10276
10514
|
});
|
10277
10515
|
|
10278
|
-
const vars$
|
10516
|
+
const vars$q = LogoClass.cssVarList;
|
10279
10517
|
|
10280
10518
|
const logo$2 = {
|
10281
|
-
[vars$
|
10519
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
10282
10520
|
};
|
10283
10521
|
|
10284
10522
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
10285
10523
|
__proto__: null,
|
10286
10524
|
default: logo$2,
|
10287
|
-
vars: vars$
|
10525
|
+
vars: vars$q
|
10288
10526
|
});
|
10289
10527
|
|
10290
|
-
const vars$
|
10528
|
+
const vars$p = TotpImageClass.cssVarList;
|
10291
10529
|
|
10292
10530
|
const logo$1 = {
|
10293
|
-
[vars$
|
10531
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
10294
10532
|
};
|
10295
10533
|
|
10296
10534
|
var totpImage = /*#__PURE__*/Object.freeze({
|
10297
10535
|
__proto__: null,
|
10298
10536
|
default: logo$1,
|
10299
|
-
vars: vars$
|
10537
|
+
vars: vars$p
|
10300
10538
|
});
|
10301
10539
|
|
10302
|
-
const vars$
|
10540
|
+
const vars$o = NotpImageClass.cssVarList;
|
10303
10541
|
|
10304
10542
|
const logo = {
|
10305
|
-
[vars$
|
10543
|
+
[vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
10306
10544
|
};
|
10307
10545
|
|
10308
10546
|
var notpImage = /*#__PURE__*/Object.freeze({
|
10309
10547
|
__proto__: null,
|
10310
10548
|
default: logo,
|
10311
|
-
vars: vars$
|
10549
|
+
vars: vars$o
|
10312
10550
|
});
|
10313
10551
|
|
10314
|
-
const globalRefs$
|
10315
|
-
const vars$
|
10552
|
+
const globalRefs$f = getThemeRefs(globals);
|
10553
|
+
const vars$n = TextClass.cssVarList;
|
10316
10554
|
|
10317
10555
|
const text = {
|
10318
|
-
[vars$
|
10319
|
-
[vars$
|
10320
|
-
[vars$
|
10321
|
-
[vars$
|
10556
|
+
[vars$n.hostDirection]: globalRefs$f.direction,
|
10557
|
+
[vars$n.textLineHeight]: '1.35em',
|
10558
|
+
[vars$n.textAlign]: 'left',
|
10559
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.dark,
|
10322
10560
|
variant: {
|
10323
10561
|
h1: {
|
10324
|
-
[vars$
|
10325
|
-
[vars$
|
10326
|
-
[vars$
|
10562
|
+
[vars$n.fontSize]: globalRefs$f.typography.h1.size,
|
10563
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h1.weight,
|
10564
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h1.font,
|
10327
10565
|
},
|
10328
10566
|
h2: {
|
10329
|
-
[vars$
|
10330
|
-
[vars$
|
10331
|
-
[vars$
|
10567
|
+
[vars$n.fontSize]: globalRefs$f.typography.h2.size,
|
10568
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h2.weight,
|
10569
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h2.font,
|
10332
10570
|
},
|
10333
10571
|
h3: {
|
10334
|
-
[vars$
|
10335
|
-
[vars$
|
10336
|
-
[vars$
|
10572
|
+
[vars$n.fontSize]: globalRefs$f.typography.h3.size,
|
10573
|
+
[vars$n.fontWeight]: globalRefs$f.typography.h3.weight,
|
10574
|
+
[vars$n.fontFamily]: globalRefs$f.typography.h3.font,
|
10337
10575
|
},
|
10338
10576
|
subtitle1: {
|
10339
|
-
[vars$
|
10340
|
-
[vars$
|
10341
|
-
[vars$
|
10577
|
+
[vars$n.fontSize]: globalRefs$f.typography.subtitle1.size,
|
10578
|
+
[vars$n.fontWeight]: globalRefs$f.typography.subtitle1.weight,
|
10579
|
+
[vars$n.fontFamily]: globalRefs$f.typography.subtitle1.font,
|
10342
10580
|
},
|
10343
10581
|
subtitle2: {
|
10344
|
-
[vars$
|
10345
|
-
[vars$
|
10346
|
-
[vars$
|
10582
|
+
[vars$n.fontSize]: globalRefs$f.typography.subtitle2.size,
|
10583
|
+
[vars$n.fontWeight]: globalRefs$f.typography.subtitle2.weight,
|
10584
|
+
[vars$n.fontFamily]: globalRefs$f.typography.subtitle2.font,
|
10347
10585
|
},
|
10348
10586
|
body1: {
|
10349
|
-
[vars$
|
10350
|
-
[vars$
|
10351
|
-
[vars$
|
10587
|
+
[vars$n.fontSize]: globalRefs$f.typography.body1.size,
|
10588
|
+
[vars$n.fontWeight]: globalRefs$f.typography.body1.weight,
|
10589
|
+
[vars$n.fontFamily]: globalRefs$f.typography.body1.font,
|
10352
10590
|
},
|
10353
10591
|
body2: {
|
10354
|
-
[vars$
|
10355
|
-
[vars$
|
10356
|
-
[vars$
|
10592
|
+
[vars$n.fontSize]: globalRefs$f.typography.body2.size,
|
10593
|
+
[vars$n.fontWeight]: globalRefs$f.typography.body2.weight,
|
10594
|
+
[vars$n.fontFamily]: globalRefs$f.typography.body2.font,
|
10357
10595
|
},
|
10358
10596
|
},
|
10359
10597
|
|
10360
10598
|
mode: {
|
10361
10599
|
primary: {
|
10362
|
-
[vars$
|
10600
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.contrast,
|
10363
10601
|
},
|
10364
10602
|
secondary: {
|
10365
|
-
[vars$
|
10603
|
+
[vars$n.textColor]: globalRefs$f.colors.surface.dark,
|
10366
10604
|
},
|
10367
10605
|
error: {
|
10368
|
-
[vars$
|
10606
|
+
[vars$n.textColor]: globalRefs$f.colors.error.main,
|
10369
10607
|
},
|
10370
10608
|
success: {
|
10371
|
-
[vars$
|
10609
|
+
[vars$n.textColor]: globalRefs$f.colors.success.main,
|
10372
10610
|
},
|
10373
10611
|
},
|
10374
10612
|
|
10375
10613
|
textAlign: {
|
10376
|
-
right: { [vars$
|
10377
|
-
left: { [vars$
|
10378
|
-
center: { [vars$
|
10614
|
+
right: { [vars$n.textAlign]: 'right' },
|
10615
|
+
left: { [vars$n.textAlign]: 'left' },
|
10616
|
+
center: { [vars$n.textAlign]: 'center' },
|
10379
10617
|
},
|
10380
10618
|
|
10381
10619
|
_fullWidth: {
|
10382
|
-
[vars$
|
10620
|
+
[vars$n.hostWidth]: '100%',
|
10383
10621
|
},
|
10384
10622
|
|
10385
10623
|
_italic: {
|
10386
|
-
[vars$
|
10624
|
+
[vars$n.fontStyle]: 'italic',
|
10387
10625
|
},
|
10388
10626
|
|
10389
10627
|
_uppercase: {
|
10390
|
-
[vars$
|
10628
|
+
[vars$n.textTransform]: 'uppercase',
|
10391
10629
|
},
|
10392
10630
|
|
10393
10631
|
_lowercase: {
|
10394
|
-
[vars$
|
10632
|
+
[vars$n.textTransform]: 'lowercase',
|
10395
10633
|
},
|
10396
10634
|
};
|
10397
10635
|
|
10398
10636
|
var text$1 = /*#__PURE__*/Object.freeze({
|
10399
10637
|
__proto__: null,
|
10400
10638
|
default: text,
|
10401
|
-
vars: vars$
|
10639
|
+
vars: vars$n
|
10402
10640
|
});
|
10403
10641
|
|
10404
|
-
const globalRefs$
|
10405
|
-
const vars$
|
10642
|
+
const globalRefs$e = getThemeRefs(globals);
|
10643
|
+
const vars$m = LinkClass.cssVarList;
|
10406
10644
|
|
10407
10645
|
const link = {
|
10408
|
-
[vars$
|
10409
|
-
[vars$
|
10646
|
+
[vars$m.hostDirection]: globalRefs$e.direction,
|
10647
|
+
[vars$m.cursor]: 'pointer',
|
10410
10648
|
|
10411
|
-
[vars$
|
10649
|
+
[vars$m.textColor]: globalRefs$e.colors.primary.main,
|
10412
10650
|
|
10413
10651
|
textAlign: {
|
10414
|
-
right: { [vars$
|
10415
|
-
left: { [vars$
|
10416
|
-
center: { [vars$
|
10652
|
+
right: { [vars$m.textAlign]: 'right' },
|
10653
|
+
left: { [vars$m.textAlign]: 'left' },
|
10654
|
+
center: { [vars$m.textAlign]: 'center' },
|
10417
10655
|
},
|
10418
10656
|
|
10419
10657
|
_fullWidth: {
|
10420
|
-
[vars$
|
10658
|
+
[vars$m.hostWidth]: '100%',
|
10421
10659
|
},
|
10422
10660
|
|
10423
10661
|
mode: {
|
10424
10662
|
primary: {
|
10425
|
-
[vars$
|
10663
|
+
[vars$m.textColor]: globalRefs$e.colors.primary.main,
|
10426
10664
|
},
|
10427
10665
|
secondary: {
|
10428
|
-
[vars$
|
10666
|
+
[vars$m.textColor]: globalRefs$e.colors.secondary.main,
|
10429
10667
|
},
|
10430
10668
|
error: {
|
10431
|
-
[vars$
|
10669
|
+
[vars$m.textColor]: globalRefs$e.colors.error.main,
|
10432
10670
|
},
|
10433
10671
|
success: {
|
10434
|
-
[vars$
|
10672
|
+
[vars$m.textColor]: globalRefs$e.colors.success.main,
|
10435
10673
|
},
|
10436
10674
|
},
|
10437
10675
|
};
|
@@ -10439,10 +10677,10 @@ const link = {
|
|
10439
10677
|
var link$1 = /*#__PURE__*/Object.freeze({
|
10440
10678
|
__proto__: null,
|
10441
10679
|
default: link,
|
10442
|
-
vars: vars$
|
10680
|
+
vars: vars$m
|
10443
10681
|
});
|
10444
10682
|
|
10445
|
-
const globalRefs$
|
10683
|
+
const globalRefs$d = getThemeRefs(globals);
|
10446
10684
|
const compVars$3 = DividerClass.cssVarList;
|
10447
10685
|
|
10448
10686
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -10450,18 +10688,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
10450
10688
|
thickness: '2px',
|
10451
10689
|
spacing: '10px',
|
10452
10690
|
},
|
10453
|
-
componentName$
|
10691
|
+
componentName$F
|
10454
10692
|
);
|
10455
10693
|
|
10456
10694
|
const divider = {
|
10457
10695
|
...helperTheme$1,
|
10458
10696
|
|
10459
|
-
[compVars$3.hostDirection]: globalRefs$
|
10697
|
+
[compVars$3.hostDirection]: globalRefs$d.direction,
|
10460
10698
|
[compVars$3.alignItems]: 'center',
|
10461
10699
|
[compVars$3.flexDirection]: 'row',
|
10462
10700
|
[compVars$3.alignSelf]: 'stretch',
|
10463
10701
|
[compVars$3.hostWidth]: '100%',
|
10464
|
-
[compVars$3.stripeColor]: globalRefs$
|
10702
|
+
[compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
|
10465
10703
|
[compVars$3.stripeColorOpacity]: '0.5',
|
10466
10704
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
10467
10705
|
[compVars$3.labelTextWidth]: 'fit-content',
|
@@ -10481,7 +10719,7 @@ const divider = {
|
|
10481
10719
|
},
|
10482
10720
|
};
|
10483
10721
|
|
10484
|
-
const vars$
|
10722
|
+
const vars$l = {
|
10485
10723
|
...compVars$3,
|
10486
10724
|
...helperVars$1,
|
10487
10725
|
};
|
@@ -10489,111 +10727,111 @@ const vars$k = {
|
|
10489
10727
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
10490
10728
|
__proto__: null,
|
10491
10729
|
default: divider,
|
10492
|
-
vars: vars$
|
10730
|
+
vars: vars$l
|
10493
10731
|
});
|
10494
10732
|
|
10495
|
-
const vars$
|
10733
|
+
const vars$k = PasscodeClass.cssVarList;
|
10496
10734
|
|
10497
10735
|
const passcode = {
|
10498
|
-
[vars$
|
10499
|
-
[vars$
|
10500
|
-
[vars$
|
10501
|
-
[vars$
|
10502
|
-
[vars$
|
10503
|
-
[vars$
|
10504
|
-
[vars$
|
10505
|
-
[vars$
|
10506
|
-
[vars$
|
10507
|
-
[vars$
|
10508
|
-
[vars$
|
10509
|
-
[vars$
|
10510
|
-
[vars$
|
10511
|
-
[vars$
|
10512
|
-
[vars$
|
10736
|
+
[vars$k.hostDirection]: refs.direction,
|
10737
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
10738
|
+
[vars$k.fontSize]: refs.fontSize,
|
10739
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
10740
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
10741
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
10742
|
+
[vars$k.digitValueTextColor]: refs.valueTextColor,
|
10743
|
+
[vars$k.digitPadding]: '0',
|
10744
|
+
[vars$k.digitTextAlign]: 'center',
|
10745
|
+
[vars$k.digitSpacing]: '4px',
|
10746
|
+
[vars$k.hostWidth]: refs.width,
|
10747
|
+
[vars$k.digitOutlineColor]: 'transparent',
|
10748
|
+
[vars$k.digitOutlineWidth]: refs.outlineWidth,
|
10749
|
+
[vars$k.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
10750
|
+
[vars$k.digitSize]: refs.inputHeight,
|
10513
10751
|
|
10514
10752
|
size: {
|
10515
|
-
xs: { [vars$
|
10516
|
-
sm: { [vars$
|
10517
|
-
md: { [vars$
|
10518
|
-
lg: { [vars$
|
10753
|
+
xs: { [vars$k.spinnerSize]: '15px' },
|
10754
|
+
sm: { [vars$k.spinnerSize]: '20px' },
|
10755
|
+
md: { [vars$k.spinnerSize]: '20px' },
|
10756
|
+
lg: { [vars$k.spinnerSize]: '20px' },
|
10519
10757
|
},
|
10520
10758
|
|
10521
10759
|
_hideCursor: {
|
10522
|
-
[vars$
|
10760
|
+
[vars$k.digitCaretTextColor]: 'transparent',
|
10523
10761
|
},
|
10524
10762
|
|
10525
10763
|
_loading: {
|
10526
|
-
[vars$
|
10764
|
+
[vars$k.overlayOpacity]: refs.overlayOpacity,
|
10527
10765
|
},
|
10528
10766
|
};
|
10529
10767
|
|
10530
10768
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
10531
10769
|
__proto__: null,
|
10532
10770
|
default: passcode,
|
10533
|
-
vars: vars$
|
10771
|
+
vars: vars$k
|
10534
10772
|
});
|
10535
10773
|
|
10536
|
-
const globalRefs$
|
10537
|
-
const vars$
|
10774
|
+
const globalRefs$c = getThemeRefs(globals);
|
10775
|
+
const vars$j = LoaderLinearClass.cssVarList;
|
10538
10776
|
|
10539
10777
|
const loaderLinear = {
|
10540
|
-
[vars$
|
10541
|
-
[vars$
|
10778
|
+
[vars$j.hostDisplay]: 'inline-block',
|
10779
|
+
[vars$j.hostWidth]: '100%',
|
10542
10780
|
|
10543
|
-
[vars$
|
10544
|
-
[vars$
|
10781
|
+
[vars$j.barColor]: globalRefs$c.colors.surface.contrast,
|
10782
|
+
[vars$j.barWidth]: '20%',
|
10545
10783
|
|
10546
|
-
[vars$
|
10547
|
-
[vars$
|
10784
|
+
[vars$j.barBackgroundColor]: globalRefs$c.colors.surface.light,
|
10785
|
+
[vars$j.barBorderRadius]: '4px',
|
10548
10786
|
|
10549
|
-
[vars$
|
10550
|
-
[vars$
|
10551
|
-
[vars$
|
10552
|
-
[vars$
|
10787
|
+
[vars$j.animationDuration]: '2s',
|
10788
|
+
[vars$j.animationTimingFunction]: 'linear',
|
10789
|
+
[vars$j.animationIterationCount]: 'infinite',
|
10790
|
+
[vars$j.verticalPadding]: '0.25em',
|
10553
10791
|
|
10554
10792
|
size: {
|
10555
|
-
xs: { [vars$
|
10556
|
-
sm: { [vars$
|
10557
|
-
md: { [vars$
|
10558
|
-
lg: { [vars$
|
10793
|
+
xs: { [vars$j.barHeight]: '2px' },
|
10794
|
+
sm: { [vars$j.barHeight]: '4px' },
|
10795
|
+
md: { [vars$j.barHeight]: '6px' },
|
10796
|
+
lg: { [vars$j.barHeight]: '8px' },
|
10559
10797
|
},
|
10560
10798
|
|
10561
10799
|
mode: {
|
10562
10800
|
primary: {
|
10563
|
-
[vars$
|
10801
|
+
[vars$j.barColor]: globalRefs$c.colors.primary.main,
|
10564
10802
|
},
|
10565
10803
|
secondary: {
|
10566
|
-
[vars$
|
10804
|
+
[vars$j.barColor]: globalRefs$c.colors.secondary.main,
|
10567
10805
|
},
|
10568
10806
|
},
|
10569
10807
|
|
10570
10808
|
_hidden: {
|
10571
|
-
[vars$
|
10809
|
+
[vars$j.hostDisplay]: 'none',
|
10572
10810
|
},
|
10573
10811
|
};
|
10574
10812
|
|
10575
10813
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
10576
10814
|
__proto__: null,
|
10577
10815
|
default: loaderLinear,
|
10578
|
-
vars: vars$
|
10816
|
+
vars: vars$j
|
10579
10817
|
});
|
10580
10818
|
|
10581
|
-
const globalRefs$
|
10819
|
+
const globalRefs$b = getThemeRefs(globals);
|
10582
10820
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
10583
10821
|
|
10584
10822
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
10585
10823
|
{
|
10586
|
-
spinnerColor: globalRefs$
|
10824
|
+
spinnerColor: globalRefs$b.colors.surface.contrast,
|
10587
10825
|
mode: {
|
10588
10826
|
primary: {
|
10589
|
-
spinnerColor: globalRefs$
|
10827
|
+
spinnerColor: globalRefs$b.colors.primary.main,
|
10590
10828
|
},
|
10591
10829
|
secondary: {
|
10592
|
-
spinnerColor: globalRefs$
|
10830
|
+
spinnerColor: globalRefs$b.colors.secondary.main,
|
10593
10831
|
},
|
10594
10832
|
},
|
10595
10833
|
},
|
10596
|
-
componentName$
|
10834
|
+
componentName$I
|
10597
10835
|
);
|
10598
10836
|
|
10599
10837
|
const loaderRadial = {
|
@@ -10622,7 +10860,7 @@ const loaderRadial = {
|
|
10622
10860
|
[compVars$2.hostDisplay]: 'none',
|
10623
10861
|
},
|
10624
10862
|
};
|
10625
|
-
const vars$
|
10863
|
+
const vars$i = {
|
10626
10864
|
...compVars$2,
|
10627
10865
|
...helperVars,
|
10628
10866
|
};
|
@@ -10630,78 +10868,114 @@ const vars$h = {
|
|
10630
10868
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
10631
10869
|
__proto__: null,
|
10632
10870
|
default: loaderRadial,
|
10633
|
-
vars: vars$
|
10871
|
+
vars: vars$i
|
10634
10872
|
});
|
10635
10873
|
|
10636
|
-
const globalRefs$
|
10637
|
-
const vars$
|
10874
|
+
const globalRefs$a = getThemeRefs(globals);
|
10875
|
+
const vars$h = ComboBoxClass.cssVarList;
|
10638
10876
|
|
10639
10877
|
const comboBox = {
|
10640
|
-
[vars$
|
10641
|
-
[vars$
|
10642
|
-
[vars$
|
10643
|
-
[vars$
|
10644
|
-
[vars$
|
10645
|
-
[vars$
|
10646
|
-
[vars$
|
10647
|
-
[vars$
|
10648
|
-
[vars$
|
10649
|
-
[vars$
|
10650
|
-
[vars$
|
10651
|
-
[vars$
|
10652
|
-
[vars$
|
10653
|
-
[vars$
|
10654
|
-
[vars$
|
10655
|
-
[vars$
|
10656
|
-
[vars$
|
10657
|
-
[vars$
|
10658
|
-
[vars$
|
10659
|
-
[vars$
|
10660
|
-
[vars$
|
10661
|
-
[vars$
|
10662
|
-
[vars$
|
10663
|
-
[vars$
|
10664
|
-
[vars$
|
10665
|
-
[vars$
|
10878
|
+
[vars$h.hostWidth]: refs.width,
|
10879
|
+
[vars$h.hostDirection]: refs.direction,
|
10880
|
+
[vars$h.fontSize]: refs.fontSize,
|
10881
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
10882
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
10883
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
10884
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
10885
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
10886
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
10887
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
10888
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
10889
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
10890
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
10891
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
10892
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
10893
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
10894
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10895
|
+
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
10896
|
+
[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
|
10897
|
+
[vars$h.inputHeight]: refs.inputHeight,
|
10898
|
+
[vars$h.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
|
10899
|
+
[vars$h.inputDropdownButtonCursor]: 'pointer',
|
10900
|
+
[vars$h.inputDropdownButtonSize]: refs.toggleButtonSize,
|
10901
|
+
[vars$h.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
|
10902
|
+
[vars$h.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
|
10903
|
+
[vars$h.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
|
10666
10904
|
|
10667
10905
|
_readonly: {
|
10668
|
-
[vars$
|
10906
|
+
[vars$h.inputDropdownButtonCursor]: 'default',
|
10669
10907
|
},
|
10670
10908
|
|
10671
10909
|
// Overlay theme exposed via the component:
|
10672
|
-
[vars$
|
10673
|
-
[vars$
|
10674
|
-
[vars$
|
10675
|
-
[vars$
|
10676
|
-
[vars$
|
10677
|
-
[vars$
|
10910
|
+
[vars$h.overlayFontSize]: refs.fontSize,
|
10911
|
+
[vars$h.overlayFontFamily]: refs.fontFamily,
|
10912
|
+
[vars$h.overlayCursor]: 'pointer',
|
10913
|
+
[vars$h.overlayItemBoxShadow]: 'none',
|
10914
|
+
[vars$h.overlayBackground]: refs.backgroundColor,
|
10915
|
+
[vars$h.overlayTextColor]: refs.valueTextColor,
|
10678
10916
|
|
10679
10917
|
// Overlay direct theme:
|
10680
|
-
[vars$
|
10681
|
-
[vars$
|
10918
|
+
[vars$h.overlay.minHeight]: '400px',
|
10919
|
+
[vars$h.overlay.margin]: '0',
|
10682
10920
|
};
|
10683
10921
|
|
10684
10922
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
10685
10923
|
__proto__: null,
|
10686
10924
|
comboBox: comboBox,
|
10687
10925
|
default: comboBox,
|
10688
|
-
vars: vars$
|
10926
|
+
vars: vars$h
|
10689
10927
|
});
|
10690
10928
|
|
10691
|
-
const vars$
|
10929
|
+
const vars$g = ImageClass.cssVarList;
|
10692
10930
|
|
10693
10931
|
const image = {};
|
10694
10932
|
|
10695
10933
|
var image$1 = /*#__PURE__*/Object.freeze({
|
10696
10934
|
__proto__: null,
|
10697
10935
|
default: image,
|
10698
|
-
vars: vars$
|
10936
|
+
vars: vars$g
|
10699
10937
|
});
|
10700
10938
|
|
10701
|
-
const vars$
|
10939
|
+
const vars$f = PhoneFieldClass.cssVarList;
|
10702
10940
|
|
10703
10941
|
const phoneField = {
|
10704
|
-
[vars$
|
10942
|
+
[vars$f.hostWidth]: refs.width,
|
10943
|
+
[vars$f.hostDirection]: refs.direction,
|
10944
|
+
[vars$f.fontSize]: refs.fontSize,
|
10945
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
10946
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
10947
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
10948
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
10949
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
10950
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10951
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
10952
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
10953
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
10954
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
10955
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
10956
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
10957
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
10958
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
10959
|
+
[vars$f.phoneInputWidth]: refs.minWidth,
|
10960
|
+
[vars$f.countryCodeInputWidth]: '5em',
|
10961
|
+
[vars$f.countryCodeDropdownWidth]: '20em',
|
10962
|
+
|
10963
|
+
// '@overlay': {
|
10964
|
+
// overlayItemBackgroundColor: 'red'
|
10965
|
+
// }
|
10966
|
+
};
|
10967
|
+
|
10968
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
10969
|
+
__proto__: null,
|
10970
|
+
default: phoneField,
|
10971
|
+
vars: vars$f
|
10972
|
+
});
|
10973
|
+
|
10974
|
+
const vars$e = PhoneFieldInputBoxClass.cssVarList;
|
10975
|
+
|
10976
|
+
const phoneInputBoxField = {
|
10977
|
+
[vars$e.hostWidth]: '16em',
|
10978
|
+
[vars$e.hostMinWidth]: refs.minWidth,
|
10705
10979
|
[vars$e.hostDirection]: refs.direction,
|
10706
10980
|
[vars$e.fontSize]: refs.fontSize,
|
10707
10981
|
[vars$e.fontFamily]: refs.fontFamily,
|
@@ -10718,181 +10992,145 @@ const phoneField = {
|
|
10718
10992
|
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
10719
10993
|
[vars$e.inputOutlineColor]: refs.outlineColor,
|
10720
10994
|
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
10721
|
-
|
10722
|
-
|
10723
|
-
|
10724
|
-
|
10725
|
-
// '@overlay': {
|
10726
|
-
// overlayItemBackgroundColor: 'red'
|
10727
|
-
// }
|
10995
|
+
_fullWidth: {
|
10996
|
+
[vars$e.hostWidth]: refs.width,
|
10997
|
+
},
|
10728
10998
|
};
|
10729
10999
|
|
10730
|
-
var
|
11000
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
10731
11001
|
__proto__: null,
|
10732
|
-
default:
|
11002
|
+
default: phoneInputBoxField,
|
10733
11003
|
vars: vars$e
|
10734
11004
|
});
|
10735
11005
|
|
10736
|
-
const vars$d =
|
11006
|
+
const vars$d = NewPasswordClass.cssVarList;
|
10737
11007
|
|
10738
|
-
const
|
10739
|
-
[vars$d.hostWidth]:
|
11008
|
+
const newPassword = {
|
11009
|
+
[vars$d.hostWidth]: refs.width,
|
10740
11010
|
[vars$d.hostMinWidth]: refs.minWidth,
|
10741
11011
|
[vars$d.hostDirection]: refs.direction,
|
10742
11012
|
[vars$d.fontSize]: refs.fontSize,
|
10743
11013
|
[vars$d.fontFamily]: refs.fontFamily,
|
10744
|
-
[vars$d.
|
10745
|
-
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
11014
|
+
[vars$d.spaceBetweenInputs]: '1em',
|
10746
11015
|
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
10747
|
-
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
10748
|
-
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10749
|
-
[vars$d.inputBorderStyle]: refs.borderStyle,
|
10750
|
-
[vars$d.inputBorderWidth]: refs.borderWidth,
|
10751
|
-
[vars$d.inputBorderColor]: refs.borderColor,
|
10752
|
-
[vars$d.inputBorderRadius]: refs.borderRadius,
|
10753
|
-
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
10754
|
-
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
10755
|
-
[vars$d.inputOutlineColor]: refs.outlineColor,
|
10756
|
-
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
10757
|
-
_fullWidth: {
|
10758
|
-
[vars$d.hostWidth]: refs.width,
|
10759
|
-
},
|
10760
|
-
};
|
10761
|
-
|
10762
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
10763
|
-
__proto__: null,
|
10764
|
-
default: phoneInputBoxField,
|
10765
|
-
vars: vars$d
|
10766
|
-
});
|
10767
|
-
|
10768
|
-
const vars$c = NewPasswordClass.cssVarList;
|
10769
|
-
|
10770
|
-
const newPassword = {
|
10771
|
-
[vars$c.hostWidth]: refs.width,
|
10772
|
-
[vars$c.hostMinWidth]: refs.minWidth,
|
10773
|
-
[vars$c.hostDirection]: refs.direction,
|
10774
|
-
[vars$c.fontSize]: refs.fontSize,
|
10775
|
-
[vars$c.fontFamily]: refs.fontFamily,
|
10776
|
-
[vars$c.spaceBetweenInputs]: '1em',
|
10777
|
-
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
10778
11016
|
|
10779
11017
|
_required: {
|
10780
11018
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
10781
11019
|
// That's why we fake the required indicator on each input.
|
10782
11020
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
10783
|
-
[vars$
|
11021
|
+
[vars$d.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
10784
11022
|
},
|
10785
11023
|
};
|
10786
11024
|
|
10787
11025
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
10788
11026
|
__proto__: null,
|
10789
11027
|
default: newPassword,
|
10790
|
-
vars: vars$
|
11028
|
+
vars: vars$d
|
10791
11029
|
});
|
10792
11030
|
|
10793
|
-
const vars$
|
11031
|
+
const vars$c = UploadFileClass.cssVarList;
|
10794
11032
|
|
10795
11033
|
const uploadFile = {
|
10796
|
-
[vars$
|
10797
|
-
[vars$
|
10798
|
-
[vars$
|
11034
|
+
[vars$c.hostDirection]: refs.direction,
|
11035
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
11036
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
10799
11037
|
|
10800
|
-
[vars$
|
11038
|
+
[vars$c.iconSize]: '2em',
|
10801
11039
|
|
10802
|
-
[vars$
|
10803
|
-
[vars$
|
11040
|
+
[vars$c.hostPadding]: '0.75em',
|
11041
|
+
[vars$c.gap]: '0.5em',
|
10804
11042
|
|
10805
|
-
[vars$
|
10806
|
-
[vars$
|
10807
|
-
[vars$
|
11043
|
+
[vars$c.fontSize]: '16px',
|
11044
|
+
[vars$c.titleFontWeight]: '500',
|
11045
|
+
[vars$c.lineHeight]: '1em',
|
10808
11046
|
|
10809
|
-
[vars$
|
10810
|
-
[vars$
|
10811
|
-
[vars$
|
10812
|
-
[vars$
|
11047
|
+
[vars$c.borderWidth]: refs.borderWidth,
|
11048
|
+
[vars$c.borderColor]: refs.borderColor,
|
11049
|
+
[vars$c.borderRadius]: refs.borderRadius,
|
11050
|
+
[vars$c.borderStyle]: 'dashed',
|
10813
11051
|
|
10814
11052
|
_required: {
|
10815
|
-
[vars$
|
11053
|
+
[vars$c.requiredIndicator]: refs.requiredIndicator,
|
10816
11054
|
},
|
10817
11055
|
|
10818
11056
|
size: {
|
10819
11057
|
xs: {
|
10820
|
-
[vars$
|
10821
|
-
[vars$
|
10822
|
-
[vars$
|
10823
|
-
[vars$
|
10824
|
-
[vars$
|
11058
|
+
[vars$c.hostHeight]: '196px',
|
11059
|
+
[vars$c.hostWidth]: '200px',
|
11060
|
+
[vars$c.titleFontSize]: '0.875em',
|
11061
|
+
[vars$c.descriptionFontSize]: '0.875em',
|
11062
|
+
[vars$c.lineHeight]: '1.25em',
|
10825
11063
|
},
|
10826
11064
|
sm: {
|
10827
|
-
[vars$
|
10828
|
-
[vars$
|
10829
|
-
[vars$
|
10830
|
-
[vars$
|
10831
|
-
[vars$
|
11065
|
+
[vars$c.hostHeight]: '216px',
|
11066
|
+
[vars$c.hostWidth]: '230px',
|
11067
|
+
[vars$c.titleFontSize]: '1em',
|
11068
|
+
[vars$c.descriptionFontSize]: '0.875em',
|
11069
|
+
[vars$c.lineHeight]: '1.25em',
|
10832
11070
|
},
|
10833
11071
|
md: {
|
10834
|
-
[vars$
|
10835
|
-
[vars$
|
10836
|
-
[vars$
|
10837
|
-
[vars$
|
10838
|
-
[vars$
|
11072
|
+
[vars$c.hostHeight]: '256px',
|
11073
|
+
[vars$c.hostWidth]: '312px',
|
11074
|
+
[vars$c.titleFontSize]: '1.125em',
|
11075
|
+
[vars$c.descriptionFontSize]: '1em',
|
11076
|
+
[vars$c.lineHeight]: '1.5em',
|
10839
11077
|
},
|
10840
11078
|
lg: {
|
10841
|
-
[vars$
|
10842
|
-
[vars$
|
10843
|
-
[vars$
|
10844
|
-
[vars$
|
10845
|
-
[vars$
|
11079
|
+
[vars$c.hostHeight]: '280px',
|
11080
|
+
[vars$c.hostWidth]: '336px',
|
11081
|
+
[vars$c.titleFontSize]: '1.125em',
|
11082
|
+
[vars$c.descriptionFontSize]: '1.125em',
|
11083
|
+
[vars$c.lineHeight]: '1.75em',
|
10846
11084
|
},
|
10847
11085
|
},
|
10848
11086
|
|
10849
11087
|
_fullWidth: {
|
10850
|
-
[vars$
|
11088
|
+
[vars$c.hostWidth]: refs.width,
|
10851
11089
|
},
|
10852
11090
|
};
|
10853
11091
|
|
10854
11092
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
10855
11093
|
__proto__: null,
|
10856
11094
|
default: uploadFile,
|
10857
|
-
vars: vars$
|
11095
|
+
vars: vars$c
|
10858
11096
|
});
|
10859
11097
|
|
10860
|
-
const globalRefs$
|
11098
|
+
const globalRefs$9 = getThemeRefs(globals);
|
10861
11099
|
|
10862
|
-
const vars$
|
11100
|
+
const vars$b = ButtonSelectionGroupItemClass.cssVarList;
|
10863
11101
|
|
10864
11102
|
const buttonSelectionGroupItem = {
|
10865
|
-
[vars$
|
10866
|
-
[vars$
|
10867
|
-
[vars$
|
10868
|
-
[vars$
|
10869
|
-
[vars$
|
10870
|
-
[vars$
|
10871
|
-
[vars$
|
10872
|
-
[vars$
|
11103
|
+
[vars$b.hostDirection]: 'inherit',
|
11104
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.main,
|
11105
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
11106
|
+
[vars$b.borderColor]: globalRefs$9.colors.surface.light,
|
11107
|
+
[vars$b.borderStyle]: 'solid',
|
11108
|
+
[vars$b.borderRadius]: globalRefs$9.radius.sm,
|
11109
|
+
[vars$b.outlineColor]: 'transparent',
|
11110
|
+
[vars$b.borderWidth]: globalRefs$9.border.xs,
|
10873
11111
|
|
10874
11112
|
_hover: {
|
10875
|
-
[vars$
|
11113
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.highlight,
|
10876
11114
|
},
|
10877
11115
|
|
10878
11116
|
_focused: {
|
10879
|
-
[vars$
|
11117
|
+
[vars$b.outlineColor]: globalRefs$9.colors.surface.light,
|
10880
11118
|
},
|
10881
11119
|
|
10882
11120
|
_selected: {
|
10883
|
-
[vars$
|
10884
|
-
[vars$
|
10885
|
-
[vars$
|
11121
|
+
[vars$b.borderColor]: globalRefs$9.colors.surface.contrast,
|
11122
|
+
[vars$b.backgroundColor]: globalRefs$9.colors.surface.contrast,
|
11123
|
+
[vars$b.labelTextColor]: globalRefs$9.colors.surface.main,
|
10886
11124
|
},
|
10887
11125
|
};
|
10888
11126
|
|
10889
11127
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
10890
11128
|
__proto__: null,
|
10891
11129
|
default: buttonSelectionGroupItem,
|
10892
|
-
vars: vars$
|
11130
|
+
vars: vars$b
|
10893
11131
|
});
|
10894
11132
|
|
10895
|
-
const globalRefs$
|
11133
|
+
const globalRefs$8 = getThemeRefs(globals);
|
10896
11134
|
|
10897
11135
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
10898
11136
|
[vars.hostDirection]: refs.direction,
|
@@ -10900,84 +11138,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
10900
11138
|
[vars.labelTextColor]: refs.labelTextColor,
|
10901
11139
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
10902
11140
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
10903
|
-
[vars.itemsSpacing]: globalRefs$
|
11141
|
+
[vars.itemsSpacing]: globalRefs$8.spacing.sm,
|
10904
11142
|
[vars.hostWidth]: refs.width,
|
10905
11143
|
});
|
10906
11144
|
|
10907
|
-
const vars$
|
11145
|
+
const vars$a = ButtonSelectionGroupClass.cssVarList;
|
10908
11146
|
|
10909
11147
|
const buttonSelectionGroup = {
|
10910
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11148
|
+
...createBaseButtonSelectionGroupMappings(vars$a),
|
10911
11149
|
};
|
10912
11150
|
|
10913
11151
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10914
11152
|
__proto__: null,
|
10915
11153
|
default: buttonSelectionGroup,
|
10916
|
-
vars: vars$
|
11154
|
+
vars: vars$a
|
10917
11155
|
});
|
10918
11156
|
|
10919
|
-
const vars$
|
11157
|
+
const vars$9 = ButtonMultiSelectionGroupClass.cssVarList;
|
10920
11158
|
|
10921
11159
|
const buttonMultiSelectionGroup = {
|
10922
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11160
|
+
...createBaseButtonSelectionGroupMappings(vars$9),
|
10923
11161
|
};
|
10924
11162
|
|
10925
11163
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10926
11164
|
__proto__: null,
|
10927
11165
|
default: buttonMultiSelectionGroup,
|
10928
|
-
vars: vars$
|
11166
|
+
vars: vars$9
|
10929
11167
|
});
|
10930
11168
|
|
10931
|
-
const globalRefs$
|
11169
|
+
const globalRefs$7 = getThemeRefs(globals);
|
10932
11170
|
|
10933
11171
|
const compVars$1 = ModalClass.cssVarList;
|
10934
11172
|
|
10935
11173
|
const modal = {
|
10936
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
10937
|
-
[compVars$1.overlayShadow]: globalRefs$
|
11174
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
|
11175
|
+
[compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
|
10938
11176
|
[compVars$1.overlayWidth]: '540px',
|
10939
11177
|
};
|
10940
11178
|
|
10941
|
-
const vars$
|
11179
|
+
const vars$8 = {
|
10942
11180
|
...compVars$1,
|
10943
11181
|
};
|
10944
11182
|
|
10945
11183
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
10946
11184
|
__proto__: null,
|
10947
11185
|
default: modal,
|
10948
|
-
vars: vars$
|
11186
|
+
vars: vars$8
|
10949
11187
|
});
|
10950
11188
|
|
10951
|
-
const globalRefs$
|
10952
|
-
const vars$
|
11189
|
+
const globalRefs$6 = getThemeRefs(globals);
|
11190
|
+
const vars$7 = GridClass.cssVarList;
|
10953
11191
|
|
10954
11192
|
const grid = {
|
10955
|
-
[vars$
|
10956
|
-
[vars$
|
10957
|
-
[vars$
|
10958
|
-
[vars$
|
10959
|
-
[vars$
|
11193
|
+
[vars$7.hostWidth]: '100%',
|
11194
|
+
[vars$7.hostHeight]: '100%',
|
11195
|
+
[vars$7.hostMinHeight]: '400px',
|
11196
|
+
[vars$7.fontWeight]: '400',
|
11197
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.main,
|
10960
11198
|
|
10961
|
-
[vars$
|
10962
|
-
[vars$
|
11199
|
+
[vars$7.fontSize]: refs.fontSize,
|
11200
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
10963
11201
|
|
10964
|
-
[vars$
|
10965
|
-
[vars$
|
10966
|
-
[vars$
|
11202
|
+
[vars$7.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
|
11203
|
+
[vars$7.activeSortIndicator]: globalRefs$6.colors.surface.dark,
|
11204
|
+
[vars$7.resizeHandleColor]: globalRefs$6.colors.surface.light,
|
10967
11205
|
|
10968
|
-
[vars$
|
10969
|
-
[vars$
|
10970
|
-
[vars$
|
10971
|
-
[vars$
|
11206
|
+
[vars$7.borderWidth]: refs.borderWidth,
|
11207
|
+
[vars$7.borderStyle]: refs.borderStyle,
|
11208
|
+
[vars$7.borderRadius]: refs.borderRadius,
|
11209
|
+
[vars$7.borderColor]: 'transparent',
|
10972
11210
|
|
10973
|
-
[vars$
|
10974
|
-
[vars$
|
11211
|
+
[vars$7.headerRowTextColor]: globalRefs$6.colors.surface.dark,
|
11212
|
+
[vars$7.separatorColor]: globalRefs$6.colors.surface.light,
|
10975
11213
|
|
10976
|
-
[vars$
|
10977
|
-
[vars$
|
11214
|
+
[vars$7.valueTextColor]: globalRefs$6.colors.surface.contrast,
|
11215
|
+
[vars$7.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
|
10978
11216
|
|
10979
11217
|
_bordered: {
|
10980
|
-
[vars$
|
11218
|
+
[vars$7.borderColor]: refs.borderColor,
|
10981
11219
|
},
|
10982
11220
|
};
|
10983
11221
|
|
@@ -10985,53 +11223,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
10985
11223
|
__proto__: null,
|
10986
11224
|
default: grid,
|
10987
11225
|
grid: grid,
|
10988
|
-
vars: vars$
|
11226
|
+
vars: vars$7
|
10989
11227
|
});
|
10990
11228
|
|
10991
|
-
const globalRefs$
|
10992
|
-
const vars$
|
11229
|
+
const globalRefs$5 = getThemeRefs(globals);
|
11230
|
+
const vars$6 = NotificationCardClass.cssVarList;
|
10993
11231
|
|
10994
11232
|
const shadowColor = '#00000020';
|
10995
11233
|
|
10996
11234
|
const notification = {
|
10997
|
-
[vars$
|
10998
|
-
[vars$
|
10999
|
-
[vars$
|
11000
|
-
[vars$
|
11001
|
-
[vars$
|
11002
|
-
[vars$
|
11003
|
-
[vars$
|
11004
|
-
[vars$
|
11005
|
-
[vars$
|
11235
|
+
[vars$6.hostMinWidth]: '415px',
|
11236
|
+
[vars$6.fontFamily]: globalRefs$5.fonts.font1.family,
|
11237
|
+
[vars$6.fontSize]: globalRefs$5.typography.body1.size,
|
11238
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
|
11239
|
+
[vars$6.textColor]: globalRefs$5.colors.surface.contrast,
|
11240
|
+
[vars$6.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
|
11241
|
+
[vars$6.verticalPadding]: '0.625em',
|
11242
|
+
[vars$6.horizontalPadding]: '1.5em',
|
11243
|
+
[vars$6.borderRadius]: globalRefs$5.radius.xs,
|
11006
11244
|
|
11007
11245
|
_bordered: {
|
11008
|
-
[vars$
|
11009
|
-
[vars$
|
11010
|
-
[vars$
|
11246
|
+
[vars$6.borderWidth]: globalRefs$5.border.sm,
|
11247
|
+
[vars$6.borderStyle]: 'solid',
|
11248
|
+
[vars$6.borderColor]: 'transparent',
|
11011
11249
|
},
|
11012
11250
|
|
11013
11251
|
size: {
|
11014
|
-
xs: { [vars$
|
11015
|
-
sm: { [vars$
|
11016
|
-
md: { [vars$
|
11017
|
-
lg: { [vars$
|
11252
|
+
xs: { [vars$6.fontSize]: '12px' },
|
11253
|
+
sm: { [vars$6.fontSize]: '14px' },
|
11254
|
+
md: { [vars$6.fontSize]: '16px' },
|
11255
|
+
lg: { [vars$6.fontSize]: '18px' },
|
11018
11256
|
},
|
11019
11257
|
|
11020
11258
|
mode: {
|
11021
11259
|
primary: {
|
11022
|
-
[vars$
|
11023
|
-
[vars$
|
11024
|
-
[vars$
|
11260
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.primary.main,
|
11261
|
+
[vars$6.textColor]: globalRefs$5.colors.primary.contrast,
|
11262
|
+
[vars$6.borderColor]: globalRefs$5.colors.primary.light,
|
11025
11263
|
},
|
11026
11264
|
success: {
|
11027
|
-
[vars$
|
11028
|
-
[vars$
|
11029
|
-
[vars$
|
11265
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.success.main,
|
11266
|
+
[vars$6.textColor]: globalRefs$5.colors.success.contrast,
|
11267
|
+
[vars$6.borderColor]: globalRefs$5.colors.success.light,
|
11030
11268
|
},
|
11031
11269
|
error: {
|
11032
|
-
[vars$
|
11033
|
-
[vars$
|
11034
|
-
[vars$
|
11270
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.error.main,
|
11271
|
+
[vars$6.textColor]: globalRefs$5.colors.error.contrast,
|
11272
|
+
[vars$6.borderColor]: globalRefs$5.colors.error.light,
|
11035
11273
|
},
|
11036
11274
|
},
|
11037
11275
|
};
|
@@ -11039,128 +11277,128 @@ const notification = {
|
|
11039
11277
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
11040
11278
|
__proto__: null,
|
11041
11279
|
default: notification,
|
11042
|
-
vars: vars$
|
11280
|
+
vars: vars$6
|
11043
11281
|
});
|
11044
11282
|
|
11045
|
-
const globalRefs$
|
11046
|
-
const vars$
|
11283
|
+
const globalRefs$4 = getThemeRefs(globals);
|
11284
|
+
const vars$5 = MultiSelectComboBoxClass.cssVarList;
|
11047
11285
|
|
11048
11286
|
const multiSelectComboBox = {
|
11049
|
-
[vars$
|
11050
|
-
[vars$
|
11051
|
-
[vars$
|
11052
|
-
[vars$
|
11053
|
-
[vars$
|
11054
|
-
[vars$
|
11055
|
-
[vars$
|
11056
|
-
[vars$
|
11057
|
-
[vars$
|
11058
|
-
[vars$
|
11059
|
-
[vars$
|
11060
|
-
[vars$
|
11061
|
-
[vars$
|
11062
|
-
[vars$
|
11063
|
-
[vars$
|
11064
|
-
[vars$
|
11065
|
-
[vars$
|
11066
|
-
[vars$
|
11067
|
-
[vars$
|
11068
|
-
[vars$
|
11069
|
-
[vars$
|
11070
|
-
[vars$
|
11071
|
-
[vars$
|
11072
|
-
[vars$
|
11073
|
-
[vars$
|
11074
|
-
[vars$
|
11075
|
-
[vars$
|
11076
|
-
[vars$
|
11077
|
-
[vars$
|
11078
|
-
[vars$
|
11287
|
+
[vars$5.hostWidth]: refs.width,
|
11288
|
+
[vars$5.hostDirection]: refs.direction,
|
11289
|
+
[vars$5.fontSize]: refs.fontSize,
|
11290
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
11291
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
11292
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
11293
|
+
[vars$5.inputBorderColor]: refs.borderColor,
|
11294
|
+
[vars$5.inputBorderWidth]: refs.borderWidth,
|
11295
|
+
[vars$5.inputBorderStyle]: refs.borderStyle,
|
11296
|
+
[vars$5.inputBorderRadius]: refs.borderRadius,
|
11297
|
+
[vars$5.inputOutlineColor]: refs.outlineColor,
|
11298
|
+
[vars$5.inputOutlineOffset]: refs.outlineOffset,
|
11299
|
+
[vars$5.inputOutlineWidth]: refs.outlineWidth,
|
11300
|
+
[vars$5.inputOutlineStyle]: refs.outlineStyle,
|
11301
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
11302
|
+
[vars$5.inputValueTextColor]: refs.valueTextColor,
|
11303
|
+
[vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11304
|
+
[vars$5.inputBackgroundColor]: refs.backgroundColor,
|
11305
|
+
[vars$5.inputHorizontalPadding]: refs.horizontalPadding,
|
11306
|
+
[vars$5.inputVerticalPadding]: refs.verticalPadding,
|
11307
|
+
[vars$5.inputHeight]: refs.inputHeight,
|
11308
|
+
[vars$5.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
|
11309
|
+
[vars$5.inputDropdownButtonCursor]: 'pointer',
|
11310
|
+
[vars$5.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11311
|
+
[vars$5.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
11312
|
+
[vars$5.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
|
11313
|
+
[vars$5.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
|
11314
|
+
[vars$5.chipFontSize]: refs.chipFontSize,
|
11315
|
+
[vars$5.chipTextColor]: globalRefs$4.colors.surface.contrast,
|
11316
|
+
[vars$5.chipBackgroundColor]: globalRefs$4.colors.surface.light,
|
11079
11317
|
|
11080
11318
|
_readonly: {
|
11081
|
-
[vars$
|
11319
|
+
[vars$5.inputDropdownButtonCursor]: 'default',
|
11082
11320
|
},
|
11083
11321
|
|
11084
11322
|
// Overlay theme exposed via the component:
|
11085
|
-
[vars$
|
11086
|
-
[vars$
|
11087
|
-
[vars$
|
11088
|
-
[vars$
|
11089
|
-
[vars$
|
11090
|
-
[vars$
|
11323
|
+
[vars$5.overlayFontSize]: refs.fontSize,
|
11324
|
+
[vars$5.overlayFontFamily]: refs.fontFamily,
|
11325
|
+
[vars$5.overlayCursor]: 'pointer',
|
11326
|
+
[vars$5.overlayItemBoxShadow]: 'none',
|
11327
|
+
[vars$5.overlayBackground]: refs.backgroundColor,
|
11328
|
+
[vars$5.overlayTextColor]: refs.valueTextColor,
|
11091
11329
|
|
11092
11330
|
// Overlay direct theme:
|
11093
|
-
[vars$
|
11094
|
-
[vars$
|
11331
|
+
[vars$5.overlay.minHeight]: '400px',
|
11332
|
+
[vars$5.overlay.margin]: '0',
|
11095
11333
|
};
|
11096
11334
|
|
11097
11335
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
11098
11336
|
__proto__: null,
|
11099
11337
|
default: multiSelectComboBox,
|
11100
11338
|
multiSelectComboBox: multiSelectComboBox,
|
11101
|
-
vars: vars$
|
11339
|
+
vars: vars$5
|
11102
11340
|
});
|
11103
11341
|
|
11104
|
-
const globalRefs$
|
11105
|
-
const vars$
|
11342
|
+
const globalRefs$3 = getThemeRefs(globals);
|
11343
|
+
const vars$4 = BadgeClass.cssVarList;
|
11106
11344
|
|
11107
11345
|
const badge = {
|
11108
|
-
[vars$
|
11109
|
-
[vars$
|
11346
|
+
[vars$4.hostWidth]: 'fit-content',
|
11347
|
+
[vars$4.hostDirection]: globalRefs$3.direction,
|
11110
11348
|
|
11111
|
-
[vars$
|
11349
|
+
[vars$4.textAlign]: 'center',
|
11112
11350
|
|
11113
|
-
[vars$
|
11114
|
-
[vars$
|
11351
|
+
[vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
|
11352
|
+
[vars$4.fontWeight]: '400',
|
11115
11353
|
|
11116
|
-
[vars$
|
11117
|
-
[vars$
|
11354
|
+
[vars$4.verticalPadding]: '0.25em',
|
11355
|
+
[vars$4.horizontalPadding]: '0.5em',
|
11118
11356
|
|
11119
|
-
[vars$
|
11120
|
-
[vars$
|
11121
|
-
[vars$
|
11122
|
-
[vars$
|
11357
|
+
[vars$4.borderWidth]: globalRefs$3.border.xs,
|
11358
|
+
[vars$4.borderRadius]: globalRefs$3.radius.xs,
|
11359
|
+
[vars$4.borderColor]: 'transparent',
|
11360
|
+
[vars$4.borderStyle]: 'solid',
|
11123
11361
|
|
11124
11362
|
_fullWidth: {
|
11125
|
-
[vars$
|
11363
|
+
[vars$4.hostWidth]: '100%',
|
11126
11364
|
},
|
11127
11365
|
|
11128
11366
|
size: {
|
11129
|
-
xs: { [vars$
|
11130
|
-
sm: { [vars$
|
11131
|
-
md: { [vars$
|
11132
|
-
lg: { [vars$
|
11367
|
+
xs: { [vars$4.fontSize]: '12px' },
|
11368
|
+
sm: { [vars$4.fontSize]: '14px' },
|
11369
|
+
md: { [vars$4.fontSize]: '16px' },
|
11370
|
+
lg: { [vars$4.fontSize]: '18px' },
|
11133
11371
|
},
|
11134
11372
|
|
11135
11373
|
mode: {
|
11136
11374
|
default: {
|
11137
|
-
[vars$
|
11375
|
+
[vars$4.textColor]: globalRefs$3.colors.surface.dark,
|
11138
11376
|
_bordered: {
|
11139
|
-
[vars$
|
11377
|
+
[vars$4.borderColor]: globalRefs$3.colors.surface.light,
|
11140
11378
|
},
|
11141
11379
|
},
|
11142
11380
|
primary: {
|
11143
|
-
[vars$
|
11381
|
+
[vars$4.textColor]: globalRefs$3.colors.primary.main,
|
11144
11382
|
_bordered: {
|
11145
|
-
[vars$
|
11383
|
+
[vars$4.borderColor]: globalRefs$3.colors.primary.light,
|
11146
11384
|
},
|
11147
11385
|
},
|
11148
11386
|
secondary: {
|
11149
|
-
[vars$
|
11387
|
+
[vars$4.textColor]: globalRefs$3.colors.secondary.main,
|
11150
11388
|
_bordered: {
|
11151
|
-
[vars$
|
11389
|
+
[vars$4.borderColor]: globalRefs$3.colors.secondary.light,
|
11152
11390
|
},
|
11153
11391
|
},
|
11154
11392
|
error: {
|
11155
|
-
[vars$
|
11393
|
+
[vars$4.textColor]: globalRefs$3.colors.error.main,
|
11156
11394
|
_bordered: {
|
11157
|
-
[vars$
|
11395
|
+
[vars$4.borderColor]: globalRefs$3.colors.error.light,
|
11158
11396
|
},
|
11159
11397
|
},
|
11160
11398
|
success: {
|
11161
|
-
[vars$
|
11399
|
+
[vars$4.textColor]: globalRefs$3.colors.success.main,
|
11162
11400
|
_bordered: {
|
11163
|
-
[vars$
|
11401
|
+
[vars$4.borderColor]: globalRefs$3.colors.success.light,
|
11164
11402
|
},
|
11165
11403
|
},
|
11166
11404
|
},
|
@@ -11169,19 +11407,23 @@ const badge = {
|
|
11169
11407
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
11170
11408
|
__proto__: null,
|
11171
11409
|
default: badge,
|
11172
|
-
vars: vars$
|
11410
|
+
vars: vars$4
|
11173
11411
|
});
|
11174
11412
|
|
11175
|
-
const globalRefs$
|
11413
|
+
const globalRefs$2 = getThemeRefs(globals);
|
11176
11414
|
const compVars = AvatarClass.cssVarList;
|
11177
11415
|
|
11178
11416
|
const avatar = {
|
11179
|
-
[compVars.hostDirection]: globalRefs$
|
11180
|
-
[compVars.editableIconColor]: globalRefs$
|
11181
|
-
[compVars.editableBorderColor]: globalRefs$
|
11182
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
11183
|
-
[compVars.avatarTextColor]: globalRefs$
|
11184
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
11417
|
+
[compVars.hostDirection]: globalRefs$2.direction,
|
11418
|
+
[compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
|
11419
|
+
[compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
|
11420
|
+
[compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
|
11421
|
+
[compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
|
11422
|
+
[compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
|
11423
|
+
|
11424
|
+
_editable: {
|
11425
|
+
[compVars.cursor]: 'pointer',
|
11426
|
+
},
|
11185
11427
|
|
11186
11428
|
size: {
|
11187
11429
|
xs: {
|
@@ -11203,41 +11445,62 @@ const avatar = {
|
|
11203
11445
|
},
|
11204
11446
|
};
|
11205
11447
|
|
11206
|
-
const vars$
|
11448
|
+
const vars$3 = {
|
11207
11449
|
...compVars,
|
11208
11450
|
};
|
11209
11451
|
|
11210
11452
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
11211
11453
|
__proto__: null,
|
11212
11454
|
default: avatar,
|
11213
|
-
vars: vars$
|
11455
|
+
vars: vars$3
|
11214
11456
|
});
|
11215
11457
|
|
11216
|
-
const globalRefs = getThemeRefs(globals);
|
11458
|
+
const globalRefs$1 = getThemeRefs(globals);
|
11217
11459
|
|
11218
|
-
const vars$
|
11460
|
+
const vars$2 = MappingsFieldClass.cssVarList;
|
11219
11461
|
|
11220
11462
|
const mappingsField = {
|
11221
|
-
[vars$
|
11222
|
-
[vars$
|
11223
|
-
[vars$
|
11224
|
-
[vars$
|
11225
|
-
[vars$
|
11226
|
-
[vars$
|
11227
|
-
[vars$
|
11463
|
+
[vars$2.hostWidth]: refs.width,
|
11464
|
+
[vars$2.hostDirection]: refs.direction,
|
11465
|
+
[vars$2.fontSize]: refs.fontSize,
|
11466
|
+
[vars$2.fontFamily]: refs.fontFamily,
|
11467
|
+
[vars$2.separatorFontSize]: '14px',
|
11468
|
+
[vars$2.labelTextColor]: refs.labelTextColor,
|
11469
|
+
[vars$2.itemMarginBottom]: '1em',
|
11228
11470
|
// To be positioned correctly, the min width has to match the text field min width
|
11229
|
-
[vars$
|
11471
|
+
[vars$2.valueLabelMinWidth]: refs.minWidth,
|
11230
11472
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11231
|
-
[vars$
|
11232
|
-
[vars$
|
11233
|
-
[vars$
|
11234
|
-
[vars$
|
11473
|
+
[vars$2.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
|
11474
|
+
[vars$2.labelsMarginBottom]: `calc(${globalRefs$1.typography.body2.size} / 2)`,
|
11475
|
+
[vars$2.separatorWidth]: '70px',
|
11476
|
+
[vars$2.removeButtonWidth]: '60px',
|
11235
11477
|
};
|
11236
11478
|
|
11237
11479
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
11238
11480
|
__proto__: null,
|
11239
11481
|
default: mappingsField,
|
11240
11482
|
mappingsField: mappingsField,
|
11483
|
+
vars: vars$2
|
11484
|
+
});
|
11485
|
+
|
11486
|
+
const globalRefs = getThemeRefs(globals);
|
11487
|
+
const vars$1 = UserAttributeClass.cssVarList;
|
11488
|
+
|
11489
|
+
const userAttribute = {
|
11490
|
+
[vars$1.hostDirection]: globalRefs.direction,
|
11491
|
+
[vars$1.labelTextWidth]: '150px',
|
11492
|
+
[vars$1.valueTextWidth]: '200px',
|
11493
|
+
[vars$1.badgeMaxWidth]: '85px',
|
11494
|
+
[vars$1.itemsGap]: '16px',
|
11495
|
+
[vars$1.hostMinWidth]: '530px',
|
11496
|
+
_fullWidth: {
|
11497
|
+
[vars$1.hostWidth]: '100%',
|
11498
|
+
},
|
11499
|
+
};
|
11500
|
+
|
11501
|
+
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
11502
|
+
__proto__: null,
|
11503
|
+
default: userAttribute,
|
11241
11504
|
vars: vars$1
|
11242
11505
|
});
|
11243
11506
|
|
@@ -11277,6 +11540,7 @@ const components = {
|
|
11277
11540
|
badge: badge$1,
|
11278
11541
|
avatar: avatar$1,
|
11279
11542
|
mappingsField: mappingsField$1,
|
11543
|
+
userAttribute: userAttribute$1,
|
11280
11544
|
};
|
11281
11545
|
|
11282
11546
|
const theme = Object.keys(components).reduce(
|
@@ -11289,7 +11553,7 @@ const vars = Object.keys(components).reduce(
|
|
11289
11553
|
);
|
11290
11554
|
|
11291
11555
|
const defaultTheme = { globals, components: theme };
|
11292
|
-
const themeVars = { globals: vars$
|
11556
|
+
const themeVars = { globals: vars$B, components: vars };
|
11293
11557
|
|
11294
11558
|
const colors = {
|
11295
11559
|
surface: {
|
@@ -11335,5 +11599,5 @@ const darkTheme = merge({}, defaultTheme, {
|
|
11335
11599
|
},
|
11336
11600
|
});
|
11337
11601
|
|
11338
|
-
export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11602
|
+
export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11339
11603
|
//# sourceMappingURL=index.esm.js.map
|