@descope/web-components-ui 1.0.285 → 1.0.287

package/dist/cjs/index.cjs.js

@@ -10053,17 +10053,12 @@ var avatar$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-customElements.define(componentName$u, TextClass);
-
 const componentName$3 = getComponentName('mappings-field-internal');
 
 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() {
@@ -10120,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)' },
@@ -10129,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(
@@ -10144,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,
@@ -10170,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"],
@@ -10190,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: [
@@ -10221,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({