@descope/web-components-ui 1.0.70 → 1.0.72

package/dist/index.esm.js

@@ -22,8 +22,6 @@ const compose = (...fns) =>
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-
 const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
 const DESCOPE_PREFIX = 'descope';
@@ -384,6 +382,8 @@ const createStyleMixin =
 			}
 
 			disconnectedCallback() {
+				super.disconnectedCallback?.();
+
 				this.#disconnectThemeManager?.();
 			}
 		};
@@ -420,56 +420,40 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
-const componentNameValidationMixin = (superclass) =>
-	class ComponentNameValidationMixinClass extends superclass {
-		#checkComponentName() {
-			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
 
-			if (!superclass.componentName) {
-				throw Error(
-					`component name is not defined on super class, make sure you have a static get for "componentName"`
-				);
-			}
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
 
-			if (currentComponentName !== superclass.componentName) {
-				throw Error(
-					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
-				);
-			}
-		}
+// add an event listener that is automatically removed on disconnect
+// usage example:
+// createEventListener.call(this,'change', this.onChange, { element? , ...options })
+function createEventListener(event, callback, { element, ...options } = {}) {
+  const timerId = setTimeout(() => console.warn(this.localName, 'is not using "createBaseClass", events will not be removed automatically on disconnect'), 2000);
 
-		connectedCallback() {
-			super.connectedCallback?.();
-			if (this.shadowRoot.isConnected) {
-				this.#checkComponentName();
-			}
-		}
-	};
+  this.addEventListener('connected', () => {
+    clearTimeout(timerId);
+  }, { once: true });
 
-const hoverableMixin =
-	(superclass) =>
-		class HoverableMixinClass extends superclass {
-			#boundOnMouseOver = this.#onMouseOver.bind(this)
-
-			#onMouseOver(e) {
-				this.setAttribute('hover', 'true');
-				e.target.addEventListener(
-					'mouseleave',
-					() => this.shadowRoot.host.removeAttribute('hover'),
-					{ once: true }
-				);
-			}
+  const targetEle = element || this;
+  const boundCallback = callback.bind(this);
 
-			connectedCallback() {
-				super.connectedCallback?.();
+  const onDisconnect = () => {
+    targetEle.removeEventListener(event, boundCallback);
+  };
 
-				const baseElement = this.shadowRoot.querySelector(
-					this.baseSelector
-				);
+  this.addEventListener('disconnected', onDisconnect, { once: true });
 
-				baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
-			}
-		};
+  targetEle.addEventListener(event, boundCallback, options);
+
+  return onDisconnect
+}
 
 const createBaseClass = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
@@ -478,10 +462,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
     }
 
     #baseElement;
+
+    #dispatchConnected = createDispatchEvent.bind(this, 'connected')
+    #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
+
+    // base selector is the selector for the component wrapper,
+    // it's the highest element that is relevant for the layout
     get baseSelector() {
       return baseSelector
     }
 
+    // this is the base element, which returned by querying the base selector
     get baseElement() {
       this.#baseElement ??= this.baseSelector ?
         this.rootElement.querySelector(this.baseSelector) :
@@ -490,12 +481,31 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
       return this.#baseElement
     }
 
+    // this is the component root level element, 
+    // it can be either a shadow root or the component's node from the light DOM
     get rootElement() {
       return this.shadowRoot || this
     }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+
+      // we are waiting for all components to listen before dispatching
+      setTimeout(this.#dispatchConnected);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+
+      this.#dispatchDisconnected();
+    }
   }
 
-  return compose(componentNameValidationMixin, hoverableMixin)(DescopeBaseClass)
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin
+  )(DescopeBaseClass)
 };
 
 const createProxy = ({
@@ -507,87 +517,69 @@ const createProxy = ({
 	includeAttrsSync = [],
 	includeForwardProps = []
 }) => {
-	const template = `
-		<style id="create-proxy"></style>
-		<${wrappedEleName}>
-		<slot></slot>
-		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
-		</${wrappedEleName}>
-	`;
-
 	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
-		constructor() {
-			super().attachShadow({ mode: 'open' }).innerHTML = template;
-			this.hostElement = this.shadowRoot.host;
-			this.shadowRoot.getElementById('create-proxy').innerHTML =
-				isFunction(style) ? style() : style;
-		}
+		#dispatchBlur = createDispatchEvent.bind(this, 'blur')
+		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
 
-		#boundOnFocus = this.#onFocus.bind(this);
-
-		// we want to focus on the proxy element when focusing our WCP
-		#onFocus() {
-			this.proxyElement.focus();
+		constructor() {
+			super().attachShadow({ mode: 'open' }).innerHTML = `
+			<style id="create-proxy">${isFunction(style) ? style() : style
+				}</style>
+			<${wrappedEleName}>
+			<slot></slot>
+			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
+			</${wrappedEleName}>
+		`;
 		}
 
-		focus = this.#onFocus
+		focus = () => this.baseElement.focus()
 
 		connectedCallback() {
-			if (this.shadowRoot.isConnected) {
-				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
-
-				this.addEventListener('focus', this.#boundOnFocus);
-
-				// this is needed for components that uses props, such as combo box
-				forwardProps(this.hostElement, this.proxyElement, includeForwardProps);
-
-				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
-				// this support is needed since both proxy host and element catch `focus`/`blur` event
-				// which causes faulty behavior.
-				// we need this to happen only when the proxy component is in the light DOM, 
-				// otherwise it will focus the nested proxy element
-				this.proxyElement.onkeydown = (e) => {
-					if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
-						this.removeAttribute('tabindex');
-						// We want to defer the action of setting the tab index back
-						// so it will happen after focusing the previous element
-						setTimeout(() => this.setAttribute('tabindex', '0'), 0);
-					}
-				};
+			super.connectedCallback?.();
 
-				syncAttrs(this.proxyElement, this.hostElement, {
-					excludeAttrs: excludeAttrsSync,
-					includeAttrs: includeAttrsSync
-				});
-			}
-		}
+			createEventListener.call(this, 'blur', (e) => {
+				this.#dispatchBlur();
+			}, { element: this.baseElement });
 
-		attributeChangedCallback() {
-			if (!this.proxyElement) {
-				return;
-			}
-		}
+			createEventListener.call(this, 'focus', (e) => {
+				this.#dispatchFocus();
+			}, { element: this.baseElement });
 
-		disconnectedCallback() {
-			super.disconnectedCallback?.();
+			createEventListener.call(this, 'focus', (e) => {
+				// if we got a focus event we want to focus the proxy element
+				if (e.isTrusted) {
+					this.focus();
+				}
+			});
+
+			// this is needed for components that uses props, such as combo box
+			forwardProps(this, this.baseElement, includeForwardProps);
+
+			// `onkeydown` is set on `baseElement` support proper tab-index navigation
+			// this support is needed since both proxy host and element catch `focus`/`blur` event
+			// which causes faulty behavior.
+			// we need this to happen only when the proxy component is in the light DOM, 
+			// otherwise it will focus the nested proxy element
+			this.baseElement.onkeydown = (e) => {
+				if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
+					this.removeAttribute('tabindex');
+					// We want to defer the action of setting the tab index back
+					// so it will happen after focusing the previous element
+					setTimeout(() => this.setAttribute('tabindex', '0'), 0);
+				}
+			};
 
-			this.removeEventListener('focus', this.#boundOnFocus);
+			syncAttrs(this.baseElement, this, {
+				excludeAttrs: excludeAttrsSync,
+				includeAttrs: includeAttrsSync
+			});
 		}
 	}
 
 	return ProxyClass;
 };
 
-// move create event to here
-
-// usage example:
-// #dispatchSomething = createDispatchEvent.bind(this, 'something')
-function createDispatchEvent(eventName) {
-  this[`on${eventName}`]?.(); // in case we got an event callback as property
-  this.dispatchEvent(new Event(eventName));
-}
-
-const observedAttributes = [
+const observedAttributes$2 = [
   'required',
   'pattern',
 ];
@@ -600,7 +592,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   static get observedAttributes() {
     return [
       ...superclass.observedAttributes || [],
-      ...observedAttributes
+      ...observedAttributes$2
     ];
   }
 
@@ -608,19 +600,12 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return true;
   }
 
-  #dispatchValid = createDispatchEvent.bind(this, 'valid')
-  #dispatchInvalid = createDispatchEvent.bind(this, 'invalid')
-
   #internals
 
-  #boundedHandleInput
-
   constructor() {
     super();
 
     this.#internals = this.attachInternals();
-
-    this.#boundedHandleInput = this.#handleInput.bind(this);
   }
 
   get defaultErrorMsgValueMissing() {
@@ -646,7 +631,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     }
   }
 
-  setValidity() {
+  #setValidity() {
     const validity = this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity));
   }
@@ -676,7 +661,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
       this.#internals.setValidity({ customError: true }, errorMessage);
     } else {
       this.#internals.setValidity({});
-      this.setValidity();
+      this.#setValidity();
     }
   }
 
@@ -688,38 +673,25 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return this.getAttribute('pattern')
   }
 
-  #handleInput() {
-    this.setValidity();
-    this.handleDispatchValidationEvents();
+  get form() {
+    return this.#internals.form
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-    if (observedAttributes.includes(attrName)) {
-      this.setValidity();
-    }
-  }
-
-  handleDispatchValidationEvents() {
-    if (this.checkValidity()) {
-      this.#dispatchValid();
-    } else {
-      this.#dispatchInvalid();
+    if (observedAttributes$2.includes(attrName)) {
+      this.#setValidity();
     }
   }
 
   connectedCallback() {
     super.connectedCallback?.();
+    createEventListener.call(this, 'change', this.#setValidity);
+    createEventListener.call(this, 'invalid', (e) => e.stopPropagation());
+    createEventListener.call(this, 'input', this.#setValidity);
 
-    this.addEventListener('input', this.#boundedHandleInput);
-
-    this.setValidity();
-    this.handleDispatchValidationEvents();
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('input', this.#boundedHandleInput);
+    this.#setValidity();
   }
 };
 
@@ -759,26 +731,17 @@ const proxyInputMixin = (superclass) =>
 
 		#inputElement
 
-		#boundHandleFocus
-		#boundHandleInvalid
-		#boundHandleValid
+		#dispatchChange = createDispatchEvent.bind(this, 'change')
 
 		constructor() {
 			super();
 
 			this.#inputElement = super.inputElement;
-
-			this.#boundHandleFocus = this.#handleFocus.bind(this);
-			this.#boundHandleInvalid = this.#handleInvalid.bind(this);
-			this.#boundHandleValid = this.#handleValid.bind(this);
-
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
-
 		}
 
 		get inputElement() {
-			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]');
-			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]');
+			const inputSlot = this.baseElement.shadowRoot.querySelector('slot[name="input"]');
+			const textAreaSlot = this.baseElement.shadowRoot.querySelector('slot[name="textarea"]');
 
 			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
@@ -797,7 +760,6 @@ const proxyInputMixin = (superclass) =>
 
 		reportValidityOnInternalInput() {
 			setTimeout(() => {
-				this.baseEle.focus(); //TODO: check if this is needed
 				this.inputElement.reportValidity();
 			});
 		}
@@ -810,202 +772,140 @@ const proxyInputMixin = (superclass) =>
 			}
 		}
 
-		setInternalInputErrorMessage() {
-			if (!this.checkValidity()) {
+		handleInternalInputErrorMessage() {
+			if (!this.inputElement.checkValidity()) {
 				this.inputElement.setCustomValidity(this.validationMessage);
 			}
 		}
 
-		// when clicking on the form submit button and the input is invalid
-		// we want it to appear as invalid
-		#handleFocus(e) {
-			if (e.relatedTarget?.form) {
-				if (!this.checkValidity()) {
-					this.setAttribute('invalid', 'true');
-				}
-
-				if (this.hasAttribute('invalid')) {
-					this.reportValidityOnInternalInput();
-				}
-			}
-		}
-
-		#handleInvalid() {
-			this.setInternalInputErrorMessage();
+		#handleErrorMessage() {
+			this.handleInternalInputErrorMessage();
 			this.setAttribute('error-message', this.validationMessage);
 		}
 
-		#handleValid() {
-			this.removeAttribute('invalid');
-		}
-
 		connectedCallback() {
 			super.connectedCallback?.();
 
-			// this is our way to identify that the form was submitted
-			// in this case, we want the input to be in error state if it's not valid
-			this.addEventListener('focus', this.#boundHandleFocus);
+			createEventListener.call(this, 'input', (e) => {
+				if (!this.inputElement.checkValidity()) {
+					this.inputElement.setCustomValidity('');
+					// after updating the input validity we want to trigger set validity on the wrapping element
+					// so we will get the updated validity
+					this.setCustomValidity('');
+
+					// Vaadin is getting the input event before us, 
+					// so in order to make sure they use the updated validity
+					// we calling their fn after updating the input validity
+					this.baseElement.__onInput(e);
+
+					this.#handleErrorMessage();
+				}
+			}, { element: this.inputElement });
+
+			createEventListener.call(this, 'change', () => {
+				this.#dispatchChange();
+			}, { element: this.baseElement });
 
-			this.addEventListener('invalid', this.#boundHandleInvalid);
-			this.addEventListener('valid', this.#boundHandleValid);
+			createEventListener.call(this, 'blur', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
+					this.#handleErrorMessage();
+				}
+			});
 
-			this.addEventListener('input', () => {
-				this.inputElement.setCustomValidity('');
-				if (!this.inputElement.checkValidity())
-					this.setInternalInputErrorMessage();
+			createEventListener.call(this, 'focus', (e) => {
+				// when clicking on the form submit button and the input is invalid
+				// we want it to appear as invalid
+				if (e.relatedTarget?.form === this.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput();
+					}
+				}
 			});
 
+			createEventListener.call(this, 'invalid', this.#handleErrorMessage);
+
+			this.handleInternalInputErrorMessage();
+
 			// this is needed in order to make sure the form input validation is working
+			// we do not want it to happen when the component is nested
 			if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
 				this.setAttribute('tabindex', 0);
 			}
 
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');
+			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 		}
+	};
 
-		disconnectedCallback() {
-			this.removeEventListener('focus', this.#boundHandleFocus);
-			this.removeEventListener('invalid', this.#boundHandleInvalid);
-			this.removeEventListener('valid', this.#boundHandleValid);
-		}
+const componentNameValidationMixin = (superclass) =>
+	class ComponentNameValidationMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.localName;
 
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
 
-			if (attrName === 'invalid' && newValue === '') {
-				this.setAttribute('invalid', 'true');
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
 			}
 		}
-	};
-
-const events = [
-  'blur',
-  'focus',
-  'focusin',
-  'focusout',
-];
-
-const focusMixin = (superclass) => class FocusMixinClass extends superclass {
-  #isFocused = false
-  #setFocusTimer
-
-  #boundedHandleFocus
-  #boundedHandleBlur
-  #boundedHandleFocusIn
-  #boundedHandleFocusOut
-
-  constructor() {
-    super();
-
-    for (const event of events) {
-      this[`dispatch${upperFirst(event)}`] = function () {
-        this.dispatchInputEvent(event);
-      };
-    }
-
-    this.#boundedHandleFocus = this.#handleFocus.bind(this);
-    this.#boundedHandleBlur = this.#handleBlur.bind(this);
-    this.#boundedHandleFocusIn = this.#handleFocusIn.bind(this);
-    this.#boundedHandleFocusOut = this.#handleFocusOut.bind(this);
-  }
-
-  #handleFocus(e) {
-    if (this.isReadOnly) {
-      e.stopPropagation();
-      return
-    }
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) { // TODO: check if this is needed, because Vaadin is also dispatching events
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation();
-      this.setFocus(true);
-
-      // if the focus event is on the root component (and not on the inner components)
-      // we want to notify the component and let it decide what to do with it
-      if (e.target === this) {
-        this.onFocus(e);
-      }
-    }
-  }
-
-  #handleFocusOut(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation();
-    }
-  }
-
-  #handleFocusIn(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation();
-    }
-  }
-
-  #handleBlur(e) {
-    if (e.isTrusted) {
-      e.stopPropagation();
-      this.setFocus(false);
-    }
-  }
-
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
 
-  // we want to debounce the calls to this fn
-  // so we can support input like components with multiple inputs inside
-  setFocus(isFocused) {
-    clearTimeout(this.#setFocusTimer);
-
-    this.#setFocusTimer = setTimeout(() => {
-      if (this.#isFocused !== isFocused) {
-        this.#isFocused = isFocused;
-        if (isFocused) {
-          this.dispatchFocus();
-          this.dispatchFocusin();
-        }
-        else {
-          this.dispatchBlur();
-          this.dispatchFocusout();
-        }
-      }
-    });
-  }
+		connectedCallback() {
+			super.connectedCallback?.();
+			this.#checkComponentName();
+		}
+	};
 
-  onFocus() {
-    console.warn('onFocus', 'is not implemented');
-  }
+const hoverableMixin =
+	(superclass) =>
+		class HoverableMixinClass extends superclass {
+			connectedCallback() {
+				super.connectedCallback?.();
 
-  dispatchInputEvent(eventName) {
-    this[`on${eventName}`]?.(); // in case we got an event callback as property
-    this.dispatchEvent(new InputEvent(eventName));
-  }
+				createEventListener.call(this, 'mouseover', (e) => {
+					this.setAttribute('hover', 'true');
+					e.target.addEventListener(
+						'mouseleave',
+						() => this.removeAttribute('hover'),
+						{ once: true }
+					);
+				}, { element: this.baseElement });
+			}
+		};
 
+const focusMixin = (superclass) => class FocusMixinClass extends superclass {
+  // we want to block all native events, 
+  // so the input can control when to dispatch it based on its internal behavior
   connectedCallback() {
-    super.connectedCallback?.();
+		super.connectedCallback?.();
+		
+    createEventListener.call(this, 'blur', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		});
 
-    this.addEventListener('focus', this.#boundedHandleFocus, true);
-    this.addEventListener('blur', this.#boundedHandleBlur, true);
-    this.addEventListener('focusin', this.#boundedHandleFocusIn);
-    this.addEventListener('focusout', this.#boundedHandleFocusOut);
-  }
+		createEventListener.call(this, 'focus', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		});
+
+		createEventListener.call(this, 'focusout', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		});
 
-  disconnectedCallback() {
-    this.removeEventListener('focus', this.#boundedHandleFocus);
-    this.removeEventListener('blur', this.#boundedHandleBlur);
-    this.removeEventListener('focusin', this.#boundedHandleFocusIn);
-    this.removeEventListener('focusout', this.#boundedHandleFocusOut);
+		createEventListener.call(this, 'focusin', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		});
   }
 };
 
@@ -1071,52 +971,38 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
 };
 
 const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
-
-  #boundedHandleChange
-  #boundedHandleBlur  
-  
-  #removeChangeListener
-  #removeBlurListener
-
   #dispatchChange = createDispatchEvent.bind(this, 'change')
 
-  constructor() {
-    super();
-
-    this.#boundedHandleChange = this.#handleChange.bind(this);
-    this.#boundedHandleBlur = this.#handleBlur.bind(this);
-  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.prevValue = this.value;
 
-  #handleChange(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the change events that dispatched by the component
-      // so we are stopping propagation and handling it in handleBlur
+    createEventListener.call(this, 'change', (e) => {
       e.stopPropagation();
-    }
-  }
+    });
 
-  #handleBlur() {
-    // on blur, we want to dispatch a change event
-    this.#dispatchChange();
+    createEventListener.call(this, 'blur', () => {
+      if (this.value !== this.prevValue) {
+        this.#dispatchChange();
+        this.prevValue = this.value;
+      }
+    });
   }
+};
 
-  connectedCallback() {
-    super.connectedCallback?.();
-
-    this.#removeChangeListener = addEventListener.bind();
-    this.addEventListener('change', this.#boundedHandleChange, true);
-    this.addEventListener('blur', this.#boundedHandleBlur);
-  }
+// we want all the valueless attributes to have "true" value 
+const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (newValue === '') {
+      this.setAttribute(attrName, 'true');
+      newValue = 'true';
+    }
 
-  disconnectedCallback() {
-    this.removeEventListener('change', this.#boundedHandleChange);
-    this.removeEventListener('blur', this.#boundedHandleBlur);
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
   }
 };
 
-const componentName$i = getComponentName('button');
+const componentName$j = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -1170,7 +1056,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$j
 	})
 );
 
@@ -1207,9 +1093,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$i, Button);
+customElements.define(componentName$j, Button);
 
-const componentName$h = getComponentName('checkbox');
+const componentName$i = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -1235,17 +1121,17 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$h
+		componentName: componentName$i
 	})
 );
 
-customElements.define(componentName$h, Checkbox);
+customElements.define(componentName$i, Checkbox);
 
-const componentName$g = getComponentName('loader-linear');
+const componentName$h = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$g;
+		return componentName$h;
 	}
 	constructor() {
 		super();
@@ -1303,11 +1189,11 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$g, LoaderLinear);
+customElements.define(componentName$h, LoaderLinear);
 
-const componentName$f = getComponentName('loader-radial');
+const componentName$g = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1353,11 +1239,11 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$f, LoaderRadial);
+customElements.define(componentName$g, LoaderRadial);
 
-const componentName$e = getComponentName('container');
+const componentName$f = getComponentName('container');
 
-class RawContainer extends createBaseClass({componentName: componentName$e, baseSelector: ':host > slot'}) {
+class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
 	constructor() {
 		super();
 
@@ -1413,26 +1299,26 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$e, Container);
+customElements.define(componentName$f, Container);
 
-const componentName$d = getComponentName('date-picker');
+const componentName$e = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$d,
+		componentName: componentName$e,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$d, DatePicker);
+customElements.define(componentName$e, DatePicker);
 
-const componentName$c = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+const componentName$d = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1510,9 +1396,9 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$b = getComponentName('text');
+const componentName$c = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1554,9 +1440,9 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$b, Text);
+customElements.define(componentName$c, Text);
 
-customElements.define(componentName$c, Divider);
+customElements.define(componentName$d, Divider);
 
 const selectors$3 = {
 	label: '::part(label)',
@@ -1593,7 +1479,7 @@ var textFieldMappings = {
 	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
 };
 
-const componentName$a = getComponentName('email-field');
+const componentName$b = getComponentName('email-field');
 
 let overrides$5 = ``;
 
@@ -1612,7 +1498,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$b
 	})
 );
 
@@ -1656,10 +1542,10 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$a, EmailField);
+customElements.define(componentName$b, EmailField);
 
-const componentName$9 = getComponentName('link');
-class RawLink extends createBaseClass({ componentName: componentName$9, baseSelector: ':host a' }) {
+const componentName$a = getComponentName('link');
+class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 		document.createElement('template');
@@ -1720,14 +1606,14 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$9, Link);
+customElements.define(componentName$a, Link);
 
-const componentName$8 = getComponentName('logo');
+const componentName$9 = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
-class RawLogo extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
+class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1762,9 +1648,9 @@ style = `
 }
 `;
 
-customElements.define(componentName$8, Logo);
+customElements.define(componentName$9, Logo);
 
-const componentName$7 = getComponentName('number-field');
+const componentName$8 = getComponentName('number-field');
 
 let overrides$4 = ``;
 
@@ -1783,7 +1669,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$8
 	})
 );
 
@@ -1827,9 +1713,13 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$7, NumberField);
+customElements.define(componentName$8, NumberField);
 
-var BaseInputClass = compose(focusMixin, inputValidationMixin, changeMixin)(HTMLElement); //todo: maybe we should use base class?
+const createBaseInputClass = (...args) => compose(
+  focusMixin,
+  inputValidationMixin,
+  changeMixin,
+)(createBaseClass(...args));
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -1845,25 +1735,28 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$6 = getComponentName('passcode-internal');
+const componentName$7 = getComponentName('passcode-internal');
+
+const observedAttributes$1 = [
+	'disabled',
+	'bordered',
+	'size',
+	'invalid'
+];
+
+const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: ':host > div' });
 
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
-		return [
-			...(BaseInputClass.observedAttributes || []),
-			'disabled',
-			'bordered',
-			'size',
-		];
+		return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
 	}
 
 	static get componentName() {
-		return componentName$6;
+		return componentName$7;
 	}
 
-	#boundHandleInvalid = this.#handleInvalid.bind(this)
-	#boundHandleValid = this.#handleValid.bind(this)
-	#boundHandleBlur = this.#handleBlur.bind(this)
+	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
+	#dispatchFocus = createDispatchEvent.bind(this, 'focus')
 
 	constructor() {
 		super();
@@ -1872,7 +1765,7 @@ class PasscodeInternal extends BaseInputClass {
 			st-width="35px"
 			data-id=${idx}
 			type="tel"
-			autocomplete="none"
+			autocomplete="off"
 		></descope-text-field>
 	`);
 
@@ -1882,8 +1775,6 @@ class PasscodeInternal extends BaseInputClass {
 		</div>
 		`;
 
-		this.baseSelector = ':host > div';
-
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
 	}
 
@@ -1909,16 +1800,6 @@ class PasscodeInternal extends BaseInputClass {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	#handleInvalid() {
-		if (this.hasAttribute('invalid')) {
-			this.inputs.forEach(input => input.setAttribute('invalid', 'true'));
-		}
-	}
-
-	#handleValid() {
-		this.inputs.forEach(input => input.removeAttribute('invalid'));
-	}
-
 	getValidity() {
 		if (this.isRequired && !this.value) {
 			return { valueMissing: true };
@@ -1931,25 +1812,17 @@ class PasscodeInternal extends BaseInputClass {
 		}
 	};
 
-	onFocus(){
-		this.inputs[0].focus();
-	}
-
 	connectedCallback() {
+		// we are adding listeners before calling to super because it's stopping the events
+		createEventListener.call(this, 'focus', (e) => {
+			// we want to ignore focus events we are dispatching
+			if (e.isTrusted)
+				this.inputs[0].focus();
+		});
+
 		super.connectedCallback?.();
 
 		this.initInputs();
-
-		this.addEventListener('invalid', this.#boundHandleInvalid);
-		this.addEventListener('valid', this.#boundHandleValid);
-		this.addEventListener('blur', this.#boundHandleBlur);
-	}
-
-	disconnectedCallback() {
-		super.connectedCallback?.();
-		this.removeEventListener('invalid', this.#boundHandleInvalid);
-		this.removeEventListener('valid', this.#boundHandleValid);
-		this.removeEventListener('blur', this.#boundHandleBlur);
 	}
 
 	getInputIdx(inputEle) {
@@ -1981,33 +1854,60 @@ class PasscodeInternal extends BaseInputClass {
 		focusElement(currentInput);
 	};
 
-	#handleBlur() {
-		this.#handleInvalid();
-	}
-
 	initInputs() {
+		let prevVal = this.value;
+		let blurTimerId;
+
 		this.inputs.forEach((input) => {
-			input.oninput = (e) => {
+			// in order to simulate blur on the input
+			// we are checking if focus on one of the digits happened immediately after blur on another digit
+			// if not, the component is no longer focused and we should simulate blur
+			createEventListener.call(this, 'blur', (e) => {
+				e.stopImmediatePropagation();
+
+				blurTimerId = setTimeout(() => {
+					blurTimerId = null;
+					this.#dispatchBlur();
+				});
+			}, { element: input });
+
+			createEventListener.call(this, 'focus', (e) => {
+				e.stopImmediatePropagation();
+
+				clearTimeout(blurTimerId);
+				if (!blurTimerId) {
+					this.#dispatchFocus();
+				}
+			}, { element: input });
+
+			createEventListener.call(this, 'input', (e) => {
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) {
 					// if we got an invalid value we want to clear the input
 					input.value = '';
-					if (e.data === null) {
-						// if the user deleted the char, we want to focus the prev digit
-						focusElement(this.getPrevInput(input));
-					}
 				}
 				else this.fillDigits(charArr, input);
-			};
+
+				// we want to stop input events if the value wasn't change
+				if (prevVal === this.value) {
+					e.stopImmediatePropagation();
+				}
+			}, { element: input });
 
 			input.onkeydown = ({ key }) => {
+				prevVal = this.value;
+
 				// when user deletes a digit, we want to focus the previous digit
 				if (key === 'Backspace') {
+					// if the cursor is at 0, we want to move it to 1, so the value will be deleted
+					if (!input.selectionStart) {
+						input.setSelectionRange(1, 1);
+					}
 					setTimeout(() => {
 						focusElement(this.getPrevInput(input));
 					});
-				} else if (key.match(/^(\d)$/g)) { // if input is a digit
+				} else if (key.length === 1) { // we want only characters and not command keys
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
 			};
@@ -2017,15 +1917,20 @@ class PasscodeInternal extends BaseInputClass {
 	attributeChangedCallback(attrName, oldValue, newValue) {
 		super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
+		// sync attributes to inputs
 		if (oldValue !== newValue) {
-			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {
-				this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
+			if (observedAttributes$1.includes(attrName)) {
+				this.inputs.forEach(
+					(input) => newValue === null ?
+						input.removeAttribute(attrName) :
+						input.setAttribute(attrName, newValue)
+				);
 			}
 		}
 	}
 }
 
-const componentName$5 = getComponentName('text-field');
+const componentName$6 = getComponentName('text-field');
 
 let overrides$3 = ``;
 
@@ -2042,7 +1947,7 @@ const TextField = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$6
 	})
 );
 
@@ -2087,7 +1992,7 @@ overrides$3 = `
 	}
 `;
 
-const componentName$4 = getComponentName('passcode');
+const componentName$5 = getComponentName('passcode');
 
 const customMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -2104,17 +2009,17 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$6} 
+			<${componentName$7} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$6}>
+			></${componentName$7}>
 			`;
 
-			this.proxyElement.appendChild(template.content.cloneNode(true));
+			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$6);
+			this.inputElement = this.shadowRoot.querySelector(componentName$7);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
 
@@ -2193,17 +2098,17 @@ const Passcode = compose(
 		}
     `,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
+		componentName: componentName$5
 	})
 );
 
-customElements.define(componentName$5, TextField);
+customElements.define(componentName$6, TextField);
 
-customElements.define(componentName$6, PasscodeInternal);
+customElements.define(componentName$7, PasscodeInternal);
 
-customElements.define(componentName$4, Passcode);
+customElements.define(componentName$5, Passcode);
 
-const componentName$3 = getComponentName('password-field');
+const componentName$4 = getComponentName('password-field');
 
 let overrides$2 = ``;
 
@@ -2228,7 +2133,7 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$4
 	})
 );
 
@@ -2272,9 +2177,9 @@ overrides$2 = `
 	}
 `;
 
-customElements.define(componentName$3, PasswordField);
+customElements.define(componentName$4, PasswordField);
 
-const componentName$2 = getComponentName('switch-toggle');
+const componentName$3 = getComponentName('switch-toggle');
 
 let overrides$1 = ``;
 
@@ -2294,7 +2199,7 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$3
 	})
 );
 
@@ -2352,9 +2257,9 @@ overrides$1 = `
 	}
 `;
 
-customElements.define(componentName$2, SwitchToggle);
+customElements.define(componentName$3, SwitchToggle);
 
-const componentName$1 = getComponentName('text-area');
+const componentName$2 = getComponentName('text-area');
 
 const selectors$1 = {
 	label: '::part(label)',
@@ -2390,7 +2295,7 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$1
+		componentName: componentName$2
 	})
 );
 
@@ -2416,7 +2321,53 @@ overrides = `
 	}	
 `;
 
-customElements.define(componentName$1, TextArea);
+customElements.define(componentName$2, TextArea);
+
+const observedAttributes = ['src', 'alt'];
+
+const componentName$1 = getComponentName('image');
+
+const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
+class RawImage extends BaseClass {
+	static get observedAttributes() {
+		return observedAttributes.concat(BaseClass.observedAttributes || []);
+	}
+
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > img {
+				width: 100%;
+				height: 100%
+			}
+			:host {
+				display: inline-flex;
+			}
+		</style>
+		<img/>
+	`;
+	}
+
+	connectedCallback(){
+		super.connectedCallback?.();
+
+		forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
+	}
+}
+
+const Image = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+		}
+	}),
+	draggableMixin,
+)(RawImage);
+
+customElements.define(componentName$1, Image);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -2700,7 +2651,7 @@ const mode = {
 	surface: globalRefs$7.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$i);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
 
 const button = {
 	...helperTheme$2,
@@ -2937,7 +2888,7 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, 'container');
+	}, Container.componentName);
 
 const container = {
 	...helperTheme$1,
@@ -3158,7 +3109,7 @@ const vars$3 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$c);
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
 
 
 const divider = {
@@ -3422,6 +3373,10 @@ const comboBox = {
 	// [vars.overlayBorder]: '3px solid red',
 };
 
+Image.cssVarList;
+
+const image = {};
+
 var components = {
 	button,
 	textField: textField$1,
@@ -3439,7 +3394,8 @@ var components = {
 	passcode,
 	loaderRadial,
 	loaderLinear,
-	comboBox
+	comboBox,
+	image
 };
 
 var index = { globals, components };