@descope/web-components-ui 1.0.66 → 1.0.68

package/src/components/descope-loader-linear/LoaderLinear.js

@@ -3,47 +3,42 @@ import {
 	draggableMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('loader-linear');
 
-class RawLoaderLinear extends DescopeBaseClass {
+class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
 	static get componentName() {
 		return componentName;
 	}
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				@keyframes tilt {
-					0% { transform: translateX(0); }
-					50% { transform: translateX(400%); }
-				}
-				:host {
-					position: relative;
-					display: inline-block
-				}
-				div::after {
-					content: '';
-					animation-name: tilt;
-					position: absolute;
-					left: 0;
-				}
 
-				:host > div {
-					width: 100%;
-				}
-			</style>
-			<div></div>
-		`;
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes tilt {
+				0% { transform: translateX(0); }
+				50% { transform: translateX(400%); }
+			}
+			:host {
+				position: relative;
+				display: inline-block
+			}
+			div::after {
+				content: '';
+				animation-name: tilt;
+				position: absolute;
+				left: 0;
+			}
 
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > div';
+			:host > div {
+				width: 100%;
+			}
+		</style>
+		<div></div>
+	`;
 	}
 }
 

package/src/components/descope-loader-radial/LoaderRadial.js

@@ -3,40 +3,32 @@ import {
 	draggableMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('loader-radial');
 
-class RawLoaderRadial extends DescopeBaseClass {
-	static get componentName() {
-		return componentName;
-	}
+class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				@keyframes spin {
-					0% { transform: rotate(0deg); }
-					100% { transform: rotate(360deg); }
-				}
-				:host {
-					position: relative;
-					display: inline-flex;
-				}
-				:host > div {
-					animation-name: spin;
-				}
-			</style>
-			<div></div>
-		`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
-		this.baseSelector = ':host > div';
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
 	}
 }
 

package/src/components/descope-logo/Logo.js

@@ -3,7 +3,7 @@ import {
 	draggableMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
@@ -12,23 +12,15 @@ export const componentName = getComponentName('logo');
 let style;
 const getStyle = () => style;
 
-class RawLogo extends DescopeBaseClass {
-	static get componentName() {
-		return componentName;
-	}
+class RawLogo extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			${getStyle()}
 		</style>
 		<div></div>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > div';
 	}
 }
 

package/src/components/descope-passcode/Passcode.js

@@ -38,21 +38,10 @@ const customMixin = (superclass) =>
 
 			this.proxyElement.appendChild(template.content.cloneNode(true));
 
-			// we want to control when the element is out of focus
-			// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
-			this.proxyElement._setFocused = () => { };
-
 			this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] })
 
-			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
-			this.inputElement.addEventListener('blur', (e) => {
-				// we do not want native blur events, only the ones that we are sending
-				if (!e.isTrusted){
-					this.proxyElement.validate();
-				}
-			});
 		}
 	};
 
@@ -89,6 +78,10 @@ const Passcode = compose(
 			display: inline-block;
     }
 
+		:host([readonly]) descope-passcode-internal > div {
+			pointer-events: none;
+		}
+
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -7,11 +7,10 @@ export const componentName = getComponentName('passcode-internal');
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
 		return [
-			...BaseInputClass.observedAttributes,
+			...(BaseInputClass.observedAttributes || []),
 			'disabled',
 			'bordered',
 			'size',
-			'readonly'
 		];
 	}
 
@@ -19,10 +18,12 @@ class PasscodeInternal extends BaseInputClass {
 		return componentName;
 	}
 
+	#boundHandleInvalid = this.#handleInvalid.bind(this)
+	#boundHandleValid = this.#handleValid.bind(this)
+	#boundHandleBlur = this.#handleBlur.bind(this)
+
 	constructor() {
 		super();
-		const template = document.createElement('template');
-
 		const inputs = [...Array(this.digits).keys()].map((idx) => `
 		<descope-text-field
 			st-width="35px"
@@ -32,14 +33,12 @@ class PasscodeInternal extends BaseInputClass {
 		></descope-text-field>
 	`)
 
-		template.innerHTML = `
+		this.innerHTML = `
 		<div>
 			${inputs.join('')}
 		</div>
 		`;
 
-		this.appendChild(template.content.cloneNode(true));
-
 		this.baseSelector = ':host > div';
 
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
@@ -67,15 +66,13 @@ class PasscodeInternal extends BaseInputClass {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	handleInputsInvalid() {
-		setTimeout(() => {
-			if (this.hasAttribute('invalid')) {
-				this.inputs.forEach(input => input.setAttribute('invalid', 'true'))
-			}
-		})
+	#handleInvalid() {
+		if (this.hasAttribute('invalid')) {
+			this.inputs.forEach(input => input.setAttribute('invalid', 'true'))
+		}
 	}
 
-	handleInputsValid() {
+	#handleValid() {
 		this.inputs.forEach(input => input.removeAttribute('invalid'))
 	}
 
@@ -91,17 +88,25 @@ class PasscodeInternal extends BaseInputClass {
 		}
 	};
 
-	handleFocus() {
-		this.inputs[0].focus();
+	onFocus(){
+		this.inputs[0].focus()
 	}
 
-	async connectedCallback() {
-		super.connectedCallback();
+	connectedCallback() {
+		super.connectedCallback?.();
 
 		this.initInputs()
 
-		this.addEventListener('invalid', this.handleInputsInvalid)
-		this.addEventListener('valid', this.handleInputsValid)
+		this.addEventListener('invalid', this.#boundHandleInvalid)
+		this.addEventListener('valid', this.#boundHandleValid)
+		this.addEventListener('blur', this.#boundHandleBlur)
+	}
+
+	disconnectedCallback() {
+		super.connectedCallback?.();
+		this.removeEventListener('invalid', this.#boundHandleInvalid)
+		this.removeEventListener('valid', this.#boundHandleValid)
+		this.removeEventListener('blur', this.#boundHandleBlur)
 	}
 
 	getInputIdx(inputEle) {
@@ -125,66 +130,49 @@ class PasscodeInternal extends BaseInputClass {
 			currentInput.value = charArr[i] ?? '';
 
 			const nextInput = this.getNextInput(currentInput);
+
 			if (nextInput === currentInput) break;
 			currentInput = nextInput;
 		}
 
-		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+		focusElement(currentInput);
 	};
 
-	handleBlur() {
-		this.handleInputsInvalid()
+	#handleBlur() {
+		this.#handleInvalid()
 	}
 
 	initInputs() {
 		this.inputs.forEach((input) => {
-
-			// in order to simulate blur on the input
-			// we are checking if focus on one of the digits happened immediately after blur on another digit
-			// if not, the component is no longer focused and we should simulate blur
-			input.addEventListener('blur', (e) => {
-				e.stopPropagation()
-				const timerId = setTimeout(() => {
-					this.dispatchBlur()
-				});
-
-				this.inputs.forEach((ele) =>
-					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
-				);
-			})
-
 			input.oninput = (e) => {
-				e.stopPropagation()
 				const charArr = getSanitizedCharacters(input.value);
 
-				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
+				if (!charArr.length) {
+					// if we got an invalid value we want to clear the input
+					input.value = '';
+					if (e.data === null) {
+						// if the user deleted the char, we want to focus the prev digit
+						focusElement(this.getPrevInput(input));
+					}
+				}
 				else this.fillDigits(charArr, input);
-
-				this.dispatchInput()
 			};
 
 			input.onkeydown = ({ key }) => {
+				// when user deletes a digit, we want to focus the previous digit
 				if (key === 'Backspace') {
-					input.value = '';
-
-					// if the user deleted the digit we want to focus the previous digit
-					const prevInput = this.getPrevInput(input)
-
-					!prevInput.hasAttribute('focused') && setTimeout(() => {
-						focusElement(prevInput);
+					setTimeout(() => {
+						focusElement(this.getPrevInput(input));
 					});
-
-					this.dispatchInput()
 				} else if (key.match(/^(\d)$/g)) { // if input is a digit
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
-
 			};
 		})
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
-		super.attributeChangedCallback(attrName, oldValue, newValue)
+		super.attributeChangedCallback?.(attrName, oldValue, newValue)
 
 		if (oldValue !== newValue) {
 			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {

package/src/components/descope-text/Text.js

@@ -3,20 +3,17 @@ import {
 	draggableMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text');
 
-class RawText extends DescopeBaseClass {
-	static get componentName() {
-		return componentName;
-	}
+class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
 			:host {
 				display: inline-block;
@@ -28,11 +25,6 @@ class RawText extends DescopeBaseClass {
 		</style>
 		<slot></slot>
 		`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > slot';
 	}
 }
 

package/src/helpers/index.js

@@ -12,3 +12,5 @@ export const compose = (...fns) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
 export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+export const isFunction = (maybeFunc) => typeof maybeFunc === 'function'

package/src/helpers/mixinsHelpers.js

@@ -0,0 +1,18 @@
+// move create event to here
+
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something')
+export function createDispatchEvent(eventName) {
+  this[`on${eventName}`]?.(); // in case we got an event callback as property
+  this.dispatchEvent(new Event(eventName));
+}
+
+// usage example:
+// #removeChangeListener = createEventListener.call(this,'change', this.onChange)
+export function createEventListener(event, callback) {
+  const boundCallback = callback.bind(this);
+
+  this.addEventListener(event, boundCallback);
+
+  return () => this.removeEventListener(event, boundCallback)
+}

package/src/mixins/changeMixin.js

@@ -0,0 +1,47 @@
+import { createDispatchEvent } from "../helpers/mixinsHelpers";
+
+export const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
+
+  #boundedHandleChange
+  #boundedHandleBlur  
+  
+  #removeChangeListener
+  #removeBlurListener
+
+  #dispatchChange = createDispatchEvent.bind(this, 'change')
+
+  constructor() {
+    super();
+
+    this.#boundedHandleChange = this.#handleChange.bind(this);
+    this.#boundedHandleBlur = this.#handleBlur.bind(this);
+  }
+
+  #handleChange(e) {
+    // we want to listen only to browser events 
+    // and not to events we are dispatching
+    if (e.isTrusted) {
+      // we want to control the change events that dispatched by the component
+      // so we are stopping propagation and handling it in handleBlur
+      e.stopPropagation()
+    }
+  }
+
+  #handleBlur() {
+    // on blur, we want to dispatch a change event
+    this.#dispatchChange()
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.#removeChangeListener = addEventListener.bind()
+    this.addEventListener('change', this.#boundedHandleChange, true)
+    this.addEventListener('blur', this.#boundedHandleBlur)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('change', this.#boundedHandleChange)
+    this.removeEventListener('blur', this.#boundedHandleBlur)
+  }
+}

package/src/mixins/componentNameValidationMixin.js

@@ -1,5 +1,5 @@
 export const componentNameValidationMixin = (superclass) =>
-	class DraggableMixinClass extends superclass {
+	class ComponentNameValidationMixinClass extends superclass {
 		#checkComponentName() {
 			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
 

package/src/mixins/createProxy.js

@@ -1,7 +1,6 @@
-import { DescopeBaseClass } from '../baseClasses/DescopeBaseClass';
-import { compose } from '../helpers';
+import { createBaseClass } from '../baseClasses/createBaseClass';
+import { isFunction } from '../helpers';
 import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
-import { hoverableMixin } from './hoverableMixin';
 
 export const createProxy = ({
 	componentName,
@@ -20,38 +19,39 @@ export const createProxy = ({
 		</${wrappedEleName}>
 	`;
 
-	class ProxyElement extends DescopeBaseClass {
-		static get componentName() {
-			return componentName;
-		}
-
+	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
 		constructor() {
 			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.baseSelector = wrappedEleName;
 			this.shadowRoot.getElementById('create-proxy').innerHTML =
-				typeof style === 'function' ? style() : style;
+				isFunction(style) ? style() : style;
+		}
+
+		#boundOnFocus = this.#onFocus.bind(this);
+
+		// we want to focus on the proxy element when focusing our WCP
+		#onFocus() {
+			this.proxyElement.focus();
 		}
 
+		focus = this.#onFocus
+
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 
+				this.addEventListener('focus', this.#boundOnFocus);
+
 				// this is needed for components that uses props, such as combo box
 				forwardProps(this.hostElement, this.proxyElement, includeForwardProps)
 
-				this.setAttribute('tabindex', '0');
-
-				// we want to focus on the proxy element when focusing our WC
-				this.addEventListener('focus', () => {
-					this.proxyElement.focus();
-				});
-
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
-				// which causes faulty behaviour.
+				// which causes faulty behavior.
+				// we need this to happen only when the proxy component is in the light DOM, 
+				// otherwise it will focus the nested proxy element
 				this.proxyElement.onkeydown = (e) => {
-					if (e.shiftKey && e.keyCode === 9) {
+					if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
 						this.removeAttribute('tabindex');
 						// We want to defer the action of setting the tab index back
 						// so it will happen after focusing the previous element
@@ -59,10 +59,6 @@ export const createProxy = ({
 					}
 				};
 
-				// sync events
-				this.addEventListener = (...args) =>
-					this.proxyElement.addEventListener(...args);
-
 				syncAttrs(this.proxyElement, this.hostElement, {
 					excludeAttrs: excludeAttrsSync,
 					includeAttrs: includeAttrsSync
@@ -70,16 +66,18 @@ export const createProxy = ({
 			}
 		}
 
-		disconnectedCallback() {
-			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
-		}
-
 		attributeChangedCallback() {
 			if (!this.proxyElement) {
 				return;
 			}
 		}
+
+		disconnectedCallback() {
+			super.disconnectedCallback?.()
+
+			this.removeEventListener('focus', this.#boundOnFocus);
+		}
 	}
 
-	return compose(hoverableMixin())(ProxyElement);
+	return ProxyClass;
 };

package/src/mixins/createStyleMixin/helpers.js

@@ -1,4 +1,4 @@
-import { kebabCase } from '../../helpers';
+import { isFunction, kebabCase } from '../../helpers';
 import { getCssVarName } from '../../helpers/componentHelpers';
 
 const createCssVarFallback = (first, ...rest) =>
@@ -8,7 +8,7 @@ const createCssSelector = (
 	baseSelector = '',
 	relativeSelectorOrSelectorFn = ''
 ) =>
-	typeof relativeSelectorOrSelectorFn === 'function'
+	isFunction(relativeSelectorOrSelectorFn)
 		? relativeSelectorOrSelectorFn(baseSelector)
 		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
 			? ` ${relativeSelectorOrSelectorFn}`
@@ -65,7 +65,7 @@ export const createStyle = (componentName, baseSelector, mappings) => {
 			({ selector: relativeSelectorOrSelectorFn, property }) => {
 				style.add(
 					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-					property,
+					isFunction(property) ? property() : property,
 					createCssVarFallback(cssVarName)
 				);
 			}

package/src/mixins/createStyleMixin/index.js

@@ -64,7 +64,7 @@ export const createStyleMixin =
 				this.#onComponentThemeChange()
 			}
 
-			#createAttrOverrideStyle() {
+			#createOverridesStyle() {
 				this.#overrideStyleEle = document.createElement('style');
 				this.#overrideStyleEle.id = 'style-mixin-overrides';
 
@@ -74,7 +74,7 @@ export const createStyleMixin =
 				this.#rootElement.append(this.#overrideStyleEle);
 			}
 
-			#setAttrOverrideStyle(attrName, value) {
+			#setAttrOverride(attrName, value) {
 				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
 				if (!style) return;
 
@@ -87,10 +87,10 @@ export const createStyleMixin =
 				else style?.removeProperty(varName);
 			}
 
-			#updateOverrideStyle(attrs = []) {
+			#updateOverridesStyle(attrs = []) {
 				for (const attr of attrs) {
 					if (this.#styleAttributes.includes(attr)) {
-						this.#setAttrOverrideStyle(attr, this.getAttribute(attr));
+						this.#setAttrOverride(attr, this.getAttribute(attr));
 					}
 				}
 
@@ -98,7 +98,7 @@ export const createStyleMixin =
 				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
 			}
 
-			#createComponentStyle() {
+			#createMappingStyle() {
 				const themeStyle = document.createElement('style');
 				themeStyle.id = 'style-mixin-mappings'
 				themeStyle.innerHTML = createStyle(
@@ -119,13 +119,14 @@ export const createStyleMixin =
 
 					this.#addClassName(superclass.componentName)
 
-					this.#createComponentStyle();
+					// TODO: we should do everything we can on the constructor
+					// when dragging & dropping these styles are created over & over
+					this.#createMappingStyle();
 					this.#createComponentTheme();
-					this.#createAttrOverrideStyle();
+					this.#createOverridesStyle();
 
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
-					observeAttributes(this, this.#updateOverrideStyle.bind(this), {})
-
+					observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
 				}
 			}