@descope/web-components-ui 1.0.290 → 1.0.292
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1336 -912
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +1565 -967
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-policy-validation-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPasswordClass.js +30 -2
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +51 -3
- package/src/components/descope-new-password/index.js +1 -0
- package/src/components/descope-policy-validation/PolicyValidationClass.js +220 -0
- package/src/components/descope-policy-validation/helpers.js +2 -0
- package/src/components/descope-policy-validation/index.js +5 -0
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +14 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +2 -2
- package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js +110 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/SamlGroupMappingsInternal.js +136 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js +3 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/index.js +10 -0
- package/src/index.cjs.js +2 -0
- package/src/index.d.ts +2 -0
- package/src/index.js +2 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/inputWrapper.js +3 -1
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/newPassword.js +5 -0
- package/src/theme/components/policyValidation.js +29 -0
- package/src/theme/components/samlGroupMappings.js +13 -0
package/dist/index.esm.js
CHANGED
@@ -971,6 +971,7 @@ const proxyInputMixin =
|
|
971
971
|
// allows us to set the event that should trigger validation
|
972
972
|
// it can be either a string or an array of strings (for multiple events)
|
973
973
|
inputEvent = 'input',
|
974
|
+
triggerValidationEvents = [],
|
974
975
|
// Proxies all validations from the parent component to the input element
|
975
976
|
proxyParentValidation = false,
|
976
977
|
}) =>
|
@@ -1059,6 +1060,12 @@ const proxyInputMixin =
|
|
1059
1060
|
}
|
1060
1061
|
};
|
1061
1062
|
|
1063
|
+
triggerValidationEvents.forEach((e) => {
|
1064
|
+
this.baseElement?.addEventListener(e, () => {
|
1065
|
+
this.inputElement?.setCustomValidity('');
|
1066
|
+
});
|
1067
|
+
});
|
1068
|
+
|
1062
1069
|
// on some cases the base element is not ready so the inputElement is empty
|
1063
1070
|
// we are deferring this section to make sure the base element is ready
|
1064
1071
|
setTimeout(() => {
|
@@ -1347,7 +1354,7 @@ const clickableMixin = (superclass) =>
|
|
1347
1354
|
}
|
1348
1355
|
};
|
1349
1356
|
|
1350
|
-
const componentName$
|
1357
|
+
const componentName$Q = getComponentName('button');
|
1351
1358
|
|
1352
1359
|
const resetStyles = `
|
1353
1360
|
:host {
|
@@ -1385,7 +1392,7 @@ const iconStyles = `
|
|
1385
1392
|
|
1386
1393
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1387
1394
|
|
1388
|
-
const { host: host$
|
1395
|
+
const { host: host$m, label: label$a } = {
|
1389
1396
|
host: { selector: () => ':host' },
|
1390
1397
|
label: { selector: '::part(label)' },
|
1391
1398
|
};
|
@@ -1397,7 +1404,7 @@ const ButtonClass = compose(
|
|
1397
1404
|
mappings: {
|
1398
1405
|
hostWidth: { property: 'width' },
|
1399
1406
|
hostHeight: { property: 'height' },
|
1400
|
-
hostDirection: { ...host$
|
1407
|
+
hostDirection: { ...host$m, property: 'direction' },
|
1401
1408
|
fontSize: {},
|
1402
1409
|
fontFamily: {},
|
1403
1410
|
|
@@ -1449,7 +1456,7 @@ const ButtonClass = compose(
|
|
1449
1456
|
}
|
1450
1457
|
`,
|
1451
1458
|
excludeAttrsSync: ['tabindex'],
|
1452
|
-
componentName: componentName$
|
1459
|
+
componentName: componentName$Q,
|
1453
1460
|
})
|
1454
1461
|
);
|
1455
1462
|
|
@@ -1486,7 +1493,7 @@ loadingIndicatorStyles = `
|
|
1486
1493
|
}
|
1487
1494
|
`;
|
1488
1495
|
|
1489
|
-
customElements.define(componentName$
|
1496
|
+
customElements.define(componentName$Q, ButtonClass);
|
1490
1497
|
|
1491
1498
|
const createBaseInputClass = (...args) =>
|
1492
1499
|
compose(
|
@@ -1496,13 +1503,13 @@ const createBaseInputClass = (...args) =>
|
|
1496
1503
|
inputEventsDispatchingMixin
|
1497
1504
|
)(createBaseClass(...args));
|
1498
1505
|
|
1499
|
-
const componentName$
|
1506
|
+
const componentName$P = getComponentName('boolean-field-internal');
|
1500
1507
|
|
1501
1508
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1502
1509
|
|
1503
|
-
const BaseInputClass$
|
1510
|
+
const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$P, baseSelector: 'div' });
|
1504
1511
|
|
1505
|
-
class BooleanInputInternal extends BaseInputClass$
|
1512
|
+
class BooleanInputInternal extends BaseInputClass$8 {
|
1506
1513
|
static get observedAttributes() {
|
1507
1514
|
return ['readonly'];
|
1508
1515
|
}
|
@@ -1576,14 +1583,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1576
1583
|
|
1577
1584
|
const template = document.createElement('template');
|
1578
1585
|
template.innerHTML = `
|
1579
|
-
<${componentName$
|
1586
|
+
<${componentName$P}
|
1580
1587
|
tabindex="-1"
|
1581
1588
|
slot="input"
|
1582
|
-
></${componentName$
|
1589
|
+
></${componentName$P}>
|
1583
1590
|
`;
|
1584
1591
|
|
1585
1592
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1586
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1593
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$P);
|
1587
1594
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1588
1595
|
|
1589
1596
|
forwardAttrs(this, this.inputElement, {
|
@@ -1782,10 +1789,10 @@ descope-boolean-field-internal {
|
|
1782
1789
|
}
|
1783
1790
|
`;
|
1784
1791
|
|
1785
|
-
const componentName$
|
1792
|
+
const componentName$O = getComponentName('checkbox');
|
1786
1793
|
|
1787
1794
|
const {
|
1788
|
-
host: host$
|
1795
|
+
host: host$l,
|
1789
1796
|
component: component$1,
|
1790
1797
|
checkboxElement,
|
1791
1798
|
checkboxSurface,
|
@@ -1807,10 +1814,10 @@ const {
|
|
1807
1814
|
const CheckboxClass = compose(
|
1808
1815
|
createStyleMixin({
|
1809
1816
|
mappings: {
|
1810
|
-
hostWidth: { ...host$
|
1811
|
-
hostDirection: { ...host$
|
1817
|
+
hostWidth: { ...host$l, property: 'width' },
|
1818
|
+
hostDirection: { ...host$l, property: 'direction' },
|
1812
1819
|
|
1813
|
-
fontSize: [host$
|
1820
|
+
fontSize: [host$l, checkboxElement, checkboxLabel$1],
|
1814
1821
|
fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
|
1815
1822
|
|
1816
1823
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -1888,18 +1895,18 @@ const CheckboxClass = compose(
|
|
1888
1895
|
}
|
1889
1896
|
`,
|
1890
1897
|
excludeAttrsSync: ['label', 'tabindex'],
|
1891
|
-
componentName: componentName$
|
1898
|
+
componentName: componentName$O,
|
1892
1899
|
})
|
1893
1900
|
);
|
1894
1901
|
|
1895
|
-
customElements.define(componentName$
|
1902
|
+
customElements.define(componentName$P, BooleanInputInternal);
|
1896
1903
|
|
1897
|
-
customElements.define(componentName$
|
1904
|
+
customElements.define(componentName$O, CheckboxClass);
|
1898
1905
|
|
1899
|
-
const componentName$
|
1906
|
+
const componentName$N = getComponentName('switch-toggle');
|
1900
1907
|
|
1901
1908
|
const {
|
1902
|
-
host: host$
|
1909
|
+
host: host$k,
|
1903
1910
|
component,
|
1904
1911
|
checkboxElement: track,
|
1905
1912
|
checkboxSurface: knob,
|
@@ -1921,8 +1928,8 @@ const {
|
|
1921
1928
|
const SwitchToggleClass = compose(
|
1922
1929
|
createStyleMixin({
|
1923
1930
|
mappings: {
|
1924
|
-
hostWidth: { ...host$
|
1925
|
-
hostDirection: { ...host$
|
1931
|
+
hostWidth: { ...host$k, property: 'width' },
|
1932
|
+
hostDirection: { ...host$k, property: 'direction' },
|
1926
1933
|
|
1927
1934
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1928
1935
|
fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
|
@@ -2028,17 +2035,17 @@ const SwitchToggleClass = compose(
|
|
2028
2035
|
}
|
2029
2036
|
`,
|
2030
2037
|
excludeAttrsSync: ['label', 'tabindex'],
|
2031
|
-
componentName: componentName$
|
2038
|
+
componentName: componentName$N,
|
2032
2039
|
})
|
2033
2040
|
);
|
2034
2041
|
|
2035
|
-
customElements.define(componentName$
|
2042
|
+
customElements.define(componentName$N, SwitchToggleClass);
|
2036
2043
|
|
2037
|
-
const componentName$
|
2044
|
+
const componentName$M = getComponentName('loader-linear');
|
2038
2045
|
|
2039
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2046
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$M, baseSelector: ':host > div' }) {
|
2040
2047
|
static get componentName() {
|
2041
|
-
return componentName$
|
2048
|
+
return componentName$M;
|
2042
2049
|
}
|
2043
2050
|
|
2044
2051
|
constructor() {
|
@@ -2074,18 +2081,18 @@ const selectors$2 = {
|
|
2074
2081
|
host: { selector: () => ':host' },
|
2075
2082
|
};
|
2076
2083
|
|
2077
|
-
const { after: after$1, host: host$
|
2084
|
+
const { after: after$1, host: host$j } = selectors$2;
|
2078
2085
|
|
2079
2086
|
const LoaderLinearClass = compose(
|
2080
2087
|
createStyleMixin({
|
2081
2088
|
mappings: {
|
2082
2089
|
hostDisplay: {},
|
2083
|
-
hostWidth: { ...host$
|
2090
|
+
hostWidth: { ...host$j, property: 'width' },
|
2084
2091
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
2085
2092
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
2086
2093
|
verticalPadding: [
|
2087
|
-
{ ...host$
|
2088
|
-
{ ...host$
|
2094
|
+
{ ...host$j, property: 'padding-top' },
|
2095
|
+
{ ...host$j, property: 'padding-bottom' },
|
2089
2096
|
],
|
2090
2097
|
barBackgroundColor: { property: 'background-color' },
|
2091
2098
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -2099,11 +2106,11 @@ const LoaderLinearClass = compose(
|
|
2099
2106
|
componentNameValidationMixin
|
2100
2107
|
)(RawLoaderLinear);
|
2101
2108
|
|
2102
|
-
customElements.define(componentName$
|
2109
|
+
customElements.define(componentName$M, LoaderLinearClass);
|
2103
2110
|
|
2104
|
-
const componentName$
|
2111
|
+
const componentName$L = getComponentName('loader-radial');
|
2105
2112
|
|
2106
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2113
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
|
2107
2114
|
constructor() {
|
2108
2115
|
super();
|
2109
2116
|
|
@@ -2147,11 +2154,11 @@ const LoaderRadialClass = compose(
|
|
2147
2154
|
componentNameValidationMixin
|
2148
2155
|
)(RawLoaderRadial);
|
2149
2156
|
|
2150
|
-
customElements.define(componentName$
|
2157
|
+
customElements.define(componentName$L, LoaderRadialClass);
|
2151
2158
|
|
2152
|
-
const componentName$
|
2159
|
+
const componentName$K = getComponentName('container');
|
2153
2160
|
|
2154
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2161
|
+
class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
|
2155
2162
|
constructor() {
|
2156
2163
|
super();
|
2157
2164
|
|
@@ -2204,13 +2211,13 @@ const ContainerClass = compose(
|
|
2204
2211
|
componentNameValidationMixin
|
2205
2212
|
)(RawContainer);
|
2206
2213
|
|
2207
|
-
customElements.define(componentName$
|
2214
|
+
customElements.define(componentName$K, ContainerClass);
|
2208
2215
|
|
2209
2216
|
// eslint-disable-next-line max-classes-per-file
|
2210
2217
|
|
2211
|
-
const componentName$
|
2218
|
+
const componentName$J = getComponentName('text');
|
2212
2219
|
|
2213
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2220
|
+
class RawText extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > slot' }) {
|
2214
2221
|
constructor() {
|
2215
2222
|
super();
|
2216
2223
|
|
@@ -2270,8 +2277,8 @@ const TextClass = compose(
|
|
2270
2277
|
customTextMixin
|
2271
2278
|
)(RawText);
|
2272
2279
|
|
2273
|
-
const componentName$
|
2274
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2280
|
+
const componentName$I = getComponentName('divider');
|
2281
|
+
class RawDivider extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > div' }) {
|
2275
2282
|
constructor() {
|
2276
2283
|
super();
|
2277
2284
|
|
@@ -2317,7 +2324,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$F, baseS
|
|
2317
2324
|
}
|
2318
2325
|
|
2319
2326
|
const textVars$3 = TextClass.cssVarList;
|
2320
|
-
const { host: host$
|
2327
|
+
const { host: host$i, before, after, text: text$3 } = {
|
2321
2328
|
host: { selector: () => ':host' },
|
2322
2329
|
before: { selector: '::before' },
|
2323
2330
|
after: { selector: '::after' },
|
@@ -2327,8 +2334,8 @@ const { host: host$g, before, after, text: text$3 } = {
|
|
2327
2334
|
const DividerClass = compose(
|
2328
2335
|
createStyleMixin({
|
2329
2336
|
mappings: {
|
2330
|
-
hostWidth: { ...host$
|
2331
|
-
hostPadding: { ...host$
|
2337
|
+
hostWidth: { ...host$i, property: 'width' },
|
2338
|
+
hostPadding: { ...host$i, property: 'padding' },
|
2332
2339
|
hostDirection: { ...text$3, property: 'direction' },
|
2333
2340
|
|
2334
2341
|
minHeight: {},
|
@@ -2370,12 +2377,12 @@ const DividerClass = compose(
|
|
2370
2377
|
componentNameValidationMixin
|
2371
2378
|
)(RawDivider);
|
2372
2379
|
|
2373
|
-
customElements.define(componentName$
|
2380
|
+
customElements.define(componentName$J, TextClass);
|
2374
2381
|
|
2375
|
-
customElements.define(componentName$
|
2382
|
+
customElements.define(componentName$I, DividerClass);
|
2376
2383
|
|
2377
2384
|
const {
|
2378
|
-
host: host$
|
2385
|
+
host: host$h,
|
2379
2386
|
label: label$9,
|
2380
2387
|
placeholder: placeholder$3,
|
2381
2388
|
requiredIndicator: requiredIndicator$9,
|
@@ -2400,12 +2407,12 @@ const {
|
|
2400
2407
|
|
2401
2408
|
var textFieldMappings = {
|
2402
2409
|
// we apply font-size also on the host so we can set its width with em
|
2403
|
-
fontSize: [{}, host$
|
2410
|
+
fontSize: [{}, host$h],
|
2404
2411
|
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2405
2412
|
|
2406
|
-
hostWidth: { ...host$
|
2407
|
-
hostMinWidth: { ...host$
|
2408
|
-
hostDirection: { ...host$
|
2413
|
+
hostWidth: { ...host$h, property: 'width' },
|
2414
|
+
hostMinWidth: { ...host$h, property: 'min-width' },
|
2415
|
+
hostDirection: { ...host$h, property: 'direction' },
|
2409
2416
|
|
2410
2417
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2411
2418
|
|
@@ -2450,9 +2457,9 @@ var textFieldMappings = {
|
|
2450
2457
|
],
|
2451
2458
|
};
|
2452
2459
|
|
2453
|
-
const componentName$
|
2460
|
+
const componentName$H = getComponentName('email-field');
|
2454
2461
|
|
2455
|
-
const customMixin$
|
2462
|
+
const customMixin$8 = (superclass) =>
|
2456
2463
|
class EmailFieldMixinClass extends superclass {
|
2457
2464
|
init() {
|
2458
2465
|
super.init?.();
|
@@ -2466,7 +2473,7 @@ const EmailFieldClass = compose(
|
|
2466
2473
|
draggableMixin,
|
2467
2474
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2468
2475
|
componentNameValidationMixin,
|
2469
|
-
customMixin$
|
2476
|
+
customMixin$8
|
2470
2477
|
)(
|
2471
2478
|
createProxy({
|
2472
2479
|
slots: ['', 'suffix'],
|
@@ -2485,15 +2492,15 @@ const EmailFieldClass = compose(
|
|
2485
2492
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2486
2493
|
`,
|
2487
2494
|
excludeAttrsSync: ['tabindex'],
|
2488
|
-
componentName: componentName$
|
2495
|
+
componentName: componentName$H,
|
2489
2496
|
})
|
2490
2497
|
);
|
2491
2498
|
|
2492
|
-
customElements.define(componentName$
|
2499
|
+
customElements.define(componentName$H, EmailFieldClass);
|
2493
2500
|
|
2494
|
-
const componentName$
|
2501
|
+
const componentName$G = getComponentName('link');
|
2495
2502
|
|
2496
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2503
|
+
class RawLink extends createBaseClass({ componentName: componentName$G, baseSelector: ':host a' }) {
|
2497
2504
|
constructor() {
|
2498
2505
|
super();
|
2499
2506
|
|
@@ -2539,12 +2546,12 @@ const selectors$1 = {
|
|
2539
2546
|
text: { selector: () => TextClass.componentName },
|
2540
2547
|
};
|
2541
2548
|
|
2542
|
-
const { anchor, text: text$2, host: host$
|
2549
|
+
const { anchor, text: text$2, host: host$g, wrapper: wrapper$1 } = selectors$1;
|
2543
2550
|
|
2544
2551
|
const LinkClass = compose(
|
2545
2552
|
createStyleMixin({
|
2546
2553
|
mappings: {
|
2547
|
-
hostWidth: { ...host$
|
2554
|
+
hostWidth: { ...host$g, property: 'width' },
|
2548
2555
|
hostDirection: { ...text$2, property: 'direction' },
|
2549
2556
|
textAlign: wrapper$1,
|
2550
2557
|
textColor: [
|
@@ -2558,7 +2565,7 @@ const LinkClass = compose(
|
|
2558
2565
|
componentNameValidationMixin
|
2559
2566
|
)(RawLink);
|
2560
2567
|
|
2561
|
-
customElements.define(componentName$
|
2568
|
+
customElements.define(componentName$G, LinkClass);
|
2562
2569
|
|
2563
2570
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2564
2571
|
let style;
|
@@ -2610,37 +2617,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2610
2617
|
return CssVarImageClass;
|
2611
2618
|
};
|
2612
2619
|
|
2613
|
-
const componentName$
|
2620
|
+
const componentName$F = getComponentName('logo');
|
2614
2621
|
|
2615
2622
|
const LogoClass = createCssVarImageClass({
|
2616
|
-
componentName: componentName$
|
2623
|
+
componentName: componentName$F,
|
2617
2624
|
varName: 'url',
|
2618
2625
|
fallbackVarName: 'fallbackUrl',
|
2619
2626
|
});
|
2620
2627
|
|
2621
|
-
customElements.define(componentName$
|
2628
|
+
customElements.define(componentName$F, LogoClass);
|
2622
2629
|
|
2623
|
-
const componentName$
|
2630
|
+
const componentName$E = getComponentName('totp-image');
|
2624
2631
|
|
2625
2632
|
const TotpImageClass = createCssVarImageClass({
|
2626
|
-
componentName: componentName$
|
2633
|
+
componentName: componentName$E,
|
2627
2634
|
varName: 'url',
|
2628
2635
|
fallbackVarName: 'fallbackUrl',
|
2629
2636
|
});
|
2630
2637
|
|
2631
|
-
customElements.define(componentName$
|
2638
|
+
customElements.define(componentName$E, TotpImageClass);
|
2632
2639
|
|
2633
|
-
const componentName$
|
2640
|
+
const componentName$D = getComponentName('notp-image');
|
2634
2641
|
|
2635
2642
|
const NotpImageClass = createCssVarImageClass({
|
2636
|
-
componentName: componentName$
|
2643
|
+
componentName: componentName$D,
|
2637
2644
|
varName: 'url',
|
2638
2645
|
fallbackVarName: 'fallbackUrl',
|
2639
2646
|
});
|
2640
2647
|
|
2641
|
-
customElements.define(componentName$
|
2648
|
+
customElements.define(componentName$D, NotpImageClass);
|
2642
2649
|
|
2643
|
-
const componentName$
|
2650
|
+
const componentName$C = getComponentName('number-field');
|
2644
2651
|
|
2645
2652
|
const NumberFieldClass = compose(
|
2646
2653
|
createStyleMixin({
|
@@ -2666,11 +2673,11 @@ const NumberFieldClass = compose(
|
|
2666
2673
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2667
2674
|
`,
|
2668
2675
|
excludeAttrsSync: ['tabindex'],
|
2669
|
-
componentName: componentName$
|
2676
|
+
componentName: componentName$C,
|
2670
2677
|
})
|
2671
2678
|
);
|
2672
2679
|
|
2673
|
-
customElements.define(componentName$
|
2680
|
+
customElements.define(componentName$C, NumberFieldClass);
|
2674
2681
|
|
2675
2682
|
const focusElement = (ele) => {
|
2676
2683
|
ele?.focus();
|
@@ -2688,17 +2695,17 @@ const getSanitizedCharacters = (str) => {
|
|
2688
2695
|
|
2689
2696
|
/* eslint-disable no-param-reassign */
|
2690
2697
|
|
2691
|
-
const componentName$
|
2698
|
+
const componentName$B = getComponentName('passcode-internal');
|
2692
2699
|
|
2693
2700
|
const observedAttributes$5 = ['digits', 'loading'];
|
2694
2701
|
|
2695
2702
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2696
2703
|
|
2697
|
-
const BaseInputClass$
|
2704
|
+
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
|
2698
2705
|
|
2699
|
-
class PasscodeInternal extends BaseInputClass$
|
2706
|
+
class PasscodeInternal extends BaseInputClass$7 {
|
2700
2707
|
static get observedAttributes() {
|
2701
|
-
return observedAttributes$5.concat(BaseInputClass$
|
2708
|
+
return observedAttributes$5.concat(BaseInputClass$7.observedAttributes || []);
|
2702
2709
|
}
|
2703
2710
|
|
2704
2711
|
constructor() {
|
@@ -2920,11 +2927,11 @@ class PasscodeInternal extends BaseInputClass$6 {
|
|
2920
2927
|
}
|
2921
2928
|
}
|
2922
2929
|
|
2923
|
-
const componentName$
|
2930
|
+
const componentName$A = getComponentName('text-field');
|
2924
2931
|
|
2925
2932
|
const observedAttrs = ['type'];
|
2926
2933
|
|
2927
|
-
const customMixin$
|
2934
|
+
const customMixin$7 = (superclass) =>
|
2928
2935
|
class TextFieldClass extends superclass {
|
2929
2936
|
static get observedAttributes() {
|
2930
2937
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2951,7 +2958,7 @@ const TextFieldClass = compose(
|
|
2951
2958
|
draggableMixin,
|
2952
2959
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2953
2960
|
componentNameValidationMixin,
|
2954
|
-
customMixin$
|
2961
|
+
customMixin$7
|
2955
2962
|
)(
|
2956
2963
|
createProxy({
|
2957
2964
|
slots: ['prefix', 'suffix'],
|
@@ -2970,15 +2977,15 @@ const TextFieldClass = compose(
|
|
2970
2977
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2971
2978
|
`,
|
2972
2979
|
excludeAttrsSync: ['tabindex'],
|
2973
|
-
componentName: componentName$
|
2980
|
+
componentName: componentName$A,
|
2974
2981
|
})
|
2975
2982
|
);
|
2976
2983
|
|
2977
|
-
const componentName$
|
2984
|
+
const componentName$z = getComponentName('passcode');
|
2978
2985
|
|
2979
2986
|
const observedAttributes$4 = ['digits'];
|
2980
2987
|
|
2981
|
-
const customMixin$
|
2988
|
+
const customMixin$6 = (superclass) =>
|
2982
2989
|
class PasscodeMixinClass extends superclass {
|
2983
2990
|
static get observedAttributes() {
|
2984
2991
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2993,17 +3000,17 @@ const customMixin$5 = (superclass) =>
|
|
2993
3000
|
const template = document.createElement('template');
|
2994
3001
|
|
2995
3002
|
template.innerHTML = `
|
2996
|
-
<${componentName$
|
3003
|
+
<${componentName$B}
|
2997
3004
|
bordered="true"
|
2998
3005
|
name="code"
|
2999
3006
|
tabindex="-1"
|
3000
3007
|
slot="input"
|
3001
|
-
><slot></slot></${componentName$
|
3008
|
+
><slot></slot></${componentName$B}>
|
3002
3009
|
`;
|
3003
3010
|
|
3004
3011
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3005
3012
|
|
3006
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3013
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$B);
|
3007
3014
|
|
3008
3015
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
3009
3016
|
}
|
@@ -3018,7 +3025,7 @@ const customMixin$5 = (superclass) =>
|
|
3018
3025
|
};
|
3019
3026
|
|
3020
3027
|
const {
|
3021
|
-
host: host$
|
3028
|
+
host: host$f,
|
3022
3029
|
digitField,
|
3023
3030
|
label: label$8,
|
3024
3031
|
requiredIndicator: requiredIndicator$8,
|
@@ -3041,10 +3048,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
3041
3048
|
const PasscodeClass = compose(
|
3042
3049
|
createStyleMixin({
|
3043
3050
|
mappings: {
|
3044
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
3051
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$f],
|
3045
3052
|
hostWidth: { property: 'width' },
|
3046
|
-
hostDirection: { ...host$
|
3047
|
-
fontFamily: [host$
|
3053
|
+
hostDirection: { ...host$f, property: 'direction' },
|
3054
|
+
fontFamily: [host$f, { ...label$8 }],
|
3048
3055
|
labelTextColor: [
|
3049
3056
|
{ ...label$8, property: 'color' },
|
3050
3057
|
{ ...requiredIndicator$8, property: 'color' },
|
@@ -3074,7 +3081,7 @@ const PasscodeClass = compose(
|
|
3074
3081
|
draggableMixin,
|
3075
3082
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3076
3083
|
componentNameValidationMixin,
|
3077
|
-
customMixin$
|
3084
|
+
customMixin$6
|
3078
3085
|
)(
|
3079
3086
|
createProxy({
|
3080
3087
|
slots: [],
|
@@ -3150,15 +3157,15 @@ const PasscodeClass = compose(
|
|
3150
3157
|
${resetInputCursor('vaadin-text-field')}
|
3151
3158
|
`,
|
3152
3159
|
excludeAttrsSync: ['tabindex'],
|
3153
|
-
componentName: componentName$
|
3160
|
+
componentName: componentName$z,
|
3154
3161
|
})
|
3155
3162
|
);
|
3156
3163
|
|
3157
|
-
customElements.define(componentName$
|
3164
|
+
customElements.define(componentName$A, TextFieldClass);
|
3158
3165
|
|
3159
|
-
customElements.define(componentName$
|
3166
|
+
customElements.define(componentName$B, PasscodeInternal);
|
3160
3167
|
|
3161
|
-
customElements.define(componentName$
|
3168
|
+
customElements.define(componentName$z, PasscodeClass);
|
3162
3169
|
|
3163
3170
|
const passwordDraggableMixin = (superclass) =>
|
3164
3171
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3194,10 +3201,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3194
3201
|
}
|
3195
3202
|
};
|
3196
3203
|
|
3197
|
-
const componentName$
|
3204
|
+
const componentName$y = getComponentName('password');
|
3198
3205
|
|
3199
3206
|
const {
|
3200
|
-
host: host$
|
3207
|
+
host: host$e,
|
3201
3208
|
inputField: inputField$5,
|
3202
3209
|
inputElement: inputElement$2,
|
3203
3210
|
inputElementPlaceholder,
|
@@ -3223,10 +3230,10 @@ const {
|
|
3223
3230
|
const PasswordClass = compose(
|
3224
3231
|
createStyleMixin({
|
3225
3232
|
mappings: {
|
3226
|
-
hostWidth: { ...host$
|
3227
|
-
hostMinWidth: { ...host$
|
3228
|
-
hostDirection: { ...host$
|
3229
|
-
fontSize: [{}, host$
|
3233
|
+
hostWidth: { ...host$e, property: 'width' },
|
3234
|
+
hostMinWidth: { ...host$e, property: 'min-width' },
|
3235
|
+
hostDirection: { ...host$e, property: 'direction' },
|
3236
|
+
fontSize: [{}, host$e],
|
3230
3237
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3231
3238
|
inputHeight: { ...inputField$5, property: 'height' },
|
3232
3239
|
inputHorizontalPadding: [
|
@@ -3323,16 +3330,16 @@ const PasswordClass = compose(
|
|
3323
3330
|
}
|
3324
3331
|
`,
|
3325
3332
|
excludeAttrsSync: ['tabindex'],
|
3326
|
-
componentName: componentName$
|
3333
|
+
componentName: componentName$y,
|
3327
3334
|
})
|
3328
3335
|
);
|
3329
3336
|
|
3330
|
-
customElements.define(componentName$
|
3337
|
+
customElements.define(componentName$y, PasswordClass);
|
3331
3338
|
|
3332
|
-
const componentName$
|
3339
|
+
const componentName$x = getComponentName('text-area');
|
3333
3340
|
|
3334
3341
|
const {
|
3335
|
-
host: host$
|
3342
|
+
host: host$d,
|
3336
3343
|
label: label$6,
|
3337
3344
|
placeholder: placeholder$2,
|
3338
3345
|
inputField: inputField$4,
|
@@ -3354,10 +3361,10 @@ const {
|
|
3354
3361
|
const TextAreaClass = compose(
|
3355
3362
|
createStyleMixin({
|
3356
3363
|
mappings: {
|
3357
|
-
hostWidth: { ...host$
|
3358
|
-
hostMinWidth: { ...host$
|
3359
|
-
hostDirection: { ...host$
|
3360
|
-
fontSize: [host$
|
3364
|
+
hostWidth: { ...host$d, property: 'width' },
|
3365
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
3366
|
+
hostDirection: { ...host$d, property: 'direction' },
|
3367
|
+
fontSize: [host$d, textArea$2],
|
3361
3368
|
fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
|
3362
3369
|
labelTextColor: [
|
3363
3370
|
{ ...label$6, property: 'color' },
|
@@ -3405,17 +3412,17 @@ const TextAreaClass = compose(
|
|
3405
3412
|
${resetInputCursor('vaadin-text-area')}
|
3406
3413
|
`,
|
3407
3414
|
excludeAttrsSync: ['tabindex'],
|
3408
|
-
componentName: componentName$
|
3415
|
+
componentName: componentName$x,
|
3409
3416
|
})
|
3410
3417
|
);
|
3411
3418
|
|
3412
|
-
customElements.define(componentName$
|
3419
|
+
customElements.define(componentName$x, TextAreaClass);
|
3413
3420
|
|
3414
3421
|
const observedAttributes$3 = ['src', 'alt'];
|
3415
3422
|
|
3416
|
-
const componentName$
|
3423
|
+
const componentName$w = getComponentName('image');
|
3417
3424
|
|
3418
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3425
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$w, baseSelector: ':host > img' });
|
3419
3426
|
class RawImage extends BaseClass$1 {
|
3420
3427
|
static get observedAttributes() {
|
3421
3428
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3455,9 +3462,9 @@ const ImageClass = compose(
|
|
3455
3462
|
draggableMixin
|
3456
3463
|
)(RawImage);
|
3457
3464
|
|
3458
|
-
customElements.define(componentName$
|
3465
|
+
customElements.define(componentName$w, ImageClass);
|
3459
3466
|
|
3460
|
-
const componentName$
|
3467
|
+
const componentName$v = getComponentName('combo-box');
|
3461
3468
|
|
3462
3469
|
const ComboBoxMixin = (superclass) =>
|
3463
3470
|
class ComboBoxMixinClass extends superclass {
|
@@ -3683,7 +3690,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3683
3690
|
};
|
3684
3691
|
|
3685
3692
|
const {
|
3686
|
-
host: host$
|
3693
|
+
host: host$c,
|
3687
3694
|
inputField: inputField$3,
|
3688
3695
|
inputElement: inputElement$1,
|
3689
3696
|
placeholder: placeholder$1,
|
@@ -3709,10 +3716,10 @@ const {
|
|
3709
3716
|
const ComboBoxClass = compose(
|
3710
3717
|
createStyleMixin({
|
3711
3718
|
mappings: {
|
3712
|
-
hostWidth: { ...host$
|
3713
|
-
hostDirection: { ...host$
|
3719
|
+
hostWidth: { ...host$c, property: 'width' },
|
3720
|
+
hostDirection: { ...host$c, property: 'direction' },
|
3714
3721
|
// we apply font-size also on the host so we can set its width with em
|
3715
|
-
fontSize: [{}, host$
|
3722
|
+
fontSize: [{}, host$c],
|
3716
3723
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
3717
3724
|
labelTextColor: [
|
3718
3725
|
{ ...label$5, property: 'color' },
|
@@ -3840,12 +3847,12 @@ const ComboBoxClass = compose(
|
|
3840
3847
|
// and reset items to an empty array, and opening the list box with no items
|
3841
3848
|
// to display.
|
3842
3849
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3843
|
-
componentName: componentName$
|
3850
|
+
componentName: componentName$v,
|
3844
3851
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3845
3852
|
})
|
3846
3853
|
);
|
3847
3854
|
|
3848
|
-
customElements.define(componentName$
|
3855
|
+
customElements.define(componentName$v, ComboBoxClass);
|
3849
3856
|
|
3850
3857
|
var CountryCodes = [
|
3851
3858
|
// United States should be the first option
|
@@ -5088,7 +5095,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5088
5095
|
</div>
|
5089
5096
|
`;
|
5090
5097
|
|
5091
|
-
const componentName$
|
5098
|
+
const componentName$u = getComponentName('phone-field-internal');
|
5092
5099
|
|
5093
5100
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5094
5101
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -5100,11 +5107,11 @@ const mapAttrs$1 = {
|
|
5100
5107
|
|
5101
5108
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5102
5109
|
|
5103
|
-
const BaseInputClass$
|
5110
|
+
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
|
5104
5111
|
|
5105
|
-
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$
|
5112
|
+
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
5106
5113
|
static get observedAttributes() {
|
5107
|
-
return [].concat(BaseInputClass$
|
5114
|
+
return [].concat(BaseInputClass$6.observedAttributes || [], inputRelatedAttrs$1);
|
5108
5115
|
}
|
5109
5116
|
|
5110
5117
|
constructor() {
|
@@ -5272,14 +5279,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
|
|
5272
5279
|
}
|
5273
5280
|
};
|
5274
5281
|
|
5275
|
-
customElements.define(componentName$
|
5282
|
+
customElements.define(componentName$u, PhoneFieldInternal$1);
|
5276
5283
|
|
5277
5284
|
const textVars$1 = TextFieldClass.cssVarList;
|
5278
5285
|
const comboVars = ComboBoxClass.cssVarList;
|
5279
5286
|
|
5280
|
-
const componentName$
|
5287
|
+
const componentName$t = getComponentName('phone-field');
|
5281
5288
|
|
5282
|
-
const customMixin$
|
5289
|
+
const customMixin$5 = (superclass) =>
|
5283
5290
|
class PhoneFieldMixinClass extends superclass {
|
5284
5291
|
static get CountryCodes() {
|
5285
5292
|
return CountryCodes;
|
@@ -5291,15 +5298,15 @@ const customMixin$4 = (superclass) =>
|
|
5291
5298
|
const template = document.createElement('template');
|
5292
5299
|
|
5293
5300
|
template.innerHTML = `
|
5294
|
-
<${componentName$
|
5301
|
+
<${componentName$u}
|
5295
5302
|
tabindex="-1"
|
5296
5303
|
slot="input"
|
5297
|
-
></${componentName$
|
5304
|
+
></${componentName$u}>
|
5298
5305
|
`;
|
5299
5306
|
|
5300
5307
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5301
5308
|
|
5302
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5309
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$u);
|
5303
5310
|
|
5304
5311
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5305
5312
|
includeAttrs: [
|
@@ -5319,7 +5326,7 @@ const customMixin$4 = (superclass) =>
|
|
5319
5326
|
};
|
5320
5327
|
|
5321
5328
|
const {
|
5322
|
-
host: host$
|
5329
|
+
host: host$b,
|
5323
5330
|
label: label$4,
|
5324
5331
|
requiredIndicator: requiredIndicator$4,
|
5325
5332
|
inputField: inputField$2,
|
@@ -5344,7 +5351,7 @@ const PhoneFieldClass = compose(
|
|
5344
5351
|
createStyleMixin({
|
5345
5352
|
mappings: {
|
5346
5353
|
fontSize: [
|
5347
|
-
host$
|
5354
|
+
host$b,
|
5348
5355
|
inputField$2,
|
5349
5356
|
{
|
5350
5357
|
selector: TextFieldClass.componentName,
|
@@ -5365,11 +5372,11 @@ const PhoneFieldClass = compose(
|
|
5365
5372
|
},
|
5366
5373
|
],
|
5367
5374
|
hostWidth: [
|
5368
|
-
{ ...host$
|
5375
|
+
{ ...host$b, property: 'width' },
|
5369
5376
|
{ ...phoneInput$1, property: 'width' },
|
5370
5377
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5371
5378
|
],
|
5372
|
-
hostDirection: { ...host$
|
5379
|
+
hostDirection: { ...host$b, property: 'direction' },
|
5373
5380
|
|
5374
5381
|
inputBorderStyle: [
|
5375
5382
|
{ ...inputField$2, property: 'border-style' },
|
@@ -5419,7 +5426,7 @@ const PhoneFieldClass = compose(
|
|
5419
5426
|
}),
|
5420
5427
|
draggableMixin,
|
5421
5428
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5422
|
-
customMixin$
|
5429
|
+
customMixin$5
|
5423
5430
|
)(
|
5424
5431
|
createProxy({
|
5425
5432
|
slots: [],
|
@@ -5495,17 +5502,17 @@ const PhoneFieldClass = compose(
|
|
5495
5502
|
${resetInputLabelPosition('vaadin-text-field')}
|
5496
5503
|
`,
|
5497
5504
|
excludeAttrsSync: ['tabindex'],
|
5498
|
-
componentName: componentName$
|
5505
|
+
componentName: componentName$t,
|
5499
5506
|
})
|
5500
5507
|
);
|
5501
5508
|
|
5502
|
-
customElements.define(componentName$
|
5509
|
+
customElements.define(componentName$t, PhoneFieldClass);
|
5503
5510
|
|
5504
5511
|
const getCountryByCodeId = (countryCode) => {
|
5505
5512
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5506
5513
|
};
|
5507
5514
|
|
5508
|
-
const componentName$
|
5515
|
+
const componentName$s = getComponentName('phone-field-internal-input-box');
|
5509
5516
|
|
5510
5517
|
const observedAttributes$2 = [
|
5511
5518
|
'disabled',
|
@@ -5519,11 +5526,11 @@ const mapAttrs = {
|
|
5519
5526
|
'phone-input-placeholder': 'placeholder',
|
5520
5527
|
};
|
5521
5528
|
|
5522
|
-
const BaseInputClass$
|
5529
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
|
5523
5530
|
|
5524
|
-
class PhoneFieldInternal extends BaseInputClass$
|
5531
|
+
class PhoneFieldInternal extends BaseInputClass$5 {
|
5525
5532
|
static get observedAttributes() {
|
5526
|
-
return [].concat(BaseInputClass$
|
5533
|
+
return [].concat(BaseInputClass$5.observedAttributes || [], observedAttributes$2);
|
5527
5534
|
}
|
5528
5535
|
|
5529
5536
|
constructor() {
|
@@ -5658,13 +5665,13 @@ class PhoneFieldInternal extends BaseInputClass$4 {
|
|
5658
5665
|
}
|
5659
5666
|
}
|
5660
5667
|
|
5661
|
-
customElements.define(componentName$
|
5668
|
+
customElements.define(componentName$s, PhoneFieldInternal);
|
5662
5669
|
|
5663
5670
|
const textVars = TextFieldClass.cssVarList;
|
5664
5671
|
|
5665
|
-
const componentName$
|
5672
|
+
const componentName$r = getComponentName('phone-input-box-field');
|
5666
5673
|
|
5667
|
-
const customMixin$
|
5674
|
+
const customMixin$4 = (superclass) =>
|
5668
5675
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5669
5676
|
static get CountryCodes() {
|
5670
5677
|
return CountryCodes;
|
@@ -5676,15 +5683,15 @@ const customMixin$3 = (superclass) =>
|
|
5676
5683
|
const template = document.createElement('template');
|
5677
5684
|
|
5678
5685
|
template.innerHTML = `
|
5679
|
-
<${componentName$
|
5686
|
+
<${componentName$s}
|
5680
5687
|
tabindex="-1"
|
5681
5688
|
slot="input"
|
5682
|
-
></${componentName$
|
5689
|
+
></${componentName$s}>
|
5683
5690
|
`;
|
5684
5691
|
|
5685
5692
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5686
5693
|
|
5687
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5694
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
5688
5695
|
|
5689
5696
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5690
5697
|
includeAttrs: [
|
@@ -5701,7 +5708,7 @@ const customMixin$3 = (superclass) =>
|
|
5701
5708
|
}
|
5702
5709
|
};
|
5703
5710
|
|
5704
|
-
const { host: host$
|
5711
|
+
const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
5705
5712
|
host: { selector: () => ':host' },
|
5706
5713
|
label: { selector: '::part(label)' },
|
5707
5714
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5715,7 +5722,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5715
5722
|
createStyleMixin({
|
5716
5723
|
mappings: {
|
5717
5724
|
fontSize: [
|
5718
|
-
host$
|
5725
|
+
host$a,
|
5719
5726
|
inputField$1,
|
5720
5727
|
{
|
5721
5728
|
selector: TextFieldClass.componentName,
|
@@ -5723,9 +5730,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
5723
5730
|
},
|
5724
5731
|
],
|
5725
5732
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
5726
|
-
hostWidth: { ...host$
|
5727
|
-
hostMinWidth: { ...host$
|
5728
|
-
hostDirection: { ...host$
|
5733
|
+
hostWidth: { ...host$a, property: 'width' },
|
5734
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
5735
|
+
hostDirection: { ...host$a, property: 'direction' },
|
5729
5736
|
|
5730
5737
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5731
5738
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -5751,7 +5758,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5751
5758
|
}),
|
5752
5759
|
draggableMixin,
|
5753
5760
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5754
|
-
customMixin$
|
5761
|
+
customMixin$4
|
5755
5762
|
)(
|
5756
5763
|
createProxy({
|
5757
5764
|
slots: [],
|
@@ -5817,17 +5824,240 @@ const PhoneFieldInputBoxClass = compose(
|
|
5817
5824
|
${resetInputLabelPosition('vaadin-text-field')}
|
5818
5825
|
`,
|
5819
5826
|
excludeAttrsSync: ['tabindex'],
|
5820
|
-
componentName: componentName$
|
5827
|
+
componentName: componentName$r,
|
5821
5828
|
})
|
5822
5829
|
);
|
5823
5830
|
|
5824
|
-
customElements.define(componentName$
|
5831
|
+
customElements.define(componentName$r, PhoneFieldInputBoxClass);
|
5825
5832
|
|
5826
|
-
const componentName$
|
5833
|
+
const componentName$q = getComponentName('new-password-internal');
|
5827
5834
|
|
5828
|
-
const
|
5835
|
+
const interpolateString = (template, values) =>
|
5836
|
+
template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
|
5829
5837
|
|
5830
|
-
|
5838
|
+
// eslint-disable-next-line max-classes-per-file
|
5839
|
+
|
5840
|
+
const componentName$p = getComponentName('policy-validation');
|
5841
|
+
|
5842
|
+
const overrideAttrs = ['data-password-policy-value-minlength'];
|
5843
|
+
const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
|
5844
|
+
const policyAttrs = ['label', 'value', ...dataAttrs];
|
5845
|
+
|
5846
|
+
class RawPolicyValidation extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
5847
|
+
#availablePolicies;
|
5848
|
+
|
5849
|
+
#activePolicies = [];
|
5850
|
+
|
5851
|
+
#overrides;
|
5852
|
+
|
5853
|
+
static get observedAttributes() {
|
5854
|
+
return policyAttrs;
|
5855
|
+
}
|
5856
|
+
|
5857
|
+
constructor() {
|
5858
|
+
super();
|
5859
|
+
|
5860
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
5861
|
+
<div>
|
5862
|
+
<div class="label"></div>
|
5863
|
+
<ul></ul>
|
5864
|
+
</div>
|
5865
|
+
<style>
|
5866
|
+
:host > div {
|
5867
|
+
width: 100%;
|
5868
|
+
display: flex;
|
5869
|
+
flex-direction: column;
|
5870
|
+
box-sizing: border-box;
|
5871
|
+
}
|
5872
|
+
.label {
|
5873
|
+
max-width: 100%;
|
5874
|
+
text-wrap: wrap;
|
5875
|
+
overflow-wrap: break-word;
|
5876
|
+
}
|
5877
|
+
.hide-label .label {
|
5878
|
+
display: none;
|
5879
|
+
}
|
5880
|
+
ul {
|
5881
|
+
display: flex;
|
5882
|
+
flex-direction: column;
|
5883
|
+
padding: 0;
|
5884
|
+
margin: 0;
|
5885
|
+
}
|
5886
|
+
ul, li {
|
5887
|
+
margin: 0;
|
5888
|
+
padding: 0;
|
5889
|
+
list-style: none;
|
5890
|
+
}
|
5891
|
+
li::before {
|
5892
|
+
display: inline-block;
|
5893
|
+
width: 1em;
|
5894
|
+
text-align: center;
|
5895
|
+
}
|
5896
|
+
</style>
|
5897
|
+
`;
|
5898
|
+
|
5899
|
+
this.panel = this.shadowRoot.querySelector(':host > div');
|
5900
|
+
this.label = this.shadowRoot.querySelector('.label');
|
5901
|
+
this.list = this.shadowRoot.querySelector('ul');
|
5902
|
+
}
|
5903
|
+
|
5904
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
5905
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
5906
|
+
if (oldValue !== newValue) {
|
5907
|
+
if (attrName === 'label') {
|
5908
|
+
this.updateLabel(newValue);
|
5909
|
+
}
|
5910
|
+
|
5911
|
+
// we're don't know the order in which the attributes are forwarded, so we're trying to render every time
|
5912
|
+
// once `data` and `active-policies` are populated, the render will be executed.
|
5913
|
+
// once the `overrides` object is updated, we want to re-render the panel.
|
5914
|
+
if (dataAttrs.includes(attrName)) {
|
5915
|
+
if (attrName === 'data') {
|
5916
|
+
try {
|
5917
|
+
this.availablePolicies = JSON.parse(newValue);
|
5918
|
+
} catch {
|
5919
|
+
// eslint-disable-next-line no-console
|
5920
|
+
console.error('Failed to set available policies');
|
5921
|
+
}
|
5922
|
+
}
|
5923
|
+
if (attrName === 'active-policies') {
|
5924
|
+
this.#activePolicies = (newValue || '').split(',');
|
5925
|
+
}
|
5926
|
+
|
5927
|
+
if (attrName === 'data-password-policy-value-minlength') {
|
5928
|
+
const ln = Number(newValue);
|
5929
|
+
if (!Number.isNaN(ln) && ln > 0) {
|
5930
|
+
this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
|
5931
|
+
}
|
5932
|
+
}
|
5933
|
+
}
|
5934
|
+
|
5935
|
+
this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
|
5936
|
+
}
|
5937
|
+
}
|
5938
|
+
|
5939
|
+
get availablePolicies() {
|
5940
|
+
return this.#availablePolicies || [];
|
5941
|
+
}
|
5942
|
+
|
5943
|
+
set availablePolicies(val) {
|
5944
|
+
this.#availablePolicies = val;
|
5945
|
+
}
|
5946
|
+
|
5947
|
+
get value() {
|
5948
|
+
return this.getAttribute('value') || '';
|
5949
|
+
}
|
5950
|
+
|
5951
|
+
validate() {
|
5952
|
+
let policies = this.#availablePolicies;
|
5953
|
+
|
5954
|
+
if (this.#overrides) {
|
5955
|
+
policies = this.#availablePolicies.map((policy) =>
|
5956
|
+
this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
|
5957
|
+
);
|
5958
|
+
}
|
5959
|
+
|
5960
|
+
return this.#activePolicies.reduce((results, id) => {
|
5961
|
+
const policy = policies.find((p) => p.id === id);
|
5962
|
+
|
5963
|
+
if (!policy) {
|
5964
|
+
return results;
|
5965
|
+
}
|
5966
|
+
|
5967
|
+
const { pattern, message, data } = policy;
|
5968
|
+
|
5969
|
+
if (!pattern || !message) {
|
5970
|
+
return results;
|
5971
|
+
}
|
5972
|
+
|
5973
|
+
const exp = new RegExp(interpolateString(pattern, data));
|
5974
|
+
|
5975
|
+
const validationResult = {
|
5976
|
+
valid: exp.test(this.value),
|
5977
|
+
message: interpolateString(message, data),
|
5978
|
+
id,
|
5979
|
+
};
|
5980
|
+
|
5981
|
+
results.push(validationResult);
|
5982
|
+
|
5983
|
+
return results;
|
5984
|
+
}, []);
|
5985
|
+
}
|
5986
|
+
|
5987
|
+
get isValid() {
|
5988
|
+
return !this.validate().some(({ valid }) => valid === false);
|
5989
|
+
}
|
5990
|
+
|
5991
|
+
getValidationItemTemplate({ valid, message }) {
|
5992
|
+
const status = !this.value ? 'none' : valid;
|
5993
|
+
return `
|
5994
|
+
<li class="item" data-valid="${status}">
|
5995
|
+
<span class="message">${message}</span>
|
5996
|
+
</li>
|
5997
|
+
`;
|
5998
|
+
}
|
5999
|
+
|
6000
|
+
renderItems(availablePolicies, activePolicies) {
|
6001
|
+
if (!availablePolicies || !activePolicies.length) {
|
6002
|
+
return;
|
6003
|
+
}
|
6004
|
+
|
6005
|
+
this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
|
6006
|
+
}
|
6007
|
+
|
6008
|
+
updateLabel(val) {
|
6009
|
+
if (!val) {
|
6010
|
+
this.classList.add('hide-label');
|
6011
|
+
this.label.innerHTML = '';
|
6012
|
+
} else {
|
6013
|
+
this.label.innerHTML = val;
|
6014
|
+
this.classList.remove('hide-label');
|
6015
|
+
}
|
6016
|
+
}
|
6017
|
+
}
|
6018
|
+
|
6019
|
+
const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
|
6020
|
+
host: { selector: () => ':host > div' },
|
6021
|
+
item: { selector: () => '.item' },
|
6022
|
+
symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
|
6023
|
+
symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
|
6024
|
+
symbolError: { selector: () => '.item[data-valid="false"]::before' },
|
6025
|
+
};
|
6026
|
+
|
6027
|
+
const PolicyValidationClass = compose(
|
6028
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
6029
|
+
createStyleMixin({
|
6030
|
+
mappings: {
|
6031
|
+
hostDirection: { selector: () => ':host', property: 'direction' },
|
6032
|
+
fontSize: {},
|
6033
|
+
fontFamily: {},
|
6034
|
+
padding: {},
|
6035
|
+
borderWidth: { ...host$9, property: 'border-width' },
|
6036
|
+
borderStyle: { ...host$9, property: 'border-style' },
|
6037
|
+
borderColor: { ...host$9, property: 'border-color' },
|
6038
|
+
borderRadius: { ...host$9, property: 'border-radius' },
|
6039
|
+
backgroundColor: { ...host$9, property: 'background-color' },
|
6040
|
+
textColor: { property: 'color' },
|
6041
|
+
labelMargin: { ...host$9, property: 'gap' },
|
6042
|
+
itemsSpacing: { ...item, property: 'line-height' },
|
6043
|
+
itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
|
6044
|
+
itemSymbolErrorColor: { ...symbolError, property: 'color' },
|
6045
|
+
itemSymbolDefault: { ...symbolDefault, property: 'content' },
|
6046
|
+
itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
|
6047
|
+
itemSymbolError: { ...symbolError, property: 'content' },
|
6048
|
+
},
|
6049
|
+
}),
|
6050
|
+
draggableMixin,
|
6051
|
+
componentNameValidationMixin
|
6052
|
+
)(RawPolicyValidation);
|
6053
|
+
|
6054
|
+
customElements.define(componentName$p, PolicyValidationClass);
|
6055
|
+
|
6056
|
+
const componentName$o = getComponentName('new-password');
|
6057
|
+
|
6058
|
+
const policyPreviewVars = PolicyValidationClass.cssVarList;
|
6059
|
+
|
6060
|
+
const customMixin$3 = (superclass) =>
|
5831
6061
|
class NewPasswordMixinClass extends superclass {
|
5832
6062
|
init() {
|
5833
6063
|
super.init?.();
|
@@ -5835,16 +6065,16 @@ const customMixin$2 = (superclass) =>
|
|
5835
6065
|
const template = document.createElement('template');
|
5836
6066
|
|
5837
6067
|
template.innerHTML = `
|
5838
|
-
<${componentName$
|
6068
|
+
<${componentName$q}
|
5839
6069
|
name="new-password"
|
5840
6070
|
tabindex="-1"
|
5841
6071
|
slot="input"
|
5842
|
-
></${componentName$
|
6072
|
+
></${componentName$q}>
|
5843
6073
|
`;
|
5844
6074
|
|
5845
6075
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5846
6076
|
|
5847
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6077
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$q);
|
5848
6078
|
|
5849
6079
|
forwardAttrs(this, this.inputElement, {
|
5850
6080
|
includeAttrs: [
|
@@ -5860,25 +6090,39 @@ const customMixin$2 = (superclass) =>
|
|
5860
6090
|
'invalid',
|
5861
6091
|
'readonly',
|
5862
6092
|
'draggable',
|
6093
|
+
'has-validation',
|
6094
|
+
'policy-label',
|
6095
|
+
'active-policies',
|
6096
|
+
'available-policies',
|
6097
|
+
'data-password-policy-value-minlength',
|
5863
6098
|
],
|
5864
6099
|
});
|
5865
6100
|
}
|
5866
6101
|
};
|
5867
6102
|
|
5868
|
-
const {
|
6103
|
+
const {
|
6104
|
+
host: host$8,
|
6105
|
+
label: label$2,
|
6106
|
+
internalInputsWrapper,
|
6107
|
+
errorMessage: errorMessage$3,
|
6108
|
+
helperText: helperText$2,
|
6109
|
+
passwordInput,
|
6110
|
+
policyPreview,
|
6111
|
+
} = {
|
5869
6112
|
host: { selector: () => ':host' },
|
5870
6113
|
label: { selector: '::part(label)' },
|
5871
6114
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
5872
6115
|
helperText: { selector: '::part(helper-text)' },
|
5873
6116
|
errorMessage: { selector: '::part(error-message)' },
|
5874
6117
|
passwordInput: { selector: 'descope-password' },
|
6118
|
+
policyPreview: { selector: 'descope-policy-validation' },
|
5875
6119
|
};
|
5876
6120
|
|
5877
6121
|
const NewPasswordClass = compose(
|
5878
6122
|
createStyleMixin({
|
5879
6123
|
mappings: {
|
5880
6124
|
fontSize: [
|
5881
|
-
host$
|
6125
|
+
host$8,
|
5882
6126
|
{},
|
5883
6127
|
{
|
5884
6128
|
selector: PasswordClass.componentName,
|
@@ -5887,19 +6131,24 @@ const NewPasswordClass = compose(
|
|
5887
6131
|
],
|
5888
6132
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
5889
6133
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
5890
|
-
hostWidth: { ...host$
|
5891
|
-
hostMinWidth: { ...host$
|
6134
|
+
hostWidth: { ...host$8, property: 'width' },
|
6135
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
5892
6136
|
hostDirection: [
|
5893
|
-
{ ...host$
|
6137
|
+
{ ...host$8, property: 'direction' },
|
5894
6138
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
5895
6139
|
],
|
5896
|
-
inputsRequiredIndicator: { ...host$
|
6140
|
+
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
5897
6141
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
6142
|
+
policyPreviewBackgroundColor: {
|
6143
|
+
...policyPreview,
|
6144
|
+
property: policyPreviewVars.backgroundColor,
|
6145
|
+
},
|
6146
|
+
policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
|
5898
6147
|
},
|
5899
6148
|
}),
|
5900
6149
|
draggableMixin,
|
5901
6150
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5902
|
-
customMixin$
|
6151
|
+
customMixin$3
|
5903
6152
|
)(
|
5904
6153
|
createProxy({
|
5905
6154
|
slots: [],
|
@@ -5933,7 +6182,6 @@ const NewPasswordClass = compose(
|
|
5933
6182
|
-webkit-mask-image: none;
|
5934
6183
|
min-height: 0;
|
5935
6184
|
width: 100%;
|
5936
|
-
height: 100%;
|
5937
6185
|
padding: 0;
|
5938
6186
|
}
|
5939
6187
|
descope-new-password-internal > .wrapper {
|
@@ -5949,9 +6197,16 @@ const NewPasswordClass = compose(
|
|
5949
6197
|
descope-new-password-internal vaadin-password-field::before {
|
5950
6198
|
height: initial;
|
5951
6199
|
}
|
6200
|
+
descope-policy-validation {
|
6201
|
+
margin-top: 8px;
|
6202
|
+
display: flex;
|
6203
|
+
}
|
6204
|
+
descope-policy-validation.hidden {
|
6205
|
+
display: none;
|
6206
|
+
}
|
5952
6207
|
`,
|
5953
6208
|
excludeAttrsSync: ['tabindex'],
|
5954
|
-
componentName: componentName$
|
6209
|
+
componentName: componentName$o,
|
5955
6210
|
})
|
5956
6211
|
);
|
5957
6212
|
|
@@ -5962,6 +6217,7 @@ const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
|
|
5962
6217
|
|
5963
6218
|
const passwordInputAttrs = ['password-label', 'password-placeholder'];
|
5964
6219
|
const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
|
6220
|
+
const policyPanelAttrs = ['has-validation'];
|
5965
6221
|
const commonAttrs = [
|
5966
6222
|
'disabled',
|
5967
6223
|
'bordered',
|
@@ -5974,13 +6230,18 @@ const commonAttrs = [
|
|
5974
6230
|
'autocomplete',
|
5975
6231
|
];
|
5976
6232
|
|
5977
|
-
const inputRelatedAttrs = [].concat(
|
6233
|
+
const inputRelatedAttrs = [].concat(
|
6234
|
+
commonAttrs,
|
6235
|
+
passwordInputAttrs,
|
6236
|
+
confirmInputAttrs,
|
6237
|
+
policyPanelAttrs
|
6238
|
+
);
|
5978
6239
|
|
5979
|
-
const BaseInputClass$
|
6240
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
|
5980
6241
|
|
5981
|
-
class NewPasswordInternal extends BaseInputClass$
|
6242
|
+
class NewPasswordInternal extends BaseInputClass$4 {
|
5982
6243
|
static get observedAttributes() {
|
5983
|
-
return ['has-confirm'].concat(BaseInputClass$
|
6244
|
+
return ['has-confirm'].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
|
5984
6245
|
}
|
5985
6246
|
|
5986
6247
|
constructor() {
|
@@ -6006,7 +6267,15 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6006
6267
|
return this.getAttribute('has-confirm') === 'true';
|
6007
6268
|
}
|
6008
6269
|
|
6270
|
+
get hasValidation() {
|
6271
|
+
return this.getAttribute('has-validation') === 'true';
|
6272
|
+
}
|
6273
|
+
|
6009
6274
|
getValidity() {
|
6275
|
+
if (!this.policyPanel.isValid) {
|
6276
|
+
return { patternMismatch: true };
|
6277
|
+
}
|
6278
|
+
|
6010
6279
|
if (this.isRequired && !this.value) {
|
6011
6280
|
return { valueMissing: true };
|
6012
6281
|
}
|
@@ -6037,7 +6306,12 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6037
6306
|
}
|
6038
6307
|
|
6039
6308
|
renderInputs(shouldRenderConfirm) {
|
6040
|
-
let template =
|
6309
|
+
let template = `
|
6310
|
+
<div>
|
6311
|
+
<descope-password data-id="password"></descope-password>
|
6312
|
+
<descope-policy-validation></descope-policy-validation>
|
6313
|
+
</div>
|
6314
|
+
`;
|
6041
6315
|
|
6042
6316
|
if (shouldRenderConfirm) {
|
6043
6317
|
template += `<descope-password data-id="confirm"></descope-password>`;
|
@@ -6047,6 +6321,7 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6047
6321
|
|
6048
6322
|
this.passwordInput = this.querySelector('[data-id="password"]');
|
6049
6323
|
this.confirmInput = this.querySelector('[data-id="confirm"]');
|
6324
|
+
this.policyPanel = this.querySelector('descope-policy-validation');
|
6050
6325
|
|
6051
6326
|
this.inputs = [this.passwordInput, this.confirmInput];
|
6052
6327
|
|
@@ -6057,6 +6332,23 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6057
6332
|
[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
|
6058
6333
|
this.attributeChangedCallback(attr, null, this.getAttribute(attr));
|
6059
6334
|
});
|
6335
|
+
|
6336
|
+
this.passwordInput.addEventListener('input', (e) => {
|
6337
|
+
this.policyPanel.setAttribute('value', e.target.value);
|
6338
|
+
});
|
6339
|
+
|
6340
|
+
forwardAttrs(this, this.policyPanel, {
|
6341
|
+
includeAttrs: [
|
6342
|
+
'policy-label',
|
6343
|
+
'available-policies',
|
6344
|
+
'active-policies',
|
6345
|
+
'data-password-policy-value-minlength',
|
6346
|
+
],
|
6347
|
+
mapAttrs: {
|
6348
|
+
'policy-label': 'label',
|
6349
|
+
'available-policies': 'data',
|
6350
|
+
},
|
6351
|
+
});
|
6060
6352
|
}
|
6061
6353
|
|
6062
6354
|
// the inputs are not required but we still want it to have a required
|
@@ -6116,6 +6408,14 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6116
6408
|
value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
|
6117
6409
|
}
|
6118
6410
|
|
6411
|
+
hidePolicy() {
|
6412
|
+
this.policyPanel.classList.add('hidden');
|
6413
|
+
}
|
6414
|
+
|
6415
|
+
showPolicy() {
|
6416
|
+
this.policyPanel.classList.remove('hidden');
|
6417
|
+
}
|
6418
|
+
|
6119
6419
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
6120
6420
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6121
6421
|
|
@@ -6137,20 +6437,23 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6137
6437
|
newValue
|
6138
6438
|
);
|
6139
6439
|
}
|
6440
|
+
if (attrName === 'has-validation') {
|
6441
|
+
newValue === 'true' ? this.showPolicy() : this.hidePolicy();
|
6442
|
+
}
|
6140
6443
|
}
|
6141
6444
|
}
|
6142
6445
|
}
|
6143
6446
|
|
6144
|
-
customElements.define(componentName$
|
6447
|
+
customElements.define(componentName$q, NewPasswordInternal);
|
6145
6448
|
|
6146
|
-
customElements.define(componentName$
|
6449
|
+
customElements.define(componentName$o, NewPasswordClass);
|
6147
6450
|
|
6148
|
-
const componentName$
|
6451
|
+
const componentName$n = getComponentName('recaptcha');
|
6149
6452
|
|
6150
6453
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
6151
6454
|
|
6152
6455
|
const BaseClass = createBaseClass({
|
6153
|
-
componentName: componentName$
|
6456
|
+
componentName: componentName$n,
|
6154
6457
|
baseSelector: ':host > div',
|
6155
6458
|
});
|
6156
6459
|
class RawRecaptcha extends BaseClass {
|
@@ -6302,7 +6605,7 @@ class RawRecaptcha extends BaseClass {
|
|
6302
6605
|
|
6303
6606
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6304
6607
|
|
6305
|
-
customElements.define(componentName$
|
6608
|
+
customElements.define(componentName$n, RecaptchaClass);
|
6306
6609
|
|
6307
6610
|
const getFileBase64 = (fileObj) => {
|
6308
6611
|
return new Promise((resolve) => {
|
@@ -6316,7 +6619,7 @@ const getFilename = (fileObj) => {
|
|
6316
6619
|
return fileObj.name.replace(/^.*\\/, '');
|
6317
6620
|
};
|
6318
6621
|
|
6319
|
-
const componentName$
|
6622
|
+
const componentName$m = getComponentName('upload-file');
|
6320
6623
|
|
6321
6624
|
const observedAttributes = [
|
6322
6625
|
'title',
|
@@ -6331,11 +6634,11 @@ const observedAttributes = [
|
|
6331
6634
|
'icon',
|
6332
6635
|
];
|
6333
6636
|
|
6334
|
-
const BaseInputClass$
|
6637
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
|
6335
6638
|
|
6336
|
-
class RawUploadFile extends BaseInputClass$
|
6639
|
+
class RawUploadFile extends BaseInputClass$3 {
|
6337
6640
|
static get observedAttributes() {
|
6338
|
-
return observedAttributes.concat(BaseInputClass$
|
6641
|
+
return observedAttributes.concat(BaseInputClass$3.observedAttributes || []);
|
6339
6642
|
}
|
6340
6643
|
|
6341
6644
|
constructor() {
|
@@ -6503,7 +6806,7 @@ class RawUploadFile extends BaseInputClass$2 {
|
|
6503
6806
|
}
|
6504
6807
|
|
6505
6808
|
const buttonVars = ButtonClass.cssVarList;
|
6506
|
-
const { host: host$
|
6809
|
+
const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
6507
6810
|
host: { selector: () => ':host' },
|
6508
6811
|
wrapper: { selector: () => ':host > div' },
|
6509
6812
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6522,11 +6825,11 @@ const UploadFileClass = compose(
|
|
6522
6825
|
borderWidth: {},
|
6523
6826
|
borderStyle: {},
|
6524
6827
|
borderRadius: {},
|
6525
|
-
hostHeight: { ...host$
|
6526
|
-
hostWidth: { ...host$
|
6828
|
+
hostHeight: { ...host$7, property: 'height' },
|
6829
|
+
hostWidth: { ...host$7, property: 'width' },
|
6527
6830
|
hostPadding: { property: 'padding' },
|
6528
6831
|
hostDirection: [
|
6529
|
-
{ ...host$
|
6832
|
+
{ ...host$7, property: 'direction' },
|
6530
6833
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
6531
6834
|
],
|
6532
6835
|
gap: { ...wrapper },
|
@@ -6546,7 +6849,7 @@ const UploadFileClass = compose(
|
|
6546
6849
|
componentNameValidationMixin
|
6547
6850
|
)(RawUploadFile);
|
6548
6851
|
|
6549
|
-
customElements.define(componentName$
|
6852
|
+
customElements.define(componentName$m, UploadFileClass);
|
6550
6853
|
|
6551
6854
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
6552
6855
|
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
@@ -6644,10 +6947,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
6644
6947
|
return BaseButtonSelectionGroupInternalClass;
|
6645
6948
|
};
|
6646
6949
|
|
6647
|
-
const componentName$
|
6950
|
+
const componentName$l = getComponentName('button-selection-group-internal');
|
6648
6951
|
|
6649
6952
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6650
|
-
componentName$
|
6953
|
+
componentName$l
|
6651
6954
|
) {
|
6652
6955
|
getSelectedNode() {
|
6653
6956
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -6803,7 +7106,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
6803
7106
|
}
|
6804
7107
|
};
|
6805
7108
|
|
6806
|
-
const { host: host$
|
7109
|
+
const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
6807
7110
|
host: { selector: () => ':host' },
|
6808
7111
|
label: { selector: '::part(label)' },
|
6809
7112
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6812,9 +7115,9 @@ const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
6812
7115
|
};
|
6813
7116
|
|
6814
7117
|
const buttonSelectionGroupMappings = {
|
6815
|
-
hostWidth: { ...host$
|
6816
|
-
hostDirection: { ...host$
|
6817
|
-
fontFamily: host$
|
7118
|
+
hostWidth: { ...host$6, property: 'width' },
|
7119
|
+
hostDirection: { ...host$6, property: 'direction' },
|
7120
|
+
fontFamily: host$6,
|
6818
7121
|
labelTextColor: [
|
6819
7122
|
{ ...label$1, property: 'color' },
|
6820
7123
|
{ ...requiredIndicator$1, property: 'color' },
|
@@ -6879,7 +7182,7 @@ const buttonSelectionGroupStyles = `
|
|
6879
7182
|
${resetInputCursor('vaadin-text-field')}
|
6880
7183
|
`;
|
6881
7184
|
|
6882
|
-
const componentName$
|
7185
|
+
const componentName$k = getComponentName('button-selection-group');
|
6883
7186
|
|
6884
7187
|
const buttonSelectionGroupMixin = (superclass) =>
|
6885
7188
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -6888,19 +7191,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
6888
7191
|
const template = document.createElement('template');
|
6889
7192
|
|
6890
7193
|
template.innerHTML = `
|
6891
|
-
<${componentName$
|
7194
|
+
<${componentName$l}
|
6892
7195
|
name="button-selection-group"
|
6893
7196
|
slot="input"
|
6894
7197
|
tabindex="-1"
|
6895
7198
|
part="internal-component"
|
6896
7199
|
>
|
6897
7200
|
<slot></slot>
|
6898
|
-
</${componentName$
|
7201
|
+
</${componentName$l}>
|
6899
7202
|
`;
|
6900
7203
|
|
6901
7204
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6902
7205
|
|
6903
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7206
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
6904
7207
|
|
6905
7208
|
forwardAttrs(this, this.inputElement, {
|
6906
7209
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6925,16 +7228,16 @@ const ButtonSelectionGroupClass = compose(
|
|
6925
7228
|
wrappedEleName: 'vaadin-text-field',
|
6926
7229
|
style: () => buttonSelectionGroupStyles,
|
6927
7230
|
excludeAttrsSync: ['tabindex'],
|
6928
|
-
componentName: componentName$
|
7231
|
+
componentName: componentName$k,
|
6929
7232
|
})
|
6930
7233
|
);
|
6931
7234
|
|
6932
|
-
customElements.define(componentName$
|
7235
|
+
customElements.define(componentName$l, ButtonSelectionGroupInternalClass);
|
6933
7236
|
|
6934
|
-
const componentName$
|
7237
|
+
const componentName$j = getComponentName('button-selection-group-item');
|
6935
7238
|
|
6936
7239
|
class RawSelectItem extends createBaseClass({
|
6937
|
-
componentName: componentName$
|
7240
|
+
componentName: componentName$j,
|
6938
7241
|
baseSelector: ':host > descope-button',
|
6939
7242
|
}) {
|
6940
7243
|
get size() {
|
@@ -7041,14 +7344,14 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7041
7344
|
componentNameValidationMixin
|
7042
7345
|
)(RawSelectItem);
|
7043
7346
|
|
7044
|
-
customElements.define(componentName$
|
7347
|
+
customElements.define(componentName$j, ButtonSelectionGroupItemClass);
|
7045
7348
|
|
7046
|
-
customElements.define(componentName$
|
7349
|
+
customElements.define(componentName$k, ButtonSelectionGroupClass);
|
7047
7350
|
|
7048
|
-
const componentName$
|
7351
|
+
const componentName$i = getComponentName('button-multi-selection-group-internal');
|
7049
7352
|
|
7050
7353
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
7051
|
-
componentName$
|
7354
|
+
componentName$i
|
7052
7355
|
) {
|
7053
7356
|
#getSelectedNodes() {
|
7054
7357
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -7151,7 +7454,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
7151
7454
|
}
|
7152
7455
|
}
|
7153
7456
|
|
7154
|
-
const componentName$
|
7457
|
+
const componentName$h = getComponentName('button-multi-selection-group');
|
7155
7458
|
|
7156
7459
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
7157
7460
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -7160,19 +7463,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
7160
7463
|
const template = document.createElement('template');
|
7161
7464
|
|
7162
7465
|
template.innerHTML = `
|
7163
|
-
<${componentName$
|
7466
|
+
<${componentName$i}
|
7164
7467
|
name="button-selection-group"
|
7165
7468
|
slot="input"
|
7166
7469
|
tabindex="-1"
|
7167
7470
|
part="internal-component"
|
7168
7471
|
>
|
7169
7472
|
<slot></slot>
|
7170
|
-
</${componentName$
|
7473
|
+
</${componentName$i}>
|
7171
7474
|
`;
|
7172
7475
|
|
7173
7476
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7174
7477
|
|
7175
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7478
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
7176
7479
|
|
7177
7480
|
forwardAttrs(this, this.inputElement, {
|
7178
7481
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -7197,13 +7500,13 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
7197
7500
|
wrappedEleName: 'vaadin-text-field',
|
7198
7501
|
style: () => buttonSelectionGroupStyles,
|
7199
7502
|
excludeAttrsSync: ['tabindex'],
|
7200
|
-
componentName: componentName$
|
7503
|
+
componentName: componentName$h,
|
7201
7504
|
})
|
7202
7505
|
);
|
7203
7506
|
|
7204
|
-
customElements.define(componentName$
|
7507
|
+
customElements.define(componentName$i, ButtonMultiSelectionGroupInternalClass);
|
7205
7508
|
|
7206
|
-
customElements.define(componentName$
|
7509
|
+
customElements.define(componentName$h, ButtonMultiSelectionGroupClass);
|
7207
7510
|
|
7208
7511
|
/* eslint-disable no-param-reassign */
|
7209
7512
|
|
@@ -7231,9 +7534,9 @@ class GridTextColumnClass extends GridSortColumn {
|
|
7231
7534
|
}
|
7232
7535
|
}
|
7233
7536
|
|
7234
|
-
const componentName$
|
7537
|
+
const componentName$g = getComponentName('grid-text-column');
|
7235
7538
|
|
7236
|
-
customElements.define(componentName$
|
7539
|
+
customElements.define(componentName$g, GridTextColumnClass);
|
7237
7540
|
|
7238
7541
|
/* eslint-disable no-param-reassign */
|
7239
7542
|
|
@@ -7268,9 +7571,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
|
|
7268
7571
|
|
7269
7572
|
/* eslint-disable no-param-reassign */
|
7270
7573
|
|
7271
|
-
const componentName$
|
7574
|
+
const componentName$f = getComponentName('grid-custom-column');
|
7272
7575
|
|
7273
|
-
customElements.define(componentName$
|
7576
|
+
customElements.define(componentName$f, GridCustomColumnClass);
|
7274
7577
|
|
7275
7578
|
const createCheckboxEle = () => {
|
7276
7579
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -7329,9 +7632,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
7329
7632
|
}
|
7330
7633
|
}
|
7331
7634
|
|
7332
|
-
const componentName$
|
7635
|
+
const componentName$e = getComponentName('grid-selection-column');
|
7333
7636
|
|
7334
|
-
customElements.define(componentName$
|
7637
|
+
customElements.define(componentName$e, GridSelectionColumnClass);
|
7335
7638
|
|
7336
7639
|
const isValidDataType = (data) => {
|
7337
7640
|
const isValid = Array.isArray(data);
|
@@ -7343,7 +7646,7 @@ const isValidDataType = (data) => {
|
|
7343
7646
|
return isValid;
|
7344
7647
|
};
|
7345
7648
|
|
7346
|
-
const componentName$
|
7649
|
+
const componentName$d = getComponentName('grid');
|
7347
7650
|
|
7348
7651
|
const GridMixin = (superclass) =>
|
7349
7652
|
class GridMixinClass extends superclass {
|
@@ -7503,7 +7806,7 @@ const GridMixin = (superclass) =>
|
|
7503
7806
|
};
|
7504
7807
|
|
7505
7808
|
const {
|
7506
|
-
host: host$
|
7809
|
+
host: host$5,
|
7507
7810
|
headerRow,
|
7508
7811
|
headerRowCell,
|
7509
7812
|
contentRow,
|
@@ -7538,15 +7841,15 @@ const GridClass = compose(
|
|
7538
7841
|
fontWeight: { ...contentRow },
|
7539
7842
|
valueTextColor: { ...contentRow, property: 'color' },
|
7540
7843
|
backgroundColor: [
|
7541
|
-
{ ...host$
|
7844
|
+
{ ...host$5, property: 'background-color' },
|
7542
7845
|
{ ...contentRow, property: 'background-color' },
|
7543
7846
|
],
|
7544
7847
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7545
7848
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7546
|
-
borderColor: { ...host$
|
7547
|
-
borderWidth: { ...host$
|
7548
|
-
borderStyle: { ...host$
|
7549
|
-
borderRadius: { ...host$
|
7849
|
+
borderColor: { ...host$5, property: 'border-color' },
|
7850
|
+
borderWidth: { ...host$5, property: 'border-width' },
|
7851
|
+
borderStyle: { ...host$5, property: 'border-style' },
|
7852
|
+
borderRadius: { ...host$5, property: 'border-radius' },
|
7550
7853
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7551
7854
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7552
7855
|
separatorColor: [
|
@@ -7579,13 +7882,13 @@ const GridClass = compose(
|
|
7579
7882
|
}
|
7580
7883
|
`,
|
7581
7884
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7582
|
-
componentName: componentName$
|
7885
|
+
componentName: componentName$d,
|
7583
7886
|
})
|
7584
7887
|
);
|
7585
7888
|
|
7586
|
-
customElements.define(componentName$
|
7889
|
+
customElements.define(componentName$d, GridClass);
|
7587
7890
|
|
7588
|
-
const componentName$
|
7891
|
+
const componentName$c = getComponentName('multi-select-combo-box');
|
7589
7892
|
|
7590
7893
|
const multiSelectComboBoxMixin = (superclass) =>
|
7591
7894
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -7973,7 +8276,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7973
8276
|
};
|
7974
8277
|
|
7975
8278
|
const {
|
7976
|
-
host: host$
|
8279
|
+
host: host$4,
|
7977
8280
|
inputField,
|
7978
8281
|
inputElement,
|
7979
8282
|
placeholder,
|
@@ -8011,10 +8314,10 @@ const {
|
|
8011
8314
|
const MultiSelectComboBoxClass = compose(
|
8012
8315
|
createStyleMixin({
|
8013
8316
|
mappings: {
|
8014
|
-
hostWidth: { ...host$
|
8015
|
-
hostDirection: { ...host$
|
8317
|
+
hostWidth: { ...host$4, property: 'width' },
|
8318
|
+
hostDirection: { ...host$4, property: 'direction' },
|
8016
8319
|
// we apply font-size also on the host so we can set its width with em
|
8017
|
-
fontSize: [{}, host$
|
8320
|
+
fontSize: [{}, host$4],
|
8018
8321
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
8019
8322
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
8020
8323
|
labelTextColor: [
|
@@ -8189,16 +8492,16 @@ const MultiSelectComboBoxClass = compose(
|
|
8189
8492
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
8190
8493
|
// tries to override it, causing us to lose the user set placeholder.
|
8191
8494
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
8192
|
-
componentName: componentName$
|
8495
|
+
componentName: componentName$c,
|
8193
8496
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
8194
8497
|
})
|
8195
8498
|
);
|
8196
8499
|
|
8197
|
-
customElements.define(componentName$
|
8500
|
+
customElements.define(componentName$c, MultiSelectComboBoxClass);
|
8198
8501
|
|
8199
|
-
const componentName$
|
8502
|
+
const componentName$b = getComponentName('badge');
|
8200
8503
|
|
8201
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
8504
|
+
class RawBadge extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
|
8202
8505
|
constructor() {
|
8203
8506
|
super();
|
8204
8507
|
|
@@ -8249,11 +8552,11 @@ const BadgeClass = compose(
|
|
8249
8552
|
componentNameValidationMixin
|
8250
8553
|
)(RawBadge);
|
8251
8554
|
|
8252
|
-
customElements.define(componentName$
|
8555
|
+
customElements.define(componentName$b, BadgeClass);
|
8253
8556
|
|
8254
|
-
const componentName$
|
8557
|
+
const componentName$a = getComponentName('modal');
|
8255
8558
|
|
8256
|
-
const customMixin$
|
8559
|
+
const customMixin$2 = (superclass) =>
|
8257
8560
|
class ModalMixinClass extends superclass {
|
8258
8561
|
get opened() {
|
8259
8562
|
return this.getAttribute('opened') === 'true';
|
@@ -8343,18 +8646,18 @@ const ModalClass = compose(
|
|
8343
8646
|
}),
|
8344
8647
|
draggableMixin,
|
8345
8648
|
componentNameValidationMixin,
|
8346
|
-
customMixin$
|
8649
|
+
customMixin$2
|
8347
8650
|
)(
|
8348
8651
|
createProxy({
|
8349
8652
|
slots: [''],
|
8350
8653
|
wrappedEleName: 'vaadin-dialog',
|
8351
8654
|
style: () => ``,
|
8352
8655
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8353
|
-
componentName: componentName$
|
8656
|
+
componentName: componentName$a,
|
8354
8657
|
})
|
8355
8658
|
);
|
8356
8659
|
|
8357
|
-
customElements.define(componentName$
|
8660
|
+
customElements.define(componentName$a, ModalClass);
|
8358
8661
|
|
8359
8662
|
const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
|
8360
8663
|
|
@@ -8365,7 +8668,7 @@ if (!vaadinContainerClass) {
|
|
8365
8668
|
class NotificationContainerClass extends vaadinContainerClass {}
|
8366
8669
|
customElements.define(getComponentName('notification-container'), NotificationContainerClass);
|
8367
8670
|
|
8368
|
-
const componentName$
|
8671
|
+
const componentName$9 = getComponentName('notification-card');
|
8369
8672
|
|
8370
8673
|
const notificationCardMixin = (superclass) =>
|
8371
8674
|
class NotificationCardMixinClass extends superclass {
|
@@ -8473,13 +8776,13 @@ const NotificationCardClass = compose(
|
|
8473
8776
|
}
|
8474
8777
|
`,
|
8475
8778
|
excludeAttrsSync: ['tabindex'],
|
8476
|
-
componentName: componentName$
|
8779
|
+
componentName: componentName$9,
|
8477
8780
|
})
|
8478
8781
|
);
|
8479
8782
|
|
8480
|
-
customElements.define(componentName$
|
8783
|
+
customElements.define(componentName$9, NotificationCardClass);
|
8481
8784
|
|
8482
|
-
const componentName$
|
8785
|
+
const componentName$8 = getComponentName('notification');
|
8483
8786
|
|
8484
8787
|
const NotificationMixin = (superclass) =>
|
8485
8788
|
class NotificationMixinClass extends superclass {
|
@@ -8574,14 +8877,14 @@ const NotificationClass = compose(
|
|
8574
8877
|
createProxy({
|
8575
8878
|
wrappedEleName: 'vaadin-notification',
|
8576
8879
|
excludeAttrsSync: ['tabindex'],
|
8577
|
-
componentName: componentName$
|
8880
|
+
componentName: componentName$8,
|
8578
8881
|
})
|
8579
8882
|
);
|
8580
8883
|
|
8581
|
-
customElements.define(componentName$
|
8884
|
+
customElements.define(componentName$8, NotificationClass);
|
8582
8885
|
|
8583
|
-
const componentName$
|
8584
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
8886
|
+
const componentName$7 = getComponentName('avatar');
|
8887
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
|
8585
8888
|
constructor() {
|
8586
8889
|
super();
|
8587
8890
|
|
@@ -8656,7 +8959,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSe
|
|
8656
8959
|
}
|
8657
8960
|
}
|
8658
8961
|
|
8659
|
-
const { host: host$
|
8962
|
+
const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
8660
8963
|
host: { selector: () => ':host' },
|
8661
8964
|
editableBadge: { selector: '> .editableBadge' },
|
8662
8965
|
avatar: { selector: 'vaadin-avatar' },
|
@@ -8665,10 +8968,10 @@ const { host: host$2, editableBadge, avatar: avatar$2 } = {
|
|
8665
8968
|
const AvatarClass = compose(
|
8666
8969
|
createStyleMixin({
|
8667
8970
|
mappings: {
|
8668
|
-
hostWidth: { ...host$
|
8669
|
-
hostHeight: { ...host$
|
8670
|
-
cursor: [avatar$2, host$
|
8671
|
-
hostDirection: { ...host$
|
8971
|
+
hostWidth: { ...host$3, property: 'width' },
|
8972
|
+
hostHeight: { ...host$3, property: 'height' },
|
8973
|
+
cursor: [avatar$2, host$3],
|
8974
|
+
hostDirection: { ...host$3, property: 'direction' },
|
8672
8975
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
8673
8976
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
8674
8977
|
editableIconColor: { ...editableBadge, property: 'color' },
|
@@ -8680,17 +8983,17 @@ const AvatarClass = compose(
|
|
8680
8983
|
componentNameValidationMixin
|
8681
8984
|
)(RawAvatar);
|
8682
8985
|
|
8683
|
-
customElements.define(componentName$
|
8986
|
+
customElements.define(componentName$7, AvatarClass);
|
8684
8987
|
|
8685
|
-
const componentName$
|
8988
|
+
const componentName$6 = getComponentName('mappings-field-internal');
|
8686
8989
|
|
8687
|
-
const BaseInputClass$
|
8990
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
8688
8991
|
|
8689
|
-
class MappingsFieldInternal extends BaseInputClass$
|
8992
|
+
class MappingsFieldInternal extends BaseInputClass$2 {
|
8690
8993
|
#errorItem;
|
8691
8994
|
|
8692
8995
|
static get observedAttributes() {
|
8693
|
-
return [].concat(BaseInputClass$
|
8996
|
+
return [].concat(BaseInputClass$2.observedAttributes || [], [
|
8694
8997
|
'label-value',
|
8695
8998
|
'label-attr',
|
8696
8999
|
'button-label',
|
@@ -8743,7 +9046,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8743
9046
|
// before the new item is added and thus returns a wrong result
|
8744
9047
|
setTimeout(() => {
|
8745
9048
|
this.setCustomValidity('');
|
8746
|
-
newMappingItem.addEventListener('mapping-item-removed', (
|
9049
|
+
newMappingItem.addEventListener('mapping-item-removed', () => {
|
8747
9050
|
// If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
|
8748
9051
|
if (newMappingItem === this.#errorItem) {
|
8749
9052
|
this.resetInvalidIndication();
|
@@ -8751,8 +9054,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8751
9054
|
}
|
8752
9055
|
newMappingItem.remove();
|
8753
9056
|
this.setCustomValidity('');
|
8754
|
-
e.stopPropagation();
|
8755
9057
|
});
|
9058
|
+
this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
|
8756
9059
|
if (focusNewItem) {
|
8757
9060
|
newMappingItem.focus();
|
8758
9061
|
}
|
@@ -8919,9 +9222,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8919
9222
|
}
|
8920
9223
|
}
|
8921
9224
|
|
8922
|
-
const componentName$
|
9225
|
+
const componentName$5 = getComponentName('mappings-field');
|
8923
9226
|
|
8924
|
-
const customMixin = (superclass) =>
|
9227
|
+
const customMixin$1 = (superclass) =>
|
8925
9228
|
class MappingsFieldMixinClass extends superclass {
|
8926
9229
|
get defaultValues() {
|
8927
9230
|
const defaultValuesAttr = this.getAttribute('default-values');
|
@@ -8948,14 +9251,14 @@ const customMixin = (superclass) =>
|
|
8948
9251
|
const template = document.createElement('template');
|
8949
9252
|
|
8950
9253
|
template.innerHTML = `
|
8951
|
-
<${componentName$
|
9254
|
+
<${componentName$6}
|
8952
9255
|
tabindex="-1"
|
8953
|
-
></${componentName$
|
9256
|
+
></${componentName$6}>
|
8954
9257
|
`;
|
8955
9258
|
|
8956
9259
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8957
9260
|
|
8958
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
9261
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
8959
9262
|
|
8960
9263
|
forwardAttrs(this, this.inputElement, {
|
8961
9264
|
includeAttrs: [
|
@@ -8973,16 +9276,21 @@ const customMixin = (superclass) =>
|
|
8973
9276
|
],
|
8974
9277
|
});
|
8975
9278
|
|
9279
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
9280
|
+
// we want to reflect the change in the parent component
|
9281
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
9282
|
+
|
8976
9283
|
this.setDefaultValues();
|
8977
9284
|
}
|
8978
9285
|
};
|
8979
9286
|
|
8980
9287
|
const {
|
8981
|
-
host: host$
|
9288
|
+
host: host$2,
|
8982
9289
|
helperText,
|
8983
9290
|
errorMessage,
|
8984
9291
|
mappingItem,
|
8985
9292
|
labels,
|
9293
|
+
labelsText,
|
8986
9294
|
valueLabel,
|
8987
9295
|
attrLabel,
|
8988
9296
|
separator,
|
@@ -8993,6 +9301,9 @@ const {
|
|
8993
9301
|
errorMessage: { selector: '::part(error-message)' },
|
8994
9302
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
8995
9303
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
9304
|
+
labelsText: {
|
9305
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
9306
|
+
},
|
8996
9307
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
8997
9308
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
8998
9309
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
@@ -9002,12 +9313,17 @@ const {
|
|
9002
9313
|
const MappingsFieldClass = compose(
|
9003
9314
|
createStyleMixin({
|
9004
9315
|
mappings: {
|
9005
|
-
hostWidth: { ...host$
|
9006
|
-
hostDirection: { ...host$
|
9316
|
+
hostWidth: { ...host$2, property: 'width' },
|
9317
|
+
hostDirection: { ...host$2, property: 'direction' },
|
9007
9318
|
// we apply font-size also on the host so we can set its width with em
|
9008
|
-
fontSize: [{}, host$
|
9319
|
+
fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
|
9009
9320
|
fontFamily: [helperText, errorMessage, labels],
|
9010
9321
|
separatorFontSize: { ...separator, property: 'font-size' },
|
9322
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
9323
|
+
labelsLineHeight: [
|
9324
|
+
{ ...labelsText, property: 'line-height' },
|
9325
|
+
{ ...labels, property: 'line-height' },
|
9326
|
+
],
|
9011
9327
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
9012
9328
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
9013
9329
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
@@ -9024,7 +9340,7 @@ const MappingsFieldClass = compose(
|
|
9024
9340
|
proxyParentValidation: true,
|
9025
9341
|
}),
|
9026
9342
|
componentNameValidationMixin,
|
9027
|
-
customMixin
|
9343
|
+
customMixin$1
|
9028
9344
|
)(
|
9029
9345
|
createProxy({
|
9030
9346
|
slots: [],
|
@@ -9071,21 +9387,21 @@ const MappingsFieldClass = compose(
|
|
9071
9387
|
'options',
|
9072
9388
|
'error-message',
|
9073
9389
|
],
|
9074
|
-
componentName: componentName$
|
9390
|
+
componentName: componentName$5,
|
9075
9391
|
})
|
9076
9392
|
);
|
9077
9393
|
|
9078
|
-
customElements.define(componentName$
|
9394
|
+
customElements.define(componentName$6, MappingsFieldInternal);
|
9079
9395
|
|
9080
|
-
const componentName$
|
9396
|
+
const componentName$4 = getComponentName('mapping-item');
|
9081
9397
|
|
9082
9398
|
const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
|
9083
9399
|
|
9084
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
9400
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
|
9085
9401
|
|
9086
|
-
class MappingItem extends BaseInputClass {
|
9402
|
+
class MappingItem extends BaseInputClass$1 {
|
9087
9403
|
static get observedAttributes() {
|
9088
|
-
return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
|
9404
|
+
return [].concat(BaseInputClass$1.observedAttributes || [], inputAttrs, [
|
9089
9405
|
'separator',
|
9090
9406
|
'options',
|
9091
9407
|
'invalid',
|
@@ -9168,7 +9484,7 @@ class MappingItem extends BaseInputClass {
|
|
9168
9484
|
|
9169
9485
|
initRemoveButton() {
|
9170
9486
|
this.removeButton.addEventListener('click', () =>
|
9171
|
-
this.dispatchEvent(new CustomEvent('mapping-item-removed'))
|
9487
|
+
this.dispatchEvent(new CustomEvent('mapping-item-removed', { bubbles: true, composed: true }))
|
9172
9488
|
);
|
9173
9489
|
}
|
9174
9490
|
|
@@ -9231,9 +9547,9 @@ class MappingItem extends BaseInputClass {
|
|
9231
9547
|
}
|
9232
9548
|
}
|
9233
9549
|
|
9234
|
-
customElements.define(componentName$
|
9550
|
+
customElements.define(componentName$4, MappingItem);
|
9235
9551
|
|
9236
|
-
customElements.define(componentName$
|
9552
|
+
customElements.define(componentName$5, MappingsFieldClass);
|
9237
9553
|
|
9238
9554
|
function deleteIcon() {
|
9239
9555
|
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;
|
@@ -9243,9 +9559,9 @@ function editIcon() {
|
|
9243
9559
|
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
9560
|
}
|
9245
9561
|
|
9246
|
-
const componentName$
|
9562
|
+
const componentName$3 = getComponentName('user-attribute');
|
9247
9563
|
class RawUserAttribute extends createBaseClass({
|
9248
|
-
componentName: componentName$
|
9564
|
+
componentName: componentName$3,
|
9249
9565
|
baseSelector: ':host > .root',
|
9250
9566
|
}) {
|
9251
9567
|
constructor() {
|
@@ -9431,7 +9747,7 @@ class RawUserAttribute extends createBaseClass({
|
|
9431
9747
|
}
|
9432
9748
|
}
|
9433
9749
|
|
9434
|
-
const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
|
9750
|
+
const { host: host$1, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
|
9435
9751
|
host: { selector: () => ':host' },
|
9436
9752
|
textFields: { selector: 'descope-text' },
|
9437
9753
|
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
@@ -9444,10 +9760,10 @@ const { host, textFields, buttons, badge: badge$2, labelText, valueText, textWra
|
|
9444
9760
|
const UserAttributeClass = compose(
|
9445
9761
|
createStyleMixin({
|
9446
9762
|
mappings: {
|
9447
|
-
hostWidth: { ...host, property: 'width' },
|
9448
|
-
hostMinWidth: { ...host, property: 'min-width' },
|
9763
|
+
hostWidth: { ...host$1, property: 'width' },
|
9764
|
+
hostMinWidth: { ...host$1, property: 'min-width' },
|
9449
9765
|
hostDirection: [
|
9450
|
-
{ ...host, property: 'direction' },
|
9766
|
+
{ ...host$1, property: 'direction' },
|
9451
9767
|
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
9452
9768
|
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
9453
9769
|
{ ...badge$2, property: BadgeClass.cssVarList.hostDirection },
|
@@ -9462,19 +9778,249 @@ const UserAttributeClass = compose(
|
|
9462
9778
|
componentNameValidationMixin
|
9463
9779
|
)(RawUserAttribute);
|
9464
9780
|
|
9465
|
-
customElements.define(componentName$
|
9781
|
+
customElements.define(componentName$3, UserAttributeClass);
|
9466
9782
|
|
9467
|
-
const
|
9783
|
+
const componentName$2 = getComponentName('saml-group-mappings-internal');
|
9468
9784
|
|
9469
|
-
|
9470
|
-
const set = (obj, path, value) => {
|
9471
|
-
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
9785
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: '' });
|
9472
9786
|
|
9473
|
-
|
9474
|
-
|
9475
|
-
|
9476
|
-
|
9477
|
-
|
9787
|
+
class SamlGroupMappingsInternal extends BaseInputClass {
|
9788
|
+
static get observedAttributes() {
|
9789
|
+
return ['invalid'].concat(BaseInputClass.observedAttributes || []);
|
9790
|
+
}
|
9791
|
+
|
9792
|
+
constructor() {
|
9793
|
+
super();
|
9794
|
+
|
9795
|
+
this.innerHTML = `
|
9796
|
+
<descope-text-field variant="body2" bordered="true"></descope-text-field>
|
9797
|
+
<descope-mappings-field></descope-mappings-field>
|
9798
|
+
`;
|
9799
|
+
|
9800
|
+
this.groupInputElement = this.querySelector('descope-text-field');
|
9801
|
+
this.mappingsElement = this.querySelector('descope-mappings-field');
|
9802
|
+
}
|
9803
|
+
|
9804
|
+
resetInvalidIndication() {
|
9805
|
+
this.removeAttribute('invalid');
|
9806
|
+
}
|
9807
|
+
|
9808
|
+
handleMappingsInvalidChange(changedAttributes) {
|
9809
|
+
if (changedAttributes.includes('invalid')) {
|
9810
|
+
if (!this.mappingsElement.hasAttribute('invalid')) {
|
9811
|
+
this.resetInvalidIndication();
|
9812
|
+
}
|
9813
|
+
}
|
9814
|
+
}
|
9815
|
+
|
9816
|
+
initFocusHandler() {
|
9817
|
+
// This event listener needs to be placed before the super.init() call
|
9818
|
+
this.addEventListener('focus', (e) => {
|
9819
|
+
// we want to ignore focus events we are dispatching
|
9820
|
+
if (e.isTrusted) {
|
9821
|
+
const focusedElement = this.mappingsElement.checkValidity()
|
9822
|
+
? this.groupInputElement
|
9823
|
+
: this.mappingsElement;
|
9824
|
+
focusedElement.focus();
|
9825
|
+
}
|
9826
|
+
});
|
9827
|
+
}
|
9828
|
+
|
9829
|
+
init() {
|
9830
|
+
// This needs to be placed before the super.init() call to work
|
9831
|
+
this.initFocusHandler();
|
9832
|
+
|
9833
|
+
super.init?.();
|
9834
|
+
|
9835
|
+
forwardAttrs(this, this.groupInputElement, {
|
9836
|
+
mapAttrs: { 'label-group': 'label' },
|
9837
|
+
includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
|
9838
|
+
});
|
9839
|
+
|
9840
|
+
forwardAttrs(this, this.mappingsElement, {
|
9841
|
+
includeAttrs: [
|
9842
|
+
'size',
|
9843
|
+
'full-width',
|
9844
|
+
'label-value',
|
9845
|
+
'label-attr',
|
9846
|
+
'button-label',
|
9847
|
+
'separator',
|
9848
|
+
'options',
|
9849
|
+
'readonly',
|
9850
|
+
'disabled',
|
9851
|
+
'data-errormessage-pattern-mismatch',
|
9852
|
+
],
|
9853
|
+
});
|
9854
|
+
|
9855
|
+
// Observing the invalid attribute of the mappings field to reset the invalid state for this component.
|
9856
|
+
// When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
|
9857
|
+
// level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
|
9858
|
+
observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
|
9859
|
+
includeAttrs: ['invalid'],
|
9860
|
+
});
|
9861
|
+
}
|
9862
|
+
|
9863
|
+
get value() {
|
9864
|
+
return {
|
9865
|
+
group: this.groupInputElement.value,
|
9866
|
+
mappings: this.mappingsElement.value,
|
9867
|
+
};
|
9868
|
+
}
|
9869
|
+
|
9870
|
+
set value(value) {
|
9871
|
+
if (value?.group && typeof value.group === 'string') {
|
9872
|
+
this.groupInputElement.value = value.group;
|
9873
|
+
}
|
9874
|
+
if (Array.isArray(value?.mappings)) {
|
9875
|
+
this.mappingsElement.value = value.mappings;
|
9876
|
+
}
|
9877
|
+
}
|
9878
|
+
|
9879
|
+
getValidity() {
|
9880
|
+
if (!this.groupInputElement.checkValidity()) {
|
9881
|
+
return this.groupInputElement.validity;
|
9882
|
+
}
|
9883
|
+
if (!this.mappingsElement.checkValidity()) {
|
9884
|
+
return this.mappingsElement.validity;
|
9885
|
+
}
|
9886
|
+
|
9887
|
+
return {};
|
9888
|
+
}
|
9889
|
+
|
9890
|
+
#handleInvalidState(isInvalid) {
|
9891
|
+
if (isInvalid) {
|
9892
|
+
if (!this.groupInputElement.checkValidity()) {
|
9893
|
+
this.groupInputElement.setAttribute('invalid', 'true');
|
9894
|
+
return;
|
9895
|
+
}
|
9896
|
+
|
9897
|
+
if (!this.mappingsElement.checkValidity()) {
|
9898
|
+
this.mappingsElement.setAttribute('invalid', 'true');
|
9899
|
+
}
|
9900
|
+
}
|
9901
|
+
}
|
9902
|
+
|
9903
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
9904
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
9905
|
+
if (attrName === 'invalid') {
|
9906
|
+
this.#handleInvalidState(newValue === 'true');
|
9907
|
+
}
|
9908
|
+
}
|
9909
|
+
}
|
9910
|
+
|
9911
|
+
const componentName$1 = getComponentName('saml-group-mappings');
|
9912
|
+
|
9913
|
+
const customMixin = (superclass) =>
|
9914
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
9915
|
+
init() {
|
9916
|
+
super.init?.();
|
9917
|
+
|
9918
|
+
const template = document.createElement('template');
|
9919
|
+
|
9920
|
+
template.innerHTML = `
|
9921
|
+
<${componentName$2}
|
9922
|
+
tabindex="-1"
|
9923
|
+
></${componentName$2}>
|
9924
|
+
`;
|
9925
|
+
|
9926
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
9927
|
+
|
9928
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$2);
|
9929
|
+
|
9930
|
+
forwardAttrs(this, this.inputElement, {
|
9931
|
+
includeAttrs: [
|
9932
|
+
'size',
|
9933
|
+
'full-width',
|
9934
|
+
'label-group',
|
9935
|
+
'label-value',
|
9936
|
+
'label-attr',
|
9937
|
+
'button-label',
|
9938
|
+
'separator',
|
9939
|
+
'options',
|
9940
|
+
'readonly',
|
9941
|
+
'disabled',
|
9942
|
+
],
|
9943
|
+
});
|
9944
|
+
|
9945
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
9946
|
+
}
|
9947
|
+
};
|
9948
|
+
|
9949
|
+
const { host, groupInput } = {
|
9950
|
+
host: { selector: () => ':host' },
|
9951
|
+
groupInput: { selector: 'descope-text-field' },
|
9952
|
+
};
|
9953
|
+
|
9954
|
+
const SamlGroupMappingsClass = compose(
|
9955
|
+
createStyleMixin({
|
9956
|
+
mappings: {
|
9957
|
+
hostWidth: { ...host, property: 'width' },
|
9958
|
+
hostDirection: { ...host, property: 'direction' },
|
9959
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
9960
|
+
},
|
9961
|
+
}),
|
9962
|
+
draggableMixin,
|
9963
|
+
composedProxyInputMixin({
|
9964
|
+
proxyProps: ['value', 'selectionStart'],
|
9965
|
+
inputEvent: 'input',
|
9966
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
9967
|
+
proxyParentValidation: true,
|
9968
|
+
}),
|
9969
|
+
componentNameValidationMixin,
|
9970
|
+
customMixin
|
9971
|
+
)(
|
9972
|
+
createProxy({
|
9973
|
+
slots: [],
|
9974
|
+
wrappedEleName: 'vaadin-custom-field',
|
9975
|
+
style: () => `
|
9976
|
+
:host {
|
9977
|
+
display: inline-flex;
|
9978
|
+
max-width: 100%;
|
9979
|
+
direction: ltr;
|
9980
|
+
}
|
9981
|
+
|
9982
|
+
vaadin-custom-field {
|
9983
|
+
line-height: unset;
|
9984
|
+
width: 100%;
|
9985
|
+
}
|
9986
|
+
|
9987
|
+
descope-text-field {
|
9988
|
+
width: auto;
|
9989
|
+
}
|
9990
|
+
|
9991
|
+
descope-mappings-field {
|
9992
|
+
display: block;
|
9993
|
+
}
|
9994
|
+
`,
|
9995
|
+
excludeAttrsSync: [
|
9996
|
+
'tabindex',
|
9997
|
+
'label-group',
|
9998
|
+
'label-value',
|
9999
|
+
'label-attr',
|
10000
|
+
'button-label',
|
10001
|
+
'separator',
|
10002
|
+
'options',
|
10003
|
+
'error-message',
|
10004
|
+
],
|
10005
|
+
componentName: componentName$1,
|
10006
|
+
})
|
10007
|
+
);
|
10008
|
+
|
10009
|
+
customElements.define(componentName$2, SamlGroupMappingsInternal);
|
10010
|
+
|
10011
|
+
customElements.define(componentName$1, SamlGroupMappingsClass);
|
10012
|
+
|
10013
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
10014
|
+
|
10015
|
+
// lodash.set alternative
|
10016
|
+
const set = (obj, path, value) => {
|
10017
|
+
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
10018
|
+
|
10019
|
+
pathArray.reduce((acc, key, i) => {
|
10020
|
+
if (acc[key] === undefined) acc[key] = {};
|
10021
|
+
if (i === pathArray.length - 1) acc[key] = value;
|
10022
|
+
return acc[key];
|
10023
|
+
}, obj);
|
9478
10024
|
|
9479
10025
|
return obj;
|
9480
10026
|
};
|
@@ -9894,33 +10440,33 @@ const globals = {
|
|
9894
10440
|
fonts,
|
9895
10441
|
direction,
|
9896
10442
|
};
|
9897
|
-
const vars$
|
10443
|
+
const vars$D = getThemeVars(globals);
|
9898
10444
|
|
9899
|
-
const globalRefs$
|
10445
|
+
const globalRefs$m = getThemeRefs(globals);
|
9900
10446
|
const compVars$5 = ButtonClass.cssVarList;
|
9901
10447
|
|
9902
10448
|
const mode = {
|
9903
|
-
primary: globalRefs$
|
9904
|
-
secondary: globalRefs$
|
9905
|
-
success: globalRefs$
|
9906
|
-
error: globalRefs$
|
9907
|
-
surface: globalRefs$
|
10449
|
+
primary: globalRefs$m.colors.primary,
|
10450
|
+
secondary: globalRefs$m.colors.secondary,
|
10451
|
+
success: globalRefs$m.colors.success,
|
10452
|
+
error: globalRefs$m.colors.error,
|
10453
|
+
surface: globalRefs$m.colors.surface,
|
9908
10454
|
};
|
9909
10455
|
|
9910
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
10456
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$Q);
|
9911
10457
|
|
9912
10458
|
const button = {
|
9913
10459
|
...helperTheme$3,
|
9914
10460
|
|
9915
|
-
[compVars$5.fontFamily]: globalRefs$
|
10461
|
+
[compVars$5.fontFamily]: globalRefs$m.fonts.font1.family,
|
9916
10462
|
|
9917
10463
|
[compVars$5.cursor]: 'pointer',
|
9918
10464
|
[compVars$5.hostHeight]: '3em',
|
9919
10465
|
[compVars$5.hostWidth]: 'auto',
|
9920
|
-
[compVars$5.hostDirection]: globalRefs$
|
10466
|
+
[compVars$5.hostDirection]: globalRefs$m.direction,
|
9921
10467
|
|
9922
|
-
[compVars$5.borderRadius]: globalRefs$
|
9923
|
-
[compVars$5.borderWidth]: globalRefs$
|
10468
|
+
[compVars$5.borderRadius]: globalRefs$m.radius.sm,
|
10469
|
+
[compVars$5.borderWidth]: globalRefs$m.border.xs,
|
9924
10470
|
[compVars$5.borderStyle]: 'solid',
|
9925
10471
|
[compVars$5.borderColor]: 'transparent',
|
9926
10472
|
|
@@ -9963,10 +10509,10 @@ const button = {
|
|
9963
10509
|
},
|
9964
10510
|
|
9965
10511
|
_disabled: {
|
9966
|
-
[helperVars$3.main]: globalRefs$
|
9967
|
-
[helperVars$3.dark]: globalRefs$
|
9968
|
-
[helperVars$3.light]: globalRefs$
|
9969
|
-
[helperVars$3.contrast]: globalRefs$
|
10512
|
+
[helperVars$3.main]: globalRefs$m.colors.surface.light,
|
10513
|
+
[helperVars$3.dark]: globalRefs$m.colors.surface.dark,
|
10514
|
+
[helperVars$3.light]: globalRefs$m.colors.surface.light,
|
10515
|
+
[helperVars$3.contrast]: globalRefs$m.colors.surface.main,
|
9970
10516
|
},
|
9971
10517
|
|
9972
10518
|
variant: {
|
@@ -10014,7 +10560,7 @@ const button = {
|
|
10014
10560
|
},
|
10015
10561
|
};
|
10016
10562
|
|
10017
|
-
const vars$
|
10563
|
+
const vars$C = {
|
10018
10564
|
...compVars$5,
|
10019
10565
|
...helperVars$3,
|
10020
10566
|
};
|
@@ -10022,26 +10568,28 @@ const vars$A = {
|
|
10022
10568
|
var button$1 = /*#__PURE__*/Object.freeze({
|
10023
10569
|
__proto__: null,
|
10024
10570
|
default: button,
|
10025
|
-
vars: vars$
|
10571
|
+
vars: vars$C
|
10026
10572
|
});
|
10027
10573
|
|
10028
10574
|
const componentName = getComponentName('input-wrapper');
|
10029
|
-
const globalRefs$
|
10575
|
+
const globalRefs$l = getThemeRefs(globals);
|
10030
10576
|
|
10031
|
-
const [theme$1, refs, vars$
|
10577
|
+
const [theme$1, refs, vars$B] = createHelperVars(
|
10032
10578
|
{
|
10033
|
-
labelTextColor: globalRefs$
|
10034
|
-
|
10035
|
-
|
10579
|
+
labelTextColor: globalRefs$l.colors.surface.dark,
|
10580
|
+
labelFontSize: globalRefs$l.typography.body2.size,
|
10581
|
+
valueTextColor: globalRefs$l.colors.surface.contrast,
|
10582
|
+
placeholderTextColor: globalRefs$l.colors.surface.dark,
|
10036
10583
|
requiredIndicator: "'*'",
|
10037
|
-
|
10038
|
-
|
10584
|
+
helperTextColor: globalRefs$l.colors.surface.dark,
|
10585
|
+
errorMessageTextColor: globalRefs$l.colors.error.main,
|
10586
|
+
successMessageTextColor: globalRefs$l.colors.success.main,
|
10039
10587
|
|
10040
|
-
borderWidth: globalRefs$
|
10041
|
-
borderRadius: globalRefs$
|
10588
|
+
borderWidth: globalRefs$l.border.xs,
|
10589
|
+
borderRadius: globalRefs$l.radius.xs,
|
10042
10590
|
borderColor: 'transparent',
|
10043
10591
|
|
10044
|
-
outlineWidth: globalRefs$
|
10592
|
+
outlineWidth: globalRefs$l.border.sm,
|
10045
10593
|
outlineStyle: 'solid',
|
10046
10594
|
outlineColor: 'transparent',
|
10047
10595
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -10052,11 +10600,11 @@ const [theme$1, refs, vars$z] = createHelperVars(
|
|
10052
10600
|
horizontalPadding: '0.5em',
|
10053
10601
|
verticalPadding: '0.5em',
|
10054
10602
|
|
10055
|
-
backgroundColor: globalRefs$
|
10603
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
10056
10604
|
|
10057
|
-
fontFamily: globalRefs$
|
10605
|
+
fontFamily: globalRefs$l.fonts.font1.family,
|
10058
10606
|
|
10059
|
-
direction: globalRefs$
|
10607
|
+
direction: globalRefs$l.direction,
|
10060
10608
|
|
10061
10609
|
overlayOpacity: '0.3',
|
10062
10610
|
|
@@ -10072,28 +10620,28 @@ const [theme$1, refs, vars$z] = createHelperVars(
|
|
10072
10620
|
},
|
10073
10621
|
|
10074
10622
|
_focused: {
|
10075
|
-
outlineColor: globalRefs$
|
10623
|
+
outlineColor: globalRefs$l.colors.surface.light,
|
10076
10624
|
_invalid: {
|
10077
|
-
outlineColor: globalRefs$
|
10625
|
+
outlineColor: globalRefs$l.colors.error.main,
|
10078
10626
|
},
|
10079
10627
|
},
|
10080
10628
|
|
10081
10629
|
_bordered: {
|
10082
|
-
outlineWidth: globalRefs$
|
10083
|
-
borderColor: globalRefs$
|
10630
|
+
outlineWidth: globalRefs$l.border.xs,
|
10631
|
+
borderColor: globalRefs$l.colors.surface.light,
|
10084
10632
|
borderStyle: 'solid',
|
10085
10633
|
_invalid: {
|
10086
|
-
borderColor: globalRefs$
|
10634
|
+
borderColor: globalRefs$l.colors.error.main,
|
10087
10635
|
},
|
10088
10636
|
},
|
10089
10637
|
|
10090
10638
|
_disabled: {
|
10091
|
-
labelTextColor: globalRefs$
|
10092
|
-
borderColor: globalRefs$
|
10093
|
-
valueTextColor: globalRefs$
|
10094
|
-
placeholderTextColor: globalRefs$
|
10095
|
-
helperTextColor: globalRefs$
|
10096
|
-
backgroundColor: globalRefs$
|
10639
|
+
labelTextColor: globalRefs$l.colors.surface.light,
|
10640
|
+
borderColor: globalRefs$l.colors.surface.light,
|
10641
|
+
valueTextColor: globalRefs$l.colors.surface.light,
|
10642
|
+
placeholderTextColor: globalRefs$l.colors.surface.light,
|
10643
|
+
helperTextColor: globalRefs$l.colors.surface.light,
|
10644
|
+
backgroundColor: globalRefs$l.colors.surface.main,
|
10097
10645
|
},
|
10098
10646
|
},
|
10099
10647
|
componentName
|
@@ -10103,19 +10651,92 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
10103
10651
|
__proto__: null,
|
10104
10652
|
default: theme$1,
|
10105
10653
|
refs: refs,
|
10106
|
-
vars: vars$
|
10654
|
+
vars: vars$B
|
10107
10655
|
});
|
10108
10656
|
|
10109
|
-
const vars$
|
10657
|
+
const vars$A = TextFieldClass.cssVarList;
|
10110
10658
|
|
10111
10659
|
const textField = {
|
10660
|
+
[vars$A.hostWidth]: refs.width,
|
10661
|
+
[vars$A.hostMinWidth]: refs.minWidth,
|
10662
|
+
[vars$A.hostDirection]: refs.direction,
|
10663
|
+
[vars$A.fontSize]: refs.fontSize,
|
10664
|
+
[vars$A.fontFamily]: refs.fontFamily,
|
10665
|
+
[vars$A.labelTextColor]: refs.labelTextColor,
|
10666
|
+
[vars$A.labelRequiredIndicator]: refs.requiredIndicator,
|
10667
|
+
[vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
|
10668
|
+
[vars$A.inputValueTextColor]: refs.valueTextColor,
|
10669
|
+
[vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
|
10670
|
+
[vars$A.inputBorderWidth]: refs.borderWidth,
|
10671
|
+
[vars$A.inputBorderStyle]: refs.borderStyle,
|
10672
|
+
[vars$A.inputBorderColor]: refs.borderColor,
|
10673
|
+
[vars$A.inputBorderRadius]: refs.borderRadius,
|
10674
|
+
[vars$A.inputOutlineWidth]: refs.outlineWidth,
|
10675
|
+
[vars$A.inputOutlineStyle]: refs.outlineStyle,
|
10676
|
+
[vars$A.inputOutlineColor]: refs.outlineColor,
|
10677
|
+
[vars$A.inputOutlineOffset]: refs.outlineOffset,
|
10678
|
+
[vars$A.inputBackgroundColor]: refs.backgroundColor,
|
10679
|
+
[vars$A.inputHeight]: refs.inputHeight,
|
10680
|
+
[vars$A.inputHorizontalPadding]: refs.horizontalPadding,
|
10681
|
+
[vars$A.helperTextColor]: refs.helperTextColor,
|
10682
|
+
textAlign: {
|
10683
|
+
right: { [vars$A.inputTextAlign]: 'right' },
|
10684
|
+
left: { [vars$A.inputTextAlign]: 'left' },
|
10685
|
+
center: { [vars$A.inputTextAlign]: 'center' },
|
10686
|
+
},
|
10687
|
+
};
|
10688
|
+
|
10689
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
10690
|
+
__proto__: null,
|
10691
|
+
default: textField,
|
10692
|
+
textField: textField,
|
10693
|
+
vars: vars$A
|
10694
|
+
});
|
10695
|
+
|
10696
|
+
const globalRefs$k = getThemeRefs(globals);
|
10697
|
+
const vars$z = PasswordClass.cssVarList;
|
10698
|
+
|
10699
|
+
const password = {
|
10700
|
+
[vars$z.hostWidth]: refs.width,
|
10701
|
+
[vars$z.hostDirection]: refs.direction,
|
10702
|
+
[vars$z.fontSize]: refs.fontSize,
|
10703
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
10704
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
10705
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
10706
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
10707
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
10708
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
10709
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
10710
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
10711
|
+
[vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10712
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
10713
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
10714
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
10715
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
10716
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
10717
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
10718
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
10719
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
10720
|
+
[vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
|
10721
|
+
[vars$z.revealButtonSize]: refs.toggleButtonSize,
|
10722
|
+
[vars$z.revealButtonColor]: refs.placeholderTextColor,
|
10723
|
+
};
|
10724
|
+
|
10725
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
10726
|
+
__proto__: null,
|
10727
|
+
default: password,
|
10728
|
+
vars: vars$z
|
10729
|
+
});
|
10730
|
+
|
10731
|
+
const vars$y = NumberFieldClass.cssVarList;
|
10732
|
+
|
10733
|
+
const numberField = {
|
10112
10734
|
[vars$y.hostWidth]: refs.width,
|
10113
10735
|
[vars$y.hostMinWidth]: refs.minWidth,
|
10114
10736
|
[vars$y.hostDirection]: refs.direction,
|
10115
10737
|
[vars$y.fontSize]: refs.fontSize,
|
10116
10738
|
[vars$y.fontFamily]: refs.fontFamily,
|
10117
10739
|
[vars$y.labelTextColor]: refs.labelTextColor,
|
10118
|
-
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10119
10740
|
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
10120
10741
|
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
10121
10742
|
[vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
|
@@ -10128,39 +10749,30 @@ const textField = {
|
|
10128
10749
|
[vars$y.inputOutlineColor]: refs.outlineColor,
|
10129
10750
|
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
10130
10751
|
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
10131
|
-
[vars$y.
|
10752
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10132
10753
|
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
10133
|
-
[vars$y.
|
10134
|
-
textAlign: {
|
10135
|
-
right: { [vars$y.inputTextAlign]: 'right' },
|
10136
|
-
left: { [vars$y.inputTextAlign]: 'left' },
|
10137
|
-
center: { [vars$y.inputTextAlign]: 'center' },
|
10138
|
-
},
|
10754
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
10139
10755
|
};
|
10140
10756
|
|
10141
|
-
var
|
10757
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
10142
10758
|
__proto__: null,
|
10143
|
-
default:
|
10144
|
-
textField: textField,
|
10759
|
+
default: numberField,
|
10145
10760
|
vars: vars$y
|
10146
10761
|
});
|
10147
10762
|
|
10148
|
-
const
|
10149
|
-
const vars$x = PasswordClass.cssVarList;
|
10763
|
+
const vars$x = EmailFieldClass.cssVarList;
|
10150
10764
|
|
10151
|
-
const
|
10765
|
+
const emailField = {
|
10152
10766
|
[vars$x.hostWidth]: refs.width,
|
10767
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
10153
10768
|
[vars$x.hostDirection]: refs.direction,
|
10154
10769
|
[vars$x.fontSize]: refs.fontSize,
|
10155
10770
|
[vars$x.fontFamily]: refs.fontFamily,
|
10156
10771
|
[vars$x.labelTextColor]: refs.labelTextColor,
|
10157
10772
|
[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,
|
10162
10773
|
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
10163
|
-
[vars$x.
|
10774
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
10775
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
10164
10776
|
[vars$x.inputBorderWidth]: refs.borderWidth,
|
10165
10777
|
[vars$x.inputBorderStyle]: refs.borderStyle,
|
10166
10778
|
[vars$x.inputBorderColor]: refs.borderColor,
|
@@ -10169,232 +10781,168 @@ const password = {
|
|
10169
10781
|
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
10170
10782
|
[vars$x.inputOutlineColor]: refs.outlineColor,
|
10171
10783
|
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
10172
|
-
[vars$x.
|
10173
|
-
[vars$x.
|
10174
|
-
[vars$x.
|
10784
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
10785
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
10786
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
10175
10787
|
};
|
10176
10788
|
|
10177
|
-
var
|
10789
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
10178
10790
|
__proto__: null,
|
10179
|
-
default:
|
10791
|
+
default: emailField,
|
10180
10792
|
vars: vars$x
|
10181
10793
|
});
|
10182
10794
|
|
10183
|
-
const vars$w =
|
10795
|
+
const vars$w = TextAreaClass.cssVarList;
|
10184
10796
|
|
10185
|
-
const
|
10797
|
+
const textArea = {
|
10186
10798
|
[vars$w.hostWidth]: refs.width,
|
10187
10799
|
[vars$w.hostMinWidth]: refs.minWidth,
|
10188
10800
|
[vars$w.hostDirection]: refs.direction,
|
10189
10801
|
[vars$w.fontSize]: refs.fontSize,
|
10190
10802
|
[vars$w.fontFamily]: refs.fontFamily,
|
10191
10803
|
[vars$w.labelTextColor]: refs.labelTextColor,
|
10804
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
10192
10805
|
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
10806
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
10193
10807
|
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
10194
|
-
[vars$w.
|
10808
|
+
[vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10809
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
10195
10810
|
[vars$w.inputBorderWidth]: refs.borderWidth,
|
10196
10811
|
[vars$w.inputBorderStyle]: refs.borderStyle,
|
10197
10812
|
[vars$w.inputBorderColor]: refs.borderColor,
|
10198
|
-
[vars$w.inputBorderRadius]: refs.borderRadius,
|
10199
10813
|
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
10200
10814
|
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
10201
10815
|
[vars$w.inputOutlineColor]: refs.outlineColor,
|
10202
10816
|
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
10203
|
-
[vars$w.
|
10204
|
-
[vars$w.
|
10205
|
-
|
10206
|
-
|
10817
|
+
[vars$w.inputResizeType]: 'vertical',
|
10818
|
+
[vars$w.inputMinHeight]: '5em',
|
10819
|
+
textAlign: {
|
10820
|
+
right: { [vars$w.inputTextAlign]: 'right' },
|
10821
|
+
left: { [vars$w.inputTextAlign]: 'left' },
|
10822
|
+
center: { [vars$w.inputTextAlign]: 'center' },
|
10823
|
+
},
|
10824
|
+
|
10825
|
+
_readonly: {
|
10826
|
+
[vars$w.inputResizeType]: 'none',
|
10827
|
+
},
|
10207
10828
|
};
|
10208
10829
|
|
10209
|
-
var
|
10830
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
10210
10831
|
__proto__: null,
|
10211
|
-
default:
|
10832
|
+
default: textArea,
|
10212
10833
|
vars: vars$w
|
10213
10834
|
});
|
10214
10835
|
|
10215
|
-
const vars$v =
|
10836
|
+
const vars$v = CheckboxClass.cssVarList;
|
10837
|
+
const checkboxSize = '1.35em';
|
10216
10838
|
|
10217
|
-
const
|
10839
|
+
const checkbox = {
|
10218
10840
|
[vars$v.hostWidth]: refs.width,
|
10219
|
-
[vars$v.hostMinWidth]: refs.minWidth,
|
10220
10841
|
[vars$v.hostDirection]: refs.direction,
|
10221
10842
|
[vars$v.fontSize]: refs.fontSize,
|
10222
10843
|
[vars$v.fontFamily]: refs.fontFamily,
|
10223
10844
|
[vars$v.labelTextColor]: refs.labelTextColor,
|
10224
|
-
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
10225
|
-
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
10226
10845
|
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
10227
|
-
[vars$v.
|
10228
|
-
[vars$v.
|
10229
|
-
[vars$v.
|
10230
|
-
[vars$v.
|
10231
|
-
[vars$v.inputBorderRadius]: refs.borderRadius,
|
10846
|
+
[vars$v.labelFontWeight]: '400',
|
10847
|
+
[vars$v.labelLineHeight]: checkboxSize,
|
10848
|
+
[vars$v.labelSpacing]: '1em',
|
10849
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
10232
10850
|
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
10233
|
-
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
10234
|
-
[vars$v.inputOutlineColor]: refs.outlineColor,
|
10235
10851
|
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
10852
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
10853
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
10854
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
10855
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
10856
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
10857
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
10236
10858
|
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
10237
|
-
[vars$v.
|
10238
|
-
[vars$v.inputHeight]: refs.inputHeight,
|
10239
|
-
};
|
10240
|
-
|
10241
|
-
var emailField$1 = /*#__PURE__*/Object.freeze({
|
10242
|
-
__proto__: null,
|
10243
|
-
default: emailField,
|
10244
|
-
vars: vars$v
|
10245
|
-
});
|
10246
|
-
|
10247
|
-
const vars$u = TextAreaClass.cssVarList;
|
10248
|
-
|
10249
|
-
const textArea = {
|
10250
|
-
[vars$u.hostWidth]: refs.width,
|
10251
|
-
[vars$u.hostMinWidth]: refs.minWidth,
|
10252
|
-
[vars$u.hostDirection]: refs.direction,
|
10253
|
-
[vars$u.fontSize]: refs.fontSize,
|
10254
|
-
[vars$u.fontFamily]: refs.fontFamily,
|
10255
|
-
[vars$u.labelTextColor]: refs.labelTextColor,
|
10256
|
-
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
10257
|
-
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10258
|
-
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
10259
|
-
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
10260
|
-
[vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10261
|
-
[vars$u.inputBorderRadius]: refs.borderRadius,
|
10262
|
-
[vars$u.inputBorderWidth]: refs.borderWidth,
|
10263
|
-
[vars$u.inputBorderStyle]: refs.borderStyle,
|
10264
|
-
[vars$u.inputBorderColor]: refs.borderColor,
|
10265
|
-
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
10266
|
-
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
10267
|
-
[vars$u.inputOutlineColor]: refs.outlineColor,
|
10268
|
-
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
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
|
-
},
|
10280
|
-
};
|
10281
|
-
|
10282
|
-
var textArea$1 = /*#__PURE__*/Object.freeze({
|
10283
|
-
__proto__: null,
|
10284
|
-
default: textArea,
|
10285
|
-
vars: vars$u
|
10286
|
-
});
|
10287
|
-
|
10288
|
-
const vars$t = CheckboxClass.cssVarList;
|
10289
|
-
const checkboxSize = '1.35em';
|
10290
|
-
|
10291
|
-
const checkbox = {
|
10292
|
-
[vars$t.hostWidth]: refs.width,
|
10293
|
-
[vars$t.hostDirection]: refs.direction,
|
10294
|
-
[vars$t.fontSize]: refs.fontSize,
|
10295
|
-
[vars$t.fontFamily]: refs.fontFamily,
|
10296
|
-
[vars$t.labelTextColor]: refs.labelTextColor,
|
10297
|
-
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
10298
|
-
[vars$t.labelFontWeight]: '400',
|
10299
|
-
[vars$t.labelLineHeight]: checkboxSize,
|
10300
|
-
[vars$t.labelSpacing]: '1em',
|
10301
|
-
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
10302
|
-
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
10303
|
-
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
10304
|
-
[vars$t.inputOutlineColor]: refs.outlineColor,
|
10305
|
-
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
10306
|
-
[vars$t.inputBorderRadius]: refs.borderRadius,
|
10307
|
-
[vars$t.inputBorderColor]: refs.borderColor,
|
10308
|
-
[vars$t.inputBorderWidth]: refs.borderWidth,
|
10309
|
-
[vars$t.inputBorderStyle]: refs.borderStyle,
|
10310
|
-
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
10311
|
-
[vars$t.inputSize]: checkboxSize,
|
10859
|
+
[vars$v.inputSize]: checkboxSize,
|
10312
10860
|
|
10313
10861
|
_checked: {
|
10314
|
-
[vars$
|
10862
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
10315
10863
|
},
|
10316
10864
|
|
10317
10865
|
_disabled: {
|
10318
|
-
[vars$
|
10866
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
10319
10867
|
},
|
10320
10868
|
};
|
10321
10869
|
|
10322
10870
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10323
10871
|
__proto__: null,
|
10324
10872
|
default: checkbox,
|
10325
|
-
vars: vars$
|
10873
|
+
vars: vars$v
|
10326
10874
|
});
|
10327
10875
|
|
10328
10876
|
const knobMargin = '2px';
|
10329
10877
|
const checkboxHeight = '1.25em';
|
10330
10878
|
|
10331
|
-
const globalRefs$
|
10332
|
-
const vars$
|
10879
|
+
const globalRefs$j = getThemeRefs(globals);
|
10880
|
+
const vars$u = SwitchToggleClass.cssVarList;
|
10333
10881
|
|
10334
10882
|
const switchToggle = {
|
10335
|
-
[vars$
|
10336
|
-
[vars$
|
10337
|
-
[vars$
|
10338
|
-
[vars$
|
10339
|
-
|
10340
|
-
[vars$
|
10341
|
-
[vars$
|
10342
|
-
[vars$
|
10343
|
-
[vars$
|
10344
|
-
|
10345
|
-
[vars$
|
10346
|
-
[vars$
|
10347
|
-
[vars$
|
10348
|
-
[vars$
|
10349
|
-
[vars$
|
10350
|
-
[vars$
|
10351
|
-
[vars$
|
10352
|
-
|
10353
|
-
[vars$
|
10354
|
-
[vars$
|
10355
|
-
[vars$
|
10356
|
-
[vars$
|
10357
|
-
[vars$
|
10358
|
-
[vars$
|
10359
|
-
|
10360
|
-
[vars$
|
10361
|
-
[vars$
|
10362
|
-
[vars$
|
10363
|
-
[vars$
|
10364
|
-
[vars$
|
10365
|
-
[vars$
|
10883
|
+
[vars$u.hostWidth]: refs.width,
|
10884
|
+
[vars$u.hostDirection]: refs.direction,
|
10885
|
+
[vars$u.fontSize]: refs.fontSize,
|
10886
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
10887
|
+
|
10888
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
10889
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
10890
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
10891
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
10892
|
+
|
10893
|
+
[vars$u.trackBorderStyle]: refs.borderStyle,
|
10894
|
+
[vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10895
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
10896
|
+
[vars$u.trackBackgroundColor]: refs.backgroundColor,
|
10897
|
+
[vars$u.trackBorderRadius]: globalRefs$j.radius.md,
|
10898
|
+
[vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10899
|
+
[vars$u.trackHeight]: checkboxHeight,
|
10900
|
+
|
10901
|
+
[vars$u.knobSize]: `calc(1em - ${knobMargin})`,
|
10902
|
+
[vars$u.knobRadius]: '50%',
|
10903
|
+
[vars$u.knobTopOffset]: '1px',
|
10904
|
+
[vars$u.knobLeftOffset]: knobMargin,
|
10905
|
+
[vars$u.knobColor]: refs.labelTextColor,
|
10906
|
+
[vars$u.knobTransitionDuration]: '0.3s',
|
10907
|
+
|
10908
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10909
|
+
[vars$u.labelFontWeight]: '400',
|
10910
|
+
[vars$u.labelLineHeight]: '1.35em',
|
10911
|
+
[vars$u.labelSpacing]: '1em',
|
10912
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
10913
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10366
10914
|
|
10367
10915
|
_checked: {
|
10368
|
-
[vars$
|
10369
|
-
[vars$
|
10370
|
-
[vars$
|
10371
|
-
[vars$
|
10916
|
+
[vars$u.trackBorderColor]: refs.borderColor,
|
10917
|
+
[vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
|
10918
|
+
[vars$u.knobColor]: refs.valueTextColor,
|
10919
|
+
[vars$u.knobTextColor]: refs.valueTextColor,
|
10372
10920
|
},
|
10373
10921
|
|
10374
10922
|
_disabled: {
|
10375
|
-
[vars$
|
10376
|
-
[vars$
|
10377
|
-
[vars$
|
10378
|
-
[vars$
|
10923
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
10924
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
|
10925
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
10926
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10379
10927
|
_checked: {
|
10380
|
-
[vars$
|
10381
|
-
[vars$
|
10928
|
+
[vars$u.knobColor]: globalRefs$j.colors.surface.light,
|
10929
|
+
[vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
|
10382
10930
|
},
|
10383
10931
|
},
|
10384
10932
|
|
10385
10933
|
_invalid: {
|
10386
|
-
[vars$
|
10387
|
-
[vars$
|
10934
|
+
[vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
|
10935
|
+
[vars$u.knobColor]: globalRefs$j.colors.error.main,
|
10388
10936
|
},
|
10389
10937
|
};
|
10390
10938
|
|
10391
10939
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
10392
10940
|
__proto__: null,
|
10393
10941
|
default: switchToggle,
|
10394
|
-
vars: vars$
|
10942
|
+
vars: vars$u
|
10395
10943
|
});
|
10396
10944
|
|
10397
|
-
const globalRefs$
|
10945
|
+
const globalRefs$i = getThemeRefs(globals);
|
10398
10946
|
|
10399
10947
|
const compVars$4 = ContainerClass.cssVarList;
|
10400
10948
|
|
@@ -10416,7 +10964,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
10416
10964
|
horizontalAlignment,
|
10417
10965
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
10418
10966
|
},
|
10419
|
-
componentName$
|
10967
|
+
componentName$K
|
10420
10968
|
);
|
10421
10969
|
|
10422
10970
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -10426,10 +10974,10 @@ const container = {
|
|
10426
10974
|
|
10427
10975
|
[compVars$4.hostWidth]: '100%',
|
10428
10976
|
[compVars$4.boxShadow]: 'none',
|
10429
|
-
[compVars$4.backgroundColor]: globalRefs$
|
10430
|
-
[compVars$4.color]: globalRefs$
|
10977
|
+
[compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
|
10978
|
+
[compVars$4.color]: globalRefs$i.colors.surface.contrast,
|
10431
10979
|
[compVars$4.borderRadius]: '0px',
|
10432
|
-
[compVars$4.hostDirection]: globalRefs$
|
10980
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
10433
10981
|
|
10434
10982
|
verticalPadding: {
|
10435
10983
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
@@ -10475,34 +11023,34 @@ const container = {
|
|
10475
11023
|
|
10476
11024
|
shadow: {
|
10477
11025
|
sm: {
|
10478
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11026
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
|
10479
11027
|
},
|
10480
11028
|
md: {
|
10481
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11029
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
|
10482
11030
|
},
|
10483
11031
|
lg: {
|
10484
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11032
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
|
10485
11033
|
},
|
10486
11034
|
xl: {
|
10487
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11035
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
|
10488
11036
|
},
|
10489
11037
|
'2xl': {
|
10490
11038
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
10491
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
11039
|
+
[compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
|
10492
11040
|
},
|
10493
11041
|
},
|
10494
11042
|
|
10495
11043
|
borderRadius: {
|
10496
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
10497
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
10498
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
10499
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
10500
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
10501
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
11044
|
+
sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
|
11045
|
+
md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
|
11046
|
+
lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
|
11047
|
+
xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
|
11048
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
|
11049
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
|
10502
11050
|
},
|
10503
11051
|
};
|
10504
11052
|
|
10505
|
-
const vars$
|
11053
|
+
const vars$t = {
|
10506
11054
|
...compVars$4,
|
10507
11055
|
...helperVars$2,
|
10508
11056
|
};
|
@@ -10510,166 +11058,166 @@ const vars$r = {
|
|
10510
11058
|
var container$1 = /*#__PURE__*/Object.freeze({
|
10511
11059
|
__proto__: null,
|
10512
11060
|
default: container,
|
10513
|
-
vars: vars$
|
11061
|
+
vars: vars$t
|
10514
11062
|
});
|
10515
11063
|
|
10516
|
-
const vars$
|
11064
|
+
const vars$s = LogoClass.cssVarList;
|
10517
11065
|
|
10518
11066
|
const logo$2 = {
|
10519
|
-
[vars$
|
11067
|
+
[vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
10520
11068
|
};
|
10521
11069
|
|
10522
11070
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
10523
11071
|
__proto__: null,
|
10524
11072
|
default: logo$2,
|
10525
|
-
vars: vars$
|
11073
|
+
vars: vars$s
|
10526
11074
|
});
|
10527
11075
|
|
10528
|
-
const vars$
|
11076
|
+
const vars$r = TotpImageClass.cssVarList;
|
10529
11077
|
|
10530
11078
|
const logo$1 = {
|
10531
|
-
[vars$
|
11079
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
10532
11080
|
};
|
10533
11081
|
|
10534
11082
|
var totpImage = /*#__PURE__*/Object.freeze({
|
10535
11083
|
__proto__: null,
|
10536
11084
|
default: logo$1,
|
10537
|
-
vars: vars$
|
11085
|
+
vars: vars$r
|
10538
11086
|
});
|
10539
11087
|
|
10540
|
-
const vars$
|
11088
|
+
const vars$q = NotpImageClass.cssVarList;
|
10541
11089
|
|
10542
11090
|
const logo = {
|
10543
|
-
[vars$
|
11091
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
10544
11092
|
};
|
10545
11093
|
|
10546
11094
|
var notpImage = /*#__PURE__*/Object.freeze({
|
10547
11095
|
__proto__: null,
|
10548
11096
|
default: logo,
|
10549
|
-
vars: vars$
|
11097
|
+
vars: vars$q
|
10550
11098
|
});
|
10551
11099
|
|
10552
|
-
const globalRefs$
|
10553
|
-
const vars$
|
11100
|
+
const globalRefs$h = getThemeRefs(globals);
|
11101
|
+
const vars$p = TextClass.cssVarList;
|
10554
11102
|
|
10555
11103
|
const text = {
|
10556
|
-
[vars$
|
10557
|
-
[vars$
|
10558
|
-
[vars$
|
10559
|
-
[vars$
|
11104
|
+
[vars$p.hostDirection]: globalRefs$h.direction,
|
11105
|
+
[vars$p.textLineHeight]: '1.35em',
|
11106
|
+
[vars$p.textAlign]: 'left',
|
11107
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
10560
11108
|
variant: {
|
10561
11109
|
h1: {
|
10562
|
-
[vars$
|
10563
|
-
[vars$
|
10564
|
-
[vars$
|
11110
|
+
[vars$p.fontSize]: globalRefs$h.typography.h1.size,
|
11111
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
|
11112
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h1.font,
|
10565
11113
|
},
|
10566
11114
|
h2: {
|
10567
|
-
[vars$
|
10568
|
-
[vars$
|
10569
|
-
[vars$
|
11115
|
+
[vars$p.fontSize]: globalRefs$h.typography.h2.size,
|
11116
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
|
11117
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h2.font,
|
10570
11118
|
},
|
10571
11119
|
h3: {
|
10572
|
-
[vars$
|
10573
|
-
[vars$
|
10574
|
-
[vars$
|
11120
|
+
[vars$p.fontSize]: globalRefs$h.typography.h3.size,
|
11121
|
+
[vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
|
11122
|
+
[vars$p.fontFamily]: globalRefs$h.typography.h3.font,
|
10575
11123
|
},
|
10576
11124
|
subtitle1: {
|
10577
|
-
[vars$
|
10578
|
-
[vars$
|
10579
|
-
[vars$
|
11125
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
|
11126
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
|
11127
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
|
10580
11128
|
},
|
10581
11129
|
subtitle2: {
|
10582
|
-
[vars$
|
10583
|
-
[vars$
|
10584
|
-
[vars$
|
11130
|
+
[vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
|
11131
|
+
[vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
|
11132
|
+
[vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
|
10585
11133
|
},
|
10586
11134
|
body1: {
|
10587
|
-
[vars$
|
10588
|
-
[vars$
|
10589
|
-
[vars$
|
11135
|
+
[vars$p.fontSize]: globalRefs$h.typography.body1.size,
|
11136
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
|
11137
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body1.font,
|
10590
11138
|
},
|
10591
11139
|
body2: {
|
10592
|
-
[vars$
|
10593
|
-
[vars$
|
10594
|
-
[vars$
|
11140
|
+
[vars$p.fontSize]: globalRefs$h.typography.body2.size,
|
11141
|
+
[vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
|
11142
|
+
[vars$p.fontFamily]: globalRefs$h.typography.body2.font,
|
10595
11143
|
},
|
10596
11144
|
},
|
10597
11145
|
|
10598
11146
|
mode: {
|
10599
11147
|
primary: {
|
10600
|
-
[vars$
|
11148
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.contrast,
|
10601
11149
|
},
|
10602
11150
|
secondary: {
|
10603
|
-
[vars$
|
11151
|
+
[vars$p.textColor]: globalRefs$h.colors.surface.dark,
|
10604
11152
|
},
|
10605
11153
|
error: {
|
10606
|
-
[vars$
|
11154
|
+
[vars$p.textColor]: globalRefs$h.colors.error.main,
|
10607
11155
|
},
|
10608
11156
|
success: {
|
10609
|
-
[vars$
|
11157
|
+
[vars$p.textColor]: globalRefs$h.colors.success.main,
|
10610
11158
|
},
|
10611
11159
|
},
|
10612
11160
|
|
10613
11161
|
textAlign: {
|
10614
|
-
right: { [vars$
|
10615
|
-
left: { [vars$
|
10616
|
-
center: { [vars$
|
11162
|
+
right: { [vars$p.textAlign]: 'right' },
|
11163
|
+
left: { [vars$p.textAlign]: 'left' },
|
11164
|
+
center: { [vars$p.textAlign]: 'center' },
|
10617
11165
|
},
|
10618
11166
|
|
10619
11167
|
_fullWidth: {
|
10620
|
-
[vars$
|
11168
|
+
[vars$p.hostWidth]: '100%',
|
10621
11169
|
},
|
10622
11170
|
|
10623
11171
|
_italic: {
|
10624
|
-
[vars$
|
11172
|
+
[vars$p.fontStyle]: 'italic',
|
10625
11173
|
},
|
10626
11174
|
|
10627
11175
|
_uppercase: {
|
10628
|
-
[vars$
|
11176
|
+
[vars$p.textTransform]: 'uppercase',
|
10629
11177
|
},
|
10630
11178
|
|
10631
11179
|
_lowercase: {
|
10632
|
-
[vars$
|
11180
|
+
[vars$p.textTransform]: 'lowercase',
|
10633
11181
|
},
|
10634
11182
|
};
|
10635
11183
|
|
10636
11184
|
var text$1 = /*#__PURE__*/Object.freeze({
|
10637
11185
|
__proto__: null,
|
10638
11186
|
default: text,
|
10639
|
-
vars: vars$
|
11187
|
+
vars: vars$p
|
10640
11188
|
});
|
10641
11189
|
|
10642
|
-
const globalRefs$
|
10643
|
-
const vars$
|
11190
|
+
const globalRefs$g = getThemeRefs(globals);
|
11191
|
+
const vars$o = LinkClass.cssVarList;
|
10644
11192
|
|
10645
11193
|
const link = {
|
10646
|
-
[vars$
|
10647
|
-
[vars$
|
11194
|
+
[vars$o.hostDirection]: globalRefs$g.direction,
|
11195
|
+
[vars$o.cursor]: 'pointer',
|
10648
11196
|
|
10649
|
-
[vars$
|
11197
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
10650
11198
|
|
10651
11199
|
textAlign: {
|
10652
|
-
right: { [vars$
|
10653
|
-
left: { [vars$
|
10654
|
-
center: { [vars$
|
11200
|
+
right: { [vars$o.textAlign]: 'right' },
|
11201
|
+
left: { [vars$o.textAlign]: 'left' },
|
11202
|
+
center: { [vars$o.textAlign]: 'center' },
|
10655
11203
|
},
|
10656
11204
|
|
10657
11205
|
_fullWidth: {
|
10658
|
-
[vars$
|
11206
|
+
[vars$o.hostWidth]: '100%',
|
10659
11207
|
},
|
10660
11208
|
|
10661
11209
|
mode: {
|
10662
11210
|
primary: {
|
10663
|
-
[vars$
|
11211
|
+
[vars$o.textColor]: globalRefs$g.colors.primary.main,
|
10664
11212
|
},
|
10665
11213
|
secondary: {
|
10666
|
-
[vars$
|
11214
|
+
[vars$o.textColor]: globalRefs$g.colors.secondary.main,
|
10667
11215
|
},
|
10668
11216
|
error: {
|
10669
|
-
[vars$
|
11217
|
+
[vars$o.textColor]: globalRefs$g.colors.error.main,
|
10670
11218
|
},
|
10671
11219
|
success: {
|
10672
|
-
[vars$
|
11220
|
+
[vars$o.textColor]: globalRefs$g.colors.success.main,
|
10673
11221
|
},
|
10674
11222
|
},
|
10675
11223
|
};
|
@@ -10677,10 +11225,10 @@ const link = {
|
|
10677
11225
|
var link$1 = /*#__PURE__*/Object.freeze({
|
10678
11226
|
__proto__: null,
|
10679
11227
|
default: link,
|
10680
|
-
vars: vars$
|
11228
|
+
vars: vars$o
|
10681
11229
|
});
|
10682
11230
|
|
10683
|
-
const globalRefs$
|
11231
|
+
const globalRefs$f = getThemeRefs(globals);
|
10684
11232
|
const compVars$3 = DividerClass.cssVarList;
|
10685
11233
|
|
10686
11234
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -10688,18 +11236,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
10688
11236
|
thickness: '2px',
|
10689
11237
|
spacing: '10px',
|
10690
11238
|
},
|
10691
|
-
componentName$
|
11239
|
+
componentName$I
|
10692
11240
|
);
|
10693
11241
|
|
10694
11242
|
const divider = {
|
10695
11243
|
...helperTheme$1,
|
10696
11244
|
|
10697
|
-
[compVars$3.hostDirection]: globalRefs$
|
11245
|
+
[compVars$3.hostDirection]: globalRefs$f.direction,
|
10698
11246
|
[compVars$3.alignItems]: 'center',
|
10699
11247
|
[compVars$3.flexDirection]: 'row',
|
10700
11248
|
[compVars$3.alignSelf]: 'stretch',
|
10701
11249
|
[compVars$3.hostWidth]: '100%',
|
10702
|
-
[compVars$3.stripeColor]: globalRefs$
|
11250
|
+
[compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
|
10703
11251
|
[compVars$3.stripeColorOpacity]: '0.5',
|
10704
11252
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
10705
11253
|
[compVars$3.labelTextWidth]: 'fit-content',
|
@@ -10719,7 +11267,7 @@ const divider = {
|
|
10719
11267
|
},
|
10720
11268
|
};
|
10721
11269
|
|
10722
|
-
const vars$
|
11270
|
+
const vars$n = {
|
10723
11271
|
...compVars$3,
|
10724
11272
|
...helperVars$1,
|
10725
11273
|
};
|
@@ -10727,111 +11275,111 @@ const vars$l = {
|
|
10727
11275
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
10728
11276
|
__proto__: null,
|
10729
11277
|
default: divider,
|
10730
|
-
vars: vars$
|
11278
|
+
vars: vars$n
|
10731
11279
|
});
|
10732
11280
|
|
10733
|
-
const vars$
|
11281
|
+
const vars$m = PasscodeClass.cssVarList;
|
10734
11282
|
|
10735
11283
|
const passcode = {
|
10736
|
-
[vars$
|
10737
|
-
[vars$
|
10738
|
-
[vars$
|
10739
|
-
[vars$
|
10740
|
-
[vars$
|
10741
|
-
[vars$
|
10742
|
-
[vars$
|
10743
|
-
[vars$
|
10744
|
-
[vars$
|
10745
|
-
[vars$
|
10746
|
-
[vars$
|
10747
|
-
[vars$
|
10748
|
-
[vars$
|
10749
|
-
[vars$
|
10750
|
-
[vars$
|
11284
|
+
[vars$m.hostDirection]: refs.direction,
|
11285
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
11286
|
+
[vars$m.fontSize]: refs.fontSize,
|
11287
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
11288
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
11289
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
11290
|
+
[vars$m.digitValueTextColor]: refs.valueTextColor,
|
11291
|
+
[vars$m.digitPadding]: '0',
|
11292
|
+
[vars$m.digitTextAlign]: 'center',
|
11293
|
+
[vars$m.digitSpacing]: '4px',
|
11294
|
+
[vars$m.hostWidth]: refs.width,
|
11295
|
+
[vars$m.digitOutlineColor]: 'transparent',
|
11296
|
+
[vars$m.digitOutlineWidth]: refs.outlineWidth,
|
11297
|
+
[vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
11298
|
+
[vars$m.digitSize]: refs.inputHeight,
|
10751
11299
|
|
10752
11300
|
size: {
|
10753
|
-
xs: { [vars$
|
10754
|
-
sm: { [vars$
|
10755
|
-
md: { [vars$
|
10756
|
-
lg: { [vars$
|
11301
|
+
xs: { [vars$m.spinnerSize]: '15px' },
|
11302
|
+
sm: { [vars$m.spinnerSize]: '20px' },
|
11303
|
+
md: { [vars$m.spinnerSize]: '20px' },
|
11304
|
+
lg: { [vars$m.spinnerSize]: '20px' },
|
10757
11305
|
},
|
10758
11306
|
|
10759
11307
|
_hideCursor: {
|
10760
|
-
[vars$
|
11308
|
+
[vars$m.digitCaretTextColor]: 'transparent',
|
10761
11309
|
},
|
10762
11310
|
|
10763
11311
|
_loading: {
|
10764
|
-
[vars$
|
11312
|
+
[vars$m.overlayOpacity]: refs.overlayOpacity,
|
10765
11313
|
},
|
10766
11314
|
};
|
10767
11315
|
|
10768
11316
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
10769
11317
|
__proto__: null,
|
10770
11318
|
default: passcode,
|
10771
|
-
vars: vars$
|
11319
|
+
vars: vars$m
|
10772
11320
|
});
|
10773
11321
|
|
10774
|
-
const globalRefs$
|
10775
|
-
const vars$
|
11322
|
+
const globalRefs$e = getThemeRefs(globals);
|
11323
|
+
const vars$l = LoaderLinearClass.cssVarList;
|
10776
11324
|
|
10777
11325
|
const loaderLinear = {
|
10778
|
-
[vars$
|
10779
|
-
[vars$
|
11326
|
+
[vars$l.hostDisplay]: 'inline-block',
|
11327
|
+
[vars$l.hostWidth]: '100%',
|
10780
11328
|
|
10781
|
-
[vars$
|
10782
|
-
[vars$
|
11329
|
+
[vars$l.barColor]: globalRefs$e.colors.surface.contrast,
|
11330
|
+
[vars$l.barWidth]: '20%',
|
10783
11331
|
|
10784
|
-
[vars$
|
10785
|
-
[vars$
|
11332
|
+
[vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
|
11333
|
+
[vars$l.barBorderRadius]: '4px',
|
10786
11334
|
|
10787
|
-
[vars$
|
10788
|
-
[vars$
|
10789
|
-
[vars$
|
10790
|
-
[vars$
|
11335
|
+
[vars$l.animationDuration]: '2s',
|
11336
|
+
[vars$l.animationTimingFunction]: 'linear',
|
11337
|
+
[vars$l.animationIterationCount]: 'infinite',
|
11338
|
+
[vars$l.verticalPadding]: '0.25em',
|
10791
11339
|
|
10792
11340
|
size: {
|
10793
|
-
xs: { [vars$
|
10794
|
-
sm: { [vars$
|
10795
|
-
md: { [vars$
|
10796
|
-
lg: { [vars$
|
11341
|
+
xs: { [vars$l.barHeight]: '2px' },
|
11342
|
+
sm: { [vars$l.barHeight]: '4px' },
|
11343
|
+
md: { [vars$l.barHeight]: '6px' },
|
11344
|
+
lg: { [vars$l.barHeight]: '8px' },
|
10797
11345
|
},
|
10798
11346
|
|
10799
11347
|
mode: {
|
10800
11348
|
primary: {
|
10801
|
-
[vars$
|
11349
|
+
[vars$l.barColor]: globalRefs$e.colors.primary.main,
|
10802
11350
|
},
|
10803
11351
|
secondary: {
|
10804
|
-
[vars$
|
11352
|
+
[vars$l.barColor]: globalRefs$e.colors.secondary.main,
|
10805
11353
|
},
|
10806
11354
|
},
|
10807
11355
|
|
10808
11356
|
_hidden: {
|
10809
|
-
[vars$
|
11357
|
+
[vars$l.hostDisplay]: 'none',
|
10810
11358
|
},
|
10811
11359
|
};
|
10812
11360
|
|
10813
11361
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
10814
11362
|
__proto__: null,
|
10815
11363
|
default: loaderLinear,
|
10816
|
-
vars: vars$
|
11364
|
+
vars: vars$l
|
10817
11365
|
});
|
10818
11366
|
|
10819
|
-
const globalRefs$
|
11367
|
+
const globalRefs$d = getThemeRefs(globals);
|
10820
11368
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
10821
11369
|
|
10822
11370
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
10823
11371
|
{
|
10824
|
-
spinnerColor: globalRefs$
|
11372
|
+
spinnerColor: globalRefs$d.colors.surface.contrast,
|
10825
11373
|
mode: {
|
10826
11374
|
primary: {
|
10827
|
-
spinnerColor: globalRefs$
|
11375
|
+
spinnerColor: globalRefs$d.colors.primary.main,
|
10828
11376
|
},
|
10829
11377
|
secondary: {
|
10830
|
-
spinnerColor: globalRefs$
|
11378
|
+
spinnerColor: globalRefs$d.colors.secondary.main,
|
10831
11379
|
},
|
10832
11380
|
},
|
10833
11381
|
},
|
10834
|
-
componentName$
|
11382
|
+
componentName$L
|
10835
11383
|
);
|
10836
11384
|
|
10837
11385
|
const loaderRadial = {
|
@@ -10860,7 +11408,7 @@ const loaderRadial = {
|
|
10860
11408
|
[compVars$2.hostDisplay]: 'none',
|
10861
11409
|
},
|
10862
11410
|
};
|
10863
|
-
const vars$
|
11411
|
+
const vars$k = {
|
10864
11412
|
...compVars$2,
|
10865
11413
|
...helperVars,
|
10866
11414
|
};
|
@@ -10868,97 +11416,97 @@ const vars$i = {
|
|
10868
11416
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
10869
11417
|
__proto__: null,
|
10870
11418
|
default: loaderRadial,
|
10871
|
-
vars: vars$
|
11419
|
+
vars: vars$k
|
10872
11420
|
});
|
10873
11421
|
|
10874
|
-
const globalRefs$
|
10875
|
-
const vars$
|
11422
|
+
const globalRefs$c = getThemeRefs(globals);
|
11423
|
+
const vars$j = ComboBoxClass.cssVarList;
|
10876
11424
|
|
10877
11425
|
const comboBox = {
|
10878
|
-
[vars$
|
10879
|
-
[vars$
|
10880
|
-
[vars$
|
10881
|
-
[vars$
|
10882
|
-
[vars$
|
10883
|
-
[vars$
|
10884
|
-
[vars$
|
10885
|
-
[vars$
|
10886
|
-
[vars$
|
10887
|
-
[vars$
|
10888
|
-
[vars$
|
10889
|
-
[vars$
|
10890
|
-
[vars$
|
10891
|
-
[vars$
|
10892
|
-
[vars$
|
10893
|
-
[vars$
|
10894
|
-
[vars$
|
10895
|
-
[vars$
|
10896
|
-
[vars$
|
10897
|
-
[vars$
|
10898
|
-
[vars$
|
10899
|
-
[vars$
|
10900
|
-
[vars$
|
10901
|
-
[vars$
|
10902
|
-
[vars$
|
10903
|
-
[vars$
|
11426
|
+
[vars$j.hostWidth]: refs.width,
|
11427
|
+
[vars$j.hostDirection]: refs.direction,
|
11428
|
+
[vars$j.fontSize]: refs.fontSize,
|
11429
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
11430
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
11431
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
11432
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
11433
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
11434
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
11435
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
11436
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
11437
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
11438
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
11439
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
11440
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
11441
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
11442
|
+
[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11443
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
11444
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
11445
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
11446
|
+
[vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
|
11447
|
+
[vars$j.inputDropdownButtonCursor]: 'pointer',
|
11448
|
+
[vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11449
|
+
[vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
|
11450
|
+
[vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
|
11451
|
+
[vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
|
10904
11452
|
|
10905
11453
|
_readonly: {
|
10906
|
-
[vars$
|
11454
|
+
[vars$j.inputDropdownButtonCursor]: 'default',
|
10907
11455
|
},
|
10908
11456
|
|
10909
11457
|
// Overlay theme exposed via the component:
|
10910
|
-
[vars$
|
10911
|
-
[vars$
|
10912
|
-
[vars$
|
10913
|
-
[vars$
|
10914
|
-
[vars$
|
10915
|
-
[vars$
|
11458
|
+
[vars$j.overlayFontSize]: refs.fontSize,
|
11459
|
+
[vars$j.overlayFontFamily]: refs.fontFamily,
|
11460
|
+
[vars$j.overlayCursor]: 'pointer',
|
11461
|
+
[vars$j.overlayItemBoxShadow]: 'none',
|
11462
|
+
[vars$j.overlayBackground]: refs.backgroundColor,
|
11463
|
+
[vars$j.overlayTextColor]: refs.valueTextColor,
|
10916
11464
|
|
10917
11465
|
// Overlay direct theme:
|
10918
|
-
[vars$
|
10919
|
-
[vars$
|
11466
|
+
[vars$j.overlay.minHeight]: '400px',
|
11467
|
+
[vars$j.overlay.margin]: '0',
|
10920
11468
|
};
|
10921
11469
|
|
10922
11470
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
10923
11471
|
__proto__: null,
|
10924
11472
|
comboBox: comboBox,
|
10925
11473
|
default: comboBox,
|
10926
|
-
vars: vars$
|
11474
|
+
vars: vars$j
|
10927
11475
|
});
|
10928
11476
|
|
10929
|
-
const vars$
|
11477
|
+
const vars$i = ImageClass.cssVarList;
|
10930
11478
|
|
10931
11479
|
const image = {};
|
10932
11480
|
|
10933
11481
|
var image$1 = /*#__PURE__*/Object.freeze({
|
10934
11482
|
__proto__: null,
|
10935
11483
|
default: image,
|
10936
|
-
vars: vars$
|
11484
|
+
vars: vars$i
|
10937
11485
|
});
|
10938
11486
|
|
10939
|
-
const vars$
|
11487
|
+
const vars$h = PhoneFieldClass.cssVarList;
|
10940
11488
|
|
10941
11489
|
const phoneField = {
|
10942
|
-
[vars$
|
10943
|
-
[vars$
|
10944
|
-
[vars$
|
10945
|
-
[vars$
|
10946
|
-
[vars$
|
10947
|
-
[vars$
|
10948
|
-
[vars$
|
10949
|
-
[vars$
|
10950
|
-
[vars$
|
10951
|
-
[vars$
|
10952
|
-
[vars$
|
10953
|
-
[vars$
|
10954
|
-
[vars$
|
10955
|
-
[vars$
|
10956
|
-
[vars$
|
10957
|
-
[vars$
|
10958
|
-
[vars$
|
10959
|
-
[vars$
|
10960
|
-
[vars$
|
10961
|
-
[vars$
|
11490
|
+
[vars$h.hostWidth]: refs.width,
|
11491
|
+
[vars$h.hostDirection]: refs.direction,
|
11492
|
+
[vars$h.fontSize]: refs.fontSize,
|
11493
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
11494
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
11495
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
11496
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
11497
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
11498
|
+
[vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11499
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
11500
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
11501
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
11502
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
11503
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
11504
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
11505
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
11506
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
11507
|
+
[vars$h.phoneInputWidth]: refs.minWidth,
|
11508
|
+
[vars$h.countryCodeInputWidth]: '5em',
|
11509
|
+
[vars$h.countryCodeDropdownWidth]: '20em',
|
10962
11510
|
|
10963
11511
|
// '@overlay': {
|
10964
11512
|
// overlayItemBackgroundColor: 'red'
|
@@ -10968,169 +11516,172 @@ const phoneField = {
|
|
10968
11516
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
10969
11517
|
__proto__: null,
|
10970
11518
|
default: phoneField,
|
10971
|
-
vars: vars$
|
11519
|
+
vars: vars$h
|
10972
11520
|
});
|
10973
11521
|
|
10974
|
-
const vars$
|
11522
|
+
const vars$g = PhoneFieldInputBoxClass.cssVarList;
|
10975
11523
|
|
10976
11524
|
const phoneInputBoxField = {
|
10977
|
-
[vars$
|
10978
|
-
[vars$
|
10979
|
-
[vars$
|
10980
|
-
[vars$
|
10981
|
-
[vars$
|
10982
|
-
[vars$
|
10983
|
-
[vars$
|
10984
|
-
[vars$
|
10985
|
-
[vars$
|
10986
|
-
[vars$
|
10987
|
-
[vars$
|
10988
|
-
[vars$
|
10989
|
-
[vars$
|
10990
|
-
[vars$
|
10991
|
-
[vars$
|
10992
|
-
[vars$
|
10993
|
-
[vars$
|
10994
|
-
[vars$
|
11525
|
+
[vars$g.hostWidth]: '16em',
|
11526
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
11527
|
+
[vars$g.hostDirection]: refs.direction,
|
11528
|
+
[vars$g.fontSize]: refs.fontSize,
|
11529
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
11530
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
11531
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
11532
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
11533
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
11534
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11535
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
11536
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
11537
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
11538
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
11539
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
11540
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
11541
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
11542
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
10995
11543
|
_fullWidth: {
|
10996
|
-
[vars$
|
11544
|
+
[vars$g.hostWidth]: refs.width,
|
10997
11545
|
},
|
10998
11546
|
};
|
10999
11547
|
|
11000
11548
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
11001
11549
|
__proto__: null,
|
11002
11550
|
default: phoneInputBoxField,
|
11003
|
-
vars: vars$
|
11551
|
+
vars: vars$g
|
11004
11552
|
});
|
11005
11553
|
|
11006
|
-
const
|
11554
|
+
const globalRefs$b = getThemeRefs(globals);
|
11555
|
+
const vars$f = NewPasswordClass.cssVarList;
|
11007
11556
|
|
11008
11557
|
const newPassword = {
|
11009
|
-
[vars$
|
11010
|
-
[vars$
|
11011
|
-
[vars$
|
11012
|
-
[vars$
|
11013
|
-
[vars$
|
11014
|
-
[vars$
|
11015
|
-
[vars$
|
11558
|
+
[vars$f.hostWidth]: refs.width,
|
11559
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
11560
|
+
[vars$f.hostDirection]: refs.direction,
|
11561
|
+
[vars$f.fontSize]: refs.fontSize,
|
11562
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
11563
|
+
[vars$f.spaceBetweenInputs]: '1em',
|
11564
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
11565
|
+
[vars$f.policyPreviewBackgroundColor]: 'none',
|
11566
|
+
[vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
|
11016
11567
|
|
11017
11568
|
_required: {
|
11018
11569
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
11019
11570
|
// That's why we fake the required indicator on each input.
|
11020
11571
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
11021
|
-
[vars$
|
11572
|
+
[vars$f.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
11022
11573
|
},
|
11023
11574
|
};
|
11024
11575
|
|
11025
11576
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
11026
11577
|
__proto__: null,
|
11027
11578
|
default: newPassword,
|
11028
|
-
vars: vars$
|
11579
|
+
vars: vars$f
|
11029
11580
|
});
|
11030
11581
|
|
11031
|
-
const vars$
|
11582
|
+
const vars$e = UploadFileClass.cssVarList;
|
11032
11583
|
|
11033
11584
|
const uploadFile = {
|
11034
|
-
[vars$
|
11035
|
-
[vars$
|
11036
|
-
[vars$
|
11585
|
+
[vars$e.hostDirection]: refs.direction,
|
11586
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
11587
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
11037
11588
|
|
11038
|
-
[vars$
|
11589
|
+
[vars$e.iconSize]: '2em',
|
11039
11590
|
|
11040
|
-
[vars$
|
11041
|
-
[vars$
|
11591
|
+
[vars$e.hostPadding]: '0.75em',
|
11592
|
+
[vars$e.gap]: '0.5em',
|
11042
11593
|
|
11043
|
-
[vars$
|
11044
|
-
[vars$
|
11045
|
-
[vars$
|
11594
|
+
[vars$e.fontSize]: '16px',
|
11595
|
+
[vars$e.titleFontWeight]: '500',
|
11596
|
+
[vars$e.lineHeight]: '1em',
|
11046
11597
|
|
11047
|
-
[vars$
|
11048
|
-
[vars$
|
11049
|
-
[vars$
|
11050
|
-
[vars$
|
11598
|
+
[vars$e.borderWidth]: refs.borderWidth,
|
11599
|
+
[vars$e.borderColor]: refs.borderColor,
|
11600
|
+
[vars$e.borderRadius]: refs.borderRadius,
|
11601
|
+
[vars$e.borderStyle]: 'dashed',
|
11051
11602
|
|
11052
11603
|
_required: {
|
11053
|
-
[vars$
|
11604
|
+
[vars$e.requiredIndicator]: refs.requiredIndicator,
|
11054
11605
|
},
|
11055
11606
|
|
11056
11607
|
size: {
|
11057
11608
|
xs: {
|
11058
|
-
[vars$
|
11059
|
-
[vars$
|
11060
|
-
[vars$
|
11061
|
-
[vars$
|
11062
|
-
[vars$
|
11609
|
+
[vars$e.hostHeight]: '196px',
|
11610
|
+
[vars$e.hostWidth]: '200px',
|
11611
|
+
[vars$e.titleFontSize]: '0.875em',
|
11612
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
11613
|
+
[vars$e.lineHeight]: '1.25em',
|
11063
11614
|
},
|
11064
11615
|
sm: {
|
11065
|
-
[vars$
|
11066
|
-
[vars$
|
11067
|
-
[vars$
|
11068
|
-
[vars$
|
11069
|
-
[vars$
|
11616
|
+
[vars$e.hostHeight]: '216px',
|
11617
|
+
[vars$e.hostWidth]: '230px',
|
11618
|
+
[vars$e.titleFontSize]: '1em',
|
11619
|
+
[vars$e.descriptionFontSize]: '0.875em',
|
11620
|
+
[vars$e.lineHeight]: '1.25em',
|
11070
11621
|
},
|
11071
11622
|
md: {
|
11072
|
-
[vars$
|
11073
|
-
[vars$
|
11074
|
-
[vars$
|
11075
|
-
[vars$
|
11076
|
-
[vars$
|
11623
|
+
[vars$e.hostHeight]: '256px',
|
11624
|
+
[vars$e.hostWidth]: '312px',
|
11625
|
+
[vars$e.titleFontSize]: '1.125em',
|
11626
|
+
[vars$e.descriptionFontSize]: '1em',
|
11627
|
+
[vars$e.lineHeight]: '1.5em',
|
11077
11628
|
},
|
11078
11629
|
lg: {
|
11079
|
-
[vars$
|
11080
|
-
[vars$
|
11081
|
-
[vars$
|
11082
|
-
[vars$
|
11083
|
-
[vars$
|
11630
|
+
[vars$e.hostHeight]: '280px',
|
11631
|
+
[vars$e.hostWidth]: '336px',
|
11632
|
+
[vars$e.titleFontSize]: '1.125em',
|
11633
|
+
[vars$e.descriptionFontSize]: '1.125em',
|
11634
|
+
[vars$e.lineHeight]: '1.75em',
|
11084
11635
|
},
|
11085
11636
|
},
|
11086
11637
|
|
11087
11638
|
_fullWidth: {
|
11088
|
-
[vars$
|
11639
|
+
[vars$e.hostWidth]: refs.width,
|
11089
11640
|
},
|
11090
11641
|
};
|
11091
11642
|
|
11092
11643
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
11093
11644
|
__proto__: null,
|
11094
11645
|
default: uploadFile,
|
11095
|
-
vars: vars$
|
11646
|
+
vars: vars$e
|
11096
11647
|
});
|
11097
11648
|
|
11098
|
-
const globalRefs$
|
11649
|
+
const globalRefs$a = getThemeRefs(globals);
|
11099
11650
|
|
11100
|
-
const vars$
|
11651
|
+
const vars$d = ButtonSelectionGroupItemClass.cssVarList;
|
11101
11652
|
|
11102
11653
|
const buttonSelectionGroupItem = {
|
11103
|
-
[vars$
|
11104
|
-
[vars$
|
11105
|
-
[vars$
|
11106
|
-
[vars$
|
11107
|
-
[vars$
|
11108
|
-
[vars$
|
11109
|
-
[vars$
|
11110
|
-
[vars$
|
11654
|
+
[vars$d.hostDirection]: 'inherit',
|
11655
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
|
11656
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
11657
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.light,
|
11658
|
+
[vars$d.borderStyle]: 'solid',
|
11659
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
11660
|
+
[vars$d.outlineColor]: 'transparent',
|
11661
|
+
[vars$d.borderWidth]: globalRefs$a.border.xs,
|
11111
11662
|
|
11112
11663
|
_hover: {
|
11113
|
-
[vars$
|
11664
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
|
11114
11665
|
},
|
11115
11666
|
|
11116
11667
|
_focused: {
|
11117
|
-
[vars$
|
11668
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.light,
|
11118
11669
|
},
|
11119
11670
|
|
11120
11671
|
_selected: {
|
11121
|
-
[vars$
|
11122
|
-
[vars$
|
11123
|
-
[vars$
|
11672
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
|
11673
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
|
11674
|
+
[vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
|
11124
11675
|
},
|
11125
11676
|
};
|
11126
11677
|
|
11127
11678
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
11128
11679
|
__proto__: null,
|
11129
11680
|
default: buttonSelectionGroupItem,
|
11130
|
-
vars: vars$
|
11681
|
+
vars: vars$d
|
11131
11682
|
});
|
11132
11683
|
|
11133
|
-
const globalRefs$
|
11684
|
+
const globalRefs$9 = getThemeRefs(globals);
|
11134
11685
|
|
11135
11686
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
11136
11687
|
[vars.hostDirection]: refs.direction,
|
@@ -11138,84 +11689,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
11138
11689
|
[vars.labelTextColor]: refs.labelTextColor,
|
11139
11690
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
11140
11691
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
11141
|
-
[vars.itemsSpacing]: globalRefs$
|
11692
|
+
[vars.itemsSpacing]: globalRefs$9.spacing.sm,
|
11142
11693
|
[vars.hostWidth]: refs.width,
|
11143
11694
|
});
|
11144
11695
|
|
11145
|
-
const vars$
|
11696
|
+
const vars$c = ButtonSelectionGroupClass.cssVarList;
|
11146
11697
|
|
11147
11698
|
const buttonSelectionGroup = {
|
11148
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11699
|
+
...createBaseButtonSelectionGroupMappings(vars$c),
|
11149
11700
|
};
|
11150
11701
|
|
11151
11702
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
11152
11703
|
__proto__: null,
|
11153
11704
|
default: buttonSelectionGroup,
|
11154
|
-
vars: vars$
|
11705
|
+
vars: vars$c
|
11155
11706
|
});
|
11156
11707
|
|
11157
|
-
const vars$
|
11708
|
+
const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
|
11158
11709
|
|
11159
11710
|
const buttonMultiSelectionGroup = {
|
11160
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11711
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
11161
11712
|
};
|
11162
11713
|
|
11163
11714
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
11164
11715
|
__proto__: null,
|
11165
11716
|
default: buttonMultiSelectionGroup,
|
11166
|
-
vars: vars$
|
11717
|
+
vars: vars$b
|
11167
11718
|
});
|
11168
11719
|
|
11169
|
-
const globalRefs$
|
11720
|
+
const globalRefs$8 = getThemeRefs(globals);
|
11170
11721
|
|
11171
11722
|
const compVars$1 = ModalClass.cssVarList;
|
11172
11723
|
|
11173
11724
|
const modal = {
|
11174
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
11175
|
-
[compVars$1.overlayShadow]: globalRefs$
|
11725
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
|
11726
|
+
[compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
|
11176
11727
|
[compVars$1.overlayWidth]: '540px',
|
11177
11728
|
};
|
11178
11729
|
|
11179
|
-
const vars$
|
11730
|
+
const vars$a = {
|
11180
11731
|
...compVars$1,
|
11181
11732
|
};
|
11182
11733
|
|
11183
11734
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
11184
11735
|
__proto__: null,
|
11185
11736
|
default: modal,
|
11186
|
-
vars: vars$
|
11737
|
+
vars: vars$a
|
11187
11738
|
});
|
11188
11739
|
|
11189
|
-
const globalRefs$
|
11190
|
-
const vars$
|
11740
|
+
const globalRefs$7 = getThemeRefs(globals);
|
11741
|
+
const vars$9 = GridClass.cssVarList;
|
11191
11742
|
|
11192
11743
|
const grid = {
|
11193
|
-
[vars$
|
11194
|
-
[vars$
|
11195
|
-
[vars$
|
11196
|
-
[vars$
|
11197
|
-
[vars$
|
11744
|
+
[vars$9.hostWidth]: '100%',
|
11745
|
+
[vars$9.hostHeight]: '100%',
|
11746
|
+
[vars$9.hostMinHeight]: '400px',
|
11747
|
+
[vars$9.fontWeight]: '400',
|
11748
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
11198
11749
|
|
11199
|
-
[vars$
|
11200
|
-
[vars$
|
11750
|
+
[vars$9.fontSize]: refs.fontSize,
|
11751
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
11201
11752
|
|
11202
|
-
[vars$
|
11203
|
-
[vars$
|
11204
|
-
[vars$
|
11753
|
+
[vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
|
11754
|
+
[vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
|
11755
|
+
[vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
|
11205
11756
|
|
11206
|
-
[vars$
|
11207
|
-
[vars$
|
11208
|
-
[vars$
|
11209
|
-
[vars$
|
11757
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
11758
|
+
[vars$9.borderStyle]: refs.borderStyle,
|
11759
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
11760
|
+
[vars$9.borderColor]: 'transparent',
|
11210
11761
|
|
11211
|
-
[vars$
|
11212
|
-
[vars$
|
11762
|
+
[vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
|
11763
|
+
[vars$9.separatorColor]: globalRefs$7.colors.surface.light,
|
11213
11764
|
|
11214
|
-
[vars$
|
11215
|
-
[vars$
|
11765
|
+
[vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
|
11766
|
+
[vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
|
11216
11767
|
|
11217
11768
|
_bordered: {
|
11218
|
-
[vars$
|
11769
|
+
[vars$9.borderColor]: refs.borderColor,
|
11219
11770
|
},
|
11220
11771
|
};
|
11221
11772
|
|
@@ -11223,53 +11774,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
11223
11774
|
__proto__: null,
|
11224
11775
|
default: grid,
|
11225
11776
|
grid: grid,
|
11226
|
-
vars: vars$
|
11777
|
+
vars: vars$9
|
11227
11778
|
});
|
11228
11779
|
|
11229
|
-
const globalRefs$
|
11230
|
-
const vars$
|
11780
|
+
const globalRefs$6 = getThemeRefs(globals);
|
11781
|
+
const vars$8 = NotificationCardClass.cssVarList;
|
11231
11782
|
|
11232
11783
|
const shadowColor = '#00000020';
|
11233
11784
|
|
11234
11785
|
const notification = {
|
11235
|
-
[vars$
|
11236
|
-
[vars$
|
11237
|
-
[vars$
|
11238
|
-
[vars$
|
11239
|
-
[vars$
|
11240
|
-
[vars$
|
11241
|
-
[vars$
|
11242
|
-
[vars$
|
11243
|
-
[vars$
|
11786
|
+
[vars$8.hostMinWidth]: '415px',
|
11787
|
+
[vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
|
11788
|
+
[vars$8.fontSize]: globalRefs$6.typography.body1.size,
|
11789
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
11790
|
+
[vars$8.textColor]: globalRefs$6.colors.surface.contrast,
|
11791
|
+
[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
|
11792
|
+
[vars$8.verticalPadding]: '0.625em',
|
11793
|
+
[vars$8.horizontalPadding]: '1.5em',
|
11794
|
+
[vars$8.borderRadius]: globalRefs$6.radius.xs,
|
11244
11795
|
|
11245
11796
|
_bordered: {
|
11246
|
-
[vars$
|
11247
|
-
[vars$
|
11248
|
-
[vars$
|
11797
|
+
[vars$8.borderWidth]: globalRefs$6.border.sm,
|
11798
|
+
[vars$8.borderStyle]: 'solid',
|
11799
|
+
[vars$8.borderColor]: 'transparent',
|
11249
11800
|
},
|
11250
11801
|
|
11251
11802
|
size: {
|
11252
|
-
xs: { [vars$
|
11253
|
-
sm: { [vars$
|
11254
|
-
md: { [vars$
|
11255
|
-
lg: { [vars$
|
11803
|
+
xs: { [vars$8.fontSize]: '12px' },
|
11804
|
+
sm: { [vars$8.fontSize]: '14px' },
|
11805
|
+
md: { [vars$8.fontSize]: '16px' },
|
11806
|
+
lg: { [vars$8.fontSize]: '18px' },
|
11256
11807
|
},
|
11257
11808
|
|
11258
11809
|
mode: {
|
11259
11810
|
primary: {
|
11260
|
-
[vars$
|
11261
|
-
[vars$
|
11262
|
-
[vars$
|
11811
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
|
11812
|
+
[vars$8.textColor]: globalRefs$6.colors.primary.contrast,
|
11813
|
+
[vars$8.borderColor]: globalRefs$6.colors.primary.light,
|
11263
11814
|
},
|
11264
11815
|
success: {
|
11265
|
-
[vars$
|
11266
|
-
[vars$
|
11267
|
-
[vars$
|
11816
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.success.main,
|
11817
|
+
[vars$8.textColor]: globalRefs$6.colors.success.contrast,
|
11818
|
+
[vars$8.borderColor]: globalRefs$6.colors.success.light,
|
11268
11819
|
},
|
11269
11820
|
error: {
|
11270
|
-
[vars$
|
11271
|
-
[vars$
|
11272
|
-
[vars$
|
11821
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.error.main,
|
11822
|
+
[vars$8.textColor]: globalRefs$6.colors.error.contrast,
|
11823
|
+
[vars$8.borderColor]: globalRefs$6.colors.error.light,
|
11273
11824
|
},
|
11274
11825
|
},
|
11275
11826
|
};
|
@@ -11277,128 +11828,128 @@ const notification = {
|
|
11277
11828
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
11278
11829
|
__proto__: null,
|
11279
11830
|
default: notification,
|
11280
|
-
vars: vars$
|
11831
|
+
vars: vars$8
|
11281
11832
|
});
|
11282
11833
|
|
11283
|
-
const globalRefs$
|
11284
|
-
const vars$
|
11834
|
+
const globalRefs$5 = getThemeRefs(globals);
|
11835
|
+
const vars$7 = MultiSelectComboBoxClass.cssVarList;
|
11285
11836
|
|
11286
11837
|
const multiSelectComboBox = {
|
11287
|
-
[vars$
|
11288
|
-
[vars$
|
11289
|
-
[vars$
|
11290
|
-
[vars$
|
11291
|
-
[vars$
|
11292
|
-
[vars$
|
11293
|
-
[vars$
|
11294
|
-
[vars$
|
11295
|
-
[vars$
|
11296
|
-
[vars$
|
11297
|
-
[vars$
|
11298
|
-
[vars$
|
11299
|
-
[vars$
|
11300
|
-
[vars$
|
11301
|
-
[vars$
|
11302
|
-
[vars$
|
11303
|
-
[vars$
|
11304
|
-
[vars$
|
11305
|
-
[vars$
|
11306
|
-
[vars$
|
11307
|
-
[vars$
|
11308
|
-
[vars$
|
11309
|
-
[vars$
|
11310
|
-
[vars$
|
11311
|
-
[vars$
|
11312
|
-
[vars$
|
11313
|
-
[vars$
|
11314
|
-
[vars$
|
11315
|
-
[vars$
|
11316
|
-
[vars$
|
11838
|
+
[vars$7.hostWidth]: refs.width,
|
11839
|
+
[vars$7.hostDirection]: refs.direction,
|
11840
|
+
[vars$7.fontSize]: refs.fontSize,
|
11841
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
11842
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
11843
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
11844
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
11845
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
11846
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
11847
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
11848
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
11849
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
11850
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
11851
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
11852
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
11853
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
11854
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11855
|
+
[vars$7.inputBackgroundColor]: refs.backgroundColor,
|
11856
|
+
[vars$7.inputHorizontalPadding]: refs.horizontalPadding,
|
11857
|
+
[vars$7.inputVerticalPadding]: refs.verticalPadding,
|
11858
|
+
[vars$7.inputHeight]: refs.inputHeight,
|
11859
|
+
[vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
|
11860
|
+
[vars$7.inputDropdownButtonCursor]: 'pointer',
|
11861
|
+
[vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11862
|
+
[vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
|
11863
|
+
[vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
|
11864
|
+
[vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
|
11865
|
+
[vars$7.chipFontSize]: refs.chipFontSize,
|
11866
|
+
[vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
|
11867
|
+
[vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
|
11317
11868
|
|
11318
11869
|
_readonly: {
|
11319
|
-
[vars$
|
11870
|
+
[vars$7.inputDropdownButtonCursor]: 'default',
|
11320
11871
|
},
|
11321
11872
|
|
11322
11873
|
// Overlay theme exposed via the component:
|
11323
|
-
[vars$
|
11324
|
-
[vars$
|
11325
|
-
[vars$
|
11326
|
-
[vars$
|
11327
|
-
[vars$
|
11328
|
-
[vars$
|
11874
|
+
[vars$7.overlayFontSize]: refs.fontSize,
|
11875
|
+
[vars$7.overlayFontFamily]: refs.fontFamily,
|
11876
|
+
[vars$7.overlayCursor]: 'pointer',
|
11877
|
+
[vars$7.overlayItemBoxShadow]: 'none',
|
11878
|
+
[vars$7.overlayBackground]: refs.backgroundColor,
|
11879
|
+
[vars$7.overlayTextColor]: refs.valueTextColor,
|
11329
11880
|
|
11330
11881
|
// Overlay direct theme:
|
11331
|
-
[vars$
|
11332
|
-
[vars$
|
11882
|
+
[vars$7.overlay.minHeight]: '400px',
|
11883
|
+
[vars$7.overlay.margin]: '0',
|
11333
11884
|
};
|
11334
11885
|
|
11335
11886
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
11336
11887
|
__proto__: null,
|
11337
11888
|
default: multiSelectComboBox,
|
11338
11889
|
multiSelectComboBox: multiSelectComboBox,
|
11339
|
-
vars: vars$
|
11890
|
+
vars: vars$7
|
11340
11891
|
});
|
11341
11892
|
|
11342
|
-
const globalRefs$
|
11343
|
-
const vars$
|
11893
|
+
const globalRefs$4 = getThemeRefs(globals);
|
11894
|
+
const vars$6 = BadgeClass.cssVarList;
|
11344
11895
|
|
11345
11896
|
const badge = {
|
11346
|
-
[vars$
|
11347
|
-
[vars$
|
11897
|
+
[vars$6.hostWidth]: 'fit-content',
|
11898
|
+
[vars$6.hostDirection]: globalRefs$4.direction,
|
11348
11899
|
|
11349
|
-
[vars$
|
11900
|
+
[vars$6.textAlign]: 'center',
|
11350
11901
|
|
11351
|
-
[vars$
|
11352
|
-
[vars$
|
11902
|
+
[vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
|
11903
|
+
[vars$6.fontWeight]: '400',
|
11353
11904
|
|
11354
|
-
[vars$
|
11355
|
-
[vars$
|
11905
|
+
[vars$6.verticalPadding]: '0.25em',
|
11906
|
+
[vars$6.horizontalPadding]: '0.5em',
|
11356
11907
|
|
11357
|
-
[vars$
|
11358
|
-
[vars$
|
11359
|
-
[vars$
|
11360
|
-
[vars$
|
11908
|
+
[vars$6.borderWidth]: globalRefs$4.border.xs,
|
11909
|
+
[vars$6.borderRadius]: globalRefs$4.radius.xs,
|
11910
|
+
[vars$6.borderColor]: 'transparent',
|
11911
|
+
[vars$6.borderStyle]: 'solid',
|
11361
11912
|
|
11362
11913
|
_fullWidth: {
|
11363
|
-
[vars$
|
11914
|
+
[vars$6.hostWidth]: '100%',
|
11364
11915
|
},
|
11365
11916
|
|
11366
11917
|
size: {
|
11367
|
-
xs: { [vars$
|
11368
|
-
sm: { [vars$
|
11369
|
-
md: { [vars$
|
11370
|
-
lg: { [vars$
|
11918
|
+
xs: { [vars$6.fontSize]: '12px' },
|
11919
|
+
sm: { [vars$6.fontSize]: '14px' },
|
11920
|
+
md: { [vars$6.fontSize]: '16px' },
|
11921
|
+
lg: { [vars$6.fontSize]: '18px' },
|
11371
11922
|
},
|
11372
11923
|
|
11373
11924
|
mode: {
|
11374
11925
|
default: {
|
11375
|
-
[vars$
|
11926
|
+
[vars$6.textColor]: globalRefs$4.colors.surface.dark,
|
11376
11927
|
_bordered: {
|
11377
|
-
[vars$
|
11928
|
+
[vars$6.borderColor]: globalRefs$4.colors.surface.light,
|
11378
11929
|
},
|
11379
11930
|
},
|
11380
11931
|
primary: {
|
11381
|
-
[vars$
|
11932
|
+
[vars$6.textColor]: globalRefs$4.colors.primary.main,
|
11382
11933
|
_bordered: {
|
11383
|
-
[vars$
|
11934
|
+
[vars$6.borderColor]: globalRefs$4.colors.primary.light,
|
11384
11935
|
},
|
11385
11936
|
},
|
11386
11937
|
secondary: {
|
11387
|
-
[vars$
|
11938
|
+
[vars$6.textColor]: globalRefs$4.colors.secondary.main,
|
11388
11939
|
_bordered: {
|
11389
|
-
[vars$
|
11940
|
+
[vars$6.borderColor]: globalRefs$4.colors.secondary.light,
|
11390
11941
|
},
|
11391
11942
|
},
|
11392
11943
|
error: {
|
11393
|
-
[vars$
|
11944
|
+
[vars$6.textColor]: globalRefs$4.colors.error.main,
|
11394
11945
|
_bordered: {
|
11395
|
-
[vars$
|
11946
|
+
[vars$6.borderColor]: globalRefs$4.colors.error.light,
|
11396
11947
|
},
|
11397
11948
|
},
|
11398
11949
|
success: {
|
11399
|
-
[vars$
|
11950
|
+
[vars$6.textColor]: globalRefs$4.colors.success.main,
|
11400
11951
|
_bordered: {
|
11401
|
-
[vars$
|
11952
|
+
[vars$6.borderColor]: globalRefs$4.colors.success.light,
|
11402
11953
|
},
|
11403
11954
|
},
|
11404
11955
|
},
|
@@ -11407,19 +11958,19 @@ const badge = {
|
|
11407
11958
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
11408
11959
|
__proto__: null,
|
11409
11960
|
default: badge,
|
11410
|
-
vars: vars$
|
11961
|
+
vars: vars$6
|
11411
11962
|
});
|
11412
11963
|
|
11413
|
-
const globalRefs$
|
11964
|
+
const globalRefs$3 = getThemeRefs(globals);
|
11414
11965
|
const compVars = AvatarClass.cssVarList;
|
11415
11966
|
|
11416
11967
|
const avatar = {
|
11417
|
-
[compVars.hostDirection]: globalRefs$
|
11418
|
-
[compVars.editableIconColor]: globalRefs$
|
11419
|
-
[compVars.editableBorderColor]: globalRefs$
|
11420
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
11421
|
-
[compVars.avatarTextColor]: globalRefs$
|
11422
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
11968
|
+
[compVars.hostDirection]: globalRefs$3.direction,
|
11969
|
+
[compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
|
11970
|
+
[compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
|
11971
|
+
[compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
|
11972
|
+
[compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
|
11973
|
+
[compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
|
11423
11974
|
|
11424
11975
|
_editable: {
|
11425
11976
|
[compVars.cursor]: 'pointer',
|
@@ -11445,62 +11996,107 @@ const avatar = {
|
|
11445
11996
|
},
|
11446
11997
|
};
|
11447
11998
|
|
11448
|
-
const vars$
|
11999
|
+
const vars$5 = {
|
11449
12000
|
...compVars,
|
11450
12001
|
};
|
11451
12002
|
|
11452
12003
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
11453
12004
|
__proto__: null,
|
11454
12005
|
default: avatar,
|
11455
|
-
vars: vars$
|
12006
|
+
vars: vars$5
|
11456
12007
|
});
|
11457
12008
|
|
11458
|
-
const globalRefs$
|
12009
|
+
const globalRefs$2 = getThemeRefs(globals);
|
11459
12010
|
|
11460
|
-
const vars$
|
12011
|
+
const vars$4 = MappingsFieldClass.cssVarList;
|
11461
12012
|
|
11462
12013
|
const mappingsField = {
|
11463
|
-
[vars$
|
11464
|
-
[vars$
|
11465
|
-
[vars$
|
11466
|
-
[vars$
|
11467
|
-
[vars$
|
11468
|
-
[vars$
|
11469
|
-
[vars$
|
12014
|
+
[vars$4.hostWidth]: refs.width,
|
12015
|
+
[vars$4.hostDirection]: refs.direction,
|
12016
|
+
[vars$4.fontSize]: refs.fontSize,
|
12017
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
12018
|
+
[vars$4.separatorFontSize]: '14px',
|
12019
|
+
[vars$4.labelsFontSize]: '14px',
|
12020
|
+
[vars$4.labelsLineHeight]: '1',
|
12021
|
+
[vars$4.labelsMarginBottom]: '6px',
|
12022
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
12023
|
+
[vars$4.itemMarginBottom]: '1em',
|
11470
12024
|
// To be positioned correctly, the min width has to match the text field min width
|
11471
|
-
[vars$
|
12025
|
+
[vars$4.valueLabelMinWidth]: refs.minWidth,
|
11472
12026
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11473
|
-
[vars$
|
11474
|
-
[vars$
|
11475
|
-
[vars$
|
11476
|
-
[vars$2.removeButtonWidth]: '60px',
|
12027
|
+
[vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
|
12028
|
+
[vars$4.separatorWidth]: '70px',
|
12029
|
+
[vars$4.removeButtonWidth]: '60px',
|
11477
12030
|
};
|
11478
12031
|
|
11479
12032
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
11480
12033
|
__proto__: null,
|
11481
12034
|
default: mappingsField,
|
11482
12035
|
mappingsField: mappingsField,
|
11483
|
-
vars: vars$
|
12036
|
+
vars: vars$4
|
11484
12037
|
});
|
11485
12038
|
|
11486
|
-
const globalRefs = getThemeRefs(globals);
|
11487
|
-
const vars$
|
12039
|
+
const globalRefs$1 = getThemeRefs(globals);
|
12040
|
+
const vars$3 = UserAttributeClass.cssVarList;
|
11488
12041
|
|
11489
12042
|
const userAttribute = {
|
11490
|
-
[vars$
|
11491
|
-
[vars$
|
11492
|
-
[vars$
|
11493
|
-
[vars$
|
11494
|
-
[vars$
|
11495
|
-
[vars$
|
12043
|
+
[vars$3.hostDirection]: globalRefs$1.direction,
|
12044
|
+
[vars$3.labelTextWidth]: '150px',
|
12045
|
+
[vars$3.valueTextWidth]: '200px',
|
12046
|
+
[vars$3.badgeMaxWidth]: '85px',
|
12047
|
+
[vars$3.itemsGap]: '16px',
|
12048
|
+
[vars$3.hostMinWidth]: '530px',
|
11496
12049
|
_fullWidth: {
|
11497
|
-
[vars$
|
12050
|
+
[vars$3.hostWidth]: '100%',
|
11498
12051
|
},
|
11499
12052
|
};
|
11500
12053
|
|
11501
12054
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
11502
12055
|
__proto__: null,
|
11503
12056
|
default: userAttribute,
|
12057
|
+
vars: vars$3
|
12058
|
+
});
|
12059
|
+
|
12060
|
+
const vars$2 = SamlGroupMappingsClass.cssVarList;
|
12061
|
+
|
12062
|
+
const samlGroupMappings = {
|
12063
|
+
[vars$2.hostWidth]: refs.width,
|
12064
|
+
[vars$2.hostDirection]: refs.direction,
|
12065
|
+
[vars$2.groupNameInputMarginBottom]: '1em',
|
12066
|
+
};
|
12067
|
+
|
12068
|
+
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
12069
|
+
__proto__: null,
|
12070
|
+
default: samlGroupMappings,
|
12071
|
+
samlGroupMappings: samlGroupMappings,
|
12072
|
+
vars: vars$2
|
12073
|
+
});
|
12074
|
+
|
12075
|
+
const globalRefs = getThemeRefs(globals);
|
12076
|
+
const vars$1 = PolicyValidationClass.cssVarList;
|
12077
|
+
|
12078
|
+
const policyValidation = {
|
12079
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
12080
|
+
[vars$1.fontSize]: refs.labelFontSize,
|
12081
|
+
[vars$1.textColor]: refs.labelTextColor,
|
12082
|
+
[vars$1.borderWidth]: refs.borderWidth,
|
12083
|
+
[vars$1.borderStyle]: refs.borderStyle,
|
12084
|
+
[vars$1.borderColor]: refs.borderColor,
|
12085
|
+
[vars$1.borderRadius]: globalRefs.radius.sm,
|
12086
|
+
[vars$1.backgroundColor]: 'none',
|
12087
|
+
[vars$1.padding]: '0px',
|
12088
|
+
[vars$1.labelMargin]: globalRefs.spacing.sm,
|
12089
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.lg,
|
12090
|
+
[vars$1.itemSymbolDefault]: "'\\2022'", // "•"
|
12091
|
+
[vars$1.itemSymbolSuccess]: "'\\2713'", // "✓"
|
12092
|
+
[vars$1.itemSymbolError]: "'\\2A09'", // "⨉"
|
12093
|
+
[vars$1.itemSymbolSuccessColor]: globalRefs.colors.success.main,
|
12094
|
+
[vars$1.itemSymbolErrorColor]: globalRefs.colors.error.main,
|
12095
|
+
};
|
12096
|
+
|
12097
|
+
var policyValidation$1 = /*#__PURE__*/Object.freeze({
|
12098
|
+
__proto__: null,
|
12099
|
+
default: policyValidation,
|
11504
12100
|
vars: vars$1
|
11505
12101
|
});
|
11506
12102
|
|
@@ -11541,6 +12137,8 @@ const components = {
|
|
11541
12137
|
avatar: avatar$1,
|
11542
12138
|
mappingsField: mappingsField$1,
|
11543
12139
|
userAttribute: userAttribute$1,
|
12140
|
+
samlGroupMappings: samlGroupMappings$1,
|
12141
|
+
policyValidation: policyValidation$1,
|
11544
12142
|
};
|
11545
12143
|
|
11546
12144
|
const theme = Object.keys(components).reduce(
|
@@ -11553,7 +12151,7 @@ const vars = Object.keys(components).reduce(
|
|
11553
12151
|
);
|
11554
12152
|
|
11555
12153
|
const defaultTheme = { globals, components: theme };
|
11556
|
-
const themeVars = { globals: vars$
|
12154
|
+
const themeVars = { globals: vars$D, components: vars };
|
11557
12155
|
|
11558
12156
|
const colors = {
|
11559
12157
|
surface: {
|
@@ -11599,5 +12197,5 @@ const darkTheme = merge({}, defaultTheme, {
|
|
11599
12197
|
},
|
11600
12198
|
});
|
11601
12199
|
|
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 };
|
12200
|
+
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, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11603
12201
|
//# sourceMappingURL=index.esm.js.map
|