@descope/web-components-ui 1.0.371 → 1.0.373

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

@@ -11,6 +11,10 @@ const {
   disabledPlaceholder,
   inputDisabled,
   inputIcon,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -27,6 +31,10 @@ const {
   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 {
@@ -59,8 +67,12 @@ export default {
   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' },
   ],
-  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -73,6 +85,8 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -80,12 +94,17 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: [{ ...input, property: 'text-align' }],
+  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' },
@@ -97,10 +116,22 @@ export default {
   inputTransformY: { ...label, property: 'transform' },
   inputTransition: { ...label, property: 'transition' },
   marginInlineStart: { ...label, property: 'margin-inline-start' },
-  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
-  inputVerticalAlignment: [{ ...inputField, property: 'align-items' }],
-  valueInputHeight: [{ ...input, property: 'height' }],
-  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+  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' },

package/src/mixins/externalInputHelpers.js

@@ -0,0 +1,86 @@
+// since on load we can only sample the color of the placeholder,
+// we need to temporarily populate the input in order to sample the value color
+const getValueColor = (ele, computedStyle) => {
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '_';
+
+  const valueColor = computedStyle.getPropertyValue('color');
+
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '';
+
+  return valueColor;
+};
+
+export const createExternalInputSlot = (slotName, targetSlotName) => {
+  const slotEle = document.createElement('slot');
+
+  slotEle.setAttribute('name', slotName);
+  slotEle.setAttribute('slot', targetSlotName);
+
+  return slotEle;
+};
+
+export const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
+  const inputEle = document.createElement('input');
+
+  inputEle.setAttribute('slot', targetSlotName);
+  inputEle.setAttribute('type', type);
+  inputEle.setAttribute('data-hidden-input', 'true');
+  inputEle.setAttribute('autocomplete', autocompleteType);
+
+  return inputEle;
+};
+
+// We apply the original input's style to the external-input.
+// Eventually, the user should interact directly with the external input.
+// We keep the original input
+export const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
+  // We set a timeout here to avoid "Double Print" cases,
+  // caused by sampling the computed style before it's ready.
+  setTimeout(() => {
+    const computedStyle = getComputedStyle(sourceInputEle);
+    // Get minimal set of computed theme properties to set on external input
+    const height = computedStyle.getPropertyValue('height');
+    const paddingLeft = computedStyle.getPropertyValue('padding-left');
+    const paddingRight = computedStyle.getPropertyValue('padding-right');
+    const fontSize = computedStyle.getPropertyValue('font-size');
+    const fontFamily = computedStyle.getPropertyValue('font-family');
+    const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
+    const caretColor = computedStyle.getPropertyValue('caret-color');
+
+    const valueColor = getValueColor(sourceInputEle, computedStyle);
+
+    const commonThemeStyles = [
+      ['all', 'unset'],
+      ['position', 'absolute'],
+      ['background-color', 'transparent'],
+      ['height', height],
+      ['left', paddingLeft],
+      ['right', paddingRight],
+      ['font-size', fontSize],
+      ['font-family', fontFamily],
+      ['letter-spacing', letterSpacing],
+      ['caret-color', caretColor], // this is for seeing caret when focusing on external input
+      ['color', valueColor],
+    ];
+
+    commonThemeStyles.forEach(([key, val]) =>
+      targetInputEle.style.setProperty(key, val, 'important')
+    );
+
+    // Handle floating label theme properties
+    if (labelType === 'floating') {
+      const marginBottom = computedStyle.getPropertyValue('margin-bottom');
+      targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
+    }
+
+    // sample and apply width only after original input is ready and fully rendered
+    const width = computedStyle.getPropertyValue('width');
+    targetInputEle.style.setProperty(
+      'width',
+      `calc(${width} - ${paddingLeft} - ${paddingRight}`,
+      'important'
+    );
+  }, 0);
+};

package/src/mixins/externalInputMixin.js

@@ -0,0 +1,165 @@
+import { syncAttrs } from '../helpers/componentHelpers';
+import {
+  applyExternalInputStyles,
+  createExternalInputEle,
+  createExternalInputSlot,
+} from './externalInputHelpers';
+
+export const externalInputMixin =
+  ({ inputType, autocompleteType, includeAttrs = [], noBlurDispatch = false }) =>
+  (superclass) =>
+    class ExternalInputMixinClass extends superclass {
+      #timers = [];
+
+      get isExternalInput() {
+        return this.getAttribute('external-input') === 'true';
+      }
+
+      createExternalInput() {
+        if (!this.isExternalInput) {
+          return null;
+        }
+
+        // use original input element as reference
+        const origInput = this.baseElement.querySelector('input');
+
+        // to avoid focus loop between external-input and origInput
+        // we set origInput's tabindex to -1
+        // otherwise, shift-tab will never leave the component focus
+        origInput.setAttribute('tabindex', '-1');
+
+        // create external slot
+        const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
+
+        // append external slot to base element
+        this.baseElement.appendChild(externalInputSlot);
+
+        this.externalInput = createExternalInputEle(
+          'external-input',
+          inputType,
+          this.getAutocompleteType()
+        );
+
+        // apply original input's styles to external input
+        setTimeout(() => {
+          applyExternalInputStyles(origInput, this.externalInput, this.getAttribute('label-type'));
+        });
+
+        // 1Password catches the internal input, so we forward the value to the external input
+        this.forwardInputValue(origInput, this.externalInput);
+
+        syncAttrs(origInput, this.externalInput, {
+          includeAttrs,
+        });
+
+        // We disable Vaadin's original `_setFocused` function, and use handleFocusEvents
+        // and handleBlurEvents functions
+        this.baseElement
+          .querySelector('input')
+          .addEventListener('focusout', (e) => e.stopImmediatePropagation(), true);
+
+        // In order to manage focus/blur events when moving between parts of the component
+        // we're managing the event dispatching by ourselves, with the following strategy:
+        // - If one of the component parts is focused - it means that the component is still focused - so we stop the blur events.
+        // - When none of the component parts is focused, we dispatch blur event.
+        this.handleFocusEvents();
+        this.handleBlurEvents();
+
+        // sync input value
+        this.handlelInputEvents(this.externalInput);
+
+        // append external input to component's DOM
+        this.appendChild(this.externalInput);
+
+        return this.externalInput;
+      }
+
+      clearBlurTimers() {
+        this.#timers.forEach((timer) => clearTimeout(timer));
+        this.#timers.length = 0;
+      }
+
+      dispatchBlur() {
+        return setTimeout(() => {
+          this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
+          this.removeAttribute('focused');
+        });
+      }
+
+      handleFocusEvents() {
+        // on baseElement `focus` we forward the focus to the external input.
+        // also, in order to avoid any blur within the component, we clear the blur timers.
+        this.baseElement.addEventListener('focus', () => {
+          this.externalInput.focus();
+          this.clearBlurTimers();
+        });
+
+        // on `focus` of the external input, we manually set the `focused` attribute
+        this.externalInput.addEventListener('focus', () => {
+          this.clearBlurTimers();
+          setTimeout(() => this.baseElement.setAttribute('focused', 'true'));
+        });
+      }
+
+      handleBlurEvents() {
+        this.baseElement.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            // some components do not require this synthetic blur dispatch (e.g. Password)
+            // so we allow them to override this dispatch
+            if (noBlurDispatch) return;
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+
+        this.externalInput.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+      }
+
+      handlelInputEvents(externalInput) {
+        // sync value of insible input back to original input
+        externalInput.addEventListener('input', (e) => {
+          this.value = e.target.value;
+        });
+
+        // handle has-value attr
+        externalInput.addEventListener('input', (e) => {
+          if (!e.target.value) {
+            this.removeAttribute('has-value');
+          } else {
+            this.setAttribute('has-value', 'true');
+          }
+        });
+      }
+
+      getAutocompleteType() {
+        return this.getAttribute('autocomplete') || autocompleteType;
+      }
+
+      forwardInputValue(source, target) {
+        // set internal sync events
+        const valueDescriptor = Object.getOwnPropertyDescriptor(
+          this.inputElement.constructor.prototype,
+          'value'
+        );
+
+        Object.defineProperty(source, 'value', {
+          ...valueDescriptor,
+
+          set(v) {
+            valueDescriptor.set.call(this, v);
+            // eslint-disable-next-line no-param-reassign
+            target.value = v;
+          },
+          configurable: true,
+        });
+      }
+    };

package/src/mixins/index.js

@@ -10,3 +10,4 @@ export { changeMixin } from './changeMixin';
 export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin';
 export { lifecycleEventsMixin } from './lifecycleEventsMixin';
 export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
+export { externalInputMixin } from './externalInputMixin';

package/src/mixins/proxyInputMixin.js

@@ -42,7 +42,7 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // useProxyTargets flag allows to forwardProps to other targets, other than
-    // `this.inputElement`.
+    // `this.inputElement`. It's to be used within `external-input` components,
     // if needed
     useProxyTargets = false,
     // allows us to set the event that should trigger validation
@@ -181,7 +181,10 @@ const proxyInputMixin =
 
           // sync properties
           proxyProps.forEach((prop) => {
-            const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
             forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 

package/src/theme/components/enrichedText.js

@@ -26,6 +26,14 @@ const enrichedText = {
   [vars.fontWeightBold]: '900',
   [vars.minWidth]: '0.25em',
   [vars.minHeight]: '1.35em',
+
+  [vars.hostDisplay]: 'inline-block',
+
+  _empty: {
+    _hideWhenEmpty: {
+      [vars.hostDisplay]: 'none',
+    },
+  },
 };
 
 export default enrichedText;