@descope/web-components-ui 1.0.279 → 1.0.281

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 };