@descope/web-components-ui 1.0.335 → 1.0.337

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -4,6 +4,7 @@ import '@vaadin/checkbox';
4
4
  import '@vaadin/text-field';
5
5
  import '@vaadin/email-field';
6
6
  import '@vaadin/number-field';
7
+ import '@vaadin/icon';
7
8
  import '@vaadin/password-field';
8
9
  import MarkdownIt from 'markdown-it';
9
10
  import '@vaadin/text-area';
@@ -15,7 +16,6 @@ import '@vaadin/multi-select-combo-box';
15
16
  import '@vaadin/dialog';
16
17
  import '@vaadin/notification';
17
18
  import '@vaadin/avatar';
18
- import '@vaadin/icon';
19
19
  import '@vaadin/icons';
20
20
  import '@vaadin/custom-field';
21
21
  import hljs from 'highlight.js';
@@ -2493,6 +2493,7 @@ const {
2493
2493
  errorMessage: errorMessage$a,
2494
2494
  disabledPlaceholder,
2495
2495
  inputDisabled,
2496
+ inputIcon,
2496
2497
  } = {
2497
2498
  host: { selector: () => ':host' },
2498
2499
  label: { selector: '::part(label)' },
@@ -2507,6 +2508,7 @@ const {
2507
2508
  inputDisabled: { selector: 'input:disabled' },
2508
2509
  helperText: { selector: '::part(helper-text)' },
2509
2510
  errorMessage: { selector: '::part(error-message)' },
2511
+ inputIcon: { selector: 'vaadin-icon' },
2510
2512
  };
2511
2513
 
2512
2514
  var textFieldMappings = {
@@ -2578,6 +2580,13 @@ var textFieldMappings = {
2578
2580
  inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
2579
2581
  valueInputHeight: [{ ...input, property: 'height' }],
2580
2582
  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
2583
+
2584
+ inputIconOffset: [
2585
+ { ...inputIcon, property: 'margin-right' },
2586
+ { ...inputIcon, property: 'margin-left' },
2587
+ ],
2588
+ inputIconSize: { ...inputIcon, property: 'font-size' },
2589
+ inputIconColor: { ...inputIcon, property: 'color' },
2581
2590
  };
2582
2591
 
2583
2592
  const componentName$M = getComponentName('email-field');
@@ -3081,7 +3090,7 @@ class PasscodeInternal extends BaseInputClass$7 {
3081
3090
 
3082
3091
  const componentName$F = getComponentName('text-field');
3083
3092
 
3084
- const observedAttrs = ['type', 'label-type'];
3093
+ const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
3085
3094
 
3086
3095
  const customMixin$9 = (superclass) =>
3087
3096
  class TextFieldClass extends superclass {
@@ -3089,6 +3098,47 @@ const customMixin$9 = (superclass) =>
3089
3098
  return observedAttrs.concat(superclass.observedAttributes || []);
3090
3099
  }
3091
3100
 
3101
+ icon;
3102
+
3103
+ init() {
3104
+ super.init?.();
3105
+ }
3106
+
3107
+ renderCopyToClipboard(shouldRender) {
3108
+ if (!shouldRender) {
3109
+ this.icon?.remove();
3110
+ return;
3111
+ }
3112
+
3113
+ const iconInitConfig = {
3114
+ icon: 'vaadin:copy-o',
3115
+ title: 'Copy',
3116
+ style: 'cursor: pointer',
3117
+ };
3118
+
3119
+ const iconCopiedConfig = {
3120
+ icon: 'vaadin:check-circle-o',
3121
+ title: 'Copied',
3122
+ style: 'cursor: initial',
3123
+ };
3124
+
3125
+ this.icon = Object.assign(document.createElement('vaadin-icon'), {
3126
+ slot: 'suffix',
3127
+ ...iconInitConfig,
3128
+ });
3129
+
3130
+ this.baseElement.appendChild(this.icon);
3131
+ this.icon.addEventListener('click', () => {
3132
+ navigator.clipboard.writeText(this.value);
3133
+ Object.assign(this.icon, iconCopiedConfig);
3134
+
3135
+ // we want the icon to go back to the initial state after 5 seconds
3136
+ setTimeout(() => {
3137
+ Object.assign(this.icon, iconInitConfig);
3138
+ }, 5000);
3139
+ });
3140
+ }
3141
+
3092
3142
  onLabelClick() {
3093
3143
  this.focus();
3094
3144
  }
@@ -3112,6 +3162,8 @@ const customMixin$9 = (superclass) =>
3112
3162
  } else {
3113
3163
  this.removeEventListener('click', this.onLabelClick);
3114
3164
  }
3165
+ } else if (attrName === 'copy-to-clipboard') {
3166
+ this.renderCopyToClipboard(newVal === 'true');
3115
3167
  }
3116
3168
  }
3117
3169
  }
@@ -3144,14 +3196,18 @@ const TextFieldClass = compose(
3144
3196
 
3145
3197
  vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
3146
3198
  opacity: 0;
3147
- }
3199
+ }
3148
3200
  vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
3149
3201
  opacity: 0;
3150
- }
3202
+ }
3151
3203
  ${resetInputLabelPosition('vaadin-text-field')}
3152
3204
  ${useHostExternalPadding(TextFieldClass.cssVarList)}
3153
3205
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3154
3206
  ${inputFloatingLabelStyle()}
3207
+
3208
+ vaadin-text-field vaadin-icon {
3209
+ align-self: center;
3210
+ }
3155
3211
  `,
3156
3212
  excludeAttrsSync: ['tabindex'],
3157
3213
  componentName: componentName$F,
@@ -7152,6 +7208,53 @@ class RawRecaptcha extends BaseClass {
7152
7208
  return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
7153
7209
  }
7154
7210
 
7211
+ #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
7212
+ if (!this.isConnected) {
7213
+ return;
7214
+ }
7215
+
7216
+ grecaptchaInstance.ready(() => {
7217
+ // clone the node and append it to the body so that it can be used by the grepcaptcha script
7218
+ const cloneNode = currentNode
7219
+ .querySelector('textarea[name^="g-recaptcha-response"]')
7220
+ ?.cloneNode();
7221
+ if (cloneNode) {
7222
+ cloneNode.style.display = 'none';
7223
+ document.body.appendChild(cloneNode);
7224
+ }
7225
+
7226
+ // cleaning up the recaptcha element we added to the body
7227
+ const removeCloneNode = () => {
7228
+ cloneNode.remove();
7229
+ };
7230
+
7231
+ if (!this.siteKey) {
7232
+ return;
7233
+ }
7234
+ // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
7235
+ // also calling grecaptchaInstance.reset() does not work
7236
+ const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
7237
+ exec.then((token, e) => {
7238
+ if (e) {
7239
+ // eslint-disable-next-line no-console
7240
+ console.warn('could not execute recaptcha', e);
7241
+ } else {
7242
+ this.updateComponentsContext({
7243
+ risktoken: token,
7244
+ riskaction: this.action,
7245
+ });
7246
+ // if the component is still connected, we should try to get a new token before the token expires (2 minutes)
7247
+ if (this.isConnected) {
7248
+ setTimeout(() => {
7249
+ this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
7250
+ }, 110000);
7251
+ }
7252
+ }
7253
+ removeCloneNode();
7254
+ });
7255
+ });
7256
+ }
7257
+
7155
7258
  #createOnLoadScript() {
7156
7259
  window.onRecaptchaLoadCallback = () => {
7157
7260
  const currentNode = this.recaptchaEle;
@@ -7168,48 +7271,12 @@ class RawRecaptcha extends BaseClass {
7168
7271
  }
7169
7272
 
7170
7273
  setTimeout(() => {
7171
- // returns recaptchaWidgetId
7172
7274
  const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
7173
7275
  sitekey: this.siteKey,
7174
7276
  badge: 'inline',
7175
7277
  size: 'invisible',
7176
7278
  });
7177
-
7178
- grecaptchaInstance.ready(() => {
7179
- // clone the node and append it to the body so that it can be used by the grepcaptcha script
7180
- const cloneNode = currentNode
7181
- .querySelector('textarea[name^="g-recaptcha-response"]')
7182
- ?.cloneNode();
7183
- if (cloneNode) {
7184
- cloneNode.style.display = 'none';
7185
- document.body.appendChild(cloneNode);
7186
- }
7187
-
7188
- // cleaning up the recaptcha element we added to the body
7189
- const removeCloneNode = () => {
7190
- cloneNode.remove();
7191
- };
7192
-
7193
- if (this.siteKey) {
7194
- // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
7195
- // also calling grecaptchaInstance.reset() does not work
7196
- const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
7197
- exec
7198
- .then((token) => {
7199
- this.updateComponentsContext({
7200
- risktoken: token,
7201
- riskaction: this.action,
7202
- });
7203
-
7204
- removeCloneNode();
7205
- })
7206
- .catch((e) => {
7207
- removeCloneNode();
7208
- // eslint-disable-next-line no-console
7209
- console.warn('could not execute recaptcha', e);
7210
- });
7211
- }
7212
- });
7279
+ this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
7213
7280
  }, 0);
7214
7281
  };
7215
7282
  }
@@ -11784,15 +11851,15 @@ const globals = {
11784
11851
  };
11785
11852
  const vars$J = getThemeVars(globals);
11786
11853
 
11787
- const globalRefs$r = getThemeRefs(globals);
11854
+ const globalRefs$s = getThemeRefs(globals);
11788
11855
  const compVars$5 = ButtonClass.cssVarList;
11789
11856
 
11790
11857
  const mode = {
11791
- primary: globalRefs$r.colors.primary,
11792
- secondary: globalRefs$r.colors.secondary,
11793
- success: globalRefs$r.colors.success,
11794
- error: globalRefs$r.colors.error,
11795
- surface: globalRefs$r.colors.surface,
11858
+ primary: globalRefs$s.colors.primary,
11859
+ secondary: globalRefs$s.colors.secondary,
11860
+ success: globalRefs$s.colors.success,
11861
+ error: globalRefs$s.colors.error,
11862
+ surface: globalRefs$s.colors.surface,
11796
11863
  };
11797
11864
 
11798
11865
  const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
@@ -11800,15 +11867,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
11800
11867
  const button = {
11801
11868
  ...helperTheme$3,
11802
11869
 
11803
- [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
11870
+ [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
11804
11871
 
11805
11872
  [compVars$5.cursor]: 'pointer',
11806
11873
  [compVars$5.hostHeight]: '3em',
11807
11874
  [compVars$5.hostWidth]: 'auto',
11808
- [compVars$5.hostDirection]: globalRefs$r.direction,
11875
+ [compVars$5.hostDirection]: globalRefs$s.direction,
11809
11876
 
11810
- [compVars$5.borderRadius]: globalRefs$r.radius.sm,
11811
- [compVars$5.borderWidth]: globalRefs$r.border.xs,
11877
+ [compVars$5.borderRadius]: globalRefs$s.radius.sm,
11878
+ [compVars$5.borderWidth]: globalRefs$s.border.xs,
11812
11879
  [compVars$5.borderStyle]: 'solid',
11813
11880
  [compVars$5.borderColor]: 'transparent',
11814
11881
 
@@ -11852,11 +11919,11 @@ const button = {
11852
11919
  },
11853
11920
 
11854
11921
  _disabled: {
11855
- [helperVars$3.main]: globalRefs$r.colors.surface.light,
11856
- [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
11857
- [helperVars$3.light]: globalRefs$r.colors.surface.light,
11858
- [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
11859
- [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
11922
+ [helperVars$3.main]: globalRefs$s.colors.surface.light,
11923
+ [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
11924
+ [helperVars$3.light]: globalRefs$s.colors.surface.light,
11925
+ [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
11926
+ [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
11860
11927
  },
11861
11928
 
11862
11929
  variant: {
@@ -11917,40 +11984,41 @@ var button$1 = /*#__PURE__*/Object.freeze({
11917
11984
  });
11918
11985
 
11919
11986
  const componentName = getComponentName('input-wrapper');
11920
- const globalRefs$q = getThemeRefs(globals);
11987
+ const globalRefs$r = getThemeRefs(globals);
11921
11988
 
11922
11989
  const [theme$1, refs, vars$H] = createHelperVars(
11923
11990
  {
11924
- labelTextColor: globalRefs$q.colors.surface.dark,
11991
+ labelTextColor: globalRefs$r.colors.surface.dark,
11925
11992
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
11926
11993
  labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
11927
- valueTextColor: globalRefs$q.colors.surface.contrast,
11928
- placeholderTextColor: globalRefs$q.colors.surface.dark,
11994
+ valueTextColor: globalRefs$r.colors.surface.contrast,
11995
+ placeholderTextColor: globalRefs$r.colors.surface.dark,
11929
11996
  requiredIndicator: "'*'",
11930
- helperTextColor: globalRefs$q.colors.surface.dark,
11931
- errorMessageTextColor: globalRefs$q.colors.error.main,
11932
- successMessageTextColor: globalRefs$q.colors.success.main,
11997
+ helperTextColor: globalRefs$r.colors.surface.dark,
11998
+ errorMessageTextColor: globalRefs$r.colors.error.main,
11999
+ successMessageTextColor: globalRefs$r.colors.success.main,
11933
12000
 
11934
- borderWidth: globalRefs$q.border.xs,
11935
- borderRadius: globalRefs$q.radius.xs,
12001
+ borderWidth: globalRefs$r.border.xs,
12002
+ borderRadius: globalRefs$r.radius.xs,
11936
12003
  borderColor: 'transparent',
11937
12004
 
11938
- outlineWidth: globalRefs$q.border.sm,
12005
+ outlineWidth: globalRefs$r.border.sm,
11939
12006
  outlineStyle: 'solid',
11940
12007
  outlineColor: 'transparent',
11941
12008
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
11942
12009
 
11943
12010
  minWidth: '10em',
11944
12011
  toggleButtonSize: '1.5em',
12012
+ inputIconSize: '1em',
11945
12013
  inputHeight: '3em',
11946
12014
  horizontalPadding: '0.5em',
11947
12015
  verticalPadding: '0.5em',
11948
12016
 
11949
- backgroundColor: globalRefs$q.colors.surface.main,
12017
+ backgroundColor: globalRefs$r.colors.surface.main,
11950
12018
 
11951
- fontFamily: globalRefs$q.fonts.font1.family,
12019
+ fontFamily: globalRefs$r.fonts.font1.family,
11952
12020
 
11953
- direction: globalRefs$q.direction,
12021
+ direction: globalRefs$r.direction,
11954
12022
 
11955
12023
  overlayOpacity: '0.3',
11956
12024
 
@@ -12000,28 +12068,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
12000
12068
  },
12001
12069
 
12002
12070
  _focused: {
12003
- outlineColor: globalRefs$q.colors.surface.light,
12071
+ outlineColor: globalRefs$r.colors.surface.light,
12004
12072
  _invalid: {
12005
- outlineColor: globalRefs$q.colors.error.main,
12073
+ outlineColor: globalRefs$r.colors.error.main,
12006
12074
  },
12007
12075
  },
12008
12076
 
12009
12077
  _bordered: {
12010
- outlineWidth: globalRefs$q.border.xs,
12011
- borderColor: globalRefs$q.colors.surface.light,
12078
+ outlineWidth: globalRefs$r.border.xs,
12079
+ borderColor: globalRefs$r.colors.surface.light,
12012
12080
  borderStyle: 'solid',
12013
12081
  _invalid: {
12014
- borderColor: globalRefs$q.colors.error.main,
12082
+ borderColor: globalRefs$r.colors.error.main,
12015
12083
  },
12016
12084
  },
12017
12085
 
12018
12086
  _disabled: {
12019
- labelTextColor: globalRefs$q.colors.surface.light,
12020
- borderColor: globalRefs$q.colors.surface.light,
12021
- valueTextColor: globalRefs$q.colors.surface.light,
12022
- placeholderTextColor: globalRefs$q.colors.surface.light,
12023
- helperTextColor: globalRefs$q.colors.surface.light,
12024
- backgroundColor: globalRefs$q.colors.surface.main,
12087
+ labelTextColor: globalRefs$r.colors.surface.light,
12088
+ borderColor: globalRefs$r.colors.surface.light,
12089
+ valueTextColor: globalRefs$r.colors.surface.light,
12090
+ placeholderTextColor: globalRefs$r.colors.surface.light,
12091
+ helperTextColor: globalRefs$r.colors.surface.light,
12092
+ backgroundColor: globalRefs$r.colors.surface.main,
12025
12093
  },
12026
12094
  },
12027
12095
  componentName
@@ -12034,6 +12102,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
12034
12102
  vars: vars$H
12035
12103
  });
12036
12104
 
12105
+ const globalRefs$q = getThemeRefs(globals);
12037
12106
  const vars$G = TextFieldClass.cssVarList;
12038
12107
 
12039
12108
  const textField = {
@@ -12076,6 +12145,9 @@ const textField = {
12076
12145
  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
12077
12146
  [vars$G.valueInputHeight]: refs.valueInputHeight,
12078
12147
  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
12148
+ [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
12149
+ [vars$G.inputIconSize]: refs.inputIconSize,
12150
+ [vars$G.inputIconColor]: refs.placeholderTextColor,
12079
12151
  };
12080
12152
 
12081
12153
  var textField$1 = /*#__PURE__*/Object.freeze({