@descope/web-components-ui 1.0.52 → 1.0.54
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +707 -325
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -0
- package/dist/umd/942.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-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 -0
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -0
- 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/components/DescopeBaseClass.js +1 -0
- package/src/components/descope-button/Button.js +0 -1
- package/src/components/descope-combo/index.js +2 -1
- package/src/components/descope-container/Container.js +13 -5
- package/src/components/descope-divider/Divider.js +85 -0
- package/src/components/descope-divider/index.js +6 -0
- package/src/components/descope-link/Link.js +90 -0
- package/src/components/descope-link/index.js +6 -0
- package/src/components/descope-logo/Logo.js +5 -4
- package/src/components/descope-password-field/PasswordField.js +0 -1
- package/src/components/descope-text/Text.js +8 -1
- package/src/components/descope-text/index.js +0 -1
- package/src/componentsHelpers/createProxy/helpers.js +33 -11
- package/src/componentsHelpers/createProxy/index.js +12 -17
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
- package/src/componentsHelpers/hoverableMixin.js +23 -0
- package/src/index.js +4 -0
- package/src/theme/components/divider.js +24 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/link.js +57 -0
- package/src/theme/components/text.js +6 -0
- package/dist/umd/433.js +0 -1
@@ -1,14 +1,27 @@
|
|
1
|
-
const observeAttributes = (
|
1
|
+
const observeAttributes = (
|
2
|
+
ele,
|
3
|
+
callback,
|
4
|
+
{ excludeAttrs = [], includeAttrs = [] }
|
5
|
+
) => {
|
2
6
|
// sync all attrs on init
|
3
|
-
callback(
|
7
|
+
callback(
|
8
|
+
...Array.from(ele.attributes)
|
9
|
+
.filter(
|
10
|
+
(attr) =>
|
11
|
+
!excludeAttrs.includes(attr.name) &&
|
12
|
+
(!includeAttrs.length || includeAttrs.includes(attr.name))
|
13
|
+
)
|
14
|
+
.map((attr) => attr.name)
|
15
|
+
);
|
4
16
|
|
5
17
|
const observer = new MutationObserver((mutationsList) => {
|
6
18
|
for (const mutation of mutationsList) {
|
7
19
|
if (
|
8
20
|
mutation.type === 'attributes' &&
|
9
|
-
!excludeAttrs.includes(mutation.attributeName)
|
21
|
+
!excludeAttrs.includes(mutation.attributeName) &&
|
22
|
+
(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
|
10
23
|
) {
|
11
|
-
callback(mutation.attributeName);
|
24
|
+
callback([mutation.attributeName]);
|
12
25
|
}
|
13
26
|
}
|
14
27
|
});
|
@@ -17,21 +30,30 @@ const observeAttributes = (ele, callback, excludeAttrs) => {
|
|
17
30
|
};
|
18
31
|
|
19
32
|
const createSyncAttrsCb =
|
20
|
-
(srcEle, targetEle) =>
|
33
|
+
(srcEle, targetEle, mapAttrs = {}) =>
|
21
34
|
(...attrNames) => {
|
22
35
|
attrNames.forEach((attrName) => {
|
36
|
+
const targetAttrName = mapAttrs[attrName] || attrName;
|
23
37
|
const srcAttrVal = srcEle.getAttribute(attrName);
|
24
38
|
if (srcAttrVal !== null) {
|
25
|
-
if (targetEle.getAttribute(
|
26
|
-
targetEle.setAttribute(
|
39
|
+
if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
|
40
|
+
targetEle.setAttribute(targetAttrName, srcAttrVal);
|
27
41
|
}
|
28
42
|
} else {
|
29
|
-
targetEle.removeAttribute(
|
43
|
+
targetEle.removeAttribute(targetAttrName);
|
30
44
|
}
|
31
45
|
});
|
32
46
|
};
|
33
47
|
|
34
|
-
export const syncAttrs = (ele1, ele2,
|
35
|
-
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2),
|
36
|
-
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1),
|
48
|
+
export const syncAttrs = (ele1, ele2, options) => {
|
49
|
+
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
|
50
|
+
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
|
51
|
+
};
|
52
|
+
|
53
|
+
export const forwardAttrs = (source, dest, options = {}) => {
|
54
|
+
observeAttributes(
|
55
|
+
source,
|
56
|
+
createSyncAttrsCb(source, dest, options.mapAttrs),
|
57
|
+
options
|
58
|
+
);
|
37
59
|
};
|
@@ -1,3 +1,6 @@
|
|
1
|
+
import { compose } from '..';
|
2
|
+
import { DescopeBaseClass } from '../../components/DescopeBaseClass';
|
3
|
+
import { hoverableMixin } from '../hoverableMixin';
|
1
4
|
import { syncAttrs } from './helpers';
|
2
5
|
|
3
6
|
export const createProxy = ({
|
@@ -15,7 +18,7 @@ export const createProxy = ({
|
|
15
18
|
</${wrappedEleName}>
|
16
19
|
`;
|
17
20
|
|
18
|
-
class ProxyElement extends
|
21
|
+
class ProxyElement extends DescopeBaseClass {
|
19
22
|
static get componentName() {
|
20
23
|
return componentName;
|
21
24
|
}
|
@@ -23,7 +26,6 @@ export const createProxy = ({
|
|
23
26
|
constructor() {
|
24
27
|
super().attachShadow({ mode: 'open' }).innerHTML = template;
|
25
28
|
this.hostElement = this.shadowRoot.host;
|
26
|
-
this.componentName = this.hostElement.tagName.toLowerCase();
|
27
29
|
this.baseSelector = wrappedEleName;
|
28
30
|
this.shadowRoot.getElementById('create-proxy').innerHTML =
|
29
31
|
typeof style === 'function' ? style() : style;
|
@@ -37,7 +39,7 @@ export const createProxy = ({
|
|
37
39
|
// we want to focus on the proxy element when focusing our WC
|
38
40
|
this.addEventListener('focus', () => {
|
39
41
|
this.proxyElement.focus();
|
40
|
-
})
|
42
|
+
});
|
41
43
|
|
42
44
|
// `onkeydown` is set on `proxyElement` support proper tab-index navigation
|
43
45
|
// this support is needed since both proxy host and element catch `focus`/`blur` event
|
@@ -51,20 +53,13 @@ export const createProxy = ({
|
|
51
53
|
}
|
52
54
|
};
|
53
55
|
|
54
|
-
this.mouseoverCbRef = () => {
|
55
|
-
this.proxyElement.setAttribute('hover', '');
|
56
|
-
this.proxyElement.addEventListener(
|
57
|
-
'mouseleave',
|
58
|
-
() => this.proxyElement.removeAttribute('hover'),
|
59
|
-
{ once: true }
|
60
|
-
);
|
61
|
-
};
|
62
|
-
|
63
|
-
this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
|
64
|
-
|
65
56
|
// sync events
|
66
|
-
this.addEventListener = (...args) =>
|
67
|
-
|
57
|
+
this.addEventListener = (...args) =>
|
58
|
+
this.proxyElement.addEventListener(...args);
|
59
|
+
|
60
|
+
syncAttrs(this.proxyElement, this.hostElement, {
|
61
|
+
excludeAttrs: excludeAttrsSync
|
62
|
+
});
|
68
63
|
}
|
69
64
|
}
|
70
65
|
|
@@ -79,5 +74,5 @@ export const createProxy = ({
|
|
79
74
|
}
|
80
75
|
}
|
81
76
|
|
82
|
-
return ProxyElement;
|
77
|
+
return compose(hoverableMixin())(ProxyElement);
|
83
78
|
};
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import { forwardAttrs } from '../componentsHelpers/createProxy/helpers';
|
2
|
+
|
3
|
+
const getChildObserver = (callback) => {
|
4
|
+
return new MutationObserver((mutationsList) => {
|
5
|
+
for (const mutation of mutationsList) {
|
6
|
+
if (mutation.type === 'childList') {
|
7
|
+
callback(mutation);
|
8
|
+
}
|
9
|
+
}
|
10
|
+
});
|
11
|
+
};
|
12
|
+
|
13
|
+
const insertNestingLevel = (srcEle, nestingEle) => {
|
14
|
+
nestingEle.append(...srcEle.childNodes);
|
15
|
+
srcEle.appendChild(nestingEle);
|
16
|
+
};
|
17
|
+
|
18
|
+
// adds a nesting element to the component, and move all existing children
|
19
|
+
// to be under the nesting element
|
20
|
+
export const enforceNestingElementsStylesMixin =
|
21
|
+
({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
|
22
|
+
(superclass) => {
|
23
|
+
const getChildNodeEle = () =>
|
24
|
+
Object.assign(document.createElement(nestingElementTagName), {
|
25
|
+
slot: nestingElementDestSlotName
|
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
|
+
}
|
59
|
+
|
60
|
+
// we need a new observer, because we remove the nesting element
|
61
|
+
this.shadowRoot.host.querySelector(nestingElementTagName) &&
|
62
|
+
forwardAttrs(
|
63
|
+
this.shadowRoot.host,
|
64
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
65
|
+
forwardAttrOptions
|
66
|
+
);
|
67
|
+
|
68
|
+
getObserver().observe(this.shadowRoot.host, {
|
69
|
+
childList: true
|
70
|
+
});
|
71
|
+
};
|
72
|
+
|
73
|
+
childObserver = getChildObserver(childObserverCallback);
|
74
|
+
}
|
75
|
+
|
76
|
+
connectedCallback() {
|
77
|
+
super.connectedCallback?.();
|
78
|
+
|
79
|
+
if (this.shadowRoot.host.childNodes.length > 0) {
|
80
|
+
// on the first render - we want to move all component's children to be under descope-text
|
81
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
82
|
+
|
83
|
+
forwardAttrs(
|
84
|
+
this.shadowRoot.host,
|
85
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
86
|
+
forwardAttrOptions
|
87
|
+
);
|
88
|
+
}
|
89
|
+
|
90
|
+
getObserver().observe(this.shadowRoot.host, {
|
91
|
+
childList: true
|
92
|
+
});
|
93
|
+
}
|
94
|
+
};
|
95
|
+
};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
export const hoverableMixin =
|
2
|
+
(relativeSelector = '') =>
|
3
|
+
(superclass) =>
|
4
|
+
class HovrerableMixinClass extends superclass {
|
5
|
+
connectedCallback() {
|
6
|
+
super.connectedCallback?.();
|
7
|
+
|
8
|
+
const onMouseOver = (e) => {
|
9
|
+
this.shadowRoot.host.setAttribute('hover', 'true');
|
10
|
+
e.target.addEventListener(
|
11
|
+
'mouseleave',
|
12
|
+
() => this.shadowRoot.host.removeAttribute('hover'),
|
13
|
+
{ once: true }
|
14
|
+
);
|
15
|
+
};
|
16
|
+
|
17
|
+
const baseElement = this.shadowRoot.querySelector(
|
18
|
+
this.baseSelector + relativeSelector
|
19
|
+
);
|
20
|
+
|
21
|
+
baseElement.addEventListener('mouseover', onMouseOver);
|
22
|
+
}
|
23
|
+
};
|
package/src/index.js
CHANGED
@@ -8,6 +8,10 @@ import './components/descope-text-area';
|
|
8
8
|
import './components/descope-date-picker';
|
9
9
|
import './components/descope-container';
|
10
10
|
import './components/descope-text';
|
11
|
+
import './components/descope-link';
|
12
|
+
import './components/descope-divider';
|
13
|
+
import './components/descope-logo';
|
14
|
+
import './components/descope-checkbox';
|
11
15
|
|
12
16
|
export {
|
13
17
|
globalsThemeToStyle,
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import Divider from '../../components/descope-divider/Divider';
|
2
|
+
|
3
|
+
const vars = Divider.cssVarList;
|
4
|
+
|
5
|
+
const divider = {
|
6
|
+
[vars.alignItems]: 'center',
|
7
|
+
[vars.height]: '2px',
|
8
|
+
[vars.backgroundColor]: 'currentColor',
|
9
|
+
[vars.opacity]: '0.2',
|
10
|
+
[vars.padding]: '0 10px',
|
11
|
+
[vars.width]: '100%',
|
12
|
+
[vars.flexDirection]: 'row',
|
13
|
+
[vars.alignSelf]: 'strech',
|
14
|
+
[vars.textWidth]: 'fit-content',
|
15
|
+
_vertical: {
|
16
|
+
[vars.width]: '2px',
|
17
|
+
[vars.padding]: '10px 0',
|
18
|
+
[vars.flexDirection]: 'column',
|
19
|
+
[vars.minHeight]: '200px',
|
20
|
+
[vars.textWidth]: 'max-content'
|
21
|
+
}
|
22
|
+
};
|
23
|
+
|
24
|
+
export default divider;
|
@@ -9,6 +9,8 @@ import switchToggle from './switchToggle';
|
|
9
9
|
import container from './container';
|
10
10
|
import logo from './logo';
|
11
11
|
import text from './text';
|
12
|
+
import link from './link';
|
13
|
+
import divider from './divider';
|
12
14
|
import passcode from './passcode';
|
13
15
|
|
14
16
|
export default {
|
@@ -23,5 +25,7 @@ export default {
|
|
23
25
|
container,
|
24
26
|
logo,
|
25
27
|
text,
|
28
|
+
link,
|
29
|
+
divider,
|
26
30
|
passcode
|
27
31
|
};
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../themeHelpers';
|
3
|
+
import Link from '../../components/descope-link/Link';
|
4
|
+
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
6
|
+
const vars = Link.cssVarList;
|
7
|
+
|
8
|
+
const link = {
|
9
|
+
[vars.cursor]: 'pointer',
|
10
|
+
[vars.borderBottomWidth]: '2px',
|
11
|
+
[vars.borderBottomStyle]: 'solid',
|
12
|
+
[vars.borderBottomColor]: 'transparent',
|
13
|
+
[vars.color]: globalRefs.colors.primary.main,
|
14
|
+
|
15
|
+
_hover: {
|
16
|
+
[vars.borderBottomColor]: globalRefs.colors.primary.main
|
17
|
+
},
|
18
|
+
|
19
|
+
textAlign: {
|
20
|
+
right: { [vars.textAlign]: 'right' },
|
21
|
+
left: { [vars.textAlign]: 'left' },
|
22
|
+
center: { [vars.textAlign]: 'center' }
|
23
|
+
},
|
24
|
+
|
25
|
+
_fullWidth: {
|
26
|
+
[vars.width]: '100%'
|
27
|
+
},
|
28
|
+
|
29
|
+
mode: {
|
30
|
+
primary: {
|
31
|
+
[vars.color]: globalRefs.colors.primary.main,
|
32
|
+
_hover: {
|
33
|
+
[vars.borderBottomColor]: globalRefs.colors.primary.main
|
34
|
+
}
|
35
|
+
},
|
36
|
+
secondary: {
|
37
|
+
[vars.color]: globalRefs.colors.secondary.main,
|
38
|
+
_hover: {
|
39
|
+
[vars.borderBottomColor]: globalRefs.colors.secondary.main
|
40
|
+
}
|
41
|
+
},
|
42
|
+
error: {
|
43
|
+
[vars.color]: globalRefs.colors.error.main,
|
44
|
+
_hover: {
|
45
|
+
[vars.borderBottomColor]: globalRefs.colors.error.main
|
46
|
+
}
|
47
|
+
},
|
48
|
+
success: {
|
49
|
+
[vars.color]: globalRefs.colors.success.main,
|
50
|
+
_hover: {
|
51
|
+
[vars.borderBottomColor]: globalRefs.colors.success.main
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
55
|
+
};
|
56
|
+
|
57
|
+
export default link;
|
package/dist/umd/433.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[433],{3535:(e,t,s)=>{s.d(t,{SP:()=>a,wj:()=>r,zy:()=>l});var n=s(6225);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...t)}`:""})`;class i{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const r=(e,t,s)=>{const r=new i;return Object.keys(s).forEach((i=>{const a=((e,t)=>{const s={selector:"",property:(0,n.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(i,s[i]),l=(0,n.Tk)(e,i);a.forEach((({selector:e,property:s})=>{r.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,o(l))}))})),r.toString()},a=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,n.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},9433:(e,t,s)=>{s.d(t,{Ae:()=>m,qC:()=>p,DM:()=>c,yk:()=>i,e4:()=>r,iY:()=>u,y7:()=>d});var n=s(6225),o=s(3535);const i=({mappings:e={},nestedMappings:t={}})=>s=>{const i=Object.keys(e).map((e=>(0,n.E3)("st",e)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...i]}static get cssVarList(){return(0,o.SP)(s.componentName,e)}#e=null;constructor(){super(),this.#t(),this.#s()}#s(){this.#e=document.createElement("style"),this.#e.id="style-mixin-overrides",this.#e.innerText="* {}",this.shadowRoot.prepend(this.#e)}#n(e,t){const o=this.#e.sheet?.cssRules[0].style,i=(0,n.Tk)(s.componentName,e.replace(/^st-/,""));t?o?.setProperty(i,t):o?.removeProperty(i)}#t(){const t=document.createElement("style");t.id="style-mixin-component",t.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,e),this.shadowRoot.prepend(t)}#o(){const e=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,i=s.componentName;if(this.shadowRoot.host.classList.add(i),e.querySelector(`style#${n}`))return;const r=document.createElement("style");r.id=n,r.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${i}`).join("")}`,t),"#document"===e.nodeName?e.head.append(r):e.append(r)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),i.includes(e)&&this.#n(e,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((e=>{i.includes(e.nodeName)&&this.#n(e.nodeName,e.value)})))}}},r=e=>class extends e{#e=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#e=document.createElement("style"),this.#e.innerText=`${this.baseSelector} { cursor: inherit }`}#i(e){e?this.shadowRoot.appendChild(this.#e):this.#e.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#i("true"===s)}},a=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const n of e)"attributes"!==n.type||s.includes(n.attributeName)||t(n.attributeName)})).observe(e,{attributes:!0})},l=(e,t)=>(...s)=>{s.forEach((s=>{const n=e.getAttribute(s);null!==n?t.getAttribute(s)!==n&&t.setAttribute(s,n):t.removeAttribute(s)}))},c=({componentName:e,wrappedEleName:t,slots:s=[],style:n,excludeAttrsSync:o=[]})=>{const i=`\n\t\t<style id="create-proxy"></style>\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class r extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=t,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){var e,s,n;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=(...e)=>this.proxyElement.addEventListener(...e),e=this.proxyElement,s=this.hostElement,n=o,a(e,l(e,s),n),a(s,l(s,e),n))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return r},h=["invalid","has-error-message"],d=e=>class extends e{static get formAssociated(){return!0}#r;constructor(){super(),this.#r=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(e){const t=this.getAttribute(e);t&&this.proxyElement.setAttribute("error-message",t),h.forEach((e=>this.proxyElement.setAttribute(e,"true")))}validate(){const{valueMissing:e,patternMismatch:t,typeMismatch:s}=this.validity;e?this.setValidationAttribute("data-errormessage-value-missing"):(s||t)&&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 e,t;e=this.inputElement,t="value",Object.defineProperty(this,t,{set:function(s){return e[t]=s},get:function(){return e[t]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#r.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=e=>class extends e{#a(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#a()}},u=e=>(0,n.E3)("descope",e),p=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>o,GL:()=>n,Tk:()=>i});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>n(e.join("-")),i=(...e)=>`--${o(...e.filter((e=>!!e)))}`}}]);
|