@descope/web-components-ui 1.0.286 → 1.0.287

package/dist/index.esm.js

@@ -8719,7 +8719,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
     return this.getAttribute('options') || [];
   }
 
-  addNewMappingItem() {
+  addNewMappingItem(focusNewItem) {
     const newMappingItem = document.createElement('descope-mapping-item');
     newMappingItem.setAttribute('bordered', 'true');
     this.mappingsContainerEle.appendChild(newMappingItem);
@@ -8740,6 +8740,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
         this.setCustomValidity('');
         e.stopPropagation();
       });
+      if (focusNewItem) {
+        newMappingItem.focus();
+      }
     }, 0);
     return newMappingItem;
   }
@@ -8784,7 +8787,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
         mappingItem.value = mapping;
       } else {
         // Add new item
-        const newMappingItem = this.addNewMappingItem();
+        const newMappingItem = this.addNewMappingItem(false);
         // Setting the new item value needs to be done with the timeout,
         // otherwise the value is not set correctly
         setTimeout(() => {
@@ -8824,13 +8827,17 @@ class MappingsFieldInternal extends BaseInputClass$1 {
     `;
     const button = this.querySelector('descope-button');
     button.onclick = () => {
-      this.addNewMappingItem();
+      this.addNewMappingItem(true);
     };
     forwardAttrs(this, button, {
       includeAttrs: ['disabled'],
     });
   }
 
+  #onMappingsContainerChildrenChange() {
+    this.labelsEle.style.display = this.items.length ? 'grid' : 'none';
+  }
+
   init() {
     // This event listener needs to be placed before the super.init() call
     this.addEventListener('focus', (e) => {
@@ -8857,6 +8864,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
         this.#errorItem = undefined;
       }
     });
+
+    observeChildren(this.mappingsContainerEle, this.#onMappingsContainerChildrenChange.bind(this));
   }
 
   resetInvalidIndication() {
@@ -8899,9 +8908,6 @@ class MappingsFieldInternal extends BaseInputClass$1 {
 
 const componentName$2 = getComponentName('mappings-field');
 
-const SEPARATOR_WIDTH = '80px';
-const REMOVE_BUTTON_WIDTH = '60px';
-
 const customMixin = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
     get defaultValues() {
@@ -8958,7 +8964,17 @@ const customMixin = (superclass) =>
     }
   };
 
-const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLabel, separator } = {
+const {
+  host,
+  helperText,
+  errorMessage,
+  mappingItem,
+  labels,
+  valueLabel,
+  attrLabel,
+  separator,
+  labelsContainer,
+} = {
   host: { selector: () => ':host' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -8967,6 +8983,7 @@ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLab
   valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
   attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
   separator: { selector: 'descope-mapping-item::part(separator)' },
+  labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
 };
 
 const MappingsFieldClass = compose(
@@ -8982,6 +8999,9 @@ const MappingsFieldClass = compose(
       itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
       valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
       attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
+      labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
+      separatorWidth: {},
+      removeButtonWidth: {},
     },
   }),
   draggableMixin,
@@ -9008,9 +9028,8 @@ const MappingsFieldClass = compose(
       }
 
       descope-mappings-field-internal [part="labels"] {
-        margin-bottom: 0.5em;
-        display: grid;
-        grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
+        display: none;
+        grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
       }
 
       descope-mappings-field-internal [part="labels"] [part="value-label"],
@@ -9028,7 +9047,7 @@ const MappingsFieldClass = compose(
 
       descope-mapping-item::part(wrapper) {
         display: grid;
-        grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
+        grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
       }
     `,
     excludeAttrsSync: [
@@ -11145,6 +11164,9 @@ const mappingsField = {
   [vars$1.valueLabelMinWidth]: refs.minWidth,
   // To be positioned correctly, the min width has to match the combo box field min width
   [vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
+  [vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
+  [vars$1.separatorWidth]: '70px',
+  [vars$1.removeButtonWidth]: '60px',
 };
 
 var mappingsField$1 = /*#__PURE__*/Object.freeze({