@descope/web-components-ui 1.0.61 → 1.0.62
Sign up to get free protection for your applications and to get access to all the features.
- 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-email-field/EmailField.js +2 -2
- 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-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 +1 -1
- 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
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
createStyleMixin,
|
4
4
|
draggableMixin,
|
5
5
|
createProxy,
|
6
|
-
|
6
|
+
proxyInputMixin,
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
@@ -36,7 +36,7 @@ const TextArea = compose(
|
|
36
36
|
}
|
37
37
|
}),
|
38
38
|
draggableMixin,
|
39
|
-
|
39
|
+
proxyInputMixin,
|
40
40
|
componentNameValidationMixin
|
41
41
|
)(
|
42
42
|
createProxy({
|
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
createStyleMixin,
|
4
4
|
draggableMixin,
|
5
5
|
createProxy,
|
6
|
-
|
6
|
+
proxyInputMixin,
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
@@ -18,7 +18,7 @@ const TextField = compose(
|
|
18
18
|
mappings: textFieldMappings
|
19
19
|
}),
|
20
20
|
draggableMixin,
|
21
|
-
|
21
|
+
proxyInputMixin,
|
22
22
|
componentNameValidationMixin
|
23
23
|
)(
|
24
24
|
createProxy({
|
@@ -19,65 +19,65 @@ const insertNestingLevel = (srcEle, nestingEle) => {
|
|
19
19
|
// to be under the nesting element
|
20
20
|
export const enforceNestingElementsStylesMixin =
|
21
21
|
({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
let childObserver;
|
29
|
-
|
30
|
-
const getObserver = () => childObserver;
|
31
|
-
|
32
|
-
return class EnforceNestingElementsStylesMixinClass extends superclass {
|
33
|
-
constructor() {
|
34
|
-
super();
|
35
|
-
|
36
|
-
const childObserverCallback = () => {
|
37
|
-
// we are going to change the DOM, so we need to disconnect the observer before
|
38
|
-
// and reconnect it after the child component is added
|
39
|
-
getObserver().disconnect(this.shadowRoot.host);
|
40
|
-
|
41
|
-
const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
|
42
|
-
const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
|
43
|
-
|
44
|
-
if (!isNestingElementExist && hasNewChildren) {
|
45
|
-
// if before there were no children and now there are children - insert
|
46
|
-
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
47
|
-
} else if (isNestingElementExist && hasNewChildren) {
|
48
|
-
// if children existed, and they changed -
|
49
|
-
// we need to update (move) the new children into
|
50
|
-
// descope-text and remove previous children
|
51
|
-
this.shadowRoot.host.querySelector(child).remove();
|
52
|
-
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
53
|
-
}
|
54
|
-
else if (isNestingElementExist && !hasNewChildren) {
|
55
|
-
// if children existed and now there are none -
|
56
|
-
// we need to remove descope-text completely
|
57
|
-
this.shadowRoot.host.querySelector(child).remove();
|
58
|
-
}
|
22
|
+
(superclass) => {
|
23
|
+
const getChildNodeEle = () =>
|
24
|
+
document.createElement(nestingElementTagName, {
|
25
|
+
slot: nestingElementDestSlotName
|
26
|
+
});
|
59
27
|
|
60
|
-
|
61
|
-
this.shadowRoot.host.querySelector(nestingElementTagName) &&
|
62
|
-
forwardAttrs(
|
63
|
-
this.shadowRoot.host,
|
64
|
-
this.shadowRoot.host.querySelector(nestingElementTagName),
|
65
|
-
forwardAttrOptions
|
66
|
-
);
|
28
|
+
let childObserver;
|
67
29
|
|
68
|
-
|
69
|
-
childList: true
|
70
|
-
});
|
71
|
-
};
|
30
|
+
const getObserver = () => childObserver;
|
72
31
|
|
73
|
-
|
74
|
-
|
32
|
+
let isMutating = false;
|
33
|
+
|
34
|
+
const filterNestingElement = (node) => node.localName !== nestingElementTagName
|
35
|
+
return class EnforceNestingElementsStylesMixinClass extends superclass {
|
36
|
+
constructor() {
|
37
|
+
super();
|
38
|
+
|
39
|
+
const childObserverCallback = (mutation, observer) => {
|
40
|
+
|
41
|
+
// we are going to change the DOM, so we need to skip the upcoming mutations
|
42
|
+
if (isMutating) return;
|
43
|
+
|
44
|
+
isMutating = true
|
45
|
+
|
46
|
+
const { addedNodes, removedNodes } = mutation
|
47
|
+
|
48
|
+
const nestingElement = this.shadowRoot.host.querySelector(nestingElementTagName);
|
49
|
+
const hasNewChildren = Array.from(addedNodes)
|
50
|
+
.filter(filterNestingElement)
|
51
|
+
.length > 0;
|
52
|
+
const hasRemovedChildren = Array.from(removedNodes)
|
53
|
+
.filter(filterNestingElement)
|
54
|
+
.length > 0;
|
75
55
|
|
76
|
-
|
77
|
-
|
56
|
+
if (!nestingElement && hasNewChildren) {
|
57
|
+
// if before there were no children and now there are children - insert
|
58
|
+
this.handleNestingLevelInsertion()
|
78
59
|
|
79
|
-
|
80
|
-
|
60
|
+
} else if (nestingElement && hasNewChildren) {
|
61
|
+
// if children existed, and they changed -
|
62
|
+
// we need to update (move) the new children into
|
63
|
+
// descope-text and remove previous children
|
64
|
+
nestingElement.replaceChildren(...addedNodes)
|
65
|
+
}
|
66
|
+
else if (nestingElement && !hasNewChildren && hasRemovedChildren) {
|
67
|
+
// // if children existed and now there are none -
|
68
|
+
// // we need to remove descope-text completely
|
69
|
+
nestingElement.remove();
|
70
|
+
}
|
71
|
+
|
72
|
+
setTimeout(() => {
|
73
|
+
isMutating = false
|
74
|
+
})
|
75
|
+
};
|
76
|
+
|
77
|
+
childObserver = getChildObserver(childObserverCallback);
|
78
|
+
}
|
79
|
+
|
80
|
+
handleNestingLevelInsertion() {
|
81
81
|
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
82
82
|
|
83
83
|
forwardAttrs(
|
@@ -87,9 +87,17 @@ export const enforceNestingElementsStylesMixin =
|
|
87
87
|
);
|
88
88
|
}
|
89
89
|
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
90
|
+
connectedCallback() {
|
91
|
+
super.connectedCallback?.();
|
92
|
+
|
93
|
+
if (this.shadowRoot.host.childNodes.length > 0) {
|
94
|
+
// on the first render - we want to move all component's children to be under descope-text
|
95
|
+
this.handleNestingLevelInsertion()
|
96
|
+
}
|
97
|
+
|
98
|
+
getObserver().observe(this.shadowRoot.host, {
|
99
|
+
childList: true
|
100
|
+
});
|
101
|
+
}
|
102
|
+
};
|
94
103
|
};
|
95
|
-
};
|
@@ -3,13 +3,9 @@ import { kebabCaseJoin } from '../helpers';
|
|
3
3
|
|
4
4
|
export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
|
5
5
|
|
6
|
-
export const compose =
|
7
|
-
(...fns) =>
|
8
|
-
(val) =>
|
9
|
-
fns.reduceRight((res, fn) => fn(res), val);
|
10
|
-
|
11
6
|
export { createStyleMixin } from './createStyleMixin';
|
12
7
|
export { draggableMixin } from './draggableMixin';
|
13
8
|
export { createProxy } from './createProxy';
|
14
|
-
export {
|
9
|
+
export { proxyInputMixin } from './proxyInputMixin';
|
15
10
|
export { componentNameValidationMixin } from './componentNameValidationMixin';
|
11
|
+
export { default as compose } from './compose'
|
@@ -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],{9989:(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(9989),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)))}`}}]);
|