@descope/web-components-ui 1.0.158 → 1.0.159
Sign up to get free protection for your applications and to get access to all the features.
- 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/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
|
}
|
@@ -1485,7 +1501,7 @@ const clickableMixin = (superclass) =>
|
|
1485
1501
|
}
|
1486
1502
|
};
|
1487
1503
|
|
1488
|
-
const componentName$
|
1504
|
+
const componentName$r = getComponentName('button');
|
1489
1505
|
|
1490
1506
|
const resetStyles = `
|
1491
1507
|
:host {
|
@@ -1579,7 +1595,7 @@ const ButtonClass = compose(
|
|
1579
1595
|
}
|
1580
1596
|
`,
|
1581
1597
|
excludeAttrsSync: ['tabindex'],
|
1582
|
-
componentName: componentName$
|
1598
|
+
componentName: componentName$r,
|
1583
1599
|
})
|
1584
1600
|
);
|
1585
1601
|
|
@@ -1627,7 +1643,7 @@ const mode = {
|
|
1627
1643
|
surface: globalRefs$b.colors.surface,
|
1628
1644
|
};
|
1629
1645
|
|
1630
|
-
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$
|
1646
|
+
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
|
1631
1647
|
|
1632
1648
|
const verticalPaddingRatio = 3;
|
1633
1649
|
const horizontalPaddingRatio = 2;
|
@@ -1880,7 +1896,7 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
1880
1896
|
${resetInputFieldUnderlayingBorder(name)}
|
1881
1897
|
`;
|
1882
1898
|
|
1883
|
-
const componentName$
|
1899
|
+
const componentName$q = getComponentName('text-field');
|
1884
1900
|
|
1885
1901
|
const observedAttrs = ['type'];
|
1886
1902
|
|
@@ -1928,11 +1944,11 @@ const TextFieldClass = compose(
|
|
1928
1944
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
1929
1945
|
`,
|
1930
1946
|
excludeAttrsSync: ['tabindex'],
|
1931
|
-
componentName: componentName$
|
1947
|
+
componentName: componentName$q,
|
1932
1948
|
})
|
1933
1949
|
);
|
1934
1950
|
|
1935
|
-
const componentName$
|
1951
|
+
const componentName$p = getComponentName('input-wrapper');
|
1936
1952
|
const globalRefs$a = getThemeRefs(globals);
|
1937
1953
|
|
1938
1954
|
const [theme$1, refs, vars$m] = createHelperVars(
|
@@ -1997,7 +2013,7 @@ const [theme$1, refs, vars$m] = createHelperVars(
|
|
1997
2013
|
backgroundColor: globalRefs$a.colors.surface.main,
|
1998
2014
|
},
|
1999
2015
|
},
|
2000
|
-
componentName$
|
2016
|
+
componentName$p
|
2001
2017
|
);
|
2002
2018
|
|
2003
2019
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
@@ -2073,7 +2089,7 @@ const passwordDraggableMixin = (superclass) =>
|
|
2073
2089
|
}
|
2074
2090
|
};
|
2075
2091
|
|
2076
|
-
const componentName$
|
2092
|
+
const componentName$o = getComponentName('password');
|
2077
2093
|
|
2078
2094
|
const {
|
2079
2095
|
host: host$b,
|
@@ -2201,7 +2217,7 @@ const PasswordClass = compose(
|
|
2201
2217
|
}
|
2202
2218
|
`,
|
2203
2219
|
excludeAttrsSync: ['tabindex'],
|
2204
|
-
componentName: componentName$
|
2220
|
+
componentName: componentName$o,
|
2205
2221
|
})
|
2206
2222
|
);
|
2207
2223
|
|
@@ -2238,7 +2254,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
|
|
2238
2254
|
vars: vars$k
|
2239
2255
|
});
|
2240
2256
|
|
2241
|
-
const componentName$
|
2257
|
+
const componentName$n = getComponentName('number-field');
|
2242
2258
|
|
2243
2259
|
const NumberFieldClass = compose(
|
2244
2260
|
createStyleMixin({
|
@@ -2263,7 +2279,7 @@ const NumberFieldClass = compose(
|
|
2263
2279
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2264
2280
|
`,
|
2265
2281
|
excludeAttrsSync: ['tabindex'],
|
2266
|
-
componentName: componentName$
|
2282
|
+
componentName: componentName$n,
|
2267
2283
|
})
|
2268
2284
|
);
|
2269
2285
|
|
@@ -2298,7 +2314,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
2298
2314
|
vars: vars$j
|
2299
2315
|
});
|
2300
2316
|
|
2301
|
-
const componentName$
|
2317
|
+
const componentName$m = getComponentName('email-field');
|
2302
2318
|
|
2303
2319
|
const EmailFieldClass = compose(
|
2304
2320
|
createStyleMixin({
|
@@ -2323,7 +2339,7 @@ const EmailFieldClass = compose(
|
|
2323
2339
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2324
2340
|
`,
|
2325
2341
|
excludeAttrsSync: ['tabindex'],
|
2326
|
-
componentName: componentName$
|
2342
|
+
componentName: componentName$m,
|
2327
2343
|
})
|
2328
2344
|
);
|
2329
2345
|
|
@@ -2358,7 +2374,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
2358
2374
|
vars: vars$i
|
2359
2375
|
});
|
2360
2376
|
|
2361
|
-
const componentName$
|
2377
|
+
const componentName$l = getComponentName('text-area');
|
2362
2378
|
|
2363
2379
|
const {
|
2364
2380
|
host: host$a,
|
@@ -2430,7 +2446,7 @@ const TextAreaClass = compose(
|
|
2430
2446
|
${resetInputCursor('vaadin-text-area')}
|
2431
2447
|
`,
|
2432
2448
|
excludeAttrsSync: ['tabindex'],
|
2433
|
-
componentName: componentName$
|
2449
|
+
componentName: componentName$l,
|
2434
2450
|
})
|
2435
2451
|
);
|
2436
2452
|
|
@@ -2482,9 +2498,9 @@ const createBaseInputClass = (...args) =>
|
|
2482
2498
|
inputEventsDispatchingMixin
|
2483
2499
|
)(createBaseClass(...args));
|
2484
2500
|
|
2485
|
-
const componentName$
|
2501
|
+
const componentName$k = getComponentName('boolean-field-internal');
|
2486
2502
|
|
2487
|
-
createBaseInputClass({ componentName: componentName$
|
2503
|
+
createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
|
2488
2504
|
|
2489
2505
|
const booleanFieldMixin = (superclass) =>
|
2490
2506
|
class BooleanFieldMixinClass extends superclass {
|
@@ -2493,14 +2509,14 @@ const booleanFieldMixin = (superclass) =>
|
|
2493
2509
|
|
2494
2510
|
const template = document.createElement('template');
|
2495
2511
|
template.innerHTML = `
|
2496
|
-
<${componentName$
|
2512
|
+
<${componentName$k}
|
2497
2513
|
tabindex="-1"
|
2498
2514
|
slot="input"
|
2499
|
-
></${componentName$
|
2515
|
+
></${componentName$k}>
|
2500
2516
|
`;
|
2501
2517
|
|
2502
2518
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2503
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2519
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$k);
|
2504
2520
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
2505
2521
|
|
2506
2522
|
forwardAttrs(this, this.inputElement, {
|
@@ -2579,7 +2595,7 @@ vaadin-checkbox::part(checkbox) {
|
|
2579
2595
|
}
|
2580
2596
|
`;
|
2581
2597
|
|
2582
|
-
const componentName$
|
2598
|
+
const componentName$j = getComponentName('checkbox');
|
2583
2599
|
|
2584
2600
|
const {
|
2585
2601
|
host: host$9,
|
@@ -2669,7 +2685,7 @@ const CheckboxClass = compose(
|
|
2669
2685
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
2670
2686
|
`,
|
2671
2687
|
excludeAttrsSync: ['tabindex'],
|
2672
|
-
componentName: componentName$
|
2688
|
+
componentName: componentName$j,
|
2673
2689
|
})
|
2674
2690
|
);
|
2675
2691
|
|
@@ -2711,7 +2727,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
2711
2727
|
vars: vars$g
|
2712
2728
|
});
|
2713
2729
|
|
2714
|
-
const componentName$
|
2730
|
+
const componentName$i = getComponentName('switch-toggle');
|
2715
2731
|
|
2716
2732
|
const {
|
2717
2733
|
host: host$8,
|
@@ -2814,7 +2830,7 @@ const SwitchToggleClass = compose(
|
|
2814
2830
|
}
|
2815
2831
|
`,
|
2816
2832
|
excludeAttrsSync: ['tabindex'],
|
2817
|
-
componentName: componentName$
|
2833
|
+
componentName: componentName$i,
|
2818
2834
|
})
|
2819
2835
|
);
|
2820
2836
|
|
@@ -2888,9 +2904,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
2888
2904
|
vars: vars$f
|
2889
2905
|
});
|
2890
2906
|
|
2891
|
-
const componentName$
|
2907
|
+
const componentName$h = getComponentName('container');
|
2892
2908
|
|
2893
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2909
|
+
class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
|
2894
2910
|
constructor() {
|
2895
2911
|
super();
|
2896
2912
|
|
@@ -2964,7 +2980,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
|
|
2964
2980
|
horizontalAlignment,
|
2965
2981
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
2966
2982
|
},
|
2967
|
-
componentName$
|
2983
|
+
componentName$h
|
2968
2984
|
);
|
2969
2985
|
|
2970
2986
|
const { shadowColor } = helperRefs$2;
|
@@ -3109,10 +3125,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
3109
3125
|
return CssVarImageClass;
|
3110
3126
|
};
|
3111
3127
|
|
3112
|
-
const componentName$
|
3128
|
+
const componentName$g = getComponentName('logo');
|
3113
3129
|
|
3114
3130
|
const LogoClass = createCssVarImageClass({
|
3115
|
-
componentName: componentName$
|
3131
|
+
componentName: componentName$g,
|
3116
3132
|
varName: 'url',
|
3117
3133
|
fallbackVarName: 'fallbackUrl',
|
3118
3134
|
});
|
@@ -3129,10 +3145,10 @@ var logo$2 = /*#__PURE__*/Object.freeze({
|
|
3129
3145
|
vars: vars$d
|
3130
3146
|
});
|
3131
3147
|
|
3132
|
-
const componentName$
|
3148
|
+
const componentName$f = getComponentName('totp-image');
|
3133
3149
|
|
3134
3150
|
const TotpImageClass = createCssVarImageClass({
|
3135
|
-
componentName: componentName$
|
3151
|
+
componentName: componentName$f,
|
3136
3152
|
varName: 'url',
|
3137
3153
|
fallbackVarName: 'fallbackUrl',
|
3138
3154
|
});
|
@@ -3149,9 +3165,9 @@ var totpImage = /*#__PURE__*/Object.freeze({
|
|
3149
3165
|
vars: vars$c
|
3150
3166
|
});
|
3151
3167
|
|
3152
|
-
const componentName$
|
3168
|
+
const componentName$e = getComponentName('text');
|
3153
3169
|
|
3154
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
3170
|
+
class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
|
3155
3171
|
constructor() {
|
3156
3172
|
super();
|
3157
3173
|
|
@@ -3282,9 +3298,9 @@ var text$3 = /*#__PURE__*/Object.freeze({
|
|
3282
3298
|
vars: vars$b
|
3283
3299
|
});
|
3284
3300
|
|
3285
|
-
const componentName$
|
3301
|
+
const componentName$d = getComponentName('link');
|
3286
3302
|
|
3287
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
3303
|
+
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
3288
3304
|
constructor() {
|
3289
3305
|
super();
|
3290
3306
|
|
@@ -3388,8 +3404,8 @@ var link$1 = /*#__PURE__*/Object.freeze({
|
|
3388
3404
|
vars: vars$a
|
3389
3405
|
});
|
3390
3406
|
|
3391
|
-
const componentName$
|
3392
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
3407
|
+
const componentName$c = getComponentName('divider');
|
3408
|
+
class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
|
3393
3409
|
constructor() {
|
3394
3410
|
super();
|
3395
3411
|
|
@@ -3493,7 +3509,7 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
|
|
3493
3509
|
thickness: '2px',
|
3494
3510
|
spacing: '10px',
|
3495
3511
|
},
|
3496
|
-
componentName$
|
3512
|
+
componentName$c
|
3497
3513
|
);
|
3498
3514
|
|
3499
3515
|
const divider = {
|
@@ -3535,18 +3551,18 @@ var divider$1 = /*#__PURE__*/Object.freeze({
|
|
3535
3551
|
|
3536
3552
|
/* eslint-disable no-param-reassign */
|
3537
3553
|
|
3538
|
-
const componentName$
|
3554
|
+
const componentName$b = getComponentName('passcode-internal');
|
3539
3555
|
|
3540
|
-
createBaseInputClass({ componentName: componentName$
|
3556
|
+
createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
3541
3557
|
|
3542
|
-
const componentName$
|
3558
|
+
const componentName$a = getComponentName('passcode');
|
3543
3559
|
|
3544
|
-
const observedAttributes$
|
3560
|
+
const observedAttributes$3 = ['digits'];
|
3545
3561
|
|
3546
3562
|
const customMixin$2 = (superclass) =>
|
3547
3563
|
class PasscodeMixinClass extends superclass {
|
3548
3564
|
static get observedAttributes() {
|
3549
|
-
return observedAttributes$
|
3565
|
+
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
3550
3566
|
}
|
3551
3567
|
|
3552
3568
|
get digits() {
|
@@ -3558,17 +3574,17 @@ const customMixin$2 = (superclass) =>
|
|
3558
3574
|
const template = document.createElement('template');
|
3559
3575
|
|
3560
3576
|
template.innerHTML = `
|
3561
|
-
<${componentName$
|
3577
|
+
<${componentName$b}
|
3562
3578
|
bordered="true"
|
3563
3579
|
name="code"
|
3564
3580
|
tabindex="-1"
|
3565
3581
|
slot="input"
|
3566
|
-
></${componentName$
|
3582
|
+
></${componentName$b}>
|
3567
3583
|
`;
|
3568
3584
|
|
3569
3585
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
3570
3586
|
|
3571
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
3587
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
3572
3588
|
|
3573
3589
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
3574
3590
|
}
|
@@ -3706,7 +3722,7 @@ const PasscodeClass = compose(
|
|
3706
3722
|
${resetInputCursor('vaadin-text-field')}
|
3707
3723
|
`,
|
3708
3724
|
excludeAttrsSync: ['tabindex'],
|
3709
|
-
componentName: componentName$
|
3725
|
+
componentName: componentName$a,
|
3710
3726
|
})
|
3711
3727
|
);
|
3712
3728
|
|
@@ -3739,11 +3755,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
3739
3755
|
vars: vars$8
|
3740
3756
|
});
|
3741
3757
|
|
3742
|
-
const componentName$
|
3758
|
+
const componentName$9 = getComponentName('loader-linear');
|
3743
3759
|
|
3744
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
3760
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
|
3745
3761
|
static get componentName() {
|
3746
|
-
return componentName$
|
3762
|
+
return componentName$9;
|
3747
3763
|
}
|
3748
3764
|
|
3749
3765
|
constructor() {
|
@@ -3849,9 +3865,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
3849
3865
|
vars: vars$7
|
3850
3866
|
});
|
3851
3867
|
|
3852
|
-
const componentName$
|
3868
|
+
const componentName$8 = getComponentName('loader-radial');
|
3853
3869
|
|
3854
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
3870
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
|
3855
3871
|
constructor() {
|
3856
3872
|
super();
|
3857
3873
|
|
@@ -3910,7 +3926,7 @@ const [helperTheme, helperRefs] = createHelperVars(
|
|
3910
3926
|
},
|
3911
3927
|
},
|
3912
3928
|
},
|
3913
|
-
componentName$
|
3929
|
+
componentName$8
|
3914
3930
|
);
|
3915
3931
|
|
3916
3932
|
const loaderRadial = {
|
@@ -3946,7 +3962,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
3946
3962
|
vars: vars$6
|
3947
3963
|
});
|
3948
3964
|
|
3949
|
-
const componentName$
|
3965
|
+
const componentName$7 = getComponentName('combo-box');
|
3950
3966
|
|
3951
3967
|
const ComboBoxMixin = (superclass) =>
|
3952
3968
|
class ComboBoxMixinClass extends superclass {
|
@@ -4127,7 +4143,7 @@ const ComboBoxClass = compose(
|
|
4127
4143
|
// and reset items to an empty array, and opening the list box with no items
|
4128
4144
|
// to display.
|
4129
4145
|
excludeAttrsSync: ['tabindex', 'size'],
|
4130
|
-
componentName: componentName$
|
4146
|
+
componentName: componentName$7,
|
4131
4147
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
4132
4148
|
})
|
4133
4149
|
);
|
@@ -4179,14 +4195,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
4179
4195
|
vars: vars$5
|
4180
4196
|
});
|
4181
4197
|
|
4182
|
-
const observedAttributes$
|
4198
|
+
const observedAttributes$2 = ['src', 'alt'];
|
4183
4199
|
|
4184
|
-
const componentName$
|
4200
|
+
const componentName$6 = getComponentName('image');
|
4185
4201
|
|
4186
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
4187
|
-
class RawImage extends BaseClass {
|
4202
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$6, baseSelector: ':host > img' });
|
4203
|
+
class RawImage extends BaseClass$1 {
|
4188
4204
|
static get observedAttributes() {
|
4189
|
-
return observedAttributes$
|
4205
|
+
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
4190
4206
|
}
|
4191
4207
|
|
4192
4208
|
constructor() {
|
@@ -4209,7 +4225,7 @@ class RawImage extends BaseClass {
|
|
4209
4225
|
connectedCallback() {
|
4210
4226
|
super.connectedCallback?.();
|
4211
4227
|
|
4212
|
-
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$
|
4228
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
|
4213
4229
|
}
|
4214
4230
|
}
|
4215
4231
|
|
@@ -5446,14 +5462,14 @@ var CountryCodes = [
|
|
5446
5462
|
},
|
5447
5463
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
5448
5464
|
|
5449
|
-
const componentName$
|
5465
|
+
const componentName$5 = getComponentName('phone-field-internal');
|
5450
5466
|
|
5451
|
-
createBaseInputClass({ componentName: componentName$
|
5467
|
+
createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
|
5452
5468
|
|
5453
5469
|
const textVars = TextFieldClass.cssVarList;
|
5454
5470
|
const comboVars = ComboBoxClass.cssVarList;
|
5455
5471
|
|
5456
|
-
const componentName$
|
5472
|
+
const componentName$4 = getComponentName('phone-field');
|
5457
5473
|
|
5458
5474
|
const customMixin$1 = (superclass) =>
|
5459
5475
|
class PhoneFieldMixinClass extends superclass {
|
@@ -5467,15 +5483,15 @@ const customMixin$1 = (superclass) =>
|
|
5467
5483
|
const template = document.createElement('template');
|
5468
5484
|
|
5469
5485
|
template.innerHTML = `
|
5470
|
-
<${componentName$
|
5486
|
+
<${componentName$5}
|
5471
5487
|
tabindex="-1"
|
5472
5488
|
slot="input"
|
5473
|
-
></${componentName$
|
5489
|
+
></${componentName$5}>
|
5474
5490
|
`;
|
5475
5491
|
|
5476
5492
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5477
5493
|
|
5478
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5494
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$5);
|
5479
5495
|
|
5480
5496
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
5481
5497
|
includeAttrs: [
|
@@ -5668,7 +5684,7 @@ const PhoneFieldClass = compose(
|
|
5668
5684
|
}
|
5669
5685
|
`,
|
5670
5686
|
excludeAttrsSync: ['tabindex'],
|
5671
|
-
componentName: componentName$
|
5687
|
+
componentName: componentName$4,
|
5672
5688
|
})
|
5673
5689
|
);
|
5674
5690
|
|
@@ -5706,9 +5722,9 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
5706
5722
|
vars: vars$3
|
5707
5723
|
});
|
5708
5724
|
|
5709
|
-
const componentName$
|
5725
|
+
const componentName$3 = getComponentName('new-password-internal');
|
5710
5726
|
|
5711
|
-
const componentName$
|
5727
|
+
const componentName$2 = getComponentName('new-password');
|
5712
5728
|
|
5713
5729
|
const customMixin = (superclass) =>
|
5714
5730
|
class NewPasswordMixinClass extends superclass {
|
@@ -5718,16 +5734,16 @@ const customMixin = (superclass) =>
|
|
5718
5734
|
const template = document.createElement('template');
|
5719
5735
|
|
5720
5736
|
template.innerHTML = `
|
5721
|
-
<${componentName$
|
5737
|
+
<${componentName$3}
|
5722
5738
|
name="new-password"
|
5723
5739
|
tabindex="-1"
|
5724
5740
|
slot="input"
|
5725
|
-
></${componentName$
|
5741
|
+
></${componentName$3}>
|
5726
5742
|
`;
|
5727
5743
|
|
5728
5744
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
5729
5745
|
|
5730
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
5746
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
5731
5747
|
|
5732
5748
|
forwardAttrs(this, this.inputElement, {
|
5733
5749
|
includeAttrs: [
|
@@ -5826,7 +5842,7 @@ const NewPasswordClass = compose(
|
|
5826
5842
|
},
|
5827
5843
|
`,
|
5828
5844
|
excludeAttrsSync: ['tabindex'],
|
5829
|
-
componentName: componentName$
|
5845
|
+
componentName: componentName$2,
|
5830
5846
|
})
|
5831
5847
|
);
|
5832
5848
|
|
@@ -5866,9 +5882,9 @@ const getFilename = (fileObj) => {
|
|
5866
5882
|
return fileObj.name.replace(/^.*\\/, '');
|
5867
5883
|
};
|
5868
5884
|
|
5869
|
-
const componentName = getComponentName('upload-file');
|
5885
|
+
const componentName$1 = getComponentName('upload-file');
|
5870
5886
|
|
5871
|
-
const observedAttributes = [
|
5887
|
+
const observedAttributes$1 = [
|
5872
5888
|
'title',
|
5873
5889
|
'description',
|
5874
5890
|
'button-label',
|
@@ -5879,11 +5895,11 @@ const observedAttributes = [
|
|
5879
5895
|
'size',
|
5880
5896
|
];
|
5881
5897
|
|
5882
|
-
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div.wrapper' });
|
5898
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div.wrapper' });
|
5883
5899
|
|
5884
5900
|
class RawUploadFile extends BaseInputClass {
|
5885
5901
|
static get observedAttributes() {
|
5886
|
-
return observedAttributes.concat(BaseInputClass.observedAttributes || []);
|
5902
|
+
return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
|
5887
5903
|
}
|
5888
5904
|
|
5889
5905
|
constructor() {
|
@@ -6161,6 +6177,163 @@ const vars = Object.keys(components).reduce(
|
|
6161
6177
|
const defaultTheme = { globals, components: theme };
|
6162
6178
|
const themeVars = { globals: vars$o, components: vars };
|
6163
6179
|
|
6180
|
+
const componentName = getComponentName('recaptcha');
|
6181
|
+
|
6182
|
+
const observedAttributes = ['disabled', 'site-key', 'action', 'enterprise'];
|
6183
|
+
|
6184
|
+
const BaseClass = createBaseClass({
|
6185
|
+
componentName,
|
6186
|
+
baseSelector: ':host > div',
|
6187
|
+
});
|
6188
|
+
class RawRecaptcha extends BaseClass {
|
6189
|
+
static get observedAttributes() {
|
6190
|
+
return observedAttributes.concat(BaseClass.observedAttributes || []);
|
6191
|
+
}
|
6192
|
+
|
6193
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
6194
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
6195
|
+
if (attrName === 'disabled') {
|
6196
|
+
this.#toggleRecaptcha(newValue === 'true');
|
6197
|
+
}
|
6198
|
+
}
|
6199
|
+
|
6200
|
+
renderRecaptcha(disabled) {
|
6201
|
+
if (disabled) {
|
6202
|
+
this.recaptchaEle.style.display = 'none';
|
6203
|
+
this.mockRecaptchaEle.style.display = '';
|
6204
|
+
} else {
|
6205
|
+
this.recaptchaEle.style.display = '';
|
6206
|
+
this.mockRecaptchaEle.style.display = 'none';
|
6207
|
+
}
|
6208
|
+
}
|
6209
|
+
|
6210
|
+
constructor() {
|
6211
|
+
super();
|
6212
|
+
|
6213
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
6214
|
+
<style>
|
6215
|
+
:host #recaptcha {
|
6216
|
+
width: 100%;
|
6217
|
+
height: 100%
|
6218
|
+
}
|
6219
|
+
:host img {
|
6220
|
+
width: 256px;
|
6221
|
+
}
|
6222
|
+
:host {
|
6223
|
+
display: inline-flex;
|
6224
|
+
}
|
6225
|
+
</style>
|
6226
|
+
<div>
|
6227
|
+
<span id="recaptcha"></span>
|
6228
|
+
<img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
|
6229
|
+
</div>
|
6230
|
+
`;
|
6231
|
+
|
6232
|
+
this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
|
6233
|
+
this.mockRecaptchaEle = this.baseElement.querySelector('img');
|
6234
|
+
}
|
6235
|
+
|
6236
|
+
get enterprise() {
|
6237
|
+
return this.getAttribute('enterprise') === 'true';
|
6238
|
+
}
|
6239
|
+
|
6240
|
+
get siteKey() {
|
6241
|
+
return this.getAttribute('site-key');
|
6242
|
+
}
|
6243
|
+
|
6244
|
+
get action() {
|
6245
|
+
return this.getAttribute('action') || 'load';
|
6246
|
+
}
|
6247
|
+
|
6248
|
+
get disabled() {
|
6249
|
+
return this.getAttribute('disabled') === 'true';
|
6250
|
+
}
|
6251
|
+
|
6252
|
+
get scriptURL() {
|
6253
|
+
const url = new URL('https://www.google.com/recaptcha/');
|
6254
|
+
url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
|
6255
|
+
url.searchParams.append('onload', 'onRecaptchaLoadCallback');
|
6256
|
+
url.searchParams.append('render', 'explicit');
|
6257
|
+
return url.toString();
|
6258
|
+
}
|
6259
|
+
|
6260
|
+
#toggleRecaptcha(disabled) {
|
6261
|
+
this.renderRecaptcha(disabled);
|
6262
|
+
if (!disabled) {
|
6263
|
+
this.#loadRecaptchaScript();
|
6264
|
+
this.#createOnLoadScript();
|
6265
|
+
}
|
6266
|
+
}
|
6267
|
+
|
6268
|
+
#loadRecaptchaScript() {
|
6269
|
+
if (!document.getElementById('recaptcha-script')) {
|
6270
|
+
const script = document.createElement('script');
|
6271
|
+
script.src = this.scriptURL;
|
6272
|
+
script.async = true;
|
6273
|
+
script.id = 'recaptcha-script';
|
6274
|
+
script.defer = true;
|
6275
|
+
document.body.appendChild(script);
|
6276
|
+
} else {
|
6277
|
+
window.onRecaptchaLoadCallback();
|
6278
|
+
}
|
6279
|
+
}
|
6280
|
+
|
6281
|
+
#createOnLoadScript() {
|
6282
|
+
if (window.onRecaptchaLoadCallback) {
|
6283
|
+
return;
|
6284
|
+
}
|
6285
|
+
|
6286
|
+
window.onRecaptchaLoadCallback = () => {
|
6287
|
+
const currentNode = this.recaptchaEle;
|
6288
|
+
// if there are child nodes, it means that the recaptcha was already rendered
|
6289
|
+
if (currentNode.hasChildNodes()) {
|
6290
|
+
return;
|
6291
|
+
}
|
6292
|
+
const grecaptchaInstance = this.enterprise
|
6293
|
+
? window.grecaptcha?.enterprise
|
6294
|
+
: window.grecaptcha;
|
6295
|
+
|
6296
|
+
if (!grecaptchaInstance) {
|
6297
|
+
return;
|
6298
|
+
}
|
6299
|
+
|
6300
|
+
setTimeout(() => {
|
6301
|
+
const view = grecaptchaInstance.render(currentNode, {
|
6302
|
+
sitekey: this.siteKey,
|
6303
|
+
badge: 'inline',
|
6304
|
+
size: 'invisible',
|
6305
|
+
});
|
6306
|
+
grecaptchaInstance.ready(() => {
|
6307
|
+
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
6308
|
+
const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
|
6309
|
+
if (cloneNode) {
|
6310
|
+
cloneNode.style.display = 'none';
|
6311
|
+
document.body.appendChild(cloneNode);
|
6312
|
+
}
|
6313
|
+
if (this.siteKey) {
|
6314
|
+
grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
|
6315
|
+
this.updateComponentsContext({
|
6316
|
+
risktoken: token,
|
6317
|
+
riskaction: this.action,
|
6318
|
+
});
|
6319
|
+
});
|
6320
|
+
}
|
6321
|
+
});
|
6322
|
+
}, 0);
|
6323
|
+
};
|
6324
|
+
}
|
6325
|
+
|
6326
|
+
connectedCallback() {
|
6327
|
+
super.connectedCallback?.();
|
6328
|
+
|
6329
|
+
this.#toggleRecaptcha(this.disabled);
|
6330
|
+
}
|
6331
|
+
}
|
6332
|
+
|
6333
|
+
const RecaptchaClass = compose(
|
6334
|
+
draggableMixin
|
6335
|
+
)(RawRecaptcha);
|
6336
|
+
|
6164
6337
|
exports.ButtonClass = ButtonClass;
|
6165
6338
|
exports.CheckboxClass = CheckboxClass;
|
6166
6339
|
exports.ContainerClass = ContainerClass;
|
@@ -6176,6 +6349,7 @@ exports.NumberFieldClass = NumberFieldClass;
|
|
6176
6349
|
exports.PasscodeClass = PasscodeClass;
|
6177
6350
|
exports.PasswordClass = PasswordClass;
|
6178
6351
|
exports.PhoneFieldClass = PhoneFieldClass;
|
6352
|
+
exports.RecaptchaClass = RecaptchaClass;
|
6179
6353
|
exports.SwitchToggleClass = SwitchToggleClass;
|
6180
6354
|
exports.TextAreaClass = TextAreaClass;
|
6181
6355
|
exports.TextClass = TextClass;
|