@descope/web-components-ui 0.0.1

package/src/mixins/proxyInputMixin.js

@@ -0,0 +1,242 @@
+/* eslint-disable no-param-reassign */
+import { compose } from '../helpers';
+import { forwardAttrs, getComponentName } from '../helpers/componentHelpers';
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+import { createStyleMixin } from './createStyleMixin';
+import { inputValidationMixin } from './inputValidationMixin';
+
+const errorAttrs = ['invalid', 'required'];
+
+const forwardProps = (src, targets, property) => {
+  const targetArr = Array.isArray(targets) ? targets : [targets];
+
+  Object.defineProperty(src, property, {
+    set(v) {
+      targetArr.forEach((target) => {
+        target[property] = v;
+      });
+    },
+    get() {
+      return targets[0][property];
+    },
+    configurable: true,
+  });
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+  if (!ele) return undefined;
+
+  const nestingLevel = 10;
+
+  let nonSlotEle = ele;
+  for (let i = 0; i < nestingLevel; i++) {
+    [nonSlotEle] = nonSlotEle.assignedElements();
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
+  }
+  return undefined;
+};
+
+const proxyInputMixin =
+  ({
+    proxyProps = [],
+    // useProxyTargets flag allows to forwardProps to other targets, other than
+    // `this.inputElement`. It's to be used within `external-input` components,
+    // if needed
+    useProxyTargets = false,
+    // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
+    inputEvent = 'input',
+    triggerValidationEvents = [],
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
+  }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
+
+      #inputElement;
+
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+      constructor() {
+        super();
+
+        this.#inputElement = super.inputElement;
+      }
+
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
+
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
+
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
+
+        this.warnIfInputElementIsMissing();
+
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+
+        return this.#inputElement;
+      }
+
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
+
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
+
+      #handleErrorMessage() {
+        this.setAttribute('error-message', this.validationMessage);
+      }
+
+      // We do not want to show the default validity report tooltip
+      // So we are overriding the reportValidity fn to show the input's error message
+      reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+          this.#handleErrorMessage();
+          this.focus();
+        }
+      };
+
+      // we are keeping also the default reportValidity because there are some components that still using it
+      defaultReportValidity() {
+        return super.reportValidity();
+      }
+
+      init() {
+        super.init?.();
+
+        // vaadin sets invalid indication on blur
+        // we want invalid indication to appear only when calling reportValidity
+        // this is why we are overriding vaadin's setInvalid behavior
+        // to update only when the element is valid (so invalid indication will only be removed)
+        // and we are adding it in reportValidity
+        // eslint-disable-next-line func-names
+        this.baseElement._setInvalid = function (invalid) {
+          if (!invalid && this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        };
+
+        // We want to ensure that `input` events properly cross ShadowDOM boundries
+        // e.g. When we autofill a component's input with 1Password, for instance,
+        // the event is fired without `composed: true` and doesn't our component's
+        // ShadowDOM.
+        this.baseElement.addEventListener('input', (e) => {
+          if (!e.composed) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        });
+
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
+          });
+
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
+
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
+            this.#handleErrorMessage();
+          });
+
+          // sync properties
+          proxyProps.forEach((prop) => {
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
+            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
+          });
+
+          this.setSelectionRange = this.inputElement?.setSelectionRange?.bind(this.inputElement);
+
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
+      }
+    };
+
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
+
+export { composedProxyInputMixin as proxyInputMixin };

package/src/theme/components/alert.js

@@ -0,0 +1,88 @@
+import globals from '../globals';
+import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
+import { AlertClass } from '../../components/descope-alert/AlertClass';
+import { vars as textCompVars } from 'descope-text/theme';
+
+const globalRefs = getThemeRefs(globals);
+const vars = AlertClass.cssVarList;
+
+const alert = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.backgroundColor]: 'transparent',
+  [vars.iconSize]: '1.35em',
+  [vars.alignItems]: 'center',
+  [vars.borderRadius]: globalRefs.radius.md,
+  [vars.horizontalPadding]: '0',
+  [vars.verticalPadding]: '0',
+  [vars.gap]: `0.5em`,
+  [vars.fontSize]: useVar(textCompVars.fontSize),
+
+  mode: {
+    error: {
+      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
+      // [vars.icon]: `url(${icon})`,
+      [vars.textColor]: globalRefs.colors.error.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.error.main,
+      },
+    },
+    success: {
+      // Notice: If icon is empty, we need to remove it from the theme, to prevent it from rendering minimal layout
+      // [vars.icon]: '',
+      [vars.textColor]: globalRefs.colors.success.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.success.main,
+      },
+    },
+  },
+
+  spacing: {
+    xs: {
+      [vars.horizontalPadding]: globalRefs.spacing.xs,
+      [vars.verticalPadding]: globalRefs.spacing.xs,
+    },
+    sm: {
+      [vars.horizontalPadding]: globalRefs.spacing.sm,
+      [vars.verticalPadding]: globalRefs.spacing.sm,
+    },
+    md: {
+      [vars.horizontalPadding]: globalRefs.spacing.md,
+      [vars.verticalPadding]: globalRefs.spacing.md,
+    },
+    lg: {
+      [vars.horizontalPadding]: globalRefs.spacing.lg,
+      [vars.verticalPadding]: globalRefs.spacing.lg,
+    },
+    xl: {
+      [vars.horizontalPadding]: globalRefs.spacing.xl,
+      [vars.verticalPadding]: globalRefs.spacing.xl,
+    },
+  },
+
+  textAlign: {
+    left: {
+      [vars.justifyContent]: 'left',
+    },
+    center: {
+      [vars.justifyContent]: 'center',
+    },
+    right: {
+      [vars.justifyContent]: 'right',
+    },
+  },
+
+  _bordered: {
+    [vars.borderWidth]: globalRefs.border.xs,
+    [vars.borderColor]: 'transparent',
+    [vars.borderStyle]: 'solid',
+    [vars.borderWidth]: globalRefs.border.xs,
+    [vars.borderRadius]: globalRefs.radius.sm,
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default alert;
+export { vars };

package/src/theme/components/appsList.js

@@ -0,0 +1,36 @@
+import { AppsListClass } from '../../components/descope-apps-list/AppsListClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+export const vars = AppsListClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+const defaultHeight = '400px';
+
+const appsList = {
+  [vars.itemsFontWeight]: 'normal',
+  [vars.itemsTextAlign]: 'start',
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.maxHeight]: defaultHeight,
+
+  _empty: {
+    [vars.minHeight]: defaultHeight,
+  },
+
+  size: {
+    xs: {
+      [vars.itemsFontSize]: '14px',
+    },
+    sm: {
+      [vars.itemsFontSize]: '14px',
+    },
+    md: {
+      [vars.itemsFontSize]: '16px',
+    },
+    lg: {
+      [vars.itemsFontSize]: '20px',
+    },
+  },
+};
+
+export default appsList;

package/src/theme/components/badge.js

@@ -0,0 +1,71 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { BadgeClass } from '../../components/descope-badge/BadgeClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = BadgeClass.cssVarList;
+
+const badge = {
+  [vars.hostWidth]: 'fit-content',
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.textAlign]: 'center',
+
+  [vars.fontFamily]: globalRefs.fonts.font1.family,
+  [vars.fontWeight]: '400',
+
+  [vars.verticalPadding]: '0.25em',
+  [vars.horizontalPadding]: '0.5em',
+
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderRadius]: globalRefs.radius.xs,
+  [vars.borderColor]: 'transparent',
+  [vars.borderStyle]: 'solid',
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  mode: {
+    default: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.surface.light,
+      },
+    },
+    primary: {
+      [vars.textColor]: globalRefs.colors.primary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.primary.light,
+      },
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.secondary.light,
+      },
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.error.light,
+      },
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.success.light,
+      },
+    },
+  },
+};
+
+export default badge;
+export { vars };

package/src/theme/components/button.js

@@ -0,0 +1,133 @@
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
+import { componentName, ButtonClass } from '../../components/descope-button/ButtonClass';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = ButtonClass.cssVarList;
+
+const mode = {
+  primary: globalRefs.colors.primary,
+  secondary: globalRefs.colors.secondary,
+  success: globalRefs.colors.success,
+  error: globalRefs.colors.error,
+  surface: globalRefs.colors.surface,
+};
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
+
+const button = {
+  ...helperTheme,
+
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+
+  [compVars.cursor]: 'pointer',
+  [compVars.hostHeight]: '3em',
+  [compVars.hostWidth]: 'auto',
+  [compVars.hostDirection]: globalRefs.direction,
+
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderColor]: 'transparent',
+
+  [compVars.labelSpacing]: '0.25em',
+
+  [compVars.textAlign]: 'center', // default text align center
+  textAlign: {
+    right: { [compVars.textAlign]: 'right' },
+    left: { [compVars.textAlign]: 'left' },
+    center: { [compVars.textAlign]: 'center' },
+  },
+
+  [compVars.verticalPadding]: '1em',
+  [compVars.horizontalPadding]: '0.875em',
+
+  [compVars.outlineWidth]: globals.border.sm,
+  [compVars.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars.outlineStyle]: 'solid',
+  [compVars.outlineColor]: 'transparent',
+
+  [compVars.iconSize]: '1.5em',
+
+  size: {
+    xs: { [compVars.fontSize]: '12px' },
+    sm: { [compVars.fontSize]: '14px' },
+    md: { [compVars.fontSize]: '16px' },
+    lg: { [compVars.fontSize]: '18px' },
+  },
+
+  _square: {
+    [compVars.hostHeight]: '3em',
+    [compVars.hostWidth]: '3em',
+    [compVars.verticalPadding]: '0',
+  },
+
+  _fullWidth: {
+    [compVars.hostWidth]: '100%',
+  },
+
+  _loading: {
+    [compVars.cursor]: 'wait',
+    [compVars.labelTextColor]: helperRefs.main,
+  },
+
+  _disabled: {
+    [helperVars.main]: globalRefs.colors.surface.light,
+    [helperVars.dark]: globalRefs.colors.surface.dark,
+    [helperVars.light]: globalRefs.colors.surface.light,
+    [helperVars.contrast]: globalRefs.colors.surface.main,
+    [compVars.iconColor]: globalRefs.colors.surface.main,
+  },
+
+  variant: {
+    contained: {
+      [compVars.labelTextColor]: helperRefs.contrast,
+      [compVars.backgroundColor]: helperRefs.main,
+      _hover: {
+        [compVars.backgroundColor]: helperRefs.dark,
+        _loading: {
+          [compVars.backgroundColor]: helperRefs.main,
+        },
+      },
+      _active: {
+        [compVars.backgroundColor]: helperRefs.main,
+      },
+    },
+
+    outline: {
+      [compVars.labelTextColor]: helperRefs.main,
+      [compVars.borderColor]: helperRefs.main,
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.borderColor]: helperRefs.dark,
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.main,
+        [compVars.borderColor]: helperRefs.main,
+      },
+    },
+
+    link: {
+      [compVars.labelTextColor]: helperRefs.main,
+      [compVars.horizontalPadding]: '0.125em',
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.labelTextDecoration]: 'underline',
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.main,
+      },
+    },
+  },
+
+  _focused: {
+    [compVars.outlineColor]: helperRefs.light,
+  },
+};
+
+export default button;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js

@@ -0,0 +1,23 @@
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+export const createBaseButtonSelectionGroupMappings = (vars) => ({
+  [vars.hostDirection]: refs.direction,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.itemsSpacing]: globalRefs.spacing.sm,
+  [vars.hostWidth]: refs.width,
+
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+});

package/src/theme/components/buttonSelectionGroup/buttonMultiSelectionGroup.js

@@ -0,0 +1,11 @@
+import { ButtonMultiSelectionGroupClass } from '../../../components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
+import { createBaseButtonSelectionGroupMappings } from './baseButtonSelectionGroup';
+
+const vars = ButtonMultiSelectionGroupClass.cssVarList;
+
+const buttonMultiSelectionGroup = {
+  ...createBaseButtonSelectionGroupMappings(vars),
+};
+
+export default buttonMultiSelectionGroup;
+export { vars };

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js

@@ -0,0 +1,11 @@
+import { ButtonSelectionGroupClass } from '../../../components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+import { createBaseButtonSelectionGroupMappings } from './baseButtonSelectionGroup';
+
+const vars = ButtonSelectionGroupClass.cssVarList;
+
+const buttonSelectionGroup = {
+  ...createBaseButtonSelectionGroupMappings(vars),
+};
+
+export default buttonSelectionGroup;
+export { vars };

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -0,0 +1,34 @@
+import { ButtonSelectionGroupItemClass } from '../../../components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+export const vars = ButtonSelectionGroupItemClass.cssVarList;
+
+const buttonSelectionGroupItem = {
+  [vars.hostDirection]: 'inherit',
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+  [vars.labelTextColor]: globalRefs.colors.surface.contrast,
+  [vars.borderColor]: globalRefs.colors.surface.light,
+  [vars.borderStyle]: 'solid',
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.outlineColor]: 'transparent',
+  [vars.borderWidth]: globalRefs.border.xs,
+
+  _hover: {
+    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
+  },
+
+  _focused: {
+    [vars.outlineColor]: globalRefs.colors.surface.light,
+  },
+
+  _selected: {
+    [vars.borderColor]: globalRefs.colors.surface.contrast,
+    [vars.backgroundColor]: globalRefs.colors.surface.contrast,
+    [vars.labelTextColor]: globalRefs.colors.surface.main,
+  },
+};
+
+export default buttonSelectionGroupItem;