@descope/web-components-ui 1.0.157 → 1.0.159
Sign up to get free protection for your applications and to get access to all the features.
- 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
|