@descope/web-components-ui 1.0.158 → 1.0.160
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +310 -129
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +337 -155
- 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-descope-phone-field-internal-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-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +1 -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/src/mixins/proxyInputMixin.js +46 -39
- package/dist/umd/9241.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
@@ -820,6 +820,32 @@ const componentNameValidationMixin = (superclass) =>
|
|
820
820
|
}
|
821
821
|
};
|
822
822
|
|
823
|
+
// create a dispatch event function that also calls to the onevent function in case it's set
|
824
|
+
// usage example:
|
825
|
+
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
826
|
+
// this will dispatch a new event when called, but also call to "onsomething"
|
827
|
+
function createDispatchEvent(eventName, options = {}) {
|
828
|
+
const event = new Event(eventName, options);
|
829
|
+
|
830
|
+
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
831
|
+
this.dispatchEvent(event);
|
832
|
+
}
|
833
|
+
|
834
|
+
const componentsContextMixin = (superclass) =>
|
835
|
+
class ComponentsContextMixinClass extends superclass {
|
836
|
+
#dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
|
837
|
+
|
838
|
+
updateComponentsContext(componentsContext) {
|
839
|
+
this.dispatchEvent(
|
840
|
+
new CustomEvent('components-context', {
|
841
|
+
bubbles: true,
|
842
|
+
composed: true,
|
843
|
+
detail: componentsContext,
|
844
|
+
})
|
845
|
+
);
|
846
|
+
}
|
847
|
+
};
|
848
|
+
|
823
849
|
const hoverableMixin = (superclass) =>
|
824
850
|
class HoverableMixinClass extends superclass {
|
825
851
|
init() {
|
@@ -943,21 +969,11 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
943
969
|
return compose(
|
944
970
|
componentNameValidationMixin,
|
945
971
|
hoverableMixin,
|
946
|
-
normalizeBooleanAttributesMixin
|
972
|
+
normalizeBooleanAttributesMixin,
|
973
|
+
componentsContextMixin
|
947
974
|
)(DescopeBaseClass);
|
948
975
|
};
|
949
976
|
|
950
|
-
// create a dispatch event function that also calls to the onevent function in case it's set
|
951
|
-
// usage example:
|
952
|
-
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
953
|
-
// this will dispatch a new event when called, but also call to "onsomething"
|
954
|
-
function createDispatchEvent(eventName, options = {}) {
|
955
|
-
const event = new Event(eventName, options);
|
956
|
-
|
957
|
-
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
958
|
-
this.dispatchEvent(event);
|
959
|
-
}
|
960
|
-
|
961
977
|
const createProxy = ({
|
962
978
|
componentName,
|
963
979
|
wrappedEleName,
|
@@ -1006,7 +1022,7 @@ const createProxy = ({
|
|
1006
1022
|
return ProxyClass;
|
1007
1023
|
};
|
1008
1024
|
|
1009
|
-
const observedAttributes$
|
1025
|
+
const observedAttributes$4 = ['required', 'pattern'];
|
1010
1026
|
|
1011
1027
|
const errorAttributes = {
|
1012
1028
|
valueMissing: 'data-errormessage-value-missing',
|
@@ -1017,7 +1033,7 @@ const errorAttributes = {
|
|
1017
1033
|
const inputValidationMixin = (superclass) =>
|
1018
1034
|
class InputValidationMixinClass extends superclass {
|
1019
1035
|
static get observedAttributes() {
|
1020
|
-
return [...(superclass.observedAttributes || []), ...observedAttributes$
|
1036
|
+
return [...(superclass.observedAttributes || []), ...observedAttributes$4];
|
1021
1037
|
}
|
1022
1038
|
|
1023
1039
|
static get formAssociated() {
|
@@ -1148,7 +1164,7 @@ const inputValidationMixin = (superclass) =>
|
|
1148
1164
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
1149
1165
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
1150
1166
|
|
1151
|
-
if (observedAttributes$
|
1167
|
+
if (observedAttributes$4.includes(attrName)) {
|
1152
1168
|
this.#setValidity();
|
1153
1169
|
}
|
1154
1170
|
}
|
@@ -1225,12 +1241,14 @@ const proxyInputMixin = (superclass) =>
|
|
1225
1241
|
}
|
1226
1242
|
|
1227
1243
|
get inputElement() {
|
1244
|
+
if (this.#inputElement) return this.#inputElement
|
1245
|
+
|
1228
1246
|
this.warnIfInputElementIsMissing();
|
1229
1247
|
|
1230
1248
|
const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
|
1231
1249
|
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
1232
1250
|
|
1233
|
-
this.#inputElement
|
1251
|
+
this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
|
1234
1252
|
|
1235
1253
|
return this.#inputElement;
|
1236
1254
|
}
|
@@ -1257,49 +1275,54 @@ const proxyInputMixin = (superclass) =>
|
|
1257
1275
|
init() {
|
1258
1276
|
super.init?.();
|
1259
1277
|
|
1260
|
-
|
1261
|
-
|
1262
|
-
|
1263
|
-
|
1264
|
-
|
1265
|
-
|
1266
|
-
|
1267
|
-
|
1268
|
-
|
1269
|
-
|
1270
|
-
|
1278
|
+
// on some cases the base element is not ready so the inputElement is empty
|
1279
|
+
// we are deferring this section to make sure the base element is ready
|
1280
|
+
setTimeout(() => {
|
1281
|
+
this.inputElement.addEventListener('input', (e) => {
|
1282
|
+
if (!this.inputElement.checkValidity()) {
|
1283
|
+
this.inputElement.setCustomValidity('');
|
1284
|
+
// after updating the input validity we want to trigger set validity on the wrapping element
|
1285
|
+
// so we will get the updated validity
|
1286
|
+
this.setCustomValidity('');
|
1287
|
+
|
1288
|
+
// Vaadin is getting the input event before us,
|
1289
|
+
// so in order to make sure they use the updated validity
|
1290
|
+
// we calling their fn after updating the input validity
|
1291
|
+
this.baseElement.__onInput(e);
|
1292
|
+
|
1293
|
+
this.#handleErrorMessage();
|
1294
|
+
}
|
1295
|
+
});
|
1271
1296
|
|
1272
|
-
|
1273
|
-
|
1274
|
-
|
1297
|
+
this.baseElement.addEventListener('change', () => {
|
1298
|
+
this.#dispatchChange();
|
1299
|
+
});
|
1275
1300
|
|
1276
|
-
|
1277
|
-
|
1278
|
-
|
1301
|
+
this.#inputElement.addEventListener('blur', () => {
|
1302
|
+
if (!this.checkValidity()) {
|
1303
|
+
this.setAttribute('invalid', 'true');
|
1304
|
+
this.#handleErrorMessage();
|
1305
|
+
}
|
1306
|
+
});
|
1279
1307
|
|
1280
|
-
|
1281
|
-
|
1282
|
-
|
1308
|
+
this.addEventListener('invalid', () => {
|
1309
|
+
if (!this.checkValidity()) {
|
1310
|
+
this.setAttribute('invalid', 'true');
|
1311
|
+
}
|
1283
1312
|
this.#handleErrorMessage();
|
1284
|
-
}
|
1285
|
-
});
|
1286
|
-
|
1287
|
-
this.addEventListener('invalid', () => {
|
1288
|
-
if (!this.checkValidity()) {
|
1289
|
-
this.setAttribute('invalid', 'true');
|
1290
|
-
}
|
1291
|
-
this.#handleErrorMessage();
|
1292
|
-
});
|
1313
|
+
});
|
1293
1314
|
|
1294
|
-
|
1315
|
+
this.handleInternalInputErrorMessage();
|
1295
1316
|
|
1296
|
-
|
1297
|
-
|
1298
|
-
|
1299
|
-
|
1317
|
+
// sync properties
|
1318
|
+
propertyObserver(this, this.inputElement, 'value');
|
1319
|
+
propertyObserver(this, this.inputElement, 'selectionStart');
|
1320
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
1300
1321
|
|
1301
|
-
|
1322
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
1323
|
+
});
|
1302
1324
|
}
|
1325
|
+
|
1303
1326
|
};
|
1304
1327
|
|
1305
1328
|
const composedProxyInputMixin = compose(
|
@@ -1485,7 +1508,7 @@ const clickableMixin = (superclass) =>
|
|
1485
1508
|
}
|
1486
1509
|
};
|
1487
1510
|
|
1488
|
-
const componentName$
|
1511
|
+
const componentName$r = getComponentName('button');
|
1489
1512
|
|
1490
1513
|
const resetStyles = `
|
1491
1514
|
:host {
|
@@ -1579,7 +1602,7 @@ const ButtonClass = compose(
|
|
1579
1602
|
}
|
1580
1603
|
`,
|
1581
1604
|
excludeAttrsSync: ['tabindex'],
|
1582
|
-
componentName: componentName$
|
1605
|
+
componentName: componentName$r,
|
1583
1606
|
})
|
1584
1607
|
);
|
1585
1608
|
|
@@ -1627,7 +1650,7 @@ const mode = {
|
|
1627
1650
|
surface: globalRefs$b.colors.surface,
|
1628
1651
|
};
|
1629
1652
|
|
1630
|
-
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$
|
1653
|
+
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
|
1631
1654
|
|
1632
1655
|
const verticalPaddingRatio = 3;
|
1633
1656
|
const horizontalPaddingRatio = 2;
|
@@ -1880,7 +1903,7 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
1880
1903
|
${resetInputFieldUnderlayingBorder(name)}
|
1881
1904
|
`;
|
1882
1905
|
|
1883
|
-
const componentName$
|
1906
|
+
const componentName$q = getComponentName('text-field');
|
1884
1907
|
|
1885
1908
|
const observedAttrs = ['type'];
|
1886
1909
|
|
@@ -1928,11 +1951,11 @@ const TextFieldClass = compose(
|
|
1928
1951
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
1929
1952
|
`,
|
1930
1953
|
excludeAttrsSync: ['tabindex'],
|
1931
|
-
componentName: componentName$
|
1954
|
+
componentName: componentName$q,
|
1932
1955
|
})
|
1933
1956
|
);
|
1934
1957
|
|
1935
|
-
const componentName$
|
1958
|
+
const componentName$p = getComponentName('input-wrapper');
|
1936
1959
|
const globalRefs$a = getThemeRefs(globals);
|
1937
1960
|
|
1938
1961
|
const [theme$1, refs, vars$m] = createHelperVars(
|
@@ -1997,7 +2020,7 @@ const [theme$1, refs, vars$m] = createHelperVars(
|
|
1997
2020
|
backgroundColor: globalRefs$a.colors.surface.main,
|
1998
2021
|
},
|
1999
2022
|
},
|
2000
|
-
componentName$
|
2023
|
+
componentName$p
|
2001
2024
|
);
|
2002
2025
|
|
2003
2026
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
@@ -2073,7 +2096,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2073
2096
|
}
|
2074
2097
|
};
|
2075
2098
|
|
2076
|
-
const componentName$
|
2099
|
+
const componentName$o = getComponentName('password');
|
2077
2100
|
|
2078
2101
|
const {
|
2079
2102
|
host: host$b,
|
@@ -2201,7 +2224,7 @@ const PasswordClass = compose(
|
|
2201
2224
|
}
|
2202
2225
|
`,
|
2203
2226
|
excludeAttrsSync: ['tabindex'],
|
2204
|
-
componentName: componentName$
|
2227
|
+
componentName: componentName$o,
|
2205
2228
|
})
|
2206
2229
|
);
|
2207
2230
|
|
@@ -2238,7 +2261,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
|
|
2238
2261
|
vars: vars$k
|
2239
2262
|
});
|
2240
2263
|
|
2241
|
-
const componentName$
|
2264
|
+
const componentName$n = getComponentName('number-field');
|
2242
2265
|
|
2243
2266
|
const NumberFieldClass = compose(
|
2244
2267
|
createStyleMixin({
|
@@ -2263,7 +2286,7 @@ const NumberFieldClass = compose(
|
|
2263
2286
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2264
2287
|
`,
|
2265
2288
|
excludeAttrsSync: ['tabindex'],
|
2266
|
-
componentName: componentName$
|
2289
|
+
componentName: componentName$n,
|
2267
2290
|
})
|
2268
2291
|
);
|
2269
2292
|
|
@@ -2298,7 +2321,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
2298
2321
|
vars: vars$j
|
2299
2322
|
});
|
2300
2323
|
|
2301
|
-
const componentName$
|
2324
|
+
const componentName$m = getComponentName('email-field');
|
2302
2325
|
|
2303
2326
|
const EmailFieldClass = compose(
|
2304
2327
|
createStyleMixin({
|
@@ -2323,7 +2346,7 @@ const EmailFieldClass = compose(
|
|
2323
2346
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2324
2347
|
`,
|
2325
2348
|
excludeAttrsSync: ['tabindex'],
|
2326
|
-
componentName: componentName$
|
2349
|
+
componentName: componentName$m,
|
2327
2350
|
})
|
2328
2351
|
);
|
2329
2352
|
|
@@ -2358,7 +2381,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
2358
2381
|
vars: vars$i
|
2359
2382
|
});
|
2360
2383
|
|
2361
|
-
const componentName$
|
2384
|
+
const componentName$l = getComponentName('text-area');
|
2362
2385
|
|
2363
2386
|
const {
|
2364
2387
|
host: host$a,
|
@@ -2430,7 +2453,7 @@ const TextAreaClass = compose(
|
|
2430
2453
|
${resetInputCursor('vaadin-text-area')}
|
2431
2454
|
`,
|
2432
2455
|
excludeAttrsSync: ['tabindex'],
|
2433
|
-
componentName: componentName$
|
2456
|
+
componentName: componentName$l,
|
2434
2457
|
})
|
2435
2458
|
);
|
2436
2459
|
|
@@ -2482,9 +2505,9 @@ const createBaseInputClass = (...args) =>
|
|
2482
2505
|
inputEventsDispatchingMixin
|
2483
2506
|
)(createBaseClass(...args));
|
2484
2507
|
|
2485
|
-
const componentName$
|
2508
|
+
const componentName$k = getComponentName('boolean-field-internal');
|
2486
2509
|
|
2487
|
-
createBaseInputClass({ componentName: componentName$
|
2510
|
+
createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
|
2488
2511
|
|
2489
2512
|
const booleanFieldMixin = (superclass) =>
|
2490
2513
|
class BooleanFieldMixinClass extends superclass {
|
@@ -2493,14 +2516,14 @@ const booleanFieldMixin = (superclass) =>
|
|
2493
2516
|
|
2494
2517
|
const template = document.createElement('template');
|
2495
2518
|
template.innerHTML = `
|
2496
|
-
<${componentName$
|
2519
|
+
<${componentName$k}
|
2497
2520
|
tabindex="-1"
|
2498
2521
|
slot="input"
|
2499
|
-
></${componentName$
|
2522
|
+
></${componentName$k}>
|
2500
2523
|
`;
|
2501
2524
|
|
2502
2525
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2503
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2526
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
2504
2527
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
2505
2528
|
|
2506
2529
|
forwardAttrs(this, this.inputElement, {
|
@@ -2579,7 +2602,7 @@ vaadin-checkbox::part(checkbox) {
|
|
2579
2602
|
}
|
2580
2603
|
`;
|
2581
2604
|
|
2582
|
-
const componentName$
|
2605
|
+
const componentName$j = getComponentName('checkbox');
|
2583
2606
|
|
2584
2607
|
const {
|
2585
2608
|
host: host$9,
|
@@ -2669,7 +2692,7 @@ const CheckboxClass = compose(
|
|
2669
2692
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
2670
2693
|
`,
|
2671
2694
|
excludeAttrsSync: ['tabindex'],
|
2672
|
-
componentName: componentName$
|
2695
|
+
componentName: componentName$j,
|
2673
2696
|
})
|
2674
2697
|
);
|
2675
2698
|
|
@@ -2711,7 +2734,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
2711
2734
|
vars: vars$g
|
2712
2735
|
});
|
2713
2736
|
|
2714
|
-
const componentName$
|
2737
|
+
const componentName$i = getComponentName('switch-toggle');
|
2715
2738
|
|
2716
2739
|
const {
|
2717
2740
|
host: host$8,
|
@@ -2814,7 +2837,7 @@ const SwitchToggleClass = compose(
|
|
2814
2837
|
}
|
2815
2838
|
`,
|
2816
2839
|
excludeAttrsSync: ['tabindex'],
|
2817
|
-
componentName: componentName$
|
2840
|
+
componentName: componentName$i,
|
2818
2841
|
})
|
2819
2842
|
);
|
2820
2843
|
|
@@ -2888,9 +2911,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
2888
2911
|
vars: vars$f
|
2889
2912
|
});
|
2890
2913
|
|
2891
|
-
const componentName$
|
2914
|
+
const componentName$h = getComponentName('container');
|
2892
2915
|
|
2893
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2916
|
+
class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
|
2894
2917
|
constructor() {
|
2895
2918
|
super();
|
2896
2919
|
|
@@ -2964,7 +2987,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
|
|
2964
2987
|
horizontalAlignment,
|
2965
2988
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
2966
2989
|
},
|
2967
|
-
componentName$
|
2990
|
+
componentName$h
|
2968
2991
|
);
|
2969
2992
|
|
2970
2993
|
const { shadowColor } = helperRefs$2;
|
@@ -3109,10 +3132,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
3109
3132
|
return CssVarImageClass;
|
3110
3133
|
};
|
3111
3134
|
|
3112
|
-
const componentName$
|
3135
|
+
const componentName$g = getComponentName('logo');
|
3113
3136
|
|
3114
3137
|
const LogoClass = createCssVarImageClass({
|
3115
|
-
componentName: componentName$
|
3138
|
+
componentName: componentName$g,
|
3116
3139
|
varName: 'url',
|
3117
3140
|
fallbackVarName: 'fallbackUrl',
|
3118
3141
|
});
|
@@ -3129,10 +3152,10 @@ var logo$2 = /*#__PURE__*/Object.freeze({
|
|
3129
3152
|
vars: vars$d
|
3130
3153
|
});
|
3131
3154
|
|
3132
|
-
const componentName$
|
3155
|
+
const componentName$f = getComponentName('totp-image');
|
3133
3156
|
|
3134
3157
|
const TotpImageClass = createCssVarImageClass({
|
3135
|
-
componentName: componentName$
|
3158
|
+
componentName: componentName$f,
|
3136
3159
|
varName: 'url',
|
3137
3160
|
fallbackVarName: 'fallbackUrl',
|
3138
3161
|
});
|
@@ -3149,9 +3172,9 @@ var totpImage = /*#__PURE__*/Object.freeze({
|
|
3149
3172
|
vars: vars$c
|
3150
3173
|
});
|
3151
3174
|
|
3152
|
-
const componentName$
|
3175
|
+
const componentName$e = getComponentName('text');
|
3153
3176
|
|
3154
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
3177
|
+
class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
|
3155
3178
|
constructor() {
|
3156
3179
|
super();
|
3157
3180
|
|
@@ -3282,9 +3305,9 @@ var text$3 = /*#__PURE__*/Object.freeze({
|
|
3282
3305
|
vars: vars$b
|
3283
3306
|
});
|
3284
3307
|
|
3285
|
-
const componentName$
|
3308
|
+
const componentName$d = getComponentName('link');
|
3286
3309
|
|
3287
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
3310
|
+
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
3288
3311
|
constructor() {
|
3289
3312
|
super();
|
3290
3313
|
|
@@ -3388,8 +3411,8 @@ var link$1 = /*#__PURE__*/Object.freeze({
|
|
3388
3411
|
vars: vars$a
|
3389
3412
|
});
|
3390
3413
|
|
3391
|
-
const componentName$
|
3392
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
3414
|
+
const componentName$c = getComponentName('divider');
|
3415
|
+
class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
|
3393
3416
|
constructor() {
|
3394
3417
|
super();
|
3395
3418
|
|
@@ -3493,7 +3516,7 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
|
|
3493
3516
|
thickness: '2px',
|
3494
3517
|
spacing: '10px',
|
3495
3518
|
},
|
3496
|
-
componentName$
|
3519
|
+
componentName$c
|
3497
3520
|
);
|
3498
3521
|
|
3499
3522
|
const divider = {
|
@@ -3535,18 +3558,18 @@ var divider$1 = /*#__PURE__*/Object.freeze({
|
|
3535
3558
|
|
3536
3559
|
/* eslint-disable no-param-reassign */
|
3537
3560
|
|
3538
|
-
const componentName$
|
3561
|
+
const componentName$b = getComponentName('passcode-internal');
|
3539
3562
|
|
3540
|
-
createBaseInputClass({ componentName: componentName$
|
3563
|
+
createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
3541
3564
|
|
3542
|
-
const componentName$
|
3565
|
+
const componentName$a = getComponentName('passcode');
|
3543
3566
|
|
3544
|
-
const observedAttributes$
|
3567
|
+
const observedAttributes$3 = ['digits'];
|
3545
3568
|
|
3546
3569
|
const customMixin$2 = (superclass) =>
|
3547
3570
|
class PasscodeMixinClass extends superclass {
|
3548
3571
|
static get observedAttributes() {
|
3549
|
-
return observedAttributes$
|
3572
|
+
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
3550
3573
|
}
|
3551
3574
|
|
3552
3575
|
get digits() {
|
@@ -3558,17 +3581,17 @@ const customMixin$2 = (superclass) =>
|
|
3558
3581
|
const template = document.createElement('template');
|
3559
3582
|
|
3560
3583
|
template.innerHTML = `
|
3561
|
-
<${componentName$
|
3584
|
+
<${componentName$b}
|
3562
3585
|
bordered="true"
|
3563
3586
|
name="code"
|
3564
3587
|
tabindex="-1"
|
3565
3588
|
slot="input"
|
3566
|
-
></${componentName$
|
3589
|
+
></${componentName$b}>
|
3567
3590
|
`;
|
3568
3591
|
|
3569
3592
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3570
3593
|
|
3571
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3594
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
3572
3595
|
|
3573
3596
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
3574
3597
|
}
|
@@ -3706,7 +3729,7 @@ const PasscodeClass = compose(
|
|
3706
3729
|
${resetInputCursor('vaadin-text-field')}
|
3707
3730
|
`,
|
3708
3731
|
excludeAttrsSync: ['tabindex'],
|
3709
|
-
componentName: componentName$
|
3732
|
+
componentName: componentName$a,
|
3710
3733
|
})
|
3711
3734
|
);
|
3712
3735
|
|
@@ -3739,11 +3762,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
3739
3762
|
vars: vars$8
|
3740
3763
|
});
|
3741
3764
|
|
3742
|
-
const componentName$
|
3765
|
+
const componentName$9 = getComponentName('loader-linear');
|
3743
3766
|
|
3744
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
3767
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
|
3745
3768
|
static get componentName() {
|
3746
|
-
return componentName$
|
3769
|
+
return componentName$9;
|
3747
3770
|
}
|
3748
3771
|
|
3749
3772
|
constructor() {
|
@@ -3849,9 +3872,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
3849
3872
|
vars: vars$7
|
3850
3873
|
});
|
3851
3874
|
|
3852
|
-
const componentName$
|
3875
|
+
const componentName$8 = getComponentName('loader-radial');
|
3853
3876
|
|
3854
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
3877
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
|
3855
3878
|
constructor() {
|
3856
3879
|
super();
|
3857
3880
|
|
@@ -3910,7 +3933,7 @@ const [helperTheme, helperRefs] = createHelperVars(
|
|
3910
3933
|
},
|
3911
3934
|
},
|
3912
3935
|
},
|
3913
|
-
componentName$
|
3936
|
+
componentName$8
|
3914
3937
|
);
|
3915
3938
|
|
3916
3939
|
const loaderRadial = {
|
@@ -3946,7 +3969,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
3946
3969
|
vars: vars$6
|
3947
3970
|
});
|
3948
3971
|
|
3949
|
-
const componentName$
|
3972
|
+
const componentName$7 = getComponentName('combo-box');
|
3950
3973
|
|
3951
3974
|
const ComboBoxMixin = (superclass) =>
|
3952
3975
|
class ComboBoxMixinClass extends superclass {
|
@@ -4127,7 +4150,7 @@ const ComboBoxClass = compose(
|
|
4127
4150
|
// and reset items to an empty array, and opening the list box with no items
|
4128
4151
|
// to display.
|
4129
4152
|
excludeAttrsSync: ['tabindex', 'size'],
|
4130
|
-
componentName: componentName$
|
4153
|
+
componentName: componentName$7,
|
4131
4154
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
4132
4155
|
})
|
4133
4156
|
);
|
@@ -4179,14 +4202,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
4179
4202
|
vars: vars$5
|
4180
4203
|
});
|
4181
4204
|
|
4182
|
-
const observedAttributes$
|
4205
|
+
const observedAttributes$2 = ['src', 'alt'];
|
4183
4206
|
|
4184
|
-
const componentName$
|
4207
|
+
const componentName$6 = getComponentName('image');
|
4185
4208
|
|
4186
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
4187
|
-
class RawImage extends BaseClass {
|
4209
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$6, baseSelector: ':host > img' });
|
4210
|
+
class RawImage extends BaseClass$1 {
|
4188
4211
|
static get observedAttributes() {
|
4189
|
-
return observedAttributes$
|
4212
|
+
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
4190
4213
|
}
|
4191
4214
|
|
4192
4215
|
constructor() {
|
@@ -4209,7 +4232,7 @@ class RawImage extends BaseClass {
|
|
4209
4232
|
connectedCallback() {
|
4210
4233
|
super.connectedCallback?.();
|
4211
4234
|
|
4212
|
-
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$
|
4235
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
|
4213
4236
|
}
|
4214
4237
|
}
|
4215
4238
|
|
@@ -5446,14 +5469,14 @@ var CountryCodes = [
|
|
5446
5469
|
},
|
5447
5470
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
5448
5471
|
|
5449
|
-
const componentName$
|
5472
|
+
const componentName$5 = getComponentName('phone-field-internal');
|
5450
5473
|
|
5451
|
-
createBaseInputClass({ componentName: componentName$
|
5474
|
+
createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
|
5452
5475
|
|
5453
5476
|
const textVars = TextFieldClass.cssVarList;
|
5454
5477
|
const comboVars = ComboBoxClass.cssVarList;
|
5455
5478
|
|
5456
|
-
const componentName$
|
5479
|
+
const componentName$4 = getComponentName('phone-field');
|
5457
5480
|
|
5458
5481
|
const customMixin$1 = (superclass) =>
|
5459
5482
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5467,15 +5490,15 @@ const customMixin$1 = (superclass) =>
|
|
5467
5490
|
const template = document.createElement('template');
|
5468
5491
|
|
5469
5492
|
template.innerHTML = `
|
5470
|
-
<${componentName$
|
5493
|
+
<${componentName$5}
|
5471
5494
|
tabindex="-1"
|
5472
5495
|
slot="input"
|
5473
|
-
></${componentName$
|
5496
|
+
></${componentName$5}>
|
5474
5497
|
`;
|
5475
5498
|
|
5476
5499
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5477
5500
|
|
5478
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5501
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$5);
|
5479
5502
|
|
5480
5503
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5481
5504
|
includeAttrs: [
|
@@ -5668,7 +5691,7 @@ const PhoneFieldClass = compose(
|
|
5668
5691
|
}
|
5669
5692
|
`,
|
5670
5693
|
excludeAttrsSync: ['tabindex'],
|
5671
|
-
componentName: componentName$
|
5694
|
+
componentName: componentName$4,
|
5672
5695
|
})
|
5673
5696
|
);
|
5674
5697
|
|
@@ -5706,9 +5729,9 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
5706
5729
|
vars: vars$3
|
5707
5730
|
});
|
5708
5731
|
|
5709
|
-
const componentName$
|
5732
|
+
const componentName$3 = getComponentName('new-password-internal');
|
5710
5733
|
|
5711
|
-
const componentName$
|
5734
|
+
const componentName$2 = getComponentName('new-password');
|
5712
5735
|
|
5713
5736
|
const customMixin = (superclass) =>
|
5714
5737
|
class NewPasswordMixinClass extends superclass {
|
@@ -5718,16 +5741,16 @@ const customMixin = (superclass) =>
|
|
5718
5741
|
const template = document.createElement('template');
|
5719
5742
|
|
5720
5743
|
template.innerHTML = `
|
5721
|
-
<${componentName$
|
5744
|
+
<${componentName$3}
|
5722
5745
|
name="new-password"
|
5723
5746
|
tabindex="-1"
|
5724
5747
|
slot="input"
|
5725
|
-
></${componentName$
|
5748
|
+
></${componentName$3}>
|
5726
5749
|
`;
|
5727
5750
|
|
5728
5751
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5729
5752
|
|
5730
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5753
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
5731
5754
|
|
5732
5755
|
forwardAttrs(this, this.inputElement, {
|
5733
5756
|
includeAttrs: [
|
@@ -5826,7 +5849,7 @@ const NewPasswordClass = compose(
|
|
5826
5849
|
},
|
5827
5850
|
`,
|
5828
5851
|
excludeAttrsSync: ['tabindex'],
|
5829
|
-
componentName: componentName$
|
5852
|
+
componentName: componentName$2,
|
5830
5853
|
})
|
5831
5854
|
);
|
5832
5855
|
|
@@ -5866,9 +5889,9 @@ const getFilename = (fileObj) => {
|
|
5866
5889
|
return fileObj.name.replace(/^.*\\/, '');
|
5867
5890
|
};
|
5868
5891
|
|
5869
|
-
const componentName = getComponentName('upload-file');
|
5892
|
+
const componentName$1 = getComponentName('upload-file');
|
5870
5893
|
|
5871
|
-
const observedAttributes = [
|
5894
|
+
const observedAttributes$1 = [
|
5872
5895
|
'title',
|
5873
5896
|
'description',
|
5874
5897
|
'button-label',
|
@@ -5879,11 +5902,11 @@ const observedAttributes = [
|
|
5879
5902
|
'size',
|
5880
5903
|
];
|
5881
5904
|
|
5882
|
-
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div.wrapper' });
|
5905
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div.wrapper' });
|
5883
5906
|
|
5884
5907
|
class RawUploadFile extends BaseInputClass {
|
5885
5908
|
static get observedAttributes() {
|
5886
|
-
return observedAttributes.concat(BaseInputClass.observedAttributes || []);
|
5909
|
+
return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
|
5887
5910
|
}
|
5888
5911
|
|
5889
5912
|
constructor() {
|
@@ -6161,6 +6184,163 @@ const vars = Object.keys(components).reduce(
|
|
6161
6184
|
const defaultTheme = { globals, components: theme };
|
6162
6185
|
const themeVars = { globals: vars$o, components: vars };
|
6163
6186
|
|
6187
|
+
const componentName = getComponentName('recaptcha');
|
6188
|
+
|
6189
|
+
const observedAttributes = ['disabled', 'site-key', 'action', 'enterprise'];
|
6190
|
+
|
6191
|
+
const BaseClass = createBaseClass({
|
6192
|
+
componentName,
|
6193
|
+
baseSelector: ':host > div',
|
6194
|
+
});
|
6195
|
+
class RawRecaptcha extends BaseClass {
|
6196
|
+
static get observedAttributes() {
|
6197
|
+
return observedAttributes.concat(BaseClass.observedAttributes || []);
|
6198
|
+
}
|
6199
|
+
|
6200
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
6201
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6202
|
+
if (attrName === 'disabled') {
|
6203
|
+
this.#toggleRecaptcha(newValue === 'true');
|
6204
|
+
}
|
6205
|
+
}
|
6206
|
+
|
6207
|
+
renderRecaptcha(disabled) {
|
6208
|
+
if (disabled) {
|
6209
|
+
this.recaptchaEle.style.display = 'none';
|
6210
|
+
this.mockRecaptchaEle.style.display = '';
|
6211
|
+
} else {
|
6212
|
+
this.recaptchaEle.style.display = '';
|
6213
|
+
this.mockRecaptchaEle.style.display = 'none';
|
6214
|
+
}
|
6215
|
+
}
|
6216
|
+
|
6217
|
+
constructor() {
|
6218
|
+
super();
|
6219
|
+
|
6220
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
6221
|
+
<style>
|
6222
|
+
:host #recaptcha {
|
6223
|
+
width: 100%;
|
6224
|
+
height: 100%
|
6225
|
+
}
|
6226
|
+
:host img {
|
6227
|
+
width: 256px;
|
6228
|
+
}
|
6229
|
+
:host {
|
6230
|
+
display: inline-flex;
|
6231
|
+
}
|
6232
|
+
</style>
|
6233
|
+
<div>
|
6234
|
+
<span id="recaptcha"></span>
|
6235
|
+
<img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
|
6236
|
+
</div>
|
6237
|
+
`;
|
6238
|
+
|
6239
|
+
this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
|
6240
|
+
this.mockRecaptchaEle = this.baseElement.querySelector('img');
|
6241
|
+
}
|
6242
|
+
|
6243
|
+
get enterprise() {
|
6244
|
+
return this.getAttribute('enterprise') === 'true';
|
6245
|
+
}
|
6246
|
+
|
6247
|
+
get siteKey() {
|
6248
|
+
return this.getAttribute('site-key');
|
6249
|
+
}
|
6250
|
+
|
6251
|
+
get action() {
|
6252
|
+
return this.getAttribute('action') || 'load';
|
6253
|
+
}
|
6254
|
+
|
6255
|
+
get disabled() {
|
6256
|
+
return this.getAttribute('disabled') === 'true';
|
6257
|
+
}
|
6258
|
+
|
6259
|
+
get scriptURL() {
|
6260
|
+
const url = new URL('https://www.google.com/recaptcha/');
|
6261
|
+
url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
|
6262
|
+
url.searchParams.append('onload', 'onRecaptchaLoadCallback');
|
6263
|
+
url.searchParams.append('render', 'explicit');
|
6264
|
+
return url.toString();
|
6265
|
+
}
|
6266
|
+
|
6267
|
+
#toggleRecaptcha(disabled) {
|
6268
|
+
this.renderRecaptcha(disabled);
|
6269
|
+
if (!disabled) {
|
6270
|
+
this.#loadRecaptchaScript();
|
6271
|
+
this.#createOnLoadScript();
|
6272
|
+
}
|
6273
|
+
}
|
6274
|
+
|
6275
|
+
#loadRecaptchaScript() {
|
6276
|
+
if (!document.getElementById('recaptcha-script')) {
|
6277
|
+
const script = document.createElement('script');
|
6278
|
+
script.src = this.scriptURL;
|
6279
|
+
script.async = true;
|
6280
|
+
script.id = 'recaptcha-script';
|
6281
|
+
script.defer = true;
|
6282
|
+
document.body.appendChild(script);
|
6283
|
+
} else {
|
6284
|
+
window.onRecaptchaLoadCallback();
|
6285
|
+
}
|
6286
|
+
}
|
6287
|
+
|
6288
|
+
#createOnLoadScript() {
|
6289
|
+
if (window.onRecaptchaLoadCallback) {
|
6290
|
+
return;
|
6291
|
+
}
|
6292
|
+
|
6293
|
+
window.onRecaptchaLoadCallback = () => {
|
6294
|
+
const currentNode = this.recaptchaEle;
|
6295
|
+
// if there are child nodes, it means that the recaptcha was already rendered
|
6296
|
+
if (currentNode.hasChildNodes()) {
|
6297
|
+
return;
|
6298
|
+
}
|
6299
|
+
const grecaptchaInstance = this.enterprise
|
6300
|
+
? window.grecaptcha?.enterprise
|
6301
|
+
: window.grecaptcha;
|
6302
|
+
|
6303
|
+
if (!grecaptchaInstance) {
|
6304
|
+
return;
|
6305
|
+
}
|
6306
|
+
|
6307
|
+
setTimeout(() => {
|
6308
|
+
const view = grecaptchaInstance.render(currentNode, {
|
6309
|
+
sitekey: this.siteKey,
|
6310
|
+
badge: 'inline',
|
6311
|
+
size: 'invisible',
|
6312
|
+
});
|
6313
|
+
grecaptchaInstance.ready(() => {
|
6314
|
+
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
6315
|
+
const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
|
6316
|
+
if (cloneNode) {
|
6317
|
+
cloneNode.style.display = 'none';
|
6318
|
+
document.body.appendChild(cloneNode);
|
6319
|
+
}
|
6320
|
+
if (this.siteKey) {
|
6321
|
+
grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
|
6322
|
+
this.updateComponentsContext({
|
6323
|
+
risktoken: token,
|
6324
|
+
riskaction: this.action,
|
6325
|
+
});
|
6326
|
+
});
|
6327
|
+
}
|
6328
|
+
});
|
6329
|
+
}, 0);
|
6330
|
+
};
|
6331
|
+
}
|
6332
|
+
|
6333
|
+
connectedCallback() {
|
6334
|
+
super.connectedCallback?.();
|
6335
|
+
|
6336
|
+
this.#toggleRecaptcha(this.disabled);
|
6337
|
+
}
|
6338
|
+
}
|
6339
|
+
|
6340
|
+
const RecaptchaClass = compose(
|
6341
|
+
draggableMixin
|
6342
|
+
)(RawRecaptcha);
|
6343
|
+
|
6164
6344
|
exports.ButtonClass = ButtonClass;
|
6165
6345
|
exports.CheckboxClass = CheckboxClass;
|
6166
6346
|
exports.ContainerClass = ContainerClass;
|
@@ -6176,6 +6356,7 @@ exports.NumberFieldClass = NumberFieldClass;
|
|
6176
6356
|
exports.PasscodeClass = PasscodeClass;
|
6177
6357
|
exports.PasswordClass = PasswordClass;
|
6178
6358
|
exports.PhoneFieldClass = PhoneFieldClass;
|
6359
|
+
exports.RecaptchaClass = RecaptchaClass;
|
6179
6360
|
exports.SwitchToggleClass = SwitchToggleClass;
|
6180
6361
|
exports.TextAreaClass = TextAreaClass;
|
6181
6362
|
exports.TextClass = TextClass;
|