@descope/web-components-ui 1.0.286 → 1.0.287
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +21 -8
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +33 -11
- package/dist/index.esm.js.map +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 +3 -3
- package/package.json +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +18 -8
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +17 -4
- package/src/theme/components/mappingsField.js +3 -0
package/dist/index.esm.js
CHANGED
@@ -8719,7 +8719,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8719
8719
|
return this.getAttribute('options') || [];
|
8720
8720
|
}
|
8721
8721
|
|
8722
|
-
addNewMappingItem() {
|
8722
|
+
addNewMappingItem(focusNewItem) {
|
8723
8723
|
const newMappingItem = document.createElement('descope-mapping-item');
|
8724
8724
|
newMappingItem.setAttribute('bordered', 'true');
|
8725
8725
|
this.mappingsContainerEle.appendChild(newMappingItem);
|
@@ -8740,6 +8740,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8740
8740
|
this.setCustomValidity('');
|
8741
8741
|
e.stopPropagation();
|
8742
8742
|
});
|
8743
|
+
if (focusNewItem) {
|
8744
|
+
newMappingItem.focus();
|
8745
|
+
}
|
8743
8746
|
}, 0);
|
8744
8747
|
return newMappingItem;
|
8745
8748
|
}
|
@@ -8784,7 +8787,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8784
8787
|
mappingItem.value = mapping;
|
8785
8788
|
} else {
|
8786
8789
|
// Add new item
|
8787
|
-
const newMappingItem = this.addNewMappingItem();
|
8790
|
+
const newMappingItem = this.addNewMappingItem(false);
|
8788
8791
|
// Setting the new item value needs to be done with the timeout,
|
8789
8792
|
// otherwise the value is not set correctly
|
8790
8793
|
setTimeout(() => {
|
@@ -8824,13 +8827,17 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8824
8827
|
`;
|
8825
8828
|
const button = this.querySelector('descope-button');
|
8826
8829
|
button.onclick = () => {
|
8827
|
-
this.addNewMappingItem();
|
8830
|
+
this.addNewMappingItem(true);
|
8828
8831
|
};
|
8829
8832
|
forwardAttrs(this, button, {
|
8830
8833
|
includeAttrs: ['disabled'],
|
8831
8834
|
});
|
8832
8835
|
}
|
8833
8836
|
|
8837
|
+
#onMappingsContainerChildrenChange() {
|
8838
|
+
this.labelsEle.style.display = this.items.length ? 'grid' : 'none';
|
8839
|
+
}
|
8840
|
+
|
8834
8841
|
init() {
|
8835
8842
|
// This event listener needs to be placed before the super.init() call
|
8836
8843
|
this.addEventListener('focus', (e) => {
|
@@ -8857,6 +8864,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8857
8864
|
this.#errorItem = undefined;
|
8858
8865
|
}
|
8859
8866
|
});
|
8867
|
+
|
8868
|
+
observeChildren(this.mappingsContainerEle, this.#onMappingsContainerChildrenChange.bind(this));
|
8860
8869
|
}
|
8861
8870
|
|
8862
8871
|
resetInvalidIndication() {
|
@@ -8899,9 +8908,6 @@ class MappingsFieldInternal extends BaseInputClass$1 {
|
|
8899
8908
|
|
8900
8909
|
const componentName$2 = getComponentName('mappings-field');
|
8901
8910
|
|
8902
|
-
const SEPARATOR_WIDTH = '80px';
|
8903
|
-
const REMOVE_BUTTON_WIDTH = '60px';
|
8904
|
-
|
8905
8911
|
const customMixin = (superclass) =>
|
8906
8912
|
class MappingsFieldMixinClass extends superclass {
|
8907
8913
|
get defaultValues() {
|
@@ -8958,7 +8964,17 @@ const customMixin = (superclass) =>
|
|
8958
8964
|
}
|
8959
8965
|
};
|
8960
8966
|
|
8961
|
-
const {
|
8967
|
+
const {
|
8968
|
+
host,
|
8969
|
+
helperText,
|
8970
|
+
errorMessage,
|
8971
|
+
mappingItem,
|
8972
|
+
labels,
|
8973
|
+
valueLabel,
|
8974
|
+
attrLabel,
|
8975
|
+
separator,
|
8976
|
+
labelsContainer,
|
8977
|
+
} = {
|
8962
8978
|
host: { selector: () => ':host' },
|
8963
8979
|
helperText: { selector: '::part(helper-text)' },
|
8964
8980
|
errorMessage: { selector: '::part(error-message)' },
|
@@ -8967,6 +8983,7 @@ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLab
|
|
8967
8983
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
8968
8984
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
8969
8985
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
8986
|
+
labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
|
8970
8987
|
};
|
8971
8988
|
|
8972
8989
|
const MappingsFieldClass = compose(
|
@@ -8982,6 +8999,9 @@ const MappingsFieldClass = compose(
|
|
8982
8999
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
8983
9000
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
8984
9001
|
attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
|
9002
|
+
labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
|
9003
|
+
separatorWidth: {},
|
9004
|
+
removeButtonWidth: {},
|
8985
9005
|
},
|
8986
9006
|
}),
|
8987
9007
|
draggableMixin,
|
@@ -9008,9 +9028,8 @@ const MappingsFieldClass = compose(
|
|
9008
9028
|
}
|
9009
9029
|
|
9010
9030
|
descope-mappings-field-internal [part="labels"] {
|
9011
|
-
|
9012
|
-
|
9013
|
-
grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
|
9031
|
+
display: none;
|
9032
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
9014
9033
|
}
|
9015
9034
|
|
9016
9035
|
descope-mappings-field-internal [part="labels"] [part="value-label"],
|
@@ -9028,7 +9047,7 @@ const MappingsFieldClass = compose(
|
|
9028
9047
|
|
9029
9048
|
descope-mapping-item::part(wrapper) {
|
9030
9049
|
display: grid;
|
9031
|
-
grid-template-columns: 1fr ${
|
9050
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
9032
9051
|
}
|
9033
9052
|
`,
|
9034
9053
|
excludeAttrsSync: [
|
@@ -11145,6 +11164,9 @@ const mappingsField = {
|
|
11145
11164
|
[vars$1.valueLabelMinWidth]: refs.minWidth,
|
11146
11165
|
// To be positioned correctly, the min width has to match the combo box field min width
|
11147
11166
|
[vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
|
11167
|
+
[vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
|
11168
|
+
[vars$1.separatorWidth]: '70px',
|
11169
|
+
[vars$1.removeButtonWidth]: '60px',
|
11148
11170
|
};
|
11149
11171
|
|
11150
11172
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|