@descope/web-components-ui 1.0.62 → 1.0.64

package/src/theme/components/textField.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../themeHelpers';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import TextField from '../../components/descope-text-field/TextField';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/globals.js

@@ -1,11 +1,11 @@
-import { getThemeRefs } from '../themeHelpers';
-import { genColors } from '../themeHelpers/processColors';
+import { getThemeRefs } from '../helpers/themeHelpers';
+import { genColors } from '../helpers/themeHelpers/colorsHelpers';
 
 export const colors = genColors({
 	surface: {
 		main: 'lightgray',
 		light: '#fff',
-		dark: '#000'
+		dark: '#000',
 	},
 	primary: '#0082B5',
 	secondary: '#7D14EB',

package/dist/umd/442.js

@@ -1 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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})}}}}}]);

package/dist/umd/descope-combo-index-js.js

@@ -1 +0,0 @@
-"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)}}]);

package/src/components/descope-combo/index.js

@@ -1,27 +0,0 @@
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
-import { getComponentName } from '../../componentsHelpers';
-import '../descope-button';
-import '../descope-text-field';
-
-const template = document.createElement('template');
-
-const componentName = getComponentName('combo');
-
-template.innerHTML = `
-  <descope-button></descope-button>
-  <descope-text-field></descope-text-field>
-`;
-
-class Combo extends DescopeBaseClass {
-	constructor() {
-		super();
-
-		this.attachShadow({ mode: 'open' }).appendChild(
-			template.content.cloneNode(true)
-		);
-	}
-}
-
-customElements.define(componentName, Combo);
-
-export { Combo };

package/src/componentsHelpers/compose.js

@@ -1,3 +0,0 @@
-export default (...fns) =>
-(val) =>
-  fns.reduceRight((res, fn) => fn(res), val);

package/src/componentsHelpers/createStyleMixin/index.js

@@ -1,114 +0,0 @@
-import { getCssVarName, kebabCaseJoin } from '../../helpers';
-import { createStyle, createCssVarsList } from './helpers';
-
-export const createStyleMixin =
-	({ mappings = {}, nestedMappings = {} }) =>
-	(superclass) => {
-		const styleAttributes = Object.keys(mappings).map((key) =>
-			kebabCaseJoin('st', key)
-		);
-		return class CustomStyleMixinClass extends superclass {
-			static get observedAttributes() {
-				const superAttrs = superclass.observedAttributes || [];
-				return [...superAttrs, ...styleAttributes];
-			}
-
-			static get cssVarList() {
-				return createCssVarsList(superclass.componentName, {
-					...mappings,
-					...nestedMappings
-				});
-			}
-
-			#styleEle = null;
-
-			constructor() {
-				super();
-
-				this.#createComponentStyle();
-				this.#createAttrOverrideStyle();
-			}
-
-			#createAttrOverrideStyle() {
-				this.#styleEle = document.createElement('style');
-				this.#styleEle.id = 'style-mixin-overrides';
-
-				this.#styleEle.innerText = '* {}';
-				this.shadowRoot.prepend(this.#styleEle);
-			}
-
-			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.sheet?.cssRules[0].style;
-				const varName = getCssVarName(
-					superclass.componentName,
-					attrName.replace(/^st-/, '')
-				);
-
-				if (value) style?.setProperty(varName, value);
-				else style?.removeProperty(varName);
-			}
-
-			#createComponentStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-component';
-				themeStyle.innerHTML = createStyle(
-					superclass.componentName,
-					this.baseSelector,
-					mappings
-				);
-				this.shadowRoot.prepend(themeStyle);
-			}
-
-			#createComponentNestingStyle() {
-				// we need these selectors to be more specific from the theme selectors
-				// in order to do it, we are repeating the class name for specificity
-				const numOfClassNameSpecifier = 3;
-
-				const rootNode = this.shadowRoot.host.getRootNode();
-				const styleId = `${superclass.componentName}-style-mixin-component`;
-
-				const className = superclass.componentName;
-				this.shadowRoot.host.classList.add(className);
-
-				if (rootNode.querySelector(`style#${styleId}`)) return;
-
-				const themeStyle = document.createElement('style');
-				themeStyle.id = styleId;
-				themeStyle.innerHTML = createStyle(
-					superclass.componentName,
-					`${superclass.componentName}${Array(numOfClassNameSpecifier)
-						.fill(`.${className}`)
-						.join('')}`,
-					nestedMappings
-				);
-
-				// rootNode can be either a shadow DOM or a light DOM
-				if (rootNode.nodeName === '#document') {
-					rootNode.head.append(themeStyle);
-				} else {
-					rootNode.append(themeStyle);
-				}
-			}
-
-			attributeChangedCallback(attrName, oldValue, newValue) {
-				super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-				if (styleAttributes.includes(attrName)) {
-					this.#updateAttrOverrideStyle(attrName, newValue);
-				}
-			}
-
-			connectedCallback() {
-				super.connectedCallback?.();
-				if (this.shadowRoot.isConnected) {
-					this.#createComponentNestingStyle();
-
-					Array.from(this.attributes).forEach((attr) => {
-						if (styleAttributes.includes(attr.nodeName)) {
-							this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-						}
-					});
-				}
-			}
-		};
-	};

package/src/componentsHelpers/enforceNestingElementsStylesMixin.js

@@ -1,103 +0,0 @@
-import { forwardAttrs } from '../componentsHelpers/createProxy/helpers';
-
-const getChildObserver = (callback) => {
-	return new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				callback(mutation);
-			}
-		}
-	});
-};
-
-const insertNestingLevel = (srcEle, nestingEle) => {
-	nestingEle.append(...srcEle.childNodes);
-	srcEle.appendChild(nestingEle);
-};
-
-// adds a nesting element to the component, and move all existing children
-// to be under the nesting element
-export const enforceNestingElementsStylesMixin =
-	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
-		(superclass) => {
-			const getChildNodeEle = () =>
-				document.createElement(nestingElementTagName, {
-					slot: nestingElementDestSlotName
-				});
-
-			let childObserver;
-
-			const getObserver = () => childObserver;
-
-			let isMutating = false;
-
-			const filterNestingElement = (node) => node.localName !== nestingElementTagName
-			return class EnforceNestingElementsStylesMixinClass extends superclass {
-				constructor() {
-					super();
-
-					const childObserverCallback = (mutation, observer) => {
-
-						// we are going to change the DOM, so we need to skip the upcoming mutations
-						if (isMutating) return;
-
-						isMutating = true
-
-						const { addedNodes, removedNodes } = mutation
-
-						const nestingElement = this.shadowRoot.host.querySelector(nestingElementTagName);
-						const hasNewChildren = Array.from(addedNodes)
-							.filter(filterNestingElement)
-							.length > 0;
-						const hasRemovedChildren = Array.from(removedNodes)
-							.filter(filterNestingElement)
-							.length > 0;
-
-						if (!nestingElement && hasNewChildren) {
-							// if before there were no children and now there are children - insert
-							this.handleNestingLevelInsertion()
-
-						} else if (nestingElement && hasNewChildren) {
-							// if children existed, and they changed -
-							// we need to update (move) the new children into
-							// descope-text and remove previous children
-							nestingElement.replaceChildren(...addedNodes)
-						}
-						else if (nestingElement && !hasNewChildren && hasRemovedChildren) {
-							// 	// if children existed and now there are none -
-							// 	// we need to remove descope-text completely
-							nestingElement.remove();
-						}
-
-						setTimeout(() => {
-							isMutating = false
-						})
-					};
-
-					childObserver = getChildObserver(childObserverCallback);
-				}
-
-				handleNestingLevelInsertion() {
-					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-
-					forwardAttrs(
-						this.shadowRoot.host,
-						this.shadowRoot.host.querySelector(nestingElementTagName),
-						forwardAttrOptions
-					);
-				}
-
-				connectedCallback() {
-					super.connectedCallback?.();
-
-					if (this.shadowRoot.host.childNodes.length > 0) {
-						// on the first render - we want to move all component's children to be under descope-text
-						this.handleNestingLevelInsertion()
-					}
-
-					getObserver().observe(this.shadowRoot.host, {
-						childList: true
-					});
-				}
-			};
-		};