@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,51 @@
+import DOMPurify from 'dompurify';
+
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+
+  const parser = new DOMParser();
+  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
+  return ele;
+};
+
+export const createIcon = async (src) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};

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

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

package/src/components/descope-image/ImageClass.js

@@ -0,0 +1,48 @@
+import { createStyleMixin, draggableMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+
+const observedAttributes = ['src', 'alt'];
+
+export const componentName = getComponentName('image');
+
+const BaseClass = createBaseClass({ componentName, baseSelector: ':host > img' });
+class RawImage extends BaseClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > img {
+				width: 100%;
+				height: 100%
+			}
+			:host {
+				display: inline-flex;
+			}
+		</style>
+		<img/>
+	`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
+  }
+}
+
+export const ImageClass = compose(
+  createStyleMixin({
+    mappings: {
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin
+)(RawImage);

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

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

package/src/components/descope-link/LinkClass.js

@@ -0,0 +1,71 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { TextClass } from 'descope-text/class';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		:host {
+			display: inline-block;
+      line-height: 1em;
+		}
+		:host a {
+			display: inline;
+		}
+		</style>
+		<div>
+			<descope-text>
+				<a>
+					<slot></slot>
+				</a>
+			</descope-text>
+		</div>
+		`;
+
+    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+      includeAttrs: ['href', 'target', 'tooltip'],
+      mapAttrs: {
+        tooltip: 'title',
+      },
+    });
+
+    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+      includeAttrs: ['mode', 'variant'],
+    });
+  }
+}
+
+const selectors = {
+  host: { selector: () => ':host' },
+  link: { selector: () => ':host a' },
+  anchor: {},
+  wrapper: { selector: () => ':host > div' },
+  text: { selector: () => TextClass.componentName },
+};
+
+const { anchor, text, host, wrapper, link } = selectors;
+
+export const LinkClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...text, property: 'direction' },
+      textAlign: wrapper,
+      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },
+      textColor: [
+        { ...anchor, property: 'color' },
+        { ...text, property: TextClass.cssVarList.textColor },
+      ],
+      cursor: anchor,
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLink);

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

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

package/src/components/descope-list/ListClass.js

@@ -0,0 +1,154 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { ListItemClass } from './ListItemClass';
+
+export const componentName = getComponentName('list');
+
+class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper' }) {
+  static get observedAttributes() {
+    return ['variant', 'readonly'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+	    /*css*/
+      .wrapper {
+        overflow: auto;
+        display: grid;
+        max-height: 100%;
+        width: 100%;
+      }
+
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+      slot[name="empty-state"] {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+      }
+
+      :host slot[name="empty-state"] {
+        display: none;
+      }
+      :host([empty]) slot[name="empty-state"] {
+        display: flex;
+      }
+      ::slotted(:not([slot])) {
+        width: 100%;
+      }
+      /*!css*/
+		</style>
+
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+  }
+
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
+
+  #handleEmptyState() {
+    if (this.items.length === 0) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'list';
+  }
+
+  #handleItemsVariant() {
+    this.items.forEach((item) => {
+      let listItem = item;
+      if (listItem.localName !== ListItemClass.componentName) {
+        listItem = item.querySelector(ListItemClass.componentName);
+      }
+
+      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
+      listItem.setAttribute('variant', listItemVariant);
+    });
+  }
+
+  init() {
+    super.init?.();
+
+    // we want new items to get the size
+    observeChildren(this, () => {
+      this.#handleEmptyState();
+      this.#handleItemsVariant();
+      this.#handleReadOnly();
+    });
+  }
+
+  get isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  #handleReadOnly() {
+    this.items.forEach((item) => {
+      if (this.isReadOnly) item.setAttribute('inert', '');
+      else item.removeAttribute('inert');
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (newValue === oldValue) return;
+
+    if (name === 'variant') {
+      this.#handleItemsVariant();
+    } else if (name === 'readonly') {
+      this.#handleReadOnly();
+    }
+  }
+}
+
+export const ListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      maxHeight: { selector: () => ':host' },
+      minHeight: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontFamily: {},
+      gap: {},
+
+      backgroundColor: {},
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+      gridTemplateColumns: {},
+      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
+      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
+      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
+      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      emptyStateTextFontFamily: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'font-family',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawList);

package/src/components/descope-list/ListItemClass.js

@@ -0,0 +1,56 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { activeableMixin } from '../../mixins/activableMixin';
+
+export const componentName = getComponentName('list-item');
+
+const customMixin = (superclass) =>
+  class ListItemMixinClass extends superclass {
+    constructor() {
+      super();
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        /*css*/
+        slot {
+            width: 100%;
+            display: flex;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+
+        /*!css*/
+      </style>
+      <slot></slot>
+    `;
+    }
+  };
+
+export const ListItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      padding: {},
+      backgroundColor: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+      borderRadius: {},
+      outline: {},
+      cursor: {},
+      gap: {},
+      maxWidth: { selector: () => ':host' },
+      alignItems: {},
+      flexDirection: {},
+      transition: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin,
+  activeableMixin
+)(createBaseClass({ componentName, baseSelector: 'slot' }));

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

@@ -0,0 +1,7 @@
+import { componentName as listComponentName, ListClass } from './ListClass';
+import { componentName as listItemComponentName, ListItemClass } from './ListItemClass';
+
+customElements.define(listComponentName, ListClass);
+customElements.define(listItemComponentName, ListItemClass);
+
+export { ListClass };

package/src/components/descope-loader-linear/LoaderLinearClass.js

@@ -0,0 +1,69 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('loader-linear');
+
+class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  static get componentName() {
+    return componentName;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes tilt {
+				0% { transform: translateX(0); }
+				50% { transform: translateX(400%); }
+			}
+			:host {
+				position: relative;
+				display: flex;
+			}
+			div::after {
+				content: '';
+				animation-name: tilt;
+				position: absolute;
+				left: 0;
+			}
+			:host > div {
+				width: 100%;
+			}
+		</style>
+		<div></div>
+	`;
+  }
+}
+
+const selectors = {
+  after: { selector: '::after' },
+  host: { selector: () => ':host' },
+};
+
+const { after, host } = selectors;
+
+export const LoaderLinearClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostDisplay: {},
+      hostWidth: { ...host, property: 'width' },
+      barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
+      barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
+      verticalPadding: [
+        { ...host, property: 'padding-top' },
+        { ...host, property: 'padding-bottom' },
+      ],
+      barBackgroundColor: { property: 'background-color' },
+      barColor: { ...after, property: 'background-color' },
+      barWidth: { ...after, property: 'width' },
+      animationDuration: [{}, after],
+      animationTimingFunction: [{}, after],
+      animationIterationCount: [{}, after],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLoaderLinear);

package/src/components/descope-loader-linear/index.js

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

package/src/components/descope-loader-radial/LoaderRadialClass.js

@@ -0,0 +1,50 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('loader-radial');
+
+class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
+  }
+}
+
+export const LoaderRadialClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostDisplay: { property: 'display' },
+      spinnerSize: [{ property: 'width' }, { property: 'height' }],
+      spinnerBorderWidth: { property: 'border-width' },
+      spinnerBorderStyle: { property: 'border-style' },
+      spinnerBorderRadius: { property: 'border-radius' },
+      spinnerQuadrant1Color: { property: 'border-top-color' },
+      spinnerQuadrant2Color: { property: 'border-bottom-color' },
+      spinnerQuadrant3Color: { property: 'border-right-color' },
+      spinnerQuadrant4Color: { property: 'border-left-color' },
+      animationDuration: {},
+      animationTimingFunction: {},
+      animationIterationCount: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLoaderRadial);

package/src/components/descope-loader-radial/index.js

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

package/src/components/descope-logo/LogoClass.js

@@ -0,0 +1,10 @@
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass';
+
+export const componentName = getComponentName('logo');
+
+export const LogoClass = createCssVarImageClass({
+  componentName,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});

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

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

package/src/components/descope-modal/ModalClass.js

@@ -0,0 +1,112 @@
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('modal');
+
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
+    }
+
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.style.display = 'none';
+
+      // vaadin-dialog might not be loaded in time
+      // in order to make sure it's loaded before this block is running
+      // we are wrapping it with setTimeout
+      setTimeout(() => {
+        // we want to sync descope-modal content through vaadin-dialog into the overlay
+        // so we are adding a slot to the overlay, which allows us to forward the content from
+        // vaadin-dialog to vaadin-dialog-overlay
+        this.baseElement.shadowRoot
+          .querySelector('vaadin-dialog-overlay')
+          .appendChild(document.createElement('slot'));
+
+        this.#overrideOverlaySettings();
+
+        // we need to always open the modal in `opened=false`
+        // to prevent it from rendering outside the dialog
+        // first, we have to run `overrideOverlaySettings` to setup
+        // the component.
+        this.handleOpened();
+      });
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
+      };
+      overlay._enterModalState = () => {};
+
+      overlay.close = () => false;
+    }
+  };
+
+export const ModalClass = compose(
+  createStyleMixin({
+    mappings: {
+      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
+      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
+      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      hostDisplay: {
+        selector: () => ':host(.descope-modal)',
+        property: 'display',
+        important: true,
+      },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
+      width: { selector: () => '::part(overlay)', property: 'width' },
+      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+    },
+    forward: {
+      include: false,
+      attributes: ['opened'],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-dialog',
+    style: () => ``,
+    excludeAttrsSync: ['tabindex', 'opened'],
+    componentName,
+  })
+);

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

@@ -0,0 +1,6 @@
+import '@vaadin/dialog';
+import { componentName, ModalClass } from './ModalClass';
+
+customElements.define(componentName, ModalClass);
+
+export { ModalClass };