@descope/web-components-ui 1.0.60 → 1.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/cjs/index.cjs.js.map +1 -1
  2. package/dist/index.esm.js +395 -185
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/umd/442.js +1 -0
  5. package/dist/umd/942.js +1 -1
  6. package/dist/umd/descope-button-index-js.js +1 -1
  7. package/dist/umd/descope-checkbox-index-js.js +1 -1
  8. package/dist/umd/descope-combo-index-js.js +1 -1
  9. package/dist/umd/descope-container-index-js.js +1 -1
  10. package/dist/umd/descope-date-picker-index-js.js +1 -1
  11. package/dist/umd/descope-divider-index-js.js +1 -1
  12. package/dist/umd/descope-email-field-index-js.js +1 -1
  13. package/dist/umd/descope-link-index-js.js +1 -1
  14. package/dist/umd/descope-loader-linear-index-js.js +1 -1
  15. package/dist/umd/descope-loader-radial-index-js.js +1 -1
  16. package/dist/umd/descope-logo-index-js.js +1 -1
  17. package/dist/umd/descope-number-field-index-js.js +1 -1
  18. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  19. package/dist/umd/descope-passcode-index-js.js +1 -1
  20. package/dist/umd/descope-password-field-index-js.js +1 -1
  21. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  22. package/dist/umd/descope-text-area-index-js.js +1 -1
  23. package/dist/umd/descope-text-field-index-js.js +1 -1
  24. package/dist/umd/descope-text-index-js.js +1 -1
  25. package/dist/umd/index.js +1 -1
  26. package/package.json +1 -1
  27. package/src/baseClasses/BaseInputClass.js +3 -0
  28. package/src/components/descope-checkbox/Checkbox.js +2 -2
  29. package/src/components/descope-combo/index.js +1 -1
  30. package/src/components/descope-container/Container.js +1 -1
  31. package/src/components/descope-divider/Divider.js +1 -1
  32. package/src/components/descope-email-field/EmailField.js +2 -2
  33. package/src/components/descope-link/Link.js +1 -1
  34. package/src/components/descope-loader-linear/LoaderLinear.js +1 -1
  35. package/src/components/descope-loader-radial/LoaderRadial.js +1 -1
  36. package/src/components/descope-logo/Logo.js +1 -1
  37. package/src/components/descope-number-field/NumberField.js +2 -2
  38. package/src/components/descope-passcode/Passcode.js +2 -2
  39. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +42 -70
  40. package/src/components/descope-password-field/PasswordField.js +2 -2
  41. package/src/components/descope-switch-toggle/SwitchToggle.js +2 -2
  42. package/src/components/descope-text/Text.js +1 -1
  43. package/src/components/descope-text-area/TextArea.js +2 -2
  44. package/src/components/descope-text-field/TextField.js +2 -2
  45. package/src/componentsHelpers/compose.js +3 -0
  46. package/src/componentsHelpers/createProxy/index.js +2 -2
  47. package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +67 -59
  48. package/src/componentsHelpers/index.js +2 -6
  49. package/src/componentsHelpers/inputMixin.js +173 -94
  50. package/src/componentsHelpers/proxyInputMixin.js +152 -0
  51. package/src/theme/components/textField.js +1 -1
  52. package/dist/umd/832.js +0 -1
  53. /package/src/{components → baseClasses}/DescopeBaseClass.js +0 -0
@@ -1,94 +1,173 @@
1
- const attrs = {
2
- valueMissing: 'data-errormessage-value-missing',
3
- patternMismatch: 'data-errormessage-pattern-mismatch'
4
- };
5
-
6
- const errorAttrs = ['invalid', 'has-error-message'];
7
-
8
- const propertyObserver = (src, target, property) => {
9
- Object.defineProperty(src, property, {
10
- set: function (v) {
11
- return (target[property] = v);
12
- },
13
- get: function () {
14
- return target[property];
15
- },
16
- configurable: true
17
- });
18
- };
19
-
20
- export const inputMixin = (superclass) =>
21
- class InputMixinClass extends superclass {
22
- static get formAssociated() {
23
- return true;
24
- }
25
-
26
- #internals;
27
-
28
- constructor() {
29
- super();
30
-
31
- this.#internals = this.attachInternals();
32
- }
33
-
34
- formAssociatedCallback() {
35
- this.setValidity?.();
36
- }
37
-
38
- setValidationAttribute(attr) {
39
- const validationAttr = this.getAttribute(attr);
40
- if (validationAttr) {
41
- this.proxyElement.setAttribute('error-message', validationAttr);
42
- }
43
- // normalize vaadin error attributes to have a boolean value
44
- errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
45
- }
46
-
47
- validate() {
48
- const { valueMissing, patternMismatch, typeMismatch } = this.validity;
49
- if (valueMissing) {
50
- this.setValidationAttribute(attrs.valueMissing);
51
- } else if (typeMismatch || patternMismatch) {
52
- this.setValidationAttribute(attrs.patternMismatch);
53
- }
54
- }
55
-
56
- connectedCallback() {
57
- super.connectedCallback?.();
58
-
59
- this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
60
-
61
- // this is needed in order to make sure the form input validation is working
62
- if (!this.hasAttribute('tabindex')) {
63
- this.setAttribute('tabindex', 0);
64
- }
65
-
66
- this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
67
- this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0]
68
- if (!this.inputElement) throw Error('no input was found');
69
-
70
- // sync properties
71
- propertyObserver(this, this.inputElement, 'value');
72
- this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
73
-
74
- this.validity = this.inputElement.validity;
75
-
76
- this.setValidity = () => {
77
- this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
78
- };
79
-
80
- this.inputElement.oninput = () => {
81
- this.value = this.inputElement.value;
82
- this.setValidity();
83
- };
84
-
85
- this.onfocus = () => {
86
- setTimeout(() => this.inputElement.reportValidity(), 0);
87
- this.validate();
88
- };
89
-
90
- this.inputElement.oninvalid = () => {
91
- this.validate();
92
- };
93
- }
94
- };
1
+
2
+ const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
3
+
4
+ const events = [
5
+ 'change',
6
+ 'input',
7
+ 'blur',
8
+ 'focus',
9
+ 'invalid',
10
+ 'valid',
11
+ ]
12
+
13
+ const observedAttributes = [
14
+ 'required',
15
+ 'pattern',
16
+ ]
17
+
18
+ const errorAttributes = {
19
+ valueMissing: 'data-errormessage-value-missing',
20
+ patternMismatch: 'data-errormessage-pattern-mismatch'
21
+ }
22
+ export const inputMixin = (superclass) => class InputMixinClass extends superclass {
23
+ static get observedAttributes() {
24
+ return [
25
+ ...superclass.observedAttributes || [],
26
+ ...observedAttributes
27
+ ];
28
+ }
29
+
30
+ static get formAssociated() {
31
+ return true;
32
+ }
33
+
34
+ #internals
35
+
36
+ constructor() {
37
+ super();
38
+
39
+ this.#internals = this.attachInternals();
40
+
41
+ for (const event of events) {
42
+ this[`dispatch${upperFirst(event)}`] = function () {
43
+ this.dispatchInputEvent(event)
44
+ }
45
+ }
46
+ }
47
+
48
+ get defaultErrorMsgValueMissing() {
49
+ return 'Please fill out this field.'
50
+ }
51
+
52
+ get defaultErrorMsgPatternMismatch() {
53
+ return 'Please match the requested format.'
54
+ }
55
+
56
+ getErrorMessage(flags) {
57
+ switch (true) {
58
+ case flags.valueMissing:
59
+ return this.getAttribute(errorAttributes.valueMissing) ||
60
+ this.defaultErrorMsgValueMissing
61
+ case flags.patternMismatch || flags.typeMismatch:
62
+ return this.getAttribute(errorAttributes.patternMismatch) ||
63
+ this.defaultErrorMsgPatternMismatch
64
+ case flags.customError:
65
+ return this.validationMessage
66
+ default:
67
+ return ''
68
+ }
69
+ }
70
+
71
+ setValidity() {
72
+ const validity = this.getValidity()
73
+ this.#internals.setValidity(validity, this.getErrorMessage(validity))
74
+ }
75
+
76
+ get validationMessage() {
77
+ return this.#internals.validationMessage;
78
+ }
79
+
80
+ getValidity() {
81
+ throw Error('getValidity', 'is not implemented')
82
+ }
83
+
84
+ checkValidity() {
85
+ return this.#internals.validity.valid
86
+ }
87
+
88
+ reportValidity() {
89
+ return this.#internals.reportValidity()
90
+ }
91
+
92
+ get validity() {
93
+ return this.#internals.validity
94
+ }
95
+
96
+ setCustomValidity(errorMessage) {
97
+ if(errorMessage){
98
+ this.#internals.setValidity({customError: true}, errorMessage)
99
+ } else {
100
+ this.#internals.setValidity({})
101
+ this.setValidity()
102
+ }
103
+ }
104
+
105
+ get isRequired() {
106
+ return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
107
+ }
108
+
109
+ get pattern() {
110
+ return this.getAttribute('pattern')
111
+ }
112
+
113
+ get value() {
114
+ throw Error('get value', 'is not implemented')
115
+ }
116
+
117
+ set value(value) {
118
+ throw Error('set value', 'is not implemented')
119
+ }
120
+
121
+ handleFocus() {
122
+ throw Error('handleFocus', 'is not implemented')
123
+ }
124
+
125
+ handleInput() {
126
+ this.setValidity()
127
+ this.handleDispatchValidationEvents()
128
+ }
129
+
130
+ handleBlur() {
131
+ throw Error('handleBlur', 'is not implemented')
132
+ }
133
+
134
+ handleChange() {
135
+ throw Error('handleChange', 'is not implemented')
136
+ }
137
+
138
+ dispatchInputEvent(eventName) {
139
+ this[`on${eventName}`]?.(); // in case we got an event callback as property
140
+ this.dispatchEvent(new InputEvent(eventName));
141
+ }
142
+
143
+ attributeChangedCallback(attrName, oldValue, newValue) {
144
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
145
+
146
+ if (observedAttributes.includes(attrName)) {
147
+ this.setValidity();
148
+ }
149
+ }
150
+
151
+ handleDispatchValidationEvents(){
152
+ if(this.checkValidity()) {
153
+ this.dispatchValid()
154
+ } else {
155
+ this.dispatchInvalid()
156
+ }
157
+ }
158
+
159
+ connectedCallback() {
160
+ super.connectedCallback?.();
161
+
162
+ this.setValidity();
163
+ this.handleDispatchValidationEvents();
164
+
165
+ // create proxy replace the addEventListener fn
166
+ // and we want to be able to access the focus events
167
+ // of this element and not the nested element's events
168
+ this.onfocus = this.handleFocus.bind(this);
169
+ this.addEventListener('input', this.handleInput.bind(this))
170
+ this.addEventListener('blur', this.handleBlur.bind(this))
171
+ this.addEventListener('change', this.handleBlur.bind(this))
172
+ }
173
+ }
@@ -0,0 +1,152 @@
1
+ import { inputMixin } from "./inputMixin";
2
+
3
+ const errorAttrs = ['invalid', 'has-error-message'];
4
+
5
+ const propertyObserver = (src, target, property) => {
6
+ Object.defineProperty(src, property, {
7
+ set: function (v) {
8
+ return (target[property] = v);
9
+ },
10
+ get: function () {
11
+ return target[property];
12
+ },
13
+ configurable: true
14
+ });
15
+ };
16
+
17
+ // recursively take the first slot child until it finds an element which is not a slot
18
+ // stops after "nestingLevel" times
19
+ const getNestedInput = (ele) => {
20
+ if (!ele) return;
21
+
22
+ const nestingLevel = 10
23
+
24
+ let nonSlotEle = ele
25
+ for (let i = 0; i < nestingLevel; i++) {
26
+ nonSlotEle = nonSlotEle.assignedElements()[0]
27
+ if (nonSlotEle.localName !== 'slot') return nonSlotEle
28
+ }
29
+ }
30
+
31
+ export const proxyInputMixin = (superclass) =>
32
+ class proxyInputMixinClass extends inputMixin(superclass) {
33
+ static get observedAttributes() {
34
+ return [...superclass.observedAttributes || [], ...errorAttrs];
35
+ }
36
+
37
+ #inputElement
38
+
39
+ constructor() {
40
+ super();
41
+
42
+ this.#inputElement = super.inputElement
43
+
44
+ // this is our way to identify that the form was submitted
45
+ // in this case, we want the input to be in error state if it's not valid
46
+ this.addEventListener('focus', (e) => {
47
+ if (e.relatedTarget?.form) {
48
+ if (!this.checkValidity()) {
49
+ this.setAttribute('invalid', 'true');
50
+ }
51
+
52
+ if (this.hasAttribute('invalid')) {
53
+ this.reportValidityOnInternalInput()
54
+ }
55
+ }
56
+ })
57
+
58
+ this.addEventListener('invalid', () => {
59
+ this.setInternalInputErrorMessage()
60
+ this.setAttribute('error-message', this.validationMessage)
61
+ })
62
+
63
+ this.addEventListener('valid', () => {
64
+ this.removeAttribute('invalid')
65
+ })
66
+ }
67
+
68
+ get inputElement() {
69
+ const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]')
70
+ const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')
71
+
72
+ this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot)
73
+
74
+ if (!this.#inputElement) throw Error('no input was found');
75
+
76
+ return this.#inputElement
77
+ }
78
+
79
+ set inputElement(ele) {
80
+ this.#inputElement = ele
81
+ }
82
+
83
+ getValidity() {
84
+ return this.inputElement.validity
85
+ }
86
+
87
+ reportValidityOnInternalInput() {
88
+ setTimeout(() => {
89
+ this.inputElement.reportValidity()
90
+ }, 0)
91
+ }
92
+
93
+ handleBlur() { }
94
+
95
+ handleFocus() {
96
+ this.inputElement.focus();
97
+ if (this.hasAttribute('invalid')) {
98
+ this.reportValidityOnInternalInput()
99
+ }
100
+ }
101
+
102
+ // we want reportValidity to behave like form submission
103
+ reportValidity() {
104
+ const isValid = super.reportValidity()
105
+ if (!isValid) {
106
+ this.setAttribute('invalid', 'true');
107
+ this.inputElement.focus()
108
+ }
109
+ this.reportValidityOnInternalInput()
110
+ }
111
+
112
+ setInternalInputErrorMessage() {
113
+ if (!this.checkValidity()) {
114
+ this.inputElement.setCustomValidity(this.validationMessage)
115
+ }
116
+ }
117
+
118
+ connectedCallback() {
119
+ this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
120
+
121
+ super.connectedCallback?.();
122
+
123
+ this.inputElement.addEventListener('input', () => {
124
+ this.inputElement.setCustomValidity('')
125
+ if (!this.inputElement.checkValidity())
126
+ this.setInternalInputErrorMessage()
127
+ })
128
+
129
+ this.inputElement.addEventListener('invalid', () => {
130
+ this.setValidity()
131
+ this.setInternalInputErrorMessage()
132
+ this.setAttribute('error-message', this.validationMessage)
133
+ })
134
+
135
+ // this is needed in order to make sure the form input validation is working
136
+ if (!this.hasAttribute('tabindex')) {
137
+ this.setAttribute('tabindex', 0);
138
+ }
139
+
140
+ // sync properties
141
+ propertyObserver(this, this.inputElement, 'value');
142
+ this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
143
+ }
144
+
145
+ attributeChangedCallback(attrName, oldValue, newValue) {
146
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
147
+
148
+ if (attrName === 'invalid' && newValue === '') {
149
+ this.setAttribute('invalid', 'true')
150
+ }
151
+ }
152
+ };
@@ -63,7 +63,7 @@ export const textField = (vars) => ({
63
63
  [vars.borderColor]: globalRefs.colors.surface.main
64
64
  },
65
65
 
66
- _hasErrorMessage: {
66
+ _invalid: {
67
67
  [vars.borderColor]: globalRefs.colors.error.main,
68
68
  [vars.color]: globalRefs.colors.error.main,
69
69
  [vars.placeholderColor]: globalRefs.colors.error.light
package/dist/umd/832.js DELETED
@@ -1 +0,0 @@
1
- "use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{8522:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{Db:()=>a,oP:()=>i,tg:()=>r});const n=(t,e,{excludeAttrs:s=[],includeAttrs:n=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!n.length||n.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const o of t)"attributes"!==o.type||s.includes(o.attributeName)||n.length&&!n.includes(o.attributeName)||e([o.attributeName])})).observe(t,{attributes:!0})},o=(t,e,s={})=>(...n)=>{n.forEach((n=>{const o=s[n]||n,r=t.getAttribute(n);null!==r?e.getAttribute(o)!==r&&e.setAttribute(o,r):e.removeAttribute(o)}))},r=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},i=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)},a=(t,e,s=[])=>{if(!s.length)return;const n=s.reduce(((t,s)=>Object.assign(t,{[s]:{get:()=>e[s],set(t){e[s]=t}}})),{});Object.defineProperties(t,n)}},3535:(t,e,s)=>{s.d(e,{SP:()=>a,wj:()=>i,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class r{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 i=(t,e,s)=>{const i=new r;return Object.keys(s).forEach((r=>{const a=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(r,s[r]),l=(0,n.Tk)(t,r);a.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,o(l))}))})),i.toString()},a=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,n.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>n});const n=(t="")=>e=>class extends e{connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector+t).addEventListener("mouseover",(t=>{this.shadowRoot.host.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}))}}},832:(t,e,s)=>{s.d(e,{Ae:()=>m,qC:()=>y,DM:()=>h,yk:()=>r,e4:()=>i,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const r=({mappings:t={},nestedMappings:e={}})=>s=>{const r=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...r]}static get cssVarList(){return(0,o.SP)(s.componentName,{...t,...e})}#t=null;constructor(){super(),this.#e(),this.#s()}#s(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides",this.#t.innerText="* {}",this.shadowRoot.prepend(this.#t)}#n(t,e){const o=this.#t.sheet?.cssRules[0].style,r=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(r,e):o?.removeProperty(r)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#o(){const t=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,r=s.componentName;if(this.shadowRoot.host.classList.add(r),t.querySelector(`style#${n}`))return;const i=document.createElement("style");i.id=n,i.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${r}`).join("")}`,e),"#document"===t.nodeName?t.head.append(i):t.append(i)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),r.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{r.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},i=t=>class extends t{#t=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#r(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#r("true"===s)}};var a=s(8522),l=s(893),c=s(9201);const h=({componentName:t,wrappedEleName:e,slots:s=[],style:n,excludeAttrsSync:o=[],includeAttrsSync:r=[],includeForwardProps:i=[]})=>{const h=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class d extends a.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=h,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),(0,c.Db)(this.hostElement,this.proxyElement,i),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.addEventListener=(...t)=>this.proxyElement.addEventListener(...t),(0,c.tg)(this.proxyElement,this.hostElement,{excludeAttrs:o,includeAttrs:r}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return y((0,l._)())(d)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#i;constructor(){super(),this.#i=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(t){const e=this.getAttribute(t);e&&this.proxyElement.setAttribute("error-message",e),d.forEach((t=>this.proxyElement.setAttribute(t,"true")))}validate(){const{valueMissing:t,patternMismatch:e,typeMismatch:s}=this.validity;t?this.setValidationAttribute("data-errormessage-value-missing"):(s||e)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var t,e;t=this.inputElement,e="value",Object.defineProperty(this,e,{set:function(s){return t[e]=s},get:function(){return t[e]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#i.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=t=>class extends t{#a(){const e=this.shadowRoot.host.tagName.toLowerCase();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}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#a()}},p=t=>(0,n.E3)("descope",t),y=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e)},6225:(t,e,s)=>{s.d(e,{E3:()=>o,GL:()=>n,Tk:()=>r});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),r=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);