@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
@@ -4,7 +4,7 @@ import { compose } from '../../../helpers';
|
|
4
4
|
import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
|
5
5
|
import { ButtonClass } from '../../descope-button/ButtonClass';
|
6
6
|
|
7
|
-
export const componentName = getComponentName('
|
7
|
+
export const componentName = getComponentName('button-selection-group-item');
|
8
8
|
|
9
9
|
class RawSelectItem extends createBaseClass({
|
10
10
|
componentName,
|
@@ -72,7 +72,7 @@ class RawSelectItem extends createBaseClass({
|
|
72
72
|
}
|
73
73
|
}
|
74
74
|
|
75
|
-
export const
|
75
|
+
export const ButtonSelectionGroupItemClass = compose(
|
76
76
|
createStyleMixin({
|
77
77
|
mappings: {
|
78
78
|
backgroundColor: {
|
@@ -64,6 +64,16 @@ const ComboBoxMixin = (superclass) =>
|
|
64
64
|
this.#overrideOverlaySettings();
|
65
65
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
66
66
|
}
|
67
|
+
|
68
|
+
set value(val) {
|
69
|
+
this.baseElement.selectedItem = this.baseElement.items.find(
|
70
|
+
(item) => item['data-id'] === val
|
71
|
+
);
|
72
|
+
}
|
73
|
+
|
74
|
+
get value() {
|
75
|
+
return this.baseElement.selectedItem?.['data-id'] || '';
|
76
|
+
}
|
67
77
|
};
|
68
78
|
|
69
79
|
const {
|
@@ -88,11 +98,6 @@ const {
|
|
88
98
|
errorMessage: { selector: '::part(error-message)' },
|
89
99
|
};
|
90
100
|
|
91
|
-
// const { slotted, selected } = {
|
92
|
-
// slotted: { selector: () => '::slotted(*)' },
|
93
|
-
// selected: { selector: () => '::slotted([selected])' }
|
94
|
-
// }
|
95
|
-
|
96
101
|
export const ComboBoxClass = compose(
|
97
102
|
createStyleMixin({
|
98
103
|
mappings: {
|
@@ -136,6 +141,9 @@ export const ComboBoxClass = compose(
|
|
136
141
|
// at this time.
|
137
142
|
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
138
143
|
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
|
144
|
+
overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
|
145
|
+
overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
|
146
|
+
overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
|
139
147
|
},
|
140
148
|
}),
|
141
149
|
draggableMixin,
|
@@ -144,17 +152,18 @@ export const ComboBoxClass = compose(
|
|
144
152
|
selector: '',
|
145
153
|
mappings: {
|
146
154
|
backgroundColor: { selector: 'vaadin-combo-box-scroller' },
|
147
|
-
cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
|
148
155
|
minHeight: { selector: 'vaadin-combo-box-overlay' },
|
149
156
|
margin: { selector: 'vaadin-combo-box-overlay' },
|
157
|
+
cursor: { selector: 'vaadin-combo-box-item' },
|
150
158
|
fontFamily: { selector: 'vaadin-combo-box-item' },
|
159
|
+
fontSize: { selector: 'vaadin-combo-box-item' },
|
151
160
|
},
|
152
161
|
forward: {
|
153
162
|
include: false,
|
154
163
|
attributes: ['size'],
|
155
164
|
},
|
156
165
|
}),
|
157
|
-
proxyInputMixin,
|
166
|
+
proxyInputMixin({ proxyProps: ['selectionStart'] }),
|
158
167
|
componentNameValidationMixin,
|
159
168
|
ComboBoxMixin
|
160
169
|
)(
|
@@ -33,9 +33,9 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
33
33
|
>
|
34
34
|
${CountryCodes.map((item) => comboBoxItem(item)).join('')}
|
35
35
|
</descope-combo-box>
|
36
|
-
|
36
|
+
<div class="separator"></div>
|
37
37
|
<descope-text-field type="tel"></descope-text-field>
|
38
|
-
|
38
|
+
</div>
|
39
39
|
`;
|
40
40
|
|
41
41
|
this.countryCodeInput = this.querySelector('descope-combo-box');
|
@@ -107,12 +107,14 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
107
107
|
|
108
108
|
getCountryByDialCode(countryDialCode) {
|
109
109
|
return this.countryCodeInput.items?.find(
|
110
|
-
(c) => c.getAttribute('data-
|
110
|
+
(c) => c.getAttribute('data-country-code') === countryDialCode
|
111
111
|
);
|
112
112
|
}
|
113
113
|
|
114
114
|
getCountryByCodeId(countryCode) {
|
115
|
-
return this.countryCodeInput.items?.find(
|
115
|
+
return this.countryCodeInput.items?.find(
|
116
|
+
(c) => c.getAttribute('data-country-code') === countryCode
|
117
|
+
);
|
116
118
|
}
|
117
119
|
|
118
120
|
updateCountryCodeItems(restrictCountries) {
|
@@ -6,9 +6,9 @@ export const getCountryFlag = (code) =>
|
|
6
6
|
export const comboBoxItem = ({ code, dialCode, name: country }) => `
|
7
7
|
<div
|
8
8
|
style="display:flex; flex-direction: column;"
|
9
|
-
data-id="${
|
9
|
+
data-id="${dialCode}"
|
10
10
|
data-name="${code} ${dialCode} ${country}"
|
11
|
-
data-
|
11
|
+
data-country-code="${code}"
|
12
12
|
>
|
13
13
|
<div>
|
14
14
|
<span>
|
@@ -116,7 +116,7 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
116
116
|
|
117
117
|
getCountryByDialCode(countryDialCode) {
|
118
118
|
return this.countryCodeInput.items?.find(
|
119
|
-
(c) => c.getAttribute('data-
|
119
|
+
(c) => c.getAttribute('data-country-code') === countryDialCode
|
120
120
|
);
|
121
121
|
}
|
122
122
|
|
package/src/index.cjs.js
CHANGED
@@ -27,5 +27,5 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
|
|
27
27
|
export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
|
28
28
|
export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
|
29
29
|
export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
|
30
|
-
export {
|
31
|
-
export {
|
30
|
+
export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
|
31
|
+
export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
|
package/src/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/src/index.js
CHANGED
@@ -22,8 +22,8 @@ export * from './components/phone-fields/descope-phone-input-box-field';
|
|
22
22
|
export * from './components/descope-new-password';
|
23
23
|
export * from './components/descope-recaptcha';
|
24
24
|
export * from './components/descope-upload-file';
|
25
|
-
export * from './components/descope-
|
26
|
-
export * from './components/descope-
|
25
|
+
export * from './components/descope-button-selection-group';
|
26
|
+
export * from './components/descope-button-selection-group/descope-button-selection-group-item';
|
27
27
|
|
28
28
|
export {
|
29
29
|
globalsThemeToStyle,
|
@@ -37,6 +37,8 @@ export const createStyleMixin =
|
|
37
37
|
|
38
38
|
#styleAttributes;
|
39
39
|
|
40
|
+
#getRootElement;
|
41
|
+
|
40
42
|
// we are using this mixin also for portalMixin
|
41
43
|
// so we should be able to inject styles to other DOM elements
|
42
44
|
// this is why we need to support these overrides
|
@@ -49,16 +51,12 @@ export const createStyleMixin =
|
|
49
51
|
super();
|
50
52
|
this.#componentNameSuffix = componentNameSuffix;
|
51
53
|
this.#themeSection = themeSection;
|
52
|
-
this.#rootElement = getRootElement?.(this) || this.shadowRoot;
|
53
54
|
this.#baseSelector = baseSelector ?? this.baseSelector;
|
55
|
+
this.#getRootElement = getRootElement;
|
54
56
|
|
55
57
|
this.#styleAttributes = Object.keys(mappings).map((key) =>
|
56
58
|
kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
|
57
59
|
);
|
58
|
-
|
59
|
-
this.#createMappingStyle();
|
60
|
-
this.#createComponentTheme();
|
61
|
-
this.#createOverridesStyle();
|
62
60
|
}
|
63
61
|
|
64
62
|
// eslint-disable-next-line class-methods-use-this
|
@@ -147,8 +145,14 @@ export const createStyleMixin =
|
|
147
145
|
init() {
|
148
146
|
super.init?.();
|
149
147
|
if (this.shadowRoot.isConnected) {
|
148
|
+
this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
|
149
|
+
|
150
150
|
this.#addClassName(componentName);
|
151
151
|
|
152
|
+
this.#createMappingStyle();
|
153
|
+
this.#createComponentTheme();
|
154
|
+
this.#createOverridesStyle();
|
155
|
+
|
152
156
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
153
157
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
|
154
158
|
}
|
@@ -34,123 +34,128 @@ const getNestedInput = (ele) => {
|
|
34
34
|
return undefined;
|
35
35
|
};
|
36
36
|
|
37
|
-
const proxyInputMixin =
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
37
|
+
const proxyInputMixin =
|
38
|
+
({ proxyProps = [] }) =>
|
39
|
+
(superclass) =>
|
40
|
+
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
41
|
+
static get observedAttributes() {
|
42
|
+
return [...(superclass.observedAttributes || []), ...errorAttrs];
|
43
|
+
}
|
44
44
|
|
45
|
-
|
45
|
+
#inputElement;
|
46
46
|
|
47
|
-
|
48
|
-
super();
|
47
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
49
48
|
|
50
|
-
|
51
|
-
|
49
|
+
constructor() {
|
50
|
+
super();
|
52
51
|
|
53
|
-
|
54
|
-
|
55
|
-
warnIfInputElementIsMissing() {
|
56
|
-
clearTimeout(this.inputElementTimerId);
|
52
|
+
this.#inputElement = super.inputElement;
|
53
|
+
}
|
57
54
|
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
}
|
55
|
+
// the web-component does not loaded immediately, so we want to defer the warning
|
56
|
+
// and show it only if the input element was not found after the component is loaded
|
57
|
+
warnIfInputElementIsMissing() {
|
58
|
+
clearTimeout(this.inputElementTimerId);
|
63
59
|
|
64
|
-
|
65
|
-
|
60
|
+
this.inputElementTimerId = setTimeout(() => {
|
61
|
+
// eslint-disable-next-line no-console
|
62
|
+
!this.#inputElement && console.warn(this.localName, 'no input was found');
|
63
|
+
}, 0);
|
64
|
+
}
|
66
65
|
|
67
|
-
|
66
|
+
get inputElement() {
|
67
|
+
if (this.#inputElement) return this.#inputElement;
|
68
68
|
|
69
|
-
|
70
|
-
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
69
|
+
this.warnIfInputElementIsMissing();
|
71
70
|
|
72
|
-
|
71
|
+
const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
|
72
|
+
const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
|
73
73
|
|
74
|
-
|
75
|
-
}
|
74
|
+
this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
|
76
75
|
|
77
|
-
|
78
|
-
|
79
|
-
}
|
76
|
+
return this.#inputElement;
|
77
|
+
}
|
80
78
|
|
81
|
-
|
82
|
-
|
83
|
-
|
79
|
+
set inputElement(ele) {
|
80
|
+
this.#inputElement = ele;
|
81
|
+
}
|
84
82
|
|
85
|
-
|
86
|
-
|
87
|
-
this.inputElement.setCustomValidity(this.validationMessage);
|
83
|
+
getValidity() {
|
84
|
+
return this.inputElement?.validity || {};
|
88
85
|
}
|
89
|
-
}
|
90
|
-
|
91
|
-
#handleErrorMessage() {
|
92
|
-
this.handleInternalInputErrorMessage();
|
93
|
-
this.setAttribute('error-message', this.validationMessage);
|
94
|
-
}
|
95
|
-
|
96
|
-
init() {
|
97
|
-
super.init?.();
|
98
|
-
|
99
|
-
// on some cases the base element is not ready so the inputElement is empty
|
100
|
-
// we are deferring this section to make sure the base element is ready
|
101
|
-
setTimeout(() => {
|
102
|
-
this.inputElement?.addEventListener('input', (e) => {
|
103
|
-
if (!this.inputElement.checkValidity()) {
|
104
|
-
this.inputElement.setCustomValidity('');
|
105
|
-
// after updating the input validity we want to trigger set validity on the wrapping element
|
106
|
-
// so we will get the updated validity
|
107
|
-
this.setCustomValidity('');
|
108
|
-
|
109
|
-
// Vaadin is getting the input event before us,
|
110
|
-
// so in order to make sure they use the updated validity
|
111
|
-
// we calling their fn after updating the input validity
|
112
|
-
this.baseElement.__onInput(e);
|
113
86
|
|
114
|
-
|
115
|
-
|
116
|
-
|
87
|
+
handleInternalInputErrorMessage() {
|
88
|
+
if (!this.inputElement.checkValidity()) {
|
89
|
+
this.inputElement.setCustomValidity(this.validationMessage);
|
90
|
+
}
|
91
|
+
}
|
117
92
|
|
118
|
-
|
119
|
-
|
120
|
-
|
93
|
+
#handleErrorMessage() {
|
94
|
+
this.handleInternalInputErrorMessage();
|
95
|
+
this.setAttribute('error-message', this.validationMessage);
|
96
|
+
}
|
121
97
|
|
122
|
-
|
123
|
-
|
124
|
-
|
98
|
+
init() {
|
99
|
+
super.init?.();
|
100
|
+
|
101
|
+
// on some cases the base element is not ready so the inputElement is empty
|
102
|
+
// we are deferring this section to make sure the base element is ready
|
103
|
+
setTimeout(() => {
|
104
|
+
this.inputElement?.addEventListener('input', (e) => {
|
105
|
+
if (!this.inputElement.checkValidity()) {
|
106
|
+
this.inputElement.setCustomValidity('');
|
107
|
+
// after updating the input validity we want to trigger set validity on the wrapping element
|
108
|
+
// so we will get the updated validity
|
109
|
+
this.setCustomValidity('');
|
110
|
+
|
111
|
+
// Vaadin is getting the input event before us,
|
112
|
+
// so in order to make sure they use the updated validity
|
113
|
+
// we calling their fn after updating the input validity
|
114
|
+
this.baseElement.__onInput(e);
|
115
|
+
|
116
|
+
this.#handleErrorMessage();
|
117
|
+
}
|
118
|
+
});
|
119
|
+
|
120
|
+
this.baseElement.addEventListener('change', () => {
|
121
|
+
this.#dispatchChange();
|
122
|
+
});
|
123
|
+
|
124
|
+
this.#inputElement.addEventListener('blur', () => {
|
125
|
+
if (!this.checkValidity()) {
|
126
|
+
this.setAttribute('invalid', 'true');
|
127
|
+
this.#handleErrorMessage();
|
128
|
+
}
|
129
|
+
});
|
130
|
+
|
131
|
+
this.addEventListener('invalid', () => {
|
132
|
+
if (!this.checkValidity()) {
|
133
|
+
this.setAttribute('invalid', 'true');
|
134
|
+
}
|
125
135
|
this.#handleErrorMessage();
|
126
|
-
}
|
127
|
-
});
|
136
|
+
});
|
128
137
|
|
129
|
-
|
130
|
-
if (!this.checkValidity()) {
|
131
|
-
this.setAttribute('invalid', 'true');
|
132
|
-
}
|
133
|
-
this.#handleErrorMessage();
|
134
|
-
});
|
138
|
+
this.handleInternalInputErrorMessage();
|
135
139
|
|
136
|
-
|
140
|
+
// sync properties
|
141
|
+
proxyProps.forEach((prop) => {
|
142
|
+
propertyObserver(this, this.inputElement, prop);
|
143
|
+
});
|
144
|
+
|
145
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
137
146
|
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
// to every proxy input mixin, to allow its css vars to be scoped properly and accessible
|
152
|
-
// in the proxy input component
|
153
|
-
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
|
154
|
-
);
|
147
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
148
|
+
});
|
149
|
+
}
|
150
|
+
};
|
151
|
+
|
152
|
+
const composedProxyInputMixin = (proxyInputMixinConfig) =>
|
153
|
+
compose(
|
154
|
+
proxyInputMixin(proxyInputMixinConfig),
|
155
|
+
// in order to use input-wrapper across all our input components, we need to inject its theme
|
156
|
+
// to every proxy input mixin, to allow its css vars to be scoped properly and accessible
|
157
|
+
// in the proxy input component
|
158
|
+
createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
|
159
|
+
);
|
155
160
|
|
156
161
|
export { composedProxyInputMixin as proxyInputMixin };
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import {
|
1
|
+
import { ButtonSelectionGroupClass } from '../../../components/descope-button-selection-group/ButtonSelectionGroupClass';
|
2
2
|
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
3
|
import globals from '../../globals';
|
4
4
|
import { refs } from '../inputWrapper';
|
5
5
|
|
6
6
|
const globalRefs = getThemeRefs(globals);
|
7
|
-
const vars =
|
7
|
+
const vars = ButtonSelectionGroupClass.cssVarList;
|
8
8
|
|
9
|
-
const
|
9
|
+
const buttonSelectionGroup = {
|
10
10
|
[vars.fontFamily]: refs.fontFamily,
|
11
11
|
[vars.labelTextColor]: refs.labelTextColor,
|
12
12
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
@@ -15,5 +15,5 @@ const singleSelect = {
|
|
15
15
|
[vars.hostWidth]: refs.width,
|
16
16
|
};
|
17
17
|
|
18
|
-
export default
|
18
|
+
export default buttonSelectionGroup;
|
19
19
|
export { vars };
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import {
|
1
|
+
import { ButtonSelectionGroupItemClass } from '../../../components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
|
2
2
|
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
3
|
import globals from '../../globals';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
6
|
|
7
|
-
export const vars =
|
7
|
+
export const vars = ButtonSelectionGroupItemClass.cssVarList;
|
8
8
|
|
9
|
-
const
|
9
|
+
const buttonSelectionGroupItem = {
|
10
10
|
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
11
11
|
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
12
12
|
[vars.borderColor]: globalRefs.colors.surface.main,
|
@@ -24,4 +24,4 @@ const selectItem = {
|
|
24
24
|
},
|
25
25
|
};
|
26
26
|
|
27
|
-
export default
|
27
|
+
export default buttonSelectionGroupItem;
|
@@ -35,12 +35,14 @@ export const comboBox = {
|
|
35
35
|
[vars.inputDropdownButtonCursor]: 'default',
|
36
36
|
},
|
37
37
|
|
38
|
-
|
39
|
-
[vars.
|
38
|
+
// Overlay theme exposed via the component:
|
39
|
+
[vars.overlayFontSize]: refs.fontSize,
|
40
|
+
[vars.overlayFontFamily]: refs.fontFamily,
|
41
|
+
[vars.overlayCursor]: 'pointer',
|
40
42
|
|
41
|
-
//
|
42
|
-
|
43
|
-
|
43
|
+
// Overlay direct theme:
|
44
|
+
[vars.overlay.minHeight]: '400px',
|
45
|
+
[vars.overlay.margin]: '0',
|
44
46
|
};
|
45
47
|
|
46
48
|
export default comboBox;
|
@@ -21,8 +21,8 @@ import * as phoneInputBoxField from './phoneInputBoxField';
|
|
21
21
|
import * as newPassword from './newPassword';
|
22
22
|
import * as inputWrapper from './inputWrapper';
|
23
23
|
import * as uploadFile from './uploadFile';
|
24
|
-
import * as
|
25
|
-
import * as
|
24
|
+
import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
|
25
|
+
import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
|
26
26
|
|
27
27
|
const components = {
|
28
28
|
button,
|
@@ -49,8 +49,8 @@ const components = {
|
|
49
49
|
newPassword,
|
50
50
|
inputWrapper,
|
51
51
|
uploadFile,
|
52
|
-
|
53
|
-
|
52
|
+
buttonSelectionGroupItem,
|
53
|
+
buttonSelectionGroup,
|
54
54
|
};
|
55
55
|
|
56
56
|
const theme = Object.keys(components).reduce(
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[8798],{6982:(t,e,s)=>{s.r(e),s.d(e,{SelectItemClass:()=>d});var o=s(1e3),n=s(3874),r=s(2061),i=s(4567),a=s(9690);const c=(0,i.iY)("select-item");class l extends((0,n.s)({componentName:c,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n descope-button {\n max-width: 100%;\n }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n max-width: 100%\n\t\t\t}\n\t\t</style>\n <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n <slot></slot>\n </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const d=(0,r.qC)((0,o.yk)({mappings:{backgroundColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.labelTextColor},borderColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderColor},borderStyle:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderStyle},borderRadius:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderRadius}}}),o.e4,o.Ae)(l);s(2018),customElements.define(c,d)}}]);
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7979],{7233:(e,t,s)=>{s.d(t,{S:()=>a,f:()=>r});var i=s(3878),n=s(4567),l=s(7878);const r=(0,n.iY)("single-select-internal");class a extends((0,i.P)({componentName:r,baseSelector:"slot"})){constructor(){super(),this.innerHTML='\n <style>\n slot {\n box-sizing: border-box;\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n }\n </style>\n <slot part="wrapper"></slot>\n\t\t'}#e=l.C.bind(this,"change");get items(){return this.querySelector("slot").assignedElements()}get isReadonly(){return"true"===this.getAttribute("readonly")}getSelectedNode(){return this.items.find((e=>e.hasAttribute("selected")))}get size(){return this.getAttribute("size")||"md"}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onNodeClick(e){this.isReadonly||(this.setSelected(e.target),this.#e())}setSelected(e){e!==this.getSelectedNode()&&(this.removeSelected(),e?.setAttribute("selected","true"))}get value(){return this.getSelectedNode()?.value}set value(e){const t=this.items.find((t=>t.value===e));this.setSelected(t)}get defaultValue(){return this.getAttribute("default-value")}setDefaultValue(){setTimeout((()=>{this.defaultValue&&(this.value=this.defaultValue,this.setCustomValidity())}))}onSizeChange(){this.items.forEach((e=>{e.setAttribute("size",this.size)}))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{"size"===e&&this.onSizeChange()}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0].focus()})),super.init?.(),this.setDefaultValue(),(0,n.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size"]}),(0,n.P$)(this,(({addedNodes:e})=>{e.forEach((e=>{e.addEventListener("click",this.onNodeClick.bind(this)),e.setAttribute("size",this.size)}))}))}}},2909:(e,t,s)=>{s.r(t),s.d(t,{SingleSelectInternalClass:()=>i.S});var i=s(7233);s(2018),customElements.define(i.f,i.S)}}]);
|