@descope/web-components-ui 0.0.1

package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js

@@ -0,0 +1,58 @@
+import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
+
+const createCheckboxEle = () => {
+  const checkbox = document.createElement('descope-checkbox');
+
+  checkbox.setAttribute('bordered', 'true');
+  checkbox.setAttribute('size', 'xs');
+
+  return checkbox;
+};
+
+const getIsAllItemsSelected = (grid) =>
+  !!grid.items?.length && grid.selectedItems.length === grid.items.length;
+
+export class GridSelectionColumnClass extends GridSelectionColumn {
+  // eslint-disable-next-line class-methods-use-this
+  _onHeaderRendererOrBindingChanged() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  _headerRenderer(cell) {
+    const grid = cell.parentNode;
+
+    let checkbox = cell.querySelector('descope-checkbox');
+    if (!checkbox) {
+      checkbox = createCheckboxEle();
+
+      checkbox.addEventListener('input', () => {
+        const isAllItemsSelected = getIsAllItemsSelected(grid);
+        if (isAllItemsSelected) {
+          grid.selectedItems = [];
+        } else {
+          grid.selectedItems = grid.items;
+        }
+      });
+
+      cell.appendChild(checkbox);
+    }
+
+    checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _defaultRenderer(cell, col, model) {
+    const grid = cell.parentNode;
+
+    let checkbox = cell.querySelector('descope-checkbox');
+    if (!checkbox) {
+      checkbox = createCheckboxEle();
+      cell.appendChild(checkbox);
+    }
+
+    checkbox.onchange = () => {
+      checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
+    };
+
+    checkbox.setAttribute('checked', model.selected);
+  }
+}

package/src/components/descope-grid/descope-grid-selection-column/index.js

@@ -0,0 +1,7 @@
+import '../../boolean-fields/descope-checkbox';
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { GridSelectionColumnClass } from './GridSelectionColumnClass';
+
+export const componentName = getComponentName('grid-selection-column');
+
+customElements.define(componentName, GridSelectionColumnClass);

package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-param-reassign */
+import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
+
+export class GridTextColumnClass extends GridSortColumn {
+  get sortable() {
+    return this.getAttribute('sortable') === 'true';
+  }
+
+  _defaultRenderer(cell, _col, model) {
+    const data = model.item[this.path] || '';
+    const content = Array.isArray(data) ? data.join(', ') : data;
+
+    this.__setTextContent(cell, content);
+    cell.title = content;
+  }
+
+  _defaultHeaderRenderer(root, _column) {
+    if (this.sortable) {
+      super._defaultHeaderRenderer(root, _column);
+
+      return;
+    }
+
+    this.__setTextContent(root, this.__getHeader(this.header, this.path));
+  }
+}

package/src/components/descope-grid/descope-grid-text-column/index.js

@@ -0,0 +1,6 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { GridTextColumnClass } from './GridTextColumnClass';
+
+export const componentName = getComponentName('grid-text-column');
+
+customElements.define(componentName, GridTextColumnClass);

package/src/components/descope-grid/helpers.js

@@ -0,0 +1,74 @@
+import { toTitle } from '../../helpers';
+
+export const isValidDataType = (data) => {
+  const isValid = Array.isArray(data);
+  if (!isValid) {
+    // eslint-disable-next-line no-console
+    console.error('data must be an array, received:', data);
+  }
+
+  return isValid;
+};
+
+export const isPlainObject = (value) => value?.constructor === Object;
+
+const isXml = (str) => /^\s*<[\s\S]*>/.test(str);
+
+const escapeXML = (s) => {
+  const dom = document.createElement('div');
+  dom.textContent = s;
+  return dom.innerHTML;
+};
+
+export const getValueType = (value) => {
+  if (isPlainObject(value)) return 'object';
+  if (Array.isArray(value)) return 'array';
+  if (isXml(value)) return 'xml';
+
+  return 'text';
+};
+
+export const renderCodeSnippet = (value, lang) =>
+  `<descope-code-snippet lang="${lang}" class="row-details__value code">${value}</descope-code-snippet>`;
+
+export const renderText = (text) =>
+  `<div class="row-details__value text" title="${text}">${text}</div>`;
+const renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');
+const renderXml = (value) => renderCodeSnippet(escapeXML(value), 'xml');
+
+const defaultRowDetailsValueRenderer = (value) => {
+  const valueType = getValueType(value);
+
+  if (valueType === 'object') {
+    return renderJson(value);
+  }
+
+  if (valueType === 'xml') {
+    return renderXml(value);
+  }
+
+  if (valueType === 'array') {
+    if (value.some((v) => getValueType(v) === 'object')) {
+      return renderJson(value);
+    }
+    return renderText(value.join(',\n'));
+  }
+
+  return renderText(value);
+};
+
+export const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
+  return `
+  <div class="row-details">
+  ${Object.entries(item)
+    .map(
+      ([key, value]) =>
+        `<div class="row-details__item" >
+          <div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
+          ${defaultRowDetailsValueRenderer(value)}
+        </div>`
+    )
+    .join('\n')}
+</div>
+  `;
+};

package/src/components/descope-grid/index.js

@@ -0,0 +1,12 @@
+import '@vaadin/grid';
+import './descope-grid-text-column';
+import './descope-grid-custom-column';
+import './descope-grid-selection-column';
+import './descope-grid-item-details-column';
+import '../descope-code-snippet'; // this is needed for the details panel
+
+import { componentName, GridClass } from './GridClass';
+
+customElements.define(componentName, GridClass);
+
+export { GridClass };

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -0,0 +1,363 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';
+import { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';
+import { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
+
+export const componentName = getComponentName('hybrid-field');
+
+const attrs = {
+  shared: [
+    'bordered',
+    'full-width',
+    'label-type',
+    'size',
+    'disabled',
+    'readonly',
+    'required',
+    'st-host-direction',
+    'st-error-message-icon',
+    'st-error-message-icon-size',
+    'st-error-message-icon-padding',
+  ],
+  email: [
+    'label',
+    'placeholder',
+    'data-errormessage-value-missing-email',
+    'data-errormessage-pattern-mismatch-email',
+    'external-input',
+  ],
+  phone: {
+    countryCode: [
+      'phone-input-label',
+      'country-input-label',
+      'country-input-placeholder',
+      'restrict-countries',
+      'default-code',
+      'phone-minlength',
+      'data-errormessage-value-missing-phone',
+    ],
+    inputBox: [
+      'label',
+      'restrict-countries',
+      'default-code',
+      'phone-minlength',
+      'data-errormessage-value-missing-phone',
+    ],
+  },
+};
+
+const attrMap = {
+  email: {
+    'data-errormessage-value-missing-email': 'data-errormessage-value-missing',
+    'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',
+  },
+  phone: {
+    'phone-input-label': 'label',
+    'phone-minlength': 'minlength',
+    'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',
+  },
+};
+
+const EMAIL_FIELD = 'descope-email-field';
+const PHONE_FIELD = 'descope-phone-field';
+const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: 'div',
+});
+
+class RawHybridField extends BaseClass {
+  #isReportedValidity = false;
+
+  #selectionStart;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		  :host {
+        display: inline-flex;
+        box-sizing: border-box;
+        padding: 0;
+        gap: 0;
+      }
+      .wrapper {
+        display: grid;
+        width: 100%;
+      }
+      descope-email-field,
+      descope-phone-field,
+      descope-phone-input-box-field {
+        grid-area: 1/1;
+        width: 100%;
+        height: 100%;
+      }
+      .hidden {
+        visibility: hidden;
+      }        
+		</style>
+    <div class="wrapper">
+      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
+      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+    </div>
+		`;
+  }
+
+  get isExternalInput() {
+    return this.getAttribute('external-input') === 'true';
+  }
+
+  get emailInputEle() {
+    return this.isExternalInput ? this.emailInput.externalInput : this.emailInput.inputElement;
+  }
+
+  get phoneVariant() {
+    const isInputBox = this.getAttribute('phone-variant') === 'inputBox';
+    return isInputBox ? this.phoneInputBoxInput : this.phoneCountryCodeInput;
+  }
+
+  get defaultCode() {
+    const firstItem = this.phoneCountryCodeInput.countryCodes?.[0] || '';
+    return this.getAttribute('default-code') || firstItem;
+  }
+
+  get activeInputEle() {
+    if (this.activeInput === this.emailInput) {
+      return this.emailInputEle;
+    }
+    return this.phoneVariant.phoneNumberInputEle;
+  }
+
+  get value() {
+    return this.activeInput?.value || '';
+  }
+
+  set value(val) {
+    this.handleActiveInput(val);
+    this.activeInput.value = val;
+  }
+
+  async init() {
+    super.init?.();
+
+    this.initInputs();
+    this.updateAttrs();
+    this.toggleInputVisibility();
+
+    await this.waitForInputs();
+
+    this.initInputEles();
+    this.overrideEmailInputType();
+    this.overrideEmailSetAttribute();
+  }
+
+  waitForInputs() {
+    return new Promise((resolve) => {
+      const check = setInterval(() => {
+        if (this.emailInputEle) {
+          clearInterval(check);
+          resolve();
+        }
+      });
+    });
+  }
+
+  initInputs() {
+    this.emailInput = this.shadowRoot.querySelector(EMAIL_FIELD);
+    this.phoneCountryCodeInput = this.shadowRoot.querySelector(PHONE_FIELD);
+    this.phoneInputBoxInput = this.shadowRoot.querySelector(PHONE_INPUT_BOX_FIELD);
+
+    this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];
+
+    this.activeInput = this.emailInput;
+  }
+
+  // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event
+  initInputEles() {
+    const inputEles = [
+      this.emailInputEle,
+      this.phoneCountryCodeInput.phoneNumberInputEle,
+      this.phoneInputBoxInput.phoneNumberInputEle,
+    ];
+
+    inputEles.forEach((ele) => {
+      ele.addEventListener('input', this.onValueChange.bind(this));
+    });
+  }
+
+  overrideEmailInputType() {
+    this.emailInputEle.addEventListener('focus', () => {
+      this.emailInputEle.setAttribute('type', 'text');
+    });
+    this.emailInputEle.addEventListener('blur', () => {
+      setTimeout(() => {
+        this.emailInputEle.setAttribute('type', 'email');
+      });
+    });
+  }
+
+  // We want to prevent Vaadin from changing the input type to `email`
+  // otherwise, we cannot get the selectionStart from the input.
+  overrideEmailSetAttribute() {
+    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);
+    this.emailInputEle.setAttribute = (name, value) => {
+      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {
+        return origEmailSetAttr(name, value);
+      }
+      return false;
+    };
+  }
+
+  updateAttrs() {
+    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });
+
+    forwardAttrs(this, this.phoneCountryCodeInput, {
+      includeAttrs: attrs.phone.countryCode,
+      mapAttrs: attrMap.phone,
+    });
+
+    forwardAttrs(this, this.phoneInputBoxInput, {
+      includeAttrs: attrs.phone.inputBox,
+      mapAttrs: attrMap.phone,
+    });
+
+    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+
+    setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));
+  }
+
+  onValueChange() {
+    this.#selectionStart = this.activeInputEle.selectionStart;
+    this.handleActiveInput(this.activeInput.value);
+  }
+
+  handleActiveInput(val) {
+    const expectedActiveInput = isNumericValue(val) ? this.phoneVariant : this.emailInput;
+
+    if (this.activeInput !== expectedActiveInput) {
+      this.setActiveInput(expectedActiveInput);
+    }
+  }
+
+  setActiveInput(expectedActiveInput) {
+    const val = this.activeInput.value;
+    this.activeInput = expectedActiveInput;
+    this.setActiveInputValue(val);
+    if (this.#isReportedValidity) this.activeInput.reportValidity();
+    this.setActiveInputSelectionStart();
+    this.toggleInputVisibility();
+  }
+
+  setActiveInputSelectionStart() {
+    setTimeout(() => {
+      this.activeInputEle.focus();
+      this.activeInputEle.setSelectionRange?.(this.#selectionStart, this.#selectionStart);
+    });
+  }
+
+  setActiveInputValue(val) {
+    const sanitizedVal = sanitizeValue(val);
+    const isPhoneField = this.activeInput.localName === PHONE_FIELD;
+    const value = isPhoneField
+      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`
+      : sanitizedVal;
+    this.activeInput.value = value;
+  }
+
+  toggleInputVisibility() {
+    this.inputs.forEach((input) => {
+      input !== this.activeInput ? input.classList.add('hidden') : input.classList.remove('hidden');
+    });
+  }
+
+  reportValidity() {
+    this.#isReportedValidity = true;
+
+    const ele = this.activeInputEle;
+
+    // On reportValidity we want to set the caret at the end of the input value.
+    // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,
+    // regardless the existing value.
+    setTimeout(() => {
+      ele.setSelectionRange?.(ele.value.length, ele.value.length);
+    });
+
+    return this.activeInput.reportValidity();
+  }
+
+  checkValidity() {
+    return this.activeInput.checkValidity();
+  }
+}
+
+export const HybridFieldClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: [
+        { selector: () => 'descope-email-field', property: 'direction' },
+        { selector: () => 'descope-phone-field', property: 'direction' },
+        { selector: () => 'descope-phone-input-box-field', property: 'direction' },
+      ],
+      errorMessageIcon: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIcon,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,
+        },
+      ],
+      errorMessageIconSize: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconSize,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,
+        },
+      ],
+      errorMessageIconPadding: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,
+        },
+      ],
+      errorMessageIconRepeat: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,
+        },
+      ],
+      errorMessageIconPosition: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
+        },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawHybridField);

package/src/components/descope-hybrid-field/helpers.js

@@ -0,0 +1,5 @@
+const NUMERIC_RE = /^\d+$/;
+
+export const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceAll('-', ''));
+
+export const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');

package/src/components/descope-hybrid-field/index.js

@@ -0,0 +1,9 @@
+import '../descope-email-field';
+import '../phone-fields/descope-phone-field';
+import '../phone-fields/descope-phone-input-box-field';
+
+import { componentName, HybridFieldClass } from './HybridFieldClass';
+
+customElements.define(componentName, HybridFieldClass);
+
+export { HybridFieldClass };

package/src/components/descope-icon/IconClass.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-use-before-define */
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createIcon } from './helpers';
+
+export const componentName = getComponentName('icon');
+
+class RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {
+  static get observedAttributes() {
+    return ['src'];
+  }
+
+  #icon;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: hidden;
+			}
+			:host {
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+	`;
+  }
+
+  get src() {
+    return this.getAttribute('src');
+  }
+
+  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
+  // with the value from the `st-fill` attribute
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
+      );
+    });
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (attrName === 'src') {
+      createIcon(this.src).then((res) => {
+        this.innerHTML = '';
+        if (res) {
+          const clonedNode = res.cloneNode(true);
+          this.updateFillColor(clonedNode);
+          this.appendChild(clonedNode);
+        }
+      });
+    }
+  }
+}
+
+export const IconClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawIcon);