@descope/web-components-ui 0.0.1

package/src/components/descope-new-password/NewPasswordClass.js

@@ -0,0 +1,218 @@
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { compose } from '../../helpers';
+import { createStyleMixin, proxyInputMixin, draggableMixin, createProxy } from '../../mixins';
+import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
+import { PasswordClass } from '../descope-password/PasswordClass';
+import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import { PolicyValidationClass } from '../descope-policy-validation/PolicyValidationClass';
+
+export const componentName = getComponentName('new-password');
+
+const policyPreviewVars = PolicyValidationClass.cssVarList;
+
+const customMixin = (superclass) =>
+  class NewPasswordMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      const externalInputAttr = this.getAttribute('external-input');
+
+      template.innerHTML = `
+			<${descopeInternalComponentName}
+				name="new-password"
+				tabindex="-1"
+				slot="input"
+        external-input="${externalInputAttr}"
+			>
+      </${descopeInternalComponentName}>
+			`;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      if (this.getAttribute('external-input') === 'true') {
+        this.initExternalInput();
+      }
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'password-label',
+          'password-placeholder',
+          'confirm-label',
+          'confirm-placeholder',
+          'full-width',
+          'size',
+          'bordered',
+          'label',
+          'has-confirm',
+          'invalid',
+          'readonly',
+          'draggable',
+          'has-validation',
+          'policy-label',
+          'active-policies',
+          'available-policies',
+          'data-password-policy-value-minlength',
+          'label-type',
+          'manual-visibility-toggle',
+        ],
+      });
+    }
+
+    createSlottedExternalInput(node, slotName) {
+      const externalInput = node.querySelector('input');
+      const slotEle = document.createElement('slot');
+
+      const targetSlot = externalInput.getAttribute('slot');
+
+      slotEle.setAttribute('name', slotName);
+      slotEle.setAttribute('slot', targetSlot);
+
+      node.appendChild(slotEle);
+
+      // move external input
+      externalInput.setAttribute('slot', slotName);
+      externalInput.setAttribute('name', this.getAttribute('name'));
+      externalInput.setAttribute('data-hidden-input', 'true');
+
+      this.appendChild(externalInput);
+    }
+
+    initExternalInput() {
+      // get descope input components
+      this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
+      this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
+
+      // create slots for external password input
+      this.createSlottedExternalInput(this.passwordInput, 'external-password-input');
+      this.createSlottedExternalInput(this.confirmInput, 'external-confirm-input');
+    }
+  };
+
+const {
+  host,
+  label,
+  internalInputsWrapper,
+  errorMessage,
+  helperText,
+  passwordInput,
+  policyPreview,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  passwordInput: { selector: 'descope-password' },
+  policyPreview: { selector: 'descope-policy-validation' },
+};
+
+export const NewPasswordClass = compose(
+  createStyleMixin({
+    mappings: {
+      fontSize: [
+        host,
+        {},
+        {
+          selector: PasswordClass.componentName,
+          property: PasswordClass.cssVarList.fontSize,
+        },
+      ],
+      fontFamily: [label, errorMessage, helperText],
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      labelTextColor: { ...label, 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' },
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
+      ],
+      inputsRequiredIndicator: { ...host, property: 'content' },
+      spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
+      policyPreviewBackgroundColor: {
+        ...policyPreview,
+        property: policyPreviewVars.backgroundColor,
+      },
+      policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
+
+      valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
+      valueInputMarginBottom: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.valueInputMarginBottom,
+      },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+		:host {
+			display: inline-block;
+			max-width: 100%;
+			box-sizing: border-box;
+		}
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+		${useHostExternalPadding(PasswordClass.cssVarList)}
+		vaadin-text-field {
+			padding: 0;
+			width: 100%;
+			height: 100%;
+		}
+		vaadin-text-field::part(input-field) {
+			min-height: 0;
+			background: transparent;
+			box-shadow: none;
+			padding: 0;
+		}
+		vaadin-text-field::part(input-field)::after {
+			background: transparent;
+			opacity: 0;
+		}
+		descope-new-password-internal {
+			-webkit-mask-image: none;
+			min-height: 0;
+			width: 100%;
+			padding: 0;
+		}
+		descope-new-password-internal > .wrapper {
+      -webkit-mask-image: none;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+		descope-password {
+			display: block;
+			width: 100%;
+		}
+		descope-new-password-internal vaadin-password-field::before {
+			height: initial;
+		}
+    descope-policy-validation {
+      margin-top: 8px;
+      display: flex;
+    }
+    descope-policy-validation.hidden {
+      display: none;
+    }
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -0,0 +1,246 @@
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import { forwardAttrs, observeAttributes } from '../../../helpers/componentHelpers';
+import { NewPasswordClass } from '../NewPasswordClass';
+import { componentName } from './componentName';
+
+const passwordAttrPrefixRegex = /^password-/;
+const confirmAttrPrefixRegex = /^confirm-/;
+
+const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
+
+const passwordInputAttrs = ['password-label', 'password-placeholder'];
+const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const policyPanelAttrs = ['has-validation'];
+const commonAttrs = [
+  'has-confirm',
+  'disabled',
+  'bordered',
+  'size',
+  'full-width',
+  'maxlength',
+  'invalid',
+  'readonly',
+  'draggable',
+  'autocomplete',
+  'label-type',
+  'manual-visibility-toggle',
+];
+
+const inputRelatedAttrs = [].concat(
+  commonAttrs,
+  passwordInputAttrs,
+  confirmInputAttrs,
+  policyPanelAttrs
+);
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class NewPasswordInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+			<div class="wrapper"></div>
+		`;
+
+    this.wrapperEle = this.querySelector('.wrapper');
+  }
+
+  get value() {
+    return this.passwordInput?.value || '';
+  }
+
+  set value(val) {
+    if (val === this.value) return;
+    this.value = val;
+  }
+
+  get hasConfirm() {
+    return this.getAttribute('has-confirm') === 'true';
+  }
+
+  onHasConfirmChange(hasConfirm) {
+    this.confirmInput.style.display = hasConfirm ? '' : 'none';
+  }
+
+  onHasValidationChange(hasValidation) {
+    this.policyPanel.style.display = hasValidation ? '' : 'none';
+  }
+
+  get hasValidation() {
+    return this.getAttribute('has-validation') === 'true';
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    if (this.value && !this.policyPanel.isValid) {
+      return { typeMismatch: true };
+    }
+
+    if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
+      return { patternMismatch: true };
+    }
+
+    const min = this.getAttribute('minlength');
+    const minVal = parseInt(min, 10) || 0;
+    const minValid = this.value.length >= minVal;
+    if (!minValid) {
+      return { tooShort: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.passwordInput.focus();
+      }
+    });
+    super.init?.();
+    this.renderInputs(this.hasConfirm, this.hasValidation);
+  }
+
+  renderInputs() {
+    const hasExternalInput = this.getAttribute('external-input') === 'true';
+    const template = `
+      <div>
+        <descope-password
+          autocomplete="new-password"
+          manual-visibility-toggle="true"
+          data-id="password"
+          external-input="${hasExternalInput}"
+        ></descope-password>
+        <descope-policy-validation></descope-policy-validation>
+      </div>
+      <descope-password
+        autocomplete="new-password"
+        manual-visibility-toggle="true"
+        external-input="${hasExternalInput}"
+        data-id="confirm"
+      ></descope-password>
+    `;
+
+    this.wrapperEle.innerHTML = template;
+
+    this.passwordInput = this.querySelector('[data-id="password"]');
+    this.confirmInput = this.querySelector('[data-id="confirm"]');
+    this.policyPanel = this.querySelector('descope-policy-validation');
+
+    this.inputs = [this.passwordInput, this.confirmInput];
+
+    this.initInputs();
+
+    // sync input value to policy validation panel
+    this.passwordInput.addEventListener('input', (e) => {
+      this.policyPanel.setAttribute('value', e.target.value);
+    });
+
+    forwardAttrs(this, this.policyPanel, {
+      includeAttrs: [
+        'policy-label',
+        'available-policies',
+        'active-policies',
+        'data-password-policy-value-minlength',
+        'manual-visibility-toggle',
+      ],
+      mapAttrs: {
+        'policy-label': 'label',
+        'available-policies': 'data',
+      },
+    });
+  }
+
+  // the inputs are not required but we still want it to have a required
+  // indicator in case the root component is required
+  handleIndicatorStyle() {
+    this.inputs.forEach((input) => {
+      const styleTag = document.createElement('style');
+      styleTag.innerHTML = `
+				:host ::part(required-indicator)::after {
+					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
+          width: 1em;
+          text-align: center;
+				}
+        :host ::part(required-indicator) {
+          display: inline-flex;
+        }
+				`;
+      input?.shadowRoot.appendChild(styleTag);
+    });
+  }
+
+  get isInvalid() {
+    return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false';
+  }
+
+  // for some reason, Vaadin is removing the invalid attribute on several events,
+  // e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
+  // if the root component is invalid
+  handleInputsInvalidAttribute() {
+    this.inputs.forEach((input) => {
+      input &&
+        observeAttributes(
+          input,
+          (changedAttributes) => {
+            if (changedAttributes.includes('invalid')) {
+              const inputInvalidValue = input.getAttribute('invalid');
+              const rootInvalidValue = this.getAttribute('invalid');
+
+              if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
+                input.setAttribute('invalid', 'true');
+              }
+            }
+          },
+          {}
+        );
+    });
+  }
+
+  initInputs() {
+    this.handleIndicatorStyle();
+    this.handleInputsInvalidAttribute();
+    this.handleFocusEventsDispatching(this.inputs);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  toggleBooleanAttribute(ele, name, value) {
+    value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'has-validation') {
+        this.onHasValidationChange(newValue === 'true');
+      } else if (attrName === 'has-confirm') {
+        this.onHasConfirmChange(newValue === 'true');
+      } else if (commonAttrs.includes(attrName)) {
+        this.inputs.forEach((input) => this.toggleBooleanAttribute(input, attrName, newValue));
+      } else if (passwordInputAttrs.includes(attrName)) {
+        this.toggleBooleanAttribute(
+          this.passwordInput,
+          removeAttrPrefix(attrName, passwordAttrPrefixRegex),
+          newValue
+        );
+      } else if (confirmInputAttrs.includes(attrName)) {
+        this.toggleBooleanAttribute(
+          this.confirmInput,
+          removeAttrPrefix(attrName, confirmAttrPrefixRegex),
+          newValue
+        );
+      }
+    }
+  }
+}
+
+export default NewPasswordInternal;

package/src/components/descope-new-password/descope-new-password-internal/componentName.js

@@ -0,0 +1,3 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('new-password-internal');

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

@@ -0,0 +1,4 @@
+import NewPasswordInternal from './NewPasswordInternal';
+import { componentName } from './componentName';
+
+customElements.define(componentName, NewPasswordInternal);

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

@@ -0,0 +1,9 @@
+import { componentName, NewPasswordClass } from './NewPasswordClass';
+import '../descope-text-field';
+import '../descope-password';
+import '../descope-policy-validation';
+import './descope-new-password-internal';
+
+customElements.define(componentName, NewPasswordClass);
+
+export { NewPasswordClass };

package/src/components/descope-notification/NotificationClass.js

@@ -0,0 +1,107 @@
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../helpers/componentHelpers';
+import {
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  hoverableMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('notification');
+
+const NotificationMixin = (superclass) =>
+  class NotificationMixinClass extends superclass {
+    #card;
+
+    constructor() {
+      super();
+
+      const that = this;
+
+      Object.defineProperty(this.baseElement, '_container', {
+        get() {
+          if (!NotificationMixinClass._container) {
+            NotificationMixinClass._container = document.createElement(
+              'descope-notification-container'
+            );
+
+            // we are overriding the container position to be absolute because we want to keep in inside the flow/widget boundaries
+            NotificationMixinClass._container.style.position = 'absolute';
+
+            // we're adding the container to body to avoid Vaadin's container's `openChanged`
+            // from breaking when trying to remove it directly from the body.
+            document.body.appendChild(NotificationMixinClass._container);
+          }
+
+          if (!NotificationMixinClass._container.isConnected) {
+            // Then, we're adding the container to the parentNode, which is the desired location
+            // for us on the DOM
+            setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
+          }
+
+          return NotificationMixinClass._container;
+        },
+      });
+
+      Object.defineProperty(this.baseElement, '_card', {
+        get() {
+          return that.#card;
+        },
+      });
+
+      // we want to replace the card with vaadin's remove notification so it will not throw
+      this.baseElement._removeNotificationCard = this.close.bind(this);
+    }
+
+    close() {
+      this.#card.close();
+    }
+
+    init() {
+      super.init?.();
+
+      this.createCard();
+
+      forwardAttrs(this, this.#card);
+      syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
+
+      this.baseElement.renderer = (cardRoot) => {
+        Array.from(this.childNodes).forEach((child) => cardRoot.appendChild(child));
+      };
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get isContainerEmpty() {
+      return !NotificationMixinClass._container.children.length;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    removeContainer() {
+      NotificationMixinClass._container.remove();
+    }
+
+    removeNotification() {
+      // remove descope-notification from the DOM
+      this.remove();
+      // if needed, remove descope-notification-container
+      if (this.isContainerEmpty) this.removeContainer();
+    }
+
+    createCard() {
+      this.#card = document.createElement('descope-notification-card');
+      this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
+    }
+  };
+
+export const NotificationClass = compose(
+  draggableMixin,
+  componentNameValidationMixin,
+  hoverableMixin,
+  NotificationMixin
+)(
+  createProxy({
+    wrappedEleName: 'vaadin-notification',
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js

@@ -0,0 +1,115 @@
+import { compose } from '../../../helpers';
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { createStyleMixin, createProxy } from '../../../mixins';
+
+export const componentName = getComponentName('notification-card');
+
+const notificationCardMixin = (superclass) =>
+  class NotificationCardMixinClass extends superclass {
+    close() {
+      // if animation is not applied to the element, the node will not be removed
+      // from the DOM. We should avoid that. So, if in any case we allow
+      // customizing the animation - we should check if animation is applied
+      // and if it's not applied - remove the element from the DOM and dispatch
+      // `card-closed` event.
+      this.baseElement.addEventListener('animationend', () => {
+        this.remove();
+        this.dispatchEvent(new Event('card-closed'));
+      });
+
+      this.setAttribute('opened', 'false');
+    }
+
+    constructor() {
+      super();
+
+      this.baseElement.innerHTML = `
+      <div part="root">
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="close">
+          <slot name="close"></slot>
+        </div>
+      </div>
+      `;
+
+      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
+    }
+
+    init() {
+      super.init?.();
+
+      this.closeEle.onclick = () => {
+        this.close();
+      };
+    }
+  };
+
+const selectors = {
+  content: () => 'vaadin-notification-card::part(content)',
+  overlay: () => 'vaadin-notification-card::part(overlay)',
+};
+
+export const NotificationCardClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostMinWidth: { selector: selectors.content, property: 'min-width' },
+      fontFamily: {},
+      fontSize: {},
+      backgroundColor: { selector: selectors.content },
+      textColor: { property: 'color' },
+      boxShadow: {},
+      borderWidth: { selector: selectors.content, property: 'border-width' },
+      borderColor: { selector: selectors.content, property: 'border-color' },
+      borderStyle: { selector: selectors.content, property: 'border-style' },
+      borderRadius: [
+        { selector: selectors.content, property: 'border-radius' },
+        { selector: selectors.overlay, property: 'border-radius' },
+      ],
+      verticalPadding: [
+        { selector: selectors.content, property: 'padding-top' },
+        { selector: selectors.content, property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { selector: selectors.content, property: 'padding-right' },
+        { selector: selectors.content, property: 'padding-left' },
+      ],
+    },
+  }),
+  notificationCardMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-notification-card',
+    style: () => `
+    vaadin-notification-card {
+      box-shadow: none;
+    }
+    ::part(overlay) {
+      box-shadow: none;
+      background: none;
+    }
+
+    [part="close"] {
+      cursor: pointer;
+      display: flex;
+    }
+
+    [part="content"] {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);