@descope/web-components-ui 0.0.1

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -0,0 +1,245 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import deleteIcon from './delete.svg';
+import editIcon from './edit.svg';
+import { TextClass } from 'descope-text/class';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { BadgeClass } from '../descope-badge/BadgeClass';
+
+export const componentName = getComponentName('user-attribute');
+class RawUserAttribute extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .root',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        .root {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+        }
+
+        .btn-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-grow: 0;
+        }
+
+        .text-wrapper {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        descope-text::part(text-wrapper) {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: initial;
+        }
+
+        descope-text {
+          display: inline-flex;
+        }
+
+        descope-badge {
+          margin-inline-end: 10px;
+        }
+
+        .hidden {
+          visibility: hidden;
+        }
+
+        descope-text[data-id="label-text"].required:after {
+          content: '*';
+          color: var(${TextClass.cssVarList.textColor});
+        }
+
+        :host([readonly="true"]) descope-button {
+          visibility: hidden;
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${editIcon}></vaadin-icon>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
+    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
+    this.badge = this.shadowRoot.querySelector('descope-badge');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onValueOrPlaceholderChange() {
+    const text = this.value || this.placeholder;
+    const mode = this.value ? 'primary' : 'secondary';
+
+    this.valueText.innerText = text;
+    this.valueText.setAttribute('title', text);
+    this.valueText.setAttribute('mode', mode);
+  }
+
+  onBadgeLabelChange() {
+    if (!this.badgeLabel) {
+      this.badge.style.display = 'none';
+    } else {
+      this.badge.innerText = this.badgeLabel;
+      this.badge.style.display = '';
+    }
+  }
+
+  onBadgeTooltipTextChange() {
+    this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
+  }
+
+  onIsRequiredChange() {
+    this.labelText.classList.toggle('required', this.isRequired);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  get placeholder() {
+    return this.getAttribute('placeholder') || '';
+  }
+
+  get isRequired() {
+    return this.getAttribute('required') === 'true';
+  }
+
+  get badgeLabel() {
+    return this.getAttribute('badge-label') || '';
+  }
+
+  get badgeTooltipText() {
+    return this.getAttribute('badge-tooltip-text') || '';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onValueOrPlaceholderChange();
+    this.onIsRequiredChange();
+    this.onBadgeLabelChange();
+    this.onBadgeTooltipTextChange();
+    this.handleDeleteButtonVisibility();
+
+    this.deleteButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
+    );
+
+    this.editButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return [
+      'label',
+      'value',
+      'placeholder',
+      'required',
+      'badge-label',
+      'badge-tooltip-text',
+    ].concat(super.observedAttributes);
+  }
+
+  handleDeleteButtonVisibility() {
+    this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'value' || name === 'placeholder') {
+      this.onValueOrPlaceholderChange();
+    } else if (name === 'required') {
+      this.onIsRequiredChange();
+    } else if (name === 'badge-label') {
+      this.onBadgeLabelChange();
+    } else if (name === 'badge-tooltip-text') {
+      this.onBadgeTooltipTextChange();
+    }
+
+    if (name === 'value' || name === 'required') {
+      this.handleDeleteButtonVisibility();
+    }
+  }
+}
+
+const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
+  host: { selector: () => ':host' },
+  textFields: { selector: 'descope-text' },
+  valueText: { selector: 'descope-text[data-id="value-text"]' },
+  labelText: { selector: 'descope-text[data-id="label-text"]' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+};
+
+export const UserAttributeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textFields, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...labelText, property: 'width' },
+      valueTextWidth: { ...valueText, property: 'width' },
+      badgeMaxWidth: { ...badge, property: 'max-width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAttribute);

package/src/components/descope-user-attribute/delete.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/edit.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/index.js

@@ -0,0 +1,9 @@
+import { componentName, UserAttributeClass } from './UserAttributeClass';
+import 'descope-text';
+import '../descope-button';
+import '../descope-badge';
+import '@vaadin/icon';
+
+customElements.define(componentName, UserAttributeClass);
+
+export { UserAttributeClass };

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -0,0 +1,204 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import greenVIcon from './green-v.svg';
+import { TextClass } from 'descope-text/class';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { BadgeClass } from '../descope-badge/BadgeClass';
+import { IconClass } from '../descope-icon/IconClass';
+
+export const componentName = getComponentName('user-auth-method');
+class RawUserAuthMethod extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .root',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        .root {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+        }
+
+        .btn-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-grow: 0;
+        }
+
+        .text-wrapper {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        descope-text::part(text-wrapper) {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: initial;
+        }
+
+        descope-text {
+          display: inline-flex;
+        }
+
+        .fulfilled-indicator {
+          width: 1em;
+          height: 1em;
+          display: flex;
+          align-items: center;
+          padding-inline-end: 1em;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        .hidden-btn {
+          width: 0;
+          overflow: hidden;
+        }
+
+        slot[name="method-icon"]{
+          display: inline-flex;
+          align-items: center;
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <slot name="method-icon"></slot>
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-button size="sm" variant="link" mode="primary">
+            <slot name="button-icon"></slot>
+          </descope-button>
+          <div class="fulfilled-indicator">
+            <vaadin-icon src=${greenVIcon}></vaadin-icon>
+          </div>
+          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
+        </div>
+      </div>
+		`;
+
+    this.button = this.shadowRoot.querySelector('descope-button');
+    this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onButtonLabelChange() {
+    let textSpanEle = this.button.querySelector('span');
+
+    if (this.buttonLabel) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        this.button.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = this.buttonLabel;
+    } else if (textSpanEle) {
+      this.button.removeChild(textSpanEle);
+    }
+  }
+
+  onFulfilledChange() {
+    this.button.classList.toggle('hidden', this.isFulfilled);
+    this.fulfilledIndicator.classList.toggle('hidden', !this.isFulfilled);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get buttonLabel() {
+    return this.getAttribute('button-label') || '';
+  }
+
+  get isFulfilled() {
+    return this.getAttribute('fulfilled') === 'true';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onButtonLabelChange();
+    this.onFulfilledChange();
+
+    this.button.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return ['label', 'fulfilled'].concat(super.observedAttributes);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'fulfilled') {
+      this.onFulfilledChange();
+    } else if (name === 'button-label') {
+      this.onButtonLabelChange();
+    }
+  }
+}
+
+const { host, textField, buttons, badge, textWrapper, methodIconSlot } = {
+  host: { selector: () => ':host' },
+  textField: { selector: 'descope-text' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+  methodIconSlot: { selector: 'slot[name="method-icon"]' },
+};
+
+export const UserAuthMethodClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textField, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...textField, property: 'width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+      iconSize: [
+        { ...methodIconSlot, property: 'width' },
+        { ...methodIconSlot, property: 'height' },
+      ],
+      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAuthMethod);

package/src/components/descope-user-auth-method/green-v.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM7.1 11.7L2.9 7.6L4.3 6.2L7 8.9L12 4L13.4 5.4L7.1 11.7Z" fill="#4CAF50"/>
+</svg>

package/src/components/descope-user-auth-method/index.js

@@ -0,0 +1,9 @@
+import { componentName, UserAuthMethodClass } from './UserAuthMethodClass';
+import 'descope-text';
+import '../descope-button';
+import '../descope-badge';
+import '@vaadin/icon';
+
+customElements.define(componentName, UserAuthMethodClass);
+
+export { UserAuthMethodClass };

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

@@ -0,0 +1,188 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { TextClass } from 'descope-text/class';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
+import { componentName as descopeInternalComponentName } from './descope-mappings-field-internal/MappingsFieldInternal';
+
+export const componentName = getComponentName('mappings-field');
+
+const customMixin = (superclass) =>
+  class MappingsFieldMixinClass extends superclass {
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          return JSON.parse(defaultValuesAttr);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "default-values" -', e.message);
+        }
+      }
+      return [];
+    }
+
+    setDefaultValues() {
+      const initialDefaultValues = this.defaultValues;
+      if (Object.keys(initialDefaultValues).length > 0) {
+        this.inputElement.value = initialDefaultValues;
+      }
+    }
+
+    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-value',
+          'label-attr',
+          'button-label',
+          'separator',
+          'options',
+          'default-values',
+          'invalid',
+          'readonly',
+          'disabled',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
+        ],
+      });
+
+      // This is required since when we remove the invalid attribute from the internal mappings field,
+      // we want to reflect the change in the parent component
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+
+      this.setDefaultValues();
+    }
+  };
+
+const {
+  host,
+  helperText,
+  errorMessage,
+  mappingItem,
+  labels,
+  labelsText,
+  valueLabel,
+  attrLabel,
+  separator,
+  labelsContainer,
+} = {
+  host: { selector: () => ':host' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
+  labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
+  labelsText: {
+    selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
+  },
+  valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
+  attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
+  separator: { selector: 'descope-mapping-item::part(separator)' },
+  labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
+};
+
+export const MappingsFieldClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      // we apply font-size also on the host so we can set its width with em
+      fontSize: [{}, host, { ...separator, property: 'margin-top' }],
+      fontFamily: [helperText, errorMessage, labels],
+      separatorFontSize: { ...separator, property: 'font-size' },
+      labelsFontSize: { ...labelsText, property: 'font-size' },
+      labelsLineHeight: [
+        { ...labelsText, property: 'line-height' },
+        { ...labels, property: 'line-height' },
+      ],
+      labelTextColor: [
+        { ...labels, property: TextClass.cssVarList.textColor },
+        { ...separator, property: 'color' },
+      ],
+      itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
+      valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
+      attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
+      labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
+      separatorWidth: {},
+      removeButtonWidth: {},
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    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-mappings-field-internal [part="labels"] {
+        display: none;
+        grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="value-label"],
+      descope-mappings-field-internal [part="labels"] [part="attr-label"] {
+        ${TextClass.cssVarList.fontWeight}: 500;
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="value-label"] {
+        grid-column: 1 / span 1;
+      }
+
+      descope-mappings-field-internal [part="labels"] [part="attr-label"] {
+        grid-column: 3 / span 1;
+      }
+
+      descope-mapping-item::part(wrapper) {
+        display: grid;
+        grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
+      }
+    `,
+    excludeAttrsSync: [
+      'tabindex',
+      'label-value',
+      'label-attr',
+      'button-label',
+      'options',
+      'error-message',
+    ],
+    componentName,
+  })
+);
+
+export default MappingsFieldClass;