@descope/web-components-ui 1.0.289 → 1.0.291
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1301 -897
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1600 -1068
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/2106.js +1 -1
- package/dist/umd/7911.js +73 -0
- package/dist/umd/7911.js.LICENSE.txt +17 -0
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/dist/umd/descope-badge-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-user-attribute-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-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 +4 -2
- package/src/components/descope-avatar/AvatarClass.js +7 -5
- package/src/components/descope-badge/BadgeClass.js +3 -0
- package/src/components/descope-text/TextClass.js +1 -1
- package/src/components/descope-user-attribute/UserAttributeClass.js +228 -0
- package/src/components/descope-user-attribute/delete.svg +3 -0
- package/src/components/descope-user-attribute/edit.svg +3 -0
- package/src/components/descope-user-attribute/index.js +9 -0
- package/src/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/helpers/themeHelpers/componentsThemeManager.js +4 -0
- package/src/index.cjs.js +2 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +2 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/avatar.js +4 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/samlGroupMappings.js +13 -0
- package/src/theme/components/userAttribute.js +20 -0
package/dist/index.esm.js
CHANGED
@@ -209,6 +209,10 @@ class ComponentsThemeManager {
|
|
209
209
|
this.#themes = themes;
|
210
210
|
this.#notify();
|
211
211
|
}
|
212
|
+
|
213
|
+
get hasThemes() {
|
214
|
+
return !!Object.keys(this.#themes).length;
|
215
|
+
}
|
212
216
|
}
|
213
217
|
|
214
218
|
const componentsThemeManager = new ComponentsThemeManager();
|
@@ -967,6 +971,7 @@ const proxyInputMixin =
|
|
967
971
|
// allows us to set the event that should trigger validation
|
968
972
|
// it can be either a string or an array of strings (for multiple events)
|
969
973
|
inputEvent = 'input',
|
974
|
+
triggerValidationEvents = [],
|
970
975
|
// Proxies all validations from the parent component to the input element
|
971
976
|
proxyParentValidation = false,
|
972
977
|
}) =>
|
@@ -1055,6 +1060,12 @@ const proxyInputMixin =
|
|
1055
1060
|
}
|
1056
1061
|
};
|
1057
1062
|
|
1063
|
+
triggerValidationEvents.forEach((e) => {
|
1064
|
+
this.baseElement?.addEventListener(e, () => {
|
1065
|
+
this.inputElement?.setCustomValidity('');
|
1066
|
+
});
|
1067
|
+
});
|
1068
|
+
|
1058
1069
|
// on some cases the base element is not ready so the inputElement is empty
|
1059
1070
|
// we are deferring this section to make sure the base element is ready
|
1060
1071
|
setTimeout(() => {
|
@@ -1343,7 +1354,7 @@ const clickableMixin = (superclass) =>
|
|
1343
1354
|
}
|
1344
1355
|
};
|
1345
1356
|
|
1346
|
-
const componentName$
|
1357
|
+
const componentName$P = getComponentName('button');
|
1347
1358
|
|
1348
1359
|
const resetStyles = `
|
1349
1360
|
:host {
|
@@ -1381,7 +1392,7 @@ const iconStyles = `
|
|
1381
1392
|
|
1382
1393
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1383
1394
|
|
1384
|
-
const { host: host$
|
1395
|
+
const { host: host$l, label: label$a } = {
|
1385
1396
|
host: { selector: () => ':host' },
|
1386
1397
|
label: { selector: '::part(label)' },
|
1387
1398
|
};
|
@@ -1393,7 +1404,7 @@ const ButtonClass = compose(
|
|
1393
1404
|
mappings: {
|
1394
1405
|
hostWidth: { property: 'width' },
|
1395
1406
|
hostHeight: { property: 'height' },
|
1396
|
-
hostDirection: { ...host$
|
1407
|
+
hostDirection: { ...host$l, property: 'direction' },
|
1397
1408
|
fontSize: {},
|
1398
1409
|
fontFamily: {},
|
1399
1410
|
|
@@ -1445,7 +1456,7 @@ const ButtonClass = compose(
|
|
1445
1456
|
}
|
1446
1457
|
`,
|
1447
1458
|
excludeAttrsSync: ['tabindex'],
|
1448
|
-
componentName: componentName$
|
1459
|
+
componentName: componentName$P,
|
1449
1460
|
})
|
1450
1461
|
);
|
1451
1462
|
|
@@ -1482,7 +1493,7 @@ loadingIndicatorStyles = `
|
|
1482
1493
|
}
|
1483
1494
|
`;
|
1484
1495
|
|
1485
|
-
customElements.define(componentName$
|
1496
|
+
customElements.define(componentName$P, ButtonClass);
|
1486
1497
|
|
1487
1498
|
const createBaseInputClass = (...args) =>
|
1488
1499
|
compose(
|
@@ -1492,13 +1503,13 @@ const createBaseInputClass = (...args) =>
|
|
1492
1503
|
inputEventsDispatchingMixin
|
1493
1504
|
)(createBaseClass(...args));
|
1494
1505
|
|
1495
|
-
const componentName$
|
1506
|
+
const componentName$O = getComponentName('boolean-field-internal');
|
1496
1507
|
|
1497
1508
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1498
1509
|
|
1499
|
-
const BaseInputClass$
|
1510
|
+
const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$O, baseSelector: 'div' });
|
1500
1511
|
|
1501
|
-
class BooleanInputInternal extends BaseInputClass$
|
1512
|
+
class BooleanInputInternal extends BaseInputClass$8 {
|
1502
1513
|
static get observedAttributes() {
|
1503
1514
|
return ['readonly'];
|
1504
1515
|
}
|
@@ -1572,14 +1583,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1572
1583
|
|
1573
1584
|
const template = document.createElement('template');
|
1574
1585
|
template.innerHTML = `
|
1575
|
-
<${componentName$
|
1586
|
+
<${componentName$O}
|
1576
1587
|
tabindex="-1"
|
1577
1588
|
slot="input"
|
1578
|
-
></${componentName$
|
1589
|
+
></${componentName$O}>
|
1579
1590
|
`;
|
1580
1591
|
|
1581
1592
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1582
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1593
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$O);
|
1583
1594
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1584
1595
|
|
1585
1596
|
forwardAttrs(this, this.inputElement, {
|
@@ -1778,10 +1789,10 @@ descope-boolean-field-internal {
|
|
1778
1789
|
}
|
1779
1790
|
`;
|
1780
1791
|
|
1781
|
-
const componentName$
|
1792
|
+
const componentName$N = getComponentName('checkbox');
|
1782
1793
|
|
1783
1794
|
const {
|
1784
|
-
host: host$
|
1795
|
+
host: host$k,
|
1785
1796
|
component: component$1,
|
1786
1797
|
checkboxElement,
|
1787
1798
|
checkboxSurface,
|
@@ -1803,10 +1814,10 @@ const {
|
|
1803
1814
|
const CheckboxClass = compose(
|
1804
1815
|
createStyleMixin({
|
1805
1816
|
mappings: {
|
1806
|
-
hostWidth: { ...host$
|
1807
|
-
hostDirection: { ...host$
|
1817
|
+
hostWidth: { ...host$k, property: 'width' },
|
1818
|
+
hostDirection: { ...host$k, property: 'direction' },
|
1808
1819
|
|
1809
|
-
fontSize: [host$
|
1820
|
+
fontSize: [host$k, checkboxElement, checkboxLabel$1],
|
1810
1821
|
fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
|
1811
1822
|
|
1812
1823
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -1884,18 +1895,18 @@ const CheckboxClass = compose(
|
|
1884
1895
|
}
|
1885
1896
|
`,
|
1886
1897
|
excludeAttrsSync: ['label', 'tabindex'],
|
1887
|
-
componentName: componentName$
|
1898
|
+
componentName: componentName$N,
|
1888
1899
|
})
|
1889
1900
|
);
|
1890
1901
|
|
1891
|
-
customElements.define(componentName$
|
1902
|
+
customElements.define(componentName$O, BooleanInputInternal);
|
1892
1903
|
|
1893
|
-
customElements.define(componentName$
|
1904
|
+
customElements.define(componentName$N, CheckboxClass);
|
1894
1905
|
|
1895
|
-
const componentName$
|
1906
|
+
const componentName$M = getComponentName('switch-toggle');
|
1896
1907
|
|
1897
1908
|
const {
|
1898
|
-
host: host$
|
1909
|
+
host: host$j,
|
1899
1910
|
component,
|
1900
1911
|
checkboxElement: track,
|
1901
1912
|
checkboxSurface: knob,
|
@@ -1917,8 +1928,8 @@ const {
|
|
1917
1928
|
const SwitchToggleClass = compose(
|
1918
1929
|
createStyleMixin({
|
1919
1930
|
mappings: {
|
1920
|
-
hostWidth: { ...host$
|
1921
|
-
hostDirection: { ...host$
|
1931
|
+
hostWidth: { ...host$j, property: 'width' },
|
1932
|
+
hostDirection: { ...host$j, property: 'direction' },
|
1922
1933
|
|
1923
1934
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1924
1935
|
fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
|
@@ -2024,17 +2035,17 @@ const SwitchToggleClass = compose(
|
|
2024
2035
|
}
|
2025
2036
|
`,
|
2026
2037
|
excludeAttrsSync: ['label', 'tabindex'],
|
2027
|
-
componentName: componentName$
|
2038
|
+
componentName: componentName$M,
|
2028
2039
|
})
|
2029
2040
|
);
|
2030
2041
|
|
2031
|
-
customElements.define(componentName$
|
2042
|
+
customElements.define(componentName$M, SwitchToggleClass);
|
2032
2043
|
|
2033
|
-
const componentName$
|
2044
|
+
const componentName$L = getComponentName('loader-linear');
|
2034
2045
|
|
2035
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2046
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
|
2036
2047
|
static get componentName() {
|
2037
|
-
return componentName$
|
2048
|
+
return componentName$L;
|
2038
2049
|
}
|
2039
2050
|
|
2040
2051
|
constructor() {
|
@@ -2070,18 +2081,18 @@ const selectors$2 = {
|
|
2070
2081
|
host: { selector: () => ':host' },
|
2071
2082
|
};
|
2072
2083
|
|
2073
|
-
const { after: after$1, host: host$
|
2084
|
+
const { after: after$1, host: host$i } = selectors$2;
|
2074
2085
|
|
2075
2086
|
const LoaderLinearClass = compose(
|
2076
2087
|
createStyleMixin({
|
2077
2088
|
mappings: {
|
2078
2089
|
hostDisplay: {},
|
2079
|
-
hostWidth: { ...host$
|
2090
|
+
hostWidth: { ...host$i, property: 'width' },
|
2080
2091
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
2081
2092
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
2082
2093
|
verticalPadding: [
|
2083
|
-
{ ...host$
|
2084
|
-
{ ...host$
|
2094
|
+
{ ...host$i, property: 'padding-top' },
|
2095
|
+
{ ...host$i, property: 'padding-bottom' },
|
2085
2096
|
],
|
2086
2097
|
barBackgroundColor: { property: 'background-color' },
|
2087
2098
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -2095,11 +2106,11 @@ const LoaderLinearClass = compose(
|
|
2095
2106
|
componentNameValidationMixin
|
2096
2107
|
)(RawLoaderLinear);
|
2097
2108
|
|
2098
|
-
customElements.define(componentName$
|
2109
|
+
customElements.define(componentName$L, LoaderLinearClass);
|
2099
2110
|
|
2100
|
-
const componentName$
|
2111
|
+
const componentName$K = getComponentName('loader-radial');
|
2101
2112
|
|
2102
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2113
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
|
2103
2114
|
constructor() {
|
2104
2115
|
super();
|
2105
2116
|
|
@@ -2143,11 +2154,11 @@ const LoaderRadialClass = compose(
|
|
2143
2154
|
componentNameValidationMixin
|
2144
2155
|
)(RawLoaderRadial);
|
2145
2156
|
|
2146
|
-
customElements.define(componentName$
|
2157
|
+
customElements.define(componentName$K, LoaderRadialClass);
|
2147
2158
|
|
2148
|
-
const componentName$
|
2159
|
+
const componentName$J = getComponentName('container');
|
2149
2160
|
|
2150
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2161
|
+
class RawContainer extends createBaseClass({ componentName: componentName$J, baseSelector: 'slot' }) {
|
2151
2162
|
constructor() {
|
2152
2163
|
super();
|
2153
2164
|
|
@@ -2200,13 +2211,13 @@ const ContainerClass = compose(
|
|
2200
2211
|
componentNameValidationMixin
|
2201
2212
|
)(RawContainer);
|
2202
2213
|
|
2203
|
-
customElements.define(componentName$
|
2214
|
+
customElements.define(componentName$J, ContainerClass);
|
2204
2215
|
|
2205
2216
|
// eslint-disable-next-line max-classes-per-file
|
2206
2217
|
|
2207
|
-
const componentName$
|
2218
|
+
const componentName$I = getComponentName('text');
|
2208
2219
|
|
2209
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2220
|
+
class RawText extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > slot' }) {
|
2210
2221
|
constructor() {
|
2211
2222
|
super();
|
2212
2223
|
|
@@ -2220,7 +2231,7 @@ class RawText extends createBaseClass({ componentName: componentName$F, baseSele
|
|
2220
2231
|
display: inline-block;
|
2221
2232
|
}
|
2222
2233
|
</style>
|
2223
|
-
<slot></slot>
|
2234
|
+
<slot part="text-wrapper"></slot>
|
2224
2235
|
`;
|
2225
2236
|
}
|
2226
2237
|
}
|
@@ -2266,8 +2277,8 @@ const TextClass = compose(
|
|
2266
2277
|
customTextMixin
|
2267
2278
|
)(RawText);
|
2268
2279
|
|
2269
|
-
const componentName$
|
2270
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2280
|
+
const componentName$H = getComponentName('divider');
|
2281
|
+
class RawDivider extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
|
2271
2282
|
constructor() {
|
2272
2283
|
super();
|
2273
2284
|
|
@@ -2313,7 +2324,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$E, baseS
|
|
2313
2324
|
}
|
2314
2325
|
|
2315
2326
|
const textVars$3 = TextClass.cssVarList;
|
2316
|
-
const { host: host$
|
2327
|
+
const { host: host$h, before, after, text: text$3 } = {
|
2317
2328
|
host: { selector: () => ':host' },
|
2318
2329
|
before: { selector: '::before' },
|
2319
2330
|
after: { selector: '::after' },
|
@@ -2323,8 +2334,8 @@ const { host: host$f, before, after, text: text$3 } = {
|
|
2323
2334
|
const DividerClass = compose(
|
2324
2335
|
createStyleMixin({
|
2325
2336
|
mappings: {
|
2326
|
-
hostWidth: { ...host$
|
2327
|
-
hostPadding: { ...host$
|
2337
|
+
hostWidth: { ...host$h, property: 'width' },
|
2338
|
+
hostPadding: { ...host$h, property: 'padding' },
|
2328
2339
|
hostDirection: { ...text$3, property: 'direction' },
|
2329
2340
|
|
2330
2341
|
minHeight: {},
|
@@ -2366,12 +2377,12 @@ const DividerClass = compose(
|
|
2366
2377
|
componentNameValidationMixin
|
2367
2378
|
)(RawDivider);
|
2368
2379
|
|
2369
|
-
customElements.define(componentName$
|
2380
|
+
customElements.define(componentName$I, TextClass);
|
2370
2381
|
|
2371
|
-
customElements.define(componentName$
|
2382
|
+
customElements.define(componentName$H, DividerClass);
|
2372
2383
|
|
2373
2384
|
const {
|
2374
|
-
host: host$
|
2385
|
+
host: host$g,
|
2375
2386
|
label: label$9,
|
2376
2387
|
placeholder: placeholder$3,
|
2377
2388
|
requiredIndicator: requiredIndicator$9,
|
@@ -2396,12 +2407,12 @@ const {
|
|
2396
2407
|
|
2397
2408
|
var textFieldMappings = {
|
2398
2409
|
// we apply font-size also on the host so we can set its width with em
|
2399
|
-
fontSize: [{}, host$
|
2410
|
+
fontSize: [{}, host$g],
|
2400
2411
|
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2401
2412
|
|
2402
|
-
hostWidth: { ...host$
|
2403
|
-
hostMinWidth: { ...host$
|
2404
|
-
hostDirection: { ...host$
|
2413
|
+
hostWidth: { ...host$g, property: 'width' },
|
2414
|
+
hostMinWidth: { ...host$g, property: 'min-width' },
|
2415
|
+
hostDirection: { ...host$g, property: 'direction' },
|
2405
2416
|
|
2406
2417
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2407
2418
|
|
@@ -2446,9 +2457,9 @@ var textFieldMappings = {
|
|
2446
2457
|
],
|
2447
2458
|
};
|
2448
2459
|
|
2449
|
-
const componentName$
|
2460
|
+
const componentName$G = getComponentName('email-field');
|
2450
2461
|
|
2451
|
-
const customMixin$
|
2462
|
+
const customMixin$8 = (superclass) =>
|
2452
2463
|
class EmailFieldMixinClass extends superclass {
|
2453
2464
|
init() {
|
2454
2465
|
super.init?.();
|
@@ -2462,7 +2473,7 @@ const EmailFieldClass = compose(
|
|
2462
2473
|
draggableMixin,
|
2463
2474
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2464
2475
|
componentNameValidationMixin,
|
2465
|
-
customMixin$
|
2476
|
+
customMixin$8
|
2466
2477
|
)(
|
2467
2478
|
createProxy({
|
2468
2479
|
slots: ['', 'suffix'],
|
@@ -2481,15 +2492,15 @@ const EmailFieldClass = compose(
|
|
2481
2492
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2482
2493
|
`,
|
2483
2494
|
excludeAttrsSync: ['tabindex'],
|
2484
|
-
componentName: componentName$
|
2495
|
+
componentName: componentName$G,
|
2485
2496
|
})
|
2486
2497
|
);
|
2487
2498
|
|
2488
|
-
customElements.define(componentName$
|
2499
|
+
customElements.define(componentName$G, EmailFieldClass);
|
2489
2500
|
|
2490
|
-
const componentName$
|
2501
|
+
const componentName$F = getComponentName('link');
|
2491
2502
|
|
2492
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2503
|
+
class RawLink extends createBaseClass({ componentName: componentName$F, baseSelector: ':host a' }) {
|
2493
2504
|
constructor() {
|
2494
2505
|
super();
|
2495
2506
|
|
@@ -2535,12 +2546,12 @@ const selectors$1 = {
|
|
2535
2546
|
text: { selector: () => TextClass.componentName },
|
2536
2547
|
};
|
2537
2548
|
|
2538
|
-
const { anchor, text: text$2, host: host$
|
2549
|
+
const { anchor, text: text$2, host: host$f, wrapper: wrapper$1 } = selectors$1;
|
2539
2550
|
|
2540
2551
|
const LinkClass = compose(
|
2541
2552
|
createStyleMixin({
|
2542
2553
|
mappings: {
|
2543
|
-
hostWidth: { ...host$
|
2554
|
+
hostWidth: { ...host$f, property: 'width' },
|
2544
2555
|
hostDirection: { ...text$2, property: 'direction' },
|
2545
2556
|
textAlign: wrapper$1,
|
2546
2557
|
textColor: [
|
@@ -2554,7 +2565,7 @@ const LinkClass = compose(
|
|
2554
2565
|
componentNameValidationMixin
|
2555
2566
|
)(RawLink);
|
2556
2567
|
|
2557
|
-
customElements.define(componentName$
|
2568
|
+
customElements.define(componentName$F, LinkClass);
|
2558
2569
|
|
2559
2570
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2560
2571
|
let style;
|
@@ -2606,37 +2617,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2606
2617
|
return CssVarImageClass;
|
2607
2618
|
};
|
2608
2619
|
|
2609
|
-
const componentName$
|
2620
|
+
const componentName$E = getComponentName('logo');
|
2610
2621
|
|
2611
2622
|
const LogoClass = createCssVarImageClass({
|
2612
|
-
componentName: componentName$
|
2623
|
+
componentName: componentName$E,
|
2613
2624
|
varName: 'url',
|
2614
2625
|
fallbackVarName: 'fallbackUrl',
|
2615
2626
|
});
|
2616
2627
|
|
2617
|
-
customElements.define(componentName$
|
2628
|
+
customElements.define(componentName$E, LogoClass);
|
2618
2629
|
|
2619
|
-
const componentName$
|
2630
|
+
const componentName$D = getComponentName('totp-image');
|
2620
2631
|
|
2621
2632
|
const TotpImageClass = createCssVarImageClass({
|
2622
|
-
componentName: componentName$
|
2633
|
+
componentName: componentName$D,
|
2623
2634
|
varName: 'url',
|
2624
2635
|
fallbackVarName: 'fallbackUrl',
|
2625
2636
|
});
|
2626
2637
|
|
2627
|
-
customElements.define(componentName$
|
2638
|
+
customElements.define(componentName$D, TotpImageClass);
|
2628
2639
|
|
2629
|
-
const componentName$
|
2640
|
+
const componentName$C = getComponentName('notp-image');
|
2630
2641
|
|
2631
2642
|
const NotpImageClass = createCssVarImageClass({
|
2632
|
-
componentName: componentName$
|
2643
|
+
componentName: componentName$C,
|
2633
2644
|
varName: 'url',
|
2634
2645
|
fallbackVarName: 'fallbackUrl',
|
2635
2646
|
});
|
2636
2647
|
|
2637
|
-
customElements.define(componentName$
|
2648
|
+
customElements.define(componentName$C, NotpImageClass);
|
2638
2649
|
|
2639
|
-
const componentName$
|
2650
|
+
const componentName$B = getComponentName('number-field');
|
2640
2651
|
|
2641
2652
|
const NumberFieldClass = compose(
|
2642
2653
|
createStyleMixin({
|
@@ -2662,11 +2673,11 @@ const NumberFieldClass = compose(
|
|
2662
2673
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2663
2674
|
`,
|
2664
2675
|
excludeAttrsSync: ['tabindex'],
|
2665
|
-
componentName: componentName$
|
2676
|
+
componentName: componentName$B,
|
2666
2677
|
})
|
2667
2678
|
);
|
2668
2679
|
|
2669
|
-
customElements.define(componentName$
|
2680
|
+
customElements.define(componentName$B, NumberFieldClass);
|
2670
2681
|
|
2671
2682
|
const focusElement = (ele) => {
|
2672
2683
|
ele?.focus();
|
@@ -2684,17 +2695,17 @@ const getSanitizedCharacters = (str) => {
|
|
2684
2695
|
|
2685
2696
|
/* eslint-disable no-param-reassign */
|
2686
2697
|
|
2687
|
-
const componentName$
|
2698
|
+
const componentName$A = getComponentName('passcode-internal');
|
2688
2699
|
|
2689
2700
|
const observedAttributes$5 = ['digits', 'loading'];
|
2690
2701
|
|
2691
2702
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2692
2703
|
|
2693
|
-
const BaseInputClass$
|
2704
|
+
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
|
2694
2705
|
|
2695
|
-
class PasscodeInternal extends BaseInputClass$
|
2706
|
+
class PasscodeInternal extends BaseInputClass$7 {
|
2696
2707
|
static get observedAttributes() {
|
2697
|
-
return observedAttributes$5.concat(BaseInputClass$
|
2708
|
+
return observedAttributes$5.concat(BaseInputClass$7.observedAttributes || []);
|
2698
2709
|
}
|
2699
2710
|
|
2700
2711
|
constructor() {
|
@@ -2916,11 +2927,11 @@ class PasscodeInternal extends BaseInputClass$6 {
|
|
2916
2927
|
}
|
2917
2928
|
}
|
2918
2929
|
|
2919
|
-
const componentName$
|
2930
|
+
const componentName$z = getComponentName('text-field');
|
2920
2931
|
|
2921
2932
|
const observedAttrs = ['type'];
|
2922
2933
|
|
2923
|
-
const customMixin$
|
2934
|
+
const customMixin$7 = (superclass) =>
|
2924
2935
|
class TextFieldClass extends superclass {
|
2925
2936
|
static get observedAttributes() {
|
2926
2937
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2947,7 +2958,7 @@ const TextFieldClass = compose(
|
|
2947
2958
|
draggableMixin,
|
2948
2959
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2949
2960
|
componentNameValidationMixin,
|
2950
|
-
customMixin$
|
2961
|
+
customMixin$7
|
2951
2962
|
)(
|
2952
2963
|
createProxy({
|
2953
2964
|
slots: ['prefix', 'suffix'],
|
@@ -2966,15 +2977,15 @@ const TextFieldClass = compose(
|
|
2966
2977
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2967
2978
|
`,
|
2968
2979
|
excludeAttrsSync: ['tabindex'],
|
2969
|
-
componentName: componentName$
|
2980
|
+
componentName: componentName$z,
|
2970
2981
|
})
|
2971
2982
|
);
|
2972
2983
|
|
2973
|
-
const componentName$
|
2984
|
+
const componentName$y = getComponentName('passcode');
|
2974
2985
|
|
2975
2986
|
const observedAttributes$4 = ['digits'];
|
2976
2987
|
|
2977
|
-
const customMixin$
|
2988
|
+
const customMixin$6 = (superclass) =>
|
2978
2989
|
class PasscodeMixinClass extends superclass {
|
2979
2990
|
static get observedAttributes() {
|
2980
2991
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2989,17 +3000,17 @@ const customMixin$5 = (superclass) =>
|
|
2989
3000
|
const template = document.createElement('template');
|
2990
3001
|
|
2991
3002
|
template.innerHTML = `
|
2992
|
-
<${componentName$
|
3003
|
+
<${componentName$A}
|
2993
3004
|
bordered="true"
|
2994
3005
|
name="code"
|
2995
3006
|
tabindex="-1"
|
2996
3007
|
slot="input"
|
2997
|
-
><slot></slot></${componentName$
|
3008
|
+
><slot></slot></${componentName$A}>
|
2998
3009
|
`;
|
2999
3010
|
|
3000
3011
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3001
3012
|
|
3002
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3013
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$A);
|
3003
3014
|
|
3004
3015
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
3005
3016
|
}
|
@@ -3014,7 +3025,7 @@ const customMixin$5 = (superclass) =>
|
|
3014
3025
|
};
|
3015
3026
|
|
3016
3027
|
const {
|
3017
|
-
host: host$
|
3028
|
+
host: host$e,
|
3018
3029
|
digitField,
|
3019
3030
|
label: label$8,
|
3020
3031
|
requiredIndicator: requiredIndicator$8,
|
@@ -3037,10 +3048,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
3037
3048
|
const PasscodeClass = compose(
|
3038
3049
|
createStyleMixin({
|
3039
3050
|
mappings: {
|
3040
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
3051
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
|
3041
3052
|
hostWidth: { property: 'width' },
|
3042
|
-
hostDirection: { ...host$
|
3043
|
-
fontFamily: [host$
|
3053
|
+
hostDirection: { ...host$e, property: 'direction' },
|
3054
|
+
fontFamily: [host$e, { ...label$8 }],
|
3044
3055
|
labelTextColor: [
|
3045
3056
|
{ ...label$8, property: 'color' },
|
3046
3057
|
{ ...requiredIndicator$8, property: 'color' },
|
@@ -3070,7 +3081,7 @@ const PasscodeClass = compose(
|
|
3070
3081
|
draggableMixin,
|
3071
3082
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3072
3083
|
componentNameValidationMixin,
|
3073
|
-
customMixin$
|
3084
|
+
customMixin$6
|
3074
3085
|
)(
|
3075
3086
|
createProxy({
|
3076
3087
|
slots: [],
|
@@ -3146,15 +3157,15 @@ const PasscodeClass = compose(
|
|
3146
3157
|
${resetInputCursor('vaadin-text-field')}
|
3147
3158
|
`,
|
3148
3159
|
excludeAttrsSync: ['tabindex'],
|
3149
|
-
componentName: componentName$
|
3160
|
+
componentName: componentName$y,
|
3150
3161
|
})
|
3151
3162
|
);
|
3152
3163
|
|
3153
|
-
customElements.define(componentName$
|
3164
|
+
customElements.define(componentName$z, TextFieldClass);
|
3154
3165
|
|
3155
|
-
customElements.define(componentName$
|
3166
|
+
customElements.define(componentName$A, PasscodeInternal);
|
3156
3167
|
|
3157
|
-
customElements.define(componentName$
|
3168
|
+
customElements.define(componentName$y, PasscodeClass);
|
3158
3169
|
|
3159
3170
|
const passwordDraggableMixin = (superclass) =>
|
3160
3171
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3190,10 +3201,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3190
3201
|
}
|
3191
3202
|
};
|
3192
3203
|
|
3193
|
-
const componentName$
|
3204
|
+
const componentName$x = getComponentName('password');
|
3194
3205
|
|
3195
3206
|
const {
|
3196
|
-
host: host$
|
3207
|
+
host: host$d,
|
3197
3208
|
inputField: inputField$5,
|
3198
3209
|
inputElement: inputElement$2,
|
3199
3210
|
inputElementPlaceholder,
|
@@ -3219,10 +3230,10 @@ const {
|
|
3219
3230
|
const PasswordClass = compose(
|
3220
3231
|
createStyleMixin({
|
3221
3232
|
mappings: {
|
3222
|
-
hostWidth: { ...host$
|
3223
|
-
hostMinWidth: { ...host$
|
3224
|
-
hostDirection: { ...host$
|
3225
|
-
fontSize: [{}, host$
|
3233
|
+
hostWidth: { ...host$d, property: 'width' },
|
3234
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
3235
|
+
hostDirection: { ...host$d, property: 'direction' },
|
3236
|
+
fontSize: [{}, host$d],
|
3226
3237
|
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3227
3238
|
inputHeight: { ...inputField$5, property: 'height' },
|
3228
3239
|
inputHorizontalPadding: [
|
@@ -3319,16 +3330,16 @@ const PasswordClass = compose(
|
|
3319
3330
|
}
|
3320
3331
|
`,
|
3321
3332
|
excludeAttrsSync: ['tabindex'],
|
3322
|
-
componentName: componentName$
|
3333
|
+
componentName: componentName$x,
|
3323
3334
|
})
|
3324
3335
|
);
|
3325
3336
|
|
3326
|
-
customElements.define(componentName$
|
3337
|
+
customElements.define(componentName$x, PasswordClass);
|
3327
3338
|
|
3328
|
-
const componentName$
|
3339
|
+
const componentName$w = getComponentName('text-area');
|
3329
3340
|
|
3330
3341
|
const {
|
3331
|
-
host: host$
|
3342
|
+
host: host$c,
|
3332
3343
|
label: label$6,
|
3333
3344
|
placeholder: placeholder$2,
|
3334
3345
|
inputField: inputField$4,
|
@@ -3350,10 +3361,10 @@ const {
|
|
3350
3361
|
const TextAreaClass = compose(
|
3351
3362
|
createStyleMixin({
|
3352
3363
|
mappings: {
|
3353
|
-
hostWidth: { ...host$
|
3354
|
-
hostMinWidth: { ...host$
|
3355
|
-
hostDirection: { ...host$
|
3356
|
-
fontSize: [host$
|
3364
|
+
hostWidth: { ...host$c, property: 'width' },
|
3365
|
+
hostMinWidth: { ...host$c, property: 'min-width' },
|
3366
|
+
hostDirection: { ...host$c, property: 'direction' },
|
3367
|
+
fontSize: [host$c, textArea$2],
|
3357
3368
|
fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
|
3358
3369
|
labelTextColor: [
|
3359
3370
|
{ ...label$6, property: 'color' },
|
@@ -3401,17 +3412,17 @@ const TextAreaClass = compose(
|
|
3401
3412
|
${resetInputCursor('vaadin-text-area')}
|
3402
3413
|
`,
|
3403
3414
|
excludeAttrsSync: ['tabindex'],
|
3404
|
-
componentName: componentName$
|
3415
|
+
componentName: componentName$w,
|
3405
3416
|
})
|
3406
3417
|
);
|
3407
3418
|
|
3408
|
-
customElements.define(componentName$
|
3419
|
+
customElements.define(componentName$w, TextAreaClass);
|
3409
3420
|
|
3410
3421
|
const observedAttributes$3 = ['src', 'alt'];
|
3411
3422
|
|
3412
|
-
const componentName$
|
3423
|
+
const componentName$v = getComponentName('image');
|
3413
3424
|
|
3414
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3425
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$v, baseSelector: ':host > img' });
|
3415
3426
|
class RawImage extends BaseClass$1 {
|
3416
3427
|
static get observedAttributes() {
|
3417
3428
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3451,9 +3462,9 @@ const ImageClass = compose(
|
|
3451
3462
|
draggableMixin
|
3452
3463
|
)(RawImage);
|
3453
3464
|
|
3454
|
-
customElements.define(componentName$
|
3465
|
+
customElements.define(componentName$v, ImageClass);
|
3455
3466
|
|
3456
|
-
const componentName$
|
3467
|
+
const componentName$u = getComponentName('combo-box');
|
3457
3468
|
|
3458
3469
|
const ComboBoxMixin = (superclass) =>
|
3459
3470
|
class ComboBoxMixinClass extends superclass {
|
@@ -3679,7 +3690,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3679
3690
|
};
|
3680
3691
|
|
3681
3692
|
const {
|
3682
|
-
host: host$
|
3693
|
+
host: host$b,
|
3683
3694
|
inputField: inputField$3,
|
3684
3695
|
inputElement: inputElement$1,
|
3685
3696
|
placeholder: placeholder$1,
|
@@ -3705,10 +3716,10 @@ const {
|
|
3705
3716
|
const ComboBoxClass = compose(
|
3706
3717
|
createStyleMixin({
|
3707
3718
|
mappings: {
|
3708
|
-
hostWidth: { ...host$
|
3709
|
-
hostDirection: { ...host$
|
3719
|
+
hostWidth: { ...host$b, property: 'width' },
|
3720
|
+
hostDirection: { ...host$b, property: 'direction' },
|
3710
3721
|
// we apply font-size also on the host so we can set its width with em
|
3711
|
-
fontSize: [{}, host$
|
3722
|
+
fontSize: [{}, host$b],
|
3712
3723
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
3713
3724
|
labelTextColor: [
|
3714
3725
|
{ ...label$5, property: 'color' },
|
@@ -3836,12 +3847,12 @@ const ComboBoxClass = compose(
|
|
3836
3847
|
// and reset items to an empty array, and opening the list box with no items
|
3837
3848
|
// to display.
|
3838
3849
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3839
|
-
componentName: componentName$
|
3850
|
+
componentName: componentName$u,
|
3840
3851
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3841
3852
|
})
|
3842
3853
|
);
|
3843
3854
|
|
3844
|
-
customElements.define(componentName$
|
3855
|
+
customElements.define(componentName$u, ComboBoxClass);
|
3845
3856
|
|
3846
3857
|
var CountryCodes = [
|
3847
3858
|
// United States should be the first option
|
@@ -5084,7 +5095,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5084
5095
|
</div>
|
5085
5096
|
`;
|
5086
5097
|
|
5087
|
-
const componentName$
|
5098
|
+
const componentName$t = getComponentName('phone-field-internal');
|
5088
5099
|
|
5089
5100
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5090
5101
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -5096,11 +5107,11 @@ const mapAttrs$1 = {
|
|
5096
5107
|
|
5097
5108
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5098
5109
|
|
5099
|
-
const BaseInputClass$
|
5110
|
+
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
|
5100
5111
|
|
5101
|
-
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$
|
5112
|
+
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
5102
5113
|
static get observedAttributes() {
|
5103
|
-
return [].concat(BaseInputClass$
|
5114
|
+
return [].concat(BaseInputClass$6.observedAttributes || [], inputRelatedAttrs$1);
|
5104
5115
|
}
|
5105
5116
|
|
5106
5117
|
constructor() {
|
@@ -5268,14 +5279,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
|
|
5268
5279
|
}
|
5269
5280
|
};
|
5270
5281
|
|
5271
|
-
customElements.define(componentName$
|
5282
|
+
customElements.define(componentName$t, PhoneFieldInternal$1);
|
5272
5283
|
|
5273
5284
|
const textVars$1 = TextFieldClass.cssVarList;
|
5274
5285
|
const comboVars = ComboBoxClass.cssVarList;
|
5275
5286
|
|
5276
|
-
const componentName$
|
5287
|
+
const componentName$s = getComponentName('phone-field');
|
5277
5288
|
|
5278
|
-
const customMixin$
|
5289
|
+
const customMixin$5 = (superclass) =>
|
5279
5290
|
class PhoneFieldMixinClass extends superclass {
|
5280
5291
|
static get CountryCodes() {
|
5281
5292
|
return CountryCodes;
|
@@ -5287,15 +5298,15 @@ const customMixin$4 = (superclass) =>
|
|
5287
5298
|
const template = document.createElement('template');
|
5288
5299
|
|
5289
5300
|
template.innerHTML = `
|
5290
|
-
<${componentName$
|
5301
|
+
<${componentName$t}
|
5291
5302
|
tabindex="-1"
|
5292
5303
|
slot="input"
|
5293
|
-
></${componentName$
|
5304
|
+
></${componentName$t}>
|
5294
5305
|
`;
|
5295
5306
|
|
5296
5307
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5297
5308
|
|
5298
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5309
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$t);
|
5299
5310
|
|
5300
5311
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5301
5312
|
includeAttrs: [
|
@@ -5315,7 +5326,7 @@ const customMixin$4 = (superclass) =>
|
|
5315
5326
|
};
|
5316
5327
|
|
5317
5328
|
const {
|
5318
|
-
host: host$
|
5329
|
+
host: host$a,
|
5319
5330
|
label: label$4,
|
5320
5331
|
requiredIndicator: requiredIndicator$4,
|
5321
5332
|
inputField: inputField$2,
|
@@ -5340,7 +5351,7 @@ const PhoneFieldClass = compose(
|
|
5340
5351
|
createStyleMixin({
|
5341
5352
|
mappings: {
|
5342
5353
|
fontSize: [
|
5343
|
-
host$
|
5354
|
+
host$a,
|
5344
5355
|
inputField$2,
|
5345
5356
|
{
|
5346
5357
|
selector: TextFieldClass.componentName,
|
@@ -5361,11 +5372,11 @@ const PhoneFieldClass = compose(
|
|
5361
5372
|
},
|
5362
5373
|
],
|
5363
5374
|
hostWidth: [
|
5364
|
-
{ ...host$
|
5375
|
+
{ ...host$a, property: 'width' },
|
5365
5376
|
{ ...phoneInput$1, property: 'width' },
|
5366
5377
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5367
5378
|
],
|
5368
|
-
hostDirection: { ...host$
|
5379
|
+
hostDirection: { ...host$a, property: 'direction' },
|
5369
5380
|
|
5370
5381
|
inputBorderStyle: [
|
5371
5382
|
{ ...inputField$2, property: 'border-style' },
|
@@ -5415,7 +5426,7 @@ const PhoneFieldClass = compose(
|
|
5415
5426
|
}),
|
5416
5427
|
draggableMixin,
|
5417
5428
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5418
|
-
customMixin$
|
5429
|
+
customMixin$5
|
5419
5430
|
)(
|
5420
5431
|
createProxy({
|
5421
5432
|
slots: [],
|
@@ -5491,17 +5502,17 @@ const PhoneFieldClass = compose(
|
|
5491
5502
|
${resetInputLabelPosition('vaadin-text-field')}
|
5492
5503
|
`,
|
5493
5504
|
excludeAttrsSync: ['tabindex'],
|
5494
|
-
componentName: componentName$
|
5505
|
+
componentName: componentName$s,
|
5495
5506
|
})
|
5496
5507
|
);
|
5497
5508
|
|
5498
|
-
customElements.define(componentName$
|
5509
|
+
customElements.define(componentName$s, PhoneFieldClass);
|
5499
5510
|
|
5500
5511
|
const getCountryByCodeId = (countryCode) => {
|
5501
5512
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5502
5513
|
};
|
5503
5514
|
|
5504
|
-
const componentName$
|
5515
|
+
const componentName$r = getComponentName('phone-field-internal-input-box');
|
5505
5516
|
|
5506
5517
|
const observedAttributes$2 = [
|
5507
5518
|
'disabled',
|
@@ -5515,11 +5526,11 @@ const mapAttrs = {
|
|
5515
5526
|
'phone-input-placeholder': 'placeholder',
|
5516
5527
|
};
|
5517
5528
|
|
5518
|
-
const BaseInputClass$
|
5529
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
|
5519
5530
|
|
5520
|
-
class PhoneFieldInternal extends BaseInputClass$
|
5531
|
+
class PhoneFieldInternal extends BaseInputClass$5 {
|
5521
5532
|
static get observedAttributes() {
|
5522
|
-
return [].concat(BaseInputClass$
|
5533
|
+
return [].concat(BaseInputClass$5.observedAttributes || [], observedAttributes$2);
|
5523
5534
|
}
|
5524
5535
|
|
5525
5536
|
constructor() {
|
@@ -5654,13 +5665,13 @@ class PhoneFieldInternal extends BaseInputClass$4 {
|
|
5654
5665
|
}
|
5655
5666
|
}
|
5656
5667
|
|
5657
|
-
customElements.define(componentName$
|
5668
|
+
customElements.define(componentName$r, PhoneFieldInternal);
|
5658
5669
|
|
5659
5670
|
const textVars = TextFieldClass.cssVarList;
|
5660
5671
|
|
5661
|
-
const componentName$
|
5672
|
+
const componentName$q = getComponentName('phone-input-box-field');
|
5662
5673
|
|
5663
|
-
const customMixin$
|
5674
|
+
const customMixin$4 = (superclass) =>
|
5664
5675
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5665
5676
|
static get CountryCodes() {
|
5666
5677
|
return CountryCodes;
|
@@ -5672,15 +5683,15 @@ const customMixin$3 = (superclass) =>
|
|
5672
5683
|
const template = document.createElement('template');
|
5673
5684
|
|
5674
5685
|
template.innerHTML = `
|
5675
|
-
<${componentName$
|
5686
|
+
<${componentName$r}
|
5676
5687
|
tabindex="-1"
|
5677
5688
|
slot="input"
|
5678
|
-
></${componentName$
|
5689
|
+
></${componentName$r}>
|
5679
5690
|
`;
|
5680
5691
|
|
5681
5692
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5682
5693
|
|
5683
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5694
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$r);
|
5684
5695
|
|
5685
5696
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5686
5697
|
includeAttrs: [
|
@@ -5697,7 +5708,7 @@ const customMixin$3 = (superclass) =>
|
|
5697
5708
|
}
|
5698
5709
|
};
|
5699
5710
|
|
5700
|
-
const { host: host$
|
5711
|
+
const { host: host$9, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
5701
5712
|
host: { selector: () => ':host' },
|
5702
5713
|
label: { selector: '::part(label)' },
|
5703
5714
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5711,7 +5722,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5711
5722
|
createStyleMixin({
|
5712
5723
|
mappings: {
|
5713
5724
|
fontSize: [
|
5714
|
-
host$
|
5725
|
+
host$9,
|
5715
5726
|
inputField$1,
|
5716
5727
|
{
|
5717
5728
|
selector: TextFieldClass.componentName,
|
@@ -5719,9 +5730,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
5719
5730
|
},
|
5720
5731
|
],
|
5721
5732
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
5722
|
-
hostWidth: { ...host$
|
5723
|
-
hostMinWidth: { ...host$
|
5724
|
-
hostDirection: { ...host$
|
5733
|
+
hostWidth: { ...host$9, property: 'width' },
|
5734
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
5735
|
+
hostDirection: { ...host$9, property: 'direction' },
|
5725
5736
|
|
5726
5737
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5727
5738
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -5747,7 +5758,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5747
5758
|
}),
|
5748
5759
|
draggableMixin,
|
5749
5760
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5750
|
-
customMixin$
|
5761
|
+
customMixin$4
|
5751
5762
|
)(
|
5752
5763
|
createProxy({
|
5753
5764
|
slots: [],
|
@@ -5813,17 +5824,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5813
5824
|
${resetInputLabelPosition('vaadin-text-field')}
|
5814
5825
|
`,
|
5815
5826
|
excludeAttrsSync: ['tabindex'],
|
5816
|
-
componentName: componentName$
|
5827
|
+
componentName: componentName$q,
|
5817
5828
|
})
|
5818
5829
|
);
|
5819
5830
|
|
5820
|
-
customElements.define(componentName$
|
5831
|
+
customElements.define(componentName$q, PhoneFieldInputBoxClass);
|
5821
5832
|
|
5822
|
-
const componentName$
|
5833
|
+
const componentName$p = getComponentName('new-password-internal');
|
5823
5834
|
|
5824
|
-
const componentName$
|
5835
|
+
const componentName$o = getComponentName('new-password');
|
5825
5836
|
|
5826
|
-
const customMixin$
|
5837
|
+
const customMixin$3 = (superclass) =>
|
5827
5838
|
class NewPasswordMixinClass extends superclass {
|
5828
5839
|
init() {
|
5829
5840
|
super.init?.();
|
@@ -5831,16 +5842,16 @@ const customMixin$2 = (superclass) =>
|
|
5831
5842
|
const template = document.createElement('template');
|
5832
5843
|
|
5833
5844
|
template.innerHTML = `
|
5834
|
-
<${componentName$
|
5845
|
+
<${componentName$p}
|
5835
5846
|
name="new-password"
|
5836
5847
|
tabindex="-1"
|
5837
5848
|
slot="input"
|
5838
|
-
></${componentName$
|
5849
|
+
></${componentName$p}>
|
5839
5850
|
`;
|
5840
5851
|
|
5841
5852
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5842
5853
|
|
5843
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5854
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
5844
5855
|
|
5845
5856
|
forwardAttrs(this, this.inputElement, {
|
5846
5857
|
includeAttrs: [
|
@@ -5861,7 +5872,7 @@ const customMixin$2 = (superclass) =>
|
|
5861
5872
|
}
|
5862
5873
|
};
|
5863
5874
|
|
5864
|
-
const { host: host$
|
5875
|
+
const { host: host$8, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
5865
5876
|
host: { selector: () => ':host' },
|
5866
5877
|
label: { selector: '::part(label)' },
|
5867
5878
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5874,7 +5885,7 @@ const NewPasswordClass = compose(
|
|
5874
5885
|
createStyleMixin({
|
5875
5886
|
mappings: {
|
5876
5887
|
fontSize: [
|
5877
|
-
host$
|
5888
|
+
host$8,
|
5878
5889
|
{},
|
5879
5890
|
{
|
5880
5891
|
selector: PasswordClass.componentName,
|
@@ -5883,19 +5894,19 @@ const NewPasswordClass = compose(
|
|
5883
5894
|
],
|
5884
5895
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
5885
5896
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
5886
|
-
hostWidth: { ...host$
|
5887
|
-
hostMinWidth: { ...host$
|
5897
|
+
hostWidth: { ...host$8, property: 'width' },
|
5898
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
5888
5899
|
hostDirection: [
|
5889
|
-
{ ...host$
|
5900
|
+
{ ...host$8, property: 'direction' },
|
5890
5901
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
5891
5902
|
],
|
5892
|
-
inputsRequiredIndicator: { ...host$
|
5903
|
+
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
5893
5904
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5894
5905
|
},
|
5895
5906
|
}),
|
5896
5907
|
draggableMixin,
|
5897
5908
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5898
|
-
customMixin$
|
5909
|
+
customMixin$3
|
5899
5910
|
)(
|
5900
5911
|
createProxy({
|
5901
5912
|
slots: [],
|
@@ -5947,7 +5958,7 @@ const NewPasswordClass = compose(
|
|
5947
5958
|
}
|
5948
5959
|
`,
|
5949
5960
|
excludeAttrsSync: ['tabindex'],
|
5950
|
-
componentName: componentName$
|
5961
|
+
componentName: componentName$o,
|
5951
5962
|
})
|
5952
5963
|
);
|
5953
5964
|
|
@@ -5972,11 +5983,11 @@ const commonAttrs = [
|
|
5972
5983
|
|
5973
5984
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5974
5985
|
|
5975
|
-
const BaseInputClass$
|
5986
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
5976
5987
|
|
5977
|
-
class NewPasswordInternal extends BaseInputClass$
|
5988
|
+
class NewPasswordInternal extends BaseInputClass$4 {
|
5978
5989
|
static get observedAttributes() {
|
5979
|
-
return ['has-confirm'].concat(BaseInputClass$
|
5990
|
+
return ['has-confirm'].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
|
5980
5991
|
}
|
5981
5992
|
|
5982
5993
|
constructor() {
|
@@ -6137,16 +6148,16 @@ class NewPasswordInternal extends BaseInputClass$3 {
|
|
6137
6148
|
}
|
6138
6149
|
}
|
6139
6150
|
|
6140
|
-
customElements.define(componentName$
|
6151
|
+
customElements.define(componentName$p, NewPasswordInternal);
|
6141
6152
|
|
6142
|
-
customElements.define(componentName$
|
6153
|
+
customElements.define(componentName$o, NewPasswordClass);
|
6143
6154
|
|
6144
|
-
const componentName$
|
6155
|
+
const componentName$n = getComponentName('recaptcha');
|
6145
6156
|
|
6146
6157
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
6147
6158
|
|
6148
6159
|
const BaseClass = createBaseClass({
|
6149
|
-
componentName: componentName$
|
6160
|
+
componentName: componentName$n,
|
6150
6161
|
baseSelector: ':host > div',
|
6151
6162
|
});
|
6152
6163
|
class RawRecaptcha extends BaseClass {
|
@@ -6298,7 +6309,7 @@ class RawRecaptcha extends BaseClass {
|
|
6298
6309
|
|
6299
6310
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6300
6311
|
|
6301
|
-
customElements.define(componentName$
|
6312
|
+
customElements.define(componentName$n, RecaptchaClass);
|
6302
6313
|
|
6303
6314
|
const getFileBase64 = (fileObj) => {
|
6304
6315
|
return new Promise((resolve) => {
|
@@ -6312,7 +6323,7 @@ const getFilename = (fileObj) => {
|
|
6312
6323
|
return fileObj.name.replace(/^.*\\/, '');
|
6313
6324
|
};
|
6314
6325
|
|
6315
|
-
const componentName$
|
6326
|
+
const componentName$m = getComponentName('upload-file');
|
6316
6327
|
|
6317
6328
|
const observedAttributes = [
|
6318
6329
|
'title',
|
@@ -6327,11 +6338,11 @@ const observedAttributes = [
|
|
6327
6338
|
'icon',
|
6328
6339
|
];
|
6329
6340
|
|
6330
|
-
const BaseInputClass$
|
6341
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
|
6331
6342
|
|
6332
|
-
class RawUploadFile extends BaseInputClass$
|
6343
|
+
class RawUploadFile extends BaseInputClass$3 {
|
6333
6344
|
static get observedAttributes() {
|
6334
|
-
return observedAttributes.concat(BaseInputClass$
|
6345
|
+
return observedAttributes.concat(BaseInputClass$3.observedAttributes || []);
|
6335
6346
|
}
|
6336
6347
|
|
6337
6348
|
constructor() {
|
@@ -6499,7 +6510,7 @@ class RawUploadFile extends BaseInputClass$2 {
|
|
6499
6510
|
}
|
6500
6511
|
|
6501
6512
|
const buttonVars = ButtonClass.cssVarList;
|
6502
|
-
const { host: host$
|
6513
|
+
const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
6503
6514
|
host: { selector: () => ':host' },
|
6504
6515
|
wrapper: { selector: () => ':host > div' },
|
6505
6516
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6518,11 +6529,11 @@ const UploadFileClass = compose(
|
|
6518
6529
|
borderWidth: {},
|
6519
6530
|
borderStyle: {},
|
6520
6531
|
borderRadius: {},
|
6521
|
-
hostHeight: { ...host$
|
6522
|
-
hostWidth: { ...host$
|
6532
|
+
hostHeight: { ...host$7, property: 'height' },
|
6533
|
+
hostWidth: { ...host$7, property: 'width' },
|
6523
6534
|
hostPadding: { property: 'padding' },
|
6524
6535
|
hostDirection: [
|
6525
|
-
{ ...host$
|
6536
|
+
{ ...host$7, property: 'direction' },
|
6526
6537
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
6527
6538
|
],
|
6528
6539
|
gap: { ...wrapper },
|
@@ -6542,7 +6553,7 @@ const UploadFileClass = compose(
|
|
6542
6553
|
componentNameValidationMixin
|
6543
6554
|
)(RawUploadFile);
|
6544
6555
|
|
6545
|
-
customElements.define(componentName$
|
6556
|
+
customElements.define(componentName$m, UploadFileClass);
|
6546
6557
|
|
6547
6558
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
6548
6559
|
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
@@ -6640,10 +6651,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
6640
6651
|
return BaseButtonSelectionGroupInternalClass;
|
6641
6652
|
};
|
6642
6653
|
|
6643
|
-
const componentName$
|
6654
|
+
const componentName$l = getComponentName('button-selection-group-internal');
|
6644
6655
|
|
6645
6656
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6646
|
-
componentName$
|
6657
|
+
componentName$l
|
6647
6658
|
) {
|
6648
6659
|
getSelectedNode() {
|
6649
6660
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -6799,7 +6810,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
6799
6810
|
}
|
6800
6811
|
};
|
6801
6812
|
|
6802
|
-
const { host: host$
|
6813
|
+
const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
6803
6814
|
host: { selector: () => ':host' },
|
6804
6815
|
label: { selector: '::part(label)' },
|
6805
6816
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6808,9 +6819,9 @@ const { host: host$4, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
6808
6819
|
};
|
6809
6820
|
|
6810
6821
|
const buttonSelectionGroupMappings = {
|
6811
|
-
hostWidth: { ...host$
|
6812
|
-
hostDirection: { ...host$
|
6813
|
-
fontFamily: host$
|
6822
|
+
hostWidth: { ...host$6, property: 'width' },
|
6823
|
+
hostDirection: { ...host$6, property: 'direction' },
|
6824
|
+
fontFamily: host$6,
|
6814
6825
|
labelTextColor: [
|
6815
6826
|
{ ...label$1, property: 'color' },
|
6816
6827
|
{ ...requiredIndicator$1, property: 'color' },
|
@@ -6875,7 +6886,7 @@ const buttonSelectionGroupStyles = `
|
|
6875
6886
|
${resetInputCursor('vaadin-text-field')}
|
6876
6887
|
`;
|
6877
6888
|
|
6878
|
-
const componentName$
|
6889
|
+
const componentName$k = getComponentName('button-selection-group');
|
6879
6890
|
|
6880
6891
|
const buttonSelectionGroupMixin = (superclass) =>
|
6881
6892
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -6884,19 +6895,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
6884
6895
|
const template = document.createElement('template');
|
6885
6896
|
|
6886
6897
|
template.innerHTML = `
|
6887
|
-
<${componentName$
|
6898
|
+
<${componentName$l}
|
6888
6899
|
name="button-selection-group"
|
6889
6900
|
slot="input"
|
6890
6901
|
tabindex="-1"
|
6891
6902
|
part="internal-component"
|
6892
6903
|
>
|
6893
6904
|
<slot></slot>
|
6894
|
-
</${componentName$
|
6905
|
+
</${componentName$l}>
|
6895
6906
|
`;
|
6896
6907
|
|
6897
6908
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6898
6909
|
|
6899
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6910
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
6900
6911
|
|
6901
6912
|
forwardAttrs(this, this.inputElement, {
|
6902
6913
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6921,16 +6932,16 @@ const ButtonSelectionGroupClass = compose(
|
|
6921
6932
|
wrappedEleName: 'vaadin-text-field',
|
6922
6933
|
style: () => buttonSelectionGroupStyles,
|
6923
6934
|
excludeAttrsSync: ['tabindex'],
|
6924
|
-
componentName: componentName$
|
6935
|
+
componentName: componentName$k,
|
6925
6936
|
})
|
6926
6937
|
);
|
6927
6938
|
|
6928
|
-
customElements.define(componentName$
|
6939
|
+
customElements.define(componentName$l, ButtonSelectionGroupInternalClass);
|
6929
6940
|
|
6930
|
-
const componentName$
|
6941
|
+
const componentName$j = getComponentName('button-selection-group-item');
|
6931
6942
|
|
6932
6943
|
class RawSelectItem extends createBaseClass({
|
6933
|
-
componentName: componentName$
|
6944
|
+
componentName: componentName$j,
|
6934
6945
|
baseSelector: ':host > descope-button',
|
6935
6946
|
}) {
|
6936
6947
|
get size() {
|
@@ -7037,14 +7048,14 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7037
7048
|
componentNameValidationMixin
|
7038
7049
|
)(RawSelectItem);
|
7039
7050
|
|
7040
|
-
customElements.define(componentName$
|
7051
|
+
customElements.define(componentName$j, ButtonSelectionGroupItemClass);
|
7041
7052
|
|
7042
|
-
customElements.define(componentName$
|
7053
|
+
customElements.define(componentName$k, ButtonSelectionGroupClass);
|
7043
7054
|
|
7044
|
-
const componentName$
|
7055
|
+
const componentName$i = getComponentName('button-multi-selection-group-internal');
|
7045
7056
|
|
7046
7057
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
7047
|
-
componentName$
|
7058
|
+
componentName$i
|
7048
7059
|
) {
|
7049
7060
|
#getSelectedNodes() {
|
7050
7061
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -7147,7 +7158,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
7147
7158
|
}
|
7148
7159
|
}
|
7149
7160
|
|
7150
|
-
const componentName$
|
7161
|
+
const componentName$h = getComponentName('button-multi-selection-group');
|
7151
7162
|
|
7152
7163
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
7153
7164
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -7156,19 +7167,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
7156
7167
|
const template = document.createElement('template');
|
7157
7168
|
|
7158
7169
|
template.innerHTML = `
|
7159
|
-
<${componentName$
|
7170
|
+
<${componentName$i}
|
7160
7171
|
name="button-selection-group"
|
7161
7172
|
slot="input"
|
7162
7173
|
tabindex="-1"
|
7163
7174
|
part="internal-component"
|
7164
7175
|
>
|
7165
7176
|
<slot></slot>
|
7166
|
-
</${componentName$
|
7177
|
+
</${componentName$i}>
|
7167
7178
|
`;
|
7168
7179
|
|
7169
7180
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7170
7181
|
|
7171
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7182
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
7172
7183
|
|
7173
7184
|
forwardAttrs(this, this.inputElement, {
|
7174
7185
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -7193,13 +7204,13 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
7193
7204
|
wrappedEleName: 'vaadin-text-field',
|
7194
7205
|
style: () => buttonSelectionGroupStyles,
|
7195
7206
|
excludeAttrsSync: ['tabindex'],
|
7196
|
-
componentName: componentName$
|
7207
|
+
componentName: componentName$h,
|
7197
7208
|
})
|
7198
7209
|
);
|
7199
7210
|
|
7200
|
-
customElements.define(componentName$
|
7211
|
+
customElements.define(componentName$i, ButtonMultiSelectionGroupInternalClass);
|
7201
7212
|
|
7202
|
-
customElements.define(componentName$
|
7213
|
+
customElements.define(componentName$h, ButtonMultiSelectionGroupClass);
|
7203
7214
|
|
7204
7215
|
/* eslint-disable no-param-reassign */
|
7205
7216
|
|
@@ -7227,9 +7238,9 @@ class GridTextColumnClass extends GridSortColumn {
|
|
7227
7238
|
}
|
7228
7239
|
}
|
7229
7240
|
|
7230
|
-
const componentName$
|
7241
|
+
const componentName$g = getComponentName('grid-text-column');
|
7231
7242
|
|
7232
|
-
customElements.define(componentName$
|
7243
|
+
customElements.define(componentName$g, GridTextColumnClass);
|
7233
7244
|
|
7234
7245
|
/* eslint-disable no-param-reassign */
|
7235
7246
|
|
@@ -7264,9 +7275,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
|
|
7264
7275
|
|
7265
7276
|
/* eslint-disable no-param-reassign */
|
7266
7277
|
|
7267
|
-
const componentName$
|
7278
|
+
const componentName$f = getComponentName('grid-custom-column');
|
7268
7279
|
|
7269
|
-
customElements.define(componentName$
|
7280
|
+
customElements.define(componentName$f, GridCustomColumnClass);
|
7270
7281
|
|
7271
7282
|
const createCheckboxEle = () => {
|
7272
7283
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -7325,9 +7336,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
7325
7336
|
}
|
7326
7337
|
}
|
7327
7338
|
|
7328
|
-
const componentName$
|
7339
|
+
const componentName$e = getComponentName('grid-selection-column');
|
7329
7340
|
|
7330
|
-
customElements.define(componentName$
|
7341
|
+
customElements.define(componentName$e, GridSelectionColumnClass);
|
7331
7342
|
|
7332
7343
|
const isValidDataType = (data) => {
|
7333
7344
|
const isValid = Array.isArray(data);
|
@@ -7339,7 +7350,7 @@ const isValidDataType = (data) => {
|
|
7339
7350
|
return isValid;
|
7340
7351
|
};
|
7341
7352
|
|
7342
|
-
const componentName$
|
7353
|
+
const componentName$d = getComponentName('grid');
|
7343
7354
|
|
7344
7355
|
const GridMixin = (superclass) =>
|
7345
7356
|
class GridMixinClass extends superclass {
|
@@ -7499,7 +7510,7 @@ const GridMixin = (superclass) =>
|
|
7499
7510
|
};
|
7500
7511
|
|
7501
7512
|
const {
|
7502
|
-
host: host$
|
7513
|
+
host: host$5,
|
7503
7514
|
headerRow,
|
7504
7515
|
headerRowCell,
|
7505
7516
|
contentRow,
|
@@ -7534,15 +7545,15 @@ const GridClass = compose(
|
|
7534
7545
|
fontWeight: { ...contentRow },
|
7535
7546
|
valueTextColor: { ...contentRow, property: 'color' },
|
7536
7547
|
backgroundColor: [
|
7537
|
-
{ ...host$
|
7548
|
+
{ ...host$5, property: 'background-color' },
|
7538
7549
|
{ ...contentRow, property: 'background-color' },
|
7539
7550
|
],
|
7540
7551
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7541
7552
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7542
|
-
borderColor: { ...host$
|
7543
|
-
borderWidth: { ...host$
|
7544
|
-
borderStyle: { ...host$
|
7545
|
-
borderRadius: { ...host$
|
7553
|
+
borderColor: { ...host$5, property: 'border-color' },
|
7554
|
+
borderWidth: { ...host$5, property: 'border-width' },
|
7555
|
+
borderStyle: { ...host$5, property: 'border-style' },
|
7556
|
+
borderRadius: { ...host$5, property: 'border-radius' },
|
7546
7557
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7547
7558
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7548
7559
|
separatorColor: [
|
@@ -7575,13 +7586,13 @@ const GridClass = compose(
|
|
7575
7586
|
}
|
7576
7587
|
`,
|
7577
7588
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7578
|
-
componentName: componentName$
|
7589
|
+
componentName: componentName$d,
|
7579
7590
|
})
|
7580
7591
|
);
|
7581
7592
|
|
7582
|
-
customElements.define(componentName$
|
7593
|
+
customElements.define(componentName$d, GridClass);
|
7583
7594
|
|
7584
|
-
const componentName$
|
7595
|
+
const componentName$c = getComponentName('multi-select-combo-box');
|
7585
7596
|
|
7586
7597
|
const multiSelectComboBoxMixin = (superclass) =>
|
7587
7598
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -7969,7 +7980,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7969
7980
|
};
|
7970
7981
|
|
7971
7982
|
const {
|
7972
|
-
host: host$
|
7983
|
+
host: host$4,
|
7973
7984
|
inputField,
|
7974
7985
|
inputElement,
|
7975
7986
|
placeholder,
|
@@ -8007,10 +8018,10 @@ const {
|
|
8007
8018
|
const MultiSelectComboBoxClass = compose(
|
8008
8019
|
createStyleMixin({
|
8009
8020
|
mappings: {
|
8010
|
-
hostWidth: { ...host$
|
8011
|
-
hostDirection: { ...host$
|
8021
|
+
hostWidth: { ...host$4, property: 'width' },
|
8022
|
+
hostDirection: { ...host$4, property: 'direction' },
|
8012
8023
|
// we apply font-size also on the host so we can set its width with em
|
8013
|
-
fontSize: [{}, host$
|
8024
|
+
fontSize: [{}, host$4],
|
8014
8025
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
8015
8026
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
8016
8027
|
labelTextColor: [
|
@@ -8185,16 +8196,16 @@ const MultiSelectComboBoxClass = compose(
|
|
8185
8196
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
8186
8197
|
// tries to override it, causing us to lose the user set placeholder.
|
8187
8198
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
8188
|
-
componentName: componentName$
|
8199
|
+
componentName: componentName$c,
|
8189
8200
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
8190
8201
|
})
|
8191
8202
|
);
|
8192
8203
|
|
8193
|
-
customElements.define(componentName$
|
8204
|
+
customElements.define(componentName$c, MultiSelectComboBoxClass);
|
8194
8205
|
|
8195
|
-
const componentName$
|
8206
|
+
const componentName$b = getComponentName('badge');
|
8196
8207
|
|
8197
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
8208
|
+
class RawBadge extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
|
8198
8209
|
constructor() {
|
8199
8210
|
super();
|
8200
8211
|
|
@@ -8205,6 +8216,9 @@ class RawBadge extends createBaseClass({ componentName: componentName$8, baseSel
|
|
8205
8216
|
}
|
8206
8217
|
:host > div {
|
8207
8218
|
width: 100%;
|
8219
|
+
text-overflow: ellipsis;
|
8220
|
+
overflow: hidden;
|
8221
|
+
white-space: nowrap;
|
8208
8222
|
}
|
8209
8223
|
</style>
|
8210
8224
|
<div>
|
@@ -8242,11 +8256,11 @@ const BadgeClass = compose(
|
|
8242
8256
|
componentNameValidationMixin
|
8243
8257
|
)(RawBadge);
|
8244
8258
|
|
8245
|
-
customElements.define(componentName$
|
8259
|
+
customElements.define(componentName$b, BadgeClass);
|
8246
8260
|
|
8247
|
-
const componentName$
|
8261
|
+
const componentName$a = getComponentName('modal');
|
8248
8262
|
|
8249
|
-
const customMixin$
|
8263
|
+
const customMixin$2 = (superclass) =>
|
8250
8264
|
class ModalMixinClass extends superclass {
|
8251
8265
|
get opened() {
|
8252
8266
|
return this.getAttribute('opened') === 'true';
|
@@ -8336,18 +8350,18 @@ const ModalClass = compose(
|
|
8336
8350
|
}),
|
8337
8351
|
draggableMixin,
|
8338
8352
|
componentNameValidationMixin,
|
8339
|
-
customMixin$
|
8353
|
+
customMixin$2
|
8340
8354
|
)(
|
8341
8355
|
createProxy({
|
8342
8356
|
slots: [''],
|
8343
8357
|
wrappedEleName: 'vaadin-dialog',
|
8344
8358
|
style: () => ``,
|
8345
8359
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8346
|
-
componentName: componentName$
|
8360
|
+
componentName: componentName$a,
|
8347
8361
|
})
|
8348
8362
|
);
|
8349
8363
|
|
8350
|
-
customElements.define(componentName$
|
8364
|
+
customElements.define(componentName$a, ModalClass);
|
8351
8365
|
|
8352
8366
|
const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
|
8353
8367
|
|
@@ -8358,7 +8372,7 @@ if (!vaadinContainerClass) {
|
|
8358
8372
|
class NotificationContainerClass extends vaadinContainerClass {}
|
8359
8373
|
customElements.define(getComponentName('notification-container'), NotificationContainerClass);
|
8360
8374
|
|
8361
|
-
const componentName$
|
8375
|
+
const componentName$9 = getComponentName('notification-card');
|
8362
8376
|
|
8363
8377
|
const notificationCardMixin = (superclass) =>
|
8364
8378
|
class NotificationCardMixinClass extends superclass {
|
@@ -8466,13 +8480,13 @@ const NotificationCardClass = compose(
|
|
8466
8480
|
}
|
8467
8481
|
`,
|
8468
8482
|
excludeAttrsSync: ['tabindex'],
|
8469
|
-
componentName: componentName$
|
8483
|
+
componentName: componentName$9,
|
8470
8484
|
})
|
8471
8485
|
);
|
8472
8486
|
|
8473
|
-
customElements.define(componentName$
|
8487
|
+
customElements.define(componentName$9, NotificationCardClass);
|
8474
8488
|
|
8475
|
-
const componentName$
|
8489
|
+
const componentName$8 = getComponentName('notification');
|
8476
8490
|
|
8477
8491
|
const NotificationMixin = (superclass) =>
|
8478
8492
|
class NotificationMixinClass extends superclass {
|
@@ -8567,14 +8581,14 @@ const NotificationClass = compose(
|
|
8567
8581
|
createProxy({
|
8568
8582
|
wrappedEleName: 'vaadin-notification',
|
8569
8583
|
excludeAttrsSync: ['tabindex'],
|
8570
|
-
componentName: componentName$
|
8584
|
+
componentName: componentName$8,
|
8571
8585
|
})
|
8572
8586
|
);
|
8573
8587
|
|
8574
|
-
customElements.define(componentName$
|
8588
|
+
customElements.define(componentName$8, NotificationClass);
|
8575
8589
|
|
8576
|
-
const componentName$
|
8577
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
8590
|
+
const componentName$7 = getComponentName('avatar');
|
8591
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
|
8578
8592
|
constructor() {
|
8579
8593
|
super();
|
8580
8594
|
|
@@ -8584,7 +8598,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8584
8598
|
display: inline-flex;
|
8585
8599
|
}
|
8586
8600
|
|
8587
|
-
.
|
8601
|
+
.editableBadge {
|
8588
8602
|
border: 1px solid;
|
8589
8603
|
border-radius: 100%;
|
8590
8604
|
height: fit-content;
|
@@ -8620,7 +8634,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8620
8634
|
|
8621
8635
|
<div class="wrapper">
|
8622
8636
|
<vaadin-avatar></vaadin-avatar>
|
8623
|
-
<div class="
|
8637
|
+
<div class="editableBadge">
|
8624
8638
|
<vaadin-icon icon="vaadin:pencil"></vaadin-icon>
|
8625
8639
|
</div>
|
8626
8640
|
</div>
|
@@ -8629,10 +8643,11 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8629
8643
|
this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
|
8630
8644
|
|
8631
8645
|
forwardAttrs(this, this.avatarComponent, {
|
8632
|
-
includeAttrs: ['name', 'img'],
|
8646
|
+
includeAttrs: ['display-name', 'img'],
|
8647
|
+
mapAttrs: { 'display-name': 'name' },
|
8633
8648
|
});
|
8634
8649
|
|
8635
|
-
const editableIcon = this.shadowRoot.querySelector('.
|
8650
|
+
const editableIcon = this.shadowRoot.querySelector('.editableBadge');
|
8636
8651
|
|
8637
8652
|
observeAttributes(
|
8638
8653
|
this,
|
@@ -8648,18 +8663,19 @@ class RawAvatar extends createBaseClass({ componentName: componentName$4, baseSe
|
|
8648
8663
|
}
|
8649
8664
|
}
|
8650
8665
|
|
8651
|
-
const { host: host$
|
8666
|
+
const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
8652
8667
|
host: { selector: () => ':host' },
|
8653
|
-
editableBadge: { selector: '> .
|
8668
|
+
editableBadge: { selector: '> .editableBadge' },
|
8654
8669
|
avatar: { selector: 'vaadin-avatar' },
|
8655
8670
|
};
|
8656
8671
|
|
8657
8672
|
const AvatarClass = compose(
|
8658
8673
|
createStyleMixin({
|
8659
8674
|
mappings: {
|
8660
|
-
hostWidth: { ...host$
|
8661
|
-
hostHeight: { ...host$
|
8662
|
-
|
8675
|
+
hostWidth: { ...host$3, property: 'width' },
|
8676
|
+
hostHeight: { ...host$3, property: 'height' },
|
8677
|
+
cursor: [avatar$2, host$3],
|
8678
|
+
hostDirection: { ...host$3, property: 'direction' },
|
8663
8679
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
8664
8680
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
8665
8681
|
editableIconColor: { ...editableBadge, property: 'color' },
|
@@ -8671,17 +8687,17 @@ const AvatarClass = compose(
|
|
8671
8687
|
componentNameValidationMixin
|
8672
8688
|
)(RawAvatar);
|
8673
8689
|
|
8674
|
-
customElements.define(componentName$
|
8690
|
+
customElements.define(componentName$7, AvatarClass);
|
8675
8691
|
|
8676
|
-
const componentName$
|
8692
|
+
const componentName$6 = getComponentName('mappings-field-internal');
|
8677
8693
|
|
8678
|
-
const BaseInputClass$
|
8694
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
8679
8695
|
|
8680
|
-
class MappingsFieldInternal extends BaseInputClass$
|
8696
|
+
class MappingsFieldInternal extends BaseInputClass$2 {
|
8681
8697
|
#errorItem;
|
8682
8698
|
|
8683
8699
|
static get observedAttributes() {
|
8684
|
-
return [].concat(BaseInputClass$
|
8700
|
+
return [].concat(BaseInputClass$2.observedAttributes || [], [
|
8685
8701
|
'label-value',
|
8686
8702
|
'label-attr',
|
8687
8703
|
'button-label',
|
@@ -8734,7 +8750,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8734
8750
|
// before the new item is added and thus returns a wrong result
|
8735
8751
|
setTimeout(() => {
|
8736
8752
|
this.setCustomValidity('');
|
8737
|
-
newMappingItem.addEventListener('mapping-item-removed', (
|
8753
|
+
newMappingItem.addEventListener('mapping-item-removed', () => {
|
8738
8754
|
// If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
|
8739
8755
|
if (newMappingItem === this.#errorItem) {
|
8740
8756
|
this.resetInvalidIndication();
|
@@ -8742,8 +8758,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8742
8758
|
}
|
8743
8759
|
newMappingItem.remove();
|
8744
8760
|
this.setCustomValidity('');
|
8745
|
-
e.stopPropagation();
|
8746
8761
|
});
|
8762
|
+
this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
|
8747
8763
|
if (focusNewItem) {
|
8748
8764
|
newMappingItem.focus();
|
8749
8765
|
}
|
@@ -8910,9 +8926,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8910
8926
|
}
|
8911
8927
|
}
|
8912
8928
|
|
8913
|
-
const componentName$
|
8929
|
+
const componentName$5 = getComponentName('mappings-field');
|
8914
8930
|
|
8915
|
-
const customMixin = (superclass) =>
|
8931
|
+
const customMixin$1 = (superclass) =>
|
8916
8932
|
class MappingsFieldMixinClass extends superclass {
|
8917
8933
|
get defaultValues() {
|
8918
8934
|
const defaultValuesAttr = this.getAttribute('default-values');
|
@@ -8939,14 +8955,14 @@ const customMixin = (superclass) =>
|
|
8939
8955
|
const template = document.createElement('template');
|
8940
8956
|
|
8941
8957
|
template.innerHTML = `
|
8942
|
-
<${componentName$
|
8958
|
+
<${componentName$6}
|
8943
8959
|
tabindex="-1"
|
8944
|
-
></${componentName$
|
8960
|
+
></${componentName$6}>
|
8945
8961
|
`;
|
8946
8962
|
|
8947
8963
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8948
8964
|
|
8949
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
8965
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
8950
8966
|
|
8951
8967
|
forwardAttrs(this, this.inputElement, {
|
8952
8968
|
includeAttrs: [
|
@@ -8964,16 +8980,21 @@ const customMixin = (superclass) =>
|
|
8964
8980
|
],
|
8965
8981
|
});
|
8966
8982
|
|
8983
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
8984
|
+
// we want to reflect the change in the parent component
|
8985
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
8986
|
+
|
8967
8987
|
this.setDefaultValues();
|
8968
8988
|
}
|
8969
8989
|
};
|
8970
8990
|
|
8971
8991
|
const {
|
8972
|
-
host,
|
8992
|
+
host: host$2,
|
8973
8993
|
helperText,
|
8974
8994
|
errorMessage,
|
8975
8995
|
mappingItem,
|
8976
8996
|
labels,
|
8997
|
+
labelsText,
|
8977
8998
|
valueLabel,
|
8978
8999
|
attrLabel,
|
8979
9000
|
separator,
|
@@ -8984,6 +9005,9 @@ const {
|
|
8984
9005
|
errorMessage: { selector: '::part(error-message)' },
|
8985
9006
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
8986
9007
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
9008
|
+
labelsText: {
|
9009
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
9010
|
+
},
|
8987
9011
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
8988
9012
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
8989
9013
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
@@ -8993,12 +9017,17 @@ const {
|
|
8993
9017
|
const MappingsFieldClass = compose(
|
8994
9018
|
createStyleMixin({
|
8995
9019
|
mappings: {
|
8996
|
-
hostWidth: { ...host, property: 'width' },
|
8997
|
-
hostDirection: { ...host, property: 'direction' },
|
9020
|
+
hostWidth: { ...host$2, property: 'width' },
|
9021
|
+
hostDirection: { ...host$2, property: 'direction' },
|
8998
9022
|
// we apply font-size also on the host so we can set its width with em
|
8999
|
-
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
9023
|
+
fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
|
9000
9024
|
fontFamily: [helperText, errorMessage, labels],
|
9001
9025
|
separatorFontSize: { ...separator, property: 'font-size' },
|
9026
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
9027
|
+
labelsLineHeight: [
|
9028
|
+
{ ...labelsText, property: 'line-height' },
|
9029
|
+
{ ...labels, property: 'line-height' },
|
9030
|
+
],
|
9002
9031
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
9003
9032
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
9004
9033
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
@@ -9015,7 +9044,7 @@ const MappingsFieldClass = compose(
|
|
9015
9044
|
proxyParentValidation: true,
|
9016
9045
|
}),
|
9017
9046
|
componentNameValidationMixin,
|
9018
|
-
customMixin
|
9047
|
+
customMixin$1
|
9019
9048
|
)(
|
9020
9049
|
createProxy({
|
9021
9050
|
slots: [],
|
@@ -9062,21 +9091,21 @@ const MappingsFieldClass = compose(
|
|
9062
9091
|
'options',
|
9063
9092
|
'error-message',
|
9064
9093
|
],
|
9065
|
-
componentName: componentName$
|
9094
|
+
componentName: componentName$5,
|
9066
9095
|
})
|
9067
9096
|
);
|
9068
9097
|
|
9069
|
-
customElements.define(componentName$
|
9098
|
+
customElements.define(componentName$6, MappingsFieldInternal);
|
9070
9099
|
|
9071
|
-
const componentName$
|
9100
|
+
const componentName$4 = getComponentName('mapping-item');
|
9072
9101
|
|
9073
9102
|
const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
|
9074
9103
|
|
9075
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
9104
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
|
9076
9105
|
|
9077
|
-
class MappingItem extends BaseInputClass {
|
9106
|
+
class MappingItem extends BaseInputClass$1 {
|
9078
9107
|
static get observedAttributes() {
|
9079
|
-
return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
|
9108
|
+
return [].concat(BaseInputClass$1.observedAttributes || [], inputAttrs, [
|
9080
9109
|
'separator',
|
9081
9110
|
'options',
|
9082
9111
|
'invalid',
|
@@ -9159,7 +9188,7 @@ class MappingItem extends BaseInputClass {
|
|
9159
9188
|
|
9160
9189
|
initRemoveButton() {
|
9161
9190
|
this.removeButton.addEventListener('click', () =>
|
9162
|
-
this.dispatchEvent(new CustomEvent('mapping-item-removed'))
|
9191
|
+
this.dispatchEvent(new CustomEvent('mapping-item-removed', { bubbles: true, composed: true }))
|
9163
9192
|
);
|
9164
9193
|
}
|
9165
9194
|
|
@@ -9222,133 +9251,592 @@ class MappingItem extends BaseInputClass {
|
|
9222
9251
|
}
|
9223
9252
|
}
|
9224
9253
|
|
9225
|
-
customElements.define(componentName$
|
9254
|
+
customElements.define(componentName$4, MappingItem);
|
9226
9255
|
|
9227
|
-
customElements.define(componentName$
|
9256
|
+
customElements.define(componentName$5, MappingsFieldClass);
|
9228
9257
|
|
9229
|
-
|
9258
|
+
function deleteIcon() {
|
9259
|
+
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;
|
9260
|
+
}
|
9230
9261
|
|
9231
|
-
|
9232
|
-
|
9233
|
-
|
9262
|
+
function editIcon() {
|
9263
|
+
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;
|
9264
|
+
}
|
9234
9265
|
|
9235
|
-
|
9236
|
-
|
9237
|
-
|
9238
|
-
|
9239
|
-
|
9266
|
+
const componentName$3 = getComponentName('user-attribute');
|
9267
|
+
class RawUserAttribute extends createBaseClass({
|
9268
|
+
componentName: componentName$3,
|
9269
|
+
baseSelector: ':host > .root',
|
9270
|
+
}) {
|
9271
|
+
constructor() {
|
9272
|
+
super();
|
9240
9273
|
|
9241
|
-
|
9242
|
-
|
9274
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
9275
|
+
<style>
|
9276
|
+
:host {
|
9277
|
+
display: inline-flex;
|
9278
|
+
}
|
9243
9279
|
|
9244
|
-
|
9245
|
-
|
9246
|
-
|
9247
|
-
return merge(acc, getTransformation(path.concat(key), val));
|
9248
|
-
}
|
9249
|
-
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
9250
|
-
}, {});
|
9251
|
-
};
|
9280
|
+
vaadin-icon {
|
9281
|
+
color: currentcolor;
|
9282
|
+
}
|
9252
9283
|
|
9253
|
-
|
9254
|
-
|
9284
|
+
.root {
|
9285
|
+
display: flex;
|
9286
|
+
width: 100%;
|
9287
|
+
height: 100%;
|
9288
|
+
align-items: center;
|
9289
|
+
}
|
9255
9290
|
|
9256
|
-
|
9257
|
-
|
9258
|
-
|
9259
|
-
|
9260
|
-
|
9261
|
-
|
9262
|
-
default:
|
9263
|
-
return val;
|
9264
|
-
}
|
9265
|
-
};
|
9291
|
+
.btn-wrapper {
|
9292
|
+
display: flex;
|
9293
|
+
justify-content: space-between;
|
9294
|
+
align-items: center;
|
9295
|
+
flex-grow: 0;
|
9296
|
+
}
|
9266
9297
|
|
9267
|
-
|
9268
|
-
|
9269
|
-
|
9270
|
-
|
9298
|
+
.text-wrapper {
|
9299
|
+
display: flex;
|
9300
|
+
align-items: center;
|
9301
|
+
flex-grow: 1;
|
9302
|
+
}
|
9271
9303
|
|
9272
|
-
|
9273
|
-
|
9274
|
-
|
9275
|
-
|
9304
|
+
descope-text::part(text-wrapper) {
|
9305
|
+
text-overflow: ellipsis;
|
9306
|
+
overflow: hidden;
|
9307
|
+
white-space: nowrap;
|
9308
|
+
width: initial;
|
9309
|
+
}
|
9276
9310
|
|
9277
|
-
|
9278
|
-
|
9311
|
+
descope-text {
|
9312
|
+
display: inline-flex;
|
9313
|
+
}
|
9279
9314
|
|
9280
|
-
|
9281
|
-
|
9282
|
-
|
9283
|
-
''
|
9284
|
-
);
|
9315
|
+
descope-badge {
|
9316
|
+
margin-inline-end: 10px;
|
9317
|
+
}
|
9285
9318
|
|
9286
|
-
|
9319
|
+
descope-text[data-id="label-text"].required:after {
|
9320
|
+
content: '*';
|
9321
|
+
color: var(${TextClass.cssVarList.textColor});
|
9322
|
+
}
|
9323
|
+
</style>
|
9287
9324
|
|
9288
|
-
return `*[data-theme="${themeName}"] {${style}}`;
|
9289
|
-
};
|
9290
9325
|
|
9291
|
-
|
9292
|
-
|
9293
|
-
|
9294
|
-
|
9295
|
-
|
9326
|
+
<div class="root">
|
9327
|
+
<div class="text-wrapper">
|
9328
|
+
<descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
|
9329
|
+
<descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
|
9330
|
+
</div>
|
9296
9331
|
|
9297
|
-
|
9298
|
-
|
9299
|
-
|
9300
|
-
|
9332
|
+
<div class="btn-wrapper">
|
9333
|
+
<descope-badge mode="default" bordered="true" size="xs"></descope-badge>
|
9334
|
+
<descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
|
9335
|
+
<vaadin-icon src=${editIcon}></vaadin-icon>
|
9336
|
+
</descope-button>
|
9337
|
+
<descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
|
9338
|
+
<vaadin-icon src=${deleteIcon}></vaadin-icon>
|
9339
|
+
</descope-button>
|
9340
|
+
</div
|
9341
|
+
</div>
|
9342
|
+
`;
|
9301
9343
|
|
9302
|
-
|
9303
|
-
|
9304
|
-
|
9305
|
-
|
9306
|
-
|
9344
|
+
this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
|
9345
|
+
this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
|
9346
|
+
this.badge = this.shadowRoot.querySelector('descope-badge');
|
9347
|
+
this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
|
9348
|
+
this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
|
9349
|
+
}
|
9307
9350
|
|
9308
|
-
|
9309
|
-
|
9310
|
-
|
9351
|
+
onLabelChange() {
|
9352
|
+
this.labelText.innerText = this.label;
|
9353
|
+
this.labelText.setAttribute('title', this.label);
|
9354
|
+
}
|
9311
9355
|
|
9312
|
-
|
9313
|
-
|
9314
|
-
const
|
9315
|
-
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
9356
|
+
onValueOrPlaceholderChange() {
|
9357
|
+
const text = this.value || this.placeholder;
|
9358
|
+
const mode = this.value ? 'primary' : 'secondary';
|
9316
9359
|
|
9317
|
-
|
9360
|
+
this.valueText.innerText = text;
|
9361
|
+
this.valueText.setAttribute('title', text);
|
9362
|
+
this.valueText.setAttribute('mode', mode);
|
9363
|
+
}
|
9318
9364
|
|
9319
|
-
|
9320
|
-
|
9321
|
-
|
9322
|
-
|
9323
|
-
|
9324
|
-
|
9325
|
-
|
9326
|
-
|
9365
|
+
onBadgeLabelChange() {
|
9366
|
+
if (!this.badgeLabel) {
|
9367
|
+
this.badge.style.display = 'none';
|
9368
|
+
} else {
|
9369
|
+
this.badge.innerText = this.badgeLabel;
|
9370
|
+
this.badge.style.display = '';
|
9371
|
+
}
|
9372
|
+
}
|
9327
9373
|
|
9328
|
-
|
9329
|
-
|
9374
|
+
onBadgeTooltipTextChange() {
|
9375
|
+
this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
|
9376
|
+
}
|
9330
9377
|
|
9331
|
-
|
9378
|
+
onIsRequiredChange() {
|
9379
|
+
this.labelText.classList.toggle('required', this.isRequired);
|
9380
|
+
}
|
9332
9381
|
|
9333
|
-
|
9334
|
-
|
9335
|
-
|
9336
|
-
[selector]: {
|
9337
|
-
[property]: getCssVarValue(val),
|
9338
|
-
},
|
9339
|
-
},
|
9340
|
-
},
|
9341
|
-
};
|
9342
|
-
});
|
9382
|
+
get label() {
|
9383
|
+
return this.getAttribute('label') || '';
|
9384
|
+
}
|
9343
9385
|
|
9344
|
-
|
9345
|
-
|
9346
|
-
|
9347
|
-
|
9348
|
-
|
9349
|
-
|
9350
|
-
|
9351
|
-
|
9386
|
+
get value() {
|
9387
|
+
return this.getAttribute('value') || '';
|
9388
|
+
}
|
9389
|
+
|
9390
|
+
get placeholder() {
|
9391
|
+
return this.getAttribute('placeholder') || '';
|
9392
|
+
}
|
9393
|
+
|
9394
|
+
get isRequired() {
|
9395
|
+
return this.getAttribute('required') === 'true';
|
9396
|
+
}
|
9397
|
+
|
9398
|
+
get badgeLabel() {
|
9399
|
+
return this.getAttribute('badge-label') || '';
|
9400
|
+
}
|
9401
|
+
|
9402
|
+
get badgeTooltipText() {
|
9403
|
+
return this.getAttribute('badge-tooltip-text') || '';
|
9404
|
+
}
|
9405
|
+
|
9406
|
+
init() {
|
9407
|
+
this.onLabelChange();
|
9408
|
+
this.onValueOrPlaceholderChange();
|
9409
|
+
this.onIsRequiredChange();
|
9410
|
+
this.onBadgeLabelChange();
|
9411
|
+
this.onBadgeTooltipTextChange();
|
9412
|
+
|
9413
|
+
this.deleteButton.addEventListener('click', () =>
|
9414
|
+
this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
|
9415
|
+
);
|
9416
|
+
|
9417
|
+
this.editButton.addEventListener('click', () =>
|
9418
|
+
this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
|
9419
|
+
);
|
9420
|
+
}
|
9421
|
+
|
9422
|
+
static get observedAttributes() {
|
9423
|
+
return [
|
9424
|
+
'label',
|
9425
|
+
'value',
|
9426
|
+
'placeholder',
|
9427
|
+
'required',
|
9428
|
+
'badge-label',
|
9429
|
+
'badge-tooltip-text',
|
9430
|
+
].concat(super.observedAttributes);
|
9431
|
+
}
|
9432
|
+
|
9433
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
9434
|
+
super.attributeChangedCallback?.(name, oldValue, newValue);
|
9435
|
+
|
9436
|
+
if (oldValue === newValue) {
|
9437
|
+
return;
|
9438
|
+
}
|
9439
|
+
|
9440
|
+
if (name === 'label') {
|
9441
|
+
this.onLabelChange();
|
9442
|
+
} else if (name === 'value' || name === 'placeholder') {
|
9443
|
+
this.onValueOrPlaceholderChange();
|
9444
|
+
} else if (name === 'required') {
|
9445
|
+
this.onIsRequiredChange();
|
9446
|
+
} else if (name === 'badge-label') {
|
9447
|
+
this.onBadgeLabelChange();
|
9448
|
+
} else if (name === 'badge-tooltip-text') {
|
9449
|
+
this.onBadgeTooltipTextChange();
|
9450
|
+
}
|
9451
|
+
}
|
9452
|
+
}
|
9453
|
+
|
9454
|
+
const { host: host$1, textFields, buttons, badge: badge$2, labelText, valueText, textWrapper } = {
|
9455
|
+
host: { selector: () => ':host' },
|
9456
|
+
textFields: { selector: 'descope-text' },
|
9457
|
+
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
9458
|
+
labelText: { selector: 'descope-text[data-id="label-text"]' },
|
9459
|
+
buttons: { selector: 'descope-button' },
|
9460
|
+
badge: { selector: 'descope-badge' },
|
9461
|
+
textWrapper: { selector: ' .text-wrapper' },
|
9462
|
+
};
|
9463
|
+
|
9464
|
+
const UserAttributeClass = compose(
|
9465
|
+
createStyleMixin({
|
9466
|
+
mappings: {
|
9467
|
+
hostWidth: { ...host$1, property: 'width' },
|
9468
|
+
hostMinWidth: { ...host$1, property: 'min-width' },
|
9469
|
+
hostDirection: [
|
9470
|
+
{ ...host$1, property: 'direction' },
|
9471
|
+
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
9472
|
+
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
9473
|
+
{ ...badge$2, property: BadgeClass.cssVarList.hostDirection },
|
9474
|
+
],
|
9475
|
+
labelTextWidth: { ...labelText, property: 'width' },
|
9476
|
+
valueTextWidth: { ...valueText, property: 'width' },
|
9477
|
+
badgeMaxWidth: { ...badge$2, property: 'max-width' },
|
9478
|
+
itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
|
9479
|
+
},
|
9480
|
+
}),
|
9481
|
+
draggableMixin,
|
9482
|
+
componentNameValidationMixin
|
9483
|
+
)(RawUserAttribute);
|
9484
|
+
|
9485
|
+
customElements.define(componentName$3, UserAttributeClass);
|
9486
|
+
|
9487
|
+
const componentName$2 = getComponentName('saml-group-mappings-internal');
|
9488
|
+
|
9489
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$2, baseSelector: '' });
|
9490
|
+
|
9491
|
+
class SamlGroupMappingsInternal extends BaseInputClass {
|
9492
|
+
static get observedAttributes() {
|
9493
|
+
return ['invalid'].concat(BaseInputClass.observedAttributes || []);
|
9494
|
+
}
|
9495
|
+
|
9496
|
+
constructor() {
|
9497
|
+
super();
|
9498
|
+
|
9499
|
+
this.innerHTML = `
|
9500
|
+
<descope-text-field variant="body2" bordered="true"></descope-text-field>
|
9501
|
+
<descope-mappings-field></descope-mappings-field>
|
9502
|
+
`;
|
9503
|
+
|
9504
|
+
this.groupInputElement = this.querySelector('descope-text-field');
|
9505
|
+
this.mappingsElement = this.querySelector('descope-mappings-field');
|
9506
|
+
}
|
9507
|
+
|
9508
|
+
resetInvalidIndication() {
|
9509
|
+
this.removeAttribute('invalid');
|
9510
|
+
}
|
9511
|
+
|
9512
|
+
handleMappingsInvalidChange(changedAttributes) {
|
9513
|
+
if (changedAttributes.includes('invalid')) {
|
9514
|
+
if (!this.mappingsElement.hasAttribute('invalid')) {
|
9515
|
+
this.resetInvalidIndication();
|
9516
|
+
}
|
9517
|
+
}
|
9518
|
+
}
|
9519
|
+
|
9520
|
+
initFocusHandler() {
|
9521
|
+
// This event listener needs to be placed before the super.init() call
|
9522
|
+
this.addEventListener('focus', (e) => {
|
9523
|
+
// we want to ignore focus events we are dispatching
|
9524
|
+
if (e.isTrusted) {
|
9525
|
+
const focusedElement = this.mappingsElement.checkValidity()
|
9526
|
+
? this.groupInputElement
|
9527
|
+
: this.mappingsElement;
|
9528
|
+
focusedElement.focus();
|
9529
|
+
}
|
9530
|
+
});
|
9531
|
+
}
|
9532
|
+
|
9533
|
+
init() {
|
9534
|
+
// This needs to be placed before the super.init() call to work
|
9535
|
+
this.initFocusHandler();
|
9536
|
+
|
9537
|
+
super.init?.();
|
9538
|
+
|
9539
|
+
forwardAttrs(this, this.groupInputElement, {
|
9540
|
+
mapAttrs: { 'label-group': 'label' },
|
9541
|
+
includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
|
9542
|
+
});
|
9543
|
+
|
9544
|
+
forwardAttrs(this, this.mappingsElement, {
|
9545
|
+
includeAttrs: [
|
9546
|
+
'size',
|
9547
|
+
'full-width',
|
9548
|
+
'label-value',
|
9549
|
+
'label-attr',
|
9550
|
+
'button-label',
|
9551
|
+
'separator',
|
9552
|
+
'options',
|
9553
|
+
'readonly',
|
9554
|
+
'disabled',
|
9555
|
+
'data-errormessage-pattern-mismatch',
|
9556
|
+
],
|
9557
|
+
});
|
9558
|
+
|
9559
|
+
// Observing the invalid attribute of the mappings field to reset the invalid state for this component.
|
9560
|
+
// When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
|
9561
|
+
// level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
|
9562
|
+
observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
|
9563
|
+
includeAttrs: ['invalid'],
|
9564
|
+
});
|
9565
|
+
}
|
9566
|
+
|
9567
|
+
get value() {
|
9568
|
+
return {
|
9569
|
+
group: this.groupInputElement.value,
|
9570
|
+
mappings: this.mappingsElement.value,
|
9571
|
+
};
|
9572
|
+
}
|
9573
|
+
|
9574
|
+
set value(value) {
|
9575
|
+
if (value?.group && typeof value.group === 'string') {
|
9576
|
+
this.groupInputElement.value = value.group;
|
9577
|
+
}
|
9578
|
+
if (Array.isArray(value?.mappings)) {
|
9579
|
+
this.mappingsElement.value = value.mappings;
|
9580
|
+
}
|
9581
|
+
}
|
9582
|
+
|
9583
|
+
getValidity() {
|
9584
|
+
if (!this.groupInputElement.checkValidity()) {
|
9585
|
+
return this.groupInputElement.validity;
|
9586
|
+
}
|
9587
|
+
if (!this.mappingsElement.checkValidity()) {
|
9588
|
+
return this.mappingsElement.validity;
|
9589
|
+
}
|
9590
|
+
|
9591
|
+
return {};
|
9592
|
+
}
|
9593
|
+
|
9594
|
+
#handleInvalidState(isInvalid) {
|
9595
|
+
if (isInvalid) {
|
9596
|
+
if (!this.groupInputElement.checkValidity()) {
|
9597
|
+
this.groupInputElement.setAttribute('invalid', 'true');
|
9598
|
+
return;
|
9599
|
+
}
|
9600
|
+
|
9601
|
+
if (!this.mappingsElement.checkValidity()) {
|
9602
|
+
this.mappingsElement.setAttribute('invalid', 'true');
|
9603
|
+
}
|
9604
|
+
}
|
9605
|
+
}
|
9606
|
+
|
9607
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
9608
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
9609
|
+
if (attrName === 'invalid') {
|
9610
|
+
this.#handleInvalidState(newValue === 'true');
|
9611
|
+
}
|
9612
|
+
}
|
9613
|
+
}
|
9614
|
+
|
9615
|
+
const componentName$1 = getComponentName('saml-group-mappings');
|
9616
|
+
|
9617
|
+
const customMixin = (superclass) =>
|
9618
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
9619
|
+
init() {
|
9620
|
+
super.init?.();
|
9621
|
+
|
9622
|
+
const template = document.createElement('template');
|
9623
|
+
|
9624
|
+
template.innerHTML = `
|
9625
|
+
<${componentName$2}
|
9626
|
+
tabindex="-1"
|
9627
|
+
></${componentName$2}>
|
9628
|
+
`;
|
9629
|
+
|
9630
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
9631
|
+
|
9632
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$2);
|
9633
|
+
|
9634
|
+
forwardAttrs(this, this.inputElement, {
|
9635
|
+
includeAttrs: [
|
9636
|
+
'size',
|
9637
|
+
'full-width',
|
9638
|
+
'label-group',
|
9639
|
+
'label-value',
|
9640
|
+
'label-attr',
|
9641
|
+
'button-label',
|
9642
|
+
'separator',
|
9643
|
+
'options',
|
9644
|
+
'readonly',
|
9645
|
+
'disabled',
|
9646
|
+
],
|
9647
|
+
});
|
9648
|
+
|
9649
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
9650
|
+
}
|
9651
|
+
};
|
9652
|
+
|
9653
|
+
const { host, groupInput } = {
|
9654
|
+
host: { selector: () => ':host' },
|
9655
|
+
groupInput: { selector: 'descope-text-field' },
|
9656
|
+
};
|
9657
|
+
|
9658
|
+
const SamlGroupMappingsClass = compose(
|
9659
|
+
createStyleMixin({
|
9660
|
+
mappings: {
|
9661
|
+
hostWidth: { ...host, property: 'width' },
|
9662
|
+
hostDirection: { ...host, property: 'direction' },
|
9663
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
9664
|
+
},
|
9665
|
+
}),
|
9666
|
+
draggableMixin,
|
9667
|
+
composedProxyInputMixin({
|
9668
|
+
proxyProps: ['value', 'selectionStart'],
|
9669
|
+
inputEvent: 'input',
|
9670
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
9671
|
+
proxyParentValidation: true,
|
9672
|
+
}),
|
9673
|
+
componentNameValidationMixin,
|
9674
|
+
customMixin
|
9675
|
+
)(
|
9676
|
+
createProxy({
|
9677
|
+
slots: [],
|
9678
|
+
wrappedEleName: 'vaadin-custom-field',
|
9679
|
+
style: () => `
|
9680
|
+
:host {
|
9681
|
+
display: inline-flex;
|
9682
|
+
max-width: 100%;
|
9683
|
+
direction: ltr;
|
9684
|
+
}
|
9685
|
+
|
9686
|
+
vaadin-custom-field {
|
9687
|
+
line-height: unset;
|
9688
|
+
width: 100%;
|
9689
|
+
}
|
9690
|
+
|
9691
|
+
descope-text-field {
|
9692
|
+
width: auto;
|
9693
|
+
}
|
9694
|
+
|
9695
|
+
descope-mappings-field {
|
9696
|
+
display: block;
|
9697
|
+
}
|
9698
|
+
`,
|
9699
|
+
excludeAttrsSync: [
|
9700
|
+
'tabindex',
|
9701
|
+
'label-group',
|
9702
|
+
'label-value',
|
9703
|
+
'label-attr',
|
9704
|
+
'button-label',
|
9705
|
+
'separator',
|
9706
|
+
'options',
|
9707
|
+
'error-message',
|
9708
|
+
],
|
9709
|
+
componentName: componentName$1,
|
9710
|
+
})
|
9711
|
+
);
|
9712
|
+
|
9713
|
+
customElements.define(componentName$2, SamlGroupMappingsInternal);
|
9714
|
+
|
9715
|
+
customElements.define(componentName$1, SamlGroupMappingsClass);
|
9716
|
+
|
9717
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
9718
|
+
|
9719
|
+
// lodash.set alternative
|
9720
|
+
const set = (obj, path, value) => {
|
9721
|
+
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
9722
|
+
|
9723
|
+
pathArray.reduce((acc, key, i) => {
|
9724
|
+
if (acc[key] === undefined) acc[key] = {};
|
9725
|
+
if (i === pathArray.length - 1) acc[key] = value;
|
9726
|
+
return acc[key];
|
9727
|
+
}, obj);
|
9728
|
+
|
9729
|
+
return obj;
|
9730
|
+
};
|
9731
|
+
|
9732
|
+
const transformTheme = (theme, path, getTransformation) => {
|
9733
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
9734
|
+
if (val?.constructor !== Object) {
|
9735
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
9736
|
+
}
|
9737
|
+
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
9738
|
+
}, {});
|
9739
|
+
};
|
9740
|
+
|
9741
|
+
const stringifyArray = (strArr) =>
|
9742
|
+
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
9743
|
+
|
9744
|
+
const getCssVarValue = (val) => {
|
9745
|
+
switch (true) {
|
9746
|
+
case Array.isArray(val):
|
9747
|
+
return stringifyArray(val);
|
9748
|
+
case isUrl(val):
|
9749
|
+
return `url(${val})`;
|
9750
|
+
default:
|
9751
|
+
return val;
|
9752
|
+
}
|
9753
|
+
};
|
9754
|
+
|
9755
|
+
const themeToCSSVarsObj = (theme) =>
|
9756
|
+
transformTheme(theme, [], (path, val) => ({
|
9757
|
+
[getVarName(path)]: getCssVarValue(val),
|
9758
|
+
}));
|
9759
|
+
|
9760
|
+
const getThemeRefs = (theme, prefix) =>
|
9761
|
+
transformTheme(theme, [], (path) =>
|
9762
|
+
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
9763
|
+
);
|
9764
|
+
|
9765
|
+
const getThemeVars = (theme, prefix) =>
|
9766
|
+
transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
|
9767
|
+
|
9768
|
+
const globalsThemeToStyle = (theme, themeName = '') => {
|
9769
|
+
const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
|
9770
|
+
(acc, entry) => `${acc}${entry.join(':')};\n`,
|
9771
|
+
''
|
9772
|
+
);
|
9773
|
+
|
9774
|
+
if (!themeName) return style;
|
9775
|
+
|
9776
|
+
return `*[data-theme="${themeName}"] {${style}}`;
|
9777
|
+
};
|
9778
|
+
|
9779
|
+
const componentsThemeToStyleObj = (componentsTheme) =>
|
9780
|
+
transformTheme(componentsTheme, [], (path, val) => {
|
9781
|
+
const [component, ...restPath] = path;
|
9782
|
+
const property = restPath.pop();
|
9783
|
+
const componentName = getComponentName(component);
|
9784
|
+
|
9785
|
+
if (property === 'undefined') {
|
9786
|
+
// eslint-disable-next-line no-console
|
9787
|
+
console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
|
9788
|
+
}
|
9789
|
+
|
9790
|
+
// we need a support for portal components theme (e.g. overlay)
|
9791
|
+
// this allows us to generate those themes under different sections
|
9792
|
+
// if the theme has root level attribute that starts with #
|
9793
|
+
// we are generating a new theme
|
9794
|
+
let themeName = BASE_THEME_SECTION;
|
9795
|
+
|
9796
|
+
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
9797
|
+
themeName = restPath.shift();
|
9798
|
+
}
|
9799
|
+
|
9800
|
+
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
9801
|
+
// starts with underscore -> attribute selector
|
9802
|
+
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
9803
|
+
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
9804
|
+
|
9805
|
+
const nextSection = restPath[idx + 1];
|
9806
|
+
|
9807
|
+
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
9808
|
+
// eslint-disable-next-line no-console
|
9809
|
+
console.error(
|
9810
|
+
'theme generator',
|
9811
|
+
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
9812
|
+
);
|
9813
|
+
return acc;
|
9814
|
+
}
|
9815
|
+
|
9816
|
+
return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
9817
|
+
}, '');
|
9818
|
+
|
9819
|
+
const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
|
9820
|
+
|
9821
|
+
return {
|
9822
|
+
[componentName]: {
|
9823
|
+
[themeName]: {
|
9824
|
+
[selector]: {
|
9825
|
+
[property]: getCssVarValue(val),
|
9826
|
+
},
|
9827
|
+
},
|
9828
|
+
},
|
9829
|
+
};
|
9830
|
+
});
|
9831
|
+
|
9832
|
+
const componentsThemeToStyle = (componentsTheme) =>
|
9833
|
+
Object.entries(componentsTheme).reduce(
|
9834
|
+
(acc, [selector, vars]) =>
|
9835
|
+
`${acc}${selector} { \n${Object.entries(vars)
|
9836
|
+
.map(([key, val]) => `${key}: ${val}`)
|
9837
|
+
.join(';\n')} \n}\n\n`,
|
9838
|
+
''
|
9839
|
+
);
|
9352
9840
|
|
9353
9841
|
const createComponentsTheme = (componentsTheme) => {
|
9354
9842
|
const styleObj = componentsThemeToStyleObj(componentsTheme);
|
@@ -9656,33 +10144,33 @@ const globals = {
|
|
9656
10144
|
fonts,
|
9657
10145
|
direction,
|
9658
10146
|
};
|
9659
|
-
const vars$
|
10147
|
+
const vars$C = getThemeVars(globals);
|
9660
10148
|
|
9661
|
-
const globalRefs$
|
10149
|
+
const globalRefs$k = getThemeRefs(globals);
|
9662
10150
|
const compVars$5 = ButtonClass.cssVarList;
|
9663
10151
|
|
9664
10152
|
const mode = {
|
9665
|
-
primary: globalRefs$
|
9666
|
-
secondary: globalRefs$
|
9667
|
-
success: globalRefs$
|
9668
|
-
error: globalRefs$
|
9669
|
-
surface: globalRefs$
|
10153
|
+
primary: globalRefs$k.colors.primary,
|
10154
|
+
secondary: globalRefs$k.colors.secondary,
|
10155
|
+
success: globalRefs$k.colors.success,
|
10156
|
+
error: globalRefs$k.colors.error,
|
10157
|
+
surface: globalRefs$k.colors.surface,
|
9670
10158
|
};
|
9671
10159
|
|
9672
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
10160
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$P);
|
9673
10161
|
|
9674
10162
|
const button = {
|
9675
10163
|
...helperTheme$3,
|
9676
10164
|
|
9677
|
-
[compVars$5.fontFamily]: globalRefs$
|
10165
|
+
[compVars$5.fontFamily]: globalRefs$k.fonts.font1.family,
|
9678
10166
|
|
9679
10167
|
[compVars$5.cursor]: 'pointer',
|
9680
10168
|
[compVars$5.hostHeight]: '3em',
|
9681
10169
|
[compVars$5.hostWidth]: 'auto',
|
9682
|
-
[compVars$5.hostDirection]: globalRefs$
|
10170
|
+
[compVars$5.hostDirection]: globalRefs$k.direction,
|
9683
10171
|
|
9684
|
-
[compVars$5.borderRadius]: globalRefs$
|
9685
|
-
[compVars$5.borderWidth]: globalRefs$
|
10172
|
+
[compVars$5.borderRadius]: globalRefs$k.radius.sm,
|
10173
|
+
[compVars$5.borderWidth]: globalRefs$k.border.xs,
|
9686
10174
|
[compVars$5.borderStyle]: 'solid',
|
9687
10175
|
[compVars$5.borderColor]: 'transparent',
|
9688
10176
|
|
@@ -9725,10 +10213,10 @@ const button = {
|
|
9725
10213
|
},
|
9726
10214
|
|
9727
10215
|
_disabled: {
|
9728
|
-
[helperVars$3.main]: globalRefs$
|
9729
|
-
[helperVars$3.dark]: globalRefs$
|
9730
|
-
[helperVars$3.light]: globalRefs$
|
9731
|
-
[helperVars$3.contrast]: globalRefs$
|
10216
|
+
[helperVars$3.main]: globalRefs$k.colors.surface.light,
|
10217
|
+
[helperVars$3.dark]: globalRefs$k.colors.surface.dark,
|
10218
|
+
[helperVars$3.light]: globalRefs$k.colors.surface.light,
|
10219
|
+
[helperVars$3.contrast]: globalRefs$k.colors.surface.main,
|
9732
10220
|
},
|
9733
10221
|
|
9734
10222
|
variant: {
|
@@ -9776,7 +10264,7 @@ const button = {
|
|
9776
10264
|
},
|
9777
10265
|
};
|
9778
10266
|
|
9779
|
-
const vars$
|
10267
|
+
const vars$B = {
|
9780
10268
|
...compVars$5,
|
9781
10269
|
...helperVars$3,
|
9782
10270
|
};
|
@@ -9784,26 +10272,26 @@ const vars$z = {
|
|
9784
10272
|
var button$1 = /*#__PURE__*/Object.freeze({
|
9785
10273
|
__proto__: null,
|
9786
10274
|
default: button,
|
9787
|
-
vars: vars$
|
10275
|
+
vars: vars$B
|
9788
10276
|
});
|
9789
10277
|
|
9790
10278
|
const componentName = getComponentName('input-wrapper');
|
9791
|
-
const globalRefs$
|
10279
|
+
const globalRefs$j = getThemeRefs(globals);
|
9792
10280
|
|
9793
|
-
const [theme$1, refs, vars$
|
10281
|
+
const [theme$1, refs, vars$A] = createHelperVars(
|
9794
10282
|
{
|
9795
|
-
labelTextColor: globalRefs$
|
9796
|
-
valueTextColor: globalRefs$
|
9797
|
-
placeholderTextColor: globalRefs$
|
10283
|
+
labelTextColor: globalRefs$j.colors.surface.dark,
|
10284
|
+
valueTextColor: globalRefs$j.colors.surface.contrast,
|
10285
|
+
placeholderTextColor: globalRefs$j.colors.surface.dark,
|
9798
10286
|
requiredIndicator: "'*'",
|
9799
|
-
errorMessageTextColor: globalRefs$
|
9800
|
-
helperTextColor: globalRefs$
|
10287
|
+
errorMessageTextColor: globalRefs$j.colors.error.main,
|
10288
|
+
helperTextColor: globalRefs$j.colors.surface.dark,
|
9801
10289
|
|
9802
|
-
borderWidth: globalRefs$
|
9803
|
-
borderRadius: globalRefs$
|
10290
|
+
borderWidth: globalRefs$j.border.xs,
|
10291
|
+
borderRadius: globalRefs$j.radius.xs,
|
9804
10292
|
borderColor: 'transparent',
|
9805
10293
|
|
9806
|
-
outlineWidth: globalRefs$
|
10294
|
+
outlineWidth: globalRefs$j.border.sm,
|
9807
10295
|
outlineStyle: 'solid',
|
9808
10296
|
outlineColor: 'transparent',
|
9809
10297
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -9814,11 +10302,11 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
9814
10302
|
horizontalPadding: '0.5em',
|
9815
10303
|
verticalPadding: '0.5em',
|
9816
10304
|
|
9817
|
-
backgroundColor: globalRefs$
|
10305
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
9818
10306
|
|
9819
|
-
fontFamily: globalRefs$
|
10307
|
+
fontFamily: globalRefs$j.fonts.font1.family,
|
9820
10308
|
|
9821
|
-
direction: globalRefs$
|
10309
|
+
direction: globalRefs$j.direction,
|
9822
10310
|
|
9823
10311
|
overlayOpacity: '0.3',
|
9824
10312
|
|
@@ -9834,28 +10322,28 @@ const [theme$1, refs, vars$y] = createHelperVars(
|
|
9834
10322
|
},
|
9835
10323
|
|
9836
10324
|
_focused: {
|
9837
|
-
outlineColor: globalRefs$
|
10325
|
+
outlineColor: globalRefs$j.colors.surface.light,
|
9838
10326
|
_invalid: {
|
9839
|
-
outlineColor: globalRefs$
|
10327
|
+
outlineColor: globalRefs$j.colors.error.main,
|
9840
10328
|
},
|
9841
10329
|
},
|
9842
10330
|
|
9843
10331
|
_bordered: {
|
9844
|
-
outlineWidth: globalRefs$
|
9845
|
-
borderColor: globalRefs$
|
10332
|
+
outlineWidth: globalRefs$j.border.xs,
|
10333
|
+
borderColor: globalRefs$j.colors.surface.light,
|
9846
10334
|
borderStyle: 'solid',
|
9847
10335
|
_invalid: {
|
9848
|
-
borderColor: globalRefs$
|
10336
|
+
borderColor: globalRefs$j.colors.error.main,
|
9849
10337
|
},
|
9850
10338
|
},
|
9851
10339
|
|
9852
10340
|
_disabled: {
|
9853
|
-
labelTextColor: globalRefs$
|
9854
|
-
borderColor: globalRefs$
|
9855
|
-
valueTextColor: globalRefs$
|
9856
|
-
placeholderTextColor: globalRefs$
|
9857
|
-
helperTextColor: globalRefs$
|
9858
|
-
backgroundColor: globalRefs$
|
10341
|
+
labelTextColor: globalRefs$j.colors.surface.light,
|
10342
|
+
borderColor: globalRefs$j.colors.surface.light,
|
10343
|
+
valueTextColor: globalRefs$j.colors.surface.light,
|
10344
|
+
placeholderTextColor: globalRefs$j.colors.surface.light,
|
10345
|
+
helperTextColor: globalRefs$j.colors.surface.light,
|
10346
|
+
backgroundColor: globalRefs$j.colors.surface.main,
|
9859
10347
|
},
|
9860
10348
|
},
|
9861
10349
|
componentName
|
@@ -9865,38 +10353,38 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
9865
10353
|
__proto__: null,
|
9866
10354
|
default: theme$1,
|
9867
10355
|
refs: refs,
|
9868
|
-
vars: vars$
|
10356
|
+
vars: vars$A
|
9869
10357
|
});
|
9870
10358
|
|
9871
|
-
const vars$
|
10359
|
+
const vars$z = TextFieldClass.cssVarList;
|
9872
10360
|
|
9873
10361
|
const textField = {
|
9874
|
-
[vars$
|
9875
|
-
[vars$
|
9876
|
-
[vars$
|
9877
|
-
[vars$
|
9878
|
-
[vars$
|
9879
|
-
[vars$
|
9880
|
-
[vars$
|
9881
|
-
[vars$
|
9882
|
-
[vars$
|
9883
|
-
[vars$
|
9884
|
-
[vars$
|
9885
|
-
[vars$
|
9886
|
-
[vars$
|
9887
|
-
[vars$
|
9888
|
-
[vars$
|
9889
|
-
[vars$
|
9890
|
-
[vars$
|
9891
|
-
[vars$
|
9892
|
-
[vars$
|
9893
|
-
[vars$
|
9894
|
-
[vars$
|
9895
|
-
[vars$
|
10362
|
+
[vars$z.hostWidth]: refs.width,
|
10363
|
+
[vars$z.hostMinWidth]: refs.minWidth,
|
10364
|
+
[vars$z.hostDirection]: refs.direction,
|
10365
|
+
[vars$z.fontSize]: refs.fontSize,
|
10366
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
10367
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
10368
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
10369
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
10370
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
10371
|
+
[vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
|
10372
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
10373
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
10374
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
10375
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
10376
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
10377
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
10378
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
10379
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
10380
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
10381
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
10382
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
10383
|
+
[vars$z.helperTextColor]: refs.helperTextColor,
|
9896
10384
|
textAlign: {
|
9897
|
-
right: { [vars$
|
9898
|
-
left: { [vars$
|
9899
|
-
center: { [vars$
|
10385
|
+
right: { [vars$z.inputTextAlign]: 'right' },
|
10386
|
+
left: { [vars$z.inputTextAlign]: 'left' },
|
10387
|
+
center: { [vars$z.inputTextAlign]: 'center' },
|
9900
10388
|
},
|
9901
10389
|
};
|
9902
10390
|
|
@@ -9904,259 +10392,259 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
9904
10392
|
__proto__: null,
|
9905
10393
|
default: textField,
|
9906
10394
|
textField: textField,
|
9907
|
-
vars: vars$
|
10395
|
+
vars: vars$z
|
9908
10396
|
});
|
9909
10397
|
|
9910
|
-
const globalRefs$
|
9911
|
-
const vars$
|
10398
|
+
const globalRefs$i = getThemeRefs(globals);
|
10399
|
+
const vars$y = PasswordClass.cssVarList;
|
9912
10400
|
|
9913
10401
|
const password = {
|
9914
|
-
[vars$
|
9915
|
-
[vars$
|
9916
|
-
[vars$
|
9917
|
-
[vars$
|
9918
|
-
[vars$
|
9919
|
-
[vars$
|
9920
|
-
[vars$
|
9921
|
-
[vars$
|
9922
|
-
[vars$
|
9923
|
-
[vars$
|
9924
|
-
[vars$
|
9925
|
-
[vars$
|
9926
|
-
[vars$
|
9927
|
-
[vars$
|
9928
|
-
[vars$
|
9929
|
-
[vars$
|
9930
|
-
[vars$
|
9931
|
-
[vars$
|
9932
|
-
[vars$
|
9933
|
-
[vars$
|
9934
|
-
[vars$
|
9935
|
-
[vars$
|
9936
|
-
[vars$
|
10402
|
+
[vars$y.hostWidth]: refs.width,
|
10403
|
+
[vars$y.hostDirection]: refs.direction,
|
10404
|
+
[vars$y.fontSize]: refs.fontSize,
|
10405
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
10406
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
10407
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
10408
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
10409
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
10410
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
10411
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
10412
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
10413
|
+
[vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10414
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
10415
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
10416
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
10417
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
10418
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
10419
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
10420
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
10421
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
10422
|
+
[vars$y.revealButtonOffset]: globalRefs$i.spacing.md,
|
10423
|
+
[vars$y.revealButtonSize]: refs.toggleButtonSize,
|
10424
|
+
[vars$y.revealButtonColor]: refs.placeholderTextColor,
|
9937
10425
|
};
|
9938
10426
|
|
9939
10427
|
var password$1 = /*#__PURE__*/Object.freeze({
|
9940
10428
|
__proto__: null,
|
9941
10429
|
default: password,
|
9942
|
-
vars: vars$
|
10430
|
+
vars: vars$y
|
9943
10431
|
});
|
9944
10432
|
|
9945
|
-
const vars$
|
10433
|
+
const vars$x = NumberFieldClass.cssVarList;
|
9946
10434
|
|
9947
10435
|
const numberField = {
|
9948
|
-
[vars$
|
9949
|
-
[vars$
|
9950
|
-
[vars$
|
9951
|
-
[vars$
|
9952
|
-
[vars$
|
9953
|
-
[vars$
|
9954
|
-
[vars$
|
9955
|
-
[vars$
|
9956
|
-
[vars$
|
9957
|
-
[vars$
|
9958
|
-
[vars$
|
9959
|
-
[vars$
|
9960
|
-
[vars$
|
9961
|
-
[vars$
|
9962
|
-
[vars$
|
9963
|
-
[vars$
|
9964
|
-
[vars$
|
9965
|
-
[vars$
|
9966
|
-
[vars$
|
9967
|
-
[vars$
|
9968
|
-
[vars$
|
10436
|
+
[vars$x.hostWidth]: refs.width,
|
10437
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
10438
|
+
[vars$x.hostDirection]: refs.direction,
|
10439
|
+
[vars$x.fontSize]: refs.fontSize,
|
10440
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
10441
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
10442
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
10443
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
10444
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
10445
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
10446
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
10447
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
10448
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
10449
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
10450
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
10451
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
10452
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
10453
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
10454
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
10455
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
10456
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
9969
10457
|
};
|
9970
10458
|
|
9971
10459
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
9972
10460
|
__proto__: null,
|
9973
10461
|
default: numberField,
|
9974
|
-
vars: vars$
|
10462
|
+
vars: vars$x
|
9975
10463
|
});
|
9976
10464
|
|
9977
|
-
const vars$
|
10465
|
+
const vars$w = EmailFieldClass.cssVarList;
|
9978
10466
|
|
9979
10467
|
const emailField = {
|
9980
|
-
[vars$
|
9981
|
-
[vars$
|
9982
|
-
[vars$
|
9983
|
-
[vars$
|
9984
|
-
[vars$
|
9985
|
-
[vars$
|
9986
|
-
[vars$
|
9987
|
-
[vars$
|
9988
|
-
[vars$
|
9989
|
-
[vars$
|
9990
|
-
[vars$
|
9991
|
-
[vars$
|
9992
|
-
[vars$
|
9993
|
-
[vars$
|
9994
|
-
[vars$
|
9995
|
-
[vars$
|
9996
|
-
[vars$
|
9997
|
-
[vars$
|
9998
|
-
[vars$
|
9999
|
-
[vars$
|
10000
|
-
[vars$
|
10468
|
+
[vars$w.hostWidth]: refs.width,
|
10469
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
10470
|
+
[vars$w.hostDirection]: refs.direction,
|
10471
|
+
[vars$w.fontSize]: refs.fontSize,
|
10472
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
10473
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
10474
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
10475
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
10476
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
10477
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
10478
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
10479
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
10480
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
10481
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
10482
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
10483
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
10484
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
10485
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
10486
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
10487
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
10488
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
10001
10489
|
};
|
10002
10490
|
|
10003
10491
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
10004
10492
|
__proto__: null,
|
10005
10493
|
default: emailField,
|
10006
|
-
vars: vars$
|
10494
|
+
vars: vars$w
|
10007
10495
|
});
|
10008
10496
|
|
10009
|
-
const vars$
|
10497
|
+
const vars$v = TextAreaClass.cssVarList;
|
10010
10498
|
|
10011
10499
|
const textArea = {
|
10012
|
-
[vars$
|
10013
|
-
[vars$
|
10014
|
-
[vars$
|
10015
|
-
[vars$
|
10016
|
-
[vars$
|
10017
|
-
[vars$
|
10018
|
-
[vars$
|
10019
|
-
[vars$
|
10020
|
-
[vars$
|
10021
|
-
[vars$
|
10022
|
-
[vars$
|
10023
|
-
[vars$
|
10024
|
-
[vars$
|
10025
|
-
[vars$
|
10026
|
-
[vars$
|
10027
|
-
[vars$
|
10028
|
-
[vars$
|
10029
|
-
[vars$
|
10030
|
-
[vars$
|
10031
|
-
[vars$
|
10032
|
-
[vars$
|
10500
|
+
[vars$v.hostWidth]: refs.width,
|
10501
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
10502
|
+
[vars$v.hostDirection]: refs.direction,
|
10503
|
+
[vars$v.fontSize]: refs.fontSize,
|
10504
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
10505
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
10506
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
10507
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
10508
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
10509
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
10510
|
+
[vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10511
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
10512
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
10513
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
10514
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
10515
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
10516
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
10517
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
10518
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
10519
|
+
[vars$v.inputResizeType]: 'vertical',
|
10520
|
+
[vars$v.inputMinHeight]: '5em',
|
10033
10521
|
textAlign: {
|
10034
|
-
right: { [vars$
|
10035
|
-
left: { [vars$
|
10036
|
-
center: { [vars$
|
10522
|
+
right: { [vars$v.inputTextAlign]: 'right' },
|
10523
|
+
left: { [vars$v.inputTextAlign]: 'left' },
|
10524
|
+
center: { [vars$v.inputTextAlign]: 'center' },
|
10037
10525
|
},
|
10038
10526
|
|
10039
10527
|
_readonly: {
|
10040
|
-
[vars$
|
10528
|
+
[vars$v.inputResizeType]: 'none',
|
10041
10529
|
},
|
10042
10530
|
};
|
10043
10531
|
|
10044
10532
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
10045
10533
|
__proto__: null,
|
10046
10534
|
default: textArea,
|
10047
|
-
vars: vars$
|
10535
|
+
vars: vars$v
|
10048
10536
|
});
|
10049
10537
|
|
10050
|
-
const vars$
|
10538
|
+
const vars$u = CheckboxClass.cssVarList;
|
10051
10539
|
const checkboxSize = '1.35em';
|
10052
10540
|
|
10053
10541
|
const checkbox = {
|
10054
|
-
[vars$
|
10055
|
-
[vars$
|
10056
|
-
[vars$
|
10057
|
-
[vars$
|
10058
|
-
[vars$
|
10059
|
-
[vars$
|
10060
|
-
[vars$
|
10061
|
-
[vars$
|
10062
|
-
[vars$
|
10063
|
-
[vars$
|
10064
|
-
[vars$
|
10065
|
-
[vars$
|
10066
|
-
[vars$
|
10067
|
-
[vars$
|
10068
|
-
[vars$
|
10069
|
-
[vars$
|
10070
|
-
[vars$
|
10071
|
-
[vars$
|
10072
|
-
[vars$
|
10073
|
-
[vars$
|
10542
|
+
[vars$u.hostWidth]: refs.width,
|
10543
|
+
[vars$u.hostDirection]: refs.direction,
|
10544
|
+
[vars$u.fontSize]: refs.fontSize,
|
10545
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
10546
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10547
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
10548
|
+
[vars$u.labelFontWeight]: '400',
|
10549
|
+
[vars$u.labelLineHeight]: checkboxSize,
|
10550
|
+
[vars$u.labelSpacing]: '1em',
|
10551
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
10552
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
10553
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
10554
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
10555
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
10556
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
10557
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
10558
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
10559
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
10560
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
10561
|
+
[vars$u.inputSize]: checkboxSize,
|
10074
10562
|
|
10075
10563
|
_checked: {
|
10076
|
-
[vars$
|
10564
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
10077
10565
|
},
|
10078
10566
|
|
10079
10567
|
_disabled: {
|
10080
|
-
[vars$
|
10568
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
10081
10569
|
},
|
10082
10570
|
};
|
10083
10571
|
|
10084
10572
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
10085
10573
|
__proto__: null,
|
10086
10574
|
default: checkbox,
|
10087
|
-
vars: vars$
|
10575
|
+
vars: vars$u
|
10088
10576
|
});
|
10089
10577
|
|
10090
10578
|
const knobMargin = '2px';
|
10091
10579
|
const checkboxHeight = '1.25em';
|
10092
10580
|
|
10093
|
-
const globalRefs$
|
10094
|
-
const vars$
|
10581
|
+
const globalRefs$h = getThemeRefs(globals);
|
10582
|
+
const vars$t = SwitchToggleClass.cssVarList;
|
10095
10583
|
|
10096
10584
|
const switchToggle = {
|
10097
|
-
[vars$
|
10098
|
-
[vars$
|
10099
|
-
[vars$
|
10100
|
-
[vars$
|
10101
|
-
|
10102
|
-
[vars$
|
10103
|
-
[vars$
|
10104
|
-
[vars$
|
10105
|
-
[vars$
|
10106
|
-
|
10107
|
-
[vars$
|
10108
|
-
[vars$
|
10109
|
-
[vars$
|
10110
|
-
[vars$
|
10111
|
-
[vars$
|
10112
|
-
[vars$
|
10113
|
-
[vars$
|
10114
|
-
|
10115
|
-
[vars$
|
10116
|
-
[vars$
|
10117
|
-
[vars$
|
10118
|
-
[vars$
|
10119
|
-
[vars$
|
10120
|
-
[vars$
|
10121
|
-
|
10122
|
-
[vars$
|
10123
|
-
[vars$
|
10124
|
-
[vars$
|
10125
|
-
[vars$
|
10126
|
-
[vars$
|
10127
|
-
[vars$
|
10585
|
+
[vars$t.hostWidth]: refs.width,
|
10586
|
+
[vars$t.hostDirection]: refs.direction,
|
10587
|
+
[vars$t.fontSize]: refs.fontSize,
|
10588
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
10589
|
+
|
10590
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
10591
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
10592
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
10593
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
10594
|
+
|
10595
|
+
[vars$t.trackBorderStyle]: refs.borderStyle,
|
10596
|
+
[vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
10597
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
10598
|
+
[vars$t.trackBackgroundColor]: refs.backgroundColor,
|
10599
|
+
[vars$t.trackBorderRadius]: globalRefs$h.radius.md,
|
10600
|
+
[vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
10601
|
+
[vars$t.trackHeight]: checkboxHeight,
|
10602
|
+
|
10603
|
+
[vars$t.knobSize]: `calc(1em - ${knobMargin})`,
|
10604
|
+
[vars$t.knobRadius]: '50%',
|
10605
|
+
[vars$t.knobTopOffset]: '1px',
|
10606
|
+
[vars$t.knobLeftOffset]: knobMargin,
|
10607
|
+
[vars$t.knobColor]: refs.labelTextColor,
|
10608
|
+
[vars$t.knobTransitionDuration]: '0.3s',
|
10609
|
+
|
10610
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
10611
|
+
[vars$t.labelFontWeight]: '400',
|
10612
|
+
[vars$t.labelLineHeight]: '1.35em',
|
10613
|
+
[vars$t.labelSpacing]: '1em',
|
10614
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
10615
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
10128
10616
|
|
10129
10617
|
_checked: {
|
10130
|
-
[vars$
|
10131
|
-
[vars$
|
10132
|
-
[vars$
|
10133
|
-
[vars$
|
10618
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
10619
|
+
[vars$t.knobLeftOffset]: `calc(100% - var(${vars$t.knobSize}) - ${knobMargin})`,
|
10620
|
+
[vars$t.knobColor]: refs.valueTextColor,
|
10621
|
+
[vars$t.knobTextColor]: refs.valueTextColor,
|
10134
10622
|
},
|
10135
10623
|
|
10136
10624
|
_disabled: {
|
10137
|
-
[vars$
|
10138
|
-
[vars$
|
10139
|
-
[vars$
|
10140
|
-
[vars$
|
10625
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
10626
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.surface.light,
|
10627
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
10628
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
10141
10629
|
_checked: {
|
10142
|
-
[vars$
|
10143
|
-
[vars$
|
10630
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
10631
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
10144
10632
|
},
|
10145
10633
|
},
|
10146
10634
|
|
10147
10635
|
_invalid: {
|
10148
|
-
[vars$
|
10149
|
-
[vars$
|
10636
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.error.main,
|
10637
|
+
[vars$t.knobColor]: globalRefs$h.colors.error.main,
|
10150
10638
|
},
|
10151
10639
|
};
|
10152
10640
|
|
10153
10641
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
10154
10642
|
__proto__: null,
|
10155
10643
|
default: switchToggle,
|
10156
|
-
vars: vars$
|
10644
|
+
vars: vars$t
|
10157
10645
|
});
|
10158
10646
|
|
10159
|
-
const globalRefs$
|
10647
|
+
const globalRefs$g = getThemeRefs(globals);
|
10160
10648
|
|
10161
10649
|
const compVars$4 = ContainerClass.cssVarList;
|
10162
10650
|
|
@@ -10178,7 +10666,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
10178
10666
|
horizontalAlignment,
|
10179
10667
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
10180
10668
|
},
|
10181
|
-
componentName$
|
10669
|
+
componentName$J
|
10182
10670
|
);
|
10183
10671
|
|
10184
10672
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -10188,10 +10676,10 @@ const container = {
|
|
10188
10676
|
|
10189
10677
|
[compVars$4.hostWidth]: '100%',
|
10190
10678
|
[compVars$4.boxShadow]: 'none',
|
10191
|
-
[compVars$4.backgroundColor]: globalRefs$
|
10192
|
-
[compVars$4.color]: globalRefs$
|
10679
|
+
[compVars$4.backgroundColor]: globalRefs$g.colors.surface.main,
|
10680
|
+
[compVars$4.color]: globalRefs$g.colors.surface.contrast,
|
10193
10681
|
[compVars$4.borderRadius]: '0px',
|
10194
|
-
[compVars$4.hostDirection]: globalRefs$
|
10682
|
+
[compVars$4.hostDirection]: globalRefs$g.direction,
|
10195
10683
|
|
10196
10684
|
verticalPadding: {
|
10197
10685
|
sm: { [compVars$4.verticalPadding]: '5px' },
|
@@ -10237,34 +10725,34 @@ const container = {
|
|
10237
10725
|
|
10238
10726
|
shadow: {
|
10239
10727
|
sm: {
|
10240
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10728
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.sm} ${shadowColor$1}`,
|
10241
10729
|
},
|
10242
10730
|
md: {
|
10243
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10731
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.md} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.md} ${shadowColor$1}`,
|
10244
10732
|
},
|
10245
10733
|
lg: {
|
10246
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10734
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.lg} ${shadowColor$1}`,
|
10247
10735
|
},
|
10248
10736
|
xl: {
|
10249
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10737
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$g.shadow.narrow.xl} ${shadowColor$1}`,
|
10250
10738
|
},
|
10251
10739
|
'2xl': {
|
10252
10740
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
10253
|
-
[compVars$4.boxShadow]: `${globalRefs$
|
10741
|
+
[compVars$4.boxShadow]: `${globalRefs$g.shadow.wide['2xl']} ${shadowColor$1}`,
|
10254
10742
|
},
|
10255
10743
|
},
|
10256
10744
|
|
10257
10745
|
borderRadius: {
|
10258
|
-
sm: { [compVars$4.borderRadius]: globalRefs$
|
10259
|
-
md: { [compVars$4.borderRadius]: globalRefs$
|
10260
|
-
lg: { [compVars$4.borderRadius]: globalRefs$
|
10261
|
-
xl: { [compVars$4.borderRadius]: globalRefs$
|
10262
|
-
'2xl': { [compVars$4.borderRadius]: globalRefs$
|
10263
|
-
'3xl': { [compVars$4.borderRadius]: globalRefs$
|
10746
|
+
sm: { [compVars$4.borderRadius]: globalRefs$g.radius.sm },
|
10747
|
+
md: { [compVars$4.borderRadius]: globalRefs$g.radius.md },
|
10748
|
+
lg: { [compVars$4.borderRadius]: globalRefs$g.radius.lg },
|
10749
|
+
xl: { [compVars$4.borderRadius]: globalRefs$g.radius.xl },
|
10750
|
+
'2xl': { [compVars$4.borderRadius]: globalRefs$g.radius['2xl'] },
|
10751
|
+
'3xl': { [compVars$4.borderRadius]: globalRefs$g.radius['3xl'] },
|
10264
10752
|
},
|
10265
10753
|
};
|
10266
10754
|
|
10267
|
-
const vars$
|
10755
|
+
const vars$s = {
|
10268
10756
|
...compVars$4,
|
10269
10757
|
...helperVars$2,
|
10270
10758
|
};
|
@@ -10272,166 +10760,166 @@ const vars$q = {
|
|
10272
10760
|
var container$1 = /*#__PURE__*/Object.freeze({
|
10273
10761
|
__proto__: null,
|
10274
10762
|
default: container,
|
10275
|
-
vars: vars$
|
10763
|
+
vars: vars$s
|
10276
10764
|
});
|
10277
10765
|
|
10278
|
-
const vars$
|
10766
|
+
const vars$r = LogoClass.cssVarList;
|
10279
10767
|
|
10280
10768
|
const logo$2 = {
|
10281
|
-
[vars$
|
10769
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
10282
10770
|
};
|
10283
10771
|
|
10284
10772
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
10285
10773
|
__proto__: null,
|
10286
10774
|
default: logo$2,
|
10287
|
-
vars: vars$
|
10775
|
+
vars: vars$r
|
10288
10776
|
});
|
10289
10777
|
|
10290
|
-
const vars$
|
10778
|
+
const vars$q = TotpImageClass.cssVarList;
|
10291
10779
|
|
10292
10780
|
const logo$1 = {
|
10293
|
-
[vars$
|
10781
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
10294
10782
|
};
|
10295
10783
|
|
10296
10784
|
var totpImage = /*#__PURE__*/Object.freeze({
|
10297
10785
|
__proto__: null,
|
10298
10786
|
default: logo$1,
|
10299
|
-
vars: vars$
|
10787
|
+
vars: vars$q
|
10300
10788
|
});
|
10301
10789
|
|
10302
|
-
const vars$
|
10790
|
+
const vars$p = NotpImageClass.cssVarList;
|
10303
10791
|
|
10304
10792
|
const logo = {
|
10305
|
-
[vars$
|
10793
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
10306
10794
|
};
|
10307
10795
|
|
10308
10796
|
var notpImage = /*#__PURE__*/Object.freeze({
|
10309
10797
|
__proto__: null,
|
10310
10798
|
default: logo,
|
10311
|
-
vars: vars$
|
10799
|
+
vars: vars$p
|
10312
10800
|
});
|
10313
10801
|
|
10314
|
-
const globalRefs$
|
10315
|
-
const vars$
|
10802
|
+
const globalRefs$f = getThemeRefs(globals);
|
10803
|
+
const vars$o = TextClass.cssVarList;
|
10316
10804
|
|
10317
10805
|
const text = {
|
10318
|
-
[vars$
|
10319
|
-
[vars$
|
10320
|
-
[vars$
|
10321
|
-
[vars$
|
10806
|
+
[vars$o.hostDirection]: globalRefs$f.direction,
|
10807
|
+
[vars$o.textLineHeight]: '1.35em',
|
10808
|
+
[vars$o.textAlign]: 'left',
|
10809
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
10322
10810
|
variant: {
|
10323
10811
|
h1: {
|
10324
|
-
[vars$
|
10325
|
-
[vars$
|
10326
|
-
[vars$
|
10812
|
+
[vars$o.fontSize]: globalRefs$f.typography.h1.size,
|
10813
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h1.weight,
|
10814
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h1.font,
|
10327
10815
|
},
|
10328
10816
|
h2: {
|
10329
|
-
[vars$
|
10330
|
-
[vars$
|
10331
|
-
[vars$
|
10817
|
+
[vars$o.fontSize]: globalRefs$f.typography.h2.size,
|
10818
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h2.weight,
|
10819
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h2.font,
|
10332
10820
|
},
|
10333
10821
|
h3: {
|
10334
|
-
[vars$
|
10335
|
-
[vars$
|
10336
|
-
[vars$
|
10822
|
+
[vars$o.fontSize]: globalRefs$f.typography.h3.size,
|
10823
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h3.weight,
|
10824
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h3.font,
|
10337
10825
|
},
|
10338
10826
|
subtitle1: {
|
10339
|
-
[vars$
|
10340
|
-
[vars$
|
10341
|
-
[vars$
|
10827
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle1.size,
|
10828
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle1.weight,
|
10829
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle1.font,
|
10342
10830
|
},
|
10343
10831
|
subtitle2: {
|
10344
|
-
[vars$
|
10345
|
-
[vars$
|
10346
|
-
[vars$
|
10832
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle2.size,
|
10833
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle2.weight,
|
10834
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle2.font,
|
10347
10835
|
},
|
10348
10836
|
body1: {
|
10349
|
-
[vars$
|
10350
|
-
[vars$
|
10351
|
-
[vars$
|
10837
|
+
[vars$o.fontSize]: globalRefs$f.typography.body1.size,
|
10838
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body1.weight,
|
10839
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body1.font,
|
10352
10840
|
},
|
10353
10841
|
body2: {
|
10354
|
-
[vars$
|
10355
|
-
[vars$
|
10356
|
-
[vars$
|
10842
|
+
[vars$o.fontSize]: globalRefs$f.typography.body2.size,
|
10843
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body2.weight,
|
10844
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body2.font,
|
10357
10845
|
},
|
10358
10846
|
},
|
10359
10847
|
|
10360
10848
|
mode: {
|
10361
10849
|
primary: {
|
10362
|
-
[vars$
|
10850
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.contrast,
|
10363
10851
|
},
|
10364
10852
|
secondary: {
|
10365
|
-
[vars$
|
10853
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
10366
10854
|
},
|
10367
10855
|
error: {
|
10368
|
-
[vars$
|
10856
|
+
[vars$o.textColor]: globalRefs$f.colors.error.main,
|
10369
10857
|
},
|
10370
10858
|
success: {
|
10371
|
-
[vars$
|
10859
|
+
[vars$o.textColor]: globalRefs$f.colors.success.main,
|
10372
10860
|
},
|
10373
10861
|
},
|
10374
10862
|
|
10375
10863
|
textAlign: {
|
10376
|
-
right: { [vars$
|
10377
|
-
left: { [vars$
|
10378
|
-
center: { [vars$
|
10864
|
+
right: { [vars$o.textAlign]: 'right' },
|
10865
|
+
left: { [vars$o.textAlign]: 'left' },
|
10866
|
+
center: { [vars$o.textAlign]: 'center' },
|
10379
10867
|
},
|
10380
10868
|
|
10381
10869
|
_fullWidth: {
|
10382
|
-
[vars$
|
10870
|
+
[vars$o.hostWidth]: '100%',
|
10383
10871
|
},
|
10384
10872
|
|
10385
10873
|
_italic: {
|
10386
|
-
[vars$
|
10874
|
+
[vars$o.fontStyle]: 'italic',
|
10387
10875
|
},
|
10388
10876
|
|
10389
10877
|
_uppercase: {
|
10390
|
-
[vars$
|
10878
|
+
[vars$o.textTransform]: 'uppercase',
|
10391
10879
|
},
|
10392
10880
|
|
10393
10881
|
_lowercase: {
|
10394
|
-
[vars$
|
10882
|
+
[vars$o.textTransform]: 'lowercase',
|
10395
10883
|
},
|
10396
10884
|
};
|
10397
10885
|
|
10398
10886
|
var text$1 = /*#__PURE__*/Object.freeze({
|
10399
10887
|
__proto__: null,
|
10400
10888
|
default: text,
|
10401
|
-
vars: vars$
|
10889
|
+
vars: vars$o
|
10402
10890
|
});
|
10403
10891
|
|
10404
|
-
const globalRefs$
|
10405
|
-
const vars$
|
10892
|
+
const globalRefs$e = getThemeRefs(globals);
|
10893
|
+
const vars$n = LinkClass.cssVarList;
|
10406
10894
|
|
10407
10895
|
const link = {
|
10408
|
-
[vars$
|
10409
|
-
[vars$
|
10896
|
+
[vars$n.hostDirection]: globalRefs$e.direction,
|
10897
|
+
[vars$n.cursor]: 'pointer',
|
10410
10898
|
|
10411
|
-
[vars$
|
10899
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
10412
10900
|
|
10413
10901
|
textAlign: {
|
10414
|
-
right: { [vars$
|
10415
|
-
left: { [vars$
|
10416
|
-
center: { [vars$
|
10902
|
+
right: { [vars$n.textAlign]: 'right' },
|
10903
|
+
left: { [vars$n.textAlign]: 'left' },
|
10904
|
+
center: { [vars$n.textAlign]: 'center' },
|
10417
10905
|
},
|
10418
10906
|
|
10419
10907
|
_fullWidth: {
|
10420
|
-
[vars$
|
10908
|
+
[vars$n.hostWidth]: '100%',
|
10421
10909
|
},
|
10422
10910
|
|
10423
10911
|
mode: {
|
10424
10912
|
primary: {
|
10425
|
-
[vars$
|
10913
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
10426
10914
|
},
|
10427
10915
|
secondary: {
|
10428
|
-
[vars$
|
10916
|
+
[vars$n.textColor]: globalRefs$e.colors.secondary.main,
|
10429
10917
|
},
|
10430
10918
|
error: {
|
10431
|
-
[vars$
|
10919
|
+
[vars$n.textColor]: globalRefs$e.colors.error.main,
|
10432
10920
|
},
|
10433
10921
|
success: {
|
10434
|
-
[vars$
|
10922
|
+
[vars$n.textColor]: globalRefs$e.colors.success.main,
|
10435
10923
|
},
|
10436
10924
|
},
|
10437
10925
|
};
|
@@ -10439,10 +10927,10 @@ const link = {
|
|
10439
10927
|
var link$1 = /*#__PURE__*/Object.freeze({
|
10440
10928
|
__proto__: null,
|
10441
10929
|
default: link,
|
10442
|
-
vars: vars$
|
10930
|
+
vars: vars$n
|
10443
10931
|
});
|
10444
10932
|
|
10445
|
-
const globalRefs$
|
10933
|
+
const globalRefs$d = getThemeRefs(globals);
|
10446
10934
|
const compVars$3 = DividerClass.cssVarList;
|
10447
10935
|
|
10448
10936
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -10450,18 +10938,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
10450
10938
|
thickness: '2px',
|
10451
10939
|
spacing: '10px',
|
10452
10940
|
},
|
10453
|
-
componentName$
|
10941
|
+
componentName$H
|
10454
10942
|
);
|
10455
10943
|
|
10456
10944
|
const divider = {
|
10457
10945
|
...helperTheme$1,
|
10458
10946
|
|
10459
|
-
[compVars$3.hostDirection]: globalRefs$
|
10947
|
+
[compVars$3.hostDirection]: globalRefs$d.direction,
|
10460
10948
|
[compVars$3.alignItems]: 'center',
|
10461
10949
|
[compVars$3.flexDirection]: 'row',
|
10462
10950
|
[compVars$3.alignSelf]: 'stretch',
|
10463
10951
|
[compVars$3.hostWidth]: '100%',
|
10464
|
-
[compVars$3.stripeColor]: globalRefs$
|
10952
|
+
[compVars$3.stripeColor]: globalRefs$d.colors.surface.light,
|
10465
10953
|
[compVars$3.stripeColorOpacity]: '0.5',
|
10466
10954
|
[compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
|
10467
10955
|
[compVars$3.labelTextWidth]: 'fit-content',
|
@@ -10481,7 +10969,7 @@ const divider = {
|
|
10481
10969
|
},
|
10482
10970
|
};
|
10483
10971
|
|
10484
|
-
const vars$
|
10972
|
+
const vars$m = {
|
10485
10973
|
...compVars$3,
|
10486
10974
|
...helperVars$1,
|
10487
10975
|
};
|
@@ -10489,111 +10977,111 @@ const vars$k = {
|
|
10489
10977
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
10490
10978
|
__proto__: null,
|
10491
10979
|
default: divider,
|
10492
|
-
vars: vars$
|
10980
|
+
vars: vars$m
|
10493
10981
|
});
|
10494
10982
|
|
10495
|
-
const vars$
|
10983
|
+
const vars$l = PasscodeClass.cssVarList;
|
10496
10984
|
|
10497
10985
|
const passcode = {
|
10498
|
-
[vars$
|
10499
|
-
[vars$
|
10500
|
-
[vars$
|
10501
|
-
[vars$
|
10502
|
-
[vars$
|
10503
|
-
[vars$
|
10504
|
-
[vars$
|
10505
|
-
[vars$
|
10506
|
-
[vars$
|
10507
|
-
[vars$
|
10508
|
-
[vars$
|
10509
|
-
[vars$
|
10510
|
-
[vars$
|
10511
|
-
[vars$
|
10512
|
-
[vars$
|
10986
|
+
[vars$l.hostDirection]: refs.direction,
|
10987
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
10988
|
+
[vars$l.fontSize]: refs.fontSize,
|
10989
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
10990
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
10991
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
10992
|
+
[vars$l.digitValueTextColor]: refs.valueTextColor,
|
10993
|
+
[vars$l.digitPadding]: '0',
|
10994
|
+
[vars$l.digitTextAlign]: 'center',
|
10995
|
+
[vars$l.digitSpacing]: '4px',
|
10996
|
+
[vars$l.hostWidth]: refs.width,
|
10997
|
+
[vars$l.digitOutlineColor]: 'transparent',
|
10998
|
+
[vars$l.digitOutlineWidth]: refs.outlineWidth,
|
10999
|
+
[vars$l.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
11000
|
+
[vars$l.digitSize]: refs.inputHeight,
|
10513
11001
|
|
10514
11002
|
size: {
|
10515
|
-
xs: { [vars$
|
10516
|
-
sm: { [vars$
|
10517
|
-
md: { [vars$
|
10518
|
-
lg: { [vars$
|
11003
|
+
xs: { [vars$l.spinnerSize]: '15px' },
|
11004
|
+
sm: { [vars$l.spinnerSize]: '20px' },
|
11005
|
+
md: { [vars$l.spinnerSize]: '20px' },
|
11006
|
+
lg: { [vars$l.spinnerSize]: '20px' },
|
10519
11007
|
},
|
10520
11008
|
|
10521
11009
|
_hideCursor: {
|
10522
|
-
[vars$
|
11010
|
+
[vars$l.digitCaretTextColor]: 'transparent',
|
10523
11011
|
},
|
10524
11012
|
|
10525
11013
|
_loading: {
|
10526
|
-
[vars$
|
11014
|
+
[vars$l.overlayOpacity]: refs.overlayOpacity,
|
10527
11015
|
},
|
10528
11016
|
};
|
10529
11017
|
|
10530
11018
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
10531
11019
|
__proto__: null,
|
10532
11020
|
default: passcode,
|
10533
|
-
vars: vars$
|
11021
|
+
vars: vars$l
|
10534
11022
|
});
|
10535
11023
|
|
10536
|
-
const globalRefs$
|
10537
|
-
const vars$
|
11024
|
+
const globalRefs$c = getThemeRefs(globals);
|
11025
|
+
const vars$k = LoaderLinearClass.cssVarList;
|
10538
11026
|
|
10539
11027
|
const loaderLinear = {
|
10540
|
-
[vars$
|
10541
|
-
[vars$
|
11028
|
+
[vars$k.hostDisplay]: 'inline-block',
|
11029
|
+
[vars$k.hostWidth]: '100%',
|
10542
11030
|
|
10543
|
-
[vars$
|
10544
|
-
[vars$
|
11031
|
+
[vars$k.barColor]: globalRefs$c.colors.surface.contrast,
|
11032
|
+
[vars$k.barWidth]: '20%',
|
10545
11033
|
|
10546
|
-
[vars$
|
10547
|
-
[vars$
|
11034
|
+
[vars$k.barBackgroundColor]: globalRefs$c.colors.surface.light,
|
11035
|
+
[vars$k.barBorderRadius]: '4px',
|
10548
11036
|
|
10549
|
-
[vars$
|
10550
|
-
[vars$
|
10551
|
-
[vars$
|
10552
|
-
[vars$
|
11037
|
+
[vars$k.animationDuration]: '2s',
|
11038
|
+
[vars$k.animationTimingFunction]: 'linear',
|
11039
|
+
[vars$k.animationIterationCount]: 'infinite',
|
11040
|
+
[vars$k.verticalPadding]: '0.25em',
|
10553
11041
|
|
10554
11042
|
size: {
|
10555
|
-
xs: { [vars$
|
10556
|
-
sm: { [vars$
|
10557
|
-
md: { [vars$
|
10558
|
-
lg: { [vars$
|
11043
|
+
xs: { [vars$k.barHeight]: '2px' },
|
11044
|
+
sm: { [vars$k.barHeight]: '4px' },
|
11045
|
+
md: { [vars$k.barHeight]: '6px' },
|
11046
|
+
lg: { [vars$k.barHeight]: '8px' },
|
10559
11047
|
},
|
10560
11048
|
|
10561
11049
|
mode: {
|
10562
11050
|
primary: {
|
10563
|
-
[vars$
|
11051
|
+
[vars$k.barColor]: globalRefs$c.colors.primary.main,
|
10564
11052
|
},
|
10565
11053
|
secondary: {
|
10566
|
-
[vars$
|
11054
|
+
[vars$k.barColor]: globalRefs$c.colors.secondary.main,
|
10567
11055
|
},
|
10568
11056
|
},
|
10569
11057
|
|
10570
11058
|
_hidden: {
|
10571
|
-
[vars$
|
11059
|
+
[vars$k.hostDisplay]: 'none',
|
10572
11060
|
},
|
10573
11061
|
};
|
10574
11062
|
|
10575
11063
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
10576
11064
|
__proto__: null,
|
10577
11065
|
default: loaderLinear,
|
10578
|
-
vars: vars$
|
11066
|
+
vars: vars$k
|
10579
11067
|
});
|
10580
11068
|
|
10581
|
-
const globalRefs$
|
11069
|
+
const globalRefs$b = getThemeRefs(globals);
|
10582
11070
|
const compVars$2 = LoaderRadialClass.cssVarList;
|
10583
11071
|
|
10584
11072
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
10585
11073
|
{
|
10586
|
-
spinnerColor: globalRefs$
|
11074
|
+
spinnerColor: globalRefs$b.colors.surface.contrast,
|
10587
11075
|
mode: {
|
10588
11076
|
primary: {
|
10589
|
-
spinnerColor: globalRefs$
|
11077
|
+
spinnerColor: globalRefs$b.colors.primary.main,
|
10590
11078
|
},
|
10591
11079
|
secondary: {
|
10592
|
-
spinnerColor: globalRefs$
|
11080
|
+
spinnerColor: globalRefs$b.colors.secondary.main,
|
10593
11081
|
},
|
10594
11082
|
},
|
10595
11083
|
},
|
10596
|
-
componentName$
|
11084
|
+
componentName$K
|
10597
11085
|
);
|
10598
11086
|
|
10599
11087
|
const loaderRadial = {
|
@@ -10622,7 +11110,7 @@ const loaderRadial = {
|
|
10622
11110
|
[compVars$2.hostDisplay]: 'none',
|
10623
11111
|
},
|
10624
11112
|
};
|
10625
|
-
const vars$
|
11113
|
+
const vars$j = {
|
10626
11114
|
...compVars$2,
|
10627
11115
|
...helperVars,
|
10628
11116
|
};
|
@@ -10630,97 +11118,97 @@ const vars$h = {
|
|
10630
11118
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
10631
11119
|
__proto__: null,
|
10632
11120
|
default: loaderRadial,
|
10633
|
-
vars: vars$
|
11121
|
+
vars: vars$j
|
10634
11122
|
});
|
10635
11123
|
|
10636
|
-
const globalRefs$
|
10637
|
-
const vars$
|
11124
|
+
const globalRefs$a = getThemeRefs(globals);
|
11125
|
+
const vars$i = ComboBoxClass.cssVarList;
|
10638
11126
|
|
10639
11127
|
const comboBox = {
|
10640
|
-
[vars$
|
10641
|
-
[vars$
|
10642
|
-
[vars$
|
10643
|
-
[vars$
|
10644
|
-
[vars$
|
10645
|
-
[vars$
|
10646
|
-
[vars$
|
10647
|
-
[vars$
|
10648
|
-
[vars$
|
10649
|
-
[vars$
|
10650
|
-
[vars$
|
10651
|
-
[vars$
|
10652
|
-
[vars$
|
10653
|
-
[vars$
|
10654
|
-
[vars$
|
10655
|
-
[vars$
|
10656
|
-
[vars$
|
10657
|
-
[vars$
|
10658
|
-
[vars$
|
10659
|
-
[vars$
|
10660
|
-
[vars$
|
10661
|
-
[vars$
|
10662
|
-
[vars$
|
10663
|
-
[vars$
|
10664
|
-
[vars$
|
10665
|
-
[vars$
|
11128
|
+
[vars$i.hostWidth]: refs.width,
|
11129
|
+
[vars$i.hostDirection]: refs.direction,
|
11130
|
+
[vars$i.fontSize]: refs.fontSize,
|
11131
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
11132
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
11133
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
11134
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
11135
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
11136
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
11137
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
11138
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
11139
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
11140
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
11141
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
11142
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
11143
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
11144
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11145
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
11146
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
11147
|
+
[vars$i.inputHeight]: refs.inputHeight,
|
11148
|
+
[vars$i.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
|
11149
|
+
[vars$i.inputDropdownButtonCursor]: 'pointer',
|
11150
|
+
[vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11151
|
+
[vars$i.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
|
11152
|
+
[vars$i.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
|
11153
|
+
[vars$i.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
|
10666
11154
|
|
10667
11155
|
_readonly: {
|
10668
|
-
[vars$
|
11156
|
+
[vars$i.inputDropdownButtonCursor]: 'default',
|
10669
11157
|
},
|
10670
11158
|
|
10671
11159
|
// Overlay theme exposed via the component:
|
10672
|
-
[vars$
|
10673
|
-
[vars$
|
10674
|
-
[vars$
|
10675
|
-
[vars$
|
10676
|
-
[vars$
|
10677
|
-
[vars$
|
11160
|
+
[vars$i.overlayFontSize]: refs.fontSize,
|
11161
|
+
[vars$i.overlayFontFamily]: refs.fontFamily,
|
11162
|
+
[vars$i.overlayCursor]: 'pointer',
|
11163
|
+
[vars$i.overlayItemBoxShadow]: 'none',
|
11164
|
+
[vars$i.overlayBackground]: refs.backgroundColor,
|
11165
|
+
[vars$i.overlayTextColor]: refs.valueTextColor,
|
10678
11166
|
|
10679
11167
|
// Overlay direct theme:
|
10680
|
-
[vars$
|
10681
|
-
[vars$
|
11168
|
+
[vars$i.overlay.minHeight]: '400px',
|
11169
|
+
[vars$i.overlay.margin]: '0',
|
10682
11170
|
};
|
10683
11171
|
|
10684
11172
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
10685
11173
|
__proto__: null,
|
10686
11174
|
comboBox: comboBox,
|
10687
11175
|
default: comboBox,
|
10688
|
-
vars: vars$
|
11176
|
+
vars: vars$i
|
10689
11177
|
});
|
10690
11178
|
|
10691
|
-
const vars$
|
11179
|
+
const vars$h = ImageClass.cssVarList;
|
10692
11180
|
|
10693
11181
|
const image = {};
|
10694
11182
|
|
10695
11183
|
var image$1 = /*#__PURE__*/Object.freeze({
|
10696
11184
|
__proto__: null,
|
10697
11185
|
default: image,
|
10698
|
-
vars: vars$
|
11186
|
+
vars: vars$h
|
10699
11187
|
});
|
10700
11188
|
|
10701
|
-
const vars$
|
11189
|
+
const vars$g = PhoneFieldClass.cssVarList;
|
10702
11190
|
|
10703
11191
|
const phoneField = {
|
10704
|
-
[vars$
|
10705
|
-
[vars$
|
10706
|
-
[vars$
|
10707
|
-
[vars$
|
10708
|
-
[vars$
|
10709
|
-
[vars$
|
10710
|
-
[vars$
|
10711
|
-
[vars$
|
10712
|
-
[vars$
|
10713
|
-
[vars$
|
10714
|
-
[vars$
|
10715
|
-
[vars$
|
10716
|
-
[vars$
|
10717
|
-
[vars$
|
10718
|
-
[vars$
|
10719
|
-
[vars$
|
10720
|
-
[vars$
|
10721
|
-
[vars$
|
10722
|
-
[vars$
|
10723
|
-
[vars$
|
11192
|
+
[vars$g.hostWidth]: refs.width,
|
11193
|
+
[vars$g.hostDirection]: refs.direction,
|
11194
|
+
[vars$g.fontSize]: refs.fontSize,
|
11195
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
11196
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
11197
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
11198
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
11199
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
11200
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11201
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
11202
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
11203
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
11204
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
11205
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
11206
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
11207
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
11208
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
11209
|
+
[vars$g.phoneInputWidth]: refs.minWidth,
|
11210
|
+
[vars$g.countryCodeInputWidth]: '5em',
|
11211
|
+
[vars$g.countryCodeDropdownWidth]: '20em',
|
10724
11212
|
|
10725
11213
|
// '@overlay': {
|
10726
11214
|
// overlayItemBackgroundColor: 'red'
|
@@ -10730,169 +11218,169 @@ const phoneField = {
|
|
10730
11218
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
10731
11219
|
__proto__: null,
|
10732
11220
|
default: phoneField,
|
10733
|
-
vars: vars$
|
11221
|
+
vars: vars$g
|
10734
11222
|
});
|
10735
11223
|
|
10736
|
-
const vars$
|
11224
|
+
const vars$f = PhoneFieldInputBoxClass.cssVarList;
|
10737
11225
|
|
10738
11226
|
const phoneInputBoxField = {
|
10739
|
-
[vars$
|
10740
|
-
[vars$
|
10741
|
-
[vars$
|
10742
|
-
[vars$
|
10743
|
-
[vars$
|
10744
|
-
[vars$
|
10745
|
-
[vars$
|
10746
|
-
[vars$
|
10747
|
-
[vars$
|
10748
|
-
[vars$
|
10749
|
-
[vars$
|
10750
|
-
[vars$
|
10751
|
-
[vars$
|
10752
|
-
[vars$
|
10753
|
-
[vars$
|
10754
|
-
[vars$
|
10755
|
-
[vars$
|
10756
|
-
[vars$
|
11227
|
+
[vars$f.hostWidth]: '16em',
|
11228
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
11229
|
+
[vars$f.hostDirection]: refs.direction,
|
11230
|
+
[vars$f.fontSize]: refs.fontSize,
|
11231
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
11232
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
11233
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
11234
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
11235
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
11236
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11237
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
11238
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
11239
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
11240
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
11241
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
11242
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
11243
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
11244
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
10757
11245
|
_fullWidth: {
|
10758
|
-
[vars$
|
11246
|
+
[vars$f.hostWidth]: refs.width,
|
10759
11247
|
},
|
10760
11248
|
};
|
10761
11249
|
|
10762
11250
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
10763
11251
|
__proto__: null,
|
10764
11252
|
default: phoneInputBoxField,
|
10765
|
-
vars: vars$
|
11253
|
+
vars: vars$f
|
10766
11254
|
});
|
10767
11255
|
|
10768
|
-
const vars$
|
11256
|
+
const vars$e = NewPasswordClass.cssVarList;
|
10769
11257
|
|
10770
11258
|
const newPassword = {
|
10771
|
-
[vars$
|
10772
|
-
[vars$
|
10773
|
-
[vars$
|
10774
|
-
[vars$
|
10775
|
-
[vars$
|
10776
|
-
[vars$
|
10777
|
-
[vars$
|
11259
|
+
[vars$e.hostWidth]: refs.width,
|
11260
|
+
[vars$e.hostMinWidth]: refs.minWidth,
|
11261
|
+
[vars$e.hostDirection]: refs.direction,
|
11262
|
+
[vars$e.fontSize]: refs.fontSize,
|
11263
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
11264
|
+
[vars$e.spaceBetweenInputs]: '1em',
|
11265
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
10778
11266
|
|
10779
11267
|
_required: {
|
10780
11268
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
10781
11269
|
// That's why we fake the required indicator on each input.
|
10782
11270
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
10783
|
-
[vars$
|
11271
|
+
[vars$e.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
10784
11272
|
},
|
10785
11273
|
};
|
10786
11274
|
|
10787
11275
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
10788
11276
|
__proto__: null,
|
10789
11277
|
default: newPassword,
|
10790
|
-
vars: vars$
|
11278
|
+
vars: vars$e
|
10791
11279
|
});
|
10792
11280
|
|
10793
|
-
const vars$
|
11281
|
+
const vars$d = UploadFileClass.cssVarList;
|
10794
11282
|
|
10795
11283
|
const uploadFile = {
|
10796
|
-
[vars$
|
10797
|
-
[vars$
|
10798
|
-
[vars$
|
11284
|
+
[vars$d.hostDirection]: refs.direction,
|
11285
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
11286
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
10799
11287
|
|
10800
|
-
[vars$
|
11288
|
+
[vars$d.iconSize]: '2em',
|
10801
11289
|
|
10802
|
-
[vars$
|
10803
|
-
[vars$
|
11290
|
+
[vars$d.hostPadding]: '0.75em',
|
11291
|
+
[vars$d.gap]: '0.5em',
|
10804
11292
|
|
10805
|
-
[vars$
|
10806
|
-
[vars$
|
10807
|
-
[vars$
|
11293
|
+
[vars$d.fontSize]: '16px',
|
11294
|
+
[vars$d.titleFontWeight]: '500',
|
11295
|
+
[vars$d.lineHeight]: '1em',
|
10808
11296
|
|
10809
|
-
[vars$
|
10810
|
-
[vars$
|
10811
|
-
[vars$
|
10812
|
-
[vars$
|
11297
|
+
[vars$d.borderWidth]: refs.borderWidth,
|
11298
|
+
[vars$d.borderColor]: refs.borderColor,
|
11299
|
+
[vars$d.borderRadius]: refs.borderRadius,
|
11300
|
+
[vars$d.borderStyle]: 'dashed',
|
10813
11301
|
|
10814
11302
|
_required: {
|
10815
|
-
[vars$
|
11303
|
+
[vars$d.requiredIndicator]: refs.requiredIndicator,
|
10816
11304
|
},
|
10817
11305
|
|
10818
11306
|
size: {
|
10819
11307
|
xs: {
|
10820
|
-
[vars$
|
10821
|
-
[vars$
|
10822
|
-
[vars$
|
10823
|
-
[vars$
|
10824
|
-
[vars$
|
11308
|
+
[vars$d.hostHeight]: '196px',
|
11309
|
+
[vars$d.hostWidth]: '200px',
|
11310
|
+
[vars$d.titleFontSize]: '0.875em',
|
11311
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
11312
|
+
[vars$d.lineHeight]: '1.25em',
|
10825
11313
|
},
|
10826
11314
|
sm: {
|
10827
|
-
[vars$
|
10828
|
-
[vars$
|
10829
|
-
[vars$
|
10830
|
-
[vars$
|
10831
|
-
[vars$
|
11315
|
+
[vars$d.hostHeight]: '216px',
|
11316
|
+
[vars$d.hostWidth]: '230px',
|
11317
|
+
[vars$d.titleFontSize]: '1em',
|
11318
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
11319
|
+
[vars$d.lineHeight]: '1.25em',
|
10832
11320
|
},
|
10833
11321
|
md: {
|
10834
|
-
[vars$
|
10835
|
-
[vars$
|
10836
|
-
[vars$
|
10837
|
-
[vars$
|
10838
|
-
[vars$
|
11322
|
+
[vars$d.hostHeight]: '256px',
|
11323
|
+
[vars$d.hostWidth]: '312px',
|
11324
|
+
[vars$d.titleFontSize]: '1.125em',
|
11325
|
+
[vars$d.descriptionFontSize]: '1em',
|
11326
|
+
[vars$d.lineHeight]: '1.5em',
|
10839
11327
|
},
|
10840
11328
|
lg: {
|
10841
|
-
[vars$
|
10842
|
-
[vars$
|
10843
|
-
[vars$
|
10844
|
-
[vars$
|
10845
|
-
[vars$
|
11329
|
+
[vars$d.hostHeight]: '280px',
|
11330
|
+
[vars$d.hostWidth]: '336px',
|
11331
|
+
[vars$d.titleFontSize]: '1.125em',
|
11332
|
+
[vars$d.descriptionFontSize]: '1.125em',
|
11333
|
+
[vars$d.lineHeight]: '1.75em',
|
10846
11334
|
},
|
10847
11335
|
},
|
10848
11336
|
|
10849
11337
|
_fullWidth: {
|
10850
|
-
[vars$
|
11338
|
+
[vars$d.hostWidth]: refs.width,
|
10851
11339
|
},
|
10852
11340
|
};
|
10853
11341
|
|
10854
11342
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
10855
11343
|
__proto__: null,
|
10856
11344
|
default: uploadFile,
|
10857
|
-
vars: vars$
|
11345
|
+
vars: vars$d
|
10858
11346
|
});
|
10859
11347
|
|
10860
|
-
const globalRefs$
|
11348
|
+
const globalRefs$9 = getThemeRefs(globals);
|
10861
11349
|
|
10862
|
-
const vars$
|
11350
|
+
const vars$c = ButtonSelectionGroupItemClass.cssVarList;
|
10863
11351
|
|
10864
11352
|
const buttonSelectionGroupItem = {
|
10865
|
-
[vars$
|
10866
|
-
[vars$
|
10867
|
-
[vars$
|
10868
|
-
[vars$
|
10869
|
-
[vars$
|
10870
|
-
[vars$
|
10871
|
-
[vars$
|
10872
|
-
[vars$
|
11353
|
+
[vars$c.hostDirection]: 'inherit',
|
11354
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
|
11355
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
11356
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.light,
|
11357
|
+
[vars$c.borderStyle]: 'solid',
|
11358
|
+
[vars$c.borderRadius]: globalRefs$9.radius.sm,
|
11359
|
+
[vars$c.outlineColor]: 'transparent',
|
11360
|
+
[vars$c.borderWidth]: globalRefs$9.border.xs,
|
10873
11361
|
|
10874
11362
|
_hover: {
|
10875
|
-
[vars$
|
11363
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.highlight,
|
10876
11364
|
},
|
10877
11365
|
|
10878
11366
|
_focused: {
|
10879
|
-
[vars$
|
11367
|
+
[vars$c.outlineColor]: globalRefs$9.colors.surface.light,
|
10880
11368
|
},
|
10881
11369
|
|
10882
11370
|
_selected: {
|
10883
|
-
[vars$
|
10884
|
-
[vars$
|
10885
|
-
[vars$
|
11371
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.contrast,
|
11372
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.contrast,
|
11373
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.main,
|
10886
11374
|
},
|
10887
11375
|
};
|
10888
11376
|
|
10889
11377
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
10890
11378
|
__proto__: null,
|
10891
11379
|
default: buttonSelectionGroupItem,
|
10892
|
-
vars: vars$
|
11380
|
+
vars: vars$c
|
10893
11381
|
});
|
10894
11382
|
|
10895
|
-
const globalRefs$
|
11383
|
+
const globalRefs$8 = getThemeRefs(globals);
|
10896
11384
|
|
10897
11385
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
10898
11386
|
[vars.hostDirection]: refs.direction,
|
@@ -10900,84 +11388,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
10900
11388
|
[vars.labelTextColor]: refs.labelTextColor,
|
10901
11389
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
10902
11390
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
10903
|
-
[vars.itemsSpacing]: globalRefs$
|
11391
|
+
[vars.itemsSpacing]: globalRefs$8.spacing.sm,
|
10904
11392
|
[vars.hostWidth]: refs.width,
|
10905
11393
|
});
|
10906
11394
|
|
10907
|
-
const vars$
|
11395
|
+
const vars$b = ButtonSelectionGroupClass.cssVarList;
|
10908
11396
|
|
10909
11397
|
const buttonSelectionGroup = {
|
10910
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11398
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
10911
11399
|
};
|
10912
11400
|
|
10913
11401
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10914
11402
|
__proto__: null,
|
10915
11403
|
default: buttonSelectionGroup,
|
10916
|
-
vars: vars$
|
11404
|
+
vars: vars$b
|
10917
11405
|
});
|
10918
11406
|
|
10919
|
-
const vars$
|
11407
|
+
const vars$a = ButtonMultiSelectionGroupClass.cssVarList;
|
10920
11408
|
|
10921
11409
|
const buttonMultiSelectionGroup = {
|
10922
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
11410
|
+
...createBaseButtonSelectionGroupMappings(vars$a),
|
10923
11411
|
};
|
10924
11412
|
|
10925
11413
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10926
11414
|
__proto__: null,
|
10927
11415
|
default: buttonMultiSelectionGroup,
|
10928
|
-
vars: vars$
|
11416
|
+
vars: vars$a
|
10929
11417
|
});
|
10930
11418
|
|
10931
|
-
const globalRefs$
|
11419
|
+
const globalRefs$7 = getThemeRefs(globals);
|
10932
11420
|
|
10933
11421
|
const compVars$1 = ModalClass.cssVarList;
|
10934
11422
|
|
10935
11423
|
const modal = {
|
10936
|
-
[compVars$1.overlayBackgroundColor]: globalRefs$
|
10937
|
-
[compVars$1.overlayShadow]: globalRefs$
|
11424
|
+
[compVars$1.overlayBackgroundColor]: globalRefs$7.colors.surface.main,
|
11425
|
+
[compVars$1.overlayShadow]: globalRefs$7.shadow.wide['2xl'],
|
10938
11426
|
[compVars$1.overlayWidth]: '540px',
|
10939
11427
|
};
|
10940
11428
|
|
10941
|
-
const vars$
|
11429
|
+
const vars$9 = {
|
10942
11430
|
...compVars$1,
|
10943
11431
|
};
|
10944
11432
|
|
10945
11433
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
10946
11434
|
__proto__: null,
|
10947
11435
|
default: modal,
|
10948
|
-
vars: vars$
|
11436
|
+
vars: vars$9
|
10949
11437
|
});
|
10950
11438
|
|
10951
|
-
const globalRefs$
|
10952
|
-
const vars$
|
11439
|
+
const globalRefs$6 = getThemeRefs(globals);
|
11440
|
+
const vars$8 = GridClass.cssVarList;
|
10953
11441
|
|
10954
11442
|
const grid = {
|
10955
|
-
[vars$
|
10956
|
-
[vars$
|
10957
|
-
[vars$
|
10958
|
-
[vars$
|
10959
|
-
[vars$
|
11443
|
+
[vars$8.hostWidth]: '100%',
|
11444
|
+
[vars$8.hostHeight]: '100%',
|
11445
|
+
[vars$8.hostMinHeight]: '400px',
|
11446
|
+
[vars$8.fontWeight]: '400',
|
11447
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
10960
11448
|
|
10961
|
-
[vars$
|
10962
|
-
[vars$
|
11449
|
+
[vars$8.fontSize]: refs.fontSize,
|
11450
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
10963
11451
|
|
10964
|
-
[vars$
|
10965
|
-
[vars$
|
10966
|
-
[vars$
|
11452
|
+
[vars$8.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
|
11453
|
+
[vars$8.activeSortIndicator]: globalRefs$6.colors.surface.dark,
|
11454
|
+
[vars$8.resizeHandleColor]: globalRefs$6.colors.surface.light,
|
10967
11455
|
|
10968
|
-
[vars$
|
10969
|
-
[vars$
|
10970
|
-
[vars$
|
10971
|
-
[vars$
|
11456
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
11457
|
+
[vars$8.borderStyle]: refs.borderStyle,
|
11458
|
+
[vars$8.borderRadius]: refs.borderRadius,
|
11459
|
+
[vars$8.borderColor]: 'transparent',
|
10972
11460
|
|
10973
|
-
[vars$
|
10974
|
-
[vars$
|
11461
|
+
[vars$8.headerRowTextColor]: globalRefs$6.colors.surface.dark,
|
11462
|
+
[vars$8.separatorColor]: globalRefs$6.colors.surface.light,
|
10975
11463
|
|
10976
|
-
[vars$
|
10977
|
-
[vars$
|
11464
|
+
[vars$8.valueTextColor]: globalRefs$6.colors.surface.contrast,
|
11465
|
+
[vars$8.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
|
10978
11466
|
|
10979
11467
|
_bordered: {
|
10980
|
-
[vars$
|
11468
|
+
[vars$8.borderColor]: refs.borderColor,
|
10981
11469
|
},
|
10982
11470
|
};
|
10983
11471
|
|
@@ -10985,53 +11473,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
10985
11473
|
__proto__: null,
|
10986
11474
|
default: grid,
|
10987
11475
|
grid: grid,
|
10988
|
-
vars: vars$
|
11476
|
+
vars: vars$8
|
10989
11477
|
});
|
10990
11478
|
|
10991
|
-
const globalRefs$
|
10992
|
-
const vars$
|
11479
|
+
const globalRefs$5 = getThemeRefs(globals);
|
11480
|
+
const vars$7 = NotificationCardClass.cssVarList;
|
10993
11481
|
|
10994
11482
|
const shadowColor = '#00000020';
|
10995
11483
|
|
10996
11484
|
const notification = {
|
10997
|
-
[vars$
|
10998
|
-
[vars$
|
10999
|
-
[vars$
|
11000
|
-
[vars$
|
11001
|
-
[vars$
|
11002
|
-
[vars$
|
11003
|
-
[vars$
|
11004
|
-
[vars$
|
11005
|
-
[vars$
|
11485
|
+
[vars$7.hostMinWidth]: '415px',
|
11486
|
+
[vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
|
11487
|
+
[vars$7.fontSize]: globalRefs$5.typography.body1.size,
|
11488
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.surface.main,
|
11489
|
+
[vars$7.textColor]: globalRefs$5.colors.surface.contrast,
|
11490
|
+
[vars$7.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
|
11491
|
+
[vars$7.verticalPadding]: '0.625em',
|
11492
|
+
[vars$7.horizontalPadding]: '1.5em',
|
11493
|
+
[vars$7.borderRadius]: globalRefs$5.radius.xs,
|
11006
11494
|
|
11007
11495
|
_bordered: {
|
11008
|
-
[vars$
|
11009
|
-
[vars$
|
11010
|
-
[vars$
|
11496
|
+
[vars$7.borderWidth]: globalRefs$5.border.sm,
|
11497
|
+
[vars$7.borderStyle]: 'solid',
|
11498
|
+
[vars$7.borderColor]: 'transparent',
|
11011
11499
|
},
|
11012
11500
|
|
11013
11501
|
size: {
|
11014
|
-
xs: { [vars$
|
11015
|
-
sm: { [vars$
|
11016
|
-
md: { [vars$
|
11017
|
-
lg: { [vars$
|
11502
|
+
xs: { [vars$7.fontSize]: '12px' },
|
11503
|
+
sm: { [vars$7.fontSize]: '14px' },
|
11504
|
+
md: { [vars$7.fontSize]: '16px' },
|
11505
|
+
lg: { [vars$7.fontSize]: '18px' },
|
11018
11506
|
},
|
11019
11507
|
|
11020
11508
|
mode: {
|
11021
11509
|
primary: {
|
11022
|
-
[vars$
|
11023
|
-
[vars$
|
11024
|
-
[vars$
|
11510
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.primary.main,
|
11511
|
+
[vars$7.textColor]: globalRefs$5.colors.primary.contrast,
|
11512
|
+
[vars$7.borderColor]: globalRefs$5.colors.primary.light,
|
11025
11513
|
},
|
11026
11514
|
success: {
|
11027
|
-
[vars$
|
11028
|
-
[vars$
|
11029
|
-
[vars$
|
11515
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.success.main,
|
11516
|
+
[vars$7.textColor]: globalRefs$5.colors.success.contrast,
|
11517
|
+
[vars$7.borderColor]: globalRefs$5.colors.success.light,
|
11030
11518
|
},
|
11031
11519
|
error: {
|
11032
|
-
[vars$
|
11033
|
-
[vars$
|
11034
|
-
[vars$
|
11520
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.error.main,
|
11521
|
+
[vars$7.textColor]: globalRefs$5.colors.error.contrast,
|
11522
|
+
[vars$7.borderColor]: globalRefs$5.colors.error.light,
|
11035
11523
|
},
|
11036
11524
|
},
|
11037
11525
|
};
|
@@ -11039,128 +11527,128 @@ const notification = {
|
|
11039
11527
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
11040
11528
|
__proto__: null,
|
11041
11529
|
default: notification,
|
11042
|
-
vars: vars$
|
11530
|
+
vars: vars$7
|
11043
11531
|
});
|
11044
11532
|
|
11045
|
-
const globalRefs$
|
11046
|
-
const vars$
|
11533
|
+
const globalRefs$4 = getThemeRefs(globals);
|
11534
|
+
const vars$6 = MultiSelectComboBoxClass.cssVarList;
|
11047
11535
|
|
11048
11536
|
const multiSelectComboBox = {
|
11049
|
-
[vars$
|
11050
|
-
[vars$
|
11051
|
-
[vars$
|
11052
|
-
[vars$
|
11053
|
-
[vars$
|
11054
|
-
[vars$
|
11055
|
-
[vars$
|
11056
|
-
[vars$
|
11057
|
-
[vars$
|
11058
|
-
[vars$
|
11059
|
-
[vars$
|
11060
|
-
[vars$
|
11061
|
-
[vars$
|
11062
|
-
[vars$
|
11063
|
-
[vars$
|
11064
|
-
[vars$
|
11065
|
-
[vars$
|
11066
|
-
[vars$
|
11067
|
-
[vars$
|
11068
|
-
[vars$
|
11069
|
-
[vars$
|
11070
|
-
[vars$
|
11071
|
-
[vars$
|
11072
|
-
[vars$
|
11073
|
-
[vars$
|
11074
|
-
[vars$
|
11075
|
-
[vars$
|
11076
|
-
[vars$
|
11077
|
-
[vars$
|
11078
|
-
[vars$
|
11537
|
+
[vars$6.hostWidth]: refs.width,
|
11538
|
+
[vars$6.hostDirection]: refs.direction,
|
11539
|
+
[vars$6.fontSize]: refs.fontSize,
|
11540
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
11541
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
11542
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
11543
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
11544
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
11545
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
11546
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
11547
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
11548
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
11549
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
11550
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
11551
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
11552
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
11553
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
11554
|
+
[vars$6.inputBackgroundColor]: refs.backgroundColor,
|
11555
|
+
[vars$6.inputHorizontalPadding]: refs.horizontalPadding,
|
11556
|
+
[vars$6.inputVerticalPadding]: refs.verticalPadding,
|
11557
|
+
[vars$6.inputHeight]: refs.inputHeight,
|
11558
|
+
[vars$6.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
|
11559
|
+
[vars$6.inputDropdownButtonCursor]: 'pointer',
|
11560
|
+
[vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
|
11561
|
+
[vars$6.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
11562
|
+
[vars$6.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
|
11563
|
+
[vars$6.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
|
11564
|
+
[vars$6.chipFontSize]: refs.chipFontSize,
|
11565
|
+
[vars$6.chipTextColor]: globalRefs$4.colors.surface.contrast,
|
11566
|
+
[vars$6.chipBackgroundColor]: globalRefs$4.colors.surface.light,
|
11079
11567
|
|
11080
11568
|
_readonly: {
|
11081
|
-
[vars$
|
11569
|
+
[vars$6.inputDropdownButtonCursor]: 'default',
|
11082
11570
|
},
|
11083
11571
|
|
11084
11572
|
// Overlay theme exposed via the component:
|
11085
|
-
[vars$
|
11086
|
-
[vars$
|
11087
|
-
[vars$
|
11088
|
-
[vars$
|
11089
|
-
[vars$
|
11090
|
-
[vars$
|
11573
|
+
[vars$6.overlayFontSize]: refs.fontSize,
|
11574
|
+
[vars$6.overlayFontFamily]: refs.fontFamily,
|
11575
|
+
[vars$6.overlayCursor]: 'pointer',
|
11576
|
+
[vars$6.overlayItemBoxShadow]: 'none',
|
11577
|
+
[vars$6.overlayBackground]: refs.backgroundColor,
|
11578
|
+
[vars$6.overlayTextColor]: refs.valueTextColor,
|
11091
11579
|
|
11092
11580
|
// Overlay direct theme:
|
11093
|
-
[vars$
|
11094
|
-
[vars$
|
11581
|
+
[vars$6.overlay.minHeight]: '400px',
|
11582
|
+
[vars$6.overlay.margin]: '0',
|
11095
11583
|
};
|
11096
11584
|
|
11097
11585
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
11098
11586
|
__proto__: null,
|
11099
11587
|
default: multiSelectComboBox,
|
11100
11588
|
multiSelectComboBox: multiSelectComboBox,
|
11101
|
-
vars: vars$
|
11589
|
+
vars: vars$6
|
11102
11590
|
});
|
11103
11591
|
|
11104
|
-
const globalRefs$
|
11105
|
-
const vars$
|
11592
|
+
const globalRefs$3 = getThemeRefs(globals);
|
11593
|
+
const vars$5 = BadgeClass.cssVarList;
|
11106
11594
|
|
11107
11595
|
const badge = {
|
11108
|
-
[vars$
|
11109
|
-
[vars$
|
11596
|
+
[vars$5.hostWidth]: 'fit-content',
|
11597
|
+
[vars$5.hostDirection]: globalRefs$3.direction,
|
11110
11598
|
|
11111
|
-
[vars$
|
11599
|
+
[vars$5.textAlign]: 'center',
|
11112
11600
|
|
11113
|
-
[vars$
|
11114
|
-
[vars$
|
11601
|
+
[vars$5.fontFamily]: globalRefs$3.fonts.font1.family,
|
11602
|
+
[vars$5.fontWeight]: '400',
|
11115
11603
|
|
11116
|
-
[vars$
|
11117
|
-
[vars$
|
11604
|
+
[vars$5.verticalPadding]: '0.25em',
|
11605
|
+
[vars$5.horizontalPadding]: '0.5em',
|
11118
11606
|
|
11119
|
-
[vars$
|
11120
|
-
[vars$
|
11121
|
-
[vars$
|
11122
|
-
[vars$
|
11607
|
+
[vars$5.borderWidth]: globalRefs$3.border.xs,
|
11608
|
+
[vars$5.borderRadius]: globalRefs$3.radius.xs,
|
11609
|
+
[vars$5.borderColor]: 'transparent',
|
11610
|
+
[vars$5.borderStyle]: 'solid',
|
11123
11611
|
|
11124
11612
|
_fullWidth: {
|
11125
|
-
[vars$
|
11613
|
+
[vars$5.hostWidth]: '100%',
|
11126
11614
|
},
|
11127
11615
|
|
11128
11616
|
size: {
|
11129
|
-
xs: { [vars$
|
11130
|
-
sm: { [vars$
|
11131
|
-
md: { [vars$
|
11132
|
-
lg: { [vars$
|
11617
|
+
xs: { [vars$5.fontSize]: '12px' },
|
11618
|
+
sm: { [vars$5.fontSize]: '14px' },
|
11619
|
+
md: { [vars$5.fontSize]: '16px' },
|
11620
|
+
lg: { [vars$5.fontSize]: '18px' },
|
11133
11621
|
},
|
11134
11622
|
|
11135
11623
|
mode: {
|
11136
11624
|
default: {
|
11137
|
-
[vars$
|
11625
|
+
[vars$5.textColor]: globalRefs$3.colors.surface.dark,
|
11138
11626
|
_bordered: {
|
11139
|
-
[vars$
|
11627
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.light,
|
11140
11628
|
},
|
11141
11629
|
},
|
11142
11630
|
primary: {
|
11143
|
-
[vars$
|
11631
|
+
[vars$5.textColor]: globalRefs$3.colors.primary.main,
|
11144
11632
|
_bordered: {
|
11145
|
-
[vars$
|
11633
|
+
[vars$5.borderColor]: globalRefs$3.colors.primary.light,
|
11146
11634
|
},
|
11147
11635
|
},
|
11148
11636
|
secondary: {
|
11149
|
-
[vars$
|
11637
|
+
[vars$5.textColor]: globalRefs$3.colors.secondary.main,
|
11150
11638
|
_bordered: {
|
11151
|
-
[vars$
|
11639
|
+
[vars$5.borderColor]: globalRefs$3.colors.secondary.light,
|
11152
11640
|
},
|
11153
11641
|
},
|
11154
11642
|
error: {
|
11155
|
-
[vars$
|
11643
|
+
[vars$5.textColor]: globalRefs$3.colors.error.main,
|
11156
11644
|
_bordered: {
|
11157
|
-
[vars$
|
11645
|
+
[vars$5.borderColor]: globalRefs$3.colors.error.light,
|
11158
11646
|
},
|
11159
11647
|
},
|
11160
11648
|
success: {
|
11161
|
-
[vars$
|
11649
|
+
[vars$5.textColor]: globalRefs$3.colors.success.main,
|
11162
11650
|
_bordered: {
|
11163
|
-
[vars$
|
11651
|
+
[vars$5.borderColor]: globalRefs$3.colors.success.light,
|
11164
11652
|
},
|
11165
11653
|
},
|
11166
11654
|
},
|
@@ -11169,19 +11657,23 @@ const badge = {
|
|
11169
11657
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
11170
11658
|
__proto__: null,
|
11171
11659
|
default: badge,
|
11172
|
-
vars: vars$
|
11660
|
+
vars: vars$5
|
11173
11661
|
});
|
11174
11662
|
|
11175
|
-
const globalRefs$
|
11663
|
+
const globalRefs$2 = getThemeRefs(globals);
|
11176
11664
|
const compVars = AvatarClass.cssVarList;
|
11177
11665
|
|
11178
11666
|
const avatar = {
|
11179
|
-
[compVars.hostDirection]: globalRefs$
|
11180
|
-
[compVars.editableIconColor]: globalRefs$
|
11181
|
-
[compVars.editableBorderColor]: globalRefs$
|
11182
|
-
[compVars.editableBackgroundColor]: globalRefs$
|
11183
|
-
[compVars.avatarTextColor]: globalRefs$
|
11184
|
-
[compVars.avatarBackgroundColor]: globalRefs$
|
11667
|
+
[compVars.hostDirection]: globalRefs$2.direction,
|
11668
|
+
[compVars.editableIconColor]: globalRefs$2.colors.surface.dark,
|
11669
|
+
[compVars.editableBorderColor]: globalRefs$2.colors.surface.dark,
|
11670
|
+
[compVars.editableBackgroundColor]: globalRefs$2.colors.surface.main,
|
11671
|
+
[compVars.avatarTextColor]: globalRefs$2.colors.surface.main,
|
11672
|
+
[compVars.avatarBackgroundColor]: globalRefs$2.colors.surface.dark,
|
11673
|
+
|
11674
|
+
_editable: {
|
11675
|
+
[compVars.cursor]: 'pointer',
|
11676
|
+
},
|
11185
11677
|
|
11186
11678
|
size: {
|
11187
11679
|
xs: {
|
@@ -11203,41 +11695,79 @@ const avatar = {
|
|
11203
11695
|
},
|
11204
11696
|
};
|
11205
11697
|
|
11206
|
-
const vars$
|
11698
|
+
const vars$4 = {
|
11207
11699
|
...compVars,
|
11208
11700
|
};
|
11209
11701
|
|
11210
11702
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
11211
11703
|
__proto__: null,
|
11212
11704
|
default: avatar,
|
11213
|
-
vars: vars$
|
11705
|
+
vars: vars$4
|
11214
11706
|
});
|
11215
11707
|
|
11216
|
-
const globalRefs = getThemeRefs(globals);
|
11708
|
+
const globalRefs$1 = getThemeRefs(globals);
|
11217
11709
|
|
11218
|
-
const vars$
|
11710
|
+
const vars$3 = MappingsFieldClass.cssVarList;
|
11219
11711
|
|
11220
11712
|
const mappingsField = {
|
11221
|
-
[vars$
|
11222
|
-
[vars$
|
11223
|
-
[vars$
|
11224
|
-
[vars$
|
11225
|
-
[vars$
|
11226
|
-
[vars$
|
11227
|
-
[vars$
|
11713
|
+
[vars$3.hostWidth]: refs.width,
|
11714
|
+
[vars$3.hostDirection]: refs.direction,
|
11715
|
+
[vars$3.fontSize]: refs.fontSize,
|
11716
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
11717
|
+
[vars$3.separatorFontSize]: '14px',
|
11718
|
+
[vars$3.labelsFontSize]: '14px',
|
11719
|
+
[vars$3.labelsLineHeight]: '1',
|
11720
|
+
[vars$3.labelsMarginBottom]: '6px',
|
11721
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
11722
|
+
[vars$3.itemMarginBottom]: '1em',
|
11228
11723
|
// To be positioned correctly, the min width has to match the text field min width
|
11229
|
-
[vars$
|
11724
|
+
[vars$3.valueLabelMinWidth]: refs.minWidth,
|
11230
11725
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11231
|
-
[vars$
|
11232
|
-
[vars$
|
11233
|
-
[vars$
|
11234
|
-
[vars$1.removeButtonWidth]: '60px',
|
11726
|
+
[vars$3.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
|
11727
|
+
[vars$3.separatorWidth]: '70px',
|
11728
|
+
[vars$3.removeButtonWidth]: '60px',
|
11235
11729
|
};
|
11236
11730
|
|
11237
11731
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
11238
11732
|
__proto__: null,
|
11239
11733
|
default: mappingsField,
|
11240
11734
|
mappingsField: mappingsField,
|
11735
|
+
vars: vars$3
|
11736
|
+
});
|
11737
|
+
|
11738
|
+
const globalRefs = getThemeRefs(globals);
|
11739
|
+
const vars$2 = UserAttributeClass.cssVarList;
|
11740
|
+
|
11741
|
+
const userAttribute = {
|
11742
|
+
[vars$2.hostDirection]: globalRefs.direction,
|
11743
|
+
[vars$2.labelTextWidth]: '150px',
|
11744
|
+
[vars$2.valueTextWidth]: '200px',
|
11745
|
+
[vars$2.badgeMaxWidth]: '85px',
|
11746
|
+
[vars$2.itemsGap]: '16px',
|
11747
|
+
[vars$2.hostMinWidth]: '530px',
|
11748
|
+
_fullWidth: {
|
11749
|
+
[vars$2.hostWidth]: '100%',
|
11750
|
+
},
|
11751
|
+
};
|
11752
|
+
|
11753
|
+
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
11754
|
+
__proto__: null,
|
11755
|
+
default: userAttribute,
|
11756
|
+
vars: vars$2
|
11757
|
+
});
|
11758
|
+
|
11759
|
+
const vars$1 = SamlGroupMappingsClass.cssVarList;
|
11760
|
+
|
11761
|
+
const samlGroupMappings = {
|
11762
|
+
[vars$1.hostWidth]: refs.width,
|
11763
|
+
[vars$1.hostDirection]: refs.direction,
|
11764
|
+
[vars$1.groupNameInputMarginBottom]: '1em',
|
11765
|
+
};
|
11766
|
+
|
11767
|
+
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
11768
|
+
__proto__: null,
|
11769
|
+
default: samlGroupMappings,
|
11770
|
+
samlGroupMappings: samlGroupMappings,
|
11241
11771
|
vars: vars$1
|
11242
11772
|
});
|
11243
11773
|
|
@@ -11277,6 +11807,8 @@ const components = {
|
|
11277
11807
|
badge: badge$1,
|
11278
11808
|
avatar: avatar$1,
|
11279
11809
|
mappingsField: mappingsField$1,
|
11810
|
+
userAttribute: userAttribute$1,
|
11811
|
+
samlGroupMappings: samlGroupMappings$1,
|
11280
11812
|
};
|
11281
11813
|
|
11282
11814
|
const theme = Object.keys(components).reduce(
|
@@ -11289,7 +11821,7 @@ const vars = Object.keys(components).reduce(
|
|
11289
11821
|
);
|
11290
11822
|
|
11291
11823
|
const defaultTheme = { globals, components: theme };
|
11292
|
-
const themeVars = { globals: vars$
|
11824
|
+
const themeVars = { globals: vars$C, components: vars };
|
11293
11825
|
|
11294
11826
|
const colors = {
|
11295
11827
|
surface: {
|
@@ -11335,5 +11867,5 @@ const darkTheme = merge({}, defaultTheme, {
|
|
11335
11867
|
},
|
11336
11868
|
});
|
11337
11869
|
|
11338
|
-
export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11870
|
+
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, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
11339
11871
|
//# sourceMappingURL=index.esm.js.map
|