@descope/web-components-ui 1.0.69 → 1.0.71

package/dist/umd/135.js

@@ -1 +0,0 @@
-"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/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?