@descope/web-components-ui 1.0.279 → 1.0.280
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1123 -890
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1581 -964
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1438.js +2 -2
- package/dist/umd/{9558.js → 1621.js} +117 -117
- package/dist/umd/2066.js +1 -1
- package/dist/umd/3280.js +197 -0
- package/dist/umd/3280.js.LICENSE.txt +29 -0
- package/dist/umd/{6542.js → 3951.js} +6 -6
- package/dist/umd/{6542.js.LICENSE.txt → 3951.js.LICENSE.txt} +0 -6
- package/dist/umd/422.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6770.js +1 -1
- package/dist/umd/6977.js +2 -0
- package/dist/umd/6977.js.LICENSE.txt +5 -0
- package/dist/umd/7056.js +1 -1
- package/dist/umd/7531.js +2 -2
- package/dist/umd/7583.js +2 -2
- package/dist/umd/8725.js +1 -1
- package/dist/umd/9092.js +2 -2
- package/dist/umd/9437.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-notification-descope-notification-card-index-js.js +1 -1
- package/dist/umd/descope-notification-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -0
- package/package.json +4 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +4 -0
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +159 -0
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +158 -0
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/index.js +3 -0
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +232 -0
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js +3 -0
- package/src/components/mapping-fields/descope-mappings-field/index.js +14 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/mixins/inputValidationMixin.js +8 -0
- package/src/mixins/proxyInputMixin.js +48 -6
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/mappingsField.js +25 -0
- /package/dist/umd/{9558.js.LICENSE.txt → 1621.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -13,6 +13,9 @@ import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
|
13
13
|
import '@vaadin/multi-select-combo-box';
|
14
14
|
import '@vaadin/dialog';
|
15
15
|
import '@vaadin/notification';
|
16
|
+
import '@vaadin/custom-field';
|
17
|
+
import '@vaadin/icon';
|
18
|
+
import '@vaadin/icons';
|
16
19
|
import merge from 'lodash.merge';
|
17
20
|
import Color from 'color';
|
18
21
|
|
@@ -767,6 +770,14 @@ const inputValidationMixin = (superclass) =>
|
|
767
770
|
|
768
771
|
#internals;
|
769
772
|
|
773
|
+
get internals() {
|
774
|
+
return this.#internals;
|
775
|
+
}
|
776
|
+
|
777
|
+
set internals(value) {
|
778
|
+
this.#internals = value;
|
779
|
+
}
|
780
|
+
|
770
781
|
constructor() {
|
771
782
|
super();
|
772
783
|
|
@@ -953,7 +964,10 @@ const proxyInputMixin =
|
|
953
964
|
({
|
954
965
|
proxyProps = [],
|
955
966
|
// allows us to set the event that should trigger validation
|
967
|
+
// it can be either a string or an array of strings (for multiple events)
|
956
968
|
inputEvent = 'input',
|
969
|
+
// Proxies all validations from the parent component to the input element
|
970
|
+
proxyParentValidation = false,
|
957
971
|
}) =>
|
958
972
|
(superclass) =>
|
959
973
|
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
@@ -1043,12 +1057,16 @@ const proxyInputMixin =
|
|
1043
1057
|
// on some cases the base element is not ready so the inputElement is empty
|
1044
1058
|
// we are deferring this section to make sure the base element is ready
|
1045
1059
|
setTimeout(() => {
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
this.
|
1051
|
-
|
1060
|
+
const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
|
1061
|
+
|
1062
|
+
validationEvents.forEach((e) => {
|
1063
|
+
this.baseElement?.addEventListener(e, () => {
|
1064
|
+
if (!this.baseElement.checkValidity()) {
|
1065
|
+
this.#handleErrorMessage();
|
1066
|
+
} else {
|
1067
|
+
this.removeAttribute('invalid');
|
1068
|
+
}
|
1069
|
+
});
|
1052
1070
|
});
|
1053
1071
|
|
1054
1072
|
this.baseElement.addEventListener('change', () => {
|
@@ -1071,6 +1089,41 @@ const proxyInputMixin =
|
|
1071
1089
|
|
1072
1090
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
1073
1091
|
});
|
1092
|
+
|
1093
|
+
if (proxyParentValidation) {
|
1094
|
+
// All functions called on the inputElement internals will be applied to the parent
|
1095
|
+
// component internals as well. As a result, there's no need to add outer mechanisms
|
1096
|
+
// to update the parent component's validity state based on the input elements validity.
|
1097
|
+
const inputElementInternals = this.inputElement.internals;
|
1098
|
+
const parentThis = this;
|
1099
|
+
this.inputElement.internals = new Proxy(inputElementInternals, {
|
1100
|
+
get: (target, prop) => {
|
1101
|
+
if (typeof target[prop] === 'function' && prop === 'setValidity') {
|
1102
|
+
return (...args) => {
|
1103
|
+
// If we're calling setValidity with 3 args, then the validationTarget
|
1104
|
+
// needs to be swapped to be the inputElement
|
1105
|
+
if (args.length === 3) {
|
1106
|
+
const newArgs = args.slice(0, args.length - 1);
|
1107
|
+
newArgs.push(parentThis.inputElement);
|
1108
|
+
parentThis.internals[prop](...newArgs);
|
1109
|
+
} else {
|
1110
|
+
parentThis.internals[prop](...args);
|
1111
|
+
}
|
1112
|
+
return target[prop](...args);
|
1113
|
+
};
|
1114
|
+
}
|
1115
|
+
|
1116
|
+
if (typeof target[prop] === 'function') {
|
1117
|
+
return (...args) => {
|
1118
|
+
parentThis.internals[prop](...args);
|
1119
|
+
return target[prop](...args);
|
1120
|
+
};
|
1121
|
+
}
|
1122
|
+
|
1123
|
+
return target[prop];
|
1124
|
+
},
|
1125
|
+
});
|
1126
|
+
}
|
1074
1127
|
}
|
1075
1128
|
};
|
1076
1129
|
|
@@ -1289,7 +1342,7 @@ const clickableMixin = (superclass) =>
|
|
1289
1342
|
}
|
1290
1343
|
};
|
1291
1344
|
|
1292
|
-
const componentName$
|
1345
|
+
const componentName$L = getComponentName('button');
|
1293
1346
|
|
1294
1347
|
const resetStyles = `
|
1295
1348
|
:host {
|
@@ -1327,7 +1380,7 @@ const iconStyles = `
|
|
1327
1380
|
|
1328
1381
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1329
1382
|
|
1330
|
-
const { host: host$
|
1383
|
+
const { host: host$i, label: label$a } = {
|
1331
1384
|
host: { selector: () => ':host' },
|
1332
1385
|
label: { selector: '::part(label)' },
|
1333
1386
|
};
|
@@ -1339,7 +1392,7 @@ const ButtonClass = compose(
|
|
1339
1392
|
mappings: {
|
1340
1393
|
hostWidth: { property: 'width' },
|
1341
1394
|
hostHeight: { property: 'height' },
|
1342
|
-
hostDirection: { ...host$
|
1395
|
+
hostDirection: { ...host$i, property: 'direction' },
|
1343
1396
|
fontSize: {},
|
1344
1397
|
fontFamily: {},
|
1345
1398
|
|
@@ -1391,7 +1444,7 @@ const ButtonClass = compose(
|
|
1391
1444
|
}
|
1392
1445
|
`,
|
1393
1446
|
excludeAttrsSync: ['tabindex'],
|
1394
|
-
componentName: componentName$
|
1447
|
+
componentName: componentName$L,
|
1395
1448
|
})
|
1396
1449
|
);
|
1397
1450
|
|
@@ -1428,7 +1481,7 @@ loadingIndicatorStyles = `
|
|
1428
1481
|
}
|
1429
1482
|
`;
|
1430
1483
|
|
1431
|
-
customElements.define(componentName$
|
1484
|
+
customElements.define(componentName$L, ButtonClass);
|
1432
1485
|
|
1433
1486
|
const createBaseInputClass = (...args) =>
|
1434
1487
|
compose(
|
@@ -1438,13 +1491,13 @@ const createBaseInputClass = (...args) =>
|
|
1438
1491
|
inputEventsDispatchingMixin
|
1439
1492
|
)(createBaseClass(...args));
|
1440
1493
|
|
1441
|
-
const componentName$
|
1494
|
+
const componentName$K = getComponentName('boolean-field-internal');
|
1442
1495
|
|
1443
1496
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1444
1497
|
|
1445
|
-
const BaseInputClass$
|
1498
|
+
const BaseInputClass$7 = createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
|
1446
1499
|
|
1447
|
-
class BooleanInputInternal extends BaseInputClass$
|
1500
|
+
class BooleanInputInternal extends BaseInputClass$7 {
|
1448
1501
|
static get observedAttributes() {
|
1449
1502
|
return ['readonly'];
|
1450
1503
|
}
|
@@ -1518,14 +1571,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1518
1571
|
|
1519
1572
|
const template = document.createElement('template');
|
1520
1573
|
template.innerHTML = `
|
1521
|
-
<${componentName$
|
1574
|
+
<${componentName$K}
|
1522
1575
|
tabindex="-1"
|
1523
1576
|
slot="input"
|
1524
|
-
></${componentName$
|
1577
|
+
></${componentName$K}>
|
1525
1578
|
`;
|
1526
1579
|
|
1527
1580
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1528
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1581
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$K);
|
1529
1582
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1530
1583
|
|
1531
1584
|
forwardAttrs(this, this.inputElement, {
|
@@ -1724,17 +1777,17 @@ descope-boolean-field-internal {
|
|
1724
1777
|
}
|
1725
1778
|
`;
|
1726
1779
|
|
1727
|
-
const componentName$
|
1780
|
+
const componentName$J = getComponentName('checkbox');
|
1728
1781
|
|
1729
1782
|
const {
|
1730
|
-
host: host$
|
1783
|
+
host: host$h,
|
1731
1784
|
component: component$1,
|
1732
1785
|
checkboxElement,
|
1733
1786
|
checkboxSurface,
|
1734
1787
|
checkboxLabel: checkboxLabel$1,
|
1735
1788
|
requiredIndicator: requiredIndicator$b,
|
1736
|
-
helperText: helperText$
|
1737
|
-
errorMessage: errorMessage$
|
1789
|
+
helperText: helperText$a,
|
1790
|
+
errorMessage: errorMessage$c,
|
1738
1791
|
} = {
|
1739
1792
|
host: { selector: () => ':host' },
|
1740
1793
|
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
@@ -1749,11 +1802,11 @@ const {
|
|
1749
1802
|
const CheckboxClass = compose(
|
1750
1803
|
createStyleMixin({
|
1751
1804
|
mappings: {
|
1752
|
-
hostWidth: { ...host$
|
1753
|
-
hostDirection: { ...host$
|
1805
|
+
hostWidth: { ...host$h, property: 'width' },
|
1806
|
+
hostDirection: { ...host$h, property: 'direction' },
|
1754
1807
|
|
1755
|
-
fontSize: [host$
|
1756
|
-
fontFamily: [checkboxLabel$1, helperText$
|
1808
|
+
fontSize: [host$h, checkboxElement, checkboxLabel$1],
|
1809
|
+
fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
|
1757
1810
|
|
1758
1811
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
1759
1812
|
labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
|
@@ -1761,7 +1814,7 @@ const CheckboxClass = compose(
|
|
1761
1814
|
labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
|
1762
1815
|
labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
|
1763
1816
|
|
1764
|
-
errorMessageTextColor: { ...errorMessage$
|
1817
|
+
errorMessageTextColor: { ...errorMessage$c, property: 'color' },
|
1765
1818
|
|
1766
1819
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
1767
1820
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
@@ -1830,25 +1883,25 @@ const CheckboxClass = compose(
|
|
1830
1883
|
}
|
1831
1884
|
`,
|
1832
1885
|
excludeAttrsSync: ['label', 'tabindex'],
|
1833
|
-
componentName: componentName$
|
1886
|
+
componentName: componentName$J,
|
1834
1887
|
})
|
1835
1888
|
);
|
1836
1889
|
|
1837
|
-
customElements.define(componentName$
|
1890
|
+
customElements.define(componentName$K, BooleanInputInternal);
|
1838
1891
|
|
1839
|
-
customElements.define(componentName$
|
1892
|
+
customElements.define(componentName$J, CheckboxClass);
|
1840
1893
|
|
1841
|
-
const componentName$
|
1894
|
+
const componentName$I = getComponentName('switch-toggle');
|
1842
1895
|
|
1843
1896
|
const {
|
1844
|
-
host: host$
|
1897
|
+
host: host$g,
|
1845
1898
|
component,
|
1846
1899
|
checkboxElement: track,
|
1847
1900
|
checkboxSurface: knob,
|
1848
1901
|
checkboxLabel,
|
1849
1902
|
requiredIndicator: requiredIndicator$a,
|
1850
|
-
helperText: helperText$
|
1851
|
-
errorMessage: errorMessage$
|
1903
|
+
helperText: helperText$9,
|
1904
|
+
errorMessage: errorMessage$b,
|
1852
1905
|
} = {
|
1853
1906
|
host: { selector: () => ':host' },
|
1854
1907
|
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
@@ -1863,11 +1916,11 @@ const {
|
|
1863
1916
|
const SwitchToggleClass = compose(
|
1864
1917
|
createStyleMixin({
|
1865
1918
|
mappings: {
|
1866
|
-
hostWidth: { ...host$
|
1867
|
-
hostDirection: { ...host$
|
1919
|
+
hostWidth: { ...host$g, property: 'width' },
|
1920
|
+
hostDirection: { ...host$g, property: 'direction' },
|
1868
1921
|
|
1869
1922
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1870
|
-
fontFamily: [checkboxLabel, helperText$
|
1923
|
+
fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
|
1871
1924
|
|
1872
1925
|
labelTextColor: { ...checkboxLabel, property: 'color' },
|
1873
1926
|
labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
|
@@ -1875,7 +1928,7 @@ const SwitchToggleClass = compose(
|
|
1875
1928
|
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
1876
1929
|
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
1877
1930
|
|
1878
|
-
errorMessageTextColor: { ...errorMessage$
|
1931
|
+
errorMessageTextColor: { ...errorMessage$b, property: 'color' },
|
1879
1932
|
|
1880
1933
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1881
1934
|
trackBorderStyle: { ...track, property: 'border-style' },
|
@@ -1970,17 +2023,17 @@ const SwitchToggleClass = compose(
|
|
1970
2023
|
}
|
1971
2024
|
`,
|
1972
2025
|
excludeAttrsSync: ['label', 'tabindex'],
|
1973
|
-
componentName: componentName$
|
2026
|
+
componentName: componentName$I,
|
1974
2027
|
})
|
1975
2028
|
);
|
1976
2029
|
|
1977
|
-
customElements.define(componentName$
|
2030
|
+
customElements.define(componentName$I, SwitchToggleClass);
|
1978
2031
|
|
1979
|
-
const componentName$
|
2032
|
+
const componentName$H = getComponentName('loader-linear');
|
1980
2033
|
|
1981
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
2034
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
|
1982
2035
|
static get componentName() {
|
1983
|
-
return componentName$
|
2036
|
+
return componentName$H;
|
1984
2037
|
}
|
1985
2038
|
|
1986
2039
|
constructor() {
|
@@ -2016,18 +2069,18 @@ const selectors$2 = {
|
|
2016
2069
|
host: { selector: () => ':host' },
|
2017
2070
|
};
|
2018
2071
|
|
2019
|
-
const { after: after$1, host: host$
|
2072
|
+
const { after: after$1, host: host$f } = selectors$2;
|
2020
2073
|
|
2021
2074
|
const LoaderLinearClass = compose(
|
2022
2075
|
createStyleMixin({
|
2023
2076
|
mappings: {
|
2024
2077
|
hostDisplay: {},
|
2025
|
-
hostWidth: { ...host$
|
2078
|
+
hostWidth: { ...host$f, property: 'width' },
|
2026
2079
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
2027
2080
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
2028
2081
|
verticalPadding: [
|
2029
|
-
{ ...host$
|
2030
|
-
{ ...host$
|
2082
|
+
{ ...host$f, property: 'padding-top' },
|
2083
|
+
{ ...host$f, property: 'padding-bottom' },
|
2031
2084
|
],
|
2032
2085
|
barBackgroundColor: { property: 'background-color' },
|
2033
2086
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -2041,11 +2094,11 @@ const LoaderLinearClass = compose(
|
|
2041
2094
|
componentNameValidationMixin
|
2042
2095
|
)(RawLoaderLinear);
|
2043
2096
|
|
2044
|
-
customElements.define(componentName$
|
2097
|
+
customElements.define(componentName$H, LoaderLinearClass);
|
2045
2098
|
|
2046
|
-
const componentName$
|
2099
|
+
const componentName$G = getComponentName('loader-radial');
|
2047
2100
|
|
2048
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2101
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > div' }) {
|
2049
2102
|
constructor() {
|
2050
2103
|
super();
|
2051
2104
|
|
@@ -2089,11 +2142,11 @@ const LoaderRadialClass = compose(
|
|
2089
2142
|
componentNameValidationMixin
|
2090
2143
|
)(RawLoaderRadial);
|
2091
2144
|
|
2092
|
-
customElements.define(componentName$
|
2145
|
+
customElements.define(componentName$G, LoaderRadialClass);
|
2093
2146
|
|
2094
|
-
const componentName$
|
2147
|
+
const componentName$F = getComponentName('container');
|
2095
2148
|
|
2096
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2149
|
+
class RawContainer extends createBaseClass({ componentName: componentName$F, baseSelector: 'slot' }) {
|
2097
2150
|
constructor() {
|
2098
2151
|
super();
|
2099
2152
|
|
@@ -2146,13 +2199,13 @@ const ContainerClass = compose(
|
|
2146
2199
|
componentNameValidationMixin
|
2147
2200
|
)(RawContainer);
|
2148
2201
|
|
2149
|
-
customElements.define(componentName$
|
2202
|
+
customElements.define(componentName$F, ContainerClass);
|
2150
2203
|
|
2151
2204
|
// eslint-disable-next-line max-classes-per-file
|
2152
2205
|
|
2153
|
-
const componentName$
|
2206
|
+
const componentName$E = getComponentName('text');
|
2154
2207
|
|
2155
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2208
|
+
class RawText extends createBaseClass({ componentName: componentName$E, baseSelector: ':host > slot' }) {
|
2156
2209
|
constructor() {
|
2157
2210
|
super();
|
2158
2211
|
|
@@ -2212,8 +2265,8 @@ const TextClass = compose(
|
|
2212
2265
|
customTextMixin
|
2213
2266
|
)(RawText);
|
2214
2267
|
|
2215
|
-
const componentName$
|
2216
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2268
|
+
const componentName$D = getComponentName('divider');
|
2269
|
+
class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
|
2217
2270
|
constructor() {
|
2218
2271
|
super();
|
2219
2272
|
|
@@ -2259,7 +2312,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$A, baseS
|
|
2259
2312
|
}
|
2260
2313
|
|
2261
2314
|
const textVars$3 = TextClass.cssVarList;
|
2262
|
-
const { host: host$
|
2315
|
+
const { host: host$e, before, after, text: text$3 } = {
|
2263
2316
|
host: { selector: () => ':host' },
|
2264
2317
|
before: { selector: '::before' },
|
2265
2318
|
after: { selector: '::after' },
|
@@ -2269,8 +2322,8 @@ const { host: host$d, before, after, text: text$3 } = {
|
|
2269
2322
|
const DividerClass = compose(
|
2270
2323
|
createStyleMixin({
|
2271
2324
|
mappings: {
|
2272
|
-
hostWidth: { ...host$
|
2273
|
-
hostPadding: { ...host$
|
2325
|
+
hostWidth: { ...host$e, property: 'width' },
|
2326
|
+
hostPadding: { ...host$e, property: 'padding' },
|
2274
2327
|
hostDirection: { ...text$3, property: 'direction' },
|
2275
2328
|
|
2276
2329
|
minHeight: {},
|
@@ -2312,19 +2365,19 @@ const DividerClass = compose(
|
|
2312
2365
|
componentNameValidationMixin
|
2313
2366
|
)(RawDivider);
|
2314
2367
|
|
2315
|
-
customElements.define(componentName$
|
2368
|
+
customElements.define(componentName$E, TextClass);
|
2316
2369
|
|
2317
|
-
customElements.define(componentName$
|
2370
|
+
customElements.define(componentName$D, DividerClass);
|
2318
2371
|
|
2319
2372
|
const {
|
2320
|
-
host: host$
|
2373
|
+
host: host$d,
|
2321
2374
|
label: label$9,
|
2322
2375
|
placeholder: placeholder$3,
|
2323
2376
|
requiredIndicator: requiredIndicator$9,
|
2324
2377
|
inputField: inputField$6,
|
2325
2378
|
input,
|
2326
|
-
helperText: helperText$
|
2327
|
-
errorMessage: errorMessage$
|
2379
|
+
helperText: helperText$8,
|
2380
|
+
errorMessage: errorMessage$a,
|
2328
2381
|
disabledPlaceholder,
|
2329
2382
|
} = {
|
2330
2383
|
host: { selector: () => ':host' },
|
@@ -2340,12 +2393,12 @@ const {
|
|
2340
2393
|
|
2341
2394
|
var textFieldMappings = {
|
2342
2395
|
// we apply font-size also on the host so we can set its width with em
|
2343
|
-
fontSize: [{}, host$
|
2344
|
-
fontFamily: [label$9, inputField$6, helperText$
|
2396
|
+
fontSize: [{}, host$d],
|
2397
|
+
fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
|
2345
2398
|
|
2346
|
-
hostWidth: { ...host$
|
2347
|
-
hostMinWidth: { ...host$
|
2348
|
-
hostDirection: { ...host$
|
2399
|
+
hostWidth: { ...host$d, property: 'width' },
|
2400
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
2401
|
+
hostDirection: { ...host$d, property: 'direction' },
|
2349
2402
|
|
2350
2403
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
2351
2404
|
|
@@ -2355,7 +2408,7 @@ var textFieldMappings = {
|
|
2355
2408
|
{ ...label$9, property: '-webkit-text-fill-color' },
|
2356
2409
|
{ ...requiredIndicator$9, property: '-webkit-text-fill-color' },
|
2357
2410
|
],
|
2358
|
-
errorMessageTextColor: { ...errorMessage$
|
2411
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
2359
2412
|
|
2360
2413
|
inputValueTextColor: { ...inputField$6, property: 'color' },
|
2361
2414
|
inputCaretTextColor: { ...input, property: 'color' },
|
@@ -2386,9 +2439,9 @@ var textFieldMappings = {
|
|
2386
2439
|
],
|
2387
2440
|
};
|
2388
2441
|
|
2389
|
-
const componentName$
|
2442
|
+
const componentName$C = getComponentName('email-field');
|
2390
2443
|
|
2391
|
-
const customMixin$
|
2444
|
+
const customMixin$7 = (superclass) =>
|
2392
2445
|
class EmailFieldMixinClass extends superclass {
|
2393
2446
|
init() {
|
2394
2447
|
super.init?.();
|
@@ -2402,7 +2455,7 @@ const EmailFieldClass = compose(
|
|
2402
2455
|
draggableMixin,
|
2403
2456
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2404
2457
|
componentNameValidationMixin,
|
2405
|
-
customMixin$
|
2458
|
+
customMixin$7
|
2406
2459
|
)(
|
2407
2460
|
createProxy({
|
2408
2461
|
slots: ['', 'suffix'],
|
@@ -2421,15 +2474,15 @@ const EmailFieldClass = compose(
|
|
2421
2474
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2422
2475
|
`,
|
2423
2476
|
excludeAttrsSync: ['tabindex'],
|
2424
|
-
componentName: componentName$
|
2477
|
+
componentName: componentName$C,
|
2425
2478
|
})
|
2426
2479
|
);
|
2427
2480
|
|
2428
|
-
customElements.define(componentName$
|
2481
|
+
customElements.define(componentName$C, EmailFieldClass);
|
2429
2482
|
|
2430
|
-
const componentName$
|
2483
|
+
const componentName$B = getComponentName('link');
|
2431
2484
|
|
2432
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2485
|
+
class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
|
2433
2486
|
constructor() {
|
2434
2487
|
super();
|
2435
2488
|
|
@@ -2475,12 +2528,12 @@ const selectors$1 = {
|
|
2475
2528
|
text: { selector: () => TextClass.componentName },
|
2476
2529
|
};
|
2477
2530
|
|
2478
|
-
const { anchor, text: text$2, host: host$
|
2531
|
+
const { anchor, text: text$2, host: host$c, wrapper: wrapper$1 } = selectors$1;
|
2479
2532
|
|
2480
2533
|
const LinkClass = compose(
|
2481
2534
|
createStyleMixin({
|
2482
2535
|
mappings: {
|
2483
|
-
hostWidth: { ...host$
|
2536
|
+
hostWidth: { ...host$c, property: 'width' },
|
2484
2537
|
hostDirection: { ...text$2, property: 'direction' },
|
2485
2538
|
textAlign: wrapper$1,
|
2486
2539
|
textColor: [
|
@@ -2494,7 +2547,7 @@ const LinkClass = compose(
|
|
2494
2547
|
componentNameValidationMixin
|
2495
2548
|
)(RawLink);
|
2496
2549
|
|
2497
|
-
customElements.define(componentName$
|
2550
|
+
customElements.define(componentName$B, LinkClass);
|
2498
2551
|
|
2499
2552
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2500
2553
|
let style;
|
@@ -2546,37 +2599,37 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2546
2599
|
return CssVarImageClass;
|
2547
2600
|
};
|
2548
2601
|
|
2549
|
-
const componentName$
|
2602
|
+
const componentName$A = getComponentName('logo');
|
2550
2603
|
|
2551
2604
|
const LogoClass = createCssVarImageClass({
|
2552
|
-
componentName: componentName$
|
2605
|
+
componentName: componentName$A,
|
2553
2606
|
varName: 'url',
|
2554
2607
|
fallbackVarName: 'fallbackUrl',
|
2555
2608
|
});
|
2556
2609
|
|
2557
|
-
customElements.define(componentName$
|
2610
|
+
customElements.define(componentName$A, LogoClass);
|
2558
2611
|
|
2559
|
-
const componentName$
|
2612
|
+
const componentName$z = getComponentName('totp-image');
|
2560
2613
|
|
2561
2614
|
const TotpImageClass = createCssVarImageClass({
|
2562
|
-
componentName: componentName$
|
2615
|
+
componentName: componentName$z,
|
2563
2616
|
varName: 'url',
|
2564
2617
|
fallbackVarName: 'fallbackUrl',
|
2565
2618
|
});
|
2566
2619
|
|
2567
|
-
customElements.define(componentName$
|
2620
|
+
customElements.define(componentName$z, TotpImageClass);
|
2568
2621
|
|
2569
|
-
const componentName$
|
2622
|
+
const componentName$y = getComponentName('notp-image');
|
2570
2623
|
|
2571
2624
|
const NotpImageClass = createCssVarImageClass({
|
2572
|
-
componentName: componentName$
|
2625
|
+
componentName: componentName$y,
|
2573
2626
|
varName: 'url',
|
2574
2627
|
fallbackVarName: 'fallbackUrl',
|
2575
2628
|
});
|
2576
2629
|
|
2577
|
-
customElements.define(componentName$
|
2630
|
+
customElements.define(componentName$y, NotpImageClass);
|
2578
2631
|
|
2579
|
-
const componentName$
|
2632
|
+
const componentName$x = getComponentName('number-field');
|
2580
2633
|
|
2581
2634
|
const NumberFieldClass = compose(
|
2582
2635
|
createStyleMixin({
|
@@ -2602,11 +2655,11 @@ const NumberFieldClass = compose(
|
|
2602
2655
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2603
2656
|
`,
|
2604
2657
|
excludeAttrsSync: ['tabindex'],
|
2605
|
-
componentName: componentName$
|
2658
|
+
componentName: componentName$x,
|
2606
2659
|
})
|
2607
2660
|
);
|
2608
2661
|
|
2609
|
-
customElements.define(componentName$
|
2662
|
+
customElements.define(componentName$x, NumberFieldClass);
|
2610
2663
|
|
2611
2664
|
const focusElement = (ele) => {
|
2612
2665
|
ele?.focus();
|
@@ -2624,17 +2677,17 @@ const getSanitizedCharacters = (str) => {
|
|
2624
2677
|
|
2625
2678
|
/* eslint-disable no-param-reassign */
|
2626
2679
|
|
2627
|
-
const componentName$
|
2680
|
+
const componentName$w = getComponentName('passcode-internal');
|
2628
2681
|
|
2629
2682
|
const observedAttributes$5 = ['digits', 'loading'];
|
2630
2683
|
|
2631
2684
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2632
2685
|
|
2633
|
-
const BaseInputClass$
|
2686
|
+
const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
|
2634
2687
|
|
2635
|
-
class PasscodeInternal extends BaseInputClass$
|
2688
|
+
class PasscodeInternal extends BaseInputClass$6 {
|
2636
2689
|
static get observedAttributes() {
|
2637
|
-
return observedAttributes$5.concat(BaseInputClass$
|
2690
|
+
return observedAttributes$5.concat(BaseInputClass$6.observedAttributes || []);
|
2638
2691
|
}
|
2639
2692
|
|
2640
2693
|
constructor() {
|
@@ -2856,11 +2909,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2856
2909
|
}
|
2857
2910
|
}
|
2858
2911
|
|
2859
|
-
const componentName$
|
2912
|
+
const componentName$v = getComponentName('text-field');
|
2860
2913
|
|
2861
2914
|
const observedAttrs = ['type'];
|
2862
2915
|
|
2863
|
-
const customMixin$
|
2916
|
+
const customMixin$6 = (superclass) =>
|
2864
2917
|
class TextFieldClass extends superclass {
|
2865
2918
|
static get observedAttributes() {
|
2866
2919
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2887,7 +2940,7 @@ const TextFieldClass = compose(
|
|
2887
2940
|
draggableMixin,
|
2888
2941
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2889
2942
|
componentNameValidationMixin,
|
2890
|
-
customMixin$
|
2943
|
+
customMixin$6
|
2891
2944
|
)(
|
2892
2945
|
createProxy({
|
2893
2946
|
slots: ['prefix', 'suffix'],
|
@@ -2906,15 +2959,15 @@ const TextFieldClass = compose(
|
|
2906
2959
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2907
2960
|
`,
|
2908
2961
|
excludeAttrsSync: ['tabindex'],
|
2909
|
-
componentName: componentName$
|
2962
|
+
componentName: componentName$v,
|
2910
2963
|
})
|
2911
2964
|
);
|
2912
2965
|
|
2913
|
-
const componentName$
|
2966
|
+
const componentName$u = getComponentName('passcode');
|
2914
2967
|
|
2915
2968
|
const observedAttributes$4 = ['digits'];
|
2916
2969
|
|
2917
|
-
const customMixin$
|
2970
|
+
const customMixin$5 = (superclass) =>
|
2918
2971
|
class PasscodeMixinClass extends superclass {
|
2919
2972
|
static get observedAttributes() {
|
2920
2973
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2929,17 +2982,17 @@ const customMixin$4 = (superclass) =>
|
|
2929
2982
|
const template = document.createElement('template');
|
2930
2983
|
|
2931
2984
|
template.innerHTML = `
|
2932
|
-
<${componentName$
|
2985
|
+
<${componentName$w}
|
2933
2986
|
bordered="true"
|
2934
2987
|
name="code"
|
2935
2988
|
tabindex="-1"
|
2936
2989
|
slot="input"
|
2937
|
-
><slot></slot></${componentName$
|
2990
|
+
><slot></slot></${componentName$w}>
|
2938
2991
|
`;
|
2939
2992
|
|
2940
2993
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2941
2994
|
|
2942
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2995
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$w);
|
2943
2996
|
|
2944
2997
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
2945
2998
|
}
|
@@ -2954,13 +3007,13 @@ const customMixin$4 = (superclass) =>
|
|
2954
3007
|
};
|
2955
3008
|
|
2956
3009
|
const {
|
2957
|
-
host: host$
|
3010
|
+
host: host$b,
|
2958
3011
|
digitField,
|
2959
3012
|
label: label$8,
|
2960
3013
|
requiredIndicator: requiredIndicator$8,
|
2961
3014
|
internalWrapper: internalWrapper$1,
|
2962
3015
|
focusedDigitField,
|
2963
|
-
errorMessage: errorMessage$
|
3016
|
+
errorMessage: errorMessage$9,
|
2964
3017
|
} = {
|
2965
3018
|
host: { selector: () => ':host' },
|
2966
3019
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
@@ -2977,16 +3030,16 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
2977
3030
|
const PasscodeClass = compose(
|
2978
3031
|
createStyleMixin({
|
2979
3032
|
mappings: {
|
2980
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
3033
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$b],
|
2981
3034
|
hostWidth: { property: 'width' },
|
2982
|
-
hostDirection: { ...host$
|
2983
|
-
fontFamily: [host$
|
3035
|
+
hostDirection: { ...host$b, property: 'direction' },
|
3036
|
+
fontFamily: [host$b, { ...label$8 }],
|
2984
3037
|
labelTextColor: [
|
2985
3038
|
{ ...label$8, property: 'color' },
|
2986
3039
|
{ ...requiredIndicator$8, property: 'color' },
|
2987
3040
|
],
|
2988
3041
|
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
2989
|
-
errorMessageTextColor: { ...errorMessage$
|
3042
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
2990
3043
|
digitValueTextColor: {
|
2991
3044
|
selector: TextFieldClass.componentName,
|
2992
3045
|
property: textVars$2.inputValueTextColor,
|
@@ -3010,7 +3063,7 @@ const PasscodeClass = compose(
|
|
3010
3063
|
draggableMixin,
|
3011
3064
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3012
3065
|
componentNameValidationMixin,
|
3013
|
-
customMixin$
|
3066
|
+
customMixin$5
|
3014
3067
|
)(
|
3015
3068
|
createProxy({
|
3016
3069
|
slots: [],
|
@@ -3086,15 +3139,15 @@ const PasscodeClass = compose(
|
|
3086
3139
|
${resetInputCursor('vaadin-text-field')}
|
3087
3140
|
`,
|
3088
3141
|
excludeAttrsSync: ['tabindex'],
|
3089
|
-
componentName: componentName$
|
3142
|
+
componentName: componentName$u,
|
3090
3143
|
})
|
3091
3144
|
);
|
3092
3145
|
|
3093
|
-
customElements.define(componentName$
|
3146
|
+
customElements.define(componentName$v, TextFieldClass);
|
3094
3147
|
|
3095
|
-
customElements.define(componentName$
|
3148
|
+
customElements.define(componentName$w, PasscodeInternal);
|
3096
3149
|
|
3097
|
-
customElements.define(componentName$
|
3150
|
+
customElements.define(componentName$u, PasscodeClass);
|
3098
3151
|
|
3099
3152
|
const passwordDraggableMixin = (superclass) =>
|
3100
3153
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3130,10 +3183,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3130
3183
|
}
|
3131
3184
|
};
|
3132
3185
|
|
3133
|
-
const componentName$
|
3186
|
+
const componentName$t = getComponentName('password');
|
3134
3187
|
|
3135
3188
|
const {
|
3136
|
-
host: host$
|
3189
|
+
host: host$a,
|
3137
3190
|
inputField: inputField$5,
|
3138
3191
|
inputElement: inputElement$2,
|
3139
3192
|
inputElementPlaceholder,
|
@@ -3141,8 +3194,8 @@ const {
|
|
3141
3194
|
revealButtonIcon,
|
3142
3195
|
label: label$7,
|
3143
3196
|
requiredIndicator: requiredIndicator$7,
|
3144
|
-
errorMessage: errorMessage$
|
3145
|
-
helperText: helperText$
|
3197
|
+
errorMessage: errorMessage$8,
|
3198
|
+
helperText: helperText$7,
|
3146
3199
|
} = {
|
3147
3200
|
host: { selector: () => ':host' },
|
3148
3201
|
inputField: { selector: '::part(input-field)' },
|
@@ -3159,11 +3212,11 @@ const {
|
|
3159
3212
|
const PasswordClass = compose(
|
3160
3213
|
createStyleMixin({
|
3161
3214
|
mappings: {
|
3162
|
-
hostWidth: { ...host$
|
3163
|
-
hostMinWidth: { ...host$
|
3164
|
-
hostDirection: { ...host$
|
3165
|
-
fontSize: [{}, host$
|
3166
|
-
fontFamily: [label$7, inputField$5, errorMessage$
|
3215
|
+
hostWidth: { ...host$a, property: 'width' },
|
3216
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
3217
|
+
hostDirection: { ...host$a, property: 'direction' },
|
3218
|
+
fontSize: [{}, host$a],
|
3219
|
+
fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
|
3167
3220
|
inputHeight: { ...inputField$5, property: 'height' },
|
3168
3221
|
inputHorizontalPadding: [
|
3169
3222
|
{ ...inputElement$2, property: 'padding-left' },
|
@@ -3186,7 +3239,7 @@ const PasswordClass = compose(
|
|
3186
3239
|
{ ...requiredIndicator$7, property: 'color' },
|
3187
3240
|
],
|
3188
3241
|
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
3189
|
-
errorMessageTextColor: { ...errorMessage$
|
3242
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
3190
3243
|
|
3191
3244
|
inputValueTextColor: { ...inputElement$2, property: 'color' },
|
3192
3245
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
@@ -3259,23 +3312,23 @@ const PasswordClass = compose(
|
|
3259
3312
|
}
|
3260
3313
|
`,
|
3261
3314
|
excludeAttrsSync: ['tabindex'],
|
3262
|
-
componentName: componentName$
|
3315
|
+
componentName: componentName$t,
|
3263
3316
|
})
|
3264
3317
|
);
|
3265
3318
|
|
3266
|
-
customElements.define(componentName$
|
3319
|
+
customElements.define(componentName$t, PasswordClass);
|
3267
3320
|
|
3268
|
-
const componentName$
|
3321
|
+
const componentName$s = getComponentName('text-area');
|
3269
3322
|
|
3270
3323
|
const {
|
3271
|
-
host: host$
|
3324
|
+
host: host$9,
|
3272
3325
|
label: label$6,
|
3273
3326
|
placeholder: placeholder$2,
|
3274
3327
|
inputField: inputField$4,
|
3275
3328
|
textArea: textArea$2,
|
3276
3329
|
requiredIndicator: requiredIndicator$6,
|
3277
|
-
helperText: helperText$
|
3278
|
-
errorMessage: errorMessage$
|
3330
|
+
helperText: helperText$6,
|
3331
|
+
errorMessage: errorMessage$7,
|
3279
3332
|
} = {
|
3280
3333
|
host: { selector: () => ':host' },
|
3281
3334
|
label: { selector: '::part(label)' },
|
@@ -3290,17 +3343,17 @@ const {
|
|
3290
3343
|
const TextAreaClass = compose(
|
3291
3344
|
createStyleMixin({
|
3292
3345
|
mappings: {
|
3293
|
-
hostWidth: { ...host$
|
3294
|
-
hostMinWidth: { ...host$
|
3295
|
-
hostDirection: { ...host$
|
3296
|
-
fontSize: [host$
|
3297
|
-
fontFamily: [label$6, inputField$4, helperText$
|
3346
|
+
hostWidth: { ...host$9, property: 'width' },
|
3347
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
3348
|
+
hostDirection: { ...host$9, property: 'direction' },
|
3349
|
+
fontSize: [host$9, textArea$2],
|
3350
|
+
fontFamily: [label$6, inputField$4, helperText$6, errorMessage$7],
|
3298
3351
|
labelTextColor: [
|
3299
3352
|
{ ...label$6, property: 'color' },
|
3300
3353
|
{ ...requiredIndicator$6, property: 'color' },
|
3301
3354
|
],
|
3302
3355
|
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
3303
|
-
errorMessageTextColor: { ...errorMessage$
|
3356
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
3304
3357
|
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
3305
3358
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
3306
3359
|
inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
|
@@ -3341,17 +3394,17 @@ const TextAreaClass = compose(
|
|
3341
3394
|
${resetInputCursor('vaadin-text-area')}
|
3342
3395
|
`,
|
3343
3396
|
excludeAttrsSync: ['tabindex'],
|
3344
|
-
componentName: componentName$
|
3397
|
+
componentName: componentName$s,
|
3345
3398
|
})
|
3346
3399
|
);
|
3347
3400
|
|
3348
|
-
customElements.define(componentName$
|
3401
|
+
customElements.define(componentName$s, TextAreaClass);
|
3349
3402
|
|
3350
3403
|
const observedAttributes$3 = ['src', 'alt'];
|
3351
3404
|
|
3352
|
-
const componentName$
|
3405
|
+
const componentName$r = getComponentName('image');
|
3353
3406
|
|
3354
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3407
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
|
3355
3408
|
class RawImage extends BaseClass$1 {
|
3356
3409
|
static get observedAttributes() {
|
3357
3410
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3391,9 +3444,9 @@ const ImageClass = compose(
|
|
3391
3444
|
draggableMixin
|
3392
3445
|
)(RawImage);
|
3393
3446
|
|
3394
|
-
customElements.define(componentName$
|
3447
|
+
customElements.define(componentName$r, ImageClass);
|
3395
3448
|
|
3396
|
-
const componentName$
|
3449
|
+
const componentName$q = getComponentName('combo-box');
|
3397
3450
|
|
3398
3451
|
const ComboBoxMixin = (superclass) =>
|
3399
3452
|
class ComboBoxMixinClass extends superclass {
|
@@ -3591,6 +3644,10 @@ const ComboBoxMixin = (superclass) =>
|
|
3591
3644
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
3592
3645
|
|
3593
3646
|
this.setDefaultValue();
|
3647
|
+
|
3648
|
+
this.baseElement.addEventListener('selected-item-changed', () => {
|
3649
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
3650
|
+
});
|
3594
3651
|
}
|
3595
3652
|
|
3596
3653
|
setDefaultValue() {
|
@@ -3615,7 +3672,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3615
3672
|
};
|
3616
3673
|
|
3617
3674
|
const {
|
3618
|
-
host: host$
|
3675
|
+
host: host$8,
|
3619
3676
|
inputField: inputField$3,
|
3620
3677
|
inputElement: inputElement$1,
|
3621
3678
|
placeholder: placeholder$1,
|
@@ -3623,8 +3680,8 @@ const {
|
|
3623
3680
|
clearButton: clearButton$1,
|
3624
3681
|
label: label$5,
|
3625
3682
|
requiredIndicator: requiredIndicator$5,
|
3626
|
-
helperText: helperText$
|
3627
|
-
errorMessage: errorMessage$
|
3683
|
+
helperText: helperText$5,
|
3684
|
+
errorMessage: errorMessage$6,
|
3628
3685
|
} = {
|
3629
3686
|
host: { selector: () => ':host' },
|
3630
3687
|
inputField: { selector: '::part(input-field)' },
|
@@ -3641,16 +3698,16 @@ const {
|
|
3641
3698
|
const ComboBoxClass = compose(
|
3642
3699
|
createStyleMixin({
|
3643
3700
|
mappings: {
|
3644
|
-
hostWidth: { ...host$
|
3645
|
-
hostDirection: { ...host$
|
3701
|
+
hostWidth: { ...host$8, property: 'width' },
|
3702
|
+
hostDirection: { ...host$8, property: 'direction' },
|
3646
3703
|
// we apply font-size also on the host so we can set its width with em
|
3647
|
-
fontSize: [{}, host$
|
3648
|
-
fontFamily: [label$5, placeholder$1, inputField$3, helperText$
|
3704
|
+
fontSize: [{}, host$8],
|
3705
|
+
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
3649
3706
|
labelTextColor: [
|
3650
3707
|
{ ...label$5, property: 'color' },
|
3651
3708
|
{ ...requiredIndicator$5, property: 'color' },
|
3652
3709
|
],
|
3653
|
-
errorMessageTextColor: { ...errorMessage$
|
3710
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
3654
3711
|
inputHeight: { ...inputField$3, property: 'height' },
|
3655
3712
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
3656
3713
|
inputBorderColor: { ...inputField$3, property: 'border-color' },
|
@@ -3772,12 +3829,12 @@ const ComboBoxClass = compose(
|
|
3772
3829
|
// and reset items to an empty array, and opening the list box with no items
|
3773
3830
|
// to display.
|
3774
3831
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3775
|
-
componentName: componentName$
|
3832
|
+
componentName: componentName$q,
|
3776
3833
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3777
3834
|
})
|
3778
3835
|
);
|
3779
3836
|
|
3780
|
-
customElements.define(componentName$
|
3837
|
+
customElements.define(componentName$q, ComboBoxClass);
|
3781
3838
|
|
3782
3839
|
var CountryCodes = [
|
3783
3840
|
{
|
@@ -5017,7 +5074,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
5017
5074
|
</div>
|
5018
5075
|
`;
|
5019
5076
|
|
5020
|
-
const componentName$
|
5077
|
+
const componentName$p = getComponentName('phone-field-internal');
|
5021
5078
|
|
5022
5079
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5023
5080
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -5029,11 +5086,11 @@ const mapAttrs$1 = {
|
|
5029
5086
|
|
5030
5087
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
5031
5088
|
|
5032
|
-
const BaseInputClass$
|
5089
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
5033
5090
|
|
5034
|
-
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$
|
5091
|
+
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$5 {
|
5035
5092
|
static get observedAttributes() {
|
5036
|
-
return [].concat(BaseInputClass$
|
5093
|
+
return [].concat(BaseInputClass$5.observedAttributes || [], inputRelatedAttrs$1);
|
5037
5094
|
}
|
5038
5095
|
|
5039
5096
|
constructor() {
|
@@ -5201,14 +5258,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
5201
5258
|
}
|
5202
5259
|
};
|
5203
5260
|
|
5204
|
-
customElements.define(componentName$
|
5261
|
+
customElements.define(componentName$p, PhoneFieldInternal$1);
|
5205
5262
|
|
5206
5263
|
const textVars$1 = TextFieldClass.cssVarList;
|
5207
5264
|
const comboVars = ComboBoxClass.cssVarList;
|
5208
5265
|
|
5209
|
-
const componentName$
|
5266
|
+
const componentName$o = getComponentName('phone-field');
|
5210
5267
|
|
5211
|
-
const customMixin$
|
5268
|
+
const customMixin$4 = (superclass) =>
|
5212
5269
|
class PhoneFieldMixinClass extends superclass {
|
5213
5270
|
static get CountryCodes() {
|
5214
5271
|
return CountryCodes;
|
@@ -5220,15 +5277,15 @@ const customMixin$3 = (superclass) =>
|
|
5220
5277
|
const template = document.createElement('template');
|
5221
5278
|
|
5222
5279
|
template.innerHTML = `
|
5223
|
-
<${componentName$
|
5280
|
+
<${componentName$p}
|
5224
5281
|
tabindex="-1"
|
5225
5282
|
slot="input"
|
5226
|
-
></${componentName$
|
5283
|
+
></${componentName$p}>
|
5227
5284
|
`;
|
5228
5285
|
|
5229
5286
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5230
5287
|
|
5231
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5288
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
5232
5289
|
|
5233
5290
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5234
5291
|
includeAttrs: [
|
@@ -5248,15 +5305,15 @@ const customMixin$3 = (superclass) =>
|
|
5248
5305
|
};
|
5249
5306
|
|
5250
5307
|
const {
|
5251
|
-
host: host$
|
5308
|
+
host: host$7,
|
5252
5309
|
label: label$4,
|
5253
5310
|
requiredIndicator: requiredIndicator$4,
|
5254
5311
|
inputField: inputField$2,
|
5255
5312
|
countryCodeInput,
|
5256
5313
|
phoneInput: phoneInput$1,
|
5257
|
-
separator,
|
5258
|
-
errorMessage: errorMessage$
|
5259
|
-
helperText: helperText$
|
5314
|
+
separator: separator$1,
|
5315
|
+
errorMessage: errorMessage$5,
|
5316
|
+
helperText: helperText$4,
|
5260
5317
|
} = {
|
5261
5318
|
host: { selector: () => ':host' },
|
5262
5319
|
label: { selector: '::part(label)' },
|
@@ -5273,7 +5330,7 @@ const PhoneFieldClass = compose(
|
|
5273
5330
|
createStyleMixin({
|
5274
5331
|
mappings: {
|
5275
5332
|
fontSize: [
|
5276
|
-
host$
|
5333
|
+
host$7,
|
5277
5334
|
inputField$2,
|
5278
5335
|
{
|
5279
5336
|
selector: TextFieldClass.componentName,
|
@@ -5286,31 +5343,31 @@ const PhoneFieldClass = compose(
|
|
5286
5343
|
],
|
5287
5344
|
fontFamily: [
|
5288
5345
|
label$4,
|
5289
|
-
errorMessage$
|
5290
|
-
helperText$
|
5346
|
+
errorMessage$5,
|
5347
|
+
helperText$4,
|
5291
5348
|
{
|
5292
5349
|
...countryCodeInput,
|
5293
5350
|
property: ComboBoxClass.cssVarList.overlay.fontFamily,
|
5294
5351
|
},
|
5295
5352
|
],
|
5296
5353
|
hostWidth: [
|
5297
|
-
{ ...host$
|
5354
|
+
{ ...host$7, property: 'width' },
|
5298
5355
|
{ ...phoneInput$1, property: 'width' },
|
5299
5356
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5300
5357
|
],
|
5301
|
-
hostDirection: { ...host$
|
5358
|
+
hostDirection: { ...host$7, property: 'direction' },
|
5302
5359
|
|
5303
5360
|
inputBorderStyle: [
|
5304
5361
|
{ ...inputField$2, property: 'border-style' },
|
5305
|
-
{ ...separator, property: 'border-left-style' },
|
5362
|
+
{ ...separator$1, property: 'border-left-style' },
|
5306
5363
|
],
|
5307
5364
|
inputBorderWidth: [
|
5308
5365
|
{ ...inputField$2, property: 'border-width' },
|
5309
|
-
{ ...separator, property: 'border-left-width' },
|
5366
|
+
{ ...separator$1, property: 'border-left-width' },
|
5310
5367
|
],
|
5311
5368
|
inputBorderColor: [
|
5312
5369
|
{ ...inputField$2, property: 'border-color' },
|
5313
|
-
{ ...separator, property: 'border-left-color' },
|
5370
|
+
{ ...separator$1, property: 'border-left-color' },
|
5314
5371
|
],
|
5315
5372
|
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
5316
5373
|
|
@@ -5326,7 +5383,7 @@ const PhoneFieldClass = compose(
|
|
5326
5383
|
{ ...requiredIndicator$4, property: 'color' },
|
5327
5384
|
],
|
5328
5385
|
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
5329
|
-
errorMessageTextColor: { ...errorMessage$
|
5386
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
5330
5387
|
|
5331
5388
|
inputValueTextColor: [
|
5332
5389
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
@@ -5348,7 +5405,7 @@ const PhoneFieldClass = compose(
|
|
5348
5405
|
}),
|
5349
5406
|
draggableMixin,
|
5350
5407
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5351
|
-
customMixin$
|
5408
|
+
customMixin$4
|
5352
5409
|
)(
|
5353
5410
|
createProxy({
|
5354
5411
|
slots: [],
|
@@ -5424,17 +5481,17 @@ const PhoneFieldClass = compose(
|
|
5424
5481
|
${resetInputLabelPosition('vaadin-text-field')}
|
5425
5482
|
`,
|
5426
5483
|
excludeAttrsSync: ['tabindex'],
|
5427
|
-
componentName: componentName$
|
5484
|
+
componentName: componentName$o,
|
5428
5485
|
})
|
5429
5486
|
);
|
5430
5487
|
|
5431
|
-
customElements.define(componentName$
|
5488
|
+
customElements.define(componentName$o, PhoneFieldClass);
|
5432
5489
|
|
5433
5490
|
const getCountryByCodeId = (countryCode) => {
|
5434
5491
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5435
5492
|
};
|
5436
5493
|
|
5437
|
-
const componentName$
|
5494
|
+
const componentName$n = getComponentName('phone-field-internal-input-box');
|
5438
5495
|
|
5439
5496
|
const observedAttributes$2 = [
|
5440
5497
|
'disabled',
|
@@ -5448,11 +5505,11 @@ const mapAttrs = {
|
|
5448
5505
|
'phone-input-placeholder': 'placeholder',
|
5449
5506
|
};
|
5450
5507
|
|
5451
|
-
const BaseInputClass$
|
5508
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
5452
5509
|
|
5453
|
-
class PhoneFieldInternal extends BaseInputClass$
|
5510
|
+
class PhoneFieldInternal extends BaseInputClass$4 {
|
5454
5511
|
static get observedAttributes() {
|
5455
|
-
return [].concat(BaseInputClass$
|
5512
|
+
return [].concat(BaseInputClass$4.observedAttributes || [], observedAttributes$2);
|
5456
5513
|
}
|
5457
5514
|
|
5458
5515
|
constructor() {
|
@@ -5587,13 +5644,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5587
5644
|
}
|
5588
5645
|
}
|
5589
5646
|
|
5590
|
-
customElements.define(componentName$
|
5647
|
+
customElements.define(componentName$n, PhoneFieldInternal);
|
5591
5648
|
|
5592
5649
|
const textVars = TextFieldClass.cssVarList;
|
5593
5650
|
|
5594
|
-
const componentName$
|
5651
|
+
const componentName$m = getComponentName('phone-input-box-field');
|
5595
5652
|
|
5596
|
-
const customMixin$
|
5653
|
+
const customMixin$3 = (superclass) =>
|
5597
5654
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5598
5655
|
static get CountryCodes() {
|
5599
5656
|
return CountryCodes;
|
@@ -5605,15 +5662,15 @@ const customMixin$2 = (superclass) =>
|
|
5605
5662
|
const template = document.createElement('template');
|
5606
5663
|
|
5607
5664
|
template.innerHTML = `
|
5608
|
-
<${componentName$
|
5665
|
+
<${componentName$n}
|
5609
5666
|
tabindex="-1"
|
5610
5667
|
slot="input"
|
5611
|
-
></${componentName$
|
5668
|
+
></${componentName$n}>
|
5612
5669
|
`;
|
5613
5670
|
|
5614
5671
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5615
5672
|
|
5616
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5673
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
5617
5674
|
|
5618
5675
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5619
5676
|
includeAttrs: [
|
@@ -5630,7 +5687,7 @@ const customMixin$2 = (superclass) =>
|
|
5630
5687
|
}
|
5631
5688
|
};
|
5632
5689
|
|
5633
|
-
const { host: host$
|
5690
|
+
const { host: host$6, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
5634
5691
|
host: { selector: () => ':host' },
|
5635
5692
|
label: { selector: '::part(label)' },
|
5636
5693
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5644,17 +5701,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5644
5701
|
createStyleMixin({
|
5645
5702
|
mappings: {
|
5646
5703
|
fontSize: [
|
5647
|
-
host$
|
5704
|
+
host$6,
|
5648
5705
|
inputField$1,
|
5649
5706
|
{
|
5650
5707
|
selector: TextFieldClass.componentName,
|
5651
5708
|
property: TextFieldClass.cssVarList.fontSize,
|
5652
5709
|
},
|
5653
5710
|
],
|
5654
|
-
fontFamily: [label$3, errorMessage$
|
5655
|
-
hostWidth: { ...host$
|
5656
|
-
hostMinWidth: { ...host$
|
5657
|
-
hostDirection: { ...host$
|
5711
|
+
fontFamily: [label$3, errorMessage$4, helperText$3],
|
5712
|
+
hostWidth: { ...host$6, property: 'width' },
|
5713
|
+
hostMinWidth: { ...host$6, property: 'min-width' },
|
5714
|
+
hostDirection: { ...host$6, property: 'direction' },
|
5658
5715
|
|
5659
5716
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
5660
5717
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
@@ -5666,7 +5723,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5666
5723
|
{ ...requiredIndicator$3, property: 'color' },
|
5667
5724
|
],
|
5668
5725
|
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
5669
|
-
errorMessageTextColor: { ...errorMessage$
|
5726
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
5670
5727
|
|
5671
5728
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
5672
5729
|
|
@@ -5680,7 +5737,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5680
5737
|
}),
|
5681
5738
|
draggableMixin,
|
5682
5739
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5683
|
-
customMixin$
|
5740
|
+
customMixin$3
|
5684
5741
|
)(
|
5685
5742
|
createProxy({
|
5686
5743
|
slots: [],
|
@@ -5746,17 +5803,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5746
5803
|
${resetInputLabelPosition('vaadin-text-field')}
|
5747
5804
|
`,
|
5748
5805
|
excludeAttrsSync: ['tabindex'],
|
5749
|
-
componentName: componentName$
|
5806
|
+
componentName: componentName$m,
|
5750
5807
|
})
|
5751
5808
|
);
|
5752
5809
|
|
5753
|
-
customElements.define(componentName$
|
5810
|
+
customElements.define(componentName$m, PhoneFieldInputBoxClass);
|
5754
5811
|
|
5755
|
-
const componentName$
|
5812
|
+
const componentName$l = getComponentName('new-password-internal');
|
5756
5813
|
|
5757
|
-
const componentName$
|
5814
|
+
const componentName$k = getComponentName('new-password');
|
5758
5815
|
|
5759
|
-
const customMixin$
|
5816
|
+
const customMixin$2 = (superclass) =>
|
5760
5817
|
class NewPasswordMixinClass extends superclass {
|
5761
5818
|
init() {
|
5762
5819
|
super.init?.();
|
@@ -5764,16 +5821,16 @@ const customMixin$1 = (superclass) =>
|
|
5764
5821
|
const template = document.createElement('template');
|
5765
5822
|
|
5766
5823
|
template.innerHTML = `
|
5767
|
-
<${componentName$
|
5824
|
+
<${componentName$l}
|
5768
5825
|
name="new-password"
|
5769
5826
|
tabindex="-1"
|
5770
5827
|
slot="input"
|
5771
|
-
></${componentName$
|
5828
|
+
></${componentName$l}>
|
5772
5829
|
`;
|
5773
5830
|
|
5774
5831
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5775
5832
|
|
5776
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5833
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
5777
5834
|
|
5778
5835
|
forwardAttrs(this, this.inputElement, {
|
5779
5836
|
includeAttrs: [
|
@@ -5794,7 +5851,7 @@ const customMixin$1 = (superclass) =>
|
|
5794
5851
|
}
|
5795
5852
|
};
|
5796
5853
|
|
5797
|
-
const { host: host$
|
5854
|
+
const { host: host$5, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
5798
5855
|
host: { selector: () => ':host' },
|
5799
5856
|
label: { selector: '::part(label)' },
|
5800
5857
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5807,28 +5864,28 @@ const NewPasswordClass = compose(
|
|
5807
5864
|
createStyleMixin({
|
5808
5865
|
mappings: {
|
5809
5866
|
fontSize: [
|
5810
|
-
host$
|
5867
|
+
host$5,
|
5811
5868
|
{},
|
5812
5869
|
{
|
5813
5870
|
selector: PasswordClass.componentName,
|
5814
5871
|
property: PasswordClass.cssVarList.fontSize,
|
5815
5872
|
},
|
5816
5873
|
],
|
5817
|
-
fontFamily: [label$2, errorMessage$
|
5818
|
-
errorMessageTextColor: { ...errorMessage$
|
5819
|
-
hostWidth: { ...host$
|
5820
|
-
hostMinWidth: { ...host$
|
5874
|
+
fontFamily: [label$2, errorMessage$3, helperText$2],
|
5875
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
5876
|
+
hostWidth: { ...host$5, property: 'width' },
|
5877
|
+
hostMinWidth: { ...host$5, property: 'min-width' },
|
5821
5878
|
hostDirection: [
|
5822
|
-
{ ...host$
|
5879
|
+
{ ...host$5, property: 'direction' },
|
5823
5880
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
5824
5881
|
],
|
5825
|
-
inputsRequiredIndicator: { ...host$
|
5882
|
+
inputsRequiredIndicator: { ...host$5, property: 'content' },
|
5826
5883
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5827
5884
|
},
|
5828
5885
|
}),
|
5829
5886
|
draggableMixin,
|
5830
5887
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5831
|
-
customMixin$
|
5888
|
+
customMixin$2
|
5832
5889
|
)(
|
5833
5890
|
createProxy({
|
5834
5891
|
slots: [],
|
@@ -5880,7 +5937,7 @@ const NewPasswordClass = compose(
|
|
5880
5937
|
}
|
5881
5938
|
`,
|
5882
5939
|
excludeAttrsSync: ['tabindex'],
|
5883
|
-
componentName: componentName$
|
5940
|
+
componentName: componentName$k,
|
5884
5941
|
})
|
5885
5942
|
);
|
5886
5943
|
|
@@ -5905,11 +5962,11 @@ const commonAttrs = [
|
|
5905
5962
|
|
5906
5963
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5907
5964
|
|
5908
|
-
const BaseInputClass$
|
5965
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
|
5909
5966
|
|
5910
|
-
class NewPasswordInternal extends BaseInputClass$
|
5967
|
+
class NewPasswordInternal extends BaseInputClass$3 {
|
5911
5968
|
static get observedAttributes() {
|
5912
|
-
return ['has-confirm'].concat(BaseInputClass$
|
5969
|
+
return ['has-confirm'].concat(BaseInputClass$3.observedAttributes || [], inputRelatedAttrs);
|
5913
5970
|
}
|
5914
5971
|
|
5915
5972
|
constructor() {
|
@@ -6070,16 +6127,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
6070
6127
|
}
|
6071
6128
|
}
|
6072
6129
|
|
6073
|
-
customElements.define(componentName$
|
6130
|
+
customElements.define(componentName$l, NewPasswordInternal);
|
6074
6131
|
|
6075
|
-
customElements.define(componentName$
|
6132
|
+
customElements.define(componentName$k, NewPasswordClass);
|
6076
6133
|
|
6077
|
-
const componentName$
|
6134
|
+
const componentName$j = getComponentName('recaptcha');
|
6078
6135
|
|
6079
6136
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
6080
6137
|
|
6081
6138
|
const BaseClass = createBaseClass({
|
6082
|
-
componentName: componentName$
|
6139
|
+
componentName: componentName$j,
|
6083
6140
|
baseSelector: ':host > div',
|
6084
6141
|
});
|
6085
6142
|
class RawRecaptcha extends BaseClass {
|
@@ -6231,7 +6288,7 @@ class RawRecaptcha extends BaseClass {
|
|
6231
6288
|
|
6232
6289
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6233
6290
|
|
6234
|
-
customElements.define(componentName$
|
6291
|
+
customElements.define(componentName$j, RecaptchaClass);
|
6235
6292
|
|
6236
6293
|
const getFileBase64 = (fileObj) => {
|
6237
6294
|
return new Promise((resolve) => {
|
@@ -6245,7 +6302,7 @@ const getFilename = (fileObj) => {
|
|
6245
6302
|
return fileObj.name.replace(/^.*\\/, '');
|
6246
6303
|
};
|
6247
6304
|
|
6248
|
-
const componentName$
|
6305
|
+
const componentName$i = getComponentName('upload-file');
|
6249
6306
|
|
6250
6307
|
const observedAttributes = [
|
6251
6308
|
'title',
|
@@ -6260,11 +6317,11 @@ const observedAttributes = [
|
|
6260
6317
|
'icon',
|
6261
6318
|
];
|
6262
6319
|
|
6263
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6320
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
|
6264
6321
|
|
6265
|
-
class RawUploadFile extends BaseInputClass {
|
6322
|
+
class RawUploadFile extends BaseInputClass$2 {
|
6266
6323
|
static get observedAttributes() {
|
6267
|
-
return observedAttributes.concat(BaseInputClass.observedAttributes || []);
|
6324
|
+
return observedAttributes.concat(BaseInputClass$2.observedAttributes || []);
|
6268
6325
|
}
|
6269
6326
|
|
6270
6327
|
constructor() {
|
@@ -6432,7 +6489,7 @@ class RawUploadFile extends BaseInputClass {
|
|
6432
6489
|
}
|
6433
6490
|
|
6434
6491
|
const buttonVars = ButtonClass.cssVarList;
|
6435
|
-
const { host: host$
|
6492
|
+
const { host: host$4, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
6436
6493
|
host: { selector: () => ':host' },
|
6437
6494
|
wrapper: { selector: () => ':host > div' },
|
6438
6495
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6451,11 +6508,11 @@ const UploadFileClass = compose(
|
|
6451
6508
|
borderWidth: {},
|
6452
6509
|
borderStyle: {},
|
6453
6510
|
borderRadius: {},
|
6454
|
-
hostHeight: { ...host$
|
6455
|
-
hostWidth: { ...host$
|
6511
|
+
hostHeight: { ...host$4, property: 'height' },
|
6512
|
+
hostWidth: { ...host$4, property: 'width' },
|
6456
6513
|
hostPadding: { property: 'padding' },
|
6457
6514
|
hostDirection: [
|
6458
|
-
{ ...host$
|
6515
|
+
{ ...host$4, property: 'direction' },
|
6459
6516
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
6460
6517
|
],
|
6461
6518
|
gap: { ...wrapper },
|
@@ -6475,7 +6532,7 @@ const UploadFileClass = compose(
|
|
6475
6532
|
componentNameValidationMixin
|
6476
6533
|
)(RawUploadFile);
|
6477
6534
|
|
6478
|
-
customElements.define(componentName$
|
6535
|
+
customElements.define(componentName$i, UploadFileClass);
|
6479
6536
|
|
6480
6537
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
6481
6538
|
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
@@ -6573,10 +6630,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
6573
6630
|
return BaseButtonSelectionGroupInternalClass;
|
6574
6631
|
};
|
6575
6632
|
|
6576
|
-
const componentName$
|
6633
|
+
const componentName$h = getComponentName('button-selection-group-internal');
|
6577
6634
|
|
6578
6635
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6579
|
-
componentName$
|
6636
|
+
componentName$h
|
6580
6637
|
) {
|
6581
6638
|
getSelectedNode() {
|
6582
6639
|
return this.items.find((item) => item.hasAttribute('selected'));
|
@@ -6732,7 +6789,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
6732
6789
|
}
|
6733
6790
|
};
|
6734
6791
|
|
6735
|
-
const { host: host$
|
6792
|
+
const { host: host$3, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
6736
6793
|
host: { selector: () => ':host' },
|
6737
6794
|
label: { selector: '::part(label)' },
|
6738
6795
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6741,15 +6798,15 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
6741
6798
|
};
|
6742
6799
|
|
6743
6800
|
const buttonSelectionGroupMappings = {
|
6744
|
-
hostWidth: { ...host$
|
6745
|
-
hostDirection: { ...host$
|
6746
|
-
fontFamily: host$
|
6801
|
+
hostWidth: { ...host$3, property: 'width' },
|
6802
|
+
hostDirection: { ...host$3, property: 'direction' },
|
6803
|
+
fontFamily: host$3,
|
6747
6804
|
labelTextColor: [
|
6748
6805
|
{ ...label$1, property: 'color' },
|
6749
6806
|
{ ...requiredIndicator$1, property: 'color' },
|
6750
6807
|
],
|
6751
6808
|
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
6752
|
-
errorMessageTextColor: { ...errorMessage$
|
6809
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
6753
6810
|
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
6754
6811
|
};
|
6755
6812
|
|
@@ -6808,7 +6865,7 @@ const buttonSelectionGroupStyles = `
|
|
6808
6865
|
${resetInputCursor('vaadin-text-field')}
|
6809
6866
|
`;
|
6810
6867
|
|
6811
|
-
const componentName$
|
6868
|
+
const componentName$g = getComponentName('button-selection-group');
|
6812
6869
|
|
6813
6870
|
const buttonSelectionGroupMixin = (superclass) =>
|
6814
6871
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -6817,19 +6874,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
6817
6874
|
const template = document.createElement('template');
|
6818
6875
|
|
6819
6876
|
template.innerHTML = `
|
6820
|
-
<${componentName$
|
6877
|
+
<${componentName$h}
|
6821
6878
|
name="button-selection-group"
|
6822
6879
|
slot="input"
|
6823
6880
|
tabindex="-1"
|
6824
6881
|
part="internal-component"
|
6825
6882
|
>
|
6826
6883
|
<slot></slot>
|
6827
|
-
</${componentName$
|
6884
|
+
</${componentName$h}>
|
6828
6885
|
`;
|
6829
6886
|
|
6830
6887
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6831
6888
|
|
6832
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6889
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
6833
6890
|
|
6834
6891
|
forwardAttrs(this, this.inputElement, {
|
6835
6892
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6854,16 +6911,16 @@ const ButtonSelectionGroupClass = compose(
|
|
6854
6911
|
wrappedEleName: 'vaadin-text-field',
|
6855
6912
|
style: () => buttonSelectionGroupStyles,
|
6856
6913
|
excludeAttrsSync: ['tabindex'],
|
6857
|
-
componentName: componentName$
|
6914
|
+
componentName: componentName$g,
|
6858
6915
|
})
|
6859
6916
|
);
|
6860
6917
|
|
6861
|
-
customElements.define(componentName$
|
6918
|
+
customElements.define(componentName$h, ButtonSelectionGroupInternalClass);
|
6862
6919
|
|
6863
|
-
const componentName$
|
6920
|
+
const componentName$f = getComponentName('button-selection-group-item');
|
6864
6921
|
|
6865
6922
|
class RawSelectItem extends createBaseClass({
|
6866
|
-
componentName: componentName$
|
6923
|
+
componentName: componentName$f,
|
6867
6924
|
baseSelector: ':host > descope-button',
|
6868
6925
|
}) {
|
6869
6926
|
get size() {
|
@@ -6966,14 +7023,14 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6966
7023
|
componentNameValidationMixin
|
6967
7024
|
)(RawSelectItem);
|
6968
7025
|
|
6969
|
-
customElements.define(componentName$
|
7026
|
+
customElements.define(componentName$f, ButtonSelectionGroupItemClass);
|
6970
7027
|
|
6971
|
-
customElements.define(componentName$
|
7028
|
+
customElements.define(componentName$g, ButtonSelectionGroupClass);
|
6972
7029
|
|
6973
|
-
const componentName$
|
7030
|
+
const componentName$e = getComponentName('button-multi-selection-group-internal');
|
6974
7031
|
|
6975
7032
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6976
|
-
componentName$
|
7033
|
+
componentName$e
|
6977
7034
|
) {
|
6978
7035
|
#getSelectedNodes() {
|
6979
7036
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
@@ -7076,7 +7133,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
7076
7133
|
}
|
7077
7134
|
}
|
7078
7135
|
|
7079
|
-
const componentName$
|
7136
|
+
const componentName$d = getComponentName('button-multi-selection-group');
|
7080
7137
|
|
7081
7138
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
7082
7139
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
@@ -7085,19 +7142,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
7085
7142
|
const template = document.createElement('template');
|
7086
7143
|
|
7087
7144
|
template.innerHTML = `
|
7088
|
-
<${componentName$
|
7145
|
+
<${componentName$e}
|
7089
7146
|
name="button-selection-group"
|
7090
7147
|
slot="input"
|
7091
7148
|
tabindex="-1"
|
7092
7149
|
part="internal-component"
|
7093
7150
|
>
|
7094
7151
|
<slot></slot>
|
7095
|
-
</${componentName$
|
7152
|
+
</${componentName$e}>
|
7096
7153
|
`;
|
7097
7154
|
|
7098
7155
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7099
7156
|
|
7100
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7157
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
7101
7158
|
|
7102
7159
|
forwardAttrs(this, this.inputElement, {
|
7103
7160
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
@@ -7122,13 +7179,13 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
7122
7179
|
wrappedEleName: 'vaadin-text-field',
|
7123
7180
|
style: () => buttonSelectionGroupStyles,
|
7124
7181
|
excludeAttrsSync: ['tabindex'],
|
7125
|
-
componentName: componentName$
|
7182
|
+
componentName: componentName$d,
|
7126
7183
|
})
|
7127
7184
|
);
|
7128
7185
|
|
7129
|
-
customElements.define(componentName$
|
7186
|
+
customElements.define(componentName$e, ButtonMultiSelectionGroupInternalClass);
|
7130
7187
|
|
7131
|
-
customElements.define(componentName$
|
7188
|
+
customElements.define(componentName$d, ButtonMultiSelectionGroupClass);
|
7132
7189
|
|
7133
7190
|
/* eslint-disable no-param-reassign */
|
7134
7191
|
|
@@ -7158,9 +7215,9 @@ class GridTextColumnClass extends GridSortColumn {
|
|
7158
7215
|
}
|
7159
7216
|
}
|
7160
7217
|
|
7161
|
-
const componentName$
|
7218
|
+
const componentName$c = getComponentName('grid-text-column');
|
7162
7219
|
|
7163
|
-
customElements.define(componentName$
|
7220
|
+
customElements.define(componentName$c, GridTextColumnClass);
|
7164
7221
|
|
7165
7222
|
/* eslint-disable no-param-reassign */
|
7166
7223
|
|
@@ -7195,9 +7252,9 @@ class GridCustomColumnClass extends GridTextColumnClass {
|
|
7195
7252
|
|
7196
7253
|
/* eslint-disable no-param-reassign */
|
7197
7254
|
|
7198
|
-
const componentName$
|
7255
|
+
const componentName$b = getComponentName('grid-custom-column');
|
7199
7256
|
|
7200
|
-
customElements.define(componentName$
|
7257
|
+
customElements.define(componentName$b, GridCustomColumnClass);
|
7201
7258
|
|
7202
7259
|
const createCheckboxEle = () => {
|
7203
7260
|
const checkbox = document.createElement('descope-checkbox');
|
@@ -7256,9 +7313,9 @@ class GridSelectionColumnClass extends GridSelectionColumn {
|
|
7256
7313
|
}
|
7257
7314
|
}
|
7258
7315
|
|
7259
|
-
const componentName$
|
7316
|
+
const componentName$a = getComponentName('grid-selection-column');
|
7260
7317
|
|
7261
|
-
customElements.define(componentName$
|
7318
|
+
customElements.define(componentName$a, GridSelectionColumnClass);
|
7262
7319
|
|
7263
7320
|
const isValidDataType = (data) => {
|
7264
7321
|
const isValid = Array.isArray(data);
|
@@ -7270,7 +7327,7 @@ const isValidDataType = (data) => {
|
|
7270
7327
|
return isValid;
|
7271
7328
|
};
|
7272
7329
|
|
7273
|
-
const componentName$
|
7330
|
+
const componentName$9 = getComponentName('grid');
|
7274
7331
|
|
7275
7332
|
const GridMixin = (superclass) =>
|
7276
7333
|
class GridMixinClass extends superclass {
|
@@ -7430,7 +7487,7 @@ const GridMixin = (superclass) =>
|
|
7430
7487
|
};
|
7431
7488
|
|
7432
7489
|
const {
|
7433
|
-
host: host$
|
7490
|
+
host: host$2,
|
7434
7491
|
headerRow,
|
7435
7492
|
headerRowCell,
|
7436
7493
|
contentRow,
|
@@ -7465,15 +7522,15 @@ const GridClass = compose(
|
|
7465
7522
|
fontWeight: { ...contentRow },
|
7466
7523
|
valueTextColor: { ...contentRow, property: 'color' },
|
7467
7524
|
backgroundColor: [
|
7468
|
-
{ ...host$
|
7525
|
+
{ ...host$2, property: 'background-color' },
|
7469
7526
|
{ ...contentRow, property: 'background-color' },
|
7470
7527
|
],
|
7471
7528
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
7472
7529
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
7473
|
-
borderColor: { ...host$
|
7474
|
-
borderWidth: { ...host$
|
7475
|
-
borderStyle: { ...host$
|
7476
|
-
borderRadius: { ...host$
|
7530
|
+
borderColor: { ...host$2, property: 'border-color' },
|
7531
|
+
borderWidth: { ...host$2, property: 'border-width' },
|
7532
|
+
borderStyle: { ...host$2, property: 'border-style' },
|
7533
|
+
borderRadius: { ...host$2, property: 'border-radius' },
|
7477
7534
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
7478
7535
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
7479
7536
|
separatorColor: [
|
@@ -7506,13 +7563,13 @@ const GridClass = compose(
|
|
7506
7563
|
}
|
7507
7564
|
`,
|
7508
7565
|
excludeAttrsSync: ['columns', 'tabindex'],
|
7509
|
-
componentName: componentName$
|
7566
|
+
componentName: componentName$9,
|
7510
7567
|
})
|
7511
7568
|
);
|
7512
7569
|
|
7513
|
-
customElements.define(componentName$
|
7570
|
+
customElements.define(componentName$9, GridClass);
|
7514
7571
|
|
7515
|
-
const componentName$
|
7572
|
+
const componentName$8 = getComponentName('multi-select-combo-box');
|
7516
7573
|
|
7517
7574
|
const multiSelectComboBoxMixin = (superclass) =>
|
7518
7575
|
class MultiSelectComboBoxMixinClass extends superclass {
|
@@ -7900,7 +7957,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7900
7957
|
};
|
7901
7958
|
|
7902
7959
|
const {
|
7903
|
-
host,
|
7960
|
+
host: host$1,
|
7904
7961
|
inputField,
|
7905
7962
|
inputElement,
|
7906
7963
|
placeholder,
|
@@ -7908,8 +7965,8 @@ const {
|
|
7908
7965
|
clearButton,
|
7909
7966
|
label,
|
7910
7967
|
requiredIndicator,
|
7911
|
-
helperText,
|
7912
|
-
errorMessage,
|
7968
|
+
helperText: helperText$1,
|
7969
|
+
errorMessage: errorMessage$1,
|
7913
7970
|
chip,
|
7914
7971
|
chipLabel,
|
7915
7972
|
overflowChipFirstBorder,
|
@@ -7938,17 +7995,17 @@ const {
|
|
7938
7995
|
const MultiSelectComboBoxClass = compose(
|
7939
7996
|
createStyleMixin({
|
7940
7997
|
mappings: {
|
7941
|
-
hostWidth: { ...host, property: 'width' },
|
7942
|
-
hostDirection: { ...host, property: 'direction' },
|
7998
|
+
hostWidth: { ...host$1, property: 'width' },
|
7999
|
+
hostDirection: { ...host$1, property: 'direction' },
|
7943
8000
|
// we apply font-size also on the host so we can set its width with em
|
7944
|
-
fontSize: [{}, host],
|
8001
|
+
fontSize: [{}, host$1],
|
7945
8002
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
7946
|
-
fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
|
8003
|
+
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
7947
8004
|
labelTextColor: [
|
7948
8005
|
{ ...label, property: 'color' },
|
7949
8006
|
{ ...requiredIndicator, property: 'color' },
|
7950
8007
|
],
|
7951
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
8008
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
7952
8009
|
inputHeight: { ...inputField, property: 'min-height' },
|
7953
8010
|
inputBackgroundColor: { ...inputField, property: 'background-color' },
|
7954
8011
|
inputBorderColor: { ...inputField, property: 'border-color' },
|
@@ -8116,16 +8173,16 @@ const MultiSelectComboBoxClass = compose(
|
|
8116
8173
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
8117
8174
|
// tries to override it, causing us to lose the user set placeholder.
|
8118
8175
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
8119
|
-
componentName: componentName$
|
8176
|
+
componentName: componentName$8,
|
8120
8177
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
8121
8178
|
})
|
8122
8179
|
);
|
8123
8180
|
|
8124
|
-
customElements.define(componentName$
|
8181
|
+
customElements.define(componentName$8, MultiSelectComboBoxClass);
|
8125
8182
|
|
8126
|
-
const componentName$
|
8183
|
+
const componentName$7 = getComponentName('badge');
|
8127
8184
|
|
8128
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
8185
|
+
class RawBadge extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
|
8129
8186
|
constructor() {
|
8130
8187
|
super();
|
8131
8188
|
|
@@ -8173,11 +8230,11 @@ const BadgeClass = compose(
|
|
8173
8230
|
componentNameValidationMixin
|
8174
8231
|
)(RawBadge);
|
8175
8232
|
|
8176
|
-
customElements.define(componentName$
|
8233
|
+
customElements.define(componentName$7, BadgeClass);
|
8177
8234
|
|
8178
|
-
const componentName$
|
8235
|
+
const componentName$6 = getComponentName('modal');
|
8179
8236
|
|
8180
|
-
const customMixin = (superclass) =>
|
8237
|
+
const customMixin$1 = (superclass) =>
|
8181
8238
|
class ModalMixinClass extends superclass {
|
8182
8239
|
get opened() {
|
8183
8240
|
return this.getAttribute('opened') === 'true';
|
@@ -8267,18 +8324,18 @@ const ModalClass = compose(
|
|
8267
8324
|
}),
|
8268
8325
|
draggableMixin,
|
8269
8326
|
componentNameValidationMixin,
|
8270
|
-
customMixin
|
8327
|
+
customMixin$1
|
8271
8328
|
)(
|
8272
8329
|
createProxy({
|
8273
8330
|
slots: [''],
|
8274
8331
|
wrappedEleName: 'vaadin-dialog',
|
8275
8332
|
style: () => ``,
|
8276
8333
|
excludeAttrsSync: ['tabindex', 'opened'],
|
8277
|
-
componentName: componentName$
|
8334
|
+
componentName: componentName$6,
|
8278
8335
|
})
|
8279
8336
|
);
|
8280
8337
|
|
8281
|
-
customElements.define(componentName$
|
8338
|
+
customElements.define(componentName$6, ModalClass);
|
8282
8339
|
|
8283
8340
|
const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
|
8284
8341
|
|
@@ -8289,7 +8346,7 @@ if (!vaadinContainerClass) {
|
|
8289
8346
|
class NotificationContainerClass extends vaadinContainerClass {}
|
8290
8347
|
customElements.define(getComponentName('notification-container'), NotificationContainerClass);
|
8291
8348
|
|
8292
|
-
const componentName$
|
8349
|
+
const componentName$5 = getComponentName('notification-card');
|
8293
8350
|
|
8294
8351
|
const notificationCardMixin = (superclass) =>
|
8295
8352
|
class NotificationCardMixinClass extends superclass {
|
@@ -8397,13 +8454,13 @@ const NotificationCardClass = compose(
|
|
8397
8454
|
}
|
8398
8455
|
`,
|
8399
8456
|
excludeAttrsSync: ['tabindex'],
|
8400
|
-
componentName: componentName$
|
8457
|
+
componentName: componentName$5,
|
8401
8458
|
})
|
8402
8459
|
);
|
8403
8460
|
|
8404
|
-
customElements.define(componentName$
|
8461
|
+
customElements.define(componentName$5, NotificationCardClass);
|
8405
8462
|
|
8406
|
-
const componentName$
|
8463
|
+
const componentName$4 = getComponentName('notification');
|
8407
8464
|
|
8408
8465
|
const NotificationMixin = (superclass) =>
|
8409
8466
|
class NotificationMixinClass extends superclass {
|
@@ -8498,101 +8555,635 @@ const NotificationClass = compose(
|
|
8498
8555
|
createProxy({
|
8499
8556
|
wrappedEleName: 'vaadin-notification',
|
8500
8557
|
excludeAttrsSync: ['tabindex'],
|
8501
|
-
componentName: componentName$
|
8558
|
+
componentName: componentName$4,
|
8502
8559
|
})
|
8503
8560
|
);
|
8504
8561
|
|
8505
|
-
customElements.define(componentName$
|
8562
|
+
customElements.define(componentName$4, NotificationClass);
|
8506
8563
|
|
8507
|
-
const
|
8564
|
+
const componentName$3 = getComponentName('mappings-field-internal');
|
8508
8565
|
|
8509
|
-
|
8510
|
-
const set = (obj, path, value) => {
|
8511
|
-
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
8566
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
|
8512
8567
|
|
8513
|
-
|
8514
|
-
|
8515
|
-
if (i === pathArray.length - 1) acc[key] = value;
|
8516
|
-
return acc[key];
|
8517
|
-
}, obj);
|
8568
|
+
class MappingsFieldInternal extends BaseInputClass$1 {
|
8569
|
+
#errorItem;
|
8518
8570
|
|
8519
|
-
|
8520
|
-
|
8571
|
+
static get observedAttributes() {
|
8572
|
+
return [].concat(BaseInputClass$1.observedAttributes || [], [
|
8573
|
+
'label-value',
|
8574
|
+
'label-attr',
|
8575
|
+
'button-label',
|
8576
|
+
'invalid',
|
8577
|
+
'readonly',
|
8578
|
+
'disabled',
|
8579
|
+
]);
|
8580
|
+
}
|
8521
8581
|
|
8522
|
-
|
8523
|
-
|
8524
|
-
|
8525
|
-
return
|
8582
|
+
// eslint-disable-next-line class-methods-use-this
|
8583
|
+
isValidDataType(data) {
|
8584
|
+
try {
|
8585
|
+
return data.every(
|
8586
|
+
(obj) =>
|
8587
|
+
typeof obj === 'object' &&
|
8588
|
+
!Array.isArray(obj) &&
|
8589
|
+
Object.getOwnPropertyNames(obj).length === 1 &&
|
8590
|
+
typeof obj[Object.keys(obj)[0]] === 'string' &&
|
8591
|
+
obj[Object.keys(obj)[0]].trim() !== ''
|
8592
|
+
);
|
8593
|
+
} catch (e) {
|
8594
|
+
return false;
|
8526
8595
|
}
|
8527
|
-
|
8528
|
-
}, {});
|
8529
|
-
};
|
8530
|
-
|
8531
|
-
const stringifyArray = (strArr) =>
|
8532
|
-
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
8596
|
+
}
|
8533
8597
|
|
8534
|
-
|
8535
|
-
|
8536
|
-
case Array.isArray(val):
|
8537
|
-
return stringifyArray(val);
|
8538
|
-
case isUrl(val):
|
8539
|
-
return `url(${val})`;
|
8540
|
-
default:
|
8541
|
-
return val;
|
8598
|
+
get labelValue() {
|
8599
|
+
return this.getAttribute('label-value') || 'Value';
|
8542
8600
|
}
|
8543
|
-
};
|
8544
8601
|
|
8545
|
-
|
8546
|
-
|
8547
|
-
|
8548
|
-
}));
|
8602
|
+
get labelAttr() {
|
8603
|
+
return this.getAttribute('label-attr') || 'Attribute';
|
8604
|
+
}
|
8549
8605
|
|
8550
|
-
|
8551
|
-
|
8552
|
-
|
8553
|
-
);
|
8606
|
+
get buttonLabel() {
|
8607
|
+
return this.getAttribute('button-label') || 'Add mapping';
|
8608
|
+
}
|
8554
8609
|
|
8555
|
-
|
8556
|
-
|
8610
|
+
get options() {
|
8611
|
+
return this.getAttribute('options') || [];
|
8612
|
+
}
|
8557
8613
|
|
8558
|
-
|
8559
|
-
|
8560
|
-
(
|
8561
|
-
|
8562
|
-
|
8614
|
+
addNewMappingItem() {
|
8615
|
+
const newMappingItem = document.createElement('descope-mapping-item');
|
8616
|
+
newMappingItem.setAttribute('bordered', 'true');
|
8617
|
+
this.mappingsContainerEle.appendChild(newMappingItem);
|
8618
|
+
forwardAttrs(this, newMappingItem, {
|
8619
|
+
includeAttrs: ['size', 'full-width', 'separator', 'options', 'disabled'],
|
8620
|
+
});
|
8621
|
+
// This needs to be done with the timeout, otherwise the validation is performed
|
8622
|
+
// before the new item is added and thus returns a wrong result
|
8623
|
+
setTimeout(() => {
|
8624
|
+
this.setCustomValidity('');
|
8625
|
+
newMappingItem.addEventListener('mapping-item-removed', (e) => {
|
8626
|
+
// If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
|
8627
|
+
if (newMappingItem === this.#errorItem) {
|
8628
|
+
this.resetInvalidIndication();
|
8629
|
+
this.#errorItem = undefined;
|
8630
|
+
}
|
8631
|
+
newMappingItem.remove();
|
8632
|
+
this.setCustomValidity('');
|
8633
|
+
e.stopPropagation();
|
8634
|
+
});
|
8635
|
+
}, 0);
|
8636
|
+
return newMappingItem;
|
8637
|
+
}
|
8563
8638
|
|
8564
|
-
|
8639
|
+
get items() {
|
8640
|
+
return Array.from(this.mappingsContainerEle.querySelectorAll('descope-mapping-item'));
|
8641
|
+
}
|
8565
8642
|
|
8566
|
-
|
8567
|
-
|
8643
|
+
get value() {
|
8644
|
+
return this.items.reduce((acc, item) => {
|
8645
|
+
if (!item.value) {
|
8646
|
+
return acc;
|
8647
|
+
}
|
8568
8648
|
|
8569
|
-
|
8570
|
-
|
8571
|
-
|
8572
|
-
const property = restPath.pop();
|
8573
|
-
const componentName = getComponentName(component);
|
8649
|
+
return [...acc, item.value];
|
8650
|
+
}, []);
|
8651
|
+
}
|
8574
8652
|
|
8575
|
-
|
8653
|
+
set value(mappings) {
|
8654
|
+
if (!this.isValidDataType(mappings)) {
|
8576
8655
|
// eslint-disable-next-line no-console
|
8577
|
-
console.
|
8656
|
+
console.error(
|
8657
|
+
'received invalid value to set - should be an array of objects with one key-value pair'
|
8658
|
+
);
|
8659
|
+
return;
|
8578
8660
|
}
|
8579
8661
|
|
8580
|
-
|
8581
|
-
// this allows us to generate those themes under different sections
|
8582
|
-
// if the theme has root level attribute that starts with #
|
8583
|
-
// we are generating a new theme
|
8584
|
-
let themeName = BASE_THEME_SECTION;
|
8662
|
+
const currentItems = this.items;
|
8585
8663
|
|
8586
|
-
|
8587
|
-
|
8664
|
+
// Remove extra mapping items we don't need
|
8665
|
+
if (currentItems.length > mappings.length) {
|
8666
|
+
for (let i = mappings.length; i < currentItems.length; i++) {
|
8667
|
+
this.mappingsContainerEle.removeChild(currentItems[i]);
|
8668
|
+
}
|
8588
8669
|
}
|
8589
8670
|
|
8590
|
-
//
|
8591
|
-
|
8592
|
-
|
8593
|
-
if (
|
8671
|
+
// Add or update items
|
8672
|
+
mappings.forEach((mapping, index) => {
|
8673
|
+
const mappingItem = currentItems[index];
|
8674
|
+
if (mappingItem) {
|
8675
|
+
// Set existing item value
|
8676
|
+
mappingItem.value = mapping;
|
8677
|
+
} else {
|
8678
|
+
// Add new item
|
8679
|
+
const newMappingItem = this.addNewMappingItem();
|
8680
|
+
// Setting the new item value needs to be done with the timeout,
|
8681
|
+
// otherwise the value is not set correctly
|
8682
|
+
setTimeout(() => {
|
8683
|
+
newMappingItem.value = mapping;
|
8684
|
+
}, 0);
|
8685
|
+
}
|
8686
|
+
});
|
8687
|
+
}
|
8594
8688
|
|
8595
|
-
|
8689
|
+
constructor() {
|
8690
|
+
super();
|
8691
|
+
|
8692
|
+
this.innerHTML = `
|
8693
|
+
<div class="labels-container" part="labels"></div>
|
8694
|
+
<div class="mappings-container"></div>
|
8695
|
+
<div class="button-container"></div>
|
8696
|
+
`;
|
8697
|
+
|
8698
|
+
this.labelsEle = this.querySelector('.labels-container');
|
8699
|
+
this.mappingsContainerEle = this.querySelector('.mappings-container');
|
8700
|
+
this.buttonContainer = this.querySelector('.button-container');
|
8701
|
+
}
|
8702
|
+
|
8703
|
+
initLabels() {
|
8704
|
+
this.labelsEle.innerHTML = `
|
8705
|
+
<descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>
|
8706
|
+
<descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>
|
8707
|
+
`;
|
8708
|
+
}
|
8709
|
+
|
8710
|
+
initAddButton() {
|
8711
|
+
this.buttonContainer.innerHTML = `
|
8712
|
+
<descope-button variant="link" mode="primary" disabled="${this.isDisabled}">
|
8713
|
+
<vaadin-icon icon="vaadin:plus"></vaadin-icon>
|
8714
|
+
${this.buttonLabel}
|
8715
|
+
</descope-button>
|
8716
|
+
`;
|
8717
|
+
const button = this.querySelector('descope-button');
|
8718
|
+
button.onclick = () => {
|
8719
|
+
this.addNewMappingItem();
|
8720
|
+
};
|
8721
|
+
forwardAttrs(this, button, {
|
8722
|
+
includeAttrs: ['disabled'],
|
8723
|
+
});
|
8724
|
+
}
|
8725
|
+
|
8726
|
+
init() {
|
8727
|
+
// This event listener needs to be placed before the super.init() call
|
8728
|
+
this.addEventListener('focus', (e) => {
|
8729
|
+
// we want to ignore focus events we are dispatching
|
8730
|
+
if (e.isTrusted) {
|
8731
|
+
const focusedElement =
|
8732
|
+
this.#errorItem || this.items[0] || this.querySelector('descope-button');
|
8733
|
+
focusedElement.focus();
|
8734
|
+
}
|
8735
|
+
});
|
8736
|
+
|
8737
|
+
super.init?.();
|
8738
|
+
this.initLabels();
|
8739
|
+
this.initAddButton();
|
8740
|
+
|
8741
|
+
// This event listener is responsible for removing the invalid attribute
|
8742
|
+
// from the internal once the invalid item turns valid
|
8743
|
+
this.addEventListener('input', () => {
|
8744
|
+
const isErrorItemMounted = this.mappingsContainerEle.contains(this.#errorItem);
|
8745
|
+
if (isErrorItemMounted && this.#errorItem?.checkValidity()) {
|
8746
|
+
// Item has changed, it was invalid before and now it's valid
|
8747
|
+
this.resetInvalidIndication();
|
8748
|
+
this.#errorItem.removeAttribute('invalid');
|
8749
|
+
this.#errorItem = undefined;
|
8750
|
+
}
|
8751
|
+
});
|
8752
|
+
}
|
8753
|
+
|
8754
|
+
resetInvalidIndication() {
|
8755
|
+
this.removeAttribute('invalid');
|
8756
|
+
}
|
8757
|
+
|
8758
|
+
getValidity() {
|
8759
|
+
const errorItem = this.items.find((item) => !item.checkValidity());
|
8760
|
+
if (errorItem) {
|
8761
|
+
return errorItem.validity;
|
8762
|
+
}
|
8763
|
+
|
8764
|
+
return {};
|
8765
|
+
}
|
8766
|
+
|
8767
|
+
#handleInvalidMappings(isInvalid) {
|
8768
|
+
if (isInvalid) {
|
8769
|
+
this.#errorItem = this.items.find((item) => !item.checkValidity());
|
8770
|
+
this.#errorItem?.reportValidity();
|
8771
|
+
this.#errorItem?.setAttribute('invalid', 'true');
|
8772
|
+
}
|
8773
|
+
}
|
8774
|
+
|
8775
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
8776
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
8777
|
+
if (attrName === 'label-value' || attrName === 'label-attr') {
|
8778
|
+
this.initLabels();
|
8779
|
+
}
|
8780
|
+
if (attrName === 'button-label') {
|
8781
|
+
this.initAddButton();
|
8782
|
+
}
|
8783
|
+
if (attrName === 'invalid') {
|
8784
|
+
this.#handleInvalidMappings(newValue === 'true');
|
8785
|
+
}
|
8786
|
+
if (attrName === 'readonly') {
|
8787
|
+
this.toggleAttribute('inert', newValue === 'true');
|
8788
|
+
}
|
8789
|
+
}
|
8790
|
+
}
|
8791
|
+
|
8792
|
+
const componentName$2 = getComponentName('mappings-field');
|
8793
|
+
|
8794
|
+
const SEPARATOR_WIDTH = '80px';
|
8795
|
+
const REMOVE_BUTTON_WIDTH = '60px';
|
8796
|
+
|
8797
|
+
const customMixin = (superclass) =>
|
8798
|
+
class MappingsFieldMixinClass extends superclass {
|
8799
|
+
get defaultValues() {
|
8800
|
+
const defaultValuesAttr = this.getAttribute('default-values');
|
8801
|
+
if (defaultValuesAttr) {
|
8802
|
+
try {
|
8803
|
+
return JSON.parse(defaultValuesAttr);
|
8804
|
+
} catch (e) {
|
8805
|
+
// eslint-disable-next-line no-console
|
8806
|
+
console.error('could not parse data string from attribute "default-values" -', e.message);
|
8807
|
+
}
|
8808
|
+
}
|
8809
|
+
return [];
|
8810
|
+
}
|
8811
|
+
|
8812
|
+
setDefaultValues() {
|
8813
|
+
const initialDefaultValues = this.defaultValues;
|
8814
|
+
if (Object.keys(initialDefaultValues).length > 0) {
|
8815
|
+
this.inputElement.value = initialDefaultValues;
|
8816
|
+
}
|
8817
|
+
}
|
8818
|
+
|
8819
|
+
init() {
|
8820
|
+
super.init?.();
|
8821
|
+
const template = document.createElement('template');
|
8822
|
+
|
8823
|
+
template.innerHTML = `
|
8824
|
+
<${componentName$3}
|
8825
|
+
tabindex="-1"
|
8826
|
+
></${componentName$3}>
|
8827
|
+
`;
|
8828
|
+
|
8829
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
8830
|
+
|
8831
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
8832
|
+
|
8833
|
+
forwardAttrs(this, this.inputElement, {
|
8834
|
+
includeAttrs: [
|
8835
|
+
'size',
|
8836
|
+
'full-width',
|
8837
|
+
'label-value',
|
8838
|
+
'label-attr',
|
8839
|
+
'button-label',
|
8840
|
+
'separator',
|
8841
|
+
'options',
|
8842
|
+
'default-values',
|
8843
|
+
'invalid',
|
8844
|
+
'readonly',
|
8845
|
+
'disabled',
|
8846
|
+
],
|
8847
|
+
});
|
8848
|
+
|
8849
|
+
this.setDefaultValues();
|
8850
|
+
}
|
8851
|
+
};
|
8852
|
+
|
8853
|
+
const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLabel, separator } = {
|
8854
|
+
host: { selector: () => ':host' },
|
8855
|
+
helperText: { selector: '::part(helper-text)' },
|
8856
|
+
errorMessage: { selector: '::part(error-message)' },
|
8857
|
+
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
8858
|
+
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
8859
|
+
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
8860
|
+
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
8861
|
+
separator: { selector: 'descope-mapping-item::part(separator)' },
|
8862
|
+
};
|
8863
|
+
|
8864
|
+
const MappingsFieldClass = compose(
|
8865
|
+
createStyleMixin({
|
8866
|
+
mappings: {
|
8867
|
+
hostWidth: { ...host, property: 'width' },
|
8868
|
+
hostDirection: { ...host, property: 'direction' },
|
8869
|
+
// we apply font-size also on the host so we can set its width with em
|
8870
|
+
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
8871
|
+
fontFamily: [helperText, errorMessage, labels],
|
8872
|
+
separatorFontSize: { ...separator, property: 'font-size' },
|
8873
|
+
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
8874
|
+
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
8875
|
+
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
8876
|
+
attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
|
8877
|
+
},
|
8878
|
+
}),
|
8879
|
+
draggableMixin,
|
8880
|
+
composedProxyInputMixin({
|
8881
|
+
proxyProps: ['value', 'selectionStart'],
|
8882
|
+
inputEvent: 'input',
|
8883
|
+
proxyParentValidation: true,
|
8884
|
+
}),
|
8885
|
+
componentNameValidationMixin,
|
8886
|
+
customMixin
|
8887
|
+
)(
|
8888
|
+
createProxy({
|
8889
|
+
slots: [],
|
8890
|
+
wrappedEleName: 'vaadin-custom-field',
|
8891
|
+
style: () => `
|
8892
|
+
:host {
|
8893
|
+
display: inline-flex;
|
8894
|
+
max-width: 100%;
|
8895
|
+
direction: ltr;
|
8896
|
+
}
|
8897
|
+
vaadin-custom-field {
|
8898
|
+
line-height: unset;
|
8899
|
+
width: 100%;
|
8900
|
+
}
|
8901
|
+
|
8902
|
+
descope-mappings-field-internal [part="labels"] {
|
8903
|
+
margin-bottom: 0.5em;
|
8904
|
+
display: grid;
|
8905
|
+
grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
|
8906
|
+
}
|
8907
|
+
|
8908
|
+
descope-mappings-field-internal [part="labels"] [part="value-label"],
|
8909
|
+
descope-mappings-field-internal [part="labels"] [part="attr-label"] {
|
8910
|
+
${TextClass.cssVarList.fontWeight}: 500;
|
8911
|
+
}
|
8912
|
+
|
8913
|
+
descope-mappings-field-internal [part="labels"] [part="value-label"] {
|
8914
|
+
grid-column: 1 / span 1;
|
8915
|
+
}
|
8916
|
+
|
8917
|
+
descope-mappings-field-internal [part="labels"] [part="attr-label"] {
|
8918
|
+
grid-column: 3 / span 1;
|
8919
|
+
}
|
8920
|
+
|
8921
|
+
descope-mapping-item::part(wrapper) {
|
8922
|
+
display: grid;
|
8923
|
+
grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
|
8924
|
+
}
|
8925
|
+
`,
|
8926
|
+
excludeAttrsSync: [
|
8927
|
+
'tabindex',
|
8928
|
+
'label-value',
|
8929
|
+
'label-attr',
|
8930
|
+
'button-label',
|
8931
|
+
'options',
|
8932
|
+
'error-message',
|
8933
|
+
],
|
8934
|
+
componentName: componentName$2,
|
8935
|
+
})
|
8936
|
+
);
|
8937
|
+
|
8938
|
+
customElements.define(componentName$3, MappingsFieldInternal);
|
8939
|
+
|
8940
|
+
const componentName$1 = getComponentName('mapping-item');
|
8941
|
+
|
8942
|
+
const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
|
8943
|
+
|
8944
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
|
8945
|
+
|
8946
|
+
class MappingItem extends BaseInputClass {
|
8947
|
+
static get observedAttributes() {
|
8948
|
+
return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
|
8949
|
+
'separator',
|
8950
|
+
'options',
|
8951
|
+
'invalid',
|
8952
|
+
'disabled',
|
8953
|
+
]);
|
8954
|
+
}
|
8955
|
+
|
8956
|
+
get separator() {
|
8957
|
+
return this.getAttribute('separator') || 'map to';
|
8958
|
+
}
|
8959
|
+
|
8960
|
+
get value() {
|
8961
|
+
const attributeValue = this.attributeInput.value;
|
8962
|
+
const inputValue = this.valueInput.value;
|
8963
|
+
if (attributeValue && inputValue) {
|
8964
|
+
return { [attributeValue]: inputValue };
|
8965
|
+
}
|
8966
|
+
return null;
|
8967
|
+
}
|
8968
|
+
|
8969
|
+
set value(mapping) {
|
8970
|
+
if (Object.entries(mapping).length !== 1) {
|
8971
|
+
// eslint-disable-next-line no-console
|
8972
|
+
console.error(
|
8973
|
+
'descope-mapping item expected expects only one key-value pair in the value but received: ',
|
8974
|
+
mapping
|
8975
|
+
);
|
8976
|
+
return;
|
8977
|
+
}
|
8978
|
+
const [attribute, value] = Object.entries(mapping)[0];
|
8979
|
+
this.valueInput.value = value;
|
8980
|
+
this.attributeInput.value = attribute;
|
8981
|
+
// The event needs to be dispatched to trigger the validation if setting the value externally
|
8982
|
+
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
8983
|
+
}
|
8984
|
+
|
8985
|
+
constructor() {
|
8986
|
+
super();
|
8987
|
+
|
8988
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
8989
|
+
<style>
|
8990
|
+
.wrapper {
|
8991
|
+
display: flex;
|
8992
|
+
}
|
8993
|
+
.separator {
|
8994
|
+
text-align: center;
|
8995
|
+
flex-shrink: 0;
|
8996
|
+
}
|
8997
|
+
</style>
|
8998
|
+
<div class="wrapper" part="wrapper">
|
8999
|
+
<descope-text-field required="true"></descope-text-field>
|
9000
|
+
<div class="separator" part="separator">${this.separator}</div>
|
9001
|
+
<descope-combo-box
|
9002
|
+
item-label-path="data-name"
|
9003
|
+
item-value-path="data-id"
|
9004
|
+
required="true"
|
9005
|
+
>
|
9006
|
+
</descope-combo-box>
|
9007
|
+
<descope-button variant="link" mode="primary">
|
9008
|
+
<vaadin-icon icon="vaadin:minus"></vaadin-icon>
|
9009
|
+
</descope-button>
|
9010
|
+
</div>
|
9011
|
+
`;
|
9012
|
+
this.valueInput = this.shadowRoot.querySelector('descope-text-field');
|
9013
|
+
this.attributeInput = this.shadowRoot.querySelector('descope-combo-box');
|
9014
|
+
this.inputs = [this.valueInput, this.attributeInput];
|
9015
|
+
this.removeButton = this.shadowRoot.querySelector('descope-button');
|
9016
|
+
|
9017
|
+
forwardAttrs(this, this.valueInput, {
|
9018
|
+
includeAttrs: inputAttrs,
|
9019
|
+
});
|
9020
|
+
forwardAttrs(this, this.attributeInput, {
|
9021
|
+
includeAttrs: [...inputAttrs, 'options'],
|
9022
|
+
mapAttrs: { options: 'data' },
|
9023
|
+
});
|
9024
|
+
forwardAttrs(this, this.removeButton, {
|
9025
|
+
includeAttrs: ['disabled'],
|
9026
|
+
});
|
9027
|
+
}
|
9028
|
+
|
9029
|
+
initRemoveButton() {
|
9030
|
+
this.removeButton.addEventListener('click', () =>
|
9031
|
+
this.dispatchEvent(new CustomEvent('mapping-item-removed'))
|
9032
|
+
);
|
9033
|
+
}
|
9034
|
+
|
9035
|
+
init() {
|
9036
|
+
super.init?.();
|
9037
|
+
this.initRemoveButton();
|
9038
|
+
}
|
9039
|
+
|
9040
|
+
getValidity() {
|
9041
|
+
const attributeValue = this.attributeInput.value;
|
9042
|
+
const inputValue = this.valueInput.value;
|
9043
|
+
if (!attributeValue || !inputValue) {
|
9044
|
+
return { badInput: true };
|
9045
|
+
}
|
9046
|
+
return {};
|
9047
|
+
}
|
9048
|
+
|
9049
|
+
reportValidity() {
|
9050
|
+
this.inputs.forEach((input) => input.reportValidity());
|
9051
|
+
}
|
9052
|
+
|
9053
|
+
focus() {
|
9054
|
+
const focusedElement =
|
9055
|
+
this.checkValidity() || !this.valueInput.checkValidity()
|
9056
|
+
? this.valueInput
|
9057
|
+
: this.attributeInput;
|
9058
|
+
focusedElement.focus();
|
9059
|
+
}
|
9060
|
+
|
9061
|
+
handleSeparatorChange() {
|
9062
|
+
this.shadowRoot.querySelector('.separator').textContent = this.separator;
|
9063
|
+
}
|
9064
|
+
|
9065
|
+
#handleInvalidMapping(invalid) {
|
9066
|
+
if (invalid === 'true') {
|
9067
|
+
const inputValue = this.valueInput.value;
|
9068
|
+
if (!inputValue) {
|
9069
|
+
this.valueInput.setAttribute('invalid', 'true');
|
9070
|
+
this.valueInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
|
9071
|
+
}
|
9072
|
+
|
9073
|
+
const attributeValue = this.attributeInput.value;
|
9074
|
+
if (!attributeValue) {
|
9075
|
+
this.attributeInput.setAttribute('invalid', 'true');
|
9076
|
+
this.attributeInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
|
9077
|
+
}
|
9078
|
+
}
|
9079
|
+
}
|
9080
|
+
|
9081
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
9082
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
9083
|
+
|
9084
|
+
if (attrName === 'separator') {
|
9085
|
+
this.handleSeparatorChange();
|
9086
|
+
}
|
9087
|
+
|
9088
|
+
if (attrName === 'invalid') {
|
9089
|
+
this.#handleInvalidMapping(newValue);
|
9090
|
+
}
|
9091
|
+
}
|
9092
|
+
}
|
9093
|
+
|
9094
|
+
customElements.define(componentName$1, MappingItem);
|
9095
|
+
|
9096
|
+
customElements.define(componentName$2, MappingsFieldClass);
|
9097
|
+
|
9098
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
9099
|
+
|
9100
|
+
// lodash.set alternative
|
9101
|
+
const set = (obj, path, value) => {
|
9102
|
+
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
9103
|
+
|
9104
|
+
pathArray.reduce((acc, key, i) => {
|
9105
|
+
if (acc[key] === undefined) acc[key] = {};
|
9106
|
+
if (i === pathArray.length - 1) acc[key] = value;
|
9107
|
+
return acc[key];
|
9108
|
+
}, obj);
|
9109
|
+
|
9110
|
+
return obj;
|
9111
|
+
};
|
9112
|
+
|
9113
|
+
const transformTheme = (theme, path, getTransformation) => {
|
9114
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
9115
|
+
if (val?.constructor !== Object) {
|
9116
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
9117
|
+
}
|
9118
|
+
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
9119
|
+
}, {});
|
9120
|
+
};
|
9121
|
+
|
9122
|
+
const stringifyArray = (strArr) =>
|
9123
|
+
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
9124
|
+
|
9125
|
+
const getCssVarValue = (val) => {
|
9126
|
+
switch (true) {
|
9127
|
+
case Array.isArray(val):
|
9128
|
+
return stringifyArray(val);
|
9129
|
+
case isUrl(val):
|
9130
|
+
return `url(${val})`;
|
9131
|
+
default:
|
9132
|
+
return val;
|
9133
|
+
}
|
9134
|
+
};
|
9135
|
+
|
9136
|
+
const themeToCSSVarsObj = (theme) =>
|
9137
|
+
transformTheme(theme, [], (path, val) => ({
|
9138
|
+
[getVarName(path)]: getCssVarValue(val),
|
9139
|
+
}));
|
9140
|
+
|
9141
|
+
const getThemeRefs = (theme, prefix) =>
|
9142
|
+
transformTheme(theme, [], (path) =>
|
9143
|
+
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
9144
|
+
);
|
9145
|
+
|
9146
|
+
const getThemeVars = (theme, prefix) =>
|
9147
|
+
transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
|
9148
|
+
|
9149
|
+
const globalsThemeToStyle = (theme, themeName = '') => {
|
9150
|
+
const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
|
9151
|
+
(acc, entry) => `${acc}${entry.join(':')};\n`,
|
9152
|
+
''
|
9153
|
+
);
|
9154
|
+
|
9155
|
+
if (!themeName) return style;
|
9156
|
+
|
9157
|
+
return `*[data-theme="${themeName}"] {${style}}`;
|
9158
|
+
};
|
9159
|
+
|
9160
|
+
const componentsThemeToStyleObj = (componentsTheme) =>
|
9161
|
+
transformTheme(componentsTheme, [], (path, val) => {
|
9162
|
+
const [component, ...restPath] = path;
|
9163
|
+
const property = restPath.pop();
|
9164
|
+
const componentName = getComponentName(component);
|
9165
|
+
|
9166
|
+
if (property === 'undefined') {
|
9167
|
+
// eslint-disable-next-line no-console
|
9168
|
+
console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
|
9169
|
+
}
|
9170
|
+
|
9171
|
+
// we need a support for portal components theme (e.g. overlay)
|
9172
|
+
// this allows us to generate those themes under different sections
|
9173
|
+
// if the theme has root level attribute that starts with #
|
9174
|
+
// we are generating a new theme
|
9175
|
+
let themeName = BASE_THEME_SECTION;
|
9176
|
+
|
9177
|
+
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
9178
|
+
themeName = restPath.shift();
|
9179
|
+
}
|
9180
|
+
|
9181
|
+
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
9182
|
+
// starts with underscore -> attribute selector
|
9183
|
+
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
9184
|
+
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
9185
|
+
|
9186
|
+
const nextSection = restPath[idx + 1];
|
8596
9187
|
|
8597
9188
|
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
8598
9189
|
// eslint-disable-next-line no-console
|
@@ -8874,33 +9465,33 @@ const globals = {
|
|
8874
9465
|
fonts,
|
8875
9466
|
direction,
|
8876
9467
|
};
|
8877
|
-
const vars$
|
9468
|
+
const vars$z = getThemeVars(globals);
|
8878
9469
|
|
8879
|
-
const globalRefs$
|
9470
|
+
const globalRefs$i = getThemeRefs(globals);
|
8880
9471
|
const compVars$4 = ButtonClass.cssVarList;
|
8881
9472
|
|
8882
9473
|
const mode = {
|
8883
|
-
primary: globalRefs$
|
8884
|
-
secondary: globalRefs$
|
8885
|
-
success: globalRefs$
|
8886
|
-
error: globalRefs$
|
8887
|
-
surface: globalRefs$
|
9474
|
+
primary: globalRefs$i.colors.primary,
|
9475
|
+
secondary: globalRefs$i.colors.secondary,
|
9476
|
+
success: globalRefs$i.colors.success,
|
9477
|
+
error: globalRefs$i.colors.error,
|
9478
|
+
surface: globalRefs$i.colors.surface,
|
8888
9479
|
};
|
8889
9480
|
|
8890
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
9481
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
|
8891
9482
|
|
8892
9483
|
const button = {
|
8893
9484
|
...helperTheme$3,
|
8894
9485
|
|
8895
|
-
[compVars$4.fontFamily]: globalRefs$
|
9486
|
+
[compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
|
8896
9487
|
|
8897
9488
|
[compVars$4.cursor]: 'pointer',
|
8898
9489
|
[compVars$4.hostHeight]: '3em',
|
8899
9490
|
[compVars$4.hostWidth]: 'auto',
|
8900
|
-
[compVars$4.hostDirection]: globalRefs$
|
9491
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
8901
9492
|
|
8902
|
-
[compVars$4.borderRadius]: globalRefs$
|
8903
|
-
[compVars$4.borderWidth]: globalRefs$
|
9493
|
+
[compVars$4.borderRadius]: globalRefs$i.radius.sm,
|
9494
|
+
[compVars$4.borderWidth]: globalRefs$i.border.xs,
|
8904
9495
|
[compVars$4.borderStyle]: 'solid',
|
8905
9496
|
[compVars$4.borderColor]: 'transparent',
|
8906
9497
|
|
@@ -8943,10 +9534,10 @@ const button = {
|
|
8943
9534
|
},
|
8944
9535
|
|
8945
9536
|
_disabled: {
|
8946
|
-
[helperVars$3.main]: globalRefs$
|
8947
|
-
[helperVars$3.dark]: globalRefs$
|
8948
|
-
[helperVars$3.light]: globalRefs$
|
8949
|
-
[helperVars$3.contrast]: globalRefs$
|
9537
|
+
[helperVars$3.main]: globalRefs$i.colors.surface.light,
|
9538
|
+
[helperVars$3.dark]: globalRefs$i.colors.surface.dark,
|
9539
|
+
[helperVars$3.light]: globalRefs$i.colors.surface.light,
|
9540
|
+
[helperVars$3.contrast]: globalRefs$i.colors.surface.main,
|
8950
9541
|
},
|
8951
9542
|
|
8952
9543
|
variant: {
|
@@ -8994,7 +9585,7 @@ const button = {
|
|
8994
9585
|
},
|
8995
9586
|
};
|
8996
9587
|
|
8997
|
-
const vars$
|
9588
|
+
const vars$y = {
|
8998
9589
|
...compVars$4,
|
8999
9590
|
...helperVars$3,
|
9000
9591
|
};
|
@@ -9002,25 +9593,25 @@ const vars$x = {
|
|
9002
9593
|
var button$1 = /*#__PURE__*/Object.freeze({
|
9003
9594
|
__proto__: null,
|
9004
9595
|
default: button,
|
9005
|
-
vars: vars$
|
9596
|
+
vars: vars$y
|
9006
9597
|
});
|
9007
9598
|
|
9008
9599
|
const componentName = getComponentName('input-wrapper');
|
9009
|
-
const globalRefs$
|
9600
|
+
const globalRefs$h = getThemeRefs(globals);
|
9010
9601
|
|
9011
|
-
const [theme$1, refs, vars$
|
9602
|
+
const [theme$1, refs, vars$x] = createHelperVars(
|
9012
9603
|
{
|
9013
|
-
labelTextColor: globalRefs$
|
9014
|
-
valueTextColor: globalRefs$
|
9015
|
-
placeholderTextColor: globalRefs$
|
9604
|
+
labelTextColor: globalRefs$h.colors.surface.dark,
|
9605
|
+
valueTextColor: globalRefs$h.colors.surface.contrast,
|
9606
|
+
placeholderTextColor: globalRefs$h.colors.surface.dark,
|
9016
9607
|
requiredIndicator: "'*'",
|
9017
|
-
errorMessageTextColor: globalRefs$
|
9608
|
+
errorMessageTextColor: globalRefs$h.colors.error.main,
|
9018
9609
|
|
9019
|
-
borderWidth: globalRefs$
|
9020
|
-
borderRadius: globalRefs$
|
9610
|
+
borderWidth: globalRefs$h.border.xs,
|
9611
|
+
borderRadius: globalRefs$h.radius.xs,
|
9021
9612
|
borderColor: 'transparent',
|
9022
9613
|
|
9023
|
-
outlineWidth: globalRefs$
|
9614
|
+
outlineWidth: globalRefs$h.border.sm,
|
9024
9615
|
outlineStyle: 'solid',
|
9025
9616
|
outlineColor: 'transparent',
|
9026
9617
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -9031,11 +9622,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
9031
9622
|
horizontalPadding: '0.5em',
|
9032
9623
|
verticalPadding: '0.5em',
|
9033
9624
|
|
9034
|
-
backgroundColor: globalRefs$
|
9625
|
+
backgroundColor: globalRefs$h.colors.surface.main,
|
9035
9626
|
|
9036
|
-
fontFamily: globalRefs$
|
9627
|
+
fontFamily: globalRefs$h.fonts.font1.family,
|
9037
9628
|
|
9038
|
-
direction: globalRefs$
|
9629
|
+
direction: globalRefs$h.direction,
|
9039
9630
|
|
9040
9631
|
overlayOpacity: '0.3',
|
9041
9632
|
|
@@ -9051,27 +9642,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
9051
9642
|
},
|
9052
9643
|
|
9053
9644
|
_focused: {
|
9054
|
-
outlineColor: globalRefs$
|
9645
|
+
outlineColor: globalRefs$h.colors.surface.light,
|
9055
9646
|
_invalid: {
|
9056
|
-
outlineColor: globalRefs$
|
9647
|
+
outlineColor: globalRefs$h.colors.error.main,
|
9057
9648
|
},
|
9058
9649
|
},
|
9059
9650
|
|
9060
9651
|
_bordered: {
|
9061
|
-
outlineWidth: globalRefs$
|
9062
|
-
borderColor: globalRefs$
|
9652
|
+
outlineWidth: globalRefs$h.border.xs,
|
9653
|
+
borderColor: globalRefs$h.colors.surface.light,
|
9063
9654
|
borderStyle: 'solid',
|
9064
9655
|
_invalid: {
|
9065
|
-
borderColor: globalRefs$
|
9656
|
+
borderColor: globalRefs$h.colors.error.main,
|
9066
9657
|
},
|
9067
9658
|
},
|
9068
9659
|
|
9069
9660
|
_disabled: {
|
9070
|
-
labelTextColor: globalRefs$
|
9071
|
-
borderColor: globalRefs$
|
9072
|
-
valueTextColor: globalRefs$
|
9073
|
-
placeholderTextColor: globalRefs$
|
9074
|
-
backgroundColor: globalRefs$
|
9661
|
+
labelTextColor: globalRefs$h.colors.surface.light,
|
9662
|
+
borderColor: globalRefs$h.colors.surface.light,
|
9663
|
+
valueTextColor: globalRefs$h.colors.surface.light,
|
9664
|
+
placeholderTextColor: globalRefs$h.colors.surface.light,
|
9665
|
+
backgroundColor: globalRefs$h.colors.surface.main,
|
9075
9666
|
},
|
9076
9667
|
},
|
9077
9668
|
componentName
|
@@ -9081,22 +9672,63 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
9081
9672
|
__proto__: null,
|
9082
9673
|
default: theme$1,
|
9083
9674
|
refs: refs,
|
9084
|
-
vars: vars$
|
9675
|
+
vars: vars$x
|
9085
9676
|
});
|
9086
9677
|
|
9087
|
-
const vars$
|
9678
|
+
const vars$w = TextFieldClass.cssVarList;
|
9088
9679
|
|
9089
9680
|
const textField = {
|
9681
|
+
[vars$w.hostWidth]: refs.width,
|
9682
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
9683
|
+
[vars$w.hostDirection]: refs.direction,
|
9684
|
+
[vars$w.fontSize]: refs.fontSize,
|
9685
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
9686
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
9687
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
9688
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
9689
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
9690
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
9691
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
9692
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
9693
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
9694
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
9695
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
9696
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
9697
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
9698
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
9699
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
9700
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
9701
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
9702
|
+
textAlign: {
|
9703
|
+
right: { [vars$w.inputTextAlign]: 'right' },
|
9704
|
+
left: { [vars$w.inputTextAlign]: 'left' },
|
9705
|
+
center: { [vars$w.inputTextAlign]: 'center' },
|
9706
|
+
},
|
9707
|
+
};
|
9708
|
+
|
9709
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
9710
|
+
__proto__: null,
|
9711
|
+
default: textField,
|
9712
|
+
textField: textField,
|
9713
|
+
vars: vars$w
|
9714
|
+
});
|
9715
|
+
|
9716
|
+
const globalRefs$g = getThemeRefs(globals);
|
9717
|
+
const vars$v = PasswordClass.cssVarList;
|
9718
|
+
|
9719
|
+
const password = {
|
9090
9720
|
[vars$v.hostWidth]: refs.width,
|
9091
|
-
[vars$v.hostMinWidth]: refs.minWidth,
|
9092
9721
|
[vars$v.hostDirection]: refs.direction,
|
9093
9722
|
[vars$v.fontSize]: refs.fontSize,
|
9094
9723
|
[vars$v.fontFamily]: refs.fontFamily,
|
9095
9724
|
[vars$v.labelTextColor]: refs.labelTextColor,
|
9725
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
9726
|
+
[vars$v.inputHorizontalPadding]: refs.horizontalPadding,
|
9727
|
+
[vars$v.inputHeight]: refs.inputHeight,
|
9728
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
9096
9729
|
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
9097
|
-
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
9098
9730
|
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
9099
|
-
[vars$v.
|
9731
|
+
[vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9100
9732
|
[vars$v.inputBorderWidth]: refs.borderWidth,
|
9101
9733
|
[vars$v.inputBorderStyle]: refs.borderStyle,
|
9102
9734
|
[vars$v.inputBorderColor]: refs.borderColor,
|
@@ -9105,39 +9737,29 @@ const textField = {
|
|
9105
9737
|
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
9106
9738
|
[vars$v.inputOutlineColor]: refs.outlineColor,
|
9107
9739
|
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
9108
|
-
[vars$v.
|
9109
|
-
[vars$v.
|
9110
|
-
[vars$v.
|
9111
|
-
textAlign: {
|
9112
|
-
right: { [vars$v.inputTextAlign]: 'right' },
|
9113
|
-
left: { [vars$v.inputTextAlign]: 'left' },
|
9114
|
-
center: { [vars$v.inputTextAlign]: 'center' },
|
9115
|
-
},
|
9740
|
+
[vars$v.revealButtonOffset]: globalRefs$g.spacing.md,
|
9741
|
+
[vars$v.revealButtonSize]: refs.toggleButtonSize,
|
9742
|
+
[vars$v.revealButtonColor]: refs.placeholderTextColor,
|
9116
9743
|
};
|
9117
9744
|
|
9118
|
-
var
|
9745
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
9119
9746
|
__proto__: null,
|
9120
|
-
default:
|
9121
|
-
textField: textField,
|
9747
|
+
default: password,
|
9122
9748
|
vars: vars$v
|
9123
9749
|
});
|
9124
9750
|
|
9125
|
-
const
|
9126
|
-
const vars$u = PasswordClass.cssVarList;
|
9751
|
+
const vars$u = NumberFieldClass.cssVarList;
|
9127
9752
|
|
9128
|
-
const
|
9753
|
+
const numberField = {
|
9129
9754
|
[vars$u.hostWidth]: refs.width,
|
9755
|
+
[vars$u.hostMinWidth]: refs.minWidth,
|
9130
9756
|
[vars$u.hostDirection]: refs.direction,
|
9131
9757
|
[vars$u.fontSize]: refs.fontSize,
|
9132
9758
|
[vars$u.fontFamily]: refs.fontFamily,
|
9133
9759
|
[vars$u.labelTextColor]: refs.labelTextColor,
|
9134
9760
|
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
9135
|
-
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
9136
|
-
[vars$u.inputHeight]: refs.inputHeight,
|
9137
|
-
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
9138
|
-
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
9139
9761
|
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
9140
|
-
[vars$u.
|
9762
|
+
[vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
|
9141
9763
|
[vars$u.inputBorderWidth]: refs.borderWidth,
|
9142
9764
|
[vars$u.inputBorderStyle]: refs.borderStyle,
|
9143
9765
|
[vars$u.inputBorderColor]: refs.borderColor,
|
@@ -9146,20 +9768,21 @@ const password = {
|
|
9146
9768
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
9147
9769
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
9148
9770
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
9149
|
-
[vars$u.
|
9150
|
-
[vars$u.
|
9151
|
-
[vars$u.
|
9771
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
9772
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
9773
|
+
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
9774
|
+
[vars$u.inputHeight]: refs.inputHeight,
|
9152
9775
|
};
|
9153
9776
|
|
9154
|
-
var
|
9777
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
9155
9778
|
__proto__: null,
|
9156
|
-
default:
|
9779
|
+
default: numberField,
|
9157
9780
|
vars: vars$u
|
9158
9781
|
});
|
9159
9782
|
|
9160
|
-
const vars$t =
|
9783
|
+
const vars$t = EmailFieldClass.cssVarList;
|
9161
9784
|
|
9162
|
-
const
|
9785
|
+
const emailField = {
|
9163
9786
|
[vars$t.hostWidth]: refs.width,
|
9164
9787
|
[vars$t.hostMinWidth]: refs.minWidth,
|
9165
9788
|
[vars$t.hostDirection]: refs.direction,
|
@@ -9168,6 +9791,7 @@ const numberField = {
|
|
9168
9791
|
[vars$t.labelTextColor]: refs.labelTextColor,
|
9169
9792
|
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
9170
9793
|
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
9794
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
9171
9795
|
[vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
|
9172
9796
|
[vars$t.inputBorderWidth]: refs.borderWidth,
|
9173
9797
|
[vars$t.inputBorderStyle]: refs.borderStyle,
|
@@ -9178,200 +9802,167 @@ const numberField = {
|
|
9178
9802
|
[vars$t.inputOutlineColor]: refs.outlineColor,
|
9179
9803
|
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
9180
9804
|
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
9181
|
-
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
9182
9805
|
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
9183
9806
|
[vars$t.inputHeight]: refs.inputHeight,
|
9184
9807
|
};
|
9185
9808
|
|
9186
|
-
var
|
9809
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
9187
9810
|
__proto__: null,
|
9188
|
-
default:
|
9811
|
+
default: emailField,
|
9189
9812
|
vars: vars$t
|
9190
9813
|
});
|
9191
9814
|
|
9192
|
-
const vars$s =
|
9815
|
+
const vars$s = TextAreaClass.cssVarList;
|
9193
9816
|
|
9194
|
-
const
|
9817
|
+
const textArea = {
|
9195
9818
|
[vars$s.hostWidth]: refs.width,
|
9196
9819
|
[vars$s.hostMinWidth]: refs.minWidth,
|
9197
9820
|
[vars$s.hostDirection]: refs.direction,
|
9198
9821
|
[vars$s.fontSize]: refs.fontSize,
|
9199
9822
|
[vars$s.fontFamily]: refs.fontFamily,
|
9200
9823
|
[vars$s.labelTextColor]: refs.labelTextColor,
|
9824
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
9201
9825
|
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
9826
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
9202
9827
|
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
9203
|
-
[vars$s.
|
9204
|
-
[vars$s.
|
9828
|
+
[vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9829
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
9205
9830
|
[vars$s.inputBorderWidth]: refs.borderWidth,
|
9206
9831
|
[vars$s.inputBorderStyle]: refs.borderStyle,
|
9207
9832
|
[vars$s.inputBorderColor]: refs.borderColor,
|
9208
|
-
[vars$s.inputBorderRadius]: refs.borderRadius,
|
9209
9833
|
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
9210
9834
|
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
9211
9835
|
[vars$s.inputOutlineColor]: refs.outlineColor,
|
9212
9836
|
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
9213
|
-
[vars$s.
|
9214
|
-
[vars$s.
|
9215
|
-
|
9837
|
+
[vars$s.inputResizeType]: 'vertical',
|
9838
|
+
[vars$s.inputMinHeight]: '5em',
|
9839
|
+
textAlign: {
|
9840
|
+
right: { [vars$s.inputTextAlign]: 'right' },
|
9841
|
+
left: { [vars$s.inputTextAlign]: 'left' },
|
9842
|
+
center: { [vars$s.inputTextAlign]: 'center' },
|
9843
|
+
},
|
9844
|
+
|
9845
|
+
_readonly: {
|
9846
|
+
[vars$s.inputResizeType]: 'none',
|
9847
|
+
},
|
9216
9848
|
};
|
9217
9849
|
|
9218
|
-
var
|
9850
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
9219
9851
|
__proto__: null,
|
9220
|
-
default:
|
9852
|
+
default: textArea,
|
9221
9853
|
vars: vars$s
|
9222
9854
|
});
|
9223
9855
|
|
9224
|
-
const vars$r =
|
9856
|
+
const vars$r = CheckboxClass.cssVarList;
|
9857
|
+
const checkboxSize = '1.35em';
|
9225
9858
|
|
9226
|
-
const
|
9859
|
+
const checkbox = {
|
9227
9860
|
[vars$r.hostWidth]: refs.width,
|
9228
|
-
[vars$r.hostMinWidth]: refs.minWidth,
|
9229
9861
|
[vars$r.hostDirection]: refs.direction,
|
9230
9862
|
[vars$r.fontSize]: refs.fontSize,
|
9231
9863
|
[vars$r.fontFamily]: refs.fontFamily,
|
9232
9864
|
[vars$r.labelTextColor]: refs.labelTextColor,
|
9233
9865
|
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
9866
|
+
[vars$r.labelFontWeight]: '400',
|
9867
|
+
[vars$r.labelLineHeight]: checkboxSize,
|
9868
|
+
[vars$r.labelSpacing]: '1em',
|
9234
9869
|
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
9235
|
-
[vars$r.
|
9236
|
-
[vars$r.
|
9237
|
-
[vars$r.
|
9870
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
9871
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
9872
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
9873
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
9238
9874
|
[vars$r.inputBorderRadius]: refs.borderRadius,
|
9875
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
9239
9876
|
[vars$r.inputBorderWidth]: refs.borderWidth,
|
9240
9877
|
[vars$r.inputBorderStyle]: refs.borderStyle,
|
9241
|
-
[vars$r.
|
9242
|
-
[vars$r.
|
9243
|
-
|
9244
|
-
|
9245
|
-
|
9246
|
-
[vars$r.inputResizeType]: 'vertical',
|
9247
|
-
[vars$r.inputMinHeight]: '5em',
|
9248
|
-
textAlign: {
|
9249
|
-
right: { [vars$r.inputTextAlign]: 'right' },
|
9250
|
-
left: { [vars$r.inputTextAlign]: 'left' },
|
9251
|
-
center: { [vars$r.inputTextAlign]: 'center' },
|
9878
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
9879
|
+
[vars$r.inputSize]: checkboxSize,
|
9880
|
+
|
9881
|
+
_checked: {
|
9882
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
9252
9883
|
},
|
9253
9884
|
|
9254
|
-
|
9255
|
-
[vars$r.
|
9885
|
+
_disabled: {
|
9886
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
9256
9887
|
},
|
9257
9888
|
};
|
9258
9889
|
|
9259
|
-
var
|
9890
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
9260
9891
|
__proto__: null,
|
9261
|
-
default:
|
9892
|
+
default: checkbox,
|
9262
9893
|
vars: vars$r
|
9263
9894
|
});
|
9264
9895
|
|
9265
|
-
const
|
9266
|
-
const
|
9896
|
+
const knobMargin = '2px';
|
9897
|
+
const checkboxHeight = '1.25em';
|
9267
9898
|
|
9268
|
-
const
|
9899
|
+
const globalRefs$f = getThemeRefs(globals);
|
9900
|
+
const vars$q = SwitchToggleClass.cssVarList;
|
9901
|
+
|
9902
|
+
const switchToggle = {
|
9269
9903
|
[vars$q.hostWidth]: refs.width,
|
9270
9904
|
[vars$q.hostDirection]: refs.direction,
|
9271
9905
|
[vars$q.fontSize]: refs.fontSize,
|
9272
9906
|
[vars$q.fontFamily]: refs.fontFamily,
|
9273
|
-
|
9274
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
9275
|
-
[vars$q.labelFontWeight]: '400',
|
9276
|
-
[vars$q.labelLineHeight]: checkboxSize,
|
9277
|
-
[vars$q.labelSpacing]: '1em',
|
9278
|
-
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
9907
|
+
|
9279
9908
|
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
9280
9909
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
9281
9910
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
9282
9911
|
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
9283
|
-
[vars$q.inputBorderRadius]: refs.borderRadius,
|
9284
|
-
[vars$q.inputBorderColor]: refs.borderColor,
|
9285
|
-
[vars$q.inputBorderWidth]: refs.borderWidth,
|
9286
|
-
[vars$q.inputBorderStyle]: refs.borderStyle,
|
9287
|
-
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
9288
|
-
[vars$q.inputSize]: checkboxSize,
|
9289
|
-
|
9290
|
-
_checked: {
|
9291
|
-
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
9292
|
-
},
|
9293
|
-
|
9294
|
-
_disabled: {
|
9295
|
-
[vars$q.labelTextColor]: refs.labelTextColor,
|
9296
|
-
},
|
9297
|
-
};
|
9298
|
-
|
9299
|
-
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
9300
|
-
__proto__: null,
|
9301
|
-
default: checkbox,
|
9302
|
-
vars: vars$q
|
9303
|
-
});
|
9304
|
-
|
9305
|
-
const knobMargin = '2px';
|
9306
|
-
const checkboxHeight = '1.25em';
|
9307
9912
|
|
9308
|
-
|
9309
|
-
|
9913
|
+
[vars$q.trackBorderStyle]: refs.borderStyle,
|
9914
|
+
[vars$q.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
9915
|
+
[vars$q.trackBorderColor]: refs.borderColor,
|
9916
|
+
[vars$q.trackBackgroundColor]: refs.backgroundColor,
|
9917
|
+
[vars$q.trackBorderRadius]: globalRefs$f.radius.md,
|
9918
|
+
[vars$q.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
9919
|
+
[vars$q.trackHeight]: checkboxHeight,
|
9920
|
+
|
9921
|
+
[vars$q.knobSize]: `calc(1em - ${knobMargin})`,
|
9922
|
+
[vars$q.knobRadius]: '50%',
|
9923
|
+
[vars$q.knobTopOffset]: '1px',
|
9924
|
+
[vars$q.knobLeftOffset]: knobMargin,
|
9925
|
+
[vars$q.knobColor]: refs.labelTextColor,
|
9926
|
+
[vars$q.knobTransitionDuration]: '0.3s',
|
9310
9927
|
|
9311
|
-
|
9312
|
-
[vars$
|
9313
|
-
[vars$
|
9314
|
-
[vars$
|
9315
|
-
[vars$
|
9316
|
-
|
9317
|
-
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
9318
|
-
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
9319
|
-
[vars$p.inputOutlineColor]: refs.outlineColor,
|
9320
|
-
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
9321
|
-
|
9322
|
-
[vars$p.trackBorderStyle]: refs.borderStyle,
|
9323
|
-
[vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
9324
|
-
[vars$p.trackBorderColor]: refs.borderColor,
|
9325
|
-
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
9326
|
-
[vars$p.trackBorderRadius]: globalRefs$e.radius.md,
|
9327
|
-
[vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
9328
|
-
[vars$p.trackHeight]: checkboxHeight,
|
9329
|
-
|
9330
|
-
[vars$p.knobSize]: `calc(1em - ${knobMargin})`,
|
9331
|
-
[vars$p.knobRadius]: '50%',
|
9332
|
-
[vars$p.knobTopOffset]: '1px',
|
9333
|
-
[vars$p.knobLeftOffset]: knobMargin,
|
9334
|
-
[vars$p.knobColor]: refs.labelTextColor,
|
9335
|
-
[vars$p.knobTransitionDuration]: '0.3s',
|
9336
|
-
|
9337
|
-
[vars$p.labelTextColor]: refs.labelTextColor,
|
9338
|
-
[vars$p.labelFontWeight]: '400',
|
9339
|
-
[vars$p.labelLineHeight]: '1.35em',
|
9340
|
-
[vars$p.labelSpacing]: '1em',
|
9341
|
-
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
9342
|
-
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
9928
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
9929
|
+
[vars$q.labelFontWeight]: '400',
|
9930
|
+
[vars$q.labelLineHeight]: '1.35em',
|
9931
|
+
[vars$q.labelSpacing]: '1em',
|
9932
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
9933
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
9343
9934
|
|
9344
9935
|
_checked: {
|
9345
|
-
[vars$
|
9346
|
-
[vars$
|
9347
|
-
[vars$
|
9348
|
-
[vars$
|
9936
|
+
[vars$q.trackBorderColor]: refs.borderColor,
|
9937
|
+
[vars$q.knobLeftOffset]: `calc(100% - var(${vars$q.knobSize}) - ${knobMargin})`,
|
9938
|
+
[vars$q.knobColor]: refs.valueTextColor,
|
9939
|
+
[vars$q.knobTextColor]: refs.valueTextColor,
|
9349
9940
|
},
|
9350
9941
|
|
9351
9942
|
_disabled: {
|
9352
|
-
[vars$
|
9353
|
-
[vars$
|
9354
|
-
[vars$
|
9355
|
-
[vars$
|
9943
|
+
[vars$q.knobColor]: globalRefs$f.colors.surface.light,
|
9944
|
+
[vars$q.trackBorderColor]: globalRefs$f.colors.surface.light,
|
9945
|
+
[vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
|
9946
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
9356
9947
|
_checked: {
|
9357
|
-
[vars$
|
9358
|
-
[vars$
|
9948
|
+
[vars$q.knobColor]: globalRefs$f.colors.surface.light,
|
9949
|
+
[vars$q.trackBackgroundColor]: globalRefs$f.colors.surface.main,
|
9359
9950
|
},
|
9360
9951
|
},
|
9361
9952
|
|
9362
9953
|
_invalid: {
|
9363
|
-
[vars$
|
9364
|
-
[vars$
|
9954
|
+
[vars$q.trackBorderColor]: globalRefs$f.colors.error.main,
|
9955
|
+
[vars$q.knobColor]: globalRefs$f.colors.error.main,
|
9365
9956
|
},
|
9366
9957
|
};
|
9367
9958
|
|
9368
9959
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
9369
9960
|
__proto__: null,
|
9370
9961
|
default: switchToggle,
|
9371
|
-
vars: vars$
|
9962
|
+
vars: vars$q
|
9372
9963
|
});
|
9373
9964
|
|
9374
|
-
const globalRefs$
|
9965
|
+
const globalRefs$e = getThemeRefs(globals);
|
9375
9966
|
|
9376
9967
|
const compVars$3 = ContainerClass.cssVarList;
|
9377
9968
|
|
@@ -9393,7 +9984,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
9393
9984
|
horizontalAlignment,
|
9394
9985
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
9395
9986
|
},
|
9396
|
-
componentName$
|
9987
|
+
componentName$F
|
9397
9988
|
);
|
9398
9989
|
|
9399
9990
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -9403,10 +9994,10 @@ const container = {
|
|
9403
9994
|
|
9404
9995
|
[compVars$3.hostWidth]: '100%',
|
9405
9996
|
[compVars$3.boxShadow]: 'none',
|
9406
|
-
[compVars$3.backgroundColor]: globalRefs$
|
9407
|
-
[compVars$3.color]: globalRefs$
|
9997
|
+
[compVars$3.backgroundColor]: globalRefs$e.colors.surface.main,
|
9998
|
+
[compVars$3.color]: globalRefs$e.colors.surface.contrast,
|
9408
9999
|
[compVars$3.borderRadius]: '0px',
|
9409
|
-
[compVars$3.hostDirection]: globalRefs$
|
10000
|
+
[compVars$3.hostDirection]: globalRefs$e.direction,
|
9410
10001
|
|
9411
10002
|
verticalPadding: {
|
9412
10003
|
sm: { [compVars$3.verticalPadding]: '5px' },
|
@@ -9452,34 +10043,34 @@ const container = {
|
|
9452
10043
|
|
9453
10044
|
shadow: {
|
9454
10045
|
sm: {
|
9455
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
10046
|
+
[compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.sm} ${shadowColor$1}`,
|
9456
10047
|
},
|
9457
10048
|
md: {
|
9458
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
10049
|
+
[compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.md} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.md} ${shadowColor$1}`,
|
9459
10050
|
},
|
9460
10051
|
lg: {
|
9461
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
10052
|
+
[compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.lg} ${shadowColor$1}`,
|
9462
10053
|
},
|
9463
10054
|
xl: {
|
9464
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
10055
|
+
[compVars$3.boxShadow]: `${globalRefs$e.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$e.shadow.narrow.xl} ${shadowColor$1}`,
|
9465
10056
|
},
|
9466
10057
|
'2xl': {
|
9467
10058
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
9468
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
10059
|
+
[compVars$3.boxShadow]: `${globalRefs$e.shadow.wide['2xl']} ${shadowColor$1}`,
|
9469
10060
|
},
|
9470
10061
|
},
|
9471
10062
|
|
9472
10063
|
borderRadius: {
|
9473
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
9474
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
9475
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
9476
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
9477
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
9478
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
10064
|
+
sm: { [compVars$3.borderRadius]: globalRefs$e.radius.sm },
|
10065
|
+
md: { [compVars$3.borderRadius]: globalRefs$e.radius.md },
|
10066
|
+
lg: { [compVars$3.borderRadius]: globalRefs$e.radius.lg },
|
10067
|
+
xl: { [compVars$3.borderRadius]: globalRefs$e.radius.xl },
|
10068
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$e.radius['2xl'] },
|
10069
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$e.radius['3xl'] },
|
9479
10070
|
},
|
9480
10071
|
};
|
9481
10072
|
|
9482
|
-
const vars$
|
10073
|
+
const vars$p = {
|
9483
10074
|
...compVars$3,
|
9484
10075
|
...helperVars$2,
|
9485
10076
|
};
|
@@ -9487,166 +10078,166 @@ const vars$o = {
|
|
9487
10078
|
var container$1 = /*#__PURE__*/Object.freeze({
|
9488
10079
|
__proto__: null,
|
9489
10080
|
default: container,
|
9490
|
-
vars: vars$
|
10081
|
+
vars: vars$p
|
9491
10082
|
});
|
9492
10083
|
|
9493
|
-
const vars$
|
10084
|
+
const vars$o = LogoClass.cssVarList;
|
9494
10085
|
|
9495
10086
|
const logo$2 = {
|
9496
|
-
[vars$
|
10087
|
+
[vars$o.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
9497
10088
|
};
|
9498
10089
|
|
9499
10090
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
9500
10091
|
__proto__: null,
|
9501
10092
|
default: logo$2,
|
9502
|
-
vars: vars$
|
10093
|
+
vars: vars$o
|
9503
10094
|
});
|
9504
10095
|
|
9505
|
-
const vars$
|
10096
|
+
const vars$n = TotpImageClass.cssVarList;
|
9506
10097
|
|
9507
10098
|
const logo$1 = {
|
9508
|
-
[vars$
|
10099
|
+
[vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
9509
10100
|
};
|
9510
10101
|
|
9511
10102
|
var totpImage = /*#__PURE__*/Object.freeze({
|
9512
10103
|
__proto__: null,
|
9513
10104
|
default: logo$1,
|
9514
|
-
vars: vars$
|
10105
|
+
vars: vars$n
|
9515
10106
|
});
|
9516
10107
|
|
9517
|
-
const vars$
|
10108
|
+
const vars$m = NotpImageClass.cssVarList;
|
9518
10109
|
|
9519
10110
|
const logo = {
|
9520
|
-
[vars$
|
10111
|
+
[vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
9521
10112
|
};
|
9522
10113
|
|
9523
10114
|
var notpImage = /*#__PURE__*/Object.freeze({
|
9524
10115
|
__proto__: null,
|
9525
10116
|
default: logo,
|
9526
|
-
vars: vars$
|
10117
|
+
vars: vars$m
|
9527
10118
|
});
|
9528
10119
|
|
9529
|
-
const globalRefs$
|
9530
|
-
const vars$
|
10120
|
+
const globalRefs$d = getThemeRefs(globals);
|
10121
|
+
const vars$l = TextClass.cssVarList;
|
9531
10122
|
|
9532
10123
|
const text = {
|
9533
|
-
[vars$
|
9534
|
-
[vars$
|
9535
|
-
[vars$
|
9536
|
-
[vars$
|
10124
|
+
[vars$l.hostDirection]: globalRefs$d.direction,
|
10125
|
+
[vars$l.textLineHeight]: '1.35em',
|
10126
|
+
[vars$l.textAlign]: 'left',
|
10127
|
+
[vars$l.textColor]: globalRefs$d.colors.surface.dark,
|
9537
10128
|
variant: {
|
9538
10129
|
h1: {
|
9539
|
-
[vars$
|
9540
|
-
[vars$
|
9541
|
-
[vars$
|
10130
|
+
[vars$l.fontSize]: globalRefs$d.typography.h1.size,
|
10131
|
+
[vars$l.fontWeight]: globalRefs$d.typography.h1.weight,
|
10132
|
+
[vars$l.fontFamily]: globalRefs$d.typography.h1.font,
|
9542
10133
|
},
|
9543
10134
|
h2: {
|
9544
|
-
[vars$
|
9545
|
-
[vars$
|
9546
|
-
[vars$
|
10135
|
+
[vars$l.fontSize]: globalRefs$d.typography.h2.size,
|
10136
|
+
[vars$l.fontWeight]: globalRefs$d.typography.h2.weight,
|
10137
|
+
[vars$l.fontFamily]: globalRefs$d.typography.h2.font,
|
9547
10138
|
},
|
9548
10139
|
h3: {
|
9549
|
-
[vars$
|
9550
|
-
[vars$
|
9551
|
-
[vars$
|
10140
|
+
[vars$l.fontSize]: globalRefs$d.typography.h3.size,
|
10141
|
+
[vars$l.fontWeight]: globalRefs$d.typography.h3.weight,
|
10142
|
+
[vars$l.fontFamily]: globalRefs$d.typography.h3.font,
|
9552
10143
|
},
|
9553
10144
|
subtitle1: {
|
9554
|
-
[vars$
|
9555
|
-
[vars$
|
9556
|
-
[vars$
|
10145
|
+
[vars$l.fontSize]: globalRefs$d.typography.subtitle1.size,
|
10146
|
+
[vars$l.fontWeight]: globalRefs$d.typography.subtitle1.weight,
|
10147
|
+
[vars$l.fontFamily]: globalRefs$d.typography.subtitle1.font,
|
9557
10148
|
},
|
9558
10149
|
subtitle2: {
|
9559
|
-
[vars$
|
9560
|
-
[vars$
|
9561
|
-
[vars$
|
10150
|
+
[vars$l.fontSize]: globalRefs$d.typography.subtitle2.size,
|
10151
|
+
[vars$l.fontWeight]: globalRefs$d.typography.subtitle2.weight,
|
10152
|
+
[vars$l.fontFamily]: globalRefs$d.typography.subtitle2.font,
|
9562
10153
|
},
|
9563
10154
|
body1: {
|
9564
|
-
[vars$
|
9565
|
-
[vars$
|
9566
|
-
[vars$
|
10155
|
+
[vars$l.fontSize]: globalRefs$d.typography.body1.size,
|
10156
|
+
[vars$l.fontWeight]: globalRefs$d.typography.body1.weight,
|
10157
|
+
[vars$l.fontFamily]: globalRefs$d.typography.body1.font,
|
9567
10158
|
},
|
9568
10159
|
body2: {
|
9569
|
-
[vars$
|
9570
|
-
[vars$
|
9571
|
-
[vars$
|
10160
|
+
[vars$l.fontSize]: globalRefs$d.typography.body2.size,
|
10161
|
+
[vars$l.fontWeight]: globalRefs$d.typography.body2.weight,
|
10162
|
+
[vars$l.fontFamily]: globalRefs$d.typography.body2.font,
|
9572
10163
|
},
|
9573
10164
|
},
|
9574
10165
|
|
9575
10166
|
mode: {
|
9576
10167
|
primary: {
|
9577
|
-
[vars$
|
10168
|
+
[vars$l.textColor]: globalRefs$d.colors.surface.contrast,
|
9578
10169
|
},
|
9579
10170
|
secondary: {
|
9580
|
-
[vars$
|
10171
|
+
[vars$l.textColor]: globalRefs$d.colors.surface.dark,
|
9581
10172
|
},
|
9582
10173
|
error: {
|
9583
|
-
[vars$
|
10174
|
+
[vars$l.textColor]: globalRefs$d.colors.error.main,
|
9584
10175
|
},
|
9585
10176
|
success: {
|
9586
|
-
[vars$
|
10177
|
+
[vars$l.textColor]: globalRefs$d.colors.success.main,
|
9587
10178
|
},
|
9588
10179
|
},
|
9589
10180
|
|
9590
10181
|
textAlign: {
|
9591
|
-
right: { [vars$
|
9592
|
-
left: { [vars$
|
9593
|
-
center: { [vars$
|
10182
|
+
right: { [vars$l.textAlign]: 'right' },
|
10183
|
+
left: { [vars$l.textAlign]: 'left' },
|
10184
|
+
center: { [vars$l.textAlign]: 'center' },
|
9594
10185
|
},
|
9595
10186
|
|
9596
10187
|
_fullWidth: {
|
9597
|
-
[vars$
|
10188
|
+
[vars$l.hostWidth]: '100%',
|
9598
10189
|
},
|
9599
10190
|
|
9600
10191
|
_italic: {
|
9601
|
-
[vars$
|
10192
|
+
[vars$l.fontStyle]: 'italic',
|
9602
10193
|
},
|
9603
10194
|
|
9604
10195
|
_uppercase: {
|
9605
|
-
[vars$
|
10196
|
+
[vars$l.textTransform]: 'uppercase',
|
9606
10197
|
},
|
9607
10198
|
|
9608
10199
|
_lowercase: {
|
9609
|
-
[vars$
|
10200
|
+
[vars$l.textTransform]: 'lowercase',
|
9610
10201
|
},
|
9611
10202
|
};
|
9612
10203
|
|
9613
10204
|
var text$1 = /*#__PURE__*/Object.freeze({
|
9614
10205
|
__proto__: null,
|
9615
10206
|
default: text,
|
9616
|
-
vars: vars$
|
10207
|
+
vars: vars$l
|
9617
10208
|
});
|
9618
10209
|
|
9619
|
-
const globalRefs$
|
9620
|
-
const vars$
|
10210
|
+
const globalRefs$c = getThemeRefs(globals);
|
10211
|
+
const vars$k = LinkClass.cssVarList;
|
9621
10212
|
|
9622
10213
|
const link = {
|
9623
|
-
[vars$
|
9624
|
-
[vars$
|
10214
|
+
[vars$k.hostDirection]: globalRefs$c.direction,
|
10215
|
+
[vars$k.cursor]: 'pointer',
|
9625
10216
|
|
9626
|
-
[vars$
|
10217
|
+
[vars$k.textColor]: globalRefs$c.colors.primary.main,
|
9627
10218
|
|
9628
10219
|
textAlign: {
|
9629
|
-
right: { [vars$
|
9630
|
-
left: { [vars$
|
9631
|
-
center: { [vars$
|
10220
|
+
right: { [vars$k.textAlign]: 'right' },
|
10221
|
+
left: { [vars$k.textAlign]: 'left' },
|
10222
|
+
center: { [vars$k.textAlign]: 'center' },
|
9632
10223
|
},
|
9633
10224
|
|
9634
10225
|
_fullWidth: {
|
9635
|
-
[vars$
|
10226
|
+
[vars$k.hostWidth]: '100%',
|
9636
10227
|
},
|
9637
10228
|
|
9638
10229
|
mode: {
|
9639
10230
|
primary: {
|
9640
|
-
[vars$
|
10231
|
+
[vars$k.textColor]: globalRefs$c.colors.primary.main,
|
9641
10232
|
},
|
9642
10233
|
secondary: {
|
9643
|
-
[vars$
|
10234
|
+
[vars$k.textColor]: globalRefs$c.colors.secondary.main,
|
9644
10235
|
},
|
9645
10236
|
error: {
|
9646
|
-
[vars$
|
10237
|
+
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
9647
10238
|
},
|
9648
10239
|
success: {
|
9649
|
-
[vars$
|
10240
|
+
[vars$k.textColor]: globalRefs$c.colors.success.main,
|
9650
10241
|
},
|
9651
10242
|
},
|
9652
10243
|
};
|
@@ -9654,10 +10245,10 @@ const link = {
|
|
9654
10245
|
var link$1 = /*#__PURE__*/Object.freeze({
|
9655
10246
|
__proto__: null,
|
9656
10247
|
default: link,
|
9657
|
-
vars: vars$
|
10248
|
+
vars: vars$k
|
9658
10249
|
});
|
9659
10250
|
|
9660
|
-
const globalRefs$
|
10251
|
+
const globalRefs$b = getThemeRefs(globals);
|
9661
10252
|
const compVars$2 = DividerClass.cssVarList;
|
9662
10253
|
|
9663
10254
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -9665,18 +10256,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
9665
10256
|
thickness: '2px',
|
9666
10257
|
spacing: '10px',
|
9667
10258
|
},
|
9668
|
-
componentName$
|
10259
|
+
componentName$D
|
9669
10260
|
);
|
9670
10261
|
|
9671
10262
|
const divider = {
|
9672
10263
|
...helperTheme$1,
|
9673
10264
|
|
9674
|
-
[compVars$2.hostDirection]: globalRefs$
|
10265
|
+
[compVars$2.hostDirection]: globalRefs$b.direction,
|
9675
10266
|
[compVars$2.alignItems]: 'center',
|
9676
10267
|
[compVars$2.flexDirection]: 'row',
|
9677
10268
|
[compVars$2.alignSelf]: 'stretch',
|
9678
10269
|
[compVars$2.hostWidth]: '100%',
|
9679
|
-
[compVars$2.stripeColor]: globalRefs$
|
10270
|
+
[compVars$2.stripeColor]: globalRefs$b.colors.surface.light,
|
9680
10271
|
[compVars$2.stripeColorOpacity]: '0.5',
|
9681
10272
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
9682
10273
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -9696,7 +10287,7 @@ const divider = {
|
|
9696
10287
|
},
|
9697
10288
|
};
|
9698
10289
|
|
9699
|
-
const vars$
|
10290
|
+
const vars$j = {
|
9700
10291
|
...compVars$2,
|
9701
10292
|
...helperVars$1,
|
9702
10293
|
};
|
@@ -9704,111 +10295,111 @@ const vars$i = {
|
|
9704
10295
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
9705
10296
|
__proto__: null,
|
9706
10297
|
default: divider,
|
9707
|
-
vars: vars$
|
10298
|
+
vars: vars$j
|
9708
10299
|
});
|
9709
10300
|
|
9710
|
-
const vars$
|
10301
|
+
const vars$i = PasscodeClass.cssVarList;
|
9711
10302
|
|
9712
10303
|
const passcode = {
|
9713
|
-
[vars$
|
9714
|
-
[vars$
|
9715
|
-
[vars$
|
9716
|
-
[vars$
|
9717
|
-
[vars$
|
9718
|
-
[vars$
|
9719
|
-
[vars$
|
9720
|
-
[vars$
|
9721
|
-
[vars$
|
9722
|
-
[vars$
|
9723
|
-
[vars$
|
9724
|
-
[vars$
|
9725
|
-
[vars$
|
9726
|
-
[vars$
|
9727
|
-
[vars$
|
10304
|
+
[vars$i.hostDirection]: refs.direction,
|
10305
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
10306
|
+
[vars$i.fontSize]: refs.fontSize,
|
10307
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
10308
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
10309
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
10310
|
+
[vars$i.digitValueTextColor]: refs.valueTextColor,
|
10311
|
+
[vars$i.digitPadding]: '0',
|
10312
|
+
[vars$i.digitTextAlign]: 'center',
|
10313
|
+
[vars$i.digitSpacing]: '4px',
|
10314
|
+
[vars$i.hostWidth]: refs.width,
|
10315
|
+
[vars$i.digitOutlineColor]: 'transparent',
|
10316
|
+
[vars$i.digitOutlineWidth]: refs.outlineWidth,
|
10317
|
+
[vars$i.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
10318
|
+
[vars$i.digitSize]: refs.inputHeight,
|
9728
10319
|
|
9729
10320
|
size: {
|
9730
|
-
xs: { [vars$
|
9731
|
-
sm: { [vars$
|
9732
|
-
md: { [vars$
|
9733
|
-
lg: { [vars$
|
10321
|
+
xs: { [vars$i.spinnerSize]: '15px' },
|
10322
|
+
sm: { [vars$i.spinnerSize]: '20px' },
|
10323
|
+
md: { [vars$i.spinnerSize]: '20px' },
|
10324
|
+
lg: { [vars$i.spinnerSize]: '20px' },
|
9734
10325
|
},
|
9735
10326
|
|
9736
10327
|
_hideCursor: {
|
9737
|
-
[vars$
|
10328
|
+
[vars$i.digitCaretTextColor]: 'transparent',
|
9738
10329
|
},
|
9739
10330
|
|
9740
10331
|
_loading: {
|
9741
|
-
[vars$
|
10332
|
+
[vars$i.overlayOpacity]: refs.overlayOpacity,
|
9742
10333
|
},
|
9743
10334
|
};
|
9744
10335
|
|
9745
10336
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
9746
10337
|
__proto__: null,
|
9747
10338
|
default: passcode,
|
9748
|
-
vars: vars$
|
10339
|
+
vars: vars$i
|
9749
10340
|
});
|
9750
10341
|
|
9751
|
-
const globalRefs$
|
9752
|
-
const vars$
|
10342
|
+
const globalRefs$a = getThemeRefs(globals);
|
10343
|
+
const vars$h = LoaderLinearClass.cssVarList;
|
9753
10344
|
|
9754
10345
|
const loaderLinear = {
|
9755
|
-
[vars$
|
9756
|
-
[vars$
|
10346
|
+
[vars$h.hostDisplay]: 'inline-block',
|
10347
|
+
[vars$h.hostWidth]: '100%',
|
9757
10348
|
|
9758
|
-
[vars$
|
9759
|
-
[vars$
|
10349
|
+
[vars$h.barColor]: globalRefs$a.colors.surface.contrast,
|
10350
|
+
[vars$h.barWidth]: '20%',
|
9760
10351
|
|
9761
|
-
[vars$
|
9762
|
-
[vars$
|
10352
|
+
[vars$h.barBackgroundColor]: globalRefs$a.colors.surface.light,
|
10353
|
+
[vars$h.barBorderRadius]: '4px',
|
9763
10354
|
|
9764
|
-
[vars$
|
9765
|
-
[vars$
|
9766
|
-
[vars$
|
9767
|
-
[vars$
|
10355
|
+
[vars$h.animationDuration]: '2s',
|
10356
|
+
[vars$h.animationTimingFunction]: 'linear',
|
10357
|
+
[vars$h.animationIterationCount]: 'infinite',
|
10358
|
+
[vars$h.verticalPadding]: '0.25em',
|
9768
10359
|
|
9769
10360
|
size: {
|
9770
|
-
xs: { [vars$
|
9771
|
-
sm: { [vars$
|
9772
|
-
md: { [vars$
|
9773
|
-
lg: { [vars$
|
10361
|
+
xs: { [vars$h.barHeight]: '2px' },
|
10362
|
+
sm: { [vars$h.barHeight]: '4px' },
|
10363
|
+
md: { [vars$h.barHeight]: '6px' },
|
10364
|
+
lg: { [vars$h.barHeight]: '8px' },
|
9774
10365
|
},
|
9775
10366
|
|
9776
10367
|
mode: {
|
9777
10368
|
primary: {
|
9778
|
-
[vars$
|
10369
|
+
[vars$h.barColor]: globalRefs$a.colors.primary.main,
|
9779
10370
|
},
|
9780
10371
|
secondary: {
|
9781
|
-
[vars$
|
10372
|
+
[vars$h.barColor]: globalRefs$a.colors.secondary.main,
|
9782
10373
|
},
|
9783
10374
|
},
|
9784
10375
|
|
9785
10376
|
_hidden: {
|
9786
|
-
[vars$
|
10377
|
+
[vars$h.hostDisplay]: 'none',
|
9787
10378
|
},
|
9788
10379
|
};
|
9789
10380
|
|
9790
10381
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
9791
10382
|
__proto__: null,
|
9792
10383
|
default: loaderLinear,
|
9793
|
-
vars: vars$
|
10384
|
+
vars: vars$h
|
9794
10385
|
});
|
9795
10386
|
|
9796
|
-
const globalRefs$
|
10387
|
+
const globalRefs$9 = getThemeRefs(globals);
|
9797
10388
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
9798
10389
|
|
9799
10390
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
9800
10391
|
{
|
9801
|
-
spinnerColor: globalRefs$
|
10392
|
+
spinnerColor: globalRefs$9.colors.surface.contrast,
|
9802
10393
|
mode: {
|
9803
10394
|
primary: {
|
9804
|
-
spinnerColor: globalRefs$
|
10395
|
+
spinnerColor: globalRefs$9.colors.primary.main,
|
9805
10396
|
},
|
9806
10397
|
secondary: {
|
9807
|
-
spinnerColor: globalRefs$
|
10398
|
+
spinnerColor: globalRefs$9.colors.secondary.main,
|
9808
10399
|
},
|
9809
10400
|
},
|
9810
10401
|
},
|
9811
|
-
componentName$
|
10402
|
+
componentName$G
|
9812
10403
|
);
|
9813
10404
|
|
9814
10405
|
const loaderRadial = {
|
@@ -9837,7 +10428,7 @@ const loaderRadial = {
|
|
9837
10428
|
[compVars$1.hostDisplay]: 'none',
|
9838
10429
|
},
|
9839
10430
|
};
|
9840
|
-
const vars$
|
10431
|
+
const vars$g = {
|
9841
10432
|
...compVars$1,
|
9842
10433
|
...helperVars,
|
9843
10434
|
};
|
@@ -9845,78 +10436,114 @@ const vars$f = {
|
|
9845
10436
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
9846
10437
|
__proto__: null,
|
9847
10438
|
default: loaderRadial,
|
9848
|
-
vars: vars$
|
10439
|
+
vars: vars$g
|
9849
10440
|
});
|
9850
10441
|
|
9851
|
-
const globalRefs$
|
9852
|
-
const vars$
|
10442
|
+
const globalRefs$8 = getThemeRefs(globals);
|
10443
|
+
const vars$f = ComboBoxClass.cssVarList;
|
9853
10444
|
|
9854
10445
|
const comboBox = {
|
9855
|
-
[vars$
|
9856
|
-
[vars$
|
9857
|
-
[vars$
|
9858
|
-
[vars$
|
9859
|
-
[vars$
|
9860
|
-
[vars$
|
9861
|
-
[vars$
|
9862
|
-
[vars$
|
9863
|
-
[vars$
|
9864
|
-
[vars$
|
9865
|
-
[vars$
|
9866
|
-
[vars$
|
9867
|
-
[vars$
|
9868
|
-
[vars$
|
9869
|
-
[vars$
|
9870
|
-
[vars$
|
9871
|
-
[vars$
|
9872
|
-
[vars$
|
9873
|
-
[vars$
|
9874
|
-
[vars$
|
9875
|
-
[vars$
|
9876
|
-
[vars$
|
9877
|
-
[vars$
|
9878
|
-
[vars$
|
9879
|
-
[vars$
|
9880
|
-
[vars$
|
10446
|
+
[vars$f.hostWidth]: refs.width,
|
10447
|
+
[vars$f.hostDirection]: refs.direction,
|
10448
|
+
[vars$f.fontSize]: refs.fontSize,
|
10449
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
10450
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
10451
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
10452
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
10453
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
10454
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
10455
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
10456
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
10457
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
10458
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
10459
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
10460
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
10461
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
10462
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10463
|
+
[vars$f.inputBackgroundColor]: refs.backgroundColor,
|
10464
|
+
[vars$f.inputHorizontalPadding]: refs.horizontalPadding,
|
10465
|
+
[vars$f.inputHeight]: refs.inputHeight,
|
10466
|
+
[vars$f.inputDropdownButtonColor]: globalRefs$8.colors.surface.dark,
|
10467
|
+
[vars$f.inputDropdownButtonCursor]: 'pointer',
|
10468
|
+
[vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
|
10469
|
+
[vars$f.inputDropdownButtonOffset]: globalRefs$8.spacing.xs,
|
10470
|
+
[vars$f.overlayItemPaddingInlineStart]: globalRefs$8.spacing.xs,
|
10471
|
+
[vars$f.overlayItemPaddingInlineEnd]: globalRefs$8.spacing.lg,
|
9881
10472
|
|
9882
10473
|
_readonly: {
|
9883
|
-
[vars$
|
10474
|
+
[vars$f.inputDropdownButtonCursor]: 'default',
|
9884
10475
|
},
|
9885
10476
|
|
9886
10477
|
// Overlay theme exposed via the component:
|
9887
|
-
[vars$
|
9888
|
-
[vars$
|
9889
|
-
[vars$
|
9890
|
-
[vars$
|
9891
|
-
[vars$
|
9892
|
-
[vars$
|
10478
|
+
[vars$f.overlayFontSize]: refs.fontSize,
|
10479
|
+
[vars$f.overlayFontFamily]: refs.fontFamily,
|
10480
|
+
[vars$f.overlayCursor]: 'pointer',
|
10481
|
+
[vars$f.overlayItemBoxShadow]: 'none',
|
10482
|
+
[vars$f.overlayBackground]: refs.backgroundColor,
|
10483
|
+
[vars$f.overlayTextColor]: refs.valueTextColor,
|
9893
10484
|
|
9894
10485
|
// Overlay direct theme:
|
9895
|
-
[vars$
|
9896
|
-
[vars$
|
10486
|
+
[vars$f.overlay.minHeight]: '400px',
|
10487
|
+
[vars$f.overlay.margin]: '0',
|
9897
10488
|
};
|
9898
10489
|
|
9899
10490
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
9900
10491
|
__proto__: null,
|
9901
10492
|
comboBox: comboBox,
|
9902
10493
|
default: comboBox,
|
9903
|
-
vars: vars$
|
10494
|
+
vars: vars$f
|
9904
10495
|
});
|
9905
10496
|
|
9906
|
-
const vars$
|
10497
|
+
const vars$e = ImageClass.cssVarList;
|
9907
10498
|
|
9908
10499
|
const image = {};
|
9909
10500
|
|
9910
10501
|
var image$1 = /*#__PURE__*/Object.freeze({
|
9911
10502
|
__proto__: null,
|
9912
10503
|
default: image,
|
9913
|
-
vars: vars$
|
10504
|
+
vars: vars$e
|
9914
10505
|
});
|
9915
10506
|
|
9916
|
-
const vars$
|
10507
|
+
const vars$d = PhoneFieldClass.cssVarList;
|
9917
10508
|
|
9918
10509
|
const phoneField = {
|
9919
|
-
[vars$
|
10510
|
+
[vars$d.hostWidth]: refs.width,
|
10511
|
+
[vars$d.hostDirection]: refs.direction,
|
10512
|
+
[vars$d.fontSize]: refs.fontSize,
|
10513
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
10514
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
10515
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
10516
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
10517
|
+
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
10518
|
+
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10519
|
+
[vars$d.inputBorderStyle]: refs.borderStyle,
|
10520
|
+
[vars$d.inputBorderWidth]: refs.borderWidth,
|
10521
|
+
[vars$d.inputBorderColor]: refs.borderColor,
|
10522
|
+
[vars$d.inputBorderRadius]: refs.borderRadius,
|
10523
|
+
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
10524
|
+
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
10525
|
+
[vars$d.inputOutlineColor]: refs.outlineColor,
|
10526
|
+
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
10527
|
+
[vars$d.phoneInputWidth]: refs.minWidth,
|
10528
|
+
[vars$d.countryCodeInputWidth]: '5em',
|
10529
|
+
[vars$d.countryCodeDropdownWidth]: '20em',
|
10530
|
+
|
10531
|
+
// '@overlay': {
|
10532
|
+
// overlayItemBackgroundColor: 'red'
|
10533
|
+
// }
|
10534
|
+
};
|
10535
|
+
|
10536
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
10537
|
+
__proto__: null,
|
10538
|
+
default: phoneField,
|
10539
|
+
vars: vars$d
|
10540
|
+
});
|
10541
|
+
|
10542
|
+
const vars$c = PhoneFieldInputBoxClass.cssVarList;
|
10543
|
+
|
10544
|
+
const phoneInputBoxField = {
|
10545
|
+
[vars$c.hostWidth]: '16em',
|
10546
|
+
[vars$c.hostMinWidth]: refs.minWidth,
|
9920
10547
|
[vars$c.hostDirection]: refs.direction,
|
9921
10548
|
[vars$c.fontSize]: refs.fontSize,
|
9922
10549
|
[vars$c.fontFamily]: refs.fontFamily,
|
@@ -9933,180 +10560,144 @@ const phoneField = {
|
|
9933
10560
|
[vars$c.inputOutlineWidth]: refs.outlineWidth,
|
9934
10561
|
[vars$c.inputOutlineColor]: refs.outlineColor,
|
9935
10562
|
[vars$c.inputOutlineOffset]: refs.outlineOffset,
|
9936
|
-
|
9937
|
-
|
9938
|
-
|
9939
|
-
|
9940
|
-
// '@overlay': {
|
9941
|
-
// overlayItemBackgroundColor: 'red'
|
9942
|
-
// }
|
10563
|
+
_fullWidth: {
|
10564
|
+
[vars$c.hostWidth]: refs.width,
|
10565
|
+
},
|
9943
10566
|
};
|
9944
10567
|
|
9945
|
-
var
|
10568
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
9946
10569
|
__proto__: null,
|
9947
|
-
default:
|
10570
|
+
default: phoneInputBoxField,
|
9948
10571
|
vars: vars$c
|
9949
10572
|
});
|
9950
10573
|
|
9951
|
-
const vars$b =
|
10574
|
+
const vars$b = NewPasswordClass.cssVarList;
|
9952
10575
|
|
9953
|
-
const
|
9954
|
-
[vars$b.hostWidth]:
|
10576
|
+
const newPassword = {
|
10577
|
+
[vars$b.hostWidth]: refs.width,
|
9955
10578
|
[vars$b.hostMinWidth]: refs.minWidth,
|
9956
10579
|
[vars$b.hostDirection]: refs.direction,
|
9957
10580
|
[vars$b.fontSize]: refs.fontSize,
|
9958
10581
|
[vars$b.fontFamily]: refs.fontFamily,
|
9959
|
-
[vars$b.
|
9960
|
-
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
10582
|
+
[vars$b.spaceBetweenInputs]: '1em',
|
9961
10583
|
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
9962
|
-
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
9963
|
-
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9964
|
-
[vars$b.inputBorderStyle]: refs.borderStyle,
|
9965
|
-
[vars$b.inputBorderWidth]: refs.borderWidth,
|
9966
|
-
[vars$b.inputBorderColor]: refs.borderColor,
|
9967
|
-
[vars$b.inputBorderRadius]: refs.borderRadius,
|
9968
|
-
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
9969
|
-
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
9970
|
-
[vars$b.inputOutlineColor]: refs.outlineColor,
|
9971
|
-
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
9972
|
-
_fullWidth: {
|
9973
|
-
[vars$b.hostWidth]: refs.width,
|
9974
|
-
},
|
9975
|
-
};
|
9976
|
-
|
9977
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
9978
|
-
__proto__: null,
|
9979
|
-
default: phoneInputBoxField,
|
9980
|
-
vars: vars$b
|
9981
|
-
});
|
9982
|
-
|
9983
|
-
const vars$a = NewPasswordClass.cssVarList;
|
9984
|
-
|
9985
|
-
const newPassword = {
|
9986
|
-
[vars$a.hostWidth]: refs.width,
|
9987
|
-
[vars$a.hostMinWidth]: refs.minWidth,
|
9988
|
-
[vars$a.hostDirection]: refs.direction,
|
9989
|
-
[vars$a.fontSize]: refs.fontSize,
|
9990
|
-
[vars$a.fontFamily]: refs.fontFamily,
|
9991
|
-
[vars$a.spaceBetweenInputs]: '1em',
|
9992
|
-
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
9993
10584
|
|
9994
10585
|
_required: {
|
9995
10586
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
9996
10587
|
// That's why we fake the required indicator on each input.
|
9997
10588
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
9998
|
-
[vars$
|
10589
|
+
[vars$b.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
9999
10590
|
},
|
10000
10591
|
};
|
10001
10592
|
|
10002
10593
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
10003
10594
|
__proto__: null,
|
10004
10595
|
default: newPassword,
|
10005
|
-
vars: vars$
|
10596
|
+
vars: vars$b
|
10006
10597
|
});
|
10007
10598
|
|
10008
|
-
const vars$
|
10599
|
+
const vars$a = UploadFileClass.cssVarList;
|
10009
10600
|
|
10010
10601
|
const uploadFile = {
|
10011
|
-
[vars$
|
10012
|
-
[vars$
|
10013
|
-
[vars$
|
10602
|
+
[vars$a.hostDirection]: refs.direction,
|
10603
|
+
[vars$a.labelTextColor]: refs.labelTextColor,
|
10604
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
10014
10605
|
|
10015
|
-
[vars$
|
10606
|
+
[vars$a.iconSize]: '2em',
|
10016
10607
|
|
10017
|
-
[vars$
|
10018
|
-
[vars$
|
10608
|
+
[vars$a.hostPadding]: '0.75em',
|
10609
|
+
[vars$a.gap]: '0.5em',
|
10019
10610
|
|
10020
|
-
[vars$
|
10021
|
-
[vars$
|
10022
|
-
[vars$
|
10611
|
+
[vars$a.fontSize]: '16px',
|
10612
|
+
[vars$a.titleFontWeight]: '500',
|
10613
|
+
[vars$a.lineHeight]: '1em',
|
10023
10614
|
|
10024
|
-
[vars$
|
10025
|
-
[vars$
|
10026
|
-
[vars$
|
10027
|
-
[vars$
|
10615
|
+
[vars$a.borderWidth]: refs.borderWidth,
|
10616
|
+
[vars$a.borderColor]: refs.borderColor,
|
10617
|
+
[vars$a.borderRadius]: refs.borderRadius,
|
10618
|
+
[vars$a.borderStyle]: 'dashed',
|
10028
10619
|
|
10029
10620
|
_required: {
|
10030
|
-
[vars$
|
10621
|
+
[vars$a.requiredIndicator]: refs.requiredIndicator,
|
10031
10622
|
},
|
10032
10623
|
|
10033
10624
|
size: {
|
10034
10625
|
xs: {
|
10035
|
-
[vars$
|
10036
|
-
[vars$
|
10037
|
-
[vars$
|
10038
|
-
[vars$
|
10039
|
-
[vars$
|
10626
|
+
[vars$a.hostHeight]: '196px',
|
10627
|
+
[vars$a.hostWidth]: '200px',
|
10628
|
+
[vars$a.titleFontSize]: '0.875em',
|
10629
|
+
[vars$a.descriptionFontSize]: '0.875em',
|
10630
|
+
[vars$a.lineHeight]: '1.25em',
|
10040
10631
|
},
|
10041
10632
|
sm: {
|
10042
|
-
[vars$
|
10043
|
-
[vars$
|
10044
|
-
[vars$
|
10045
|
-
[vars$
|
10046
|
-
[vars$
|
10633
|
+
[vars$a.hostHeight]: '216px',
|
10634
|
+
[vars$a.hostWidth]: '230px',
|
10635
|
+
[vars$a.titleFontSize]: '1em',
|
10636
|
+
[vars$a.descriptionFontSize]: '0.875em',
|
10637
|
+
[vars$a.lineHeight]: '1.25em',
|
10047
10638
|
},
|
10048
10639
|
md: {
|
10049
|
-
[vars$
|
10050
|
-
[vars$
|
10051
|
-
[vars$
|
10052
|
-
[vars$
|
10053
|
-
[vars$
|
10640
|
+
[vars$a.hostHeight]: '256px',
|
10641
|
+
[vars$a.hostWidth]: '312px',
|
10642
|
+
[vars$a.titleFontSize]: '1.125em',
|
10643
|
+
[vars$a.descriptionFontSize]: '1em',
|
10644
|
+
[vars$a.lineHeight]: '1.5em',
|
10054
10645
|
},
|
10055
10646
|
lg: {
|
10056
|
-
[vars$
|
10057
|
-
[vars$
|
10058
|
-
[vars$
|
10059
|
-
[vars$
|
10060
|
-
[vars$
|
10647
|
+
[vars$a.hostHeight]: '280px',
|
10648
|
+
[vars$a.hostWidth]: '336px',
|
10649
|
+
[vars$a.titleFontSize]: '1.125em',
|
10650
|
+
[vars$a.descriptionFontSize]: '1.125em',
|
10651
|
+
[vars$a.lineHeight]: '1.75em',
|
10061
10652
|
},
|
10062
10653
|
},
|
10063
10654
|
|
10064
10655
|
_fullWidth: {
|
10065
|
-
[vars$
|
10656
|
+
[vars$a.hostWidth]: refs.width,
|
10066
10657
|
},
|
10067
10658
|
};
|
10068
10659
|
|
10069
10660
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
10070
10661
|
__proto__: null,
|
10071
10662
|
default: uploadFile,
|
10072
|
-
vars: vars$
|
10663
|
+
vars: vars$a
|
10073
10664
|
});
|
10074
10665
|
|
10075
|
-
const globalRefs$
|
10666
|
+
const globalRefs$7 = getThemeRefs(globals);
|
10076
10667
|
|
10077
|
-
const vars$
|
10668
|
+
const vars$9 = ButtonSelectionGroupItemClass.cssVarList;
|
10078
10669
|
|
10079
10670
|
const buttonSelectionGroupItem = {
|
10080
|
-
[vars$
|
10081
|
-
[vars$
|
10082
|
-
[vars$
|
10083
|
-
[vars$
|
10084
|
-
[vars$
|
10085
|
-
[vars$
|
10086
|
-
[vars$
|
10671
|
+
[vars$9.hostDirection]: 'inherit',
|
10672
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
|
10673
|
+
[vars$9.labelTextColor]: globalRefs$7.colors.surface.contrast,
|
10674
|
+
[vars$9.borderColor]: globalRefs$7.colors.surface.light,
|
10675
|
+
[vars$9.borderStyle]: 'solid',
|
10676
|
+
[vars$9.borderRadius]: globalRefs$7.radius.sm,
|
10677
|
+
[vars$9.outlineColor]: 'transparent',
|
10087
10678
|
|
10088
10679
|
_hover: {
|
10089
|
-
[vars$
|
10680
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.highlight,
|
10090
10681
|
},
|
10091
10682
|
|
10092
10683
|
_focused: {
|
10093
|
-
[vars$
|
10684
|
+
[vars$9.outlineColor]: globalRefs$7.colors.surface.light,
|
10094
10685
|
},
|
10095
10686
|
|
10096
10687
|
_selected: {
|
10097
|
-
[vars$
|
10098
|
-
[vars$
|
10099
|
-
[vars$
|
10688
|
+
[vars$9.borderColor]: globalRefs$7.colors.surface.contrast,
|
10689
|
+
[vars$9.backgroundColor]: globalRefs$7.colors.surface.contrast,
|
10690
|
+
[vars$9.labelTextColor]: globalRefs$7.colors.surface.main,
|
10100
10691
|
},
|
10101
10692
|
};
|
10102
10693
|
|
10103
10694
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
10104
10695
|
__proto__: null,
|
10105
10696
|
default: buttonSelectionGroupItem,
|
10106
|
-
vars: vars$
|
10697
|
+
vars: vars$9
|
10107
10698
|
});
|
10108
10699
|
|
10109
|
-
const globalRefs$
|
10700
|
+
const globalRefs$6 = getThemeRefs(globals);
|
10110
10701
|
|
10111
10702
|
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
10112
10703
|
[vars.hostDirection]: refs.direction,
|
@@ -10114,84 +10705,84 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
10114
10705
|
[vars.labelTextColor]: refs.labelTextColor,
|
10115
10706
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
10116
10707
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
10117
|
-
[vars.itemsSpacing]: globalRefs$
|
10708
|
+
[vars.itemsSpacing]: globalRefs$6.spacing.sm,
|
10118
10709
|
[vars.hostWidth]: refs.width,
|
10119
10710
|
});
|
10120
10711
|
|
10121
|
-
const vars$
|
10712
|
+
const vars$8 = ButtonSelectionGroupClass.cssVarList;
|
10122
10713
|
|
10123
10714
|
const buttonSelectionGroup = {
|
10124
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
10715
|
+
...createBaseButtonSelectionGroupMappings(vars$8),
|
10125
10716
|
};
|
10126
10717
|
|
10127
10718
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10128
10719
|
__proto__: null,
|
10129
10720
|
default: buttonSelectionGroup,
|
10130
|
-
vars: vars$
|
10721
|
+
vars: vars$8
|
10131
10722
|
});
|
10132
10723
|
|
10133
|
-
const vars$
|
10724
|
+
const vars$7 = ButtonMultiSelectionGroupClass.cssVarList;
|
10134
10725
|
|
10135
10726
|
const buttonMultiSelectionGroup = {
|
10136
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
10727
|
+
...createBaseButtonSelectionGroupMappings(vars$7),
|
10137
10728
|
};
|
10138
10729
|
|
10139
10730
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
10140
10731
|
__proto__: null,
|
10141
10732
|
default: buttonMultiSelectionGroup,
|
10142
|
-
vars: vars$
|
10733
|
+
vars: vars$7
|
10143
10734
|
});
|
10144
10735
|
|
10145
|
-
const globalRefs$
|
10736
|
+
const globalRefs$5 = getThemeRefs(globals);
|
10146
10737
|
|
10147
10738
|
const compVars = ModalClass.cssVarList;
|
10148
10739
|
|
10149
10740
|
const modal = {
|
10150
|
-
[compVars.overlayBackgroundColor]: globalRefs$
|
10151
|
-
[compVars.overlayShadow]: globalRefs$
|
10741
|
+
[compVars.overlayBackgroundColor]: globalRefs$5.colors.surface.main,
|
10742
|
+
[compVars.overlayShadow]: globalRefs$5.shadow.wide['2xl'],
|
10152
10743
|
[compVars.overlayWidth]: '540px',
|
10153
10744
|
};
|
10154
10745
|
|
10155
|
-
const vars$
|
10746
|
+
const vars$6 = {
|
10156
10747
|
...compVars,
|
10157
10748
|
};
|
10158
10749
|
|
10159
10750
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
10160
10751
|
__proto__: null,
|
10161
10752
|
default: modal,
|
10162
|
-
vars: vars$
|
10753
|
+
vars: vars$6
|
10163
10754
|
});
|
10164
10755
|
|
10165
|
-
const globalRefs$
|
10166
|
-
const vars$
|
10756
|
+
const globalRefs$4 = getThemeRefs(globals);
|
10757
|
+
const vars$5 = GridClass.cssVarList;
|
10167
10758
|
|
10168
10759
|
const grid = {
|
10169
|
-
[vars$
|
10170
|
-
[vars$
|
10171
|
-
[vars$
|
10172
|
-
[vars$
|
10173
|
-
[vars$
|
10760
|
+
[vars$5.hostWidth]: '100%',
|
10761
|
+
[vars$5.hostHeight]: '100%',
|
10762
|
+
[vars$5.hostMinHeight]: '400px',
|
10763
|
+
[vars$5.fontWeight]: '400',
|
10764
|
+
[vars$5.backgroundColor]: globalRefs$4.colors.surface.main,
|
10174
10765
|
|
10175
|
-
[vars$
|
10176
|
-
[vars$
|
10766
|
+
[vars$5.fontSize]: refs.fontSize,
|
10767
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
10177
10768
|
|
10178
|
-
[vars$
|
10179
|
-
[vars$
|
10180
|
-
[vars$
|
10769
|
+
[vars$5.sortIndicatorsColor]: globalRefs$4.colors.surface.light,
|
10770
|
+
[vars$5.activeSortIndicator]: globalRefs$4.colors.surface.dark,
|
10771
|
+
[vars$5.resizeHandleColor]: globalRefs$4.colors.surface.light,
|
10181
10772
|
|
10182
|
-
[vars$
|
10183
|
-
[vars$
|
10184
|
-
[vars$
|
10185
|
-
[vars$
|
10773
|
+
[vars$5.borderWidth]: refs.borderWidth,
|
10774
|
+
[vars$5.borderStyle]: refs.borderStyle,
|
10775
|
+
[vars$5.borderRadius]: refs.borderRadius,
|
10776
|
+
[vars$5.borderColor]: 'transparent',
|
10186
10777
|
|
10187
|
-
[vars$
|
10188
|
-
[vars$
|
10778
|
+
[vars$5.headerRowTextColor]: globalRefs$4.colors.surface.dark,
|
10779
|
+
[vars$5.separatorColor]: globalRefs$4.colors.surface.light,
|
10189
10780
|
|
10190
|
-
[vars$
|
10191
|
-
[vars$
|
10781
|
+
[vars$5.valueTextColor]: globalRefs$4.colors.surface.contrast,
|
10782
|
+
[vars$5.selectedBackgroundColor]: globalRefs$4.colors.surface.highlight,
|
10192
10783
|
|
10193
10784
|
_bordered: {
|
10194
|
-
[vars$
|
10785
|
+
[vars$5.borderColor]: refs.borderColor,
|
10195
10786
|
},
|
10196
10787
|
};
|
10197
10788
|
|
@@ -10199,53 +10790,53 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
10199
10790
|
__proto__: null,
|
10200
10791
|
default: grid,
|
10201
10792
|
grid: grid,
|
10202
|
-
vars: vars$
|
10793
|
+
vars: vars$5
|
10203
10794
|
});
|
10204
10795
|
|
10205
|
-
const globalRefs$
|
10206
|
-
const vars$
|
10796
|
+
const globalRefs$3 = getThemeRefs(globals);
|
10797
|
+
const vars$4 = NotificationCardClass.cssVarList;
|
10207
10798
|
|
10208
10799
|
const shadowColor = '#00000020';
|
10209
10800
|
|
10210
10801
|
const notification = {
|
10211
|
-
[vars$
|
10212
|
-
[vars$
|
10213
|
-
[vars$
|
10214
|
-
[vars$
|
10215
|
-
[vars$
|
10216
|
-
[vars$
|
10217
|
-
[vars$
|
10218
|
-
[vars$
|
10219
|
-
[vars$
|
10802
|
+
[vars$4.hostMinWidth]: '415px',
|
10803
|
+
[vars$4.fontFamily]: globalRefs$3.fonts.font1.family,
|
10804
|
+
[vars$4.fontSize]: globalRefs$3.typography.body1.size,
|
10805
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
|
10806
|
+
[vars$4.textColor]: globalRefs$3.colors.surface.contrast,
|
10807
|
+
[vars$4.boxShadow]: `${globalRefs$3.shadow.wide.xl} ${shadowColor}, ${globalRefs$3.shadow.narrow.xl} ${shadowColor}`,
|
10808
|
+
[vars$4.verticalPadding]: '0.625em',
|
10809
|
+
[vars$4.horizontalPadding]: '1.5em',
|
10810
|
+
[vars$4.borderRadius]: globalRefs$3.radius.xs,
|
10220
10811
|
|
10221
10812
|
_bordered: {
|
10222
|
-
[vars$
|
10223
|
-
[vars$
|
10224
|
-
[vars$
|
10813
|
+
[vars$4.borderWidth]: globalRefs$3.border.sm,
|
10814
|
+
[vars$4.borderStyle]: 'solid',
|
10815
|
+
[vars$4.borderColor]: 'transparent',
|
10225
10816
|
},
|
10226
10817
|
|
10227
10818
|
size: {
|
10228
|
-
xs: { [vars$
|
10229
|
-
sm: { [vars$
|
10230
|
-
md: { [vars$
|
10231
|
-
lg: { [vars$
|
10819
|
+
xs: { [vars$4.fontSize]: '12px' },
|
10820
|
+
sm: { [vars$4.fontSize]: '14px' },
|
10821
|
+
md: { [vars$4.fontSize]: '16px' },
|
10822
|
+
lg: { [vars$4.fontSize]: '18px' },
|
10232
10823
|
},
|
10233
10824
|
|
10234
10825
|
mode: {
|
10235
10826
|
primary: {
|
10236
|
-
[vars$
|
10237
|
-
[vars$
|
10238
|
-
[vars$
|
10827
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.primary.main,
|
10828
|
+
[vars$4.textColor]: globalRefs$3.colors.primary.contrast,
|
10829
|
+
[vars$4.borderColor]: globalRefs$3.colors.primary.light,
|
10239
10830
|
},
|
10240
10831
|
success: {
|
10241
|
-
[vars$
|
10242
|
-
[vars$
|
10243
|
-
[vars$
|
10832
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.success.main,
|
10833
|
+
[vars$4.textColor]: globalRefs$3.colors.success.contrast,
|
10834
|
+
[vars$4.borderColor]: globalRefs$3.colors.success.light,
|
10244
10835
|
},
|
10245
10836
|
error: {
|
10246
|
-
[vars$
|
10247
|
-
[vars$
|
10248
|
-
[vars$
|
10837
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.error.main,
|
10838
|
+
[vars$4.textColor]: globalRefs$3.colors.error.contrast,
|
10839
|
+
[vars$4.borderColor]: globalRefs$3.colors.error.light,
|
10249
10840
|
},
|
10250
10841
|
},
|
10251
10842
|
};
|
@@ -10253,128 +10844,128 @@ const notification = {
|
|
10253
10844
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
10254
10845
|
__proto__: null,
|
10255
10846
|
default: notification,
|
10256
|
-
vars: vars$
|
10847
|
+
vars: vars$4
|
10257
10848
|
});
|
10258
10849
|
|
10259
|
-
const globalRefs$
|
10260
|
-
const vars$
|
10850
|
+
const globalRefs$2 = getThemeRefs(globals);
|
10851
|
+
const vars$3 = MultiSelectComboBoxClass.cssVarList;
|
10261
10852
|
|
10262
10853
|
const multiSelectComboBox = {
|
10263
|
-
[vars$
|
10264
|
-
[vars$
|
10265
|
-
[vars$
|
10266
|
-
[vars$
|
10267
|
-
[vars$
|
10268
|
-
[vars$
|
10269
|
-
[vars$
|
10270
|
-
[vars$
|
10271
|
-
[vars$
|
10272
|
-
[vars$
|
10273
|
-
[vars$
|
10274
|
-
[vars$
|
10275
|
-
[vars$
|
10276
|
-
[vars$
|
10277
|
-
[vars$
|
10278
|
-
[vars$
|
10279
|
-
[vars$
|
10280
|
-
[vars$
|
10281
|
-
[vars$
|
10282
|
-
[vars$
|
10283
|
-
[vars$
|
10284
|
-
[vars$
|
10285
|
-
[vars$
|
10286
|
-
[vars$
|
10287
|
-
[vars$
|
10288
|
-
[vars$
|
10289
|
-
[vars$
|
10290
|
-
[vars$
|
10291
|
-
[vars$
|
10292
|
-
[vars$
|
10854
|
+
[vars$3.hostWidth]: refs.width,
|
10855
|
+
[vars$3.hostDirection]: refs.direction,
|
10856
|
+
[vars$3.fontSize]: refs.fontSize,
|
10857
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
10858
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
10859
|
+
[vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
|
10860
|
+
[vars$3.inputBorderColor]: refs.borderColor,
|
10861
|
+
[vars$3.inputBorderWidth]: refs.borderWidth,
|
10862
|
+
[vars$3.inputBorderStyle]: refs.borderStyle,
|
10863
|
+
[vars$3.inputBorderRadius]: refs.borderRadius,
|
10864
|
+
[vars$3.inputOutlineColor]: refs.outlineColor,
|
10865
|
+
[vars$3.inputOutlineOffset]: refs.outlineOffset,
|
10866
|
+
[vars$3.inputOutlineWidth]: refs.outlineWidth,
|
10867
|
+
[vars$3.inputOutlineStyle]: refs.outlineStyle,
|
10868
|
+
[vars$3.labelRequiredIndicator]: refs.requiredIndicator,
|
10869
|
+
[vars$3.inputValueTextColor]: refs.valueTextColor,
|
10870
|
+
[vars$3.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
10871
|
+
[vars$3.inputBackgroundColor]: refs.backgroundColor,
|
10872
|
+
[vars$3.inputHorizontalPadding]: refs.horizontalPadding,
|
10873
|
+
[vars$3.inputVerticalPadding]: refs.verticalPadding,
|
10874
|
+
[vars$3.inputHeight]: refs.inputHeight,
|
10875
|
+
[vars$3.inputDropdownButtonColor]: globalRefs$2.colors.surface.dark,
|
10876
|
+
[vars$3.inputDropdownButtonCursor]: 'pointer',
|
10877
|
+
[vars$3.inputDropdownButtonSize]: refs.toggleButtonSize,
|
10878
|
+
[vars$3.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
|
10879
|
+
[vars$3.overlayItemPaddingInlineStart]: globalRefs$2.spacing.xs,
|
10880
|
+
[vars$3.overlayItemPaddingInlineEnd]: globalRefs$2.spacing.lg,
|
10881
|
+
[vars$3.chipFontSize]: refs.chipFontSize,
|
10882
|
+
[vars$3.chipTextColor]: globalRefs$2.colors.surface.contrast,
|
10883
|
+
[vars$3.chipBackgroundColor]: globalRefs$2.colors.surface.light,
|
10293
10884
|
|
10294
10885
|
_readonly: {
|
10295
|
-
[vars$
|
10886
|
+
[vars$3.inputDropdownButtonCursor]: 'default',
|
10296
10887
|
},
|
10297
10888
|
|
10298
10889
|
// Overlay theme exposed via the component:
|
10299
|
-
[vars$
|
10300
|
-
[vars$
|
10301
|
-
[vars$
|
10302
|
-
[vars$
|
10303
|
-
[vars$
|
10304
|
-
[vars$
|
10890
|
+
[vars$3.overlayFontSize]: refs.fontSize,
|
10891
|
+
[vars$3.overlayFontFamily]: refs.fontFamily,
|
10892
|
+
[vars$3.overlayCursor]: 'pointer',
|
10893
|
+
[vars$3.overlayItemBoxShadow]: 'none',
|
10894
|
+
[vars$3.overlayBackground]: refs.backgroundColor,
|
10895
|
+
[vars$3.overlayTextColor]: refs.valueTextColor,
|
10305
10896
|
|
10306
10897
|
// Overlay direct theme:
|
10307
|
-
[vars$
|
10308
|
-
[vars$
|
10898
|
+
[vars$3.overlay.minHeight]: '400px',
|
10899
|
+
[vars$3.overlay.margin]: '0',
|
10309
10900
|
};
|
10310
10901
|
|
10311
10902
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
10312
10903
|
__proto__: null,
|
10313
10904
|
default: multiSelectComboBox,
|
10314
10905
|
multiSelectComboBox: multiSelectComboBox,
|
10315
|
-
vars: vars$
|
10906
|
+
vars: vars$3
|
10316
10907
|
});
|
10317
10908
|
|
10318
|
-
const globalRefs = getThemeRefs(globals);
|
10319
|
-
const vars$
|
10909
|
+
const globalRefs$1 = getThemeRefs(globals);
|
10910
|
+
const vars$2 = BadgeClass.cssVarList;
|
10320
10911
|
|
10321
10912
|
const badge = {
|
10322
|
-
[vars$
|
10323
|
-
[vars$
|
10913
|
+
[vars$2.hostWidth]: 'fit-content',
|
10914
|
+
[vars$2.hostDirection]: globalRefs$1.direction,
|
10324
10915
|
|
10325
|
-
[vars$
|
10916
|
+
[vars$2.textAlign]: 'center',
|
10326
10917
|
|
10327
|
-
[vars$
|
10328
|
-
[vars$
|
10918
|
+
[vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
|
10919
|
+
[vars$2.fontWeight]: '400',
|
10329
10920
|
|
10330
|
-
[vars$
|
10331
|
-
[vars$
|
10921
|
+
[vars$2.verticalPadding]: '0.25em',
|
10922
|
+
[vars$2.horizontalPadding]: '0.5em',
|
10332
10923
|
|
10333
|
-
[vars$
|
10334
|
-
[vars$
|
10335
|
-
[vars$
|
10336
|
-
[vars$
|
10924
|
+
[vars$2.borderWidth]: globalRefs$1.border.xs,
|
10925
|
+
[vars$2.borderRadius]: globalRefs$1.radius.xs,
|
10926
|
+
[vars$2.borderColor]: 'transparent',
|
10927
|
+
[vars$2.borderStyle]: 'solid',
|
10337
10928
|
|
10338
10929
|
_fullWidth: {
|
10339
|
-
[vars$
|
10930
|
+
[vars$2.hostWidth]: '100%',
|
10340
10931
|
},
|
10341
10932
|
|
10342
10933
|
size: {
|
10343
|
-
xs: { [vars$
|
10344
|
-
sm: { [vars$
|
10345
|
-
md: { [vars$
|
10346
|
-
lg: { [vars$
|
10934
|
+
xs: { [vars$2.fontSize]: '12px' },
|
10935
|
+
sm: { [vars$2.fontSize]: '14px' },
|
10936
|
+
md: { [vars$2.fontSize]: '16px' },
|
10937
|
+
lg: { [vars$2.fontSize]: '18px' },
|
10347
10938
|
},
|
10348
10939
|
|
10349
10940
|
mode: {
|
10350
10941
|
default: {
|
10351
|
-
[vars$
|
10942
|
+
[vars$2.textColor]: globalRefs$1.colors.surface.dark,
|
10352
10943
|
_bordered: {
|
10353
|
-
[vars$
|
10944
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.light,
|
10354
10945
|
},
|
10355
10946
|
},
|
10356
10947
|
primary: {
|
10357
|
-
[vars$
|
10948
|
+
[vars$2.textColor]: globalRefs$1.colors.primary.main,
|
10358
10949
|
_bordered: {
|
10359
|
-
[vars$
|
10950
|
+
[vars$2.borderColor]: globalRefs$1.colors.primary.light,
|
10360
10951
|
},
|
10361
10952
|
},
|
10362
10953
|
secondary: {
|
10363
|
-
[vars$
|
10954
|
+
[vars$2.textColor]: globalRefs$1.colors.secondary.main,
|
10364
10955
|
_bordered: {
|
10365
|
-
[vars$
|
10956
|
+
[vars$2.borderColor]: globalRefs$1.colors.secondary.light,
|
10366
10957
|
},
|
10367
10958
|
},
|
10368
10959
|
error: {
|
10369
|
-
[vars$
|
10960
|
+
[vars$2.textColor]: globalRefs$1.colors.error.main,
|
10370
10961
|
_bordered: {
|
10371
|
-
[vars$
|
10962
|
+
[vars$2.borderColor]: globalRefs$1.colors.error.light,
|
10372
10963
|
},
|
10373
10964
|
},
|
10374
10965
|
success: {
|
10375
|
-
[vars$
|
10966
|
+
[vars$2.textColor]: globalRefs$1.colors.success.main,
|
10376
10967
|
_bordered: {
|
10377
|
-
[vars$
|
10968
|
+
[vars$2.borderColor]: globalRefs$1.colors.success.light,
|
10378
10969
|
},
|
10379
10970
|
},
|
10380
10971
|
},
|
@@ -10383,6 +10974,31 @@ const badge = {
|
|
10383
10974
|
var badge$1 = /*#__PURE__*/Object.freeze({
|
10384
10975
|
__proto__: null,
|
10385
10976
|
default: badge,
|
10977
|
+
vars: vars$2
|
10978
|
+
});
|
10979
|
+
|
10980
|
+
const globalRefs = getThemeRefs(globals);
|
10981
|
+
|
10982
|
+
const vars$1 = MappingsFieldClass.cssVarList;
|
10983
|
+
|
10984
|
+
const mappingsField = {
|
10985
|
+
[vars$1.hostWidth]: refs.width,
|
10986
|
+
[vars$1.hostDirection]: refs.direction,
|
10987
|
+
[vars$1.fontSize]: refs.fontSize,
|
10988
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
10989
|
+
[vars$1.separatorFontSize]: '14px',
|
10990
|
+
[vars$1.labelTextColor]: refs.labelTextColor,
|
10991
|
+
[vars$1.itemMarginBottom]: '1em',
|
10992
|
+
// To be positioned correctly, the min width has to match the text field min width
|
10993
|
+
[vars$1.valueLabelMinWidth]: refs.minWidth,
|
10994
|
+
// To be positioned correctly, the min width has to match the combo box field min width
|
10995
|
+
[vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
|
10996
|
+
};
|
10997
|
+
|
10998
|
+
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
10999
|
+
__proto__: null,
|
11000
|
+
default: mappingsField,
|
11001
|
+
mappingsField: mappingsField,
|
10386
11002
|
vars: vars$1
|
10387
11003
|
});
|
10388
11004
|
|
@@ -10420,6 +11036,7 @@ const components = {
|
|
10420
11036
|
notificationCard,
|
10421
11037
|
multiSelectComboBox: multiSelectComboBox$1,
|
10422
11038
|
badge: badge$1,
|
11039
|
+
mappingsField: mappingsField$1,
|
10423
11040
|
};
|
10424
11041
|
|
10425
11042
|
const theme = Object.keys(components).reduce(
|
@@ -10432,7 +11049,7 @@ const vars = Object.keys(components).reduce(
|
|
10432
11049
|
);
|
10433
11050
|
|
10434
11051
|
const defaultTheme = { globals, components: theme };
|
10435
|
-
const themeVars = { globals: vars$
|
11052
|
+
const themeVars = { globals: vars$z, components: vars };
|
10436
11053
|
|
10437
11054
|
const colors = {
|
10438
11055
|
surface: {
|
@@ -10478,5 +11095,5 @@ const darkTheme = merge({}, defaultTheme, {
|
|
10478
11095
|
},
|
10479
11096
|
});
|
10480
11097
|
|
10481
|
-
export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, 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 };
|
11098
|
+
export { 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 };
|
10482
11099
|
//# sourceMappingURL=index.esm.js.map
|