@descope/web-components-ui 1.0.60 → 1.0.62

package/src/componentsHelpers/inputMixin.js

@@ -1,94 +1,173 @@
-const attrs = {
-	valueMissing: 'data-errormessage-value-missing',
-	patternMismatch: 'data-errormessage-pattern-mismatch'
-};
-
-const errorAttrs = ['invalid', 'has-error-message'];
-
-const propertyObserver = (src, target, property) => {
-	Object.defineProperty(src, property, {
-		set: function (v) {
-			return (target[property] = v);
-		},
-		get: function () {
-			return target[property];
-		},
-		configurable: true
-	});
-};
-
-export const inputMixin = (superclass) =>
-	class InputMixinClass extends superclass {
-		static get formAssociated() {
-			return true;
-		}
-
-		#internals;
-
-		constructor() {
-			super();
-
-			this.#internals = this.attachInternals();
-		}
-
-		formAssociatedCallback() {
-			this.setValidity?.();
-		}
-
-		setValidationAttribute(attr) {
-			const validationAttr = this.getAttribute(attr);
-			if (validationAttr) {
-				this.proxyElement.setAttribute('error-message', validationAttr);
-			}
-			// normalize vaadin error attributes to have a boolean value
-			errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
-		}
-
-		validate() {
-			const { valueMissing, patternMismatch, typeMismatch } = this.validity;
-			if (valueMissing) {
-				this.setValidationAttribute(attrs.valueMissing);
-			} else if (typeMismatch || patternMismatch) {
-				this.setValidationAttribute(attrs.patternMismatch);
-			}
-		}
-
-		connectedCallback() {
-			super.connectedCallback?.();
-
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
-
-			// this is needed in order to make sure the form input validation is working
-			if (!this.hasAttribute('tabindex')) {
-				this.setAttribute('tabindex', 0);
-			}
-
-			this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
-				this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0]
-			if (!this.inputElement) throw Error('no input was found');
-
-			// sync properties
-			propertyObserver(this, this.inputElement, 'value');
-			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
-
-			this.validity = this.inputElement.validity;
-
-			this.setValidity = () => {
-				this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
-			};
-
-			this.inputElement.oninput = () => {
-				this.value = this.inputElement.value;
-				this.setValidity();
-			};
-
-			this.onfocus = () => {
-				setTimeout(() => this.inputElement.reportValidity(), 0);
-				this.validate();
-			};
-
-			this.inputElement.oninvalid = () => {
-				this.validate();
-			};
-		}
-	};
+
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+const events = [
+  'change',
+  'input',
+  'blur',
+  'focus',
+  'invalid',
+  'valid',
+]
+
+const observedAttributes = [
+  'required',
+  'pattern',
+]
+
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch'
+}
+export const inputMixin = (superclass) => class InputMixinClass extends superclass {
+  static get observedAttributes() {
+    return [
+      ...superclass.observedAttributes || [],
+      ...observedAttributes
+    ];
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  #internals
+
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals();
+
+    for (const event of events) {
+      this[`dispatch${upperFirst(event)}`] = function () {
+        this.dispatchInputEvent(event)
+      }
+    }
+  }
+
+  get defaultErrorMsgValueMissing() {
+    return 'Please fill out this field.'
+  }
+
+  get defaultErrorMsgPatternMismatch() {
+    return 'Please match the requested format.'
+  }
+
+  getErrorMessage(flags) {
+    switch (true) {
+      case flags.valueMissing:
+        return this.getAttribute(errorAttributes.valueMissing) ||
+          this.defaultErrorMsgValueMissing
+      case flags.patternMismatch || flags.typeMismatch:
+        return this.getAttribute(errorAttributes.patternMismatch) ||
+          this.defaultErrorMsgPatternMismatch
+      case flags.customError:
+        return this.validationMessage
+      default:
+        return ''
+    }
+  }
+
+  setValidity() {
+    const validity = this.getValidity()
+    this.#internals.setValidity(validity, this.getErrorMessage(validity))
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  getValidity() {
+    throw Error('getValidity', 'is not implemented')
+  }
+
+  checkValidity() {
+    return this.#internals.validity.valid
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  setCustomValidity(errorMessage) {
+    if(errorMessage){
+      this.#internals.setValidity({customError: true}, errorMessage)
+    } else {
+      this.#internals.setValidity({})
+      this.setValidity()
+    }
+  }
+
+  get isRequired() {
+    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+  }
+
+  get pattern() {
+    return this.getAttribute('pattern')
+  }
+
+  get value() {
+    throw Error('get value', 'is not implemented')
+  }
+
+  set value(value) {
+    throw Error('set value', 'is not implemented')
+  }
+
+  handleFocus() {
+    throw Error('handleFocus', 'is not implemented')
+  }
+
+  handleInput() {
+    this.setValidity()
+    this.handleDispatchValidationEvents()
+  }
+
+  handleBlur() {
+    throw Error('handleBlur', 'is not implemented')
+  }
+
+  handleChange() {
+    throw Error('handleChange', 'is not implemented')
+  }
+
+  dispatchInputEvent(eventName) {
+    this[`on${eventName}`]?.(); // in case we got an event callback as property
+    this.dispatchEvent(new InputEvent(eventName));
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (observedAttributes.includes(attrName)) {
+      this.setValidity();
+    }
+  }
+
+  handleDispatchValidationEvents(){
+    if(this.checkValidity()) {
+      this.dispatchValid() 
+    } else {
+      this.dispatchInvalid()
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.setValidity();
+    this.handleDispatchValidationEvents();
+
+    // create proxy replace the addEventListener fn 
+    // and we want to be able to access the focus events 
+    // of this element and not the nested element's events
+    this.onfocus = this.handleFocus.bind(this);
+    this.addEventListener('input', this.handleInput.bind(this))
+    this.addEventListener('blur', this.handleBlur.bind(this))
+    this.addEventListener('change', this.handleBlur.bind(this))
+  }
+}

package/src/componentsHelpers/proxyInputMixin.js

@@ -0,0 +1,152 @@
+import { inputMixin } from "./inputMixin";
+
+const errorAttrs = ['invalid', 'has-error-message'];
+
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return (target[property] = v);
+		},
+		get: function () {
+			return target[property];
+		},
+		configurable: true
+	});
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+	if (!ele) return;
+
+	const nestingLevel = 10
+
+	let nonSlotEle = ele
+	for (let i = 0; i < nestingLevel; i++) {
+		nonSlotEle = nonSlotEle.assignedElements()[0]
+		if (nonSlotEle.localName !== 'slot') return nonSlotEle
+	}
+}
+
+export const proxyInputMixin = (superclass) =>
+	class proxyInputMixinClass extends inputMixin(superclass) {
+		static get observedAttributes() {
+			return [...superclass.observedAttributes || [], ...errorAttrs];
+		}
+
+		#inputElement
+
+		constructor() {
+			super();
+
+			this.#inputElement = super.inputElement
+
+			// 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', (e) => {
+				if (e.relatedTarget?.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput()
+					}
+				}
+			})
+
+			this.addEventListener('invalid', () => {
+				this.setInternalInputErrorMessage()
+				this.setAttribute('error-message', this.validationMessage)
+			})
+
+			this.addEventListener('valid', () => {
+				this.removeAttribute('invalid')
+			})
+		}
+
+		get inputElement() {
+			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]')
+			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')
+
+			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot)
+		
+			if (!this.#inputElement) throw Error('no input was found');
+
+			return this.#inputElement
+		}
+
+		set inputElement(ele) {
+			this.#inputElement = ele
+		}
+
+		getValidity() {
+			return this.inputElement.validity
+		}
+
+		reportValidityOnInternalInput() {
+			setTimeout(() => {
+				this.inputElement.reportValidity()
+			}, 0)
+		}
+
+		handleBlur() { }
+
+		handleFocus() {
+			this.inputElement.focus();
+			if (this.hasAttribute('invalid')) {
+				this.reportValidityOnInternalInput()
+			}
+		}
+
+		// we want reportValidity to behave like form submission
+		reportValidity() {
+			const isValid = super.reportValidity()
+			if (!isValid) {
+				this.setAttribute('invalid', 'true');
+				this.inputElement.focus()
+			}
+			this.reportValidityOnInternalInput()
+		}
+
+		setInternalInputErrorMessage() {
+			if (!this.checkValidity()) {
+				this.inputElement.setCustomValidity(this.validationMessage)
+			}
+		}
+
+		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
+			super.connectedCallback?.();
+
+			this.inputElement.addEventListener('input', () => {
+				this.inputElement.setCustomValidity('')
+				if (!this.inputElement.checkValidity())
+					this.setInternalInputErrorMessage()
+			})
+
+			this.inputElement.addEventListener('invalid', () => {
+				this.setValidity()
+				this.setInternalInputErrorMessage()
+				this.setAttribute('error-message', this.validationMessage)
+			})
+
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				this.setAttribute('tabindex', 0);
+			}
+
+			// sync properties
+			propertyObserver(this, this.inputElement, 'value');
+			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'invalid' && newValue === '') {
+				this.setAttribute('invalid', 'true')
+			}
+		}
+	};

package/src/theme/components/textField.js

@@ -63,7 +63,7 @@ export const textField = (vars) => ({
 		[vars.borderColor]: globalRefs.colors.surface.main
 	},
 
-	_hasErrorMessage: {
+	_invalid: {
 		[vars.borderColor]: globalRefs.colors.error.main,
 		[vars.color]: globalRefs.colors.error.main,
 		[vars.placeholderColor]: globalRefs.colors.error.light

package/dist/umd/832.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{8522:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{Db:()=>a,oP:()=>i,tg:()=>r});const n=(t,e,{excludeAttrs:s=[],includeAttrs:n=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!n.length||n.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const o of t)"attributes"!==o.type||s.includes(o.attributeName)||n.length&&!n.includes(o.attributeName)||e([o.attributeName])})).observe(t,{attributes:!0})},o=(t,e,s={})=>(...n)=>{n.forEach((n=>{const o=s[n]||n,r=t.getAttribute(n);null!==r?e.getAttribute(o)!==r&&e.setAttribute(o,r):e.removeAttribute(o)}))},r=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},i=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)},a=(t,e,s=[])=>{if(!s.length)return;const n=s.reduce(((t,s)=>Object.assign(t,{[s]:{get:()=>e[s],set(t){e[s]=t}}})),{});Object.defineProperties(t,n)}},3535:(t,e,s)=>{s.d(e,{SP:()=>a,wj:()=>i,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class r{constructor(){this.styleMap=new Map}add(t,e,s){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,s])=>t+`${e} { \n${s.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const i=(t,e,s)=>{const i=new r;return Object.keys(s).forEach((r=>{const a=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(r,s[r]),l=(0,n.Tk)(t,r);a.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,o(l))}))})),i.toString()},a=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,n.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>n});const n=(t="")=>e=>class extends e{connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector+t).addEventListener("mouseover",(t=>{this.shadowRoot.host.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}))}}},832:(t,e,s)=>{s.d(e,{Ae:()=>m,qC:()=>y,DM:()=>h,yk:()=>r,e4:()=>i,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const r=({mappings:t={},nestedMappings:e={}})=>s=>{const r=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...r]}static get cssVarList(){return(0,o.SP)(s.componentName,{...t,...e})}#t=null;constructor(){super(),this.#e(),this.#s()}#s(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides",this.#t.innerText="* {}",this.shadowRoot.prepend(this.#t)}#n(t,e){const o=this.#t.sheet?.cssRules[0].style,r=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(r,e):o?.removeProperty(r)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#o(){const t=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,r=s.componentName;if(this.shadowRoot.host.classList.add(r),t.querySelector(`style#${n}`))return;const i=document.createElement("style");i.id=n,i.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${r}`).join("")}`,e),"#document"===t.nodeName?t.head.append(i):t.append(i)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),r.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{r.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},i=t=>class extends t{#t=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#r(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#r("true"===s)}};var a=s(8522),l=s(893),c=s(9201);const h=({componentName:t,wrappedEleName:e,slots:s=[],style:n,excludeAttrsSync:o=[],includeAttrsSync:r=[],includeForwardProps:i=[]})=>{const h=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class d extends a.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=h,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),(0,c.Db)(this.hostElement,this.proxyElement,i),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.addEventListener=(...t)=>this.proxyElement.addEventListener(...t),(0,c.tg)(this.proxyElement,this.hostElement,{excludeAttrs:o,includeAttrs:r}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return y((0,l._)())(d)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#i;constructor(){super(),this.#i=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(t){const e=this.getAttribute(t);e&&this.proxyElement.setAttribute("error-message",e),d.forEach((t=>this.proxyElement.setAttribute(t,"true")))}validate(){const{valueMissing:t,patternMismatch:e,typeMismatch:s}=this.validity;t?this.setValidationAttribute("data-errormessage-value-missing"):(s||e)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var t,e;t=this.inputElement,e="value",Object.defineProperty(this,e,{set:function(s){return t[e]=s},get:function(){return t[e]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#i.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=t=>class extends t{#a(){const e=this.shadowRoot.host.tagName.toLowerCase();if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#a()}},p=t=>(0,n.E3)("descope",t),y=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e)},6225:(t,e,s)=>{s.d(e,{E3:()=>o,GL:()=>n,Tk:()=>r});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),r=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);