@descope/web-components-ui 1.0.72 → 1.0.73

package/src/mixins/focusMixin.js

@@ -1,24 +1,22 @@
-import { createEventListener } from "../helpers/mixinsHelpers"
-
 export 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();
 		})
   }

package/src/mixins/hoverableMixin.js

@@ -1,18 +1,15 @@
-import { createEventListener } from "../helpers/mixinsHelpers";
+export const hoverableMixin = (superclass) =>
+	class HoverableMixinClass extends superclass {
+		init() {
+			super.init?.();
 
-export 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 })
-			}
-		};
+			this.baseElement.addEventListener('mouseover', (e) => {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.removeAttribute('hover'),
+					{ once: true }
+				);
+			})
+		}
+	};

package/src/mixins/index.js

@@ -9,3 +9,5 @@ export { inputValidationMixin } from './inputValidationMixin'
 export { portalMixin } from './portalMixin'
 export { changeMixin } from './changeMixin'
 export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin'
+export { readOnlyMixin } from './readOnlyMixin'
+export { lifecycleEventsMixin } from './lifecycleEventsMixin'

package/src/mixins/inputValidationMixin.js

@@ -1,5 +1,3 @@
-import { createEventListener } from "../helpers/mixinsHelpers";
-
 const observedAttributes = [
   'required',
   'pattern',
@@ -106,11 +104,11 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     }
   }
 
-  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();
   }

package/src/mixins/lifecycleEventsMixin.js

@@ -0,0 +1,21 @@
+import { createDispatchEvent } from "../helpers/mixinsHelpers";
+
+export const lifecycleEventsMixin = (superclass) => class LifecycleEventsMixinClass extends superclass {
+  #dispatchConnected = createDispatchEvent.bind(this, 'connected')
+  #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
+
+  connectedCallback() {
+    if (this.rootElement.isConnected) {
+      super.connectedCallback?.();
+
+      // we are waiting for all components to listen before dispatching
+      setTimeout(this.#dispatchConnected)
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+
+    this.#dispatchDisconnected()
+  }
+}

package/src/mixins/portalMixin.js

@@ -56,8 +56,8 @@ export 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();

package/src/mixins/proxyInputMixin.js

@@ -1,4 +1,4 @@
-import { createDispatchEvent, createEventListener } from "../helpers/mixinsHelpers";
+import { createDispatchEvent } from "../helpers/mixinsHelpers";
 import { inputValidationMixin } from "./inputValidationMixin";
 
 const errorAttrs = ['invalid', 'has-error-message'];
@@ -30,7 +30,7 @@ const getNestedInput = (ele) => {
 }
 
 export const proxyInputMixin = (superclass) =>
-	class proxyInputMixinClass extends inputValidationMixin(superclass) {
+	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
 		static get observedAttributes() {
 			return [...superclass.observedAttributes || [], ...errorAttrs];
 		}
@@ -89,10 +89,10 @@ export 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
@@ -106,20 +106,20 @@ export 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) {
@@ -133,7 +133,7 @@ export const proxyInputMixin = (superclass) =>
 				}
 			})
 
-			createEventListener.call(this, 'invalid', this.#handleErrorMessage)
+			this.addEventListener('invalid', this.#handleErrorMessage)
 
 			this.handleInternalInputErrorMessage()
 

package/src/mixins/readOnlyMixin.js

@@ -0,0 +1,18 @@
+export 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?.()
+  }
+}

package/dist/umd/809.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[809],{3346:(e,t,s)=>{s.d(t,{s:()=>a});var n=s(2061),i=s(7878),r=s(4877);const a=({componentName:e,baseSelector:t=""})=>{class s extends HTMLElement{static get componentName(){return e}#e;#t=i.C.bind(this,"connected");#s=i.C.bind(this,"disconnected");get baseSelector(){return t}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e}get rootElement(){return this.shadowRoot||this}connectedCallback(){super.connectedCallback?.(),setTimeout(this.#t)}disconnectedCallback(){super.disconnectedCallback?.(),this.#s()}}return(0,n.qC)(r.Ae,r._A,r.QT)(s)}},5279:(e,t,s)=>{s.d(t,{gh:()=>n,k4:()=>i,qM:()=>a,qg:()=>r});const n="descope",i=3,r="host",a="@"},4567:(e,t,s)=>{s.d(t,{Db:()=>u,FX:()=>r,P$:()=>a,Tk:()=>h,iY:()=>c,oP:()=>d,tg:()=>l});var n=s(2061),i=s(5279);const r=(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})},a=(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})},o=(e,t,s={})=>n=>{n.forEach((n=>{const i=s[n]||n,r=e.getAttribute(n);null!==r?t.getAttribute(i)!==r&&t.setAttribute(i,r):t.removeAttribute(i)}))},l=(e,t,s)=>{r(e,o(e,t),s),r(t,o(t,e),s)},c=e=>(0,n.E3)(i.gh,e),h=(...e)=>`--${(0,n.E3)(...e)}`,d=(e,t,s={})=>{r(e,o(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,mf:()=>a,qC:()=>r});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),i=(...e)=>n(e.filter((e=>!!e)).join("-")),r=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t),a=e=>"function"==typeof e},7878:(e,t,s)=>{function n(e,t={}){const s=new Event(e,t);this[`on${e}`]?.(s),this.dispatchEvent(s)}function i(e,t,{element:s,...n}={}){const i=setTimeout((()=>console.warn(this.localName,'is not using "createBaseClass", events will not be removed automatically on disconnect')),2e3);this.addEventListener("connected",(()=>{clearTimeout(i)}),{once:!0});const r=s||this,a=t.bind(this),o=()=>{r.removeEventListener(e,a)};return this.addEventListener("disconnected",o,{once:!0}),r.addEventListener(e,a,n),o}s.d(t,{C:()=>n,t:()=>i})},4877:(e,t,s)=>{s.d(t,{li:()=>M,Ae:()=>C,DM:()=>p,yk:()=>h,e4:()=>d,pY:()=>S,_A:()=>A,wX:()=>g,QT:()=>T,Iw:()=>k,dj:()=>f});var n=s(5279),i=s(2061),r=s(4567),a=s(5561);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...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 c=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,r.Tk)(e,s)})),{}),h=({mappings:e={}})=>t=>class extends t{static get cssVarList(){return{...t.cssVarList,...c(t.componentName,{...e})}}#n;#i;#r;#a;#o;#l;#c;#h;constructor({getRootElement:t,componentNameSuffix:s="",themeSection:r=n.qg,baseSelector:a}={}){super(),this.#a=s,this.#o=r,this.#l=t?.(this)||this.shadowRoot,this.#c=a??this.baseSelector,this.#h=Object.keys(e).map((e=>(0,i.E3)("st",s,e)))}get componentTheme(){return a.componentsThemeManager.currentTheme?.[t.componentName]||""}#d(){this.#i.innerHTML=this.componentTheme[this.#o]}#u(){this.#i=document.createElement("style"),this.#i.id="style-mixin-theme",this.#l.prepend(this.#i),this.#r=a.componentsThemeManager.onCurrentThemeChange(this.#d.bind(this)),this.#d()}#m(){this.#n=document.createElement("style"),this.#n.id="style-mixin-overrides";const e=(s=t.componentName,i=n.k4,Array(i).fill(`.${s}`).join(""));var s,i;this.#n.innerText=`:host(${e}) {}`,this.#l.append(this.#n)}#p(e,s){const n=this.#n?.sheet?.cssRules[0].style;if(!n)return;const i=(0,r.Tk)(t.componentName,e.replace(new RegExp("^st-"),""));s?n?.setProperty(i,s):n?.removeProperty(i)}#b(e=[]){for(const t of e)this.#h.includes(t)&&this.#p(t,this.getAttribute(t));this.#n.innerHTML=this.#n?.sheet?.cssRules[0].cssText}#g(){const s=document.createElement("style");s.id="style-mixin-mappings",s.innerHTML=((e,t,s)=>{const n=new l;return Object.keys(s).forEach((a=>{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]})(a,s[a]),c=(0,r.Tk)(e,a);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,o(c))}))})),n.toString()})((0,i.E3)(t.componentName,this.#a),this.#c,e),this.#l.prepend(s)}#y(e){(this.#l.classList||this.#l.host.classList).add(e)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#y(t.componentName),this.#g(),this.#u(),this.#m(),(0,r.FX)(this,this.#b.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#r?.()}},d=e=>class extends e{#E=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#E=document.createElement("style"),this.#E.innerText="* { cursor: inherit!important }"}#v(e){e?this.shadowRoot.appendChild(this.#E):this.#E.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#v("true"===s)}};var u=s(3346),m=s(7878);const p=({componentName:e,wrappedEleName:t,slots:s=[],style:n,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[]})=>{class c extends((0,u.s)({componentName:e,baseSelector:t})){#f=m.C.bind(this,"blur");#C=m.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open"}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,i.mf)(n)?n():n}</style>\n\t\t\t<${t}>\n\t\t\t<slot></slot>\n\t\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t\t</${t}>\n\t\t`}focus=()=>this.baseElement.focus();connectedCallback(){super.connectedCallback?.(),m.t.call(this,"blur",(e=>{this.#f()}),{element:this.baseElement}),m.t.call(this,"focus",(e=>{this.#C()}),{element:this.baseElement}),m.t.call(this,"focus",(e=>{e.isTrusted&&this.focus()})),(0,r.Db)(this,this.baseElement,l),this.baseElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&this.getRootNode()===document&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},(0,r.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return c},b=["required","pattern"],g=e=>class extends e{static get observedAttributes(){return[...e.observedAttributes||[],...b]}static get formAssociated(){return!0}#A;constructor(){super(),this.#A=this.attachInternals()}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""}}#S(){const e=this.getValidity();this.#A.setValidity(e,this.getErrorMessage(e))}get validationMessage(){return this.#A.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#A.validity.valid}reportValidity(){return this.#A.reportValidity()}get validity(){return this.#A.validity}setCustomValidity(e){e?this.#A.setValidity({customError:!0},e):(this.#A.setValidity({}),this.#S())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#A.form}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),b.includes(e)&&this.#S()}connectedCallback(){super.connectedCallback?.(),m.t.call(this,"change",this.#S),m.t.call(this,"invalid",(e=>e.stopPropagation())),m.t.call(this,"input",this.#S),this.#S()}},y=["invalid","has-error-message"],E=(e,t,s)=>{Object.defineProperty(e,s,{set:function(e){return t[s]=e},get:function(){return t[s]},configurable:!0})},v=e=>{if(!e)return;let t=e;for(let e=0;e<10;e++)if(t=t.assignedElements()[0],"slot"!==t.localName)return t},f=e=>class extends(g(e)){static get observedAttributes(){return[...e.observedAttributes||[],...y]}#k;#M=m.C.bind(this,"change");constructor(){super(),this.#k=super.inputElement}get inputElement(){const e=this.baseElement.shadowRoot.querySelector('slot[name="input"]'),t=this.baseElement.shadowRoot.querySelector('slot[name="textarea"]');if(this.#k??=v(e)||v(t),!this.#k)throw Error("no input was found");return this.#k}set inputElement(e){this.#k=e}getValidity(){return this.inputElement.validity}reportValidityOnInternalInput(){setTimeout((()=>{this.inputElement.reportValidity()}))}reportValidity(){isValid||(this.setAttribute("invalid","true"),this.reportValidityOnInternalInput())}handleInternalInputErrorMessage(){this.inputElement.checkValidity()||this.inputElement.setCustomValidity(this.validationMessage)}#T(){this.handleInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}connectedCallback(){super.connectedCallback?.(),m.t.call(this,"input",(e=>{this.inputElement.checkValidity()||(this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.baseElement.__onInput(e),this.#T())}),{element:this.inputElement}),m.t.call(this,"change",(()=>{this.#M()}),{element:this.baseElement}),m.t.call(this,"blur",(()=>{this.checkValidity()||(this.setAttribute("invalid","true"),this.#T())})),m.t.call(this,"focus",(e=>{e.relatedTarget?.form===this.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())})),m.t.call(this,"invalid",this.#T),this.handleInternalInputErrorMessage(),this.hasAttribute("tabindex")||this.getRootNode()!==document||this.setAttribute("tabindex",0),E(this,this.inputElement,"value"),E(this,this.inputElement,"selectionStart"),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement)}},C=e=>class extends e{#V(){const t=this.localName;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.#V()}},A=e=>class extends e{connectedCallback(){super.connectedCallback?.(),m.t.call(this,"mouseover",(e=>{this.setAttribute("hover","true"),e.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}),{element:this.baseElement})}},S=e=>class extends e{connectedCallback(){super.connectedCallback?.(),m.t.call(this,"blur",(e=>{e.isTrusted&&e.stopImmediatePropagation()})),m.t.call(this,"focus",(e=>{e.isTrusted&&e.stopImmediatePropagation()})),m.t.call(this,"focusout",(e=>{e.isTrusted&&e.stopImmediatePropagation()})),m.t.call(this,"focusin",(e=>{e.isTrusted&&e.stopImmediatePropagation()}))}},k=({name:e,selector:t,mappings:s={}})=>a=>{const o=e||(e=>e.replace(/[^\w\s]/gi,""))(t),l=h({mappings:s})(a);return class extends l{static get cssVarList(){return{...l.cssVarList,[o]:c((0,i.E3)(a.componentName,"_"+o),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:"_"+o,themeSection:n.qM+o,baseSelector:":host"}),this.#x=(s=e(this)).host||s}#N(){this.#x.onmouseenter=e=>{e.target.setAttribute("hover","true")},this.#x.onmouseleave=e=>{e.target.removeAttribute("hover")}}connectedCallback(){super.connectedCallback?.(),(0,r.oP)(this,this.#x,{excludeAttrs:["hover"]}),this.#N()}}},M=e=>class extends e{#M=m.C.bind(this,"change");connectedCallback(){super.connectedCallback?.(),this.prevValue=this.value,m.t.call(this,"change",(e=>{e.stopPropagation()})),m.t.call(this,"blur",(()=>{this.value!==this.prevValue&&(this.#M(),this.prevValue=this.value)}))}},T=e=>class extends e{attributeChangedCallback(e,t,s){""===s&&(this.setAttribute(e,"true"),s="true"),super.attributeChangedCallback?.(e,t,s)}}}}]);