@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -5,200 +5,184 @@ import { comboBoxItem } from '../helpers';
 
 export const componentName = getComponentName('phone-field-internal');
 
-const commonAttrs = [
-	'disabled',
-	'size',
-	'bordered',
-	'invalid',
-	'readonly',
-];
+const commonAttrs = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
 const mapAttrs = {
-	'country-input-placeholder': 'placeholder',
-	'phone-input-placeholder': 'placeholder',
-}
+  'country-input-placeholder': 'placeholder',
+  'phone-input-placeholder': 'placeholder',
+};
 
 const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
 class PhoneFieldInternal extends BaseInputClass {
-	static get observedAttributes() {
-		return [].concat(
-			BaseInputClass.observedAttributes || [],
-			inputRelatedAttrs,
-		);
-	}
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);
+  }
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.innerHTML = `
+    this.innerHTML = `
         <div>
             <descope-combo-box
 				item-label-path="data-name"
 				item-value-path="data-id"
 			>
-			${CountryCodes.map(item => comboBoxItem(item)).join('')}
+			${CountryCodes.map((item) => comboBoxItem(item)).join('')}
 			</descope-combo-box>
 			<div class="separator"></div>
             <descope-text-field type="tel"></descope-text-field>
          </div>`;
 
-		this.countryCodeInput = this.querySelector('descope-combo-box');
-		this.phoneNumberInput = this.querySelector('descope-text-field');
-		this.inputs = [
-			this.countryCodeInput,
-			this.phoneNumberInput
-		];
-	}
-
-	get value() {
-		return this.inputs.map(({ value }) => value).join('-');
-	}
-
-	set value(val) {
-		const [countryCode = '', phoneNumber = ''] = val.split('-');
-		const countryCodeItem = this.getCountryByDialCode(countryCode);
-		if (countryCodeItem) {
-			this.countryCodeInput.selectedItem = countryCodeItem;
-		}
-		this.phoneNumberInput.value = phoneNumber;
-	}
-
-	get phoneNumberValue() {
-		return this.phoneNumberInput.value;
-	}
-
-	get countryCodeValue() {
-		return this.countryCodeInput.shadowRoot.querySelector('input').value;
-	}
-
-	get minLength() {
-		return parseInt(this.getAttribute('minlength'), 10) || 0;
-	}
-
-	getValidity() {
-		const hasCode = this.countryCodeInput.value;
-		const hasPhone = this.phoneNumberInput.value;
-		const emptyValue = !hasCode || !hasPhone;
-		const hasMinPhoneLength = this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
-
-		if (this.isRequired && emptyValue) {
-			return { valueMissing: true };
-		}
-		if (hasMinPhoneLength) {
-			return { tooShort: true };
-		}
-		if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
-			return { valueMissing: true };
-		}
-		return {}
-	};
-
-	init() {
-		this.addEventListener('focus', (e) => {
-			// we want to ignore focus events we are dispatching
-			if (e.isTrusted)
-				this.inputs[0].focus()
-		})
-
-		super.init?.();
-		this.initInputs();
-		this.setComboBoxDescriptor();
-	}
-
-	getCountryByDialCode(countryDialCode) {
-		return this.countryCodeInput.items.find(c => c.getAttribute('data-dial-code') === countryDialCode);
-	}
-
-	getCountryByCodeId(countryCode) {
-		return this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
-	}
-
-	handleDefaultCountryCode(countryCode) {
-		if (!this.countryCodeInput.value) {
-			const countryCodeItem = this.getCountryByCodeId(countryCode);
-			// When replacing the input component (inserting internal component into text-field) -
-			// Vaadin resets the input's value. We use setTimeout in order to make sure this happens
-			// after the reset.
-			if (countryCodeItem) {
-				setTimeout(() => {
-					this.countryCodeInput.selectedItem = countryCodeItem;
-				});
-			}
-		}
-	}
-
-	// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
-	// field that it searches the value, and the finaly display value of the input. We want to search ALL
-	// the values (so we made a field with all the values), but display ONLY the dial code, so we added
-	// this setter, which does that.
-	setComboBoxDescriptor() {
-		const comboBox = this.countryCodeInput;
-		const input = comboBox.shadowRoot.querySelector('input');
-		const valueDescriptor = Object.getOwnPropertyDescriptor(
-			input.constructor.prototype,
-			'value'
-		);
-		Object.defineProperties(input, {
-			value: {
-				...valueDescriptor,
-				set(val) {
-					if (!comboBox.items?.length) {
-						return;
-					}
-
-					const [_code, dialCode] = val.split(' ');
-
-					if (val === this.value) {
-						return;
-					}
-
-					valueDescriptor.set.call(this, dialCode || '');
-				}
-			}
-		});
-	}
-
-	initInputs() {
-		// Sanitize phone input value to filter everything but digits
-		this.phoneNumberInput.addEventListener('input', (e) => {
-			const telDigitsRegExp = /^\d$/;
-			const sanitizedInput = e.target.value
-				.split('')
-				.filter(char => telDigitsRegExp.test(char))
-				.join('');
-			e.target.value = sanitizedInput;
-		});
-
-		this.handleFocusEventsDispatching(this.inputs)
-		this.handleInputEventDispatching()
-	}
-
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		super.attributeChangedCallback(attrName, oldValue, newValue);
-
-		if (oldValue !== newValue) {
-			if (attrName === 'default-code' && newValue) {
-				this.handleDefaultCountryCode(newValue);
-			}
-			else if (inputRelatedAttrs.includes(attrName)) {
-				const attr = mapAttrs[attrName] || attrName;
-
-				if (commonAttrs.includes(attrName)) {
-					this.inputs.forEach(input => input.setAttribute(attr, newValue));
-				}
-				else if (countryAttrs.includes(attrName)) {
-					this.countryCodeInput.setAttribute(attr, newValue);
-				}
-				else if (phoneAttrs.includes(attrName)) {
-					this.phoneNumberInput.setAttribute(attr, newValue);
-				}
-			}
-		}
-	}
+    this.countryCodeInput = this.querySelector('descope-combo-box');
+    this.phoneNumberInput = this.querySelector('descope-text-field');
+    this.inputs = [this.countryCodeInput, this.phoneNumberInput];
+  }
+
+  get value() {
+    return this.inputs.map(({ value }) => value).join('-');
+  }
+
+  set value(val) {
+    const [countryCode = '', phoneNumber = ''] = val.split('-');
+    const countryCodeItem = this.getCountryByDialCode(countryCode);
+    if (countryCodeItem) {
+      this.countryCodeInput.selectedItem = countryCodeItem;
+    }
+    this.phoneNumberInput.value = phoneNumber;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get countryCodeValue() {
+    return this.countryCodeInput.shadowRoot.querySelector('input').value;
+  }
+
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
+
+  getValidity() {
+    const hasCode = this.countryCodeInput.value;
+    const hasPhone = this.phoneNumberInput.value;
+    const emptyValue = !hasCode || !hasPhone;
+    const hasMinPhoneLength =
+      this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
+
+    if (this.isRequired && emptyValue) {
+      return { valueMissing: true };
+    }
+    if (hasMinPhoneLength) {
+      return { tooShort: true };
+    }
+    if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[0].focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+    this.setComboBoxDescriptor();
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items.find(
+      (c) => c.getAttribute('data-dial-code') === countryDialCode
+    );
+  }
+
+  getCountryByCodeId(countryCode) {
+    return this.countryCodeInput.items.find((c) => c['data-id'] === countryCode)?.['data-name'];
+  }
+
+  handleDefaultCountryCode(countryCode) {
+    if (!this.countryCodeInput.value) {
+      const countryCodeItem = this.getCountryByCodeId(countryCode);
+      // When replacing the input component (inserting internal component into text-field) -
+      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens
+      // after the reset.
+      if (countryCodeItem) {
+        setTimeout(() => {
+          this.countryCodeInput.selectedItem = countryCodeItem;
+        });
+      }
+    }
+  }
+
+  // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+  // field that it searches the value, and the finaly display value of the input. We want to search ALL
+  // the values (so we made a field with all the values), but display ONLY the dial code, so we added
+  // this setter, which does that.
+  setComboBoxDescriptor() {
+    const comboBox = this.countryCodeInput;
+    const input = comboBox.shadowRoot.querySelector('input');
+    const valueDescriptor = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');
+    Object.defineProperties(input, {
+      value: {
+        ...valueDescriptor,
+        set(val) {
+          if (!comboBox.items?.length) {
+            return;
+          }
+
+          const [, dialCode] = val.split(' ');
+
+          if (val === this.value) {
+            return;
+          }
+
+          valueDescriptor.set.call(this, dialCode || '');
+        },
+      },
+    });
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      const telDigitsRegExp = /^\d$/;
+      const sanitizedInput = e.target.value
+        .split('')
+        .filter((char) => telDigitsRegExp.test(char))
+        .join('');
+      e.target.value = sanitizedInput;
+    });
+
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'default-code' && newValue) {
+        this.handleDefaultCountryCode(newValue);
+      } else if (inputRelatedAttrs.includes(attrName)) {
+        const attr = mapAttrs[attrName] || attrName;
+
+        if (commonAttrs.includes(attrName)) {
+          this.inputs.forEach((input) => input.setAttribute(attr, newValue));
+        } else if (countryAttrs.includes(attrName)) {
+          this.countryCodeInput.setAttribute(attr, newValue);
+        } else if (phoneAttrs.includes(attrName)) {
+          this.phoneNumberInput.setAttribute(attr, newValue);
+        }
+      }
+    }
+  }
 }
 
 export default PhoneFieldInternal;

package/src/components/descope-phone-field/helpers.js

@@ -1,9 +1,9 @@
 // We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
 // This reduces our bundle size, and we use it as a static remote resource.
 export const getCountryFlag = (code) =>
-	`https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
+  `https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
 
-export const comboBoxItem = ({ code, dialCode, name: country }) => (`
+export const comboBoxItem = ({ code, dialCode, name: country }) => `
 	<div
 		style="display:flex; flex-direction: column;"
 		data-id="${code}"
@@ -21,4 +21,4 @@ export const comboBoxItem = ({ code, dialCode, name: country }) => (`
 			<span>${dialCode}</span>
 		</div>
 	</div>
-`);
+`;

package/src/components/descope-text/TextClass.js

@@ -1,8 +1,4 @@
-import {
-	createStyleMixin,
-	draggableMixin,
-	componentNameValidationMixin
-} from '../../mixins';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -10,10 +6,10 @@ import { getComponentName } from '../../helpers/componentHelpers';
 export const componentName = getComponentName('text');
 
 class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
+    this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			:host {
 				display: inline-block;
@@ -25,28 +21,28 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
 		</style>
 		<slot></slot>
 		`;
-	}
+  }
 }
 
 export const TextClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { selector: () => ':host', property: 'width' },
-			fontSize: {},
-			textColor: { property: 'color' },
-			textLineHeight: { property: 'line-height' },
-			textLetterSpacing: { property: 'letter-spacing' },
-			textShadow: {},
-			textAlign: {},
-			textTransform: {},
-			fontFamily: {},
-			fontStyle: {},
-			fontWeight: {},
-			borderWidth: {},
-			borderStyle: {},
-			borderColor: {},
-		},
-	}),
-	draggableMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      fontSize: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textLetterSpacing: { property: 'letter-spacing' },
+      textShadow: {},
+      textAlign: {},
+      textTransform: {},
+      fontFamily: {},
+      fontStyle: {},
+      fontWeight: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
 )(RawText);

package/src/components/descope-text-area/TextAreaClass.js

@@ -1,91 +1,92 @@
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputContainer, resetInputCursor, resetInputField, resetInputPlaceholder, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputContainer,
+  resetInputCursor,
+  resetInputField,
+  resetInputPlaceholder,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-area');
 
 const {
-	host,
-	label,
-	placeholder,
-	inputField,
-	textArea,
-	requiredIndicator,
-	helperText,
-	errorMessage
+  host,
+  label,
+  placeholder,
+  inputField,
+  textArea,
+  requiredIndicator,
+  helperText,
+  errorMessage,
 } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	placeholder: { selector: 'textarea:placeholder-shown' },
-	inputField: { selector: '::part(input-field)' },
-	textArea: { selector: '> textarea' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' }
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  placeholder: { selector: 'textarea:placeholder-shown' },
+  inputField: { selector: '::part(input-field)' },
+  textArea: { selector: '> textarea' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 export const TextAreaClass = compose(
-	createStyleMixin({
-		mappings: {
-			hostWidth: { ...host, property: 'width' },
-			hostMinWidth: { ...host, property: 'min-width' },
-			fontSize: [
-				host,
-				textArea,
-			],
-			fontFamily: [
-				label,
-				inputField,
-				helperText,
-				errorMessage,
-			],
-			labelTextColor: [
-				{ ...label, property: 'color' },
-				{ ...requiredIndicator, property: 'color' }
-			],
-			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-			inputBackgroundColor: { ...inputField, property: 'background-color' },
-			inputValueTextColor: { ...textArea, property: 'color' },
-			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-			inputBorderWidth: { ...inputField, property: 'border-width' },
-			inputBorderStyle: { ...inputField, property: 'border-style' },
-			inputBorderColor: { ...inputField, property: 'border-color' },
-			inputBorderRadius: { ...inputField, property: 'border-radius' },
-			inputOutlineStyle: { ...inputField, property: 'outline-Style' },
-			inputOutlineColor: { ...inputField, property: 'outline-color' },
-			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-			inputOutlineWidth: { ...inputField, property: 'outline-width' },
-			inputResizeType: { ...textArea, property: 'resize' },
-		}
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      fontSize: [host, textArea],
+      fontFamily: [label, inputField, helperText, errorMessage],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputValueTextColor: { ...textArea, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputOutlineStyle: { ...inputField, property: 'outline-Style' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputResizeType: { ...textArea, property: 'resize' },
+      inputMinHeight: { ...textArea, property: 'min-height' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin
 )(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-area',
-		style: () => `
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-area',
+    style: () => `
 			:host {
 				display: inline-block;
 				max-width: 100%;
 			}
+			textarea {
+				height: 100%;
+			}
 			${useHostExternalPadding(TextAreaClass.cssVarList)}
 			${resetInputContainer('vaadin-text-area')}
 			${resetInputField('vaadin-text-area')}
 			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
 			${resetInputCursor('vaadin-text-area')}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );
-
-