@descope/web-components-ui 1.0.62 → 1.0.64
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +95 -21
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +673 -697
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/666.js +37 -0
- package/dist/umd/725.js +1 -37
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-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 +1 -1
- package/src/components/descope-button/Button.js +14 -10
- package/src/components/descope-checkbox/Checkbox.js +8 -5
- package/src/components/descope-container/Container.js +12 -7
- package/src/components/descope-date-picker/index.js +3 -3
- package/src/components/descope-divider/Divider.js +35 -30
- package/src/components/descope-email-field/EmailField.js +3 -3
- package/src/components/descope-link/Link.js +19 -27
- package/src/components/descope-loader-linear/LoaderLinear.js +12 -7
- package/src/components/descope-loader-radial/LoaderRadial.js +5 -5
- package/src/components/descope-logo/Logo.js +4 -4
- package/src/components/descope-number-field/NumberField.js +3 -3
- package/src/components/descope-passcode/Passcode.js +55 -71
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +1 -1
- package/src/components/descope-password-field/PasswordField.js +3 -3
- package/src/components/descope-switch-toggle/SwitchToggle.js +8 -5
- package/src/components/descope-text/Text.js +18 -9
- package/src/components/descope-text-area/TextArea.js +7 -6
- package/src/components/descope-text-field/TextField.js +3 -3
- package/src/components/descope-text-field/textFieldMappings.js +3 -5
- package/src/constants.js +1 -0
- package/src/dev/index.js +2 -2
- package/src/{componentsHelpers/createProxy/helpers.js → helpers/componentHelpers.js} +13 -5
- package/src/{helpers.js → helpers/index.js} +5 -2
- package/src/helpers/themeHelpers/componentsThemeManager.js +40 -0
- package/src/{themeHelpers → helpers/themeHelpers}/index.js +56 -21
- package/src/index.cjs.js +1 -1
- package/src/index.js +5 -5
- package/src/index.umd.js +4 -0
- package/src/{componentsHelpers/createProxy/index.js → mixins/createProxy.js} +4 -4
- package/src/{componentsHelpers → mixins}/createStyleMixin/helpers.js +14 -15
- package/src/mixins/createStyleMixin/index.js +109 -0
- package/src/{componentsHelpers → mixins}/index.js +2 -6
- package/src/theme/components/button.js +2 -2
- package/src/theme/components/checkbox.js +2 -1
- package/src/theme/components/container.js +2 -2
- package/src/theme/components/divider.js +17 -9
- package/src/theme/components/link.js +1 -1
- package/src/theme/components/loader/loaderLinear.js +1 -1
- package/src/theme/components/loader/loaderRadial.js +1 -1
- package/src/theme/components/text.js +1 -1
- package/src/theme/components/textArea.js +2 -1
- package/src/theme/components/textField.js +1 -1
- package/src/theme/globals.js +3 -3
- package/dist/umd/442.js +0 -1
- package/dist/umd/942.js +0 -1
- package/dist/umd/descope-combo-index-js.js +0 -1
- package/src/components/descope-combo/index.js +0 -27
- package/src/componentsHelpers/compose.js +0 -3
- package/src/componentsHelpers/createStyleMixin/index.js +0 -114
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +0 -103
- /package/dist/umd/{725.js.LICENSE.txt → 666.js.LICENSE.txt} +0 -0
- /package/src/{themeHelpers/processColors.js → helpers/themeHelpers/colorsHelpers.js} +0 -0
- /package/src/{componentsHelpers → mixins}/componentNameValidationMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/draggableMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/hoverableMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/inputMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/proxyInputMixin.js +0 -0
package/src/theme/globals.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
import { getThemeRefs } from '../themeHelpers';
|
2
|
-
import { genColors } from '../themeHelpers/
|
1
|
+
import { getThemeRefs } from '../helpers/themeHelpers';
|
2
|
+
import { genColors } from '../helpers/themeHelpers/colorsHelpers';
|
3
3
|
|
4
4
|
export const colors = genColors({
|
5
5
|
surface: {
|
6
6
|
main: 'lightgray',
|
7
7
|
light: '#fff',
|
8
|
-
dark: '#000'
|
8
|
+
dark: '#000',
|
9
9
|
},
|
10
10
|
primary: '#0082B5',
|
11
11
|
secondary: '#7D14EB',
|
package/dist/umd/442.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[442],{9989:(t,e,s)=>{s.d(e,{V:()=>i});class i extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{Db:()=>o,oP:()=>a,tg:()=>r});const i=(t,e,{excludeAttrs:s=[],includeAttrs:i=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!i.length||i.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const n of t)"attributes"!==n.type||s.includes(n.attributeName)||i.length&&!i.includes(n.attributeName)||e([n.attributeName])})).observe(t,{attributes:!0})},n=(t,e,s={})=>(...i)=>{i.forEach((i=>{const n=s[i]||i,r=t.getAttribute(i);null!==r?e.getAttribute(n)!==r&&e.setAttribute(n,r):e.removeAttribute(n)}))},r=(t,e,s)=>{i(t,n(t,e),s),i(e,n(e,t),s)},a=(t,e,s={})=>{i(t,n(t,e,s.mapAttrs),s)},o=(t,e,s=[])=>{if(!s.length)return;const i=s.reduce(((t,s)=>Object.assign(t,{[s]:{get:()=>e[s],set(t){e[s]=t}}})),{});Object.defineProperties(t,i)}},3535:(t,e,s)=>{s.d(e,{SP:()=>o,wj:()=>a,zy:()=>l});var i=s(6225);const n=(t,...e)=>`var(${t}${e.length?` , ${n(...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 a=(t,e,s)=>{const a=new r;return Object.keys(s).forEach((r=>{const o=((t,e)=>{const s={selector:"",property:(0,i.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,i.Tk)(t,r);o.forEach((({selector:t,property:s})=>{a.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,n(l))}))})),a.toString()},o=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,i.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>i});const i=(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})}))}}},2442:(t,e,s)=>{s.d(e,{Ae:()=>b,qC:()=>o,DM:()=>c,yk:()=>r,e4:()=>a,iY:()=>g,dj:()=>y});var i=s(6225),n=s(3535);const r=({mappings:t={},nestedMappings:e={}})=>s=>{const r=Object.keys(t).map((t=>(0,i.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...r]}static get cssVarList(){return(0,n.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)}#i(t,e){const n=this.#t.sheet?.cssRules[0].style,r=(0,i.Tk)(s.componentName,t.replace(/^st-/,""));e?n?.setProperty(r,e):n?.removeProperty(r)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,n.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#n(){const t=this.shadowRoot.host.getRootNode(),i=`${s.componentName}-style-mixin-component`,r=s.componentName;if(this.shadowRoot.host.classList.add(r),t.querySelector(`style#${i}`))return;const a=document.createElement("style");a.id=i,a.innerHTML=(0,n.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${r}`).join("")}`,e),"#document"===t.nodeName?t.head.append(a):t.append(a)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),r.includes(t)&&this.#i(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#n(),Array.from(this.attributes).forEach((t=>{r.includes(t.nodeName)&&this.#i(t.nodeName,t.value)})))}}},a=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)}},o=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e);var l=s(9989),d=s(893),h=s(9201);const c=({componentName:t,wrappedEleName:e,slots:s=[],style:i,excludeAttrsSync:n=[],includeAttrsSync:r=[],includeForwardProps:a=[]})=>{const c=`\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 u extends l.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=c,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof i?i():i}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),(0,h.Db)(this.hostElement,this.proxyElement,a),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,h.tg)(this.proxyElement,this.hostElement,{excludeAttrs:n,includeAttrs:r}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return o((0,d._)())(u)};var u=s(3938);const p=["invalid","has-error-message"],m=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if(e=e.assignedElements()[0],"slot"!==e.localName)return e},y=t=>class extends((0,u.y)(t)){static get observedAttributes(){return[...t.observedAttributes||[],...p]}#a;constructor(){super(),this.#a=super.inputElement,this.addEventListener("focus",(t=>{t.relatedTarget?.form&&(this.checkValidity()||this.setAttribute("invalid","true"),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput())})),this.addEventListener("invalid",(()=>{this.setInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)})),this.addEventListener("valid",(()=>{this.removeAttribute("invalid")}))}get inputElement(){const t=this.baseEle.shadowRoot.querySelector('slot[name="input"]'),e=this.baseEle.shadowRoot.querySelector('slot[name="textarea"]');if(this.#a??=m(t)||m(e),!this.#a)throw Error("no input was found");return this.#a}set inputElement(t){this.#a=t}getValidity(){return this.inputElement.validity}reportValidityOnInternalInput(){setTimeout((()=>{this.inputElement.reportValidity()}),0)}handleBlur(){}handleFocus(){this.inputElement.focus(),this.hasAttribute("invalid")&&this.reportValidityOnInternalInput()}reportValidity(){super.reportValidity()||(this.setAttribute("invalid","true"),this.inputElement.focus()),this.reportValidityOnInternalInput()}setInternalInputErrorMessage(){this.checkValidity()||this.inputElement.setCustomValidity(this.validationMessage)}connectedCallback(){var t,e;this.baseEle=this.shadowRoot.querySelector(this.baseSelector),super.connectedCallback?.(),this.inputElement.addEventListener("input",(()=>{this.inputElement.setCustomValidity(""),this.inputElement.checkValidity()||this.setInternalInputErrorMessage()})),this.inputElement.addEventListener("invalid",(()=>{this.setValidity(),this.setInternalInputErrorMessage(),this.setAttribute("error-message",this.validationMessage)})),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),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)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"invalid"===t&&""===s&&this.setAttribute("invalid","true")}},b=t=>class extends t{#o(){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.#o()}},g=t=>(0,i.E3)("descope",t)},3938:(t,e,s)=>{s.d(e,{y:()=>r});const i=["change","input","blur","focus","invalid","valid"],n=["required","pattern"],r=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...n]}static get formAssociated(){return!0}#l;constructor(){super(),this.#l=this.attachInternals();for(const e of i)this[`dispatch${t=e,t.charAt(0).toUpperCase()+t.slice(1)}`]=function(){this.dispatchInputEvent(e)};var t}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}getErrorMessage(t){switch(!0){case t.valueMissing:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case t.patternMismatch||t.typeMismatch:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case t.customError:return this.validationMessage;default:return""}}setValidity(){const t=this.getValidity();this.#l.setValidity(t,this.getErrorMessage(t))}get validationMessage(){return this.#l.validationMessage}getValidity(){throw Error("getValidity","is not implemented")}checkValidity(){return this.#l.validity.valid}reportValidity(){return this.#l.reportValidity()}get validity(){return this.#l.validity}setCustomValidity(t){t?this.#l.setValidity({customError:!0},t):(this.#l.setValidity({}),this.setValidity())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return this.getAttribute("pattern")}get value(){throw Error("get value","is not implemented")}set value(t){throw Error("set value","is not implemented")}handleFocus(){throw Error("handleFocus","is not implemented")}handleInput(){this.setValidity(),this.handleDispatchValidationEvents()}handleBlur(){throw Error("handleBlur","is not implemented")}handleChange(){throw Error("handleChange","is not implemented")}dispatchInputEvent(t){this[`on${t}`]?.(),this.dispatchEvent(new InputEvent(t))}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),n.includes(t)&&this.setValidity()}handleDispatchValidationEvents(){this.checkValidity()?this.dispatchValid():this.dispatchInvalid()}connectedCallback(){super.connectedCallback?.(),this.setValidity(),this.handleDispatchValidationEvents(),this.onfocus=this.handleFocus.bind(this),this.addEventListener("input",this.handleInput.bind(this)),this.addEventListener("blur",this.handleBlur.bind(this)),this.addEventListener("change",this.handleBlur.bind(this))}}},6225:(t,e,s)=>{s.d(e,{E3:()=>n,GL:()=>i,Tk:()=>r});const i=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...t)=>i(t.join("-")),r=(...t)=>`--${n(...t.filter((t=>!!t)))}`}}]);
|
package/dist/umd/942.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[942],{4942:(e,t,o)=>{o.d(t,{s:()=>n});var s=o(9201);const n=({nestingElementTagName:e,nestingElementDestSlotName:t,forwardAttrOptions:o})=>n=>{let r,h=!1;const l=t=>t.localName!==e;return class extends n{constructor(){var t;super(),t=(t,o)=>{if(h)return;h=!0;const{addedNodes:s,removedNodes:n}=t,r=this.shadowRoot.host.querySelector(e),a=Array.from(s).filter(l).length>0,d=Array.from(n).filter(l).length>0;!r&&a?this.handleNestingLevelInsertion():r&&a?r.replaceChildren(...s):r&&!a&&d&&r.remove(),setTimeout((()=>{h=!1}))},r=new MutationObserver((e=>{for(const o of e)"childList"===o.type&&t(o)}))}handleNestingLevelInsertion(){var n,r;n=this.shadowRoot.host,(r=document.createElement(e,{slot:t})).append(...n.childNodes),n.appendChild(r),(0,s.oP)(this.shadowRoot.host,this.shadowRoot.host.querySelector(e),o)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.host.childNodes.length>0&&this.handleNestingLevelInsertion(),r.observe(this.shadowRoot.host,{childList:!0})}}}}}]);
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[247],{2798:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>p});var n=o(9989),c=o(2442);o(3029),o(9357);const s=document.createElement("template"),d=(0,c.iY)("combo");s.innerHTML="\n <descope-button></descope-button>\n <descope-text-field></descope-text-field>\n";class p extends n.V{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(s.content.cloneNode(!0))}}customElements.define(d,p)}}]);
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
2
|
-
import { getComponentName } from '../../componentsHelpers';
|
3
|
-
import '../descope-button';
|
4
|
-
import '../descope-text-field';
|
5
|
-
|
6
|
-
const template = document.createElement('template');
|
7
|
-
|
8
|
-
const componentName = getComponentName('combo');
|
9
|
-
|
10
|
-
template.innerHTML = `
|
11
|
-
<descope-button></descope-button>
|
12
|
-
<descope-text-field></descope-text-field>
|
13
|
-
`;
|
14
|
-
|
15
|
-
class Combo extends DescopeBaseClass {
|
16
|
-
constructor() {
|
17
|
-
super();
|
18
|
-
|
19
|
-
this.attachShadow({ mode: 'open' }).appendChild(
|
20
|
-
template.content.cloneNode(true)
|
21
|
-
);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
|
25
|
-
customElements.define(componentName, Combo);
|
26
|
-
|
27
|
-
export { Combo };
|
@@ -1,114 +0,0 @@
|
|
1
|
-
import { getCssVarName, kebabCaseJoin } from '../../helpers';
|
2
|
-
import { createStyle, createCssVarsList } from './helpers';
|
3
|
-
|
4
|
-
export const createStyleMixin =
|
5
|
-
({ mappings = {}, nestedMappings = {} }) =>
|
6
|
-
(superclass) => {
|
7
|
-
const styleAttributes = Object.keys(mappings).map((key) =>
|
8
|
-
kebabCaseJoin('st', key)
|
9
|
-
);
|
10
|
-
return class CustomStyleMixinClass extends superclass {
|
11
|
-
static get observedAttributes() {
|
12
|
-
const superAttrs = superclass.observedAttributes || [];
|
13
|
-
return [...superAttrs, ...styleAttributes];
|
14
|
-
}
|
15
|
-
|
16
|
-
static get cssVarList() {
|
17
|
-
return createCssVarsList(superclass.componentName, {
|
18
|
-
...mappings,
|
19
|
-
...nestedMappings
|
20
|
-
});
|
21
|
-
}
|
22
|
-
|
23
|
-
#styleEle = null;
|
24
|
-
|
25
|
-
constructor() {
|
26
|
-
super();
|
27
|
-
|
28
|
-
this.#createComponentStyle();
|
29
|
-
this.#createAttrOverrideStyle();
|
30
|
-
}
|
31
|
-
|
32
|
-
#createAttrOverrideStyle() {
|
33
|
-
this.#styleEle = document.createElement('style');
|
34
|
-
this.#styleEle.id = 'style-mixin-overrides';
|
35
|
-
|
36
|
-
this.#styleEle.innerText = '* {}';
|
37
|
-
this.shadowRoot.prepend(this.#styleEle);
|
38
|
-
}
|
39
|
-
|
40
|
-
#updateAttrOverrideStyle(attrName, value) {
|
41
|
-
const style = this.#styleEle.sheet?.cssRules[0].style;
|
42
|
-
const varName = getCssVarName(
|
43
|
-
superclass.componentName,
|
44
|
-
attrName.replace(/^st-/, '')
|
45
|
-
);
|
46
|
-
|
47
|
-
if (value) style?.setProperty(varName, value);
|
48
|
-
else style?.removeProperty(varName);
|
49
|
-
}
|
50
|
-
|
51
|
-
#createComponentStyle() {
|
52
|
-
const themeStyle = document.createElement('style');
|
53
|
-
themeStyle.id = 'style-mixin-component';
|
54
|
-
themeStyle.innerHTML = createStyle(
|
55
|
-
superclass.componentName,
|
56
|
-
this.baseSelector,
|
57
|
-
mappings
|
58
|
-
);
|
59
|
-
this.shadowRoot.prepend(themeStyle);
|
60
|
-
}
|
61
|
-
|
62
|
-
#createComponentNestingStyle() {
|
63
|
-
// we need these selectors to be more specific from the theme selectors
|
64
|
-
// in order to do it, we are repeating the class name for specificity
|
65
|
-
const numOfClassNameSpecifier = 3;
|
66
|
-
|
67
|
-
const rootNode = this.shadowRoot.host.getRootNode();
|
68
|
-
const styleId = `${superclass.componentName}-style-mixin-component`;
|
69
|
-
|
70
|
-
const className = superclass.componentName;
|
71
|
-
this.shadowRoot.host.classList.add(className);
|
72
|
-
|
73
|
-
if (rootNode.querySelector(`style#${styleId}`)) return;
|
74
|
-
|
75
|
-
const themeStyle = document.createElement('style');
|
76
|
-
themeStyle.id = styleId;
|
77
|
-
themeStyle.innerHTML = createStyle(
|
78
|
-
superclass.componentName,
|
79
|
-
`${superclass.componentName}${Array(numOfClassNameSpecifier)
|
80
|
-
.fill(`.${className}`)
|
81
|
-
.join('')}`,
|
82
|
-
nestedMappings
|
83
|
-
);
|
84
|
-
|
85
|
-
// rootNode can be either a shadow DOM or a light DOM
|
86
|
-
if (rootNode.nodeName === '#document') {
|
87
|
-
rootNode.head.append(themeStyle);
|
88
|
-
} else {
|
89
|
-
rootNode.append(themeStyle);
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
attributeChangedCallback(attrName, oldValue, newValue) {
|
94
|
-
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
95
|
-
|
96
|
-
if (styleAttributes.includes(attrName)) {
|
97
|
-
this.#updateAttrOverrideStyle(attrName, newValue);
|
98
|
-
}
|
99
|
-
}
|
100
|
-
|
101
|
-
connectedCallback() {
|
102
|
-
super.connectedCallback?.();
|
103
|
-
if (this.shadowRoot.isConnected) {
|
104
|
-
this.#createComponentNestingStyle();
|
105
|
-
|
106
|
-
Array.from(this.attributes).forEach((attr) => {
|
107
|
-
if (styleAttributes.includes(attr.nodeName)) {
|
108
|
-
this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
|
109
|
-
}
|
110
|
-
});
|
111
|
-
}
|
112
|
-
}
|
113
|
-
};
|
114
|
-
};
|
@@ -1,103 +0,0 @@
|
|
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
|
-
document.createElement(nestingElementTagName, {
|
25
|
-
slot: nestingElementDestSlotName
|
26
|
-
});
|
27
|
-
|
28
|
-
let childObserver;
|
29
|
-
|
30
|
-
const getObserver = () => childObserver;
|
31
|
-
|
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;
|
55
|
-
|
56
|
-
if (!nestingElement && hasNewChildren) {
|
57
|
-
// if before there were no children and now there are children - insert
|
58
|
-
this.handleNestingLevelInsertion()
|
59
|
-
|
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
|
-
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
82
|
-
|
83
|
-
forwardAttrs(
|
84
|
-
this.shadowRoot.host,
|
85
|
-
this.shadowRoot.host.querySelector(nestingElementTagName),
|
86
|
-
forwardAttrOptions
|
87
|
-
);
|
88
|
-
}
|
89
|
-
|
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
|
-
};
|
103
|
-
};
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|