@descope/web-components-ui 1.0.318 → 1.0.320
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1334 -1010
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1390 -1064
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1438.js +1 -1
- package/dist/umd/2362.js +1 -1
- package/dist/umd/3830.js +1 -1
- package/dist/umd/4028.js +1 -1
- package/dist/umd/5135.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/602.js +170 -0
- package/dist/umd/{1621.js.LICENSE.txt → 602.js.LICENSE.txt} +0 -6
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7056.js +2 -2
- package/dist/umd/7284.js +303 -0
- package/dist/umd/7284.js.LICENSE.txt +11 -0
- package/dist/umd/8137.js +452 -0
- package/dist/umd/8137.js.LICENSE.txt +17 -0
- package/dist/umd/8191.js +4 -4
- package/dist/umd/9092.js +2 -2
- package/dist/umd/DescopeDev.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-email-field-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -0
- 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-input-box-field-descope-phone-input-box-internal-index-js.js +1 -1
- package/package.json +3 -2
- package/src/components/descope-radio-group/RadioButtonClass.js +74 -0
- package/src/components/descope-radio-group/RadioGroupClass.js +192 -0
- package/src/components/descope-radio-group/index.js +8 -0
- package/src/index.cjs.js +2 -0
- package/src/index.js +1 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/radioGroup/radioButton.js +42 -0
- package/src/theme/components/radioGroup/radioGroup.js +37 -0
- package/dist/umd/1621.js +0 -620
@@ -0,0 +1,74 @@
|
|
1
|
+
import { compose } from '../../helpers';
|
2
|
+
import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
|
3
|
+
import {
|
4
|
+
componentNameValidationMixin,
|
5
|
+
createProxy,
|
6
|
+
createStyleMixin,
|
7
|
+
proxyInputMixin,
|
8
|
+
} from '../../mixins';
|
9
|
+
|
10
|
+
export const componentName = getComponentName('radio-button');
|
11
|
+
|
12
|
+
const customMixin = (superclass) =>
|
13
|
+
class CustomMixin extends superclass {
|
14
|
+
constructor() {
|
15
|
+
super();
|
16
|
+
|
17
|
+
this.baseElement.checkValidity = () => {};
|
18
|
+
}
|
19
|
+
|
20
|
+
init() {
|
21
|
+
// we are forwarding vaadin checked-changed event
|
22
|
+
this.baseElement.addEventListener('checked-changed', (e) => {
|
23
|
+
this.dispatchEvent(
|
24
|
+
new CustomEvent(
|
25
|
+
'checked-changed',
|
26
|
+
{ detail: e.detail },
|
27
|
+
{ bubbles: true, composed: true }
|
28
|
+
)
|
29
|
+
);
|
30
|
+
});
|
31
|
+
|
32
|
+
super.init?.();
|
33
|
+
|
34
|
+
observeChildren(this, this.renderLabel.bind(this));
|
35
|
+
}
|
36
|
+
|
37
|
+
renderLabel() {
|
38
|
+
this.baseElement.setAttribute('label', this.textContent);
|
39
|
+
}
|
40
|
+
|
41
|
+
get value() {
|
42
|
+
return this.getAttribute('value');
|
43
|
+
}
|
44
|
+
};
|
45
|
+
|
46
|
+
export const RadioButtonClass = compose(
|
47
|
+
createStyleMixin({
|
48
|
+
mappings: {
|
49
|
+
cursor: [{}, { selector: 'label' }],
|
50
|
+
fontSize: [{ selector: 'label' }, {}],
|
51
|
+
labelTextColor: { selector: 'label', property: 'color' },
|
52
|
+
fontFamily: { selector: 'label' },
|
53
|
+
radioSize: [
|
54
|
+
{ selector: '::part(radio)', property: 'height' },
|
55
|
+
{ selector: '::part(radio)', property: 'width' },
|
56
|
+
],
|
57
|
+
radioBackgroundColor: { selector: '::part(radio)', property: 'background-color' },
|
58
|
+
radioMargin: { selector: '::part(radio)', property: 'margin' },
|
59
|
+
radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
|
60
|
+
radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
|
61
|
+
},
|
62
|
+
}),
|
63
|
+
proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
64
|
+
componentNameValidationMixin,
|
65
|
+
customMixin
|
66
|
+
)(
|
67
|
+
createProxy({
|
68
|
+
slots: [''],
|
69
|
+
wrappedEleName: 'vaadin-radio-button',
|
70
|
+
excludeAttrsSync: ['tabindex', 'data'],
|
71
|
+
includeForwardProps: ['checked', 'name', 'disabled'],
|
72
|
+
componentName,
|
73
|
+
})
|
74
|
+
);
|
@@ -0,0 +1,192 @@
|
|
1
|
+
import { compose } from '../../helpers';
|
2
|
+
import {
|
3
|
+
forwardAttrs,
|
4
|
+
getComponentName,
|
5
|
+
observeAttributes,
|
6
|
+
observeChildren,
|
7
|
+
} from '../../helpers/componentHelpers';
|
8
|
+
import { resetInputLabelPosition } from '../../helpers/themeHelpers/resetHelpers';
|
9
|
+
import {
|
10
|
+
componentNameValidationMixin,
|
11
|
+
createProxy,
|
12
|
+
createStyleMixin,
|
13
|
+
draggableMixin,
|
14
|
+
proxyInputMixin,
|
15
|
+
} from '../../mixins';
|
16
|
+
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
17
|
+
import { componentName as childNodeName, RadioButtonClass } from './RadioButtonClass';
|
18
|
+
|
19
|
+
export const componentName = getComponentName('radio-group');
|
20
|
+
|
21
|
+
const RadioGroupMixin = (superclass) =>
|
22
|
+
class RadioGroupMixinClass extends superclass {
|
23
|
+
// eslint-disable-next-line class-methods-use-this
|
24
|
+
#renderItem = ({ value, label }) =>
|
25
|
+
`<descope-radio-button value="${value}">${label}</descope-radio-button>`;
|
26
|
+
|
27
|
+
#data;
|
28
|
+
|
29
|
+
constructor() {
|
30
|
+
super();
|
31
|
+
|
32
|
+
// we are overriding vaadin children getter so it will run on our custom elements
|
33
|
+
Object.defineProperty(this.baseElement, 'children', {
|
34
|
+
get: () => this.querySelectorAll(childNodeName),
|
35
|
+
});
|
36
|
+
|
37
|
+
// we are overriding vaadin __filterRadioButtons so it will run on our custom elements
|
38
|
+
this.baseElement.__filterRadioButtons = (nodes) => {
|
39
|
+
return nodes.filter((node) => node.localName === childNodeName);
|
40
|
+
};
|
41
|
+
|
42
|
+
// vaadin radio group missing some input properties
|
43
|
+
this.baseElement.setCustomValidity = () => {};
|
44
|
+
}
|
45
|
+
|
46
|
+
get items() {
|
47
|
+
return this.shadowRoot.querySelector('slot').assignedElements();
|
48
|
+
}
|
49
|
+
|
50
|
+
get size() {
|
51
|
+
return this.getAttribute('size');
|
52
|
+
}
|
53
|
+
|
54
|
+
get data() {
|
55
|
+
if (this.#data) return this.#data;
|
56
|
+
|
57
|
+
const dataAttr = this.getAttribute('data');
|
58
|
+
|
59
|
+
if (dataAttr) {
|
60
|
+
try {
|
61
|
+
const data = JSON.parse(dataAttr);
|
62
|
+
if (this.isValidDataType(data)) {
|
63
|
+
return data;
|
64
|
+
}
|
65
|
+
} catch (e) {
|
66
|
+
// eslint-disable-next-line no-console
|
67
|
+
console.error('could not parse data string from attribute "data" - ', e.message);
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
return [];
|
72
|
+
}
|
73
|
+
|
74
|
+
set data(data) {
|
75
|
+
if (this.isValidDataType(data)) {
|
76
|
+
this.#data = data;
|
77
|
+
this.renderItems();
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
get defaultValue() {
|
82
|
+
return this.getAttribute('default-value');
|
83
|
+
}
|
84
|
+
|
85
|
+
// eslint-disable-next-line class-methods-use-this
|
86
|
+
isValidDataType(data) {
|
87
|
+
const isValid = Array.isArray(data);
|
88
|
+
if (!isValid) {
|
89
|
+
// eslint-disable-next-line no-console
|
90
|
+
console.error('data must be an array, received:', data);
|
91
|
+
}
|
92
|
+
|
93
|
+
return isValid;
|
94
|
+
}
|
95
|
+
|
96
|
+
getItemsTemplate() {
|
97
|
+
return this.data?.reduce?.((acc, item) => acc + (this.#renderItem?.(item || {}) || ''), '');
|
98
|
+
}
|
99
|
+
|
100
|
+
renderItems() {
|
101
|
+
const template = this.getItemsTemplate();
|
102
|
+
if (template) this.innerHTML = template;
|
103
|
+
}
|
104
|
+
|
105
|
+
init() {
|
106
|
+
super.init?.();
|
107
|
+
|
108
|
+
this.inputElement = this.baseElement;
|
109
|
+
|
110
|
+
this.renderItems();
|
111
|
+
|
112
|
+
observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
|
113
|
+
|
114
|
+
Object.defineProperty(this.baseElement, 'validity', {
|
115
|
+
get: () => {
|
116
|
+
return { valueMissing: !this.baseElement.checkValidity() };
|
117
|
+
},
|
118
|
+
});
|
119
|
+
|
120
|
+
forwardAttrs(this, this.baseElement, {
|
121
|
+
includeAttrs: ['layout'],
|
122
|
+
mapAttrs: { layout: 'theme' },
|
123
|
+
});
|
124
|
+
|
125
|
+
setTimeout(() => {
|
126
|
+
if (this.defaultValue) {
|
127
|
+
this.value = this.defaultValue;
|
128
|
+
}
|
129
|
+
});
|
130
|
+
|
131
|
+
// we want new items to get the size
|
132
|
+
observeChildren(this, ({ addedNodes }) => {
|
133
|
+
addedNodes.forEach((node) => {
|
134
|
+
node.setAttribute('size', this.size);
|
135
|
+
});
|
136
|
+
});
|
137
|
+
|
138
|
+
observeAttributes(
|
139
|
+
this,
|
140
|
+
() => {
|
141
|
+
this.items.forEach((item) => {
|
142
|
+
item.setAttribute('size', this.size);
|
143
|
+
});
|
144
|
+
},
|
145
|
+
{
|
146
|
+
includeAttrs: ['size'],
|
147
|
+
}
|
148
|
+
);
|
149
|
+
}
|
150
|
+
};
|
151
|
+
|
152
|
+
export const RadioGroupClass = compose(
|
153
|
+
createStyleMixin({
|
154
|
+
mappings: {
|
155
|
+
...textFieldMappings,
|
156
|
+
buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
|
157
|
+
buttonsRowGap: { selector: '::part(group-field)', property: 'row-gap' },
|
158
|
+
buttonsColumnGap: { selector: '::part(group-field)', property: 'column-gap' },
|
159
|
+
itemsLabelColor: {
|
160
|
+
selector: () => `::slotted(${RadioButtonClass.componentName})`,
|
161
|
+
property: RadioButtonClass.cssVarList.labelTextColor,
|
162
|
+
},
|
163
|
+
},
|
164
|
+
}),
|
165
|
+
draggableMixin,
|
166
|
+
proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
167
|
+
componentNameValidationMixin,
|
168
|
+
RadioGroupMixin
|
169
|
+
)(
|
170
|
+
createProxy({
|
171
|
+
slots: ['', 'prefix'],
|
172
|
+
wrappedEleName: 'vaadin-radio-group',
|
173
|
+
style: () => `
|
174
|
+
:host {
|
175
|
+
display: inline-block;
|
176
|
+
max-width: 100%;
|
177
|
+
box-sizing: border-box;
|
178
|
+
}
|
179
|
+
|
180
|
+
vaadin-radio-group {
|
181
|
+
padding: 0;
|
182
|
+
width: 100%;
|
183
|
+
}
|
184
|
+
|
185
|
+
${resetInputLabelPosition('vaadin-radio-group')}
|
186
|
+
`,
|
187
|
+
|
188
|
+
excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
|
189
|
+
componentName,
|
190
|
+
includeForwardProps: ['value'],
|
191
|
+
})
|
192
|
+
);
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { componentName as groupComponentName, RadioGroupClass } from './RadioGroupClass';
|
2
|
+
import { componentName as buttonComponentName, RadioButtonClass } from './RadioButtonClass';
|
3
|
+
import '@vaadin/radio-group';
|
4
|
+
|
5
|
+
customElements.define(groupComponentName, RadioGroupClass);
|
6
|
+
customElements.define(buttonComponentName, RadioButtonClass);
|
7
|
+
|
8
|
+
export { RadioGroupClass };
|
package/src/index.cjs.js
CHANGED
@@ -45,3 +45,5 @@ export { MappingsFieldClass } from './components/mapping-fields/descope-mappings
|
|
45
45
|
export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
|
46
46
|
export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';
|
47
47
|
export { CodeSnippetClass } from './components/descope-code-snippet/CodeSnippetClass';
|
48
|
+
export { RadioGroupClass } from './components/descope-radio-group/RadioGroupClass';
|
49
|
+
export { RadioButtonClass } from './components/descope-radio-group/RadioButtonClass';
|
package/src/index.js
CHANGED
@@ -40,6 +40,7 @@ export * from './components/descope-user-auth-method';
|
|
40
40
|
export * from './components/mapping-fields/descope-saml-group-mappings';
|
41
41
|
export * from './components/descope-policy-validation';
|
42
42
|
export * from './components/descope-code-snippet';
|
43
|
+
export * from './components/descope-radio-group';
|
43
44
|
|
44
45
|
export {
|
45
46
|
globalsThemeToStyle,
|
@@ -39,6 +39,8 @@ import * as samlGroupMappings from './samlGroupMappings';
|
|
39
39
|
import * as policyValidation from './policyValidation';
|
40
40
|
import * as icon from './icon';
|
41
41
|
import * as codeSnippet from './codeSnippet';
|
42
|
+
import * as radioGroup from './radioGroup/radioGroup';
|
43
|
+
import * as radioButton from './radioGroup/radioButton';
|
42
44
|
|
43
45
|
const components = {
|
44
46
|
button,
|
@@ -83,6 +85,8 @@ const components = {
|
|
83
85
|
policyValidation,
|
84
86
|
icon,
|
85
87
|
codeSnippet,
|
88
|
+
radioGroup,
|
89
|
+
radioButton,
|
86
90
|
};
|
87
91
|
|
88
92
|
const theme = Object.keys(components).reduce(
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { RadioButtonClass } from '../../../components/descope-radio-group/RadioButtonClass';
|
2
|
+
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
|
+
import globals from '../../globals';
|
4
|
+
import { refs } from '../inputWrapper';
|
5
|
+
|
6
|
+
const vars = RadioButtonClass.cssVarList;
|
7
|
+
const globalRefs = getThemeRefs(globals);
|
8
|
+
|
9
|
+
export const radioButton = {
|
10
|
+
[vars.fontFamily]: refs.fontFamily,
|
11
|
+
[vars.radioSize]: 'calc(1em + 6px)',
|
12
|
+
[vars.radioMargin]: 'auto 4px',
|
13
|
+
[vars.radioCheckedSize]: `calc(var(${vars.radioSize})/5)`,
|
14
|
+
[vars.radioCheckedColor]: globalRefs.colors.surface.light,
|
15
|
+
[vars.radioBackgroundColor]: globalRefs.colors.surface.light,
|
16
|
+
|
17
|
+
_checked: {
|
18
|
+
[vars.radioBackgroundColor]: globalRefs.colors.surface.contrast,
|
19
|
+
},
|
20
|
+
|
21
|
+
_hover: {
|
22
|
+
cursor: 'pointer',
|
23
|
+
},
|
24
|
+
|
25
|
+
size: {
|
26
|
+
xs: {
|
27
|
+
[vars.fontSize]: '12px',
|
28
|
+
},
|
29
|
+
sm: {
|
30
|
+
[vars.fontSize]: '14px',
|
31
|
+
},
|
32
|
+
md: {
|
33
|
+
[vars.fontSize]: '16px',
|
34
|
+
},
|
35
|
+
lg: {
|
36
|
+
[vars.fontSize]: '18px',
|
37
|
+
},
|
38
|
+
},
|
39
|
+
};
|
40
|
+
|
41
|
+
export default radioButton;
|
42
|
+
export { vars };
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import { RadioGroupClass } from '../../../components/descope-radio-group/RadioGroupClass';
|
2
|
+
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
|
+
import globals from '../../globals';
|
4
|
+
import { refs } from '../inputWrapper';
|
5
|
+
|
6
|
+
const vars = RadioGroupClass.cssVarList;
|
7
|
+
const globalRefs = getThemeRefs(globals);
|
8
|
+
|
9
|
+
export const radioGroup = {
|
10
|
+
[vars.buttonsRowGap]: '9px',
|
11
|
+
[vars.hostWidth]: refs.width,
|
12
|
+
[vars.hostDirection]: refs.direction,
|
13
|
+
[vars.fontSize]: refs.fontSize,
|
14
|
+
[vars.fontFamily]: refs.fontFamily,
|
15
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
16
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
17
|
+
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
18
|
+
[vars.helperTextColor]: refs.helperTextColor,
|
19
|
+
[vars.itemsLabelColor]: globalRefs.colors.surface.contrast,
|
20
|
+
|
21
|
+
textAlign: {
|
22
|
+
right: { [vars.inputTextAlign]: 'right' },
|
23
|
+
left: { [vars.inputTextAlign]: 'left' },
|
24
|
+
center: { [vars.inputTextAlign]: 'center' },
|
25
|
+
},
|
26
|
+
|
27
|
+
_fullWidth: {
|
28
|
+
[vars.buttonsSpacing]: 'space-between',
|
29
|
+
},
|
30
|
+
|
31
|
+
_disabled: {
|
32
|
+
[vars.itemsLabelColor]: globalRefs.colors.surface.light,
|
33
|
+
},
|
34
|
+
};
|
35
|
+
|
36
|
+
export default radioGroup;
|
37
|
+
export { vars };
|