@descope-ui/descope-multi-line-mappings 3.9.0

package/src/component/MultiLineMappingsClass.js

@@ -0,0 +1,751 @@
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { MultiSelectComboBoxClass } from '@descope-ui/descope-multi-select-combo-box/class';
+import { ButtonClass } from '@descope-ui/descope-button/class';
+
+export const componentName = getComponentName('multi-line-mappings');
+const BaseClass = createBaseClass({ componentName });
+
+const parseJSON = (value, fallback, source = 'unknown') => {
+  if (typeof value !== 'string' || !value?.trim()) {
+    return fallback;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    console.error(
+      `[descope-multi-line-mappings] Failed to parse JSON from "${source}"`,
+      error,
+    );
+    return fallback;
+  }
+};
+
+const toNormalizedValue = (item) => {
+  if (item === undefined || item === null) {
+    return '';
+  }
+
+  if (typeof item === 'object') {
+    return String(item.value ?? item.id ?? item.label ?? '');
+  }
+
+  return String(item);
+};
+
+const uniqueValues = (values) => [
+  ...new Set(values.map(toNormalizedValue).filter(Boolean)),
+];
+
+const normalizeOption = (item) => {
+  const value = toNormalizedValue(item);
+
+  if (typeof item === 'object' && item !== null) {
+    return {
+      ...item,
+      value,
+      label: String(item.label ?? item.displayName ?? value),
+    };
+  }
+
+  return { value, label: value };
+};
+
+const normalizeOptions = (options) => {
+  if (!Array.isArray(options)) {
+    return [];
+  }
+
+  const uniqueSet = new Set();
+
+  return options.map(normalizeOption).filter((option) => {
+    if (!option.value || uniqueSet.has(option.value)) {
+      return false;
+    }
+
+    uniqueSet.add(option.value);
+    return true;
+  });
+};
+
+const createEmptyRow = () => ({ firstValues: [], secondValues: [] });
+
+const areSameValues = (first = [], second = []) =>
+  first.length === second.length && first.every((v, i) => v === second[i]);
+
+class RawMultiLineMappingsClass extends BaseClass {
+  static get observedAttributes() {
+    return [
+      'data',
+      'max-rows',
+      'size',
+      'disabled',
+      'readonly',
+      'first-value-key',
+      'second-value-key',
+      'first-label',
+      'second-label',
+      'first-placeholder',
+      'second-placeholder',
+      'full-width',
+      'merge-rows',
+    ];
+  }
+
+  #rows = [createEmptyRow()];
+
+  #rawValue = null;
+
+  #firstOptions = [];
+
+  #secondOptionsByFirstValue = {};
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <div class="rows"></div>
+        <div class="add-action">
+          <descope-button
+            class="add-button"
+            variant="link"
+            mode="primary"
+          >
+            <slot name="add-button-content">Add line</slot>
+          </descope-button>
+        </div>
+      </div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+        box-sizing: border-box;
+        max-width: 100%;
+      }
+
+      .wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .rows {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .rows > .row {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+        align-items: flex-end;
+      }
+
+      .row descope-multi-select-combo-box {
+        flex: 1 1 0;
+        box-sizing: border-box;
+      }
+
+      .row .remove-button {
+        flex: 0 0 auto;
+        align-self: flex-end;
+      }
+
+      .row:only-child .remove-button {
+        display: none;
+        pointer-events: none;
+      }
+
+      .add-action {
+        display: flex;
+      }
+      `,
+      this,
+    );
+
+    this.rowsElement = this.shadowRoot.querySelector('.rows');
+    this.addButtonElement = this.shadowRoot.querySelector('.add-button');
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  get firstValueKey() {
+    return this.getAttribute('first-value-key') || 'firstValues';
+  }
+
+  get secondValueKey() {
+    return this.getAttribute('second-value-key') || 'secondValues';
+  }
+
+  get firstLabel() {
+    return this.getAttribute('first-label') || '';
+  }
+
+  get secondLabel() {
+    return this.getAttribute('second-label') || '';
+  }
+
+  get firstPlaceholder() {
+    return this.getAttribute('first-placeholder') || '';
+  }
+
+  get secondPlaceholder() {
+    return this.getAttribute('second-placeholder') || '';
+  }
+
+  get disabled() {
+    return this.getAttribute('disabled') === 'true';
+  }
+
+  get readonly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get mergeRows() {
+    return this.getAttribute('merge-rows') === 'true';
+  }
+
+  get maxRows() {
+    const maxRows = Number(this.getAttribute('max-rows'));
+
+    return Number.isFinite(maxRows) && maxRows > 0 ? maxRows : undefined;
+  }
+
+  get data() {
+    return this.#secondOptionsByFirstValue;
+  }
+
+  get value() {
+    return this.#rows
+      .filter(
+        (row) => row.firstValues.length > 0 || row.secondValues.length > 0,
+      )
+      .flatMap((rowValue) => {
+        const firsts = rowValue.firstValues.length
+          ? rowValue.firstValues
+          : [''];
+        return firsts.map((firstValue) => ({
+          [this.firstValueKey]: firstValue,
+          [this.secondValueKey]: [...rowValue.secondValues],
+        }));
+      });
+  }
+
+  set value(value) {
+    this.#rawValue = value;
+    this.#rows = this.#normalizeRows(value);
+    this.#dropStaleSelections();
+    this.#renderRows();
+  }
+
+  #setData(rawValue) {
+    const parsed = parseJSON(rawValue, {}, 'data attribute');
+    const optionsMap =
+      parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? parsed
+        : {};
+
+    this.#firstOptions = Object.entries(optionsMap).map(([key, value]) => {
+      const strKey = String(key);
+      const isEnriched =
+        value != null && typeof value === 'object' && !Array.isArray(value);
+      const options = isEnriched ? (value.options ?? []) : value;
+      const label =
+        isEnriched && value.label != null ? String(value.label) : strKey;
+      return { value: strKey, label, options: normalizeOptions(options) };
+    });
+    this.#secondOptionsByFirstValue = Object.fromEntries(
+      this.#firstOptions.map(({ value, options }) => [value, options]),
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.#updateAddButtonSize();
+    this.addButtonElement.addEventListener('click', () => this.#addRow());
+    this.#renderRows();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) return;
+
+    if (name === 'data') {
+      this.#setData(newValue);
+      this.#dropStaleSelections();
+      this.#renderRows();
+      return;
+    }
+
+    if (name === 'size') {
+      [...this.#getAllCombos(), ...this.#getAllRemoveButtons()].forEach((el) =>
+        el.setAttribute('size', this.size),
+      );
+      this.#updateAddButtonSize();
+      this.#updateAddButtonState();
+      return;
+    }
+
+    if (['disabled', 'readonly'].includes(name)) {
+      this.#getAllCombos().forEach((combo) => {
+        combo[this.disabled ? 'setAttribute' : 'removeAttribute'](
+          'disabled',
+          'true',
+        );
+        combo[this.readonly ? 'setAttribute' : 'removeAttribute'](
+          'readonly',
+          'true',
+        );
+      });
+      this.#getAllRemoveButtons().forEach((el) =>
+        el[this.disabled || this.readonly ? 'setAttribute' : 'removeAttribute'](
+          'disabled',
+          'true',
+        ),
+      );
+      this.#updateAddButtonState();
+      return;
+    }
+
+    if (['first-label', 'second-label'].includes(name)) {
+      const type = name === 'first-label' ? 'first' : 'second';
+      Array.from(this.rowsElement.children).forEach((rowElement) => {
+        const combo = rowElement.querySelector(`.${type}-combo`);
+        if (newValue) combo?.setAttribute('label', newValue);
+        else combo?.removeAttribute('label');
+      });
+      return;
+    }
+
+    if (['first-placeholder', 'second-placeholder'].includes(name)) {
+      const type = name === 'first-placeholder' ? 'first' : 'second';
+      Array.from(this.rowsElement.children).forEach((rowElement) => {
+        const combo = rowElement.querySelector(`.${type}-combo`);
+        if (newValue) combo?.setAttribute('placeholder', newValue);
+        else combo?.removeAttribute('placeholder');
+      });
+      return;
+    }
+
+    if (name === 'max-rows') {
+      this.#updateAddButtonState();
+    }
+
+    if (name === 'merge-rows' && this.#rawValue !== null) {
+      this.#rows = this.#normalizeRows(this.#rawValue);
+      this.#dropStaleSelections();
+      this.#renderRows();
+    }
+  }
+
+  #getAllCombos() {
+    return Array.from(
+      this.rowsElement.querySelectorAll('descope-multi-select-combo-box'),
+    );
+  }
+
+  #getAllRemoveButtons() {
+    return Array.from(this.rowsElement.querySelectorAll('.remove-button'));
+  }
+
+  #addRow() {
+    if (this.disabled || this.readonly || this.#isMaxRowsReached()) {
+      return;
+    }
+
+    const newRow = createEmptyRow();
+    this.#rows = [...this.#rows, newRow];
+    this.rowsElement.append(this.#createRowElement(newRow));
+    this.#updateAddButtonState();
+  }
+
+  #normalizeRows(value) {
+    if (!Array.isArray(value) || !value.length) {
+      return [createEmptyRow()];
+    }
+
+    const rows = value.map((rowValue) => {
+      const firstRaw = rowValue?.[this.firstValueKey];
+      const firstValues =
+        firstRaw != null && String(firstRaw) !== '' ? [String(firstRaw)] : [];
+
+      return {
+        firstValues,
+        secondValues: uniqueValues(rowValue?.[this.secondValueKey] ?? []),
+      };
+    });
+
+    let result = rows;
+
+    if (this.mergeRows) {
+      const map = new Map();
+      for (const row of result) {
+        const key = [...row.secondValues].sort().join('\0');
+        if (map.has(key)) {
+          map.get(key).firstValues.push(...row.firstValues);
+        } else {
+          map.set(key, {
+            firstValues: [...row.firstValues],
+            secondValues: row.secondValues,
+          });
+        }
+      }
+      result = [...map.values()];
+    }
+
+    return result;
+  }
+
+  #dropStaleSelections() {
+    const firstValuesSet = new Set(this.#firstOptions.map((o) => o.value));
+
+    this.#rows = this.#rows.map((rowValue) => {
+      const firstValues = rowValue.firstValues.filter((value) =>
+        firstValuesSet.has(value),
+      );
+      const availableSecondOptions =
+        this.#getSecondOptionsForFirstValues(firstValues);
+      const availableSecondValuesSet = new Set(
+        availableSecondOptions.map((item) => item.value),
+      );
+
+      const secondValues = rowValue.secondValues.filter((value) =>
+        availableSecondValuesSet.has(value),
+      );
+
+      return {
+        firstValues,
+        secondValues,
+      };
+    });
+  }
+
+  #getSecondOptionsForFirstValues(firstValues) {
+    // Get lists to intersect
+    const lists = !firstValues.length
+      ? Object.values(this.#secondOptionsByFirstValue).filter(
+          (options) => options.length,
+        )
+      : firstValues
+          .map((value) => this.#secondOptionsByFirstValue[value] || [])
+          .filter((options) => options.length);
+
+    if (
+      !lists.length ||
+      (firstValues.length && lists.length !== firstValues.length)
+    ) {
+      return [];
+    }
+
+    if (lists.length === 1) {
+      return lists[0];
+    }
+
+    // Compute intersection of all lists
+    const [baseList, ...otherLists] = lists;
+    const intersectionSet = new Set(baseList.map((item) => item.value));
+
+    for (const options of otherLists) {
+      const currentSet = new Set(options.map((item) => item.value));
+      for (const value of intersectionSet) {
+        if (!currentSet.has(value)) {
+          intersectionSet.delete(value);
+        }
+      }
+    }
+
+    return baseList.filter((item) => intersectionSet.has(item.value));
+  }
+
+  #createCombo({
+    getRowIndex,
+    type,
+    label,
+    placeholder,
+    options,
+    selectedValues,
+  }) {
+    const comboElement = document.createElement(
+      'descope-multi-select-combo-box',
+    );
+
+    comboElement.className = `combo ${type}-combo`;
+    comboElement.setAttribute('size', this.size);
+    comboElement.setAttribute('bordered', 'true');
+    comboElement.setAttribute('item-label-path', 'data-name');
+    comboElement.setAttribute('item-value-path', 'data-id');
+
+    if (label) {
+      comboElement.setAttribute('label', label);
+    }
+
+    if (placeholder) {
+      comboElement.setAttribute('placeholder', placeholder);
+    }
+
+    if (this.disabled) {
+      comboElement.setAttribute('disabled', 'true');
+    }
+
+    if (this.readonly) {
+      comboElement.setAttribute('readonly', 'true');
+    }
+
+    comboElement.data = options;
+    this.#syncComboSelection(comboElement, selectedValues);
+
+    comboElement.addEventListener('input', () => {
+      if (comboElement.__descopeSyncingSelection) {
+        return;
+      }
+
+      const rowIndex = getRowIndex();
+      if (rowIndex === -1) return;
+
+      this.#handleComboChange({
+        rowIndex,
+        type,
+        selectedValues: uniqueValues(comboElement.value || []),
+      });
+    });
+
+    return comboElement;
+  }
+
+  #syncComboSelection(comboElement, selectedValues) {
+    comboElement.__descopeSyncingSelection = true;
+    Promise.resolve().then(() => {
+      const selectedValuesSet = new Set(selectedValues || []);
+      comboElement.selectedItems = (comboElement.items || []).filter((item) =>
+        selectedValuesSet.has(
+          item['data-id'] || item.getAttribute?.('data-id'),
+        ),
+      );
+      comboElement.__descopeSyncingSelection = false;
+    });
+  }
+
+  #createRemoveButton(getRowIndex) {
+    const buttonElement = document.createElement('descope-button');
+
+    buttonElement.className = 'remove-button';
+    buttonElement.setAttribute('variant', 'link');
+    buttonElement.setAttribute('mode', 'primary');
+    buttonElement.setAttribute('size', this.size);
+    buttonElement.setAttribute('aria-label', 'Remove row');
+    buttonElement.innerHTML = '<vaadin-icon icon="vaadin:minus"></vaadin-icon>';
+
+    if (this.disabled || this.readonly) {
+      buttonElement.setAttribute('disabled', 'true');
+    }
+
+    buttonElement.addEventListener('click', () => {
+      const rowIndex = getRowIndex();
+      if (rowIndex !== -1) this.#removeRow(rowIndex);
+    });
+
+    return buttonElement;
+  }
+
+  #renderRows() {
+    this.rowsElement.innerHTML = '';
+    this.#rows.forEach((rowValue) => {
+      this.rowsElement.append(this.#createRowElement(rowValue));
+    });
+    this.#updateAddButtonState();
+  }
+
+  #createRowElement(rowValue) {
+    const rowElement = document.createElement('div');
+    rowElement.className = 'row';
+
+    const getRowIndex = () =>
+      Array.from(this.rowsElement.children).indexOf(rowElement);
+
+    const firstCombo = this.#createCombo({
+      getRowIndex,
+      type: 'first',
+      label: this.firstLabel,
+      placeholder: this.firstPlaceholder,
+      options: this.#firstOptions.map(({ value, label }) => ({ value, label })),
+      selectedValues: rowValue.firstValues,
+    });
+
+    const secondOptions = this.#getSecondOptionsForFirstValues(
+      rowValue.firstValues,
+    );
+    const secondCombo = this.#createCombo({
+      getRowIndex,
+      type: 'second',
+      label: this.secondLabel,
+      placeholder: this.secondPlaceholder,
+      options: secondOptions,
+      selectedValues: rowValue.secondValues,
+    });
+
+    rowElement.append(
+      firstCombo,
+      secondCombo,
+      this.#createRemoveButton(getRowIndex),
+    );
+    return rowElement;
+  }
+
+  #updateSecondComboForRow(rowIndex) {
+    const currentRowValue = this.#rows[rowIndex];
+    if (!currentRowValue) return;
+
+    const rowElement = this.rowsElement.children[rowIndex];
+    const secondCombo = rowElement?.querySelector('.second-combo');
+    if (!secondCombo) {
+      this.#renderRows();
+      return;
+    }
+
+    const secondOptions = this.#getSecondOptionsForFirstValues(
+      currentRowValue.firstValues,
+    );
+    secondCombo.data = secondOptions;
+    this.#syncComboSelection(secondCombo, currentRowValue.secondValues);
+  }
+
+  #updateAddButtonSize() {
+    this.addButtonElement.setAttribute('size', this.size);
+  }
+
+  #updateAddButtonState() {
+    if (this.disabled || this.readonly || this.#isMaxRowsReached()) {
+      this.addButtonElement.setAttribute('disabled', 'true');
+    } else {
+      this.addButtonElement.removeAttribute('disabled');
+    }
+  }
+
+  #isMaxRowsReached() {
+    return Number.isFinite(this.maxRows) && this.#rows.length >= this.maxRows;
+  }
+
+  #removeRowFromDOM(rowIndex) {
+    this.rowsElement.children[rowIndex]?.remove();
+  }
+
+  #handleComboChange({ rowIndex, type, selectedValues }) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    const currentRow = this.#rows[rowIndex];
+
+    if (!currentRow) {
+      return;
+    }
+
+    if (type === 'first') {
+      const availableSecondOptions =
+        this.#getSecondOptionsForFirstValues(selectedValues);
+      const availableSecondValuesSet = new Set(
+        availableSecondOptions.map((item) => item.value),
+      );
+
+      const nextSecondValues = currentRow.secondValues.filter((value) =>
+        availableSecondValuesSet.has(value),
+      );
+
+      if (
+        areSameValues(currentRow.firstValues, selectedValues) &&
+        areSameValues(currentRow.secondValues, nextSecondValues)
+      ) {
+        return;
+      }
+
+      this.#rows[rowIndex] = {
+        firstValues: selectedValues,
+        secondValues: nextSecondValues,
+      };
+
+      this.#updateSecondComboForRow(rowIndex);
+      this.#emitValueChange();
+      return;
+    }
+
+    if (areSameValues(currentRow.secondValues, selectedValues)) {
+      return;
+    }
+
+    this.#rows[rowIndex] = {
+      ...currentRow,
+      secondValues: selectedValues,
+    };
+
+    this.#emitValueChange();
+  }
+
+  #removeRow(rowIndex) {
+    if (this.disabled || this.readonly || this.#rows.length <= 1) {
+      return;
+    }
+
+    const removedRow = this.#rows[rowIndex];
+    this.#rows = this.#rows.filter((_, index) => index !== rowIndex);
+
+    this.#removeRowFromDOM(rowIndex);
+    this.#updateAddButtonState();
+
+    const rowHadValues =
+      removedRow.firstValues.length > 0 || removedRow.secondValues.length > 0;
+    if (rowHadValues) {
+      this.#emitValueChange();
+    }
+  }
+
+  #emitValueChange() {
+    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  }
+}
+
+const host = { selector: () => ':host' };
+const rows = { selector: '.rows' };
+const row = { selector: '.row' };
+const addAction = { selector: '.add-action' };
+
+export const MultiLineMappingsClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        {
+          selector: MultiSelectComboBoxClass.componentName,
+          property: MultiSelectComboBoxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: ButtonClass.componentName,
+          property: ButtonClass.cssVarList.hostDirection,
+        },
+      ],
+      rowsGap: { ...rows, property: 'gap' },
+      rowGap: { ...row, property: 'gap' },
+      rowAlignItems: { ...row, property: 'align-items' },
+      rowWrap: { ...row, property: 'flex-wrap' },
+      addActionJustifyContent: { ...addAction, property: 'justify-content' },
+      addActionMarginTop: { ...addAction, property: 'margin-top' },
+    },
+  }),
+  draggableMixin,
+)(RawMultiLineMappingsClass);