@descope/web-components-ui 1.0.199 → 1.0.201
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +58 -50
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +66 -53
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +3 -1
- package/src/components/descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js +5 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +27 -18
- package/src/components/descope-upload-file/UploadFileClass.js +2 -1
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +8 -3
- package/src/mixins/proxyInputMixin.js +21 -29
package/dist/umd/1000.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1e3],{3874:(t,e,s)=>{s.d(e,{s:()=>h});var i=s(2061),n=s(357),r=s(7878);const a=t=>class extends t{#t=r.C.bind(this,"components-context");updateComponentsContext(t){this.dispatchEvent(new CustomEvent("components-context",{bubbles:!0,composed:!0,detail:t}))}},o=t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mouseover",(t=>{this.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}))}};var l=s(8084);const h=({componentName:t,baseSelector:e=""})=>{class s extends HTMLElement{static get componentName(){return t}#e;#s=!0;get baseSelector(){return e}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e||console.warn("missing base element for component",this.localName),this.#e}get rootElement(){return this.shadowRoot||this}get name(){return this.getAttribute("name")}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#s&&(this.#s=!1,this.init?.())}}return(0,i.qC)(n.A,o,l.Q,a)(s)}},5279:(t,e,s)=>{s.d(e,{gh:()=>i,k4:()=>n,qM:()=>a,qg:()=>r});const i="descope",n=3,r="host",a="@"},4567:(t,e,s)=>{s.d(e,{Db:()=>d,FX:()=>r,P$:()=>a,Tk:()=>u,iY:()=>h,oP:()=>c,tg:()=>l});var i=s(2061),n=s(5279);const r=(t,e,{excludeAttrs:s=[],includeAttrs:i=[]})=>{const n=Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!i.length||i.includes(t.name)))).map((t=>t.name));e(n),new MutationObserver((t=>{t.forEach((t=>{"attributes"!==t.type||s.includes(t.attributeName)||i.length&&!i.includes(t.attributeName)||e([t.attributeName])}))})).observe(t,{attributes:!0})},a=(t,e)=>{e({addedNodes:Array.from(t.children),removedNodes:[]}),new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&e(t)}))})).observe(t,{childList:!0})},o=(t,e,s={})=>i=>{i.forEach((i=>{const n=s[i]||i,r=t.getAttribute(i);null!==r?e.getAttribute(n)!==r&&e.setAttribute(n,r):e.removeAttribute(n)}))},l=(t,e,s)=>{r(t,o(t,e),s),r(e,o(e,t),s)},h=t=>(0,i.E3)(n.gh,t),u=(...t)=>`--${(0,i.E3)(...t)}`,c=(t,e,s={})=>{r(t,o(t,e,s.mapAttrs),s)},d=(t,e,s=[])=>{if(!s.length)return;const i=s.reduce(((e,s)=>Object.assign(e,{[s]:{get:()=>t[s],set(e){t[s]=e}}})),{});Object.defineProperties(e,i)}},2061:(t,e,s)=>{s.d(e,{E3:()=>n,GL:()=>i,mf:()=>a,qC:()=>r});const i=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...t)=>i(t.filter((t=>!!t)).join("-")),r=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e),a=t=>"function"==typeof t},7878:(t,e,s)=>{function i(t,e={}){const s=new Event(t,e);this[`on${t}`]?.(s),this.dispatchEvent(s)}s.d(e,{C:()=>i})},357:(t,e,s)=>{s.d(e,{A:()=>i});const i=t=>class extends t{#i(){const e=this.localName;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}"`)}init(){super.init?.(),this.#i()}}},1e3:(t,e,s)=>{s.d(e,{li:()=>C,Ae:()=>A.A,DM:()=>p,yk:()=>u,e4:()=>c,mE:()=>x,wX:()=>b,QT:()=>S.Q,Iw:()=>M,dj:()=>f});var i=s(5279),n=s(2061),r=s(4567),a=s(5561);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class l{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 h=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,r.Tk)(t,s)})),{}),u=({mappings:t={},componentNameOverride:e=""})=>s=>{const u=e||s.componentName;return class extends s{static get cssVarList(){return{...s.cssVarList,...h(u,{...t})}}#n;#r;#a;#o;#l;#h;#u;#c;#d;constructor({getRootElement:e,componentNameSuffix:s="",themeSection:r=i.qg,baseSelector:a}={}){super(),this.#o=s,this.#l=r,this.#u=a??this.baseSelector,this.#d=e,this.#c=Object.keys(t).map((t=>(0,n.E3)("st",s,t)))}get#m(){return a.componentsThemeManager.currentTheme?.[u]||""}#p(){this.#r.innerHTML=this.#m[this.#l]}#g(){this.#r=document.createElement("style"),this.#r.id=`style-mixin-theme__${u}`,this.#h.prepend(this.#r),this.#a=a.componentsThemeManager.onCurrentThemeChange(this.#p.bind(this)),this.#p()}#b(){if(this.#c.length){this.#n=document.createElement("style"),this.#n.id=`style-mixin-overrides__${u}`;const s=(t=u,e=i.k4,Array(e).fill(`.${t}`).join(""));this.#n.innerText=`:host(${s}) {}`,this.#h.append(this.#n)}var t,e}#E(t,e){const s=this.#n?.sheet?.cssRules[0].style;if(!s)return;const i=(0,r.Tk)(u,t.replace(new RegExp("^st-"),""));e?s?.setProperty(i,e):(s?.removeProperty(i),this.removeAttribute(t))}#v(t=[]){let e=!1;t.forEach((t=>{this.#c.includes(t)&&(this.#E(t,this.getAttribute(t)),e=!0)})),e&&(this.#n.innerHTML=this.#n?.sheet?.cssRules[0].cssText)}#y(){if(Object.keys(t).length){const e=document.createElement("style");e.id=`style-mixin-mappings__${u}`,e.innerHTML=((t,e,s)=>{const i=new l;return Object.keys(s).forEach((a=>{const l=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>({...s,...t}))):[{...s,...e}]:[s]})(a,s[a]),h=(0,r.Tk)(t,a);l.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>(0,n.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,n.mf)(s)?s():s,o(h))}))})),i.toString()})((0,n.E3)(u,this.#o),this.#u,t),this.#h.prepend(e)}}#f(t){(this.#h.classList||this.#h.host.classList).add(t)}init(){super.init?.(),this.shadowRoot.isConnected&&(this.#h=this.#d?.(this)||this.shadowRoot,this.#f(u),this.#y(),this.#g(),this.#b(),(0,r.FX)(this,this.#v.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#a?.()}}},c=t=>class extends t{#A=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#A=document.createElement("style"),this.#A.innerText="* { cursor: inherit!important }"}#M(t){t?this.shadowRoot.appendChild(this.#A):this.#A.remove()}get isDraggable(){return this.hasAttribute("draggable")&&"false"!==this.getAttribute("draggable")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable){const e=this.baseElement.getAttribute("tabindex");this.baseElement.setAttribute("tabindex","-1");const s=()=>{e?this.baseElement.setAttribute("tabindex",e):this.baseElement.removeAttribute("tabindex"),t.target.removeEventListener("mouseup",s),t.target.removeEventListener("dragend",s)};t.target.addEventListener("mouseup",s,{once:!0}),t.target.addEventListener("dragend",s,{once:!0})}})),super.init?.()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#M("true"===s)}};var d=s(3874),m=s(7878);const p=({componentName:t,wrappedEleName:e,slots:s=[],style:i,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[]})=>{class h extends((0,d.s)({componentName:t,baseSelector:e})){#C=m.C.bind(this,"blur");#S=m.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open",delegatesFocus:!0}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,n.mf)(i)?i():i}</style>\n\t\t\t<${e}>\n\t\t\t${s.map((t=>`<slot ${t?`name="${t}" slot="${t}"`:""} ></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#C()})),this.baseElement.addEventListener("focus",(t=>{this.#S()})),(0,r.Db)(this.baseElement,this,l),(0,r.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return h};s(5910);const g=["required","pattern"],b=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...g]}static get formAssociated(){return!0}#x;constructor(){super(),this.#x=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}. `}getErrorMessage(t){const{valueMissing:e,patternMismatch:s,typeMismatch:i,stepMismatch:n,tooShort:r,tooLong:a,rangeOverflow:o,rangeUnderflow:l,badInput:h,customError:u}=t;switch(!0){case e:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case s||i||n||o||l||h:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case r:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case a:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case u:return this.validationMessage;default:return""}}#T(){const t=this.isReadOnly?{}:this.getValidity();this.#x.setValidity(t,this.getErrorMessage(t),this.validationTarget)}get validationMessage(){return this.#x.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#x.validity.valid}reportValidity(){return this.#x.reportValidity()}get validity(){return this.#x.validity}get validationTarget(){return this.inputElement}setCustomValidity(t){t?this.#x.setValidity({customError:!0},t,this.validationTarget):(this.#x.setValidity({}),this.#T())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}get isDisabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#x.form}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),g.includes(t)&&this.#T()}init(){super.init?.(),this.addEventListener("change",this.#T),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#T),setTimeout((()=>this.#T()))}},E=["invalid","required"],v=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if([e]=e.assignedElements(),"slot"!==e.localName)return e},y=({proxyProps:t=[]})=>e=>class extends(b(e)){static get observedAttributes(){return[...e.observedAttributes||[],...E]}#L;#w=m.C.bind(this,"change");constructor(){super(),this.#L=super.inputElement}warnIfInputElementIsMissing(){clearTimeout(this.inputElementTimerId),this.inputElementTimerId=setTimeout((()=>{!this.#L&&console.warn(this.localName,"no input was found")}),0)}get inputElement(){if(this.#L)return this.#L;this.warnIfInputElementIsMissing();const t=this.baseElement.shadowRoot?.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');return this.#L=v(t)||v(e),this.#L}set inputElement(t){this.#L=t}getValidity(){return this.inputElement?.validity||{}}handleInternalInputErrorMessage(){this.inputElement.checkValidity()||this.inputElement.setCustomValidity(this.validationMessage)}#V(){this.handleInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}reportValidity=()=>{this.checkValidity()||(this.setAttribute("invalid","true"),this.#V(),this.focus())};defaultReportValidity(){return super.reportValidity()}init(){super.init?.(),setTimeout((()=>{this.inputElement?.addEventListener("input",(t=>{this.inputElement.checkValidity()||(this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.baseElement.__onInput(t),this.#V())})),this.baseElement.addEventListener("change",(()=>{this.#w()})),this.#L.addEventListener("blur",(()=>{this.checkValidity()||(this.setAttribute("invalid","true"),this.#V())})),this.addEventListener("invalid",(()=>{this.checkValidity()||this.setAttribute("invalid","true"),this.#V()})),this.handleInternalInputErrorMessage(),t.forEach((t=>{var e,s;e=this.inputElement,s=t,Object.defineProperty(this,s,{set(t){e[s]=t},get:()=>e[s],configurable:!0})})),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),(0,r.oP)(this,this.inputElement,{includeAttrs:["inputmode"]})}))}},f=t=>(0,n.qC)(y(t),u({componentNameOverride:(0,r.iY)("input-wrapper")}));var A=s(357);const M=({name:t,selector:e,mappings:s={},forward:{attributes:a=[],include:o=!0}={}})=>l=>{const c=t||(t=>t.replace(/[^\w\s]/gi,""))(e),d=u({mappings:s})(l);return class extends d{static get cssVarList(){return{...d.cssVarList,[c]:h((0,n.E3)(l.componentName,"_"+c),s)}}#k;constructor(){const t=t=>{const s=t.shadowRoot.querySelector(t.baseSelector),i=e?s.shadowRoot.querySelector(e):s;return i.shadowRoot||i};var s;super({getRootElement:t,componentNameSuffix:"_"+c,themeSection:i.qM+c,baseSelector:":host"}),this.#k=(s=t(this)).host||s}#N(){this.#k.onmouseenter=t=>{t.target.setAttribute("hover","true")},this.#k.onmouseleave=t=>{t.target.removeAttribute("hover")}}init(){super.init?.(),(0,r.oP)(this,this.#k,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#N()}}},C=t=>class extends t{#w=m.C.bind(this,"change");init(){super.init?.(),this.prevValue=this.value,this.addEventListener("change",(t=>{t.stopPropagation()})),this.addEventListener("blur",(()=>{this.value!==this.prevValue&&(this.#w(),this.prevValue=this.value)}))}};var S=s(8084);const x=t=>class extends t{init(){this.#$(),super.init?.()}#$(){["blur","focus","focusin","focusout"].forEach((t=>{this.addEventListener(t,(t=>{t.isTrusted&&t.target===this&&t.stopImmediatePropagation()}))}))}handleFocusEventsDispatching(t){let e;t?.forEach((t=>{t?.addEventListener("focusout",(t=>{t.stopImmediatePropagation(),e=setTimeout((()=>{e=null,m.C.call(this,"blur"),m.C.call(this,"focusout",{bubbles:!0})}))}));const s=t=>{t.stopImmediatePropagation(),clearTimeout(e),e||(m.C.call(this,"focus"),m.C.call(this,"focusin",{bubbles:!0}))};t?.addEventListener("focusin",s),t?.addEventListener("focus",s)}))}handleInputEventDispatching(){let t=this.value;this.addEventListener("input",(e=>{t===this.value?e.stopImmediatePropagation():t=this.value}))}}},8084:(t,e,s)=>{s.d(e,{Q:()=>r});var i=s(4567);const n=["readonly","focused","invalid","has-label","required","disabled","checked","has-helper","has-value","step-buttons-visible","hover","has-error-message","focus-ring","opened","active","password-visible"],r=t=>class extends t{init(){super.init?.(),(0,i.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);(t=>n.includes(t))(t)?""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t):e||console.warn(`attribute "${t}" has no value, should it be added to the boolean attributes list?`)}))),{})}}}}]);
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1e3],{3874:(t,e,s)=>{s.d(e,{s:()=>h});var i=s(2061),n=s(357),r=s(7878);const a=t=>class extends t{#t=r.C.bind(this,"components-context");updateComponentsContext(t){this.dispatchEvent(new CustomEvent("components-context",{bubbles:!0,composed:!0,detail:t}))}},o=t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mouseover",(t=>{this.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}))}};var l=s(8084);const h=({componentName:t,baseSelector:e=""})=>{class s extends HTMLElement{static get componentName(){return t}#e;#s=!0;get baseSelector(){return e}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e||console.warn("missing base element for component",this.localName),this.#e}get rootElement(){return this.shadowRoot||this}get name(){return this.getAttribute("name")}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#s&&(this.#s=!1,this.init?.())}}return(0,i.qC)(n.A,o,l.Q,a)(s)}},5279:(t,e,s)=>{s.d(e,{gh:()=>i,k4:()=>n,qM:()=>a,qg:()=>r});const i="descope",n=3,r="host",a="@"},4567:(t,e,s)=>{s.d(e,{Db:()=>d,FX:()=>r,P$:()=>a,Tk:()=>c,iY:()=>h,oP:()=>u,tg:()=>l});var i=s(2061),n=s(5279);const r=(t,e,{excludeAttrs:s=[],includeAttrs:i=[]})=>{const n=Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!i.length||i.includes(t.name)))).map((t=>t.name));e(n),new MutationObserver((t=>{t.forEach((t=>{"attributes"!==t.type||s.includes(t.attributeName)||i.length&&!i.includes(t.attributeName)||e([t.attributeName])}))})).observe(t,{attributes:!0})},a=(t,e)=>{e({addedNodes:Array.from(t.children),removedNodes:[]}),new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&e(t)}))})).observe(t,{childList:!0})},o=(t,e,s={})=>i=>{i.forEach((i=>{const n=s[i]||i,r=t.getAttribute(i);null!==r?e.getAttribute(n)!==r&&e.setAttribute(n,r):e.removeAttribute(n)}))},l=(t,e,s)=>{r(t,o(t,e),s),r(e,o(e,t),s)},h=t=>(0,i.E3)(n.gh,t),c=(...t)=>`--${(0,i.E3)(...t)}`,u=(t,e,s={})=>{r(t,o(t,e,s.mapAttrs),s)},d=(t,e,s=[])=>{if(!s.length)return;const i=s.reduce(((e,s)=>Object.assign(e,{[s]:{get:()=>t[s],set(e){t[s]=e}}})),{});Object.defineProperties(e,i)}},2061:(t,e,s)=>{s.d(e,{E3:()=>n,GL:()=>i,mf:()=>a,qC:()=>r});const i=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...t)=>i(t.filter((t=>!!t)).join("-")),r=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e),a=t=>"function"==typeof t},7878:(t,e,s)=>{function i(t,e={}){const s=new Event(t,e);this[`on${t}`]?.(s),this.dispatchEvent(s)}s.d(e,{C:()=>i})},357:(t,e,s)=>{s.d(e,{A:()=>i});const i=t=>class extends t{#i(){const e=this.localName;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}"`)}init(){super.init?.(),this.#i()}}},1e3:(t,e,s)=>{s.d(e,{li:()=>C,Ae:()=>A.A,DM:()=>p,yk:()=>c,e4:()=>u,mE:()=>x,wX:()=>b,QT:()=>M.Q,Iw:()=>S,dj:()=>f});var i=s(5279),n=s(2061),r=s(4567),a=s(5561);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class l{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 h=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,r.Tk)(t,s)})),{}),c=({mappings:t={},componentNameOverride:e=""})=>s=>{const c=e||s.componentName;return class extends s{static get cssVarList(){return{...s.cssVarList,...h(c,{...t})}}#n;#r;#a;#o;#l;#h;#c;#u;#d;constructor({getRootElement:e,componentNameSuffix:s="",themeSection:r=i.qg,baseSelector:a}={}){super(),this.#o=s,this.#l=r,this.#c=a??this.baseSelector,this.#d=e,this.#u=Object.keys(t).map((t=>(0,n.E3)("st",s,t)))}get#m(){return a.componentsThemeManager.currentTheme?.[c]||""}#p(){this.#r.innerHTML=this.#m[this.#l]}#g(){this.#r=document.createElement("style"),this.#r.id=`style-mixin-theme__${c}`,this.#h.prepend(this.#r),this.#a=a.componentsThemeManager.onCurrentThemeChange(this.#p.bind(this)),this.#p()}#b(){if(this.#u.length){this.#n=document.createElement("style"),this.#n.id=`style-mixin-overrides__${c}`;const s=(t=c,e=i.k4,Array(e).fill(`.${t}`).join(""));this.#n.innerText=`:host(${s}) {}`,this.#h.append(this.#n)}var t,e}#E(t,e){const s=this.#n?.sheet?.cssRules[0].style;if(!s)return;const i=(0,r.Tk)(c,t.replace(new RegExp("^st-"),""));e?s?.setProperty(i,e):(s?.removeProperty(i),this.removeAttribute(t))}#v(t=[]){let e=!1;t.forEach((t=>{this.#u.includes(t)&&(this.#E(t,this.getAttribute(t)),e=!0)})),e&&(this.#n.innerHTML=this.#n?.sheet?.cssRules[0].cssText)}#y(){if(Object.keys(t).length){const e=document.createElement("style");e.id=`style-mixin-mappings__${c}`,e.innerHTML=((t,e,s)=>{const i=new l;return Object.keys(s).forEach((a=>{const l=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>({...s,...t}))):[{...s,...e}]:[s]})(a,s[a]),h=(0,r.Tk)(t,a);l.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>(0,n.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,n.mf)(s)?s():s,o(h))}))})),i.toString()})((0,n.E3)(c,this.#o),this.#c,t),this.#h.prepend(e)}}#f(t){(this.#h.classList||this.#h.host.classList).add(t)}init(){super.init?.(),this.shadowRoot.isConnected&&(this.#h=this.#d?.(this)||this.shadowRoot,this.#f(c),this.#y(),this.#g(),this.#b(),(0,r.FX)(this,this.#v.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#a?.()}}},u=t=>class extends t{#A=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#A=document.createElement("style"),this.#A.innerText="* { cursor: inherit!important }"}#S(t){t?this.shadowRoot.appendChild(this.#A):this.#A.remove()}get isDraggable(){return this.hasAttribute("draggable")&&"false"!==this.getAttribute("draggable")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable){const e=this.baseElement.getAttribute("tabindex");this.baseElement.setAttribute("tabindex","-1");const s=()=>{e?this.baseElement.setAttribute("tabindex",e):this.baseElement.removeAttribute("tabindex"),t.target.removeEventListener("mouseup",s),t.target.removeEventListener("dragend",s)};t.target.addEventListener("mouseup",s,{once:!0}),t.target.addEventListener("dragend",s,{once:!0})}})),super.init?.()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#S("true"===s)}};var d=s(3874),m=s(7878);const p=({componentName:t,wrappedEleName:e,slots:s=[],style:i,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[]})=>{class h extends((0,d.s)({componentName:t,baseSelector:e})){#C=m.C.bind(this,"blur");#M=m.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open",delegatesFocus:!0}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,n.mf)(i)?i():i}</style>\n\t\t\t<${e}>\n\t\t\t${s.map((t=>`<slot ${t?`name="${t}" slot="${t}"`:""} ></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#C()})),this.baseElement.addEventListener("focus",(t=>{this.#M()})),(0,r.Db)(this.baseElement,this,l),(0,r.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return h};s(5910);const g=["required","pattern"],b=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...g]}static get formAssociated(){return!0}#x;constructor(){super(),this.#x=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}. `}getErrorMessage(t){const{valueMissing:e,patternMismatch:s,typeMismatch:i,stepMismatch:n,tooShort:r,tooLong:a,rangeOverflow:o,rangeUnderflow:l,badInput:h,customError:c}=t;switch(!0){case e:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case s||i||n||o||l||h:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case r:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case a:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case c:return this.validationMessage;default:return""}}#T(){const t=this.isReadOnly?{}:this.getValidity();this.#x.setValidity(t,this.getErrorMessage(t),this.validationTarget)}get validationMessage(){return this.#x.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#x.validity.valid}reportValidity(){return this.#x.reportValidity()}get validity(){return this.#x.validity}get validationTarget(){return this.inputElement}setCustomValidity(t){t?this.#x.setValidity({customError:!0},t,this.validationTarget):(this.#x.setValidity({}),this.#T())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}get isDisabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#x.form}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),g.includes(t)&&this.#T()}init(){super.init?.(),this.addEventListener("change",this.#T),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#T),setTimeout((()=>this.#T()))}},E=["invalid","required"],v=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if([e]=e.assignedElements(),"slot"!==e.localName)return e},y=({proxyProps:t=[],inputEvent:e="input"})=>s=>class extends(b(s)){static get observedAttributes(){return[...s.observedAttributes||[],...E]}#w;#L=m.C.bind(this,"change");constructor(){super(),this.#w=super.inputElement}warnIfInputElementIsMissing(){clearTimeout(this.inputElementTimerId),this.inputElementTimerId=setTimeout((()=>{!this.#w&&console.warn(this.localName,"no input was found")}),0)}get inputElement(){if(this.#w)return this.#w;this.warnIfInputElementIsMissing();const t=this.baseElement.shadowRoot?.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');return this.#w=v(t)||v(e),this.#w}set inputElement(t){this.#w=t}getValidity(){return this.inputElement?.validity||{}}#k(){this.setAttribute("error-message",this.validationMessage)}reportValidity=()=>{this.checkValidity()||(this.setAttribute("invalid","true"),this.#k(),this.focus())};defaultReportValidity(){return super.reportValidity()}init(){super.init?.(),this.baseElement._setInvalid=function(t){!t&&this._shouldSetInvalid(t)&&(this.invalid=t)},setTimeout((()=>{this.baseElement?.addEventListener(e,(()=>{this.baseElement.checkValidity()?this.removeAttribute("invalid"):this.#k()})),this.baseElement.addEventListener("change",(()=>{this.#L()})),this.addEventListener("invalid",(()=>{this.checkValidity()||this.setAttribute("invalid","true"),this.#k()})),t.forEach((t=>{var e,s;e=this.inputElement,s=t,Object.defineProperty(this,s,{set(t){e[s]=t},get:()=>e[s],configurable:!0})})),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),(0,r.oP)(this,this.inputElement,{includeAttrs:["inputmode"]})}))}},f=t=>(0,n.qC)(y(t),c({componentNameOverride:(0,r.iY)("input-wrapper")}));var A=s(357);const S=({name:t,selector:e,mappings:s={},forward:{attributes:a=[],include:o=!0}={}})=>l=>{const u=t||(t=>t.replace(/[^\w\s]/gi,""))(e),d=c({mappings:s})(l);return class extends d{static get cssVarList(){return{...d.cssVarList,[u]:h((0,n.E3)(l.componentName,"_"+u),s)}}#N;constructor(){const t=t=>{const s=t.shadowRoot.querySelector(t.baseSelector),i=e?s.shadowRoot.querySelector(e):s;return i.shadowRoot||i};var s;super({getRootElement:t,componentNameSuffix:"_"+u,themeSection:i.qM+u,baseSelector:":host"}),this.#N=(s=t(this)).host||s}#$(){this.#N.onmouseenter=t=>{t.target.setAttribute("hover","true")},this.#N.onmouseleave=t=>{t.target.removeAttribute("hover")}}init(){super.init?.(),(0,r.oP)(this,this.#N,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#$()}}},C=t=>class extends t{#L=m.C.bind(this,"change");init(){super.init?.(),this.prevValue=this.value,this.addEventListener("change",(t=>{t.stopPropagation()})),this.addEventListener("blur",(()=>{this.value!==this.prevValue&&(this.#L(),this.prevValue=this.value)}))}};var M=s(8084);const x=t=>class extends t{init(){this.#V(),super.init?.()}#V(){["blur","focus","focusin","focusout"].forEach((t=>{this.addEventListener(t,(t=>{t.isTrusted&&t.target===this&&t.stopImmediatePropagation()}))}))}handleFocusEventsDispatching(t){let e;t?.forEach((t=>{t?.addEventListener("focusout",(t=>{t.stopImmediatePropagation(),e=setTimeout((()=>{e=null,m.C.call(this,"blur"),m.C.call(this,"focusout",{bubbles:!0})}))}));const s=t=>{t.stopImmediatePropagation(),clearTimeout(e),e||(m.C.call(this,"focus"),m.C.call(this,"focusin",{bubbles:!0}))};t?.addEventListener("focusin",s),t?.addEventListener("focus",s)}))}handleInputEventDispatching(){let t=this.value;this.addEventListener("input",(e=>{t===this.value?e.stopImmediatePropagation():t=this.value}))}}},8084:(t,e,s)=>{s.d(e,{Q:()=>r});var i=s(4567);const n=["readonly","focused","invalid","has-label","required","disabled","checked","has-helper","has-value","step-buttons-visible","hover","has-error-message","focus-ring","opened","active","password-visible"],r=t=>class extends t{init(){super.init?.(),(0,i.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);(t=>n.includes(t))(t)?""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t):e||console.warn(`attribute "${t}" has no value, should it be added to the boolean attributes list?`)}))),{})}}}}]);
|
package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>u,f:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>u,f:()=>n});var i=s(3878),l=s(4567),r=s(7878);const n=(0,l.iY)("button-selection-group-internal");class u extends((0,i.P)({componentName:n,baseSelector:"slot"})){constructor(){super(),this.innerHTML='\n <style>\n slot {\n box-sizing: border-box;\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n }\n </style>\n <slot part="wrapper"></slot>\n\t\t'}#e=r.C.bind(this,"change");get items(){return this.querySelector("slot").assignedElements()}get isReadonly(){return"true"===this.getAttribute("readonly")}getSelectedNode(){return this.items.find((e=>e.hasAttribute("selected")))}get size(){return this.getAttribute("size")||"md"}get allowDeselect(){return"true"===this.getAttribute("allow-deselect")}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onClick(e){this.isReadonly||e.target===e.currentTarget||(e.target===this.getSelectedNode()&&this.allowDeselect?this.removeSelected():this.setSelected(e.target),this.#e())}setSelected(e){e!==this.getSelectedNode()&&(this.removeSelected(),e?.setAttribute("selected","true"))}get value(){return this.getSelectedNode()?.value||""}set value(e){const t=this.items.find((t=>t.value===e));this.setSelected(t)}get defaultValue(){return this.getAttribute("default-value")}setDefaultValue(){setTimeout((()=>{this.defaultValue&&(this.value=this.defaultValue,this.setCustomValidity())}))}onSizeChange(){this.items.forEach((e=>{e.setAttribute("size",this.size)}))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{"size"===e&&this.onSizeChange()}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0].focus()})),super.init?.(),this.setDefaultValue(),(0,l.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size"]}),this.querySelector("slot").addEventListener("click",this.onClick.bind(this))}}},8460:(e,t,s)=>{s.r(t),s.d(t,{ButtonSelectionGroupInternalClass:()=>i.B});var i=s(3547);s(2018),customElements.define(i.f,i.B)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n tabindex="-1"\n\t\t\t>\n <slot></slot>\n </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t${(0,o.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n display:inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,o.Pd)("vaadin-text-field")}\n `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(t,
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(e,t,r)=>{r.d(t,{H:()=>g,f:()=>s});var o=r(2061),i=r(4567),a=r(4201),n=r(1e3);const s=(0,i.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:c,toggle:u,label:h,requiredIndicator:m,helperText:b,errorMessage:y}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},fontSize:[{},l],fontFamily:[h,c,d,b,y],labelTextColor:[{...h,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...y,property:"color"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:{...u,property:"cursor"},inputDropdownButtonColor:{...u,property:"color"},inputDropdownButtonSize:{...u,property:"font-size"},inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>g.cssVarList.overlay.itemBoxShadow}}}),n.e4,(0,n.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"}},forward:{include:!1,attributes:["size"]}}),(0,n.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),n.Ae,(e=>class extends e{#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,i.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,i.P$)(this,this.#r.bind(this)),this.setDefaultValue()}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,n.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,a.bi)(g.cssVarList)}\n\t\t${(0,a.PH)("vaadin-combo-box")}\n\t\t${(0,a.jI)("vaadin-combo-box")}\n\t\t${(0,a.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(9314);var o=r(4049);customElements.define(o.f,o.H)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>v});var n=i(1e3),o=i(2061),r=i(4567),s=i(3878);const a=(0,r.iY)("upload-file"),p=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],u=(0,s.P)({componentName:a,baseSelector:":host > div"}),{host:d,wrapper:l,icon:c,title:h,description:b,requiredIndicator:y}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},v=(0,o.qC)((0,n.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,n.yk)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...d,property:"height"},hostWidth:{...d,property:"width"},hostPadding:{property:"padding"},gap:{...l},lineHeight:{...l,property:"line-height"},titleFontSize:{...h,property:"font-size"},titleFontWeight:{...h,property:"font-weight"},descriptionFontSize:{...b,property:"font-size"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],iconSize:{...c,property:"width"},requiredIndicator:{...y,property:"content"}}}),n.e4,n.Ae)(class extends u{static get observedAttributes(){return p.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n <slot name="icon"></slot>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" />\n\t\t\t\t\t<descope-button></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var i;e.length&&(this.value=await(i=e[0],new Promise((t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(i)}))),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.input.value?{valueMissing:!0}:(this.removeAttribute("invalid"),{})}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("title"===t?this.updateTitle(i):"description"===t?this.updateDescription(i):"button-label"===t?this.updateButtonLabel(i):"button-mode"===t?this.updateButtonMode(i):"button-variant"===t?this.updateButtonVariant(i):"size"===t?this.updateButtonSize(i):"accept"===t?this.updateInputAccept(i):"readonly"===t&&this.updateReadOnly(i))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.innerHTML=t}updateDescription(t){this.description.innerHTML=t}updateButtonLabel(t){this.button.innerHTML=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}});i(2018),customElements.define(a,v)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n <div>\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${u.Z.map((t=>o(t))).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-")
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n <div>\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${u.Z.map((t=>o(t))).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-");if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?u.Z.filter((e=>t.includes(e.code))):u.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>o(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(l.includes(t)){const e=p[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,n)=>{n.r(e),n(1294),n(9357);var i=n(2246);customElements.define(i.f,i.Z)}}]);
|
package/package.json
CHANGED
|
@@ -106,7 +106,9 @@ const customMixin = (superclass) =>
|
|
|
106
106
|
|
|
107
107
|
this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
|
|
108
108
|
|
|
109
|
-
forwardAttrs(this, this.inputElement, {
|
|
109
|
+
forwardAttrs(this, this.inputElement, {
|
|
110
|
+
includeAttrs: ['size', 'default-value', 'allow-deselect'],
|
|
111
|
+
});
|
|
110
112
|
|
|
111
113
|
this.renderItems();
|
|
112
114
|
|
|
@@ -42,13 +42,17 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
|
|
|
42
42
|
return this.getAttribute('size') || 'md';
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
get allowDeselect() {
|
|
46
|
+
return this.getAttribute('allow-deselect') === 'true';
|
|
47
|
+
}
|
|
48
|
+
|
|
45
49
|
removeSelected() {
|
|
46
50
|
this.getSelectedNode()?.removeAttribute('selected');
|
|
47
51
|
}
|
|
48
52
|
|
|
49
53
|
onClick(e) {
|
|
50
54
|
if (!this.isReadonly && e.target !== e.currentTarget) {
|
|
51
|
-
if (e.target === this.getSelectedNode()) {
|
|
55
|
+
if (e.target === this.getSelectedNode() && this.allowDeselect) {
|
|
52
56
|
this.removeSelected();
|
|
53
57
|
} else {
|
|
54
58
|
this.setSelected(e.target);
|
|
@@ -91,12 +91,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
handleSelectedItem() {
|
|
94
|
-
|
|
95
|
-
this.baseElement.selectedItem = undefined;
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const currentSelected = this.selectedItem?.['data-id'];
|
|
94
|
+
const currentSelected = this.baseElement.selectedItem?.['data-id'];
|
|
100
95
|
|
|
101
96
|
this.baseElement.selectedItem = undefined;
|
|
102
97
|
|
|
@@ -109,11 +104,6 @@ const ComboBoxMixin = (superclass) =>
|
|
|
109
104
|
if (!this.value) {
|
|
110
105
|
this.setDefaultValue();
|
|
111
106
|
}
|
|
112
|
-
|
|
113
|
-
// otherwise, set first item as selected item
|
|
114
|
-
if (!this.value) {
|
|
115
|
-
this.value = this.items?.[0]?.['data-id'];
|
|
116
|
-
}
|
|
117
107
|
}
|
|
118
108
|
|
|
119
109
|
// eslint-disable-next-line class-methods-use-this
|
|
@@ -136,7 +126,7 @@ const ComboBoxMixin = (superclass) =>
|
|
|
136
126
|
value: {
|
|
137
127
|
...valueDescriptor,
|
|
138
128
|
set(val) {
|
|
139
|
-
if (!comboBox.items?.length) {
|
|
129
|
+
if (!comboBox.baseElement.items?.length) {
|
|
140
130
|
return;
|
|
141
131
|
}
|
|
142
132
|
|
|
@@ -164,9 +154,13 @@ const ComboBoxMixin = (superclass) =>
|
|
|
164
154
|
items.forEach((node) => {
|
|
165
155
|
Object.defineProperty(node, 'data-name', {
|
|
166
156
|
value: node.getAttribute('data-name'),
|
|
157
|
+
configurable: true,
|
|
158
|
+
writable: true,
|
|
167
159
|
});
|
|
168
160
|
Object.defineProperty(node, 'data-id', {
|
|
169
161
|
value: node.getAttribute('data-id'),
|
|
162
|
+
configurable: true,
|
|
163
|
+
writable: true,
|
|
170
164
|
});
|
|
171
165
|
});
|
|
172
166
|
|
|
@@ -178,6 +172,9 @@ const ComboBoxMixin = (superclass) =>
|
|
|
178
172
|
}, 0);
|
|
179
173
|
}
|
|
180
174
|
|
|
175
|
+
// use vaadin combobox custom renderer to render options as HTML
|
|
176
|
+
// and not via default renderer, which renders only the data-name's value
|
|
177
|
+
// in its own HTML template
|
|
181
178
|
baseElement.renderer = (root, combo, model) => {
|
|
182
179
|
// eslint-disable-next-line no-param-reassign
|
|
183
180
|
root.innerHTML = model.item.outerHTML;
|
|
@@ -199,6 +196,16 @@ const ComboBoxMixin = (superclass) =>
|
|
|
199
196
|
init() {
|
|
200
197
|
super.init?.();
|
|
201
198
|
|
|
199
|
+
// eslint-disable-next-line func-names
|
|
200
|
+
this.getValidity = function () {
|
|
201
|
+
if (!this.value && this.isRequired) {
|
|
202
|
+
return {
|
|
203
|
+
valueMissing: true,
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
return {};
|
|
207
|
+
};
|
|
208
|
+
|
|
202
209
|
this.setComboBoxDescriptor();
|
|
203
210
|
|
|
204
211
|
this.#overrideOverlaySettings();
|
|
@@ -217,13 +224,15 @@ const ComboBoxMixin = (superclass) =>
|
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
set value(val) {
|
|
220
|
-
|
|
227
|
+
if (val) {
|
|
228
|
+
const child = this.baseElement.items?.find((item) => item['data-id'] === val);
|
|
221
229
|
|
|
222
|
-
|
|
223
|
-
|
|
230
|
+
if (child) {
|
|
231
|
+
this.baseElement.selectedItem = child;
|
|
232
|
+
}
|
|
233
|
+
} else {
|
|
234
|
+
this.baseElement.selectedItem = undefined;
|
|
224
235
|
}
|
|
225
|
-
|
|
226
|
-
this.baseElement.selectedItem = child;
|
|
227
236
|
}
|
|
228
237
|
|
|
229
238
|
get value() {
|
|
@@ -320,7 +329,7 @@ export const ComboBoxClass = compose(
|
|
|
320
329
|
attributes: ['size'],
|
|
321
330
|
},
|
|
322
331
|
}),
|
|
323
|
-
proxyInputMixin({ proxyProps: ['selectionStart'] }),
|
|
332
|
+
proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
|
|
324
333
|
componentNameValidationMixin,
|
|
325
334
|
ComboBoxMixin
|
|
326
335
|
)(
|
|
@@ -97,9 +97,10 @@ class RawUploadFile extends BaseInputClass {
|
|
|
97
97
|
*/
|
|
98
98
|
|
|
99
99
|
getValidity() {
|
|
100
|
-
if (this.isRequired && !this.value) {
|
|
100
|
+
if (this.isRequired && !this.input.value) {
|
|
101
101
|
return { valueMissing: true };
|
|
102
102
|
}
|
|
103
|
+
this.removeAttribute('invalid');
|
|
103
104
|
return {};
|
|
104
105
|
}
|
|
105
106
|
|
|
@@ -58,9 +58,14 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
|
58
58
|
|
|
59
59
|
set value(val) {
|
|
60
60
|
const [countryCode = '', phoneNumber = ''] = val.split('-');
|
|
61
|
-
|
|
62
|
-
if (
|
|
63
|
-
|
|
61
|
+
|
|
62
|
+
if (countryCode) {
|
|
63
|
+
const countryCodeItem = this.getCountryByDialCode(countryCode);
|
|
64
|
+
if (countryCodeItem) {
|
|
65
|
+
this.countryCodeInput.selectedItem = countryCodeItem;
|
|
66
|
+
}
|
|
67
|
+
} else {
|
|
68
|
+
this.countryCodeInput.selectedItem = undefined;
|
|
64
69
|
}
|
|
65
70
|
this.phoneNumberInput.value = phoneNumber;
|
|
66
71
|
}
|
|
@@ -35,7 +35,11 @@ const getNestedInput = (ele) => {
|
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
const proxyInputMixin =
|
|
38
|
-
({
|
|
38
|
+
({
|
|
39
|
+
proxyProps = [],
|
|
40
|
+
// allows us to set the event that should trigger validation
|
|
41
|
+
inputEvent = 'input',
|
|
42
|
+
}) =>
|
|
39
43
|
(superclass) =>
|
|
40
44
|
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
|
41
45
|
static get observedAttributes() {
|
|
@@ -84,14 +88,7 @@ const proxyInputMixin =
|
|
|
84
88
|
return this.inputElement?.validity || {};
|
|
85
89
|
}
|
|
86
90
|
|
|
87
|
-
handleInternalInputErrorMessage() {
|
|
88
|
-
if (!this.inputElement.checkValidity()) {
|
|
89
|
-
this.inputElement.setCustomValidity(this.validationMessage);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
91
|
#handleErrorMessage() {
|
|
94
|
-
this.handleInternalInputErrorMessage();
|
|
95
92
|
this.setAttribute('error-message', this.validationMessage);
|
|
96
93
|
}
|
|
97
94
|
|
|
@@ -113,22 +110,26 @@ const proxyInputMixin =
|
|
|
113
110
|
init() {
|
|
114
111
|
super.init?.();
|
|
115
112
|
|
|
113
|
+
// vaadin sets invalid indication on blur
|
|
114
|
+
// we want invalid indication to appear only when calling reportValidity
|
|
115
|
+
// this is why we are overriding vaadin's setInvalid behavior
|
|
116
|
+
// to update only when the element is valid (so invalid indication will only be removed)
|
|
117
|
+
// and we are adding it in reportValidity
|
|
118
|
+
// eslint-disable-next-line func-names
|
|
119
|
+
this.baseElement._setInvalid = function (invalid) {
|
|
120
|
+
if (!invalid && this._shouldSetInvalid(invalid)) {
|
|
121
|
+
this.invalid = invalid;
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
|
|
116
125
|
// on some cases the base element is not ready so the inputElement is empty
|
|
117
126
|
// we are deferring this section to make sure the base element is ready
|
|
118
127
|
setTimeout(() => {
|
|
119
|
-
this.
|
|
120
|
-
if (!this.
|
|
121
|
-
this.inputElement.setCustomValidity('');
|
|
122
|
-
// after updating the input validity we want to trigger set validity on the wrapping element
|
|
123
|
-
// so we will get the updated validity
|
|
124
|
-
this.setCustomValidity('');
|
|
125
|
-
|
|
126
|
-
// Vaadin is getting the input event before us,
|
|
127
|
-
// so in order to make sure they use the updated validity
|
|
128
|
-
// we calling their fn after updating the input validity
|
|
129
|
-
this.baseElement.__onInput(e);
|
|
130
|
-
|
|
128
|
+
this.baseElement?.addEventListener(inputEvent, () => {
|
|
129
|
+
if (!this.baseElement.checkValidity()) {
|
|
131
130
|
this.#handleErrorMessage();
|
|
131
|
+
} else {
|
|
132
|
+
this.removeAttribute('invalid');
|
|
132
133
|
}
|
|
133
134
|
});
|
|
134
135
|
|
|
@@ -136,13 +137,6 @@ const proxyInputMixin =
|
|
|
136
137
|
this.#dispatchChange();
|
|
137
138
|
});
|
|
138
139
|
|
|
139
|
-
this.#inputElement.addEventListener('blur', () => {
|
|
140
|
-
if (!this.checkValidity()) {
|
|
141
|
-
this.setAttribute('invalid', 'true');
|
|
142
|
-
this.#handleErrorMessage();
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
|
|
146
140
|
this.addEventListener('invalid', () => {
|
|
147
141
|
if (!this.checkValidity()) {
|
|
148
142
|
this.setAttribute('invalid', 'true');
|
|
@@ -150,8 +144,6 @@ const proxyInputMixin =
|
|
|
150
144
|
this.#handleErrorMessage();
|
|
151
145
|
});
|
|
152
146
|
|
|
153
|
-
this.handleInternalInputErrorMessage();
|
|
154
|
-
|
|
155
147
|
// sync properties
|
|
156
148
|
proxyProps.forEach((prop) => {
|
|
157
149
|
propertyObserver(this, this.inputElement, prop);
|