@descope/web-components-ui 1.0.246 → 1.0.247
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +877 -658
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +888 -666
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/9214.js +1 -0
- package/dist/umd/9434.js +1 -0
- package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-index-js.js +1 -0
- package/dist/umd/button-selection-group-fields-descope-button-multi-selection-group-internal-index-js.js +1 -0
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-index-js.js +1 -0
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-internal-index-js.js +1 -0
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/{descope-button-selection-group/ButtonSelectionGroupClass.js → button-selection-group-fields/baseButtonSelectionGroup.js} +19 -70
- package/src/components/button-selection-group-fields/createBaseButtonSelectionGroupInternalClass.js +101 -0
- package/src/components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass.js +67 -0
- package/src/components/button-selection-group-fields/descope-button-multi-selection-group/index.js +7 -0
- package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass.js +106 -0
- package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/index.js +8 -0
- package/src/components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass.js +67 -0
- package/src/components/{descope-button-selection-group → button-selection-group-fields/descope-button-selection-group}/index.js +2 -2
- package/src/components/button-selection-group-fields/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js +77 -0
- package/src/index.cjs.js +3 -2
- package/src/index.d.ts +2 -1
- package/src/index.js +2 -1
- package/src/mixins/inputValidationMixin.js +2 -2
- package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js +15 -0
- package/src/theme/components/buttonSelectionGroup/buttonMultiSelectionGroup.js +11 -0
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js +3 -12
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +1 -1
- package/src/theme/components/index.js +2 -0
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js +0 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +0 -1
- package/dist/umd/descope-button-selection-group-index-js.js +0 -1
- package/src/components/descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js +0 -145
- /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-internal/index.js +0 -0
- /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +0 -0
- /package/src/components/{descope-button-selection-group → button-selection-group-fields}/descope-button-selection-group-item/index.js +0 -0
package/dist/index.esm.js
CHANGED
@@ -761,11 +761,11 @@ const inputValidationMixin = (superclass) =>
|
|
761
761
|
}
|
762
762
|
|
763
763
|
get defaultErrorMsgRangeUnderflow() {
|
764
|
-
return `At least ${this.
|
764
|
+
return `At least ${this.getAttribute('min-items-selection')} items are required.`;
|
765
765
|
}
|
766
766
|
|
767
767
|
get defaultErrorMsgRangeOverflow() {
|
768
|
-
return `At most ${this.
|
768
|
+
return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
|
769
769
|
}
|
770
770
|
|
771
771
|
getErrorMessage(flags) {
|
@@ -1258,7 +1258,7 @@ const clickableMixin = (superclass) =>
|
|
1258
1258
|
}
|
1259
1259
|
};
|
1260
1260
|
|
1261
|
-
const componentName$
|
1261
|
+
const componentName$G = getComponentName('button');
|
1262
1262
|
|
1263
1263
|
const resetStyles = `
|
1264
1264
|
:host {
|
@@ -1359,7 +1359,7 @@ const ButtonClass = compose(
|
|
1359
1359
|
}
|
1360
1360
|
`,
|
1361
1361
|
excludeAttrsSync: ['tabindex'],
|
1362
|
-
componentName: componentName$
|
1362
|
+
componentName: componentName$G,
|
1363
1363
|
})
|
1364
1364
|
);
|
1365
1365
|
|
@@ -1396,7 +1396,7 @@ loadingIndicatorStyles = `
|
|
1396
1396
|
}
|
1397
1397
|
`;
|
1398
1398
|
|
1399
|
-
customElements.define(componentName$
|
1399
|
+
customElements.define(componentName$G, ButtonClass);
|
1400
1400
|
|
1401
1401
|
const createBaseInputClass = (...args) =>
|
1402
1402
|
compose(
|
@@ -1406,11 +1406,11 @@ const createBaseInputClass = (...args) =>
|
|
1406
1406
|
inputEventsDispatchingMixin
|
1407
1407
|
)(createBaseClass(...args));
|
1408
1408
|
|
1409
|
-
const componentName$
|
1409
|
+
const componentName$F = getComponentName('boolean-field-internal');
|
1410
1410
|
|
1411
1411
|
const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
|
1412
1412
|
|
1413
|
-
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$
|
1413
|
+
const BaseInputClass$5 = createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
|
1414
1414
|
|
1415
1415
|
class BooleanInputInternal extends BaseInputClass$5 {
|
1416
1416
|
static get observedAttributes() {
|
@@ -1486,14 +1486,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1486
1486
|
|
1487
1487
|
const template = document.createElement('template');
|
1488
1488
|
template.innerHTML = `
|
1489
|
-
<${componentName$
|
1489
|
+
<${componentName$F}
|
1490
1490
|
tabindex="-1"
|
1491
1491
|
slot="input"
|
1492
|
-
></${componentName$
|
1492
|
+
></${componentName$F}>
|
1493
1493
|
`;
|
1494
1494
|
|
1495
1495
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1496
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1496
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$F);
|
1497
1497
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1498
1498
|
|
1499
1499
|
forwardAttrs(this, this.inputElement, {
|
@@ -1692,7 +1692,7 @@ descope-boolean-field-internal {
|
|
1692
1692
|
}
|
1693
1693
|
`;
|
1694
1694
|
|
1695
|
-
const componentName$
|
1695
|
+
const componentName$E = getComponentName('checkbox');
|
1696
1696
|
|
1697
1697
|
const {
|
1698
1698
|
host: host$g,
|
@@ -1798,15 +1798,15 @@ const CheckboxClass = compose(
|
|
1798
1798
|
}
|
1799
1799
|
`,
|
1800
1800
|
excludeAttrsSync: ['label', 'tabindex'],
|
1801
|
-
componentName: componentName$
|
1801
|
+
componentName: componentName$E,
|
1802
1802
|
})
|
1803
1803
|
);
|
1804
1804
|
|
1805
|
-
customElements.define(componentName$
|
1805
|
+
customElements.define(componentName$F, BooleanInputInternal);
|
1806
1806
|
|
1807
|
-
customElements.define(componentName$
|
1807
|
+
customElements.define(componentName$E, CheckboxClass);
|
1808
1808
|
|
1809
|
-
const componentName$
|
1809
|
+
const componentName$D = getComponentName('switch-toggle');
|
1810
1810
|
|
1811
1811
|
const {
|
1812
1812
|
host: host$f,
|
@@ -1938,17 +1938,17 @@ const SwitchToggleClass = compose(
|
|
1938
1938
|
}
|
1939
1939
|
`,
|
1940
1940
|
excludeAttrsSync: ['label', 'tabindex'],
|
1941
|
-
componentName: componentName$
|
1941
|
+
componentName: componentName$D,
|
1942
1942
|
})
|
1943
1943
|
);
|
1944
1944
|
|
1945
|
-
customElements.define(componentName$
|
1945
|
+
customElements.define(componentName$D, SwitchToggleClass);
|
1946
1946
|
|
1947
|
-
const componentName$
|
1947
|
+
const componentName$C = getComponentName('loader-linear');
|
1948
1948
|
|
1949
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1949
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
|
1950
1950
|
static get componentName() {
|
1951
|
-
return componentName$
|
1951
|
+
return componentName$C;
|
1952
1952
|
}
|
1953
1953
|
|
1954
1954
|
constructor() {
|
@@ -2009,11 +2009,11 @@ const LoaderLinearClass = compose(
|
|
2009
2009
|
componentNameValidationMixin
|
2010
2010
|
)(RawLoaderLinear);
|
2011
2011
|
|
2012
|
-
customElements.define(componentName$
|
2012
|
+
customElements.define(componentName$C, LoaderLinearClass);
|
2013
2013
|
|
2014
|
-
const componentName$
|
2014
|
+
const componentName$B = getComponentName('loader-radial');
|
2015
2015
|
|
2016
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
2016
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
|
2017
2017
|
constructor() {
|
2018
2018
|
super();
|
2019
2019
|
|
@@ -2057,11 +2057,11 @@ const LoaderRadialClass = compose(
|
|
2057
2057
|
componentNameValidationMixin
|
2058
2058
|
)(RawLoaderRadial);
|
2059
2059
|
|
2060
|
-
customElements.define(componentName$
|
2060
|
+
customElements.define(componentName$B, LoaderRadialClass);
|
2061
2061
|
|
2062
|
-
const componentName$
|
2062
|
+
const componentName$A = getComponentName('container');
|
2063
2063
|
|
2064
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2064
|
+
class RawContainer extends createBaseClass({ componentName: componentName$A, baseSelector: 'slot' }) {
|
2065
2065
|
constructor() {
|
2066
2066
|
super();
|
2067
2067
|
|
@@ -2113,13 +2113,13 @@ const ContainerClass = compose(
|
|
2113
2113
|
componentNameValidationMixin
|
2114
2114
|
)(RawContainer);
|
2115
2115
|
|
2116
|
-
customElements.define(componentName$
|
2116
|
+
customElements.define(componentName$A, ContainerClass);
|
2117
2117
|
|
2118
2118
|
// eslint-disable-next-line max-classes-per-file
|
2119
2119
|
|
2120
|
-
const componentName$
|
2120
|
+
const componentName$z = getComponentName('text');
|
2121
2121
|
|
2122
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
2122
|
+
class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
|
2123
2123
|
constructor() {
|
2124
2124
|
super();
|
2125
2125
|
|
@@ -2179,8 +2179,8 @@ const TextClass = compose(
|
|
2179
2179
|
customTextMixin
|
2180
2180
|
)(RawText);
|
2181
2181
|
|
2182
|
-
const componentName$
|
2183
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
2182
|
+
const componentName$y = getComponentName('divider');
|
2183
|
+
class RawDivider extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
|
2184
2184
|
constructor() {
|
2185
2185
|
super();
|
2186
2186
|
|
@@ -2279,9 +2279,9 @@ const DividerClass = compose(
|
|
2279
2279
|
componentNameValidationMixin
|
2280
2280
|
)(RawDivider);
|
2281
2281
|
|
2282
|
-
customElements.define(componentName$
|
2282
|
+
customElements.define(componentName$z, TextClass);
|
2283
2283
|
|
2284
|
-
customElements.define(componentName$
|
2284
|
+
customElements.define(componentName$y, DividerClass);
|
2285
2285
|
|
2286
2286
|
const { host: host$c, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$9, inputField: inputField$6, input, helperText: helperText$7, errorMessage: errorMessage$9 } =
|
2287
2287
|
{
|
@@ -2338,9 +2338,9 @@ var textFieldMappings = {
|
|
2338
2338
|
inputPlaceholderColor: { ...placeholder$3, property: 'color' },
|
2339
2339
|
};
|
2340
2340
|
|
2341
|
-
const componentName$
|
2341
|
+
const componentName$x = getComponentName('email-field');
|
2342
2342
|
|
2343
|
-
const customMixin$
|
2343
|
+
const customMixin$6 = (superclass) =>
|
2344
2344
|
class EmailFieldMixinClass extends superclass {
|
2345
2345
|
init() {
|
2346
2346
|
super.init?.();
|
@@ -2354,7 +2354,7 @@ const EmailFieldClass = compose(
|
|
2354
2354
|
draggableMixin,
|
2355
2355
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2356
2356
|
componentNameValidationMixin,
|
2357
|
-
customMixin$
|
2357
|
+
customMixin$6
|
2358
2358
|
)(
|
2359
2359
|
createProxy({
|
2360
2360
|
slots: ['', 'suffix'],
|
@@ -2373,15 +2373,15 @@ const EmailFieldClass = compose(
|
|
2373
2373
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2374
2374
|
`,
|
2375
2375
|
excludeAttrsSync: ['tabindex'],
|
2376
|
-
componentName: componentName$
|
2376
|
+
componentName: componentName$x,
|
2377
2377
|
})
|
2378
2378
|
);
|
2379
2379
|
|
2380
|
-
customElements.define(componentName$
|
2380
|
+
customElements.define(componentName$x, EmailFieldClass);
|
2381
2381
|
|
2382
|
-
const componentName$
|
2382
|
+
const componentName$w = getComponentName('link');
|
2383
2383
|
|
2384
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
2384
|
+
class RawLink extends createBaseClass({ componentName: componentName$w, baseSelector: ':host a' }) {
|
2385
2385
|
constructor() {
|
2386
2386
|
super();
|
2387
2387
|
|
@@ -2446,7 +2446,7 @@ const LinkClass = compose(
|
|
2446
2446
|
componentNameValidationMixin
|
2447
2447
|
)(RawLink);
|
2448
2448
|
|
2449
|
-
customElements.define(componentName$
|
2449
|
+
customElements.define(componentName$w, LinkClass);
|
2450
2450
|
|
2451
2451
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
2452
2452
|
let style;
|
@@ -2498,27 +2498,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
2498
2498
|
return CssVarImageClass;
|
2499
2499
|
};
|
2500
2500
|
|
2501
|
-
const componentName$
|
2501
|
+
const componentName$v = getComponentName('logo');
|
2502
2502
|
|
2503
2503
|
const LogoClass = createCssVarImageClass({
|
2504
|
-
componentName: componentName$
|
2504
|
+
componentName: componentName$v,
|
2505
2505
|
varName: 'url',
|
2506
2506
|
fallbackVarName: 'fallbackUrl',
|
2507
2507
|
});
|
2508
2508
|
|
2509
|
-
customElements.define(componentName$
|
2509
|
+
customElements.define(componentName$v, LogoClass);
|
2510
2510
|
|
2511
|
-
const componentName$
|
2511
|
+
const componentName$u = getComponentName('totp-image');
|
2512
2512
|
|
2513
2513
|
const TotpImageClass = createCssVarImageClass({
|
2514
|
-
componentName: componentName$
|
2514
|
+
componentName: componentName$u,
|
2515
2515
|
varName: 'url',
|
2516
2516
|
fallbackVarName: 'fallbackUrl',
|
2517
2517
|
});
|
2518
2518
|
|
2519
|
-
customElements.define(componentName$
|
2519
|
+
customElements.define(componentName$u, TotpImageClass);
|
2520
2520
|
|
2521
|
-
const componentName$
|
2521
|
+
const componentName$t = getComponentName('number-field');
|
2522
2522
|
|
2523
2523
|
const NumberFieldClass = compose(
|
2524
2524
|
createStyleMixin({
|
@@ -2544,11 +2544,11 @@ const NumberFieldClass = compose(
|
|
2544
2544
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2545
2545
|
`,
|
2546
2546
|
excludeAttrsSync: ['tabindex'],
|
2547
|
-
componentName: componentName$
|
2547
|
+
componentName: componentName$t,
|
2548
2548
|
})
|
2549
2549
|
);
|
2550
2550
|
|
2551
|
-
customElements.define(componentName$
|
2551
|
+
customElements.define(componentName$t, NumberFieldClass);
|
2552
2552
|
|
2553
2553
|
const focusElement = (ele) => {
|
2554
2554
|
ele?.focus();
|
@@ -2566,13 +2566,13 @@ const getSanitizedCharacters = (str) => {
|
|
2566
2566
|
|
2567
2567
|
/* eslint-disable no-param-reassign */
|
2568
2568
|
|
2569
|
-
const componentName$
|
2569
|
+
const componentName$s = getComponentName('passcode-internal');
|
2570
2570
|
|
2571
2571
|
const observedAttributes$5 = ['digits', 'loading'];
|
2572
2572
|
|
2573
2573
|
const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
|
2574
2574
|
|
2575
|
-
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$
|
2575
|
+
const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s, baseSelector: 'div' });
|
2576
2576
|
|
2577
2577
|
class PasscodeInternal extends BaseInputClass$4 {
|
2578
2578
|
static get observedAttributes() {
|
@@ -2798,11 +2798,11 @@ class PasscodeInternal extends BaseInputClass$4 {
|
|
2798
2798
|
}
|
2799
2799
|
}
|
2800
2800
|
|
2801
|
-
const componentName$
|
2801
|
+
const componentName$r = getComponentName('text-field');
|
2802
2802
|
|
2803
2803
|
const observedAttrs = ['type'];
|
2804
2804
|
|
2805
|
-
const customMixin$
|
2805
|
+
const customMixin$5 = (superclass) =>
|
2806
2806
|
class TextFieldClass extends superclass {
|
2807
2807
|
static get observedAttributes() {
|
2808
2808
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2829,7 +2829,7 @@ const TextFieldClass = compose(
|
|
2829
2829
|
draggableMixin,
|
2830
2830
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2831
2831
|
componentNameValidationMixin,
|
2832
|
-
customMixin$
|
2832
|
+
customMixin$5
|
2833
2833
|
)(
|
2834
2834
|
createProxy({
|
2835
2835
|
slots: ['prefix', 'suffix'],
|
@@ -2848,15 +2848,15 @@ const TextFieldClass = compose(
|
|
2848
2848
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2849
2849
|
`,
|
2850
2850
|
excludeAttrsSync: ['tabindex'],
|
2851
|
-
componentName: componentName$
|
2851
|
+
componentName: componentName$r,
|
2852
2852
|
})
|
2853
2853
|
);
|
2854
2854
|
|
2855
|
-
const componentName$
|
2855
|
+
const componentName$q = getComponentName('passcode');
|
2856
2856
|
|
2857
2857
|
const observedAttributes$4 = ['digits'];
|
2858
2858
|
|
2859
|
-
const customMixin$
|
2859
|
+
const customMixin$4 = (superclass) =>
|
2860
2860
|
class PasscodeMixinClass extends superclass {
|
2861
2861
|
static get observedAttributes() {
|
2862
2862
|
return observedAttributes$4.concat(superclass.observedAttributes || []);
|
@@ -2871,17 +2871,17 @@ const customMixin$5 = (superclass) =>
|
|
2871
2871
|
const template = document.createElement('template');
|
2872
2872
|
|
2873
2873
|
template.innerHTML = `
|
2874
|
-
<${componentName$
|
2874
|
+
<${componentName$s}
|
2875
2875
|
bordered="true"
|
2876
2876
|
name="code"
|
2877
2877
|
tabindex="-1"
|
2878
2878
|
slot="input"
|
2879
|
-
><slot></slot></${componentName$
|
2879
|
+
><slot></slot></${componentName$s}>
|
2880
2880
|
`;
|
2881
2881
|
|
2882
2882
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2883
2883
|
|
2884
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2884
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$s);
|
2885
2885
|
|
2886
2886
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
2887
2887
|
}
|
@@ -2952,7 +2952,7 @@ const PasscodeClass = compose(
|
|
2952
2952
|
draggableMixin,
|
2953
2953
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2954
2954
|
componentNameValidationMixin,
|
2955
|
-
customMixin$
|
2955
|
+
customMixin$4
|
2956
2956
|
)(
|
2957
2957
|
createProxy({
|
2958
2958
|
slots: [],
|
@@ -3028,15 +3028,15 @@ const PasscodeClass = compose(
|
|
3028
3028
|
${resetInputCursor('vaadin-text-field')}
|
3029
3029
|
`,
|
3030
3030
|
excludeAttrsSync: ['tabindex'],
|
3031
|
-
componentName: componentName$
|
3031
|
+
componentName: componentName$q,
|
3032
3032
|
})
|
3033
3033
|
);
|
3034
3034
|
|
3035
|
-
customElements.define(componentName$
|
3035
|
+
customElements.define(componentName$r, TextFieldClass);
|
3036
3036
|
|
3037
|
-
customElements.define(componentName$
|
3037
|
+
customElements.define(componentName$s, PasscodeInternal);
|
3038
3038
|
|
3039
|
-
customElements.define(componentName$
|
3039
|
+
customElements.define(componentName$q, PasscodeClass);
|
3040
3040
|
|
3041
3041
|
const passwordDraggableMixin = (superclass) =>
|
3042
3042
|
class PasswordDraggableMixinClass extends superclass {
|
@@ -3072,7 +3072,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
3072
3072
|
}
|
3073
3073
|
};
|
3074
3074
|
|
3075
|
-
const componentName$
|
3075
|
+
const componentName$p = getComponentName('password');
|
3076
3076
|
|
3077
3077
|
const {
|
3078
3078
|
host: host$9,
|
@@ -3203,13 +3203,13 @@ const PasswordClass = compose(
|
|
3203
3203
|
}
|
3204
3204
|
`,
|
3205
3205
|
excludeAttrsSync: ['tabindex'],
|
3206
|
-
componentName: componentName$
|
3206
|
+
componentName: componentName$p,
|
3207
3207
|
})
|
3208
3208
|
);
|
3209
3209
|
|
3210
|
-
customElements.define(componentName$
|
3210
|
+
customElements.define(componentName$p, PasswordClass);
|
3211
3211
|
|
3212
|
-
const componentName$
|
3212
|
+
const componentName$o = getComponentName('text-area');
|
3213
3213
|
|
3214
3214
|
const {
|
3215
3215
|
host: host$8,
|
@@ -3284,17 +3284,17 @@ const TextAreaClass = compose(
|
|
3284
3284
|
${resetInputCursor('vaadin-text-area')}
|
3285
3285
|
`,
|
3286
3286
|
excludeAttrsSync: ['tabindex'],
|
3287
|
-
componentName: componentName$
|
3287
|
+
componentName: componentName$o,
|
3288
3288
|
})
|
3289
3289
|
);
|
3290
3290
|
|
3291
|
-
customElements.define(componentName$
|
3291
|
+
customElements.define(componentName$o, TextAreaClass);
|
3292
3292
|
|
3293
3293
|
const observedAttributes$3 = ['src', 'alt'];
|
3294
3294
|
|
3295
|
-
const componentName$
|
3295
|
+
const componentName$n = getComponentName('image');
|
3296
3296
|
|
3297
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
3297
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$n, baseSelector: ':host > img' });
|
3298
3298
|
class RawImage extends BaseClass$1 {
|
3299
3299
|
static get observedAttributes() {
|
3300
3300
|
return observedAttributes$3.concat(BaseClass$1.observedAttributes || []);
|
@@ -3334,9 +3334,9 @@ const ImageClass = compose(
|
|
3334
3334
|
draggableMixin
|
3335
3335
|
)(RawImage);
|
3336
3336
|
|
3337
|
-
customElements.define(componentName$
|
3337
|
+
customElements.define(componentName$n, ImageClass);
|
3338
3338
|
|
3339
|
-
const componentName$
|
3339
|
+
const componentName$m = getComponentName('combo-box');
|
3340
3340
|
|
3341
3341
|
const ComboBoxMixin = (superclass) =>
|
3342
3342
|
class ComboBoxMixinClass extends superclass {
|
@@ -3700,12 +3700,12 @@ const ComboBoxClass = compose(
|
|
3700
3700
|
// and reset items to an empty array, and opening the list box with no items
|
3701
3701
|
// to display.
|
3702
3702
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
3703
|
-
componentName: componentName$
|
3703
|
+
componentName: componentName$m,
|
3704
3704
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3705
3705
|
})
|
3706
3706
|
);
|
3707
3707
|
|
3708
|
-
customElements.define(componentName$
|
3708
|
+
customElements.define(componentName$m, ComboBoxClass);
|
3709
3709
|
|
3710
3710
|
var CountryCodes = [
|
3711
3711
|
{
|
@@ -4945,7 +4945,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
|
|
4945
4945
|
</div>
|
4946
4946
|
`;
|
4947
4947
|
|
4948
|
-
const componentName$
|
4948
|
+
const componentName$l = getComponentName('phone-field-internal');
|
4949
4949
|
|
4950
4950
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
4951
4951
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
@@ -4957,7 +4957,7 @@ const mapAttrs$1 = {
|
|
4957
4957
|
|
4958
4958
|
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
4959
4959
|
|
4960
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
4960
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
|
4961
4961
|
|
4962
4962
|
let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
4963
4963
|
static get observedAttributes() {
|
@@ -5129,14 +5129,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
5129
5129
|
}
|
5130
5130
|
};
|
5131
5131
|
|
5132
|
-
customElements.define(componentName$
|
5132
|
+
customElements.define(componentName$l, PhoneFieldInternal$1);
|
5133
5133
|
|
5134
5134
|
const textVars$1 = TextFieldClass.cssVarList;
|
5135
5135
|
const comboVars = ComboBoxClass.cssVarList;
|
5136
5136
|
|
5137
|
-
const componentName$
|
5137
|
+
const componentName$k = getComponentName('phone-field');
|
5138
5138
|
|
5139
|
-
const customMixin$
|
5139
|
+
const customMixin$3 = (superclass) =>
|
5140
5140
|
class PhoneFieldMixinClass extends superclass {
|
5141
5141
|
static get CountryCodes() {
|
5142
5142
|
return CountryCodes;
|
@@ -5148,15 +5148,15 @@ const customMixin$4 = (superclass) =>
|
|
5148
5148
|
const template = document.createElement('template');
|
5149
5149
|
|
5150
5150
|
template.innerHTML = `
|
5151
|
-
<${componentName$
|
5151
|
+
<${componentName$l}
|
5152
5152
|
tabindex="-1"
|
5153
5153
|
slot="input"
|
5154
|
-
></${componentName$
|
5154
|
+
></${componentName$l}>
|
5155
5155
|
`;
|
5156
5156
|
|
5157
5157
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5158
5158
|
|
5159
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5159
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$l);
|
5160
5160
|
|
5161
5161
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5162
5162
|
includeAttrs: [
|
@@ -5276,7 +5276,7 @@ const PhoneFieldClass = compose(
|
|
5276
5276
|
}),
|
5277
5277
|
draggableMixin,
|
5278
5278
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5279
|
-
customMixin$
|
5279
|
+
customMixin$3
|
5280
5280
|
)(
|
5281
5281
|
createProxy({
|
5282
5282
|
slots: [],
|
@@ -5352,17 +5352,17 @@ const PhoneFieldClass = compose(
|
|
5352
5352
|
${resetInputLabelPosition('vaadin-text-field')}
|
5353
5353
|
`,
|
5354
5354
|
excludeAttrsSync: ['tabindex'],
|
5355
|
-
componentName: componentName$
|
5355
|
+
componentName: componentName$k,
|
5356
5356
|
})
|
5357
5357
|
);
|
5358
5358
|
|
5359
|
-
customElements.define(componentName$
|
5359
|
+
customElements.define(componentName$k, PhoneFieldClass);
|
5360
5360
|
|
5361
5361
|
const getCountryByCodeId = (countryCode) => {
|
5362
5362
|
return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
|
5363
5363
|
};
|
5364
5364
|
|
5365
|
-
const componentName$
|
5365
|
+
const componentName$j = getComponentName('phone-field-internal-input-box');
|
5366
5366
|
|
5367
5367
|
const observedAttributes$2 = [
|
5368
5368
|
'disabled',
|
@@ -5376,7 +5376,7 @@ const mapAttrs = {
|
|
5376
5376
|
'phone-input-placeholder': 'placeholder',
|
5377
5377
|
};
|
5378
5378
|
|
5379
|
-
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$
|
5379
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
|
5380
5380
|
|
5381
5381
|
class PhoneFieldInternal extends BaseInputClass$2 {
|
5382
5382
|
static get observedAttributes() {
|
@@ -5515,13 +5515,13 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5515
5515
|
}
|
5516
5516
|
}
|
5517
5517
|
|
5518
|
-
customElements.define(componentName$
|
5518
|
+
customElements.define(componentName$j, PhoneFieldInternal);
|
5519
5519
|
|
5520
5520
|
const textVars = TextFieldClass.cssVarList;
|
5521
5521
|
|
5522
|
-
const componentName$
|
5522
|
+
const componentName$i = getComponentName('phone-input-box-field');
|
5523
5523
|
|
5524
|
-
const customMixin$
|
5524
|
+
const customMixin$2 = (superclass) =>
|
5525
5525
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
5526
5526
|
static get CountryCodes() {
|
5527
5527
|
return CountryCodes;
|
@@ -5533,15 +5533,15 @@ const customMixin$3 = (superclass) =>
|
|
5533
5533
|
const template = document.createElement('template');
|
5534
5534
|
|
5535
5535
|
template.innerHTML = `
|
5536
|
-
<${componentName$
|
5536
|
+
<${componentName$j}
|
5537
5537
|
tabindex="-1"
|
5538
5538
|
slot="input"
|
5539
|
-
></${componentName$
|
5539
|
+
></${componentName$j}>
|
5540
5540
|
`;
|
5541
5541
|
|
5542
5542
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5543
5543
|
|
5544
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5544
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$j);
|
5545
5545
|
|
5546
5546
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5547
5547
|
includeAttrs: [
|
@@ -5608,7 +5608,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5608
5608
|
}),
|
5609
5609
|
draggableMixin,
|
5610
5610
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5611
|
-
customMixin$
|
5611
|
+
customMixin$2
|
5612
5612
|
)(
|
5613
5613
|
createProxy({
|
5614
5614
|
slots: [],
|
@@ -5674,17 +5674,17 @@ const PhoneFieldInputBoxClass = compose(
|
|
5674
5674
|
${resetInputLabelPosition('vaadin-text-field')}
|
5675
5675
|
`,
|
5676
5676
|
excludeAttrsSync: ['tabindex'],
|
5677
|
-
componentName: componentName$
|
5677
|
+
componentName: componentName$i,
|
5678
5678
|
})
|
5679
5679
|
);
|
5680
5680
|
|
5681
|
-
customElements.define(componentName$
|
5681
|
+
customElements.define(componentName$i, PhoneFieldInputBoxClass);
|
5682
5682
|
|
5683
|
-
const componentName$
|
5683
|
+
const componentName$h = getComponentName('new-password-internal');
|
5684
5684
|
|
5685
|
-
const componentName$
|
5685
|
+
const componentName$g = getComponentName('new-password');
|
5686
5686
|
|
5687
|
-
const customMixin$
|
5687
|
+
const customMixin$1 = (superclass) =>
|
5688
5688
|
class NewPasswordMixinClass extends superclass {
|
5689
5689
|
init() {
|
5690
5690
|
super.init?.();
|
@@ -5692,16 +5692,16 @@ const customMixin$2 = (superclass) =>
|
|
5692
5692
|
const template = document.createElement('template');
|
5693
5693
|
|
5694
5694
|
template.innerHTML = `
|
5695
|
-
<${componentName$
|
5695
|
+
<${componentName$h}
|
5696
5696
|
name="new-password"
|
5697
5697
|
tabindex="-1"
|
5698
5698
|
slot="input"
|
5699
|
-
></${componentName$
|
5699
|
+
></${componentName$h}>
|
5700
5700
|
`;
|
5701
5701
|
|
5702
5702
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5703
5703
|
|
5704
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5704
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$h);
|
5705
5705
|
|
5706
5706
|
forwardAttrs(this, this.inputElement, {
|
5707
5707
|
includeAttrs: [
|
@@ -5756,7 +5756,7 @@ const NewPasswordClass = compose(
|
|
5756
5756
|
}),
|
5757
5757
|
draggableMixin,
|
5758
5758
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5759
|
-
customMixin$
|
5759
|
+
customMixin$1
|
5760
5760
|
)(
|
5761
5761
|
createProxy({
|
5762
5762
|
slots: [],
|
@@ -5808,7 +5808,7 @@ const NewPasswordClass = compose(
|
|
5808
5808
|
}
|
5809
5809
|
`,
|
5810
5810
|
excludeAttrsSync: ['tabindex'],
|
5811
|
-
componentName: componentName$
|
5811
|
+
componentName: componentName$g,
|
5812
5812
|
})
|
5813
5813
|
);
|
5814
5814
|
|
@@ -5833,7 +5833,7 @@ const commonAttrs = [
|
|
5833
5833
|
|
5834
5834
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
5835
5835
|
|
5836
|
-
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$
|
5836
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
|
5837
5837
|
|
5838
5838
|
class NewPasswordInternal extends BaseInputClass$1 {
|
5839
5839
|
static get observedAttributes() {
|
@@ -5998,16 +5998,16 @@ class NewPasswordInternal extends BaseInputClass$1 {
|
|
5998
5998
|
}
|
5999
5999
|
}
|
6000
6000
|
|
6001
|
-
customElements.define(componentName$
|
6001
|
+
customElements.define(componentName$h, NewPasswordInternal);
|
6002
6002
|
|
6003
|
-
customElements.define(componentName$
|
6003
|
+
customElements.define(componentName$g, NewPasswordClass);
|
6004
6004
|
|
6005
|
-
const componentName$
|
6005
|
+
const componentName$f = getComponentName('recaptcha');
|
6006
6006
|
|
6007
6007
|
const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
|
6008
6008
|
|
6009
6009
|
const BaseClass = createBaseClass({
|
6010
|
-
componentName: componentName$
|
6010
|
+
componentName: componentName$f,
|
6011
6011
|
baseSelector: ':host > div',
|
6012
6012
|
});
|
6013
6013
|
class RawRecaptcha extends BaseClass {
|
@@ -6159,7 +6159,7 @@ class RawRecaptcha extends BaseClass {
|
|
6159
6159
|
|
6160
6160
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6161
6161
|
|
6162
|
-
customElements.define(componentName$
|
6162
|
+
customElements.define(componentName$f, RecaptchaClass);
|
6163
6163
|
|
6164
6164
|
const getFileBase64 = (fileObj) => {
|
6165
6165
|
return new Promise((resolve) => {
|
@@ -6173,7 +6173,7 @@ const getFilename = (fileObj) => {
|
|
6173
6173
|
return fileObj.name.replace(/^.*\\/, '');
|
6174
6174
|
};
|
6175
6175
|
|
6176
|
-
const componentName$
|
6176
|
+
const componentName$e = getComponentName('upload-file');
|
6177
6177
|
|
6178
6178
|
const observedAttributes = [
|
6179
6179
|
'title',
|
@@ -6188,7 +6188,7 @@ const observedAttributes = [
|
|
6188
6188
|
'icon',
|
6189
6189
|
];
|
6190
6190
|
|
6191
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
6191
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$e, baseSelector: ':host > div' });
|
6192
6192
|
|
6193
6193
|
class RawUploadFile extends BaseInputClass {
|
6194
6194
|
static get observedAttributes() {
|
@@ -6403,48 +6403,113 @@ const UploadFileClass = compose(
|
|
6403
6403
|
componentNameValidationMixin
|
6404
6404
|
)(RawUploadFile);
|
6405
6405
|
|
6406
|
-
customElements.define(componentName$
|
6406
|
+
customElements.define(componentName$e, UploadFileClass);
|
6407
6407
|
|
6408
|
-
const
|
6408
|
+
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
6409
|
+
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6410
|
+
componentName,
|
6411
|
+
baseSelector: 'slot',
|
6412
|
+
}) {
|
6413
|
+
constructor() {
|
6414
|
+
super();
|
6409
6415
|
|
6410
|
-
|
6411
|
-
|
6412
|
-
|
6413
|
-
|
6414
|
-
|
6415
|
-
|
6416
|
+
this.innerHTML = `
|
6417
|
+
<style>
|
6418
|
+
slot {
|
6419
|
+
box-sizing: border-box;
|
6420
|
+
width: 100%;
|
6421
|
+
display: flex;
|
6422
|
+
flex-wrap: wrap;
|
6423
|
+
}
|
6424
|
+
</style>
|
6425
|
+
<slot part="wrapper"></slot>
|
6426
|
+
`;
|
6427
|
+
}
|
6416
6428
|
|
6417
|
-
|
6418
|
-
|
6419
|
-
|
6420
|
-
|
6421
|
-
|
6422
|
-
|
6423
|
-
|
6429
|
+
dispatchChange = createDispatchEvent.bind(this, 'change');
|
6430
|
+
|
6431
|
+
get items() {
|
6432
|
+
return this.querySelector('slot').assignedElements();
|
6433
|
+
}
|
6434
|
+
|
6435
|
+
get isReadonly() {
|
6436
|
+
return this.getAttribute('readonly') === 'true';
|
6424
6437
|
}
|
6425
|
-
</style>
|
6426
|
-
<slot part="wrapper"></slot>
|
6427
|
-
`;
|
6428
|
-
}
|
6429
6438
|
|
6430
|
-
|
6439
|
+
get size() {
|
6440
|
+
return this.getAttribute('size') || 'md';
|
6441
|
+
}
|
6431
6442
|
|
6432
|
-
|
6433
|
-
|
6434
|
-
|
6443
|
+
// eslint-disable-next-line getter-return, class-methods-use-this
|
6444
|
+
get value() {
|
6445
|
+
// eslint-disable-next-line no-console
|
6446
|
+
console.warn('get value', 'is not implemented');
|
6447
|
+
}
|
6448
|
+
|
6449
|
+
// eslint-disable-next-line class-methods-use-this
|
6450
|
+
set value(value) {
|
6451
|
+
// eslint-disable-next-line no-console
|
6452
|
+
console.warn('set value', 'is not implemented');
|
6453
|
+
}
|
6454
|
+
|
6455
|
+
onSizeChange() {
|
6456
|
+
this.items.forEach((item) => {
|
6457
|
+
item.setAttribute('size', this.size);
|
6458
|
+
});
|
6459
|
+
}
|
6460
|
+
|
6461
|
+
onReadOnlyChange() {
|
6462
|
+
this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
|
6463
|
+
}
|
6464
|
+
|
6465
|
+
// eslint-disable-next-line class-methods-use-this
|
6466
|
+
getValidity() {
|
6467
|
+
// eslint-disable-next-line no-console
|
6468
|
+
console.warn('getValidity', 'is not implemented');
|
6469
|
+
}
|
6470
|
+
|
6471
|
+
onObservedAttributeChange(attrs) {
|
6472
|
+
attrs.forEach((attr) => {
|
6473
|
+
switch (attr) {
|
6474
|
+
case 'size':
|
6475
|
+
this.onSizeChange();
|
6476
|
+
break;
|
6477
|
+
case 'readonly':
|
6478
|
+
this.onReadOnlyChange();
|
6479
|
+
break;
|
6480
|
+
}
|
6481
|
+
});
|
6482
|
+
}
|
6483
|
+
|
6484
|
+
init() {
|
6485
|
+
// we are adding listeners before calling to super because it's stopping the events
|
6486
|
+
this.addEventListener('focus', (e) => {
|
6487
|
+
// we want to ignore focus events we are dispatching
|
6488
|
+
if (e.isTrusted) {
|
6489
|
+
this.items[0]?.focus();
|
6490
|
+
}
|
6491
|
+
});
|
6492
|
+
|
6493
|
+
super.init?.();
|
6435
6494
|
|
6436
|
-
|
6437
|
-
|
6495
|
+
observeAttributes(this, this.onObservedAttributeChange.bind(this), {
|
6496
|
+
includeAttrs: ['size', 'readonly'],
|
6497
|
+
});
|
6498
|
+
}
|
6438
6499
|
}
|
6439
6500
|
|
6501
|
+
return BaseButtonSelectionGroupInternalClass;
|
6502
|
+
};
|
6503
|
+
|
6504
|
+
const componentName$d = getComponentName('button-selection-group-internal');
|
6505
|
+
|
6506
|
+
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6507
|
+
componentName$d
|
6508
|
+
) {
|
6440
6509
|
getSelectedNode() {
|
6441
6510
|
return this.items.find((item) => item.hasAttribute('selected'));
|
6442
6511
|
}
|
6443
6512
|
|
6444
|
-
get size() {
|
6445
|
-
return this.getAttribute('size') || 'md';
|
6446
|
-
}
|
6447
|
-
|
6448
6513
|
get allowDeselect() {
|
6449
6514
|
return this.getAttribute('allow-deselect') === 'true';
|
6450
6515
|
}
|
@@ -6460,7 +6525,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6460
6525
|
} else {
|
6461
6526
|
this.setSelected(e.target);
|
6462
6527
|
}
|
6463
|
-
this
|
6528
|
+
this.dispatchChange();
|
6464
6529
|
}
|
6465
6530
|
}
|
6466
6531
|
|
@@ -6471,15 +6536,6 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6471
6536
|
}
|
6472
6537
|
}
|
6473
6538
|
|
6474
|
-
get value() {
|
6475
|
-
return this.getSelectedNode()?.value || '';
|
6476
|
-
}
|
6477
|
-
|
6478
|
-
set value(value) {
|
6479
|
-
const node = this.items.find((child) => child.value === value);
|
6480
|
-
this.setSelected(node);
|
6481
|
-
}
|
6482
|
-
|
6483
6539
|
get defaultValue() {
|
6484
6540
|
return this.getAttribute('default-value');
|
6485
6541
|
}
|
@@ -6494,14 +6550,13 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6494
6550
|
});
|
6495
6551
|
}
|
6496
6552
|
|
6497
|
-
|
6498
|
-
this.
|
6499
|
-
item.setAttribute('size', this.size);
|
6500
|
-
});
|
6553
|
+
get value() {
|
6554
|
+
return this.getSelectedNode()?.value || '';
|
6501
6555
|
}
|
6502
6556
|
|
6503
|
-
|
6504
|
-
this.
|
6557
|
+
set value(value) {
|
6558
|
+
const node = this.items.find((child) => child.value === value);
|
6559
|
+
this.setSelected(node);
|
6505
6560
|
}
|
6506
6561
|
|
6507
6562
|
getValidity() {
|
@@ -6512,42 +6567,16 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
6512
6567
|
return {};
|
6513
6568
|
}
|
6514
6569
|
|
6515
|
-
onObservedAttributeChange(attrs) {
|
6516
|
-
attrs.forEach((attr) => {
|
6517
|
-
switch (attr) {
|
6518
|
-
case 'size':
|
6519
|
-
this.onSizeChange();
|
6520
|
-
break;
|
6521
|
-
case 'readonly':
|
6522
|
-
this.onReadOnlyChange();
|
6523
|
-
break;
|
6524
|
-
}
|
6525
|
-
});
|
6526
|
-
}
|
6527
|
-
|
6528
6570
|
init() {
|
6529
|
-
|
6530
|
-
this.addEventListener('focus', (e) => {
|
6531
|
-
// we want to ignore focus events we are dispatching
|
6532
|
-
if (e.isTrusted) {
|
6533
|
-
this.items[0]?.focus();
|
6534
|
-
}
|
6535
|
-
});
|
6571
|
+
super.init();
|
6536
6572
|
|
6537
|
-
super.init?.();
|
6538
6573
|
this.setDefaultValue();
|
6539
6574
|
|
6540
|
-
observeAttributes(this, this.onObservedAttributeChange.bind(this), {
|
6541
|
-
includeAttrs: ['size', 'readonly'],
|
6542
|
-
});
|
6543
|
-
|
6544
6575
|
this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
|
6545
6576
|
}
|
6546
6577
|
}
|
6547
6578
|
|
6548
|
-
const
|
6549
|
-
|
6550
|
-
const customMixin$1 = (superclass) =>
|
6579
|
+
const buttonSelectionGroupBaseMixin = (superclass) =>
|
6551
6580
|
class ButtonSelectionGroupMixinClass extends superclass {
|
6552
6581
|
// eslint-disable-next-line class-methods-use-this
|
6553
6582
|
#renderItem = ({ value, label }) =>
|
@@ -6617,25 +6646,6 @@ const customMixin$1 = (superclass) =>
|
|
6617
6646
|
|
6618
6647
|
init() {
|
6619
6648
|
super.init?.();
|
6620
|
-
const template = document.createElement('template');
|
6621
|
-
|
6622
|
-
template.innerHTML = `
|
6623
|
-
<${componentName$b}
|
6624
|
-
name="button-selection-group"
|
6625
|
-
slot="input"
|
6626
|
-
tabindex="-1"
|
6627
|
-
>
|
6628
|
-
<slot></slot>
|
6629
|
-
</${componentName$b}>
|
6630
|
-
`;
|
6631
|
-
|
6632
|
-
this.baseElement.appendChild(template.content.cloneNode(true));
|
6633
|
-
|
6634
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
6635
|
-
|
6636
|
-
forwardAttrs(this, this.inputElement, {
|
6637
|
-
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
6638
|
-
});
|
6639
6649
|
|
6640
6650
|
this.renderItems();
|
6641
6651
|
|
@@ -6654,34 +6664,24 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
6654
6664
|
host: { selector: () => ':host' },
|
6655
6665
|
label: { selector: '::part(label)' },
|
6656
6666
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6657
|
-
internalWrapper: { selector: '
|
6667
|
+
internalWrapper: { selector: () => ':host [part="internal-component"] slot' },
|
6658
6668
|
errorMessage: { selector: '::part(error-message)' },
|
6659
6669
|
};
|
6660
6670
|
|
6661
|
-
const
|
6662
|
-
|
6663
|
-
|
6664
|
-
|
6665
|
-
|
6666
|
-
|
6667
|
-
|
6668
|
-
|
6669
|
-
|
6670
|
-
|
6671
|
-
|
6672
|
-
|
6673
|
-
|
6674
|
-
|
6675
|
-
}),
|
6676
|
-
draggableMixin,
|
6677
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6678
|
-
componentNameValidationMixin,
|
6679
|
-
customMixin$1
|
6680
|
-
)(
|
6681
|
-
createProxy({
|
6682
|
-
slots: [],
|
6683
|
-
wrappedEleName: 'vaadin-text-field',
|
6684
|
-
style: () => `
|
6671
|
+
const buttonSelectionGroupMappings = {
|
6672
|
+
hostWidth: { ...host$2, property: 'width' },
|
6673
|
+
hostDirection: { ...host$2, property: 'direction' },
|
6674
|
+
fontFamily: host$2,
|
6675
|
+
labelTextColor: [
|
6676
|
+
{ ...label$1, property: 'color' },
|
6677
|
+
{ ...requiredIndicator$1, property: 'color' },
|
6678
|
+
],
|
6679
|
+
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
6680
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
6681
|
+
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
6682
|
+
};
|
6683
|
+
|
6684
|
+
const buttonSelectionGroupStyles = `
|
6685
6685
|
:host {
|
6686
6686
|
display: inline-flex;
|
6687
6687
|
max-width: 100%;
|
@@ -6694,7 +6694,7 @@ const ButtonSelectionGroupClass = compose(
|
|
6694
6694
|
background-color: transparent;
|
6695
6695
|
}
|
6696
6696
|
|
6697
|
-
|
6697
|
+
[part="internal-component"] {
|
6698
6698
|
-webkit-mask-image: none;
|
6699
6699
|
padding: 0;
|
6700
6700
|
width: 100%;
|
@@ -6734,18 +6734,64 @@ const ButtonSelectionGroupClass = compose(
|
|
6734
6734
|
|
6735
6735
|
${resetInputLabelPosition('vaadin-text-field')}
|
6736
6736
|
${resetInputCursor('vaadin-text-field')}
|
6737
|
-
|
6737
|
+
`;
|
6738
|
+
|
6739
|
+
const componentName$c = getComponentName('button-selection-group');
|
6740
|
+
|
6741
|
+
const buttonSelectionGroupMixin = (superclass) =>
|
6742
|
+
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
6743
|
+
init() {
|
6744
|
+
super.init?.();
|
6745
|
+
const template = document.createElement('template');
|
6746
|
+
|
6747
|
+
template.innerHTML = `
|
6748
|
+
<${componentName$d}
|
6749
|
+
name="button-selection-group"
|
6750
|
+
slot="input"
|
6751
|
+
tabindex="-1"
|
6752
|
+
part="internal-component"
|
6753
|
+
>
|
6754
|
+
<slot></slot>
|
6755
|
+
</${componentName$d}>
|
6756
|
+
`;
|
6757
|
+
|
6758
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
6759
|
+
|
6760
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
6761
|
+
|
6762
|
+
forwardAttrs(this, this.inputElement, {
|
6763
|
+
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
6764
|
+
});
|
6765
|
+
}
|
6766
|
+
};
|
6767
|
+
|
6768
|
+
const ButtonSelectionGroupClass = compose(
|
6769
|
+
createStyleMixin({
|
6770
|
+
mappings: {
|
6771
|
+
...buttonSelectionGroupMappings,
|
6772
|
+
},
|
6773
|
+
}),
|
6774
|
+
draggableMixin,
|
6775
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6776
|
+
componentNameValidationMixin,
|
6777
|
+
buttonSelectionGroupBaseMixin,
|
6778
|
+
buttonSelectionGroupMixin
|
6779
|
+
)(
|
6780
|
+
createProxy({
|
6781
|
+
slots: [],
|
6782
|
+
wrappedEleName: 'vaadin-text-field',
|
6783
|
+
style: () => buttonSelectionGroupStyles,
|
6738
6784
|
excludeAttrsSync: ['tabindex'],
|
6739
|
-
componentName: componentName$
|
6785
|
+
componentName: componentName$c,
|
6740
6786
|
})
|
6741
6787
|
);
|
6742
6788
|
|
6743
|
-
customElements.define(componentName$
|
6789
|
+
customElements.define(componentName$d, ButtonSelectionGroupInternalClass);
|
6744
6790
|
|
6745
|
-
const componentName$
|
6791
|
+
const componentName$b = getComponentName('button-selection-group-item');
|
6746
6792
|
|
6747
6793
|
class RawSelectItem extends createBaseClass({
|
6748
|
-
componentName: componentName$
|
6794
|
+
componentName: componentName$b,
|
6749
6795
|
baseSelector: ':host > descope-button',
|
6750
6796
|
}) {
|
6751
6797
|
get size() {
|
@@ -6843,48 +6889,206 @@ const ButtonSelectionGroupItemClass = compose(
|
|
6843
6889
|
componentNameValidationMixin
|
6844
6890
|
)(RawSelectItem);
|
6845
6891
|
|
6846
|
-
customElements.define(componentName$
|
6892
|
+
customElements.define(componentName$b, ButtonSelectionGroupItemClass);
|
6847
6893
|
|
6848
|
-
customElements.define(componentName$
|
6894
|
+
customElements.define(componentName$c, ButtonSelectionGroupClass);
|
6849
6895
|
|
6850
|
-
|
6851
|
-
get sortable() {
|
6852
|
-
return this.getAttribute('sortable') === 'true';
|
6853
|
-
}
|
6896
|
+
const componentName$a = getComponentName('button-multi-selection-group-internal');
|
6854
6897
|
|
6855
|
-
|
6856
|
-
|
6857
|
-
|
6898
|
+
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
6899
|
+
componentName$a
|
6900
|
+
) {
|
6901
|
+
#getSelectedNodes() {
|
6902
|
+
return this.items.filter((item) => item.hasAttribute('selected'));
|
6903
|
+
}
|
6858
6904
|
|
6859
|
-
|
6905
|
+
onClick(e) {
|
6906
|
+
if (e.target !== e.currentTarget) {
|
6907
|
+
if (this.#getSelectedNodes().includes(e.target)) {
|
6908
|
+
e.target.removeAttribute('selected');
|
6909
|
+
} else {
|
6910
|
+
e.target.setAttribute('selected', 'true');
|
6911
|
+
}
|
6912
|
+
this.dispatchChange();
|
6860
6913
|
}
|
6861
|
-
|
6862
|
-
// eslint-disable-next-line no-param-reassign
|
6863
|
-
root.innerHTML = this.__getHeader(this.header, this.path);
|
6864
6914
|
}
|
6865
|
-
}
|
6866
6915
|
|
6867
|
-
|
6916
|
+
get value() {
|
6917
|
+
return this.#getSelectedNodes().map((node) => node.value);
|
6918
|
+
}
|
6868
6919
|
|
6869
|
-
|
6920
|
+
set value(values) {
|
6921
|
+
this.items.forEach((item) => {
|
6922
|
+
if (values.includes(item.value)) {
|
6923
|
+
item.setAttribute('selected', 'true');
|
6924
|
+
}
|
6925
|
+
});
|
6926
|
+
}
|
6870
6927
|
|
6871
|
-
|
6928
|
+
get minItemsSelection() {
|
6929
|
+
return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
|
6930
|
+
}
|
6872
6931
|
|
6873
|
-
|
6874
|
-
|
6875
|
-
|
6932
|
+
get maxItemsSelection() {
|
6933
|
+
return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
|
6934
|
+
}
|
6876
6935
|
|
6877
|
-
|
6878
|
-
|
6879
|
-
|
6880
|
-
|
6881
|
-
|
6882
|
-
|
6883
|
-
|
6936
|
+
// eslint-disable-next-line class-methods-use-this
|
6937
|
+
#isValidDataType(data) {
|
6938
|
+
const isValid = Array.isArray(data);
|
6939
|
+
if (!isValid) {
|
6940
|
+
// eslint-disable-next-line no-console
|
6941
|
+
console.error('default-values must be an array, received:', data);
|
6942
|
+
}
|
6884
6943
|
|
6885
|
-
|
6886
|
-
|
6887
|
-
|
6944
|
+
return isValid;
|
6945
|
+
}
|
6946
|
+
|
6947
|
+
get defaultValues() {
|
6948
|
+
const defaultValuesAttr = this.getAttribute('default-values');
|
6949
|
+
if (defaultValuesAttr) {
|
6950
|
+
try {
|
6951
|
+
const defaultValues = JSON.parse(defaultValuesAttr);
|
6952
|
+
if (this.#isValidDataType(defaultValues)) {
|
6953
|
+
return defaultValues;
|
6954
|
+
}
|
6955
|
+
} catch (e) {
|
6956
|
+
// eslint-disable-next-line no-console
|
6957
|
+
console.error('could not parse data string from attribute "default-values" -', e.message);
|
6958
|
+
}
|
6959
|
+
}
|
6960
|
+
return [];
|
6961
|
+
}
|
6962
|
+
|
6963
|
+
setDefaultValues() {
|
6964
|
+
// we want to defer this action until all attributes are synced
|
6965
|
+
setTimeout(() => {
|
6966
|
+
if (this.defaultValues) {
|
6967
|
+
this.value = this.defaultValues;
|
6968
|
+
this.setCustomValidity();
|
6969
|
+
}
|
6970
|
+
});
|
6971
|
+
}
|
6972
|
+
|
6973
|
+
getValidity() {
|
6974
|
+
if (this.isRequired && !this.value.length) {
|
6975
|
+
return { valueMissing: true };
|
6976
|
+
}
|
6977
|
+
// If the field is not required, no minimum selection can be set
|
6978
|
+
if (this.isRequired && this.minItemsSelection && this.value.length < this.minItemsSelection) {
|
6979
|
+
return {
|
6980
|
+
rangeUnderflow: true,
|
6981
|
+
};
|
6982
|
+
}
|
6983
|
+
if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
|
6984
|
+
return {
|
6985
|
+
rangeOverflow: true,
|
6986
|
+
};
|
6987
|
+
}
|
6988
|
+
return {};
|
6989
|
+
}
|
6990
|
+
|
6991
|
+
init() {
|
6992
|
+
super.init();
|
6993
|
+
|
6994
|
+
this.setDefaultValues();
|
6995
|
+
|
6996
|
+
this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
|
6997
|
+
}
|
6998
|
+
}
|
6999
|
+
|
7000
|
+
const componentName$9 = getComponentName('button-multi-selection-group');
|
7001
|
+
|
7002
|
+
const buttonMultiSelectionGroupMixin = (superclass) =>
|
7003
|
+
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
7004
|
+
init() {
|
7005
|
+
super.init?.();
|
7006
|
+
const template = document.createElement('template');
|
7007
|
+
|
7008
|
+
template.innerHTML = `
|
7009
|
+
<${componentName$a}
|
7010
|
+
name="button-selection-group"
|
7011
|
+
slot="input"
|
7012
|
+
tabindex="-1"
|
7013
|
+
part="internal-component"
|
7014
|
+
>
|
7015
|
+
<slot></slot>
|
7016
|
+
</${componentName$a}>
|
7017
|
+
`;
|
7018
|
+
|
7019
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
7020
|
+
|
7021
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
7022
|
+
|
7023
|
+
forwardAttrs(this, this.inputElement, {
|
7024
|
+
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
7025
|
+
});
|
7026
|
+
}
|
7027
|
+
};
|
7028
|
+
|
7029
|
+
const ButtonMultiSelectionGroupClass = compose(
|
7030
|
+
createStyleMixin({
|
7031
|
+
mappings: {
|
7032
|
+
...buttonSelectionGroupMappings,
|
7033
|
+
},
|
7034
|
+
}),
|
7035
|
+
draggableMixin,
|
7036
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
7037
|
+
componentNameValidationMixin,
|
7038
|
+
buttonSelectionGroupBaseMixin,
|
7039
|
+
buttonMultiSelectionGroupMixin
|
7040
|
+
)(
|
7041
|
+
createProxy({
|
7042
|
+
slots: [],
|
7043
|
+
wrappedEleName: 'vaadin-text-field',
|
7044
|
+
style: () => buttonSelectionGroupStyles,
|
7045
|
+
excludeAttrsSync: ['tabindex'],
|
7046
|
+
componentName: componentName$9,
|
7047
|
+
})
|
7048
|
+
);
|
7049
|
+
|
7050
|
+
customElements.define(componentName$a, ButtonMultiSelectionGroupInternalClass);
|
7051
|
+
|
7052
|
+
customElements.define(componentName$9, ButtonMultiSelectionGroupClass);
|
7053
|
+
|
7054
|
+
class GridTextColumnClass extends GridSortColumn {
|
7055
|
+
get sortable() {
|
7056
|
+
return this.getAttribute('sortable') === 'true';
|
7057
|
+
}
|
7058
|
+
|
7059
|
+
_defaultHeaderRenderer(root, _column) {
|
7060
|
+
if (this.sortable) {
|
7061
|
+
super._defaultHeaderRenderer(root, _column);
|
7062
|
+
|
7063
|
+
return;
|
7064
|
+
}
|
7065
|
+
|
7066
|
+
// eslint-disable-next-line no-param-reassign
|
7067
|
+
root.innerHTML = this.__getHeader(this.header, this.path);
|
7068
|
+
}
|
7069
|
+
}
|
7070
|
+
|
7071
|
+
const componentName$8 = getComponentName('grid-text-column');
|
7072
|
+
|
7073
|
+
customElements.define(componentName$8, GridTextColumnClass);
|
7074
|
+
|
7075
|
+
/* eslint-disable no-param-reassign */
|
7076
|
+
|
7077
|
+
class GridCustomColumnClass extends GridTextColumnClass {
|
7078
|
+
_defaultRenderer(cell, _col, model) {
|
7079
|
+
const content = model.item[this.path];
|
7080
|
+
|
7081
|
+
// we get a list of elements that can be used to render the content
|
7082
|
+
// each element can have a "pattern" attribute which contains regex expression
|
7083
|
+
// we are going over the elements, and when finding an element which is pattern matches the data,
|
7084
|
+
// we are cloning this element, and injecting the data as its child
|
7085
|
+
const contentEle = Array.from(this.children).find((child) => {
|
7086
|
+
const pattern = child.getAttribute('data-pattern');
|
7087
|
+
if (!pattern) return true;
|
7088
|
+
|
7089
|
+
const regEx = new RegExp(pattern);
|
7090
|
+
return regEx.test(content);
|
7091
|
+
});
|
6888
7092
|
|
6889
7093
|
if (!contentEle) {
|
6890
7094
|
cell.innerHTML = model.item[this.path];
|
@@ -8090,7 +8294,7 @@ const globals = {
|
|
8090
8294
|
fonts,
|
8091
8295
|
direction,
|
8092
8296
|
};
|
8093
|
-
const vars$
|
8297
|
+
const vars$x = getThemeVars(globals);
|
8094
8298
|
|
8095
8299
|
const globalRefs$i = getThemeRefs(globals);
|
8096
8300
|
const compVars$4 = ButtonClass.cssVarList;
|
@@ -8103,7 +8307,7 @@ const mode = {
|
|
8103
8307
|
surface: globalRefs$i.colors.surface,
|
8104
8308
|
};
|
8105
8309
|
|
8106
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
8310
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$G);
|
8107
8311
|
|
8108
8312
|
const button = {
|
8109
8313
|
...helperTheme$3,
|
@@ -8201,7 +8405,7 @@ const button = {
|
|
8201
8405
|
},
|
8202
8406
|
};
|
8203
8407
|
|
8204
|
-
const vars$
|
8408
|
+
const vars$w = {
|
8205
8409
|
...compVars$4,
|
8206
8410
|
...helperVars$3,
|
8207
8411
|
};
|
@@ -8209,13 +8413,13 @@ const vars$v = {
|
|
8209
8413
|
var button$1 = /*#__PURE__*/Object.freeze({
|
8210
8414
|
__proto__: null,
|
8211
8415
|
default: button,
|
8212
|
-
vars: vars$
|
8416
|
+
vars: vars$w
|
8213
8417
|
});
|
8214
8418
|
|
8215
8419
|
const componentName$2 = getComponentName('input-wrapper');
|
8216
8420
|
const globalRefs$h = getThemeRefs(globals);
|
8217
8421
|
|
8218
|
-
const [theme$1, refs, vars$
|
8422
|
+
const [theme$1, refs, vars$v] = createHelperVars(
|
8219
8423
|
{
|
8220
8424
|
labelTextColor: globalRefs$h.colors.surface.contrast,
|
8221
8425
|
valueTextColor: globalRefs$h.colors.surface.contrast,
|
@@ -8288,22 +8492,58 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
8288
8492
|
__proto__: null,
|
8289
8493
|
default: theme$1,
|
8290
8494
|
refs: refs,
|
8291
|
-
vars: vars$
|
8495
|
+
vars: vars$v
|
8292
8496
|
});
|
8293
8497
|
|
8294
|
-
const vars$
|
8498
|
+
const vars$u = TextFieldClass.cssVarList;
|
8295
8499
|
|
8296
8500
|
const textField = {
|
8501
|
+
[vars$u.hostWidth]: refs.width,
|
8502
|
+
[vars$u.hostMinWidth]: refs.minWidth,
|
8503
|
+
[vars$u.hostDirection]: refs.direction,
|
8504
|
+
[vars$u.fontSize]: refs.fontSize,
|
8505
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
8506
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
8507
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
8508
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
8509
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
8510
|
+
[vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
|
8511
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
8512
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
8513
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
8514
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
8515
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
8516
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
8517
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
8518
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
8519
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
8520
|
+
[vars$u.inputHeight]: refs.inputHeight,
|
8521
|
+
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
8522
|
+
};
|
8523
|
+
|
8524
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
8525
|
+
__proto__: null,
|
8526
|
+
default: textField,
|
8527
|
+
textField: textField,
|
8528
|
+
vars: vars$u
|
8529
|
+
});
|
8530
|
+
|
8531
|
+
const globalRefs$g = getThemeRefs(globals);
|
8532
|
+
const vars$t = PasswordClass.cssVarList;
|
8533
|
+
|
8534
|
+
const password = {
|
8297
8535
|
[vars$t.hostWidth]: refs.width,
|
8298
|
-
[vars$t.hostMinWidth]: refs.minWidth,
|
8299
8536
|
[vars$t.hostDirection]: refs.direction,
|
8300
8537
|
[vars$t.fontSize]: refs.fontSize,
|
8301
8538
|
[vars$t.fontFamily]: refs.fontFamily,
|
8302
8539
|
[vars$t.labelTextColor]: refs.labelTextColor,
|
8303
|
-
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
8304
8540
|
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
8541
|
+
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
8542
|
+
[vars$t.inputHeight]: refs.inputHeight,
|
8543
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
8544
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
8305
8545
|
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
8306
|
-
[vars$t.
|
8546
|
+
[vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8307
8547
|
[vars$t.inputBorderWidth]: refs.borderWidth,
|
8308
8548
|
[vars$t.inputBorderStyle]: refs.borderStyle,
|
8309
8549
|
[vars$t.inputBorderColor]: refs.borderColor,
|
@@ -8312,34 +8552,28 @@ const textField = {
|
|
8312
8552
|
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
8313
8553
|
[vars$t.inputOutlineColor]: refs.outlineColor,
|
8314
8554
|
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
8315
|
-
[vars$t.
|
8316
|
-
[vars$t.
|
8317
|
-
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
8555
|
+
[vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
|
8556
|
+
[vars$t.revealButtonSize]: refs.toggleButtonSize,
|
8318
8557
|
};
|
8319
8558
|
|
8320
|
-
var
|
8559
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
8321
8560
|
__proto__: null,
|
8322
|
-
default:
|
8323
|
-
textField: textField,
|
8561
|
+
default: password,
|
8324
8562
|
vars: vars$t
|
8325
8563
|
});
|
8326
8564
|
|
8327
|
-
const
|
8328
|
-
const vars$s = PasswordClass.cssVarList;
|
8565
|
+
const vars$s = NumberFieldClass.cssVarList;
|
8329
8566
|
|
8330
|
-
const
|
8567
|
+
const numberField = {
|
8331
8568
|
[vars$s.hostWidth]: refs.width,
|
8569
|
+
[vars$s.hostMinWidth]: refs.minWidth,
|
8332
8570
|
[vars$s.hostDirection]: refs.direction,
|
8333
8571
|
[vars$s.fontSize]: refs.fontSize,
|
8334
8572
|
[vars$s.fontFamily]: refs.fontFamily,
|
8335
8573
|
[vars$s.labelTextColor]: refs.labelTextColor,
|
8336
8574
|
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
8337
|
-
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
8338
|
-
[vars$s.inputHeight]: refs.inputHeight,
|
8339
|
-
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
8340
|
-
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
8341
8575
|
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
8342
|
-
[vars$s.
|
8576
|
+
[vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
|
8343
8577
|
[vars$s.inputBorderWidth]: refs.borderWidth,
|
8344
8578
|
[vars$s.inputBorderStyle]: refs.borderStyle,
|
8345
8579
|
[vars$s.inputBorderColor]: refs.borderColor,
|
@@ -8348,19 +8582,21 @@ const password = {
|
|
8348
8582
|
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
8349
8583
|
[vars$s.inputOutlineColor]: refs.outlineColor,
|
8350
8584
|
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
8351
|
-
[vars$s.
|
8352
|
-
[vars$s.
|
8585
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
8586
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
8587
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
8588
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
8353
8589
|
};
|
8354
8590
|
|
8355
|
-
var
|
8591
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
8356
8592
|
__proto__: null,
|
8357
|
-
default:
|
8593
|
+
default: numberField,
|
8358
8594
|
vars: vars$s
|
8359
8595
|
});
|
8360
8596
|
|
8361
|
-
const vars$r =
|
8597
|
+
const vars$r = EmailFieldClass.cssVarList;
|
8362
8598
|
|
8363
|
-
const
|
8599
|
+
const emailField = {
|
8364
8600
|
[vars$r.hostWidth]: refs.width,
|
8365
8601
|
[vars$r.hostMinWidth]: refs.minWidth,
|
8366
8602
|
[vars$r.hostDirection]: refs.direction,
|
@@ -8369,6 +8605,7 @@ const numberField = {
|
|
8369
8605
|
[vars$r.labelTextColor]: refs.labelTextColor,
|
8370
8606
|
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
8371
8607
|
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
8608
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
8372
8609
|
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
8373
8610
|
[vars$r.inputBorderWidth]: refs.borderWidth,
|
8374
8611
|
[vars$r.inputBorderStyle]: refs.borderStyle,
|
@@ -8379,198 +8616,165 @@ const numberField = {
|
|
8379
8616
|
[vars$r.inputOutlineColor]: refs.outlineColor,
|
8380
8617
|
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
8381
8618
|
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
8382
|
-
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
8383
8619
|
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
8384
8620
|
[vars$r.inputHeight]: refs.inputHeight,
|
8385
8621
|
};
|
8386
8622
|
|
8387
|
-
var
|
8623
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
8388
8624
|
__proto__: null,
|
8389
|
-
default:
|
8625
|
+
default: emailField,
|
8390
8626
|
vars: vars$r
|
8391
8627
|
});
|
8392
8628
|
|
8393
|
-
const
|
8629
|
+
const globalRefs$f = getThemeRefs(globals);
|
8630
|
+
const vars$q = TextAreaClass.cssVarList;
|
8394
8631
|
|
8395
|
-
const
|
8632
|
+
const textArea = {
|
8396
8633
|
[vars$q.hostWidth]: refs.width,
|
8397
8634
|
[vars$q.hostMinWidth]: refs.minWidth,
|
8398
8635
|
[vars$q.hostDirection]: refs.direction,
|
8399
8636
|
[vars$q.fontSize]: refs.fontSize,
|
8400
8637
|
[vars$q.fontFamily]: refs.fontFamily,
|
8401
8638
|
[vars$q.labelTextColor]: refs.labelTextColor,
|
8639
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
8402
8640
|
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
8641
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
8403
8642
|
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
8404
|
-
[vars$q.
|
8405
|
-
[vars$q.
|
8643
|
+
[vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8644
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
8406
8645
|
[vars$q.inputBorderWidth]: refs.borderWidth,
|
8407
8646
|
[vars$q.inputBorderStyle]: refs.borderStyle,
|
8408
8647
|
[vars$q.inputBorderColor]: refs.borderColor,
|
8409
|
-
[vars$q.inputBorderRadius]: refs.borderRadius,
|
8410
8648
|
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
8411
8649
|
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
8412
8650
|
[vars$q.inputOutlineColor]: refs.outlineColor,
|
8413
8651
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
8414
|
-
[vars$q.
|
8415
|
-
[vars$q.
|
8416
|
-
|
8652
|
+
[vars$q.inputResizeType]: 'vertical',
|
8653
|
+
[vars$q.inputMinHeight]: '5em',
|
8654
|
+
|
8655
|
+
_disabled: {
|
8656
|
+
[vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
8657
|
+
},
|
8658
|
+
|
8659
|
+
_readonly: {
|
8660
|
+
[vars$q.inputResizeType]: 'none',
|
8661
|
+
},
|
8417
8662
|
};
|
8418
8663
|
|
8419
|
-
var
|
8664
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
8420
8665
|
__proto__: null,
|
8421
|
-
default:
|
8666
|
+
default: textArea,
|
8422
8667
|
vars: vars$q
|
8423
8668
|
});
|
8424
8669
|
|
8425
|
-
const
|
8426
|
-
const
|
8670
|
+
const vars$p = CheckboxClass.cssVarList;
|
8671
|
+
const checkboxSize = '1.35em';
|
8427
8672
|
|
8428
|
-
const
|
8673
|
+
const checkbox = {
|
8429
8674
|
[vars$p.hostWidth]: refs.width,
|
8430
|
-
[vars$p.hostMinWidth]: refs.minWidth,
|
8431
8675
|
[vars$p.hostDirection]: refs.direction,
|
8432
8676
|
[vars$p.fontSize]: refs.fontSize,
|
8433
8677
|
[vars$p.fontFamily]: refs.fontFamily,
|
8434
8678
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
8435
8679
|
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
8680
|
+
[vars$p.labelFontWeight]: '400',
|
8681
|
+
[vars$p.labelLineHeight]: checkboxSize,
|
8682
|
+
[vars$p.labelSpacing]: '1em',
|
8436
8683
|
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
8437
|
-
[vars$p.
|
8438
|
-
[vars$p.
|
8439
|
-
[vars$p.
|
8684
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
8685
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
8686
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
8687
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
8440
8688
|
[vars$p.inputBorderRadius]: refs.borderRadius,
|
8689
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
8441
8690
|
[vars$p.inputBorderWidth]: refs.borderWidth,
|
8442
8691
|
[vars$p.inputBorderStyle]: refs.borderStyle,
|
8443
|
-
[vars$p.
|
8444
|
-
[vars$p.
|
8445
|
-
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
8446
|
-
[vars$p.inputOutlineColor]: refs.outlineColor,
|
8447
|
-
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
8448
|
-
[vars$p.inputResizeType]: 'vertical',
|
8449
|
-
[vars$p.inputMinHeight]: '5em',
|
8692
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
8693
|
+
[vars$p.inputSize]: checkboxSize,
|
8450
8694
|
|
8451
|
-
|
8452
|
-
[vars$p.
|
8695
|
+
_checked: {
|
8696
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
8453
8697
|
},
|
8454
8698
|
|
8455
|
-
|
8456
|
-
[vars$p.
|
8699
|
+
_disabled: {
|
8700
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
8457
8701
|
},
|
8458
8702
|
};
|
8459
8703
|
|
8460
|
-
var
|
8704
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
8461
8705
|
__proto__: null,
|
8462
|
-
default:
|
8706
|
+
default: checkbox,
|
8463
8707
|
vars: vars$p
|
8464
8708
|
});
|
8465
8709
|
|
8466
|
-
const
|
8467
|
-
const
|
8710
|
+
const knobMargin = '2px';
|
8711
|
+
const checkboxHeight = '1.25em';
|
8468
8712
|
|
8469
|
-
const
|
8713
|
+
const globalRefs$e = getThemeRefs(globals);
|
8714
|
+
const vars$o = SwitchToggleClass.cssVarList;
|
8715
|
+
|
8716
|
+
const switchToggle = {
|
8470
8717
|
[vars$o.hostWidth]: refs.width,
|
8471
8718
|
[vars$o.hostDirection]: refs.direction,
|
8472
8719
|
[vars$o.fontSize]: refs.fontSize,
|
8473
8720
|
[vars$o.fontFamily]: refs.fontFamily,
|
8474
|
-
|
8475
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
8476
|
-
[vars$o.labelFontWeight]: '400',
|
8477
|
-
[vars$o.labelLineHeight]: checkboxSize,
|
8478
|
-
[vars$o.labelSpacing]: '1em',
|
8479
|
-
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
8721
|
+
|
8480
8722
|
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
8481
8723
|
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
8482
8724
|
[vars$o.inputOutlineColor]: refs.outlineColor,
|
8483
8725
|
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
8484
|
-
[vars$o.inputBorderRadius]: refs.borderRadius,
|
8485
|
-
[vars$o.inputBorderColor]: refs.borderColor,
|
8486
|
-
[vars$o.inputBorderWidth]: refs.borderWidth,
|
8487
|
-
[vars$o.inputBorderStyle]: refs.borderStyle,
|
8488
|
-
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
8489
|
-
[vars$o.inputSize]: checkboxSize,
|
8490
8726
|
|
8491
|
-
|
8492
|
-
|
8493
|
-
|
8727
|
+
[vars$o.trackBorderStyle]: refs.borderStyle,
|
8728
|
+
[vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
8729
|
+
[vars$o.trackBorderColor]: refs.borderColor,
|
8730
|
+
[vars$o.trackBackgroundColor]: 'none',
|
8731
|
+
[vars$o.trackBorderRadius]: globalRefs$e.radius.md,
|
8732
|
+
[vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
8733
|
+
[vars$o.trackHeight]: checkboxHeight,
|
8734
|
+
|
8735
|
+
[vars$o.knobSize]: `calc(1em - ${knobMargin})`,
|
8736
|
+
[vars$o.knobRadius]: '50%',
|
8737
|
+
[vars$o.knobTopOffset]: '1px',
|
8738
|
+
[vars$o.knobLeftOffset]: knobMargin,
|
8739
|
+
[vars$o.knobColor]: refs.valueTextColor,
|
8740
|
+
[vars$o.knobTransitionDuration]: '0.3s',
|
8494
8741
|
|
8495
|
-
|
8496
|
-
|
8497
|
-
|
8498
|
-
|
8499
|
-
|
8500
|
-
|
8501
|
-
__proto__: null,
|
8502
|
-
default: checkbox,
|
8503
|
-
vars: vars$o
|
8504
|
-
});
|
8505
|
-
|
8506
|
-
const knobMargin = '2px';
|
8507
|
-
const checkboxHeight = '1.25em';
|
8508
|
-
|
8509
|
-
const globalRefs$e = getThemeRefs(globals);
|
8510
|
-
const vars$n = SwitchToggleClass.cssVarList;
|
8511
|
-
|
8512
|
-
const switchToggle = {
|
8513
|
-
[vars$n.hostWidth]: refs.width,
|
8514
|
-
[vars$n.hostDirection]: refs.direction,
|
8515
|
-
[vars$n.fontSize]: refs.fontSize,
|
8516
|
-
[vars$n.fontFamily]: refs.fontFamily,
|
8517
|
-
|
8518
|
-
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
8519
|
-
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
8520
|
-
[vars$n.inputOutlineColor]: refs.outlineColor,
|
8521
|
-
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
8522
|
-
|
8523
|
-
[vars$n.trackBorderStyle]: refs.borderStyle,
|
8524
|
-
[vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
8525
|
-
[vars$n.trackBorderColor]: refs.borderColor,
|
8526
|
-
[vars$n.trackBackgroundColor]: 'none',
|
8527
|
-
[vars$n.trackBorderRadius]: globalRefs$e.radius.md,
|
8528
|
-
[vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
8529
|
-
[vars$n.trackHeight]: checkboxHeight,
|
8530
|
-
|
8531
|
-
[vars$n.knobSize]: `calc(1em - ${knobMargin})`,
|
8532
|
-
[vars$n.knobRadius]: '50%',
|
8533
|
-
[vars$n.knobTopOffset]: '1px',
|
8534
|
-
[vars$n.knobLeftOffset]: knobMargin,
|
8535
|
-
[vars$n.knobColor]: refs.valueTextColor,
|
8536
|
-
[vars$n.knobTransitionDuration]: '0.3s',
|
8537
|
-
|
8538
|
-
[vars$n.labelTextColor]: refs.labelTextColor,
|
8539
|
-
[vars$n.labelFontWeight]: '400',
|
8540
|
-
[vars$n.labelLineHeight]: '1.35em',
|
8541
|
-
[vars$n.labelSpacing]: '1em',
|
8542
|
-
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
8543
|
-
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
8742
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
8743
|
+
[vars$o.labelFontWeight]: '400',
|
8744
|
+
[vars$o.labelLineHeight]: '1.35em',
|
8745
|
+
[vars$o.labelSpacing]: '1em',
|
8746
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
8747
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
8544
8748
|
|
8545
8749
|
_checked: {
|
8546
|
-
[vars$
|
8547
|
-
[vars$
|
8548
|
-
[vars$
|
8549
|
-
[vars$
|
8550
|
-
[vars$
|
8750
|
+
[vars$o.trackBorderColor]: refs.borderColor,
|
8751
|
+
[vars$o.trackBackgroundColor]: refs.backgroundColor,
|
8752
|
+
[vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
|
8753
|
+
[vars$o.knobColor]: refs.valueTextColor,
|
8754
|
+
[vars$o.knobTextColor]: refs.valueTextColor,
|
8551
8755
|
},
|
8552
8756
|
|
8553
8757
|
_disabled: {
|
8554
|
-
[vars$
|
8555
|
-
[vars$
|
8556
|
-
[vars$
|
8557
|
-
[vars$
|
8758
|
+
[vars$o.knobColor]: globalRefs$e.colors.surface.light,
|
8759
|
+
[vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
|
8760
|
+
[vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8761
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
8558
8762
|
_checked: {
|
8559
|
-
[vars$
|
8560
|
-
[vars$
|
8763
|
+
[vars$o.knobColor]: globalRefs$e.colors.surface.light,
|
8764
|
+
[vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8561
8765
|
},
|
8562
8766
|
},
|
8563
8767
|
|
8564
8768
|
_invalid: {
|
8565
|
-
[vars$
|
8566
|
-
[vars$
|
8769
|
+
[vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
|
8770
|
+
[vars$o.knobColor]: globalRefs$e.colors.error.main,
|
8567
8771
|
},
|
8568
8772
|
};
|
8569
8773
|
|
8570
8774
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
8571
8775
|
__proto__: null,
|
8572
8776
|
default: switchToggle,
|
8573
|
-
vars: vars$
|
8777
|
+
vars: vars$o
|
8574
8778
|
});
|
8575
8779
|
|
8576
8780
|
const globalRefs$d = getThemeRefs(globals);
|
@@ -8595,7 +8799,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
8595
8799
|
horizontalAlignment,
|
8596
8800
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
8597
8801
|
},
|
8598
|
-
componentName$
|
8802
|
+
componentName$A
|
8599
8803
|
);
|
8600
8804
|
|
8601
8805
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -8680,7 +8884,7 @@ const container = {
|
|
8680
8884
|
},
|
8681
8885
|
};
|
8682
8886
|
|
8683
|
-
const vars$
|
8887
|
+
const vars$n = {
|
8684
8888
|
...compVars$3,
|
8685
8889
|
...helperVars$2,
|
8686
8890
|
};
|
@@ -8688,154 +8892,154 @@ const vars$m = {
|
|
8688
8892
|
var container$1 = /*#__PURE__*/Object.freeze({
|
8689
8893
|
__proto__: null,
|
8690
8894
|
default: container,
|
8691
|
-
vars: vars$
|
8895
|
+
vars: vars$n
|
8692
8896
|
});
|
8693
8897
|
|
8694
|
-
const vars$
|
8898
|
+
const vars$m = LogoClass.cssVarList;
|
8695
8899
|
|
8696
8900
|
const logo$1 = {
|
8697
|
-
[vars$
|
8901
|
+
[vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
8698
8902
|
};
|
8699
8903
|
|
8700
8904
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
8701
8905
|
__proto__: null,
|
8702
8906
|
default: logo$1,
|
8703
|
-
vars: vars$
|
8907
|
+
vars: vars$m
|
8704
8908
|
});
|
8705
8909
|
|
8706
|
-
const vars$
|
8910
|
+
const vars$l = TotpImageClass.cssVarList;
|
8707
8911
|
|
8708
8912
|
const logo = {
|
8709
|
-
[vars$
|
8913
|
+
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
8710
8914
|
};
|
8711
8915
|
|
8712
8916
|
var totpImage = /*#__PURE__*/Object.freeze({
|
8713
8917
|
__proto__: null,
|
8714
8918
|
default: logo,
|
8715
|
-
vars: vars$
|
8919
|
+
vars: vars$l
|
8716
8920
|
});
|
8717
8921
|
|
8718
8922
|
const globalRefs$c = getThemeRefs(globals);
|
8719
|
-
const vars$
|
8923
|
+
const vars$k = TextClass.cssVarList;
|
8720
8924
|
|
8721
8925
|
const text = {
|
8722
|
-
[vars$
|
8723
|
-
[vars$
|
8724
|
-
[vars$
|
8725
|
-
[vars$
|
8926
|
+
[vars$k.hostDirection]: globalRefs$c.direction,
|
8927
|
+
[vars$k.textLineHeight]: '1.35em',
|
8928
|
+
[vars$k.textAlign]: 'left',
|
8929
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.dark,
|
8726
8930
|
variant: {
|
8727
8931
|
h1: {
|
8728
|
-
[vars$
|
8729
|
-
[vars$
|
8730
|
-
[vars$
|
8932
|
+
[vars$k.fontSize]: globalRefs$c.typography.h1.size,
|
8933
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
|
8934
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h1.font,
|
8731
8935
|
},
|
8732
8936
|
h2: {
|
8733
|
-
[vars$
|
8734
|
-
[vars$
|
8735
|
-
[vars$
|
8937
|
+
[vars$k.fontSize]: globalRefs$c.typography.h2.size,
|
8938
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
|
8939
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h2.font,
|
8736
8940
|
},
|
8737
8941
|
h3: {
|
8738
|
-
[vars$
|
8739
|
-
[vars$
|
8740
|
-
[vars$
|
8942
|
+
[vars$k.fontSize]: globalRefs$c.typography.h3.size,
|
8943
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
|
8944
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h3.font,
|
8741
8945
|
},
|
8742
8946
|
subtitle1: {
|
8743
|
-
[vars$
|
8744
|
-
[vars$
|
8745
|
-
[vars$
|
8947
|
+
[vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
|
8948
|
+
[vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
|
8949
|
+
[vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
|
8746
8950
|
},
|
8747
8951
|
subtitle2: {
|
8748
|
-
[vars$
|
8749
|
-
[vars$
|
8750
|
-
[vars$
|
8952
|
+
[vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
|
8953
|
+
[vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
|
8954
|
+
[vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
|
8751
8955
|
},
|
8752
8956
|
body1: {
|
8753
|
-
[vars$
|
8754
|
-
[vars$
|
8755
|
-
[vars$
|
8957
|
+
[vars$k.fontSize]: globalRefs$c.typography.body1.size,
|
8958
|
+
[vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
|
8959
|
+
[vars$k.fontFamily]: globalRefs$c.typography.body1.font,
|
8756
8960
|
},
|
8757
8961
|
body2: {
|
8758
|
-
[vars$
|
8759
|
-
[vars$
|
8760
|
-
[vars$
|
8962
|
+
[vars$k.fontSize]: globalRefs$c.typography.body2.size,
|
8963
|
+
[vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
|
8964
|
+
[vars$k.fontFamily]: globalRefs$c.typography.body2.font,
|
8761
8965
|
},
|
8762
8966
|
},
|
8763
8967
|
|
8764
8968
|
mode: {
|
8765
8969
|
primary: {
|
8766
|
-
[vars$
|
8970
|
+
[vars$k.textColor]: globalRefs$c.colors.primary.main,
|
8767
8971
|
},
|
8768
8972
|
secondary: {
|
8769
|
-
[vars$
|
8973
|
+
[vars$k.textColor]: globalRefs$c.colors.secondary.main,
|
8770
8974
|
},
|
8771
8975
|
error: {
|
8772
|
-
[vars$
|
8976
|
+
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
8773
8977
|
},
|
8774
8978
|
success: {
|
8775
|
-
[vars$
|
8979
|
+
[vars$k.textColor]: globalRefs$c.colors.success.main,
|
8776
8980
|
},
|
8777
8981
|
},
|
8778
8982
|
|
8779
8983
|
textAlign: {
|
8780
|
-
right: { [vars$
|
8781
|
-
left: { [vars$
|
8782
|
-
center: { [vars$
|
8984
|
+
right: { [vars$k.textAlign]: 'right' },
|
8985
|
+
left: { [vars$k.textAlign]: 'left' },
|
8986
|
+
center: { [vars$k.textAlign]: 'center' },
|
8783
8987
|
},
|
8784
8988
|
|
8785
8989
|
_fullWidth: {
|
8786
|
-
[vars$
|
8990
|
+
[vars$k.hostWidth]: '100%',
|
8787
8991
|
},
|
8788
8992
|
|
8789
8993
|
_italic: {
|
8790
|
-
[vars$
|
8994
|
+
[vars$k.fontStyle]: 'italic',
|
8791
8995
|
},
|
8792
8996
|
|
8793
8997
|
_uppercase: {
|
8794
|
-
[vars$
|
8998
|
+
[vars$k.textTransform]: 'uppercase',
|
8795
8999
|
},
|
8796
9000
|
|
8797
9001
|
_lowercase: {
|
8798
|
-
[vars$
|
9002
|
+
[vars$k.textTransform]: 'lowercase',
|
8799
9003
|
},
|
8800
9004
|
};
|
8801
9005
|
|
8802
9006
|
var text$1 = /*#__PURE__*/Object.freeze({
|
8803
9007
|
__proto__: null,
|
8804
9008
|
default: text,
|
8805
|
-
vars: vars$
|
9009
|
+
vars: vars$k
|
8806
9010
|
});
|
8807
9011
|
|
8808
9012
|
const globalRefs$b = getThemeRefs(globals);
|
8809
|
-
const vars$
|
9013
|
+
const vars$j = LinkClass.cssVarList;
|
8810
9014
|
|
8811
9015
|
const link = {
|
8812
|
-
[vars$
|
8813
|
-
[vars$
|
9016
|
+
[vars$j.hostDirection]: globalRefs$b.direction,
|
9017
|
+
[vars$j.cursor]: 'pointer',
|
8814
9018
|
|
8815
|
-
[vars$
|
9019
|
+
[vars$j.textColor]: globalRefs$b.colors.primary.main,
|
8816
9020
|
|
8817
9021
|
textAlign: {
|
8818
|
-
right: { [vars$
|
8819
|
-
left: { [vars$
|
8820
|
-
center: { [vars$
|
9022
|
+
right: { [vars$j.textAlign]: 'right' },
|
9023
|
+
left: { [vars$j.textAlign]: 'left' },
|
9024
|
+
center: { [vars$j.textAlign]: 'center' },
|
8821
9025
|
},
|
8822
9026
|
|
8823
9027
|
_fullWidth: {
|
8824
|
-
[vars$
|
9028
|
+
[vars$j.hostWidth]: '100%',
|
8825
9029
|
},
|
8826
9030
|
|
8827
9031
|
mode: {
|
8828
9032
|
primary: {
|
8829
|
-
[vars$
|
9033
|
+
[vars$j.textColor]: globalRefs$b.colors.primary.main,
|
8830
9034
|
},
|
8831
9035
|
secondary: {
|
8832
|
-
[vars$
|
9036
|
+
[vars$j.textColor]: globalRefs$b.colors.secondary.main,
|
8833
9037
|
},
|
8834
9038
|
error: {
|
8835
|
-
[vars$
|
9039
|
+
[vars$j.textColor]: globalRefs$b.colors.error.main,
|
8836
9040
|
},
|
8837
9041
|
success: {
|
8838
|
-
[vars$
|
9042
|
+
[vars$j.textColor]: globalRefs$b.colors.success.main,
|
8839
9043
|
},
|
8840
9044
|
},
|
8841
9045
|
};
|
@@ -8843,7 +9047,7 @@ const link = {
|
|
8843
9047
|
var link$1 = /*#__PURE__*/Object.freeze({
|
8844
9048
|
__proto__: null,
|
8845
9049
|
default: link,
|
8846
|
-
vars: vars$
|
9050
|
+
vars: vars$j
|
8847
9051
|
});
|
8848
9052
|
|
8849
9053
|
const globalRefs$a = getThemeRefs(globals);
|
@@ -8854,7 +9058,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
8854
9058
|
thickness: '2px',
|
8855
9059
|
spacing: '10px',
|
8856
9060
|
},
|
8857
|
-
componentName$
|
9061
|
+
componentName$y
|
8858
9062
|
);
|
8859
9063
|
|
8860
9064
|
const divider = {
|
@@ -8885,7 +9089,7 @@ const divider = {
|
|
8885
9089
|
},
|
8886
9090
|
};
|
8887
9091
|
|
8888
|
-
const vars$
|
9092
|
+
const vars$i = {
|
8889
9093
|
...compVars$2,
|
8890
9094
|
...helperVars$1,
|
8891
9095
|
};
|
@@ -8893,93 +9097,93 @@ const vars$h = {
|
|
8893
9097
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
8894
9098
|
__proto__: null,
|
8895
9099
|
default: divider,
|
8896
|
-
vars: vars$
|
9100
|
+
vars: vars$i
|
8897
9101
|
});
|
8898
9102
|
|
8899
|
-
const vars$
|
9103
|
+
const vars$h = PasscodeClass.cssVarList;
|
8900
9104
|
|
8901
9105
|
const passcode = {
|
8902
|
-
[vars$
|
8903
|
-
[vars$
|
8904
|
-
[vars$
|
8905
|
-
[vars$
|
8906
|
-
[vars$
|
8907
|
-
[vars$
|
8908
|
-
[vars$
|
8909
|
-
[vars$
|
8910
|
-
[vars$
|
8911
|
-
[vars$
|
8912
|
-
[vars$
|
8913
|
-
[vars$
|
8914
|
-
[vars$
|
8915
|
-
[vars$
|
8916
|
-
[vars$
|
9106
|
+
[vars$h.hostDirection]: refs.direction,
|
9107
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
9108
|
+
[vars$h.fontSize]: refs.fontSize,
|
9109
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
9110
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
9111
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
9112
|
+
[vars$h.digitValueTextColor]: refs.valueTextColor,
|
9113
|
+
[vars$h.digitPadding]: '0',
|
9114
|
+
[vars$h.digitTextAlign]: 'center',
|
9115
|
+
[vars$h.digitSpacing]: '4px',
|
9116
|
+
[vars$h.hostWidth]: refs.width,
|
9117
|
+
[vars$h.digitOutlineColor]: 'transparent',
|
9118
|
+
[vars$h.digitOutlineWidth]: refs.outlineWidth,
|
9119
|
+
[vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
9120
|
+
[vars$h.digitSize]: refs.inputHeight,
|
8917
9121
|
|
8918
9122
|
size: {
|
8919
|
-
xs: { [vars$
|
8920
|
-
sm: { [vars$
|
8921
|
-
md: { [vars$
|
8922
|
-
lg: { [vars$
|
9123
|
+
xs: { [vars$h.spinnerSize]: '15px' },
|
9124
|
+
sm: { [vars$h.spinnerSize]: '20px' },
|
9125
|
+
md: { [vars$h.spinnerSize]: '20px' },
|
9126
|
+
lg: { [vars$h.spinnerSize]: '20px' },
|
8923
9127
|
},
|
8924
9128
|
|
8925
9129
|
_hideCursor: {
|
8926
|
-
[vars$
|
9130
|
+
[vars$h.digitCaretTextColor]: 'transparent',
|
8927
9131
|
},
|
8928
9132
|
|
8929
9133
|
_loading: {
|
8930
|
-
[vars$
|
9134
|
+
[vars$h.overlayOpacity]: refs.overlayOpacity,
|
8931
9135
|
},
|
8932
9136
|
};
|
8933
9137
|
|
8934
9138
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8935
9139
|
__proto__: null,
|
8936
9140
|
default: passcode,
|
8937
|
-
vars: vars$
|
9141
|
+
vars: vars$h
|
8938
9142
|
});
|
8939
9143
|
|
8940
9144
|
const globalRefs$9 = getThemeRefs(globals);
|
8941
|
-
const vars$
|
9145
|
+
const vars$g = LoaderLinearClass.cssVarList;
|
8942
9146
|
|
8943
9147
|
const loaderLinear = {
|
8944
|
-
[vars$
|
8945
|
-
[vars$
|
9148
|
+
[vars$g.hostDisplay]: 'inline-block',
|
9149
|
+
[vars$g.hostWidth]: '100%',
|
8946
9150
|
|
8947
|
-
[vars$
|
8948
|
-
[vars$
|
9151
|
+
[vars$g.barColor]: globalRefs$9.colors.surface.contrast,
|
9152
|
+
[vars$g.barWidth]: '20%',
|
8949
9153
|
|
8950
|
-
[vars$
|
8951
|
-
[vars$
|
9154
|
+
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
|
9155
|
+
[vars$g.barBorderRadius]: '4px',
|
8952
9156
|
|
8953
|
-
[vars$
|
8954
|
-
[vars$
|
8955
|
-
[vars$
|
8956
|
-
[vars$
|
9157
|
+
[vars$g.animationDuration]: '2s',
|
9158
|
+
[vars$g.animationTimingFunction]: 'linear',
|
9159
|
+
[vars$g.animationIterationCount]: 'infinite',
|
9160
|
+
[vars$g.verticalPadding]: '0.25em',
|
8957
9161
|
|
8958
9162
|
size: {
|
8959
|
-
xs: { [vars$
|
8960
|
-
sm: { [vars$
|
8961
|
-
md: { [vars$
|
8962
|
-
lg: { [vars$
|
9163
|
+
xs: { [vars$g.barHeight]: '2px' },
|
9164
|
+
sm: { [vars$g.barHeight]: '4px' },
|
9165
|
+
md: { [vars$g.barHeight]: '6px' },
|
9166
|
+
lg: { [vars$g.barHeight]: '8px' },
|
8963
9167
|
},
|
8964
9168
|
|
8965
9169
|
mode: {
|
8966
9170
|
primary: {
|
8967
|
-
[vars$
|
9171
|
+
[vars$g.barColor]: globalRefs$9.colors.primary.main,
|
8968
9172
|
},
|
8969
9173
|
secondary: {
|
8970
|
-
[vars$
|
9174
|
+
[vars$g.barColor]: globalRefs$9.colors.secondary.main,
|
8971
9175
|
},
|
8972
9176
|
},
|
8973
9177
|
|
8974
9178
|
_hidden: {
|
8975
|
-
[vars$
|
9179
|
+
[vars$g.hostDisplay]: 'none',
|
8976
9180
|
},
|
8977
9181
|
};
|
8978
9182
|
|
8979
9183
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8980
9184
|
__proto__: null,
|
8981
9185
|
default: loaderLinear,
|
8982
|
-
vars: vars$
|
9186
|
+
vars: vars$g
|
8983
9187
|
});
|
8984
9188
|
|
8985
9189
|
const globalRefs$8 = getThemeRefs(globals);
|
@@ -8997,7 +9201,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
8997
9201
|
},
|
8998
9202
|
},
|
8999
9203
|
},
|
9000
|
-
componentName$
|
9204
|
+
componentName$B
|
9001
9205
|
);
|
9002
9206
|
|
9003
9207
|
const loaderRadial = {
|
@@ -9026,7 +9230,7 @@ const loaderRadial = {
|
|
9026
9230
|
[compVars$1.hostDisplay]: 'none',
|
9027
9231
|
},
|
9028
9232
|
};
|
9029
|
-
const vars$
|
9233
|
+
const vars$f = {
|
9030
9234
|
...compVars$1,
|
9031
9235
|
...helperVars,
|
9032
9236
|
};
|
@@ -9034,76 +9238,112 @@ const vars$e = {
|
|
9034
9238
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
9035
9239
|
__proto__: null,
|
9036
9240
|
default: loaderRadial,
|
9037
|
-
vars: vars$
|
9241
|
+
vars: vars$f
|
9038
9242
|
});
|
9039
9243
|
|
9040
9244
|
const globalRefs$7 = getThemeRefs(globals);
|
9041
|
-
const vars$
|
9245
|
+
const vars$e = ComboBoxClass.cssVarList;
|
9042
9246
|
|
9043
9247
|
const comboBox = {
|
9044
|
-
[vars$
|
9045
|
-
[vars$
|
9046
|
-
[vars$
|
9047
|
-
[vars$
|
9048
|
-
[vars$
|
9049
|
-
[vars$
|
9050
|
-
[vars$
|
9051
|
-
[vars$
|
9052
|
-
[vars$
|
9053
|
-
[vars$
|
9054
|
-
[vars$
|
9055
|
-
[vars$
|
9056
|
-
[vars$
|
9057
|
-
[vars$
|
9058
|
-
[vars$
|
9059
|
-
[vars$
|
9060
|
-
[vars$
|
9061
|
-
[vars$
|
9062
|
-
[vars$
|
9063
|
-
[vars$
|
9064
|
-
[vars$
|
9065
|
-
[vars$
|
9066
|
-
[vars$
|
9067
|
-
[vars$
|
9068
|
-
[vars$
|
9069
|
-
[vars$
|
9248
|
+
[vars$e.hostWidth]: refs.width,
|
9249
|
+
[vars$e.hostDirection]: refs.direction,
|
9250
|
+
[vars$e.fontSize]: refs.fontSize,
|
9251
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
9252
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
9253
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
9254
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
9255
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
9256
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
9257
|
+
[vars$e.inputBorderRadius]: refs.borderRadius,
|
9258
|
+
[vars$e.inputOutlineColor]: refs.outlineColor,
|
9259
|
+
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
9260
|
+
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
9261
|
+
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
9262
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
9263
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
9264
|
+
[vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9265
|
+
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
9266
|
+
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
9267
|
+
[vars$e.inputHeight]: refs.inputHeight,
|
9268
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
|
9269
|
+
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
9270
|
+
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9271
|
+
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
9272
|
+
[vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
|
9273
|
+
[vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
|
9070
9274
|
|
9071
9275
|
_readonly: {
|
9072
|
-
[vars$
|
9276
|
+
[vars$e.inputDropdownButtonCursor]: 'default',
|
9073
9277
|
},
|
9074
9278
|
|
9075
9279
|
// Overlay theme exposed via the component:
|
9076
|
-
[vars$
|
9077
|
-
[vars$
|
9078
|
-
[vars$
|
9079
|
-
[vars$
|
9280
|
+
[vars$e.overlayFontSize]: refs.fontSize,
|
9281
|
+
[vars$e.overlayFontFamily]: refs.fontFamily,
|
9282
|
+
[vars$e.overlayCursor]: 'pointer',
|
9283
|
+
[vars$e.overlayItemBoxShadow]: 'none',
|
9080
9284
|
|
9081
9285
|
// Overlay direct theme:
|
9082
|
-
[vars$
|
9083
|
-
[vars$
|
9286
|
+
[vars$e.overlay.minHeight]: '400px',
|
9287
|
+
[vars$e.overlay.margin]: '0',
|
9084
9288
|
};
|
9085
9289
|
|
9086
9290
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
9087
9291
|
__proto__: null,
|
9088
9292
|
comboBox: comboBox,
|
9089
9293
|
default: comboBox,
|
9090
|
-
vars: vars$
|
9294
|
+
vars: vars$e
|
9091
9295
|
});
|
9092
9296
|
|
9093
|
-
const vars$
|
9297
|
+
const vars$d = ImageClass.cssVarList;
|
9094
9298
|
|
9095
9299
|
const image = {};
|
9096
9300
|
|
9097
9301
|
var image$1 = /*#__PURE__*/Object.freeze({
|
9098
9302
|
__proto__: null,
|
9099
9303
|
default: image,
|
9100
|
-
vars: vars$
|
9304
|
+
vars: vars$d
|
9101
9305
|
});
|
9102
9306
|
|
9103
|
-
const vars$
|
9307
|
+
const vars$c = PhoneFieldClass.cssVarList;
|
9104
9308
|
|
9105
9309
|
const phoneField = {
|
9106
|
-
[vars$
|
9310
|
+
[vars$c.hostWidth]: refs.width,
|
9311
|
+
[vars$c.hostDirection]: refs.direction,
|
9312
|
+
[vars$c.fontSize]: refs.fontSize,
|
9313
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
9314
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
9315
|
+
[vars$c.labelRequiredIndicator]: refs.requiredIndicator,
|
9316
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
9317
|
+
[vars$c.inputValueTextColor]: refs.valueTextColor,
|
9318
|
+
[vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9319
|
+
[vars$c.inputBorderStyle]: refs.borderStyle,
|
9320
|
+
[vars$c.inputBorderWidth]: refs.borderWidth,
|
9321
|
+
[vars$c.inputBorderColor]: refs.borderColor,
|
9322
|
+
[vars$c.inputBorderRadius]: refs.borderRadius,
|
9323
|
+
[vars$c.inputOutlineStyle]: refs.outlineStyle,
|
9324
|
+
[vars$c.inputOutlineWidth]: refs.outlineWidth,
|
9325
|
+
[vars$c.inputOutlineColor]: refs.outlineColor,
|
9326
|
+
[vars$c.inputOutlineOffset]: refs.outlineOffset,
|
9327
|
+
[vars$c.phoneInputWidth]: refs.minWidth,
|
9328
|
+
[vars$c.countryCodeInputWidth]: '5em',
|
9329
|
+
[vars$c.countryCodeDropdownWidth]: '20em',
|
9330
|
+
|
9331
|
+
// '@overlay': {
|
9332
|
+
// overlayItemBackgroundColor: 'red'
|
9333
|
+
// }
|
9334
|
+
};
|
9335
|
+
|
9336
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
9337
|
+
__proto__: null,
|
9338
|
+
default: phoneField,
|
9339
|
+
vars: vars$c
|
9340
|
+
});
|
9341
|
+
|
9342
|
+
const vars$b = PhoneFieldInputBoxClass.cssVarList;
|
9343
|
+
|
9344
|
+
const phoneInputBoxField = {
|
9345
|
+
[vars$b.hostWidth]: '16em',
|
9346
|
+
[vars$b.hostMinWidth]: refs.minWidth,
|
9107
9347
|
[vars$b.hostDirection]: refs.direction,
|
9108
9348
|
[vars$b.fontSize]: refs.fontSize,
|
9109
9349
|
[vars$b.fontFamily]: refs.fontFamily,
|
@@ -9120,190 +9360,171 @@ const phoneField = {
|
|
9120
9360
|
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
9121
9361
|
[vars$b.inputOutlineColor]: refs.outlineColor,
|
9122
9362
|
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
9123
|
-
|
9124
|
-
|
9125
|
-
|
9126
|
-
|
9127
|
-
// '@overlay': {
|
9128
|
-
// overlayItemBackgroundColor: 'red'
|
9129
|
-
// }
|
9363
|
+
_fullWidth: {
|
9364
|
+
[vars$b.hostWidth]: refs.width,
|
9365
|
+
},
|
9130
9366
|
};
|
9131
9367
|
|
9132
|
-
var
|
9368
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
9133
9369
|
__proto__: null,
|
9134
|
-
default:
|
9370
|
+
default: phoneInputBoxField,
|
9135
9371
|
vars: vars$b
|
9136
9372
|
});
|
9137
9373
|
|
9138
|
-
const vars$a =
|
9374
|
+
const vars$a = NewPasswordClass.cssVarList;
|
9139
9375
|
|
9140
|
-
const
|
9141
|
-
[vars$a.hostWidth]:
|
9376
|
+
const newPassword = {
|
9377
|
+
[vars$a.hostWidth]: refs.width,
|
9142
9378
|
[vars$a.hostMinWidth]: refs.minWidth,
|
9143
9379
|
[vars$a.hostDirection]: refs.direction,
|
9144
9380
|
[vars$a.fontSize]: refs.fontSize,
|
9145
9381
|
[vars$a.fontFamily]: refs.fontFamily,
|
9146
|
-
[vars$a.
|
9147
|
-
[vars$a.labelRequiredIndicator]: refs.requiredIndicator,
|
9382
|
+
[vars$a.spaceBetweenInputs]: '1em',
|
9148
9383
|
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
9149
|
-
[vars$a.inputValueTextColor]: refs.valueTextColor,
|
9150
|
-
[vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9151
|
-
[vars$a.inputBorderStyle]: refs.borderStyle,
|
9152
|
-
[vars$a.inputBorderWidth]: refs.borderWidth,
|
9153
|
-
[vars$a.inputBorderColor]: refs.borderColor,
|
9154
|
-
[vars$a.inputBorderRadius]: refs.borderRadius,
|
9155
|
-
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
9156
|
-
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
9157
|
-
[vars$a.inputOutlineColor]: refs.outlineColor,
|
9158
|
-
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
9159
|
-
_fullWidth: {
|
9160
|
-
[vars$a.hostWidth]: refs.width,
|
9161
|
-
},
|
9162
|
-
};
|
9163
|
-
|
9164
|
-
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
9165
|
-
__proto__: null,
|
9166
|
-
default: phoneInputBoxField,
|
9167
|
-
vars: vars$a
|
9168
|
-
});
|
9169
|
-
|
9170
|
-
const vars$9 = NewPasswordClass.cssVarList;
|
9171
|
-
|
9172
|
-
const newPassword = {
|
9173
|
-
[vars$9.hostWidth]: refs.width,
|
9174
|
-
[vars$9.hostMinWidth]: refs.minWidth,
|
9175
|
-
[vars$9.hostDirection]: refs.direction,
|
9176
|
-
[vars$9.fontSize]: refs.fontSize,
|
9177
|
-
[vars$9.fontFamily]: refs.fontFamily,
|
9178
|
-
[vars$9.spaceBetweenInputs]: '1em',
|
9179
|
-
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
9180
9384
|
|
9181
9385
|
_required: {
|
9182
9386
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
9183
9387
|
// That's why we fake the required indicator on each input.
|
9184
9388
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
9185
|
-
[vars$
|
9389
|
+
[vars$a.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
9186
9390
|
},
|
9187
9391
|
};
|
9188
9392
|
|
9189
9393
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
9190
9394
|
__proto__: null,
|
9191
9395
|
default: newPassword,
|
9192
|
-
vars: vars$
|
9396
|
+
vars: vars$a
|
9193
9397
|
});
|
9194
9398
|
|
9195
|
-
const vars$
|
9399
|
+
const vars$9 = UploadFileClass.cssVarList;
|
9196
9400
|
|
9197
9401
|
const uploadFile = {
|
9198
|
-
[vars$
|
9199
|
-
[vars$
|
9200
|
-
[vars$
|
9402
|
+
[vars$9.hostDirection]: refs.direction,
|
9403
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
9404
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
9201
9405
|
|
9202
|
-
[vars$
|
9406
|
+
[vars$9.iconSize]: '2em',
|
9203
9407
|
|
9204
|
-
[vars$
|
9205
|
-
[vars$
|
9408
|
+
[vars$9.hostPadding]: '0.75em',
|
9409
|
+
[vars$9.gap]: '0.5em',
|
9206
9410
|
|
9207
|
-
[vars$
|
9208
|
-
[vars$
|
9209
|
-
[vars$
|
9411
|
+
[vars$9.fontSize]: '16px',
|
9412
|
+
[vars$9.titleFontWeight]: '500',
|
9413
|
+
[vars$9.lineHeight]: '1em',
|
9210
9414
|
|
9211
|
-
[vars$
|
9212
|
-
[vars$
|
9213
|
-
[vars$
|
9214
|
-
[vars$
|
9415
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
9416
|
+
[vars$9.borderColor]: refs.borderColor,
|
9417
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
9418
|
+
[vars$9.borderStyle]: 'dashed',
|
9215
9419
|
|
9216
9420
|
_required: {
|
9217
|
-
[vars$
|
9421
|
+
[vars$9.requiredIndicator]: refs.requiredIndicator,
|
9218
9422
|
},
|
9219
9423
|
|
9220
9424
|
size: {
|
9221
9425
|
xs: {
|
9222
|
-
[vars$
|
9223
|
-
[vars$
|
9224
|
-
[vars$
|
9225
|
-
[vars$
|
9226
|
-
[vars$
|
9426
|
+
[vars$9.hostHeight]: '196px',
|
9427
|
+
[vars$9.hostWidth]: '200px',
|
9428
|
+
[vars$9.titleFontSize]: '0.875em',
|
9429
|
+
[vars$9.descriptionFontSize]: '0.875em',
|
9430
|
+
[vars$9.lineHeight]: '1.25em',
|
9227
9431
|
},
|
9228
9432
|
sm: {
|
9229
|
-
[vars$
|
9230
|
-
[vars$
|
9231
|
-
[vars$
|
9232
|
-
[vars$
|
9233
|
-
[vars$
|
9433
|
+
[vars$9.hostHeight]: '216px',
|
9434
|
+
[vars$9.hostWidth]: '230px',
|
9435
|
+
[vars$9.titleFontSize]: '1em',
|
9436
|
+
[vars$9.descriptionFontSize]: '0.875em',
|
9437
|
+
[vars$9.lineHeight]: '1.25em',
|
9234
9438
|
},
|
9235
9439
|
md: {
|
9236
|
-
[vars$
|
9237
|
-
[vars$
|
9238
|
-
[vars$
|
9239
|
-
[vars$
|
9240
|
-
[vars$
|
9440
|
+
[vars$9.hostHeight]: '256px',
|
9441
|
+
[vars$9.hostWidth]: '312px',
|
9442
|
+
[vars$9.titleFontSize]: '1.125em',
|
9443
|
+
[vars$9.descriptionFontSize]: '1em',
|
9444
|
+
[vars$9.lineHeight]: '1.5em',
|
9241
9445
|
},
|
9242
9446
|
lg: {
|
9243
|
-
[vars$
|
9244
|
-
[vars$
|
9245
|
-
[vars$
|
9246
|
-
[vars$
|
9247
|
-
[vars$
|
9447
|
+
[vars$9.hostHeight]: '280px',
|
9448
|
+
[vars$9.hostWidth]: '336px',
|
9449
|
+
[vars$9.titleFontSize]: '1.125em',
|
9450
|
+
[vars$9.descriptionFontSize]: '1.125em',
|
9451
|
+
[vars$9.lineHeight]: '1.75em',
|
9248
9452
|
},
|
9249
9453
|
},
|
9250
9454
|
|
9251
9455
|
_fullWidth: {
|
9252
|
-
[vars$
|
9456
|
+
[vars$9.hostWidth]: refs.width,
|
9253
9457
|
},
|
9254
9458
|
};
|
9255
9459
|
|
9256
9460
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
9257
9461
|
__proto__: null,
|
9258
9462
|
default: uploadFile,
|
9259
|
-
vars: vars$
|
9463
|
+
vars: vars$9
|
9260
9464
|
});
|
9261
9465
|
|
9262
9466
|
const globalRefs$6 = getThemeRefs(globals);
|
9263
9467
|
|
9264
|
-
const vars$
|
9468
|
+
const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
|
9265
9469
|
|
9266
9470
|
const buttonSelectionGroupItem = {
|
9267
|
-
[vars$
|
9268
|
-
[vars$
|
9269
|
-
[vars$
|
9270
|
-
[vars$
|
9271
|
-
[vars$
|
9272
|
-
[vars$
|
9471
|
+
[vars$8.hostDirection]: 'inherit',
|
9472
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
|
9473
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
9474
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.main,
|
9475
|
+
[vars$8.borderStyle]: 'solid',
|
9476
|
+
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
9273
9477
|
|
9274
9478
|
_hover: {
|
9275
|
-
[vars$
|
9479
|
+
[vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
9276
9480
|
},
|
9277
9481
|
|
9278
9482
|
_selected: {
|
9279
|
-
[vars$
|
9280
|
-
[vars$
|
9281
|
-
[vars$
|
9483
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
|
9484
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
9485
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
|
9282
9486
|
},
|
9283
9487
|
};
|
9284
9488
|
|
9285
9489
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
9286
9490
|
__proto__: null,
|
9287
9491
|
default: buttonSelectionGroupItem,
|
9288
|
-
vars: vars$
|
9492
|
+
vars: vars$8
|
9289
9493
|
});
|
9290
9494
|
|
9291
9495
|
const globalRefs$5 = getThemeRefs(globals);
|
9292
|
-
|
9496
|
+
|
9497
|
+
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
9498
|
+
[vars.hostDirection]: refs.direction,
|
9499
|
+
[vars.fontFamily]: refs.fontFamily,
|
9500
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
9501
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
9502
|
+
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
9503
|
+
[vars.itemsSpacing]: globalRefs$5.spacing.sm,
|
9504
|
+
[vars.hostWidth]: refs.width,
|
9505
|
+
});
|
9506
|
+
|
9507
|
+
const vars$7 = ButtonSelectionGroupClass.cssVarList;
|
9293
9508
|
|
9294
9509
|
const buttonSelectionGroup = {
|
9295
|
-
|
9296
|
-
[vars$6.fontFamily]: refs.fontFamily,
|
9297
|
-
[vars$6.labelTextColor]: refs.labelTextColor,
|
9298
|
-
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
9299
|
-
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
9300
|
-
[vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
|
9301
|
-
[vars$6.hostWidth]: refs.width,
|
9510
|
+
...createBaseButtonSelectionGroupMappings(vars$7),
|
9302
9511
|
};
|
9303
9512
|
|
9304
9513
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
9305
9514
|
__proto__: null,
|
9306
9515
|
default: buttonSelectionGroup,
|
9516
|
+
vars: vars$7
|
9517
|
+
});
|
9518
|
+
|
9519
|
+
const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
|
9520
|
+
|
9521
|
+
const buttonMultiSelectionGroup = {
|
9522
|
+
...createBaseButtonSelectionGroupMappings(vars$6),
|
9523
|
+
};
|
9524
|
+
|
9525
|
+
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
9526
|
+
__proto__: null,
|
9527
|
+
default: buttonMultiSelectionGroup,
|
9307
9528
|
vars: vars$6
|
9308
9529
|
});
|
9309
9530
|
|
@@ -9790,6 +10011,7 @@ const components = {
|
|
9790
10011
|
uploadFile: uploadFile$1,
|
9791
10012
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
9792
10013
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
10014
|
+
buttonMultiSelectionGroup: buttonMultiSelectionGroup$1,
|
9793
10015
|
modal: modal$1,
|
9794
10016
|
grid: grid$1,
|
9795
10017
|
notificationCard,
|
@@ -9807,7 +10029,7 @@ const vars = Object.keys(components).reduce(
|
|
9807
10029
|
);
|
9808
10030
|
|
9809
10031
|
const defaultTheme = { globals, components: theme };
|
9810
|
-
const themeVars = { globals: vars$
|
10032
|
+
const themeVars = { globals: vars$x, components: vars };
|
9811
10033
|
|
9812
|
-
export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
10034
|
+
export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
9813
10035
|
//# sourceMappingURL=index.esm.js.map
|