@descope/web-components-ui 1.0.290 → 1.0.291
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +961 -820
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1188 -920
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mapping-item-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js.js +1 -0
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +14 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +2 -2
- package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js +110 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/SamlGroupMappingsInternal.js +136 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js +3 -0
- package/src/components/mapping-fields/descope-saml-group-mappings/index.js +10 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/mixins/proxyInputMixin.js +7 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/mappingsField.js +3 -1
- package/src/theme/components/samlGroupMappings.js +13 -0
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
} from '../../../mixins';
|
8
8
|
import { TextClass } from '../../descope-text/TextClass';
|
9
9
|
import { compose } from '../../../helpers';
|
10
|
-
import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
|
10
|
+
import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
|
11
11
|
import { componentName as descopeInternalComponentName } from './descope-mappings-field-internal/MappingsFieldInternal';
|
12
12
|
|
13
13
|
export const componentName = getComponentName('mappings-field');
|
@@ -64,6 +64,10 @@ const customMixin = (superclass) =>
|
|
64
64
|
],
|
65
65
|
});
|
66
66
|
|
67
|
+
// This is required since when we remove the invalid attribute from the internal mappings field,
|
68
|
+
// we want to reflect the change in the parent component
|
69
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
70
|
+
|
67
71
|
this.setDefaultValues();
|
68
72
|
}
|
69
73
|
};
|
@@ -74,6 +78,7 @@ const {
|
|
74
78
|
errorMessage,
|
75
79
|
mappingItem,
|
76
80
|
labels,
|
81
|
+
labelsText,
|
77
82
|
valueLabel,
|
78
83
|
attrLabel,
|
79
84
|
separator,
|
@@ -84,6 +89,9 @@ const {
|
|
84
89
|
errorMessage: { selector: '::part(error-message)' },
|
85
90
|
mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
|
86
91
|
labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
|
92
|
+
labelsText: {
|
93
|
+
selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
|
94
|
+
},
|
87
95
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
88
96
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
89
97
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
@@ -99,6 +107,11 @@ export const MappingsFieldClass = compose(
|
|
99
107
|
fontSize: [{}, host, { ...separator, property: 'margin-top' }],
|
100
108
|
fontFamily: [helperText, errorMessage, labels],
|
101
109
|
separatorFontSize: { ...separator, property: 'font-size' },
|
110
|
+
labelsFontSize: { ...labelsText, property: 'font-size' },
|
111
|
+
labelsLineHeight: [
|
112
|
+
{ ...labelsText, property: 'line-height' },
|
113
|
+
{ ...labels, property: 'line-height' },
|
114
|
+
],
|
102
115
|
labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
|
103
116
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
104
117
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js
CHANGED
@@ -92,7 +92,7 @@ class MappingItem extends BaseInputClass {
|
|
92
92
|
|
93
93
|
initRemoveButton() {
|
94
94
|
this.removeButton.addEventListener('click', () =>
|
95
|
-
this.dispatchEvent(new CustomEvent('mapping-item-removed'))
|
95
|
+
this.dispatchEvent(new CustomEvent('mapping-item-removed', { bubbles: true, composed: true }))
|
96
96
|
);
|
97
97
|
}
|
98
98
|
|
@@ -66,7 +66,7 @@ class MappingsFieldInternal extends BaseInputClass {
|
|
66
66
|
// before the new item is added and thus returns a wrong result
|
67
67
|
setTimeout(() => {
|
68
68
|
this.setCustomValidity('');
|
69
|
-
newMappingItem.addEventListener('mapping-item-removed', (
|
69
|
+
newMappingItem.addEventListener('mapping-item-removed', () => {
|
70
70
|
// If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
|
71
71
|
if (newMappingItem === this.#errorItem) {
|
72
72
|
this.resetInvalidIndication();
|
@@ -74,8 +74,8 @@ class MappingsFieldInternal extends BaseInputClass {
|
|
74
74
|
}
|
75
75
|
newMappingItem.remove();
|
76
76
|
this.setCustomValidity('');
|
77
|
-
e.stopPropagation();
|
78
77
|
});
|
78
|
+
this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
|
79
79
|
if (focusNewItem) {
|
80
80
|
newMappingItem.focus();
|
81
81
|
}
|
@@ -0,0 +1,110 @@
|
|
1
|
+
import {
|
2
|
+
createStyleMixin,
|
3
|
+
draggableMixin,
|
4
|
+
createProxy,
|
5
|
+
proxyInputMixin,
|
6
|
+
componentNameValidationMixin,
|
7
|
+
} from '../../../mixins';
|
8
|
+
import { compose } from '../../../helpers';
|
9
|
+
import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
|
10
|
+
import { componentName as descopeInternalComponentName } from './descope-saml-group-mappings-internal/SamlGroupMappingsInternal';
|
11
|
+
|
12
|
+
export const componentName = getComponentName('saml-group-mappings');
|
13
|
+
|
14
|
+
const customMixin = (superclass) =>
|
15
|
+
class SamlGroupMappingsMixinClass extends superclass {
|
16
|
+
init() {
|
17
|
+
super.init?.();
|
18
|
+
|
19
|
+
const template = document.createElement('template');
|
20
|
+
|
21
|
+
template.innerHTML = `
|
22
|
+
<${descopeInternalComponentName}
|
23
|
+
tabindex="-1"
|
24
|
+
></${descopeInternalComponentName}>
|
25
|
+
`;
|
26
|
+
|
27
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
28
|
+
|
29
|
+
this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
|
30
|
+
|
31
|
+
forwardAttrs(this, this.inputElement, {
|
32
|
+
includeAttrs: [
|
33
|
+
'size',
|
34
|
+
'full-width',
|
35
|
+
'label-group',
|
36
|
+
'label-value',
|
37
|
+
'label-attr',
|
38
|
+
'button-label',
|
39
|
+
'separator',
|
40
|
+
'options',
|
41
|
+
'readonly',
|
42
|
+
'disabled',
|
43
|
+
],
|
44
|
+
});
|
45
|
+
|
46
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
|
47
|
+
}
|
48
|
+
};
|
49
|
+
|
50
|
+
const { host, groupInput } = {
|
51
|
+
host: { selector: () => ':host' },
|
52
|
+
groupInput: { selector: 'descope-text-field' },
|
53
|
+
};
|
54
|
+
|
55
|
+
export const SamlGroupMappingsClass = compose(
|
56
|
+
createStyleMixin({
|
57
|
+
mappings: {
|
58
|
+
hostWidth: { ...host, property: 'width' },
|
59
|
+
hostDirection: { ...host, property: 'direction' },
|
60
|
+
groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
|
61
|
+
},
|
62
|
+
}),
|
63
|
+
draggableMixin,
|
64
|
+
proxyInputMixin({
|
65
|
+
proxyProps: ['value', 'selectionStart'],
|
66
|
+
inputEvent: 'input',
|
67
|
+
triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
|
68
|
+
proxyParentValidation: true,
|
69
|
+
}),
|
70
|
+
componentNameValidationMixin,
|
71
|
+
customMixin
|
72
|
+
)(
|
73
|
+
createProxy({
|
74
|
+
slots: [],
|
75
|
+
wrappedEleName: 'vaadin-custom-field',
|
76
|
+
style: () => `
|
77
|
+
:host {
|
78
|
+
display: inline-flex;
|
79
|
+
max-width: 100%;
|
80
|
+
direction: ltr;
|
81
|
+
}
|
82
|
+
|
83
|
+
vaadin-custom-field {
|
84
|
+
line-height: unset;
|
85
|
+
width: 100%;
|
86
|
+
}
|
87
|
+
|
88
|
+
descope-text-field {
|
89
|
+
width: auto;
|
90
|
+
}
|
91
|
+
|
92
|
+
descope-mappings-field {
|
93
|
+
display: block;
|
94
|
+
}
|
95
|
+
`,
|
96
|
+
excludeAttrsSync: [
|
97
|
+
'tabindex',
|
98
|
+
'label-group',
|
99
|
+
'label-value',
|
100
|
+
'label-attr',
|
101
|
+
'button-label',
|
102
|
+
'separator',
|
103
|
+
'options',
|
104
|
+
'error-message',
|
105
|
+
],
|
106
|
+
componentName,
|
107
|
+
})
|
108
|
+
);
|
109
|
+
|
110
|
+
export default SamlGroupMappingsClass;
|
@@ -0,0 +1,136 @@
|
|
1
|
+
import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
|
2
|
+
import {
|
3
|
+
getComponentName,
|
4
|
+
forwardAttrs,
|
5
|
+
observeAttributes,
|
6
|
+
} from '../../../../helpers/componentHelpers';
|
7
|
+
|
8
|
+
export const componentName = getComponentName('saml-group-mappings-internal');
|
9
|
+
|
10
|
+
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: '' });
|
11
|
+
|
12
|
+
class SamlGroupMappingsInternal extends BaseInputClass {
|
13
|
+
static get observedAttributes() {
|
14
|
+
return ['invalid'].concat(BaseInputClass.observedAttributes || []);
|
15
|
+
}
|
16
|
+
|
17
|
+
constructor() {
|
18
|
+
super();
|
19
|
+
|
20
|
+
this.innerHTML = `
|
21
|
+
<descope-text-field variant="body2" bordered="true"></descope-text-field>
|
22
|
+
<descope-mappings-field></descope-mappings-field>
|
23
|
+
`;
|
24
|
+
|
25
|
+
this.groupInputElement = this.querySelector('descope-text-field');
|
26
|
+
this.mappingsElement = this.querySelector('descope-mappings-field');
|
27
|
+
}
|
28
|
+
|
29
|
+
resetInvalidIndication() {
|
30
|
+
this.removeAttribute('invalid');
|
31
|
+
}
|
32
|
+
|
33
|
+
handleMappingsInvalidChange(changedAttributes) {
|
34
|
+
if (changedAttributes.includes('invalid')) {
|
35
|
+
if (!this.mappingsElement.hasAttribute('invalid')) {
|
36
|
+
this.resetInvalidIndication();
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
initFocusHandler() {
|
42
|
+
// This event listener needs to be placed before the super.init() call
|
43
|
+
this.addEventListener('focus', (e) => {
|
44
|
+
// we want to ignore focus events we are dispatching
|
45
|
+
if (e.isTrusted) {
|
46
|
+
const focusedElement = this.mappingsElement.checkValidity()
|
47
|
+
? this.groupInputElement
|
48
|
+
: this.mappingsElement;
|
49
|
+
focusedElement.focus();
|
50
|
+
}
|
51
|
+
});
|
52
|
+
}
|
53
|
+
|
54
|
+
init() {
|
55
|
+
// This needs to be placed before the super.init() call to work
|
56
|
+
this.initFocusHandler();
|
57
|
+
|
58
|
+
super.init?.();
|
59
|
+
|
60
|
+
forwardAttrs(this, this.groupInputElement, {
|
61
|
+
mapAttrs: { 'label-group': 'label' },
|
62
|
+
includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
|
63
|
+
});
|
64
|
+
|
65
|
+
forwardAttrs(this, this.mappingsElement, {
|
66
|
+
includeAttrs: [
|
67
|
+
'size',
|
68
|
+
'full-width',
|
69
|
+
'label-value',
|
70
|
+
'label-attr',
|
71
|
+
'button-label',
|
72
|
+
'separator',
|
73
|
+
'options',
|
74
|
+
'readonly',
|
75
|
+
'disabled',
|
76
|
+
'data-errormessage-pattern-mismatch',
|
77
|
+
],
|
78
|
+
});
|
79
|
+
|
80
|
+
// Observing the invalid attribute of the mappings field to reset the invalid state for this component.
|
81
|
+
// When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
|
82
|
+
// level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
|
83
|
+
observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
|
84
|
+
includeAttrs: ['invalid'],
|
85
|
+
});
|
86
|
+
}
|
87
|
+
|
88
|
+
get value() {
|
89
|
+
return {
|
90
|
+
group: this.groupInputElement.value,
|
91
|
+
mappings: this.mappingsElement.value,
|
92
|
+
};
|
93
|
+
}
|
94
|
+
|
95
|
+
set value(value) {
|
96
|
+
if (value?.group && typeof value.group === 'string') {
|
97
|
+
this.groupInputElement.value = value.group;
|
98
|
+
}
|
99
|
+
if (Array.isArray(value?.mappings)) {
|
100
|
+
this.mappingsElement.value = value.mappings;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
getValidity() {
|
105
|
+
if (!this.groupInputElement.checkValidity()) {
|
106
|
+
return this.groupInputElement.validity;
|
107
|
+
}
|
108
|
+
if (!this.mappingsElement.checkValidity()) {
|
109
|
+
return this.mappingsElement.validity;
|
110
|
+
}
|
111
|
+
|
112
|
+
return {};
|
113
|
+
}
|
114
|
+
|
115
|
+
#handleInvalidState(isInvalid) {
|
116
|
+
if (isInvalid) {
|
117
|
+
if (!this.groupInputElement.checkValidity()) {
|
118
|
+
this.groupInputElement.setAttribute('invalid', 'true');
|
119
|
+
return;
|
120
|
+
}
|
121
|
+
|
122
|
+
if (!this.mappingsElement.checkValidity()) {
|
123
|
+
this.mappingsElement.setAttribute('invalid', 'true');
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
|
128
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
129
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
130
|
+
if (attrName === 'invalid') {
|
131
|
+
this.#handleInvalidState(newValue === 'true');
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
export default SamlGroupMappingsInternal;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import '@vaadin/custom-field';
|
2
|
+
|
3
|
+
import { componentName, SamlGroupMappingsClass } from './SamlGroupMappingsClass';
|
4
|
+
import '../../descope-text-field';
|
5
|
+
import '../descope-mappings-field';
|
6
|
+
import './descope-saml-group-mappings-internal';
|
7
|
+
|
8
|
+
customElements.define(componentName, SamlGroupMappingsClass);
|
9
|
+
|
10
|
+
export { SamlGroupMappingsClass };
|
package/src/index.cjs.js
CHANGED
@@ -40,3 +40,4 @@ export { MultiSelectComboBoxClass } from './components/descope-multi-select-comb
|
|
40
40
|
export { AvatarClass } from './components/descope-avatar/AvatarClass';
|
41
41
|
export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
|
42
42
|
export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
|
43
|
+
export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
|
package/src/index.d.ts
CHANGED
@@ -43,6 +43,7 @@ export { NotificationClass } from './components/descope-notification/';
|
|
43
43
|
export { BadgeClass } from './components/descope-badge/';
|
44
44
|
export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/';
|
45
45
|
export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
|
46
|
+
export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/';
|
46
47
|
|
47
48
|
export type Theme = {
|
48
49
|
globals: {
|
package/src/index.js
CHANGED
@@ -34,6 +34,7 @@ export * from './components/descope-notification';
|
|
34
34
|
export * from './components/descope-avatar';
|
35
35
|
export * from './components/mapping-fields/descope-mappings-field';
|
36
36
|
export * from './components/descope-user-attribute';
|
37
|
+
export * from './components/mapping-fields/descope-saml-group-mappings';
|
37
38
|
|
38
39
|
export {
|
39
40
|
globalsThemeToStyle,
|
@@ -40,6 +40,7 @@ const proxyInputMixin =
|
|
40
40
|
// allows us to set the event that should trigger validation
|
41
41
|
// it can be either a string or an array of strings (for multiple events)
|
42
42
|
inputEvent = 'input',
|
43
|
+
triggerValidationEvents = [],
|
43
44
|
// Proxies all validations from the parent component to the input element
|
44
45
|
proxyParentValidation = false,
|
45
46
|
}) =>
|
@@ -128,6 +129,12 @@ const proxyInputMixin =
|
|
128
129
|
}
|
129
130
|
};
|
130
131
|
|
132
|
+
triggerValidationEvents.forEach((e) => {
|
133
|
+
this.baseElement?.addEventListener(e, () => {
|
134
|
+
this.inputElement?.setCustomValidity('');
|
135
|
+
});
|
136
|
+
});
|
137
|
+
|
131
138
|
// on some cases the base element is not ready so the inputElement is empty
|
132
139
|
// we are deferring this section to make sure the base element is ready
|
133
140
|
setTimeout(() => {
|
@@ -33,6 +33,7 @@ import * as badge from './badge';
|
|
33
33
|
import * as avatar from './avatar';
|
34
34
|
import * as mappingsField from './mappingsField';
|
35
35
|
import * as userAttribute from './userAttribute';
|
36
|
+
import * as samlGroupMappings from './samlGroupMappings';
|
36
37
|
|
37
38
|
const components = {
|
38
39
|
button,
|
@@ -71,6 +72,7 @@ const components = {
|
|
71
72
|
avatar,
|
72
73
|
mappingsField,
|
73
74
|
userAttribute,
|
75
|
+
samlGroupMappings,
|
74
76
|
};
|
75
77
|
|
76
78
|
const theme = Object.keys(components).reduce(
|
@@ -13,13 +13,15 @@ export const mappingsField = {
|
|
13
13
|
[vars.fontSize]: refs.fontSize,
|
14
14
|
[vars.fontFamily]: refs.fontFamily,
|
15
15
|
[vars.separatorFontSize]: '14px',
|
16
|
+
[vars.labelsFontSize]: '14px',
|
17
|
+
[vars.labelsLineHeight]: '1',
|
18
|
+
[vars.labelsMarginBottom]: '6px',
|
16
19
|
[vars.labelTextColor]: refs.labelTextColor,
|
17
20
|
[vars.itemMarginBottom]: '1em',
|
18
21
|
// To be positioned correctly, the min width has to match the text field min width
|
19
22
|
[vars.valueLabelMinWidth]: refs.minWidth,
|
20
23
|
// To be positioned correctly, the min width has to match the combo box field min width
|
21
24
|
[vars.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
|
22
|
-
[vars.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
|
23
25
|
[vars.separatorWidth]: '70px',
|
24
26
|
[vars.removeButtonWidth]: '60px',
|
25
27
|
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { SamlGroupMappingsClass } from '../../components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
|
2
|
+
import { refs } from './inputWrapper';
|
3
|
+
|
4
|
+
const vars = SamlGroupMappingsClass.cssVarList;
|
5
|
+
|
6
|
+
export const samlGroupMappings = {
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.hostDirection]: refs.direction,
|
9
|
+
[vars.groupNameInputMarginBottom]: '1em',
|
10
|
+
};
|
11
|
+
|
12
|
+
export default samlGroupMappings;
|
13
|
+
export { vars };
|