@descope/web-components-ui 1.0.51 → 1.0.52

package/src/componentsHelpers/createStyleMixin/index.js

@@ -2,77 +2,108 @@ import { getCssVarName, kebabCaseJoin } from '../../helpers';
 import { createStyle, createCssVarsList } from './helpers';
 
 export const createStyleMixin =
-	({ mappings = {} }) =>
-	(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);
-			}
-
-			#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);
-			}
-
-			attributeChangedCallback(attrName, oldValue, newValue) {
-				super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-				if (styleAttributes.includes(attrName)) {
-					this.#updateAttrOverrideStyle(attrName, newValue);
+	({ 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];
 				}
-			}
-
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        Array.from(this.attributes).forEach(attr => {
-          if (styleAttributes.includes(attr.nodeName)) {
-            this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
-          }
-        });
-      }
-    }
+
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, mappings);
+				}
+
+				#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/inputMixin.js

@@ -54,40 +54,40 @@ export const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 			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);
 			}
 
-			const input =
-				this.baseEle.querySelector('input') ||
-				this.baseEle.querySelector('textarea');
-			if (!input) throw Error('no input was found');
+			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, input, 'value');
-			this.setSelectionRange = input.setSelectionRange.bind(input);
+			propertyObserver(this, this.inputElement, 'value');
+			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-			this.validity = input.validity;
+			this.validity = this.inputElement.validity;
 
 			this.setValidity = () => {
-				this.#internals.setValidity(input.validity, input.validationMessage);
+				this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
 			};
 
-			input.oninput = () => {
-				this.value = input.value;
+			this.inputElement.oninput = () => {
+				this.value = this.inputElement.value;
 				this.setValidity();
 			};
 
 			this.onfocus = () => {
-				setTimeout(() => input.reportValidity(), 0);
+				setTimeout(() => this.inputElement.reportValidity(), 0);
 				this.validate();
 			};
 
-			input.oninvalid = () => {
+			this.inputElement.oninvalid = () => {
 				this.validate();
 			};
 		}

package/src/theme/components/index.js

@@ -9,6 +9,7 @@ import switchToggle from './switchToggle';
 import container from './container';
 import logo from './logo';
 import text from './text';
+import passcode from './passcode';
 
 export default {
 	button,
@@ -21,5 +22,6 @@ export default {
 	switchToggle,
 	container,
 	logo,
-	text
+	text,
+	passcode
 };

package/src/theme/components/passcode.js

@@ -0,0 +1,8 @@
+import Passcode from '../../components/descope-passcode/Passcode';
+import { textField } from './textField';
+
+const passcode = {
+	...textField(Passcode.cssVarList),
+};
+
+export default passcode;