@descope/web-components-ui 1.0.61 → 1.0.63

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);
@@ -63,7 +63,7 @@ export const textField = (vars) => ({
 		[vars.borderColor]: globalRefs.colors.surface.main
 	},
 
-	_hasErrorMessage: {
+	_invalid: {
 		[vars.borderColor]: globalRefs.colors.error.main,
 		[vars.color]: globalRefs.colors.error.main,
 		[vars.placeholderColor]: globalRefs.colors.error.light

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/832.js

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

package/dist/umd/942.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[942],{4942:(o,t,s)=>{s.d(t,{s:()=>c});var e=s(9201);const h=(o,t)=>{t.append(...o.childNodes),o.appendChild(t)},c=({nestingElementTagName:o,nestingElementDestSlotName:t,forwardAttrOptions:s})=>c=>{const d=()=>Object.assign(document.createElement(o),{slot:t});let i;const a=()=>i;return class extends c{constructor(){var t;super(),t=()=>{a().disconnect(this.shadowRoot.host);const t=this.shadowRoot.host.querySelector(o),c=this.shadowRoot.host.childNodes.length>0;!t&&c?h(this.shadowRoot.host,d()):t&&c?(this.shadowRoot.host.querySelector(child).remove(),h(this.shadowRoot.host,d())):t&&!c&&this.shadowRoot.host.querySelector(child).remove(),this.shadowRoot.host.querySelector(o)&&(0,e.oP)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s),a().observe(this.shadowRoot.host,{childList:!0})},i=new MutationObserver((o=>{for(const s of o)"childList"===s.type&&t()}))}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.host.childNodes.length>0&&(h(this.shadowRoot.host,d()),(0,e.oP)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s)),a().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(832);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/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,95 +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 = () =>
-			Object.assign(document.createElement(nestingElementTagName), {
-				slot: nestingElementDestSlotName
-			});
-
-		let childObserver;
-		
-		const getObserver = () => childObserver;
-
-		return class EnforceNestingElementsStylesMixinClass extends superclass {
-			constructor() {
-				super();
-
-				const childObserverCallback = () => {
-					// we are going to change the DOM, so we need to disconnect the observer before
-					// and reconnect it after the child component is added
-					getObserver().disconnect(this.shadowRoot.host);
-
-					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
-					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
-
-					if (!isNestingElementExist && hasNewChildren) {
-						// if before there were no children and now there are children - insert
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					} else if (isNestingElementExist && hasNewChildren) {
-						// if children existed, and they changed -
-						// we need to update (move) the new children into
-						// descope-text and remove previous children
-						this.shadowRoot.host.querySelector(child).remove();
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					}
-					else if (isNestingElementExist && !hasNewChildren) {
-						// if children existed and now there are none -
-						// we need to remove descope-text completely
-						this.shadowRoot.host.querySelector(child).remove();
-					}
-
-					// we need a new observer, because we remove the nesting element
-					this.shadowRoot.host.querySelector(nestingElementTagName) &&
-						forwardAttrs(
-							this.shadowRoot.host,
-							this.shadowRoot.host.querySelector(nestingElementTagName),
-							forwardAttrOptions
-						);
-
-						getObserver().observe(this.shadowRoot.host, {
-						childList: true
-					});
-				};
-
-				childObserver = getChildObserver(childObserverCallback);
-			}
-
-			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
-					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-
-					forwardAttrs(
-						this.shadowRoot.host,
-						this.shadowRoot.host.querySelector(nestingElementTagName),
-						forwardAttrOptions
-					);
-				}
-
-				getObserver().observe(this.shadowRoot.host, {
-					childList: true
-				});
-			}
-		};
-	};

package/src/componentsHelpers/index.js

@@ -1,15 +0,0 @@
-import { DESCOPE_PREFIX } from '../constants';
-import { kebabCaseJoin } from '../helpers';
-
-export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
-
-export const compose =
-	(...fns) =>
-	(val) =>
-		fns.reduceRight((res, fn) => fn(res), val);
-
-export { createStyleMixin } from './createStyleMixin';
-export { draggableMixin } from './draggableMixin';
-export { createProxy } from './createProxy';
-export { inputMixin } from './inputMixin';
-export { componentNameValidationMixin } from './componentNameValidationMixin';

package/src/componentsHelpers/inputMixin.js

@@ -1,94 +0,0 @@
-const attrs = {
-	valueMissing: 'data-errormessage-value-missing',
-	patternMismatch: 'data-errormessage-pattern-mismatch'
-};
-
-const errorAttrs = ['invalid', 'has-error-message'];
-
-const propertyObserver = (src, target, property) => {
-	Object.defineProperty(src, property, {
-		set: function (v) {
-			return (target[property] = v);
-		},
-		get: function () {
-			return target[property];
-		},
-		configurable: true
-	});
-};
-
-export const inputMixin = (superclass) =>
-	class InputMixinClass extends superclass {
-		static get formAssociated() {
-			return true;
-		}
-
-		#internals;
-
-		constructor() {
-			super();
-
-			this.#internals = this.attachInternals();
-		}
-
-		formAssociatedCallback() {
-			this.setValidity?.();
-		}
-
-		setValidationAttribute(attr) {
-			const validationAttr = this.getAttribute(attr);
-			if (validationAttr) {
-				this.proxyElement.setAttribute('error-message', validationAttr);
-			}
-			// normalize vaadin error attributes to have a boolean value
-			errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
-		}
-
-		validate() {
-			const { valueMissing, patternMismatch, typeMismatch } = this.validity;
-			if (valueMissing) {
-				this.setValidationAttribute(attrs.valueMissing);
-			} else if (typeMismatch || patternMismatch) {
-				this.setValidationAttribute(attrs.patternMismatch);
-			}
-		}
-
-		connectedCallback() {
-			super.connectedCallback?.();
-
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
-
-			// this is needed in order to make sure the form input validation is working
-			if (!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]
-			if (!this.inputElement) throw Error('no input was found');
-
-			// sync properties
-			propertyObserver(this, this.inputElement, 'value');
-			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
-
-			this.validity = this.inputElement.validity;
-
-			this.setValidity = () => {
-				this.#internals.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();
-			};
-		}
-	};