@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.
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +395 -185
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/442.js +1 -0
- package/dist/umd/942.js +1 -1
- 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-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-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-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/BaseInputClass.js +3 -0
- package/src/components/descope-checkbox/Checkbox.js +2 -2
- package/src/components/descope-combo/index.js +1 -1
- package/src/components/descope-container/Container.js +1 -1
- package/src/components/descope-divider/Divider.js +1 -1
- package/src/components/descope-email-field/EmailField.js +2 -2
- package/src/components/descope-link/Link.js +1 -1
- package/src/components/descope-loader-linear/LoaderLinear.js +1 -1
- package/src/components/descope-loader-radial/LoaderRadial.js +1 -1
- package/src/components/descope-logo/Logo.js +1 -1
- package/src/components/descope-number-field/NumberField.js +2 -2
- package/src/components/descope-passcode/Passcode.js +2 -2
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +42 -70
- package/src/components/descope-password-field/PasswordField.js +2 -2
- package/src/components/descope-switch-toggle/SwitchToggle.js +2 -2
- package/src/components/descope-text/Text.js +1 -1
- package/src/components/descope-text-area/TextArea.js +2 -2
- package/src/components/descope-text-field/TextField.js +2 -2
- package/src/componentsHelpers/compose.js +3 -0
- package/src/componentsHelpers/createProxy/index.js +2 -2
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +67 -59
- package/src/componentsHelpers/index.js +2 -6
- package/src/componentsHelpers/inputMixin.js +173 -94
- package/src/componentsHelpers/proxyInputMixin.js +152 -0
- package/src/theme/components/textField.js +1 -1
- package/dist/umd/832.js +0 -1
- /package/src/{components → baseClasses}/DescopeBaseClass.js +0 -0
@@ -1,94 +1,173 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
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
|
-
|
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)))}`}}]);
|
File without changes
|