@descope/web-components-ui 1.0.258 → 1.0.260
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/dist/cjs/index.cjs.js +272 -250
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +243 -220
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-notp-image-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/ButtonClass.js +1 -2
- package/src/components/descope-notp-image/NotpImageClass.js +10 -0
- package/src/components/descope-notp-image/index.js +5 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/mixins/createStyleMixin/helpers.js +10 -9
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/notpImage.js +10 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -526,10 +526,9 @@ const globals = {
|
|
526
526
|
fonts,
|
527
527
|
direction,
|
528
528
|
};
|
529
|
-
const vars$
|
529
|
+
const vars$y = getThemeVars(globals);
|
530
530
|
|
531
|
-
const
|
532
|
-
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
531
|
+
const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
|
533
532
|
|
534
533
|
const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
|
535
534
|
isFunction(relativeSelectorOrSelectorFn)
|
@@ -582,13 +581,15 @@ const createStyle = (componentName, baseSelector, mappings) => {
|
|
582
581
|
|
583
582
|
const cssVarName = getCssVarName(componentName, attr);
|
584
583
|
|
585
|
-
attrConfig.forEach(
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
584
|
+
attrConfig.forEach(
|
585
|
+
({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
|
586
|
+
style.add(
|
587
|
+
createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
|
588
|
+
isFunction(property) ? property() : property,
|
589
|
+
createCssVar(cssVarName, fallback) + (important ? '!important' : '')
|
590
|
+
);
|
591
|
+
}
|
592
|
+
);
|
592
593
|
});
|
593
594
|
|
594
595
|
return style.toString();
|
@@ -2413,7 +2414,7 @@ const clickableMixin = (superclass) =>
|
|
2413
2414
|
}
|
2414
2415
|
};
|
2415
2416
|
|
2416
|
-
const componentName$
|
2417
|
+
const componentName$F = getComponentName('button');
|
2417
2418
|
|
2418
2419
|
const resetStyles = `
|
2419
2420
|
:host {
|
@@ -2432,7 +2433,6 @@ const resetStyles = `
|
|
2432
2433
|
box-shadow: none;
|
2433
2434
|
}
|
2434
2435
|
vaadin-button::part(label) {
|
2435
|
-
justify-content: center;
|
2436
2436
|
padding: 0;
|
2437
2437
|
width: 100%;
|
2438
2438
|
}
|
@@ -2486,7 +2486,7 @@ const ButtonClass = compose(
|
|
2486
2486
|
labelTextColor: { property: 'color' },
|
2487
2487
|
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
2488
2488
|
labelSpacing: { ...label$a, property: 'gap' },
|
2489
|
-
textAlign: { ...label$a, property: 'justify-content',
|
2489
|
+
textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
|
2490
2490
|
},
|
2491
2491
|
}),
|
2492
2492
|
clickableMixin,
|
@@ -2516,7 +2516,7 @@ const ButtonClass = compose(
|
|
2516
2516
|
}
|
2517
2517
|
`,
|
2518
2518
|
excludeAttrsSync: ['tabindex'],
|
2519
|
-
componentName: componentName$
|
2519
|
+
componentName: componentName$F,
|
2520
2520
|
})
|
2521
2521
|
);
|
2522
2522
|
|
@@ -2564,7 +2564,7 @@ const mode = {
|
|
2564
2564
|
surface: globalRefs$i.colors.surface,
|
2565
2565
|
};
|
2566
2566
|
|
2567
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
2567
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
|
2568
2568
|
|
2569
2569
|
const button = {
|
2570
2570
|
...helperTheme$3,
|
@@ -2669,7 +2669,7 @@ const button = {
|
|
2669
2669
|
},
|
2670
2670
|
};
|
2671
2671
|
|
2672
|
-
const vars$
|
2672
|
+
const vars$x = {
|
2673
2673
|
...compVars$4,
|
2674
2674
|
...helperVars$3,
|
2675
2675
|
};
|
@@ -2677,7 +2677,7 @@ const vars$w = {
|
|
2677
2677
|
var button$1 = /*#__PURE__*/Object.freeze({
|
2678
2678
|
__proto__: null,
|
2679
2679
|
default: button,
|
2680
|
-
vars: vars$
|
2680
|
+
vars: vars$x
|
2681
2681
|
});
|
2682
2682
|
|
2683
2683
|
const { host: host$g, label: label$9, placeholder: placeholder$3, requiredIndicator: requiredIndicator$b, inputField: inputField$6, input, helperText: helperText$9, errorMessage: errorMessage$b } =
|
@@ -2864,7 +2864,7 @@ const resetInputLabelPosition = (name) => `
|
|
2864
2864
|
}
|
2865
2865
|
`;
|
2866
2866
|
|
2867
|
-
const componentName$
|
2867
|
+
const componentName$E = getComponentName('text-field');
|
2868
2868
|
|
2869
2869
|
const observedAttrs = ['type'];
|
2870
2870
|
|
@@ -2914,14 +2914,14 @@ const TextFieldClass = compose(
|
|
2914
2914
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2915
2915
|
`,
|
2916
2916
|
excludeAttrsSync: ['tabindex'],
|
2917
|
-
componentName: componentName$
|
2917
|
+
componentName: componentName$E,
|
2918
2918
|
})
|
2919
2919
|
);
|
2920
2920
|
|
2921
|
-
const componentName$
|
2921
|
+
const componentName$D = getComponentName('input-wrapper');
|
2922
2922
|
const globalRefs$h = getThemeRefs(globals);
|
2923
2923
|
|
2924
|
-
const [theme$1, refs, vars$
|
2924
|
+
const [theme$1, refs, vars$w] = createHelperVars(
|
2925
2925
|
{
|
2926
2926
|
labelTextColor: globalRefs$h.colors.surface.contrast,
|
2927
2927
|
valueTextColor: globalRefs$h.colors.surface.contrast,
|
@@ -2987,44 +2987,44 @@ const [theme$1, refs, vars$v] = createHelperVars(
|
|
2987
2987
|
backgroundColor: globalRefs$h.colors.surface.main,
|
2988
2988
|
},
|
2989
2989
|
},
|
2990
|
-
componentName$
|
2990
|
+
componentName$D
|
2991
2991
|
);
|
2992
2992
|
|
2993
2993
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
2994
2994
|
__proto__: null,
|
2995
2995
|
default: theme$1,
|
2996
2996
|
refs: refs,
|
2997
|
-
vars: vars$
|
2997
|
+
vars: vars$w
|
2998
2998
|
});
|
2999
2999
|
|
3000
|
-
const vars$
|
3000
|
+
const vars$v = TextFieldClass.cssVarList;
|
3001
3001
|
|
3002
3002
|
const textField = {
|
3003
|
-
[vars$
|
3004
|
-
[vars$
|
3005
|
-
[vars$
|
3006
|
-
[vars$
|
3007
|
-
[vars$
|
3008
|
-
[vars$
|
3009
|
-
[vars$
|
3010
|
-
[vars$
|
3011
|
-
[vars$
|
3012
|
-
[vars$
|
3013
|
-
[vars$
|
3014
|
-
[vars$
|
3015
|
-
[vars$
|
3016
|
-
[vars$
|
3017
|
-
[vars$
|
3018
|
-
[vars$
|
3019
|
-
[vars$
|
3020
|
-
[vars$
|
3021
|
-
[vars$
|
3022
|
-
[vars$
|
3023
|
-
[vars$
|
3003
|
+
[vars$v.hostWidth]: refs.width,
|
3004
|
+
[vars$v.hostMinWidth]: refs.minWidth,
|
3005
|
+
[vars$v.hostDirection]: refs.direction,
|
3006
|
+
[vars$v.fontSize]: refs.fontSize,
|
3007
|
+
[vars$v.fontFamily]: refs.fontFamily,
|
3008
|
+
[vars$v.labelTextColor]: refs.labelTextColor,
|
3009
|
+
[vars$v.labelRequiredIndicator]: refs.requiredIndicator,
|
3010
|
+
[vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
|
3011
|
+
[vars$v.inputValueTextColor]: refs.valueTextColor,
|
3012
|
+
[vars$v.inputPlaceholderColor]: refs.placeholderTextColor,
|
3013
|
+
[vars$v.inputBorderWidth]: refs.borderWidth,
|
3014
|
+
[vars$v.inputBorderStyle]: refs.borderStyle,
|
3015
|
+
[vars$v.inputBorderColor]: refs.borderColor,
|
3016
|
+
[vars$v.inputBorderRadius]: refs.borderRadius,
|
3017
|
+
[vars$v.inputOutlineWidth]: refs.outlineWidth,
|
3018
|
+
[vars$v.inputOutlineStyle]: refs.outlineStyle,
|
3019
|
+
[vars$v.inputOutlineColor]: refs.outlineColor,
|
3020
|
+
[vars$v.inputOutlineOffset]: refs.outlineOffset,
|
3021
|
+
[vars$v.inputBackgroundColor]: refs.backgroundColor,
|
3022
|
+
[vars$v.inputHeight]: refs.inputHeight,
|
3023
|
+
[vars$v.inputHorizontalPadding]: refs.horizontalPadding,
|
3024
3024
|
textAlign: {
|
3025
|
-
right: { [vars$
|
3026
|
-
left: { [vars$
|
3027
|
-
center: { [vars$
|
3025
|
+
right: { [vars$v.inputTextAlign]: 'right' },
|
3026
|
+
left: { [vars$v.inputTextAlign]: 'left' },
|
3027
|
+
center: { [vars$v.inputTextAlign]: 'center' },
|
3028
3028
|
},
|
3029
3029
|
};
|
3030
3030
|
|
@@ -3032,7 +3032,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
3032
3032
|
__proto__: null,
|
3033
3033
|
default: textField,
|
3034
3034
|
textField: textField,
|
3035
|
-
vars: vars$
|
3035
|
+
vars: vars$v
|
3036
3036
|
});
|
3037
3037
|
|
3038
3038
|
const passwordDraggableMixin = (superclass) =>
|
@@ -3069,7 +3069,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
3069
3069
|
}
|
3070
3070
|
};
|
3071
3071
|
|
3072
|
-
const componentName$
|
3072
|
+
const componentName$C = getComponentName('password');
|
3073
3073
|
|
3074
3074
|
const {
|
3075
3075
|
host: host$f,
|
@@ -3200,45 +3200,45 @@ const PasswordClass = compose(
|
|
3200
3200
|
}
|
3201
3201
|
`,
|
3202
3202
|
excludeAttrsSync: ['tabindex'],
|
3203
|
-
componentName: componentName$
|
3203
|
+
componentName: componentName$C,
|
3204
3204
|
})
|
3205
3205
|
);
|
3206
3206
|
|
3207
3207
|
const globalRefs$g = getThemeRefs(globals);
|
3208
|
-
const vars$
|
3208
|
+
const vars$u = PasswordClass.cssVarList;
|
3209
3209
|
|
3210
3210
|
const password = {
|
3211
|
-
[vars$
|
3212
|
-
[vars$
|
3213
|
-
[vars$
|
3214
|
-
[vars$
|
3215
|
-
[vars$
|
3216
|
-
[vars$
|
3217
|
-
[vars$
|
3218
|
-
[vars$
|
3219
|
-
[vars$
|
3220
|
-
[vars$
|
3221
|
-
[vars$
|
3222
|
-
[vars$
|
3223
|
-
[vars$
|
3224
|
-
[vars$
|
3225
|
-
[vars$
|
3226
|
-
[vars$
|
3227
|
-
[vars$
|
3228
|
-
[vars$
|
3229
|
-
[vars$
|
3230
|
-
[vars$
|
3231
|
-
[vars$
|
3232
|
-
[vars$
|
3211
|
+
[vars$u.hostWidth]: refs.width,
|
3212
|
+
[vars$u.hostDirection]: refs.direction,
|
3213
|
+
[vars$u.fontSize]: refs.fontSize,
|
3214
|
+
[vars$u.fontFamily]: refs.fontFamily,
|
3215
|
+
[vars$u.labelTextColor]: refs.labelTextColor,
|
3216
|
+
[vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
|
3217
|
+
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
3218
|
+
[vars$u.inputHeight]: refs.inputHeight,
|
3219
|
+
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
3220
|
+
[vars$u.labelRequiredIndicator]: refs.requiredIndicator,
|
3221
|
+
[vars$u.inputValueTextColor]: refs.valueTextColor,
|
3222
|
+
[vars$u.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3223
|
+
[vars$u.inputBorderWidth]: refs.borderWidth,
|
3224
|
+
[vars$u.inputBorderStyle]: refs.borderStyle,
|
3225
|
+
[vars$u.inputBorderColor]: refs.borderColor,
|
3226
|
+
[vars$u.inputBorderRadius]: refs.borderRadius,
|
3227
|
+
[vars$u.inputOutlineWidth]: refs.outlineWidth,
|
3228
|
+
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
3229
|
+
[vars$u.inputOutlineColor]: refs.outlineColor,
|
3230
|
+
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
3231
|
+
[vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
|
3232
|
+
[vars$u.revealButtonSize]: refs.toggleButtonSize,
|
3233
3233
|
};
|
3234
3234
|
|
3235
3235
|
var password$1 = /*#__PURE__*/Object.freeze({
|
3236
3236
|
__proto__: null,
|
3237
3237
|
default: password,
|
3238
|
-
vars: vars$
|
3238
|
+
vars: vars$u
|
3239
3239
|
});
|
3240
3240
|
|
3241
|
-
const componentName$
|
3241
|
+
const componentName$B = getComponentName('number-field');
|
3242
3242
|
|
3243
3243
|
const NumberFieldClass = compose(
|
3244
3244
|
createStyleMixin({
|
@@ -3264,43 +3264,43 @@ const NumberFieldClass = compose(
|
|
3264
3264
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
3265
3265
|
`,
|
3266
3266
|
excludeAttrsSync: ['tabindex'],
|
3267
|
-
componentName: componentName$
|
3267
|
+
componentName: componentName$B,
|
3268
3268
|
})
|
3269
3269
|
);
|
3270
3270
|
|
3271
|
-
const vars$
|
3271
|
+
const vars$t = NumberFieldClass.cssVarList;
|
3272
3272
|
|
3273
3273
|
const numberField = {
|
3274
|
-
[vars$
|
3275
|
-
[vars$
|
3276
|
-
[vars$
|
3277
|
-
[vars$
|
3278
|
-
[vars$
|
3279
|
-
[vars$
|
3280
|
-
[vars$
|
3281
|
-
[vars$
|
3282
|
-
[vars$
|
3283
|
-
[vars$
|
3284
|
-
[vars$
|
3285
|
-
[vars$
|
3286
|
-
[vars$
|
3287
|
-
[vars$
|
3288
|
-
[vars$
|
3289
|
-
[vars$
|
3290
|
-
[vars$
|
3291
|
-
[vars$
|
3292
|
-
[vars$
|
3293
|
-
[vars$
|
3294
|
-
[vars$
|
3274
|
+
[vars$t.hostWidth]: refs.width,
|
3275
|
+
[vars$t.hostMinWidth]: refs.minWidth,
|
3276
|
+
[vars$t.hostDirection]: refs.direction,
|
3277
|
+
[vars$t.fontSize]: refs.fontSize,
|
3278
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
3279
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
3280
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
3281
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
3282
|
+
[vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
|
3283
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
3284
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
3285
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
3286
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
3287
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
3288
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
3289
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
3290
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
3291
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
3292
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
3293
|
+
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
3294
|
+
[vars$t.inputHeight]: refs.inputHeight,
|
3295
3295
|
};
|
3296
3296
|
|
3297
3297
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
3298
3298
|
__proto__: null,
|
3299
3299
|
default: numberField,
|
3300
|
-
vars: vars$
|
3300
|
+
vars: vars$t
|
3301
3301
|
});
|
3302
3302
|
|
3303
|
-
const componentName$
|
3303
|
+
const componentName$A = getComponentName('email-field');
|
3304
3304
|
|
3305
3305
|
const customMixin$5 = (superclass) =>
|
3306
3306
|
class EmailFieldMixinClass extends superclass {
|
@@ -3335,43 +3335,43 @@ const EmailFieldClass = compose(
|
|
3335
3335
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
3336
3336
|
`,
|
3337
3337
|
excludeAttrsSync: ['tabindex'],
|
3338
|
-
componentName: componentName$
|
3338
|
+
componentName: componentName$A,
|
3339
3339
|
})
|
3340
3340
|
);
|
3341
3341
|
|
3342
|
-
const vars$
|
3342
|
+
const vars$s = EmailFieldClass.cssVarList;
|
3343
3343
|
|
3344
3344
|
const emailField = {
|
3345
|
-
[vars$
|
3346
|
-
[vars$
|
3347
|
-
[vars$
|
3348
|
-
[vars$
|
3349
|
-
[vars$
|
3350
|
-
[vars$
|
3351
|
-
[vars$
|
3352
|
-
[vars$
|
3353
|
-
[vars$
|
3354
|
-
[vars$
|
3355
|
-
[vars$
|
3356
|
-
[vars$
|
3357
|
-
[vars$
|
3358
|
-
[vars$
|
3359
|
-
[vars$
|
3360
|
-
[vars$
|
3361
|
-
[vars$
|
3362
|
-
[vars$
|
3363
|
-
[vars$
|
3364
|
-
[vars$
|
3365
|
-
[vars$
|
3345
|
+
[vars$s.hostWidth]: refs.width,
|
3346
|
+
[vars$s.hostMinWidth]: refs.minWidth,
|
3347
|
+
[vars$s.hostDirection]: refs.direction,
|
3348
|
+
[vars$s.fontSize]: refs.fontSize,
|
3349
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
3350
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
3351
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
3352
|
+
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
3353
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
3354
|
+
[vars$s.inputPlaceholderColor]: refs.placeholderTextColor,
|
3355
|
+
[vars$s.inputBorderWidth]: refs.borderWidth,
|
3356
|
+
[vars$s.inputBorderStyle]: refs.borderStyle,
|
3357
|
+
[vars$s.inputBorderColor]: refs.borderColor,
|
3358
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
3359
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
3360
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
3361
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
3362
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
3363
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
3364
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
3365
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
3366
3366
|
};
|
3367
3367
|
|
3368
3368
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
3369
3369
|
__proto__: null,
|
3370
3370
|
default: emailField,
|
3371
|
-
vars: vars$
|
3371
|
+
vars: vars$s
|
3372
3372
|
});
|
3373
3373
|
|
3374
|
-
const componentName$
|
3374
|
+
const componentName$z = getComponentName('text-area');
|
3375
3375
|
|
3376
3376
|
const {
|
3377
3377
|
host: host$e,
|
@@ -3447,54 +3447,54 @@ const TextAreaClass = compose(
|
|
3447
3447
|
${resetInputCursor('vaadin-text-area')}
|
3448
3448
|
`,
|
3449
3449
|
excludeAttrsSync: ['tabindex'],
|
3450
|
-
componentName: componentName$
|
3450
|
+
componentName: componentName$z,
|
3451
3451
|
})
|
3452
3452
|
);
|
3453
3453
|
|
3454
3454
|
const globalRefs$f = getThemeRefs(globals);
|
3455
|
-
const vars$
|
3455
|
+
const vars$r = TextAreaClass.cssVarList;
|
3456
3456
|
|
3457
3457
|
const textArea = {
|
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$
|
3475
|
-
[vars$
|
3476
|
-
[vars$
|
3477
|
-
[vars$
|
3478
|
-
[vars$
|
3458
|
+
[vars$r.hostWidth]: refs.width,
|
3459
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
3460
|
+
[vars$r.hostDirection]: refs.direction,
|
3461
|
+
[vars$r.fontSize]: refs.fontSize,
|
3462
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
3463
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
3464
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
3465
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
3466
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
3467
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
3468
|
+
[vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
3469
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
3470
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
3471
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
3472
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
3473
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
3474
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
3475
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
3476
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
3477
|
+
[vars$r.inputResizeType]: 'vertical',
|
3478
|
+
[vars$r.inputMinHeight]: '5em',
|
3479
3479
|
textAlign: {
|
3480
|
-
right: { [vars$
|
3481
|
-
left: { [vars$
|
3482
|
-
center: { [vars$
|
3480
|
+
right: { [vars$r.inputTextAlign]: 'right' },
|
3481
|
+
left: { [vars$r.inputTextAlign]: 'left' },
|
3482
|
+
center: { [vars$r.inputTextAlign]: 'center' },
|
3483
3483
|
},
|
3484
3484
|
|
3485
3485
|
_disabled: {
|
3486
|
-
[vars$
|
3486
|
+
[vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
3487
3487
|
},
|
3488
3488
|
|
3489
3489
|
_readonly: {
|
3490
|
-
[vars$
|
3490
|
+
[vars$r.inputResizeType]: 'none',
|
3491
3491
|
},
|
3492
3492
|
};
|
3493
3493
|
|
3494
3494
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
3495
3495
|
__proto__: null,
|
3496
3496
|
default: textArea,
|
3497
|
-
vars: vars$
|
3497
|
+
vars: vars$r
|
3498
3498
|
});
|
3499
3499
|
|
3500
3500
|
const createBaseInputClass = (...args) =>
|
@@ -3505,9 +3505,9 @@ const createBaseInputClass = (...args) =>
|
|
3505
3505
|
inputEventsDispatchingMixin
|
3506
3506
|
)(createBaseClass(...args));
|
3507
3507
|
|
3508
|
-
const componentName$
|
3508
|
+
const componentName$y = getComponentName('boolean-field-internal');
|
3509
3509
|
|
3510
|
-
createBaseInputClass({ componentName: componentName$
|
3510
|
+
createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
|
3511
3511
|
|
3512
3512
|
const booleanFieldMixin = (superclass) =>
|
3513
3513
|
class BooleanFieldMixinClass extends superclass {
|
@@ -3516,14 +3516,14 @@ const booleanFieldMixin = (superclass) =>
|
|
3516
3516
|
|
3517
3517
|
const template = document.createElement('template');
|
3518
3518
|
template.innerHTML = `
|
3519
|
-
<${componentName$
|
3519
|
+
<${componentName$y}
|
3520
3520
|
tabindex="-1"
|
3521
3521
|
slot="input"
|
3522
|
-
></${componentName$
|
3522
|
+
></${componentName$y}>
|
3523
3523
|
`;
|
3524
3524
|
|
3525
3525
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3526
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3526
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$y);
|
3527
3527
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
3528
3528
|
|
3529
3529
|
forwardAttrs(this, this.inputElement, {
|
@@ -3593,7 +3593,7 @@ descope-boolean-field-internal {
|
|
3593
3593
|
}
|
3594
3594
|
`;
|
3595
3595
|
|
3596
|
-
const componentName$
|
3596
|
+
const componentName$x = getComponentName('checkbox');
|
3597
3597
|
|
3598
3598
|
const {
|
3599
3599
|
host: host$d,
|
@@ -3699,51 +3699,51 @@ const CheckboxClass = compose(
|
|
3699
3699
|
}
|
3700
3700
|
`,
|
3701
3701
|
excludeAttrsSync: ['label', 'tabindex'],
|
3702
|
-
componentName: componentName$
|
3702
|
+
componentName: componentName$x,
|
3703
3703
|
})
|
3704
3704
|
);
|
3705
3705
|
|
3706
|
-
const vars$
|
3706
|
+
const vars$q = CheckboxClass.cssVarList;
|
3707
3707
|
const checkboxSize = '1.35em';
|
3708
3708
|
|
3709
3709
|
const checkbox = {
|
3710
|
-
[vars$
|
3711
|
-
[vars$
|
3712
|
-
[vars$
|
3713
|
-
[vars$
|
3714
|
-
[vars$
|
3715
|
-
[vars$
|
3716
|
-
[vars$
|
3717
|
-
[vars$
|
3718
|
-
[vars$
|
3719
|
-
[vars$
|
3720
|
-
[vars$
|
3721
|
-
[vars$
|
3722
|
-
[vars$
|
3723
|
-
[vars$
|
3724
|
-
[vars$
|
3725
|
-
[vars$
|
3726
|
-
[vars$
|
3727
|
-
[vars$
|
3728
|
-
[vars$
|
3729
|
-
[vars$
|
3710
|
+
[vars$q.hostWidth]: refs.width,
|
3711
|
+
[vars$q.hostDirection]: refs.direction,
|
3712
|
+
[vars$q.fontSize]: refs.fontSize,
|
3713
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
3714
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
3715
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
3716
|
+
[vars$q.labelFontWeight]: '400',
|
3717
|
+
[vars$q.labelLineHeight]: checkboxSize,
|
3718
|
+
[vars$q.labelSpacing]: '1em',
|
3719
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
3720
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
3721
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
3722
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
3723
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
3724
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
3725
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
3726
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
3727
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
3728
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
3729
|
+
[vars$q.inputSize]: checkboxSize,
|
3730
3730
|
|
3731
3731
|
_checked: {
|
3732
|
-
[vars$
|
3732
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
3733
3733
|
},
|
3734
3734
|
|
3735
3735
|
_disabled: {
|
3736
|
-
[vars$
|
3736
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
3737
3737
|
},
|
3738
3738
|
};
|
3739
3739
|
|
3740
3740
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
3741
3741
|
__proto__: null,
|
3742
3742
|
default: checkbox,
|
3743
|
-
vars: vars$
|
3743
|
+
vars: vars$q
|
3744
3744
|
});
|
3745
3745
|
|
3746
|
-
const componentName$
|
3746
|
+
const componentName$w = getComponentName('switch-toggle');
|
3747
3747
|
|
3748
3748
|
const {
|
3749
3749
|
host: host$c,
|
@@ -3875,7 +3875,7 @@ const SwitchToggleClass = compose(
|
|
3875
3875
|
}
|
3876
3876
|
`,
|
3877
3877
|
excludeAttrsSync: ['label', 'tabindex'],
|
3878
|
-
componentName: componentName$
|
3878
|
+
componentName: componentName$w,
|
3879
3879
|
})
|
3880
3880
|
);
|
3881
3881
|
|
@@ -3883,75 +3883,75 @@ const knobMargin = '2px';
|
|
3883
3883
|
const checkboxHeight = '1.25em';
|
3884
3884
|
|
3885
3885
|
const globalRefs$e = getThemeRefs(globals);
|
3886
|
-
const vars$
|
3886
|
+
const vars$p = SwitchToggleClass.cssVarList;
|
3887
3887
|
|
3888
3888
|
const switchToggle = {
|
3889
|
-
[vars$
|
3890
|
-
[vars$
|
3891
|
-
[vars$
|
3892
|
-
[vars$
|
3893
|
-
|
3894
|
-
[vars$
|
3895
|
-
[vars$
|
3896
|
-
[vars$
|
3897
|
-
[vars$
|
3898
|
-
|
3899
|
-
[vars$
|
3900
|
-
[vars$
|
3901
|
-
[vars$
|
3902
|
-
[vars$
|
3903
|
-
[vars$
|
3904
|
-
[vars$
|
3905
|
-
[vars$
|
3906
|
-
|
3907
|
-
[vars$
|
3908
|
-
[vars$
|
3909
|
-
[vars$
|
3910
|
-
[vars$
|
3911
|
-
[vars$
|
3912
|
-
[vars$
|
3913
|
-
|
3914
|
-
[vars$
|
3915
|
-
[vars$
|
3916
|
-
[vars$
|
3917
|
-
[vars$
|
3918
|
-
[vars$
|
3919
|
-
[vars$
|
3889
|
+
[vars$p.hostWidth]: refs.width,
|
3890
|
+
[vars$p.hostDirection]: refs.direction,
|
3891
|
+
[vars$p.fontSize]: refs.fontSize,
|
3892
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
3893
|
+
|
3894
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
3895
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
3896
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
3897
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
3898
|
+
|
3899
|
+
[vars$p.trackBorderStyle]: refs.borderStyle,
|
3900
|
+
[vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3901
|
+
[vars$p.trackBorderColor]: refs.borderColor,
|
3902
|
+
[vars$p.trackBackgroundColor]: 'none',
|
3903
|
+
[vars$p.trackBorderRadius]: globalRefs$e.radius.md,
|
3904
|
+
[vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3905
|
+
[vars$p.trackHeight]: checkboxHeight,
|
3906
|
+
|
3907
|
+
[vars$p.knobSize]: `calc(1em - ${knobMargin})`,
|
3908
|
+
[vars$p.knobRadius]: '50%',
|
3909
|
+
[vars$p.knobTopOffset]: '1px',
|
3910
|
+
[vars$p.knobLeftOffset]: knobMargin,
|
3911
|
+
[vars$p.knobColor]: refs.valueTextColor,
|
3912
|
+
[vars$p.knobTransitionDuration]: '0.3s',
|
3913
|
+
|
3914
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3915
|
+
[vars$p.labelFontWeight]: '400',
|
3916
|
+
[vars$p.labelLineHeight]: '1.35em',
|
3917
|
+
[vars$p.labelSpacing]: '1em',
|
3918
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
3919
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
3920
3920
|
|
3921
3921
|
_checked: {
|
3922
|
-
[vars$
|
3923
|
-
[vars$
|
3924
|
-
[vars$
|
3925
|
-
[vars$
|
3926
|
-
[vars$
|
3922
|
+
[vars$p.trackBorderColor]: refs.borderColor,
|
3923
|
+
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
3924
|
+
[vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
|
3925
|
+
[vars$p.knobColor]: refs.valueTextColor,
|
3926
|
+
[vars$p.knobTextColor]: refs.valueTextColor,
|
3927
3927
|
},
|
3928
3928
|
|
3929
3929
|
_disabled: {
|
3930
|
-
[vars$
|
3931
|
-
[vars$
|
3932
|
-
[vars$
|
3933
|
-
[vars$
|
3930
|
+
[vars$p.knobColor]: globalRefs$e.colors.surface.light,
|
3931
|
+
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
|
3932
|
+
[vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3933
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
3934
3934
|
_checked: {
|
3935
|
-
[vars$
|
3936
|
-
[vars$
|
3935
|
+
[vars$p.knobColor]: globalRefs$e.colors.surface.light,
|
3936
|
+
[vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3937
3937
|
},
|
3938
3938
|
},
|
3939
3939
|
|
3940
3940
|
_invalid: {
|
3941
|
-
[vars$
|
3942
|
-
[vars$
|
3941
|
+
[vars$p.trackBorderColor]: globalRefs$e.colors.error.main,
|
3942
|
+
[vars$p.knobColor]: globalRefs$e.colors.error.main,
|
3943
3943
|
},
|
3944
3944
|
};
|
3945
3945
|
|
3946
3946
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
3947
3947
|
__proto__: null,
|
3948
3948
|
default: switchToggle,
|
3949
|
-
vars: vars$
|
3949
|
+
vars: vars$p
|
3950
3950
|
});
|
3951
3951
|
|
3952
|
-
const componentName$
|
3952
|
+
const componentName$v = getComponentName('container');
|
3953
3953
|
|
3954
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
3954
|
+
class RawContainer extends createBaseClass({ componentName: componentName$v, baseSelector: 'slot' }) {
|
3955
3955
|
constructor() {
|
3956
3956
|
super();
|
3957
3957
|
|
@@ -4025,7 +4025,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
4025
4025
|
horizontalAlignment,
|
4026
4026
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
4027
4027
|
},
|
4028
|
-
componentName$
|
4028
|
+
componentName$v
|
4029
4029
|
);
|
4030
4030
|
|
4031
4031
|
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
@@ -4110,7 +4110,7 @@ const container = {
|
|
4110
4110
|
},
|
4111
4111
|
};
|
4112
4112
|
|
4113
|
-
const vars$
|
4113
|
+
const vars$o = {
|
4114
4114
|
...compVars$3,
|
4115
4115
|
...helperVars$2,
|
4116
4116
|
};
|
@@ -4118,7 +4118,7 @@ const vars$n = {
|
|
4118
4118
|
var container$1 = /*#__PURE__*/Object.freeze({
|
4119
4119
|
__proto__: null,
|
4120
4120
|
default: container,
|
4121
|
-
vars: vars$
|
4121
|
+
vars: vars$o
|
4122
4122
|
});
|
4123
4123
|
|
4124
4124
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
@@ -4171,41 +4171,61 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
4171
4171
|
return CssVarImageClass;
|
4172
4172
|
};
|
4173
4173
|
|
4174
|
-
const componentName$
|
4174
|
+
const componentName$u = getComponentName('logo');
|
4175
4175
|
|
4176
4176
|
const LogoClass = createCssVarImageClass({
|
4177
|
+
componentName: componentName$u,
|
4178
|
+
varName: 'url',
|
4179
|
+
fallbackVarName: 'fallbackUrl',
|
4180
|
+
});
|
4181
|
+
|
4182
|
+
const vars$n = LogoClass.cssVarList;
|
4183
|
+
|
4184
|
+
const logo$2 = {
|
4185
|
+
[vars$n.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
4186
|
+
};
|
4187
|
+
|
4188
|
+
var logo$3 = /*#__PURE__*/Object.freeze({
|
4189
|
+
__proto__: null,
|
4190
|
+
default: logo$2,
|
4191
|
+
vars: vars$n
|
4192
|
+
});
|
4193
|
+
|
4194
|
+
const componentName$t = getComponentName('totp-image');
|
4195
|
+
|
4196
|
+
const TotpImageClass = createCssVarImageClass({
|
4177
4197
|
componentName: componentName$t,
|
4178
4198
|
varName: 'url',
|
4179
4199
|
fallbackVarName: 'fallbackUrl',
|
4180
4200
|
});
|
4181
4201
|
|
4182
|
-
const vars$m =
|
4202
|
+
const vars$m = TotpImageClass.cssVarList;
|
4183
4203
|
|
4184
4204
|
const logo$1 = {
|
4185
|
-
[vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/
|
4205
|
+
[vars$m.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
4186
4206
|
};
|
4187
4207
|
|
4188
|
-
var
|
4208
|
+
var totpImage = /*#__PURE__*/Object.freeze({
|
4189
4209
|
__proto__: null,
|
4190
4210
|
default: logo$1,
|
4191
4211
|
vars: vars$m
|
4192
4212
|
});
|
4193
4213
|
|
4194
|
-
const componentName$s = getComponentName('
|
4214
|
+
const componentName$s = getComponentName('notp-image');
|
4195
4215
|
|
4196
|
-
const
|
4216
|
+
const NotpImageClass = createCssVarImageClass({
|
4197
4217
|
componentName: componentName$s,
|
4198
4218
|
varName: 'url',
|
4199
4219
|
fallbackVarName: 'fallbackUrl',
|
4200
4220
|
});
|
4201
4221
|
|
4202
|
-
const vars$l =
|
4222
|
+
const vars$l = NotpImageClass.cssVarList;
|
4203
4223
|
|
4204
4224
|
const logo = {
|
4205
|
-
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/
|
4225
|
+
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
|
4206
4226
|
};
|
4207
4227
|
|
4208
|
-
var
|
4228
|
+
var notpImage = /*#__PURE__*/Object.freeze({
|
4209
4229
|
__proto__: null,
|
4210
4230
|
default: logo,
|
4211
4231
|
vars: vars$l
|
@@ -9761,8 +9781,9 @@ const components = {
|
|
9761
9781
|
checkbox: checkbox$1,
|
9762
9782
|
switchToggle: switchToggle$1,
|
9763
9783
|
container: container$1,
|
9764
|
-
logo: logo$
|
9784
|
+
logo: logo$3,
|
9765
9785
|
totpImage,
|
9786
|
+
notpImage,
|
9766
9787
|
text: text$3,
|
9767
9788
|
link: link$1,
|
9768
9789
|
divider: divider$1,
|
@@ -9796,7 +9817,7 @@ const vars = Object.keys(components).reduce(
|
|
9796
9817
|
);
|
9797
9818
|
|
9798
9819
|
const defaultTheme = { globals, components: theme };
|
9799
|
-
const themeVars = { globals: vars$
|
9820
|
+
const themeVars = { globals: vars$y, components: vars };
|
9800
9821
|
|
9801
9822
|
const componentName$1 = getComponentName('recaptcha');
|
9802
9823
|
|
@@ -10070,6 +10091,7 @@ exports.ModalClass = ModalClass;
|
|
10070
10091
|
exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
|
10071
10092
|
exports.NewPasswordClass = NewPasswordClass;
|
10072
10093
|
exports.NotificationClass = NotificationClass;
|
10094
|
+
exports.NotpImageClass = NotpImageClass;
|
10073
10095
|
exports.NumberFieldClass = NumberFieldClass;
|
10074
10096
|
exports.PasscodeClass = PasscodeClass;
|
10075
10097
|
exports.PasswordClass = PasswordClass;
|