@descope/web-components-ui 1.0.290 → 1.0.291
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +961 -820
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1188 -920
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +14 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +2 -2
- package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js +110 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/SamlGroupMappingsInternal.js +136 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js +3 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/index.js +10 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/samlGroupMappings.js +13 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -630,7 +630,7 @@ const globals = {
|
|
|
630
630
|
fonts,
|
|
631
631
|
direction,
|
|
632
632
|
};
|
|
633
|
-
const vars$
|
|
633
|
+
const vars$C = getThemeVars(globals);
|
|
634
634
|
|
|
635
635
|
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
|
636
636
|
|
|
@@ -2193,6 +2193,7 @@ const proxyInputMixin =
|
|
|
2193
2193
|
// allows us to set the event that should trigger validation
|
|
2194
2194
|
// it can be either a string or an array of strings (for multiple events)
|
|
2195
2195
|
inputEvent = 'input',
|
|
2196
|
+
triggerValidationEvents = [],
|
|
2196
2197
|
// Proxies all validations from the parent component to the input element
|
|
2197
2198
|
proxyParentValidation = false,
|
|
2198
2199
|
}) =>
|
|
@@ -2281,6 +2282,12 @@ const proxyInputMixin =
|
|
|
2281
2282
|
}
|
|
2282
2283
|
};
|
|
2283
2284
|
|
|
2285
|
+
triggerValidationEvents.forEach((e) => {
|
|
2286
|
+
this.baseElement?.addEventListener(e, () => {
|
|
2287
|
+
this.inputElement?.setCustomValidity('');
|
|
2288
|
+
});
|
|
2289
|
+
});
|
|
2290
|
+
|
|
2284
2291
|
// on some cases the base element is not ready so the inputElement is empty
|
|
2285
2292
|
// we are deferring this section to make sure the base element is ready
|
|
2286
2293
|
setTimeout(() => {
|
|
@@ -2569,7 +2576,7 @@ const clickableMixin = (superclass) =>
|
|
|
2569
2576
|
}
|
|
2570
2577
|
};
|
|
2571
2578
|
|
|
2572
|
-
const componentName$
|
|
2579
|
+
const componentName$L = getComponentName('button');
|
|
2573
2580
|
|
|
2574
2581
|
const resetStyles = `
|
|
2575
2582
|
:host {
|
|
@@ -2607,7 +2614,7 @@ const iconStyles = `
|
|
|
2607
2614
|
|
|
2608
2615
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
2609
2616
|
|
|
2610
|
-
const { host: host$
|
|
2617
|
+
const { host: host$l, label: label$a } = {
|
|
2611
2618
|
host: { selector: () => ':host' },
|
|
2612
2619
|
label: { selector: '::part(label)' },
|
|
2613
2620
|
};
|
|
@@ -2619,7 +2626,7 @@ const ButtonClass = compose(
|
|
|
2619
2626
|
mappings: {
|
|
2620
2627
|
hostWidth: { property: 'width' },
|
|
2621
2628
|
hostHeight: { property: 'height' },
|
|
2622
|
-
hostDirection: { ...host$
|
|
2629
|
+
hostDirection: { ...host$l, property: 'direction' },
|
|
2623
2630
|
fontSize: {},
|
|
2624
2631
|
fontFamily: {},
|
|
2625
2632
|
|
|
@@ -2671,7 +2678,7 @@ const ButtonClass = compose(
|
|
|
2671
2678
|
}
|
|
2672
2679
|
`,
|
|
2673
2680
|
excludeAttrsSync: ['tabindex'],
|
|
2674
|
-
componentName: componentName$
|
|
2681
|
+
componentName: componentName$L,
|
|
2675
2682
|
})
|
|
2676
2683
|
);
|
|
2677
2684
|
|
|
@@ -2719,7 +2726,7 @@ const mode = {
|
|
|
2719
2726
|
surface: globalRefs$k.colors.surface,
|
|
2720
2727
|
};
|
|
2721
2728
|
|
|
2722
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
2729
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$L);
|
|
2723
2730
|
|
|
2724
2731
|
const button = {
|
|
2725
2732
|
...helperTheme$3,
|
|
@@ -2826,7 +2833,7 @@ const button = {
|
|
|
2826
2833
|
},
|
|
2827
2834
|
};
|
|
2828
2835
|
|
|
2829
|
-
const vars$
|
|
2836
|
+
const vars$B = {
|
|
2830
2837
|
...compVars$5,
|
|
2831
2838
|
...helperVars$3,
|
|
2832
2839
|
};
|
|
@@ -2834,11 +2841,11 @@ const vars$A = {
|
|
|
2834
2841
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
2835
2842
|
__proto__: null,
|
|
2836
2843
|
default: button,
|
|
2837
|
-
vars: vars$
|
|
2844
|
+
vars: vars$B
|
|
2838
2845
|
});
|
|
2839
2846
|
|
|
2840
2847
|
const {
|
|
2841
|
-
host: host$
|
|
2848
|
+
host: host$k,
|
|
2842
2849
|
label: label$9,
|
|
2843
2850
|
placeholder: placeholder$3,
|
|
2844
2851
|
requiredIndicator: requiredIndicator$b,
|
|
@@ -2863,12 +2870,12 @@ const {
|
|
|
2863
2870
|
|
|
2864
2871
|
var textFieldMappings = {
|
|
2865
2872
|
// we apply font-size also on the host so we can set its width with em
|
|
2866
|
-
fontSize: [{}, host$
|
|
2873
|
+
fontSize: [{}, host$k],
|
|
2867
2874
|
fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
|
|
2868
2875
|
|
|
2869
|
-
hostWidth: { ...host$
|
|
2870
|
-
hostMinWidth: { ...host$
|
|
2871
|
-
hostDirection: { ...host$
|
|
2876
|
+
hostWidth: { ...host$k, property: 'width' },
|
|
2877
|
+
hostMinWidth: { ...host$k, property: 'min-width' },
|
|
2878
|
+
hostDirection: { ...host$k, property: 'direction' },
|
|
2872
2879
|
|
|
2873
2880
|
inputBackgroundColor: { ...inputField$6, property: 'background-color' },
|
|
2874
2881
|
|
|
@@ -3042,11 +3049,11 @@ const resetInputLabelPosition = (name) => `
|
|
|
3042
3049
|
}
|
|
3043
3050
|
`;
|
|
3044
3051
|
|
|
3045
|
-
const componentName$
|
|
3052
|
+
const componentName$K = getComponentName('text-field');
|
|
3046
3053
|
|
|
3047
3054
|
const observedAttrs = ['type'];
|
|
3048
3055
|
|
|
3049
|
-
const customMixin$
|
|
3056
|
+
const customMixin$8 = (superclass) =>
|
|
3050
3057
|
class TextFieldClass extends superclass {
|
|
3051
3058
|
static get observedAttributes() {
|
|
3052
3059
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -3073,7 +3080,7 @@ const TextFieldClass = compose(
|
|
|
3073
3080
|
draggableMixin,
|
|
3074
3081
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3075
3082
|
componentNameValidationMixin,
|
|
3076
|
-
customMixin$
|
|
3083
|
+
customMixin$8
|
|
3077
3084
|
)(
|
|
3078
3085
|
createProxy({
|
|
3079
3086
|
slots: ['prefix', 'suffix'],
|
|
@@ -3092,14 +3099,14 @@ const TextFieldClass = compose(
|
|
|
3092
3099
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
3093
3100
|
`,
|
|
3094
3101
|
excludeAttrsSync: ['tabindex'],
|
|
3095
|
-
componentName: componentName$
|
|
3102
|
+
componentName: componentName$K,
|
|
3096
3103
|
})
|
|
3097
3104
|
);
|
|
3098
3105
|
|
|
3099
|
-
const componentName$
|
|
3106
|
+
const componentName$J = getComponentName('input-wrapper');
|
|
3100
3107
|
const globalRefs$j = getThemeRefs(globals);
|
|
3101
3108
|
|
|
3102
|
-
const [theme$1, refs, vars$
|
|
3109
|
+
const [theme$1, refs, vars$A] = createHelperVars(
|
|
3103
3110
|
{
|
|
3104
3111
|
labelTextColor: globalRefs$j.colors.surface.dark,
|
|
3105
3112
|
valueTextColor: globalRefs$j.colors.surface.contrast,
|
|
@@ -3167,45 +3174,45 @@ const [theme$1, refs, vars$z] = createHelperVars(
|
|
|
3167
3174
|
backgroundColor: globalRefs$j.colors.surface.main,
|
|
3168
3175
|
},
|
|
3169
3176
|
},
|
|
3170
|
-
componentName$
|
|
3177
|
+
componentName$J
|
|
3171
3178
|
);
|
|
3172
3179
|
|
|
3173
3180
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3174
3181
|
__proto__: null,
|
|
3175
3182
|
default: theme$1,
|
|
3176
3183
|
refs: refs,
|
|
3177
|
-
vars: vars$
|
|
3184
|
+
vars: vars$A
|
|
3178
3185
|
});
|
|
3179
3186
|
|
|
3180
|
-
const vars$
|
|
3187
|
+
const vars$z = TextFieldClass.cssVarList;
|
|
3181
3188
|
|
|
3182
3189
|
const textField = {
|
|
3183
|
-
[vars$
|
|
3184
|
-
[vars$
|
|
3185
|
-
[vars$
|
|
3186
|
-
[vars$
|
|
3187
|
-
[vars$
|
|
3188
|
-
[vars$
|
|
3189
|
-
[vars$
|
|
3190
|
-
[vars$
|
|
3191
|
-
[vars$
|
|
3192
|
-
[vars$
|
|
3193
|
-
[vars$
|
|
3194
|
-
[vars$
|
|
3195
|
-
[vars$
|
|
3196
|
-
[vars$
|
|
3197
|
-
[vars$
|
|
3198
|
-
[vars$
|
|
3199
|
-
[vars$
|
|
3200
|
-
[vars$
|
|
3201
|
-
[vars$
|
|
3202
|
-
[vars$
|
|
3203
|
-
[vars$
|
|
3204
|
-
[vars$
|
|
3190
|
+
[vars$z.hostWidth]: refs.width,
|
|
3191
|
+
[vars$z.hostMinWidth]: refs.minWidth,
|
|
3192
|
+
[vars$z.hostDirection]: refs.direction,
|
|
3193
|
+
[vars$z.fontSize]: refs.fontSize,
|
|
3194
|
+
[vars$z.fontFamily]: refs.fontFamily,
|
|
3195
|
+
[vars$z.labelTextColor]: refs.labelTextColor,
|
|
3196
|
+
[vars$z.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3197
|
+
[vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3198
|
+
[vars$z.inputValueTextColor]: refs.valueTextColor,
|
|
3199
|
+
[vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3200
|
+
[vars$z.inputBorderWidth]: refs.borderWidth,
|
|
3201
|
+
[vars$z.inputBorderStyle]: refs.borderStyle,
|
|
3202
|
+
[vars$z.inputBorderColor]: refs.borderColor,
|
|
3203
|
+
[vars$z.inputBorderRadius]: refs.borderRadius,
|
|
3204
|
+
[vars$z.inputOutlineWidth]: refs.outlineWidth,
|
|
3205
|
+
[vars$z.inputOutlineStyle]: refs.outlineStyle,
|
|
3206
|
+
[vars$z.inputOutlineColor]: refs.outlineColor,
|
|
3207
|
+
[vars$z.inputOutlineOffset]: refs.outlineOffset,
|
|
3208
|
+
[vars$z.inputBackgroundColor]: refs.backgroundColor,
|
|
3209
|
+
[vars$z.inputHeight]: refs.inputHeight,
|
|
3210
|
+
[vars$z.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3211
|
+
[vars$z.helperTextColor]: refs.helperTextColor,
|
|
3205
3212
|
textAlign: {
|
|
3206
|
-
right: { [vars$
|
|
3207
|
-
left: { [vars$
|
|
3208
|
-
center: { [vars$
|
|
3213
|
+
right: { [vars$z.inputTextAlign]: 'right' },
|
|
3214
|
+
left: { [vars$z.inputTextAlign]: 'left' },
|
|
3215
|
+
center: { [vars$z.inputTextAlign]: 'center' },
|
|
3209
3216
|
},
|
|
3210
3217
|
};
|
|
3211
3218
|
|
|
@@ -3213,7 +3220,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
|
3213
3220
|
__proto__: null,
|
|
3214
3221
|
default: textField,
|
|
3215
3222
|
textField: textField,
|
|
3216
|
-
vars: vars$
|
|
3223
|
+
vars: vars$z
|
|
3217
3224
|
});
|
|
3218
3225
|
|
|
3219
3226
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -3250,10 +3257,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
3250
3257
|
}
|
|
3251
3258
|
};
|
|
3252
3259
|
|
|
3253
|
-
const componentName$
|
|
3260
|
+
const componentName$I = getComponentName('password');
|
|
3254
3261
|
|
|
3255
3262
|
const {
|
|
3256
|
-
host: host$
|
|
3263
|
+
host: host$j,
|
|
3257
3264
|
inputField: inputField$5,
|
|
3258
3265
|
inputElement: inputElement$2,
|
|
3259
3266
|
inputElementPlaceholder,
|
|
@@ -3279,10 +3286,10 @@ const {
|
|
|
3279
3286
|
const PasswordClass = compose(
|
|
3280
3287
|
createStyleMixin({
|
|
3281
3288
|
mappings: {
|
|
3282
|
-
hostWidth: { ...host$
|
|
3283
|
-
hostMinWidth: { ...host$
|
|
3284
|
-
hostDirection: { ...host$
|
|
3285
|
-
fontSize: [{}, host$
|
|
3289
|
+
hostWidth: { ...host$j, property: 'width' },
|
|
3290
|
+
hostMinWidth: { ...host$j, property: 'min-width' },
|
|
3291
|
+
hostDirection: { ...host$j, property: 'direction' },
|
|
3292
|
+
fontSize: [{}, host$j],
|
|
3286
3293
|
fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
|
|
3287
3294
|
inputHeight: { ...inputField$5, property: 'height' },
|
|
3288
3295
|
inputHorizontalPadding: [
|
|
@@ -3379,46 +3386,46 @@ const PasswordClass = compose(
|
|
|
3379
3386
|
}
|
|
3380
3387
|
`,
|
|
3381
3388
|
excludeAttrsSync: ['tabindex'],
|
|
3382
|
-
componentName: componentName$
|
|
3389
|
+
componentName: componentName$I,
|
|
3383
3390
|
})
|
|
3384
3391
|
);
|
|
3385
3392
|
|
|
3386
3393
|
const globalRefs$i = getThemeRefs(globals);
|
|
3387
|
-
const vars$
|
|
3394
|
+
const vars$y = PasswordClass.cssVarList;
|
|
3388
3395
|
|
|
3389
3396
|
const password = {
|
|
3390
|
-
[vars$
|
|
3391
|
-
[vars$
|
|
3392
|
-
[vars$
|
|
3393
|
-
[vars$
|
|
3394
|
-
[vars$
|
|
3395
|
-
[vars$
|
|
3396
|
-
[vars$
|
|
3397
|
-
[vars$
|
|
3398
|
-
[vars$
|
|
3399
|
-
[vars$
|
|
3400
|
-
[vars$
|
|
3401
|
-
[vars$
|
|
3402
|
-
[vars$
|
|
3403
|
-
[vars$
|
|
3404
|
-
[vars$
|
|
3405
|
-
[vars$
|
|
3406
|
-
[vars$
|
|
3407
|
-
[vars$
|
|
3408
|
-
[vars$
|
|
3409
|
-
[vars$
|
|
3410
|
-
[vars$
|
|
3411
|
-
[vars$
|
|
3412
|
-
[vars$
|
|
3397
|
+
[vars$y.hostWidth]: refs.width,
|
|
3398
|
+
[vars$y.hostDirection]: refs.direction,
|
|
3399
|
+
[vars$y.fontSize]: refs.fontSize,
|
|
3400
|
+
[vars$y.fontFamily]: refs.fontFamily,
|
|
3401
|
+
[vars$y.labelTextColor]: refs.labelTextColor,
|
|
3402
|
+
[vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3403
|
+
[vars$y.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3404
|
+
[vars$y.inputHeight]: refs.inputHeight,
|
|
3405
|
+
[vars$y.inputBackgroundColor]: refs.backgroundColor,
|
|
3406
|
+
[vars$y.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3407
|
+
[vars$y.inputValueTextColor]: refs.valueTextColor,
|
|
3408
|
+
[vars$y.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3409
|
+
[vars$y.inputBorderWidth]: refs.borderWidth,
|
|
3410
|
+
[vars$y.inputBorderStyle]: refs.borderStyle,
|
|
3411
|
+
[vars$y.inputBorderColor]: refs.borderColor,
|
|
3412
|
+
[vars$y.inputBorderRadius]: refs.borderRadius,
|
|
3413
|
+
[vars$y.inputOutlineWidth]: refs.outlineWidth,
|
|
3414
|
+
[vars$y.inputOutlineStyle]: refs.outlineStyle,
|
|
3415
|
+
[vars$y.inputOutlineColor]: refs.outlineColor,
|
|
3416
|
+
[vars$y.inputOutlineOffset]: refs.outlineOffset,
|
|
3417
|
+
[vars$y.revealButtonOffset]: globalRefs$i.spacing.md,
|
|
3418
|
+
[vars$y.revealButtonSize]: refs.toggleButtonSize,
|
|
3419
|
+
[vars$y.revealButtonColor]: refs.placeholderTextColor,
|
|
3413
3420
|
};
|
|
3414
3421
|
|
|
3415
3422
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
3416
3423
|
__proto__: null,
|
|
3417
3424
|
default: password,
|
|
3418
|
-
vars: vars$
|
|
3425
|
+
vars: vars$y
|
|
3419
3426
|
});
|
|
3420
3427
|
|
|
3421
|
-
const componentName$
|
|
3428
|
+
const componentName$H = getComponentName('number-field');
|
|
3422
3429
|
|
|
3423
3430
|
const NumberFieldClass = compose(
|
|
3424
3431
|
createStyleMixin({
|
|
@@ -3444,45 +3451,45 @@ const NumberFieldClass = compose(
|
|
|
3444
3451
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
3445
3452
|
`,
|
|
3446
3453
|
excludeAttrsSync: ['tabindex'],
|
|
3447
|
-
componentName: componentName$
|
|
3454
|
+
componentName: componentName$H,
|
|
3448
3455
|
})
|
|
3449
3456
|
);
|
|
3450
3457
|
|
|
3451
|
-
const vars$
|
|
3458
|
+
const vars$x = NumberFieldClass.cssVarList;
|
|
3452
3459
|
|
|
3453
3460
|
const numberField = {
|
|
3454
|
-
[vars$
|
|
3455
|
-
[vars$
|
|
3456
|
-
[vars$
|
|
3457
|
-
[vars$
|
|
3458
|
-
[vars$
|
|
3459
|
-
[vars$
|
|
3460
|
-
[vars$
|
|
3461
|
-
[vars$
|
|
3462
|
-
[vars$
|
|
3463
|
-
[vars$
|
|
3464
|
-
[vars$
|
|
3465
|
-
[vars$
|
|
3466
|
-
[vars$
|
|
3467
|
-
[vars$
|
|
3468
|
-
[vars$
|
|
3469
|
-
[vars$
|
|
3470
|
-
[vars$
|
|
3471
|
-
[vars$
|
|
3472
|
-
[vars$
|
|
3473
|
-
[vars$
|
|
3474
|
-
[vars$
|
|
3461
|
+
[vars$x.hostWidth]: refs.width,
|
|
3462
|
+
[vars$x.hostMinWidth]: refs.minWidth,
|
|
3463
|
+
[vars$x.hostDirection]: refs.direction,
|
|
3464
|
+
[vars$x.fontSize]: refs.fontSize,
|
|
3465
|
+
[vars$x.fontFamily]: refs.fontFamily,
|
|
3466
|
+
[vars$x.labelTextColor]: refs.labelTextColor,
|
|
3467
|
+
[vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3468
|
+
[vars$x.inputValueTextColor]: refs.valueTextColor,
|
|
3469
|
+
[vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3470
|
+
[vars$x.inputBorderWidth]: refs.borderWidth,
|
|
3471
|
+
[vars$x.inputBorderStyle]: refs.borderStyle,
|
|
3472
|
+
[vars$x.inputBorderColor]: refs.borderColor,
|
|
3473
|
+
[vars$x.inputBorderRadius]: refs.borderRadius,
|
|
3474
|
+
[vars$x.inputOutlineWidth]: refs.outlineWidth,
|
|
3475
|
+
[vars$x.inputOutlineStyle]: refs.outlineStyle,
|
|
3476
|
+
[vars$x.inputOutlineColor]: refs.outlineColor,
|
|
3477
|
+
[vars$x.inputOutlineOffset]: refs.outlineOffset,
|
|
3478
|
+
[vars$x.inputBackgroundColor]: refs.backgroundColor,
|
|
3479
|
+
[vars$x.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3480
|
+
[vars$x.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3481
|
+
[vars$x.inputHeight]: refs.inputHeight,
|
|
3475
3482
|
};
|
|
3476
3483
|
|
|
3477
3484
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
3478
3485
|
__proto__: null,
|
|
3479
3486
|
default: numberField,
|
|
3480
|
-
vars: vars$
|
|
3487
|
+
vars: vars$x
|
|
3481
3488
|
});
|
|
3482
3489
|
|
|
3483
|
-
const componentName$
|
|
3490
|
+
const componentName$G = getComponentName('email-field');
|
|
3484
3491
|
|
|
3485
|
-
const customMixin$
|
|
3492
|
+
const customMixin$7 = (superclass) =>
|
|
3486
3493
|
class EmailFieldMixinClass extends superclass {
|
|
3487
3494
|
init() {
|
|
3488
3495
|
super.init?.();
|
|
@@ -3496,7 +3503,7 @@ const EmailFieldClass = compose(
|
|
|
3496
3503
|
draggableMixin,
|
|
3497
3504
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
3498
3505
|
componentNameValidationMixin,
|
|
3499
|
-
customMixin$
|
|
3506
|
+
customMixin$7
|
|
3500
3507
|
)(
|
|
3501
3508
|
createProxy({
|
|
3502
3509
|
slots: ['', 'suffix'],
|
|
@@ -3515,46 +3522,46 @@ const EmailFieldClass = compose(
|
|
|
3515
3522
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
3516
3523
|
`,
|
|
3517
3524
|
excludeAttrsSync: ['tabindex'],
|
|
3518
|
-
componentName: componentName$
|
|
3525
|
+
componentName: componentName$G,
|
|
3519
3526
|
})
|
|
3520
3527
|
);
|
|
3521
3528
|
|
|
3522
|
-
const vars$
|
|
3529
|
+
const vars$w = EmailFieldClass.cssVarList;
|
|
3523
3530
|
|
|
3524
3531
|
const emailField = {
|
|
3525
|
-
[vars$
|
|
3526
|
-
[vars$
|
|
3527
|
-
[vars$
|
|
3528
|
-
[vars$
|
|
3529
|
-
[vars$
|
|
3530
|
-
[vars$
|
|
3531
|
-
[vars$
|
|
3532
|
-
[vars$
|
|
3533
|
-
[vars$
|
|
3534
|
-
[vars$
|
|
3535
|
-
[vars$
|
|
3536
|
-
[vars$
|
|
3537
|
-
[vars$
|
|
3538
|
-
[vars$
|
|
3539
|
-
[vars$
|
|
3540
|
-
[vars$
|
|
3541
|
-
[vars$
|
|
3542
|
-
[vars$
|
|
3543
|
-
[vars$
|
|
3544
|
-
[vars$
|
|
3545
|
-
[vars$
|
|
3532
|
+
[vars$w.hostWidth]: refs.width,
|
|
3533
|
+
[vars$w.hostMinWidth]: refs.minWidth,
|
|
3534
|
+
[vars$w.hostDirection]: refs.direction,
|
|
3535
|
+
[vars$w.fontSize]: refs.fontSize,
|
|
3536
|
+
[vars$w.fontFamily]: refs.fontFamily,
|
|
3537
|
+
[vars$w.labelTextColor]: refs.labelTextColor,
|
|
3538
|
+
[vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3539
|
+
[vars$w.inputValueTextColor]: refs.valueTextColor,
|
|
3540
|
+
[vars$w.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3541
|
+
[vars$w.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
3542
|
+
[vars$w.inputBorderWidth]: refs.borderWidth,
|
|
3543
|
+
[vars$w.inputBorderStyle]: refs.borderStyle,
|
|
3544
|
+
[vars$w.inputBorderColor]: refs.borderColor,
|
|
3545
|
+
[vars$w.inputBorderRadius]: refs.borderRadius,
|
|
3546
|
+
[vars$w.inputOutlineWidth]: refs.outlineWidth,
|
|
3547
|
+
[vars$w.inputOutlineStyle]: refs.outlineStyle,
|
|
3548
|
+
[vars$w.inputOutlineColor]: refs.outlineColor,
|
|
3549
|
+
[vars$w.inputOutlineOffset]: refs.outlineOffset,
|
|
3550
|
+
[vars$w.inputBackgroundColor]: refs.backgroundColor,
|
|
3551
|
+
[vars$w.inputHorizontalPadding]: refs.horizontalPadding,
|
|
3552
|
+
[vars$w.inputHeight]: refs.inputHeight,
|
|
3546
3553
|
};
|
|
3547
3554
|
|
|
3548
3555
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
3549
3556
|
__proto__: null,
|
|
3550
3557
|
default: emailField,
|
|
3551
|
-
vars: vars$
|
|
3558
|
+
vars: vars$w
|
|
3552
3559
|
});
|
|
3553
3560
|
|
|
3554
|
-
const componentName$
|
|
3561
|
+
const componentName$F = getComponentName('text-area');
|
|
3555
3562
|
|
|
3556
3563
|
const {
|
|
3557
|
-
host: host$
|
|
3564
|
+
host: host$i,
|
|
3558
3565
|
label: label$7,
|
|
3559
3566
|
placeholder: placeholder$2,
|
|
3560
3567
|
inputField: inputField$4,
|
|
@@ -3576,10 +3583,10 @@ const {
|
|
|
3576
3583
|
const TextAreaClass = compose(
|
|
3577
3584
|
createStyleMixin({
|
|
3578
3585
|
mappings: {
|
|
3579
|
-
hostWidth: { ...host$
|
|
3580
|
-
hostMinWidth: { ...host$
|
|
3581
|
-
hostDirection: { ...host$
|
|
3582
|
-
fontSize: [host$
|
|
3586
|
+
hostWidth: { ...host$i, property: 'width' },
|
|
3587
|
+
hostMinWidth: { ...host$i, property: 'min-width' },
|
|
3588
|
+
hostDirection: { ...host$i, property: 'direction' },
|
|
3589
|
+
fontSize: [host$i, textArea$2],
|
|
3583
3590
|
fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
|
|
3584
3591
|
labelTextColor: [
|
|
3585
3592
|
{ ...label$7, property: 'color' },
|
|
@@ -3627,49 +3634,49 @@ const TextAreaClass = compose(
|
|
|
3627
3634
|
${resetInputCursor('vaadin-text-area')}
|
|
3628
3635
|
`,
|
|
3629
3636
|
excludeAttrsSync: ['tabindex'],
|
|
3630
|
-
componentName: componentName$
|
|
3637
|
+
componentName: componentName$F,
|
|
3631
3638
|
})
|
|
3632
3639
|
);
|
|
3633
3640
|
|
|
3634
|
-
const vars$
|
|
3641
|
+
const vars$v = TextAreaClass.cssVarList;
|
|
3635
3642
|
|
|
3636
3643
|
const textArea = {
|
|
3637
|
-
[vars$
|
|
3638
|
-
[vars$
|
|
3639
|
-
[vars$
|
|
3640
|
-
[vars$
|
|
3641
|
-
[vars$
|
|
3642
|
-
[vars$
|
|
3643
|
-
[vars$
|
|
3644
|
-
[vars$
|
|
3645
|
-
[vars$
|
|
3646
|
-
[vars$
|
|
3647
|
-
[vars$
|
|
3648
|
-
[vars$
|
|
3649
|
-
[vars$
|
|
3650
|
-
[vars$
|
|
3651
|
-
[vars$
|
|
3652
|
-
[vars$
|
|
3653
|
-
[vars$
|
|
3654
|
-
[vars$
|
|
3655
|
-
[vars$
|
|
3656
|
-
[vars$
|
|
3657
|
-
[vars$
|
|
3644
|
+
[vars$v.hostWidth]: refs.width,
|
|
3645
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
|
3646
|
+
[vars$v.hostDirection]: refs.direction,
|
|
3647
|
+
[vars$v.fontSize]: refs.fontSize,
|
|
3648
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
|
3649
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
|
3650
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3651
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3652
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
|
3653
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
|
3654
|
+
[vars$v.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
3655
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
|
3656
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
|
3657
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
|
3658
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
|
3659
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
|
3660
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
|
3661
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
|
3662
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
|
3663
|
+
[vars$v.inputResizeType]: 'vertical',
|
|
3664
|
+
[vars$v.inputMinHeight]: '5em',
|
|
3658
3665
|
textAlign: {
|
|
3659
|
-
right: { [vars$
|
|
3660
|
-
left: { [vars$
|
|
3661
|
-
center: { [vars$
|
|
3666
|
+
right: { [vars$v.inputTextAlign]: 'right' },
|
|
3667
|
+
left: { [vars$v.inputTextAlign]: 'left' },
|
|
3668
|
+
center: { [vars$v.inputTextAlign]: 'center' },
|
|
3662
3669
|
},
|
|
3663
3670
|
|
|
3664
3671
|
_readonly: {
|
|
3665
|
-
[vars$
|
|
3672
|
+
[vars$v.inputResizeType]: 'none',
|
|
3666
3673
|
},
|
|
3667
3674
|
};
|
|
3668
3675
|
|
|
3669
3676
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
3670
3677
|
__proto__: null,
|
|
3671
3678
|
default: textArea,
|
|
3672
|
-
vars: vars$
|
|
3679
|
+
vars: vars$v
|
|
3673
3680
|
});
|
|
3674
3681
|
|
|
3675
3682
|
const createBaseInputClass = (...args) =>
|
|
@@ -3680,9 +3687,9 @@ const createBaseInputClass = (...args) =>
|
|
|
3680
3687
|
inputEventsDispatchingMixin
|
|
3681
3688
|
)(createBaseClass(...args));
|
|
3682
3689
|
|
|
3683
|
-
const componentName$
|
|
3690
|
+
const componentName$E = getComponentName('boolean-field-internal');
|
|
3684
3691
|
|
|
3685
|
-
createBaseInputClass({ componentName: componentName$
|
|
3692
|
+
createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
|
|
3686
3693
|
|
|
3687
3694
|
const booleanFieldMixin = (superclass) =>
|
|
3688
3695
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -3691,14 +3698,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
3691
3698
|
|
|
3692
3699
|
const template = document.createElement('template');
|
|
3693
3700
|
template.innerHTML = `
|
|
3694
|
-
<${componentName$
|
|
3701
|
+
<${componentName$E}
|
|
3695
3702
|
tabindex="-1"
|
|
3696
3703
|
slot="input"
|
|
3697
|
-
></${componentName$
|
|
3704
|
+
></${componentName$E}>
|
|
3698
3705
|
`;
|
|
3699
3706
|
|
|
3700
3707
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3701
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3708
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$E);
|
|
3702
3709
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
3703
3710
|
|
|
3704
3711
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -3768,10 +3775,10 @@ descope-boolean-field-internal {
|
|
|
3768
3775
|
}
|
|
3769
3776
|
`;
|
|
3770
3777
|
|
|
3771
|
-
const componentName$
|
|
3778
|
+
const componentName$D = getComponentName('checkbox');
|
|
3772
3779
|
|
|
3773
3780
|
const {
|
|
3774
|
-
host: host$
|
|
3781
|
+
host: host$h,
|
|
3775
3782
|
component: component$1,
|
|
3776
3783
|
checkboxElement,
|
|
3777
3784
|
checkboxSurface,
|
|
@@ -3793,10 +3800,10 @@ const {
|
|
|
3793
3800
|
const CheckboxClass = compose(
|
|
3794
3801
|
createStyleMixin({
|
|
3795
3802
|
mappings: {
|
|
3796
|
-
hostWidth: { ...host$
|
|
3797
|
-
hostDirection: { ...host$
|
|
3803
|
+
hostWidth: { ...host$h, property: 'width' },
|
|
3804
|
+
hostDirection: { ...host$h, property: 'direction' },
|
|
3798
3805
|
|
|
3799
|
-
fontSize: [host$
|
|
3806
|
+
fontSize: [host$h, checkboxElement, checkboxLabel$1],
|
|
3800
3807
|
fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
|
|
3801
3808
|
|
|
3802
3809
|
labelTextColor: { ...checkboxLabel$1, property: 'color' },
|
|
@@ -3874,54 +3881,54 @@ const CheckboxClass = compose(
|
|
|
3874
3881
|
}
|
|
3875
3882
|
`,
|
|
3876
3883
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
3877
|
-
componentName: componentName$
|
|
3884
|
+
componentName: componentName$D,
|
|
3878
3885
|
})
|
|
3879
3886
|
);
|
|
3880
3887
|
|
|
3881
|
-
const vars$
|
|
3888
|
+
const vars$u = CheckboxClass.cssVarList;
|
|
3882
3889
|
const checkboxSize = '1.35em';
|
|
3883
3890
|
|
|
3884
3891
|
const checkbox = {
|
|
3885
|
-
[vars$
|
|
3886
|
-
[vars$
|
|
3887
|
-
[vars$
|
|
3888
|
-
[vars$
|
|
3889
|
-
[vars$
|
|
3890
|
-
[vars$
|
|
3891
|
-
[vars$
|
|
3892
|
-
[vars$
|
|
3893
|
-
[vars$
|
|
3894
|
-
[vars$
|
|
3895
|
-
[vars$
|
|
3896
|
-
[vars$
|
|
3897
|
-
[vars$
|
|
3898
|
-
[vars$
|
|
3899
|
-
[vars$
|
|
3900
|
-
[vars$
|
|
3901
|
-
[vars$
|
|
3902
|
-
[vars$
|
|
3903
|
-
[vars$
|
|
3904
|
-
[vars$
|
|
3892
|
+
[vars$u.hostWidth]: refs.width,
|
|
3893
|
+
[vars$u.hostDirection]: refs.direction,
|
|
3894
|
+
[vars$u.fontSize]: refs.fontSize,
|
|
3895
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
|
3896
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
3897
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3898
|
+
[vars$u.labelFontWeight]: '400',
|
|
3899
|
+
[vars$u.labelLineHeight]: checkboxSize,
|
|
3900
|
+
[vars$u.labelSpacing]: '1em',
|
|
3901
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3902
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
|
3903
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
|
3904
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
|
3905
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
|
3906
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
|
3907
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
|
3908
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
|
3909
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
|
3910
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
|
3911
|
+
[vars$u.inputSize]: checkboxSize,
|
|
3905
3912
|
|
|
3906
3913
|
_checked: {
|
|
3907
|
-
[vars$
|
|
3914
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
|
3908
3915
|
},
|
|
3909
3916
|
|
|
3910
3917
|
_disabled: {
|
|
3911
|
-
[vars$
|
|
3918
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
|
3912
3919
|
},
|
|
3913
3920
|
};
|
|
3914
3921
|
|
|
3915
3922
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
3916
3923
|
__proto__: null,
|
|
3917
3924
|
default: checkbox,
|
|
3918
|
-
vars: vars$
|
|
3925
|
+
vars: vars$u
|
|
3919
3926
|
});
|
|
3920
3927
|
|
|
3921
|
-
const componentName$
|
|
3928
|
+
const componentName$C = getComponentName('switch-toggle');
|
|
3922
3929
|
|
|
3923
3930
|
const {
|
|
3924
|
-
host: host$
|
|
3931
|
+
host: host$g,
|
|
3925
3932
|
component,
|
|
3926
3933
|
checkboxElement: track,
|
|
3927
3934
|
checkboxSurface: knob,
|
|
@@ -3943,8 +3950,8 @@ const {
|
|
|
3943
3950
|
const SwitchToggleClass = compose(
|
|
3944
3951
|
createStyleMixin({
|
|
3945
3952
|
mappings: {
|
|
3946
|
-
hostWidth: { ...host$
|
|
3947
|
-
hostDirection: { ...host$
|
|
3953
|
+
hostWidth: { ...host$g, property: 'width' },
|
|
3954
|
+
hostDirection: { ...host$g, property: 'direction' },
|
|
3948
3955
|
|
|
3949
3956
|
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
3950
3957
|
fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
|
|
@@ -4050,7 +4057,7 @@ const SwitchToggleClass = compose(
|
|
|
4050
4057
|
}
|
|
4051
4058
|
`,
|
|
4052
4059
|
excludeAttrsSync: ['label', 'tabindex'],
|
|
4053
|
-
componentName: componentName$
|
|
4060
|
+
componentName: componentName$C,
|
|
4054
4061
|
})
|
|
4055
4062
|
);
|
|
4056
4063
|
|
|
@@ -4058,74 +4065,74 @@ const knobMargin = '2px';
|
|
|
4058
4065
|
const checkboxHeight = '1.25em';
|
|
4059
4066
|
|
|
4060
4067
|
const globalRefs$h = getThemeRefs(globals);
|
|
4061
|
-
const vars$
|
|
4068
|
+
const vars$t = SwitchToggleClass.cssVarList;
|
|
4062
4069
|
|
|
4063
4070
|
const switchToggle = {
|
|
4064
|
-
[vars$
|
|
4065
|
-
[vars$
|
|
4066
|
-
[vars$
|
|
4067
|
-
[vars$
|
|
4068
|
-
|
|
4069
|
-
[vars$
|
|
4070
|
-
[vars$
|
|
4071
|
-
[vars$
|
|
4072
|
-
[vars$
|
|
4073
|
-
|
|
4074
|
-
[vars$
|
|
4075
|
-
[vars$
|
|
4076
|
-
[vars$
|
|
4077
|
-
[vars$
|
|
4078
|
-
[vars$
|
|
4079
|
-
[vars$
|
|
4080
|
-
[vars$
|
|
4081
|
-
|
|
4082
|
-
[vars$
|
|
4083
|
-
[vars$
|
|
4084
|
-
[vars$
|
|
4085
|
-
[vars$
|
|
4086
|
-
[vars$
|
|
4087
|
-
[vars$
|
|
4088
|
-
|
|
4089
|
-
[vars$
|
|
4090
|
-
[vars$
|
|
4091
|
-
[vars$
|
|
4092
|
-
[vars$
|
|
4093
|
-
[vars$
|
|
4094
|
-
[vars$
|
|
4071
|
+
[vars$t.hostWidth]: refs.width,
|
|
4072
|
+
[vars$t.hostDirection]: refs.direction,
|
|
4073
|
+
[vars$t.fontSize]: refs.fontSize,
|
|
4074
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
|
4075
|
+
|
|
4076
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
|
4077
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
|
4078
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
|
4079
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
|
4080
|
+
|
|
4081
|
+
[vars$t.trackBorderStyle]: refs.borderStyle,
|
|
4082
|
+
[vars$t.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
4083
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
|
4084
|
+
[vars$t.trackBackgroundColor]: refs.backgroundColor,
|
|
4085
|
+
[vars$t.trackBorderRadius]: globalRefs$h.radius.md,
|
|
4086
|
+
[vars$t.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
4087
|
+
[vars$t.trackHeight]: checkboxHeight,
|
|
4088
|
+
|
|
4089
|
+
[vars$t.knobSize]: `calc(1em - ${knobMargin})`,
|
|
4090
|
+
[vars$t.knobRadius]: '50%',
|
|
4091
|
+
[vars$t.knobTopOffset]: '1px',
|
|
4092
|
+
[vars$t.knobLeftOffset]: knobMargin,
|
|
4093
|
+
[vars$t.knobColor]: refs.labelTextColor,
|
|
4094
|
+
[vars$t.knobTransitionDuration]: '0.3s',
|
|
4095
|
+
|
|
4096
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
4097
|
+
[vars$t.labelFontWeight]: '400',
|
|
4098
|
+
[vars$t.labelLineHeight]: '1.35em',
|
|
4099
|
+
[vars$t.labelSpacing]: '1em',
|
|
4100
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4101
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4095
4102
|
|
|
4096
4103
|
_checked: {
|
|
4097
|
-
[vars$
|
|
4098
|
-
[vars$
|
|
4099
|
-
[vars$
|
|
4100
|
-
[vars$
|
|
4104
|
+
[vars$t.trackBorderColor]: refs.borderColor,
|
|
4105
|
+
[vars$t.knobLeftOffset]: `calc(100% - var(${vars$t.knobSize}) - ${knobMargin})`,
|
|
4106
|
+
[vars$t.knobColor]: refs.valueTextColor,
|
|
4107
|
+
[vars$t.knobTextColor]: refs.valueTextColor,
|
|
4101
4108
|
},
|
|
4102
4109
|
|
|
4103
4110
|
_disabled: {
|
|
4104
|
-
[vars$
|
|
4105
|
-
[vars$
|
|
4106
|
-
[vars$
|
|
4107
|
-
[vars$
|
|
4111
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
|
4112
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.surface.light,
|
|
4113
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4114
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
|
4108
4115
|
_checked: {
|
|
4109
|
-
[vars$
|
|
4110
|
-
[vars$
|
|
4116
|
+
[vars$t.knobColor]: globalRefs$h.colors.surface.light,
|
|
4117
|
+
[vars$t.trackBackgroundColor]: globalRefs$h.colors.surface.main,
|
|
4111
4118
|
},
|
|
4112
4119
|
},
|
|
4113
4120
|
|
|
4114
4121
|
_invalid: {
|
|
4115
|
-
[vars$
|
|
4116
|
-
[vars$
|
|
4122
|
+
[vars$t.trackBorderColor]: globalRefs$h.colors.error.main,
|
|
4123
|
+
[vars$t.knobColor]: globalRefs$h.colors.error.main,
|
|
4117
4124
|
},
|
|
4118
4125
|
};
|
|
4119
4126
|
|
|
4120
4127
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
4121
4128
|
__proto__: null,
|
|
4122
4129
|
default: switchToggle,
|
|
4123
|
-
vars: vars$
|
|
4130
|
+
vars: vars$t
|
|
4124
4131
|
});
|
|
4125
4132
|
|
|
4126
|
-
const componentName$
|
|
4133
|
+
const componentName$B = getComponentName('container');
|
|
4127
4134
|
|
|
4128
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
4135
|
+
class RawContainer extends createBaseClass({ componentName: componentName$B, baseSelector: 'slot' }) {
|
|
4129
4136
|
constructor() {
|
|
4130
4137
|
super();
|
|
4131
4138
|
|
|
@@ -4200,7 +4207,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
4200
4207
|
horizontalAlignment,
|
|
4201
4208
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
4202
4209
|
},
|
|
4203
|
-
componentName$
|
|
4210
|
+
componentName$B
|
|
4204
4211
|
);
|
|
4205
4212
|
|
|
4206
4213
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
|
@@ -4286,7 +4293,7 @@ const container = {
|
|
|
4286
4293
|
},
|
|
4287
4294
|
};
|
|
4288
4295
|
|
|
4289
|
-
const vars$
|
|
4296
|
+
const vars$s = {
|
|
4290
4297
|
...compVars$4,
|
|
4291
4298
|
...helperVars$2,
|
|
4292
4299
|
};
|
|
@@ -4294,7 +4301,7 @@ const vars$r = {
|
|
|
4294
4301
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
4295
4302
|
__proto__: null,
|
|
4296
4303
|
default: container,
|
|
4297
|
-
vars: vars$
|
|
4304
|
+
vars: vars$s
|
|
4298
4305
|
});
|
|
4299
4306
|
|
|
4300
4307
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -4347,71 +4354,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
4347
4354
|
return CssVarImageClass;
|
|
4348
4355
|
};
|
|
4349
4356
|
|
|
4350
|
-
const componentName$
|
|
4357
|
+
const componentName$A = getComponentName('logo');
|
|
4351
4358
|
|
|
4352
4359
|
const LogoClass = createCssVarImageClass({
|
|
4353
|
-
componentName: componentName$
|
|
4360
|
+
componentName: componentName$A,
|
|
4354
4361
|
varName: 'url',
|
|
4355
4362
|
fallbackVarName: 'fallbackUrl',
|
|
4356
4363
|
});
|
|
4357
4364
|
|
|
4358
|
-
const vars$
|
|
4365
|
+
const vars$r = LogoClass.cssVarList;
|
|
4359
4366
|
|
|
4360
4367
|
const logo$2 = {
|
|
4361
|
-
[vars$
|
|
4368
|
+
[vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
4362
4369
|
};
|
|
4363
4370
|
|
|
4364
4371
|
var logo$3 = /*#__PURE__*/Object.freeze({
|
|
4365
4372
|
__proto__: null,
|
|
4366
4373
|
default: logo$2,
|
|
4367
|
-
vars: vars$
|
|
4374
|
+
vars: vars$r
|
|
4368
4375
|
});
|
|
4369
4376
|
|
|
4370
|
-
const componentName$
|
|
4377
|
+
const componentName$z = getComponentName('totp-image');
|
|
4371
4378
|
|
|
4372
4379
|
const TotpImageClass = createCssVarImageClass({
|
|
4373
|
-
componentName: componentName$
|
|
4380
|
+
componentName: componentName$z,
|
|
4374
4381
|
varName: 'url',
|
|
4375
4382
|
fallbackVarName: 'fallbackUrl',
|
|
4376
4383
|
});
|
|
4377
4384
|
|
|
4378
|
-
const vars$
|
|
4385
|
+
const vars$q = TotpImageClass.cssVarList;
|
|
4379
4386
|
|
|
4380
4387
|
const logo$1 = {
|
|
4381
|
-
[vars$
|
|
4388
|
+
[vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
4382
4389
|
};
|
|
4383
4390
|
|
|
4384
4391
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
4385
4392
|
__proto__: null,
|
|
4386
4393
|
default: logo$1,
|
|
4387
|
-
vars: vars$
|
|
4394
|
+
vars: vars$q
|
|
4388
4395
|
});
|
|
4389
4396
|
|
|
4390
|
-
const componentName$
|
|
4397
|
+
const componentName$y = getComponentName('notp-image');
|
|
4391
4398
|
|
|
4392
4399
|
const NotpImageClass = createCssVarImageClass({
|
|
4393
|
-
componentName: componentName$
|
|
4400
|
+
componentName: componentName$y,
|
|
4394
4401
|
varName: 'url',
|
|
4395
4402
|
fallbackVarName: 'fallbackUrl',
|
|
4396
4403
|
});
|
|
4397
4404
|
|
|
4398
|
-
const vars$
|
|
4405
|
+
const vars$p = NotpImageClass.cssVarList;
|
|
4399
4406
|
|
|
4400
4407
|
const logo = {
|
|
4401
|
-
[vars$
|
|
4408
|
+
[vars$p.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
|
4402
4409
|
};
|
|
4403
4410
|
|
|
4404
4411
|
var notpImage = /*#__PURE__*/Object.freeze({
|
|
4405
4412
|
__proto__: null,
|
|
4406
4413
|
default: logo,
|
|
4407
|
-
vars: vars$
|
|
4414
|
+
vars: vars$p
|
|
4408
4415
|
});
|
|
4409
4416
|
|
|
4410
4417
|
// eslint-disable-next-line max-classes-per-file
|
|
4411
4418
|
|
|
4412
|
-
const componentName$
|
|
4419
|
+
const componentName$x = getComponentName('text');
|
|
4413
4420
|
|
|
4414
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
4421
|
+
class RawText extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > slot' }) {
|
|
4415
4422
|
constructor() {
|
|
4416
4423
|
super();
|
|
4417
4424
|
|
|
@@ -4472,98 +4479,98 @@ const TextClass = compose(
|
|
|
4472
4479
|
)(RawText);
|
|
4473
4480
|
|
|
4474
4481
|
const globalRefs$f = getThemeRefs(globals);
|
|
4475
|
-
const vars$
|
|
4482
|
+
const vars$o = TextClass.cssVarList;
|
|
4476
4483
|
|
|
4477
4484
|
const text$2 = {
|
|
4478
|
-
[vars$
|
|
4479
|
-
[vars$
|
|
4480
|
-
[vars$
|
|
4481
|
-
[vars$
|
|
4485
|
+
[vars$o.hostDirection]: globalRefs$f.direction,
|
|
4486
|
+
[vars$o.textLineHeight]: '1.35em',
|
|
4487
|
+
[vars$o.textAlign]: 'left',
|
|
4488
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
|
4482
4489
|
variant: {
|
|
4483
4490
|
h1: {
|
|
4484
|
-
[vars$
|
|
4485
|
-
[vars$
|
|
4486
|
-
[vars$
|
|
4491
|
+
[vars$o.fontSize]: globalRefs$f.typography.h1.size,
|
|
4492
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h1.weight,
|
|
4493
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h1.font,
|
|
4487
4494
|
},
|
|
4488
4495
|
h2: {
|
|
4489
|
-
[vars$
|
|
4490
|
-
[vars$
|
|
4491
|
-
[vars$
|
|
4496
|
+
[vars$o.fontSize]: globalRefs$f.typography.h2.size,
|
|
4497
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h2.weight,
|
|
4498
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h2.font,
|
|
4492
4499
|
},
|
|
4493
4500
|
h3: {
|
|
4494
|
-
[vars$
|
|
4495
|
-
[vars$
|
|
4496
|
-
[vars$
|
|
4501
|
+
[vars$o.fontSize]: globalRefs$f.typography.h3.size,
|
|
4502
|
+
[vars$o.fontWeight]: globalRefs$f.typography.h3.weight,
|
|
4503
|
+
[vars$o.fontFamily]: globalRefs$f.typography.h3.font,
|
|
4497
4504
|
},
|
|
4498
4505
|
subtitle1: {
|
|
4499
|
-
[vars$
|
|
4500
|
-
[vars$
|
|
4501
|
-
[vars$
|
|
4506
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle1.size,
|
|
4507
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle1.weight,
|
|
4508
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle1.font,
|
|
4502
4509
|
},
|
|
4503
4510
|
subtitle2: {
|
|
4504
|
-
[vars$
|
|
4505
|
-
[vars$
|
|
4506
|
-
[vars$
|
|
4511
|
+
[vars$o.fontSize]: globalRefs$f.typography.subtitle2.size,
|
|
4512
|
+
[vars$o.fontWeight]: globalRefs$f.typography.subtitle2.weight,
|
|
4513
|
+
[vars$o.fontFamily]: globalRefs$f.typography.subtitle2.font,
|
|
4507
4514
|
},
|
|
4508
4515
|
body1: {
|
|
4509
|
-
[vars$
|
|
4510
|
-
[vars$
|
|
4511
|
-
[vars$
|
|
4516
|
+
[vars$o.fontSize]: globalRefs$f.typography.body1.size,
|
|
4517
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body1.weight,
|
|
4518
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body1.font,
|
|
4512
4519
|
},
|
|
4513
4520
|
body2: {
|
|
4514
|
-
[vars$
|
|
4515
|
-
[vars$
|
|
4516
|
-
[vars$
|
|
4521
|
+
[vars$o.fontSize]: globalRefs$f.typography.body2.size,
|
|
4522
|
+
[vars$o.fontWeight]: globalRefs$f.typography.body2.weight,
|
|
4523
|
+
[vars$o.fontFamily]: globalRefs$f.typography.body2.font,
|
|
4517
4524
|
},
|
|
4518
4525
|
},
|
|
4519
4526
|
|
|
4520
4527
|
mode: {
|
|
4521
4528
|
primary: {
|
|
4522
|
-
[vars$
|
|
4529
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.contrast,
|
|
4523
4530
|
},
|
|
4524
4531
|
secondary: {
|
|
4525
|
-
[vars$
|
|
4532
|
+
[vars$o.textColor]: globalRefs$f.colors.surface.dark,
|
|
4526
4533
|
},
|
|
4527
4534
|
error: {
|
|
4528
|
-
[vars$
|
|
4535
|
+
[vars$o.textColor]: globalRefs$f.colors.error.main,
|
|
4529
4536
|
},
|
|
4530
4537
|
success: {
|
|
4531
|
-
[vars$
|
|
4538
|
+
[vars$o.textColor]: globalRefs$f.colors.success.main,
|
|
4532
4539
|
},
|
|
4533
4540
|
},
|
|
4534
4541
|
|
|
4535
4542
|
textAlign: {
|
|
4536
|
-
right: { [vars$
|
|
4537
|
-
left: { [vars$
|
|
4538
|
-
center: { [vars$
|
|
4543
|
+
right: { [vars$o.textAlign]: 'right' },
|
|
4544
|
+
left: { [vars$o.textAlign]: 'left' },
|
|
4545
|
+
center: { [vars$o.textAlign]: 'center' },
|
|
4539
4546
|
},
|
|
4540
4547
|
|
|
4541
4548
|
_fullWidth: {
|
|
4542
|
-
[vars$
|
|
4549
|
+
[vars$o.hostWidth]: '100%',
|
|
4543
4550
|
},
|
|
4544
4551
|
|
|
4545
4552
|
_italic: {
|
|
4546
|
-
[vars$
|
|
4553
|
+
[vars$o.fontStyle]: 'italic',
|
|
4547
4554
|
},
|
|
4548
4555
|
|
|
4549
4556
|
_uppercase: {
|
|
4550
|
-
[vars$
|
|
4557
|
+
[vars$o.textTransform]: 'uppercase',
|
|
4551
4558
|
},
|
|
4552
4559
|
|
|
4553
4560
|
_lowercase: {
|
|
4554
|
-
[vars$
|
|
4561
|
+
[vars$o.textTransform]: 'lowercase',
|
|
4555
4562
|
},
|
|
4556
4563
|
};
|
|
4557
4564
|
|
|
4558
4565
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
4559
4566
|
__proto__: null,
|
|
4560
4567
|
default: text$2,
|
|
4561
|
-
vars: vars$
|
|
4568
|
+
vars: vars$o
|
|
4562
4569
|
});
|
|
4563
4570
|
|
|
4564
|
-
const componentName$
|
|
4571
|
+
const componentName$w = getComponentName('link');
|
|
4565
4572
|
|
|
4566
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
4573
|
+
class RawLink extends createBaseClass({ componentName: componentName$w, baseSelector: ':host a' }) {
|
|
4567
4574
|
constructor() {
|
|
4568
4575
|
super();
|
|
4569
4576
|
|
|
@@ -4609,12 +4616,12 @@ const selectors$2 = {
|
|
|
4609
4616
|
text: { selector: () => TextClass.componentName },
|
|
4610
4617
|
};
|
|
4611
4618
|
|
|
4612
|
-
const { anchor, text: text$1, host: host$
|
|
4619
|
+
const { anchor, text: text$1, host: host$f, wrapper: wrapper$1 } = selectors$2;
|
|
4613
4620
|
|
|
4614
4621
|
const LinkClass = compose(
|
|
4615
4622
|
createStyleMixin({
|
|
4616
4623
|
mappings: {
|
|
4617
|
-
hostWidth: { ...host$
|
|
4624
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
4618
4625
|
hostDirection: { ...text$1, property: 'direction' },
|
|
4619
4626
|
textAlign: wrapper$1,
|
|
4620
4627
|
textColor: [
|
|
@@ -4629,36 +4636,36 @@ const LinkClass = compose(
|
|
|
4629
4636
|
)(RawLink);
|
|
4630
4637
|
|
|
4631
4638
|
const globalRefs$e = getThemeRefs(globals);
|
|
4632
|
-
const vars$
|
|
4639
|
+
const vars$n = LinkClass.cssVarList;
|
|
4633
4640
|
|
|
4634
4641
|
const link = {
|
|
4635
|
-
[vars$
|
|
4636
|
-
[vars$
|
|
4642
|
+
[vars$n.hostDirection]: globalRefs$e.direction,
|
|
4643
|
+
[vars$n.cursor]: 'pointer',
|
|
4637
4644
|
|
|
4638
|
-
[vars$
|
|
4645
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
|
4639
4646
|
|
|
4640
4647
|
textAlign: {
|
|
4641
|
-
right: { [vars$
|
|
4642
|
-
left: { [vars$
|
|
4643
|
-
center: { [vars$
|
|
4648
|
+
right: { [vars$n.textAlign]: 'right' },
|
|
4649
|
+
left: { [vars$n.textAlign]: 'left' },
|
|
4650
|
+
center: { [vars$n.textAlign]: 'center' },
|
|
4644
4651
|
},
|
|
4645
4652
|
|
|
4646
4653
|
_fullWidth: {
|
|
4647
|
-
[vars$
|
|
4654
|
+
[vars$n.hostWidth]: '100%',
|
|
4648
4655
|
},
|
|
4649
4656
|
|
|
4650
4657
|
mode: {
|
|
4651
4658
|
primary: {
|
|
4652
|
-
[vars$
|
|
4659
|
+
[vars$n.textColor]: globalRefs$e.colors.primary.main,
|
|
4653
4660
|
},
|
|
4654
4661
|
secondary: {
|
|
4655
|
-
[vars$
|
|
4662
|
+
[vars$n.textColor]: globalRefs$e.colors.secondary.main,
|
|
4656
4663
|
},
|
|
4657
4664
|
error: {
|
|
4658
|
-
[vars$
|
|
4665
|
+
[vars$n.textColor]: globalRefs$e.colors.error.main,
|
|
4659
4666
|
},
|
|
4660
4667
|
success: {
|
|
4661
|
-
[vars$
|
|
4668
|
+
[vars$n.textColor]: globalRefs$e.colors.success.main,
|
|
4662
4669
|
},
|
|
4663
4670
|
},
|
|
4664
4671
|
};
|
|
@@ -4666,11 +4673,11 @@ const link = {
|
|
|
4666
4673
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
4667
4674
|
__proto__: null,
|
|
4668
4675
|
default: link,
|
|
4669
|
-
vars: vars$
|
|
4676
|
+
vars: vars$n
|
|
4670
4677
|
});
|
|
4671
4678
|
|
|
4672
|
-
const componentName$
|
|
4673
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
4679
|
+
const componentName$v = getComponentName('divider');
|
|
4680
|
+
class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
|
|
4674
4681
|
constructor() {
|
|
4675
4682
|
super();
|
|
4676
4683
|
|
|
@@ -4716,7 +4723,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$t, baseS
|
|
|
4716
4723
|
}
|
|
4717
4724
|
|
|
4718
4725
|
const textVars$3 = TextClass.cssVarList;
|
|
4719
|
-
const { host: host$
|
|
4726
|
+
const { host: host$e, before, after: after$1, text } = {
|
|
4720
4727
|
host: { selector: () => ':host' },
|
|
4721
4728
|
before: { selector: '::before' },
|
|
4722
4729
|
after: { selector: '::after' },
|
|
@@ -4726,8 +4733,8 @@ const { host: host$d, before, after: after$1, text } = {
|
|
|
4726
4733
|
const DividerClass = compose(
|
|
4727
4734
|
createStyleMixin({
|
|
4728
4735
|
mappings: {
|
|
4729
|
-
hostWidth: { ...host$
|
|
4730
|
-
hostPadding: { ...host$
|
|
4736
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
4737
|
+
hostPadding: { ...host$e, property: 'padding' },
|
|
4731
4738
|
hostDirection: { ...text, property: 'direction' },
|
|
4732
4739
|
|
|
4733
4740
|
minHeight: {},
|
|
@@ -4777,7 +4784,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
4777
4784
|
thickness: '2px',
|
|
4778
4785
|
spacing: '10px',
|
|
4779
4786
|
},
|
|
4780
|
-
componentName$
|
|
4787
|
+
componentName$v
|
|
4781
4788
|
);
|
|
4782
4789
|
|
|
4783
4790
|
const divider = {
|
|
@@ -4808,7 +4815,7 @@ const divider = {
|
|
|
4808
4815
|
},
|
|
4809
4816
|
};
|
|
4810
4817
|
|
|
4811
|
-
const vars$
|
|
4818
|
+
const vars$m = {
|
|
4812
4819
|
...compVars$3,
|
|
4813
4820
|
...helperVars$1,
|
|
4814
4821
|
};
|
|
@@ -4816,18 +4823,18 @@ const vars$l = {
|
|
|
4816
4823
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
4817
4824
|
__proto__: null,
|
|
4818
4825
|
default: divider,
|
|
4819
|
-
vars: vars$
|
|
4826
|
+
vars: vars$m
|
|
4820
4827
|
});
|
|
4821
4828
|
|
|
4822
4829
|
/* eslint-disable no-param-reassign */
|
|
4823
4830
|
|
|
4824
|
-
const componentName$
|
|
4831
|
+
const componentName$u = getComponentName('passcode-internal');
|
|
4825
4832
|
|
|
4826
|
-
createBaseInputClass({ componentName: componentName$
|
|
4833
|
+
createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
|
|
4827
4834
|
|
|
4828
|
-
const componentName$
|
|
4835
|
+
const componentName$t = getComponentName('loader-radial');
|
|
4829
4836
|
|
|
4830
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
4837
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
|
|
4831
4838
|
constructor() {
|
|
4832
4839
|
super();
|
|
4833
4840
|
|
|
@@ -4871,11 +4878,11 @@ const LoaderRadialClass = compose(
|
|
|
4871
4878
|
componentNameValidationMixin
|
|
4872
4879
|
)(RawLoaderRadial);
|
|
4873
4880
|
|
|
4874
|
-
const componentName$
|
|
4881
|
+
const componentName$s = getComponentName('passcode');
|
|
4875
4882
|
|
|
4876
4883
|
const observedAttributes$3 = ['digits'];
|
|
4877
4884
|
|
|
4878
|
-
const customMixin$
|
|
4885
|
+
const customMixin$6 = (superclass) =>
|
|
4879
4886
|
class PasscodeMixinClass extends superclass {
|
|
4880
4887
|
static get observedAttributes() {
|
|
4881
4888
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -4890,17 +4897,17 @@ const customMixin$5 = (superclass) =>
|
|
|
4890
4897
|
const template = document.createElement('template');
|
|
4891
4898
|
|
|
4892
4899
|
template.innerHTML = `
|
|
4893
|
-
<${componentName$
|
|
4900
|
+
<${componentName$u}
|
|
4894
4901
|
bordered="true"
|
|
4895
4902
|
name="code"
|
|
4896
4903
|
tabindex="-1"
|
|
4897
4904
|
slot="input"
|
|
4898
|
-
><slot></slot></${componentName$
|
|
4905
|
+
><slot></slot></${componentName$u}>
|
|
4899
4906
|
`;
|
|
4900
4907
|
|
|
4901
4908
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
4902
4909
|
|
|
4903
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
4910
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$u);
|
|
4904
4911
|
|
|
4905
4912
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
|
4906
4913
|
}
|
|
@@ -4915,7 +4922,7 @@ const customMixin$5 = (superclass) =>
|
|
|
4915
4922
|
};
|
|
4916
4923
|
|
|
4917
4924
|
const {
|
|
4918
|
-
host: host$
|
|
4925
|
+
host: host$d,
|
|
4919
4926
|
digitField,
|
|
4920
4927
|
label: label$6,
|
|
4921
4928
|
requiredIndicator: requiredIndicator$6,
|
|
@@ -4938,10 +4945,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
|
|
|
4938
4945
|
const PasscodeClass = compose(
|
|
4939
4946
|
createStyleMixin({
|
|
4940
4947
|
mappings: {
|
|
4941
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
4948
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$d],
|
|
4942
4949
|
hostWidth: { property: 'width' },
|
|
4943
|
-
hostDirection: { ...host$
|
|
4944
|
-
fontFamily: [host$
|
|
4950
|
+
hostDirection: { ...host$d, property: 'direction' },
|
|
4951
|
+
fontFamily: [host$d, { ...label$6 }],
|
|
4945
4952
|
labelTextColor: [
|
|
4946
4953
|
{ ...label$6, property: 'color' },
|
|
4947
4954
|
{ ...requiredIndicator$6, property: 'color' },
|
|
@@ -4971,7 +4978,7 @@ const PasscodeClass = compose(
|
|
|
4971
4978
|
draggableMixin,
|
|
4972
4979
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
4973
4980
|
componentNameValidationMixin,
|
|
4974
|
-
customMixin$
|
|
4981
|
+
customMixin$6
|
|
4975
4982
|
)(
|
|
4976
4983
|
createProxy({
|
|
4977
4984
|
slots: [],
|
|
@@ -5047,56 +5054,56 @@ const PasscodeClass = compose(
|
|
|
5047
5054
|
${resetInputCursor('vaadin-text-field')}
|
|
5048
5055
|
`,
|
|
5049
5056
|
excludeAttrsSync: ['tabindex'],
|
|
5050
|
-
componentName: componentName$
|
|
5057
|
+
componentName: componentName$s,
|
|
5051
5058
|
})
|
|
5052
5059
|
);
|
|
5053
5060
|
|
|
5054
|
-
const vars$
|
|
5061
|
+
const vars$l = PasscodeClass.cssVarList;
|
|
5055
5062
|
|
|
5056
5063
|
const passcode = {
|
|
5057
|
-
[vars$
|
|
5058
|
-
[vars$
|
|
5059
|
-
[vars$
|
|
5060
|
-
[vars$
|
|
5061
|
-
[vars$
|
|
5062
|
-
[vars$
|
|
5063
|
-
[vars$
|
|
5064
|
-
[vars$
|
|
5065
|
-
[vars$
|
|
5066
|
-
[vars$
|
|
5067
|
-
[vars$
|
|
5068
|
-
[vars$
|
|
5069
|
-
[vars$
|
|
5070
|
-
[vars$
|
|
5071
|
-
[vars$
|
|
5064
|
+
[vars$l.hostDirection]: refs.direction,
|
|
5065
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
|
5066
|
+
[vars$l.fontSize]: refs.fontSize,
|
|
5067
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
|
5068
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5069
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5070
|
+
[vars$l.digitValueTextColor]: refs.valueTextColor,
|
|
5071
|
+
[vars$l.digitPadding]: '0',
|
|
5072
|
+
[vars$l.digitTextAlign]: 'center',
|
|
5073
|
+
[vars$l.digitSpacing]: '4px',
|
|
5074
|
+
[vars$l.hostWidth]: refs.width,
|
|
5075
|
+
[vars$l.digitOutlineColor]: 'transparent',
|
|
5076
|
+
[vars$l.digitOutlineWidth]: refs.outlineWidth,
|
|
5077
|
+
[vars$l.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
5078
|
+
[vars$l.digitSize]: refs.inputHeight,
|
|
5072
5079
|
|
|
5073
5080
|
size: {
|
|
5074
|
-
xs: { [vars$
|
|
5075
|
-
sm: { [vars$
|
|
5076
|
-
md: { [vars$
|
|
5077
|
-
lg: { [vars$
|
|
5081
|
+
xs: { [vars$l.spinnerSize]: '15px' },
|
|
5082
|
+
sm: { [vars$l.spinnerSize]: '20px' },
|
|
5083
|
+
md: { [vars$l.spinnerSize]: '20px' },
|
|
5084
|
+
lg: { [vars$l.spinnerSize]: '20px' },
|
|
5078
5085
|
},
|
|
5079
5086
|
|
|
5080
5087
|
_hideCursor: {
|
|
5081
|
-
[vars$
|
|
5088
|
+
[vars$l.digitCaretTextColor]: 'transparent',
|
|
5082
5089
|
},
|
|
5083
5090
|
|
|
5084
5091
|
_loading: {
|
|
5085
|
-
[vars$
|
|
5092
|
+
[vars$l.overlayOpacity]: refs.overlayOpacity,
|
|
5086
5093
|
},
|
|
5087
5094
|
};
|
|
5088
5095
|
|
|
5089
5096
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
5090
5097
|
__proto__: null,
|
|
5091
5098
|
default: passcode,
|
|
5092
|
-
vars: vars$
|
|
5099
|
+
vars: vars$l
|
|
5093
5100
|
});
|
|
5094
5101
|
|
|
5095
|
-
const componentName$
|
|
5102
|
+
const componentName$r = getComponentName('loader-linear');
|
|
5096
5103
|
|
|
5097
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
5104
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
|
|
5098
5105
|
static get componentName() {
|
|
5099
|
-
return componentName$
|
|
5106
|
+
return componentName$r;
|
|
5100
5107
|
}
|
|
5101
5108
|
|
|
5102
5109
|
constructor() {
|
|
@@ -5132,18 +5139,18 @@ const selectors$1 = {
|
|
|
5132
5139
|
host: { selector: () => ':host' },
|
|
5133
5140
|
};
|
|
5134
5141
|
|
|
5135
|
-
const { after, host: host$
|
|
5142
|
+
const { after, host: host$c } = selectors$1;
|
|
5136
5143
|
|
|
5137
5144
|
const LoaderLinearClass = compose(
|
|
5138
5145
|
createStyleMixin({
|
|
5139
5146
|
mappings: {
|
|
5140
5147
|
hostDisplay: {},
|
|
5141
|
-
hostWidth: { ...host$
|
|
5148
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
5142
5149
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
5143
5150
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
5144
5151
|
verticalPadding: [
|
|
5145
|
-
{ ...host$
|
|
5146
|
-
{ ...host$
|
|
5152
|
+
{ ...host$c, property: 'padding-top' },
|
|
5153
|
+
{ ...host$c, property: 'padding-bottom' },
|
|
5147
5154
|
],
|
|
5148
5155
|
barBackgroundColor: { property: 'background-color' },
|
|
5149
5156
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -5158,48 +5165,48 @@ const LoaderLinearClass = compose(
|
|
|
5158
5165
|
)(RawLoaderLinear);
|
|
5159
5166
|
|
|
5160
5167
|
const globalRefs$c = getThemeRefs(globals);
|
|
5161
|
-
const vars$
|
|
5168
|
+
const vars$k = LoaderLinearClass.cssVarList;
|
|
5162
5169
|
|
|
5163
5170
|
const loaderLinear = {
|
|
5164
|
-
[vars$
|
|
5165
|
-
[vars$
|
|
5171
|
+
[vars$k.hostDisplay]: 'inline-block',
|
|
5172
|
+
[vars$k.hostWidth]: '100%',
|
|
5166
5173
|
|
|
5167
|
-
[vars$
|
|
5168
|
-
[vars$
|
|
5174
|
+
[vars$k.barColor]: globalRefs$c.colors.surface.contrast,
|
|
5175
|
+
[vars$k.barWidth]: '20%',
|
|
5169
5176
|
|
|
5170
|
-
[vars$
|
|
5171
|
-
[vars$
|
|
5177
|
+
[vars$k.barBackgroundColor]: globalRefs$c.colors.surface.light,
|
|
5178
|
+
[vars$k.barBorderRadius]: '4px',
|
|
5172
5179
|
|
|
5173
|
-
[vars$
|
|
5174
|
-
[vars$
|
|
5175
|
-
[vars$
|
|
5176
|
-
[vars$
|
|
5180
|
+
[vars$k.animationDuration]: '2s',
|
|
5181
|
+
[vars$k.animationTimingFunction]: 'linear',
|
|
5182
|
+
[vars$k.animationIterationCount]: 'infinite',
|
|
5183
|
+
[vars$k.verticalPadding]: '0.25em',
|
|
5177
5184
|
|
|
5178
5185
|
size: {
|
|
5179
|
-
xs: { [vars$
|
|
5180
|
-
sm: { [vars$
|
|
5181
|
-
md: { [vars$
|
|
5182
|
-
lg: { [vars$
|
|
5186
|
+
xs: { [vars$k.barHeight]: '2px' },
|
|
5187
|
+
sm: { [vars$k.barHeight]: '4px' },
|
|
5188
|
+
md: { [vars$k.barHeight]: '6px' },
|
|
5189
|
+
lg: { [vars$k.barHeight]: '8px' },
|
|
5183
5190
|
},
|
|
5184
5191
|
|
|
5185
5192
|
mode: {
|
|
5186
5193
|
primary: {
|
|
5187
|
-
[vars$
|
|
5194
|
+
[vars$k.barColor]: globalRefs$c.colors.primary.main,
|
|
5188
5195
|
},
|
|
5189
5196
|
secondary: {
|
|
5190
|
-
[vars$
|
|
5197
|
+
[vars$k.barColor]: globalRefs$c.colors.secondary.main,
|
|
5191
5198
|
},
|
|
5192
5199
|
},
|
|
5193
5200
|
|
|
5194
5201
|
_hidden: {
|
|
5195
|
-
[vars$
|
|
5202
|
+
[vars$k.hostDisplay]: 'none',
|
|
5196
5203
|
},
|
|
5197
5204
|
};
|
|
5198
5205
|
|
|
5199
5206
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
5200
5207
|
__proto__: null,
|
|
5201
5208
|
default: loaderLinear,
|
|
5202
|
-
vars: vars$
|
|
5209
|
+
vars: vars$k
|
|
5203
5210
|
});
|
|
5204
5211
|
|
|
5205
5212
|
const globalRefs$b = getThemeRefs(globals);
|
|
@@ -5217,7 +5224,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
|
5217
5224
|
},
|
|
5218
5225
|
},
|
|
5219
5226
|
},
|
|
5220
|
-
componentName$
|
|
5227
|
+
componentName$t
|
|
5221
5228
|
);
|
|
5222
5229
|
|
|
5223
5230
|
const loaderRadial = {
|
|
@@ -5246,7 +5253,7 @@ const loaderRadial = {
|
|
|
5246
5253
|
[compVars$2.hostDisplay]: 'none',
|
|
5247
5254
|
},
|
|
5248
5255
|
};
|
|
5249
|
-
const vars$
|
|
5256
|
+
const vars$j = {
|
|
5250
5257
|
...compVars$2,
|
|
5251
5258
|
...helperVars,
|
|
5252
5259
|
};
|
|
@@ -5254,10 +5261,10 @@ const vars$i = {
|
|
|
5254
5261
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
5255
5262
|
__proto__: null,
|
|
5256
5263
|
default: loaderRadial,
|
|
5257
|
-
vars: vars$
|
|
5264
|
+
vars: vars$j
|
|
5258
5265
|
});
|
|
5259
5266
|
|
|
5260
|
-
const componentName$
|
|
5267
|
+
const componentName$q = getComponentName('combo-box');
|
|
5261
5268
|
|
|
5262
5269
|
const ComboBoxMixin = (superclass) =>
|
|
5263
5270
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -5483,7 +5490,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
5483
5490
|
};
|
|
5484
5491
|
|
|
5485
5492
|
const {
|
|
5486
|
-
host: host$
|
|
5493
|
+
host: host$b,
|
|
5487
5494
|
inputField: inputField$3,
|
|
5488
5495
|
inputElement: inputElement$1,
|
|
5489
5496
|
placeholder: placeholder$1,
|
|
@@ -5509,10 +5516,10 @@ const {
|
|
|
5509
5516
|
const ComboBoxClass = compose(
|
|
5510
5517
|
createStyleMixin({
|
|
5511
5518
|
mappings: {
|
|
5512
|
-
hostWidth: { ...host$
|
|
5513
|
-
hostDirection: { ...host$
|
|
5519
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
5520
|
+
hostDirection: { ...host$b, property: 'direction' },
|
|
5514
5521
|
// we apply font-size also on the host so we can set its width with em
|
|
5515
|
-
fontSize: [{}, host$
|
|
5522
|
+
fontSize: [{}, host$b],
|
|
5516
5523
|
fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
|
|
5517
5524
|
labelTextColor: [
|
|
5518
5525
|
{ ...label$5, property: 'color' },
|
|
@@ -5640,71 +5647,71 @@ const ComboBoxClass = compose(
|
|
|
5640
5647
|
// and reset items to an empty array, and opening the list box with no items
|
|
5641
5648
|
// to display.
|
|
5642
5649
|
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
|
5643
|
-
componentName: componentName$
|
|
5650
|
+
componentName: componentName$q,
|
|
5644
5651
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
5645
5652
|
})
|
|
5646
5653
|
);
|
|
5647
5654
|
|
|
5648
5655
|
const globalRefs$a = getThemeRefs(globals);
|
|
5649
|
-
const vars$
|
|
5656
|
+
const vars$i = ComboBoxClass.cssVarList;
|
|
5650
5657
|
|
|
5651
5658
|
const comboBox = {
|
|
5652
|
-
[vars$
|
|
5653
|
-
[vars$
|
|
5654
|
-
[vars$
|
|
5655
|
-
[vars$
|
|
5656
|
-
[vars$
|
|
5657
|
-
[vars$
|
|
5658
|
-
[vars$
|
|
5659
|
-
[vars$
|
|
5660
|
-
[vars$
|
|
5661
|
-
[vars$
|
|
5662
|
-
[vars$
|
|
5663
|
-
[vars$
|
|
5664
|
-
[vars$
|
|
5665
|
-
[vars$
|
|
5666
|
-
[vars$
|
|
5667
|
-
[vars$
|
|
5668
|
-
[vars$
|
|
5669
|
-
[vars$
|
|
5670
|
-
[vars$
|
|
5671
|
-
[vars$
|
|
5672
|
-
[vars$
|
|
5673
|
-
[vars$
|
|
5674
|
-
[vars$
|
|
5675
|
-
[vars$
|
|
5676
|
-
[vars$
|
|
5677
|
-
[vars$
|
|
5659
|
+
[vars$i.hostWidth]: refs.width,
|
|
5660
|
+
[vars$i.hostDirection]: refs.direction,
|
|
5661
|
+
[vars$i.fontSize]: refs.fontSize,
|
|
5662
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
|
5663
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
|
5664
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5665
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
|
5666
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
|
5667
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
|
5668
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
|
5669
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
|
5670
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
|
5671
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
|
5672
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
|
5673
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5674
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
|
5675
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5676
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
|
5677
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
|
5678
|
+
[vars$i.inputHeight]: refs.inputHeight,
|
|
5679
|
+
[vars$i.inputDropdownButtonColor]: globalRefs$a.colors.surface.dark,
|
|
5680
|
+
[vars$i.inputDropdownButtonCursor]: 'pointer',
|
|
5681
|
+
[vars$i.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
5682
|
+
[vars$i.inputDropdownButtonOffset]: globalRefs$a.spacing.xs,
|
|
5683
|
+
[vars$i.overlayItemPaddingInlineStart]: globalRefs$a.spacing.xs,
|
|
5684
|
+
[vars$i.overlayItemPaddingInlineEnd]: globalRefs$a.spacing.lg,
|
|
5678
5685
|
|
|
5679
5686
|
_readonly: {
|
|
5680
|
-
[vars$
|
|
5687
|
+
[vars$i.inputDropdownButtonCursor]: 'default',
|
|
5681
5688
|
},
|
|
5682
5689
|
|
|
5683
5690
|
// Overlay theme exposed via the component:
|
|
5684
|
-
[vars$
|
|
5685
|
-
[vars$
|
|
5686
|
-
[vars$
|
|
5687
|
-
[vars$
|
|
5688
|
-
[vars$
|
|
5689
|
-
[vars$
|
|
5691
|
+
[vars$i.overlayFontSize]: refs.fontSize,
|
|
5692
|
+
[vars$i.overlayFontFamily]: refs.fontFamily,
|
|
5693
|
+
[vars$i.overlayCursor]: 'pointer',
|
|
5694
|
+
[vars$i.overlayItemBoxShadow]: 'none',
|
|
5695
|
+
[vars$i.overlayBackground]: refs.backgroundColor,
|
|
5696
|
+
[vars$i.overlayTextColor]: refs.valueTextColor,
|
|
5690
5697
|
|
|
5691
5698
|
// Overlay direct theme:
|
|
5692
|
-
[vars$
|
|
5693
|
-
[vars$
|
|
5699
|
+
[vars$i.overlay.minHeight]: '400px',
|
|
5700
|
+
[vars$i.overlay.margin]: '0',
|
|
5694
5701
|
};
|
|
5695
5702
|
|
|
5696
5703
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
5697
5704
|
__proto__: null,
|
|
5698
5705
|
comboBox: comboBox,
|
|
5699
5706
|
default: comboBox,
|
|
5700
|
-
vars: vars$
|
|
5707
|
+
vars: vars$i
|
|
5701
5708
|
});
|
|
5702
5709
|
|
|
5703
5710
|
const observedAttributes$2 = ['src', 'alt'];
|
|
5704
5711
|
|
|
5705
|
-
const componentName$
|
|
5712
|
+
const componentName$p = getComponentName('image');
|
|
5706
5713
|
|
|
5707
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
5714
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$p, baseSelector: ':host > img' });
|
|
5708
5715
|
class RawImage extends BaseClass$1 {
|
|
5709
5716
|
static get observedAttributes() {
|
|
5710
5717
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -5744,14 +5751,14 @@ const ImageClass = compose(
|
|
|
5744
5751
|
draggableMixin
|
|
5745
5752
|
)(RawImage);
|
|
5746
5753
|
|
|
5747
|
-
const vars$
|
|
5754
|
+
const vars$h = ImageClass.cssVarList;
|
|
5748
5755
|
|
|
5749
5756
|
const image = {};
|
|
5750
5757
|
|
|
5751
5758
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
5752
5759
|
__proto__: null,
|
|
5753
5760
|
default: image,
|
|
5754
|
-
vars: vars$
|
|
5761
|
+
vars: vars$h
|
|
5755
5762
|
});
|
|
5756
5763
|
|
|
5757
5764
|
var CountryCodes = [
|
|
@@ -6970,16 +6977,16 @@ var CountryCodes = [
|
|
|
6970
6977
|
].sort((a, b) => (a.name < b.name ? -1 : 1)),
|
|
6971
6978
|
];
|
|
6972
6979
|
|
|
6973
|
-
const componentName$
|
|
6980
|
+
const componentName$o = getComponentName('phone-field-internal');
|
|
6974
6981
|
|
|
6975
|
-
createBaseInputClass({ componentName: componentName$
|
|
6982
|
+
createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
|
|
6976
6983
|
|
|
6977
6984
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
6978
6985
|
const comboVars = ComboBoxClass.cssVarList;
|
|
6979
6986
|
|
|
6980
|
-
const componentName$
|
|
6987
|
+
const componentName$n = getComponentName('phone-field');
|
|
6981
6988
|
|
|
6982
|
-
const customMixin$
|
|
6989
|
+
const customMixin$5 = (superclass) =>
|
|
6983
6990
|
class PhoneFieldMixinClass extends superclass {
|
|
6984
6991
|
static get CountryCodes() {
|
|
6985
6992
|
return CountryCodes;
|
|
@@ -6991,15 +6998,15 @@ const customMixin$4 = (superclass) =>
|
|
|
6991
6998
|
const template = document.createElement('template');
|
|
6992
6999
|
|
|
6993
7000
|
template.innerHTML = `
|
|
6994
|
-
<${componentName$
|
|
7001
|
+
<${componentName$o}
|
|
6995
7002
|
tabindex="-1"
|
|
6996
7003
|
slot="input"
|
|
6997
|
-
></${componentName$
|
|
7004
|
+
></${componentName$o}>
|
|
6998
7005
|
`;
|
|
6999
7006
|
|
|
7000
7007
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7001
7008
|
|
|
7002
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7009
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$o);
|
|
7003
7010
|
|
|
7004
7011
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7005
7012
|
includeAttrs: [
|
|
@@ -7019,7 +7026,7 @@ const customMixin$4 = (superclass) =>
|
|
|
7019
7026
|
};
|
|
7020
7027
|
|
|
7021
7028
|
const {
|
|
7022
|
-
host: host$
|
|
7029
|
+
host: host$a,
|
|
7023
7030
|
label: label$4,
|
|
7024
7031
|
requiredIndicator: requiredIndicator$4,
|
|
7025
7032
|
inputField: inputField$2,
|
|
@@ -7044,7 +7051,7 @@ const PhoneFieldClass = compose(
|
|
|
7044
7051
|
createStyleMixin({
|
|
7045
7052
|
mappings: {
|
|
7046
7053
|
fontSize: [
|
|
7047
|
-
host$
|
|
7054
|
+
host$a,
|
|
7048
7055
|
inputField$2,
|
|
7049
7056
|
{
|
|
7050
7057
|
selector: TextFieldClass.componentName,
|
|
@@ -7065,11 +7072,11 @@ const PhoneFieldClass = compose(
|
|
|
7065
7072
|
},
|
|
7066
7073
|
],
|
|
7067
7074
|
hostWidth: [
|
|
7068
|
-
{ ...host$
|
|
7075
|
+
{ ...host$a, property: 'width' },
|
|
7069
7076
|
{ ...phoneInput$1, property: 'width' },
|
|
7070
7077
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
7071
7078
|
],
|
|
7072
|
-
hostDirection: { ...host$
|
|
7079
|
+
hostDirection: { ...host$a, property: 'direction' },
|
|
7073
7080
|
|
|
7074
7081
|
inputBorderStyle: [
|
|
7075
7082
|
{ ...inputField$2, property: 'border-style' },
|
|
@@ -7119,7 +7126,7 @@ const PhoneFieldClass = compose(
|
|
|
7119
7126
|
}),
|
|
7120
7127
|
draggableMixin,
|
|
7121
7128
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7122
|
-
customMixin$
|
|
7129
|
+
customMixin$5
|
|
7123
7130
|
)(
|
|
7124
7131
|
createProxy({
|
|
7125
7132
|
slots: [],
|
|
@@ -7195,33 +7202,33 @@ const PhoneFieldClass = compose(
|
|
|
7195
7202
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7196
7203
|
`,
|
|
7197
7204
|
excludeAttrsSync: ['tabindex'],
|
|
7198
|
-
componentName: componentName$
|
|
7205
|
+
componentName: componentName$n,
|
|
7199
7206
|
})
|
|
7200
7207
|
);
|
|
7201
7208
|
|
|
7202
|
-
const vars$
|
|
7209
|
+
const vars$g = PhoneFieldClass.cssVarList;
|
|
7203
7210
|
|
|
7204
7211
|
const phoneField = {
|
|
7205
|
-
[vars$
|
|
7206
|
-
[vars$
|
|
7207
|
-
[vars$
|
|
7208
|
-
[vars$
|
|
7209
|
-
[vars$
|
|
7210
|
-
[vars$
|
|
7211
|
-
[vars$
|
|
7212
|
-
[vars$
|
|
7213
|
-
[vars$
|
|
7214
|
-
[vars$
|
|
7215
|
-
[vars$
|
|
7216
|
-
[vars$
|
|
7217
|
-
[vars$
|
|
7218
|
-
[vars$
|
|
7219
|
-
[vars$
|
|
7220
|
-
[vars$
|
|
7221
|
-
[vars$
|
|
7222
|
-
[vars$
|
|
7223
|
-
[vars$
|
|
7224
|
-
[vars$
|
|
7212
|
+
[vars$g.hostWidth]: refs.width,
|
|
7213
|
+
[vars$g.hostDirection]: refs.direction,
|
|
7214
|
+
[vars$g.fontSize]: refs.fontSize,
|
|
7215
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
|
7216
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
7217
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7218
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7219
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
|
7220
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7221
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
|
7222
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
|
7223
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
|
7224
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
|
7225
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
|
7226
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
|
7227
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
|
7228
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
|
7229
|
+
[vars$g.phoneInputWidth]: refs.minWidth,
|
|
7230
|
+
[vars$g.countryCodeInputWidth]: '5em',
|
|
7231
|
+
[vars$g.countryCodeDropdownWidth]: '20em',
|
|
7225
7232
|
|
|
7226
7233
|
// '@overlay': {
|
|
7227
7234
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -7231,18 +7238,18 @@ const phoneField = {
|
|
|
7231
7238
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
7232
7239
|
__proto__: null,
|
|
7233
7240
|
default: phoneField,
|
|
7234
|
-
vars: vars$
|
|
7241
|
+
vars: vars$g
|
|
7235
7242
|
});
|
|
7236
7243
|
|
|
7237
|
-
const componentName$
|
|
7244
|
+
const componentName$m = getComponentName('phone-field-internal-input-box');
|
|
7238
7245
|
|
|
7239
|
-
createBaseInputClass({ componentName: componentName$
|
|
7246
|
+
createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
|
7240
7247
|
|
|
7241
7248
|
const textVars = TextFieldClass.cssVarList;
|
|
7242
7249
|
|
|
7243
|
-
const componentName$
|
|
7250
|
+
const componentName$l = getComponentName('phone-input-box-field');
|
|
7244
7251
|
|
|
7245
|
-
const customMixin$
|
|
7252
|
+
const customMixin$4 = (superclass) =>
|
|
7246
7253
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
7247
7254
|
static get CountryCodes() {
|
|
7248
7255
|
return CountryCodes;
|
|
@@ -7254,15 +7261,15 @@ const customMixin$3 = (superclass) =>
|
|
|
7254
7261
|
const template = document.createElement('template');
|
|
7255
7262
|
|
|
7256
7263
|
template.innerHTML = `
|
|
7257
|
-
<${componentName$
|
|
7264
|
+
<${componentName$m}
|
|
7258
7265
|
tabindex="-1"
|
|
7259
7266
|
slot="input"
|
|
7260
|
-
></${componentName$
|
|
7267
|
+
></${componentName$m}>
|
|
7261
7268
|
`;
|
|
7262
7269
|
|
|
7263
7270
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7264
7271
|
|
|
7265
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7272
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
|
7266
7273
|
|
|
7267
7274
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
7268
7275
|
includeAttrs: [
|
|
@@ -7279,7 +7286,7 @@ const customMixin$3 = (superclass) =>
|
|
|
7279
7286
|
}
|
|
7280
7287
|
};
|
|
7281
7288
|
|
|
7282
|
-
const { host: host$
|
|
7289
|
+
const { host: host$9, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
|
|
7283
7290
|
host: { selector: () => ':host' },
|
|
7284
7291
|
label: { selector: '::part(label)' },
|
|
7285
7292
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -7293,7 +7300,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7293
7300
|
createStyleMixin({
|
|
7294
7301
|
mappings: {
|
|
7295
7302
|
fontSize: [
|
|
7296
|
-
host$
|
|
7303
|
+
host$9,
|
|
7297
7304
|
inputField$1,
|
|
7298
7305
|
{
|
|
7299
7306
|
selector: TextFieldClass.componentName,
|
|
@@ -7301,9 +7308,9 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7301
7308
|
},
|
|
7302
7309
|
],
|
|
7303
7310
|
fontFamily: [label$3, errorMessage$4, helperText$3],
|
|
7304
|
-
hostWidth: { ...host$
|
|
7305
|
-
hostMinWidth: { ...host$
|
|
7306
|
-
hostDirection: { ...host$
|
|
7311
|
+
hostWidth: { ...host$9, property: 'width' },
|
|
7312
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
|
7313
|
+
hostDirection: { ...host$9, property: 'direction' },
|
|
7307
7314
|
|
|
7308
7315
|
inputBorderStyle: { ...inputField$1, property: 'border-style' },
|
|
7309
7316
|
inputBorderWidth: { ...inputField$1, property: 'border-width' },
|
|
@@ -7329,7 +7336,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7329
7336
|
}),
|
|
7330
7337
|
draggableMixin,
|
|
7331
7338
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7332
|
-
customMixin$
|
|
7339
|
+
customMixin$4
|
|
7333
7340
|
)(
|
|
7334
7341
|
createProxy({
|
|
7335
7342
|
slots: [],
|
|
@@ -7395,47 +7402,47 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
7395
7402
|
${resetInputLabelPosition('vaadin-text-field')}
|
|
7396
7403
|
`,
|
|
7397
7404
|
excludeAttrsSync: ['tabindex'],
|
|
7398
|
-
componentName: componentName$
|
|
7405
|
+
componentName: componentName$l,
|
|
7399
7406
|
})
|
|
7400
7407
|
);
|
|
7401
7408
|
|
|
7402
|
-
const vars$
|
|
7409
|
+
const vars$f = PhoneFieldInputBoxClass.cssVarList;
|
|
7403
7410
|
|
|
7404
7411
|
const phoneInputBoxField = {
|
|
7405
|
-
[vars$
|
|
7406
|
-
[vars$
|
|
7407
|
-
[vars$
|
|
7408
|
-
[vars$
|
|
7409
|
-
[vars$
|
|
7410
|
-
[vars$
|
|
7411
|
-
[vars$
|
|
7412
|
-
[vars$
|
|
7413
|
-
[vars$
|
|
7414
|
-
[vars$
|
|
7415
|
-
[vars$
|
|
7416
|
-
[vars$
|
|
7417
|
-
[vars$
|
|
7418
|
-
[vars$
|
|
7419
|
-
[vars$
|
|
7420
|
-
[vars$
|
|
7421
|
-
[vars$
|
|
7422
|
-
[vars$
|
|
7412
|
+
[vars$f.hostWidth]: '16em',
|
|
7413
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
|
7414
|
+
[vars$f.hostDirection]: refs.direction,
|
|
7415
|
+
[vars$f.fontSize]: refs.fontSize,
|
|
7416
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
|
7417
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
|
7418
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
|
7419
|
+
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7420
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
|
7421
|
+
[vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
7422
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
|
7423
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
|
7424
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
|
7425
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
|
7426
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
|
7427
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
|
7428
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
|
7429
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
|
7423
7430
|
_fullWidth: {
|
|
7424
|
-
[vars$
|
|
7431
|
+
[vars$f.hostWidth]: refs.width,
|
|
7425
7432
|
},
|
|
7426
7433
|
};
|
|
7427
7434
|
|
|
7428
7435
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
7429
7436
|
__proto__: null,
|
|
7430
7437
|
default: phoneInputBoxField,
|
|
7431
|
-
vars: vars$
|
|
7438
|
+
vars: vars$f
|
|
7432
7439
|
});
|
|
7433
7440
|
|
|
7434
|
-
const componentName$
|
|
7441
|
+
const componentName$k = getComponentName('new-password-internal');
|
|
7435
7442
|
|
|
7436
|
-
const componentName$
|
|
7443
|
+
const componentName$j = getComponentName('new-password');
|
|
7437
7444
|
|
|
7438
|
-
const customMixin$
|
|
7445
|
+
const customMixin$3 = (superclass) =>
|
|
7439
7446
|
class NewPasswordMixinClass extends superclass {
|
|
7440
7447
|
init() {
|
|
7441
7448
|
super.init?.();
|
|
@@ -7443,16 +7450,16 @@ const customMixin$2 = (superclass) =>
|
|
|
7443
7450
|
const template = document.createElement('template');
|
|
7444
7451
|
|
|
7445
7452
|
template.innerHTML = `
|
|
7446
|
-
<${componentName$
|
|
7453
|
+
<${componentName$k}
|
|
7447
7454
|
name="new-password"
|
|
7448
7455
|
tabindex="-1"
|
|
7449
7456
|
slot="input"
|
|
7450
|
-
></${componentName$
|
|
7457
|
+
></${componentName$k}>
|
|
7451
7458
|
`;
|
|
7452
7459
|
|
|
7453
7460
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
7454
7461
|
|
|
7455
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
7462
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
|
7456
7463
|
|
|
7457
7464
|
forwardAttrs(this, this.inputElement, {
|
|
7458
7465
|
includeAttrs: [
|
|
@@ -7473,7 +7480,7 @@ const customMixin$2 = (superclass) =>
|
|
|
7473
7480
|
}
|
|
7474
7481
|
};
|
|
7475
7482
|
|
|
7476
|
-
const { host: host$
|
|
7483
|
+
const { host: host$8, label: label$2, internalInputsWrapper, errorMessage: errorMessage$3, helperText: helperText$2, passwordInput } = {
|
|
7477
7484
|
host: { selector: () => ':host' },
|
|
7478
7485
|
label: { selector: '::part(label)' },
|
|
7479
7486
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
@@ -7486,7 +7493,7 @@ const NewPasswordClass = compose(
|
|
|
7486
7493
|
createStyleMixin({
|
|
7487
7494
|
mappings: {
|
|
7488
7495
|
fontSize: [
|
|
7489
|
-
host$
|
|
7496
|
+
host$8,
|
|
7490
7497
|
{},
|
|
7491
7498
|
{
|
|
7492
7499
|
selector: PasswordClass.componentName,
|
|
@@ -7495,19 +7502,19 @@ const NewPasswordClass = compose(
|
|
|
7495
7502
|
],
|
|
7496
7503
|
fontFamily: [label$2, errorMessage$3, helperText$2],
|
|
7497
7504
|
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
7498
|
-
hostWidth: { ...host$
|
|
7499
|
-
hostMinWidth: { ...host$
|
|
7505
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
7506
|
+
hostMinWidth: { ...host$8, property: 'min-width' },
|
|
7500
7507
|
hostDirection: [
|
|
7501
|
-
{ ...host$
|
|
7508
|
+
{ ...host$8, property: 'direction' },
|
|
7502
7509
|
{ ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
|
|
7503
7510
|
],
|
|
7504
|
-
inputsRequiredIndicator: { ...host$
|
|
7511
|
+
inputsRequiredIndicator: { ...host$8, property: 'content' },
|
|
7505
7512
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
7506
7513
|
},
|
|
7507
7514
|
}),
|
|
7508
7515
|
draggableMixin,
|
|
7509
7516
|
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
|
7510
|
-
customMixin$
|
|
7517
|
+
customMixin$3
|
|
7511
7518
|
)(
|
|
7512
7519
|
createProxy({
|
|
7513
7520
|
slots: [],
|
|
@@ -7559,33 +7566,33 @@ const NewPasswordClass = compose(
|
|
|
7559
7566
|
}
|
|
7560
7567
|
`,
|
|
7561
7568
|
excludeAttrsSync: ['tabindex'],
|
|
7562
|
-
componentName: componentName$
|
|
7569
|
+
componentName: componentName$j,
|
|
7563
7570
|
})
|
|
7564
7571
|
);
|
|
7565
7572
|
|
|
7566
|
-
const vars$
|
|
7573
|
+
const vars$e = NewPasswordClass.cssVarList;
|
|
7567
7574
|
|
|
7568
7575
|
const newPassword = {
|
|
7569
|
-
[vars$
|
|
7570
|
-
[vars$
|
|
7571
|
-
[vars$
|
|
7572
|
-
[vars$
|
|
7573
|
-
[vars$
|
|
7574
|
-
[vars$
|
|
7575
|
-
[vars$
|
|
7576
|
+
[vars$e.hostWidth]: refs.width,
|
|
7577
|
+
[vars$e.hostMinWidth]: refs.minWidth,
|
|
7578
|
+
[vars$e.hostDirection]: refs.direction,
|
|
7579
|
+
[vars$e.fontSize]: refs.fontSize,
|
|
7580
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
|
7581
|
+
[vars$e.spaceBetweenInputs]: '1em',
|
|
7582
|
+
[vars$e.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
7576
7583
|
|
|
7577
7584
|
_required: {
|
|
7578
7585
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
7579
7586
|
// That's why we fake the required indicator on each input.
|
|
7580
7587
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
7581
|
-
[vars$
|
|
7588
|
+
[vars$e.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
7582
7589
|
},
|
|
7583
7590
|
};
|
|
7584
7591
|
|
|
7585
7592
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
7586
7593
|
__proto__: null,
|
|
7587
7594
|
default: newPassword,
|
|
7588
|
-
vars: vars$
|
|
7595
|
+
vars: vars$e
|
|
7589
7596
|
});
|
|
7590
7597
|
|
|
7591
7598
|
const getFileBase64 = (fileObj) => {
|
|
@@ -7600,7 +7607,7 @@ const getFilename = (fileObj) => {
|
|
|
7600
7607
|
return fileObj.name.replace(/^.*\\/, '');
|
|
7601
7608
|
};
|
|
7602
7609
|
|
|
7603
|
-
const componentName$
|
|
7610
|
+
const componentName$i = getComponentName('upload-file');
|
|
7604
7611
|
|
|
7605
7612
|
const observedAttributes$1 = [
|
|
7606
7613
|
'title',
|
|
@@ -7615,7 +7622,7 @@ const observedAttributes$1 = [
|
|
|
7615
7622
|
'icon',
|
|
7616
7623
|
];
|
|
7617
7624
|
|
|
7618
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
7625
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
|
|
7619
7626
|
|
|
7620
7627
|
class RawUploadFile extends BaseInputClass {
|
|
7621
7628
|
static get observedAttributes() {
|
|
@@ -7787,7 +7794,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
7787
7794
|
}
|
|
7788
7795
|
|
|
7789
7796
|
const buttonVars = ButtonClass.cssVarList;
|
|
7790
|
-
const { host: host$
|
|
7797
|
+
const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
|
|
7791
7798
|
host: { selector: () => ':host' },
|
|
7792
7799
|
wrapper: { selector: () => ':host > div' },
|
|
7793
7800
|
icon: { selector: () => '::slotted(*)' },
|
|
@@ -7806,11 +7813,11 @@ const UploadFileClass = compose(
|
|
|
7806
7813
|
borderWidth: {},
|
|
7807
7814
|
borderStyle: {},
|
|
7808
7815
|
borderRadius: {},
|
|
7809
|
-
hostHeight: { ...host$
|
|
7810
|
-
hostWidth: { ...host$
|
|
7816
|
+
hostHeight: { ...host$7, property: 'height' },
|
|
7817
|
+
hostWidth: { ...host$7, property: 'width' },
|
|
7811
7818
|
hostPadding: { property: 'padding' },
|
|
7812
7819
|
hostDirection: [
|
|
7813
|
-
{ ...host$
|
|
7820
|
+
{ ...host$7, property: 'direction' },
|
|
7814
7821
|
{ selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
|
|
7815
7822
|
],
|
|
7816
7823
|
gap: { ...wrapper },
|
|
@@ -7830,77 +7837,77 @@ const UploadFileClass = compose(
|
|
|
7830
7837
|
componentNameValidationMixin
|
|
7831
7838
|
)(RawUploadFile);
|
|
7832
7839
|
|
|
7833
|
-
const vars$
|
|
7840
|
+
const vars$d = UploadFileClass.cssVarList;
|
|
7834
7841
|
|
|
7835
7842
|
const uploadFile = {
|
|
7836
|
-
[vars$
|
|
7837
|
-
[vars$
|
|
7838
|
-
[vars$
|
|
7843
|
+
[vars$d.hostDirection]: refs.direction,
|
|
7844
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
|
7845
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
|
7839
7846
|
|
|
7840
|
-
[vars$
|
|
7847
|
+
[vars$d.iconSize]: '2em',
|
|
7841
7848
|
|
|
7842
|
-
[vars$
|
|
7843
|
-
[vars$
|
|
7849
|
+
[vars$d.hostPadding]: '0.75em',
|
|
7850
|
+
[vars$d.gap]: '0.5em',
|
|
7844
7851
|
|
|
7845
|
-
[vars$
|
|
7846
|
-
[vars$
|
|
7847
|
-
[vars$
|
|
7852
|
+
[vars$d.fontSize]: '16px',
|
|
7853
|
+
[vars$d.titleFontWeight]: '500',
|
|
7854
|
+
[vars$d.lineHeight]: '1em',
|
|
7848
7855
|
|
|
7849
|
-
[vars$
|
|
7850
|
-
[vars$
|
|
7851
|
-
[vars$
|
|
7852
|
-
[vars$
|
|
7856
|
+
[vars$d.borderWidth]: refs.borderWidth,
|
|
7857
|
+
[vars$d.borderColor]: refs.borderColor,
|
|
7858
|
+
[vars$d.borderRadius]: refs.borderRadius,
|
|
7859
|
+
[vars$d.borderStyle]: 'dashed',
|
|
7853
7860
|
|
|
7854
7861
|
_required: {
|
|
7855
|
-
[vars$
|
|
7862
|
+
[vars$d.requiredIndicator]: refs.requiredIndicator,
|
|
7856
7863
|
},
|
|
7857
7864
|
|
|
7858
7865
|
size: {
|
|
7859
7866
|
xs: {
|
|
7860
|
-
[vars$
|
|
7861
|
-
[vars$
|
|
7862
|
-
[vars$
|
|
7863
|
-
[vars$
|
|
7864
|
-
[vars$
|
|
7867
|
+
[vars$d.hostHeight]: '196px',
|
|
7868
|
+
[vars$d.hostWidth]: '200px',
|
|
7869
|
+
[vars$d.titleFontSize]: '0.875em',
|
|
7870
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
|
7871
|
+
[vars$d.lineHeight]: '1.25em',
|
|
7865
7872
|
},
|
|
7866
7873
|
sm: {
|
|
7867
|
-
[vars$
|
|
7868
|
-
[vars$
|
|
7869
|
-
[vars$
|
|
7870
|
-
[vars$
|
|
7871
|
-
[vars$
|
|
7874
|
+
[vars$d.hostHeight]: '216px',
|
|
7875
|
+
[vars$d.hostWidth]: '230px',
|
|
7876
|
+
[vars$d.titleFontSize]: '1em',
|
|
7877
|
+
[vars$d.descriptionFontSize]: '0.875em',
|
|
7878
|
+
[vars$d.lineHeight]: '1.25em',
|
|
7872
7879
|
},
|
|
7873
7880
|
md: {
|
|
7874
|
-
[vars$
|
|
7875
|
-
[vars$
|
|
7876
|
-
[vars$
|
|
7877
|
-
[vars$
|
|
7878
|
-
[vars$
|
|
7881
|
+
[vars$d.hostHeight]: '256px',
|
|
7882
|
+
[vars$d.hostWidth]: '312px',
|
|
7883
|
+
[vars$d.titleFontSize]: '1.125em',
|
|
7884
|
+
[vars$d.descriptionFontSize]: '1em',
|
|
7885
|
+
[vars$d.lineHeight]: '1.5em',
|
|
7879
7886
|
},
|
|
7880
7887
|
lg: {
|
|
7881
|
-
[vars$
|
|
7882
|
-
[vars$
|
|
7883
|
-
[vars$
|
|
7884
|
-
[vars$
|
|
7885
|
-
[vars$
|
|
7888
|
+
[vars$d.hostHeight]: '280px',
|
|
7889
|
+
[vars$d.hostWidth]: '336px',
|
|
7890
|
+
[vars$d.titleFontSize]: '1.125em',
|
|
7891
|
+
[vars$d.descriptionFontSize]: '1.125em',
|
|
7892
|
+
[vars$d.lineHeight]: '1.75em',
|
|
7886
7893
|
},
|
|
7887
7894
|
},
|
|
7888
7895
|
|
|
7889
7896
|
_fullWidth: {
|
|
7890
|
-
[vars$
|
|
7897
|
+
[vars$d.hostWidth]: refs.width,
|
|
7891
7898
|
},
|
|
7892
7899
|
};
|
|
7893
7900
|
|
|
7894
7901
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7895
7902
|
__proto__: null,
|
|
7896
7903
|
default: uploadFile,
|
|
7897
|
-
vars: vars$
|
|
7904
|
+
vars: vars$d
|
|
7898
7905
|
});
|
|
7899
7906
|
|
|
7900
|
-
const componentName$
|
|
7907
|
+
const componentName$h = getComponentName('button-selection-group-item');
|
|
7901
7908
|
|
|
7902
7909
|
class RawSelectItem extends createBaseClass({
|
|
7903
|
-
componentName: componentName$
|
|
7910
|
+
componentName: componentName$h,
|
|
7904
7911
|
baseSelector: ':host > descope-button',
|
|
7905
7912
|
}) {
|
|
7906
7913
|
get size() {
|
|
@@ -8009,37 +8016,37 @@ const ButtonSelectionGroupItemClass = compose(
|
|
|
8009
8016
|
|
|
8010
8017
|
const globalRefs$9 = getThemeRefs(globals);
|
|
8011
8018
|
|
|
8012
|
-
const vars$
|
|
8019
|
+
const vars$c = ButtonSelectionGroupItemClass.cssVarList;
|
|
8013
8020
|
|
|
8014
8021
|
const buttonSelectionGroupItem = {
|
|
8015
|
-
[vars$
|
|
8016
|
-
[vars$
|
|
8017
|
-
[vars$
|
|
8018
|
-
[vars$
|
|
8019
|
-
[vars$
|
|
8020
|
-
[vars$
|
|
8021
|
-
[vars$
|
|
8022
|
-
[vars$
|
|
8022
|
+
[vars$c.hostDirection]: 'inherit',
|
|
8023
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.main,
|
|
8024
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
|
8025
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.light,
|
|
8026
|
+
[vars$c.borderStyle]: 'solid',
|
|
8027
|
+
[vars$c.borderRadius]: globalRefs$9.radius.sm,
|
|
8028
|
+
[vars$c.outlineColor]: 'transparent',
|
|
8029
|
+
[vars$c.borderWidth]: globalRefs$9.border.xs,
|
|
8023
8030
|
|
|
8024
8031
|
_hover: {
|
|
8025
|
-
[vars$
|
|
8032
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.highlight,
|
|
8026
8033
|
},
|
|
8027
8034
|
|
|
8028
8035
|
_focused: {
|
|
8029
|
-
[vars$
|
|
8036
|
+
[vars$c.outlineColor]: globalRefs$9.colors.surface.light,
|
|
8030
8037
|
},
|
|
8031
8038
|
|
|
8032
8039
|
_selected: {
|
|
8033
|
-
[vars$
|
|
8034
|
-
[vars$
|
|
8035
|
-
[vars$
|
|
8040
|
+
[vars$c.borderColor]: globalRefs$9.colors.surface.contrast,
|
|
8041
|
+
[vars$c.backgroundColor]: globalRefs$9.colors.surface.contrast,
|
|
8042
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.main,
|
|
8036
8043
|
},
|
|
8037
8044
|
};
|
|
8038
8045
|
|
|
8039
8046
|
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
|
8040
8047
|
__proto__: null,
|
|
8041
8048
|
default: buttonSelectionGroupItem,
|
|
8042
|
-
vars: vars$
|
|
8049
|
+
vars: vars$c
|
|
8043
8050
|
});
|
|
8044
8051
|
|
|
8045
8052
|
const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
@@ -8138,10 +8145,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
|
|
|
8138
8145
|
return BaseButtonSelectionGroupInternalClass;
|
|
8139
8146
|
};
|
|
8140
8147
|
|
|
8141
|
-
const componentName$
|
|
8148
|
+
const componentName$g = getComponentName('button-selection-group-internal');
|
|
8142
8149
|
|
|
8143
8150
|
class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8144
|
-
componentName$
|
|
8151
|
+
componentName$g
|
|
8145
8152
|
) {
|
|
8146
8153
|
getSelectedNode() {
|
|
8147
8154
|
return this.items.find((item) => item.hasAttribute('selected'));
|
|
@@ -8297,7 +8304,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
|
|
|
8297
8304
|
}
|
|
8298
8305
|
};
|
|
8299
8306
|
|
|
8300
|
-
const { host: host$
|
|
8307
|
+
const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
|
|
8301
8308
|
host: { selector: () => ':host' },
|
|
8302
8309
|
label: { selector: '::part(label)' },
|
|
8303
8310
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -8306,9 +8313,9 @@ const { host: host$5, label: label$1, requiredIndicator: requiredIndicator$1, in
|
|
|
8306
8313
|
};
|
|
8307
8314
|
|
|
8308
8315
|
const buttonSelectionGroupMappings = {
|
|
8309
|
-
hostWidth: { ...host$
|
|
8310
|
-
hostDirection: { ...host$
|
|
8311
|
-
fontFamily: host$
|
|
8316
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
8317
|
+
hostDirection: { ...host$6, property: 'direction' },
|
|
8318
|
+
fontFamily: host$6,
|
|
8312
8319
|
labelTextColor: [
|
|
8313
8320
|
{ ...label$1, property: 'color' },
|
|
8314
8321
|
{ ...requiredIndicator$1, property: 'color' },
|
|
@@ -8373,7 +8380,7 @@ const buttonSelectionGroupStyles = `
|
|
|
8373
8380
|
${resetInputCursor('vaadin-text-field')}
|
|
8374
8381
|
`;
|
|
8375
8382
|
|
|
8376
|
-
const componentName$
|
|
8383
|
+
const componentName$f = getComponentName('button-selection-group');
|
|
8377
8384
|
|
|
8378
8385
|
const buttonSelectionGroupMixin = (superclass) =>
|
|
8379
8386
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8382,19 +8389,19 @@ const buttonSelectionGroupMixin = (superclass) =>
|
|
|
8382
8389
|
const template = document.createElement('template');
|
|
8383
8390
|
|
|
8384
8391
|
template.innerHTML = `
|
|
8385
|
-
<${componentName$
|
|
8392
|
+
<${componentName$g}
|
|
8386
8393
|
name="button-selection-group"
|
|
8387
8394
|
slot="input"
|
|
8388
8395
|
tabindex="-1"
|
|
8389
8396
|
part="internal-component"
|
|
8390
8397
|
>
|
|
8391
8398
|
<slot></slot>
|
|
8392
|
-
</${componentName$
|
|
8399
|
+
</${componentName$g}>
|
|
8393
8400
|
`;
|
|
8394
8401
|
|
|
8395
8402
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8396
8403
|
|
|
8397
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8404
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
|
8398
8405
|
|
|
8399
8406
|
forwardAttrs(this, this.inputElement, {
|
|
8400
8407
|
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
|
@@ -8419,7 +8426,7 @@ const ButtonSelectionGroupClass = compose(
|
|
|
8419
8426
|
wrappedEleName: 'vaadin-text-field',
|
|
8420
8427
|
style: () => buttonSelectionGroupStyles,
|
|
8421
8428
|
excludeAttrsSync: ['tabindex'],
|
|
8422
|
-
componentName: componentName$
|
|
8429
|
+
componentName: componentName$f,
|
|
8423
8430
|
})
|
|
8424
8431
|
);
|
|
8425
8432
|
|
|
@@ -8435,22 +8442,22 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
|
|
|
8435
8442
|
[vars.hostWidth]: refs.width,
|
|
8436
8443
|
});
|
|
8437
8444
|
|
|
8438
|
-
const vars$
|
|
8445
|
+
const vars$b = ButtonSelectionGroupClass.cssVarList;
|
|
8439
8446
|
|
|
8440
8447
|
const buttonSelectionGroup = {
|
|
8441
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8448
|
+
...createBaseButtonSelectionGroupMappings(vars$b),
|
|
8442
8449
|
};
|
|
8443
8450
|
|
|
8444
8451
|
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8445
8452
|
__proto__: null,
|
|
8446
8453
|
default: buttonSelectionGroup,
|
|
8447
|
-
vars: vars$
|
|
8454
|
+
vars: vars$b
|
|
8448
8455
|
});
|
|
8449
8456
|
|
|
8450
|
-
const componentName$
|
|
8457
|
+
const componentName$e = getComponentName('button-multi-selection-group-internal');
|
|
8451
8458
|
|
|
8452
8459
|
class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
|
|
8453
|
-
componentName$
|
|
8460
|
+
componentName$e
|
|
8454
8461
|
) {
|
|
8455
8462
|
#getSelectedNodes() {
|
|
8456
8463
|
return this.items.filter((item) => item.hasAttribute('selected'));
|
|
@@ -8553,7 +8560,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
|
|
|
8553
8560
|
}
|
|
8554
8561
|
}
|
|
8555
8562
|
|
|
8556
|
-
const componentName$
|
|
8563
|
+
const componentName$d = getComponentName('button-multi-selection-group');
|
|
8557
8564
|
|
|
8558
8565
|
const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
8559
8566
|
class ButtonMultiSelectionGroupMixinClass extends superclass {
|
|
@@ -8562,19 +8569,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
|
|
|
8562
8569
|
const template = document.createElement('template');
|
|
8563
8570
|
|
|
8564
8571
|
template.innerHTML = `
|
|
8565
|
-
<${componentName$
|
|
8572
|
+
<${componentName$e}
|
|
8566
8573
|
name="button-selection-group"
|
|
8567
8574
|
slot="input"
|
|
8568
8575
|
tabindex="-1"
|
|
8569
8576
|
part="internal-component"
|
|
8570
8577
|
>
|
|
8571
8578
|
<slot></slot>
|
|
8572
|
-
</${componentName$
|
|
8579
|
+
</${componentName$e}>
|
|
8573
8580
|
`;
|
|
8574
8581
|
|
|
8575
8582
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
8576
8583
|
|
|
8577
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
8584
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$e);
|
|
8578
8585
|
|
|
8579
8586
|
forwardAttrs(this, this.inputElement, {
|
|
8580
8587
|
includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
|
|
@@ -8599,25 +8606,25 @@ const ButtonMultiSelectionGroupClass = compose(
|
|
|
8599
8606
|
wrappedEleName: 'vaadin-text-field',
|
|
8600
8607
|
style: () => buttonSelectionGroupStyles,
|
|
8601
8608
|
excludeAttrsSync: ['tabindex'],
|
|
8602
|
-
componentName: componentName$
|
|
8609
|
+
componentName: componentName$d,
|
|
8603
8610
|
})
|
|
8604
8611
|
);
|
|
8605
8612
|
|
|
8606
|
-
const vars$
|
|
8613
|
+
const vars$a = ButtonMultiSelectionGroupClass.cssVarList;
|
|
8607
8614
|
|
|
8608
8615
|
const buttonMultiSelectionGroup = {
|
|
8609
|
-
...createBaseButtonSelectionGroupMappings(vars$
|
|
8616
|
+
...createBaseButtonSelectionGroupMappings(vars$a),
|
|
8610
8617
|
};
|
|
8611
8618
|
|
|
8612
8619
|
var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
|
8613
8620
|
__proto__: null,
|
|
8614
8621
|
default: buttonMultiSelectionGroup,
|
|
8615
|
-
vars: vars$
|
|
8622
|
+
vars: vars$a
|
|
8616
8623
|
});
|
|
8617
8624
|
|
|
8618
|
-
const componentName$
|
|
8625
|
+
const componentName$c = getComponentName('modal');
|
|
8619
8626
|
|
|
8620
|
-
const customMixin$
|
|
8627
|
+
const customMixin$2 = (superclass) =>
|
|
8621
8628
|
class ModalMixinClass extends superclass {
|
|
8622
8629
|
get opened() {
|
|
8623
8630
|
return this.getAttribute('opened') === 'true';
|
|
@@ -8707,14 +8714,14 @@ const ModalClass = compose(
|
|
|
8707
8714
|
}),
|
|
8708
8715
|
draggableMixin,
|
|
8709
8716
|
componentNameValidationMixin,
|
|
8710
|
-
customMixin$
|
|
8717
|
+
customMixin$2
|
|
8711
8718
|
)(
|
|
8712
8719
|
createProxy({
|
|
8713
8720
|
slots: [''],
|
|
8714
8721
|
wrappedEleName: 'vaadin-dialog',
|
|
8715
8722
|
style: () => ``,
|
|
8716
8723
|
excludeAttrsSync: ['tabindex', 'opened'],
|
|
8717
|
-
componentName: componentName$
|
|
8724
|
+
componentName: componentName$c,
|
|
8718
8725
|
})
|
|
8719
8726
|
);
|
|
8720
8727
|
|
|
@@ -8728,14 +8735,14 @@ const modal = {
|
|
|
8728
8735
|
[compVars$1.overlayWidth]: '540px',
|
|
8729
8736
|
};
|
|
8730
8737
|
|
|
8731
|
-
const vars$
|
|
8738
|
+
const vars$9 = {
|
|
8732
8739
|
...compVars$1,
|
|
8733
8740
|
};
|
|
8734
8741
|
|
|
8735
8742
|
var modal$1 = /*#__PURE__*/Object.freeze({
|
|
8736
8743
|
__proto__: null,
|
|
8737
8744
|
default: modal,
|
|
8738
|
-
vars: vars$
|
|
8745
|
+
vars: vars$9
|
|
8739
8746
|
});
|
|
8740
8747
|
|
|
8741
8748
|
const isValidDataType = (data) => {
|
|
@@ -8748,7 +8755,7 @@ const isValidDataType = (data) => {
|
|
|
8748
8755
|
return isValid;
|
|
8749
8756
|
};
|
|
8750
8757
|
|
|
8751
|
-
const componentName$
|
|
8758
|
+
const componentName$b = getComponentName('grid');
|
|
8752
8759
|
|
|
8753
8760
|
const GridMixin = (superclass) =>
|
|
8754
8761
|
class GridMixinClass extends superclass {
|
|
@@ -8908,7 +8915,7 @@ const GridMixin = (superclass) =>
|
|
|
8908
8915
|
};
|
|
8909
8916
|
|
|
8910
8917
|
const {
|
|
8911
|
-
host: host$
|
|
8918
|
+
host: host$5,
|
|
8912
8919
|
headerRow,
|
|
8913
8920
|
headerRowCell,
|
|
8914
8921
|
contentRow,
|
|
@@ -8943,15 +8950,15 @@ const GridClass = compose(
|
|
|
8943
8950
|
fontWeight: { ...contentRow },
|
|
8944
8951
|
valueTextColor: { ...contentRow, property: 'color' },
|
|
8945
8952
|
backgroundColor: [
|
|
8946
|
-
{ ...host$
|
|
8953
|
+
{ ...host$5, property: 'background-color' },
|
|
8947
8954
|
{ ...contentRow, property: 'background-color' },
|
|
8948
8955
|
],
|
|
8949
8956
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
|
8950
8957
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
|
8951
|
-
borderColor: { ...host$
|
|
8952
|
-
borderWidth: { ...host$
|
|
8953
|
-
borderStyle: { ...host$
|
|
8954
|
-
borderRadius: { ...host$
|
|
8958
|
+
borderColor: { ...host$5, property: 'border-color' },
|
|
8959
|
+
borderWidth: { ...host$5, property: 'border-width' },
|
|
8960
|
+
borderStyle: { ...host$5, property: 'border-style' },
|
|
8961
|
+
borderRadius: { ...host$5, property: 'border-radius' },
|
|
8955
8962
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
|
8956
8963
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
|
8957
8964
|
separatorColor: [
|
|
@@ -8984,40 +8991,40 @@ const GridClass = compose(
|
|
|
8984
8991
|
}
|
|
8985
8992
|
`,
|
|
8986
8993
|
excludeAttrsSync: ['columns', 'tabindex'],
|
|
8987
|
-
componentName: componentName$
|
|
8994
|
+
componentName: componentName$b,
|
|
8988
8995
|
})
|
|
8989
8996
|
);
|
|
8990
8997
|
|
|
8991
8998
|
const globalRefs$6 = getThemeRefs(globals);
|
|
8992
|
-
const vars$
|
|
8999
|
+
const vars$8 = GridClass.cssVarList;
|
|
8993
9000
|
|
|
8994
9001
|
const grid = {
|
|
8995
|
-
[vars$
|
|
8996
|
-
[vars$
|
|
8997
|
-
[vars$
|
|
8998
|
-
[vars$
|
|
8999
|
-
[vars$
|
|
9002
|
+
[vars$8.hostWidth]: '100%',
|
|
9003
|
+
[vars$8.hostHeight]: '100%',
|
|
9004
|
+
[vars$8.hostMinHeight]: '400px',
|
|
9005
|
+
[vars$8.fontWeight]: '400',
|
|
9006
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
|
9000
9007
|
|
|
9001
|
-
[vars$
|
|
9002
|
-
[vars$
|
|
9008
|
+
[vars$8.fontSize]: refs.fontSize,
|
|
9009
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
|
9003
9010
|
|
|
9004
|
-
[vars$
|
|
9005
|
-
[vars$
|
|
9006
|
-
[vars$
|
|
9011
|
+
[vars$8.sortIndicatorsColor]: globalRefs$6.colors.surface.light,
|
|
9012
|
+
[vars$8.activeSortIndicator]: globalRefs$6.colors.surface.dark,
|
|
9013
|
+
[vars$8.resizeHandleColor]: globalRefs$6.colors.surface.light,
|
|
9007
9014
|
|
|
9008
|
-
[vars$
|
|
9009
|
-
[vars$
|
|
9010
|
-
[vars$
|
|
9011
|
-
[vars$
|
|
9015
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
|
9016
|
+
[vars$8.borderStyle]: refs.borderStyle,
|
|
9017
|
+
[vars$8.borderRadius]: refs.borderRadius,
|
|
9018
|
+
[vars$8.borderColor]: 'transparent',
|
|
9012
9019
|
|
|
9013
|
-
[vars$
|
|
9014
|
-
[vars$
|
|
9020
|
+
[vars$8.headerRowTextColor]: globalRefs$6.colors.surface.dark,
|
|
9021
|
+
[vars$8.separatorColor]: globalRefs$6.colors.surface.light,
|
|
9015
9022
|
|
|
9016
|
-
[vars$
|
|
9017
|
-
[vars$
|
|
9023
|
+
[vars$8.valueTextColor]: globalRefs$6.colors.surface.contrast,
|
|
9024
|
+
[vars$8.selectedBackgroundColor]: globalRefs$6.colors.surface.highlight,
|
|
9018
9025
|
|
|
9019
9026
|
_bordered: {
|
|
9020
|
-
[vars$
|
|
9027
|
+
[vars$8.borderColor]: refs.borderColor,
|
|
9021
9028
|
},
|
|
9022
9029
|
};
|
|
9023
9030
|
|
|
@@ -9025,10 +9032,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
|
|
|
9025
9032
|
__proto__: null,
|
|
9026
9033
|
default: grid,
|
|
9027
9034
|
grid: grid,
|
|
9028
|
-
vars: vars$
|
|
9035
|
+
vars: vars$8
|
|
9029
9036
|
});
|
|
9030
9037
|
|
|
9031
|
-
const componentName$
|
|
9038
|
+
const componentName$a = getComponentName('notification-card');
|
|
9032
9039
|
|
|
9033
9040
|
const notificationCardMixin = (superclass) =>
|
|
9034
9041
|
class NotificationCardMixinClass extends superclass {
|
|
@@ -9136,54 +9143,54 @@ const NotificationCardClass = compose(
|
|
|
9136
9143
|
}
|
|
9137
9144
|
`,
|
|
9138
9145
|
excludeAttrsSync: ['tabindex'],
|
|
9139
|
-
componentName: componentName$
|
|
9146
|
+
componentName: componentName$a,
|
|
9140
9147
|
})
|
|
9141
9148
|
);
|
|
9142
9149
|
|
|
9143
9150
|
const globalRefs$5 = getThemeRefs(globals);
|
|
9144
|
-
const vars$
|
|
9151
|
+
const vars$7 = NotificationCardClass.cssVarList;
|
|
9145
9152
|
|
|
9146
9153
|
const shadowColor = '#00000020';
|
|
9147
9154
|
|
|
9148
9155
|
const notification = {
|
|
9149
|
-
[vars$
|
|
9150
|
-
[vars$
|
|
9151
|
-
[vars$
|
|
9152
|
-
[vars$
|
|
9153
|
-
[vars$
|
|
9154
|
-
[vars$
|
|
9155
|
-
[vars$
|
|
9156
|
-
[vars$
|
|
9157
|
-
[vars$
|
|
9156
|
+
[vars$7.hostMinWidth]: '415px',
|
|
9157
|
+
[vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
|
|
9158
|
+
[vars$7.fontSize]: globalRefs$5.typography.body1.size,
|
|
9159
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.surface.main,
|
|
9160
|
+
[vars$7.textColor]: globalRefs$5.colors.surface.contrast,
|
|
9161
|
+
[vars$7.boxShadow]: `${globalRefs$5.shadow.wide.xl} ${shadowColor}, ${globalRefs$5.shadow.narrow.xl} ${shadowColor}`,
|
|
9162
|
+
[vars$7.verticalPadding]: '0.625em',
|
|
9163
|
+
[vars$7.horizontalPadding]: '1.5em',
|
|
9164
|
+
[vars$7.borderRadius]: globalRefs$5.radius.xs,
|
|
9158
9165
|
|
|
9159
9166
|
_bordered: {
|
|
9160
|
-
[vars$
|
|
9161
|
-
[vars$
|
|
9162
|
-
[vars$
|
|
9167
|
+
[vars$7.borderWidth]: globalRefs$5.border.sm,
|
|
9168
|
+
[vars$7.borderStyle]: 'solid',
|
|
9169
|
+
[vars$7.borderColor]: 'transparent',
|
|
9163
9170
|
},
|
|
9164
9171
|
|
|
9165
9172
|
size: {
|
|
9166
|
-
xs: { [vars$
|
|
9167
|
-
sm: { [vars$
|
|
9168
|
-
md: { [vars$
|
|
9169
|
-
lg: { [vars$
|
|
9173
|
+
xs: { [vars$7.fontSize]: '12px' },
|
|
9174
|
+
sm: { [vars$7.fontSize]: '14px' },
|
|
9175
|
+
md: { [vars$7.fontSize]: '16px' },
|
|
9176
|
+
lg: { [vars$7.fontSize]: '18px' },
|
|
9170
9177
|
},
|
|
9171
9178
|
|
|
9172
9179
|
mode: {
|
|
9173
9180
|
primary: {
|
|
9174
|
-
[vars$
|
|
9175
|
-
[vars$
|
|
9176
|
-
[vars$
|
|
9181
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.primary.main,
|
|
9182
|
+
[vars$7.textColor]: globalRefs$5.colors.primary.contrast,
|
|
9183
|
+
[vars$7.borderColor]: globalRefs$5.colors.primary.light,
|
|
9177
9184
|
},
|
|
9178
9185
|
success: {
|
|
9179
|
-
[vars$
|
|
9180
|
-
[vars$
|
|
9181
|
-
[vars$
|
|
9186
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.success.main,
|
|
9187
|
+
[vars$7.textColor]: globalRefs$5.colors.success.contrast,
|
|
9188
|
+
[vars$7.borderColor]: globalRefs$5.colors.success.light,
|
|
9182
9189
|
},
|
|
9183
9190
|
error: {
|
|
9184
|
-
[vars$
|
|
9185
|
-
[vars$
|
|
9186
|
-
[vars$
|
|
9191
|
+
[vars$7.backgroundColor]: globalRefs$5.colors.error.main,
|
|
9192
|
+
[vars$7.textColor]: globalRefs$5.colors.error.contrast,
|
|
9193
|
+
[vars$7.borderColor]: globalRefs$5.colors.error.light,
|
|
9187
9194
|
},
|
|
9188
9195
|
},
|
|
9189
9196
|
};
|
|
@@ -9191,10 +9198,10 @@ const notification = {
|
|
|
9191
9198
|
var notificationCard = /*#__PURE__*/Object.freeze({
|
|
9192
9199
|
__proto__: null,
|
|
9193
9200
|
default: notification,
|
|
9194
|
-
vars: vars$
|
|
9201
|
+
vars: vars$7
|
|
9195
9202
|
});
|
|
9196
9203
|
|
|
9197
|
-
const componentName$
|
|
9204
|
+
const componentName$9 = getComponentName('multi-select-combo-box');
|
|
9198
9205
|
|
|
9199
9206
|
const multiSelectComboBoxMixin = (superclass) =>
|
|
9200
9207
|
class MultiSelectComboBoxMixinClass extends superclass {
|
|
@@ -9582,7 +9589,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
|
9582
9589
|
};
|
|
9583
9590
|
|
|
9584
9591
|
const {
|
|
9585
|
-
host: host$
|
|
9592
|
+
host: host$4,
|
|
9586
9593
|
inputField,
|
|
9587
9594
|
inputElement,
|
|
9588
9595
|
placeholder,
|
|
@@ -9620,10 +9627,10 @@ const {
|
|
|
9620
9627
|
const MultiSelectComboBoxClass = compose(
|
|
9621
9628
|
createStyleMixin({
|
|
9622
9629
|
mappings: {
|
|
9623
|
-
hostWidth: { ...host$
|
|
9624
|
-
hostDirection: { ...host$
|
|
9630
|
+
hostWidth: { ...host$4, property: 'width' },
|
|
9631
|
+
hostDirection: { ...host$4, property: 'direction' },
|
|
9625
9632
|
// we apply font-size also on the host so we can set its width with em
|
|
9626
|
-
fontSize: [{}, host$
|
|
9633
|
+
fontSize: [{}, host$4],
|
|
9627
9634
|
chipFontSize: { ...chipLabel, property: 'font-size' },
|
|
9628
9635
|
fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
|
|
9629
9636
|
labelTextColor: [
|
|
@@ -9798,73 +9805,73 @@ const MultiSelectComboBoxClass = compose(
|
|
|
9798
9805
|
// Note: we exclude `placeholder` because the vaadin component observes it and
|
|
9799
9806
|
// tries to override it, causing us to lose the user set placeholder.
|
|
9800
9807
|
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
|
9801
|
-
componentName: componentName$
|
|
9808
|
+
componentName: componentName$9,
|
|
9802
9809
|
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
|
9803
9810
|
})
|
|
9804
9811
|
);
|
|
9805
9812
|
|
|
9806
9813
|
const globalRefs$4 = getThemeRefs(globals);
|
|
9807
|
-
const vars$
|
|
9814
|
+
const vars$6 = MultiSelectComboBoxClass.cssVarList;
|
|
9808
9815
|
|
|
9809
9816
|
const multiSelectComboBox = {
|
|
9810
|
-
[vars$
|
|
9811
|
-
[vars$
|
|
9812
|
-
[vars$
|
|
9813
|
-
[vars$
|
|
9814
|
-
[vars$
|
|
9815
|
-
[vars$
|
|
9816
|
-
[vars$
|
|
9817
|
-
[vars$
|
|
9818
|
-
[vars$
|
|
9819
|
-
[vars$
|
|
9820
|
-
[vars$
|
|
9821
|
-
[vars$
|
|
9822
|
-
[vars$
|
|
9823
|
-
[vars$
|
|
9824
|
-
[vars$
|
|
9825
|
-
[vars$
|
|
9826
|
-
[vars$
|
|
9827
|
-
[vars$
|
|
9828
|
-
[vars$
|
|
9829
|
-
[vars$
|
|
9830
|
-
[vars$
|
|
9831
|
-
[vars$
|
|
9832
|
-
[vars$
|
|
9833
|
-
[vars$
|
|
9834
|
-
[vars$
|
|
9835
|
-
[vars$
|
|
9836
|
-
[vars$
|
|
9837
|
-
[vars$
|
|
9838
|
-
[vars$
|
|
9839
|
-
[vars$
|
|
9817
|
+
[vars$6.hostWidth]: refs.width,
|
|
9818
|
+
[vars$6.hostDirection]: refs.direction,
|
|
9819
|
+
[vars$6.fontSize]: refs.fontSize,
|
|
9820
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
|
9821
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
|
9822
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
9823
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
|
9824
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
|
9825
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
|
9826
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
|
9827
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
|
9828
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
|
9829
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
|
9830
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
|
9831
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
|
9832
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
|
9833
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
9834
|
+
[vars$6.inputBackgroundColor]: refs.backgroundColor,
|
|
9835
|
+
[vars$6.inputHorizontalPadding]: refs.horizontalPadding,
|
|
9836
|
+
[vars$6.inputVerticalPadding]: refs.verticalPadding,
|
|
9837
|
+
[vars$6.inputHeight]: refs.inputHeight,
|
|
9838
|
+
[vars$6.inputDropdownButtonColor]: globalRefs$4.colors.surface.dark,
|
|
9839
|
+
[vars$6.inputDropdownButtonCursor]: 'pointer',
|
|
9840
|
+
[vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
9841
|
+
[vars$6.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
|
|
9842
|
+
[vars$6.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
|
|
9843
|
+
[vars$6.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
|
|
9844
|
+
[vars$6.chipFontSize]: refs.chipFontSize,
|
|
9845
|
+
[vars$6.chipTextColor]: globalRefs$4.colors.surface.contrast,
|
|
9846
|
+
[vars$6.chipBackgroundColor]: globalRefs$4.colors.surface.light,
|
|
9840
9847
|
|
|
9841
9848
|
_readonly: {
|
|
9842
|
-
[vars$
|
|
9849
|
+
[vars$6.inputDropdownButtonCursor]: 'default',
|
|
9843
9850
|
},
|
|
9844
9851
|
|
|
9845
9852
|
// Overlay theme exposed via the component:
|
|
9846
|
-
[vars$
|
|
9847
|
-
[vars$
|
|
9848
|
-
[vars$
|
|
9849
|
-
[vars$
|
|
9850
|
-
[vars$
|
|
9851
|
-
[vars$
|
|
9853
|
+
[vars$6.overlayFontSize]: refs.fontSize,
|
|
9854
|
+
[vars$6.overlayFontFamily]: refs.fontFamily,
|
|
9855
|
+
[vars$6.overlayCursor]: 'pointer',
|
|
9856
|
+
[vars$6.overlayItemBoxShadow]: 'none',
|
|
9857
|
+
[vars$6.overlayBackground]: refs.backgroundColor,
|
|
9858
|
+
[vars$6.overlayTextColor]: refs.valueTextColor,
|
|
9852
9859
|
|
|
9853
9860
|
// Overlay direct theme:
|
|
9854
|
-
[vars$
|
|
9855
|
-
[vars$
|
|
9861
|
+
[vars$6.overlay.minHeight]: '400px',
|
|
9862
|
+
[vars$6.overlay.margin]: '0',
|
|
9856
9863
|
};
|
|
9857
9864
|
|
|
9858
9865
|
var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
|
|
9859
9866
|
__proto__: null,
|
|
9860
9867
|
default: multiSelectComboBox,
|
|
9861
9868
|
multiSelectComboBox: multiSelectComboBox,
|
|
9862
|
-
vars: vars$
|
|
9869
|
+
vars: vars$6
|
|
9863
9870
|
});
|
|
9864
9871
|
|
|
9865
|
-
const componentName$
|
|
9872
|
+
const componentName$8 = getComponentName('badge');
|
|
9866
9873
|
|
|
9867
|
-
class RawBadge extends createBaseClass({ componentName: componentName$
|
|
9874
|
+
class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
|
|
9868
9875
|
constructor() {
|
|
9869
9876
|
super();
|
|
9870
9877
|
|
|
@@ -9916,65 +9923,65 @@ const BadgeClass = compose(
|
|
|
9916
9923
|
)(RawBadge);
|
|
9917
9924
|
|
|
9918
9925
|
const globalRefs$3 = getThemeRefs(globals);
|
|
9919
|
-
const vars$
|
|
9926
|
+
const vars$5 = BadgeClass.cssVarList;
|
|
9920
9927
|
|
|
9921
9928
|
const badge$1 = {
|
|
9922
|
-
[vars$
|
|
9923
|
-
[vars$
|
|
9929
|
+
[vars$5.hostWidth]: 'fit-content',
|
|
9930
|
+
[vars$5.hostDirection]: globalRefs$3.direction,
|
|
9924
9931
|
|
|
9925
|
-
[vars$
|
|
9932
|
+
[vars$5.textAlign]: 'center',
|
|
9926
9933
|
|
|
9927
|
-
[vars$
|
|
9928
|
-
[vars$
|
|
9934
|
+
[vars$5.fontFamily]: globalRefs$3.fonts.font1.family,
|
|
9935
|
+
[vars$5.fontWeight]: '400',
|
|
9929
9936
|
|
|
9930
|
-
[vars$
|
|
9931
|
-
[vars$
|
|
9937
|
+
[vars$5.verticalPadding]: '0.25em',
|
|
9938
|
+
[vars$5.horizontalPadding]: '0.5em',
|
|
9932
9939
|
|
|
9933
|
-
[vars$
|
|
9934
|
-
[vars$
|
|
9935
|
-
[vars$
|
|
9936
|
-
[vars$
|
|
9940
|
+
[vars$5.borderWidth]: globalRefs$3.border.xs,
|
|
9941
|
+
[vars$5.borderRadius]: globalRefs$3.radius.xs,
|
|
9942
|
+
[vars$5.borderColor]: 'transparent',
|
|
9943
|
+
[vars$5.borderStyle]: 'solid',
|
|
9937
9944
|
|
|
9938
9945
|
_fullWidth: {
|
|
9939
|
-
[vars$
|
|
9946
|
+
[vars$5.hostWidth]: '100%',
|
|
9940
9947
|
},
|
|
9941
9948
|
|
|
9942
9949
|
size: {
|
|
9943
|
-
xs: { [vars$
|
|
9944
|
-
sm: { [vars$
|
|
9945
|
-
md: { [vars$
|
|
9946
|
-
lg: { [vars$
|
|
9950
|
+
xs: { [vars$5.fontSize]: '12px' },
|
|
9951
|
+
sm: { [vars$5.fontSize]: '14px' },
|
|
9952
|
+
md: { [vars$5.fontSize]: '16px' },
|
|
9953
|
+
lg: { [vars$5.fontSize]: '18px' },
|
|
9947
9954
|
},
|
|
9948
9955
|
|
|
9949
9956
|
mode: {
|
|
9950
9957
|
default: {
|
|
9951
|
-
[vars$
|
|
9958
|
+
[vars$5.textColor]: globalRefs$3.colors.surface.dark,
|
|
9952
9959
|
_bordered: {
|
|
9953
|
-
[vars$
|
|
9960
|
+
[vars$5.borderColor]: globalRefs$3.colors.surface.light,
|
|
9954
9961
|
},
|
|
9955
9962
|
},
|
|
9956
9963
|
primary: {
|
|
9957
|
-
[vars$
|
|
9964
|
+
[vars$5.textColor]: globalRefs$3.colors.primary.main,
|
|
9958
9965
|
_bordered: {
|
|
9959
|
-
[vars$
|
|
9966
|
+
[vars$5.borderColor]: globalRefs$3.colors.primary.light,
|
|
9960
9967
|
},
|
|
9961
9968
|
},
|
|
9962
9969
|
secondary: {
|
|
9963
|
-
[vars$
|
|
9970
|
+
[vars$5.textColor]: globalRefs$3.colors.secondary.main,
|
|
9964
9971
|
_bordered: {
|
|
9965
|
-
[vars$
|
|
9972
|
+
[vars$5.borderColor]: globalRefs$3.colors.secondary.light,
|
|
9966
9973
|
},
|
|
9967
9974
|
},
|
|
9968
9975
|
error: {
|
|
9969
|
-
[vars$
|
|
9976
|
+
[vars$5.textColor]: globalRefs$3.colors.error.main,
|
|
9970
9977
|
_bordered: {
|
|
9971
|
-
[vars$
|
|
9978
|
+
[vars$5.borderColor]: globalRefs$3.colors.error.light,
|
|
9972
9979
|
},
|
|
9973
9980
|
},
|
|
9974
9981
|
success: {
|
|
9975
|
-
[vars$
|
|
9982
|
+
[vars$5.textColor]: globalRefs$3.colors.success.main,
|
|
9976
9983
|
_bordered: {
|
|
9977
|
-
[vars$
|
|
9984
|
+
[vars$5.borderColor]: globalRefs$3.colors.success.light,
|
|
9978
9985
|
},
|
|
9979
9986
|
},
|
|
9980
9987
|
},
|
|
@@ -9983,11 +9990,11 @@ const badge$1 = {
|
|
|
9983
9990
|
var badge$2 = /*#__PURE__*/Object.freeze({
|
|
9984
9991
|
__proto__: null,
|
|
9985
9992
|
default: badge$1,
|
|
9986
|
-
vars: vars$
|
|
9993
|
+
vars: vars$5
|
|
9987
9994
|
});
|
|
9988
9995
|
|
|
9989
|
-
const componentName$
|
|
9990
|
-
class RawAvatar extends createBaseClass({ componentName: componentName$
|
|
9996
|
+
const componentName$7 = getComponentName('avatar');
|
|
9997
|
+
class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
|
|
9991
9998
|
constructor() {
|
|
9992
9999
|
super();
|
|
9993
10000
|
|
|
@@ -10062,7 +10069,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$5, baseSe
|
|
|
10062
10069
|
}
|
|
10063
10070
|
}
|
|
10064
10071
|
|
|
10065
|
-
const { host: host$
|
|
10072
|
+
const { host: host$3, editableBadge, avatar: avatar$2 } = {
|
|
10066
10073
|
host: { selector: () => ':host' },
|
|
10067
10074
|
editableBadge: { selector: '> .editableBadge' },
|
|
10068
10075
|
avatar: { selector: 'vaadin-avatar' },
|
|
@@ -10071,10 +10078,10 @@ const { host: host$2, editableBadge, avatar: avatar$2 } = {
|
|
|
10071
10078
|
const AvatarClass = compose(
|
|
10072
10079
|
createStyleMixin({
|
|
10073
10080
|
mappings: {
|
|
10074
|
-
hostWidth: { ...host$
|
|
10075
|
-
hostHeight: { ...host$
|
|
10076
|
-
cursor: [avatar$2, host$
|
|
10077
|
-
hostDirection: { ...host$
|
|
10081
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
10082
|
+
hostHeight: { ...host$3, property: 'height' },
|
|
10083
|
+
cursor: [avatar$2, host$3],
|
|
10084
|
+
hostDirection: { ...host$3, property: 'direction' },
|
|
10078
10085
|
avatarTextColor: { ...avatar$2, property: 'color' },
|
|
10079
10086
|
avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
|
|
10080
10087
|
editableIconColor: { ...editableBadge, property: 'color' },
|
|
@@ -10121,23 +10128,23 @@ const avatar = {
|
|
|
10121
10128
|
},
|
|
10122
10129
|
};
|
|
10123
10130
|
|
|
10124
|
-
const vars$
|
|
10131
|
+
const vars$4 = {
|
|
10125
10132
|
...compVars,
|
|
10126
10133
|
};
|
|
10127
10134
|
|
|
10128
10135
|
var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10129
10136
|
__proto__: null,
|
|
10130
10137
|
default: avatar,
|
|
10131
|
-
vars: vars$
|
|
10138
|
+
vars: vars$4
|
|
10132
10139
|
});
|
|
10133
10140
|
|
|
10134
|
-
const componentName$
|
|
10141
|
+
const componentName$6 = getComponentName('mappings-field-internal');
|
|
10135
10142
|
|
|
10136
|
-
createBaseInputClass({ componentName: componentName$
|
|
10143
|
+
createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
|
|
10137
10144
|
|
|
10138
|
-
const componentName$
|
|
10145
|
+
const componentName$5 = getComponentName('mappings-field');
|
|
10139
10146
|
|
|
10140
|
-
const customMixin = (superclass) =>
|
|
10147
|
+
const customMixin$1 = (superclass) =>
|
|
10141
10148
|
class MappingsFieldMixinClass extends superclass {
|
|
10142
10149
|
get defaultValues() {
|
|
10143
10150
|
const defaultValuesAttr = this.getAttribute('default-values');
|
|
@@ -10164,14 +10171,14 @@ const customMixin = (superclass) =>
|
|
|
10164
10171
|
const template = document.createElement('template');
|
|
10165
10172
|
|
|
10166
10173
|
template.innerHTML = `
|
|
10167
|
-
<${componentName$
|
|
10174
|
+
<${componentName$6}
|
|
10168
10175
|
tabindex="-1"
|
|
10169
|
-
></${componentName$
|
|
10176
|
+
></${componentName$6}>
|
|
10170
10177
|
`;
|
|
10171
10178
|
|
|
10172
10179
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10173
10180
|
|
|
10174
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
10181
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
|
10175
10182
|
|
|
10176
10183
|
forwardAttrs(this, this.inputElement, {
|
|
10177
10184
|
includeAttrs: [
|
|
@@ -10189,16 +10196,21 @@ const customMixin = (superclass) =>
|
|
|
10189
10196
|
],
|
|
10190
10197
|
});
|
|
10191
10198
|
|
|
10199
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
|
10200
|
+
// we want to reflect the change in the parent component
|
|
10201
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10202
|
+
|
|
10192
10203
|
this.setDefaultValues();
|
|
10193
10204
|
}
|
|
10194
10205
|
};
|
|
10195
10206
|
|
|
10196
10207
|
const {
|
|
10197
|
-
host: host$
|
|
10208
|
+
host: host$2,
|
|
10198
10209
|
helperText,
|
|
10199
10210
|
errorMessage,
|
|
10200
10211
|
mappingItem,
|
|
10201
10212
|
labels,
|
|
10213
|
+
labelsText,
|
|
10202
10214
|
valueLabel,
|
|
10203
10215
|
attrLabel,
|
|
10204
10216
|
separator,
|
|
@@ -10209,6 +10221,9 @@ const {
|
|
|
10209
10221
|
errorMessage: { selector: '::part(error-message)' },
|
|
10210
10222
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
|
10211
10223
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
|
10224
|
+
labelsText: {
|
|
10225
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
|
10226
|
+
},
|
|
10212
10227
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
|
10213
10228
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
|
10214
10229
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
|
@@ -10218,12 +10233,17 @@ const {
|
|
|
10218
10233
|
const MappingsFieldClass = compose(
|
|
10219
10234
|
createStyleMixin({
|
|
10220
10235
|
mappings: {
|
|
10221
|
-
hostWidth: { ...host$
|
|
10222
|
-
hostDirection: { ...host$
|
|
10236
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
10237
|
+
hostDirection: { ...host$2, property: 'direction' },
|
|
10223
10238
|
// we apply font-size also on the host so we can set its width with em
|
|
10224
|
-
fontSize: [{}, host$
|
|
10239
|
+
fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
|
|
10225
10240
|
fontFamily: [helperText, errorMessage, labels],
|
|
10226
10241
|
separatorFontSize: { ...separator, property: 'font-size' },
|
|
10242
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
|
10243
|
+
labelsLineHeight: [
|
|
10244
|
+
{ ...labelsText, property: 'line-height' },
|
|
10245
|
+
{ ...labels, property: 'line-height' },
|
|
10246
|
+
],
|
|
10227
10247
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
|
10228
10248
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
|
10229
10249
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
|
@@ -10240,7 +10260,7 @@ const MappingsFieldClass = compose(
|
|
|
10240
10260
|
proxyParentValidation: true,
|
|
10241
10261
|
}),
|
|
10242
10262
|
componentNameValidationMixin,
|
|
10243
|
-
customMixin
|
|
10263
|
+
customMixin$1
|
|
10244
10264
|
)(
|
|
10245
10265
|
createProxy({
|
|
10246
10266
|
slots: [],
|
|
@@ -10287,36 +10307,38 @@ const MappingsFieldClass = compose(
|
|
|
10287
10307
|
'options',
|
|
10288
10308
|
'error-message',
|
|
10289
10309
|
],
|
|
10290
|
-
componentName: componentName$
|
|
10310
|
+
componentName: componentName$5,
|
|
10291
10311
|
})
|
|
10292
10312
|
);
|
|
10293
10313
|
|
|
10294
10314
|
const globalRefs$1 = getThemeRefs(globals);
|
|
10295
10315
|
|
|
10296
|
-
const vars$
|
|
10316
|
+
const vars$3 = MappingsFieldClass.cssVarList;
|
|
10297
10317
|
|
|
10298
10318
|
const mappingsField = {
|
|
10299
|
-
[vars$
|
|
10300
|
-
[vars$
|
|
10301
|
-
[vars$
|
|
10302
|
-
[vars$
|
|
10303
|
-
[vars$
|
|
10304
|
-
[vars$
|
|
10305
|
-
[vars$
|
|
10319
|
+
[vars$3.hostWidth]: refs.width,
|
|
10320
|
+
[vars$3.hostDirection]: refs.direction,
|
|
10321
|
+
[vars$3.fontSize]: refs.fontSize,
|
|
10322
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
|
10323
|
+
[vars$3.separatorFontSize]: '14px',
|
|
10324
|
+
[vars$3.labelsFontSize]: '14px',
|
|
10325
|
+
[vars$3.labelsLineHeight]: '1',
|
|
10326
|
+
[vars$3.labelsMarginBottom]: '6px',
|
|
10327
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
|
10328
|
+
[vars$3.itemMarginBottom]: '1em',
|
|
10306
10329
|
// To be positioned correctly, the min width has to match the text field min width
|
|
10307
|
-
[vars$
|
|
10330
|
+
[vars$3.valueLabelMinWidth]: refs.minWidth,
|
|
10308
10331
|
// To be positioned correctly, the min width has to match the combo box field min width
|
|
10309
|
-
[vars$
|
|
10310
|
-
[vars$
|
|
10311
|
-
[vars$
|
|
10312
|
-
[vars$2.removeButtonWidth]: '60px',
|
|
10332
|
+
[vars$3.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$1.border.xs})`,
|
|
10333
|
+
[vars$3.separatorWidth]: '70px',
|
|
10334
|
+
[vars$3.removeButtonWidth]: '60px',
|
|
10313
10335
|
};
|
|
10314
10336
|
|
|
10315
10337
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|
|
10316
10338
|
__proto__: null,
|
|
10317
10339
|
default: mappingsField,
|
|
10318
10340
|
mappingsField: mappingsField,
|
|
10319
|
-
vars: vars$
|
|
10341
|
+
vars: vars$3
|
|
10320
10342
|
});
|
|
10321
10343
|
|
|
10322
10344
|
function deleteIcon() {
|
|
@@ -10327,9 +10349,9 @@ function editIcon() {
|
|
|
10327
10349
|
return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
|
|
10328
10350
|
}
|
|
10329
10351
|
|
|
10330
|
-
const componentName$
|
|
10352
|
+
const componentName$4 = getComponentName('user-attribute');
|
|
10331
10353
|
class RawUserAttribute extends createBaseClass({
|
|
10332
|
-
componentName: componentName$
|
|
10354
|
+
componentName: componentName$4,
|
|
10333
10355
|
baseSelector: ':host > .root',
|
|
10334
10356
|
}) {
|
|
10335
10357
|
constructor() {
|
|
@@ -10515,7 +10537,7 @@ class RawUserAttribute extends createBaseClass({
|
|
|
10515
10537
|
}
|
|
10516
10538
|
}
|
|
10517
10539
|
|
|
10518
|
-
const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10540
|
+
const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrapper } = {
|
|
10519
10541
|
host: { selector: () => ':host' },
|
|
10520
10542
|
textFields: { selector: 'descope-text' },
|
|
10521
10543
|
valueText: { selector: 'descope-text[data-id="value-text"]' },
|
|
@@ -10528,10 +10550,10 @@ const { host, textFields, buttons, badge, labelText, valueText, textWrapper } =
|
|
|
10528
10550
|
const UserAttributeClass = compose(
|
|
10529
10551
|
createStyleMixin({
|
|
10530
10552
|
mappings: {
|
|
10531
|
-
hostWidth: { ...host, property: 'width' },
|
|
10532
|
-
hostMinWidth: { ...host, property: 'min-width' },
|
|
10553
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
10554
|
+
hostMinWidth: { ...host$1, property: 'min-width' },
|
|
10533
10555
|
hostDirection: [
|
|
10534
|
-
{ ...host, property: 'direction' },
|
|
10556
|
+
{ ...host$1, property: 'direction' },
|
|
10535
10557
|
{ ...textFields, property: TextClass.cssVarList.hostDirection },
|
|
10536
10558
|
{ ...buttons, property: ButtonClass.cssVarList.hostDirection },
|
|
10537
10559
|
{ ...badge, property: BadgeClass.cssVarList.hostDirection },
|
|
@@ -10547,23 +10569,140 @@ const UserAttributeClass = compose(
|
|
|
10547
10569
|
)(RawUserAttribute);
|
|
10548
10570
|
|
|
10549
10571
|
const globalRefs = getThemeRefs(globals);
|
|
10550
|
-
const vars$
|
|
10572
|
+
const vars$2 = UserAttributeClass.cssVarList;
|
|
10551
10573
|
|
|
10552
10574
|
const userAttribute = {
|
|
10553
|
-
[vars$
|
|
10554
|
-
[vars$
|
|
10555
|
-
[vars$
|
|
10556
|
-
[vars$
|
|
10557
|
-
[vars$
|
|
10558
|
-
[vars$
|
|
10575
|
+
[vars$2.hostDirection]: globalRefs.direction,
|
|
10576
|
+
[vars$2.labelTextWidth]: '150px',
|
|
10577
|
+
[vars$2.valueTextWidth]: '200px',
|
|
10578
|
+
[vars$2.badgeMaxWidth]: '85px',
|
|
10579
|
+
[vars$2.itemsGap]: '16px',
|
|
10580
|
+
[vars$2.hostMinWidth]: '530px',
|
|
10559
10581
|
_fullWidth: {
|
|
10560
|
-
[vars$
|
|
10582
|
+
[vars$2.hostWidth]: '100%',
|
|
10561
10583
|
},
|
|
10562
10584
|
};
|
|
10563
10585
|
|
|
10564
10586
|
var userAttribute$1 = /*#__PURE__*/Object.freeze({
|
|
10565
10587
|
__proto__: null,
|
|
10566
10588
|
default: userAttribute,
|
|
10589
|
+
vars: vars$2
|
|
10590
|
+
});
|
|
10591
|
+
|
|
10592
|
+
const componentName$3 = getComponentName('saml-group-mappings-internal');
|
|
10593
|
+
|
|
10594
|
+
createBaseInputClass({ componentName: componentName$3, baseSelector: '' });
|
|
10595
|
+
|
|
10596
|
+
const componentName$2 = getComponentName('saml-group-mappings');
|
|
10597
|
+
|
|
10598
|
+
const customMixin = (superclass) =>
|
|
10599
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
|
10600
|
+
init() {
|
|
10601
|
+
super.init?.();
|
|
10602
|
+
|
|
10603
|
+
const template = document.createElement('template');
|
|
10604
|
+
|
|
10605
|
+
template.innerHTML = `
|
|
10606
|
+
<${componentName$3}
|
|
10607
|
+
tabindex="-1"
|
|
10608
|
+
></${componentName$3}>
|
|
10609
|
+
`;
|
|
10610
|
+
|
|
10611
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
10612
|
+
|
|
10613
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
|
10614
|
+
|
|
10615
|
+
forwardAttrs(this, this.inputElement, {
|
|
10616
|
+
includeAttrs: [
|
|
10617
|
+
'size',
|
|
10618
|
+
'full-width',
|
|
10619
|
+
'label-group',
|
|
10620
|
+
'label-value',
|
|
10621
|
+
'label-attr',
|
|
10622
|
+
'button-label',
|
|
10623
|
+
'separator',
|
|
10624
|
+
'options',
|
|
10625
|
+
'readonly',
|
|
10626
|
+
'disabled',
|
|
10627
|
+
],
|
|
10628
|
+
});
|
|
10629
|
+
|
|
10630
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
|
10631
|
+
}
|
|
10632
|
+
};
|
|
10633
|
+
|
|
10634
|
+
const { host, groupInput } = {
|
|
10635
|
+
host: { selector: () => ':host' },
|
|
10636
|
+
groupInput: { selector: 'descope-text-field' },
|
|
10637
|
+
};
|
|
10638
|
+
|
|
10639
|
+
const SamlGroupMappingsClass = compose(
|
|
10640
|
+
createStyleMixin({
|
|
10641
|
+
mappings: {
|
|
10642
|
+
hostWidth: { ...host, property: 'width' },
|
|
10643
|
+
hostDirection: { ...host, property: 'direction' },
|
|
10644
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
|
10645
|
+
},
|
|
10646
|
+
}),
|
|
10647
|
+
draggableMixin,
|
|
10648
|
+
composedProxyInputMixin({
|
|
10649
|
+
proxyProps: ['value', 'selectionStart'],
|
|
10650
|
+
inputEvent: 'input',
|
|
10651
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
|
10652
|
+
proxyParentValidation: true,
|
|
10653
|
+
}),
|
|
10654
|
+
componentNameValidationMixin,
|
|
10655
|
+
customMixin
|
|
10656
|
+
)(
|
|
10657
|
+
createProxy({
|
|
10658
|
+
slots: [],
|
|
10659
|
+
wrappedEleName: 'vaadin-custom-field',
|
|
10660
|
+
style: () => `
|
|
10661
|
+
:host {
|
|
10662
|
+
display: inline-flex;
|
|
10663
|
+
max-width: 100%;
|
|
10664
|
+
direction: ltr;
|
|
10665
|
+
}
|
|
10666
|
+
|
|
10667
|
+
vaadin-custom-field {
|
|
10668
|
+
line-height: unset;
|
|
10669
|
+
width: 100%;
|
|
10670
|
+
}
|
|
10671
|
+
|
|
10672
|
+
descope-text-field {
|
|
10673
|
+
width: auto;
|
|
10674
|
+
}
|
|
10675
|
+
|
|
10676
|
+
descope-mappings-field {
|
|
10677
|
+
display: block;
|
|
10678
|
+
}
|
|
10679
|
+
`,
|
|
10680
|
+
excludeAttrsSync: [
|
|
10681
|
+
'tabindex',
|
|
10682
|
+
'label-group',
|
|
10683
|
+
'label-value',
|
|
10684
|
+
'label-attr',
|
|
10685
|
+
'button-label',
|
|
10686
|
+
'separator',
|
|
10687
|
+
'options',
|
|
10688
|
+
'error-message',
|
|
10689
|
+
],
|
|
10690
|
+
componentName: componentName$2,
|
|
10691
|
+
})
|
|
10692
|
+
);
|
|
10693
|
+
|
|
10694
|
+
const vars$1 = SamlGroupMappingsClass.cssVarList;
|
|
10695
|
+
|
|
10696
|
+
const samlGroupMappings = {
|
|
10697
|
+
[vars$1.hostWidth]: refs.width,
|
|
10698
|
+
[vars$1.hostDirection]: refs.direction,
|
|
10699
|
+
[vars$1.groupNameInputMarginBottom]: '1em',
|
|
10700
|
+
};
|
|
10701
|
+
|
|
10702
|
+
var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
|
|
10703
|
+
__proto__: null,
|
|
10704
|
+
default: samlGroupMappings,
|
|
10705
|
+
samlGroupMappings: samlGroupMappings,
|
|
10567
10706
|
vars: vars$1
|
|
10568
10707
|
});
|
|
10569
10708
|
|
|
@@ -10604,6 +10743,7 @@ const components = {
|
|
|
10604
10743
|
avatar: avatar$1,
|
|
10605
10744
|
mappingsField: mappingsField$1,
|
|
10606
10745
|
userAttribute: userAttribute$1,
|
|
10746
|
+
samlGroupMappings: samlGroupMappings$1,
|
|
10607
10747
|
};
|
|
10608
10748
|
|
|
10609
10749
|
const theme = Object.keys(components).reduce(
|
|
@@ -10616,7 +10756,7 @@ const vars = Object.keys(components).reduce(
|
|
|
10616
10756
|
);
|
|
10617
10757
|
|
|
10618
10758
|
const defaultTheme = { globals, components: theme };
|
|
10619
|
-
const themeVars = { globals: vars$
|
|
10759
|
+
const themeVars = { globals: vars$C, components: vars };
|
|
10620
10760
|
|
|
10621
10761
|
const colors = {
|
|
10622
10762
|
surface: {
|
|
@@ -10946,6 +11086,7 @@ exports.PasswordClass = PasswordClass;
|
|
|
10946
11086
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
10947
11087
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
10948
11088
|
exports.RecaptchaClass = RecaptchaClass;
|
|
11089
|
+
exports.SamlGroupMappingsClass = SamlGroupMappingsClass;
|
|
10949
11090
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
10950
11091
|
exports.TextAreaClass = TextAreaClass;
|
|
10951
11092
|
exports.TextClass = TextClass;
|