@descope/web-components-ui 1.0.245 → 1.0.247
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +904 -674
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +910 -677
- 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/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +2 -2
- 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/mixins/portalMixin.js +26 -15
- 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/cjs/index.cjs.js
CHANGED
@@ -499,7 +499,7 @@ const globals = {
|
|
499
499
|
fonts,
|
500
500
|
direction,
|
501
501
|
};
|
502
|
-
const vars$
|
502
|
+
const vars$x = getThemeVars(globals);
|
503
503
|
|
504
504
|
const createCssVarFallback = (first, ...rest) =>
|
505
505
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
@@ -1888,11 +1888,11 @@ const inputValidationMixin = (superclass) =>
|
|
1888
1888
|
}
|
1889
1889
|
|
1890
1890
|
get defaultErrorMsgRangeUnderflow() {
|
1891
|
-
return `At least ${this.
|
1891
|
+
return `At least ${this.getAttribute('min-items-selection')} items are required.`;
|
1892
1892
|
}
|
1893
1893
|
|
1894
1894
|
get defaultErrorMsgRangeOverflow() {
|
1895
|
-
return `At most ${this.
|
1895
|
+
return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
|
1896
1896
|
}
|
1897
1897
|
|
1898
1898
|
getErrorMessage(flags) {
|
@@ -2188,10 +2188,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
|
|
2188
2188
|
|
2189
2189
|
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
2190
2190
|
|
2191
|
-
const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
2192
|
-
|
2191
|
+
const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
|
2192
|
+
const ele = await getRootElementFn(that);
|
2193
|
+
|
2194
|
+
return new Promise((res) => {
|
2193
2195
|
const MAX_RETRIES = 20;
|
2194
|
-
const ele = getRootElementFn(that);
|
2195
2196
|
let counter = 0;
|
2196
2197
|
|
2197
2198
|
const check = () => {
|
@@ -2204,11 +2205,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
|
2204
2205
|
|
2205
2206
|
counter++;
|
2206
2207
|
|
2207
|
-
if (!ele
|
2208
|
+
if (!ele?.shadowRoot) setTimeout(check);
|
2208
2209
|
else res(ele.shadowRoot);
|
2209
2210
|
};
|
2210
2211
|
check();
|
2211
2212
|
});
|
2213
|
+
};
|
2212
2214
|
|
2213
2215
|
const portalMixin =
|
2214
2216
|
({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
|
@@ -2234,35 +2236,44 @@ const portalMixin =
|
|
2234
2236
|
|
2235
2237
|
constructor() {
|
2236
2238
|
// we cannot use "this" before calling "super"
|
2237
|
-
const getRootElement = (that) => {
|
2239
|
+
const getRootElement = async (that) => {
|
2238
2240
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
2239
|
-
|
2241
|
+
if (!selector) {
|
2242
|
+
return baseEle;
|
2243
|
+
}
|
2240
2244
|
|
2241
|
-
|
2245
|
+
// in case we have a selector, we should first wait for the base element shadow root
|
2246
|
+
// and then look for the internal element
|
2247
|
+
const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
|
2248
|
+
return baseEleShadowRoot.querySelector(selector);
|
2242
2249
|
};
|
2243
2250
|
|
2251
|
+
const getPortalElement = withWaitForShadowRoot(getRootElement);
|
2252
|
+
|
2244
2253
|
super({
|
2245
|
-
getRootElement:
|
2254
|
+
getRootElement: getPortalElement,
|
2246
2255
|
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
2247
2256
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
2248
2257
|
baseSelector: ':host',
|
2249
2258
|
});
|
2250
2259
|
|
2251
|
-
this.#portalEle =
|
2260
|
+
this.#portalEle = getPortalElement(this).then((ele) => ele.host);
|
2252
2261
|
}
|
2253
2262
|
|
2254
|
-
#handleHoverAttribute() {
|
2255
|
-
|
2263
|
+
async #handleHoverAttribute() {
|
2264
|
+
const portalEle = await this.#portalEle;
|
2265
|
+
portalEle.onmouseenter = (e) => {
|
2256
2266
|
e.target.setAttribute('hover', 'true');
|
2257
2267
|
};
|
2258
|
-
|
2268
|
+
portalEle.onmouseleave = (e) => {
|
2259
2269
|
e.target.removeAttribute('hover');
|
2260
2270
|
};
|
2261
2271
|
}
|
2262
2272
|
|
2263
|
-
init() {
|
2273
|
+
async init() {
|
2264
2274
|
super.init?.();
|
2265
|
-
|
2275
|
+
const portalEle = await this.#portalEle;
|
2276
|
+
forwardAttrs(this, portalEle, {
|
2266
2277
|
[include ? 'includeAttrs' : 'excludeAttrs']: attributes,
|
2267
2278
|
});
|
2268
2279
|
|
@@ -2374,7 +2385,7 @@ const clickableMixin = (superclass) =>
|
|
2374
2385
|
}
|
2375
2386
|
};
|
2376
2387
|
|
2377
|
-
const componentName$
|
2388
|
+
const componentName$E = getComponentName('button');
|
2378
2389
|
|
2379
2390
|
const resetStyles = `
|
2380
2391
|
:host {
|
@@ -2475,7 +2486,7 @@ const ButtonClass = compose(
|
|
2475
2486
|
}
|
2476
2487
|
`,
|
2477
2488
|
excludeAttrsSync: ['tabindex'],
|
2478
|
-
componentName: componentName$
|
2489
|
+
componentName: componentName$E,
|
2479
2490
|
})
|
2480
2491
|
);
|
2481
2492
|
|
@@ -2523,7 +2534,7 @@ const mode = {
|
|
2523
2534
|
surface: globalRefs$i.colors.surface,
|
2524
2535
|
};
|
2525
2536
|
|
2526
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2537
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
|
2527
2538
|
|
2528
2539
|
const button = {
|
2529
2540
|
...helperTheme$3,
|
@@ -2621,7 +2632,7 @@ const button = {
|
|
2621
2632
|
},
|
2622
2633
|
};
|
2623
2634
|
|
2624
|
-
const vars$
|
2635
|
+
const vars$w = {
|
2625
2636
|
...compVars$4,
|
2626
2637
|
...helperVars$3,
|
2627
2638
|
};
|
@@ -2629,7 +2640,7 @@ const vars$v = {
|
|
2629
2640
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2630
2641
|
__proto__: null,
|
2631
2642
|
default: button,
|
2632
|
-
vars: vars$
|
2643
|
+
vars: vars$w
|
2633
2644
|
});
|
2634
2645
|
|
2635
2646
|
const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
|
@@ -2816,11 +2827,11 @@ const resetInputLabelPosition = (name) => `
|
|
2816
2827
|
}
|
2817
2828
|
`;
|
2818
2829
|
|
2819
|
-
const componentName$
|
2830
|
+
const componentName$D = getComponentName('text-field');
|
2820
2831
|
|
2821
2832
|
const observedAttrs = ['type'];
|
2822
2833
|
|
2823
|
-
const customMixin$
|
2834
|
+
const customMixin$6 = (superclass) =>
|
2824
2835
|
class TextFieldClass extends superclass {
|
2825
2836
|
static get observedAttributes() {
|
2826
2837
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2847,7 +2858,7 @@ const TextFieldClass = compose(
|
|
2847
2858
|
draggableMixin,
|
2848
2859
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2849
2860
|
componentNameValidationMixin,
|
2850
|
-
customMixin$
|
2861
|
+
customMixin$6
|
2851
2862
|
)(
|
2852
2863
|
createProxy({
|
2853
2864
|
slots: ['prefix', 'suffix'],
|
@@ -2866,14 +2877,14 @@ const TextFieldClass = compose(
|
|
2866
2877
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2867
2878
|
`,
|
2868
2879
|
excludeAttrsSync: ['tabindex'],
|
2869
|
-
componentName: componentName$
|
2880
|
+
componentName: componentName$D,
|
2870
2881
|
})
|
2871
2882
|
);
|
2872
2883
|
|
2873
|
-
const componentName$
|
2884
|
+
const componentName$C = getComponentName('input-wrapper');
|
2874
2885
|
const globalRefs$h = getThemeRefs(globals);
|
2875
2886
|
|
2876
|
-
const [theme$1, refs, vars$
|
2887
|
+
const [theme$1, refs, vars$v] = createHelperVars(
|
2877
2888
|
{
|
2878
2889
|
labelTextColor: globalRefs$h.colors.surface.contrast,
|
2879
2890
|
valueTextColor: globalRefs$h.colors.surface.contrast,
|
@@ -2939,47 +2950,47 @@ const [theme$1, refs, vars$u] = createHelperVars(
|
|
2939
2950
|
backgroundColor: globalRefs$h.colors.surface.main,
|
2940
2951
|
},
|
2941
2952
|
},
|
2942
|
-
componentName$
|
2953
|
+
componentName$C
|
2943
2954
|
);
|
2944
2955
|
|
2945
2956
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
2946
2957
|
__proto__: null,
|
2947
2958
|
default: theme$1,
|
2948
2959
|
refs: refs,
|
2949
|
-
vars: vars$
|
2960
|
+
vars: vars$v
|
2950
2961
|
});
|
2951
2962
|
|
2952
|
-
const vars$
|
2963
|
+
const vars$u = TextFieldClass.cssVarList;
|
2953
2964
|
|
2954
2965
|
const textField = {
|
2955
|
-
[vars$
|
2956
|
-
[vars$
|
2957
|
-
[vars$
|
2958
|
-
[vars$
|
2959
|
-
[vars$
|
2960
|
-
[vars$
|
2961
|
-
[vars$
|
2962
|
-
[vars$
|
2963
|
-
[vars$
|
2964
|
-
[vars$
|
2965
|
-
[vars$
|
2966
|
-
[vars$
|
2967
|
-
[vars$
|
2968
|
-
[vars$
|
2969
|
-
[vars$
|
2970
|
-
[vars$
|
2971
|
-
[vars$
|
2972
|
-
[vars$
|
2973
|
-
[vars$
|
2974
|
-
[vars$
|
2975
|
-
[vars$
|
2966
|
+
[vars$u.hostWidth]: refs.width,
|
2967
|
+
[vars$u.hostMinWidth]: refs.minWidth,
|
2968
|
+
[vars$u.hostDirection]: refs.direction,
|
2969
|
+
[vars$u.fontSize]: refs.fontSize,
|
2970
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
2971
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
2972
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
2973
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
2974
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
2975
|
+
[vars$u.inputPlaceholderColor]: refs.placeholderTextColor,
|
2976
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
2977
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
2978
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
2979
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
2980
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
2981
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
2982
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
2983
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
2984
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
2985
|
+
[vars$u.inputHeight]: refs.inputHeight,
|
2986
|
+
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
2976
2987
|
};
|
2977
2988
|
|
2978
2989
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
2979
2990
|
__proto__: null,
|
2980
2991
|
default: textField,
|
2981
2992
|
textField: textField,
|
2982
|
-
vars: vars$
|
2993
|
+
vars: vars$u
|
2983
2994
|
});
|
2984
2995
|
|
2985
2996
|
const passwordDraggableMixin = (superclass) =>
|
@@ -3016,7 +3027,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
3016
3027
|
}
|
3017
3028
|
};
|
3018
3029
|
|
3019
|
-
const componentName$
|
3030
|
+
const componentName$B = getComponentName('password');
|
3020
3031
|
|
3021
3032
|
const {
|
3022
3033
|
host: host$f,
|
@@ -3147,45 +3158,45 @@ const PasswordClass = compose(
|
|
3147
3158
|
}
|
3148
3159
|
`,
|
3149
3160
|
excludeAttrsSync: ['tabindex'],
|
3150
|
-
componentName: componentName$
|
3161
|
+
componentName: componentName$B,
|
3151
3162
|
})
|
3152
3163
|
);
|
3153
3164
|
|
3154
3165
|
const globalRefs$g = getThemeRefs(globals);
|
3155
|
-
const vars$
|
3166
|
+
const vars$t = PasswordClass.cssVarList;
|
3156
3167
|
|
3157
3168
|
const password = {
|
3158
|
-
[vars$
|
3159
|
-
[vars$
|
3160
|
-
[vars$
|
3161
|
-
[vars$
|
3162
|
-
[vars$
|
3163
|
-
[vars$
|
3164
|
-
[vars$
|
3165
|
-
[vars$
|
3166
|
-
[vars$
|
3167
|
-
[vars$
|
3168
|
-
[vars$
|
3169
|
-
[vars$
|
3170
|
-
[vars$
|
3171
|
-
[vars$
|
3172
|
-
[vars$
|
3173
|
-
[vars$
|
3174
|
-
[vars$
|
3175
|
-
[vars$
|
3176
|
-
[vars$
|
3177
|
-
[vars$
|
3178
|
-
[vars$
|
3179
|
-
[vars$
|
3169
|
+
[vars$t.hostWidth]: refs.width,
|
3170
|
+
[vars$t.hostDirection]: refs.direction,
|
3171
|
+
[vars$t.fontSize]: refs.fontSize,
|
3172
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
3173
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
3174
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
3175
|
+
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
3176
|
+
[vars$t.inputHeight]: refs.inputHeight,
|
3177
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
3178
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
3179
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
3180
|
+
[vars$t.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3181
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
3182
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
3183
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
3184
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
3185
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
3186
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
3187
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
3188
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
3189
|
+
[vars$t.revealButtonOffset]: globalRefs$g.spacing.md,
|
3190
|
+
[vars$t.revealButtonSize]: refs.toggleButtonSize,
|
3180
3191
|
};
|
3181
3192
|
|
3182
3193
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3183
3194
|
__proto__: null,
|
3184
3195
|
default: password,
|
3185
|
-
vars: vars$
|
3196
|
+
vars: vars$t
|
3186
3197
|
});
|
3187
3198
|
|
3188
|
-
const componentName$
|
3199
|
+
const componentName$A = getComponentName('number-field');
|
3189
3200
|
|
3190
3201
|
const NumberFieldClass = compose(
|
3191
3202
|
createStyleMixin({
|
@@ -3211,45 +3222,45 @@ const NumberFieldClass = compose(
|
|
3211
3222
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3212
3223
|
`,
|
3213
3224
|
excludeAttrsSync: ['tabindex'],
|
3214
|
-
componentName: componentName$
|
3225
|
+
componentName: componentName$A,
|
3215
3226
|
})
|
3216
3227
|
);
|
3217
3228
|
|
3218
|
-
const vars$
|
3229
|
+
const vars$s = NumberFieldClass.cssVarList;
|
3219
3230
|
|
3220
3231
|
const numberField = {
|
3221
|
-
[vars$
|
3222
|
-
[vars$
|
3223
|
-
[vars$
|
3224
|
-
[vars$
|
3225
|
-
[vars$
|
3226
|
-
[vars$
|
3227
|
-
[vars$
|
3228
|
-
[vars$
|
3229
|
-
[vars$
|
3230
|
-
[vars$
|
3231
|
-
[vars$
|
3232
|
-
[vars$
|
3233
|
-
[vars$
|
3234
|
-
[vars$
|
3235
|
-
[vars$
|
3236
|
-
[vars$
|
3237
|
-
[vars$
|
3238
|
-
[vars$
|
3239
|
-
[vars$
|
3240
|
-
[vars$
|
3241
|
-
[vars$
|
3232
|
+
[vars$s.hostWidth]: refs.width,
|
3233
|
+
[vars$s.hostMinWidth]: refs.minWidth,
|
3234
|
+
[vars$s.hostDirection]: refs.direction,
|
3235
|
+
[vars$s.fontSize]: refs.fontSize,
|
3236
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
3237
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
3238
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
3239
|
+
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
3240
|
+
[vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
|
3241
|
+
[vars$s.inputBorderWidth]: refs.borderWidth,
|
3242
|
+
[vars$s.inputBorderStyle]: refs.borderStyle,
|
3243
|
+
[vars$s.inputBorderColor]: refs.borderColor,
|
3244
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
3245
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
3246
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
3247
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
3248
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
3249
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
3250
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
3251
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
3252
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
3242
3253
|
};
|
3243
3254
|
|
3244
3255
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3245
3256
|
__proto__: null,
|
3246
3257
|
default: numberField,
|
3247
|
-
vars: vars$
|
3258
|
+
vars: vars$s
|
3248
3259
|
});
|
3249
3260
|
|
3250
|
-
const componentName$
|
3261
|
+
const componentName$z = getComponentName('email-field');
|
3251
3262
|
|
3252
|
-
const customMixin$
|
3263
|
+
const customMixin$5 = (superclass) =>
|
3253
3264
|
class EmailFieldMixinClass extends superclass {
|
3254
3265
|
init() {
|
3255
3266
|
super.init?.();
|
@@ -3263,7 +3274,7 @@ const EmailFieldClass = compose(
|
|
3263
3274
|
draggableMixin,
|
3264
3275
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3265
3276
|
componentNameValidationMixin,
|
3266
|
-
customMixin$
|
3277
|
+
customMixin$5
|
3267
3278
|
)(
|
3268
3279
|
createProxy({
|
3269
3280
|
slots: ['', 'suffix'],
|
@@ -3282,43 +3293,43 @@ const EmailFieldClass = compose(
|
|
3282
3293
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3283
3294
|
`,
|
3284
3295
|
excludeAttrsSync: ['tabindex'],
|
3285
|
-
componentName: componentName$
|
3296
|
+
componentName: componentName$z,
|
3286
3297
|
})
|
3287
3298
|
);
|
3288
3299
|
|
3289
|
-
const vars$
|
3300
|
+
const vars$r = EmailFieldClass.cssVarList;
|
3290
3301
|
|
3291
3302
|
const emailField = {
|
3292
|
-
[vars$
|
3293
|
-
[vars$
|
3294
|
-
[vars$
|
3295
|
-
[vars$
|
3296
|
-
[vars$
|
3297
|
-
[vars$
|
3298
|
-
[vars$
|
3299
|
-
[vars$
|
3300
|
-
[vars$
|
3301
|
-
[vars$
|
3302
|
-
[vars$
|
3303
|
-
[vars$
|
3304
|
-
[vars$
|
3305
|
-
[vars$
|
3306
|
-
[vars$
|
3307
|
-
[vars$
|
3308
|
-
[vars$
|
3309
|
-
[vars$
|
3310
|
-
[vars$
|
3311
|
-
[vars$
|
3312
|
-
[vars$
|
3303
|
+
[vars$r.hostWidth]: refs.width,
|
3304
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
3305
|
+
[vars$r.hostDirection]: refs.direction,
|
3306
|
+
[vars$r.fontSize]: refs.fontSize,
|
3307
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
3308
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
3309
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
3310
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
3311
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
3312
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
3313
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
3314
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
3315
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
3316
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
3317
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
3318
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
3319
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
3320
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
3321
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
3322
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
3323
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
3313
3324
|
};
|
3314
3325
|
|
3315
3326
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3316
3327
|
__proto__: null,
|
3317
3328
|
default: emailField,
|
3318
|
-
vars: vars$
|
3329
|
+
vars: vars$r
|
3319
3330
|
});
|
3320
3331
|
|
3321
|
-
const componentName$
|
3332
|
+
const componentName$y = getComponentName('text-area');
|
3322
3333
|
|
3323
3334
|
const {
|
3324
3335
|
host: host$e,
|
@@ -3393,49 +3404,49 @@ const TextAreaClass = compose(
|
|
3393
3404
|
${resetInputCursor('vaadin-text-area')}
|
3394
3405
|
`,
|
3395
3406
|
excludeAttrsSync: ['tabindex'],
|
3396
|
-
componentName: componentName$
|
3407
|
+
componentName: componentName$y,
|
3397
3408
|
})
|
3398
3409
|
);
|
3399
3410
|
|
3400
3411
|
const globalRefs$f = getThemeRefs(globals);
|
3401
|
-
const vars$
|
3412
|
+
const vars$q = TextAreaClass.cssVarList;
|
3402
3413
|
|
3403
3414
|
const textArea = {
|
3404
|
-
[vars$
|
3405
|
-
[vars$
|
3406
|
-
[vars$
|
3407
|
-
[vars$
|
3408
|
-
[vars$
|
3409
|
-
[vars$
|
3410
|
-
[vars$
|
3411
|
-
[vars$
|
3412
|
-
[vars$
|
3413
|
-
[vars$
|
3414
|
-
[vars$
|
3415
|
-
[vars$
|
3416
|
-
[vars$
|
3417
|
-
[vars$
|
3418
|
-
[vars$
|
3419
|
-
[vars$
|
3420
|
-
[vars$
|
3421
|
-
[vars$
|
3422
|
-
[vars$
|
3423
|
-
[vars$
|
3424
|
-
[vars$
|
3415
|
+
[vars$q.hostWidth]: refs.width,
|
3416
|
+
[vars$q.hostMinWidth]: refs.minWidth,
|
3417
|
+
[vars$q.hostDirection]: refs.direction,
|
3418
|
+
[vars$q.fontSize]: refs.fontSize,
|
3419
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
3420
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
3421
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
3422
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
3423
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
3424
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
3425
|
+
[vars$q.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3426
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
3427
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
3428
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
3429
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
3430
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
3431
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
3432
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
3433
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
3434
|
+
[vars$q.inputResizeType]: 'vertical',
|
3435
|
+
[vars$q.inputMinHeight]: '5em',
|
3425
3436
|
|
3426
3437
|
_disabled: {
|
3427
|
-
[vars$
|
3438
|
+
[vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
3428
3439
|
},
|
3429
3440
|
|
3430
3441
|
_readonly: {
|
3431
|
-
[vars$
|
3442
|
+
[vars$q.inputResizeType]: 'none',
|
3432
3443
|
},
|
3433
3444
|
};
|
3434
3445
|
|
3435
3446
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3436
3447
|
__proto__: null,
|
3437
3448
|
default: textArea,
|
3438
|
-
vars: vars$
|
3449
|
+
vars: vars$q
|
3439
3450
|
});
|
3440
3451
|
|
3441
3452
|
const createBaseInputClass = (...args) =>
|
@@ -3446,9 +3457,9 @@ const createBaseInputClass = (...args) =>
|
|
3446
3457
|
inputEventsDispatchingMixin
|
3447
3458
|
)(createBaseClass(...args));
|
3448
3459
|
|
3449
|
-
const componentName$
|
3460
|
+
const componentName$x = getComponentName('boolean-field-internal');
|
3450
3461
|
|
3451
|
-
createBaseInputClass({ componentName: componentName$
|
3462
|
+
createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
|
3452
3463
|
|
3453
3464
|
const booleanFieldMixin = (superclass) =>
|
3454
3465
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3457,14 +3468,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3457
3468
|
|
3458
3469
|
const template = document.createElement('template');
|
3459
3470
|
template.innerHTML = `
|
3460
|
-
<${componentName$
|
3471
|
+
<${componentName$x}
|
3461
3472
|
tabindex="-1"
|
3462
3473
|
slot="input"
|
3463
|
-
></${componentName$
|
3474
|
+
></${componentName$x}>
|
3464
3475
|
`;
|
3465
3476
|
|
3466
3477
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3467
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3478
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$x);
|
3468
3479
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3469
3480
|
|
3470
3481
|
forwardAttrs(this, this.inputElement, {
|
@@ -3534,7 +3545,7 @@ descope-boolean-field-internal {
|
|
3534
3545
|
}
|
3535
3546
|
`;
|
3536
3547
|
|
3537
|
-
const componentName$
|
3548
|
+
const componentName$w = getComponentName('checkbox');
|
3538
3549
|
|
3539
3550
|
const {
|
3540
3551
|
host: host$d,
|
@@ -3640,51 +3651,51 @@ const CheckboxClass = compose(
|
|
3640
3651
|
}
|
3641
3652
|
`,
|
3642
3653
|
excludeAttrsSync: ['label', 'tabindex'],
|
3643
|
-
componentName: componentName$
|
3654
|
+
componentName: componentName$w,
|
3644
3655
|
})
|
3645
3656
|
);
|
3646
3657
|
|
3647
|
-
const vars$
|
3658
|
+
const vars$p = CheckboxClass.cssVarList;
|
3648
3659
|
const checkboxSize = '1.35em';
|
3649
3660
|
|
3650
3661
|
const checkbox = {
|
3651
|
-
[vars$
|
3652
|
-
[vars$
|
3653
|
-
[vars$
|
3654
|
-
[vars$
|
3655
|
-
[vars$
|
3656
|
-
[vars$
|
3657
|
-
[vars$
|
3658
|
-
[vars$
|
3659
|
-
[vars$
|
3660
|
-
[vars$
|
3661
|
-
[vars$
|
3662
|
-
[vars$
|
3663
|
-
[vars$
|
3664
|
-
[vars$
|
3665
|
-
[vars$
|
3666
|
-
[vars$
|
3667
|
-
[vars$
|
3668
|
-
[vars$
|
3669
|
-
[vars$
|
3670
|
-
[vars$
|
3662
|
+
[vars$p.hostWidth]: refs.width,
|
3663
|
+
[vars$p.hostDirection]: refs.direction,
|
3664
|
+
[vars$p.fontSize]: refs.fontSize,
|
3665
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
3666
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3667
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
3668
|
+
[vars$p.labelFontWeight]: '400',
|
3669
|
+
[vars$p.labelLineHeight]: checkboxSize,
|
3670
|
+
[vars$p.labelSpacing]: '1em',
|
3671
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
3672
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
3673
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
3674
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
3675
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
3676
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
3677
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
3678
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
3679
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
3680
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
3681
|
+
[vars$p.inputSize]: checkboxSize,
|
3671
3682
|
|
3672
3683
|
_checked: {
|
3673
|
-
[vars$
|
3684
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
3674
3685
|
},
|
3675
3686
|
|
3676
3687
|
_disabled: {
|
3677
|
-
[vars$
|
3688
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3678
3689
|
},
|
3679
3690
|
};
|
3680
3691
|
|
3681
3692
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3682
3693
|
__proto__: null,
|
3683
3694
|
default: checkbox,
|
3684
|
-
vars: vars$
|
3695
|
+
vars: vars$p
|
3685
3696
|
});
|
3686
3697
|
|
3687
|
-
const componentName$
|
3698
|
+
const componentName$v = getComponentName('switch-toggle');
|
3688
3699
|
|
3689
3700
|
const {
|
3690
3701
|
host: host$c,
|
@@ -3816,7 +3827,7 @@ const SwitchToggleClass = compose(
|
|
3816
3827
|
}
|
3817
3828
|
`,
|
3818
3829
|
excludeAttrsSync: ['label', 'tabindex'],
|
3819
|
-
componentName: componentName$
|
3830
|
+
componentName: componentName$v,
|
3820
3831
|
})
|
3821
3832
|
);
|
3822
3833
|
|
@@ -3824,75 +3835,75 @@ const knobMargin = '2px';
|
|
3824
3835
|
const checkboxHeight = '1.25em';
|
3825
3836
|
|
3826
3837
|
const globalRefs$e = getThemeRefs(globals);
|
3827
|
-
const vars$
|
3838
|
+
const vars$o = SwitchToggleClass.cssVarList;
|
3828
3839
|
|
3829
3840
|
const switchToggle = {
|
3830
|
-
[vars$
|
3831
|
-
[vars$
|
3832
|
-
[vars$
|
3833
|
-
[vars$
|
3834
|
-
|
3835
|
-
[vars$
|
3836
|
-
[vars$
|
3837
|
-
[vars$
|
3838
|
-
[vars$
|
3839
|
-
|
3840
|
-
[vars$
|
3841
|
-
[vars$
|
3842
|
-
[vars$
|
3843
|
-
[vars$
|
3844
|
-
[vars$
|
3845
|
-
[vars$
|
3846
|
-
[vars$
|
3847
|
-
|
3848
|
-
[vars$
|
3849
|
-
[vars$
|
3850
|
-
[vars$
|
3851
|
-
[vars$
|
3852
|
-
[vars$
|
3853
|
-
[vars$
|
3854
|
-
|
3855
|
-
[vars$
|
3856
|
-
[vars$
|
3857
|
-
[vars$
|
3858
|
-
[vars$
|
3859
|
-
[vars$
|
3860
|
-
[vars$
|
3841
|
+
[vars$o.hostWidth]: refs.width,
|
3842
|
+
[vars$o.hostDirection]: refs.direction,
|
3843
|
+
[vars$o.fontSize]: refs.fontSize,
|
3844
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
3845
|
+
|
3846
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
3847
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
3848
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
3849
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
3850
|
+
|
3851
|
+
[vars$o.trackBorderStyle]: refs.borderStyle,
|
3852
|
+
[vars$o.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3853
|
+
[vars$o.trackBorderColor]: refs.borderColor,
|
3854
|
+
[vars$o.trackBackgroundColor]: 'none',
|
3855
|
+
[vars$o.trackBorderRadius]: globalRefs$e.radius.md,
|
3856
|
+
[vars$o.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3857
|
+
[vars$o.trackHeight]: checkboxHeight,
|
3858
|
+
|
3859
|
+
[vars$o.knobSize]: `calc(1em - ${knobMargin})`,
|
3860
|
+
[vars$o.knobRadius]: '50%',
|
3861
|
+
[vars$o.knobTopOffset]: '1px',
|
3862
|
+
[vars$o.knobLeftOffset]: knobMargin,
|
3863
|
+
[vars$o.knobColor]: refs.valueTextColor,
|
3864
|
+
[vars$o.knobTransitionDuration]: '0.3s',
|
3865
|
+
|
3866
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
3867
|
+
[vars$o.labelFontWeight]: '400',
|
3868
|
+
[vars$o.labelLineHeight]: '1.35em',
|
3869
|
+
[vars$o.labelSpacing]: '1em',
|
3870
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
3871
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
3861
3872
|
|
3862
3873
|
_checked: {
|
3863
|
-
[vars$
|
3864
|
-
[vars$
|
3865
|
-
[vars$
|
3866
|
-
[vars$
|
3867
|
-
[vars$
|
3874
|
+
[vars$o.trackBorderColor]: refs.borderColor,
|
3875
|
+
[vars$o.trackBackgroundColor]: refs.backgroundColor,
|
3876
|
+
[vars$o.knobLeftOffset]: `calc(100% - var(${vars$o.knobSize}) - ${knobMargin})`,
|
3877
|
+
[vars$o.knobColor]: refs.valueTextColor,
|
3878
|
+
[vars$o.knobTextColor]: refs.valueTextColor,
|
3868
3879
|
},
|
3869
3880
|
|
3870
3881
|
_disabled: {
|
3871
|
-
[vars$
|
3872
|
-
[vars$
|
3873
|
-
[vars$
|
3874
|
-
[vars$
|
3882
|
+
[vars$o.knobColor]: globalRefs$e.colors.surface.light,
|
3883
|
+
[vars$o.trackBorderColor]: globalRefs$e.colors.surface.main,
|
3884
|
+
[vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3885
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
3875
3886
|
_checked: {
|
3876
|
-
[vars$
|
3877
|
-
[vars$
|
3887
|
+
[vars$o.knobColor]: globalRefs$e.colors.surface.light,
|
3888
|
+
[vars$o.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3878
3889
|
},
|
3879
3890
|
},
|
3880
3891
|
|
3881
3892
|
_invalid: {
|
3882
|
-
[vars$
|
3883
|
-
[vars$
|
3893
|
+
[vars$o.trackBorderColor]: globalRefs$e.colors.error.main,
|
3894
|
+
[vars$o.knobColor]: globalRefs$e.colors.error.main,
|
3884
3895
|
},
|
3885
3896
|
};
|
3886
3897
|
|
3887
3898
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
3888
3899
|
__proto__: null,
|
3889
3900
|
default: switchToggle,
|
3890
|
-
vars: vars$
|
3901
|
+
vars: vars$o
|
3891
3902
|
});
|
3892
3903
|
|
3893
|
-
const componentName$
|
3904
|
+
const componentName$u = getComponentName('container');
|
3894
3905
|
|
3895
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3906
|
+
class RawContainer extends createBaseClass({ componentName: componentName$u, baseSelector: 'slot' }) {
|
3896
3907
|
constructor() {
|
3897
3908
|
super();
|
3898
3909
|
|
@@ -3966,7 +3977,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
3966
3977
|
horizontalAlignment,
|
3967
3978
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
3968
3979
|
},
|
3969
|
-
componentName$
|
3980
|
+
componentName$u
|
3970
3981
|
);
|
3971
3982
|
|
3972
3983
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -4051,7 +4062,7 @@ const container = {
|
|
4051
4062
|
},
|
4052
4063
|
};
|
4053
4064
|
|
4054
|
-
const vars$
|
4065
|
+
const vars$n = {
|
4055
4066
|
...compVars$3,
|
4056
4067
|
...helperVars$2,
|
4057
4068
|
};
|
@@ -4059,7 +4070,7 @@ const vars$m = {
|
|
4059
4070
|
var container$1 = /*#__PURE__*/Object.freeze({
|
4060
4071
|
__proto__: null,
|
4061
4072
|
default: container,
|
4062
|
-
vars: vars$
|
4073
|
+
vars: vars$n
|
4063
4074
|
});
|
4064
4075
|
|
4065
4076
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4112,51 +4123,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4112
4123
|
return CssVarImageClass;
|
4113
4124
|
};
|
4114
4125
|
|
4115
|
-
const componentName$
|
4126
|
+
const componentName$t = getComponentName('logo');
|
4116
4127
|
|
4117
4128
|
const LogoClass = createCssVarImageClass({
|
4118
|
-
componentName: componentName$
|
4129
|
+
componentName: componentName$t,
|
4119
4130
|
varName: 'url',
|
4120
4131
|
fallbackVarName: 'fallbackUrl',
|
4121
4132
|
});
|
4122
4133
|
|
4123
|
-
const vars$
|
4134
|
+
const vars$m = LogoClass.cssVarList;
|
4124
4135
|
|
4125
4136
|
const logo$1 = {
|
4126
|
-
[vars$
|
4137
|
+
[vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4127
4138
|
};
|
4128
4139
|
|
4129
4140
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
4130
4141
|
__proto__: null,
|
4131
4142
|
default: logo$1,
|
4132
|
-
vars: vars$
|
4143
|
+
vars: vars$m
|
4133
4144
|
});
|
4134
4145
|
|
4135
|
-
const componentName$
|
4146
|
+
const componentName$s = getComponentName('totp-image');
|
4136
4147
|
|
4137
4148
|
const TotpImageClass = createCssVarImageClass({
|
4138
|
-
componentName: componentName$
|
4149
|
+
componentName: componentName$s,
|
4139
4150
|
varName: 'url',
|
4140
4151
|
fallbackVarName: 'fallbackUrl',
|
4141
4152
|
});
|
4142
4153
|
|
4143
|
-
const vars$
|
4154
|
+
const vars$l = TotpImageClass.cssVarList;
|
4144
4155
|
|
4145
4156
|
const logo = {
|
4146
|
-
[vars$
|
4157
|
+
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4147
4158
|
};
|
4148
4159
|
|
4149
4160
|
var totpImage = /*#__PURE__*/Object.freeze({
|
4150
4161
|
__proto__: null,
|
4151
4162
|
default: logo,
|
4152
|
-
vars: vars$
|
4163
|
+
vars: vars$l
|
4153
4164
|
});
|
4154
4165
|
|
4155
4166
|
// eslint-disable-next-line max-classes-per-file
|
4156
4167
|
|
4157
|
-
const componentName$
|
4168
|
+
const componentName$r = getComponentName('text');
|
4158
4169
|
|
4159
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
4170
|
+
class RawText extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > slot' }) {
|
4160
4171
|
constructor() {
|
4161
4172
|
super();
|
4162
4173
|
|
@@ -4217,98 +4228,98 @@ const TextClass = compose(
|
|
4217
4228
|
)(RawText);
|
4218
4229
|
|
4219
4230
|
const globalRefs$c = getThemeRefs(globals);
|
4220
|
-
const vars$
|
4231
|
+
const vars$k = TextClass.cssVarList;
|
4221
4232
|
|
4222
4233
|
const text$2 = {
|
4223
|
-
[vars$
|
4224
|
-
[vars$
|
4225
|
-
[vars$
|
4226
|
-
[vars$
|
4234
|
+
[vars$k.hostDirection]: globalRefs$c.direction,
|
4235
|
+
[vars$k.textLineHeight]: '1.35em',
|
4236
|
+
[vars$k.textAlign]: 'left',
|
4237
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.dark,
|
4227
4238
|
variant: {
|
4228
4239
|
h1: {
|
4229
|
-
[vars$
|
4230
|
-
[vars$
|
4231
|
-
[vars$
|
4240
|
+
[vars$k.fontSize]: globalRefs$c.typography.h1.size,
|
4241
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h1.weight,
|
4242
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h1.font,
|
4232
4243
|
},
|
4233
4244
|
h2: {
|
4234
|
-
[vars$
|
4235
|
-
[vars$
|
4236
|
-
[vars$
|
4245
|
+
[vars$k.fontSize]: globalRefs$c.typography.h2.size,
|
4246
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h2.weight,
|
4247
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h2.font,
|
4237
4248
|
},
|
4238
4249
|
h3: {
|
4239
|
-
[vars$
|
4240
|
-
[vars$
|
4241
|
-
[vars$
|
4250
|
+
[vars$k.fontSize]: globalRefs$c.typography.h3.size,
|
4251
|
+
[vars$k.fontWeight]: globalRefs$c.typography.h3.weight,
|
4252
|
+
[vars$k.fontFamily]: globalRefs$c.typography.h3.font,
|
4242
4253
|
},
|
4243
4254
|
subtitle1: {
|
4244
|
-
[vars$
|
4245
|
-
[vars$
|
4246
|
-
[vars$
|
4255
|
+
[vars$k.fontSize]: globalRefs$c.typography.subtitle1.size,
|
4256
|
+
[vars$k.fontWeight]: globalRefs$c.typography.subtitle1.weight,
|
4257
|
+
[vars$k.fontFamily]: globalRefs$c.typography.subtitle1.font,
|
4247
4258
|
},
|
4248
4259
|
subtitle2: {
|
4249
|
-
[vars$
|
4250
|
-
[vars$
|
4251
|
-
[vars$
|
4260
|
+
[vars$k.fontSize]: globalRefs$c.typography.subtitle2.size,
|
4261
|
+
[vars$k.fontWeight]: globalRefs$c.typography.subtitle2.weight,
|
4262
|
+
[vars$k.fontFamily]: globalRefs$c.typography.subtitle2.font,
|
4252
4263
|
},
|
4253
4264
|
body1: {
|
4254
|
-
[vars$
|
4255
|
-
[vars$
|
4256
|
-
[vars$
|
4265
|
+
[vars$k.fontSize]: globalRefs$c.typography.body1.size,
|
4266
|
+
[vars$k.fontWeight]: globalRefs$c.typography.body1.weight,
|
4267
|
+
[vars$k.fontFamily]: globalRefs$c.typography.body1.font,
|
4257
4268
|
},
|
4258
4269
|
body2: {
|
4259
|
-
[vars$
|
4260
|
-
[vars$
|
4261
|
-
[vars$
|
4270
|
+
[vars$k.fontSize]: globalRefs$c.typography.body2.size,
|
4271
|
+
[vars$k.fontWeight]: globalRefs$c.typography.body2.weight,
|
4272
|
+
[vars$k.fontFamily]: globalRefs$c.typography.body2.font,
|
4262
4273
|
},
|
4263
4274
|
},
|
4264
4275
|
|
4265
4276
|
mode: {
|
4266
4277
|
primary: {
|
4267
|
-
[vars$
|
4278
|
+
[vars$k.textColor]: globalRefs$c.colors.primary.main,
|
4268
4279
|
},
|
4269
4280
|
secondary: {
|
4270
|
-
[vars$
|
4281
|
+
[vars$k.textColor]: globalRefs$c.colors.secondary.main,
|
4271
4282
|
},
|
4272
4283
|
error: {
|
4273
|
-
[vars$
|
4284
|
+
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
4274
4285
|
},
|
4275
4286
|
success: {
|
4276
|
-
[vars$
|
4287
|
+
[vars$k.textColor]: globalRefs$c.colors.success.main,
|
4277
4288
|
},
|
4278
4289
|
},
|
4279
4290
|
|
4280
4291
|
textAlign: {
|
4281
|
-
right: { [vars$
|
4282
|
-
left: { [vars$
|
4283
|
-
center: { [vars$
|
4292
|
+
right: { [vars$k.textAlign]: 'right' },
|
4293
|
+
left: { [vars$k.textAlign]: 'left' },
|
4294
|
+
center: { [vars$k.textAlign]: 'center' },
|
4284
4295
|
},
|
4285
4296
|
|
4286
4297
|
_fullWidth: {
|
4287
|
-
[vars$
|
4298
|
+
[vars$k.hostWidth]: '100%',
|
4288
4299
|
},
|
4289
4300
|
|
4290
4301
|
_italic: {
|
4291
|
-
[vars$
|
4302
|
+
[vars$k.fontStyle]: 'italic',
|
4292
4303
|
},
|
4293
4304
|
|
4294
4305
|
_uppercase: {
|
4295
|
-
[vars$
|
4306
|
+
[vars$k.textTransform]: 'uppercase',
|
4296
4307
|
},
|
4297
4308
|
|
4298
4309
|
_lowercase: {
|
4299
|
-
[vars$
|
4310
|
+
[vars$k.textTransform]: 'lowercase',
|
4300
4311
|
},
|
4301
4312
|
};
|
4302
4313
|
|
4303
4314
|
var text$3 = /*#__PURE__*/Object.freeze({
|
4304
4315
|
__proto__: null,
|
4305
4316
|
default: text$2,
|
4306
|
-
vars: vars$
|
4317
|
+
vars: vars$k
|
4307
4318
|
});
|
4308
4319
|
|
4309
|
-
const componentName$
|
4320
|
+
const componentName$q = getComponentName('link');
|
4310
4321
|
|
4311
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
4322
|
+
class RawLink extends createBaseClass({ componentName: componentName$q, baseSelector: ':host a' }) {
|
4312
4323
|
constructor() {
|
4313
4324
|
super();
|
4314
4325
|
|
@@ -4374,36 +4385,36 @@ const LinkClass = compose(
|
|
4374
4385
|
)(RawLink);
|
4375
4386
|
|
4376
4387
|
const globalRefs$b = getThemeRefs(globals);
|
4377
|
-
const vars$
|
4388
|
+
const vars$j = LinkClass.cssVarList;
|
4378
4389
|
|
4379
4390
|
const link = {
|
4380
|
-
[vars$
|
4381
|
-
[vars$
|
4391
|
+
[vars$j.hostDirection]: globalRefs$b.direction,
|
4392
|
+
[vars$j.cursor]: 'pointer',
|
4382
4393
|
|
4383
|
-
[vars$
|
4394
|
+
[vars$j.textColor]: globalRefs$b.colors.primary.main,
|
4384
4395
|
|
4385
4396
|
textAlign: {
|
4386
|
-
right: { [vars$
|
4387
|
-
left: { [vars$
|
4388
|
-
center: { [vars$
|
4397
|
+
right: { [vars$j.textAlign]: 'right' },
|
4398
|
+
left: { [vars$j.textAlign]: 'left' },
|
4399
|
+
center: { [vars$j.textAlign]: 'center' },
|
4389
4400
|
},
|
4390
4401
|
|
4391
4402
|
_fullWidth: {
|
4392
|
-
[vars$
|
4403
|
+
[vars$j.hostWidth]: '100%',
|
4393
4404
|
},
|
4394
4405
|
|
4395
4406
|
mode: {
|
4396
4407
|
primary: {
|
4397
|
-
[vars$
|
4408
|
+
[vars$j.textColor]: globalRefs$b.colors.primary.main,
|
4398
4409
|
},
|
4399
4410
|
secondary: {
|
4400
|
-
[vars$
|
4411
|
+
[vars$j.textColor]: globalRefs$b.colors.secondary.main,
|
4401
4412
|
},
|
4402
4413
|
error: {
|
4403
|
-
[vars$
|
4414
|
+
[vars$j.textColor]: globalRefs$b.colors.error.main,
|
4404
4415
|
},
|
4405
4416
|
success: {
|
4406
|
-
[vars$
|
4417
|
+
[vars$j.textColor]: globalRefs$b.colors.success.main,
|
4407
4418
|
},
|
4408
4419
|
},
|
4409
4420
|
};
|
@@ -4411,11 +4422,11 @@ const link = {
|
|
4411
4422
|
var link$1 = /*#__PURE__*/Object.freeze({
|
4412
4423
|
__proto__: null,
|
4413
4424
|
default: link,
|
4414
|
-
vars: vars$
|
4425
|
+
vars: vars$j
|
4415
4426
|
});
|
4416
4427
|
|
4417
|
-
const componentName$
|
4418
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
4428
|
+
const componentName$p = getComponentName('divider');
|
4429
|
+
class RawDivider extends createBaseClass({ componentName: componentName$p, baseSelector: ':host > div' }) {
|
4419
4430
|
constructor() {
|
4420
4431
|
super();
|
4421
4432
|
|
@@ -4522,7 +4533,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
4522
4533
|
thickness: '2px',
|
4523
4534
|
spacing: '10px',
|
4524
4535
|
},
|
4525
|
-
componentName$
|
4536
|
+
componentName$p
|
4526
4537
|
);
|
4527
4538
|
|
4528
4539
|
const divider = {
|
@@ -4553,7 +4564,7 @@ const divider = {
|
|
4553
4564
|
},
|
4554
4565
|
};
|
4555
4566
|
|
4556
|
-
const vars$
|
4567
|
+
const vars$i = {
|
4557
4568
|
...compVars$2,
|
4558
4569
|
...helperVars$1,
|
4559
4570
|
};
|
@@ -4561,18 +4572,18 @@ const vars$h = {
|
|
4561
4572
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
4562
4573
|
__proto__: null,
|
4563
4574
|
default: divider,
|
4564
|
-
vars: vars$
|
4575
|
+
vars: vars$i
|
4565
4576
|
});
|
4566
4577
|
|
4567
4578
|
/* eslint-disable no-param-reassign */
|
4568
4579
|
|
4569
|
-
const componentName$
|
4580
|
+
const componentName$o = getComponentName('passcode-internal');
|
4570
4581
|
|
4571
|
-
createBaseInputClass({ componentName: componentName$
|
4582
|
+
createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
4572
4583
|
|
4573
|
-
const componentName$
|
4584
|
+
const componentName$n = getComponentName('loader-radial');
|
4574
4585
|
|
4575
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
4586
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
|
4576
4587
|
constructor() {
|
4577
4588
|
super();
|
4578
4589
|
|
@@ -4616,11 +4627,11 @@ const LoaderRadialClass = compose(
|
|
4616
4627
|
componentNameValidationMixin
|
4617
4628
|
)(RawLoaderRadial);
|
4618
4629
|
|
4619
|
-
const componentName$
|
4630
|
+
const componentName$m = getComponentName('passcode');
|
4620
4631
|
|
4621
4632
|
const observedAttributes$3 = ['digits'];
|
4622
4633
|
|
4623
|
-
const customMixin$
|
4634
|
+
const customMixin$4 = (superclass) =>
|
4624
4635
|
class PasscodeMixinClass extends superclass {
|
4625
4636
|
static get observedAttributes() {
|
4626
4637
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
@@ -4635,17 +4646,17 @@ const customMixin$5 = (superclass) =>
|
|
4635
4646
|
const template = document.createElement('template');
|
4636
4647
|
|
4637
4648
|
template.innerHTML = `
|
4638
|
-
<${componentName$
|
4649
|
+
<${componentName$o}
|
4639
4650
|
bordered="true"
|
4640
4651
|
name="code"
|
4641
4652
|
tabindex="-1"
|
4642
4653
|
slot="input"
|
4643
|
-
><slot></slot></${componentName$
|
4654
|
+
><slot></slot></${componentName$o}>
|
4644
4655
|
`;
|
4645
4656
|
|
4646
4657
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4647
4658
|
|
4648
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4659
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
4649
4660
|
|
4650
4661
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
4651
4662
|
}
|
@@ -4716,7 +4727,7 @@ const PasscodeClass = compose(
|
|
4716
4727
|
draggableMixin,
|
4717
4728
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
4718
4729
|
componentNameValidationMixin,
|
4719
|
-
customMixin$
|
4730
|
+
customMixin$4
|
4720
4731
|
)(
|
4721
4732
|
createProxy({
|
4722
4733
|
slots: [],
|
@@ -4792,56 +4803,56 @@ const PasscodeClass = compose(
|
|
4792
4803
|
${resetInputCursor('vaadin-text-field')}
|
4793
4804
|
`,
|
4794
4805
|
excludeAttrsSync: ['tabindex'],
|
4795
|
-
componentName: componentName$
|
4806
|
+
componentName: componentName$m,
|
4796
4807
|
})
|
4797
4808
|
);
|
4798
4809
|
|
4799
|
-
const vars$
|
4810
|
+
const vars$h = PasscodeClass.cssVarList;
|
4800
4811
|
|
4801
4812
|
const passcode = {
|
4802
|
-
[vars$
|
4803
|
-
[vars$
|
4804
|
-
[vars$
|
4805
|
-
[vars$
|
4806
|
-
[vars$
|
4807
|
-
[vars$
|
4808
|
-
[vars$
|
4809
|
-
[vars$
|
4810
|
-
[vars$
|
4811
|
-
[vars$
|
4812
|
-
[vars$
|
4813
|
-
[vars$
|
4814
|
-
[vars$
|
4815
|
-
[vars$
|
4816
|
-
[vars$
|
4813
|
+
[vars$h.hostDirection]: refs.direction,
|
4814
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
4815
|
+
[vars$h.fontSize]: refs.fontSize,
|
4816
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
4817
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
4818
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
4819
|
+
[vars$h.digitValueTextColor]: refs.valueTextColor,
|
4820
|
+
[vars$h.digitPadding]: '0',
|
4821
|
+
[vars$h.digitTextAlign]: 'center',
|
4822
|
+
[vars$h.digitSpacing]: '4px',
|
4823
|
+
[vars$h.hostWidth]: refs.width,
|
4824
|
+
[vars$h.digitOutlineColor]: 'transparent',
|
4825
|
+
[vars$h.digitOutlineWidth]: refs.outlineWidth,
|
4826
|
+
[vars$h.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
4827
|
+
[vars$h.digitSize]: refs.inputHeight,
|
4817
4828
|
|
4818
4829
|
size: {
|
4819
|
-
xs: { [vars$
|
4820
|
-
sm: { [vars$
|
4821
|
-
md: { [vars$
|
4822
|
-
lg: { [vars$
|
4830
|
+
xs: { [vars$h.spinnerSize]: '15px' },
|
4831
|
+
sm: { [vars$h.spinnerSize]: '20px' },
|
4832
|
+
md: { [vars$h.spinnerSize]: '20px' },
|
4833
|
+
lg: { [vars$h.spinnerSize]: '20px' },
|
4823
4834
|
},
|
4824
4835
|
|
4825
4836
|
_hideCursor: {
|
4826
|
-
[vars$
|
4837
|
+
[vars$h.digitCaretTextColor]: 'transparent',
|
4827
4838
|
},
|
4828
4839
|
|
4829
4840
|
_loading: {
|
4830
|
-
[vars$
|
4841
|
+
[vars$h.overlayOpacity]: refs.overlayOpacity,
|
4831
4842
|
},
|
4832
4843
|
};
|
4833
4844
|
|
4834
4845
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
4835
4846
|
__proto__: null,
|
4836
4847
|
default: passcode,
|
4837
|
-
vars: vars$
|
4848
|
+
vars: vars$h
|
4838
4849
|
});
|
4839
4850
|
|
4840
|
-
const componentName$
|
4851
|
+
const componentName$l = getComponentName('loader-linear');
|
4841
4852
|
|
4842
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4853
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
4843
4854
|
static get componentName() {
|
4844
|
-
return componentName$
|
4855
|
+
return componentName$l;
|
4845
4856
|
}
|
4846
4857
|
|
4847
4858
|
constructor() {
|
@@ -4903,48 +4914,48 @@ const LoaderLinearClass = compose(
|
|
4903
4914
|
)(RawLoaderLinear);
|
4904
4915
|
|
4905
4916
|
const globalRefs$9 = getThemeRefs(globals);
|
4906
|
-
const vars$
|
4917
|
+
const vars$g = LoaderLinearClass.cssVarList;
|
4907
4918
|
|
4908
4919
|
const loaderLinear = {
|
4909
|
-
[vars$
|
4910
|
-
[vars$
|
4920
|
+
[vars$g.hostDisplay]: 'inline-block',
|
4921
|
+
[vars$g.hostWidth]: '100%',
|
4911
4922
|
|
4912
|
-
[vars$
|
4913
|
-
[vars$
|
4923
|
+
[vars$g.barColor]: globalRefs$9.colors.surface.contrast,
|
4924
|
+
[vars$g.barWidth]: '20%',
|
4914
4925
|
|
4915
|
-
[vars$
|
4916
|
-
[vars$
|
4926
|
+
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
|
4927
|
+
[vars$g.barBorderRadius]: '4px',
|
4917
4928
|
|
4918
|
-
[vars$
|
4919
|
-
[vars$
|
4920
|
-
[vars$
|
4921
|
-
[vars$
|
4929
|
+
[vars$g.animationDuration]: '2s',
|
4930
|
+
[vars$g.animationTimingFunction]: 'linear',
|
4931
|
+
[vars$g.animationIterationCount]: 'infinite',
|
4932
|
+
[vars$g.verticalPadding]: '0.25em',
|
4922
4933
|
|
4923
4934
|
size: {
|
4924
|
-
xs: { [vars$
|
4925
|
-
sm: { [vars$
|
4926
|
-
md: { [vars$
|
4927
|
-
lg: { [vars$
|
4935
|
+
xs: { [vars$g.barHeight]: '2px' },
|
4936
|
+
sm: { [vars$g.barHeight]: '4px' },
|
4937
|
+
md: { [vars$g.barHeight]: '6px' },
|
4938
|
+
lg: { [vars$g.barHeight]: '8px' },
|
4928
4939
|
},
|
4929
4940
|
|
4930
4941
|
mode: {
|
4931
4942
|
primary: {
|
4932
|
-
[vars$
|
4943
|
+
[vars$g.barColor]: globalRefs$9.colors.primary.main,
|
4933
4944
|
},
|
4934
4945
|
secondary: {
|
4935
|
-
[vars$
|
4946
|
+
[vars$g.barColor]: globalRefs$9.colors.secondary.main,
|
4936
4947
|
},
|
4937
4948
|
},
|
4938
4949
|
|
4939
4950
|
_hidden: {
|
4940
|
-
[vars$
|
4951
|
+
[vars$g.hostDisplay]: 'none',
|
4941
4952
|
},
|
4942
4953
|
};
|
4943
4954
|
|
4944
4955
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
4945
4956
|
__proto__: null,
|
4946
4957
|
default: loaderLinear,
|
4947
|
-
vars: vars$
|
4958
|
+
vars: vars$g
|
4948
4959
|
});
|
4949
4960
|
|
4950
4961
|
const globalRefs$8 = getThemeRefs(globals);
|
@@ -4962,7 +4973,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
4962
4973
|
},
|
4963
4974
|
},
|
4964
4975
|
},
|
4965
|
-
componentName$
|
4976
|
+
componentName$n
|
4966
4977
|
);
|
4967
4978
|
|
4968
4979
|
const loaderRadial = {
|
@@ -4991,7 +5002,7 @@ const loaderRadial = {
|
|
4991
5002
|
[compVars$1.hostDisplay]: 'none',
|
4992
5003
|
},
|
4993
5004
|
};
|
4994
|
-
const vars$
|
5005
|
+
const vars$f = {
|
4995
5006
|
...compVars$1,
|
4996
5007
|
...helperVars,
|
4997
5008
|
};
|
@@ -4999,10 +5010,10 @@ const vars$e = {
|
|
4999
5010
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
5000
5011
|
__proto__: null,
|
5001
5012
|
default: loaderRadial,
|
5002
|
-
vars: vars$
|
5013
|
+
vars: vars$f
|
5003
5014
|
});
|
5004
5015
|
|
5005
|
-
const componentName$
|
5016
|
+
const componentName$k = getComponentName('combo-box');
|
5006
5017
|
|
5007
5018
|
const ComboBoxMixin = (superclass) =>
|
5008
5019
|
class ComboBoxMixinClass extends superclass {
|
@@ -5366,69 +5377,69 @@ const ComboBoxClass = compose(
|
|
5366
5377
|
// and reset items to an empty array, and opening the list box with no items
|
5367
5378
|
// to display.
|
5368
5379
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5369
|
-
componentName: componentName$
|
5380
|
+
componentName: componentName$k,
|
5370
5381
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5371
5382
|
})
|
5372
5383
|
);
|
5373
5384
|
|
5374
5385
|
const globalRefs$7 = getThemeRefs(globals);
|
5375
|
-
const vars$
|
5386
|
+
const vars$e = ComboBoxClass.cssVarList;
|
5376
5387
|
|
5377
5388
|
const comboBox = {
|
5378
|
-
[vars$
|
5379
|
-
[vars$
|
5380
|
-
[vars$
|
5381
|
-
[vars$
|
5382
|
-
[vars$
|
5383
|
-
[vars$
|
5384
|
-
[vars$
|
5385
|
-
[vars$
|
5386
|
-
[vars$
|
5387
|
-
[vars$
|
5388
|
-
[vars$
|
5389
|
-
[vars$
|
5390
|
-
[vars$
|
5391
|
-
[vars$
|
5392
|
-
[vars$
|
5393
|
-
[vars$
|
5394
|
-
[vars$
|
5395
|
-
[vars$
|
5396
|
-
[vars$
|
5397
|
-
[vars$
|
5398
|
-
[vars$
|
5399
|
-
[vars$
|
5400
|
-
[vars$
|
5401
|
-
[vars$
|
5402
|
-
[vars$
|
5403
|
-
[vars$
|
5389
|
+
[vars$e.hostWidth]: refs.width,
|
5390
|
+
[vars$e.hostDirection]: refs.direction,
|
5391
|
+
[vars$e.fontSize]: refs.fontSize,
|
5392
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
5393
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
5394
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
5395
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
5396
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
5397
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
5398
|
+
[vars$e.inputBorderRadius]: refs.borderRadius,
|
5399
|
+
[vars$e.inputOutlineColor]: refs.outlineColor,
|
5400
|
+
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
5401
|
+
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
5402
|
+
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
5403
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
5404
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
5405
|
+
[vars$e.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
5406
|
+
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
5407
|
+
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
5408
|
+
[vars$e.inputHeight]: refs.inputHeight,
|
5409
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
|
5410
|
+
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
5411
|
+
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5412
|
+
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
5413
|
+
[vars$e.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
|
5414
|
+
[vars$e.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
|
5404
5415
|
|
5405
5416
|
_readonly: {
|
5406
|
-
[vars$
|
5417
|
+
[vars$e.inputDropdownButtonCursor]: 'default',
|
5407
5418
|
},
|
5408
5419
|
|
5409
5420
|
// Overlay theme exposed via the component:
|
5410
|
-
[vars$
|
5411
|
-
[vars$
|
5412
|
-
[vars$
|
5413
|
-
[vars$
|
5421
|
+
[vars$e.overlayFontSize]: refs.fontSize,
|
5422
|
+
[vars$e.overlayFontFamily]: refs.fontFamily,
|
5423
|
+
[vars$e.overlayCursor]: 'pointer',
|
5424
|
+
[vars$e.overlayItemBoxShadow]: 'none',
|
5414
5425
|
|
5415
5426
|
// Overlay direct theme:
|
5416
|
-
[vars$
|
5417
|
-
[vars$
|
5427
|
+
[vars$e.overlay.minHeight]: '400px',
|
5428
|
+
[vars$e.overlay.margin]: '0',
|
5418
5429
|
};
|
5419
5430
|
|
5420
5431
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
5421
5432
|
__proto__: null,
|
5422
5433
|
comboBox: comboBox,
|
5423
5434
|
default: comboBox,
|
5424
|
-
vars: vars$
|
5435
|
+
vars: vars$e
|
5425
5436
|
});
|
5426
5437
|
|
5427
5438
|
const observedAttributes$2 = ['src', 'alt'];
|
5428
5439
|
|
5429
|
-
const componentName$
|
5440
|
+
const componentName$j = getComponentName('image');
|
5430
5441
|
|
5431
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
5442
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$j, baseSelector: ':host > img' });
|
5432
5443
|
class RawImage extends BaseClass$1 {
|
5433
5444
|
static get observedAttributes() {
|
5434
5445
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
@@ -5468,14 +5479,14 @@ const ImageClass = compose(
|
|
5468
5479
|
draggableMixin
|
5469
5480
|
)(RawImage);
|
5470
5481
|
|
5471
|
-
const vars$
|
5482
|
+
const vars$d = ImageClass.cssVarList;
|
5472
5483
|
|
5473
5484
|
const image = {};
|
5474
5485
|
|
5475
5486
|
var image$1 = /*#__PURE__*/Object.freeze({
|
5476
5487
|
__proto__: null,
|
5477
5488
|
default: image,
|
5478
|
-
vars: vars$
|
5489
|
+
vars: vars$d
|
5479
5490
|
});
|
5480
5491
|
|
5481
5492
|
var CountryCodes = [
|
@@ -6691,16 +6702,16 @@ var CountryCodes = [
|
|
6691
6702
|
},
|
6692
6703
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
6693
6704
|
|
6694
|
-
const componentName$
|
6705
|
+
const componentName$i = getComponentName('phone-field-internal');
|
6695
6706
|
|
6696
|
-
createBaseInputClass({ componentName: componentName$
|
6707
|
+
createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
6697
6708
|
|
6698
6709
|
const textVars$1 = TextFieldClass.cssVarList;
|
6699
6710
|
const comboVars = ComboBoxClass.cssVarList;
|
6700
6711
|
|
6701
|
-
const componentName$
|
6712
|
+
const componentName$h = getComponentName('phone-field');
|
6702
6713
|
|
6703
|
-
const customMixin$
|
6714
|
+
const customMixin$3 = (superclass) =>
|
6704
6715
|
class PhoneFieldMixinClass extends superclass {
|
6705
6716
|
static get CountryCodes() {
|
6706
6717
|
return CountryCodes;
|
@@ -6712,15 +6723,15 @@ const customMixin$4 = (superclass) =>
|
|
6712
6723
|
const template = document.createElement('template');
|
6713
6724
|
|
6714
6725
|
template.innerHTML = `
|
6715
|
-
<${componentName$
|
6726
|
+
<${componentName$i}
|
6716
6727
|
tabindex="-1"
|
6717
6728
|
slot="input"
|
6718
|
-
></${componentName$
|
6729
|
+
></${componentName$i}>
|
6719
6730
|
`;
|
6720
6731
|
|
6721
6732
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6722
6733
|
|
6723
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6734
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
6724
6735
|
|
6725
6736
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6726
6737
|
includeAttrs: [
|
@@ -6840,7 +6851,7 @@ const PhoneFieldClass = compose(
|
|
6840
6851
|
}),
|
6841
6852
|
draggableMixin,
|
6842
6853
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6843
|
-
customMixin$
|
6854
|
+
customMixin$3
|
6844
6855
|
)(
|
6845
6856
|
createProxy({
|
6846
6857
|
slots: [],
|
@@ -6916,33 +6927,33 @@ const PhoneFieldClass = compose(
|
|
6916
6927
|
${resetInputLabelPosition('vaadin-text-field')}
|
6917
6928
|
`,
|
6918
6929
|
excludeAttrsSync: ['tabindex'],
|
6919
|
-
componentName: componentName$
|
6930
|
+
componentName: componentName$h,
|
6920
6931
|
})
|
6921
6932
|
);
|
6922
6933
|
|
6923
|
-
const vars$
|
6934
|
+
const vars$c = PhoneFieldClass.cssVarList;
|
6924
6935
|
|
6925
6936
|
const phoneField = {
|
6926
|
-
[vars$
|
6927
|
-
[vars$
|
6928
|
-
[vars$
|
6929
|
-
[vars$
|
6930
|
-
[vars$
|
6931
|
-
[vars$
|
6932
|
-
[vars$
|
6933
|
-
[vars$
|
6934
|
-
[vars$
|
6935
|
-
[vars$
|
6936
|
-
[vars$
|
6937
|
-
[vars$
|
6938
|
-
[vars$
|
6939
|
-
[vars$
|
6940
|
-
[vars$
|
6941
|
-
[vars$
|
6942
|
-
[vars$
|
6943
|
-
[vars$
|
6944
|
-
[vars$
|
6945
|
-
[vars$
|
6937
|
+
[vars$c.hostWidth]: refs.width,
|
6938
|
+
[vars$c.hostDirection]: refs.direction,
|
6939
|
+
[vars$c.fontSize]: refs.fontSize,
|
6940
|
+
[vars$c.fontFamily]: refs.fontFamily,
|
6941
|
+
[vars$c.labelTextColor]: refs.labelTextColor,
|
6942
|
+
[vars$c.labelRequiredIndicator]: refs.requiredIndicator,
|
6943
|
+
[vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
|
6944
|
+
[vars$c.inputValueTextColor]: refs.valueTextColor,
|
6945
|
+
[vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6946
|
+
[vars$c.inputBorderStyle]: refs.borderStyle,
|
6947
|
+
[vars$c.inputBorderWidth]: refs.borderWidth,
|
6948
|
+
[vars$c.inputBorderColor]: refs.borderColor,
|
6949
|
+
[vars$c.inputBorderRadius]: refs.borderRadius,
|
6950
|
+
[vars$c.inputOutlineStyle]: refs.outlineStyle,
|
6951
|
+
[vars$c.inputOutlineWidth]: refs.outlineWidth,
|
6952
|
+
[vars$c.inputOutlineColor]: refs.outlineColor,
|
6953
|
+
[vars$c.inputOutlineOffset]: refs.outlineOffset,
|
6954
|
+
[vars$c.phoneInputWidth]: refs.minWidth,
|
6955
|
+
[vars$c.countryCodeInputWidth]: '5em',
|
6956
|
+
[vars$c.countryCodeDropdownWidth]: '20em',
|
6946
6957
|
|
6947
6958
|
// '@overlay': {
|
6948
6959
|
// overlayItemBackgroundColor: 'red'
|
@@ -6952,18 +6963,18 @@ const phoneField = {
|
|
6952
6963
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
6953
6964
|
__proto__: null,
|
6954
6965
|
default: phoneField,
|
6955
|
-
vars: vars$
|
6966
|
+
vars: vars$c
|
6956
6967
|
});
|
6957
6968
|
|
6958
|
-
const componentName$
|
6969
|
+
const componentName$g = getComponentName('phone-field-internal-input-box');
|
6959
6970
|
|
6960
|
-
createBaseInputClass({ componentName: componentName$
|
6971
|
+
createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
|
6961
6972
|
|
6962
6973
|
const textVars = TextFieldClass.cssVarList;
|
6963
6974
|
|
6964
|
-
const componentName$
|
6975
|
+
const componentName$f = getComponentName('phone-input-box-field');
|
6965
6976
|
|
6966
|
-
const customMixin$
|
6977
|
+
const customMixin$2 = (superclass) =>
|
6967
6978
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
6968
6979
|
static get CountryCodes() {
|
6969
6980
|
return CountryCodes;
|
@@ -6975,15 +6986,15 @@ const customMixin$3 = (superclass) =>
|
|
6975
6986
|
const template = document.createElement('template');
|
6976
6987
|
|
6977
6988
|
template.innerHTML = `
|
6978
|
-
<${componentName$
|
6989
|
+
<${componentName$g}
|
6979
6990
|
tabindex="-1"
|
6980
6991
|
slot="input"
|
6981
|
-
></${componentName$
|
6992
|
+
></${componentName$g}>
|
6982
6993
|
`;
|
6983
6994
|
|
6984
6995
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
6985
6996
|
|
6986
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
6997
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
6987
6998
|
|
6988
6999
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
6989
7000
|
includeAttrs: [
|
@@ -7050,7 +7061,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
7050
7061
|
}),
|
7051
7062
|
draggableMixin,
|
7052
7063
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
7053
|
-
customMixin$
|
7064
|
+
customMixin$2
|
7054
7065
|
)(
|
7055
7066
|
createProxy({
|
7056
7067
|
slots: [],
|
@@ -7116,47 +7127,47 @@ const PhoneFieldInputBoxClass = compose(
|
|
7116
7127
|
${resetInputLabelPosition('vaadin-text-field')}
|
7117
7128
|
`,
|
7118
7129
|
excludeAttrsSync: ['tabindex'],
|
7119
|
-
componentName: componentName$
|
7130
|
+
componentName: componentName$f,
|
7120
7131
|
})
|
7121
7132
|
);
|
7122
7133
|
|
7123
|
-
const vars$
|
7134
|
+
const vars$b = PhoneFieldInputBoxClass.cssVarList;
|
7124
7135
|
|
7125
7136
|
const phoneInputBoxField = {
|
7126
|
-
[vars$
|
7127
|
-
[vars$
|
7128
|
-
[vars$
|
7129
|
-
[vars$
|
7130
|
-
[vars$
|
7131
|
-
[vars$
|
7132
|
-
[vars$
|
7133
|
-
[vars$
|
7134
|
-
[vars$
|
7135
|
-
[vars$
|
7136
|
-
[vars$
|
7137
|
-
[vars$
|
7138
|
-
[vars$
|
7139
|
-
[vars$
|
7140
|
-
[vars$
|
7141
|
-
[vars$
|
7142
|
-
[vars$
|
7143
|
-
[vars$
|
7137
|
+
[vars$b.hostWidth]: '16em',
|
7138
|
+
[vars$b.hostMinWidth]: refs.minWidth,
|
7139
|
+
[vars$b.hostDirection]: refs.direction,
|
7140
|
+
[vars$b.fontSize]: refs.fontSize,
|
7141
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
7142
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
7143
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
7144
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
7145
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
7146
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7147
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
7148
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
7149
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
7150
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
7151
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
7152
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
7153
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
7154
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
7144
7155
|
_fullWidth: {
|
7145
|
-
[vars$
|
7156
|
+
[vars$b.hostWidth]: refs.width,
|
7146
7157
|
},
|
7147
7158
|
};
|
7148
7159
|
|
7149
7160
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
7150
7161
|
__proto__: null,
|
7151
7162
|
default: phoneInputBoxField,
|
7152
|
-
vars: vars$
|
7163
|
+
vars: vars$b
|
7153
7164
|
});
|
7154
7165
|
|
7155
|
-
const componentName$
|
7166
|
+
const componentName$e = getComponentName('new-password-internal');
|
7156
7167
|
|
7157
|
-
const componentName$
|
7168
|
+
const componentName$d = getComponentName('new-password');
|
7158
7169
|
|
7159
|
-
const customMixin$
|
7170
|
+
const customMixin$1 = (superclass) =>
|
7160
7171
|
class NewPasswordMixinClass extends superclass {
|
7161
7172
|
init() {
|
7162
7173
|
super.init?.();
|
@@ -7164,16 +7175,16 @@ const customMixin$2 = (superclass) =>
|
|
7164
7175
|
const template = document.createElement('template');
|
7165
7176
|
|
7166
7177
|
template.innerHTML = `
|
7167
|
-
<${componentName$
|
7178
|
+
<${componentName$e}
|
7168
7179
|
name="new-password"
|
7169
7180
|
tabindex="-1"
|
7170
7181
|
slot="input"
|
7171
|
-
></${componentName$
|
7182
|
+
></${componentName$e}>
|
7172
7183
|
`;
|
7173
7184
|
|
7174
7185
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
7175
7186
|
|
7176
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
7187
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
7177
7188
|
|
7178
7189
|
forwardAttrs(this, this.inputElement, {
|
7179
7190
|
includeAttrs: [
|
@@ -7228,7 +7239,7 @@ const NewPasswordClass = compose(
|
|
7228
7239
|
}),
|
7229
7240
|
draggableMixin,
|
7230
7241
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
7231
|
-
customMixin$
|
7242
|
+
customMixin$1
|
7232
7243
|
)(
|
7233
7244
|
createProxy({
|
7234
7245
|
slots: [],
|
@@ -7280,33 +7291,33 @@ const NewPasswordClass = compose(
|
|
7280
7291
|
}
|
7281
7292
|
`,
|
7282
7293
|
excludeAttrsSync: ['tabindex'],
|
7283
|
-
componentName: componentName$
|
7294
|
+
componentName: componentName$d,
|
7284
7295
|
})
|
7285
7296
|
);
|
7286
7297
|
|
7287
|
-
const vars$
|
7298
|
+
const vars$a = NewPasswordClass.cssVarList;
|
7288
7299
|
|
7289
7300
|
const newPassword = {
|
7290
|
-
[vars$
|
7291
|
-
[vars$
|
7292
|
-
[vars$
|
7293
|
-
[vars$
|
7294
|
-
[vars$
|
7295
|
-
[vars$
|
7296
|
-
[vars$
|
7301
|
+
[vars$a.hostWidth]: refs.width,
|
7302
|
+
[vars$a.hostMinWidth]: refs.minWidth,
|
7303
|
+
[vars$a.hostDirection]: refs.direction,
|
7304
|
+
[vars$a.fontSize]: refs.fontSize,
|
7305
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
7306
|
+
[vars$a.spaceBetweenInputs]: '1em',
|
7307
|
+
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
7297
7308
|
|
7298
7309
|
_required: {
|
7299
7310
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
7300
7311
|
// That's why we fake the required indicator on each input.
|
7301
7312
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
7302
|
-
[vars$
|
7313
|
+
[vars$a.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
7303
7314
|
},
|
7304
7315
|
};
|
7305
7316
|
|
7306
7317
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
7307
7318
|
__proto__: null,
|
7308
7319
|
default: newPassword,
|
7309
|
-
vars: vars$
|
7320
|
+
vars: vars$a
|
7310
7321
|
});
|
7311
7322
|
|
7312
7323
|
const getFileBase64 = (fileObj) => {
|
@@ -7321,7 +7332,7 @@ const getFilename = (fileObj) => {
|
|
7321
7332
|
return fileObj.name.replace(/^.*\\/, '');
|
7322
7333
|
};
|
7323
7334
|
|
7324
|
-
const componentName$
|
7335
|
+
const componentName$c = getComponentName('upload-file');
|
7325
7336
|
|
7326
7337
|
const observedAttributes$1 = [
|
7327
7338
|
'title',
|
@@ -7336,7 +7347,7 @@ const observedAttributes$1 = [
|
|
7336
7347
|
'icon',
|
7337
7348
|
];
|
7338
7349
|
|
7339
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
7350
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
|
7340
7351
|
|
7341
7352
|
class RawUploadFile extends BaseInputClass {
|
7342
7353
|
static get observedAttributes() {
|
@@ -7551,77 +7562,77 @@ const UploadFileClass = compose(
|
|
7551
7562
|
componentNameValidationMixin
|
7552
7563
|
)(RawUploadFile);
|
7553
7564
|
|
7554
|
-
const vars$
|
7565
|
+
const vars$9 = UploadFileClass.cssVarList;
|
7555
7566
|
|
7556
7567
|
const uploadFile = {
|
7557
|
-
[vars$
|
7558
|
-
[vars$
|
7559
|
-
[vars$
|
7568
|
+
[vars$9.hostDirection]: refs.direction,
|
7569
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
7570
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
7560
7571
|
|
7561
|
-
[vars$
|
7572
|
+
[vars$9.iconSize]: '2em',
|
7562
7573
|
|
7563
|
-
[vars$
|
7564
|
-
[vars$
|
7574
|
+
[vars$9.hostPadding]: '0.75em',
|
7575
|
+
[vars$9.gap]: '0.5em',
|
7565
7576
|
|
7566
|
-
[vars$
|
7567
|
-
[vars$
|
7568
|
-
[vars$
|
7577
|
+
[vars$9.fontSize]: '16px',
|
7578
|
+
[vars$9.titleFontWeight]: '500',
|
7579
|
+
[vars$9.lineHeight]: '1em',
|
7569
7580
|
|
7570
|
-
[vars$
|
7571
|
-
[vars$
|
7572
|
-
[vars$
|
7573
|
-
[vars$
|
7581
|
+
[vars$9.borderWidth]: refs.borderWidth,
|
7582
|
+
[vars$9.borderColor]: refs.borderColor,
|
7583
|
+
[vars$9.borderRadius]: refs.borderRadius,
|
7584
|
+
[vars$9.borderStyle]: 'dashed',
|
7574
7585
|
|
7575
7586
|
_required: {
|
7576
|
-
[vars$
|
7587
|
+
[vars$9.requiredIndicator]: refs.requiredIndicator,
|
7577
7588
|
},
|
7578
7589
|
|
7579
7590
|
size: {
|
7580
7591
|
xs: {
|
7581
|
-
[vars$
|
7582
|
-
[vars$
|
7583
|
-
[vars$
|
7584
|
-
[vars$
|
7585
|
-
[vars$
|
7592
|
+
[vars$9.hostHeight]: '196px',
|
7593
|
+
[vars$9.hostWidth]: '200px',
|
7594
|
+
[vars$9.titleFontSize]: '0.875em',
|
7595
|
+
[vars$9.descriptionFontSize]: '0.875em',
|
7596
|
+
[vars$9.lineHeight]: '1.25em',
|
7586
7597
|
},
|
7587
7598
|
sm: {
|
7588
|
-
[vars$
|
7589
|
-
[vars$
|
7590
|
-
[vars$
|
7591
|
-
[vars$
|
7592
|
-
[vars$
|
7599
|
+
[vars$9.hostHeight]: '216px',
|
7600
|
+
[vars$9.hostWidth]: '230px',
|
7601
|
+
[vars$9.titleFontSize]: '1em',
|
7602
|
+
[vars$9.descriptionFontSize]: '0.875em',
|
7603
|
+
[vars$9.lineHeight]: '1.25em',
|
7593
7604
|
},
|
7594
7605
|
md: {
|
7595
|
-
[vars$
|
7596
|
-
[vars$
|
7597
|
-
[vars$
|
7598
|
-
[vars$
|
7599
|
-
[vars$
|
7606
|
+
[vars$9.hostHeight]: '256px',
|
7607
|
+
[vars$9.hostWidth]: '312px',
|
7608
|
+
[vars$9.titleFontSize]: '1.125em',
|
7609
|
+
[vars$9.descriptionFontSize]: '1em',
|
7610
|
+
[vars$9.lineHeight]: '1.5em',
|
7600
7611
|
},
|
7601
7612
|
lg: {
|
7602
|
-
[vars$
|
7603
|
-
[vars$
|
7604
|
-
[vars$
|
7605
|
-
[vars$
|
7606
|
-
[vars$
|
7613
|
+
[vars$9.hostHeight]: '280px',
|
7614
|
+
[vars$9.hostWidth]: '336px',
|
7615
|
+
[vars$9.titleFontSize]: '1.125em',
|
7616
|
+
[vars$9.descriptionFontSize]: '1.125em',
|
7617
|
+
[vars$9.lineHeight]: '1.75em',
|
7607
7618
|
},
|
7608
7619
|
},
|
7609
7620
|
|
7610
7621
|
_fullWidth: {
|
7611
|
-
[vars$
|
7622
|
+
[vars$9.hostWidth]: refs.width,
|
7612
7623
|
},
|
7613
7624
|
};
|
7614
7625
|
|
7615
7626
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
7616
7627
|
__proto__: null,
|
7617
7628
|
default: uploadFile,
|
7618
|
-
vars: vars$
|
7629
|
+
vars: vars$9
|
7619
7630
|
});
|
7620
7631
|
|
7621
|
-
const componentName$
|
7632
|
+
const componentName$b = getComponentName('button-selection-group-item');
|
7622
7633
|
|
7623
7634
|
class RawSelectItem extends createBaseClass({
|
7624
|
-
componentName: componentName$
|
7635
|
+
componentName: componentName$b,
|
7625
7636
|
baseSelector: ':host > descope-button',
|
7626
7637
|
}) {
|
7627
7638
|
get size() {
|
@@ -7721,73 +7732,138 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7721
7732
|
|
7722
7733
|
const globalRefs$6 = getThemeRefs(globals);
|
7723
7734
|
|
7724
|
-
const vars$
|
7735
|
+
const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
|
7725
7736
|
|
7726
7737
|
const buttonSelectionGroupItem = {
|
7727
|
-
[vars$
|
7728
|
-
[vars$
|
7729
|
-
[vars$
|
7730
|
-
[vars$
|
7731
|
-
[vars$
|
7732
|
-
[vars$
|
7738
|
+
[vars$8.hostDirection]: 'inherit',
|
7739
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
|
7740
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
7741
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.main,
|
7742
|
+
[vars$8.borderStyle]: 'solid',
|
7743
|
+
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
7733
7744
|
|
7734
7745
|
_hover: {
|
7735
|
-
[vars$
|
7746
|
+
[vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7736
7747
|
},
|
7737
7748
|
|
7738
7749
|
_selected: {
|
7739
|
-
[vars$
|
7740
|
-
[vars$
|
7741
|
-
[vars$
|
7750
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
|
7751
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
7752
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
|
7742
7753
|
},
|
7743
7754
|
};
|
7744
7755
|
|
7745
7756
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7746
7757
|
__proto__: null,
|
7747
7758
|
default: buttonSelectionGroupItem,
|
7748
|
-
vars: vars$
|
7759
|
+
vars: vars$8
|
7749
7760
|
});
|
7750
7761
|
|
7751
|
-
const
|
7762
|
+
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
7763
|
+
class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
|
7764
|
+
componentName,
|
7765
|
+
baseSelector: 'slot',
|
7766
|
+
}) {
|
7767
|
+
constructor() {
|
7768
|
+
super();
|
7769
|
+
|
7770
|
+
this.innerHTML = `
|
7771
|
+
<style>
|
7772
|
+
slot {
|
7773
|
+
box-sizing: border-box;
|
7774
|
+
width: 100%;
|
7775
|
+
display: flex;
|
7776
|
+
flex-wrap: wrap;
|
7777
|
+
}
|
7778
|
+
</style>
|
7779
|
+
<slot part="wrapper"></slot>
|
7780
|
+
`;
|
7781
|
+
}
|
7752
7782
|
|
7753
|
-
|
7754
|
-
componentName: componentName$8,
|
7755
|
-
baseSelector: 'slot',
|
7756
|
-
}) {
|
7757
|
-
constructor() {
|
7758
|
-
super();
|
7783
|
+
dispatchChange = createDispatchEvent.bind(this, 'change');
|
7759
7784
|
|
7760
|
-
|
7761
|
-
|
7762
|
-
|
7763
|
-
|
7764
|
-
|
7765
|
-
|
7766
|
-
flex-wrap: wrap;
|
7785
|
+
get items() {
|
7786
|
+
return this.querySelector('slot').assignedElements();
|
7787
|
+
}
|
7788
|
+
|
7789
|
+
get isReadonly() {
|
7790
|
+
return this.getAttribute('readonly') === 'true';
|
7767
7791
|
}
|
7768
|
-
</style>
|
7769
|
-
<slot part="wrapper"></slot>
|
7770
|
-
`;
|
7771
|
-
}
|
7772
7792
|
|
7773
|
-
|
7793
|
+
get size() {
|
7794
|
+
return this.getAttribute('size') || 'md';
|
7795
|
+
}
|
7774
7796
|
|
7775
|
-
|
7776
|
-
|
7777
|
-
|
7797
|
+
// eslint-disable-next-line getter-return, class-methods-use-this
|
7798
|
+
get value() {
|
7799
|
+
// eslint-disable-next-line no-console
|
7800
|
+
console.warn('get value', 'is not implemented');
|
7801
|
+
}
|
7802
|
+
|
7803
|
+
// eslint-disable-next-line class-methods-use-this
|
7804
|
+
set value(value) {
|
7805
|
+
// eslint-disable-next-line no-console
|
7806
|
+
console.warn('set value', 'is not implemented');
|
7807
|
+
}
|
7808
|
+
|
7809
|
+
onSizeChange() {
|
7810
|
+
this.items.forEach((item) => {
|
7811
|
+
item.setAttribute('size', this.size);
|
7812
|
+
});
|
7813
|
+
}
|
7814
|
+
|
7815
|
+
onReadOnlyChange() {
|
7816
|
+
this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
|
7817
|
+
}
|
7818
|
+
|
7819
|
+
// eslint-disable-next-line class-methods-use-this
|
7820
|
+
getValidity() {
|
7821
|
+
// eslint-disable-next-line no-console
|
7822
|
+
console.warn('getValidity', 'is not implemented');
|
7823
|
+
}
|
7824
|
+
|
7825
|
+
onObservedAttributeChange(attrs) {
|
7826
|
+
attrs.forEach((attr) => {
|
7827
|
+
switch (attr) {
|
7828
|
+
case 'size':
|
7829
|
+
this.onSizeChange();
|
7830
|
+
break;
|
7831
|
+
case 'readonly':
|
7832
|
+
this.onReadOnlyChange();
|
7833
|
+
break;
|
7834
|
+
}
|
7835
|
+
});
|
7836
|
+
}
|
7837
|
+
|
7838
|
+
init() {
|
7839
|
+
// we are adding listeners before calling to super because it's stopping the events
|
7840
|
+
this.addEventListener('focus', (e) => {
|
7841
|
+
// we want to ignore focus events we are dispatching
|
7842
|
+
if (e.isTrusted) {
|
7843
|
+
this.items[0]?.focus();
|
7844
|
+
}
|
7845
|
+
});
|
7778
7846
|
|
7779
|
-
|
7780
|
-
|
7847
|
+
super.init?.();
|
7848
|
+
|
7849
|
+
observeAttributes(this, this.onObservedAttributeChange.bind(this), {
|
7850
|
+
includeAttrs: ['size', 'readonly'],
|
7851
|
+
});
|
7852
|
+
}
|
7781
7853
|
}
|
7782
7854
|
|
7855
|
+
return BaseButtonSelectionGroupInternalClass;
|
7856
|
+
};
|
7857
|
+
|
7858
|
+
const componentName$a = getComponentName('button-selection-group-internal');
|
7859
|
+
|
7860
|
+
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
7861
|
+
componentName$a
|
7862
|
+
) {
|
7783
7863
|
getSelectedNode() {
|
7784
7864
|
return this.items.find((item) => item.hasAttribute('selected'));
|
7785
7865
|
}
|
7786
7866
|
|
7787
|
-
get size() {
|
7788
|
-
return this.getAttribute('size') || 'md';
|
7789
|
-
}
|
7790
|
-
|
7791
7867
|
get allowDeselect() {
|
7792
7868
|
return this.getAttribute('allow-deselect') === 'true';
|
7793
7869
|
}
|
@@ -7803,7 +7879,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7803
7879
|
} else {
|
7804
7880
|
this.setSelected(e.target);
|
7805
7881
|
}
|
7806
|
-
this
|
7882
|
+
this.dispatchChange();
|
7807
7883
|
}
|
7808
7884
|
}
|
7809
7885
|
|
@@ -7814,15 +7890,6 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7814
7890
|
}
|
7815
7891
|
}
|
7816
7892
|
|
7817
|
-
get value() {
|
7818
|
-
return this.getSelectedNode()?.value || '';
|
7819
|
-
}
|
7820
|
-
|
7821
|
-
set value(value) {
|
7822
|
-
const node = this.items.find((child) => child.value === value);
|
7823
|
-
this.setSelected(node);
|
7824
|
-
}
|
7825
|
-
|
7826
7893
|
get defaultValue() {
|
7827
7894
|
return this.getAttribute('default-value');
|
7828
7895
|
}
|
@@ -7837,14 +7904,13 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7837
7904
|
});
|
7838
7905
|
}
|
7839
7906
|
|
7840
|
-
|
7841
|
-
this.
|
7842
|
-
item.setAttribute('size', this.size);
|
7843
|
-
});
|
7907
|
+
get value() {
|
7908
|
+
return this.getSelectedNode()?.value || '';
|
7844
7909
|
}
|
7845
7910
|
|
7846
|
-
|
7847
|
-
this.
|
7911
|
+
set value(value) {
|
7912
|
+
const node = this.items.find((child) => child.value === value);
|
7913
|
+
this.setSelected(node);
|
7848
7914
|
}
|
7849
7915
|
|
7850
7916
|
getValidity() {
|
@@ -7855,42 +7921,16 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
7855
7921
|
return {};
|
7856
7922
|
}
|
7857
7923
|
|
7858
|
-
onObservedAttributeChange(attrs) {
|
7859
|
-
attrs.forEach((attr) => {
|
7860
|
-
switch (attr) {
|
7861
|
-
case 'size':
|
7862
|
-
this.onSizeChange();
|
7863
|
-
break;
|
7864
|
-
case 'readonly':
|
7865
|
-
this.onReadOnlyChange();
|
7866
|
-
break;
|
7867
|
-
}
|
7868
|
-
});
|
7869
|
-
}
|
7870
|
-
|
7871
7924
|
init() {
|
7872
|
-
|
7873
|
-
this.addEventListener('focus', (e) => {
|
7874
|
-
// we want to ignore focus events we are dispatching
|
7875
|
-
if (e.isTrusted) {
|
7876
|
-
this.items[0]?.focus();
|
7877
|
-
}
|
7878
|
-
});
|
7925
|
+
super.init();
|
7879
7926
|
|
7880
|
-
super.init?.();
|
7881
7927
|
this.setDefaultValue();
|
7882
7928
|
|
7883
|
-
observeAttributes(this, this.onObservedAttributeChange.bind(this), {
|
7884
|
-
includeAttrs: ['size', 'readonly'],
|
7885
|
-
});
|
7886
|
-
|
7887
7929
|
this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
|
7888
7930
|
}
|
7889
7931
|
}
|
7890
7932
|
|
7891
|
-
const
|
7892
|
-
|
7893
|
-
const customMixin$1 = (superclass) =>
|
7933
|
+
const buttonSelectionGroupBaseMixin = (superclass) =>
|
7894
7934
|
class ButtonSelectionGroupMixinClass extends superclass {
|
7895
7935
|
// eslint-disable-next-line class-methods-use-this
|
7896
7936
|
#renderItem = ({ value, label }) =>
|
@@ -7960,25 +8000,6 @@ const customMixin$1 = (superclass) =>
|
|
7960
8000
|
|
7961
8001
|
init() {
|
7962
8002
|
super.init?.();
|
7963
|
-
const template = document.createElement('template');
|
7964
|
-
|
7965
|
-
template.innerHTML = `
|
7966
|
-
<${componentName$8}
|
7967
|
-
name="button-selection-group"
|
7968
|
-
slot="input"
|
7969
|
-
tabindex="-1"
|
7970
|
-
>
|
7971
|
-
<slot></slot>
|
7972
|
-
</${componentName$8}>
|
7973
|
-
`;
|
7974
|
-
|
7975
|
-
this.baseElement.appendChild(template.content.cloneNode(true));
|
7976
|
-
|
7977
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
7978
|
-
|
7979
|
-
forwardAttrs(this, this.inputElement, {
|
7980
|
-
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
7981
|
-
});
|
7982
8003
|
|
7983
8004
|
this.renderItems();
|
7984
8005
|
|
@@ -7997,34 +8018,24 @@ const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
7997
8018
|
host: { selector: () => ':host' },
|
7998
8019
|
label: { selector: '::part(label)' },
|
7999
8020
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
8000
|
-
internalWrapper: { selector: '
|
8021
|
+
internalWrapper: { selector: () => ':host [part="internal-component"] slot' },
|
8001
8022
|
errorMessage: { selector: '::part(error-message)' },
|
8002
8023
|
};
|
8003
8024
|
|
8004
|
-
const
|
8005
|
-
|
8006
|
-
|
8007
|
-
|
8008
|
-
|
8009
|
-
|
8010
|
-
|
8011
|
-
|
8012
|
-
|
8013
|
-
|
8014
|
-
|
8015
|
-
|
8016
|
-
|
8017
|
-
|
8018
|
-
}),
|
8019
|
-
draggableMixin,
|
8020
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8021
|
-
componentNameValidationMixin,
|
8022
|
-
customMixin$1
|
8023
|
-
)(
|
8024
|
-
createProxy({
|
8025
|
-
slots: [],
|
8026
|
-
wrappedEleName: 'vaadin-text-field',
|
8027
|
-
style: () => `
|
8025
|
+
const buttonSelectionGroupMappings = {
|
8026
|
+
hostWidth: { ...host$2, property: 'width' },
|
8027
|
+
hostDirection: { ...host$2, property: 'direction' },
|
8028
|
+
fontFamily: host$2,
|
8029
|
+
labelTextColor: [
|
8030
|
+
{ ...label$1, property: 'color' },
|
8031
|
+
{ ...requiredIndicator$1, property: 'color' },
|
8032
|
+
],
|
8033
|
+
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
8034
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
8035
|
+
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
8036
|
+
};
|
8037
|
+
|
8038
|
+
const buttonSelectionGroupStyles = `
|
8028
8039
|
:host {
|
8029
8040
|
display: inline-flex;
|
8030
8041
|
max-width: 100%;
|
@@ -8037,7 +8048,7 @@ const ButtonSelectionGroupClass = compose(
|
|
8037
8048
|
background-color: transparent;
|
8038
8049
|
}
|
8039
8050
|
|
8040
|
-
|
8051
|
+
[part="internal-component"] {
|
8041
8052
|
-webkit-mask-image: none;
|
8042
8053
|
padding: 0;
|
8043
8054
|
width: 100%;
|
@@ -8077,28 +8088,245 @@ const ButtonSelectionGroupClass = compose(
|
|
8077
8088
|
|
8078
8089
|
${resetInputLabelPosition('vaadin-text-field')}
|
8079
8090
|
${resetInputCursor('vaadin-text-field')}
|
8080
|
-
|
8091
|
+
`;
|
8092
|
+
|
8093
|
+
const componentName$9 = getComponentName('button-selection-group');
|
8094
|
+
|
8095
|
+
const buttonSelectionGroupMixin = (superclass) =>
|
8096
|
+
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
8097
|
+
init() {
|
8098
|
+
super.init?.();
|
8099
|
+
const template = document.createElement('template');
|
8100
|
+
|
8101
|
+
template.innerHTML = `
|
8102
|
+
<${componentName$a}
|
8103
|
+
name="button-selection-group"
|
8104
|
+
slot="input"
|
8105
|
+
tabindex="-1"
|
8106
|
+
part="internal-component"
|
8107
|
+
>
|
8108
|
+
<slot></slot>
|
8109
|
+
</${componentName$a}>
|
8110
|
+
`;
|
8111
|
+
|
8112
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
8113
|
+
|
8114
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
8115
|
+
|
8116
|
+
forwardAttrs(this, this.inputElement, {
|
8117
|
+
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
8118
|
+
});
|
8119
|
+
}
|
8120
|
+
};
|
8121
|
+
|
8122
|
+
const ButtonSelectionGroupClass = compose(
|
8123
|
+
createStyleMixin({
|
8124
|
+
mappings: {
|
8125
|
+
...buttonSelectionGroupMappings,
|
8126
|
+
},
|
8127
|
+
}),
|
8128
|
+
draggableMixin,
|
8129
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8130
|
+
componentNameValidationMixin,
|
8131
|
+
buttonSelectionGroupBaseMixin,
|
8132
|
+
buttonSelectionGroupMixin
|
8133
|
+
)(
|
8134
|
+
createProxy({
|
8135
|
+
slots: [],
|
8136
|
+
wrappedEleName: 'vaadin-text-field',
|
8137
|
+
style: () => buttonSelectionGroupStyles,
|
8081
8138
|
excludeAttrsSync: ['tabindex'],
|
8082
|
-
componentName: componentName$
|
8139
|
+
componentName: componentName$9,
|
8083
8140
|
})
|
8084
8141
|
);
|
8085
8142
|
|
8086
8143
|
const globalRefs$5 = getThemeRefs(globals);
|
8087
|
-
|
8144
|
+
|
8145
|
+
const createBaseButtonSelectionGroupMappings = (vars) => ({
|
8146
|
+
[vars.hostDirection]: refs.direction,
|
8147
|
+
[vars.fontFamily]: refs.fontFamily,
|
8148
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
8149
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
8150
|
+
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
8151
|
+
[vars.itemsSpacing]: globalRefs$5.spacing.sm,
|
8152
|
+
[vars.hostWidth]: refs.width,
|
8153
|
+
});
|
8154
|
+
|
8155
|
+
const vars$7 = ButtonSelectionGroupClass.cssVarList;
|
8088
8156
|
|
8089
8157
|
const buttonSelectionGroup = {
|
8090
|
-
|
8091
|
-
[vars$6.fontFamily]: refs.fontFamily,
|
8092
|
-
[vars$6.labelTextColor]: refs.labelTextColor,
|
8093
|
-
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
8094
|
-
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
8095
|
-
[vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
|
8096
|
-
[vars$6.hostWidth]: refs.width,
|
8158
|
+
...createBaseButtonSelectionGroupMappings(vars$7),
|
8097
8159
|
};
|
8098
8160
|
|
8099
8161
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8100
8162
|
__proto__: null,
|
8101
8163
|
default: buttonSelectionGroup,
|
8164
|
+
vars: vars$7
|
8165
|
+
});
|
8166
|
+
|
8167
|
+
const componentName$8 = getComponentName('button-multi-selection-group-internal');
|
8168
|
+
|
8169
|
+
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
8170
|
+
componentName$8
|
8171
|
+
) {
|
8172
|
+
#getSelectedNodes() {
|
8173
|
+
return this.items.filter((item) => item.hasAttribute('selected'));
|
8174
|
+
}
|
8175
|
+
|
8176
|
+
onClick(e) {
|
8177
|
+
if (e.target !== e.currentTarget) {
|
8178
|
+
if (this.#getSelectedNodes().includes(e.target)) {
|
8179
|
+
e.target.removeAttribute('selected');
|
8180
|
+
} else {
|
8181
|
+
e.target.setAttribute('selected', 'true');
|
8182
|
+
}
|
8183
|
+
this.dispatchChange();
|
8184
|
+
}
|
8185
|
+
}
|
8186
|
+
|
8187
|
+
get value() {
|
8188
|
+
return this.#getSelectedNodes().map((node) => node.value);
|
8189
|
+
}
|
8190
|
+
|
8191
|
+
set value(values) {
|
8192
|
+
this.items.forEach((item) => {
|
8193
|
+
if (values.includes(item.value)) {
|
8194
|
+
item.setAttribute('selected', 'true');
|
8195
|
+
}
|
8196
|
+
});
|
8197
|
+
}
|
8198
|
+
|
8199
|
+
get minItemsSelection() {
|
8200
|
+
return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
|
8201
|
+
}
|
8202
|
+
|
8203
|
+
get maxItemsSelection() {
|
8204
|
+
return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
|
8205
|
+
}
|
8206
|
+
|
8207
|
+
// eslint-disable-next-line class-methods-use-this
|
8208
|
+
#isValidDataType(data) {
|
8209
|
+
const isValid = Array.isArray(data);
|
8210
|
+
if (!isValid) {
|
8211
|
+
// eslint-disable-next-line no-console
|
8212
|
+
console.error('default-values must be an array, received:', data);
|
8213
|
+
}
|
8214
|
+
|
8215
|
+
return isValid;
|
8216
|
+
}
|
8217
|
+
|
8218
|
+
get defaultValues() {
|
8219
|
+
const defaultValuesAttr = this.getAttribute('default-values');
|
8220
|
+
if (defaultValuesAttr) {
|
8221
|
+
try {
|
8222
|
+
const defaultValues = JSON.parse(defaultValuesAttr);
|
8223
|
+
if (this.#isValidDataType(defaultValues)) {
|
8224
|
+
return defaultValues;
|
8225
|
+
}
|
8226
|
+
} catch (e) {
|
8227
|
+
// eslint-disable-next-line no-console
|
8228
|
+
console.error('could not parse data string from attribute "default-values" -', e.message);
|
8229
|
+
}
|
8230
|
+
}
|
8231
|
+
return [];
|
8232
|
+
}
|
8233
|
+
|
8234
|
+
setDefaultValues() {
|
8235
|
+
// we want to defer this action until all attributes are synced
|
8236
|
+
setTimeout(() => {
|
8237
|
+
if (this.defaultValues) {
|
8238
|
+
this.value = this.defaultValues;
|
8239
|
+
this.setCustomValidity();
|
8240
|
+
}
|
8241
|
+
});
|
8242
|
+
}
|
8243
|
+
|
8244
|
+
getValidity() {
|
8245
|
+
if (this.isRequired && !this.value.length) {
|
8246
|
+
return { valueMissing: true };
|
8247
|
+
}
|
8248
|
+
// If the field is not required, no minimum selection can be set
|
8249
|
+
if (this.isRequired && this.minItemsSelection && this.value.length < this.minItemsSelection) {
|
8250
|
+
return {
|
8251
|
+
rangeUnderflow: true,
|
8252
|
+
};
|
8253
|
+
}
|
8254
|
+
if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
|
8255
|
+
return {
|
8256
|
+
rangeOverflow: true,
|
8257
|
+
};
|
8258
|
+
}
|
8259
|
+
return {};
|
8260
|
+
}
|
8261
|
+
|
8262
|
+
init() {
|
8263
|
+
super.init();
|
8264
|
+
|
8265
|
+
this.setDefaultValues();
|
8266
|
+
|
8267
|
+
this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
|
8268
|
+
}
|
8269
|
+
}
|
8270
|
+
|
8271
|
+
const componentName$7 = getComponentName('button-multi-selection-group');
|
8272
|
+
|
8273
|
+
const buttonMultiSelectionGroupMixin = (superclass) =>
|
8274
|
+
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
8275
|
+
init() {
|
8276
|
+
super.init?.();
|
8277
|
+
const template = document.createElement('template');
|
8278
|
+
|
8279
|
+
template.innerHTML = `
|
8280
|
+
<${componentName$8}
|
8281
|
+
name="button-selection-group"
|
8282
|
+
slot="input"
|
8283
|
+
tabindex="-1"
|
8284
|
+
part="internal-component"
|
8285
|
+
>
|
8286
|
+
<slot></slot>
|
8287
|
+
</${componentName$8}>
|
8288
|
+
`;
|
8289
|
+
|
8290
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
8291
|
+
|
8292
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
8293
|
+
|
8294
|
+
forwardAttrs(this, this.inputElement, {
|
8295
|
+
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
8296
|
+
});
|
8297
|
+
}
|
8298
|
+
};
|
8299
|
+
|
8300
|
+
const ButtonMultiSelectionGroupClass = compose(
|
8301
|
+
createStyleMixin({
|
8302
|
+
mappings: {
|
8303
|
+
...buttonSelectionGroupMappings,
|
8304
|
+
},
|
8305
|
+
}),
|
8306
|
+
draggableMixin,
|
8307
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
8308
|
+
componentNameValidationMixin,
|
8309
|
+
buttonSelectionGroupBaseMixin,
|
8310
|
+
buttonMultiSelectionGroupMixin
|
8311
|
+
)(
|
8312
|
+
createProxy({
|
8313
|
+
slots: [],
|
8314
|
+
wrappedEleName: 'vaadin-text-field',
|
8315
|
+
style: () => buttonSelectionGroupStyles,
|
8316
|
+
excludeAttrsSync: ['tabindex'],
|
8317
|
+
componentName: componentName$7,
|
8318
|
+
})
|
8319
|
+
);
|
8320
|
+
|
8321
|
+
const vars$6 = ButtonMultiSelectionGroupClass.cssVarList;
|
8322
|
+
|
8323
|
+
const buttonMultiSelectionGroup = {
|
8324
|
+
...createBaseButtonSelectionGroupMappings(vars$6),
|
8325
|
+
};
|
8326
|
+
|
8327
|
+
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
8328
|
+
__proto__: null,
|
8329
|
+
default: buttonMultiSelectionGroup,
|
8102
8330
|
vars: vars$6
|
8103
8331
|
});
|
8104
8332
|
|
@@ -8678,7 +8906,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
|
|
8678
8906
|
|
8679
8907
|
const componentName$3 = getComponentName('multi-select-combo-box');
|
8680
8908
|
|
8681
|
-
const
|
8909
|
+
const multiSelectComboBoxMixin = (superclass) =>
|
8682
8910
|
class MultiSelectComboBoxMixinClass extends superclass {
|
8683
8911
|
// eslint-disable-next-line class-methods-use-this
|
8684
8912
|
#renderItem = ({ displayName, value, label }) => {
|
@@ -9101,7 +9329,7 @@ const MultiSelectComboBoxClass = compose(
|
|
9101
9329
|
}),
|
9102
9330
|
composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
|
9103
9331
|
componentNameValidationMixin,
|
9104
|
-
|
9332
|
+
multiSelectComboBoxMixin
|
9105
9333
|
)(
|
9106
9334
|
createProxy({
|
9107
9335
|
slots: ['', 'prefix'],
|
@@ -9374,6 +9602,7 @@ const components = {
|
|
9374
9602
|
uploadFile: uploadFile$1,
|
9375
9603
|
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
9376
9604
|
buttonSelectionGroup: buttonSelectionGroup$1,
|
9605
|
+
buttonMultiSelectionGroup: buttonMultiSelectionGroup$1,
|
9377
9606
|
modal: modal$1,
|
9378
9607
|
grid: grid$1,
|
9379
9608
|
notificationCard,
|
@@ -9391,7 +9620,7 @@ const vars = Object.keys(components).reduce(
|
|
9391
9620
|
);
|
9392
9621
|
|
9393
9622
|
const defaultTheme = { globals, components: theme };
|
9394
|
-
const themeVars = { globals: vars$
|
9623
|
+
const themeVars = { globals: vars$x, components: vars };
|
9395
9624
|
|
9396
9625
|
const componentName$1 = getComponentName('recaptcha');
|
9397
9626
|
|
@@ -9648,6 +9877,7 @@ const NotificationClass = compose(
|
|
9648
9877
|
|
9649
9878
|
exports.BadgeClass = BadgeClass;
|
9650
9879
|
exports.ButtonClass = ButtonClass;
|
9880
|
+
exports.ButtonMultiSelectionGroupClass = ButtonMultiSelectionGroupClass;
|
9651
9881
|
exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
|
9652
9882
|
exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
|
9653
9883
|
exports.CheckboxClass = CheckboxClass;
|