@descope/web-components-ui 0.0.1

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -0,0 +1,543 @@
+import { compose } from '../../helpers';
+import {
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../helpers/componentHelpers';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  resetInputPlaceholder,
+  resetInputReadonlyStyle,
+  useHostExternalPadding,
+  inputFloatingLabelStyle,
+} from '../../helpers/themeHelpers/resetHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+  proxyInputMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('combo-box');
+
+const ComboBoxMixin = (superclass) =>
+  class ComboBoxMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['label-type'];
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ displayName, value, label }) => {
+      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+    };
+
+    #data;
+
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    set renderer(fn) {
+      // fn takes (root, comboBox, model) as arguments
+      this.baseElement.renderer = fn;
+    }
+
+    get loading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    set loading(val) {
+      if (val) {
+        this.setAttribute('loading', 'true');
+      } else {
+        this.removeAttribute('loading');
+      }
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          if (this.isValidDataType(data)) {
+            return data;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "data" -', e.message);
+        }
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    // 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('data must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      if (this.#data || this.getAttribute('data')) {
+        const template = this.getItemsTemplate();
+        this.innerHTML = template;
+      }
+    }
+
+    handleSelectedItem() {
+      const { selectedItem } = this.baseElement;
+      const currentSelected = selectedItem?.['data-id'];
+
+      // If the selected item is still a child, there's no need to update the value
+      if (selectedItem && Array.from(this.children).includes(selectedItem)) {
+        return;
+      }
+
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected) {
+        this.value = currentSelected;
+      }
+
+      // otherwise, if default value is specified, set default value as selected item
+      if (!this.value) {
+        this.setDefaultValue();
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
+    }
+
+    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+    // field that it searches the value, and the finaly display value of the input.
+    // We provide a custom transform function to override that behavior.
+    setComboBoxDescriptor() {
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
+
+      const comboBox = this;
+
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
+              return;
+            }
+
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
+
+            if (transformedValue === this.value) {
+              return;
+            }
+
+            valueDescriptor.set.call(this, transformedValue);
+          },
+        },
+      });
+    }
+
+    // vaadin api is to set props on their combo box node,
+    // in order to avoid it, we are passing the children of this component
+    // to the items & renderer props, so it will be used as the combo box items
+    #onChildrenChange() {
+      const items = Array.from(this.children);
+
+      // we want the data-name attribute to be accessible as an object attribute
+      items.forEach((node) => {
+        Object.defineProperty(node, 'data-name', {
+          value: node.getAttribute('data-name'),
+          configurable: true,
+          writable: true,
+        });
+        Object.defineProperty(node, 'data-id', {
+          value: node.getAttribute('data-id'),
+          configurable: true,
+          writable: true,
+        });
+      });
+
+      this.baseElement.items = items;
+      setTimeout(() => {
+        // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+        this.handleSelectedItem();
+      }, 0);
+    }
+
+    // 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-combo-box-overlay');
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+      };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
+    }
+
+    #overrideRenderer() {
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
+    init() {
+      super.init?.();
+
+      // eslint-disable-next-line func-names
+      this.getValidity = function () {
+        if (!this.value && this.isRequired) {
+          return {
+            valueMissing: true,
+          };
+        }
+        return {};
+      };
+
+      this.setComboBoxDescriptor();
+      this.#overrideOverlaySettings();
+      this.#overrideRenderer();
+
+      // Set up observers - order matters here since renderItems can clear innerHTML
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeChildren(this, this.#onChildrenChange.bind(this));
+
+      this.setDefaultValue();
+
+      this.baseElement.addEventListener('selected-item-changed', () => {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      });
+    }
+
+    onLabelClick() {
+      if (this.isReadOnly || this.isDisabled) {
+        return;
+      }
+      this.focus();
+      this.setAttribute('opened', 'true');
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (oldValue !== newValue) {
+        if (attrName === 'label-type') {
+          if (newValue === 'floating') {
+            this.addEventListener('click', this.onLabelClick);
+          } else {
+            this.removeEventListener('click', this.onLabelClick);
+          }
+        }
+      }
+    }
+
+    setDefaultValue() {
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+      }
+    }
+
+    #getChildToSelect(val) {
+      return this.baseElement.items?.find((item) => item['data-id'] === val);
+    }
+
+    #preventSelectedItemChangeEventIfNeeded(val, selectedChild) {
+      // If the actual value didn't change, but the selected item did (the element changed),
+      // we want to stop the event propagation since it's not a real change
+      const shouldPreventItemChangeEvent =
+        val === this.value && selectedChild !== this.baseElement.selectedItem;
+      if (shouldPreventItemChangeEvent) {
+        this.baseElement.addEventListener(
+          'selected-item-changed',
+          (e) => {
+            e.stopImmediatePropagation();
+          },
+          { once: true, capture: true }
+        );
+      }
+    }
+
+    set value(val) {
+      const selectedChild = this.#getChildToSelect(val);
+      this.#preventSelectedItemChangeEventIfNeeded(val, selectedChild);
+      if (val && selectedChild) {
+        this.baseElement.selectedItem = selectedChild;
+      } else if (!selectedChild && this.allowCustomValue) {
+        this.baseElement.value = val;
+      } else {
+        this.baseElement.selectedItem = undefined;
+      }
+    }
+
+    get value() {
+      return this.baseElement.selectedItem?.['data-id'] || this.allowCustomValue
+        ? this.baseElement.__data.value || ''
+        : '';
+    }
+
+    get allowCustomValue() {
+      return this.getAttribute('allow-custom-value') === 'true';
+    }
+  };
+
+const {
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  clearButton,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+} = {
+  host: { selector: () => ':host' },
+  inputField: { selector: '::part(input-field)' },
+  inputElement: { selector: 'input' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  toggle: { selector: '::part(toggle-button)' },
+  clearButton: { selector: '::part(clear-button)' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const ComboBoxClass = 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],
+      fontFamily: [label, placeholder, inputField, helperText, errorMessage],
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+      inputHeight: { ...inputField, property: 'height' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      inputValueTextColor: { ...inputField, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputDropdownButtonCursor: [
+        { ...toggle, property: 'cursor' },
+        { ...clearButton, property: 'cursor' },
+      ],
+      inputDropdownButtonColor: [
+        { ...toggle, property: 'color' },
+        { ...clearButton, property: 'color' },
+      ],
+      inputDropdownButtonSize: [
+        { ...toggle, property: 'font-size' },
+        { ...clearButton, property: 'font-size' },
+      ],
+      inputDropdownButtonOffset: [
+        { ...toggle, property: 'margin-right' },
+        { ...toggle, property: 'margin-left' },
+      ],
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+      ],
+
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      placeholderOpacity: { ...placeholder, property: 'opacity' },
+      inputVerticalAlignment: { ...inputField, property: 'align-items' },
+      valueInputHeight: { ...inputElement, property: 'height' },
+      valueInputMarginBottom: { ...inputElement, property: 'margin-bottom' },
+
+      // we need to use the variables from the portal mixin
+      // so we need to use an arrow function on the selector
+      // for that to work, because ComboBox is not available
+      // at this time.
+      overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+      overlayTextColor: {
+        property: () => ComboBoxClass.cssVarList.overlay.textColor,
+      },
+      overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
+      overlayItemPaddingInlineStart: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
+      },
+      overlayItemPaddingInlineEnd: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
+      },
+    },
+  }),
+  draggableMixin,
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      backgroundColor: [
+        { selector: 'vaadin-combo-box-scroller' },
+        { selector: 'vaadin-combo-box-overlay::part(overlay)' },
+      ],
+      minHeight: { selector: 'vaadin-combo-box-overlay' },
+      margin: { selector: 'vaadin-combo-box-overlay' },
+      cursor: { selector: 'vaadin-combo-box-item' },
+      fontFamily: { selector: 'vaadin-combo-box-item' },
+      textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
+      fontSize: { selector: 'vaadin-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
+      itemPaddingInlineStart: {
+        selector: 'vaadin-combo-box-item',
+        property: 'padding-inline-start',
+      },
+      itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
+
+      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
+      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
+      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
+      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
+      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
+      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
+      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      loaderBorderColor: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-color',
+      },
+      loaderBorderRadius: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-radius',
+      },
+      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
+      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
+    },
+    forward: {
+      include: false,
+      attributes: ['size'],
+    },
+  }),
+  proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
+  componentNameValidationMixin,
+  ComboBoxMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-combo-box',
+    style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		${useHostExternalPadding(ComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle('vaadin-combo-box')}
+		${resetInputPlaceholder('vaadin-combo-box')}
+		${resetInputCursor('vaadin-combo-box')}
+
+		vaadin-combo-box {
+			padding: 0;
+			width: 100%;
+		}
+		vaadin-combo-box::before {
+			height: initial;
+		}
+		vaadin-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+			box-sizing: border-box;
+		}
+
+		vaadin-combo-box::part(input-field) {
+			padding: 0;
+			box-shadow: none;
+		}
+
+    vaadin-combo-box::part(toggle-button),
+    vaadin-combo-box::part(clear-button) {
+      align-self: center;
+    }
+
+    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {
+      display: none;
+    }
+
+    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+      opacity: 0;
+    }
+    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+      opacity: 0;
+    }
+
+    ${resetInputLabelPosition('vaadin-combo-box')}
+    ${inputFloatingLabelStyle()}
+		`,
+    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
+    // with the same name. Including it will cause Vaadin to calculate NaN size,
+    // and reset items to an empty array, and opening the list box with no items
+    // to display.
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
+    componentName,
+    includeForwardProps: ['items', 'renderer', 'selectedItem'],
+  })
+);

package/src/components/descope-combo-box/index.js

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

package/src/components/descope-container/ContainerClass.js

@@ -0,0 +1,65 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('container');
+
+class RawContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: auto;
+			}
+			:host {
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+	`;
+  }
+}
+
+export const ContainerClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostHeight: { selector: () => ':host', property: 'height' },
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsGrow: { selector: () => '::slotted(*)', property: 'flex-grow', fallback: '0' },
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      flexDirection: {},
+      justifyContent: {},
+      alignItems: {},
+      gap: {},
+      flexWrap: {},
+
+      backgroundColor: {},
+      backgroundImage: {},
+      backgroundPositionX: {},
+      backgroundPositionY: {},
+      backgroundSize: {},
+      backgroundRepeat: {},
+
+      color: {},
+      borderRadius: {},
+
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawContainer);

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

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

package/src/components/descope-date-field/DateCounterClass.js

@@ -0,0 +1,83 @@
+// DateCounterClass allows us to add several counters to the input, and use them seperately.
+// For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
+// between different ranges.
+export class DateCounter {
+  constructor({ id, min, max, placeholder }) {
+    this.id = id;
+    this.data = [];
+    this.min = min;
+    this.max = max;
+    this.placeholder = placeholder;
+  }
+
+  get #initialNumValue() {
+    return this.data.length ? this.numberValue : 0;
+  }
+
+  get numberValue() {
+    return Number(this.stringValue);
+  }
+
+  get stringValue() {
+    return (this.data.join('') || this.placeholder).padStart(this.length, '0');
+  }
+
+  get isFull() {
+    return this.numberValue * 10 > this.max || this.data.length === this.length;
+  }
+
+  get isEmpty() {
+    return this.stringValue === this.placeholder;
+  }
+
+  get length() {
+    return this.max.toString().length;
+  }
+
+  set(val) {
+    this.data = val.toString().split('');
+  }
+
+  add(num) {
+    this.data.push(num);
+
+    if (this.numberValue > this.max) {
+      this.data.length = 0;
+      this.data.push(num);
+    } else if (this.length < this.data.length) {
+      this.data.shift();
+    }
+
+    return num;
+  }
+
+  del() {
+    if (!this.data.filter((d) => d !== '0').filter(Boolean).length) {
+      this.data.length = 0;
+    } else {
+      this.data.pop();
+    }
+  }
+
+  clear() {
+    this.data = [];
+  }
+
+  inc(gap) {
+    this.replaceValue(this.#initialNumValue + (gap || 1));
+  }
+
+  dec(gap) {
+    this.replaceValue(this.#initialNumValue - (gap || 1));
+  }
+
+  isInRange(val) {
+    return val >= this.min && val <= this.max;
+  }
+
+  replaceValue(val) {
+    if (this.isInRange(val)) {
+      this.data = val.toString().padStart(this.length, 0).split('');
+    }
+  }
+}