@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.
- package/README.md +0 -36
- package/dist/cjs/index.cjs.js +267 -93
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +293 -118
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -0
- package/dist/umd/2481.js +1 -1
- package/dist/umd/3585.js +1 -1
- package/dist/umd/3878.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-recaptcha-index-js.js +1 -0
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createBaseClass.js +3 -1
- package/src/components/descope-recaptcha/RecaptchaClass.js +161 -0
- package/src/components/descope-recaptcha/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/componentsContextMixin.js +16 -0
- 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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
1387
|
+
<${componentName$q}
|
1372
1388
|
tabindex="-1"
|
1373
1389
|
slot="input"
|
1374
|
-
></${componentName$
|
1390
|
+
></${componentName$q}>
|
1375
1391
|
`;
|
1376
1392
|
|
1377
1393
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1378
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
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$
|
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$
|
1664
|
+
componentName: componentName$p,
|
1649
1665
|
})
|
1650
1666
|
);
|
1651
1667
|
|
1652
|
-
customElements.define(componentName$
|
1668
|
+
customElements.define(componentName$q, BooleanInputInternal);
|
1653
1669
|
|
1654
|
-
customElements.define(componentName$
|
1670
|
+
customElements.define(componentName$p, CheckboxClass);
|
1655
1671
|
|
1656
|
-
const componentName$
|
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$
|
1775
|
+
componentName: componentName$o,
|
1760
1776
|
})
|
1761
1777
|
);
|
1762
1778
|
|
1763
|
-
customElements.define(componentName$
|
1779
|
+
customElements.define(componentName$o, SwitchToggleClass);
|
1764
1780
|
|
1765
|
-
const componentName$
|
1781
|
+
const componentName$n = getComponentName('loader-linear');
|
1766
1782
|
|
1767
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1783
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
|
1768
1784
|
static get componentName() {
|
1769
|
-
return componentName$
|
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$
|
1846
|
+
customElements.define(componentName$n, LoaderLinearClass);
|
1831
1847
|
|
1832
|
-
const componentName$
|
1848
|
+
const componentName$m = getComponentName('loader-radial');
|
1833
1849
|
|
1834
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
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$
|
1894
|
+
customElements.define(componentName$m, LoaderRadialClass);
|
1879
1895
|
|
1880
|
-
const componentName$
|
1896
|
+
const componentName$l = getComponentName('container');
|
1881
1897
|
|
1882
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
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$
|
1950
|
+
customElements.define(componentName$l, ContainerClass);
|
1935
1951
|
|
1936
|
-
const componentName$
|
1937
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
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$
|
2049
|
+
const componentName$j = getComponentName('text');
|
2034
2050
|
|
2035
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
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$
|
2093
|
+
customElements.define(componentName$j, TextClass);
|
2078
2094
|
|
2079
|
-
customElements.define(componentName$
|
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$
|
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$
|
2176
|
+
componentName: componentName$i,
|
2161
2177
|
})
|
2162
2178
|
);
|
2163
2179
|
|
2164
|
-
customElements.define(componentName$
|
2180
|
+
customElements.define(componentName$i, EmailFieldClass);
|
2165
2181
|
|
2166
|
-
const componentName$
|
2182
|
+
const componentName$h = getComponentName('link');
|
2167
2183
|
|
2168
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
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$
|
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$
|
2300
|
+
const componentName$g = getComponentName('logo');
|
2285
2301
|
|
2286
2302
|
const LogoClass = createCssVarImageClass({
|
2287
|
-
componentName: componentName$
|
2303
|
+
componentName: componentName$g,
|
2288
2304
|
varName: 'url',
|
2289
2305
|
fallbackVarName: 'fallbackUrl',
|
2290
2306
|
});
|
2291
2307
|
|
2292
|
-
customElements.define(componentName$
|
2308
|
+
customElements.define(componentName$g, LogoClass);
|
2293
2309
|
|
2294
|
-
const componentName$
|
2310
|
+
const componentName$f = getComponentName('totp-image');
|
2295
2311
|
|
2296
2312
|
const TotpImageClass = createCssVarImageClass({
|
2297
|
-
componentName: componentName$
|
2313
|
+
componentName: componentName$f,
|
2298
2314
|
varName: 'url',
|
2299
2315
|
fallbackVarName: 'fallbackUrl',
|
2300
2316
|
});
|
2301
2317
|
|
2302
|
-
customElements.define(componentName$
|
2318
|
+
customElements.define(componentName$f, TotpImageClass);
|
2303
2319
|
|
2304
|
-
const componentName$
|
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$
|
2345
|
+
componentName: componentName$e,
|
2330
2346
|
})
|
2331
2347
|
);
|
2332
2348
|
|
2333
|
-
customElements.define(componentName$
|
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$
|
2367
|
+
const componentName$d = getComponentName('passcode-internal');
|
2352
2368
|
|
2353
|
-
const observedAttributes$
|
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$
|
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$
|
2377
|
+
return observedAttributes$4.concat(BaseInputClass$3.observedAttributes || []);
|
2362
2378
|
}
|
2363
2379
|
|
2364
2380
|
static get componentName() {
|
2365
|
-
return componentName$
|
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$
|
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$
|
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$
|
2614
|
+
componentName: componentName$c,
|
2599
2615
|
})
|
2600
2616
|
);
|
2601
2617
|
|
2602
|
-
const componentName$
|
2618
|
+
const componentName$b = getComponentName('passcode');
|
2603
2619
|
|
2604
|
-
const observedAttributes$
|
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$
|
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$
|
2637
|
+
<${componentName$d}
|
2622
2638
|
bordered="true"
|
2623
2639
|
name="code"
|
2624
2640
|
tabindex="-1"
|
2625
2641
|
slot="input"
|
2626
|
-
></${componentName$
|
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$
|
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$
|
2785
|
+
componentName: componentName$b,
|
2770
2786
|
})
|
2771
2787
|
);
|
2772
2788
|
|
2773
|
-
customElements.define(componentName$
|
2789
|
+
customElements.define(componentName$c, TextFieldClass);
|
2774
2790
|
|
2775
|
-
customElements.define(componentName$
|
2791
|
+
customElements.define(componentName$d, PasscodeInternal);
|
2776
2792
|
|
2777
|
-
customElements.define(componentName$
|
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$
|
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$
|
2957
|
+
componentName: componentName$a,
|
2942
2958
|
})
|
2943
2959
|
);
|
2944
2960
|
|
2945
|
-
customElements.define(componentName$
|
2961
|
+
customElements.define(componentName$a, PasswordClass);
|
2946
2962
|
|
2947
|
-
const componentName$
|
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$
|
3035
|
+
componentName: componentName$9,
|
3020
3036
|
})
|
3021
3037
|
);
|
3022
3038
|
|
3023
|
-
customElements.define(componentName$
|
3039
|
+
customElements.define(componentName$9, TextAreaClass);
|
3024
3040
|
|
3025
|
-
const observedAttributes$
|
3041
|
+
const observedAttributes$2 = ['src', 'alt'];
|
3026
3042
|
|
3027
|
-
const componentName$
|
3043
|
+
const componentName$8 = getComponentName('image');
|
3028
3044
|
|
3029
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
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$
|
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$
|
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$
|
3085
|
+
customElements.define(componentName$8, ImageClass);
|
3070
3086
|
|
3071
|
-
const componentName$
|
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$
|
3268
|
+
componentName: componentName$7,
|
3253
3269
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
3254
3270
|
})
|
3255
3271
|
);
|
3256
3272
|
|
3257
|
-
customElements.define(componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
4717
|
+
<${componentName$6}
|
4702
4718
|
tabindex="-1"
|
4703
4719
|
slot="input"
|
4704
|
-
></${componentName$
|
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$
|
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$
|
4918
|
+
componentName: componentName$5,
|
4903
4919
|
})
|
4904
4920
|
);
|
4905
4921
|
|
4906
|
-
customElements.define(componentName$
|
4922
|
+
customElements.define(componentName$5, PhoneFieldClass);
|
4907
4923
|
|
4908
|
-
const componentName$
|
4924
|
+
const componentName$4 = getComponentName('new-password-internal');
|
4909
4925
|
|
4910
|
-
const componentName$
|
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$
|
4936
|
+
<${componentName$4}
|
4921
4937
|
name="new-password"
|
4922
4938
|
tabindex="-1"
|
4923
4939
|
slot="input"
|
4924
|
-
></${componentName$
|
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$
|
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$
|
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$
|
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$
|
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
|
-
|
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$
|
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$
|
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$
|
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$
|
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
|