@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,167 @@
+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',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
+];
+
+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', { bubbles: true, composed: true }))
+    );
+  }
+
+  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,257 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import {
+  getComponentName,
+  forwardAttrs,
+  observeChildren,
+} 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',
+      'st-error-message-icon',
+      'st-error-message-icon-size',
+      'st-error-message-icon-padding',
+    ]);
+  }
+
+  // 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(focusNewItem) {
+    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',
+        'st-error-message-icon',
+        'st-error-message-icon-size',
+        'st-error-message-icon-padding',
+      ],
+    });
+    // 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', () => {
+        // 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('');
+      });
+      this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
+      if (focusNewItem) {
+        newMappingItem.focus();
+      }
+    }, 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(false);
+        // 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(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) => {
+      // 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;
+      }
+    });
+
+    observeChildren(this.mappingsContainerEle, this.#onMappingsContainerChildrenChange.bind(this));
+  }
+
+  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/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js

@@ -0,0 +1,116 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
+import { componentName as descopeInternalComponentName } from './descope-saml-group-mappings-internal/SamlGroupMappingsInternal';
+
+export const componentName = getComponentName('saml-group-mappings');
+
+const customMixin = (superclass) =>
+  class SamlGroupMappingsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+        tabindex="-1"
+      ></${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'full-width',
+          'label-group',
+          'label-value',
+          'label-attr',
+          'button-label',
+          'separator',
+          'options',
+          'readonly',
+          'disabled',
+        ],
+      });
+
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+    }
+  };
+
+const { host, groupInput, errorMessage } = {
+  host: { selector: () => ':host' },
+  groupInput: { selector: 'descope-text-field' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const SamlGroupMappingsClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        direction: ltr;
+      }
+
+      vaadin-custom-field {
+        line-height: unset;
+        width: 100%;
+      }
+
+      descope-text-field {
+        width: auto;
+      }
+
+      descope-mappings-field {
+        display: block;
+      }
+    `,
+    excludeAttrsSync: [
+      'tabindex',
+      'label-group',
+      'label-value',
+      'label-attr',
+      'button-label',
+      'separator',
+      'options',
+      'error-message',
+    ],
+    componentName,
+  })
+);
+
+export default SamlGroupMappingsClass;

package/src/components/mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/SamlGroupMappingsInternal.js

@@ -0,0 +1,136 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import {
+  getComponentName,
+  forwardAttrs,
+  observeAttributes,
+} from '../../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('saml-group-mappings-internal');
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: '' });
+
+class SamlGroupMappingsInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return ['invalid'].concat(BaseInputClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <descope-text-field variant="body2" bordered="true"></descope-text-field>
+      <descope-mappings-field></descope-mappings-field>
+    `;
+
+    this.groupInputElement = this.querySelector('descope-text-field');
+    this.mappingsElement = this.querySelector('descope-mappings-field');
+  }
+
+  resetInvalidIndication() {
+    this.removeAttribute('invalid');
+  }
+
+  handleMappingsInvalidChange(changedAttributes) {
+    if (changedAttributes.includes('invalid')) {
+      if (!this.mappingsElement.hasAttribute('invalid')) {
+        this.resetInvalidIndication();
+      }
+    }
+  }
+
+  initFocusHandler() {
+    // 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.mappingsElement.checkValidity()
+          ? this.groupInputElement
+          : this.mappingsElement;
+        focusedElement.focus();
+      }
+    });
+  }
+
+  init() {
+    // This needs to be placed before the super.init() call to work
+    this.initFocusHandler();
+
+    super.init?.();
+
+    forwardAttrs(this, this.groupInputElement, {
+      mapAttrs: { 'label-group': 'label' },
+      includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
+    });
+
+    forwardAttrs(this, this.mappingsElement, {
+      includeAttrs: [
+        'size',
+        'full-width',
+        'label-value',
+        'label-attr',
+        'button-label',
+        'separator',
+        'options',
+        'readonly',
+        'disabled',
+        'data-errormessage-pattern-mismatch',
+      ],
+    });
+
+    // Observing the invalid attribute of the mappings field to reset the invalid state for this component.
+    // When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
+    // level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
+    observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
+      includeAttrs: ['invalid'],
+    });
+  }
+
+  get value() {
+    return {
+      group: this.groupInputElement.value,
+      mappings: this.mappingsElement.value,
+    };
+  }
+
+  set value(value) {
+    if (value?.group && typeof value.group === 'string') {
+      this.groupInputElement.value = value.group;
+    }
+    if (Array.isArray(value?.mappings)) {
+      this.mappingsElement.value = value.mappings;
+    }
+  }
+
+  getValidity() {
+    if (!this.groupInputElement.checkValidity()) {
+      return this.groupInputElement.validity;
+    }
+    if (!this.mappingsElement.checkValidity()) {
+      return this.mappingsElement.validity;
+    }
+
+    return {};
+  }
+
+  #handleInvalidState(isInvalid) {
+    if (isInvalid) {
+      if (!this.groupInputElement.checkValidity()) {
+        this.groupInputElement.setAttribute('invalid', 'true');
+        return;
+      }
+
+      if (!this.mappingsElement.checkValidity()) {
+        this.mappingsElement.setAttribute('invalid', 'true');
+      }
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'invalid') {
+      this.#handleInvalidState(newValue === 'true');
+    }
+  }
+}
+
+export default SamlGroupMappingsInternal;

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

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