@descope/web-components-ui 1.0.222 → 1.0.224
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1145 -739
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1264 -752
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/1037.js +2 -0
- package/dist/umd/1037.js.LICENSE.txt +5 -0
- package/dist/umd/1419.js +360 -0
- package/dist/umd/1419.js.LICENSE.txt +23 -0
- package/dist/umd/1932.js +310 -0
- package/dist/umd/1932.js.LICENSE.txt +5 -0
- package/dist/umd/1990.js +3 -3
- package/dist/umd/2066.js +2 -0
- package/dist/umd/2066.js.LICENSE.txt +5 -0
- package/dist/umd/262.js +2 -0
- package/dist/umd/262.js.LICENSE.txt +5 -0
- package/dist/umd/2873.js +738 -0
- package/dist/umd/2873.js.LICENSE.txt +21 -0
- package/dist/umd/3003.js +2 -0
- package/dist/umd/3003.js.LICENSE.txt +9 -0
- package/dist/umd/{9515.js → 3092.js} +88 -88
- package/dist/umd/3660.js +17 -0
- package/dist/umd/{1883.js.LICENSE.txt → 3660.js.LICENSE.txt} +1 -11
- package/dist/umd/422.js +1 -1
- package/dist/umd/4222.js +2 -0
- package/dist/umd/{1852.js.LICENSE.txt → 4222.js.LICENSE.txt} +0 -30
- package/dist/umd/4447.js +2 -1
- package/dist/umd/4447.js.LICENSE.txt +5 -0
- package/dist/umd/4567.js +1 -0
- package/dist/umd/4746.js +123 -0
- package/dist/umd/4905.js +2 -0
- package/dist/umd/4905.js.LICENSE.txt +5 -0
- package/dist/umd/5345.js +94 -0
- package/dist/umd/5806.js +1 -1
- package/dist/umd/5977.js +289 -0
- package/dist/umd/5977.js.LICENSE.txt +17 -0
- package/dist/umd/6551.js +1 -0
- package/dist/umd/{7101.js → 6770.js} +5 -5
- package/dist/umd/6770.js.LICENSE.txt +11 -0
- package/dist/umd/7056.js +1 -1
- package/dist/umd/{6116.js → 7514.js} +9 -9
- package/dist/umd/8725.js +2 -2
- package/dist/umd/9189.js +2 -0
- package/dist/umd/9189.js.LICENSE.txt +5 -0
- package/dist/umd/9211.js +2 -2
- package/dist/umd/9437.js +1 -1
- package/dist/umd/9629.js +2 -0
- package/dist/umd/9629.js.LICENSE.txt +5 -0
- package/dist/umd/9671.js +1 -0
- package/dist/umd/9680.js +2 -0
- package/dist/umd/9680.js.LICENSE.txt +5 -0
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -0
- package/dist/umd/descope-grid-index-js.js +1 -0
- package/dist/umd/descope-modal-index-js.js +1 -0
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +4 -2
- package/src/components/descope-grid/GridClass.js +226 -0
- package/src/components/descope-grid/descope-grid-selection-column/index.js +68 -0
- package/src/components/descope-grid/descope-grid-status-column/index.js +34 -0
- package/src/components/descope-grid/descope-grid-text-column/index.js +11 -0
- package/src/components/descope-grid/helpers.js +9 -0
- package/src/components/descope-grid/index.js +10 -0
- package/src/components/descope-modal/ModalClass.js +109 -0
- package/src/components/descope-modal/index.js +6 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -0
- package/src/mixins/createStyleMixin/helpers.js +2 -2
- package/src/mixins/createStyleMixin/index.js +2 -2
- package/src/mixins/portalMixin.js +24 -4
- package/src/theme/components/grid.js +38 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/modal.js +16 -0
- package/dist/umd/1852.js +0 -375
- package/dist/umd/1883.js +0 -289
- package/dist/umd/4767.js +0 -215
- /package/dist/umd/{7101.js.LICENSE.txt → 3092.js.LICENSE.txt} +0 -0
- /package/dist/umd/{4767.js.LICENSE.txt → 4746.js.LICENSE.txt} +0 -0
- /package/dist/umd/{9515.js.LICENSE.txt → 5345.js.LICENSE.txt} +0 -0
- /package/dist/umd/{6116.js.LICENSE.txt → 7514.js.LICENSE.txt} +0 -0
package/dist/index.esm.js
CHANGED
@@ -7,6 +7,9 @@ import '@vaadin/number-field';
|
|
7
7
|
import '@vaadin/password-field';
|
8
8
|
import '@vaadin/text-area';
|
9
9
|
import '@vaadin/combo-box';
|
10
|
+
import '@vaadin/grid';
|
11
|
+
import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
|
12
|
+
import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
10
13
|
import merge from 'lodash.merge';
|
11
14
|
import set from 'lodash.set';
|
12
15
|
import Color from 'color';
|
@@ -231,11 +234,11 @@ const createStyle = (componentName, baseSelector, mappings) => {
|
|
231
234
|
|
232
235
|
const cssVarName = getCssVarName(componentName, attr);
|
233
236
|
|
234
|
-
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
|
237
|
+
attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
|
235
238
|
style.add(
|
236
239
|
createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
|
237
240
|
isFunction(property) ? property() : property,
|
238
|
-
createCssVarFallback(cssVarName)
|
241
|
+
createCssVarFallback(cssVarName) + (important ? '!important' : '')
|
239
242
|
);
|
240
243
|
});
|
241
244
|
});
|
@@ -392,10 +395,10 @@ const createStyleMixin =
|
|
392
395
|
(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
|
393
396
|
}
|
394
397
|
|
395
|
-
init() {
|
398
|
+
async init() {
|
396
399
|
super.init?.();
|
397
400
|
if (this.shadowRoot.isConnected) {
|
398
|
-
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
401
|
+
this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
|
399
402
|
|
400
403
|
this.#addClassName(componentName);
|
401
404
|
|
@@ -1048,7 +1051,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
|
|
1048
1051
|
|
1049
1052
|
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
1050
1053
|
|
1051
|
-
const
|
1054
|
+
const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
1055
|
+
new Promise((res) => {
|
1056
|
+
const MAX_RETRIES = 20;
|
1057
|
+
const ele = getRootElementFn(that);
|
1058
|
+
let counter = 0;
|
1059
|
+
|
1060
|
+
const check = () => {
|
1061
|
+
if (counter > MAX_RETRIES) {
|
1062
|
+
// eslint-disable-next-line no-console
|
1063
|
+
console.error('could not get shadow root for element', ele);
|
1064
|
+
res(ele);
|
1065
|
+
return;
|
1066
|
+
}
|
1067
|
+
|
1068
|
+
counter++;
|
1069
|
+
|
1070
|
+
if (!ele.shadowRoot) setTimeout(check);
|
1071
|
+
else res(ele.shadowRoot);
|
1072
|
+
};
|
1073
|
+
check();
|
1074
|
+
});
|
1052
1075
|
|
1053
1076
|
const portalMixin =
|
1054
1077
|
({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
|
@@ -1078,17 +1101,17 @@ const portalMixin =
|
|
1078
1101
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
1079
1102
|
const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
|
1080
1103
|
|
1081
|
-
return portal
|
1104
|
+
return portal;
|
1082
1105
|
};
|
1083
1106
|
|
1084
1107
|
super({
|
1085
|
-
getRootElement,
|
1108
|
+
getRootElement: withWaitForShadowRoot(getRootElement),
|
1086
1109
|
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
1087
1110
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
1088
1111
|
baseSelector: ':host',
|
1089
1112
|
});
|
1090
1113
|
|
1091
|
-
this.#portalEle =
|
1114
|
+
this.#portalEle = getRootElement(this);
|
1092
1115
|
}
|
1093
1116
|
|
1094
1117
|
#handleHoverAttribute() {
|
@@ -1214,7 +1237,7 @@ const clickableMixin = (superclass) =>
|
|
1214
1237
|
}
|
1215
1238
|
};
|
1216
1239
|
|
1217
|
-
const componentName$
|
1240
|
+
const componentName$B = getComponentName('button');
|
1218
1241
|
|
1219
1242
|
const resetStyles = `
|
1220
1243
|
:host {
|
@@ -1252,7 +1275,7 @@ const iconStyles = `
|
|
1252
1275
|
|
1253
1276
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1254
1277
|
|
1255
|
-
const { host: host$
|
1278
|
+
const { host: host$g, label: label$9 } = {
|
1256
1279
|
host: { selector: () => ':host' },
|
1257
1280
|
label: { selector: '::part(label)' },
|
1258
1281
|
};
|
@@ -1262,7 +1285,7 @@ let loadingIndicatorStyles;
|
|
1262
1285
|
const ButtonClass = compose(
|
1263
1286
|
createStyleMixin({
|
1264
1287
|
mappings: {
|
1265
|
-
hostWidth: { ...host$
|
1288
|
+
hostWidth: { ...host$g, property: 'width' },
|
1266
1289
|
hostHeight: { property: 'height' },
|
1267
1290
|
fontSize: {},
|
1268
1291
|
fontFamily: {},
|
@@ -1311,7 +1334,7 @@ const ButtonClass = compose(
|
|
1311
1334
|
}
|
1312
1335
|
`,
|
1313
1336
|
excludeAttrsSync: ['tabindex'],
|
1314
|
-
componentName: componentName$
|
1337
|
+
componentName: componentName$B,
|
1315
1338
|
})
|
1316
1339
|
);
|
1317
1340
|
|
@@ -1348,7 +1371,7 @@ loadingIndicatorStyles = `
|
|
1348
1371
|
}
|
1349
1372
|
`;
|
1350
1373
|
|
1351
|
-
customElements.define(componentName$
|
1374
|
+
customElements.define(componentName$B, ButtonClass);
|
1352
1375
|
|
1353
1376
|
const createBaseInputClass = (...args) =>
|
1354
1377
|
compose(
|
@@ -1358,11 +1381,11 @@ const createBaseInputClass = (...args) =>
|
|
1358
1381
|
inputEventsDispatchingMixin
|
1359
1382
|
)(createBaseClass(...args));
|
1360
1383
|
|
1361
|
-
const componentName$
|
1384
|
+
const componentName$A = getComponentName('boolean-field-internal');
|
1362
1385
|
|
1363
1386
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1364
1387
|
|
1365
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1388
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$A, baseSelector: 'div' });
|
1366
1389
|
|
1367
1390
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1368
1391
|
constructor() {
|
@@ -1422,14 +1445,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1422
1445
|
|
1423
1446
|
const template = document.createElement('template');
|
1424
1447
|
template.innerHTML = `
|
1425
|
-
<${componentName$
|
1448
|
+
<${componentName$A}
|
1426
1449
|
tabindex="-1"
|
1427
1450
|
slot="input"
|
1428
|
-
></${componentName$
|
1451
|
+
></${componentName$A}>
|
1429
1452
|
`;
|
1430
1453
|
|
1431
1454
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1432
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1455
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$A);
|
1433
1456
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1434
1457
|
|
1435
1458
|
forwardAttrs(this, this.inputElement, {
|
@@ -1592,10 +1615,10 @@ descope-boolean-field-internal {
|
|
1592
1615
|
}
|
1593
1616
|
`;
|
1594
1617
|
|
1595
|
-
const componentName$
|
1618
|
+
const componentName$z = getComponentName('checkbox');
|
1596
1619
|
|
1597
1620
|
const {
|
1598
|
-
host: host$
|
1621
|
+
host: host$f,
|
1599
1622
|
component: component$1,
|
1600
1623
|
checkboxElement,
|
1601
1624
|
checkboxSurface,
|
@@ -1617,9 +1640,9 @@ const {
|
|
1617
1640
|
const CheckboxClass = compose(
|
1618
1641
|
createStyleMixin({
|
1619
1642
|
mappings: {
|
1620
|
-
hostWidth: { ...host$
|
1643
|
+
hostWidth: { ...host$f, property: 'width' },
|
1621
1644
|
|
1622
|
-
fontSize: [host$
|
1645
|
+
fontSize: [host$f, checkboxElement, checkboxLabel$1],
|
1623
1646
|
fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
|
1624
1647
|
|
1625
1648
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
@@ -1689,18 +1712,18 @@ const CheckboxClass = compose(
|
|
1689
1712
|
}
|
1690
1713
|
`,
|
1691
1714
|
excludeAttrsSync: ['label', 'tabindex'],
|
1692
|
-
componentName: componentName$
|
1715
|
+
componentName: componentName$z,
|
1693
1716
|
})
|
1694
1717
|
);
|
1695
1718
|
|
1696
|
-
customElements.define(componentName$
|
1719
|
+
customElements.define(componentName$A, BooleanInputInternal);
|
1697
1720
|
|
1698
|
-
customElements.define(componentName$
|
1721
|
+
customElements.define(componentName$z, CheckboxClass);
|
1699
1722
|
|
1700
|
-
const componentName$
|
1723
|
+
const componentName$y = getComponentName('switch-toggle');
|
1701
1724
|
|
1702
1725
|
const {
|
1703
|
-
host: host$
|
1726
|
+
host: host$e,
|
1704
1727
|
component,
|
1705
1728
|
checkboxElement: track,
|
1706
1729
|
checkboxSurface: knob,
|
@@ -1722,7 +1745,7 @@ const {
|
|
1722
1745
|
const SwitchToggleClass = compose(
|
1723
1746
|
createStyleMixin({
|
1724
1747
|
mappings: {
|
1725
|
-
hostWidth: { ...host$
|
1748
|
+
hostWidth: { ...host$e, property: 'width' },
|
1726
1749
|
|
1727
1750
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
1728
1751
|
fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
|
@@ -1816,17 +1839,17 @@ const SwitchToggleClass = compose(
|
|
1816
1839
|
}
|
1817
1840
|
`,
|
1818
1841
|
excludeAttrsSync: ['label', 'tabindex'],
|
1819
|
-
componentName: componentName$
|
1842
|
+
componentName: componentName$y,
|
1820
1843
|
})
|
1821
1844
|
);
|
1822
1845
|
|
1823
|
-
customElements.define(componentName$
|
1846
|
+
customElements.define(componentName$y, SwitchToggleClass);
|
1824
1847
|
|
1825
|
-
const componentName$
|
1848
|
+
const componentName$x = getComponentName('loader-linear');
|
1826
1849
|
|
1827
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1850
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
|
1828
1851
|
static get componentName() {
|
1829
|
-
return componentName$
|
1852
|
+
return componentName$x;
|
1830
1853
|
}
|
1831
1854
|
|
1832
1855
|
constructor() {
|
@@ -1862,18 +1885,18 @@ const selectors$1 = {
|
|
1862
1885
|
host: { selector: () => ':host' },
|
1863
1886
|
};
|
1864
1887
|
|
1865
|
-
const { after: after$1, host: host$
|
1888
|
+
const { after: after$1, host: host$d } = selectors$1;
|
1866
1889
|
|
1867
1890
|
const LoaderLinearClass = compose(
|
1868
1891
|
createStyleMixin({
|
1869
1892
|
mappings: {
|
1870
1893
|
hostDisplay: {},
|
1871
|
-
hostWidth: { ...host$
|
1894
|
+
hostWidth: { ...host$d, property: 'width' },
|
1872
1895
|
barHeight: [{ property: 'height' }, { ...after$1, property: 'height' }],
|
1873
1896
|
barBorderRadius: [{ property: 'border-radius' }, { ...after$1, property: 'border-radius' }],
|
1874
1897
|
verticalPadding: [
|
1875
|
-
{ ...host$
|
1876
|
-
{ ...host$
|
1898
|
+
{ ...host$d, property: 'padding-top' },
|
1899
|
+
{ ...host$d, property: 'padding-bottom' },
|
1877
1900
|
],
|
1878
1901
|
barBackgroundColor: { property: 'background-color' },
|
1879
1902
|
barColor: { ...after$1, property: 'background-color' },
|
@@ -1887,11 +1910,11 @@ const LoaderLinearClass = compose(
|
|
1887
1910
|
componentNameValidationMixin
|
1888
1911
|
)(RawLoaderLinear);
|
1889
1912
|
|
1890
|
-
customElements.define(componentName$
|
1913
|
+
customElements.define(componentName$x, LoaderLinearClass);
|
1891
1914
|
|
1892
|
-
const componentName$
|
1915
|
+
const componentName$w = getComponentName('loader-radial');
|
1893
1916
|
|
1894
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1917
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
|
1895
1918
|
constructor() {
|
1896
1919
|
super();
|
1897
1920
|
|
@@ -1935,11 +1958,11 @@ const LoaderRadialClass = compose(
|
|
1935
1958
|
componentNameValidationMixin
|
1936
1959
|
)(RawLoaderRadial);
|
1937
1960
|
|
1938
|
-
customElements.define(componentName$
|
1961
|
+
customElements.define(componentName$w, LoaderRadialClass);
|
1939
1962
|
|
1940
|
-
const componentName$
|
1963
|
+
const componentName$v = getComponentName('container');
|
1941
1964
|
|
1942
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1965
|
+
class RawContainer extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > slot' }) {
|
1943
1966
|
constructor() {
|
1944
1967
|
super();
|
1945
1968
|
|
@@ -1991,10 +2014,10 @@ const ContainerClass = compose(
|
|
1991
2014
|
componentNameValidationMixin
|
1992
2015
|
)(RawContainer);
|
1993
2016
|
|
1994
|
-
customElements.define(componentName$
|
2017
|
+
customElements.define(componentName$v, ContainerClass);
|
1995
2018
|
|
1996
|
-
const componentName$
|
1997
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2019
|
+
const componentName$u = getComponentName('divider');
|
2020
|
+
class RawDivider extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
|
1998
2021
|
constructor() {
|
1999
2022
|
super();
|
2000
2023
|
|
@@ -2039,7 +2062,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$p, baseS
|
|
2039
2062
|
}
|
2040
2063
|
}
|
2041
2064
|
|
2042
|
-
const { host: host$
|
2065
|
+
const { host: host$c, before, after, text: text$3 } = {
|
2043
2066
|
host: { selector: () => ':host' },
|
2044
2067
|
before: { selector: '::before' },
|
2045
2068
|
after: { selector: '::after' },
|
@@ -2049,8 +2072,8 @@ const { host: host$b, before, after, text: text$3 } = {
|
|
2049
2072
|
const DividerClass = compose(
|
2050
2073
|
createStyleMixin({
|
2051
2074
|
mappings: {
|
2052
|
-
hostWidth: { ...host$
|
2053
|
-
hostPadding: { ...host$
|
2075
|
+
hostWidth: { ...host$c, property: 'width' },
|
2076
|
+
hostPadding: { ...host$c, property: 'padding' },
|
2054
2077
|
|
2055
2078
|
minHeight: {},
|
2056
2079
|
alignItems: {},
|
@@ -2092,9 +2115,9 @@ const DividerClass = compose(
|
|
2092
2115
|
|
2093
2116
|
// eslint-disable-next-line max-classes-per-file
|
2094
2117
|
|
2095
|
-
const componentName$
|
2118
|
+
const componentName$t = getComponentName('text');
|
2096
2119
|
|
2097
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2120
|
+
class RawText extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > slot' }) {
|
2098
2121
|
constructor() {
|
2099
2122
|
super();
|
2100
2123
|
|
@@ -2153,11 +2176,11 @@ const TextClass = compose(
|
|
2153
2176
|
customTextMixin
|
2154
2177
|
)(RawText);
|
2155
2178
|
|
2156
|
-
customElements.define(componentName$
|
2179
|
+
customElements.define(componentName$t, TextClass);
|
2157
2180
|
|
2158
|
-
customElements.define(componentName$
|
2181
|
+
customElements.define(componentName$u, DividerClass);
|
2159
2182
|
|
2160
|
-
const { host: host$
|
2183
|
+
const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
|
2161
2184
|
{
|
2162
2185
|
host: { selector: () => ':host' },
|
2163
2186
|
label: { selector: '::part(label)' },
|
@@ -2171,11 +2194,11 @@ const { host: host$a, label: label$8, placeholder: placeholder$2, requiredIndica
|
|
2171
2194
|
|
2172
2195
|
var textFieldMappings = {
|
2173
2196
|
// we apply font-size also on the host so we can set its width with em
|
2174
|
-
fontSize: [{}, host$
|
2197
|
+
fontSize: [{}, host$b],
|
2175
2198
|
fontFamily: [label$8, inputField$5, helperText$6, errorMessage$8],
|
2176
2199
|
|
2177
|
-
hostWidth: { ...host$
|
2178
|
-
hostMinWidth: { ...host$
|
2200
|
+
hostWidth: { ...host$b, property: 'width' },
|
2201
|
+
hostMinWidth: { ...host$b, property: 'min-width' },
|
2179
2202
|
|
2180
2203
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
2181
2204
|
|
@@ -2211,9 +2234,9 @@ var textFieldMappings = {
|
|
2211
2234
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' },
|
2212
2235
|
};
|
2213
2236
|
|
2214
|
-
const componentName$
|
2237
|
+
const componentName$s = getComponentName('email-field');
|
2215
2238
|
|
2216
|
-
const customMixin$
|
2239
|
+
const customMixin$7 = (superclass) =>
|
2217
2240
|
class EmailFieldMixinClass extends superclass {
|
2218
2241
|
init() {
|
2219
2242
|
super.init?.();
|
@@ -2227,7 +2250,7 @@ const EmailFieldClass = compose(
|
|
2227
2250
|
draggableMixin,
|
2228
2251
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2229
2252
|
componentNameValidationMixin,
|
2230
|
-
customMixin$
|
2253
|
+
customMixin$7
|
2231
2254
|
)(
|
2232
2255
|
createProxy({
|
2233
2256
|
slots: ['', 'suffix'],
|
@@ -2245,15 +2268,15 @@ const EmailFieldClass = compose(
|
|
2245
2268
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2246
2269
|
`,
|
2247
2270
|
excludeAttrsSync: ['tabindex'],
|
2248
|
-
componentName: componentName$
|
2271
|
+
componentName: componentName$s,
|
2249
2272
|
})
|
2250
2273
|
);
|
2251
2274
|
|
2252
|
-
customElements.define(componentName$
|
2275
|
+
customElements.define(componentName$s, EmailFieldClass);
|
2253
2276
|
|
2254
|
-
const componentName$
|
2277
|
+
const componentName$r = getComponentName('link');
|
2255
2278
|
|
2256
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2279
|
+
class RawLink extends createBaseClass({ componentName: componentName$r, baseSelector: ':host a' }) {
|
2257
2280
|
constructor() {
|
2258
2281
|
super();
|
2259
2282
|
|
@@ -2299,12 +2322,12 @@ const selectors = {
|
|
2299
2322
|
text: { selector: () => TextClass.componentName },
|
2300
2323
|
};
|
2301
2324
|
|
2302
|
-
const { anchor, text: text$2, host: host$
|
2325
|
+
const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors;
|
2303
2326
|
|
2304
2327
|
const LinkClass = compose(
|
2305
2328
|
createStyleMixin({
|
2306
2329
|
mappings: {
|
2307
|
-
hostWidth: { ...host$
|
2330
|
+
hostWidth: { ...host$a, property: 'width' },
|
2308
2331
|
textAlign: wrapper$1,
|
2309
2332
|
textColor: [
|
2310
2333
|
{ ...anchor, property: 'color' },
|
@@ -2317,7 +2340,7 @@ const LinkClass = compose(
|
|
2317
2340
|
componentNameValidationMixin
|
2318
2341
|
)(RawLink);
|
2319
2342
|
|
2320
|
-
customElements.define(componentName$
|
2343
|
+
customElements.define(componentName$r, LinkClass);
|
2321
2344
|
|
2322
2345
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2323
2346
|
let style;
|
@@ -2369,27 +2392,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2369
2392
|
return CssVarImageClass;
|
2370
2393
|
};
|
2371
2394
|
|
2372
|
-
const componentName$
|
2395
|
+
const componentName$q = getComponentName('logo');
|
2373
2396
|
|
2374
2397
|
const LogoClass = createCssVarImageClass({
|
2375
|
-
componentName: componentName$
|
2398
|
+
componentName: componentName$q,
|
2376
2399
|
varName: 'url',
|
2377
2400
|
fallbackVarName: 'fallbackUrl',
|
2378
2401
|
});
|
2379
2402
|
|
2380
|
-
customElements.define(componentName$
|
2403
|
+
customElements.define(componentName$q, LogoClass);
|
2381
2404
|
|
2382
|
-
const componentName$
|
2405
|
+
const componentName$p = getComponentName('totp-image');
|
2383
2406
|
|
2384
2407
|
const TotpImageClass = createCssVarImageClass({
|
2385
|
-
componentName: componentName$
|
2408
|
+
componentName: componentName$p,
|
2386
2409
|
varName: 'url',
|
2387
2410
|
fallbackVarName: 'fallbackUrl',
|
2388
2411
|
});
|
2389
2412
|
|
2390
|
-
customElements.define(componentName$
|
2413
|
+
customElements.define(componentName$p, TotpImageClass);
|
2391
2414
|
|
2392
|
-
const componentName$
|
2415
|
+
const componentName$o = getComponentName('number-field');
|
2393
2416
|
|
2394
2417
|
const NumberFieldClass = compose(
|
2395
2418
|
createStyleMixin({
|
@@ -2414,11 +2437,11 @@ const NumberFieldClass = compose(
|
|
2414
2437
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2415
2438
|
`,
|
2416
2439
|
excludeAttrsSync: ['tabindex'],
|
2417
|
-
componentName: componentName$
|
2440
|
+
componentName: componentName$o,
|
2418
2441
|
})
|
2419
2442
|
);
|
2420
2443
|
|
2421
|
-
customElements.define(componentName$
|
2444
|
+
customElements.define(componentName$o, NumberFieldClass);
|
2422
2445
|
|
2423
2446
|
const focusElement = (ele) => {
|
2424
2447
|
ele?.focus();
|
@@ -2436,13 +2459,13 @@ const getSanitizedCharacters = (str) => {
|
|
2436
2459
|
|
2437
2460
|
/* eslint-disable no-param-reassign */
|
2438
2461
|
|
2439
|
-
const componentName$
|
2462
|
+
const componentName$n = getComponentName('passcode-internal');
|
2440
2463
|
|
2441
2464
|
const observedAttributes$5 = ['digits'];
|
2442
2465
|
|
2443
2466
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2444
2467
|
|
2445
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2468
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
2446
2469
|
|
2447
2470
|
class PasscodeInternal extends BaseInputClass$4 {
|
2448
2471
|
static get observedAttributes() {
|
@@ -2639,11 +2662,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2639
2662
|
}
|
2640
2663
|
}
|
2641
2664
|
|
2642
|
-
const componentName$
|
2665
|
+
const componentName$m = getComponentName('text-field');
|
2643
2666
|
|
2644
2667
|
const observedAttrs = ['type'];
|
2645
2668
|
|
2646
|
-
const customMixin$
|
2669
|
+
const customMixin$6 = (superclass) =>
|
2647
2670
|
class TextFieldClass extends superclass {
|
2648
2671
|
static get observedAttributes() {
|
2649
2672
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2670,7 +2693,7 @@ const TextFieldClass = compose(
|
|
2670
2693
|
draggableMixin,
|
2671
2694
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2672
2695
|
componentNameValidationMixin,
|
2673
|
-
customMixin$
|
2696
|
+
customMixin$6
|
2674
2697
|
)(
|
2675
2698
|
createProxy({
|
2676
2699
|
slots: ['prefix', 'suffix'],
|
@@ -2688,15 +2711,15 @@ const TextFieldClass = compose(
|
|
2688
2711
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2689
2712
|
`,
|
2690
2713
|
excludeAttrsSync: ['tabindex'],
|
2691
|
-
componentName: componentName$
|
2714
|
+
componentName: componentName$m,
|
2692
2715
|
})
|
2693
2716
|
);
|
2694
2717
|
|
2695
|
-
const componentName$
|
2718
|
+
const componentName$l = getComponentName('passcode');
|
2696
2719
|
|
2697
2720
|
const observedAttributes$4 = ['digits'];
|
2698
2721
|
|
2699
|
-
const customMixin$
|
2722
|
+
const customMixin$5 = (superclass) =>
|
2700
2723
|
class PasscodeMixinClass extends superclass {
|
2701
2724
|
static get observedAttributes() {
|
2702
2725
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2711,17 +2734,17 @@ const customMixin$4 = (superclass) =>
|
|
2711
2734
|
const template = document.createElement('template');
|
2712
2735
|
|
2713
2736
|
template.innerHTML = `
|
2714
|
-
<${componentName$
|
2737
|
+
<${componentName$n}
|
2715
2738
|
bordered="true"
|
2716
2739
|
name="code"
|
2717
2740
|
tabindex="-1"
|
2718
2741
|
slot="input"
|
2719
|
-
><slot></slot></${componentName$
|
2742
|
+
><slot></slot></${componentName$n}>
|
2720
2743
|
`;
|
2721
2744
|
|
2722
2745
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2723
2746
|
|
2724
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2747
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
2725
2748
|
|
2726
2749
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2727
2750
|
}
|
@@ -2736,7 +2759,7 @@ const customMixin$4 = (superclass) =>
|
|
2736
2759
|
};
|
2737
2760
|
|
2738
2761
|
const {
|
2739
|
-
host: host$
|
2762
|
+
host: host$9,
|
2740
2763
|
digitField,
|
2741
2764
|
label: label$7,
|
2742
2765
|
requiredIndicator: requiredIndicator$7,
|
@@ -2758,9 +2781,9 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
2758
2781
|
const PasscodeClass = compose(
|
2759
2782
|
createStyleMixin({
|
2760
2783
|
mappings: {
|
2761
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
2784
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$9],
|
2762
2785
|
hostWidth: { property: 'width' },
|
2763
|
-
fontFamily: [host$
|
2786
|
+
fontFamily: [host$9, { ...label$7 }],
|
2764
2787
|
labelTextColor: [
|
2765
2788
|
{ ...label$7, property: 'color' },
|
2766
2789
|
{ ...requiredIndicator$7, property: 'color' },
|
@@ -2788,7 +2811,7 @@ const PasscodeClass = compose(
|
|
2788
2811
|
draggableMixin,
|
2789
2812
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2790
2813
|
componentNameValidationMixin,
|
2791
|
-
customMixin$
|
2814
|
+
customMixin$5
|
2792
2815
|
)(
|
2793
2816
|
createProxy({
|
2794
2817
|
slots: [],
|
@@ -2859,15 +2882,15 @@ const PasscodeClass = compose(
|
|
2859
2882
|
${resetInputCursor('vaadin-text-field')}
|
2860
2883
|
`,
|
2861
2884
|
excludeAttrsSync: ['tabindex'],
|
2862
|
-
componentName: componentName$
|
2885
|
+
componentName: componentName$l,
|
2863
2886
|
})
|
2864
2887
|
);
|
2865
2888
|
|
2866
|
-
customElements.define(componentName$
|
2889
|
+
customElements.define(componentName$m, TextFieldClass);
|
2867
2890
|
|
2868
|
-
customElements.define(componentName$
|
2891
|
+
customElements.define(componentName$n, PasscodeInternal);
|
2869
2892
|
|
2870
|
-
customElements.define(componentName$
|
2893
|
+
customElements.define(componentName$l, PasscodeClass);
|
2871
2894
|
|
2872
2895
|
const passwordDraggableMixin = (superclass) =>
|
2873
2896
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -2903,10 +2926,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
2903
2926
|
}
|
2904
2927
|
};
|
2905
2928
|
|
2906
|
-
const componentName$
|
2929
|
+
const componentName$k = getComponentName('password');
|
2907
2930
|
|
2908
2931
|
const {
|
2909
|
-
host: host$
|
2932
|
+
host: host$8,
|
2910
2933
|
inputField: inputField$4,
|
2911
2934
|
inputElement: inputElement$1,
|
2912
2935
|
inputElementPlaceholder,
|
@@ -2932,9 +2955,9 @@ const {
|
|
2932
2955
|
const PasswordClass = compose(
|
2933
2956
|
createStyleMixin({
|
2934
2957
|
mappings: {
|
2935
|
-
hostWidth: { ...host$
|
2936
|
-
hostMinWidth: { ...host$
|
2937
|
-
fontSize: [{}, host$
|
2958
|
+
hostWidth: { ...host$8, property: 'width' },
|
2959
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
2960
|
+
fontSize: [{}, host$8],
|
2938
2961
|
fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
|
2939
2962
|
inputHeight: { ...inputField$4, property: 'height' },
|
2940
2963
|
inputHorizontalPadding: [
|
@@ -3032,16 +3055,16 @@ const PasswordClass = compose(
|
|
3032
3055
|
}
|
3033
3056
|
`,
|
3034
3057
|
excludeAttrsSync: ['tabindex'],
|
3035
|
-
componentName: componentName$
|
3058
|
+
componentName: componentName$k,
|
3036
3059
|
})
|
3037
3060
|
);
|
3038
3061
|
|
3039
|
-
customElements.define(componentName$
|
3062
|
+
customElements.define(componentName$k, PasswordClass);
|
3040
3063
|
|
3041
|
-
const componentName$
|
3064
|
+
const componentName$j = getComponentName('text-area');
|
3042
3065
|
|
3043
3066
|
const {
|
3044
|
-
host: host$
|
3067
|
+
host: host$7,
|
3045
3068
|
label: label$5,
|
3046
3069
|
placeholder: placeholder$1,
|
3047
3070
|
inputField: inputField$3,
|
@@ -3063,9 +3086,9 @@ const {
|
|
3063
3086
|
const TextAreaClass = compose(
|
3064
3087
|
createStyleMixin({
|
3065
3088
|
mappings: {
|
3066
|
-
hostWidth: { ...host$
|
3067
|
-
hostMinWidth: { ...host$
|
3068
|
-
fontSize: [host$
|
3089
|
+
hostWidth: { ...host$7, property: 'width' },
|
3090
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
3091
|
+
fontSize: [host$7, textArea$2],
|
3069
3092
|
fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
|
3070
3093
|
labelTextColor: [
|
3071
3094
|
{ ...label$5, property: 'color' },
|
@@ -3111,17 +3134,17 @@ const TextAreaClass = compose(
|
|
3111
3134
|
${resetInputCursor('vaadin-text-area')}
|
3112
3135
|
`,
|
3113
3136
|
excludeAttrsSync: ['tabindex'],
|
3114
|
-
componentName: componentName$
|
3137
|
+
componentName: componentName$j,
|
3115
3138
|
})
|
3116
3139
|
);
|
3117
3140
|
|
3118
|
-
customElements.define(componentName$
|
3141
|
+
customElements.define(componentName$j, TextAreaClass);
|
3119
3142
|
|
3120
3143
|
const observedAttributes$3 = ['src', 'alt'];
|
3121
3144
|
|
3122
|
-
const componentName$
|
3145
|
+
const componentName$i = getComponentName('image');
|
3123
3146
|
|
3124
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3147
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$i, baseSelector: ':host > img' });
|
3125
3148
|
class RawImage extends BaseClass$1 {
|
3126
3149
|
static get observedAttributes() {
|
3127
3150
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3161,9 +3184,9 @@ const ImageClass = compose(
|
|
3161
3184
|
draggableMixin
|
3162
3185
|
)(RawImage);
|
3163
3186
|
|
3164
|
-
customElements.define(componentName$
|
3187
|
+
customElements.define(componentName$i, ImageClass);
|
3165
3188
|
|
3166
|
-
const componentName$
|
3189
|
+
const componentName$h = getComponentName('combo-box');
|
3167
3190
|
|
3168
3191
|
const ComboBoxMixin = (superclass) =>
|
3169
3192
|
class ComboBoxMixinClass extends superclass {
|
@@ -3385,7 +3408,7 @@ const ComboBoxMixin = (superclass) =>
|
|
3385
3408
|
};
|
3386
3409
|
|
3387
3410
|
const {
|
3388
|
-
host: host$
|
3411
|
+
host: host$6,
|
3389
3412
|
inputField: inputField$2,
|
3390
3413
|
inputElement,
|
3391
3414
|
placeholder,
|
@@ -3409,9 +3432,9 @@ const {
|
|
3409
3432
|
const ComboBoxClass = compose(
|
3410
3433
|
createStyleMixin({
|
3411
3434
|
mappings: {
|
3412
|
-
hostWidth: { ...host$
|
3435
|
+
hostWidth: { ...host$6, property: 'width' },
|
3413
3436
|
// we apply font-size also on the host so we can set its width with em
|
3414
|
-
fontSize: [{}, host$
|
3437
|
+
fontSize: [{}, host$6],
|
3415
3438
|
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
3416
3439
|
labelTextColor: [
|
3417
3440
|
{ ...label$4, property: 'color' },
|
@@ -3514,12 +3537,12 @@ const ComboBoxClass = compose(
|
|
3514
3537
|
// and reset items to an empty array, and opening the list box with no items
|
3515
3538
|
// to display.
|
3516
3539
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3517
|
-
componentName: componentName$
|
3540
|
+
componentName: componentName$h,
|
3518
3541
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3519
3542
|
})
|
3520
3543
|
);
|
3521
3544
|
|
3522
|
-
customElements.define(componentName$
|
3545
|
+
customElements.define(componentName$h, ComboBoxClass);
|
3523
3546
|
|
3524
3547
|
var CountryCodes = [
|
3525
3548
|
{
|
@@ -4759,7 +4782,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4759
4782
|
</div>
|
4760
4783
|
`;
|
4761
4784
|
|
4762
|
-
const componentName$
|
4785
|
+
const componentName$g = getComponentName('phone-field-internal');
|
4763
4786
|
|
4764
4787
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4765
4788
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4771,7 +4794,7 @@ const mapAttrs$1 = {
|
|
4771
4794
|
|
4772
4795
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4773
4796
|
|
4774
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4797
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
|
4775
4798
|
|
4776
4799
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4777
4800
|
static get observedAttributes() {
|
@@ -4943,14 +4966,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4943
4966
|
}
|
4944
4967
|
};
|
4945
4968
|
|
4946
|
-
customElements.define(componentName$
|
4969
|
+
customElements.define(componentName$g, PhoneFieldInternal$1);
|
4947
4970
|
|
4948
4971
|
const textVars$1 = TextFieldClass.cssVarList;
|
4949
4972
|
const comboVars = ComboBoxClass.cssVarList;
|
4950
4973
|
|
4951
|
-
const componentName$
|
4974
|
+
const componentName$f = getComponentName('phone-field');
|
4952
4975
|
|
4953
|
-
const customMixin$
|
4976
|
+
const customMixin$4 = (superclass) =>
|
4954
4977
|
class PhoneFieldMixinClass extends superclass {
|
4955
4978
|
static get CountryCodes() {
|
4956
4979
|
return CountryCodes;
|
@@ -4962,15 +4985,15 @@ const customMixin$3 = (superclass) =>
|
|
4962
4985
|
const template = document.createElement('template');
|
4963
4986
|
|
4964
4987
|
template.innerHTML = `
|
4965
|
-
<${componentName$
|
4988
|
+
<${componentName$g}
|
4966
4989
|
tabindex="-1"
|
4967
4990
|
slot="input"
|
4968
|
-
></${componentName$
|
4991
|
+
></${componentName$g}>
|
4969
4992
|
`;
|
4970
4993
|
|
4971
4994
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4972
4995
|
|
4973
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4996
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
4974
4997
|
|
4975
4998
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4976
4999
|
includeAttrs: [
|
@@ -4990,7 +5013,7 @@ const customMixin$3 = (superclass) =>
|
|
4990
5013
|
};
|
4991
5014
|
|
4992
5015
|
const {
|
4993
|
-
host: host$
|
5016
|
+
host: host$5,
|
4994
5017
|
label: label$3,
|
4995
5018
|
requiredIndicator: requiredIndicator$3,
|
4996
5019
|
inputField: inputField$1,
|
@@ -5015,7 +5038,7 @@ const PhoneFieldClass = compose(
|
|
5015
5038
|
createStyleMixin({
|
5016
5039
|
mappings: {
|
5017
5040
|
fontSize: [
|
5018
|
-
host$
|
5041
|
+
host$5,
|
5019
5042
|
inputField$1,
|
5020
5043
|
{
|
5021
5044
|
selector: TextFieldClass.componentName,
|
@@ -5036,7 +5059,7 @@ const PhoneFieldClass = compose(
|
|
5036
5059
|
},
|
5037
5060
|
],
|
5038
5061
|
hostWidth: [
|
5039
|
-
{ ...host$
|
5062
|
+
{ ...host$5, property: 'width' },
|
5040
5063
|
{ ...phoneInput$1, property: 'width' },
|
5041
5064
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
5042
5065
|
],
|
@@ -5089,7 +5112,7 @@ const PhoneFieldClass = compose(
|
|
5089
5112
|
}),
|
5090
5113
|
draggableMixin,
|
5091
5114
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5092
|
-
customMixin$
|
5115
|
+
customMixin$4
|
5093
5116
|
)(
|
5094
5117
|
createProxy({
|
5095
5118
|
slots: [],
|
@@ -5165,17 +5188,17 @@ const PhoneFieldClass = compose(
|
|
5165
5188
|
}
|
5166
5189
|
`,
|
5167
5190
|
excludeAttrsSync: ['tabindex'],
|
5168
|
-
componentName: componentName$
|
5191
|
+
componentName: componentName$f,
|
5169
5192
|
})
|
5170
5193
|
);
|
5171
5194
|
|
5172
|
-
customElements.define(componentName$
|
5195
|
+
customElements.define(componentName$f, PhoneFieldClass);
|
5173
5196
|
|
5174
5197
|
const getCountryByCodeId = (countryCode) => {
|
5175
5198
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5176
5199
|
};
|
5177
5200
|
|
5178
|
-
const componentName$
|
5201
|
+
const componentName$e = getComponentName('phone-field-internal-input-box');
|
5179
5202
|
|
5180
5203
|
const observedAttributes$2 = [
|
5181
5204
|
'disabled',
|
@@ -5189,7 +5212,7 @@ const mapAttrs = {
|
|
5189
5212
|
'phone-input-placeholder': 'placeholder',
|
5190
5213
|
};
|
5191
5214
|
|
5192
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5215
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$e, baseSelector: 'div' });
|
5193
5216
|
|
5194
5217
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5195
5218
|
static get observedAttributes() {
|
@@ -5328,13 +5351,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5328
5351
|
}
|
5329
5352
|
}
|
5330
5353
|
|
5331
|
-
customElements.define(componentName$
|
5354
|
+
customElements.define(componentName$e, PhoneFieldInternal);
|
5332
5355
|
|
5333
5356
|
const textVars = TextFieldClass.cssVarList;
|
5334
5357
|
|
5335
|
-
const componentName$
|
5358
|
+
const componentName$d = getComponentName('phone-input-box-field');
|
5336
5359
|
|
5337
|
-
const customMixin$
|
5360
|
+
const customMixin$3 = (superclass) =>
|
5338
5361
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5339
5362
|
static get CountryCodes() {
|
5340
5363
|
return CountryCodes;
|
@@ -5346,15 +5369,15 @@ const customMixin$2 = (superclass) =>
|
|
5346
5369
|
const template = document.createElement('template');
|
5347
5370
|
|
5348
5371
|
template.innerHTML = `
|
5349
|
-
<${componentName$
|
5372
|
+
<${componentName$e}
|
5350
5373
|
tabindex="-1"
|
5351
5374
|
slot="input"
|
5352
|
-
></${componentName$
|
5375
|
+
></${componentName$e}>
|
5353
5376
|
`;
|
5354
5377
|
|
5355
5378
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5356
5379
|
|
5357
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5380
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
5358
5381
|
|
5359
5382
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5360
5383
|
includeAttrs: [
|
@@ -5371,7 +5394,7 @@ const customMixin$2 = (superclass) =>
|
|
5371
5394
|
}
|
5372
5395
|
};
|
5373
5396
|
|
5374
|
-
const { host: host$
|
5397
|
+
const { host: host$4, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
5375
5398
|
host: { selector: () => ':host' },
|
5376
5399
|
label: { selector: '::part(label)' },
|
5377
5400
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -5385,7 +5408,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5385
5408
|
createStyleMixin({
|
5386
5409
|
mappings: {
|
5387
5410
|
fontSize: [
|
5388
|
-
host$
|
5411
|
+
host$4,
|
5389
5412
|
inputField,
|
5390
5413
|
{
|
5391
5414
|
selector: TextFieldClass.componentName,
|
@@ -5393,8 +5416,8 @@ const PhoneFieldInputBoxClass = compose(
|
|
5393
5416
|
},
|
5394
5417
|
],
|
5395
5418
|
fontFamily: [label$2, errorMessage$2, helperText$1],
|
5396
|
-
hostWidth: { ...host$
|
5397
|
-
hostMinWidth: { ...host$
|
5419
|
+
hostWidth: { ...host$4, property: 'width' },
|
5420
|
+
hostMinWidth: { ...host$4, property: 'min-width' },
|
5398
5421
|
|
5399
5422
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
5400
5423
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
@@ -5420,7 +5443,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5420
5443
|
}),
|
5421
5444
|
draggableMixin,
|
5422
5445
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5423
|
-
customMixin$
|
5446
|
+
customMixin$3
|
5424
5447
|
)(
|
5425
5448
|
createProxy({
|
5426
5449
|
slots: [],
|
@@ -5486,17 +5509,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5486
5509
|
}
|
5487
5510
|
`,
|
5488
5511
|
excludeAttrsSync: ['tabindex'],
|
5489
|
-
componentName: componentName$
|
5512
|
+
componentName: componentName$d,
|
5490
5513
|
})
|
5491
5514
|
);
|
5492
5515
|
|
5493
|
-
customElements.define(componentName$
|
5516
|
+
customElements.define(componentName$d, PhoneFieldInputBoxClass);
|
5494
5517
|
|
5495
|
-
const componentName$
|
5518
|
+
const componentName$c = getComponentName('new-password-internal');
|
5496
5519
|
|
5497
|
-
const componentName$
|
5520
|
+
const componentName$b = getComponentName('new-password');
|
5498
5521
|
|
5499
|
-
const customMixin$
|
5522
|
+
const customMixin$2 = (superclass) =>
|
5500
5523
|
class NewPasswordMixinClass extends superclass {
|
5501
5524
|
init() {
|
5502
5525
|
super.init?.();
|
@@ -5504,16 +5527,16 @@ const customMixin$1 = (superclass) =>
|
|
5504
5527
|
const template = document.createElement('template');
|
5505
5528
|
|
5506
5529
|
template.innerHTML = `
|
5507
|
-
<${componentName$
|
5530
|
+
<${componentName$c}
|
5508
5531
|
name="new-password"
|
5509
5532
|
tabindex="-1"
|
5510
5533
|
slot="input"
|
5511
|
-
></${componentName$
|
5534
|
+
></${componentName$c}>
|
5512
5535
|
`;
|
5513
5536
|
|
5514
5537
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5515
5538
|
|
5516
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5539
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$c);
|
5517
5540
|
|
5518
5541
|
forwardAttrs(this, this.inputElement, {
|
5519
5542
|
includeAttrs: [
|
@@ -5534,7 +5557,7 @@ const customMixin$1 = (superclass) =>
|
|
5534
5557
|
}
|
5535
5558
|
};
|
5536
5559
|
|
5537
|
-
const { host: host$
|
5560
|
+
const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
5538
5561
|
host: { selector: () => ':host' },
|
5539
5562
|
label: { selector: '::part(label)' },
|
5540
5563
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
@@ -5546,7 +5569,7 @@ const NewPasswordClass = compose(
|
|
5546
5569
|
createStyleMixin({
|
5547
5570
|
mappings: {
|
5548
5571
|
fontSize: [
|
5549
|
-
host$
|
5572
|
+
host$3,
|
5550
5573
|
{},
|
5551
5574
|
{
|
5552
5575
|
selector: PasswordClass.componentName,
|
@@ -5555,15 +5578,15 @@ const NewPasswordClass = compose(
|
|
5555
5578
|
],
|
5556
5579
|
fontFamily: [label$1, errorMessage$1, helperText],
|
5557
5580
|
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
5558
|
-
hostWidth: { ...host$
|
5559
|
-
hostMinWidth: { ...host$
|
5560
|
-
inputsRequiredIndicator: { ...host$
|
5581
|
+
hostWidth: { ...host$3, property: 'width' },
|
5582
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
5583
|
+
inputsRequiredIndicator: { ...host$3, property: 'content' },
|
5561
5584
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5562
5585
|
},
|
5563
5586
|
}),
|
5564
5587
|
draggableMixin,
|
5565
5588
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5566
|
-
customMixin$
|
5589
|
+
customMixin$2
|
5567
5590
|
)(
|
5568
5591
|
createProxy({
|
5569
5592
|
slots: [],
|
@@ -5612,7 +5635,7 @@ const NewPasswordClass = compose(
|
|
5612
5635
|
},
|
5613
5636
|
`,
|
5614
5637
|
excludeAttrsSync: ['tabindex'],
|
5615
|
-
componentName: componentName$
|
5638
|
+
componentName: componentName$b,
|
5616
5639
|
})
|
5617
5640
|
);
|
5618
5641
|
|
@@ -5637,7 +5660,7 @@ const commonAttrs = [
|
|
5637
5660
|
|
5638
5661
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5639
5662
|
|
5640
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5663
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
|
5641
5664
|
|
5642
5665
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5643
5666
|
static get observedAttributes() {
|
@@ -5797,16 +5820,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5797
5820
|
}
|
5798
5821
|
}
|
5799
5822
|
|
5800
|
-
customElements.define(componentName$
|
5823
|
+
customElements.define(componentName$c, NewPasswordInternal);
|
5801
5824
|
|
5802
|
-
customElements.define(componentName$
|
5825
|
+
customElements.define(componentName$b, NewPasswordClass);
|
5803
5826
|
|
5804
|
-
const componentName$
|
5827
|
+
const componentName$a = getComponentName('recaptcha');
|
5805
5828
|
|
5806
5829
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
5807
5830
|
|
5808
5831
|
const BaseClass = createBaseClass({
|
5809
|
-
componentName: componentName$
|
5832
|
+
componentName: componentName$a,
|
5810
5833
|
baseSelector: ':host > div',
|
5811
5834
|
});
|
5812
5835
|
class RawRecaptcha extends BaseClass {
|
@@ -5958,7 +5981,7 @@ class RawRecaptcha extends BaseClass {
|
|
5958
5981
|
|
5959
5982
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
5960
5983
|
|
5961
|
-
customElements.define(componentName$
|
5984
|
+
customElements.define(componentName$a, RecaptchaClass);
|
5962
5985
|
|
5963
5986
|
const getFileBase64 = (fileObj) => {
|
5964
5987
|
return new Promise((resolve) => {
|
@@ -5972,7 +5995,7 @@ const getFilename = (fileObj) => {
|
|
5972
5995
|
return fileObj.name.replace(/^.*\\/, '');
|
5973
5996
|
};
|
5974
5997
|
|
5975
|
-
const componentName$
|
5998
|
+
const componentName$9 = getComponentName('upload-file');
|
5976
5999
|
|
5977
6000
|
const observedAttributes = [
|
5978
6001
|
'title',
|
@@ -5987,7 +6010,7 @@ const observedAttributes = [
|
|
5987
6010
|
'icon',
|
5988
6011
|
];
|
5989
6012
|
|
5990
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6013
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$9, baseSelector: ':host > div' });
|
5991
6014
|
|
5992
6015
|
class RawUploadFile extends BaseInputClass {
|
5993
6016
|
static get observedAttributes() {
|
@@ -6158,7 +6181,7 @@ class RawUploadFile extends BaseInputClass {
|
|
6158
6181
|
}
|
6159
6182
|
}
|
6160
6183
|
|
6161
|
-
const { host: host$
|
6184
|
+
const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
6162
6185
|
host: { selector: () => ':host' },
|
6163
6186
|
wrapper: { selector: () => ':host > div' },
|
6164
6187
|
icon: { selector: () => '::slotted(*)' },
|
@@ -6177,8 +6200,8 @@ const UploadFileClass = compose(
|
|
6177
6200
|
borderWidth: {},
|
6178
6201
|
borderStyle: {},
|
6179
6202
|
borderRadius: {},
|
6180
|
-
hostHeight: { ...host$
|
6181
|
-
hostWidth: { ...host$
|
6203
|
+
hostHeight: { ...host$2, property: 'height' },
|
6204
|
+
hostWidth: { ...host$2, property: 'width' },
|
6182
6205
|
hostPadding: { property: 'padding' },
|
6183
6206
|
gap: { ...wrapper },
|
6184
6207
|
lineHeight: { ...wrapper, property: 'line-height' },
|
@@ -6197,12 +6220,12 @@ const UploadFileClass = compose(
|
|
6197
6220
|
componentNameValidationMixin
|
6198
6221
|
)(RawUploadFile);
|
6199
6222
|
|
6200
|
-
customElements.define(componentName$
|
6223
|
+
customElements.define(componentName$9, UploadFileClass);
|
6201
6224
|
|
6202
|
-
const componentName$
|
6225
|
+
const componentName$8 = getComponentName('button-selection-group-internal');
|
6203
6226
|
|
6204
6227
|
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6205
|
-
componentName: componentName$
|
6228
|
+
componentName: componentName$8,
|
6206
6229
|
baseSelector: 'slot',
|
6207
6230
|
}) {
|
6208
6231
|
constructor() {
|
@@ -6339,9 +6362,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6339
6362
|
}
|
6340
6363
|
}
|
6341
6364
|
|
6342
|
-
const componentName$
|
6365
|
+
const componentName$7 = getComponentName('button-selection-group');
|
6343
6366
|
|
6344
|
-
const customMixin = (superclass) =>
|
6367
|
+
const customMixin$1 = (superclass) =>
|
6345
6368
|
class ButtonSelectionGroupMixinClass extends superclass {
|
6346
6369
|
// eslint-disable-next-line class-methods-use-this
|
6347
6370
|
#renderItem = ({ value, label }) =>
|
@@ -6414,18 +6437,18 @@ const customMixin = (superclass) =>
|
|
6414
6437
|
const template = document.createElement('template');
|
6415
6438
|
|
6416
6439
|
template.innerHTML = `
|
6417
|
-
<${componentName$
|
6440
|
+
<${componentName$8}
|
6418
6441
|
name="button-selection-group"
|
6419
6442
|
slot="input"
|
6420
6443
|
tabindex="-1"
|
6421
6444
|
>
|
6422
6445
|
<slot></slot>
|
6423
|
-
</${componentName$
|
6446
|
+
</${componentName$8}>
|
6424
6447
|
`;
|
6425
6448
|
|
6426
6449
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6427
6450
|
|
6428
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6451
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
6429
6452
|
|
6430
6453
|
forwardAttrs(this, this.inputElement, {
|
6431
6454
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
@@ -6444,7 +6467,7 @@ const customMixin = (superclass) =>
|
|
6444
6467
|
}
|
6445
6468
|
};
|
6446
6469
|
|
6447
|
-
const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
6470
|
+
const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage } = {
|
6448
6471
|
host: { selector: () => ':host' },
|
6449
6472
|
label: { selector: '::part(label)' },
|
6450
6473
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -6455,8 +6478,8 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
|
6455
6478
|
const ButtonSelectionGroupClass = compose(
|
6456
6479
|
createStyleMixin({
|
6457
6480
|
mappings: {
|
6458
|
-
hostWidth: { ...host, property: 'width' },
|
6459
|
-
fontFamily: host,
|
6481
|
+
hostWidth: { ...host$1, property: 'width' },
|
6482
|
+
fontFamily: host$1,
|
6460
6483
|
labelTextColor: [
|
6461
6484
|
{ ...label, property: 'color' },
|
6462
6485
|
{ ...requiredIndicator, property: 'color' },
|
@@ -6469,7 +6492,7 @@ const ButtonSelectionGroupClass = compose(
|
|
6469
6492
|
draggableMixin,
|
6470
6493
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6471
6494
|
componentNameValidationMixin,
|
6472
|
-
customMixin
|
6495
|
+
customMixin$1
|
6473
6496
|
)(
|
6474
6497
|
createProxy({
|
6475
6498
|
slots: [],
|
@@ -6528,18 +6551,18 @@ const ButtonSelectionGroupClass = compose(
|
|
6528
6551
|
${resetInputCursor('vaadin-text-field')}
|
6529
6552
|
`,
|
6530
6553
|
excludeAttrsSync: ['tabindex'],
|
6531
|
-
componentName: componentName$
|
6554
|
+
componentName: componentName$7,
|
6532
6555
|
})
|
6533
6556
|
);
|
6534
6557
|
|
6535
|
-
customElements.define(componentName$
|
6558
|
+
customElements.define(componentName$8, ButtonSelectionGroupInternalClass);
|
6536
6559
|
|
6537
|
-
customElements.define(componentName$
|
6560
|
+
customElements.define(componentName$7, ButtonSelectionGroupClass);
|
6538
6561
|
|
6539
|
-
const componentName$
|
6562
|
+
const componentName$6 = getComponentName('button-selection-group-item');
|
6540
6563
|
|
6541
6564
|
class RawSelectItem extends createBaseClass({
|
6542
|
-
componentName: componentName$
|
6565
|
+
componentName: componentName$6,
|
6543
6566
|
baseSelector: ':host > descope-button',
|
6544
6567
|
}) {
|
6545
6568
|
get size() {
|
@@ -6633,7 +6656,337 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6633
6656
|
componentNameValidationMixin
|
6634
6657
|
)(RawSelectItem);
|
6635
6658
|
|
6636
|
-
customElements.define(componentName$
|
6659
|
+
customElements.define(componentName$6, ButtonSelectionGroupItemClass);
|
6660
|
+
|
6661
|
+
const componentName$5 = getComponentName('grid-text-column');
|
6662
|
+
|
6663
|
+
class GridTextColumnClass extends GridColumn {}
|
6664
|
+
|
6665
|
+
customElements.define(componentName$5, GridTextColumnClass);
|
6666
|
+
|
6667
|
+
/* eslint-disable no-param-reassign */
|
6668
|
+
|
6669
|
+
const componentName$4 = getComponentName('grid-status-column');
|
6670
|
+
class GridStatusColumnClass extends GridColumn {
|
6671
|
+
_defaultRenderer(cell, _col, model) {
|
6672
|
+
const grid = cell.parentNode;
|
6673
|
+
const size = grid.getAttribute('size');
|
6674
|
+
|
6675
|
+
const contentAttr = this.getAttribute('status');
|
6676
|
+
if (!contentAttr) {
|
6677
|
+
cell.innerHTML = model.item[this.path];
|
6678
|
+
return;
|
6679
|
+
}
|
6680
|
+
|
6681
|
+
const [active, inactive] = contentAttr.split(',');
|
6682
|
+
|
6683
|
+
const label = model.item[this.path] ? active : inactive;
|
6684
|
+
const mode = model.item[this.path] ? 'success' : 'error';
|
6685
|
+
|
6686
|
+
cell.innerHTML = `<descope-button
|
6687
|
+
st-host-height="2.5em"
|
6688
|
+
mode="${mode}"
|
6689
|
+
variant="outline"
|
6690
|
+
size="${size}">
|
6691
|
+
${label}
|
6692
|
+
</descope-button>`;
|
6693
|
+
}
|
6694
|
+
}
|
6695
|
+
|
6696
|
+
customElements.define(componentName$4, GridStatusColumnClass);
|
6697
|
+
|
6698
|
+
/* eslint-disable class-methods-use-this */
|
6699
|
+
|
6700
|
+
const componentName$3 = getComponentName('grid-selection-column');
|
6701
|
+
|
6702
|
+
const createCheckboxEle = () => {
|
6703
|
+
const checkbox = document.createElement('descope-checkbox');
|
6704
|
+
|
6705
|
+
checkbox.setAttribute('bordered', 'true');
|
6706
|
+
checkbox.setAttribute('size', 'xs');
|
6707
|
+
|
6708
|
+
return checkbox;
|
6709
|
+
};
|
6710
|
+
|
6711
|
+
const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
|
6712
|
+
|
6713
|
+
class GridSelectionColumnClass extends GridSelectionColumn {
|
6714
|
+
onInput(grid) {
|
6715
|
+
if (grid.selectedItems.length === grid.items?.length) {
|
6716
|
+
grid.selectedItems = [];
|
6717
|
+
} else {
|
6718
|
+
grid.selectedItems = grid.items;
|
6719
|
+
}
|
6720
|
+
}
|
6721
|
+
|
6722
|
+
_headerRenderer(cell) {
|
6723
|
+
const grid = cell.parentNode;
|
6724
|
+
|
6725
|
+
let checkbox = cell.querySelector('descope-checkbox');
|
6726
|
+
if (!checkbox) {
|
6727
|
+
checkbox = createCheckboxEle();
|
6728
|
+
|
6729
|
+
checkbox.addEventListener('input', () => {
|
6730
|
+
const isAllItemsSelected = getIsAllItemsSelected(grid);
|
6731
|
+
if (isAllItemsSelected) {
|
6732
|
+
grid.selectedItems = [];
|
6733
|
+
} else {
|
6734
|
+
grid.selectedItems = grid.items;
|
6735
|
+
}
|
6736
|
+
});
|
6737
|
+
|
6738
|
+
cell.appendChild(checkbox);
|
6739
|
+
}
|
6740
|
+
|
6741
|
+
checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
|
6742
|
+
}
|
6743
|
+
|
6744
|
+
_defaultRenderer(cell, col, model) {
|
6745
|
+
const grid = cell.parentNode;
|
6746
|
+
|
6747
|
+
let checkbox = cell.querySelector('descope-checkbox');
|
6748
|
+
if (!checkbox) {
|
6749
|
+
checkbox = createCheckboxEle();
|
6750
|
+
cell.appendChild(checkbox);
|
6751
|
+
}
|
6752
|
+
|
6753
|
+
checkbox.onchange = () => {
|
6754
|
+
checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
|
6755
|
+
};
|
6756
|
+
|
6757
|
+
checkbox.setAttribute('checked', model.selected);
|
6758
|
+
}
|
6759
|
+
}
|
6760
|
+
|
6761
|
+
customElements.define(componentName$3, GridSelectionColumnClass);
|
6762
|
+
|
6763
|
+
const isValidDataType = (data) => {
|
6764
|
+
const isValid = Array.isArray(data);
|
6765
|
+
if (!isValid) {
|
6766
|
+
// eslint-disable-next-line no-console
|
6767
|
+
console.error('data must be an array, received:', data);
|
6768
|
+
}
|
6769
|
+
|
6770
|
+
return isValid;
|
6771
|
+
};
|
6772
|
+
|
6773
|
+
const componentName$2 = getComponentName('grid');
|
6774
|
+
|
6775
|
+
const GridMixin = (superclass) =>
|
6776
|
+
class GridMixinClass extends superclass {
|
6777
|
+
#columns;
|
6778
|
+
|
6779
|
+
init() {
|
6780
|
+
super.init?.();
|
6781
|
+
this.handleColumns();
|
6782
|
+
this.forwardSelectedItemsChange();
|
6783
|
+
}
|
6784
|
+
|
6785
|
+
forwardSelectedItemsChange() {
|
6786
|
+
this.baseElement.addEventListener('selected-items-changed', (e) => {
|
6787
|
+
this.dispatchEvent(
|
6788
|
+
new CustomEvent('selected-items-changed', {
|
6789
|
+
bubbles: true,
|
6790
|
+
composed: true,
|
6791
|
+
detail: e.detail,
|
6792
|
+
})
|
6793
|
+
);
|
6794
|
+
});
|
6795
|
+
}
|
6796
|
+
|
6797
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
6798
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6799
|
+
|
6800
|
+
if (attrName === 'columns') {
|
6801
|
+
this.setColumnsDataFromAttr();
|
6802
|
+
}
|
6803
|
+
}
|
6804
|
+
|
6805
|
+
handleColumns() {
|
6806
|
+
if (this.columnsAttr) {
|
6807
|
+
this.setColumnsDataFromAttr();
|
6808
|
+
} else if (this.children.length) {
|
6809
|
+
this.setColumnsFromChildren();
|
6810
|
+
}
|
6811
|
+
}
|
6812
|
+
|
6813
|
+
setColumnsFromChildren() {
|
6814
|
+
this.#columns = Array.from(this.children).map((child) => {
|
6815
|
+
return {
|
6816
|
+
path: child.getAttribute('path'),
|
6817
|
+
header: child.getAttribute('header'),
|
6818
|
+
type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
|
6819
|
+
|
6820
|
+
attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
|
6821
|
+
const attrVal = child.getAttribute(attrName);
|
6822
|
+
|
6823
|
+
if (attrVal) {
|
6824
|
+
acc[attrName] = attrVal;
|
6825
|
+
}
|
6826
|
+
|
6827
|
+
return acc;
|
6828
|
+
}, {}),
|
6829
|
+
};
|
6830
|
+
});
|
6831
|
+
}
|
6832
|
+
|
6833
|
+
get columnsAttr() {
|
6834
|
+
return this.getAttribute('columns');
|
6835
|
+
}
|
6836
|
+
|
6837
|
+
setColumnsDataFromAttr() {
|
6838
|
+
try {
|
6839
|
+
const data = JSON.parse(this.columnsAttr);
|
6840
|
+
if (isValidDataType(data)) {
|
6841
|
+
this.columns = data;
|
6842
|
+
}
|
6843
|
+
} catch (e) {
|
6844
|
+
// eslint-disable-next-line no-console
|
6845
|
+
console.error('could not parse data string from attribute "columns" -', e.message);
|
6846
|
+
}
|
6847
|
+
}
|
6848
|
+
|
6849
|
+
// eslint-disable-next-line class-methods-use-this
|
6850
|
+
#renderColumn = ({ path, header, type, attrs }) => {
|
6851
|
+
const colAttrs = Object.entries(attrs)
|
6852
|
+
.map(([key, value]) => `${key}="${value}"`)
|
6853
|
+
.join(' ');
|
6854
|
+
|
6855
|
+
const tagName = `descope-grid-${type}-column`;
|
6856
|
+
|
6857
|
+
return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
|
6858
|
+
};
|
6859
|
+
|
6860
|
+
get renderColumn() {
|
6861
|
+
return this.#renderColumn;
|
6862
|
+
}
|
6863
|
+
|
6864
|
+
set renderColumn(renderFn) {
|
6865
|
+
this.#renderColumn = renderFn;
|
6866
|
+
this.renderColumns();
|
6867
|
+
}
|
6868
|
+
|
6869
|
+
getColumnsTemplate() {
|
6870
|
+
return this.#columns?.reduce?.(
|
6871
|
+
(acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
|
6872
|
+
''
|
6873
|
+
);
|
6874
|
+
}
|
6875
|
+
|
6876
|
+
renderColumns() {
|
6877
|
+
const template = this.getColumnsTemplate();
|
6878
|
+
if (template) this.innerHTML = template;
|
6879
|
+
}
|
6880
|
+
|
6881
|
+
get grid() {
|
6882
|
+
return this.shadowRoot.querySelector('vaadin-grid');
|
6883
|
+
}
|
6884
|
+
|
6885
|
+
get data() {
|
6886
|
+
return this.grid.items;
|
6887
|
+
}
|
6888
|
+
|
6889
|
+
set data(data) {
|
6890
|
+
if (isValidDataType(data) && this.grid.items !== data) {
|
6891
|
+
this.grid.items = data;
|
6892
|
+
|
6893
|
+
if (this.grid.selectedItems) {
|
6894
|
+
const itemsIds = new Set(
|
6895
|
+
this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
|
6896
|
+
);
|
6897
|
+
this.grid.selectedItems = this.grid.selectedItems.filter((selectedItem) =>
|
6898
|
+
itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
|
6899
|
+
);
|
6900
|
+
}
|
6901
|
+
}
|
6902
|
+
}
|
6903
|
+
|
6904
|
+
get columns() {
|
6905
|
+
return this.#columns;
|
6906
|
+
}
|
6907
|
+
|
6908
|
+
set columns(data) {
|
6909
|
+
this.#columns = data;
|
6910
|
+
this.renderColumns();
|
6911
|
+
}
|
6912
|
+
|
6913
|
+
get paths() {
|
6914
|
+
return this.columns.map((col) => col.path);
|
6915
|
+
}
|
6916
|
+
|
6917
|
+
get uniqueColumnId() {
|
6918
|
+
return this.getAttribute('unique-column-id');
|
6919
|
+
}
|
6920
|
+
};
|
6921
|
+
|
6922
|
+
const {
|
6923
|
+
host,
|
6924
|
+
headerRow,
|
6925
|
+
contentRow,
|
6926
|
+
firstRow,
|
6927
|
+
sortIndicators,
|
6928
|
+
activeSortIndicator,
|
6929
|
+
selectedRow,
|
6930
|
+
rowSeparator,
|
6931
|
+
resizeHandle,
|
6932
|
+
} = {
|
6933
|
+
host: { selector: () => 'vaadin-grid' },
|
6934
|
+
headerRow: { selector: () => '::part(header-cell)' },
|
6935
|
+
contentRow: { selector: () => '::part(cell)' },
|
6936
|
+
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
6937
|
+
selectedRow: { selector: () => '::part(selected-row-cell)' },
|
6938
|
+
sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
|
6939
|
+
activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
|
6940
|
+
rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
|
6941
|
+
resizeHandle: { selector: () => '::part(resize-handle)' },
|
6942
|
+
};
|
6943
|
+
|
6944
|
+
const GridClass = compose(
|
6945
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
|
6946
|
+
createStyleMixin({
|
6947
|
+
mappings: {
|
6948
|
+
hostWidth: { selector: () => ':host', property: 'width' },
|
6949
|
+
hostHeight: { selector: () => ':host', property: 'height' },
|
6950
|
+
hostMinHeight: { selector: () => ':host', property: 'min-height' },
|
6951
|
+
fontFamily: [{ ...headerRow }, { ...contentRow }],
|
6952
|
+
fontSize: [{ ...headerRow }, { ...contentRow }],
|
6953
|
+
fontWeight: { ...contentRow },
|
6954
|
+
valueTextColor: { ...contentRow, property: 'color' },
|
6955
|
+
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
6956
|
+
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
6957
|
+
inputBorderColor: { ...host, property: 'border-color' },
|
6958
|
+
inputBorderWidth: { ...host, property: 'border-width' },
|
6959
|
+
inputBorderStyle: { ...host, property: 'border-style' },
|
6960
|
+
inputBorderRadius: { ...host, property: 'border-radius' },
|
6961
|
+
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
6962
|
+
selectedTextColor: { ...selectedRow, property: 'color' },
|
6963
|
+
separatorColor: [
|
6964
|
+
{ ...firstRow, property: 'border-bottom-color' },
|
6965
|
+
{ ...rowSeparator, property: 'border-top-color' },
|
6966
|
+
],
|
6967
|
+
resizeHandleColor: { ...resizeHandle, property: 'background-color' },
|
6968
|
+
},
|
6969
|
+
}),
|
6970
|
+
draggableMixin,
|
6971
|
+
componentNameValidationMixin,
|
6972
|
+
GridMixin
|
6973
|
+
)(
|
6974
|
+
createProxy({
|
6975
|
+
slots: [''],
|
6976
|
+
wrappedEleName: 'vaadin-grid',
|
6977
|
+
style: () => `
|
6978
|
+
vaadin-grid {
|
6979
|
+
overflow: hidden;
|
6980
|
+
height: 100%;
|
6981
|
+
min-height: 300px;
|
6982
|
+
}
|
6983
|
+
`,
|
6984
|
+
excludeAttrsSync: ['columns', 'tabindex'],
|
6985
|
+
componentName: componentName$2,
|
6986
|
+
})
|
6987
|
+
);
|
6988
|
+
|
6989
|
+
customElements.define(componentName$2, GridClass);
|
6637
6990
|
|
6638
6991
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
6639
6992
|
|
@@ -6961,143 +7314,143 @@ const globals = {
|
|
6961
7314
|
shadow,
|
6962
7315
|
fonts,
|
6963
7316
|
};
|
6964
|
-
const vars$
|
7317
|
+
const vars$t = getThemeVars(globals);
|
6965
7318
|
|
6966
|
-
const globalRefs$
|
6967
|
-
const compVars$
|
7319
|
+
const globalRefs$e = getThemeRefs(globals);
|
7320
|
+
const compVars$4 = ButtonClass.cssVarList;
|
6968
7321
|
|
6969
7322
|
const mode = {
|
6970
|
-
primary: globalRefs$
|
6971
|
-
secondary: globalRefs$
|
6972
|
-
success: globalRefs$
|
6973
|
-
error: globalRefs$
|
6974
|
-
surface: globalRefs$
|
7323
|
+
primary: globalRefs$e.colors.primary,
|
7324
|
+
secondary: globalRefs$e.colors.secondary,
|
7325
|
+
success: globalRefs$e.colors.success,
|
7326
|
+
error: globalRefs$e.colors.error,
|
7327
|
+
surface: globalRefs$e.colors.surface,
|
6975
7328
|
};
|
6976
7329
|
|
6977
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
7330
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$B);
|
6978
7331
|
|
6979
7332
|
const button = {
|
6980
7333
|
...helperTheme$3,
|
6981
7334
|
|
6982
|
-
[compVars$
|
7335
|
+
[compVars$4.fontFamily]: globalRefs$e.fonts.font1.family,
|
6983
7336
|
|
6984
|
-
[compVars$
|
6985
|
-
[compVars$
|
6986
|
-
[compVars$
|
7337
|
+
[compVars$4.cursor]: 'pointer',
|
7338
|
+
[compVars$4.hostHeight]: '3em',
|
7339
|
+
[compVars$4.hostWidth]: 'auto',
|
6987
7340
|
|
6988
|
-
[compVars$
|
6989
|
-
[compVars$
|
6990
|
-
[compVars$
|
6991
|
-
[compVars$
|
7341
|
+
[compVars$4.borderRadius]: globalRefs$e.radius.sm,
|
7342
|
+
[compVars$4.borderWidth]: globalRefs$e.border.xs,
|
7343
|
+
[compVars$4.borderStyle]: 'solid',
|
7344
|
+
[compVars$4.borderColor]: 'transparent',
|
6992
7345
|
|
6993
|
-
[compVars$
|
7346
|
+
[compVars$4.labelSpacing]: '0.25em',
|
6994
7347
|
|
6995
|
-
[compVars$
|
7348
|
+
[compVars$4.verticalPadding]: '1em',
|
6996
7349
|
|
6997
|
-
[compVars$
|
6998
|
-
[compVars$
|
6999
|
-
[compVars$
|
7000
|
-
[compVars$
|
7350
|
+
[compVars$4.outlineWidth]: globals.border.sm,
|
7351
|
+
[compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
|
7352
|
+
[compVars$4.outlineStyle]: 'solid',
|
7353
|
+
[compVars$4.outlineColor]: 'transparent',
|
7001
7354
|
|
7002
7355
|
size: {
|
7003
|
-
xs: { [compVars$
|
7004
|
-
sm: { [compVars$
|
7005
|
-
md: { [compVars$
|
7006
|
-
lg: { [compVars$
|
7356
|
+
xs: { [compVars$4.fontSize]: '12px' },
|
7357
|
+
sm: { [compVars$4.fontSize]: '14px' },
|
7358
|
+
md: { [compVars$4.fontSize]: '16px' },
|
7359
|
+
lg: { [compVars$4.fontSize]: '18px' },
|
7007
7360
|
},
|
7008
7361
|
|
7009
7362
|
_square: {
|
7010
|
-
[compVars$
|
7011
|
-
[compVars$
|
7012
|
-
[compVars$
|
7363
|
+
[compVars$4.hostHeight]: '3em',
|
7364
|
+
[compVars$4.hostWidth]: '3em',
|
7365
|
+
[compVars$4.verticalPadding]: '0',
|
7013
7366
|
},
|
7014
7367
|
|
7015
7368
|
_fullWidth: {
|
7016
|
-
[compVars$
|
7369
|
+
[compVars$4.hostWidth]: '100%',
|
7017
7370
|
},
|
7018
7371
|
|
7019
7372
|
_loading: {
|
7020
|
-
[compVars$
|
7021
|
-
[compVars$
|
7373
|
+
[compVars$4.cursor]: 'wait',
|
7374
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7022
7375
|
},
|
7023
7376
|
|
7024
7377
|
_disabled: {
|
7025
|
-
[helperVars$3.main]: globalRefs$
|
7026
|
-
[helperVars$3.dark]: globalRefs$
|
7027
|
-
[helperVars$3.light]: globalRefs$
|
7028
|
-
[helperVars$3.contrast]: globalRefs$
|
7378
|
+
[helperVars$3.main]: globalRefs$e.colors.surface.main,
|
7379
|
+
[helperVars$3.dark]: globalRefs$e.colors.surface.dark,
|
7380
|
+
[helperVars$3.light]: globalRefs$e.colors.surface.light,
|
7381
|
+
[helperVars$3.contrast]: globalRefs$e.colors.surface.contrast,
|
7029
7382
|
},
|
7030
7383
|
|
7031
7384
|
variant: {
|
7032
7385
|
contained: {
|
7033
|
-
[compVars$
|
7034
|
-
[compVars$
|
7386
|
+
[compVars$4.labelTextColor]: helperRefs$3.contrast,
|
7387
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7035
7388
|
_hover: {
|
7036
|
-
[compVars$
|
7389
|
+
[compVars$4.backgroundColor]: helperRefs$3.dark,
|
7037
7390
|
_loading: {
|
7038
|
-
[compVars$
|
7391
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7039
7392
|
},
|
7040
7393
|
},
|
7041
7394
|
_active: {
|
7042
|
-
[compVars$
|
7395
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7043
7396
|
},
|
7044
7397
|
},
|
7045
7398
|
|
7046
7399
|
outline: {
|
7047
|
-
[compVars$
|
7048
|
-
[compVars$
|
7400
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7401
|
+
[compVars$4.borderColor]: 'currentColor',
|
7049
7402
|
_hover: {
|
7050
|
-
[compVars$
|
7403
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7051
7404
|
},
|
7052
7405
|
_active: {
|
7053
|
-
[compVars$
|
7406
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7054
7407
|
},
|
7055
7408
|
},
|
7056
7409
|
|
7057
7410
|
link: {
|
7058
|
-
[compVars$
|
7411
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7059
7412
|
_hover: {
|
7060
|
-
[compVars$
|
7061
|
-
[compVars$
|
7413
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7414
|
+
[compVars$4.labelTextDecoration]: 'underline',
|
7062
7415
|
},
|
7063
7416
|
_active: {
|
7064
|
-
[compVars$
|
7417
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7065
7418
|
},
|
7066
7419
|
},
|
7067
7420
|
},
|
7068
7421
|
|
7069
7422
|
_focused: {
|
7070
|
-
[compVars$
|
7423
|
+
[compVars$4.outlineColor]: globalRefs$e.colors.surface.main,
|
7071
7424
|
},
|
7072
7425
|
};
|
7073
7426
|
|
7074
|
-
const vars$
|
7075
|
-
...compVars$
|
7427
|
+
const vars$s = {
|
7428
|
+
...compVars$4,
|
7076
7429
|
...helperVars$3,
|
7077
7430
|
};
|
7078
7431
|
|
7079
7432
|
var button$1 = /*#__PURE__*/Object.freeze({
|
7080
7433
|
__proto__: null,
|
7081
7434
|
default: button,
|
7082
|
-
vars: vars$
|
7435
|
+
vars: vars$s
|
7083
7436
|
});
|
7084
7437
|
|
7085
|
-
const componentName = getComponentName('input-wrapper');
|
7086
|
-
const globalRefs$
|
7438
|
+
const componentName$1 = getComponentName('input-wrapper');
|
7439
|
+
const globalRefs$d = getThemeRefs(globals);
|
7087
7440
|
|
7088
|
-
const [theme$1, refs, vars$
|
7441
|
+
const [theme$1, refs, vars$r] = createHelperVars(
|
7089
7442
|
{
|
7090
|
-
labelTextColor: globalRefs$
|
7091
|
-
valueTextColor: globalRefs$
|
7092
|
-
placeholderTextColor: globalRefs$
|
7443
|
+
labelTextColor: globalRefs$d.colors.surface.contrast,
|
7444
|
+
valueTextColor: globalRefs$d.colors.surface.contrast,
|
7445
|
+
placeholderTextColor: globalRefs$d.colors.surface.main,
|
7093
7446
|
requiredIndicator: "'*'",
|
7094
|
-
errorMessageTextColor: globalRefs$
|
7447
|
+
errorMessageTextColor: globalRefs$d.colors.error.main,
|
7095
7448
|
|
7096
|
-
borderWidth: globalRefs$
|
7097
|
-
borderRadius: globalRefs$
|
7449
|
+
borderWidth: globalRefs$d.border.xs,
|
7450
|
+
borderRadius: globalRefs$d.radius.xs,
|
7098
7451
|
borderColor: 'transparent',
|
7099
7452
|
|
7100
|
-
outlineWidth: globalRefs$
|
7453
|
+
outlineWidth: globalRefs$d.border.sm,
|
7101
7454
|
outlineStyle: 'solid',
|
7102
7455
|
outlineColor: 'transparent',
|
7103
7456
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -7108,9 +7461,9 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
7108
7461
|
horizontalPadding: '0.5em',
|
7109
7462
|
verticalPadding: '0.5em',
|
7110
7463
|
|
7111
|
-
backgroundColor: globalRefs$
|
7464
|
+
backgroundColor: globalRefs$d.colors.surface.light,
|
7112
7465
|
|
7113
|
-
fontFamily: globalRefs$
|
7466
|
+
fontFamily: globalRefs$d.fonts.font1.family,
|
7114
7467
|
|
7115
7468
|
size: {
|
7116
7469
|
xs: { fontSize: '12px' },
|
@@ -7124,48 +7477,112 @@ const [theme$1, refs, vars$p] = createHelperVars(
|
|
7124
7477
|
},
|
7125
7478
|
|
7126
7479
|
_focused: {
|
7127
|
-
outlineColor: globalRefs$
|
7480
|
+
outlineColor: globalRefs$d.colors.surface.main,
|
7128
7481
|
_invalid: {
|
7129
|
-
outlineColor: globalRefs$
|
7482
|
+
outlineColor: globalRefs$d.colors.error.main,
|
7130
7483
|
},
|
7131
7484
|
},
|
7132
7485
|
|
7133
7486
|
_bordered: {
|
7134
|
-
outlineWidth: globalRefs$
|
7135
|
-
borderColor: globalRefs$
|
7487
|
+
outlineWidth: globalRefs$d.border.xs,
|
7488
|
+
borderColor: globalRefs$d.colors.surface.main,
|
7136
7489
|
borderStyle: 'solid',
|
7137
7490
|
_invalid: {
|
7138
|
-
borderColor: globalRefs$
|
7491
|
+
borderColor: globalRefs$d.colors.error.main,
|
7139
7492
|
},
|
7140
7493
|
},
|
7141
7494
|
|
7142
7495
|
_disabled: {
|
7143
|
-
labelTextColor: globalRefs$
|
7144
|
-
borderColor: globalRefs$
|
7145
|
-
valueTextColor: globalRefs$
|
7146
|
-
placeholderTextColor: globalRefs$
|
7147
|
-
backgroundColor: globalRefs$
|
7496
|
+
labelTextColor: globalRefs$d.colors.surface.main,
|
7497
|
+
borderColor: globalRefs$d.colors.surface.main,
|
7498
|
+
valueTextColor: globalRefs$d.colors.surface.dark,
|
7499
|
+
placeholderTextColor: globalRefs$d.colors.surface.dark,
|
7500
|
+
backgroundColor: globalRefs$d.colors.surface.main,
|
7148
7501
|
},
|
7149
7502
|
},
|
7150
|
-
componentName
|
7503
|
+
componentName$1
|
7151
7504
|
);
|
7152
7505
|
|
7153
7506
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
7154
7507
|
__proto__: null,
|
7155
7508
|
default: theme$1,
|
7156
7509
|
refs: refs,
|
7157
|
-
vars: vars$
|
7510
|
+
vars: vars$r
|
7158
7511
|
});
|
7159
7512
|
|
7160
|
-
const vars$
|
7513
|
+
const vars$q = TextFieldClass.cssVarList;
|
7161
7514
|
|
7162
7515
|
const textField = {
|
7516
|
+
[vars$q.hostWidth]: refs.width,
|
7517
|
+
[vars$q.hostMinWidth]: refs.minWidth,
|
7518
|
+
[vars$q.fontSize]: refs.fontSize,
|
7519
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
7520
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
7521
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7522
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
7523
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
7524
|
+
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
7525
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7526
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
7527
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
7528
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
7529
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
7530
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
7531
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7532
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7533
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7534
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
7535
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7536
|
+
};
|
7537
|
+
|
7538
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
7539
|
+
__proto__: null,
|
7540
|
+
default: textField,
|
7541
|
+
textField: textField,
|
7542
|
+
vars: vars$q
|
7543
|
+
});
|
7544
|
+
|
7545
|
+
const globalRefs$c = getThemeRefs(globals);
|
7546
|
+
const vars$p = PasswordClass.cssVarList;
|
7547
|
+
|
7548
|
+
const password = {
|
7549
|
+
[vars$p.hostWidth]: refs.width,
|
7550
|
+
[vars$p.fontSize]: refs.fontSize,
|
7551
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
7552
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
7553
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7554
|
+
[vars$p.inputHorizontalPadding]: refs.horizontalPadding,
|
7555
|
+
[vars$p.inputHeight]: refs.inputHeight,
|
7556
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7557
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7558
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7559
|
+
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7560
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7561
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7562
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
7563
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
7564
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
7565
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7566
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7567
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7568
|
+
[vars$p.revealButtonOffset]: globalRefs$c.spacing.md,
|
7569
|
+
[vars$p.revealButtonSize]: refs.toggleButtonSize,
|
7570
|
+
};
|
7571
|
+
|
7572
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
7573
|
+
__proto__: null,
|
7574
|
+
default: password,
|
7575
|
+
vars: vars$p
|
7576
|
+
});
|
7577
|
+
|
7578
|
+
const vars$o = NumberFieldClass.cssVarList;
|
7579
|
+
|
7580
|
+
const numberField = {
|
7163
7581
|
[vars$o.hostWidth]: refs.width,
|
7164
7582
|
[vars$o.hostMinWidth]: refs.minWidth,
|
7165
7583
|
[vars$o.fontSize]: refs.fontSize,
|
7166
7584
|
[vars$o.fontFamily]: refs.fontFamily,
|
7167
7585
|
[vars$o.labelTextColor]: refs.labelTextColor,
|
7168
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7169
7586
|
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7170
7587
|
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
7171
7588
|
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
@@ -7178,32 +7595,29 @@ const textField = {
|
|
7178
7595
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7179
7596
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7180
7597
|
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7181
|
-
[vars$o.
|
7598
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7182
7599
|
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
7600
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
7183
7601
|
};
|
7184
7602
|
|
7185
|
-
var
|
7603
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7186
7604
|
__proto__: null,
|
7187
|
-
default:
|
7188
|
-
textField: textField,
|
7605
|
+
default: numberField,
|
7189
7606
|
vars: vars$o
|
7190
7607
|
});
|
7191
7608
|
|
7192
|
-
const
|
7193
|
-
const vars$n = PasswordClass.cssVarList;
|
7609
|
+
const vars$n = EmailFieldClass.cssVarList;
|
7194
7610
|
|
7195
|
-
const
|
7611
|
+
const emailField = {
|
7196
7612
|
[vars$n.hostWidth]: refs.width,
|
7613
|
+
[vars$n.hostMinWidth]: refs.minWidth,
|
7197
7614
|
[vars$n.fontSize]: refs.fontSize,
|
7198
7615
|
[vars$n.fontFamily]: refs.fontFamily,
|
7199
7616
|
[vars$n.labelTextColor]: refs.labelTextColor,
|
7200
7617
|
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
7201
|
-
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
7202
|
-
[vars$n.inputHeight]: refs.inputHeight,
|
7203
|
-
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7204
|
-
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7205
7618
|
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
7206
|
-
[vars$n.
|
7619
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
7620
|
+
[vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
|
7207
7621
|
[vars$n.inputBorderWidth]: refs.borderWidth,
|
7208
7622
|
[vars$n.inputBorderStyle]: refs.borderStyle,
|
7209
7623
|
[vars$n.inputBorderColor]: refs.borderColor,
|
@@ -7212,229 +7626,168 @@ const password = {
|
|
7212
7626
|
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7213
7627
|
[vars$n.inputOutlineColor]: refs.outlineColor,
|
7214
7628
|
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
7215
|
-
[vars$n.
|
7216
|
-
[vars$n.
|
7629
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
7630
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
7631
|
+
[vars$n.inputHeight]: refs.inputHeight,
|
7217
7632
|
};
|
7218
7633
|
|
7219
|
-
var
|
7634
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7220
7635
|
__proto__: null,
|
7221
|
-
default:
|
7636
|
+
default: emailField,
|
7222
7637
|
vars: vars$n
|
7223
7638
|
});
|
7224
7639
|
|
7225
|
-
const
|
7640
|
+
const globalRefs$b = getThemeRefs(globals);
|
7641
|
+
const vars$m = TextAreaClass.cssVarList;
|
7226
7642
|
|
7227
|
-
const
|
7643
|
+
const textArea = {
|
7228
7644
|
[vars$m.hostWidth]: refs.width,
|
7229
7645
|
[vars$m.hostMinWidth]: refs.minWidth,
|
7230
7646
|
[vars$m.fontSize]: refs.fontSize,
|
7231
7647
|
[vars$m.fontFamily]: refs.fontFamily,
|
7232
7648
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
7649
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
7233
7650
|
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
7651
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
7234
7652
|
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
7235
|
-
[vars$m.
|
7653
|
+
[vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7654
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
7236
7655
|
[vars$m.inputBorderWidth]: refs.borderWidth,
|
7237
7656
|
[vars$m.inputBorderStyle]: refs.borderStyle,
|
7238
7657
|
[vars$m.inputBorderColor]: refs.borderColor,
|
7239
|
-
[vars$m.inputBorderRadius]: refs.borderRadius,
|
7240
7658
|
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
7241
7659
|
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
7242
7660
|
[vars$m.inputOutlineColor]: refs.outlineColor,
|
7243
7661
|
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
7244
|
-
[vars$m.
|
7245
|
-
[vars$m.
|
7246
|
-
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
7247
|
-
[vars$m.inputHeight]: refs.inputHeight,
|
7248
|
-
};
|
7249
|
-
|
7250
|
-
var numberField$1 = /*#__PURE__*/Object.freeze({
|
7251
|
-
__proto__: null,
|
7252
|
-
default: numberField,
|
7253
|
-
vars: vars$m
|
7254
|
-
});
|
7255
|
-
|
7256
|
-
const vars$l = EmailFieldClass.cssVarList;
|
7257
|
-
|
7258
|
-
const emailField = {
|
7259
|
-
[vars$l.hostWidth]: refs.width,
|
7260
|
-
[vars$l.hostMinWidth]: refs.minWidth,
|
7261
|
-
[vars$l.fontSize]: refs.fontSize,
|
7262
|
-
[vars$l.fontFamily]: refs.fontFamily,
|
7263
|
-
[vars$l.labelTextColor]: refs.labelTextColor,
|
7264
|
-
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7265
|
-
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
7266
|
-
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7267
|
-
[vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
|
7268
|
-
[vars$l.inputBorderWidth]: refs.borderWidth,
|
7269
|
-
[vars$l.inputBorderStyle]: refs.borderStyle,
|
7270
|
-
[vars$l.inputBorderColor]: refs.borderColor,
|
7271
|
-
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7272
|
-
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7273
|
-
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7274
|
-
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7275
|
-
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7276
|
-
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
7277
|
-
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
7278
|
-
[vars$l.inputHeight]: refs.inputHeight,
|
7279
|
-
};
|
7280
|
-
|
7281
|
-
var emailField$1 = /*#__PURE__*/Object.freeze({
|
7282
|
-
__proto__: null,
|
7283
|
-
default: emailField,
|
7284
|
-
vars: vars$l
|
7285
|
-
});
|
7286
|
-
|
7287
|
-
const globalRefs$a = getThemeRefs(globals);
|
7288
|
-
const vars$k = TextAreaClass.cssVarList;
|
7289
|
-
|
7290
|
-
const textArea = {
|
7291
|
-
[vars$k.hostWidth]: refs.width,
|
7292
|
-
[vars$k.hostMinWidth]: refs.minWidth,
|
7293
|
-
[vars$k.fontSize]: refs.fontSize,
|
7294
|
-
[vars$k.fontFamily]: refs.fontFamily,
|
7295
|
-
[vars$k.labelTextColor]: refs.labelTextColor,
|
7296
|
-
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
7297
|
-
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
7298
|
-
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
7299
|
-
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
7300
|
-
[vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7301
|
-
[vars$k.inputBorderRadius]: refs.borderRadius,
|
7302
|
-
[vars$k.inputBorderWidth]: refs.borderWidth,
|
7303
|
-
[vars$k.inputBorderStyle]: refs.borderStyle,
|
7304
|
-
[vars$k.inputBorderColor]: refs.borderColor,
|
7305
|
-
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
7306
|
-
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7307
|
-
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7308
|
-
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7309
|
-
[vars$k.inputResizeType]: 'vertical',
|
7310
|
-
[vars$k.inputMinHeight]: '5em',
|
7662
|
+
[vars$m.inputResizeType]: 'vertical',
|
7663
|
+
[vars$m.inputMinHeight]: '5em',
|
7311
7664
|
|
7312
7665
|
_disabled: {
|
7313
|
-
[vars$
|
7666
|
+
[vars$m.inputBackgroundColor]: globalRefs$b.colors.surface.light,
|
7314
7667
|
},
|
7315
7668
|
|
7316
7669
|
_readonly: {
|
7317
|
-
[vars$
|
7670
|
+
[vars$m.inputResizeType]: 'none',
|
7318
7671
|
},
|
7319
7672
|
};
|
7320
7673
|
|
7321
7674
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
7322
7675
|
__proto__: null,
|
7323
7676
|
default: textArea,
|
7324
|
-
vars: vars$
|
7677
|
+
vars: vars$m
|
7325
7678
|
});
|
7326
7679
|
|
7327
|
-
const vars$
|
7680
|
+
const vars$l = CheckboxClass.cssVarList;
|
7328
7681
|
const checkboxSize = '1.35em';
|
7329
7682
|
|
7330
7683
|
const checkbox = {
|
7331
|
-
[vars$
|
7332
|
-
[vars$
|
7333
|
-
[vars$
|
7334
|
-
[vars$
|
7335
|
-
[vars$
|
7336
|
-
[vars$
|
7337
|
-
[vars$
|
7338
|
-
[vars$
|
7339
|
-
[vars$
|
7340
|
-
[vars$
|
7341
|
-
[vars$
|
7342
|
-
[vars$
|
7343
|
-
[vars$
|
7344
|
-
[vars$
|
7345
|
-
[vars$
|
7346
|
-
[vars$
|
7347
|
-
[vars$
|
7348
|
-
[vars$
|
7349
|
-
[vars$
|
7684
|
+
[vars$l.hostWidth]: refs.width,
|
7685
|
+
[vars$l.fontSize]: refs.fontSize,
|
7686
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
7687
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7688
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
7689
|
+
[vars$l.labelFontWeight]: '400',
|
7690
|
+
[vars$l.labelLineHeight]: checkboxSize,
|
7691
|
+
[vars$l.labelSpacing]: '1em',
|
7692
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
7693
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
7694
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
7695
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
7696
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
7697
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
7698
|
+
[vars$l.inputBorderColor]: refs.borderColor,
|
7699
|
+
[vars$l.inputBorderWidth]: refs.borderWidth,
|
7700
|
+
[vars$l.inputBorderStyle]: refs.borderStyle,
|
7701
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
7702
|
+
[vars$l.inputSize]: checkboxSize,
|
7350
7703
|
|
7351
7704
|
_checked: {
|
7352
|
-
[vars$
|
7705
|
+
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
7353
7706
|
},
|
7354
7707
|
|
7355
7708
|
_disabled: {
|
7356
|
-
[vars$
|
7709
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
7357
7710
|
},
|
7358
7711
|
};
|
7359
7712
|
|
7360
7713
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
7361
7714
|
__proto__: null,
|
7362
7715
|
default: checkbox,
|
7363
|
-
vars: vars$
|
7716
|
+
vars: vars$l
|
7364
7717
|
});
|
7365
7718
|
|
7366
7719
|
const knobMargin = '2px';
|
7367
7720
|
const checkboxHeight = '1.25em';
|
7368
7721
|
|
7369
|
-
const globalRefs$
|
7370
|
-
const vars$
|
7722
|
+
const globalRefs$a = getThemeRefs(globals);
|
7723
|
+
const vars$k = SwitchToggleClass.cssVarList;
|
7371
7724
|
|
7372
7725
|
const switchToggle = {
|
7373
|
-
[vars$
|
7374
|
-
[vars$
|
7375
|
-
[vars$
|
7376
|
-
|
7377
|
-
[vars$
|
7378
|
-
[vars$
|
7379
|
-
[vars$
|
7380
|
-
[vars$
|
7381
|
-
|
7382
|
-
[vars$
|
7383
|
-
[vars$
|
7384
|
-
[vars$
|
7385
|
-
[vars$
|
7386
|
-
[vars$
|
7387
|
-
[vars$
|
7388
|
-
[vars$
|
7389
|
-
|
7390
|
-
[vars$
|
7391
|
-
[vars$
|
7392
|
-
[vars$
|
7393
|
-
[vars$
|
7394
|
-
[vars$
|
7395
|
-
[vars$
|
7396
|
-
|
7397
|
-
[vars$
|
7398
|
-
[vars$
|
7399
|
-
[vars$
|
7400
|
-
[vars$
|
7401
|
-
[vars$
|
7402
|
-
[vars$
|
7726
|
+
[vars$k.hostWidth]: refs.width,
|
7727
|
+
[vars$k.fontSize]: refs.fontSize,
|
7728
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
7729
|
+
|
7730
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
7731
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
7732
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
7733
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
7734
|
+
|
7735
|
+
[vars$k.trackBorderStyle]: refs.borderStyle,
|
7736
|
+
[vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
7737
|
+
[vars$k.trackBorderColor]: refs.borderColor,
|
7738
|
+
[vars$k.trackBackgroundColor]: 'none',
|
7739
|
+
[vars$k.trackBorderRadius]: globalRefs$a.radius.md,
|
7740
|
+
[vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
7741
|
+
[vars$k.trackHeight]: checkboxHeight,
|
7742
|
+
|
7743
|
+
[vars$k.knobSize]: `calc(1em - ${knobMargin})`,
|
7744
|
+
[vars$k.knobRadius]: '50%',
|
7745
|
+
[vars$k.knobTopOffset]: '1px',
|
7746
|
+
[vars$k.knobLeftOffset]: knobMargin,
|
7747
|
+
[vars$k.knobColor]: refs.valueTextColor,
|
7748
|
+
[vars$k.knobTransitionDuration]: '0.3s',
|
7749
|
+
|
7750
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
7751
|
+
[vars$k.labelFontWeight]: '400',
|
7752
|
+
[vars$k.labelLineHeight]: '1.35em',
|
7753
|
+
[vars$k.labelSpacing]: '1em',
|
7754
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
7755
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
7403
7756
|
|
7404
7757
|
_checked: {
|
7405
|
-
[vars$
|
7406
|
-
[vars$
|
7407
|
-
[vars$
|
7408
|
-
[vars$
|
7409
|
-
[vars$
|
7758
|
+
[vars$k.trackBorderColor]: refs.borderColor,
|
7759
|
+
[vars$k.trackBackgroundColor]: refs.backgroundColor,
|
7760
|
+
[vars$k.knobLeftOffset]: `calc(100% - var(${vars$k.knobSize}) - ${knobMargin})`,
|
7761
|
+
[vars$k.knobColor]: refs.valueTextColor,
|
7762
|
+
[vars$k.knobTextColor]: refs.valueTextColor,
|
7410
7763
|
},
|
7411
7764
|
|
7412
7765
|
_disabled: {
|
7413
|
-
[vars$
|
7414
|
-
[vars$
|
7415
|
-
[vars$
|
7416
|
-
[vars$
|
7766
|
+
[vars$k.knobColor]: globalRefs$a.colors.surface.light,
|
7767
|
+
[vars$k.trackBorderColor]: globalRefs$a.colors.surface.main,
|
7768
|
+
[vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
|
7769
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
7417
7770
|
_checked: {
|
7418
|
-
[vars$
|
7419
|
-
[vars$
|
7771
|
+
[vars$k.knobColor]: globalRefs$a.colors.surface.light,
|
7772
|
+
[vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
|
7420
7773
|
},
|
7421
7774
|
},
|
7422
7775
|
|
7423
7776
|
_invalid: {
|
7424
|
-
[vars$
|
7425
|
-
[vars$
|
7777
|
+
[vars$k.trackBorderColor]: globalRefs$a.colors.error.main,
|
7778
|
+
[vars$k.knobColor]: globalRefs$a.colors.error.main,
|
7426
7779
|
},
|
7427
7780
|
};
|
7428
7781
|
|
7429
7782
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
7430
7783
|
__proto__: null,
|
7431
7784
|
default: switchToggle,
|
7432
|
-
vars: vars$
|
7785
|
+
vars: vars$k
|
7433
7786
|
});
|
7434
7787
|
|
7435
|
-
const globalRefs$
|
7788
|
+
const globalRefs$9 = getThemeRefs(globals);
|
7436
7789
|
|
7437
|
-
const compVars$
|
7790
|
+
const compVars$3 = ContainerClass.cssVarList;
|
7438
7791
|
|
7439
7792
|
const verticalAlignment = {
|
7440
7793
|
start: { verticalAlignment: 'start' },
|
@@ -7454,7 +7807,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
7454
7807
|
horizontalAlignment,
|
7455
7808
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
7456
7809
|
},
|
7457
|
-
componentName$
|
7810
|
+
componentName$v
|
7458
7811
|
);
|
7459
7812
|
|
7460
7813
|
const { shadowColor } = helperRefs$2;
|
@@ -7462,30 +7815,30 @@ const { shadowColor } = helperRefs$2;
|
|
7462
7815
|
const container = {
|
7463
7816
|
...helperTheme$2,
|
7464
7817
|
|
7465
|
-
[compVars$
|
7466
|
-
[compVars$
|
7467
|
-
[compVars$
|
7468
|
-
[compVars$
|
7469
|
-
[compVars$
|
7818
|
+
[compVars$3.hostWidth]: '100%',
|
7819
|
+
[compVars$3.boxShadow]: 'none',
|
7820
|
+
[compVars$3.backgroundColor]: globalRefs$9.colors.surface.light,
|
7821
|
+
[compVars$3.color]: globalRefs$9.colors.surface.contrast,
|
7822
|
+
[compVars$3.borderRadius]: '0px',
|
7470
7823
|
|
7471
7824
|
verticalPadding: {
|
7472
|
-
sm: { [compVars$
|
7473
|
-
md: { [compVars$
|
7474
|
-
lg: { [compVars$
|
7825
|
+
sm: { [compVars$3.verticalPadding]: '5px' },
|
7826
|
+
md: { [compVars$3.verticalPadding]: '10px' },
|
7827
|
+
lg: { [compVars$3.verticalPadding]: '20px' },
|
7475
7828
|
},
|
7476
7829
|
|
7477
7830
|
horizontalPadding: {
|
7478
|
-
sm: { [compVars$
|
7479
|
-
md: { [compVars$
|
7480
|
-
lg: { [compVars$
|
7831
|
+
sm: { [compVars$3.horizontalPadding]: '5px' },
|
7832
|
+
md: { [compVars$3.horizontalPadding]: '10px' },
|
7833
|
+
lg: { [compVars$3.horizontalPadding]: '20px' },
|
7481
7834
|
},
|
7482
7835
|
|
7483
7836
|
direction: {
|
7484
7837
|
row: {
|
7485
|
-
[compVars$
|
7486
|
-
[compVars$
|
7487
|
-
[compVars$
|
7488
|
-
[compVars$
|
7838
|
+
[compVars$3.flexDirection]: 'row',
|
7839
|
+
[compVars$3.alignItems]: helperRefs$2.verticalAlignment,
|
7840
|
+
[compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
|
7841
|
+
[compVars$3.flexWrap]: 'wrap',
|
7489
7842
|
horizontalAlignment: {
|
7490
7843
|
spaceBetween: {
|
7491
7844
|
[helperVars$2.horizontalAlignment]: 'space-between',
|
@@ -7493,9 +7846,9 @@ const container = {
|
|
7493
7846
|
},
|
7494
7847
|
},
|
7495
7848
|
column: {
|
7496
|
-
[compVars$
|
7497
|
-
[compVars$
|
7498
|
-
[compVars$
|
7849
|
+
[compVars$3.flexDirection]: 'column',
|
7850
|
+
[compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
|
7851
|
+
[compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
|
7499
7852
|
verticalAlignment: {
|
7500
7853
|
spaceBetween: {
|
7501
7854
|
[helperVars$2.verticalAlignment]: 'space-between',
|
@@ -7505,194 +7858,194 @@ const container = {
|
|
7505
7858
|
},
|
7506
7859
|
|
7507
7860
|
spaceBetween: {
|
7508
|
-
sm: { [compVars$
|
7509
|
-
md: { [compVars$
|
7510
|
-
lg: { [compVars$
|
7861
|
+
sm: { [compVars$3.gap]: '10px' },
|
7862
|
+
md: { [compVars$3.gap]: '20px' },
|
7863
|
+
lg: { [compVars$3.gap]: '30px' },
|
7511
7864
|
},
|
7512
7865
|
|
7513
7866
|
shadow: {
|
7514
7867
|
sm: {
|
7515
|
-
[compVars$
|
7868
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${shadowColor}`,
|
7516
7869
|
},
|
7517
7870
|
md: {
|
7518
|
-
[compVars$
|
7871
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.md} ${shadowColor}, ${globalRefs$9.shadow.narrow.md} ${shadowColor}`,
|
7519
7872
|
},
|
7520
7873
|
lg: {
|
7521
|
-
[compVars$
|
7874
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${shadowColor}`,
|
7522
7875
|
},
|
7523
7876
|
xl: {
|
7524
|
-
[compVars$
|
7877
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${shadowColor}`,
|
7525
7878
|
},
|
7526
7879
|
'2xl': {
|
7527
7880
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
7528
|
-
[compVars$
|
7881
|
+
[compVars$3.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${shadowColor}`,
|
7529
7882
|
},
|
7530
7883
|
},
|
7531
7884
|
|
7532
7885
|
borderRadius: {
|
7533
|
-
sm: { [compVars$
|
7534
|
-
md: { [compVars$
|
7535
|
-
lg: { [compVars$
|
7536
|
-
xl: { [compVars$
|
7537
|
-
'2xl': { [compVars$
|
7538
|
-
'3xl': { [compVars$
|
7886
|
+
sm: { [compVars$3.borderRadius]: globalRefs$9.radius.sm },
|
7887
|
+
md: { [compVars$3.borderRadius]: globalRefs$9.radius.md },
|
7888
|
+
lg: { [compVars$3.borderRadius]: globalRefs$9.radius.lg },
|
7889
|
+
xl: { [compVars$3.borderRadius]: globalRefs$9.radius.xl },
|
7890
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$9.radius['2xl'] },
|
7891
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$9.radius['3xl'] },
|
7539
7892
|
},
|
7540
7893
|
};
|
7541
7894
|
|
7542
|
-
const vars$
|
7543
|
-
...compVars$
|
7895
|
+
const vars$j = {
|
7896
|
+
...compVars$3,
|
7544
7897
|
...helperVars$2,
|
7545
7898
|
};
|
7546
7899
|
|
7547
7900
|
var container$1 = /*#__PURE__*/Object.freeze({
|
7548
7901
|
__proto__: null,
|
7549
7902
|
default: container,
|
7550
|
-
vars: vars$
|
7903
|
+
vars: vars$j
|
7551
7904
|
});
|
7552
7905
|
|
7553
|
-
const vars$
|
7906
|
+
const vars$i = LogoClass.cssVarList;
|
7554
7907
|
|
7555
7908
|
const logo$1 = {
|
7556
|
-
[vars$
|
7909
|
+
[vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
7557
7910
|
};
|
7558
7911
|
|
7559
7912
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
7560
7913
|
__proto__: null,
|
7561
7914
|
default: logo$1,
|
7562
|
-
vars: vars$
|
7915
|
+
vars: vars$i
|
7563
7916
|
});
|
7564
7917
|
|
7565
|
-
const vars$
|
7918
|
+
const vars$h = TotpImageClass.cssVarList;
|
7566
7919
|
|
7567
7920
|
const logo = {
|
7568
|
-
[vars$
|
7921
|
+
[vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
7569
7922
|
};
|
7570
7923
|
|
7571
7924
|
var totpImage = /*#__PURE__*/Object.freeze({
|
7572
7925
|
__proto__: null,
|
7573
7926
|
default: logo,
|
7574
|
-
vars: vars$
|
7927
|
+
vars: vars$h
|
7575
7928
|
});
|
7576
7929
|
|
7577
|
-
const globalRefs$
|
7578
|
-
const vars$
|
7930
|
+
const globalRefs$8 = getThemeRefs(globals);
|
7931
|
+
const vars$g = TextClass.cssVarList;
|
7579
7932
|
|
7580
7933
|
const text = {
|
7581
|
-
[vars$
|
7582
|
-
[vars$
|
7583
|
-
[vars$
|
7934
|
+
[vars$g.textLineHeight]: '1.35em',
|
7935
|
+
[vars$g.textAlign]: 'left',
|
7936
|
+
[vars$g.textColor]: globalRefs$8.colors.surface.dark,
|
7584
7937
|
variant: {
|
7585
7938
|
h1: {
|
7586
|
-
[vars$
|
7587
|
-
[vars$
|
7588
|
-
[vars$
|
7939
|
+
[vars$g.fontSize]: globalRefs$8.typography.h1.size,
|
7940
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h1.weight,
|
7941
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h1.font,
|
7589
7942
|
},
|
7590
7943
|
h2: {
|
7591
|
-
[vars$
|
7592
|
-
[vars$
|
7593
|
-
[vars$
|
7944
|
+
[vars$g.fontSize]: globalRefs$8.typography.h2.size,
|
7945
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h2.weight,
|
7946
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h2.font,
|
7594
7947
|
},
|
7595
7948
|
h3: {
|
7596
|
-
[vars$
|
7597
|
-
[vars$
|
7598
|
-
[vars$
|
7949
|
+
[vars$g.fontSize]: globalRefs$8.typography.h3.size,
|
7950
|
+
[vars$g.fontWeight]: globalRefs$8.typography.h3.weight,
|
7951
|
+
[vars$g.fontFamily]: globalRefs$8.typography.h3.font,
|
7599
7952
|
},
|
7600
7953
|
subtitle1: {
|
7601
|
-
[vars$
|
7602
|
-
[vars$
|
7603
|
-
[vars$
|
7954
|
+
[vars$g.fontSize]: globalRefs$8.typography.subtitle1.size,
|
7955
|
+
[vars$g.fontWeight]: globalRefs$8.typography.subtitle1.weight,
|
7956
|
+
[vars$g.fontFamily]: globalRefs$8.typography.subtitle1.font,
|
7604
7957
|
},
|
7605
7958
|
subtitle2: {
|
7606
|
-
[vars$
|
7607
|
-
[vars$
|
7608
|
-
[vars$
|
7959
|
+
[vars$g.fontSize]: globalRefs$8.typography.subtitle2.size,
|
7960
|
+
[vars$g.fontWeight]: globalRefs$8.typography.subtitle2.weight,
|
7961
|
+
[vars$g.fontFamily]: globalRefs$8.typography.subtitle2.font,
|
7609
7962
|
},
|
7610
7963
|
body1: {
|
7611
|
-
[vars$
|
7612
|
-
[vars$
|
7613
|
-
[vars$
|
7964
|
+
[vars$g.fontSize]: globalRefs$8.typography.body1.size,
|
7965
|
+
[vars$g.fontWeight]: globalRefs$8.typography.body1.weight,
|
7966
|
+
[vars$g.fontFamily]: globalRefs$8.typography.body1.font,
|
7614
7967
|
},
|
7615
7968
|
body2: {
|
7616
|
-
[vars$
|
7617
|
-
[vars$
|
7618
|
-
[vars$
|
7969
|
+
[vars$g.fontSize]: globalRefs$8.typography.body2.size,
|
7970
|
+
[vars$g.fontWeight]: globalRefs$8.typography.body2.weight,
|
7971
|
+
[vars$g.fontFamily]: globalRefs$8.typography.body2.font,
|
7619
7972
|
},
|
7620
7973
|
},
|
7621
7974
|
|
7622
7975
|
mode: {
|
7623
7976
|
primary: {
|
7624
|
-
[vars$
|
7977
|
+
[vars$g.textColor]: globalRefs$8.colors.primary.main,
|
7625
7978
|
},
|
7626
7979
|
secondary: {
|
7627
|
-
[vars$
|
7980
|
+
[vars$g.textColor]: globalRefs$8.colors.secondary.main,
|
7628
7981
|
},
|
7629
7982
|
error: {
|
7630
|
-
[vars$
|
7983
|
+
[vars$g.textColor]: globalRefs$8.colors.error.main,
|
7631
7984
|
},
|
7632
7985
|
success: {
|
7633
|
-
[vars$
|
7986
|
+
[vars$g.textColor]: globalRefs$8.colors.success.main,
|
7634
7987
|
},
|
7635
7988
|
},
|
7636
7989
|
|
7637
7990
|
textAlign: {
|
7638
|
-
right: { [vars$
|
7639
|
-
left: { [vars$
|
7640
|
-
center: { [vars$
|
7991
|
+
right: { [vars$g.textAlign]: 'right' },
|
7992
|
+
left: { [vars$g.textAlign]: 'left' },
|
7993
|
+
center: { [vars$g.textAlign]: 'center' },
|
7641
7994
|
},
|
7642
7995
|
|
7643
7996
|
_fullWidth: {
|
7644
|
-
[vars$
|
7997
|
+
[vars$g.hostWidth]: '100%',
|
7645
7998
|
},
|
7646
7999
|
|
7647
8000
|
_italic: {
|
7648
|
-
[vars$
|
8001
|
+
[vars$g.fontStyle]: 'italic',
|
7649
8002
|
},
|
7650
8003
|
|
7651
8004
|
_uppercase: {
|
7652
|
-
[vars$
|
8005
|
+
[vars$g.textTransform]: 'uppercase',
|
7653
8006
|
},
|
7654
8007
|
|
7655
8008
|
_lowercase: {
|
7656
|
-
[vars$
|
8009
|
+
[vars$g.textTransform]: 'lowercase',
|
7657
8010
|
},
|
7658
8011
|
};
|
7659
8012
|
|
7660
8013
|
var text$1 = /*#__PURE__*/Object.freeze({
|
7661
8014
|
__proto__: null,
|
7662
8015
|
default: text,
|
7663
|
-
vars: vars$
|
8016
|
+
vars: vars$g
|
7664
8017
|
});
|
7665
8018
|
|
7666
|
-
const globalRefs$
|
7667
|
-
const vars$
|
8019
|
+
const globalRefs$7 = getThemeRefs(globals);
|
8020
|
+
const vars$f = LinkClass.cssVarList;
|
7668
8021
|
|
7669
8022
|
const link = {
|
7670
|
-
[vars$
|
8023
|
+
[vars$f.cursor]: 'pointer',
|
7671
8024
|
|
7672
|
-
[vars$
|
8025
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
7673
8026
|
|
7674
8027
|
textAlign: {
|
7675
|
-
right: { [vars$
|
7676
|
-
left: { [vars$
|
7677
|
-
center: { [vars$
|
8028
|
+
right: { [vars$f.textAlign]: 'right' },
|
8029
|
+
left: { [vars$f.textAlign]: 'left' },
|
8030
|
+
center: { [vars$f.textAlign]: 'center' },
|
7678
8031
|
},
|
7679
8032
|
|
7680
8033
|
_fullWidth: {
|
7681
|
-
[vars$
|
8034
|
+
[vars$f.hostWidth]: '100%',
|
7682
8035
|
},
|
7683
8036
|
|
7684
8037
|
mode: {
|
7685
8038
|
primary: {
|
7686
|
-
[vars$
|
8039
|
+
[vars$f.textColor]: globalRefs$7.colors.primary.main,
|
7687
8040
|
},
|
7688
8041
|
secondary: {
|
7689
|
-
[vars$
|
8042
|
+
[vars$f.textColor]: globalRefs$7.colors.secondary.main,
|
7690
8043
|
},
|
7691
8044
|
error: {
|
7692
|
-
[vars$
|
8045
|
+
[vars$f.textColor]: globalRefs$7.colors.error.main,
|
7693
8046
|
},
|
7694
8047
|
success: {
|
7695
|
-
[vars$
|
8048
|
+
[vars$f.textColor]: globalRefs$7.colors.success.main,
|
7696
8049
|
},
|
7697
8050
|
},
|
7698
8051
|
};
|
@@ -7700,268 +8053,268 @@ const link = {
|
|
7700
8053
|
var link$1 = /*#__PURE__*/Object.freeze({
|
7701
8054
|
__proto__: null,
|
7702
8055
|
default: link,
|
7703
|
-
vars: vars$
|
8056
|
+
vars: vars$f
|
7704
8057
|
});
|
7705
8058
|
|
7706
|
-
const globalRefs$
|
7707
|
-
const compVars$
|
8059
|
+
const globalRefs$6 = getThemeRefs(globals);
|
8060
|
+
const compVars$2 = DividerClass.cssVarList;
|
7708
8061
|
|
7709
8062
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
7710
8063
|
{
|
7711
8064
|
thickness: '2px',
|
7712
8065
|
spacing: '10px',
|
7713
8066
|
},
|
7714
|
-
componentName$
|
8067
|
+
componentName$u
|
7715
8068
|
);
|
7716
8069
|
|
7717
8070
|
const divider = {
|
7718
8071
|
...helperTheme$1,
|
7719
8072
|
|
7720
|
-
[compVars$
|
7721
|
-
[compVars$
|
7722
|
-
[compVars$
|
7723
|
-
[compVars$
|
7724
|
-
[compVars$
|
7725
|
-
[compVars$
|
7726
|
-
[compVars$
|
7727
|
-
[compVars$
|
7728
|
-
[compVars$
|
7729
|
-
[compVars$
|
8073
|
+
[compVars$2.alignItems]: 'center',
|
8074
|
+
[compVars$2.flexDirection]: 'row',
|
8075
|
+
[compVars$2.alignSelf]: 'stretch',
|
8076
|
+
[compVars$2.hostWidth]: '100%',
|
8077
|
+
[compVars$2.stripeColor]: globalRefs$6.colors.surface.main,
|
8078
|
+
[compVars$2.stripeColorOpacity]: '0.5',
|
8079
|
+
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8080
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
8081
|
+
[compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
|
8082
|
+
[compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
7730
8083
|
|
7731
8084
|
_vertical: {
|
7732
|
-
[compVars$
|
7733
|
-
[compVars$
|
7734
|
-
[compVars$
|
7735
|
-
[compVars$
|
7736
|
-
[compVars$
|
7737
|
-
[compVars$
|
7738
|
-
[compVars$
|
7739
|
-
[compVars$
|
8085
|
+
[compVars$2.minHeight]: '200px',
|
8086
|
+
[compVars$2.flexDirection]: 'column',
|
8087
|
+
[compVars$2.hostWidth]: 'fit-content',
|
8088
|
+
[compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
8089
|
+
[compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
|
8090
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
8091
|
+
[compVars$2.labelTextMaxWidth]: '100%',
|
8092
|
+
[compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
7740
8093
|
},
|
7741
8094
|
};
|
7742
8095
|
|
7743
|
-
const vars$
|
7744
|
-
...compVars$
|
8096
|
+
const vars$e = {
|
8097
|
+
...compVars$2,
|
7745
8098
|
...helperVars$1,
|
7746
8099
|
};
|
7747
8100
|
|
7748
8101
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
7749
8102
|
__proto__: null,
|
7750
8103
|
default: divider,
|
7751
|
-
vars: vars$
|
8104
|
+
vars: vars$e
|
7752
8105
|
});
|
7753
8106
|
|
7754
|
-
const vars$
|
8107
|
+
const vars$d = PasscodeClass.cssVarList;
|
7755
8108
|
|
7756
8109
|
const passcode = {
|
7757
|
-
[vars$
|
7758
|
-
[vars$
|
7759
|
-
[vars$
|
7760
|
-
[vars$
|
7761
|
-
[vars$
|
7762
|
-
[vars$
|
7763
|
-
[vars$
|
7764
|
-
[vars$
|
7765
|
-
[vars$
|
7766
|
-
[vars$
|
7767
|
-
[vars$
|
7768
|
-
[vars$
|
7769
|
-
[vars$
|
7770
|
-
[vars$
|
8110
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
8111
|
+
[vars$d.fontSize]: refs.fontSize,
|
8112
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
8113
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
8114
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
8115
|
+
[vars$d.digitValueTextColor]: refs.valueTextColor,
|
8116
|
+
[vars$d.digitPadding]: '0',
|
8117
|
+
[vars$d.digitTextAlign]: 'center',
|
8118
|
+
[vars$d.digitSpacing]: '4px',
|
8119
|
+
[vars$d.hostWidth]: refs.width,
|
8120
|
+
[vars$d.digitOutlineColor]: 'transparent',
|
8121
|
+
[vars$d.digitOutlineWidth]: refs.outlineWidth,
|
8122
|
+
[vars$d.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8123
|
+
[vars$d.digitSize]: refs.inputHeight,
|
7771
8124
|
|
7772
8125
|
_hideCursor: {
|
7773
|
-
[vars$
|
8126
|
+
[vars$d.digitCaretTextColor]: 'transparent',
|
7774
8127
|
},
|
7775
8128
|
};
|
7776
8129
|
|
7777
8130
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
7778
8131
|
__proto__: null,
|
7779
8132
|
default: passcode,
|
7780
|
-
vars: vars$
|
8133
|
+
vars: vars$d
|
7781
8134
|
});
|
7782
8135
|
|
7783
|
-
const globalRefs$
|
7784
|
-
const vars$
|
8136
|
+
const globalRefs$5 = getThemeRefs(globals);
|
8137
|
+
const vars$c = LoaderLinearClass.cssVarList;
|
7785
8138
|
|
7786
8139
|
const loaderLinear = {
|
7787
|
-
[vars$
|
7788
|
-
[vars$
|
8140
|
+
[vars$c.hostDisplay]: 'inline-block',
|
8141
|
+
[vars$c.hostWidth]: '100%',
|
7789
8142
|
|
7790
|
-
[vars$
|
7791
|
-
[vars$
|
8143
|
+
[vars$c.barColor]: globalRefs$5.colors.surface.contrast,
|
8144
|
+
[vars$c.barWidth]: '20%',
|
7792
8145
|
|
7793
|
-
[vars$
|
7794
|
-
[vars$
|
8146
|
+
[vars$c.barBackgroundColor]: globalRefs$5.colors.surface.main,
|
8147
|
+
[vars$c.barBorderRadius]: '4px',
|
7795
8148
|
|
7796
|
-
[vars$
|
7797
|
-
[vars$
|
7798
|
-
[vars$
|
7799
|
-
[vars$
|
8149
|
+
[vars$c.animationDuration]: '2s',
|
8150
|
+
[vars$c.animationTimingFunction]: 'linear',
|
8151
|
+
[vars$c.animationIterationCount]: 'infinite',
|
8152
|
+
[vars$c.verticalPadding]: '0.25em',
|
7800
8153
|
|
7801
8154
|
size: {
|
7802
|
-
xs: { [vars$
|
7803
|
-
sm: { [vars$
|
7804
|
-
md: { [vars$
|
7805
|
-
lg: { [vars$
|
8155
|
+
xs: { [vars$c.barHeight]: '2px' },
|
8156
|
+
sm: { [vars$c.barHeight]: '4px' },
|
8157
|
+
md: { [vars$c.barHeight]: '6px' },
|
8158
|
+
lg: { [vars$c.barHeight]: '8px' },
|
7806
8159
|
},
|
7807
8160
|
|
7808
8161
|
mode: {
|
7809
8162
|
primary: {
|
7810
|
-
[vars$
|
8163
|
+
[vars$c.barColor]: globalRefs$5.colors.primary.main,
|
7811
8164
|
},
|
7812
8165
|
secondary: {
|
7813
|
-
[vars$
|
8166
|
+
[vars$c.barColor]: globalRefs$5.colors.secondary.main,
|
7814
8167
|
},
|
7815
8168
|
},
|
7816
8169
|
|
7817
8170
|
_hidden: {
|
7818
|
-
[vars$
|
8171
|
+
[vars$c.hostDisplay]: 'none',
|
7819
8172
|
},
|
7820
8173
|
};
|
7821
8174
|
|
7822
8175
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
7823
8176
|
__proto__: null,
|
7824
8177
|
default: loaderLinear,
|
7825
|
-
vars: vars$
|
8178
|
+
vars: vars$c
|
7826
8179
|
});
|
7827
8180
|
|
7828
|
-
const globalRefs$
|
7829
|
-
const compVars = LoaderRadialClass.cssVarList;
|
8181
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8182
|
+
const compVars$1 = LoaderRadialClass.cssVarList;
|
7830
8183
|
|
7831
8184
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
7832
8185
|
{
|
7833
|
-
spinnerColor: globalRefs$
|
8186
|
+
spinnerColor: globalRefs$4.colors.surface.contrast,
|
7834
8187
|
mode: {
|
7835
8188
|
primary: {
|
7836
|
-
spinnerColor: globalRefs$
|
8189
|
+
spinnerColor: globalRefs$4.colors.primary.main,
|
7837
8190
|
},
|
7838
8191
|
secondary: {
|
7839
|
-
spinnerColor: globalRefs$
|
8192
|
+
spinnerColor: globalRefs$4.colors.secondary.main,
|
7840
8193
|
},
|
7841
8194
|
},
|
7842
8195
|
},
|
7843
|
-
componentName$
|
8196
|
+
componentName$w
|
7844
8197
|
);
|
7845
8198
|
|
7846
8199
|
const loaderRadial = {
|
7847
8200
|
...helperTheme,
|
7848
8201
|
|
7849
|
-
[compVars.animationDuration]: '2s',
|
7850
|
-
[compVars.animationTimingFunction]: 'linear',
|
7851
|
-
[compVars.animationIterationCount]: 'infinite',
|
7852
|
-
[compVars.spinnerBorderStyle]: 'solid',
|
7853
|
-
[compVars.spinnerBorderWidth]: '0.2em',
|
7854
|
-
[compVars.spinnerBorderRadius]: '50%',
|
7855
|
-
[compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
7856
|
-
[compVars.spinnerQuadrant2Color]: 'transparent',
|
7857
|
-
[compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
7858
|
-
[compVars.spinnerQuadrant4Color]: 'transparent',
|
8202
|
+
[compVars$1.animationDuration]: '2s',
|
8203
|
+
[compVars$1.animationTimingFunction]: 'linear',
|
8204
|
+
[compVars$1.animationIterationCount]: 'infinite',
|
8205
|
+
[compVars$1.spinnerBorderStyle]: 'solid',
|
8206
|
+
[compVars$1.spinnerBorderWidth]: '0.2em',
|
8207
|
+
[compVars$1.spinnerBorderRadius]: '50%',
|
8208
|
+
[compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
8209
|
+
[compVars$1.spinnerQuadrant2Color]: 'transparent',
|
8210
|
+
[compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
8211
|
+
[compVars$1.spinnerQuadrant4Color]: 'transparent',
|
7859
8212
|
|
7860
8213
|
size: {
|
7861
|
-
xs: { [compVars.spinnerSize]: '20px' },
|
7862
|
-
sm: { [compVars.spinnerSize]: '30px' },
|
7863
|
-
md: { [compVars.spinnerSize]: '40px' },
|
7864
|
-
lg: { [compVars.spinnerSize]: '60px' },
|
7865
|
-
xl: { [compVars.spinnerSize]: '80px' },
|
8214
|
+
xs: { [compVars$1.spinnerSize]: '20px' },
|
8215
|
+
sm: { [compVars$1.spinnerSize]: '30px' },
|
8216
|
+
md: { [compVars$1.spinnerSize]: '40px' },
|
8217
|
+
lg: { [compVars$1.spinnerSize]: '60px' },
|
8218
|
+
xl: { [compVars$1.spinnerSize]: '80px' },
|
7866
8219
|
},
|
7867
8220
|
|
7868
8221
|
_hidden: {
|
7869
|
-
[compVars.hostDisplay]: 'none',
|
8222
|
+
[compVars$1.hostDisplay]: 'none',
|
7870
8223
|
},
|
7871
8224
|
};
|
7872
|
-
const vars$
|
7873
|
-
...compVars,
|
8225
|
+
const vars$b = {
|
8226
|
+
...compVars$1,
|
7874
8227
|
...helperVars,
|
7875
8228
|
};
|
7876
8229
|
|
7877
8230
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
7878
8231
|
__proto__: null,
|
7879
8232
|
default: loaderRadial,
|
7880
|
-
vars: vars$
|
8233
|
+
vars: vars$b
|
7881
8234
|
});
|
7882
8235
|
|
7883
|
-
const globalRefs$
|
7884
|
-
const vars$
|
8236
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8237
|
+
const vars$a = ComboBoxClass.cssVarList;
|
7885
8238
|
|
7886
8239
|
const comboBox = {
|
7887
|
-
[vars$
|
7888
|
-
[vars$
|
7889
|
-
[vars$
|
7890
|
-
[vars$
|
7891
|
-
[vars$
|
7892
|
-
[vars$
|
7893
|
-
[vars$
|
7894
|
-
[vars$
|
7895
|
-
[vars$
|
7896
|
-
[vars$
|
7897
|
-
[vars$
|
7898
|
-
[vars$
|
7899
|
-
[vars$
|
7900
|
-
[vars$
|
7901
|
-
[vars$
|
7902
|
-
[vars$
|
7903
|
-
[vars$
|
7904
|
-
[vars$
|
7905
|
-
[vars$
|
7906
|
-
[vars$
|
7907
|
-
[vars$
|
7908
|
-
[vars$
|
7909
|
-
[vars$
|
8240
|
+
[vars$a.hostWidth]: refs.width,
|
8241
|
+
[vars$a.fontSize]: refs.fontSize,
|
8242
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
8243
|
+
[vars$a.labelTextColor]: refs.labelTextColor,
|
8244
|
+
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
8245
|
+
[vars$a.inputBorderColor]: refs.borderColor,
|
8246
|
+
[vars$a.inputBorderWidth]: refs.borderWidth,
|
8247
|
+
[vars$a.inputBorderStyle]: refs.borderStyle,
|
8248
|
+
[vars$a.inputBorderRadius]: refs.borderRadius,
|
8249
|
+
[vars$a.inputOutlineColor]: refs.outlineColor,
|
8250
|
+
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
8251
|
+
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
8252
|
+
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
8253
|
+
[vars$a.labelRequiredIndicator]: refs.requiredIndicator,
|
8254
|
+
[vars$a.inputValueTextColor]: refs.valueTextColor,
|
8255
|
+
[vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8256
|
+
[vars$a.inputBackgroundColor]: refs.backgroundColor,
|
8257
|
+
[vars$a.inputHorizontalPadding]: refs.horizontalPadding,
|
8258
|
+
[vars$a.inputHeight]: refs.inputHeight,
|
8259
|
+
[vars$a.inputDropdownButtonColor]: globalRefs$3.colors.surface.contrast,
|
8260
|
+
[vars$a.inputDropdownButtonCursor]: 'pointer',
|
8261
|
+
[vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8262
|
+
[vars$a.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
|
7910
8263
|
|
7911
8264
|
_readonly: {
|
7912
|
-
[vars$
|
8265
|
+
[vars$a.inputDropdownButtonCursor]: 'default',
|
7913
8266
|
},
|
7914
8267
|
|
7915
8268
|
// Overlay theme exposed via the component:
|
7916
|
-
[vars$
|
7917
|
-
[vars$
|
7918
|
-
[vars$
|
7919
|
-
[vars$
|
8269
|
+
[vars$a.overlayFontSize]: refs.fontSize,
|
8270
|
+
[vars$a.overlayFontFamily]: refs.fontFamily,
|
8271
|
+
[vars$a.overlayCursor]: 'pointer',
|
8272
|
+
[vars$a.overlayItemBoxShadow]: 'none',
|
7920
8273
|
|
7921
8274
|
// Overlay direct theme:
|
7922
|
-
[vars$
|
7923
|
-
[vars$
|
8275
|
+
[vars$a.overlay.minHeight]: '400px',
|
8276
|
+
[vars$a.overlay.margin]: '0',
|
7924
8277
|
};
|
7925
8278
|
|
7926
8279
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
7927
8280
|
__proto__: null,
|
7928
8281
|
comboBox: comboBox,
|
7929
8282
|
default: comboBox,
|
7930
|
-
vars: vars$
|
8283
|
+
vars: vars$a
|
7931
8284
|
});
|
7932
8285
|
|
7933
|
-
const vars$
|
8286
|
+
const vars$9 = ImageClass.cssVarList;
|
7934
8287
|
|
7935
8288
|
const image = {};
|
7936
8289
|
|
7937
8290
|
var image$1 = /*#__PURE__*/Object.freeze({
|
7938
8291
|
__proto__: null,
|
7939
8292
|
default: image,
|
7940
|
-
vars: vars$
|
8293
|
+
vars: vars$9
|
7941
8294
|
});
|
7942
8295
|
|
7943
|
-
const vars$
|
8296
|
+
const vars$8 = PhoneFieldClass.cssVarList;
|
7944
8297
|
|
7945
8298
|
const phoneField = {
|
7946
|
-
[vars$
|
7947
|
-
[vars$
|
7948
|
-
[vars$
|
7949
|
-
[vars$
|
7950
|
-
[vars$
|
7951
|
-
[vars$
|
7952
|
-
[vars$
|
7953
|
-
[vars$
|
7954
|
-
[vars$
|
7955
|
-
[vars$
|
7956
|
-
[vars$
|
7957
|
-
[vars$
|
7958
|
-
[vars$
|
7959
|
-
[vars$
|
7960
|
-
[vars$
|
7961
|
-
[vars$
|
7962
|
-
[vars$
|
7963
|
-
[vars$
|
7964
|
-
[vars$
|
8299
|
+
[vars$8.hostWidth]: refs.width,
|
8300
|
+
[vars$8.fontSize]: refs.fontSize,
|
8301
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
8302
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
8303
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
8304
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
8305
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
8306
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8307
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
8308
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
8309
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
8310
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
8311
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
8312
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
8313
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
8314
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
8315
|
+
[vars$8.phoneInputWidth]: refs.minWidth,
|
8316
|
+
[vars$8.countryCodeInputWidth]: '5em',
|
8317
|
+
[vars$8.countryCodeDropdownWidth]: '20em',
|
7965
8318
|
|
7966
8319
|
// '@overlay': {
|
7967
8320
|
// overlayItemBackgroundColor: 'red'
|
@@ -7971,173 +8324,330 @@ const phoneField = {
|
|
7971
8324
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
7972
8325
|
__proto__: null,
|
7973
8326
|
default: phoneField,
|
7974
|
-
vars: vars$
|
8327
|
+
vars: vars$8
|
7975
8328
|
});
|
7976
8329
|
|
7977
|
-
const vars$
|
8330
|
+
const vars$7 = PhoneFieldInputBoxClass.cssVarList;
|
7978
8331
|
|
7979
8332
|
const phoneInputBoxField = {
|
7980
|
-
[vars$
|
7981
|
-
[vars$
|
7982
|
-
[vars$
|
7983
|
-
[vars$
|
7984
|
-
[vars$
|
7985
|
-
[vars$
|
7986
|
-
[vars$
|
7987
|
-
[vars$
|
7988
|
-
[vars$
|
7989
|
-
[vars$
|
7990
|
-
[vars$
|
7991
|
-
[vars$
|
7992
|
-
[vars$
|
7993
|
-
[vars$
|
7994
|
-
[vars$
|
7995
|
-
[vars$
|
7996
|
-
[vars$
|
8333
|
+
[vars$7.hostWidth]: '16em',
|
8334
|
+
[vars$7.hostMinWidth]: refs.minWidth,
|
8335
|
+
[vars$7.fontSize]: refs.fontSize,
|
8336
|
+
[vars$7.fontFamily]: refs.fontFamily,
|
8337
|
+
[vars$7.labelTextColor]: refs.labelTextColor,
|
8338
|
+
[vars$7.labelRequiredIndicator]: refs.requiredIndicator,
|
8339
|
+
[vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
|
8340
|
+
[vars$7.inputValueTextColor]: refs.valueTextColor,
|
8341
|
+
[vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8342
|
+
[vars$7.inputBorderStyle]: refs.borderStyle,
|
8343
|
+
[vars$7.inputBorderWidth]: refs.borderWidth,
|
8344
|
+
[vars$7.inputBorderColor]: refs.borderColor,
|
8345
|
+
[vars$7.inputBorderRadius]: refs.borderRadius,
|
8346
|
+
[vars$7.inputOutlineStyle]: refs.outlineStyle,
|
8347
|
+
[vars$7.inputOutlineWidth]: refs.outlineWidth,
|
8348
|
+
[vars$7.inputOutlineColor]: refs.outlineColor,
|
8349
|
+
[vars$7.inputOutlineOffset]: refs.outlineOffset,
|
7997
8350
|
_fullWidth: {
|
7998
|
-
[vars$
|
8351
|
+
[vars$7.hostWidth]: refs.width,
|
7999
8352
|
},
|
8000
8353
|
};
|
8001
8354
|
|
8002
8355
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
8003
8356
|
__proto__: null,
|
8004
8357
|
default: phoneInputBoxField,
|
8005
|
-
vars: vars$
|
8358
|
+
vars: vars$7
|
8006
8359
|
});
|
8007
8360
|
|
8008
|
-
const vars$
|
8361
|
+
const vars$6 = NewPasswordClass.cssVarList;
|
8009
8362
|
|
8010
8363
|
const newPassword = {
|
8011
|
-
[vars$
|
8012
|
-
[vars$
|
8013
|
-
[vars$
|
8014
|
-
[vars$
|
8015
|
-
[vars$
|
8016
|
-
[vars$
|
8364
|
+
[vars$6.hostWidth]: refs.width,
|
8365
|
+
[vars$6.hostMinWidth]: refs.minWidth,
|
8366
|
+
[vars$6.fontSize]: refs.fontSize,
|
8367
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
8368
|
+
[vars$6.spaceBetweenInputs]: '1em',
|
8369
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
8017
8370
|
|
8018
8371
|
_required: {
|
8019
8372
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
8020
8373
|
// That's why we fake the required indicator on each input.
|
8021
8374
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
8022
|
-
[vars$
|
8375
|
+
[vars$6.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8023
8376
|
},
|
8024
8377
|
};
|
8025
8378
|
|
8026
8379
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
8027
8380
|
__proto__: null,
|
8028
8381
|
default: newPassword,
|
8029
|
-
vars: vars$
|
8382
|
+
vars: vars$6
|
8030
8383
|
});
|
8031
8384
|
|
8032
|
-
const vars$
|
8385
|
+
const vars$5 = UploadFileClass.cssVarList;
|
8033
8386
|
|
8034
8387
|
const uploadFile = {
|
8035
|
-
[vars$
|
8036
|
-
[vars$
|
8388
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
8389
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
8037
8390
|
|
8038
|
-
[vars$
|
8391
|
+
[vars$5.iconSize]: '2em',
|
8039
8392
|
|
8040
|
-
[vars$
|
8041
|
-
[vars$
|
8393
|
+
[vars$5.hostPadding]: '0.75em',
|
8394
|
+
[vars$5.gap]: '0.5em',
|
8042
8395
|
|
8043
|
-
[vars$
|
8044
|
-
[vars$
|
8045
|
-
[vars$
|
8396
|
+
[vars$5.fontSize]: '16px',
|
8397
|
+
[vars$5.titleFontWeight]: '500',
|
8398
|
+
[vars$5.lineHeight]: '1em',
|
8046
8399
|
|
8047
|
-
[vars$
|
8048
|
-
[vars$
|
8049
|
-
[vars$
|
8050
|
-
[vars$
|
8400
|
+
[vars$5.borderWidth]: refs.borderWidth,
|
8401
|
+
[vars$5.borderColor]: refs.borderColor,
|
8402
|
+
[vars$5.borderRadius]: refs.borderRadius,
|
8403
|
+
[vars$5.borderStyle]: 'dashed',
|
8051
8404
|
|
8052
8405
|
_required: {
|
8053
|
-
[vars$
|
8406
|
+
[vars$5.requiredIndicator]: refs.requiredIndicator,
|
8054
8407
|
},
|
8055
8408
|
|
8056
8409
|
size: {
|
8057
8410
|
xs: {
|
8058
|
-
[vars$
|
8059
|
-
[vars$
|
8060
|
-
[vars$
|
8061
|
-
[vars$
|
8062
|
-
[vars$
|
8411
|
+
[vars$5.hostHeight]: '196px',
|
8412
|
+
[vars$5.hostWidth]: '200px',
|
8413
|
+
[vars$5.titleFontSize]: '0.875em',
|
8414
|
+
[vars$5.descriptionFontSize]: '0.875em',
|
8415
|
+
[vars$5.lineHeight]: '1.25em',
|
8063
8416
|
},
|
8064
8417
|
sm: {
|
8065
|
-
[vars$
|
8066
|
-
[vars$
|
8067
|
-
[vars$
|
8068
|
-
[vars$
|
8069
|
-
[vars$
|
8418
|
+
[vars$5.hostHeight]: '216px',
|
8419
|
+
[vars$5.hostWidth]: '230px',
|
8420
|
+
[vars$5.titleFontSize]: '1em',
|
8421
|
+
[vars$5.descriptionFontSize]: '0.875em',
|
8422
|
+
[vars$5.lineHeight]: '1.25em',
|
8070
8423
|
},
|
8071
8424
|
md: {
|
8072
|
-
[vars$
|
8073
|
-
[vars$
|
8074
|
-
[vars$
|
8075
|
-
[vars$
|
8076
|
-
[vars$
|
8425
|
+
[vars$5.hostHeight]: '256px',
|
8426
|
+
[vars$5.hostWidth]: '312px',
|
8427
|
+
[vars$5.titleFontSize]: '1.125em',
|
8428
|
+
[vars$5.descriptionFontSize]: '1em',
|
8429
|
+
[vars$5.lineHeight]: '1.5em',
|
8077
8430
|
},
|
8078
8431
|
lg: {
|
8079
|
-
[vars$
|
8080
|
-
[vars$
|
8081
|
-
[vars$
|
8082
|
-
[vars$
|
8083
|
-
[vars$
|
8432
|
+
[vars$5.hostHeight]: '280px',
|
8433
|
+
[vars$5.hostWidth]: '336px',
|
8434
|
+
[vars$5.titleFontSize]: '1.125em',
|
8435
|
+
[vars$5.descriptionFontSize]: '1.125em',
|
8436
|
+
[vars$5.lineHeight]: '1.75em',
|
8084
8437
|
},
|
8085
8438
|
},
|
8086
8439
|
|
8087
8440
|
_fullWidth: {
|
8088
|
-
[vars$
|
8441
|
+
[vars$5.hostWidth]: refs.width,
|
8089
8442
|
},
|
8090
8443
|
};
|
8091
8444
|
|
8092
8445
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
8093
8446
|
__proto__: null,
|
8094
8447
|
default: uploadFile,
|
8095
|
-
vars: vars$
|
8448
|
+
vars: vars$5
|
8096
8449
|
});
|
8097
8450
|
|
8098
|
-
const globalRefs$
|
8451
|
+
const globalRefs$2 = getThemeRefs(globals);
|
8099
8452
|
|
8100
|
-
const vars$
|
8453
|
+
const vars$4 = ButtonSelectionGroupItemClass.cssVarList;
|
8101
8454
|
|
8102
8455
|
const buttonSelectionGroupItem = {
|
8103
|
-
[vars$
|
8104
|
-
[vars$
|
8105
|
-
[vars$
|
8106
|
-
[vars$
|
8107
|
-
[vars$
|
8456
|
+
[vars$4.backgroundColor]: globalRefs$2.colors.surface.light,
|
8457
|
+
[vars$4.labelTextColor]: globalRefs$2.colors.surface.contrast,
|
8458
|
+
[vars$4.borderColor]: globalRefs$2.colors.surface.main,
|
8459
|
+
[vars$4.borderStyle]: 'solid',
|
8460
|
+
[vars$4.borderRadius]: globalRefs$2.radius.sm,
|
8108
8461
|
|
8109
8462
|
_hover: {
|
8110
|
-
[vars$
|
8463
|
+
[vars$4.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8111
8464
|
},
|
8112
8465
|
|
8113
8466
|
_selected: {
|
8114
|
-
[vars$
|
8115
|
-
[vars$
|
8116
|
-
[vars$
|
8467
|
+
[vars$4.borderColor]: globalRefs$2.colors.surface.contrast,
|
8468
|
+
[vars$4.backgroundColor]: globalRefs$2.colors.surface.contrast,
|
8469
|
+
[vars$4.labelTextColor]: globalRefs$2.colors.surface.light,
|
8117
8470
|
},
|
8118
8471
|
};
|
8119
8472
|
|
8120
8473
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
8121
8474
|
__proto__: null,
|
8122
8475
|
default: buttonSelectionGroupItem,
|
8123
|
-
vars: vars$
|
8476
|
+
vars: vars$4
|
8124
8477
|
});
|
8125
8478
|
|
8126
|
-
const globalRefs = getThemeRefs(globals);
|
8127
|
-
const vars$
|
8479
|
+
const globalRefs$1 = getThemeRefs(globals);
|
8480
|
+
const vars$3 = ButtonSelectionGroupClass.cssVarList;
|
8128
8481
|
|
8129
8482
|
const buttonSelectionGroup = {
|
8130
|
-
[vars$
|
8131
|
-
[vars$
|
8132
|
-
[vars$
|
8133
|
-
[vars$
|
8134
|
-
[vars$
|
8135
|
-
[vars$
|
8483
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
8484
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
8485
|
+
[vars$3.labelRequiredIndicator]: refs.requiredIndicator,
|
8486
|
+
[vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
|
8487
|
+
[vars$3.itemsSpacing]: globalRefs$1.spacing.sm,
|
8488
|
+
[vars$3.hostWidth]: refs.width,
|
8136
8489
|
};
|
8137
8490
|
|
8138
8491
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8139
8492
|
__proto__: null,
|
8140
8493
|
default: buttonSelectionGroup,
|
8494
|
+
vars: vars$3
|
8495
|
+
});
|
8496
|
+
|
8497
|
+
const componentName = getComponentName('modal');
|
8498
|
+
|
8499
|
+
const customMixin = (superclass) =>
|
8500
|
+
class ModalMixinClass extends superclass {
|
8501
|
+
get opened() {
|
8502
|
+
return this.getAttribute('opened') === 'true';
|
8503
|
+
}
|
8504
|
+
|
8505
|
+
handleOpened() {
|
8506
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
8507
|
+
if (this.opened) {
|
8508
|
+
this.style.display = '';
|
8509
|
+
} else {
|
8510
|
+
this.style.display = 'none';
|
8511
|
+
}
|
8512
|
+
}
|
8513
|
+
|
8514
|
+
init() {
|
8515
|
+
super.init?.();
|
8516
|
+
this.style.display = 'none';
|
8517
|
+
|
8518
|
+
// vaadin-dialog might not be loaded in time
|
8519
|
+
// in order to make sure it's loaded before this block is running
|
8520
|
+
// we are wrapping it with setTimeout
|
8521
|
+
setTimeout(() => {
|
8522
|
+
// we want to sync descope-modal content through vaadin-dialog into the overlay
|
8523
|
+
// so we are adding a slot to the overlay, which allows us to forward the content from
|
8524
|
+
// vaadin-dialog to vaadin-dialog-overlay
|
8525
|
+
this.baseElement.shadowRoot
|
8526
|
+
.querySelector('vaadin-dialog-overlay')
|
8527
|
+
.appendChild(document.createElement('slot'));
|
8528
|
+
|
8529
|
+
this.#overrideOverlaySettings();
|
8530
|
+
|
8531
|
+
// we need to always open the modal in `opened=false`
|
8532
|
+
// to prevent it from rendering outside the dialog
|
8533
|
+
// first, we have to run `overrideOverlaySettings` to setup
|
8534
|
+
// the component.
|
8535
|
+
this.handleOpened();
|
8536
|
+
});
|
8537
|
+
}
|
8538
|
+
|
8539
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
8540
|
+
// we do not want that because it's difficult to style the overlay in this way
|
8541
|
+
// so we override it to open inside the shadow DOM
|
8542
|
+
#overrideOverlaySettings() {
|
8543
|
+
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
|
8544
|
+
|
8545
|
+
overlay._attachOverlay = () => {
|
8546
|
+
overlay.bringToFront();
|
8547
|
+
this.baseElement.setAttribute('style', 'display:flex!important;');
|
8548
|
+
};
|
8549
|
+
overlay._detachOverlay = () => {
|
8550
|
+
this.baseElement.style.display = 'none';
|
8551
|
+
};
|
8552
|
+
overlay._enterModalState = () => {};
|
8553
|
+
|
8554
|
+
overlay.close = () => false;
|
8555
|
+
}
|
8556
|
+
};
|
8557
|
+
|
8558
|
+
const ModalClass = compose(
|
8559
|
+
createStyleMixin({
|
8560
|
+
mappings: {
|
8561
|
+
overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
|
8562
|
+
overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
|
8563
|
+
overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
|
8564
|
+
},
|
8565
|
+
}),
|
8566
|
+
portalMixin({
|
8567
|
+
name: 'overlay',
|
8568
|
+
selector: '',
|
8569
|
+
mappings: {
|
8570
|
+
hostDisplay: {
|
8571
|
+
selector: () => ':host(.descope-modal)',
|
8572
|
+
property: 'display',
|
8573
|
+
important: true,
|
8574
|
+
},
|
8575
|
+
backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
|
8576
|
+
width: { selector: () => '::part(overlay)', property: 'width' },
|
8577
|
+
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8578
|
+
},
|
8579
|
+
forward: {
|
8580
|
+
include: false,
|
8581
|
+
attributes: ['opened'],
|
8582
|
+
},
|
8583
|
+
}),
|
8584
|
+
draggableMixin,
|
8585
|
+
componentNameValidationMixin,
|
8586
|
+
customMixin
|
8587
|
+
)(
|
8588
|
+
createProxy({
|
8589
|
+
slots: [''],
|
8590
|
+
wrappedEleName: 'vaadin-dialog',
|
8591
|
+
style: () => ``,
|
8592
|
+
excludeAttrsSync: ['tabindex', 'opened'],
|
8593
|
+
componentName,
|
8594
|
+
})
|
8595
|
+
);
|
8596
|
+
|
8597
|
+
const compVars = ModalClass.cssVarList;
|
8598
|
+
|
8599
|
+
const modal = {
|
8600
|
+
[compVars.hostWidth]: '400px',
|
8601
|
+
[compVars.hostHeight]: '400px',
|
8602
|
+
[compVars.overlayShadow]: 'none',
|
8603
|
+
[compVars.overlayWidth]: '700px',
|
8604
|
+
};
|
8605
|
+
|
8606
|
+
const vars$2 = {
|
8607
|
+
...compVars,
|
8608
|
+
};
|
8609
|
+
|
8610
|
+
var modal$1 = /*#__PURE__*/Object.freeze({
|
8611
|
+
__proto__: null,
|
8612
|
+
default: modal,
|
8613
|
+
vars: vars$2
|
8614
|
+
});
|
8615
|
+
|
8616
|
+
const globalRefs = getThemeRefs(globals);
|
8617
|
+
const vars$1 = GridClass.cssVarList;
|
8618
|
+
|
8619
|
+
const grid = {
|
8620
|
+
[vars$1.hostWidth]: '100%',
|
8621
|
+
[vars$1.hostHeight]: '100%',
|
8622
|
+
[vars$1.hostMinHeight]: '400px',
|
8623
|
+
|
8624
|
+
[vars$1.fontSize]: refs.fontSize,
|
8625
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
8626
|
+
|
8627
|
+
[vars$1.sortIndicatorsColor]: globalRefs.colors.primary.main,
|
8628
|
+
[vars$1.activeSortIndicator]: globalRefs.colors.primary.main,
|
8629
|
+
[vars$1.resizeHandleColor]: globalRefs.colors.surface.main,
|
8630
|
+
|
8631
|
+
[vars$1.inputBorderWidth]: refs.borderWidth,
|
8632
|
+
[vars$1.inputBorderStyle]: refs.borderStyle,
|
8633
|
+
[vars$1.inputBorderRadius]: refs.borderRadius,
|
8634
|
+
[vars$1.inputBorderColor]: 'transparent',
|
8635
|
+
|
8636
|
+
[vars$1.separatorColor]: refs.borderColor,
|
8637
|
+
|
8638
|
+
[vars$1.valueTextColor]: globalRefs.colors.surface.contrast,
|
8639
|
+
[vars$1.selectedBackgroundColor]: globalRefs.colors.primary.main,
|
8640
|
+
[vars$1.selectedTextColor]: globalRefs.colors.primary.contrast,
|
8641
|
+
|
8642
|
+
_bordered: {
|
8643
|
+
[vars$1.inputBorderColor]: refs.borderColor,
|
8644
|
+
},
|
8645
|
+
};
|
8646
|
+
|
8647
|
+
var grid$1 = /*#__PURE__*/Object.freeze({
|
8648
|
+
__proto__: null,
|
8649
|
+
default: grid,
|
8650
|
+
grid: grid,
|
8141
8651
|
vars: vars$1
|
8142
8652
|
});
|
8143
8653
|
|
@@ -8168,6 +8678,8 @@ const components = {
|
|
8168
8678
|
uploadFile: uploadFile$1,
|
8169
8679
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
8170
8680
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
8681
|
+
modal: modal$1,
|
8682
|
+
grid: grid$1,
|
8171
8683
|
};
|
8172
8684
|
|
8173
8685
|
const theme = Object.keys(components).reduce(
|
@@ -8180,7 +8692,7 @@ const vars = Object.keys(components).reduce(
|
|
8180
8692
|
);
|
8181
8693
|
|
8182
8694
|
const defaultTheme = { globals, components: theme };
|
8183
|
-
const themeVars = { globals: vars$
|
8695
|
+
const themeVars = { globals: vars$t, components: vars };
|
8184
8696
|
|
8185
|
-
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
8697
|
+
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
8186
8698
|
//# sourceMappingURL=index.esm.js.map
|