@descope/web-components-ui 1.0.77 → 1.0.79
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +149 -152
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/878.js +1 -1
- package/dist/umd/988.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createBaseClass.js +3 -1
- package/src/baseClasses/createBaseInputClass.js +4 -3
- package/src/components/descope-combo-box/ComboBox.js +2 -2
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +2 -31
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +8 -32
- package/src/mixins/index.js +1 -1
- package/src/mixins/inputEventsDispatchingMixin.js +71 -0
- package/src/mixins/proxyInputMixin.js +7 -5
- package/dist/umd/744.js +0 -1
- package/src/mixins/focusMixin.js +0 -23
package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js
CHANGED
@@ -1,6 +1,5 @@
|
|
1
1
|
import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
|
2
|
-
import { getComponentName } from '../../../helpers/componentHelpers';
|
3
|
-
import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
|
2
|
+
import { getComponentName, simulateInputFocusEvents } from '../../../helpers/componentHelpers';
|
4
3
|
import CountryCodes from '../CountryCodes';
|
5
4
|
import { comboBoxItem } from '../helpers';
|
6
5
|
|
@@ -31,9 +30,6 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
31
30
|
);
|
32
31
|
}
|
33
32
|
|
34
|
-
#dispatchBlur = createDispatchEvent.bind(this, 'blur');
|
35
|
-
#dispatchFocus = createDispatchEvent.bind(this, 'focus');
|
36
|
-
|
37
33
|
constructor() {
|
38
34
|
super();
|
39
35
|
|
@@ -98,6 +94,13 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
98
94
|
};
|
99
95
|
|
100
96
|
init() {
|
97
|
+
|
98
|
+
this.addEventListener('focus', (e) => {
|
99
|
+
// we want to ignore focus events we are dispatching
|
100
|
+
if (e.isTrusted)
|
101
|
+
this.inputs[0].focus()
|
102
|
+
})
|
103
|
+
|
101
104
|
super.init();
|
102
105
|
this.initInputs();
|
103
106
|
this.setComboBoxDescriptor();
|
@@ -148,9 +151,6 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
148
151
|
}
|
149
152
|
|
150
153
|
initInputs() {
|
151
|
-
let prevVal = this.value
|
152
|
-
let blurTimerId
|
153
|
-
|
154
154
|
// Sanitize phone input value to filter everything but digits
|
155
155
|
this.phoneNumberInput.addEventListener('input', (e) => {
|
156
156
|
const telDigitsRegExp = /^\d$/;
|
@@ -160,30 +160,6 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
160
160
|
.join('');
|
161
161
|
e.target.value = sanitizedInput;
|
162
162
|
});
|
163
|
-
|
164
|
-
this.inputs.forEach(input => {
|
165
|
-
input.addEventListener('blur', (e) => {
|
166
|
-
e.stopImmediatePropagation();
|
167
|
-
blurTimerId = setTimeout(() => {
|
168
|
-
blurTimerId = null
|
169
|
-
this.#dispatchBlur()
|
170
|
-
});
|
171
|
-
})
|
172
|
-
|
173
|
-
input.addEventListener('focus', (e) => {
|
174
|
-
e.stopImmediatePropagation();
|
175
|
-
clearTimeout(blurTimerId)
|
176
|
-
if (!blurTimerId) {
|
177
|
-
this.#dispatchFocus()
|
178
|
-
}
|
179
|
-
})
|
180
|
-
|
181
|
-
input.addEventListener('input', (e) => {
|
182
|
-
if (prevVal === this.value) {
|
183
|
-
e.stopImmediatePropagation();
|
184
|
-
}
|
185
|
-
});
|
186
|
-
});
|
187
163
|
}
|
188
164
|
|
189
165
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
package/src/mixins/index.js
CHANGED
@@ -4,10 +4,10 @@ export { createProxy } from './createProxy';
|
|
4
4
|
export { proxyInputMixin } from './proxyInputMixin';
|
5
5
|
export { componentNameValidationMixin } from './componentNameValidationMixin';
|
6
6
|
export { hoverableMixin } from './hoverableMixin';
|
7
|
-
export { focusMixin } from './focusMixin'
|
8
7
|
export { inputValidationMixin } from './inputValidationMixin'
|
9
8
|
export { portalMixin } from './portalMixin'
|
10
9
|
export { changeMixin } from './changeMixin'
|
11
10
|
export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin'
|
12
11
|
export { readOnlyMixin } from './readOnlyMixin'
|
13
12
|
export { lifecycleEventsMixin } from './lifecycleEventsMixin'
|
13
|
+
export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin'
|
@@ -0,0 +1,71 @@
|
|
1
|
+
import { createDispatchEvent } from "../helpers/mixinsHelpers";
|
2
|
+
|
3
|
+
export const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
4
|
+
init() {
|
5
|
+
this.#blockNativeEvents();
|
6
|
+
this.#handleFocusEventsDispatching();
|
7
|
+
this.#handleInputEventDispatching();
|
8
|
+
|
9
|
+
super.init?.();
|
10
|
+
}
|
11
|
+
|
12
|
+
// we want to block the native (trusted) events and control when these events are being dispatched
|
13
|
+
#blockNativeEvents() {
|
14
|
+
['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
|
15
|
+
this.addEventListener(event, (e) => {
|
16
|
+
e.isTrusted && e.target === this && e.stopImmediatePropagation()
|
17
|
+
})
|
18
|
+
})
|
19
|
+
}
|
20
|
+
|
21
|
+
#handleFocusEventsDispatching() {
|
22
|
+
let timerId
|
23
|
+
|
24
|
+
// in order to simulate blur & focusout on root input element
|
25
|
+
// we are checking if focus on one of the inner elements happened immediately after blur
|
26
|
+
// if not, the component is no longer focused and we should dispatch blur & focusout
|
27
|
+
this.addEventListener('focusout', (e) => {
|
28
|
+
if (e.isTrusted) {
|
29
|
+
e.stopImmediatePropagation();
|
30
|
+
timerId = setTimeout(() => {
|
31
|
+
timerId = null
|
32
|
+
createDispatchEvent.call(this, 'blur');
|
33
|
+
createDispatchEvent.call(this, 'focusout', { bubbles: true });
|
34
|
+
});
|
35
|
+
}
|
36
|
+
})
|
37
|
+
|
38
|
+
// in order to simulate focus & focusin on the root input element
|
39
|
+
// we are holding a timer id and clearing it on focusin
|
40
|
+
// if there is a timer id, it means that the root input is still focused
|
41
|
+
// otherwise, it was not focused before, and we should dispatch focus & focusin
|
42
|
+
this.addEventListener('focusin', (e) => {
|
43
|
+
if (e.isTrusted) {
|
44
|
+
e.stopImmediatePropagation();
|
45
|
+
clearTimeout(timerId)
|
46
|
+
if (!timerId) {
|
47
|
+
createDispatchEvent.call(this, 'focus');
|
48
|
+
createDispatchEvent.call(this, 'focusin', { bubbles: true });
|
49
|
+
}
|
50
|
+
}
|
51
|
+
})
|
52
|
+
}
|
53
|
+
|
54
|
+
// we want to block the input events from propagating in case the value of the root input wasn't change
|
55
|
+
// this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
|
56
|
+
// in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
|
57
|
+
#handleInputEventDispatching() {
|
58
|
+
let previousRootComponentValue = this.value
|
59
|
+
|
60
|
+
this.addEventListener('input', (e) => {
|
61
|
+
// we are comparing the previous value to the new one,
|
62
|
+
// and if they have the same value, we are blocking the input event
|
63
|
+
if (previousRootComponentValue === this.value) {
|
64
|
+
e.stopImmediatePropagation();
|
65
|
+
} else {
|
66
|
+
previousRootComponentValue = this.value
|
67
|
+
}
|
68
|
+
});
|
69
|
+
|
70
|
+
}
|
71
|
+
}
|
@@ -66,15 +66,16 @@ export const proxyInputMixin = (superclass) =>
|
|
66
66
|
|
67
67
|
reportValidityOnInternalInput() {
|
68
68
|
setTimeout(() => {
|
69
|
+
this.inputElement.focus();
|
69
70
|
this.inputElement.reportValidity()
|
70
71
|
})
|
71
72
|
}
|
72
73
|
|
73
74
|
// we want reportValidity to behave like form submission
|
74
75
|
reportValidity() {
|
75
|
-
if (!
|
76
|
+
if (!this.checkValidity()) {
|
76
77
|
this.setAttribute('invalid', 'true');
|
77
|
-
this.reportValidityOnInternalInput()
|
78
|
+
this.reportValidityOnInternalInput();
|
78
79
|
}
|
79
80
|
}
|
80
81
|
|
@@ -120,9 +121,10 @@ export const proxyInputMixin = (superclass) =>
|
|
120
121
|
})
|
121
122
|
|
122
123
|
this.addEventListener('focus', (e) => {
|
123
|
-
// when clicking on the form submit button and the input is invalid
|
124
|
-
// we
|
125
|
-
|
124
|
+
// when clicking on the form submit button and the input is invalid, we want it to appear as invalid
|
125
|
+
// this is a best effort, we cannot identify it for sure without listening to the form submission event
|
126
|
+
// this will also be triggered when the focus is moving from the submit button to the input by pressing TAB key
|
127
|
+
if (e.relatedTarget?.form && e.relatedTarget?.form === this.form && e.relatedTarget?.nodeName === 'BUTTON') {
|
126
128
|
if (!this.checkValidity()) {
|
127
129
|
this.setAttribute('invalid', 'true');
|
128
130
|
}
|
package/dist/umd/744.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[744],{3346:(t,e,s)=>{s.d(e,{s:()=>n});var i=s(2061),r=s(9629);const n=({componentName:t,baseSelector:e=""})=>{class s extends HTMLElement{static get componentName(){return t}#t;#e=!0;get baseSelector(){return e}get baseElement(){return this.#t??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#t||console.warn("missing base element for component",this.localName),this.#t}get rootElement(){return this.shadowRoot||this}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#e&&(this.#e=!1,this.init?.())}}return(0,i.qC)(r.Ae,r._A,r.QT)(s)}},5279:(t,e,s)=>{s.d(e,{gh:()=>i,k4:()=>r,qM:()=>a,qg:()=>n});const i="descope",r=3,n="host",a="@"},4567:(t,e,s)=>{s.d(e,{Db:()=>d,FX:()=>n,P$:()=>a,Tk:()=>u,iY:()=>h,oP:()=>c,tg:()=>l});var i=s(2061),r=s(5279);const n=(t,e,{excludeAttrs:s=[],includeAttrs:i=[]})=>{const r=Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!i.length||i.includes(t.name)))).map((t=>t.name));e(r),new MutationObserver((t=>{for(const r of t)"attributes"!==r.type||s.includes(r.attributeName)||i.length&&!i.includes(r.attributeName)||e([r.attributeName])})).observe(t,{attributes:!0})},a=(t,e)=>{e({addedNodes:Array.from(t.children),removedNodes:[]}),new MutationObserver((t=>{for(const s of t)"childList"===s.type&&e(s)})).observe(t,{childList:!0})},o=(t,e,s={})=>i=>{i.forEach((i=>{const r=s[i]||i,n=t.getAttribute(i);null!==n?e.getAttribute(r)!==n&&e.setAttribute(r,n):e.removeAttribute(r)}))},l=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},h=t=>(0,i.E3)(r.gh,t),u=(...t)=>`--${(0,i.E3)(...t)}`,c=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)},d=(t,e,s=[])=>{if(!s.length)return;const i=s.reduce(((t,s)=>Object.assign(t,{[s]:{get:()=>e[s],set(t){e[s]=t}}})),{});Object.defineProperties(t,i)}},2061:(t,e,s)=>{s.d(e,{E3:()=>r,GL:()=>i,mf:()=>a,qC:()=>n});const i=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),r=(...t)=>i(t.filter((t=>!!t)).join("-")),n=(...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})},9629:(t,e,s)=>{s.d(e,{li:()=>T,Ae:()=>A,DM:()=>p,yk:()=>u,e4:()=>c,pY:()=>M,_A:()=>S,wX:()=>b,QT:()=>L,Iw:()=>C,dj:()=>f,P4:()=>V});var i=s(5279),r=s(2061),n=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,n.Tk)(t,s)})),{}),u=({mappings:t={}})=>e=>class extends e{static get cssVarList(){return{...e.cssVarList,...h(e.componentName,{...t})}}#s;#i;#r;#n;#a;#o;#l;#h;constructor({getRootElement:e,componentNameSuffix:s="",themeSection:n=i.qg,baseSelector:a}={}){super(),this.#n=s,this.#a=n,this.#o=e?.(this)||this.shadowRoot,this.#l=a??this.baseSelector,this.#h=Object.keys(t).map((t=>(0,r.E3)("st",s,t)))}get componentTheme(){return a.componentsThemeManager.currentTheme?.[e.componentName]||""}#u(){this.#i.innerHTML=this.componentTheme[this.#a]}#c(){this.#i=document.createElement("style"),this.#i.id="style-mixin-theme",this.#o.prepend(this.#i),this.#r=a.componentsThemeManager.onCurrentThemeChange(this.#u.bind(this)),this.#u()}#d(){this.#s=document.createElement("style"),this.#s.id="style-mixin-overrides";const t=(s=e.componentName,r=i.k4,Array(r).fill(`.${s}`).join(""));var s,r;this.#s.innerText=`:host(${t}) {}`,this.#o.append(this.#s)}#m(t,s){const i=this.#s?.sheet?.cssRules[0].style;if(!i)return;const r=(0,n.Tk)(e.componentName,t.replace(new RegExp("^st-"),""));s?i?.setProperty(r,s):i?.removeProperty(r)}#p(t=[]){for(const e of t)this.#h.includes(e)&&this.#m(e,this.getAttribute(e));this.#s.innerHTML=this.#s?.sheet?.cssRules[0].cssText}#g(){const s=document.createElement("style");s.id="style-mixin-mappings",s.innerHTML=((t,e,s)=>{const i=new l;return Object.keys(s).forEach((a=>{const l=((t,e)=>{const s={selector:"",property:(0,r.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(a,s[a]),h=(0,n.Tk)(t,a);l.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>(0,r.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,r.mf)(s)?s():s,o(h))}))})),i.toString()})((0,r.E3)(e.componentName,this.#n),this.#l,t),this.#o.prepend(s)}#b(t){(this.#o.classList||this.#o.host.classList).add(t)}init(){super.init?.(),this.shadowRoot.isConnected&&(this.#b(e.componentName),this.#g(),this.#c(),this.#d(),(0,n.FX)(this,this.#p.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#r?.()}},c=t=>class extends t{#E=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#E=document.createElement("style"),this.#E.innerText="* { cursor: inherit!important }"}#y(t){t?this.shadowRoot.appendChild(this.#E):this.#E.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#y("true"===s)}};var d=s(3346),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})){#v=m.C.bind(this,"blur");#f=m.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open"}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,r.mf)(i)?i():i}</style>\n\t\t\t<${e}>\n\t\t\t<slot></slot>\n\t\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}focus=()=>this.baseElement.focus();init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#v()})),this.baseElement.addEventListener("focus",(t=>{this.#f()})),this.addEventListener("focus",(t=>{t.isTrusted&&this.focus()})),(0,n.Db)(this,this.baseElement,l),this.baseElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&this.getRootNode()===document&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},(0,n.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return h},g=["required","pattern"],b=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...g]}static get formAssociated(){return!0}#A;constructor(){super(),this.#A=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}. `}getErrorMessage(t){switch(!0){case t.valueMissing:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case t.patternMismatch||t.typeMismatch:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case t.tooShort:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case t.tooLong:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case t.customError:return this.validationMessage;default:return""}}#S(){const t=this.getValidity();this.#A.setValidity(t,this.getErrorMessage(t))}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(t){t?this.#A.setValidity({customError:!0},t):(this.#A.setValidity({}),this.#S())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#A.form}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),g.includes(t)&&this.#S()}init(){super.init?.(),this.addEventListener("change",this.#S),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#S),setTimeout((()=>this.#S()))}},E=["invalid","required"],y=(t,e,s)=>{Object.defineProperty(t,s,{set:function(t){return e[s]=t},get:function(){return e[s]},configurable:!0})},v=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if(e=e.assignedElements()[0],"slot"!==e.localName)return e},f=t=>class extends(b(t)){static get observedAttributes(){return[...t.observedAttributes||[],...E]}#M;#C=m.C.bind(this,"change");constructor(){super(),this.#M=super.inputElement}get inputElement(){const t=this.baseElement.shadowRoot.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot.querySelector('slot[name="textarea"]');if(this.#M??=v(t)||v(e),!this.#M)throw Error("no input was found");return this.#M}set inputElement(t){this.#M=t}getValidity(){return this.inputElement.validity}reportValidityOnInternalInput(){setTimeout((()=>{this.inputElement.reportValidity()}))}reportValidity(){isValid||(this.setAttribute("invalid","true"),this.reportValidityOnInternalInput())}handleInternalInputErrorMessage(){this.inputElement.checkValidity()||this.inputElement.setCustomValidity(this.validationMessage)}#T(){this.handleInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)}init(){super.init?.(),this.inputElement.addEventListener("input",(t=>{this.inputElement.checkValidity()||(this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.baseElement.__onInput(t),this.#T())})),this.baseElement.addEventListener("change",(()=>{this.#C()})),this.addEventListener("blur",(()=>{this.checkValidity()||(this.setAttribute("invalid","true"),this.#T())})),this.addEventListener("focus",(t=>{t.relatedTarget?.form===this.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())})),this.addEventListener("invalid",this.#T),this.handleInternalInputErrorMessage(),this.hasAttribute("tabindex")||this.getRootNode()!==document||this.setAttribute("tabindex",0),y(this,this.inputElement,"value"),y(this,this.inputElement,"selectionStart"),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement)}},A=t=>class extends t{#L(){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.#L()}},S=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})}))}},M=t=>class extends t{init(){super.init?.(),this.addEventListener("blur",(t=>{t.isTrusted&&t.stopImmediatePropagation()})),this.addEventListener("focus",(t=>{t.isTrusted&&t.stopImmediatePropagation()})),this.addEventListener("focusout",(t=>{t.isTrusted&&t.stopImmediatePropagation()})),this.addEventListener("focusin",(t=>{t.isTrusted&&t.stopImmediatePropagation()}))}},C=({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,r.E3)(l.componentName,"_"+c),s)}}#V;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.#V=(s=t(this)).host||s}#x(){this.#V.onmouseenter=t=>{t.target.setAttribute("hover","true")},this.#V.onmouseleave=t=>{t.target.removeAttribute("hover")}}init(){super.init?.(),(0,n.oP)(this,this.#V,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#x()}}},T=t=>class extends t{#C=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.#C(),this.prevValue=this.value)}))}},L=t=>class extends t{init(){super.init?.(),(0,n.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t)}))),{})}},V=t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){["focus","blur"].forEach((t=>{this.addEventListener(t,(t=>{this.isReadOnly&&(t.stopImmediatePropagation(),t.preventDefault())}),!0)})),super.init?.()}}}}]);
|
package/src/mixins/focusMixin.js
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
export const focusMixin = (superclass) => class FocusMixinClass extends superclass {
|
2
|
-
// we want to block all native events,
|
3
|
-
// so the input can control when to dispatch it based on its internal behavior
|
4
|
-
init() {
|
5
|
-
super.init?.();
|
6
|
-
|
7
|
-
this.addEventListener('blur', (e) => {
|
8
|
-
e.isTrusted && e.stopImmediatePropagation()
|
9
|
-
})
|
10
|
-
|
11
|
-
this.addEventListener('focus', (e) => {
|
12
|
-
e.isTrusted && e.stopImmediatePropagation();
|
13
|
-
})
|
14
|
-
|
15
|
-
this.addEventListener('focusout', (e) => {
|
16
|
-
e.isTrusted && e.stopImmediatePropagation();
|
17
|
-
})
|
18
|
-
|
19
|
-
this.addEventListener('focusin', (e) => {
|
20
|
-
e.isTrusted && e.stopImmediatePropagation();
|
21
|
-
})
|
22
|
-
}
|
23
|
-
}
|