@descope/web-components-ui 1.0.179 → 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 +4 -4
- 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/cjs/index.cjs.js
CHANGED
@@ -608,6 +608,8 @@ const createStyleMixin =
|
|
608
608
|
|
609
609
|
#styleAttributes;
|
610
610
|
|
611
|
+
#getRootElement;
|
612
|
+
|
611
613
|
// we are using this mixin also for portalMixin
|
612
614
|
// so we should be able to inject styles to other DOM elements
|
613
615
|
// this is why we need to support these overrides
|
@@ -620,16 +622,12 @@ const createStyleMixin =
|
|
620
622
|
super();
|
621
623
|
this.#componentNameSuffix = componentNameSuffix;
|
622
624
|
this.#themeSection = themeSection;
|
623
|
-
this.#rootElement = getRootElement?.(this) || this.shadowRoot;
|
624
625
|
this.#baseSelector = baseSelector ?? this.baseSelector;
|
626
|
+
this.#getRootElement = getRootElement;
|
625
627
|
|
626
628
|
this.#styleAttributes = Object.keys(mappings).map((key) =>
|
627
629
|
kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
|
628
630
|
);
|
629
|
-
|
630
|
-
this.#createMappingStyle();
|
631
|
-
this.#createComponentTheme();
|
632
|
-
this.#createOverridesStyle();
|
633
631
|
}
|
634
632
|
|
635
633
|
// eslint-disable-next-line class-methods-use-this
|
@@ -718,8 +716,14 @@ const createStyleMixin =
|
|
718
716
|
init() {
|
719
717
|
super.init?.();
|
720
718
|
if (this.shadowRoot.isConnected) {
|
719
|
+
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
720
|
+
|
721
721
|
this.#addClassName(componentName);
|
722
722
|
|
723
|
+
this.#createMappingStyle();
|
724
|
+
this.#createComponentTheme();
|
725
|
+
this.#createOverridesStyle();
|
726
|
+
|
723
727
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
724
728
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
|
725
729
|
}
|
@@ -1218,124 +1222,129 @@ const getNestedInput = (ele) => {
|
|
1218
1222
|
return undefined;
|
1219
1223
|
};
|
1220
1224
|
|
1221
|
-
const proxyInputMixin =
|
1222
|
-
|
1223
|
-
|
1224
|
-
|
1225
|
-
|
1225
|
+
const proxyInputMixin =
|
1226
|
+
({ proxyProps = [] }) =>
|
1227
|
+
(superclass) =>
|
1228
|
+
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
1229
|
+
static get observedAttributes() {
|
1230
|
+
return [...(superclass.observedAttributes || []), ...errorAttrs];
|
1231
|
+
}
|
1226
1232
|
|
1227
|
-
|
1233
|
+
#inputElement;
|
1228
1234
|
|
1229
|
-
|
1235
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
1230
1236
|
|
1231
|
-
|
1232
|
-
|
1237
|
+
constructor() {
|
1238
|
+
super();
|
1233
1239
|
|
1234
|
-
|
1235
|
-
|
1240
|
+
this.#inputElement = super.inputElement;
|
1241
|
+
}
|
1236
1242
|
|
1237
|
-
|
1238
|
-
|
1239
|
-
|
1240
|
-
|
1243
|
+
// the web-component does not loaded immediately, so we want to defer the warning
|
1244
|
+
// and show it only if the input element was not found after the component is loaded
|
1245
|
+
warnIfInputElementIsMissing() {
|
1246
|
+
clearTimeout(this.inputElementTimerId);
|
1241
1247
|
|
1242
|
-
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
1246
|
-
|
1248
|
+
this.inputElementTimerId = setTimeout(() => {
|
1249
|
+
// eslint-disable-next-line no-console
|
1250
|
+
!this.#inputElement && console.warn(this.localName, 'no input was found');
|
1251
|
+
}, 0);
|
1252
|
+
}
|
1247
1253
|
|
1248
|
-
|
1249
|
-
|
1254
|
+
get inputElement() {
|
1255
|
+
if (this.#inputElement) return this.#inputElement;
|
1250
1256
|
|
1251
|
-
|
1257
|
+
this.warnIfInputElementIsMissing();
|
1252
1258
|
|
1253
|
-
|
1254
|
-
|
1259
|
+
const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
|
1260
|
+
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
1255
1261
|
|
1256
|
-
|
1262
|
+
this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
|
1257
1263
|
|
1258
|
-
|
1259
|
-
|
1264
|
+
return this.#inputElement;
|
1265
|
+
}
|
1260
1266
|
|
1261
|
-
|
1262
|
-
|
1263
|
-
|
1267
|
+
set inputElement(ele) {
|
1268
|
+
this.#inputElement = ele;
|
1269
|
+
}
|
1264
1270
|
|
1265
|
-
|
1266
|
-
|
1267
|
-
|
1271
|
+
getValidity() {
|
1272
|
+
return this.inputElement?.validity || {};
|
1273
|
+
}
|
1268
1274
|
|
1269
|
-
|
1270
|
-
|
1271
|
-
|
1275
|
+
handleInternalInputErrorMessage() {
|
1276
|
+
if (!this.inputElement.checkValidity()) {
|
1277
|
+
this.inputElement.setCustomValidity(this.validationMessage);
|
1278
|
+
}
|
1272
1279
|
}
|
1273
|
-
}
|
1274
1280
|
|
1275
|
-
|
1276
|
-
|
1277
|
-
|
1278
|
-
|
1281
|
+
#handleErrorMessage() {
|
1282
|
+
this.handleInternalInputErrorMessage();
|
1283
|
+
this.setAttribute('error-message', this.validationMessage);
|
1284
|
+
}
|
1279
1285
|
|
1280
|
-
|
1281
|
-
|
1286
|
+
init() {
|
1287
|
+
super.init?.();
|
1282
1288
|
|
1283
|
-
|
1284
|
-
|
1285
|
-
|
1286
|
-
|
1287
|
-
|
1288
|
-
|
1289
|
-
|
1290
|
-
|
1291
|
-
|
1292
|
-
|
1293
|
-
|
1294
|
-
|
1295
|
-
|
1296
|
-
|
1289
|
+
// on some cases the base element is not ready so the inputElement is empty
|
1290
|
+
// we are deferring this section to make sure the base element is ready
|
1291
|
+
setTimeout(() => {
|
1292
|
+
this.inputElement?.addEventListener('input', (e) => {
|
1293
|
+
if (!this.inputElement.checkValidity()) {
|
1294
|
+
this.inputElement.setCustomValidity('');
|
1295
|
+
// after updating the input validity we want to trigger set validity on the wrapping element
|
1296
|
+
// so we will get the updated validity
|
1297
|
+
this.setCustomValidity('');
|
1298
|
+
|
1299
|
+
// Vaadin is getting the input event before us,
|
1300
|
+
// so in order to make sure they use the updated validity
|
1301
|
+
// we calling their fn after updating the input validity
|
1302
|
+
this.baseElement.__onInput(e);
|
1303
|
+
|
1304
|
+
this.#handleErrorMessage();
|
1305
|
+
}
|
1306
|
+
});
|
1297
1307
|
|
1298
|
-
|
1299
|
-
|
1300
|
-
|
1308
|
+
this.baseElement.addEventListener('change', () => {
|
1309
|
+
this.#dispatchChange();
|
1310
|
+
});
|
1301
1311
|
|
1302
|
-
|
1303
|
-
|
1304
|
-
|
1312
|
+
this.#inputElement.addEventListener('blur', () => {
|
1313
|
+
if (!this.checkValidity()) {
|
1314
|
+
this.setAttribute('invalid', 'true');
|
1315
|
+
this.#handleErrorMessage();
|
1316
|
+
}
|
1317
|
+
});
|
1305
1318
|
|
1306
|
-
|
1307
|
-
|
1308
|
-
|
1319
|
+
this.addEventListener('invalid', () => {
|
1320
|
+
if (!this.checkValidity()) {
|
1321
|
+
this.setAttribute('invalid', 'true');
|
1322
|
+
}
|
1309
1323
|
this.#handleErrorMessage();
|
1310
|
-
}
|
1311
|
-
});
|
1324
|
+
});
|
1312
1325
|
|
1313
|
-
|
1314
|
-
if (!this.checkValidity()) {
|
1315
|
-
this.setAttribute('invalid', 'true');
|
1316
|
-
}
|
1317
|
-
this.#handleErrorMessage();
|
1318
|
-
});
|
1326
|
+
this.handleInternalInputErrorMessage();
|
1319
1327
|
|
1320
|
-
|
1328
|
+
// sync properties
|
1329
|
+
proxyProps.forEach((prop) => {
|
1330
|
+
propertyObserver(this, this.inputElement, prop);
|
1331
|
+
});
|
1321
1332
|
|
1322
|
-
|
1323
|
-
propertyObserver(this, this.inputElement, 'value');
|
1324
|
-
propertyObserver(this, this.inputElement, 'selectionStart');
|
1325
|
-
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
1333
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
1326
1334
|
|
1327
|
-
|
1328
|
-
|
1329
|
-
|
1330
|
-
|
1335
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
1336
|
+
});
|
1337
|
+
}
|
1338
|
+
};
|
1331
1339
|
|
1332
|
-
const composedProxyInputMixin =
|
1333
|
-
|
1334
|
-
|
1335
|
-
|
1336
|
-
|
1337
|
-
|
1338
|
-
)
|
1340
|
+
const composedProxyInputMixin = (proxyInputMixinConfig) =>
|
1341
|
+
compose(
|
1342
|
+
proxyInputMixin(proxyInputMixinConfig),
|
1343
|
+
// in order to use input-wrapper across all our input components, we need to inject its theme
|
1344
|
+
// to every proxy input mixin, to allow its css vars to be scoped properly and accessible
|
1345
|
+
// in the proxy input component
|
1346
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
|
1347
|
+
);
|
1339
1348
|
|
1340
1349
|
// this is needed because we might generate the same css vars names
|
1341
1350
|
// e.g. "overlayColor" attribute in style mixin's mapping,
|
@@ -1942,7 +1951,7 @@ const TextFieldClass = compose(
|
|
1942
1951
|
mappings: textFieldMappings,
|
1943
1952
|
}),
|
1944
1953
|
draggableMixin,
|
1945
|
-
composedProxyInputMixin,
|
1954
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
1946
1955
|
componentNameValidationMixin,
|
1947
1956
|
customMixin$6
|
1948
1957
|
)(
|
@@ -2177,7 +2186,7 @@ const PasswordClass = compose(
|
|
2177
2186
|
},
|
2178
2187
|
}),
|
2179
2188
|
draggableMixin,
|
2180
|
-
composedProxyInputMixin,
|
2189
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2181
2190
|
componentNameValidationMixin,
|
2182
2191
|
passwordDraggableMixin
|
2183
2192
|
)(
|
@@ -2278,7 +2287,7 @@ const NumberFieldClass = compose(
|
|
2278
2287
|
mappings: textFieldMappings,
|
2279
2288
|
}),
|
2280
2289
|
draggableMixin,
|
2281
|
-
composedProxyInputMixin,
|
2290
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2282
2291
|
componentNameValidationMixin
|
2283
2292
|
)(
|
2284
2293
|
createProxy({
|
@@ -2345,7 +2354,7 @@ const EmailFieldClass = compose(
|
|
2345
2354
|
mappings: textFieldMappings,
|
2346
2355
|
}),
|
2347
2356
|
draggableMixin,
|
2348
|
-
composedProxyInputMixin,
|
2357
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2349
2358
|
componentNameValidationMixin,
|
2350
2359
|
customMixin$5
|
2351
2360
|
)(
|
@@ -2450,7 +2459,7 @@ const TextAreaClass = compose(
|
|
2450
2459
|
},
|
2451
2460
|
}),
|
2452
2461
|
draggableMixin,
|
2453
|
-
composedProxyInputMixin,
|
2462
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2454
2463
|
componentNameValidationMixin
|
2455
2464
|
)(
|
2456
2465
|
createProxy({
|
@@ -2694,7 +2703,7 @@ const CheckboxClass = compose(
|
|
2694
2703
|
},
|
2695
2704
|
}),
|
2696
2705
|
draggableMixin,
|
2697
|
-
composedProxyInputMixin,
|
2706
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2698
2707
|
componentNameValidationMixin,
|
2699
2708
|
booleanFieldMixin
|
2700
2709
|
)(
|
@@ -2830,7 +2839,7 @@ const SwitchToggleClass = compose(
|
|
2830
2839
|
},
|
2831
2840
|
}),
|
2832
2841
|
draggableMixin,
|
2833
|
-
composedProxyInputMixin,
|
2842
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
2834
2843
|
componentNameValidationMixin,
|
2835
2844
|
booleanFieldMixin
|
2836
2845
|
)(
|
@@ -3674,7 +3683,7 @@ const PasscodeClass = compose(
|
|
3674
3683
|
},
|
3675
3684
|
}),
|
3676
3685
|
draggableMixin,
|
3677
|
-
composedProxyInputMixin,
|
3686
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3678
3687
|
componentNameValidationMixin,
|
3679
3688
|
customMixin$4
|
3680
3689
|
)(
|
@@ -4040,6 +4049,16 @@ const ComboBoxMixin = (superclass) =>
|
|
4040
4049
|
this.#overrideOverlaySettings();
|
4041
4050
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
4042
4051
|
}
|
4052
|
+
|
4053
|
+
set value(val) {
|
4054
|
+
this.baseElement.selectedItem = this.baseElement.items.find(
|
4055
|
+
(item) => item['data-id'] === val
|
4056
|
+
);
|
4057
|
+
}
|
4058
|
+
|
4059
|
+
get value() {
|
4060
|
+
return this.baseElement.selectedItem?.['data-id'] || '';
|
4061
|
+
}
|
4043
4062
|
};
|
4044
4063
|
|
4045
4064
|
const {
|
@@ -4064,11 +4083,6 @@ const {
|
|
4064
4083
|
errorMessage: { selector: '::part(error-message)' },
|
4065
4084
|
};
|
4066
4085
|
|
4067
|
-
// const { slotted, selected } = {
|
4068
|
-
// slotted: { selector: () => '::slotted(*)' },
|
4069
|
-
// selected: { selector: () => '::slotted([selected])' }
|
4070
|
-
// }
|
4071
|
-
|
4072
4086
|
const ComboBoxClass = compose(
|
4073
4087
|
createStyleMixin({
|
4074
4088
|
mappings: {
|
@@ -4112,6 +4126,9 @@ const ComboBoxClass = compose(
|
|
4112
4126
|
// at this time.
|
4113
4127
|
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
4114
4128
|
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
|
4129
|
+
overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
|
4130
|
+
overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
|
4131
|
+
overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
|
4115
4132
|
},
|
4116
4133
|
}),
|
4117
4134
|
draggableMixin,
|
@@ -4120,17 +4137,18 @@ const ComboBoxClass = compose(
|
|
4120
4137
|
selector: '',
|
4121
4138
|
mappings: {
|
4122
4139
|
backgroundColor: { selector: 'vaadin-combo-box-scroller' },
|
4123
|
-
cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
|
4124
4140
|
minHeight: { selector: 'vaadin-combo-box-overlay' },
|
4125
4141
|
margin: { selector: 'vaadin-combo-box-overlay' },
|
4142
|
+
cursor: { selector: 'vaadin-combo-box-item' },
|
4126
4143
|
fontFamily: { selector: 'vaadin-combo-box-item' },
|
4144
|
+
fontSize: { selector: 'vaadin-combo-box-item' },
|
4127
4145
|
},
|
4128
4146
|
forward: {
|
4129
4147
|
include: false,
|
4130
4148
|
attributes: ['size'],
|
4131
4149
|
},
|
4132
4150
|
}),
|
4133
|
-
composedProxyInputMixin,
|
4151
|
+
composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
|
4134
4152
|
componentNameValidationMixin,
|
4135
4153
|
ComboBoxMixin
|
4136
4154
|
)(
|
@@ -4208,12 +4226,14 @@ const comboBox = {
|
|
4208
4226
|
[vars$8.inputDropdownButtonCursor]: 'default',
|
4209
4227
|
},
|
4210
4228
|
|
4211
|
-
|
4212
|
-
[vars$8.
|
4229
|
+
// Overlay theme exposed via the component:
|
4230
|
+
[vars$8.overlayFontSize]: refs.fontSize,
|
4231
|
+
[vars$8.overlayFontFamily]: refs.fontFamily,
|
4232
|
+
[vars$8.overlayCursor]: 'pointer',
|
4213
4233
|
|
4214
|
-
//
|
4215
|
-
|
4216
|
-
|
4234
|
+
// Overlay direct theme:
|
4235
|
+
[vars$8.overlay.minHeight]: '400px',
|
4236
|
+
[vars$8.overlay.margin]: '0',
|
4217
4237
|
};
|
4218
4238
|
|
4219
4239
|
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
@@ -5637,7 +5657,7 @@ const PhoneFieldClass = compose(
|
|
5637
5657
|
},
|
5638
5658
|
}),
|
5639
5659
|
draggableMixin,
|
5640
|
-
composedProxyInputMixin,
|
5660
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5641
5661
|
customMixin$3
|
5642
5662
|
)(
|
5643
5663
|
createProxy({
|
@@ -5845,7 +5865,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
5845
5865
|
},
|
5846
5866
|
}),
|
5847
5867
|
draggableMixin,
|
5848
|
-
composedProxyInputMixin,
|
5868
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
5849
5869
|
customMixin$2
|
5850
5870
|
)(
|
5851
5871
|
createProxy({
|
@@ -6017,7 +6037,7 @@ const NewPasswordClass = compose(
|
|
6017
6037
|
},
|
6018
6038
|
}),
|
6019
6039
|
draggableMixin,
|
6020
|
-
composedProxyInputMixin,
|
6040
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6021
6041
|
customMixin$1
|
6022
6042
|
)(
|
6023
6043
|
createProxy({
|
@@ -6389,7 +6409,7 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
6389
6409
|
vars: vars$3
|
6390
6410
|
});
|
6391
6411
|
|
6392
|
-
const componentName$3 = getComponentName('
|
6412
|
+
const componentName$3 = getComponentName('button-selection-group-item');
|
6393
6413
|
|
6394
6414
|
class RawSelectItem extends createBaseClass({
|
6395
6415
|
componentName: componentName$3,
|
@@ -6457,7 +6477,7 @@ class RawSelectItem extends createBaseClass({
|
|
6457
6477
|
}
|
6458
6478
|
}
|
6459
6479
|
|
6460
|
-
const
|
6480
|
+
const ButtonSelectionGroupItemClass = compose(
|
6461
6481
|
createStyleMixin({
|
6462
6482
|
mappings: {
|
6463
6483
|
backgroundColor: {
|
@@ -6488,9 +6508,9 @@ const SelectItemClass = compose(
|
|
6488
6508
|
|
6489
6509
|
const globalRefs$1 = getThemeRefs(globals);
|
6490
6510
|
|
6491
|
-
const vars$2 =
|
6511
|
+
const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
|
6492
6512
|
|
6493
|
-
const
|
6513
|
+
const buttonSelectionGroupItem = {
|
6494
6514
|
[vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
|
6495
6515
|
[vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
6496
6516
|
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
@@ -6508,15 +6528,15 @@ const selectItem = {
|
|
6508
6528
|
},
|
6509
6529
|
};
|
6510
6530
|
|
6511
|
-
var
|
6531
|
+
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
6512
6532
|
__proto__: null,
|
6513
|
-
default:
|
6533
|
+
default: buttonSelectionGroupItem,
|
6514
6534
|
vars: vars$2
|
6515
6535
|
});
|
6516
6536
|
|
6517
|
-
const componentName$2 = getComponentName('
|
6537
|
+
const componentName$2 = getComponentName('button-selection-group-internal');
|
6518
6538
|
|
6519
|
-
class
|
6539
|
+
class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
6520
6540
|
componentName: componentName$2,
|
6521
6541
|
baseSelector: 'slot',
|
6522
6542
|
}) {
|
@@ -6642,17 +6662,17 @@ class SingleSelectInternalClass extends createBaseInputClass({
|
|
6642
6662
|
}
|
6643
6663
|
}
|
6644
6664
|
|
6645
|
-
const componentName$1 = getComponentName('
|
6665
|
+
const componentName$1 = getComponentName('button-selection-group');
|
6646
6666
|
|
6647
6667
|
const customMixin = (superclass) =>
|
6648
|
-
class
|
6668
|
+
class ButtonSelectionGroupMixinClass extends superclass {
|
6649
6669
|
init() {
|
6650
6670
|
super.init?.();
|
6651
6671
|
const template = document.createElement('template');
|
6652
6672
|
|
6653
6673
|
template.innerHTML = `
|
6654
6674
|
<${componentName$2}
|
6655
|
-
name="
|
6675
|
+
name="button-selection-group"
|
6656
6676
|
slot="input"
|
6657
6677
|
tabindex="-1"
|
6658
6678
|
>
|
@@ -6672,11 +6692,11 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
|
6672
6692
|
host: { selector: () => ':host' },
|
6673
6693
|
label: { selector: '::part(label)' },
|
6674
6694
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
6675
|
-
internalWrapper: { selector: 'descope-
|
6695
|
+
internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
|
6676
6696
|
errorMessage: { selector: '::part(error-message)' },
|
6677
6697
|
};
|
6678
6698
|
|
6679
|
-
const
|
6699
|
+
const ButtonSelectionGroupClass = compose(
|
6680
6700
|
createStyleMixin({
|
6681
6701
|
mappings: {
|
6682
6702
|
hostWidth: { ...host, property: 'width' },
|
@@ -6691,7 +6711,7 @@ const SingleSelectClass = compose(
|
|
6691
6711
|
},
|
6692
6712
|
}),
|
6693
6713
|
draggableMixin,
|
6694
|
-
composedProxyInputMixin,
|
6714
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
6695
6715
|
componentNameValidationMixin,
|
6696
6716
|
customMixin
|
6697
6717
|
)(
|
@@ -6711,7 +6731,7 @@ const SingleSelectClass = compose(
|
|
6711
6731
|
background-color: transparent;
|
6712
6732
|
}
|
6713
6733
|
|
6714
|
-
descope-
|
6734
|
+
descope-button-selection-group-internal {
|
6715
6735
|
-webkit-mask-image: none;
|
6716
6736
|
padding: 0;
|
6717
6737
|
width: 100%;
|
@@ -6757,9 +6777,9 @@ const SingleSelectClass = compose(
|
|
6757
6777
|
);
|
6758
6778
|
|
6759
6779
|
const globalRefs = getThemeRefs(globals);
|
6760
|
-
const vars$1 =
|
6780
|
+
const vars$1 = ButtonSelectionGroupClass.cssVarList;
|
6761
6781
|
|
6762
|
-
const
|
6782
|
+
const buttonSelectionGroup = {
|
6763
6783
|
[vars$1.fontFamily]: refs.fontFamily,
|
6764
6784
|
[vars$1.labelTextColor]: refs.labelTextColor,
|
6765
6785
|
[vars$1.labelRequiredIndicator]: refs.requiredIndicator,
|
@@ -6768,9 +6788,9 @@ const singleSelect = {
|
|
6768
6788
|
[vars$1.hostWidth]: refs.width,
|
6769
6789
|
};
|
6770
6790
|
|
6771
|
-
var
|
6791
|
+
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
6772
6792
|
__proto__: null,
|
6773
|
-
default:
|
6793
|
+
default: buttonSelectionGroup,
|
6774
6794
|
vars: vars$1
|
6775
6795
|
});
|
6776
6796
|
|
@@ -6799,8 +6819,8 @@ const components = {
|
|
6799
6819
|
newPassword: newPassword$1,
|
6800
6820
|
inputWrapper,
|
6801
6821
|
uploadFile: uploadFile$1,
|
6802
|
-
|
6803
|
-
|
6822
|
+
buttonSelectionGroupItem: buttonSelectionGroupItem$1,
|
6823
|
+
buttonSelectionGroup: buttonSelectionGroup$1,
|
6804
6824
|
};
|
6805
6825
|
|
6806
6826
|
const theme = Object.keys(components).reduce(
|
@@ -6971,6 +6991,8 @@ class RawRecaptcha extends BaseClass {
|
|
6971
6991
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|
6972
6992
|
|
6973
6993
|
exports.ButtonClass = ButtonClass;
|
6994
|
+
exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
|
6995
|
+
exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
|
6974
6996
|
exports.CheckboxClass = CheckboxClass;
|
6975
6997
|
exports.ContainerClass = ContainerClass;
|
6976
6998
|
exports.DividerClass = DividerClass;
|
@@ -6987,8 +7009,6 @@ exports.PasswordClass = PasswordClass;
|
|
6987
7009
|
exports.PhoneFieldClass = PhoneFieldClass;
|
6988
7010
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
6989
7011
|
exports.RecaptchaClass = RecaptchaClass;
|
6990
|
-
exports.SelectItemClass = SelectItemClass;
|
6991
|
-
exports.SingleSelectClass = SingleSelectClass;
|
6992
7012
|
exports.SwitchToggleClass = SwitchToggleClass;
|
6993
7013
|
exports.TextAreaClass = TextAreaClass;
|
6994
7014
|
exports.TextClass = TextClass;
|