@descope/web-components-ui 1.0.157 → 1.0.159

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.
Files changed (41) hide show
  1. package/README.md +0 -36
  2. package/dist/cjs/index.cjs.js +267 -93
  3. package/dist/cjs/index.cjs.js.map +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.esm.js +293 -118
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/umd/1000.js +1 -0
  8. package/dist/umd/2481.js +1 -1
  9. package/dist/umd/3585.js +1 -1
  10. package/dist/umd/3878.js +1 -1
  11. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  12. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  13. package/dist/umd/descope-button-index-js.js +1 -1
  14. package/dist/umd/descope-combo-box-index-js.js +1 -1
  15. package/dist/umd/descope-container-index-js.js +1 -1
  16. package/dist/umd/descope-date-picker-index-js.js +1 -1
  17. package/dist/umd/descope-divider-index-js.js +1 -1
  18. package/dist/umd/descope-email-field-index-js.js +1 -1
  19. package/dist/umd/descope-image-index-js.js +1 -1
  20. package/dist/umd/descope-link-index-js.js +1 -1
  21. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  22. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  23. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  24. package/dist/umd/descope-number-field-index-js.js +1 -1
  25. package/dist/umd/descope-passcode-index-js.js +1 -1
  26. package/dist/umd/descope-phone-field-index-js.js +1 -1
  27. package/dist/umd/descope-recaptcha-index-js.js +1 -0
  28. package/dist/umd/descope-text-area-index-js.js +1 -1
  29. package/dist/umd/descope-text-field-index-js.js +1 -1
  30. package/dist/umd/descope-text-index-js.js +1 -1
  31. package/dist/umd/descope-upload-file-index-js.js +1 -1
  32. package/dist/umd/index.js +1 -1
  33. package/package.json +1 -1
  34. package/src/baseClasses/createBaseClass.js +3 -1
  35. package/src/components/descope-recaptcha/RecaptchaClass.js +161 -0
  36. package/src/components/descope-recaptcha/index.js +5 -0
  37. package/src/index.cjs.js +1 -0
  38. package/src/index.d.ts +1 -0
  39. package/src/index.js +1 -0
  40. package/src/mixins/componentsContextMixin.js +16 -0
  41. package/dist/umd/9241.js +0 -1
package/dist/index.esm.js CHANGED
@@ -498,6 +498,32 @@ const componentNameValidationMixin = (superclass) =>
498
498
  }
499
499
  };
500
500
 
501
+ // create a dispatch event function that also calls to the onevent function in case it's set
502
+ // usage example:
503
+ // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
504
+ // this will dispatch a new event when called, but also call to "onsomething"
505
+ function createDispatchEvent(eventName, options = {}) {
506
+ const event = new Event(eventName, options);
507
+
508
+ this[`on${eventName}`]?.(event); // in case we got an event callback as property
509
+ this.dispatchEvent(event);
510
+ }
511
+
512
+ const componentsContextMixin = (superclass) =>
513
+ class ComponentsContextMixinClass extends superclass {
514
+ #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
515
+
516
+ updateComponentsContext(componentsContext) {
517
+ this.dispatchEvent(
518
+ new CustomEvent('components-context', {
519
+ bubbles: true,
520
+ composed: true,
521
+ detail: componentsContext,
522
+ })
523
+ );
524
+ }
525
+ };
526
+
501
527
  const hoverableMixin = (superclass) =>
502
528
  class HoverableMixinClass extends superclass {
503
529
  init() {
@@ -621,21 +647,11 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
621
647
  return compose(
622
648
  componentNameValidationMixin,
623
649
  hoverableMixin,
624
- normalizeBooleanAttributesMixin
650
+ normalizeBooleanAttributesMixin,
651
+ componentsContextMixin
625
652
  )(DescopeBaseClass);
626
653
  };
627
654
 
628
- // create a dispatch event function that also calls to the onevent function in case it's set
629
- // usage example:
630
- // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
631
- // this will dispatch a new event when called, but also call to "onsomething"
632
- function createDispatchEvent(eventName, options = {}) {
633
- const event = new Event(eventName, options);
634
-
635
- this[`on${eventName}`]?.(event); // in case we got an event callback as property
636
- this.dispatchEvent(event);
637
- }
638
-
639
655
  const createProxy = ({
640
656
  componentName,
641
657
  wrappedEleName,
@@ -684,7 +700,7 @@ const createProxy = ({
684
700
  return ProxyClass;
685
701
  };
686
702
 
687
- const observedAttributes$4 = ['required', 'pattern'];
703
+ const observedAttributes$5 = ['required', 'pattern'];
688
704
 
689
705
  const errorAttributes = {
690
706
  valueMissing: 'data-errormessage-value-missing',
@@ -695,7 +711,7 @@ const errorAttributes = {
695
711
  const inputValidationMixin = (superclass) =>
696
712
  class InputValidationMixinClass extends superclass {
697
713
  static get observedAttributes() {
698
- return [...(superclass.observedAttributes || []), ...observedAttributes$4];
714
+ return [...(superclass.observedAttributes || []), ...observedAttributes$5];
699
715
  }
700
716
 
701
717
  static get formAssociated() {
@@ -826,7 +842,7 @@ const inputValidationMixin = (superclass) =>
826
842
  attributeChangedCallback(attrName, oldValue, newValue) {
827
843
  super.attributeChangedCallback?.(attrName, oldValue, newValue);
828
844
 
829
- if (observedAttributes$4.includes(attrName)) {
845
+ if (observedAttributes$5.includes(attrName)) {
830
846
  this.#setValidity();
831
847
  }
832
848
  }
@@ -1163,7 +1179,7 @@ const clickableMixin = (superclass) =>
1163
1179
  }
1164
1180
  };
1165
1181
 
1166
- const componentName$q = getComponentName('button');
1182
+ const componentName$r = getComponentName('button');
1167
1183
 
1168
1184
  const resetStyles = `
1169
1185
  :host {
@@ -1257,7 +1273,7 @@ const ButtonClass = compose(
1257
1273
  }
1258
1274
  `,
1259
1275
  excludeAttrsSync: ['tabindex'],
1260
- componentName: componentName$q,
1276
+ componentName: componentName$r,
1261
1277
  })
1262
1278
  );
1263
1279
 
@@ -1294,7 +1310,7 @@ loadingIndicatorStyles = `
1294
1310
  }
1295
1311
  `;
1296
1312
 
1297
- customElements.define(componentName$q, ButtonClass);
1313
+ customElements.define(componentName$r, ButtonClass);
1298
1314
 
1299
1315
  const createBaseInputClass = (...args) =>
1300
1316
  compose(
@@ -1304,11 +1320,11 @@ const createBaseInputClass = (...args) =>
1304
1320
  inputEventsDispatchingMixin
1305
1321
  )(createBaseClass(...args));
1306
1322
 
1307
- const componentName$p = getComponentName('boolean-field-internal');
1323
+ const componentName$q = getComponentName('boolean-field-internal');
1308
1324
 
1309
1325
  const forwardAttributes$1 = ['disabled', 'label', 'invalid', 'readonly'];
1310
1326
 
1311
- const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
1327
+ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
1312
1328
 
1313
1329
  class BooleanInputInternal extends BaseInputClass$4 {
1314
1330
  constructor() {
@@ -1368,14 +1384,14 @@ const booleanFieldMixin = (superclass) =>
1368
1384
 
1369
1385
  const template = document.createElement('template');
1370
1386
  template.innerHTML = `
1371
- <${componentName$p}
1387
+ <${componentName$q}
1372
1388
  tabindex="-1"
1373
1389
  slot="input"
1374
- ></${componentName$p}>
1390
+ ></${componentName$q}>
1375
1391
  `;
1376
1392
 
1377
1393
  this.baseElement.appendChild(template.content.cloneNode(true));
1378
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
1394
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
1379
1395
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
1380
1396
 
1381
1397
  forwardAttrs(this, this.inputElement, {
@@ -1555,7 +1571,7 @@ vaadin-checkbox::part(checkbox) {
1555
1571
  }
1556
1572
  `;
1557
1573
 
1558
- const componentName$o = getComponentName('checkbox');
1574
+ const componentName$p = getComponentName('checkbox');
1559
1575
 
1560
1576
  const {
1561
1577
  host: host$c,
@@ -1645,15 +1661,15 @@ const CheckboxClass = compose(
1645
1661
  ${useHostExternalPadding(CheckboxClass.cssVarList)}
1646
1662
  `,
1647
1663
  excludeAttrsSync: ['tabindex'],
1648
- componentName: componentName$o,
1664
+ componentName: componentName$p,
1649
1665
  })
1650
1666
  );
1651
1667
 
1652
- customElements.define(componentName$p, BooleanInputInternal);
1668
+ customElements.define(componentName$q, BooleanInputInternal);
1653
1669
 
1654
- customElements.define(componentName$o, CheckboxClass);
1670
+ customElements.define(componentName$p, CheckboxClass);
1655
1671
 
1656
- const componentName$n = getComponentName('switch-toggle');
1672
+ const componentName$o = getComponentName('switch-toggle');
1657
1673
 
1658
1674
  const {
1659
1675
  host: host$b,
@@ -1756,17 +1772,17 @@ const SwitchToggleClass = compose(
1756
1772
  }
1757
1773
  `,
1758
1774
  excludeAttrsSync: ['tabindex'],
1759
- componentName: componentName$n,
1775
+ componentName: componentName$o,
1760
1776
  })
1761
1777
  );
1762
1778
 
1763
- customElements.define(componentName$n, SwitchToggleClass);
1779
+ customElements.define(componentName$o, SwitchToggleClass);
1764
1780
 
1765
- const componentName$m = getComponentName('loader-linear');
1781
+ const componentName$n = getComponentName('loader-linear');
1766
1782
 
1767
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
1783
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
1768
1784
  static get componentName() {
1769
- return componentName$m;
1785
+ return componentName$n;
1770
1786
  }
1771
1787
 
1772
1788
  constructor() {
@@ -1827,11 +1843,11 @@ const LoaderLinearClass = compose(
1827
1843
  componentNameValidationMixin
1828
1844
  )(RawLoaderLinear);
1829
1845
 
1830
- customElements.define(componentName$m, LoaderLinearClass);
1846
+ customElements.define(componentName$n, LoaderLinearClass);
1831
1847
 
1832
- const componentName$l = getComponentName('loader-radial');
1848
+ const componentName$m = getComponentName('loader-radial');
1833
1849
 
1834
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
1850
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > div' }) {
1835
1851
  constructor() {
1836
1852
  super();
1837
1853
 
@@ -1875,11 +1891,11 @@ const LoaderRadialClass = compose(
1875
1891
  componentNameValidationMixin
1876
1892
  )(RawLoaderRadial);
1877
1893
 
1878
- customElements.define(componentName$l, LoaderRadialClass);
1894
+ customElements.define(componentName$m, LoaderRadialClass);
1879
1895
 
1880
- const componentName$k = getComponentName('container');
1896
+ const componentName$l = getComponentName('container');
1881
1897
 
1882
- class RawContainer extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > slot' }) {
1898
+ class RawContainer extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
1883
1899
  constructor() {
1884
1900
  super();
1885
1901
 
@@ -1931,10 +1947,10 @@ const ContainerClass = compose(
1931
1947
  componentNameValidationMixin
1932
1948
  )(RawContainer);
1933
1949
 
1934
- customElements.define(componentName$k, ContainerClass);
1950
+ customElements.define(componentName$l, ContainerClass);
1935
1951
 
1936
- const componentName$j = getComponentName('divider');
1937
- class RawDivider extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
1952
+ const componentName$k = getComponentName('divider');
1953
+ class RawDivider extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
1938
1954
  constructor() {
1939
1955
  super();
1940
1956
 
@@ -2030,9 +2046,9 @@ const DividerClass = compose(
2030
2046
  componentNameValidationMixin
2031
2047
  )(RawDivider);
2032
2048
 
2033
- const componentName$i = getComponentName('text');
2049
+ const componentName$j = getComponentName('text');
2034
2050
 
2035
- class RawText extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
2051
+ class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
2036
2052
  constructor() {
2037
2053
  super();
2038
2054
 
@@ -2074,9 +2090,9 @@ const TextClass = compose(
2074
2090
  componentNameValidationMixin
2075
2091
  )(RawText);
2076
2092
 
2077
- customElements.define(componentName$i, TextClass);
2093
+ customElements.define(componentName$j, TextClass);
2078
2094
 
2079
- customElements.define(componentName$j, DividerClass);
2095
+ customElements.define(componentName$k, DividerClass);
2080
2096
 
2081
2097
  const { host: host$8, label: label$6, placeholder: placeholder$2, requiredIndicator: requiredIndicator$6, inputField: inputField$4, input, helperText: helperText$5, errorMessage: errorMessage$6 } =
2082
2098
  {
@@ -2132,7 +2148,7 @@ var textFieldMappings = {
2132
2148
  inputPlaceholderColor: { ...placeholder$2, property: 'color' },
2133
2149
  };
2134
2150
 
2135
- const componentName$h = getComponentName('email-field');
2151
+ const componentName$i = getComponentName('email-field');
2136
2152
 
2137
2153
  const EmailFieldClass = compose(
2138
2154
  createStyleMixin({
@@ -2157,15 +2173,15 @@ const EmailFieldClass = compose(
2157
2173
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
2158
2174
  `,
2159
2175
  excludeAttrsSync: ['tabindex'],
2160
- componentName: componentName$h,
2176
+ componentName: componentName$i,
2161
2177
  })
2162
2178
  );
2163
2179
 
2164
- customElements.define(componentName$h, EmailFieldClass);
2180
+ customElements.define(componentName$i, EmailFieldClass);
2165
2181
 
2166
- const componentName$g = getComponentName('link');
2182
+ const componentName$h = getComponentName('link');
2167
2183
 
2168
- class RawLink extends createBaseClass({ componentName: componentName$g, baseSelector: ':host a' }) {
2184
+ class RawLink extends createBaseClass({ componentName: componentName$h, baseSelector: ':host a' }) {
2169
2185
  constructor() {
2170
2186
  super();
2171
2187
 
@@ -2229,7 +2245,7 @@ const LinkClass = compose(
2229
2245
  componentNameValidationMixin
2230
2246
  )(RawLink);
2231
2247
 
2232
- customElements.define(componentName$g, LinkClass);
2248
+ customElements.define(componentName$h, LinkClass);
2233
2249
 
2234
2250
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
2235
2251
  let style;
@@ -2281,27 +2297,27 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
2281
2297
  return CssVarImageClass;
2282
2298
  };
2283
2299
 
2284
- const componentName$f = getComponentName('logo');
2300
+ const componentName$g = getComponentName('logo');
2285
2301
 
2286
2302
  const LogoClass = createCssVarImageClass({
2287
- componentName: componentName$f,
2303
+ componentName: componentName$g,
2288
2304
  varName: 'url',
2289
2305
  fallbackVarName: 'fallbackUrl',
2290
2306
  });
2291
2307
 
2292
- customElements.define(componentName$f, LogoClass);
2308
+ customElements.define(componentName$g, LogoClass);
2293
2309
 
2294
- const componentName$e = getComponentName('totp-image');
2310
+ const componentName$f = getComponentName('totp-image');
2295
2311
 
2296
2312
  const TotpImageClass = createCssVarImageClass({
2297
- componentName: componentName$e,
2313
+ componentName: componentName$f,
2298
2314
  varName: 'url',
2299
2315
  fallbackVarName: 'fallbackUrl',
2300
2316
  });
2301
2317
 
2302
- customElements.define(componentName$e, TotpImageClass);
2318
+ customElements.define(componentName$f, TotpImageClass);
2303
2319
 
2304
- const componentName$d = getComponentName('number-field');
2320
+ const componentName$e = getComponentName('number-field');
2305
2321
 
2306
2322
  const NumberFieldClass = compose(
2307
2323
  createStyleMixin({
@@ -2326,11 +2342,11 @@ const NumberFieldClass = compose(
2326
2342
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
2327
2343
  `,
2328
2344
  excludeAttrsSync: ['tabindex'],
2329
- componentName: componentName$d,
2345
+ componentName: componentName$e,
2330
2346
  })
2331
2347
  );
2332
2348
 
2333
- customElements.define(componentName$d, NumberFieldClass);
2349
+ customElements.define(componentName$e, NumberFieldClass);
2334
2350
 
2335
2351
  const focusElement = (ele) => {
2336
2352
  ele?.focus();
@@ -2348,21 +2364,21 @@ const getSanitizedCharacters = (str) => {
2348
2364
 
2349
2365
  /* eslint-disable no-param-reassign */
2350
2366
 
2351
- const componentName$c = getComponentName('passcode-internal');
2367
+ const componentName$d = getComponentName('passcode-internal');
2352
2368
 
2353
- const observedAttributes$3 = ['digits'];
2369
+ const observedAttributes$4 = ['digits'];
2354
2370
 
2355
2371
  const forwardAttributes = ['disabled', 'bordered', 'size', 'invalid', 'readonly'];
2356
2372
 
2357
- const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
2373
+ const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
2358
2374
 
2359
2375
  class PasscodeInternal extends BaseInputClass$3 {
2360
2376
  static get observedAttributes() {
2361
- return observedAttributes$3.concat(BaseInputClass$3.observedAttributes || []);
2377
+ return observedAttributes$4.concat(BaseInputClass$3.observedAttributes || []);
2362
2378
  }
2363
2379
 
2364
2380
  static get componentName() {
2365
- return componentName$c;
2381
+ return componentName$d;
2366
2382
  }
2367
2383
 
2368
2384
  constructor() {
@@ -2534,7 +2550,7 @@ class PasscodeInternal extends BaseInputClass$3 {
2534
2550
 
2535
2551
  // sync attributes to inputs
2536
2552
  if (oldValue !== newValue) {
2537
- if (observedAttributes$3.includes(attrName)) {
2553
+ if (observedAttributes$4.includes(attrName)) {
2538
2554
  if (attrName === 'digits') {
2539
2555
  this.renderInputs();
2540
2556
  }
@@ -2547,7 +2563,7 @@ class PasscodeInternal extends BaseInputClass$3 {
2547
2563
  }
2548
2564
  }
2549
2565
 
2550
- const componentName$b = getComponentName('text-field');
2566
+ const componentName$c = getComponentName('text-field');
2551
2567
 
2552
2568
  const observedAttrs = ['type'];
2553
2569
 
@@ -2595,18 +2611,18 @@ const TextFieldClass = compose(
2595
2611
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2596
2612
  `,
2597
2613
  excludeAttrsSync: ['tabindex'],
2598
- componentName: componentName$b,
2614
+ componentName: componentName$c,
2599
2615
  })
2600
2616
  );
2601
2617
 
2602
- const componentName$a = getComponentName('passcode');
2618
+ const componentName$b = getComponentName('passcode');
2603
2619
 
2604
- const observedAttributes$2 = ['digits'];
2620
+ const observedAttributes$3 = ['digits'];
2605
2621
 
2606
2622
  const customMixin$2 = (superclass) =>
2607
2623
  class PasscodeMixinClass extends superclass {
2608
2624
  static get observedAttributes() {
2609
- return observedAttributes$2.concat(superclass.observedAttributes || []);
2625
+ return observedAttributes$3.concat(superclass.observedAttributes || []);
2610
2626
  }
2611
2627
 
2612
2628
  get digits() {
@@ -2618,17 +2634,17 @@ const customMixin$2 = (superclass) =>
2618
2634
  const template = document.createElement('template');
2619
2635
 
2620
2636
  template.innerHTML = `
2621
- <${componentName$c}
2637
+ <${componentName$d}
2622
2638
  bordered="true"
2623
2639
  name="code"
2624
2640
  tabindex="-1"
2625
2641
  slot="input"
2626
- ></${componentName$c}>
2642
+ ></${componentName$d}>
2627
2643
  `;
2628
2644
 
2629
2645
  this.baseElement.appendChild(template.content.cloneNode(true));
2630
2646
 
2631
- this.inputElement = this.shadowRoot.querySelector(componentName$c);
2647
+ this.inputElement = this.shadowRoot.querySelector(componentName$d);
2632
2648
 
2633
2649
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2634
2650
  }
@@ -2766,15 +2782,15 @@ const PasscodeClass = compose(
2766
2782
  ${resetInputCursor('vaadin-text-field')}
2767
2783
  `,
2768
2784
  excludeAttrsSync: ['tabindex'],
2769
- componentName: componentName$a,
2785
+ componentName: componentName$b,
2770
2786
  })
2771
2787
  );
2772
2788
 
2773
- customElements.define(componentName$b, TextFieldClass);
2789
+ customElements.define(componentName$c, TextFieldClass);
2774
2790
 
2775
- customElements.define(componentName$c, PasscodeInternal);
2791
+ customElements.define(componentName$d, PasscodeInternal);
2776
2792
 
2777
- customElements.define(componentName$a, PasscodeClass);
2793
+ customElements.define(componentName$b, PasscodeClass);
2778
2794
 
2779
2795
  const passwordDraggableMixin = (superclass) =>
2780
2796
  class PasswordDraggableMixinClass extends superclass {
@@ -2810,7 +2826,7 @@ const passwordDraggableMixin = (superclass) =>
2810
2826
  }
2811
2827
  };
2812
2828
 
2813
- const componentName$9 = getComponentName('password');
2829
+ const componentName$a = getComponentName('password');
2814
2830
 
2815
2831
  const {
2816
2832
  host: host$5,
@@ -2938,13 +2954,13 @@ const PasswordClass = compose(
2938
2954
  }
2939
2955
  `,
2940
2956
  excludeAttrsSync: ['tabindex'],
2941
- componentName: componentName$9,
2957
+ componentName: componentName$a,
2942
2958
  })
2943
2959
  );
2944
2960
 
2945
- customElements.define(componentName$9, PasswordClass);
2961
+ customElements.define(componentName$a, PasswordClass);
2946
2962
 
2947
- const componentName$8 = getComponentName('text-area');
2963
+ const componentName$9 = getComponentName('text-area');
2948
2964
 
2949
2965
  const {
2950
2966
  host: host$4,
@@ -3016,20 +3032,20 @@ const TextAreaClass = compose(
3016
3032
  ${resetInputCursor('vaadin-text-area')}
3017
3033
  `,
3018
3034
  excludeAttrsSync: ['tabindex'],
3019
- componentName: componentName$8,
3035
+ componentName: componentName$9,
3020
3036
  })
3021
3037
  );
3022
3038
 
3023
- customElements.define(componentName$8, TextAreaClass);
3039
+ customElements.define(componentName$9, TextAreaClass);
3024
3040
 
3025
- const observedAttributes$1 = ['src', 'alt'];
3041
+ const observedAttributes$2 = ['src', 'alt'];
3026
3042
 
3027
- const componentName$7 = getComponentName('image');
3043
+ const componentName$8 = getComponentName('image');
3028
3044
 
3029
- const BaseClass = createBaseClass({ componentName: componentName$7, baseSelector: ':host > img' });
3030
- class RawImage extends BaseClass {
3045
+ const BaseClass$1 = createBaseClass({ componentName: componentName$8, baseSelector: ':host > img' });
3046
+ class RawImage extends BaseClass$1 {
3031
3047
  static get observedAttributes() {
3032
- return observedAttributes$1.concat(BaseClass.observedAttributes || []);
3048
+ return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
3033
3049
  }
3034
3050
 
3035
3051
  constructor() {
@@ -3052,7 +3068,7 @@ class RawImage extends BaseClass {
3052
3068
  connectedCallback() {
3053
3069
  super.connectedCallback?.();
3054
3070
 
3055
- forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$1 });
3071
+ forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
3056
3072
  }
3057
3073
  }
3058
3074
 
@@ -3066,9 +3082,9 @@ const ImageClass = compose(
3066
3082
  draggableMixin
3067
3083
  )(RawImage);
3068
3084
 
3069
- customElements.define(componentName$7, ImageClass);
3085
+ customElements.define(componentName$8, ImageClass);
3070
3086
 
3071
- const componentName$6 = getComponentName('combo-box');
3087
+ const componentName$7 = getComponentName('combo-box');
3072
3088
 
3073
3089
  const ComboBoxMixin = (superclass) =>
3074
3090
  class ComboBoxMixinClass extends superclass {
@@ -3249,12 +3265,12 @@ const ComboBoxClass = compose(
3249
3265
  // and reset items to an empty array, and opening the list box with no items
3250
3266
  // to display.
3251
3267
  excludeAttrsSync: ['tabindex', 'size'],
3252
- componentName: componentName$6,
3268
+ componentName: componentName$7,
3253
3269
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
3254
3270
  })
3255
3271
  );
3256
3272
 
3257
- customElements.define(componentName$6, ComboBoxClass);
3273
+ customElements.define(componentName$7, ComboBoxClass);
3258
3274
 
3259
3275
  var CountryCodes = [
3260
3276
  {
@@ -4494,7 +4510,7 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
4494
4510
  </div>
4495
4511
  `;
4496
4512
 
4497
- const componentName$5 = getComponentName('phone-field-internal');
4513
+ const componentName$6 = getComponentName('phone-field-internal');
4498
4514
 
4499
4515
  const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
4500
4516
  const countryAttrs = ['country-input-placeholder', 'default-code'];
@@ -4506,7 +4522,7 @@ const mapAttrs = {
4506
4522
 
4507
4523
  const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
4508
4524
 
4509
- const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
4525
+ const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
4510
4526
 
4511
4527
  class PhoneFieldInternal extends BaseInputClass$2 {
4512
4528
  static get observedAttributes() {
@@ -4679,12 +4695,12 @@ class PhoneFieldInternal extends BaseInputClass$2 {
4679
4695
  }
4680
4696
  }
4681
4697
 
4682
- customElements.define(componentName$5, PhoneFieldInternal);
4698
+ customElements.define(componentName$6, PhoneFieldInternal);
4683
4699
 
4684
4700
  const textVars = TextFieldClass.cssVarList;
4685
4701
  const comboVars = ComboBoxClass.cssVarList;
4686
4702
 
4687
- const componentName$4 = getComponentName('phone-field');
4703
+ const componentName$5 = getComponentName('phone-field');
4688
4704
 
4689
4705
  const customMixin$1 = (superclass) =>
4690
4706
  class PhoneFieldMixinClass extends superclass {
@@ -4698,15 +4714,15 @@ const customMixin$1 = (superclass) =>
4698
4714
  const template = document.createElement('template');
4699
4715
 
4700
4716
  template.innerHTML = `
4701
- <${componentName$5}
4717
+ <${componentName$6}
4702
4718
  tabindex="-1"
4703
4719
  slot="input"
4704
- ></${componentName$5}>
4720
+ ></${componentName$6}>
4705
4721
  `;
4706
4722
 
4707
4723
  this.baseElement.appendChild(template.content.cloneNode(true));
4708
4724
 
4709
- this.inputElement = this.shadowRoot.querySelector(componentName$5);
4725
+ this.inputElement = this.shadowRoot.querySelector(componentName$6);
4710
4726
 
4711
4727
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
4712
4728
  includeAttrs: [
@@ -4899,15 +4915,15 @@ const PhoneFieldClass = compose(
4899
4915
  }
4900
4916
  `,
4901
4917
  excludeAttrsSync: ['tabindex'],
4902
- componentName: componentName$4,
4918
+ componentName: componentName$5,
4903
4919
  })
4904
4920
  );
4905
4921
 
4906
- customElements.define(componentName$4, PhoneFieldClass);
4922
+ customElements.define(componentName$5, PhoneFieldClass);
4907
4923
 
4908
- const componentName$3 = getComponentName('new-password-internal');
4924
+ const componentName$4 = getComponentName('new-password-internal');
4909
4925
 
4910
- const componentName$2 = getComponentName('new-password');
4926
+ const componentName$3 = getComponentName('new-password');
4911
4927
 
4912
4928
  const customMixin = (superclass) =>
4913
4929
  class NewPasswordMixinClass extends superclass {
@@ -4917,16 +4933,16 @@ const customMixin = (superclass) =>
4917
4933
  const template = document.createElement('template');
4918
4934
 
4919
4935
  template.innerHTML = `
4920
- <${componentName$3}
4936
+ <${componentName$4}
4921
4937
  name="new-password"
4922
4938
  tabindex="-1"
4923
4939
  slot="input"
4924
- ></${componentName$3}>
4940
+ ></${componentName$4}>
4925
4941
  `;
4926
4942
 
4927
4943
  this.baseElement.appendChild(template.content.cloneNode(true));
4928
4944
 
4929
- this.inputElement = this.shadowRoot.querySelector(componentName$3);
4945
+ this.inputElement = this.shadowRoot.querySelector(componentName$4);
4930
4946
 
4931
4947
  forwardAttrs(this, this.inputElement, {
4932
4948
  includeAttrs: [
@@ -5025,7 +5041,7 @@ const NewPasswordClass = compose(
5025
5041
  },
5026
5042
  `,
5027
5043
  excludeAttrsSync: ['tabindex'],
5028
- componentName: componentName$2,
5044
+ componentName: componentName$3,
5029
5045
  })
5030
5046
  );
5031
5047
 
@@ -5049,7 +5065,7 @@ const commonAttrs = [
5049
5065
 
5050
5066
  const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
5051
5067
 
5052
- const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
5068
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
5053
5069
 
5054
5070
  class NewPasswordInternal extends BaseInputClass$1 {
5055
5071
  static get observedAttributes() {
@@ -5209,9 +5225,168 @@ class NewPasswordInternal extends BaseInputClass$1 {
5209
5225
  }
5210
5226
  }
5211
5227
 
5212
- customElements.define(componentName$3, NewPasswordInternal);
5228
+ customElements.define(componentName$4, NewPasswordInternal);
5229
+
5230
+ customElements.define(componentName$3, NewPasswordClass);
5231
+
5232
+ const componentName$2 = getComponentName('recaptcha');
5233
+
5234
+ const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
5213
5235
 
5214
- customElements.define(componentName$2, NewPasswordClass);
5236
+ const BaseClass = createBaseClass({
5237
+ componentName: componentName$2,
5238
+ baseSelector: ':host > div',
5239
+ });
5240
+ class RawRecaptcha extends BaseClass {
5241
+ static get observedAttributes() {
5242
+ return observedAttributes$1.concat(BaseClass.observedAttributes || []);
5243
+ }
5244
+
5245
+ attributeChangedCallback(attrName, oldValue, newValue) {
5246
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
5247
+ if (attrName === 'disabled') {
5248
+ this.#toggleRecaptcha(newValue === 'true');
5249
+ }
5250
+ }
5251
+
5252
+ renderRecaptcha(disabled) {
5253
+ if (disabled) {
5254
+ this.recaptchaEle.style.display = 'none';
5255
+ this.mockRecaptchaEle.style.display = '';
5256
+ } else {
5257
+ this.recaptchaEle.style.display = '';
5258
+ this.mockRecaptchaEle.style.display = 'none';
5259
+ }
5260
+ }
5261
+
5262
+ constructor() {
5263
+ super();
5264
+
5265
+ this.attachShadow({ mode: 'open' }).innerHTML = `
5266
+ <style>
5267
+ :host #recaptcha {
5268
+ width: 100%;
5269
+ height: 100%
5270
+ }
5271
+ :host img {
5272
+ width: 256px;
5273
+ }
5274
+ :host {
5275
+ display: inline-flex;
5276
+ }
5277
+ </style>
5278
+ <div>
5279
+ <span id="recaptcha"></span>
5280
+ <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
5281
+ </div>
5282
+ `;
5283
+
5284
+ this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
5285
+ this.mockRecaptchaEle = this.baseElement.querySelector('img');
5286
+ }
5287
+
5288
+ get enterprise() {
5289
+ return this.getAttribute('enterprise') === 'true';
5290
+ }
5291
+
5292
+ get siteKey() {
5293
+ return this.getAttribute('site-key');
5294
+ }
5295
+
5296
+ get action() {
5297
+ return this.getAttribute('action') || 'load';
5298
+ }
5299
+
5300
+ get disabled() {
5301
+ return this.getAttribute('disabled') === 'true';
5302
+ }
5303
+
5304
+ get scriptURL() {
5305
+ const url = new URL('https://www.google.com/recaptcha/');
5306
+ url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
5307
+ url.searchParams.append('onload', 'onRecaptchaLoadCallback');
5308
+ url.searchParams.append('render', 'explicit');
5309
+ return url.toString();
5310
+ }
5311
+
5312
+ #toggleRecaptcha(disabled) {
5313
+ this.renderRecaptcha(disabled);
5314
+ if (!disabled) {
5315
+ this.#loadRecaptchaScript();
5316
+ this.#createOnLoadScript();
5317
+ }
5318
+ }
5319
+
5320
+ #loadRecaptchaScript() {
5321
+ if (!document.getElementById('recaptcha-script')) {
5322
+ const script = document.createElement('script');
5323
+ script.src = this.scriptURL;
5324
+ script.async = true;
5325
+ script.id = 'recaptcha-script';
5326
+ script.defer = true;
5327
+ document.body.appendChild(script);
5328
+ } else {
5329
+ window.onRecaptchaLoadCallback();
5330
+ }
5331
+ }
5332
+
5333
+ #createOnLoadScript() {
5334
+ if (window.onRecaptchaLoadCallback) {
5335
+ return;
5336
+ }
5337
+
5338
+ window.onRecaptchaLoadCallback = () => {
5339
+ const currentNode = this.recaptchaEle;
5340
+ // if there are child nodes, it means that the recaptcha was already rendered
5341
+ if (currentNode.hasChildNodes()) {
5342
+ return;
5343
+ }
5344
+ const grecaptchaInstance = this.enterprise
5345
+ ? window.grecaptcha?.enterprise
5346
+ : window.grecaptcha;
5347
+
5348
+ if (!grecaptchaInstance) {
5349
+ return;
5350
+ }
5351
+
5352
+ setTimeout(() => {
5353
+ const view = grecaptchaInstance.render(currentNode, {
5354
+ sitekey: this.siteKey,
5355
+ badge: 'inline',
5356
+ size: 'invisible',
5357
+ });
5358
+ grecaptchaInstance.ready(() => {
5359
+ // clone the node and append it to the body so that it can be used by the grepcaptcha script
5360
+ const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
5361
+ if (cloneNode) {
5362
+ cloneNode.style.display = 'none';
5363
+ document.body.appendChild(cloneNode);
5364
+ }
5365
+ if (this.siteKey) {
5366
+ grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
5367
+ this.updateComponentsContext({
5368
+ risktoken: token,
5369
+ riskaction: this.action,
5370
+ });
5371
+ });
5372
+ }
5373
+ });
5374
+ }, 0);
5375
+ };
5376
+ }
5377
+
5378
+ connectedCallback() {
5379
+ super.connectedCallback?.();
5380
+
5381
+ this.#toggleRecaptcha(this.disabled);
5382
+ }
5383
+ }
5384
+
5385
+ const RecaptchaClass = compose(
5386
+ draggableMixin
5387
+ )(RawRecaptcha);
5388
+
5389
+ customElements.define(componentName$2, RecaptchaClass);
5215
5390
 
5216
5391
  const getFileBase64 = (fileObj) => {
5217
5392
  return new Promise((resolve) => {
@@ -5763,7 +5938,7 @@ const mode = {
5763
5938
  surface: globalRefs$b.colors.surface,
5764
5939
  };
5765
5940
 
5766
- const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$q);
5941
+ const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
5767
5942
 
5768
5943
  const verticalPaddingRatio = 3;
5769
5944
  const horizontalPaddingRatio = 2;
@@ -6233,7 +6408,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
6233
6408
  horizontalAlignment,
6234
6409
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
6235
6410
  },
6236
- componentName$k
6411
+ componentName$l
6237
6412
  );
6238
6413
 
6239
6414
  const { shadowColor } = helperRefs$2;
@@ -6489,7 +6664,7 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
6489
6664
  thickness: '2px',
6490
6665
  spacing: '10px',
6491
6666
  },
6492
- componentName$j
6667
+ componentName$k
6493
6668
  );
6494
6669
 
6495
6670
  const divider = {
@@ -6618,7 +6793,7 @@ const [helperTheme, helperRefs] = createHelperVars(
6618
6793
  },
6619
6794
  },
6620
6795
  },
6621
- componentName$l
6796
+ componentName$m
6622
6797
  );
6623
6798
 
6624
6799
  const loaderRadial = {
@@ -6867,5 +7042,5 @@ const vars = Object.keys(components).reduce(
6867
7042
  const defaultTheme = { globals, components: theme };
6868
7043
  const themeVars = { globals: vars$o, components: vars };
6869
7044
 
6870
- export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
7045
+ export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
6871
7046
  //# sourceMappingURL=index.esm.js.map