@descope/web-components-ui 1.0.70 → 1.0.72

package/src/mixins/inputValidationMixin.js

@@ -1,4 +1,4 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createEventListener } from "../helpers/mixinsHelpers";
 
 const observedAttributes = [
   'required',
@@ -21,19 +21,12 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     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() {
@@ -59,7 +52,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     }
   }
 
-  setValidity() {
+  #setValidity() {
     const validity = this.getValidity()
     this.#internals.setValidity(validity, this.getErrorMessage(validity))
   }
@@ -89,7 +82,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
       this.#internals.setValidity({ customError: true }, errorMessage)
     } else {
       this.#internals.setValidity({})
-      this.setValidity()
+      this.#setValidity()
     }
   }
 
@@ -101,37 +94,24 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     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()
+      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();
   }
 }

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -0,0 +1,11 @@
+// we want all the valueless attributes to have "true" value 
+export const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (newValue === '') {
+      this.setAttribute(attrName, 'true')
+      newValue = 'true'
+    }
+
+    super.attributeChangedCallback?.(attrName, oldValue, newValue)
+  }
+}

package/src/mixins/proxyInputMixin.js

@@ -1,3 +1,4 @@
+import { createDispatchEvent, createEventListener } from "../helpers/mixinsHelpers";
 import { inputValidationMixin } from "./inputValidationMixin";
 
 const errorAttrs = ['invalid', 'has-error-message'];
@@ -36,26 +37,17 @@ export 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)
 
@@ -74,7 +66,6 @@ export const proxyInputMixin = (superclass) =>
 
 		reportValidityOnInternalInput() {
 			setTimeout(() => {
-				this.baseEle.focus() //TODO: check if this is needed
 				this.inputElement.reportValidity()
 			})
 		}
@@ -87,72 +78,74 @@ export 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 })
 
-			this.addEventListener('invalid', this.#boundHandleInvalid)
-			this.addEventListener('valid', this.#boundHandleValid)
+			createEventListener.call(this, 'change', () => {
+				this.#dispatchChange()
+			}, { element: this.baseElement })
 
-			this.addEventListener('input', () => {
-				this.inputElement.setCustomValidity('')
-				if (!this.inputElement.checkValidity())
-					this.setInternalInputErrorMessage()
+			createEventListener.call(this, 'blur', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true')
+					this.#handleErrorMessage()
+				}
 			})
 
+			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)
-		}
-
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-			if (attrName === 'invalid' && newValue === '') {
-				this.setAttribute('invalid', 'true')
-			}
-		}
 	};

package/src/theme/components/container.js

@@ -23,7 +23,7 @@ const [helperTheme, helperRefs, helperVars] =
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, 'container')
+	}, Container.componentName)
 
 const container = {
 	...helperTheme,

package/src/theme/components/image.js

@@ -0,0 +1,7 @@
+import Image from "../../components/descope-image/Image";
+
+const vars = Image.cssVarList
+
+const image = {};
+
+export default image;

package/src/theme/components/index.js

@@ -14,6 +14,7 @@ import divider from './divider';
 import passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
 import comboBox from './comboBox';
+import image from './image';
 
 export default {
 	button,
@@ -32,5 +33,6 @@ export default {
 	passcode,
 	loaderRadial,
 	loaderLinear,
-	comboBox
+	comboBox,
+	image
 };

package/dist/umd/775.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[775],{693:(e,t,s)=>{s.d(t,{s:()=>r});var n=s(2061),i=s(357);const o=e=>class extends e{#e=this.#t.bind(this);#t(e){this.setAttribute("hover","true"),e.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector).addEventListener("mouseover",this.#e)}},r=({componentName:e,baseSelector:t=""})=>{class s extends HTMLElement{static get componentName(){return e}#s;get baseSelector(){return t}get baseElement(){return this.#s??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#s}get rootElement(){return this.shadowRoot||this}}return(0,n.qC)(i.A,o)(s)}},5279:(e,t,s)=>{s.d(t,{gh:()=>n,k4:()=>i,qM:()=>r,qg:()=>o});const n="descope",i=3,o="host",r="@"},4567:(e,t,s)=>{s.d(t,{Db:()=>u,FX:()=>o,P$:()=>r,Tk:()=>h,iY:()=>d,oP:()=>c,tg:()=>l});var n=s(2061),i=s(5279);const o=(e,t,{excludeAttrs:s=[],includeAttrs:n=[]})=>{const i=Array.from(e.attributes).filter((e=>!s.includes(e.name)&&(!n.length||n.includes(e.name)))).map((e=>e.name));t(i),new MutationObserver((e=>{for(const i of e)"attributes"!==i.type||s.includes(i.attributeName)||n.length&&!n.includes(i.attributeName)||t([i.attributeName])})).observe(e,{attributes:!0})},r=(e,t)=>{t({addedNodes:Array.from(e.children),removedNodes:[]}),new MutationObserver((e=>{for(const s of e)"childList"===s.type&&t(s)})).observe(e,{childList:!0})},a=(e,t,s={})=>n=>{n.forEach((n=>{const i=s[n]||n,o=e.getAttribute(n);null!==o?t.getAttribute(i)!==o&&t.setAttribute(i,o):t.removeAttribute(i)}))},l=(e,t,s)=>{o(e,a(e,t),s),o(t,a(t,e),s)},d=e=>(0,n.E3)(i.gh,e),h=(...e)=>`--${(0,n.E3)(...e)}`,c=(e,t,s={})=>{o(e,a(e,t,s.mapAttrs),s)},u=(e,t,s=[])=>{if(!s.length)return;const n=s.reduce(((e,s)=>Object.assign(e,{[s]:{get:()=>t[s],set(e){t[s]=e}}})),{});Object.defineProperties(e,n)}},2061:(e,t,s)=>{s.d(t,{E3:()=>i,GL:()=>n,jC:()=>r,mf:()=>a,qC:()=>o});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),i=(...e)=>n(e.filter((e=>!!e)).join("-")),o=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t),r=e=>e.charAt(0).toUpperCase()+e.slice(1),a=e=>"function"==typeof e},357:(e,t,s)=>{s.d(t,{A:()=>n});const n=e=>class extends e{#n(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#n()}}},775:(e,t,s)=>{s.d(t,{li:()=>k,Ae:()=>f.A,DM:()=>m,yk:()=>h,e4:()=>c,pY:()=>A,wX:()=>g,Iw:()=>S,dj:()=>y});var n=s(5279),i=s(2061),o=s(4567),r=s(5561);const a=(e,...t)=>`var(${e}${t.length?` , ${a(...t)}`:""})`;class l{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const d=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,o.Tk)(e,s)})),{}),h=({mappings:e={}})=>t=>class extends t{static get cssVarList(){return{...t.cssVarList,...d(t.componentName,{...e})}}#i;#o;#r;#a;#l;#d;#h;#c;constructor({getRootElement:t,componentNameSuffix:s="",themeSection:o=n.qg,baseSelector:r}={}){super(),this.#a=s,this.#l=o,this.#d=t?.(this)||this.shadowRoot,this.#h=r??this.baseSelector,this.#c=Object.keys(e).map((e=>(0,i.E3)("st",s,e)))}get componentTheme(){return r.componentsThemeManager.currentTheme?.[t.componentName]||""}#u(){this.#o.innerHTML=this.componentTheme[this.#l]}#m(){this.#o=document.createElement("style"),this.#o.id="style-mixin-theme",this.#d.prepend(this.#o),this.#r=r.componentsThemeManager.onCurrentThemeChange(this.#u.bind(this)),this.#u()}#p(){this.#i=document.createElement("style"),this.#i.id="style-mixin-overrides";const e=(s=t.componentName,i=n.k4,Array(i).fill(`.${s}`).join(""));var s,i;this.#i.innerText=`:host(${e}) {}`,this.#d.append(this.#i)}#b(e,s){const n=this.#i?.sheet?.cssRules[0].style;if(!n)return;const i=(0,o.Tk)(t.componentName,e.replace(new RegExp("^st-"),""));s?n?.setProperty(i,s):n?.removeProperty(i)}#g(e=[]){for(const t of e)this.#c.includes(t)&&this.#b(t,this.getAttribute(t));this.#i.innerHTML=this.#i?.sheet?.cssRules[0].cssText}#v(){const s=document.createElement("style");s.id="style-mixin-mappings",s.innerHTML=((e,t,s)=>{const n=new l;return Object.keys(s).forEach((r=>{const l=((e,t)=>{const s={selector:"",property:(0,i.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(r,s[r]),d=(0,o.Tk)(e,r);l.forEach((({selector:e,property:s})=>{n.add(((e="",t="")=>(0,i.mf)(t)?t(e):`${e}${/^[A-Za-z]/.test(t)?` ${t}`:t}`)(t,e),(0,i.mf)(s)?s():s,a(d))}))})),n.toString()})((0,i.E3)(t.componentName,this.#a),this.#h,e),this.#d.prepend(s)}#E(e){(this.#d.classList||this.#d.host.classList).add(e)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#E(t.componentName),this.#v(),this.#m(),this.#p(),(0,o.FX)(this,this.#g.bind(this),{}))}disconnectedCallback(){this.#r?.()}},c=e=>class extends e{#y=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#y=document.createElement("style"),this.#y.innerText="* { cursor: inherit!important }"}#f(e){e?this.shadowRoot.appendChild(this.#y):this.#y.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#f("true"===s)}};var u=s(693);const m=({componentName:e,wrappedEleName:t,slots:s=[],style:n,excludeAttrsSync:r=[],includeAttrsSync:a=[],includeForwardProps:l=[]})=>{const d=`\n\t\t<style id="create-proxy"></style>\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class h extends((0,u.s)({componentName:e,baseSelector:t})){constructor(){super().attachShadow({mode:"open"}).innerHTML=d,this.hostElement=this.shadowRoot.host,this.shadowRoot.getElementById("create-proxy").innerHTML=(0,i.mf)(n)?n():n}#C=this.#A.bind(this);#A(){this.proxyElement.focus()}focus=this.#A;connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.addEventListener("focus",this.#C),(0,o.Db)(this.hostElement,this.proxyElement,l),this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&this.getRootNode()===document&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},(0,o.tg)(this.proxyElement,this.hostElement,{excludeAttrs:r,includeAttrs:a}))}attributeChangedCallback(){this.proxyElement}disconnectedCallback(){super.disconnectedCallback?.(),this.removeEventListener("focus",this.#C)}}return h};function p(e){this[`on${e}`]?.(),this.dispatchEvent(new Event(e))}const b=["required","pattern"],g=e=>class extends e{static get observedAttributes(){return[...e.observedAttributes||[],...b]}static get formAssociated(){return!0}#S=p.bind(this,"valid");#k=p.bind(this,"invalid");#M;#F;constructor(){super(),this.#M=this.attachInternals(),this.#F=this.#H.bind(this)}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}getErrorMessage(e){switch(!0){case e.valueMissing:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case e.patternMismatch||e.typeMismatch:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case e.customError:return this.validationMessage;default:return""}}setValidity(){const e=this.getValidity();this.#M.setValidity(e,this.getErrorMessage(e))}get validationMessage(){return this.#M.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#M.validity.valid}reportValidity(){return this.#M.reportValidity()}get validity(){return this.#M.validity}setCustomValidity(e){e?this.#M.setValidity({customError:!0},e):(this.#M.setValidity({}),this.setValidity())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}#H(){this.setValidity(),this.handleDispatchValidationEvents()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),b.includes(e)&&this.setValidity()}handleDispatchValidationEvents(){this.checkValidity()?this.#S():this.#k()}connectedCallback(){super.connectedCallback?.(),this.addEventListener("input",this.#F),this.setValidity(),this.handleDispatchValidationEvents()}disconnectedCallback(){this.removeEventListener("input",this.#F)}},v=["invalid","has-error-message"],E=e=>{if(!e)return;let t=e;for(let e=0;e<10;e++)if(t=t.assignedElements()[0],"slot"!==t.localName)return t},y=e=>class extends(g(e)){static get observedAttributes(){return[...e.observedAttributes||[],...v]}#L;#V;#w;#x;constructor(){super(),this.#L=super.inputElement,this.#V=this.#I.bind(this),this.#w=this.#T.bind(this),this.#x=this.#O.bind(this),this.baseEle=this.shadowRoot.querySelector(this.baseSelector)}get inputElement(){const e=this.baseEle.shadowRoot.querySelector('slot[name="input"]'),t=this.baseEle.shadowRoot.querySelector('slot[name="textarea"]');if(this.#L??=E(e)||E(t),!this.#L)throw Error("no input was found");return this.#L}set inputElement(e){this.#L=e}getValidity(){return this.inputElement.validity}reportValidityOnInternalInput(){setTimeout((()=>{this.baseEle.focus(),this.inputElement.reportValidity()}))}reportValidity(){isValid||(this.setAttribute("invalid","true"),this.reportValidityOnInternalInput())}setInternalInputErrorMessage(){this.checkValidity()||this.inputElement.setCustomValidity(this.validationMessage)}#I(e){e.relatedTarget?.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())}#T(){this.setInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}#O(){this.removeAttribute("invalid")}connectedCallback(){var e,t;super.connectedCallback?.(),this.addEventListener("focus",this.#V),this.addEventListener("invalid",this.#w),this.addEventListener("valid",this.#x),this.addEventListener("input",(()=>{this.inputElement.setCustomValidity(""),this.inputElement.checkValidity()||this.setInternalInputErrorMessage()})),this.hasAttribute("tabindex")||this.getRootNode()!==document||this.setAttribute("tabindex",0),e=this.inputElement,t="value",Object.defineProperty(this,t,{set:function(s){return e[t]=s},get:function(){return e[t]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement)}disconnectedCallback(){this.removeEventListener("focus",this.#V),this.removeEventListener("invalid",this.#w),this.removeEventListener("valid",this.#x)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"invalid"===e&&""===s&&this.setAttribute("invalid","true")}};var f=s(357);const C=["blur","focus","focusin","focusout"],A=e=>class extends e{#N=!1;#R;#$;#q;#P;#j;constructor(){super();for(const e of C)this[`dispatch${(0,i.jC)(e)}`]=function(){this.dispatchInputEvent(e)};this.#$=this.#I.bind(this),this.#q=this.#B.bind(this),this.#P=this.#D.bind(this),this.#j=this.#U.bind(this)}#I(e){this.isReadOnly?e.stopPropagation():e.isTrusted&&(e.stopPropagation(),this.setFocus(!0),e.target===this&&this.onFocus(e))}#U(e){e.isTrusted&&e.stopPropagation()}#D(e){e.isTrusted&&e.stopPropagation()}#B(e){e.isTrusted&&(e.stopPropagation(),this.setFocus(!1))}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}setFocus(e){clearTimeout(this.#R),this.#R=setTimeout((()=>{this.#N!==e&&(this.#N=e,e?(this.dispatchFocus(),this.dispatchFocusin()):(this.dispatchBlur(),this.dispatchFocusout()))}))}onFocus(){console.warn("onFocus","is not implemented")}dispatchInputEvent(e){this[`on${e}`]?.(),this.dispatchEvent(new InputEvent(e))}connectedCallback(){super.connectedCallback?.(),this.addEventListener("focus",this.#$,!0),this.addEventListener("blur",this.#q,!0),this.addEventListener("focusin",this.#P),this.addEventListener("focusout",this.#j)}disconnectedCallback(){this.removeEventListener("focus",this.#$),this.removeEventListener("blur",this.#q),this.removeEventListener("focusin",this.#P),this.removeEventListener("focusout",this.#j)}},S=({name:e,selector:t,mappings:s={}})=>r=>{const a=e||(e=>e.replace(/[^\w\s]/gi,""))(t),l=h({mappings:s})(r);return class extends l{static get cssVarList(){return{...l.cssVarList,[a]:d((0,i.E3)(r.componentName,"_"+a),s)}}#X;constructor(){const e=e=>{const s=e.shadowRoot.querySelector(e.baseSelector),n=t?s.shadowRoot.querySelector(t):s;return n.shadowRoot||n};var s;super({getRootElement:e,componentNameSuffix:"_"+a,themeSection:n.qM+a,baseSelector:":host"}),this.#X=(s=e(this)).host||s}#_(){this.#X.onmouseenter=e=>{e.target.setAttribute("hover","true")},this.#X.onmouseleave=e=>{e.target.removeAttribute("hover")}}connectedCallback(){super.connectedCallback?.(),(0,o.oP)(this,this.#X,{excludeAttrs:["hover"]}),this.#_()}}},k=e=>class extends e{#z;#q;#G;#Y;#Z=p.bind(this,"change");constructor(){super(),this.#z=this.#K.bind(this),this.#q=this.#B.bind(this)}#K(e){e.isTrusted&&e.stopPropagation()}#B(){this.#Z()}connectedCallback(){super.connectedCallback?.(),this.#G=addEventListener.bind(),this.addEventListener("change",this.#z,!0),this.addEventListener("blur",this.#q)}disconnectedCallback(){this.removeEventListener("change",this.#z),this.removeEventListener("blur",this.#q)}}}}]);

package/src/baseClasses/BaseInputClass.js

@@ -1,4 +0,0 @@
-import { compose } from "../helpers";
-import { changeMixin, focusMixin, inputValidationMixin } from "../mixins";
-
-export default compose(focusMixin, inputValidationMixin, changeMixin)(HTMLElement) //todo: maybe we should use base class?