@descope/web-components-ui 1.0.286 → 1.0.287

package/dist/cjs/index.cjs.js

@@ -10059,9 +10059,6 @@ createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
 
 const componentName$2 = getComponentName('mappings-field');
 
-const SEPARATOR_WIDTH = '80px';
-const REMOVE_BUTTON_WIDTH = '60px';
-
 const customMixin = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
     get defaultValues() {
@@ -10118,7 +10115,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)' },
@@ -10127,6 +10134,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(
@@ -10142,6 +10150,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,
@@ -10168,9 +10179,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"],
@@ -10188,7 +10198,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: [
@@ -10219,6 +10229,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({