@descope/web-components-ui 3.12.1 → 3.13.0

package/src/components/descope-text-field/TextFieldClass.js

@@ -1,142 +0,0 @@
-import {
-  createStyleMixin,
-  draggableMixin,
-  createProxy,
-  proxyInputMixin,
-  componentNameValidationMixin,
-} from '../../mixins';
-import textFieldMappings from './textFieldMappings';
-import { compose } from '../../helpers';
-import { getComponentName } from '../../helpers/componentHelpers';
-import {
-  inputFloatingLabelStyle,
-  resetInputLabelPosition,
-  resetInputOverrides,
-  useHostExternalPadding,
-} from '../../helpers/themeHelpers/resetHelpers';
-
-export const componentName = getComponentName('text-field');
-
-const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
-
-const customMixin = (superclass) =>
-  class TextFieldClass extends superclass {
-    static get observedAttributes() {
-      return observedAttrs.concat(superclass.observedAttributes || []);
-    }
-
-    icon;
-
-    init() {
-      super.init?.();
-    }
-
-    renderCopyToClipboard(shouldRender) {
-      if (!shouldRender) {
-        this.icon?.remove();
-        return;
-      }
-
-      const iconInitConfig = {
-        icon: 'vaadin:copy-o',
-        title: 'Copy',
-        style: 'cursor: pointer',
-      };
-
-      const iconCopiedConfig = {
-        icon: 'vaadin:check-circle-o',
-        title: 'Copied',
-        style: 'cursor: initial',
-      };
-
-      this.icon = Object.assign(document.createElement('vaadin-icon'), {
-        slot: 'suffix',
-        ...iconInitConfig,
-      });
-
-      this.baseElement.appendChild(this.icon);
-      this.icon.addEventListener('click', () => {
-        navigator.clipboard.writeText(this.value);
-        Object.assign(this.icon, iconCopiedConfig);
-
-        // we want the icon to go back to the initial state after 5 seconds
-        setTimeout(() => {
-          Object.assign(this.icon, iconInitConfig);
-        }, 5000);
-      });
-    }
-
-    onLabelClick() {
-      this.focus();
-    }
-
-    attributeChangedCallback(attrName, oldVal, newVal) {
-      super.attributeChangeCallback?.(attrName, oldVal, newVal);
-
-      // Vaadin doesn't allow to change the input type attribute.
-      // We need the ability to do that, so we're overriding their
-      // behavior with their private API.
-      // When receiving a `type` attribute, we use their private API
-      // to set it on the input.
-      if (attrName === 'type') {
-        this.baseElement._setType(newVal);
-      }
-
-      if (oldVal !== newVal) {
-        if (attrName === 'label-type') {
-          if (newVal === 'floating') {
-            this.addEventListener('click', this.onLabelClick);
-          } else {
-            this.removeEventListener('click', this.onLabelClick);
-          }
-        } else if (attrName === 'copy-to-clipboard') {
-          this.renderCopyToClipboard(newVal === 'true');
-        }
-      }
-    }
-  };
-
-export const TextFieldClass = compose(
-  createStyleMixin({
-    mappings: textFieldMappings,
-  }),
-  draggableMixin,
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: ['prefix', 'suffix'],
-    wrappedEleName: 'vaadin-text-field',
-    style: () => `
-			:host {
-				display: inline-block;
-				max-width: 100%;
-				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${
-          TextFieldClass.cssVarList.inputOutlineOffset
-        }));
-        box-sizing: border-box;
-			}
-      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
-        opacity: 1;
-      }
-
-      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
-        opacity: 0;
-      }
-      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
-        opacity: 0;
-      }
-      ${resetInputLabelPosition('vaadin-text-field')}
-			${useHostExternalPadding(TextFieldClass.cssVarList)}
-			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
-      ${inputFloatingLabelStyle()}
-
-      vaadin-text-field vaadin-icon {
-        align-self: center;
-      }
-		`,
-    excludeAttrsSync: ['tabindex', 'style'],
-    componentName,
-  })
-);

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

@@ -1,9 +0,0 @@
-import '@vaadin/text-field';
-import '@vaadin/icons';
-import '@vaadin/icon';
-
-import { componentName, TextFieldClass } from './TextFieldClass';
-
-customElements.define(componentName, TextFieldClass);
-
-export { TextFieldClass, componentName };

package/src/components/descope-text-field/textFieldMappings.js

@@ -1,169 +0,0 @@
-const {
-  host,
-  label,
-  placeholder,
-  requiredIndicator,
-  inputField,
-  input,
-  inputMask,
-  helperText,
-  errorMessage,
-  disabledPlaceholder,
-  inputDisabled,
-  inputIcon,
-  externalInput,
-  externalInputDisabled,
-  externalPlaceholder,
-  externalDisabledPlaceholder,
-} = {
-  host: { selector: () => ':host' },
-  label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  placeholder: [
-    { selector: '> input:placeholder-shown' },
-    { selector: () => ':host::slotted(input:placeholder-shown)' },
-  ],
-  disabledPlaceholder: { selector: '> input:disabled::placeholder' },
-  inputField: { selector: '::part(input-field)' },
-  input: { selector: 'input' },
-  inputMask: { selector: '::part(input-field)::before' },
-  inputDisabled: { selector: 'input:disabled' },
-  helperText: { selector: '::part(helper-text)' },
-  errorMessage: { selector: '::part(error-message)' },
-  inputIcon: { selector: 'vaadin-icon' },
-  externalInput: { selector: () => '::slotted(input)' },
-  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
-  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
-  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
-};
-
-export default {
-  // we apply font-size also on the host so we can set its width with em
-  fontSize: [{}, host],
-  fontFamily: [label, inputField, helperText, errorMessage],
-
-  labelFontSize: { ...label, property: 'font-size' },
-  labelFontWeight: { ...label, property: 'font-weight' },
-
-  inputValueFontWeight: [
-    { ...input, property: 'font-weight' },
-    { ...externalInput, property: 'font-weight' },
-  ],
-  inputPlaceholderFontWeight: [
-    { selector: () => ':host input:placeholder-shown', property: 'font-weight' },
-    { ...externalPlaceholder, property: 'font-weight' },
-  ],
-  helperTextFontWeight: { ...helperText, property: 'font-weight' },
-  errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
-
-  labelTextColor: [
-    { ...label, property: 'color' },
-    { ...requiredIndicator, property: 'color' },
-    { ...label, property: '-webkit-text-fill-color' },
-    { ...requiredIndicator, property: '-webkit-text-fill-color' },
-  ],
-
-  hostWidth: { ...host, property: 'width' },
-  hostMinWidth: { ...host, property: 'min-width' },
-  hostDirection: { ...host, property: 'direction' },
-  inputDirection: { ...input, property: 'direction' },
-
-  inputBackgroundColor: [
-    { ...inputField, property: 'background-color' },
-    { ...inputMask, property: 'background-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' },
-  errorMessageFontSize: { ...errorMessage, property: 'font-size' },
-
-  helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },
-
-  inputValueTextColor: [
-    { ...inputField, property: 'color' },
-    { ...inputDisabled, property: '-webkit-text-fill-color' },
-    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
-  ],
-  inputCaretTextColor: [
-    { ...input, property: 'caret-color' },
-    { ...externalInput, property: 'caret-color' },
-  ],
-
-  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-
-  inputBorderColor: { ...inputField, property: 'border-color' },
-  inputBorderWidth: { ...inputField, property: 'border-width' },
-  inputBorderStyle: { ...inputField, property: 'border-style' },
-  inputBorderRadius: { ...inputField, property: 'border-radius' },
-
-  inputHeight: { ...inputField, property: 'height' },
-  inputHorizontalPadding: [
-    { ...input, property: 'padding-left' },
-    { ...input, property: 'padding-right' },
-    { ...externalInput, property: 'padding-left' },
-    { ...externalInput, property: 'padding-right' },
-  ],
-
-  inputOutlineColor: { ...inputField, property: 'outline-color' },
-  inputOutlineStyle: { ...inputField, property: 'outline-style' },
-  inputOutlineWidth: { ...inputField, property: 'outline-width' },
-  inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-
-  textAlign: {},
-
-  inputTextAlign: [
-    { ...input, property: 'text-align' },
-    { ...externalInput, property: 'text-align' },
-  ],
-
-  inputPlaceholderColor: [
-    { selector: () => ':host input:placeholder-shown', property: 'color' },
-    { ...externalPlaceholder, property: 'color' },
-    { ...placeholder, property: 'color' },
-    { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
-    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-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' },
-    { ...externalPlaceholder, property: 'opacity' },
-  ],
-  inputVerticalAlignment: [
-    { ...inputField, property: 'align-items' },
-    { ...externalInput, property: 'align-items' },
-  ],
-  valueInputHeight: [
-    { ...input, property: 'height' },
-    { ...externalInput, property: 'height' },
-  ],
-  valueInputMarginBottom: [
-    { ...input, property: 'margin-bottom' },
-    { ...externalInput, property: 'margin-bottom' },
-  ],
-
-  inputIconOffset: [
-    { ...inputIcon, property: 'margin-right' },
-    { ...inputIcon, property: 'margin-left' },
-  ],
-  inputIconSize: { ...inputIcon, property: 'font-size' },
-  inputIconColor: { ...inputIcon, property: 'color' },
-  inputTextSecurity: [
-    { ...input, property: '-webkit-text-security' },
-    { ...input, property: 'text-security' },
-    { ...externalInput, property: '-webkit-text-security' },
-    { ...externalInput, property: 'text-security' },
-  ],
-};

package/src/theme/components/textField.js

@@ -1,71 +0,0 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
-import { refs } from './inputWrapper';
-
-const globalRefs = getThemeRefs(globals);
-const vars = TextFieldClass.cssVarList;
-
-export const textField = {
-  [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.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.inputValueTextColor]: refs.valueTextColor,
-  [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.inputHeight]: refs.inputHeight,
-  [vars.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars.helperTextColor]: refs.helperTextColor,
-  [vars.textAlign]: refs.textAlign,
-  textAlign: {
-    right: { [vars.inputTextAlign]: 'right' },
-    left: { [vars.inputTextAlign]: 'left' },
-    center: { [vars.inputTextAlign]: 'center' },
-  },
-  [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,
-  [vars.inputIconOffset]: globalRefs.spacing.md,
-  [vars.inputIconSize]: refs.inputIconSize,
-  [vars.inputIconColor]: refs.placeholderTextColor,
-
-  // 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,
-
-  // obfuscated
-  [vars.inputTextSecurity]: refs.inputTextSecurity,
-};
-
-export default textField;
-export { vars };