@descope/web-components-ui 1.0.286 → 1.0.288

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: [
@@ -9365,27 +9384,87 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-// TODO: fix generated colors strategy
-const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
-const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
-const genContrast = (c, percentage = 0.9) => {
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
   const isDark = c.isDark();
   return c
-    .mix(Color(isDark ? 'white' : 'black'), percentage)
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
     .saturate(1)
     .hex();
 };
 
-const genColor = (color) => {
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+const genColor = (color, theme) => {
   const mainColor = new Color(color.main || color);
 
-  return {
+  const res = {
     main: mainColor.hex(),
-    dark: color.dark || genDark(mainColor),
-    light: color.light || genLight(mainColor),
-    highlight: color.highlight || genLight(mainColor),
-    contrast: color.contrast || genContrast(mainColor),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
   };
+
+  return res;
 };
 
 const genColors = (colors) => {
@@ -11145,6 +11224,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({