@descope/web-components-ui 0.0.1

package/src/components/descope-password/PasswordClass.js

@@ -0,0 +1,302 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  externalInputMixin,
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import passwordDraggableMixin from './passwordDraggableMixin';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  useHostExternalPadding,
+  inputFloatingLabelStyle,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('password');
+
+const customMixin = (superclass) =>
+  class PasswordFieldMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['manual-visibility-toggle'];
+    }
+
+    get manualToggleVisibility() {
+      return this.getAttribute('manual-visibility-toggle') === 'true';
+    }
+
+    init() {
+      super.init?.();
+      this.handleCaretOnVisibilityChange();
+      this.origSetPasswordVisible = this.baseElement._setPasswordVisible;
+      this.origSetFocused = this.baseElement._setFocused;
+      this.baseElement._setFocused = this.setFocus.bind(this);
+
+      this.initExternalInput();
+    }
+
+    initExternalInput() {
+      const externalInput = this.createExternalInput();
+      if (externalInput) {
+        this.handlePasswordVisibility(externalInput);
+      }
+    }
+
+    get caretPosition() {
+      return this.value?.length || 0;
+    }
+
+    handleCaretOnVisibilityChange() {
+      const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(
+        this.baseElement
+      );
+      this.baseElement._togglePasswordVisibility = () => {
+        setTimeout(() => {
+          origTogglePasswordVisibility();
+          this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
+          return false;
+        });
+      };
+    }
+
+    // We use `manual-visibility-toggle` to to toggle the password's visibility
+    // even if the input field is focused-out. However, on focusout - Vaadin resets
+    // password visibility. Since we don't want to override Vaadin's native setFocus
+    // function (which is part of their FocusMixin).
+    // So, here we override the part of logic that runs within Vaadin's setFocus that reports
+    // the password visibility state. This logic is part of our `manual-visibility-toggle` only.
+    setFocus(focused) {
+      if (this.manualToggleVisibility) {
+        this.baseElement._setPasswordVisible = () => {};
+      }
+      this.origSetFocused.call(this.baseElement, focused);
+      this.baseElement._setPasswordVisible = this.origSetPasswordVisible.bind(this.baseElement);
+    }
+
+    resetPasswordVisibilityToggle() {
+      this.baseElement._setPasswordVisible = this.origSetPasswordVisible;
+      this.baseElement._setFocused = this.origSetFocus;
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    }
+
+    // override vaadin's password visibility toggle.
+    // we need this override in order to to resolve the external input `focus` race condition,
+    // which is caused due to the focus sync between the two inputs.
+    handlePasswordVisibility(externalInput) {
+      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
+      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
+      this.baseElement
+        .querySelector('vaadin-password-field-button')
+        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
+
+      // disable vaadin's `_passwordVisibleChanged` observer
+      this.baseElement._passwordVisibleChanged = () => {};
+
+      // override vaadin's `_togglePasswordVisibility`
+      this.baseElement._togglePasswordVisibility = () => {
+        const currVisibility = externalInput.getAttribute('type');
+        if (currVisibility === 'password') {
+          this.showPasswordVisibility(externalInput);
+        } else {
+          this.hidePasswordVisibility(externalInput);
+        }
+      };
+    }
+
+    showPasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'text');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'true');
+    }
+
+    hidePasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'password');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'false');
+    }
+  };
+
+const {
+  host,
+  inputField,
+  inputElement,
+  inputElementPlaceholder,
+  revealButtonContainer,
+  revealButtonIcon,
+  label,
+  requiredIndicator,
+  errorMessage,
+  helperText,
+} = {
+  host: { selector: () => ':host' },
+  inputField: { selector: '::part(input-field)' },
+  inputElement: { selector: '> input' },
+  inputElementPlaceholder: { selector: () => ':host input:placeholder-shown' },
+  revealButtonContainer: { selector: '::part(reveal-button)' },
+  revealButtonIcon: { selector: '::part(reveal-button)::before' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const PasswordClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
+      fontSize: [{}, host],
+      fontFamily: [label, inputField, errorMessage, helperText],
+      inputHeight: { ...inputField, property: 'height' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+      ],
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      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' },
+
+      inputPlaceholderTextColor: [
+        { ...inputElementPlaceholder, property: 'color' },
+        { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
+      ],
+      inputValueTextColor: [
+        { ...inputElement, property: 'color' },
+        { selector: () => ':host ::slotted(input)', property: 'color' },
+      ],
+
+      revealButtonOffset: [
+        { ...revealButtonContainer, property: 'margin-right' },
+        { ...revealButtonContainer, property: 'margin-left' },
+      ],
+      revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+      revealButtonColor: { ...revealButtonIcon, property: 'color' },
+
+      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: [
+        { selector: '> input:placeholder-shown', property: 'opacity' },
+        { ...inputElement, property: 'opacity' },
+      ],
+      inputVerticalAlignment: { ...inputField, property: 'align-items' },
+      valueInputHeight: { ...inputElement, property: 'height' },
+    },
+  }),
+  draggableMixin,
+  externalInputMixin({
+    inputType: 'password',
+    inputName: 'password',
+    includeAttrs: ['disabled', 'readonly', 'pattern', 'type', 'autocomplete'],
+    noBlurDispatch: true,
+  }),
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  componentNameValidationMixin,
+  passwordDraggableMixin,
+  customMixin
+)(
+  createProxy({
+    slots: ['', 'suffix'],
+    wrappedEleName: 'vaadin-password-field',
+    style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+        box-sizing: border-box;
+        position: relative;
+			}
+			${useHostExternalPadding(PasswordClass.cssVarList)}
+			${resetInputCursor('vaadin-password-field')}
+      ${resetInputLabelPosition('vaadin-password-field')}
+
+			vaadin-password-field {
+				width: 100%;
+				box-sizing: border-box;
+				padding: 0;
+			}
+			vaadin-password-field > input {
+        -webkit-mask-image: none;
+				box-sizing: border-box;
+        opacity: 1;
+			}
+			vaadin-password-field::part(input-field) {
+				box-sizing: border-box;
+				padding: 0;
+			}
+			vaadin-password-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}
+      :host ::slotted(input) {
+				min-height: 0;
+      }
+      :host([readonly]) ::slotted(input:placeholder-shown) {
+				opacity: 0;
+			}
+			vaadin-password-field::before {
+				height: initial;
+			}
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}
+			vaadin-password-field-button {
+				cursor: pointer;
+			}
+			:host([readonly]) vaadin-password-field-button {
+				pointer-events: none;
+			}
+			vaadin-password-field-button[focus-ring] {
+				box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
+			}
+
+      ${inputFloatingLabelStyle()}
+    
+      ::part(reveal-button) {
+        align-self: center;
+      }
+
+      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

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

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

package/src/components/descope-password/passwordDraggableMixin.js

@@ -0,0 +1,40 @@
+const passwordDraggableMixin = (superclass) =>
+  class PasswordDraggableMixinClass extends superclass {
+    get isReadOnly() {
+      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+    }
+
+    init() {
+      // there is an issue in Chrome that input field with type password cannot be D&D
+      // so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
+      // and return the original type when done
+      super.init?.();
+
+      const ele = this.querySelector('input');
+
+      ele?.addEventListener('mousedown', (e) => {
+        if (this.isDraggable && this.isReadOnly) {
+          ele.setAttribute('inert', 'true');
+
+          const inputEle = e.target;
+          const prevType = inputEle.getAttribute('type');
+          inputEle.setAttribute('type', 'text');
+          setTimeout(() => {
+            inputEle.focus();
+          });
+
+          const onComplete = (_) => {
+            inputEle.setAttribute('type', prevType);
+            ele.removeAttribute('inert');
+            this.removeEventListener('mouseup', onComplete);
+            this.removeEventListener('dragend', onComplete);
+          };
+
+          this.addEventListener('dragend', onComplete, { once: true });
+          this.addEventListener('mouseup', onComplete, { once: true });
+        }
+      });
+    }
+  };
+
+export default passwordDraggableMixin;

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -0,0 +1,220 @@
+// eslint-disable-next-line max-classes-per-file
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { interpolateString } from './helpers';
+
+export const componentName = getComponentName('policy-validation');
+
+const overrideAttrs = ['data-password-policy-value-minlength'];
+const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
+const policyAttrs = ['label', 'value', ...dataAttrs];
+
+class RawPolicyValidation extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #availablePolicies;
+
+  #activePolicies = [];
+
+  #overrides;
+
+  static get observedAttributes() {
+    return policyAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div>
+      <div class="label"></div>
+      <ul></ul>
+    </div>
+    <style>
+      :host > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+      .label {
+        max-width: 100%;
+        text-wrap: wrap;
+        overflow-wrap: break-word;
+      }
+      .hide-label .label {
+        display: none;
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+      }
+      ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li::before {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+      }
+    </style>
+		`;
+
+    this.panel = this.shadowRoot.querySelector(':host > div');
+    this.label = this.shadowRoot.querySelector('.label');
+    this.list = this.shadowRoot.querySelector('ul');
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'label') {
+        this.updateLabel(newValue);
+      }
+
+      // we're don't know the order in which the attributes are forwarded, so we're trying to render every time
+      // once `data` and `active-policies` are populated, the render will be executed.
+      // once the `overrides` object is updated, we want to re-render the panel.
+      if (dataAttrs.includes(attrName)) {
+        if (attrName === 'data') {
+          try {
+            this.availablePolicies = JSON.parse(newValue);
+          } catch {
+            // eslint-disable-next-line no-console
+            console.error('Failed to set available policies');
+          }
+        }
+        if (attrName === 'active-policies') {
+          this.#activePolicies = (newValue || '').split(',');
+        }
+
+        if (attrName === 'data-password-policy-value-minlength') {
+          const ln = Number(newValue);
+          if (!Number.isNaN(ln) && ln > 0) {
+            this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
+          }
+        }
+      }
+
+      this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
+    }
+  }
+
+  get availablePolicies() {
+    return this.#availablePolicies || [];
+  }
+
+  set availablePolicies(val) {
+    this.#availablePolicies = val;
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  validate() {
+    let policies = this.#availablePolicies;
+
+    if (this.#overrides) {
+      policies = this.#availablePolicies.map((policy) =>
+        this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
+      );
+    }
+
+    return this.#activePolicies.reduce((results, id) => {
+      const policy = policies.find((p) => p.id === id);
+
+      if (!policy) {
+        return results;
+      }
+
+      const { pattern, message, data } = policy;
+
+      if (!pattern || !message) {
+        return results;
+      }
+
+      const exp = new RegExp(interpolateString(pattern, data));
+
+      const validationResult = {
+        valid: exp.test(this.value),
+        message: interpolateString(message, data),
+        id,
+      };
+
+      results.push(validationResult);
+
+      return results;
+    }, []);
+  }
+
+  get isValid() {
+    return !this.validate().some(({ valid }) => valid === false);
+  }
+
+  getValidationItemTemplate({ valid, message }) {
+    const status = !this.value ? 'none' : valid;
+    return `
+      <li class="item" data-valid="${status}">
+        <span class="message">${message}</span>
+      </li>
+    `;
+  }
+
+  renderItems(availablePolicies, activePolicies) {
+    if (!availablePolicies || !activePolicies.length) {
+      return;
+    }
+
+    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+  }
+
+  updateLabel(val) {
+    if (!val) {
+      this.classList.add('hide-label');
+      this.label.innerHTML = '';
+    } else {
+      this.label.innerHTML = val;
+      this.classList.remove('hide-label');
+    }
+  }
+}
+
+const { host, item, symbolDefault, symbolSuccess, symbolError } = {
+  host: { selector: () => ':host > div' },
+  item: { selector: () => '.item' },
+  symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
+  symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
+  symbolError: { selector: () => '.item[data-valid="false"]::before' },
+};
+
+export const PolicyValidationClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      padding: {},
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderColor: { ...host, property: 'border-color' },
+      borderRadius: { ...host, property: 'border-radius' },
+      backgroundColor: { ...host, property: 'background-color' },
+      textColor: { property: 'color' },
+      labelMargin: { ...host, property: 'gap' },
+      itemsSpacing: { ...item, property: 'line-height' },
+      itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
+      itemSymbolErrorColor: { ...symbolError, property: 'color' },
+      itemSymbolDefault: { ...symbolDefault, property: 'content' },
+      itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
+      itemSymbolError: { ...symbolError, property: 'content' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawPolicyValidation);

package/src/components/descope-policy-validation/helpers.js

@@ -0,0 +1,2 @@
+export const interpolateString = (template, values) =>
+  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);

package/src/components/descope-policy-validation/index.js

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

package/src/components/descope-radio-group/RadioButtonClass.js

@@ -0,0 +1,77 @@
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  proxyInputMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('radio-button');
+
+const customMixin = (superclass) =>
+  class CustomMixin extends superclass {
+    constructor() {
+      super();
+
+      this.baseElement.checkValidity = () => {};
+    }
+
+    init() {
+      // we are forwarding vaadin checked-changed event
+      this.baseElement.addEventListener('checked-changed', (e) => {
+        this.dispatchEvent(
+          new CustomEvent(
+            'checked-changed',
+            { detail: e.detail },
+            { bubbles: true, composed: true }
+          )
+        );
+      });
+
+      super.init?.();
+
+      observeChildren(this, this.renderLabel.bind(this));
+    }
+
+    renderLabel() {
+      this.baseElement.setAttribute('label', this.textContent);
+    }
+
+    get value() {
+      return this.getAttribute('value');
+    }
+  };
+
+export const RadioButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      cursor: [{}, { selector: 'label' }],
+      fontSize: [{ selector: 'label' }, {}],
+      labelTextColor: { selector: 'label', property: 'color' },
+      fontFamily: { selector: 'label' },
+      radioSize: [
+        { selector: '::part(radio)', property: 'height' },
+        { selector: '::part(radio)', property: 'width' },
+      ],
+      radioBackgroundColor: { selector: '::part(radio)', property: 'background-color' },
+      radioMargin: { selector: '::part(radio)', property: 'margin' },
+      radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
+      radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
+      radioBorderColor: { selector: '::part(radio)', property: 'border-color', fallback: 'none' },
+      radioBorderWidth: { selector: '::part(radio)', property: 'border-width', fallback: 0 },
+      radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
+    },
+  }),
+  proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-radio-button',
+    excludeAttrsSync: ['tabindex', 'data'],
+    includeForwardProps: ['checked', 'name', 'disabled'],
+    componentName,
+  })
+);