@descope/web-components-ui 1.0.52 → 1.0.53
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/index.esm.js +514 -281
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.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-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-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 +24 -7
- package/src/componentsHelpers/createProxy/index.js +6 -3
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
- package/src/index.js +3 -0
- package/src/theme/components/divider.js +24 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/text.js +6 -0
- package/dist/umd/433.js +0 -1
@@ -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
|
+
};
|
package/src/index.js
CHANGED
@@ -8,6 +8,9 @@ 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-divider';
|
12
|
+
import './components/descope-logo';
|
13
|
+
import './components/descope-checkbox';
|
11
14
|
|
12
15
|
export {
|
13
16
|
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,7 @@ import switchToggle from './switchToggle';
|
|
9
9
|
import container from './container';
|
10
10
|
import logo from './logo';
|
11
11
|
import text from './text';
|
12
|
+
import divider from './divider';
|
12
13
|
import passcode from './passcode';
|
13
14
|
|
14
15
|
export default {
|
@@ -23,5 +24,6 @@ export default {
|
|
23
24
|
container,
|
24
25
|
logo,
|
25
26
|
text,
|
27
|
+
divider,
|
26
28
|
passcode
|
27
29
|
};
|
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)))}`}}]);
|