@descope/web-components-ui 1.0.335 → 1.0.337

Sign up to get free protection for your applications and to get access to all the features.
@@ -2805,15 +2805,15 @@ loadingIndicatorStyles = `
2805
2805
  }
2806
2806
  `;
2807
2807
 
2808
- const globalRefs$r = getThemeRefs(globals);
2808
+ const globalRefs$s = getThemeRefs(globals);
2809
2809
  const compVars$5 = ButtonClass.cssVarList;
2810
2810
 
2811
2811
  const mode = {
2812
- primary: globalRefs$r.colors.primary,
2813
- secondary: globalRefs$r.colors.secondary,
2814
- success: globalRefs$r.colors.success,
2815
- error: globalRefs$r.colors.error,
2816
- surface: globalRefs$r.colors.surface,
2812
+ primary: globalRefs$s.colors.primary,
2813
+ secondary: globalRefs$s.colors.secondary,
2814
+ success: globalRefs$s.colors.success,
2815
+ error: globalRefs$s.colors.error,
2816
+ surface: globalRefs$s.colors.surface,
2817
2817
  };
2818
2818
 
2819
2819
  const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
@@ -2821,15 +2821,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
2821
2821
  const button = {
2822
2822
  ...helperTheme$3,
2823
2823
 
2824
- [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
2824
+ [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
2825
2825
 
2826
2826
  [compVars$5.cursor]: 'pointer',
2827
2827
  [compVars$5.hostHeight]: '3em',
2828
2828
  [compVars$5.hostWidth]: 'auto',
2829
- [compVars$5.hostDirection]: globalRefs$r.direction,
2829
+ [compVars$5.hostDirection]: globalRefs$s.direction,
2830
2830
 
2831
- [compVars$5.borderRadius]: globalRefs$r.radius.sm,
2832
- [compVars$5.borderWidth]: globalRefs$r.border.xs,
2831
+ [compVars$5.borderRadius]: globalRefs$s.radius.sm,
2832
+ [compVars$5.borderWidth]: globalRefs$s.border.xs,
2833
2833
  [compVars$5.borderStyle]: 'solid',
2834
2834
  [compVars$5.borderColor]: 'transparent',
2835
2835
 
@@ -2873,11 +2873,11 @@ const button = {
2873
2873
  },
2874
2874
 
2875
2875
  _disabled: {
2876
- [helperVars$3.main]: globalRefs$r.colors.surface.light,
2877
- [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
2878
- [helperVars$3.light]: globalRefs$r.colors.surface.light,
2879
- [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
2880
- [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
2876
+ [helperVars$3.main]: globalRefs$s.colors.surface.light,
2877
+ [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
2878
+ [helperVars$3.light]: globalRefs$s.colors.surface.light,
2879
+ [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
2880
+ [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
2881
2881
  },
2882
2882
 
2883
2883
  variant: {
@@ -2948,6 +2948,7 @@ const {
2948
2948
  errorMessage: errorMessage$c,
2949
2949
  disabledPlaceholder,
2950
2950
  inputDisabled,
2951
+ inputIcon,
2951
2952
  } = {
2952
2953
  host: { selector: () => ':host' },
2953
2954
  label: { selector: '::part(label)' },
@@ -2962,6 +2963,7 @@ const {
2962
2963
  inputDisabled: { selector: 'input:disabled' },
2963
2964
  helperText: { selector: '::part(helper-text)' },
2964
2965
  errorMessage: { selector: '::part(error-message)' },
2966
+ inputIcon: { selector: 'vaadin-icon' },
2965
2967
  };
2966
2968
 
2967
2969
  var textFieldMappings = {
@@ -3033,6 +3035,13 @@ var textFieldMappings = {
3033
3035
  inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
3034
3036
  valueInputHeight: [{ ...input, property: 'height' }],
3035
3037
  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
3038
+
3039
+ inputIconOffset: [
3040
+ { ...inputIcon, property: 'margin-right' },
3041
+ { ...inputIcon, property: 'margin-left' },
3042
+ ],
3043
+ inputIconSize: { ...inputIcon, property: 'font-size' },
3044
+ inputIconColor: { ...inputIcon, property: 'color' },
3036
3045
  };
3037
3046
 
3038
3047
  const useHostExternalPadding = (cssVarList) => `
@@ -3181,7 +3190,7 @@ const inputFloatingLabelStyle = () => {
3181
3190
 
3182
3191
  const componentName$Q = getComponentName('text-field');
3183
3192
 
3184
- const observedAttrs = ['type', 'label-type'];
3193
+ const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
3185
3194
 
3186
3195
  const customMixin$a = (superclass) =>
3187
3196
  class TextFieldClass extends superclass {
@@ -3189,6 +3198,47 @@ const customMixin$a = (superclass) =>
3189
3198
  return observedAttrs.concat(superclass.observedAttributes || []);
3190
3199
  }
3191
3200
 
3201
+ icon;
3202
+
3203
+ init() {
3204
+ super.init?.();
3205
+ }
3206
+
3207
+ renderCopyToClipboard(shouldRender) {
3208
+ if (!shouldRender) {
3209
+ this.icon?.remove();
3210
+ return;
3211
+ }
3212
+
3213
+ const iconInitConfig = {
3214
+ icon: 'vaadin:copy-o',
3215
+ title: 'Copy',
3216
+ style: 'cursor: pointer',
3217
+ };
3218
+
3219
+ const iconCopiedConfig = {
3220
+ icon: 'vaadin:check-circle-o',
3221
+ title: 'Copied',
3222
+ style: 'cursor: initial',
3223
+ };
3224
+
3225
+ this.icon = Object.assign(document.createElement('vaadin-icon'), {
3226
+ slot: 'suffix',
3227
+ ...iconInitConfig,
3228
+ });
3229
+
3230
+ this.baseElement.appendChild(this.icon);
3231
+ this.icon.addEventListener('click', () => {
3232
+ navigator.clipboard.writeText(this.value);
3233
+ Object.assign(this.icon, iconCopiedConfig);
3234
+
3235
+ // we want the icon to go back to the initial state after 5 seconds
3236
+ setTimeout(() => {
3237
+ Object.assign(this.icon, iconInitConfig);
3238
+ }, 5000);
3239
+ });
3240
+ }
3241
+
3192
3242
  onLabelClick() {
3193
3243
  this.focus();
3194
3244
  }
@@ -3212,6 +3262,8 @@ const customMixin$a = (superclass) =>
3212
3262
  } else {
3213
3263
  this.removeEventListener('click', this.onLabelClick);
3214
3264
  }
3265
+ } else if (attrName === 'copy-to-clipboard') {
3266
+ this.renderCopyToClipboard(newVal === 'true');
3215
3267
  }
3216
3268
  }
3217
3269
  }
@@ -3244,14 +3296,18 @@ const TextFieldClass = compose(
3244
3296
 
3245
3297
  vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
3246
3298
  opacity: 0;
3247
- }
3299
+ }
3248
3300
  vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
3249
3301
  opacity: 0;
3250
- }
3302
+ }
3251
3303
  ${resetInputLabelPosition('vaadin-text-field')}
3252
3304
  ${useHostExternalPadding(TextFieldClass.cssVarList)}
3253
3305
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3254
3306
  ${inputFloatingLabelStyle()}
3307
+
3308
+ vaadin-text-field vaadin-icon {
3309
+ align-self: center;
3310
+ }
3255
3311
  `,
3256
3312
  excludeAttrsSync: ['tabindex'],
3257
3313
  componentName: componentName$Q,
@@ -3259,40 +3315,41 @@ const TextFieldClass = compose(
3259
3315
  );
3260
3316
 
3261
3317
  const componentName$P = getComponentName('input-wrapper');
3262
- const globalRefs$q = getThemeRefs(globals);
3318
+ const globalRefs$r = getThemeRefs(globals);
3263
3319
 
3264
3320
  const [theme$1, refs, vars$H] = createHelperVars(
3265
3321
  {
3266
- labelTextColor: globalRefs$q.colors.surface.dark,
3322
+ labelTextColor: globalRefs$r.colors.surface.dark,
3267
3323
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
3268
3324
  labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
3269
- valueTextColor: globalRefs$q.colors.surface.contrast,
3270
- placeholderTextColor: globalRefs$q.colors.surface.dark,
3325
+ valueTextColor: globalRefs$r.colors.surface.contrast,
3326
+ placeholderTextColor: globalRefs$r.colors.surface.dark,
3271
3327
  requiredIndicator: "'*'",
3272
- helperTextColor: globalRefs$q.colors.surface.dark,
3273
- errorMessageTextColor: globalRefs$q.colors.error.main,
3274
- successMessageTextColor: globalRefs$q.colors.success.main,
3328
+ helperTextColor: globalRefs$r.colors.surface.dark,
3329
+ errorMessageTextColor: globalRefs$r.colors.error.main,
3330
+ successMessageTextColor: globalRefs$r.colors.success.main,
3275
3331
 
3276
- borderWidth: globalRefs$q.border.xs,
3277
- borderRadius: globalRefs$q.radius.xs,
3332
+ borderWidth: globalRefs$r.border.xs,
3333
+ borderRadius: globalRefs$r.radius.xs,
3278
3334
  borderColor: 'transparent',
3279
3335
 
3280
- outlineWidth: globalRefs$q.border.sm,
3336
+ outlineWidth: globalRefs$r.border.sm,
3281
3337
  outlineStyle: 'solid',
3282
3338
  outlineColor: 'transparent',
3283
3339
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
3284
3340
 
3285
3341
  minWidth: '10em',
3286
3342
  toggleButtonSize: '1.5em',
3343
+ inputIconSize: '1em',
3287
3344
  inputHeight: '3em',
3288
3345
  horizontalPadding: '0.5em',
3289
3346
  verticalPadding: '0.5em',
3290
3347
 
3291
- backgroundColor: globalRefs$q.colors.surface.main,
3348
+ backgroundColor: globalRefs$r.colors.surface.main,
3292
3349
 
3293
- fontFamily: globalRefs$q.fonts.font1.family,
3350
+ fontFamily: globalRefs$r.fonts.font1.family,
3294
3351
 
3295
- direction: globalRefs$q.direction,
3352
+ direction: globalRefs$r.direction,
3296
3353
 
3297
3354
  overlayOpacity: '0.3',
3298
3355
 
@@ -3342,28 +3399,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
3342
3399
  },
3343
3400
 
3344
3401
  _focused: {
3345
- outlineColor: globalRefs$q.colors.surface.light,
3402
+ outlineColor: globalRefs$r.colors.surface.light,
3346
3403
  _invalid: {
3347
- outlineColor: globalRefs$q.colors.error.main,
3404
+ outlineColor: globalRefs$r.colors.error.main,
3348
3405
  },
3349
3406
  },
3350
3407
 
3351
3408
  _bordered: {
3352
- outlineWidth: globalRefs$q.border.xs,
3353
- borderColor: globalRefs$q.colors.surface.light,
3409
+ outlineWidth: globalRefs$r.border.xs,
3410
+ borderColor: globalRefs$r.colors.surface.light,
3354
3411
  borderStyle: 'solid',
3355
3412
  _invalid: {
3356
- borderColor: globalRefs$q.colors.error.main,
3413
+ borderColor: globalRefs$r.colors.error.main,
3357
3414
  },
3358
3415
  },
3359
3416
 
3360
3417
  _disabled: {
3361
- labelTextColor: globalRefs$q.colors.surface.light,
3362
- borderColor: globalRefs$q.colors.surface.light,
3363
- valueTextColor: globalRefs$q.colors.surface.light,
3364
- placeholderTextColor: globalRefs$q.colors.surface.light,
3365
- helperTextColor: globalRefs$q.colors.surface.light,
3366
- backgroundColor: globalRefs$q.colors.surface.main,
3418
+ labelTextColor: globalRefs$r.colors.surface.light,
3419
+ borderColor: globalRefs$r.colors.surface.light,
3420
+ valueTextColor: globalRefs$r.colors.surface.light,
3421
+ placeholderTextColor: globalRefs$r.colors.surface.light,
3422
+ helperTextColor: globalRefs$r.colors.surface.light,
3423
+ backgroundColor: globalRefs$r.colors.surface.main,
3367
3424
  },
3368
3425
  },
3369
3426
  componentName$P
@@ -3376,6 +3433,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
3376
3433
  vars: vars$H
3377
3434
  });
3378
3435
 
3436
+ const globalRefs$q = getThemeRefs(globals);
3379
3437
  const vars$G = TextFieldClass.cssVarList;
3380
3438
 
3381
3439
  const textField$1 = {
@@ -3418,6 +3476,9 @@ const textField$1 = {
3418
3476
  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
3419
3477
  [vars$G.valueInputHeight]: refs.valueInputHeight,
3420
3478
  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
3479
+ [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
3480
+ [vars$G.inputIconSize]: refs.inputIconSize,
3481
+ [vars$G.inputIconColor]: refs.placeholderTextColor,
3421
3482
  };
3422
3483
 
3423
3484
  var textField$2 = /*#__PURE__*/Object.freeze({
@@ -12946,6 +13007,53 @@ class RawRecaptcha extends BaseClass {
12946
13007
  return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
12947
13008
  }
12948
13009
 
13010
+ #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
13011
+ if (!this.isConnected) {
13012
+ return;
13013
+ }
13014
+
13015
+ grecaptchaInstance.ready(() => {
13016
+ // clone the node and append it to the body so that it can be used by the grepcaptcha script
13017
+ const cloneNode = currentNode
13018
+ .querySelector('textarea[name^="g-recaptcha-response"]')
13019
+ ?.cloneNode();
13020
+ if (cloneNode) {
13021
+ cloneNode.style.display = 'none';
13022
+ document.body.appendChild(cloneNode);
13023
+ }
13024
+
13025
+ // cleaning up the recaptcha element we added to the body
13026
+ const removeCloneNode = () => {
13027
+ cloneNode.remove();
13028
+ };
13029
+
13030
+ if (!this.siteKey) {
13031
+ return;
13032
+ }
13033
+ // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
13034
+ // also calling grecaptchaInstance.reset() does not work
13035
+ const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
13036
+ exec.then((token, e) => {
13037
+ if (e) {
13038
+ // eslint-disable-next-line no-console
13039
+ console.warn('could not execute recaptcha', e);
13040
+ } else {
13041
+ this.updateComponentsContext({
13042
+ risktoken: token,
13043
+ riskaction: this.action,
13044
+ });
13045
+ // if the component is still connected, we should try to get a new token before the token expires (2 minutes)
13046
+ if (this.isConnected) {
13047
+ setTimeout(() => {
13048
+ this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
13049
+ }, 110000);
13050
+ }
13051
+ }
13052
+ removeCloneNode();
13053
+ });
13054
+ });
13055
+ }
13056
+
12949
13057
  #createOnLoadScript() {
12950
13058
  window.onRecaptchaLoadCallback = () => {
12951
13059
  const currentNode = this.recaptchaEle;
@@ -12962,48 +13070,12 @@ class RawRecaptcha extends BaseClass {
12962
13070
  }
12963
13071
 
12964
13072
  setTimeout(() => {
12965
- // returns recaptchaWidgetId
12966
13073
  const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
12967
13074
  sitekey: this.siteKey,
12968
13075
  badge: 'inline',
12969
13076
  size: 'invisible',
12970
13077
  });
12971
-
12972
- grecaptchaInstance.ready(() => {
12973
- // clone the node and append it to the body so that it can be used by the grepcaptcha script
12974
- const cloneNode = currentNode
12975
- .querySelector('textarea[name^="g-recaptcha-response"]')
12976
- ?.cloneNode();
12977
- if (cloneNode) {
12978
- cloneNode.style.display = 'none';
12979
- document.body.appendChild(cloneNode);
12980
- }
12981
-
12982
- // cleaning up the recaptcha element we added to the body
12983
- const removeCloneNode = () => {
12984
- cloneNode.remove();
12985
- };
12986
-
12987
- if (this.siteKey) {
12988
- // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
12989
- // also calling grecaptchaInstance.reset() does not work
12990
- const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
12991
- exec
12992
- .then((token) => {
12993
- this.updateComponentsContext({
12994
- risktoken: token,
12995
- riskaction: this.action,
12996
- });
12997
-
12998
- removeCloneNode();
12999
- })
13000
- .catch((e) => {
13001
- removeCloneNode();
13002
- // eslint-disable-next-line no-console
13003
- console.warn('could not execute recaptcha', e);
13004
- });
13005
- }
13006
- });
13078
+ this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
13007
13079
  }, 0);
13008
13080
  };
13009
13081
  }