@descope/web-components-ui 1.0.178 → 1.0.180
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +162 -142
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +173 -151
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/2481.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-selection-group-descope-button-selection-group-internal-index-js.js +1 -0
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js +1 -0
- package/dist/umd/descope-button-selection-group-index-js.js +1 -0
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-email-field-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-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +6 -6
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +1 -1
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +1 -1
- package/src/components/{descope-single-select/SingleSelectClass.js → descope-button-selection-group/ButtonSelectionGroupClass.js} +9 -9
- package/src/components/{descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js → descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js} +2 -2
- package/src/components/descope-button-selection-group/descope-button-selection-group-internal/index.js +9 -0
- package/src/components/{descope-single-select/descope-select-item/SelectItemClass.js → descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js} +2 -2
- package/src/components/descope-button-selection-group/descope-button-selection-group-item/index.js +6 -0
- package/src/components/descope-button-selection-group/index.js +6 -0
- package/src/components/descope-combo-box/ComboBoxClass.js +16 -7
- package/src/components/descope-email-field/EmailFieldClass.js +1 -1
- package/src/components/descope-new-password/NewPasswordClass.js +1 -1
- package/src/components/descope-number-field/NumberFieldClass.js +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +1 -1
- package/src/components/descope-password/PasswordClass.js +1 -1
- package/src/components/descope-text-area/TextAreaClass.js +1 -1
- package/src/components/descope-text-field/TextFieldClass.js +1 -1
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +1 -1
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +6 -4
- package/src/components/phone-fields/descope-phone-field/helpers.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +1 -1
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
- package/src/index.cjs.js +2 -2
- package/src/index.d.ts +1 -0
- package/src/index.js +2 -2
- package/src/mixins/createStyleMixin/index.js +9 -5
- package/src/mixins/proxyInputMixin.js +102 -97
- package/src/theme/components/{single-select/singleSelect.js → buttonSelectionGroup/buttonSelectionGroup.js} +4 -4
- package/src/theme/components/{single-select/selectItem.js → buttonSelectionGroup/buttonSelectionGroupItem.js} +4 -4
- package/src/theme/components/comboBox.js +7 -5
- package/src/theme/components/index.js +4 -4
- package/dist/umd/descope-single-select-descope-select-item-index-js.js +0 -1
- package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +0 -1
- package/dist/umd/descope-single-select-index-js.js +0 -1
- package/src/components/descope-single-select/descope-select-item/index.js +0 -6
- package/src/components/descope-single-select/descope-single-select-internal/index.js +0 -6
- package/src/components/descope-single-select/index.js +0 -6
package/dist/index.d.ts
CHANGED
@@ -32,6 +32,7 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
|
|
32
32
|
export { NewPasswordClass } from './components/descope-new-password';
|
33
33
|
export { RecaptchaClass } from './components/descope-recaptcha';
|
34
34
|
export { UploadFileClass } from './components/descope-upload-file';
|
35
|
+
export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
|
35
36
|
|
36
37
|
export type Theme = {
|
37
38
|
globals: {
|
package/dist/index.esm.js
CHANGED
@@ -286,6 +286,8 @@ const createStyleMixin =
|
|
286
286
|
|
287
287
|
#styleAttributes;
|
288
288
|
|
289
|
+
#getRootElement;
|
290
|
+
|
289
291
|
// we are using this mixin also for portalMixin
|
290
292
|
// so we should be able to inject styles to other DOM elements
|
291
293
|
// this is why we need to support these overrides
|
@@ -298,16 +300,12 @@ const createStyleMixin =
|
|
298
300
|
super();
|
299
301
|
this.#componentNameSuffix = componentNameSuffix;
|
300
302
|
this.#themeSection = themeSection;
|
301
|
-
this.#rootElement = getRootElement?.(this) || this.shadowRoot;
|
302
303
|
this.#baseSelector = baseSelector ?? this.baseSelector;
|
304
|
+
this.#getRootElement = getRootElement;
|
303
305
|
|
304
306
|
this.#styleAttributes = Object.keys(mappings).map((key) =>
|
305
307
|
kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
|
306
308
|
);
|
307
|
-
|
308
|
-
this.#createMappingStyle();
|
309
|
-
this.#createComponentTheme();
|
310
|
-
this.#createOverridesStyle();
|
311
309
|
}
|
312
310
|
|
313
311
|
// eslint-disable-next-line class-methods-use-this
|
@@ -396,8 +394,14 @@ const createStyleMixin =
|
|
396
394
|
init() {
|
397
395
|
super.init?.();
|
398
396
|
if (this.shadowRoot.isConnected) {
|
397
|
+
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
398
|
+
|
399
399
|
this.#addClassName(componentName);
|
400
400
|
|
401
|
+
this.#createMappingStyle();
|
402
|
+
this.#createComponentTheme();
|
403
|
+
this.#createOverridesStyle();
|
404
|
+
|
401
405
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
402
406
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
|
403
407
|
}
|
@@ -896,124 +900,129 @@ const getNestedInput = (ele) => {
|
|
896
900
|
return undefined;
|
897
901
|
};
|
898
902
|
|
899
|
-
const proxyInputMixin =
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
903
|
+
const proxyInputMixin =
|
904
|
+
({ proxyProps = [] }) =>
|
905
|
+
(superclass) =>
|
906
|
+
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
907
|
+
static get observedAttributes() {
|
908
|
+
return [...(superclass.observedAttributes || []), ...errorAttrs];
|
909
|
+
}
|
904
910
|
|
905
|
-
|
911
|
+
#inputElement;
|
906
912
|
|
907
|
-
|
913
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
908
914
|
|
909
|
-
|
910
|
-
|
915
|
+
constructor() {
|
916
|
+
super();
|
911
917
|
|
912
|
-
|
913
|
-
|
918
|
+
this.#inputElement = super.inputElement;
|
919
|
+
}
|
914
920
|
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
|
921
|
+
// the web-component does not loaded immediately, so we want to defer the warning
|
922
|
+
// and show it only if the input element was not found after the component is loaded
|
923
|
+
warnIfInputElementIsMissing() {
|
924
|
+
clearTimeout(this.inputElementTimerId);
|
919
925
|
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
926
|
+
this.inputElementTimerId = setTimeout(() => {
|
927
|
+
// eslint-disable-next-line no-console
|
928
|
+
!this.#inputElement && console.warn(this.localName, 'no input was found');
|
929
|
+
}, 0);
|
930
|
+
}
|
925
931
|
|
926
|
-
|
927
|
-
|
932
|
+
get inputElement() {
|
933
|
+
if (this.#inputElement) return this.#inputElement;
|
928
934
|
|
929
|
-
|
935
|
+
this.warnIfInputElementIsMissing();
|
930
936
|
|
931
|
-
|
932
|
-
|
937
|
+
const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
|
938
|
+
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
933
939
|
|
934
|
-
|
940
|
+
this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
|
935
941
|
|
936
|
-
|
937
|
-
|
942
|
+
return this.#inputElement;
|
943
|
+
}
|
938
944
|
|
939
|
-
|
940
|
-
|
941
|
-
|
945
|
+
set inputElement(ele) {
|
946
|
+
this.#inputElement = ele;
|
947
|
+
}
|
942
948
|
|
943
|
-
|
944
|
-
|
945
|
-
|
949
|
+
getValidity() {
|
950
|
+
return this.inputElement?.validity || {};
|
951
|
+
}
|
946
952
|
|
947
|
-
|
948
|
-
|
949
|
-
|
953
|
+
handleInternalInputErrorMessage() {
|
954
|
+
if (!this.inputElement.checkValidity()) {
|
955
|
+
this.inputElement.setCustomValidity(this.validationMessage);
|
956
|
+
}
|
950
957
|
}
|
951
|
-
}
|
952
958
|
|
953
|
-
|
954
|
-
|
955
|
-
|
956
|
-
|
959
|
+
#handleErrorMessage() {
|
960
|
+
this.handleInternalInputErrorMessage();
|
961
|
+
this.setAttribute('error-message', this.validationMessage);
|
962
|
+
}
|
957
963
|
|
958
|
-
|
959
|
-
|
964
|
+
init() {
|
965
|
+
super.init?.();
|
960
966
|
|
961
|
-
|
962
|
-
|
963
|
-
|
964
|
-
|
965
|
-
|
966
|
-
|
967
|
-
|
968
|
-
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
|
973
|
-
|
974
|
-
|
967
|
+
// on some cases the base element is not ready so the inputElement is empty
|
968
|
+
// we are deferring this section to make sure the base element is ready
|
969
|
+
setTimeout(() => {
|
970
|
+
this.inputElement?.addEventListener('input', (e) => {
|
971
|
+
if (!this.inputElement.checkValidity()) {
|
972
|
+
this.inputElement.setCustomValidity('');
|
973
|
+
// after updating the input validity we want to trigger set validity on the wrapping element
|
974
|
+
// so we will get the updated validity
|
975
|
+
this.setCustomValidity('');
|
976
|
+
|
977
|
+
// Vaadin is getting the input event before us,
|
978
|
+
// so in order to make sure they use the updated validity
|
979
|
+
// we calling their fn after updating the input validity
|
980
|
+
this.baseElement.__onInput(e);
|
981
|
+
|
982
|
+
this.#handleErrorMessage();
|
983
|
+
}
|
984
|
+
});
|
975
985
|
|
976
|
-
|
977
|
-
|
978
|
-
|
986
|
+
this.baseElement.addEventListener('change', () => {
|
987
|
+
this.#dispatchChange();
|
988
|
+
});
|
979
989
|
|
980
|
-
|
981
|
-
|
982
|
-
|
990
|
+
this.#inputElement.addEventListener('blur', () => {
|
991
|
+
if (!this.checkValidity()) {
|
992
|
+
this.setAttribute('invalid', 'true');
|
993
|
+
this.#handleErrorMessage();
|
994
|
+
}
|
995
|
+
});
|
983
996
|
|
984
|
-
|
985
|
-
|
986
|
-
|
997
|
+
this.addEventListener('invalid', () => {
|
998
|
+
if (!this.checkValidity()) {
|
999
|
+
this.setAttribute('invalid', 'true');
|
1000
|
+
}
|
987
1001
|
this.#handleErrorMessage();
|
988
|
-
}
|
989
|
-
});
|
1002
|
+
});
|
990
1003
|
|
991
|
-
|
992
|
-
if (!this.checkValidity()) {
|
993
|
-
this.setAttribute('invalid', 'true');
|
994
|
-
}
|
995
|
-
this.#handleErrorMessage();
|
996
|
-
});
|
1004
|
+
this.handleInternalInputErrorMessage();
|
997
1005
|
|
998
|
-
|
1006
|
+
// sync properties
|
1007
|
+
proxyProps.forEach((prop) => {
|
1008
|
+
propertyObserver(this, this.inputElement, prop);
|
1009
|
+
});
|
999
1010
|
|
1000
|
-
|
1001
|
-
propertyObserver(this, this.inputElement, 'value');
|
1002
|
-
propertyObserver(this, this.inputElement, 'selectionStart');
|
1003
|
-
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
1011
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
1004
1012
|
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1013
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
1014
|
+
});
|
1015
|
+
}
|
1016
|
+
};
|
1009
1017
|
|
1010
|
-
const composedProxyInputMixin =
|
1011
|
-
|
1012
|
-
|
1013
|
-
|
1014
|
-
|
1015
|
-
|
1016
|
-
)
|
1018
|
+
const composedProxyInputMixin = (proxyInputMixinConfig) =>
|
1019
|
+
compose(
|
1020
|
+
proxyInputMixin(proxyInputMixinConfig),
|
1021
|
+
// in order to use input-wrapper across all our input components, we need to inject its theme
|
1022
|
+
// to every proxy input mixin, to allow its css vars to be scoped properly and accessible
|
1023
|
+
// in the proxy input component
|
1024
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
|
1025
|
+
);
|
1017
1026
|
|
1018
1027
|
// this is needed because we might generate the same css vars names
|
1019
1028
|
// e.g. "overlayColor" attribute in style mixin's mapping,
|
@@ -1659,7 +1668,7 @@ const CheckboxClass = compose(
|
|
1659
1668
|
},
|
1660
1669
|
}),
|
1661
1670
|
draggableMixin,
|
1662
|
-
composedProxyInputMixin,
|
1671
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
1663
1672
|
componentNameValidationMixin,
|
1664
1673
|
booleanFieldMixin
|
1665
1674
|
)(
|
@@ -1761,7 +1770,7 @@ const SwitchToggleClass = compose(
|
|
1761
1770
|
},
|
1762
1771
|
}),
|
1763
1772
|
draggableMixin,
|
1764
|
-
composedProxyInputMixin,
|
1773
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
1765
1774
|
componentNameValidationMixin,
|
1766
1775
|
booleanFieldMixin
|
1767
1776
|
)(
|
@@ -2176,7 +2185,7 @@ const EmailFieldClass = compose(
|
|
2176
2185
|
mappings: textFieldMappings,
|
2177
2186
|
}),
|
2178
2187
|
draggableMixin,
|
2179
|
-
composedProxyInputMixin,
|
2188
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2180
2189
|
componentNameValidationMixin,
|
2181
2190
|
customMixin$6
|
2182
2191
|
)(
|
@@ -2346,7 +2355,7 @@ const NumberFieldClass = compose(
|
|
2346
2355
|
mappings: textFieldMappings,
|
2347
2356
|
}),
|
2348
2357
|
draggableMixin,
|
2349
|
-
composedProxyInputMixin,
|
2358
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2350
2359
|
componentNameValidationMixin
|
2351
2360
|
)(
|
2352
2361
|
createProxy({
|
@@ -2617,7 +2626,7 @@ const TextFieldClass = compose(
|
|
2617
2626
|
mappings: textFieldMappings,
|
2618
2627
|
}),
|
2619
2628
|
draggableMixin,
|
2620
|
-
composedProxyInputMixin,
|
2629
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2621
2630
|
componentNameValidationMixin,
|
2622
2631
|
customMixin$5
|
2623
2632
|
)(
|
@@ -2734,7 +2743,7 @@ const PasscodeClass = compose(
|
|
2734
2743
|
},
|
2735
2744
|
}),
|
2736
2745
|
draggableMixin,
|
2737
|
-
composedProxyInputMixin,
|
2746
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2738
2747
|
componentNameValidationMixin,
|
2739
2748
|
customMixin$4
|
2740
2749
|
)(
|
@@ -2922,7 +2931,7 @@ const PasswordClass = compose(
|
|
2922
2931
|
},
|
2923
2932
|
}),
|
2924
2933
|
draggableMixin,
|
2925
|
-
composedProxyInputMixin,
|
2934
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2926
2935
|
componentNameValidationMixin,
|
2927
2936
|
passwordDraggableMixin
|
2928
2937
|
)(
|
@@ -3036,7 +3045,7 @@ const TextAreaClass = compose(
|
|
3036
3045
|
},
|
3037
3046
|
}),
|
3038
3047
|
draggableMixin,
|
3039
|
-
composedProxyInputMixin,
|
3048
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3040
3049
|
componentNameValidationMixin
|
3041
3050
|
)(
|
3042
3051
|
createProxy({
|
@@ -3158,6 +3167,16 @@ const ComboBoxMixin = (superclass) =>
|
|
3158
3167
|
this.#overrideOverlaySettings();
|
3159
3168
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
3160
3169
|
}
|
3170
|
+
|
3171
|
+
set value(val) {
|
3172
|
+
this.baseElement.selectedItem = this.baseElement.items.find(
|
3173
|
+
(item) => item['data-id'] === val
|
3174
|
+
);
|
3175
|
+
}
|
3176
|
+
|
3177
|
+
get value() {
|
3178
|
+
return this.baseElement.selectedItem?.['data-id'] || '';
|
3179
|
+
}
|
3161
3180
|
};
|
3162
3181
|
|
3163
3182
|
const {
|
@@ -3182,11 +3201,6 @@ const {
|
|
3182
3201
|
errorMessage: { selector: '::part(error-message)' },
|
3183
3202
|
};
|
3184
3203
|
|
3185
|
-
// const { slotted, selected } = {
|
3186
|
-
// slotted: { selector: () => '::slotted(*)' },
|
3187
|
-
// selected: { selector: () => '::slotted([selected])' }
|
3188
|
-
// }
|
3189
|
-
|
3190
3204
|
const ComboBoxClass = compose(
|
3191
3205
|
createStyleMixin({
|
3192
3206
|
mappings: {
|
@@ -3230,6 +3244,9 @@ const ComboBoxClass = compose(
|
|
3230
3244
|
// at this time.
|
3231
3245
|
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
3232
3246
|
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
|
3247
|
+
overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
|
3248
|
+
overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
|
3249
|
+
overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
|
3233
3250
|
},
|
3234
3251
|
}),
|
3235
3252
|
draggableMixin,
|
@@ -3238,17 +3255,18 @@ const ComboBoxClass = compose(
|
|
3238
3255
|
selector: '',
|
3239
3256
|
mappings: {
|
3240
3257
|
backgroundColor: { selector: 'vaadin-combo-box-scroller' },
|
3241
|
-
cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
|
3242
3258
|
minHeight: { selector: 'vaadin-combo-box-overlay' },
|
3243
3259
|
margin: { selector: 'vaadin-combo-box-overlay' },
|
3260
|
+
cursor: { selector: 'vaadin-combo-box-item' },
|
3244
3261
|
fontFamily: { selector: 'vaadin-combo-box-item' },
|
3262
|
+
fontSize: { selector: 'vaadin-combo-box-item' },
|
3245
3263
|
},
|
3246
3264
|
forward: {
|
3247
3265
|
include: false,
|
3248
3266
|
attributes: ['size'],
|
3249
3267
|
},
|
3250
3268
|
}),
|
3251
|
-
composedProxyInputMixin,
|
3269
|
+
composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
|
3252
3270
|
componentNameValidationMixin,
|
3253
3271
|
ComboBoxMixin
|
3254
3272
|
)(
|
@@ -4517,9 +4535,9 @@ const getCountryFlag = (code) =>
|
|
4517
4535
|
const comboBoxItem = ({ code, dialCode, name: country }) => `
|
4518
4536
|
<div
|
4519
4537
|
style="display:flex; flex-direction: column;"
|
4520
|
-
data-id="${
|
4538
|
+
data-id="${dialCode}"
|
4521
4539
|
data-name="${code} ${dialCode} ${country}"
|
4522
|
-
data-
|
4540
|
+
data-country-code="${code}"
|
4523
4541
|
>
|
4524
4542
|
<div>
|
4525
4543
|
<span>
|
@@ -4564,9 +4582,9 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4564
4582
|
>
|
4565
4583
|
${CountryCodes.map((item) => comboBoxItem(item)).join('')}
|
4566
4584
|
</descope-combo-box>
|
4567
|
-
|
4585
|
+
<div class="separator"></div>
|
4568
4586
|
<descope-text-field type="tel"></descope-text-field>
|
4569
|
-
|
4587
|
+
</div>
|
4570
4588
|
`;
|
4571
4589
|
|
4572
4590
|
this.countryCodeInput = this.querySelector('descope-combo-box');
|
@@ -4638,12 +4656,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
|
|
4638
4656
|
|
4639
4657
|
getCountryByDialCode(countryDialCode) {
|
4640
4658
|
return this.countryCodeInput.items?.find(
|
4641
|
-
(c) => c.getAttribute('data-
|
4659
|
+
(c) => c.getAttribute('data-country-code') === countryDialCode
|
4642
4660
|
);
|
4643
4661
|
}
|
4644
4662
|
|
4645
4663
|
getCountryByCodeId(countryCode) {
|
4646
|
-
return this.countryCodeInput.items?.find(
|
4664
|
+
return this.countryCodeInput.items?.find(
|
4665
|
+
(c) => c.getAttribute('data-country-code') === countryCode
|
4666
|
+
);
|
4647
4667
|
}
|
4648
4668
|
|
4649
4669
|
updateCountryCodeItems(restrictCountries) {
|
@@ -4881,7 +4901,7 @@ const PhoneFieldClass = compose(
|
|
4881
4901
|
},
|
4882
4902
|
}),
|
4883
4903
|
draggableMixin,
|
4884
|
-
composedProxyInputMixin,
|
4904
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
4885
4905
|
customMixin$3
|
4886
4906
|
)(
|
4887
4907
|
createProxy({
|
@@ -5082,7 +5102,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
|
|
5082
5102
|
|
5083
5103
|
getCountryByDialCode(countryDialCode) {
|
5084
5104
|
return this.countryCodeInput.items?.find(
|
5085
|
-
(c) => c.getAttribute('data-
|
5105
|
+
(c) => c.getAttribute('data-country-code') === countryDialCode
|
5086
5106
|
);
|
5087
5107
|
}
|
5088
5108
|
|
@@ -5212,7 +5232,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5212
5232
|
},
|
5213
5233
|
}),
|
5214
5234
|
draggableMixin,
|
5215
|
-
composedProxyInputMixin,
|
5235
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5216
5236
|
customMixin$2
|
5217
5237
|
)(
|
5218
5238
|
createProxy({
|
@@ -5355,7 +5375,7 @@ const NewPasswordClass = compose(
|
|
5355
5375
|
},
|
5356
5376
|
}),
|
5357
5377
|
draggableMixin,
|
5358
|
-
composedProxyInputMixin,
|
5378
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5359
5379
|
customMixin$1
|
5360
5380
|
)(
|
5361
5381
|
createProxy({
|
@@ -5980,9 +6000,9 @@ const UploadFileClass = compose(
|
|
5980
6000
|
|
5981
6001
|
customElements.define(componentName$4, UploadFileClass);
|
5982
6002
|
|
5983
|
-
const componentName$3 = getComponentName('
|
6003
|
+
const componentName$3 = getComponentName('button-selection-group-internal');
|
5984
6004
|
|
5985
|
-
class
|
6005
|
+
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
5986
6006
|
componentName: componentName$3,
|
5987
6007
|
baseSelector: 'slot',
|
5988
6008
|
}) {
|
@@ -6108,17 +6128,17 @@ class SingleSelectInternalClass extends createBaseInputClass({
|
|
6108
6128
|
}
|
6109
6129
|
}
|
6110
6130
|
|
6111
|
-
const componentName$2 = getComponentName('
|
6131
|
+
const componentName$2 = getComponentName('button-selection-group');
|
6112
6132
|
|
6113
6133
|
const customMixin = (superclass) =>
|
6114
|
-
class
|
6134
|
+
class ButtonSelectionGroupMixinClass extends superclass {
|
6115
6135
|
init() {
|
6116
6136
|
super.init?.();
|
6117
6137
|
const template = document.createElement('template');
|
6118
6138
|
|
6119
6139
|
template.innerHTML = `
|
6120
6140
|
<${componentName$3}
|
6121
|
-
name="
|
6141
|
+
name="button-selection-group"
|
6122
6142
|
slot="input"
|
6123
6143
|
tabindex="-1"
|
6124
6144
|
>
|
@@ -6138,11 +6158,11 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
|
6138
6158
|
host: { selector: () => ':host' },
|
6139
6159
|
label: { selector: '::part(label)' },
|
6140
6160
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6141
|
-
internalWrapper: { selector: 'descope-
|
6161
|
+
internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
|
6142
6162
|
errorMessage: { selector: '::part(error-message)' },
|
6143
6163
|
};
|
6144
6164
|
|
6145
|
-
const
|
6165
|
+
const ButtonSelectionGroupClass = compose(
|
6146
6166
|
createStyleMixin({
|
6147
6167
|
mappings: {
|
6148
6168
|
hostWidth: { ...host, property: 'width' },
|
@@ -6157,7 +6177,7 @@ const SingleSelectClass = compose(
|
|
6157
6177
|
},
|
6158
6178
|
}),
|
6159
6179
|
draggableMixin,
|
6160
|
-
composedProxyInputMixin,
|
6180
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6161
6181
|
componentNameValidationMixin,
|
6162
6182
|
customMixin
|
6163
6183
|
)(
|
@@ -6177,7 +6197,7 @@ const SingleSelectClass = compose(
|
|
6177
6197
|
background-color: transparent;
|
6178
6198
|
}
|
6179
6199
|
|
6180
|
-
descope-
|
6200
|
+
descope-button-selection-group-internal {
|
6181
6201
|
-webkit-mask-image: none;
|
6182
6202
|
padding: 0;
|
6183
6203
|
width: 100%;
|
@@ -6222,11 +6242,11 @@ const SingleSelectClass = compose(
|
|
6222
6242
|
})
|
6223
6243
|
);
|
6224
6244
|
|
6225
|
-
customElements.define(componentName$3,
|
6245
|
+
customElements.define(componentName$3, ButtonSelectionGroupInternalClass);
|
6226
6246
|
|
6227
|
-
customElements.define(componentName$2,
|
6247
|
+
customElements.define(componentName$2, ButtonSelectionGroupClass);
|
6228
6248
|
|
6229
|
-
const componentName$1 = getComponentName('
|
6249
|
+
const componentName$1 = getComponentName('button-selection-group-item');
|
6230
6250
|
|
6231
6251
|
class RawSelectItem extends createBaseClass({
|
6232
6252
|
componentName: componentName$1,
|
@@ -6294,7 +6314,7 @@ class RawSelectItem extends createBaseClass({
|
|
6294
6314
|
}
|
6295
6315
|
}
|
6296
6316
|
|
6297
|
-
const
|
6317
|
+
const ButtonSelectionGroupItemClass = compose(
|
6298
6318
|
createStyleMixin({
|
6299
6319
|
mappings: {
|
6300
6320
|
backgroundColor: {
|
@@ -6323,7 +6343,7 @@ const SelectItemClass = compose(
|
|
6323
6343
|
componentNameValidationMixin
|
6324
6344
|
)(RawSelectItem);
|
6325
6345
|
|
6326
|
-
customElements.define(componentName$1,
|
6346
|
+
customElements.define(componentName$1, ButtonSelectionGroupItemClass);
|
6327
6347
|
|
6328
6348
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
6329
6349
|
|
@@ -7594,12 +7614,14 @@ const comboBox = {
|
|
7594
7614
|
[vars$8.inputDropdownButtonCursor]: 'default',
|
7595
7615
|
},
|
7596
7616
|
|
7597
|
-
|
7598
|
-
[vars$8.
|
7617
|
+
// Overlay theme exposed via the component:
|
7618
|
+
[vars$8.overlayFontSize]: refs.fontSize,
|
7619
|
+
[vars$8.overlayFontFamily]: refs.fontFamily,
|
7620
|
+
[vars$8.overlayCursor]: 'pointer',
|
7599
7621
|
|
7600
|
-
//
|
7601
|
-
|
7602
|
-
|
7622
|
+
// Overlay direct theme:
|
7623
|
+
[vars$8.overlay.minHeight]: '400px',
|
7624
|
+
[vars$8.overlay.margin]: '0',
|
7603
7625
|
};
|
7604
7626
|
|
7605
7627
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
@@ -7776,9 +7798,9 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
7776
7798
|
|
7777
7799
|
const globalRefs$1 = getThemeRefs(globals);
|
7778
7800
|
|
7779
|
-
const vars$2 =
|
7801
|
+
const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
|
7780
7802
|
|
7781
|
-
const
|
7803
|
+
const buttonSelectionGroupItem = {
|
7782
7804
|
[vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
|
7783
7805
|
[vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
7784
7806
|
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
@@ -7796,16 +7818,16 @@ const selectItem = {
|
|
7796
7818
|
},
|
7797
7819
|
};
|
7798
7820
|
|
7799
|
-
var
|
7821
|
+
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
7800
7822
|
__proto__: null,
|
7801
|
-
default:
|
7823
|
+
default: buttonSelectionGroupItem,
|
7802
7824
|
vars: vars$2
|
7803
7825
|
});
|
7804
7826
|
|
7805
7827
|
const globalRefs = getThemeRefs(globals);
|
7806
|
-
const vars$1 =
|
7828
|
+
const vars$1 = ButtonSelectionGroupClass.cssVarList;
|
7807
7829
|
|
7808
|
-
const
|
7830
|
+
const buttonSelectionGroup = {
|
7809
7831
|
[vars$1.fontFamily]: refs.fontFamily,
|
7810
7832
|
[vars$1.labelTextColor]: refs.labelTextColor,
|
7811
7833
|
[vars$1.labelRequiredIndicator]: refs.requiredIndicator,
|
@@ -7814,9 +7836,9 @@ const singleSelect = {
|
|
7814
7836
|
[vars$1.hostWidth]: refs.width,
|
7815
7837
|
};
|
7816
7838
|
|
7817
|
-
var
|
7839
|
+
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
7818
7840
|
__proto__: null,
|
7819
|
-
default:
|
7841
|
+
default: buttonSelectionGroup,
|
7820
7842
|
vars: vars$1
|
7821
7843
|
});
|
7822
7844
|
|
@@ -7845,8 +7867,8 @@ const components = {
|
|
7845
7867
|
newPassword: newPassword$1,
|
7846
7868
|
inputWrapper,
|
7847
7869
|
uploadFile: uploadFile$1,
|
7848
|
-
|
7849
|
-
|
7870
|
+
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
7871
|
+
buttonSelectionGroup: buttonSelectionGroup$1,
|
7850
7872
|
};
|
7851
7873
|
|
7852
7874
|
const theme = Object.keys(components).reduce(
|
@@ -7861,5 +7883,5 @@ const vars = Object.keys(components).reduce(
|
|
7861
7883
|
const defaultTheme = { globals, components: theme };
|
7862
7884
|
const themeVars = { globals: vars$r, components: vars };
|
7863
7885
|
|
7864
|
-
export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass,
|
7886
|
+
export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
7865
7887
|
//# sourceMappingURL=index.esm.js.map
|