@descope/web-components-ui 1.0.278 → 1.0.280

package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js

@@ -0,0 +1,158 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('mapping-item');
+
+const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class MappingItem extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], inputAttrs, [
+      'separator',
+      'options',
+      'invalid',
+      'disabled',
+    ]);
+  }
+
+  get separator() {
+    return this.getAttribute('separator') || 'map to';
+  }
+
+  get value() {
+    const attributeValue = this.attributeInput.value;
+    const inputValue = this.valueInput.value;
+    if (attributeValue && inputValue) {
+      return { [attributeValue]: inputValue };
+    }
+    return null;
+  }
+
+  set value(mapping) {
+    if (Object.entries(mapping).length !== 1) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'descope-mapping item expected expects only one key-value pair in the value but received: ',
+        mapping
+      );
+      return;
+    }
+    const [attribute, value] = Object.entries(mapping)[0];
+    this.valueInput.value = value;
+    this.attributeInput.value = attribute;
+    // The event needs to be dispatched to trigger the validation if setting the value externally
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        .wrapper {
+          display: flex;
+        }
+        .separator {
+          text-align: center;
+          flex-shrink: 0;
+        }
+      </style>
+      <div class="wrapper" part="wrapper">
+        <descope-text-field required="true"></descope-text-field>
+        <div class="separator" part="separator">${this.separator}</div>
+        <descope-combo-box
+          item-label-path="data-name"
+          item-value-path="data-id"
+          required="true"
+        >
+        </descope-combo-box>
+        <descope-button variant="link" mode="primary">
+          <vaadin-icon icon="vaadin:minus"></vaadin-icon>
+        </descope-button>
+      </div>
+	`;
+    this.valueInput = this.shadowRoot.querySelector('descope-text-field');
+    this.attributeInput = this.shadowRoot.querySelector('descope-combo-box');
+    this.inputs = [this.valueInput, this.attributeInput];
+    this.removeButton = this.shadowRoot.querySelector('descope-button');
+
+    forwardAttrs(this, this.valueInput, {
+      includeAttrs: inputAttrs,
+    });
+    forwardAttrs(this, this.attributeInput, {
+      includeAttrs: [...inputAttrs, 'options'],
+      mapAttrs: { options: 'data' },
+    });
+    forwardAttrs(this, this.removeButton, {
+      includeAttrs: ['disabled'],
+    });
+  }
+
+  initRemoveButton() {
+    this.removeButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('mapping-item-removed'))
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.initRemoveButton();
+  }
+
+  getValidity() {
+    const attributeValue = this.attributeInput.value;
+    const inputValue = this.valueInput.value;
+    if (!attributeValue || !inputValue) {
+      return { badInput: true };
+    }
+    return {};
+  }
+
+  reportValidity() {
+    this.inputs.forEach((input) => input.reportValidity());
+  }
+
+  focus() {
+    const focusedElement =
+      this.checkValidity() || !this.valueInput.checkValidity()
+        ? this.valueInput
+        : this.attributeInput;
+    focusedElement.focus();
+  }
+
+  handleSeparatorChange() {
+    this.shadowRoot.querySelector('.separator').textContent = this.separator;
+  }
+
+  #handleInvalidMapping(invalid) {
+    if (invalid === 'true') {
+      const inputValue = this.valueInput.value;
+      if (!inputValue) {
+        this.valueInput.setAttribute('invalid', 'true');
+        this.valueInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
+      }
+
+      const attributeValue = this.attributeInput.value;
+      if (!attributeValue) {
+        this.attributeInput.setAttribute('invalid', 'true');
+        this.attributeInput.setAttribute('error-message', this.defaultErrorMsgValueMissing);
+      }
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (attrName === 'separator') {
+      this.handleSeparatorChange();
+    }
+
+    if (attrName === 'invalid') {
+      this.#handleInvalidMapping(newValue);
+    }
+  }
+}
+
+export default MappingItem;

package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/index.js

@@ -0,0 +1,3 @@
+import MappingItem, { componentName } from './MappingItem';
+
+customElements.define(componentName, MappingItem);

package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js

@@ -0,0 +1,232 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import { getComponentName, forwardAttrs } from '../../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('mappings-field-internal');
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class MappingsFieldInternal extends BaseInputClass {
+  #errorItem;
+
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], [
+      'label-value',
+      'label-attr',
+      'button-label',
+      'invalid',
+      'readonly',
+      'disabled',
+    ]);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isValidDataType(data) {
+    try {
+      return data.every(
+        (obj) =>
+          typeof obj === 'object' &&
+          !Array.isArray(obj) &&
+          Object.getOwnPropertyNames(obj).length === 1 &&
+          typeof obj[Object.keys(obj)[0]] === 'string' &&
+          obj[Object.keys(obj)[0]].trim() !== ''
+      );
+    } catch (e) {
+      return false;
+    }
+  }
+
+  get labelValue() {
+    return this.getAttribute('label-value') || 'Value';
+  }
+
+  get labelAttr() {
+    return this.getAttribute('label-attr') || 'Attribute';
+  }
+
+  get buttonLabel() {
+    return this.getAttribute('button-label') || 'Add mapping';
+  }
+
+  get options() {
+    return this.getAttribute('options') || [];
+  }
+
+  addNewMappingItem() {
+    const newMappingItem = document.createElement('descope-mapping-item');
+    newMappingItem.setAttribute('bordered', 'true');
+    this.mappingsContainerEle.appendChild(newMappingItem);
+    forwardAttrs(this, newMappingItem, {
+      includeAttrs: ['size', 'full-width', 'separator', 'options', 'disabled'],
+    });
+    // This needs to be done with the timeout, otherwise the validation is performed
+    // before the new item is added and thus returns a wrong result
+    setTimeout(() => {
+      this.setCustomValidity('');
+      newMappingItem.addEventListener('mapping-item-removed', (e) => {
+        // If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
+        if (newMappingItem === this.#errorItem) {
+          this.resetInvalidIndication();
+          this.#errorItem = undefined;
+        }
+        newMappingItem.remove();
+        this.setCustomValidity('');
+        e.stopPropagation();
+      });
+    }, 0);
+    return newMappingItem;
+  }
+
+  get items() {
+    return Array.from(this.mappingsContainerEle.querySelectorAll('descope-mapping-item'));
+  }
+
+  get value() {
+    return this.items.reduce((acc, item) => {
+      if (!item.value) {
+        return acc;
+      }
+
+      return [...acc, item.value];
+    }, []);
+  }
+
+  set value(mappings) {
+    if (!this.isValidDataType(mappings)) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'received invalid value to set - should be an array of objects with one key-value pair'
+      );
+      return;
+    }
+
+    const currentItems = this.items;
+
+    // Remove extra mapping items we don't need
+    if (currentItems.length > mappings.length) {
+      for (let i = mappings.length; i < currentItems.length; i++) {
+        this.mappingsContainerEle.removeChild(currentItems[i]);
+      }
+    }
+
+    // Add or update items
+    mappings.forEach((mapping, index) => {
+      const mappingItem = currentItems[index];
+      if (mappingItem) {
+        // Set existing item value
+        mappingItem.value = mapping;
+      } else {
+        // Add new item
+        const newMappingItem = this.addNewMappingItem();
+        // Setting the new item value needs to be done with the timeout,
+        // otherwise the value is not set correctly
+        setTimeout(() => {
+          newMappingItem.value = mapping;
+        }, 0);
+      }
+    });
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <div class="labels-container" part="labels"></div>
+      <div class="mappings-container"></div>
+      <div class="button-container"></div>
+    `;
+
+    this.labelsEle = this.querySelector('.labels-container');
+    this.mappingsContainerEle = this.querySelector('.mappings-container');
+    this.buttonContainer = this.querySelector('.button-container');
+  }
+
+  initLabels() {
+    this.labelsEle.innerHTML = `
+      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>
+      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>
+    `;
+  }
+
+  initAddButton() {
+    this.buttonContainer.innerHTML = `
+      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">
+        <vaadin-icon icon="vaadin:plus"></vaadin-icon>
+        ${this.buttonLabel}
+      </descope-button>
+    `;
+    const button = this.querySelector('descope-button');
+    button.onclick = () => {
+      this.addNewMappingItem();
+    };
+    forwardAttrs(this, button, {
+      includeAttrs: ['disabled'],
+    });
+  }
+
+  init() {
+    // This event listener needs to be placed before the super.init() call
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        const focusedElement =
+          this.#errorItem || this.items[0] || this.querySelector('descope-button');
+        focusedElement.focus();
+      }
+    });
+
+    super.init?.();
+    this.initLabels();
+    this.initAddButton();
+
+    // This event listener is responsible for removing the invalid attribute
+    // from the internal once the invalid item turns valid
+    this.addEventListener('input', () => {
+      const isErrorItemMounted = this.mappingsContainerEle.contains(this.#errorItem);
+      if (isErrorItemMounted && this.#errorItem?.checkValidity()) {
+        // Item has changed, it was invalid before and now it's valid
+        this.resetInvalidIndication();
+        this.#errorItem.removeAttribute('invalid');
+        this.#errorItem = undefined;
+      }
+    });
+  }
+
+  resetInvalidIndication() {
+    this.removeAttribute('invalid');
+  }
+
+  getValidity() {
+    const errorItem = this.items.find((item) => !item.checkValidity());
+    if (errorItem) {
+      return errorItem.validity;
+    }
+
+    return {};
+  }
+
+  #handleInvalidMappings(isInvalid) {
+    if (isInvalid) {
+      this.#errorItem = this.items.find((item) => !item.checkValidity());
+      this.#errorItem?.reportValidity();
+      this.#errorItem?.setAttribute('invalid', 'true');
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'label-value' || attrName === 'label-attr') {
+      this.initLabels();
+    }
+    if (attrName === 'button-label') {
+      this.initAddButton();
+    }
+    if (attrName === 'invalid') {
+      this.#handleInvalidMappings(newValue === 'true');
+    }
+    if (attrName === 'readonly') {
+      this.toggleAttribute('inert', newValue === 'true');
+    }
+  }
+}
+
+export default MappingsFieldInternal;

package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js

@@ -0,0 +1,3 @@
+import MappingsFieldInternal, { componentName } from './MappingsFieldInternal';
+
+customElements.define(componentName, MappingsFieldInternal);

package/src/components/mapping-fields/descope-mappings-field/index.js

@@ -0,0 +1,14 @@
+import '@vaadin/custom-field';
+import '@vaadin/icon';
+import '@vaadin/icons';
+import { componentName, MappingsFieldClass } from './MappingsFieldClass';
+import '../../descope-text';
+import '../../descope-button';
+import '../../descope-text-field';
+import '../../descope-combo-box';
+import './descope-mappings-field-internal';
+import './descope-mapping-item';
+
+customElements.define(componentName, MappingsFieldClass);
+
+export { MappingsFieldClass };

package/src/index.cjs.js

@@ -37,3 +37,4 @@ export { NotificationClass } from './components/descope-notification/Notificatio
 export { GridClass } from './components/descope-grid/GridClass';
 export { BadgeClass } from './components/descope-badge/BadgeClass';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';

package/src/index.d.ts

@@ -42,6 +42,7 @@ export { ModalClass } from './components/descope-modal/ModalClass';
 export { NotificationClass } from './components/descope-notification/';
 export { BadgeClass } from './components/descope-badge/';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -31,6 +31,7 @@ export * from './components/descope-multi-select-combo-box';
 export * from './components/descope-badge';
 export * from './components/descope-modal';
 export * from './components/descope-notification';
+export * from './components/mapping-fields/descope-mappings-field';
 
 export {
   globalsThemeToStyle,

package/src/mixins/inputValidationMixin.js

@@ -20,6 +20,14 @@ export const inputValidationMixin = (superclass) =>
 
     #internals;
 
+    get internals() {
+      return this.#internals;
+    }
+
+    set internals(value) {
+      this.#internals = value;
+    }
+
     constructor() {
       super();
 

package/src/mixins/proxyInputMixin.js

@@ -38,7 +38,10 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
     inputEvent = 'input',
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
   }) =>
   (superclass) =>
     class ProxyInputMixinClass extends inputValidationMixin(superclass) {
@@ -128,12 +131,16 @@ const proxyInputMixin =
         // on some cases the base element is not ready so the inputElement is empty
         // we are deferring this section to make sure the base element is ready
         setTimeout(() => {
-          this.baseElement?.addEventListener(inputEvent, () => {
-            if (!this.baseElement.checkValidity()) {
-              this.#handleErrorMessage();
-            } else {
-              this.removeAttribute('invalid');
-            }
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
           });
 
           this.baseElement.addEventListener('change', () => {
@@ -156,6 +163,41 @@ const proxyInputMixin =
 
           forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
         });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
       }
     };
 

package/src/theme/components/index.js

@@ -30,6 +30,7 @@ import * as grid from './grid';
 import * as notificationCard from './notificationCard';
 import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
+import * as mappingsField from './mappingsField';
 
 const components = {
   button,
@@ -65,6 +66,7 @@ const components = {
   notificationCard,
   multiSelectComboBox,
   badge,
+  mappingsField,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/mappingsField.js

@@ -0,0 +1,25 @@
+import globals from '../globals';
+import { MappingsFieldClass } from '../../components/mapping-fields/descope-mappings-field/MappingsFieldClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = MappingsFieldClass.cssVarList;
+
+export const mappingsField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.separatorFontSize]: '14px',
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.itemMarginBottom]: '1em',
+  // To be positioned correctly, the min width has to match the text field min width
+  [vars.valueLabelMinWidth]: refs.minWidth,
+  // To be positioned correctly, the min width has to match the combo box field min width
+  [vars.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
+};
+
+export default mappingsField;
+export { vars };