@descope/web-components-ui 3.24.0 → 3.26.0

package/src/components/descope-email-field/EmailFieldClass.js

@@ -1,138 +0,0 @@
-import textFieldMappings from '@descope-ui/descope-text-field/mappings';
-import {
-  createStyleMixin,
-  draggableMixin,
-  createProxy,
-  proxyInputMixin,
-  componentNameValidationMixin,
-  externalInputMixin,
-} from '../../mixins';
-import { compose } from '../../helpers';
-import { asciiPattern, unicodePattern } from './emailPattern';
-import { getComponentName } from '../../helpers/componentHelpers';
-import {
-  inputFloatingLabelStyle,
-  resetInputLabelPosition,
-  resetInputOverrides,
-  useHostExternalPadding,
-} from '../../helpers/themeHelpers/resetHelpers';
-
-export const componentName = getComponentName('email-field');
-
-const defaultAutocomplete = 'username';
-const defaultInputMode = 'email';
-
-const customMixin = (superclass) =>
-  class EmailFieldMixinClass extends superclass {
-    // On by default - `accept-unicode="false"` restores the pre-unicode field:
-    // native `type="email"` validation and the ASCII pattern.
-    //
-    // Read once, in `init`. Changing the attribute afterwards has no effect; it
-    // is static configuration, which is how every consumer sets it.
-    get acceptsUnicode() {
-      return this.getAttribute('accept-unicode') !== 'false';
-    }
-
-    init() {
-      super.init?.();
-
-      // we need to set the pattern on the base element because vaadin-email-field is overriding it
-      this.baseElement.setAttribute('pattern', asciiPattern);
-
-      if (!this.getAttribute('autocomplete')) {
-        this.setAttribute('autocomplete', defaultAutocomplete);
-      }
-
-      this.createExternalInput();
-
-      [this.inputElement, this.externalInput].filter(Boolean).forEach((input) => {
-        input.addEventListener('change', this.stripSurroundingWhitespace);
-      });
-
-      if (this.acceptsUnicode) {
-        this.enableUnicode();
-      }
-    }
-
-    enableUnicode() {
-      this.baseElement.setAttribute('pattern', unicodePattern);
-
-      // native `type="email"` validation is ASCII only and sets typeMismatch
-      // before `pattern` is consulted, so `text` is what lets the pattern decide.
-      // Through vaadin's `_setType` because `type` is a readOnly property bound
-      // to the inner input - assigning `input.type` is re-applied over.
-      this.baseElement._setType('text');
-
-      if (this.externalInput) {
-        this.externalInput.type = 'text';
-      }
-
-      // `type="text"` loses the email keyboard on mobile
-      if (!this.getAttribute('inputmode')) {
-        this.setAttribute('inputmode', defaultInputMode);
-      }
-
-      this.externalInput?.setAttribute('inputmode', defaultInputMode);
-    }
-
-    stripSurroundingWhitespace = (e) => {
-      const trimmed = e.target.value.trim();
-      if (trimmed === e.target.value) return;
-      this.value = trimmed;
-
-      // validity is cached and was computed against the untrimmed value
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-    };
-  };
-
-export const EmailFieldClass = compose(
-  createStyleMixin({
-    mappings: textFieldMappings,
-  }),
-  draggableMixin,
-  externalInputMixin({
-    inputType: 'email',
-    inputName: 'email',
-    autocompleteType: 'username',
-    includeAttrs: ['disabled', 'readonly', 'pattern'],
-  }),
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: ['', 'suffix'],
-    wrappedEleName: 'vaadin-email-field',
-    style: () => `
-			:host {
-				display: inline-block;
-				max-width: 100%;
-				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${
-          EmailFieldClass.cssVarList.inputOutlineOffset
-        }));
-        box-sizing: border-box;
-			}
-      ${resetInputLabelPosition('vaadin-email-field')}
-			${useHostExternalPadding(EmailFieldClass.cssVarList)}
-			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
-      ${inputFloatingLabelStyle()}
-
-      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
-        opacity: 0;
-      }
-      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
-        opacity: 0;
-      }
-
-      :host ::slotted(*) {
-        -webkit-mask-image: none;
-      }
-
-      vaadin-email-field[external-input="true"] > input:not(:placeholder-shown) {
-        opacity: 0;
-      }
-		`,
-    excludeAttrsSync: ['tabindex', 'style'],
-    componentName,
-  })
-);

package/src/components/descope-email-field/emailPattern.js

@@ -1,7 +0,0 @@
-// Kept in its own module (with no imports) so it can be unit tested without
-// pulling in the whole component / vaadin dependency chain.
-
-export const asciiPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
-
-export const unicodePattern =
-  "^[\\p{L}\\p{M}\\p{N}._%+'\\-]+@[\\p{L}\\p{M}\\p{N}.\\-]+\\.[\\p{L}\\p{M}][\\p{L}\\p{M}\\p{N}\\-]+$";

package/src/components/descope-email-field/index.js

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

package/src/theme/components/emailField.js

@@ -1,55 +0,0 @@
-import { EmailFieldClass } from '../../components/descope-email-field/EmailFieldClass';
-import { refs } from './inputWrapper';
-
-const vars = EmailFieldClass.cssVarList;
-
-const emailField = {
-  [vars.hostWidth]: refs.width,
-  [vars.hostMinWidth]: refs.minWidth,
-  [vars.hostDirection]: refs.direction,
-  [vars.fontSize]: refs.fontSize,
-  [vars.fontFamily]: refs.fontFamily,
-  [vars.labelFontSize]: refs.labelFontSize,
-  [vars.labelFontWeight]: refs.labelFontWeight,
-  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
-  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
-  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
-  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
-  [vars.labelTextColor]: refs.labelTextColor,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.inputValueTextColor]: refs.valueTextColor,
-  [vars.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars.inputBorderWidth]: refs.borderWidth,
-  [vars.inputBorderStyle]: refs.borderStyle,
-  [vars.inputBorderColor]: refs.borderColor,
-  [vars.inputBorderRadius]: refs.borderRadius,
-  [vars.inputOutlineWidth]: refs.outlineWidth,
-  [vars.inputOutlineStyle]: refs.outlineStyle,
-  [vars.inputOutlineColor]: refs.outlineColor,
-  [vars.inputOutlineOffset]: refs.outlineOffset,
-  [vars.inputBackgroundColor]: refs.backgroundColor,
-  [vars.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars.inputHeight]: refs.inputHeight,
-  [vars.labelPosition]: refs.labelPosition,
-  [vars.labelTopPosition]: refs.labelTopPosition,
-  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars.inputTransformY]: refs.inputTransformY,
-  [vars.inputTransition]: refs.inputTransition,
-  [vars.marginInlineStart]: refs.marginInlineStart,
-  [vars.placeholderOpacity]: refs.placeholderOpacity,
-  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars.valueInputHeight]: refs.valueInputHeight,
-  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-
-  // error message icon
-  [vars.errorMessageIcon]: refs.errorMessageIcon,
-  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
-  [vars.errorMessageFontSize]: refs.errorMessageFontSize,
-};
-
-export default emailField;
-export { vars };