@descope/web-components-ui 0.0.1

package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass.js

@@ -0,0 +1,108 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { createBaseButtonSelectionGroupInternalClass } from '../createBaseButtonSelectionGroupInternalClass';
+
+export const componentName = getComponentName('button-multi-selection-group-internal');
+
+export class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
+  componentName
+) {
+  #getSelectedNodes() {
+    return this.items.filter((item) => item.hasAttribute('selected'));
+  }
+
+  onClick(e) {
+    if (e.target !== e.currentTarget) {
+      if (this.#getSelectedNodes().includes(e.target)) {
+        e.target.removeAttribute('selected');
+      } else {
+        e.target.setAttribute('selected', 'true');
+      }
+      this.dispatchChange();
+    }
+  }
+
+  get value() {
+    return this.#getSelectedNodes().map((node) => node.value);
+  }
+
+  set value(values) {
+    this.items.forEach((item) => {
+      if (values.includes(item.value)) {
+        item.setAttribute('selected', 'true');
+      } else {
+        item.removeAttribute('selected');
+      }
+    });
+  }
+
+  get minItemsSelection() {
+    return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+  }
+
+  get maxItemsSelection() {
+    return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #isValidDataType(data) {
+    const isValid = Array.isArray(data);
+    if (!isValid) {
+      // eslint-disable-next-line no-console
+      console.error('default-values must be an array, received:', data);
+    }
+
+    return isValid;
+  }
+
+  get defaultValues() {
+    const defaultValuesAttr = this.getAttribute('default-values');
+    if (defaultValuesAttr) {
+      try {
+        const defaultValues = JSON.parse(defaultValuesAttr);
+        if (this.#isValidDataType(defaultValues)) {
+          return defaultValues;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('could not parse data string from attribute "default-values" -', e.message);
+      }
+    }
+    return [];
+  }
+
+  setDefaultValues() {
+    // we want to defer this action until all attributes are synced
+    setTimeout(() => {
+      if (this.defaultValues) {
+        this.value = this.defaultValues;
+        this.setCustomValidity();
+      }
+    });
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value.length) {
+      return { valueMissing: true };
+    }
+    // If the field is not required, no minimum selection can be set
+    if (this.isRequired && this.minItemsSelection && this.value.length < this.minItemsSelection) {
+      return {
+        rangeUnderflow: true,
+      };
+    }
+    if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
+      return {
+        rangeOverflow: true,
+      };
+    }
+    return {};
+  }
+
+  init() {
+    super.init();
+
+    this.setDefaultValues();
+
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
+  }
+}

package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/index.js

@@ -0,0 +1,8 @@
+import {
+  componentName,
+  ButtonMultiSelectionGroupInternalClass,
+} from './ButtonMultiSelectionGroupInternalClass';
+
+customElements.define(componentName, ButtonMultiSelectionGroupInternalClass);
+
+export { ButtonMultiSelectionGroupInternalClass };

package/src/components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass.js

@@ -0,0 +1,67 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { componentName as descopeInternalComponentName } from '../descope-button-selection-group-internal/ButtonSelectionGroupInternalClass';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import {
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMappings,
+  buttonSelectionGroupStyles,
+} from '../baseButtonSelectionGroup';
+
+export const componentName = getComponentName('button-selection-group');
+
+const buttonSelectionGroupMixin = (superclass) =>
+  class ButtonMultiSelectionGroupMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+      	name="button-selection-group"
+      	slot="input"
+        tabindex="-1"
+        part="internal-component"
+      >
+        <slot></slot>
+      </${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
+    }
+  };
+
+export const ButtonSelectionGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...buttonSelectionGroupMappings,
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => buttonSelectionGroupStyles,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default ButtonSelectionGroupClass;

package/src/components/button-selection-group-fields/descope-button-selection-group/index.js

@@ -0,0 +1,7 @@
+import { componentName, ButtonSelectionGroupClass } from './ButtonSelectionGroupClass';
+import '../descope-button-selection-group-internal';
+import '../descope-button-selection-group-item';
+
+customElements.define(componentName, ButtonSelectionGroupClass);
+
+export { ButtonSelectionGroupClass };

package/src/components/button-selection-group-fields/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js

@@ -0,0 +1,77 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { createBaseButtonSelectionGroupInternalClass } from '../createBaseButtonSelectionGroupInternalClass';
+
+export const componentName = getComponentName('button-selection-group-internal');
+
+export class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
+  componentName
+) {
+  getSelectedNode() {
+    return this.items.find((item) => item.hasAttribute('selected'));
+  }
+
+  get allowDeselect() {
+    return this.getAttribute('allow-deselect') === 'true';
+  }
+
+  removeSelected() {
+    this.getSelectedNode()?.removeAttribute('selected');
+  }
+
+  onClick(e) {
+    if (e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode() && this.allowDeselect) {
+        this.removeSelected();
+      } else {
+        this.setSelected(e.target);
+      }
+      this.dispatchChange();
+    }
+  }
+
+  setSelected(node) {
+    if (node !== this.getSelectedNode()) {
+      this.removeSelected();
+      node?.setAttribute('selected', 'true');
+    }
+  }
+
+  get defaultValue() {
+    return this.getAttribute('default-value');
+  }
+
+  setDefaultValue() {
+    // we want to defer this action until all attributes are synched
+    setTimeout(() => {
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+        this.setCustomValidity();
+      }
+    });
+  }
+
+  get value() {
+    return this.getSelectedNode()?.value || '';
+  }
+
+  set value(value) {
+    const node = this.items.find((child) => child.value === value);
+    this.setSelected(node);
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    super.init();
+
+    this.setDefaultValue();
+
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
+  }
+}

package/src/components/button-selection-group-fields/descope-button-selection-group-internal/index.js

@@ -0,0 +1,8 @@
+import {
+  componentName,
+  ButtonSelectionGroupInternalClass,
+} from './ButtonSelectionGroupInternalClass';
+
+customElements.define(componentName, ButtonSelectionGroupInternalClass);
+
+export { ButtonSelectionGroupInternalClass };

package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js

@@ -0,0 +1,115 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
+import { createBaseClass } from '../../../baseClasses/createBaseClass';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import { ButtonClass } from '../../descope-button/ButtonClass';
+
+export const componentName = getComponentName('button-selection-group-item');
+
+class RawSelectItem extends createBaseClass({
+  componentName,
+  baseSelector: ':host > descope-button',
+}) {
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'contained';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(value) {
+    this.setAttribute('value', value);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      descope-button {
+        max-width: 100%;
+      }
+			descope-button > slot {
+				width: 100%;
+				overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+			}
+			:host {
+				display: inline-block;
+        max-width: 100%
+			}
+		</style>
+    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
+      <slot></slot>
+    </descope-button>
+	`;
+
+    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
+  }
+
+  handleFocus() {
+    this.shadowRoot.querySelector('descope-button')?.focus();
+  }
+
+  focus() {
+    this.handleFocus();
+  }
+
+  init() {
+    super.init();
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.handleFocus();
+      }
+    });
+  }
+}
+
+export const ButtonSelectionGroupItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostDirection: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.hostDirection,
+      },
+      backgroundColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.backgroundColor,
+      },
+      labelTextColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.labelTextColor,
+      },
+      borderColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderColor,
+      },
+      borderWidth: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderWidth,
+      },
+      borderStyle: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderStyle,
+      },
+      borderRadius: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderRadius,
+      },
+      outlineColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.outlineColor,
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSelectItem);

package/src/components/button-selection-group-fields/descope-button-selection-group-item/index.js

@@ -0,0 +1,6 @@
+import { componentName, ButtonSelectionGroupItemClass } from './ButtonSelectionGroupItemClass';
+import '../../descope-button';
+
+customElements.define(componentName, ButtonSelectionGroupItemClass);
+
+export { ButtonSelectionGroupItemClass };

package/src/components/descope-alert/AlertClass.js

@@ -0,0 +1,105 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { EnrichedTextClass } from '../descope-enriched-text/EnrichedTextClass';
+
+export const componentName = getComponentName('alert');
+
+class RawAlert extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        display: flex;
+        width: 100%;
+      }
+      .icon {
+        flex-shrink: 0;
+      }
+      .content {
+        display: flex;
+        flex-wrap: wrap;
+        white-space: normal;
+        overflow-wrap: break-word;
+      }
+    </style>
+    <div>
+      <div class="icon"></div>
+      <div class="content">
+        <descope-enriched-text>
+          <slot></slot>
+        </descope-enriched-text>
+      </div>
+    </div>
+    `;
+  }
+
+  init() {
+    super.init?.();
+
+    this.slotEle = this.shadowRoot.querySelector('slot');
+    this.textComp = this.shadowRoot.querySelector('descope-enriched-text');
+
+    this.slotEle.addEventListener('slotchange', this.handleSlotChange.bind(this));
+
+    forwardAttrs(this, this.textComp, ['variant', 'full-width', 'link-target-blank']);
+  }
+
+  handleSlotChange() {
+    const assignedNodes = this.slotEle.assignedNodes({ flatten: true });
+    if (!assignedNodes.length) return;
+    this.textComp.textContent = assignedNodes[0]?.textContent || '';
+  }
+}
+
+const { icon } = {
+  icon: { selector: () => '.icon' },
+};
+
+export const AlertClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      textColor: {
+        selector: EnrichedTextClass.componentName,
+        property: EnrichedTextClass.cssVarList.textColor,
+      },
+      backgroundColor: {},
+      borderColor: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderRadius: {},
+      fontSize: [
+        {},
+        {
+          selector: EnrichedTextClass.componentName,
+          property: EnrichedTextClass.cssVarList.fontSize,
+        },
+      ],
+      gap: {},
+      horizontalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      verticalPadding: [{ property: 'padding-right' }, { property: 'padding-left' }],
+      alignItems: {},
+      justifyContent: {},
+      icon: [
+        { ...icon, property: 'content' },
+        { ...icon, property: 'display', fallback: 'none' },
+      ],
+      iconSize: [
+        { ...icon, property: 'width' },
+        { ...icon, property: 'height' },
+      ],
+    },
+  }),
+  createStyleMixin({ componentNameOverride: getComponentName('enriched-text') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawAlert);

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

@@ -0,0 +1,6 @@
+import '../descope-enriched-text';
+import { componentName, AlertClass } from './AlertClass';
+
+customElements.define(componentName, AlertClass);
+
+export { AlertClass };

package/src/components/descope-apps-list/AppsListClass.js

@@ -0,0 +1,97 @@
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+} from '../../mixins';
+import { createDynamicDataMixin } from '../../mixins/createDynamicDataMixin';
+import { TextClass } from 'descope-text/class';
+
+export const componentName = getComponentName('apps-list');
+
+const limitAbbreviation = (str, limit = 2) =>
+  str
+    .trim()
+    .split(' ')
+    .splice(0, limit)
+    .map((s) => s[0]?.toUpperCase())
+    .join('');
+
+const itemRenderer = ({ name, icon, url }, _, ref) => `
+  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+    <descope-list-item>
+    <descope-avatar
+      ${icon ? `img="${icon}"` : ''}
+      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
+      size=${ref.size}
+    ></descope-avatar>
+    <descope-text
+      variant="body1"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+const customMixin = (superclass) =>
+  class AppsListMixinClass extends superclass {
+    get size() {
+      return this.getAttribute('size') || 'sm';
+    }
+  };
+
+export const AppsListClass = compose(
+  createStyleMixin({
+    mappings: {
+      maxHeight: { selector: () => ':host' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsFontWeight: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontWeight,
+      },
+      itemsFontSize: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      itemsTextAlign: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: ['empty-state'],
+    wrappedEleName: 'descope-list',
+    excludeAttrsSync: ['tabindex', 'class', 'empty'],
+    componentName,
+    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+      }
+    `,
+  })
+);

package/src/components/descope-apps-list/index.js

@@ -0,0 +1,8 @@
+import '../descope-list';
+import 'descope-avatar';
+import 'descope-text';
+import { componentName, AppsListClass } from './AppsListClass';
+
+customElements.define(componentName, AppsListClass);
+
+export { AppsListClass };

package/src/components/descope-badge/BadgeClass.js

@@ -0,0 +1,57 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('badge');
+
+class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
+
+export const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+      textTransform: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);

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

@@ -0,0 +1,5 @@
+import { componentName, BadgeClass } from './BadgeClass';
+
+customElements.define(componentName, BadgeClass);
+
+export { BadgeClass };