@descope/web-components-ui 1.0.68 → 1.0.69

package/dist/umd/135.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[135],{3346:(e,t,s)=>{s.d(t,{s:()=>o});var n=s(2061),i=s(1146);const o=({componentName:e,baseSelector:t=""})=>{class s extends HTMLElement{static get componentName(){return e}#e;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}}return(0,n.qC)(i.Ae,i._A)(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},1146:(e,t,s)=>{s.d(t,{li:()=>M,Ae:()=>f,DM:()=>m,yk:()=>h,e4:()=>c,pY:()=>S,_A:()=>C,wX:()=>g,Iw:()=>k,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})}}#t;#s;#n;#i;#o;#r;#a;#l;constructor({getRootElement:t,componentNameSuffix:s="",themeSection:o=n.qg,baseSelector:r}={}){super(),this.#i=s,this.#o=o,this.#r=t?.(this)||this.shadowRoot,this.#a=r??this.baseSelector,this.#l=Object.keys(e).map((e=>(0,i.E3)("st",s,e)))}get componentTheme(){return r.componentsThemeManager.currentTheme?.[t.componentName]||""}#d(){this.#s.innerHTML=this.componentTheme[this.#o]}#h(){this.#s=document.createElement("style"),this.#s.id="style-mixin-theme",this.#r.prepend(this.#s),this.#n=r.componentsThemeManager.onCurrentThemeChange(this.#d.bind(this)),this.#d()}#c(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides";const e=(s=t.componentName,i=n.k4,Array(i).fill(`.${s}`).join(""));var s,i;this.#t.innerText=`:host(${e}) {}`,this.#r.append(this.#t)}#u(e,s){const n=this.#t?.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)}#m(e=[]){for(const t of e)this.#l.includes(t)&&this.#u(t,this.getAttribute(t));this.#t.innerHTML=this.#t?.sheet?.cssRules[0].cssText}#p(){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.#i),this.#a,e),this.#r.prepend(s)}#b(e){(this.#r.classList||this.#r.host.classList).add(e)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#b(t.componentName),this.#p(),this.#h(),this.#c(),(0,o.FX)(this,this.#m.bind(this),{}))}disconnectedCallback(){this.#n?.()}},c=e=>class extends e{#g=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#g=document.createElement("style"),this.#g.innerText="* { cursor: inherit!important }"}#v(e){e?this.shadowRoot.appendChild(this.#g):this.#g.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#v("true"===s)}};var u=s(3346);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}#E=this.#y.bind(this);#y(){this.proxyElement.focus()}focus=this.#y;connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.addEventListener("focus",this.#E),(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.#E)}}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}#f=p.bind(this,"valid");#C=p.bind(this,"invalid");#A;#S;constructor(){super(),this.#A=this.attachInternals(),this.#S=this.#k.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.#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.setValidity())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}#k(){this.setValidity(),this.handleDispatchValidationEvents()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),b.includes(e)&&this.setValidity()}handleDispatchValidationEvents(){this.checkValidity()?this.#f():this.#C()}connectedCallback(){super.connectedCallback?.(),this.addEventListener("input",this.#S),this.setValidity(),this.handleDispatchValidationEvents()}disconnectedCallback(){this.removeEventListener("input",this.#S)}},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]}#M;#F;#H;#L;constructor(){super(),this.#M=super.inputElement,this.#F=this.#V.bind(this),this.#H=this.#w.bind(this),this.#L=this.#x.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.#M??=E(e)||E(t),!this.#M)throw Error("no input was found");return this.#M}set inputElement(e){this.#M=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)}#V(e){e.relatedTarget?.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())}#w(){this.setInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}#x(){this.removeAttribute("invalid")}connectedCallback(){var e,t;super.connectedCallback?.(),this.addEventListener("focus",this.#F),this.addEventListener("invalid",this.#H),this.addEventListener("valid",this.#L),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.#F),this.removeEventListener("invalid",this.#H),this.removeEventListener("valid",this.#L)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"invalid"===e&&""===s&&this.setAttribute("invalid","true")}},f=e=>class extends e{#I(){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.#I()}},C=e=>class extends e{#O=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.#O)}},A=["blur","focus","focusin","focusout"],S=e=>class extends e{#N=!1;#R;#$;#j;#q;#P;constructor(){super();for(const e of A)this[`dispatch${(0,i.jC)(e)}`]=function(){this.dispatchInputEvent(e)};this.#$=this.#V.bind(this),this.#j=this.#B.bind(this),this.#q=this.#D.bind(this),this.#P=this.#U.bind(this)}#V(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.#j,!0),this.addEventListener("focusin",this.#q),this.addEventListener("focusout",this.#P)}disconnectedCallback(){this.removeEventListener("focus",this.#$),this.removeEventListener("blur",this.#j),this.removeEventListener("focusin",this.#q),this.removeEventListener("focusout",this.#P)}},k=({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,...d(r.componentName,(e=s,t=a,Object.keys(e).reduce(((s,n)=>Object.assign(s,{[t+(0,i.jC)(n)]:e[n]})),{})))};var e,t}#X;constructor(){const e=e=>{const s=e.shadowRoot.querySelector(e.baseSelector).shadowRoot.querySelector(t);return s.shadowRoot||s};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.#_()}}},M=e=>class extends e{#z;#j;#G;#Y;#Z=p.bind(this,"change");constructor(){super(),this.#z=this.#K.bind(this),this.#j=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.#j)}disconnectedCallback(){this.removeEventListener("change",this.#z),this.removeEventListener("blur",this.#j)}}}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[135],{3346:(e,t,s)=>{s.d(t,{s:()=>o});var n=s(2061),i=s(1146);const o=({componentName:e,baseSelector:t=""})=>{class s extends HTMLElement{static get componentName(){return e}#e;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}}return(0,n.qC)(i.Ae,i._A)(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},1146:(e,t,s)=>{s.d(t,{li:()=>M,Ae:()=>f,DM:()=>m,yk:()=>h,e4:()=>c,pY:()=>S,_A:()=>C,wX:()=>g,Iw:()=>k,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})}}#t;#s;#n;#i;#o;#r;#a;#l;constructor({getRootElement:t,componentNameSuffix:s="",themeSection:o=n.qg,baseSelector:r}={}){super(),this.#i=s,this.#o=o,this.#r=t?.(this)||this.shadowRoot,this.#a=r??this.baseSelector,this.#l=Object.keys(e).map((e=>(0,i.E3)("st",s,e)))}get componentTheme(){return r.componentsThemeManager.currentTheme?.[t.componentName]||""}#d(){this.#s.innerHTML=this.componentTheme[this.#o]}#h(){this.#s=document.createElement("style"),this.#s.id="style-mixin-theme",this.#r.prepend(this.#s),this.#n=r.componentsThemeManager.onCurrentThemeChange(this.#d.bind(this)),this.#d()}#c(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides";const e=(s=t.componentName,i=n.k4,Array(i).fill(`.${s}`).join(""));var s,i;this.#t.innerText=`:host(${e}) {}`,this.#r.append(this.#t)}#u(e,s){const n=this.#t?.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)}#m(e=[]){for(const t of e)this.#l.includes(t)&&this.#u(t,this.getAttribute(t));this.#t.innerHTML=this.#t?.sheet?.cssRules[0].cssText}#p(){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.#i),this.#a,e),this.#r.prepend(s)}#b(e){(this.#r.classList||this.#r.host.classList).add(e)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#b(t.componentName),this.#p(),this.#h(),this.#c(),(0,o.FX)(this,this.#m.bind(this),{}))}disconnectedCallback(){this.#n?.()}},c=e=>class extends e{#g=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#g=document.createElement("style"),this.#g.innerText="* { cursor: inherit!important }"}#v(e){e?this.shadowRoot.appendChild(this.#g):this.#g.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#v("true"===s)}};var u=s(3346);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}#E=this.#y.bind(this);#y(){this.proxyElement.focus()}focus=this.#y;connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.addEventListener("focus",this.#E),(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.#E)}}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}#f=p.bind(this,"valid");#C=p.bind(this,"invalid");#A;#S;constructor(){super(),this.#A=this.attachInternals(),this.#S=this.#k.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.#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.setValidity())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}#k(){this.setValidity(),this.handleDispatchValidationEvents()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),b.includes(e)&&this.setValidity()}handleDispatchValidationEvents(){this.checkValidity()?this.#f():this.#C()}connectedCallback(){super.connectedCallback?.(),this.addEventListener("input",this.#S),this.setValidity(),this.handleDispatchValidationEvents()}disconnectedCallback(){this.removeEventListener("input",this.#S)}},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]}#M;#F;#H;#L;constructor(){super(),this.#M=super.inputElement,this.#F=this.#V.bind(this),this.#H=this.#w.bind(this),this.#L=this.#x.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.#M??=E(e)||E(t),!this.#M)throw Error("no input was found");return this.#M}set inputElement(e){this.#M=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)}#V(e){e.relatedTarget?.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())}#w(){this.setInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}#x(){this.removeAttribute("invalid")}connectedCallback(){var e,t;super.connectedCallback?.(),this.addEventListener("focus",this.#F),this.addEventListener("invalid",this.#H),this.addEventListener("valid",this.#L),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.#F),this.removeEventListener("invalid",this.#H),this.removeEventListener("valid",this.#L)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"invalid"===e&&""===s&&this.setAttribute("invalid","true")}},f=e=>class extends e{#I(){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.#I()}},C=e=>class extends e{#T=this.#O.bind(this);#O(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.#T)}},A=["blur","focus","focusin","focusout"],S=e=>class extends e{#N=!1;#R;#$;#q;#P;#j;constructor(){super();for(const e of A)this[`dispatch${(0,i.jC)(e)}`]=function(){this.dispatchInputEvent(e)};this.#$=this.#V.bind(this),this.#q=this.#B.bind(this),this.#P=this.#D.bind(this),this.#j=this.#_.bind(this)}#V(e){this.isReadOnly?e.stopPropagation():e.isTrusted&&(e.stopPropagation(),this.setFocus(!0),e.target===this&&this.onFocus(e))}#_(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)}},k=({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)}}#U;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.#U=(s=e(this)).host||s}#X(){this.#U.onmouseenter=e=>{e.target.setAttribute("hover","true")},this.#U.onmouseleave=e=>{e.target.removeAttribute("hover")}}connectedCallback(){super.connectedCallback?.(),(0,o.oP)(this,this.#U,{excludeAttrs:["hover"]}),this.#X()}}},M=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/dist/umd/descope-combo-box-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9258:(e,t,o)=>{o.r(t),o.d(t,{ComboBox:()=>c}),o(9314);var r=o(2061),s=o(4567),n=o(1146);const a=(0,s.iY)("combo-box"),{input:d,toggle:i}={input:{selector:"::part(input-field)"},toggle:{selector:"::part(toggle-button)"}},l={topRightRadius:{selector:d.selector,property:"border-top-right-radius"},bottomRightRadius:{selector:d.selector,property:"border-bottom-right-radius"},topLeftRadius:{selector:d.selector,property:"border-top-left-radius"},bottomLeftRadius:{selector:d.selector,property:"border-bottom-left-radius"}},c=(0,r.qC)((0,n.yk)({mappings:{...l,backgroundColor:d,width:d,color:d,padding:d,borderColor:d,borderStyle:d,borderWidth:d,cursor:i,height:d}}),n.e4,(0,n.Iw)({name:"overlay",selector:"vaadin-combo-box-scroller",mappings:{border:{selector:()=>"::slotted(*)"},backgroundColor:{}}}),n.dj,n.Ae,(e=>class extends e{#e(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);e.items=t.map((e=>Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name")}))),e.renderer=(e,o,r)=>{e.innerHTML=t[r.index].outerHTML}}connectedCallback(){super.connectedCallback?.(),(0,s.P$)(this,this.#e.bind(this))}}))((0,n.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>"\n\t\t:host {\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t",excludeAttrsSync:["tabindex"],includeAttrsSync:[],componentName:a,includeForwardProps:["items","renderer"]}));customElements.define(a,c)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9258:(e,t,o)=>{o.r(t),o.d(t,{ComboBox:()=>c}),o(9314);var r=o(2061),n=o(4567),s=o(1146);const a=(0,n.iY)("combo-box"),{input:i,toggle:d}={input:{selector:"::part(input-field)"},toggle:{selector:"::part(toggle-button)"}},l={topRightRadius:{selector:i.selector,property:"border-top-right-radius"},bottomRightRadius:{selector:i.selector,property:"border-bottom-right-radius"},topLeftRadius:{selector:i.selector,property:"border-top-left-radius"},bottomLeftRadius:{selector:i.selector,property:"border-bottom-left-radius"}},c=(0,r.qC)((0,s.yk)({mappings:{...l,backgroundColor:i,width:i,color:i,padding:i,borderColor:i,borderStyle:i,borderWidth:i,cursor:d,height:i}}),s.e4,(0,s.Iw)({name:"overlay",selector:"",mappings:{}}),s.dj,s.Ae,(e=>class extends e{#e(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);e.items=t.map((e=>Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name")}))),e.renderer=(e,o,r)=>{e.innerHTML=t[r.index].outerHTML}}#t(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=function(){this.bringToFront()},e._detachOverlay=function(){},e._enterModalState=function(){}}connectedCallback(){super.connectedCallback?.(),this.#t(),(0,n.P$)(this,this.#e.bind(this))}}))((0,s.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>"\n\t\t:host {\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t",excludeAttrsSync:["tabindex"],includeAttrsSync:[],componentName:a,includeForwardProps:["items","renderer"]}));customElements.define(a,c)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.68",
+	"version": "1.0.69",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-combo-box/ComboBox.js

@@ -58,10 +58,22 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 		};
 	}
 
+	// the default vaadin behavior is to attach the overlay to the body when opened
+	// we do not want that because it's difficult to style the overlay in this way
+	// so we override it to open inside the shadow DOM
+	#overrideOverlaySettings() {
+		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay')
+
+		overlay._attachOverlay = function () { this.bringToFront(); }
+		overlay._detachOverlay = function () { }
+		overlay._enterModalState = function () { }
+	}
+
 	connectedCallback() {
 		super.connectedCallback?.()
 
-		observeChildren(this, this.#onChildrenChange.bind(this))
+		this.#overrideOverlaySettings();
+		observeChildren(this, this.#onChildrenChange.bind(this));
 	}
 }
 
@@ -78,15 +90,17 @@ const ComboBox = compose(
 			borderWidth: input,
 			cursor: toggle,
 			height: input,
+			// overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
+			// overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
 		}
 	}),
 	draggableMixin,
 	portalMixin({
 		name: 'overlay',
-		selector: 'vaadin-combo-box-scroller',
+		selector: '',
 		mappings: {
-			border: { selector: () => '::slotted(*)' },
-			backgroundColor: {},
+			// border: { selector: 'vaadin-combo-box-scroller' },
+			// backgroundColor: { selector: 'vaadin-combo-box-item' },
 		}
 	}),
 	proxyInputMixin,

package/src/mixins/portalMixin.js

@@ -1,13 +1,17 @@
 import { PORTAL_THEME_PREFIX } from "../constants";
-import { upperFirst } from "../helpers";
+import { kebabCaseJoin, upperFirst } from "../helpers";
 import { forwardAttrs } from "../helpers/componentHelpers";
 import { createStyleMixin } from "./createStyleMixin";
 import { createCssVarsList } from "./createStyleMixin/helpers";
 
-const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping, 
+// will generate the same var as "color" attribute in portals's mapping 
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_'
 
-const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
-  Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {})
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
@@ -22,7 +26,7 @@ export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) =
     static get cssVarList() {
       return {
         ...BaseClass.cssVarList,
-        ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
+        [eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
       };
     }
 
@@ -32,14 +36,14 @@ export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) =
       // we cannot use "this" before calling "super"
       const getRootElement = (that) => {
         const baseEle = that.shadowRoot.querySelector(that.baseSelector)
-        const portal = baseEle.shadowRoot.querySelector(selector)
+        const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle
 
         return portal.shadowRoot || portal
       };
 
       super({
         getRootElement,
-        componentNameSuffix: eleDisplayName,
+        componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
         themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
         baseSelector: ':host'
       })

package/src/theme/components/comboBox.js

@@ -18,15 +18,8 @@ export const comboBox = {
 	[vars.borderWidth]: '0',
 	[vars.cursor]: 'pointer',
 	[vars.padding]: '0',
-
-	'@overlay': {
-		[vars.overlayBackgroundColor] : 'red',
-		[vars.overlayBorder]: '3px solid blue',
-
-		_hover: {
-			[vars.overlayBackgroundColor] : 'blue',
-		}
-	}
+	// [vars.overlayBackground]: 'blue',
+	// [vars.overlayBorder]: '3px solid red',
 };
 
 export default comboBox;