@descope/web-components-ui 1.0.71 → 1.0.73

package/dist/index.esm.js

@@ -364,8 +364,8 @@ const createStyleMixin =
 				(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
 			}
 
-			connectedCallback() {
-				super.connectedCallback?.();
+			init() {
+				super.init?.();
 				if (this.shadowRoot.isConnected) {
 
 					this.#addClassName(superclass.componentName);
@@ -420,41 +420,6 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
-// 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);
-
-  this[`on${eventName}`]?.(event); // in case we got an event callback as property
-  this.dispatchEvent(event);
-}
-
-// 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);
-
-  this.addEventListener('connected', () => {
-    clearTimeout(timerId);
-  }, { once: true });
-
-  const targetEle = element || this;
-  const boundCallback = callback.bind(this);
-
-  const onDisconnect = () => {
-    targetEle.removeEventListener(event, boundCallback);
-  };
-
-  this.addEventListener('disconnected', onDisconnect, { once: true });
-
-  targetEle.addEventListener(event, boundCallback, options);
-
-  return onDisconnect
-}
-
 const createBaseClass = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
     static get componentName() {
@@ -463,8 +428,7 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
 
     #baseElement;
 
-    #dispatchConnected = createDispatchEvent.bind(this, 'connected')
-    #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
+    #isInit = true;
 
     // base selector is the selector for the component wrapper,
     // it's the highest element that is relevant for the layout
@@ -478,6 +442,9 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
         this.rootElement.querySelector(this.baseSelector) :
         this;
 
+      if(!this.#baseElement) {
+        console.warn('missing base element for component', this.localName);
+      }
       return this.#baseElement
     }
 
@@ -490,14 +457,13 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
     connectedCallback() {
       super.connectedCallback?.();
 
-      // we are waiting for all components to listen before dispatching
-      setTimeout(this.#dispatchConnected);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback?.();
-
-      this.#dispatchDisconnected();
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
     }
   }
 
@@ -508,6 +474,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
   )(DescopeBaseClass)
 };
 
+// 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);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+
 const createProxy = ({
 	componentName,
 	wrappedEleName,
@@ -534,18 +511,18 @@ const createProxy = ({
 
 		focus = () => this.baseElement.focus()
 
-		connectedCallback() {
-			super.connectedCallback?.();
+		init() {
+			super.init?.();
 
-			createEventListener.call(this, 'blur', (e) => {
+			this.baseElement.addEventListener('blur', (e) => {
 				this.#dispatchBlur();
-			}, { element: this.baseElement });
+			});
 
-			createEventListener.call(this, 'focus', (e) => {
+			this.baseElement.addEventListener('focus', (e) => {
 				this.#dispatchFocus();
-			}, { element: this.baseElement });
+			});
 
-			createEventListener.call(this, 'focus', (e) => {
+			this.addEventListener('focus', (e) => {
 				// if we got a focus event we want to focus the proxy element
 				if (e.isTrusted) {
 					this.focus();
@@ -579,7 +556,7 @@ const createProxy = ({
 	return ProxyClass;
 };
 
-const observedAttributes$1 = [
+const observedAttributes$2 = [
   'required',
   'pattern',
 ];
@@ -592,7 +569,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   static get observedAttributes() {
     return [
       ...superclass.observedAttributes || [],
-      ...observedAttributes$1
+      ...observedAttributes$2
     ];
   }
 
@@ -680,16 +657,16 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-    if (observedAttributes$1.includes(attrName)) {
+    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);
+  init() {
+    super.init?.();
+    this.addEventListener('change', this.#setValidity);
+    this.addEventListener('invalid', (e) => e.stopPropagation());
+    this.addEventListener('input', this.#setValidity);
 
     this.#setValidity();
   }
@@ -724,7 +701,7 @@ const getNestedInput = (ele) => {
 };
 
 const proxyInputMixin = (superclass) =>
-	class proxyInputMixinClass extends inputValidationMixin(superclass) {
+	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
 		static get observedAttributes() {
 			return [...superclass.observedAttributes || [], ...errorAttrs];
 		}
@@ -783,10 +760,10 @@ const proxyInputMixin = (superclass) =>
 			this.setAttribute('error-message', this.validationMessage);
 		}
 
-		connectedCallback() {
-			super.connectedCallback?.();
+		init() {
+			super.init?.();
 
-			createEventListener.call(this, 'input', (e) => {
+			this.inputElement.addEventListener('input', (e) => {
 				if (!this.inputElement.checkValidity()) {
 					this.inputElement.setCustomValidity('');
 					// after updating the input validity we want to trigger set validity on the wrapping element
@@ -800,20 +777,20 @@ const proxyInputMixin = (superclass) =>
 
 					this.#handleErrorMessage();
 				}
-			}, { element: this.inputElement });
+			});
 
-			createEventListener.call(this, 'change', () => {
+			this.baseElement.addEventListener('change', () => {
 				this.#dispatchChange();
-			}, { element: this.baseElement });
+			});
 
-			createEventListener.call(this, 'blur', () => {
+			this.addEventListener('blur', () => {
 				if (!this.checkValidity()) {
 					this.setAttribute('invalid', 'true');
 					this.#handleErrorMessage();
 				}
 			});
 
-			createEventListener.call(this, 'focus', (e) => {
+			this.addEventListener('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) {
@@ -827,7 +804,7 @@ const proxyInputMixin = (superclass) =>
 				}
 			});
 
-			createEventListener.call(this, 'invalid', this.#handleErrorMessage);
+			this.addEventListener('invalid', this.#handleErrorMessage);
 
 			this.handleInternalInputErrorMessage();
 
@@ -862,48 +839,47 @@ const componentNameValidationMixin = (superclass) =>
 			}
 		}
 
-		connectedCallback() {
-			super.connectedCallback?.();
+		init() {
+			super.init?.();
 			this.#checkComponentName();
 		}
 	};
 
-const hoverableMixin =
-	(superclass) =>
-		class HoverableMixinClass extends superclass {
-			connectedCallback() {
-				super.connectedCallback?.();
-
-				createEventListener.call(this, 'mouseover', (e) => {
-					this.setAttribute('hover', 'true');
-					e.target.addEventListener(
-						'mouseleave',
-						() => this.removeAttribute('hover'),
-						{ once: true }
-					);
-				}, { element: this.baseElement });
-			}
-		};
+const hoverableMixin = (superclass) =>
+	class HoverableMixinClass extends superclass {
+		init() {
+			super.init?.();
+
+			this.baseElement.addEventListener('mouseover', (e) => {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.removeAttribute('hover'),
+					{ once: true }
+				);
+			});
+		}
+	};
 
 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?.();
+  init() {
+		super.init?.();
 		
-    createEventListener.call(this, 'blur', (e) => {
+    this.addEventListener('blur', (e) => {
 			e.isTrusted && e.stopImmediatePropagation();
 		});
 
-		createEventListener.call(this, 'focus', (e) => {
+		this.addEventListener('focus', (e) => {
 			e.isTrusted && e.stopImmediatePropagation();
 		});
 
-		createEventListener.call(this, 'focusout', (e) => {
+		this.addEventListener('focusout', (e) => {
 			e.isTrusted && e.stopImmediatePropagation();
 		});
 
-		createEventListener.call(this, 'focusin', (e) => {
+		this.addEventListener('focusin', (e) => {
 			e.isTrusted && e.stopImmediatePropagation();
 		});
   }
@@ -961,8 +937,8 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
       this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover'); };
     }
 
-    connectedCallback() {
-      super.connectedCallback?.();
+    init() {
+      super.init?.();
       forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
 
       this.#handleHoverAttribute();
@@ -973,15 +949,15 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
 const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
   #dispatchChange = createDispatchEvent.bind(this, 'change')
 
-  connectedCallback() {
-    super.connectedCallback?.();
+  init() {
+    super.init?.();
     this.prevValue = this.value;
 
-    createEventListener.call(this, 'change', (e) => {
+    this.addEventListener('change', (e) => {
       e.stopPropagation();
     });
 
-    createEventListener.call(this, 'blur', () => {
+    this.addEventListener('blur', () => {
       if (this.value !== this.prevValue) {
         this.#dispatchChange();
         this.prevValue = this.value;
@@ -1002,7 +978,26 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
   }
 };
 
-const componentName$i = getComponentName('button');
+const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
+  get isReadOnly() {
+    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+  }
+
+  init() {
+    ['focus', 'blur'].forEach(event => {
+      this.addEventListener(event, (e) => {
+        if (this.isReadOnly) {
+          e.stopImmediatePropagation();
+          e.preventDefault();
+        }
+      }, true);
+    });
+
+    super.init?.();
+  }
+};
+
+const componentName$j = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -1056,7 +1051,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$j
 	})
 );
 
@@ -1093,9 +1088,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({
@@ -1121,17 +1116,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();
@@ -1189,11 +1184,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();
 
@@ -1239,11 +1234,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();
 
@@ -1299,26 +1294,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();
 
@@ -1396,9 +1391,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();
 
@@ -1440,9 +1435,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)',
@@ -1479,7 +1474,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 = ``;
 
@@ -1498,7 +1493,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$b
 	})
 );
 
@@ -1542,10 +1537,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');
@@ -1606,14 +1601,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();
 
@@ -1646,11 +1641,14 @@ style = `
 	display: inline-block;
 	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
 }
+:host[draggable="true"] > div {
+	pointer-events: none
+}
 `;
 
-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 = ``;
 
@@ -1669,7 +1667,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$8
 	})
 );
 
@@ -1713,12 +1711,13 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$7, NumberField);
+customElements.define(componentName$8, NumberField);
 
 const createBaseInputClass = (...args) => compose(
   focusMixin,
   inputValidationMixin,
   changeMixin,
+  readOnlyMixin
 )(createBaseClass(...args));
 
 const focusElement = (ele) => {
@@ -1735,24 +1734,25 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$6 = getComponentName('passcode-internal');
+const componentName$7 = getComponentName('passcode-internal');
 
-const observedAttributes = [
+const observedAttributes$1 = [
 	'disabled',
 	'bordered',
 	'size',
-	'invalid'
+	'invalid',
+	'readonly'
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: ':host > div' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
 
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
-		return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+		return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
 	}
 
 	static get componentName() {
-		return componentName$6;
+		return componentName$7;
 	}
 
 	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -1812,15 +1812,15 @@ class PasscodeInternal extends BaseInputClass {
 		}
 	};
 
-	connectedCallback() {
+	init() {
 		// we are adding listeners before calling to super because it's stopping the events
-		createEventListener.call(this, 'focus', (e) => {
+		this.addEventListener('focus', (e) => {
 			// we want to ignore focus events we are dispatching
 			if (e.isTrusted)
 				this.inputs[0].focus();
 		});
 
-		super.connectedCallback?.();
+		super.init?.();
 
 		this.initInputs();
 	}
@@ -1862,25 +1862,25 @@ class PasscodeInternal extends BaseInputClass {
 			// 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) => {
+			input.addEventListener('blur', (e) => {
 				e.stopImmediatePropagation();
 
 				blurTimerId = setTimeout(() => {
 					blurTimerId = null;
 					this.#dispatchBlur();
 				});
-			}, { element: input });
+			});
 
-			createEventListener.call(this, 'focus', (e) => {
+			input.addEventListener('focus', (e) => {
 				e.stopImmediatePropagation();
 
 				clearTimeout(blurTimerId);
 				if (!blurTimerId) {
 					this.#dispatchFocus();
 				}
-			}, { element: input });
+			});
 
-			createEventListener.call(this, 'input', (e) => {
+			input.addEventListener('input', (e) => {
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) {
@@ -1893,7 +1893,7 @@ class PasscodeInternal extends BaseInputClass {
 				if (prevVal === this.value) {
 					e.stopImmediatePropagation();
 				}
-			}, { element: input });
+			});
 
 			input.onkeydown = ({ key }) => {
 				prevVal = this.value;
@@ -1919,7 +1919,7 @@ class PasscodeInternal extends BaseInputClass {
 
 		// sync attributes to inputs
 		if (oldValue !== newValue) {
-			if (observedAttributes.includes(attrName)) {
+			if (observedAttributes$1.includes(attrName)) {
 				this.inputs.forEach(
 					(input) => newValue === null ?
 						input.removeAttribute(attrName) :
@@ -1930,7 +1930,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 }
 
-const componentName$5 = getComponentName('text-field');
+const componentName$6 = getComponentName('text-field');
 
 let overrides$3 = ``;
 
@@ -1947,7 +1947,7 @@ const TextField = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$6
 	})
 );
 
@@ -1992,7 +1992,7 @@ overrides$3 = `
 	}
 `;
 
-const componentName$4 = getComponentName('passcode');
+const componentName$5 = getComponentName('passcode');
 
 const customMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -2004,22 +2004,22 @@ const customMixin = (superclass) =>
 			return Number.parseInt(this.getAttribute('digits')) || 6;
 		}
 
-		connectedCallback() {
-			super.connectedCallback?.();
+		init() {
+			super.init?.();
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$6} 
+			<${componentName$7} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$6}>
+			></${componentName$7}>
 			`;
 
 			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'] });
 
@@ -2059,10 +2059,6 @@ const Passcode = compose(
 			display: inline-block;
     }
 
-		:host([readonly]) descope-passcode-internal > div {
-			pointer-events: none;
-		}
-
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;
@@ -2098,17 +2094,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 = ``;
 
@@ -2133,7 +2129,7 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$4
 	})
 );
 
@@ -2177,9 +2173,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 = ``;
 
@@ -2199,7 +2195,7 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$3
 	})
 );
 
@@ -2257,9 +2253,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)',
@@ -2295,7 +2291,7 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$1
+		componentName: componentName$2
 	})
 );
 
@@ -2321,7 +2317,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);
 
@@ -2605,7 +2647,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,
@@ -2842,7 +2884,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,
@@ -3063,7 +3105,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 = {
@@ -3255,8 +3297,8 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 		overlay._enterModalState = function () { };
 	}
 
-	connectedCallback() {
-		super.connectedCallback?.();
+	init() {
+		super.init?.();
 
 		this.#overrideOverlaySettings();
 		observeChildren(this, this.#onChildrenChange.bind(this));
@@ -3327,6 +3369,10 @@ const comboBox = {
 	// [vars.overlayBorder]: '3px solid red',
 };
 
+Image.cssVarList;
+
+const image = {};
+
 var components = {
 	button,
 	textField: textField$1,
@@ -3344,7 +3390,8 @@ var components = {
 	passcode,
 	loaderRadial,
 	loaderLinear,
-	comboBox
+	comboBox,
+	image
 };
 
 var index = { globals, components };