@descope/web-components-ui 1.0.50 → 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/index.js

@@ -7,6 +7,7 @@ import './components/descope-password-field';
 import './components/descope-text-area';
 import './components/descope-date-picker';
 import './components/descope-container';
+import './components/descope-text';
 
 export {
 	globalsThemeToStyle,

package/src/theme/components/index.js

@@ -8,6 +8,8 @@ import checkbox from './checkbox';
 import switchToggle from './switchToggle';
 import container from './container';
 import logo from './logo';
+import text from './text';
+import passcode from './passcode';
 
 export default {
 	button,
@@ -19,5 +21,7 @@ export default {
 	checkbox,
 	switchToggle,
 	container,
-	logo
+	logo,
+	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;

package/src/theme/components/text.js

@@ -0,0 +1,79 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../themeHelpers';
+import Text from '../../components/descope-text/Text';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = Text.cssVarList;
+
+const text = {
+	[vars.lineHeight]: '1em',
+	[vars.display]: 'inline-block',
+	[vars.textAlign]: 'left',
+	[vars.color]: globalRefs.colors.surface.dark,
+	variant: {
+		h1: {
+			[vars.fontSize]: globalRefs.typography.h1.size,
+			[vars.fontWeight]: globalRefs.typography.h1.weight,
+			[vars.fontFamily]: globalRefs.typography.h1.font
+		},
+		h2: {
+			[vars.fontSize]: globalRefs.typography.h2.size,
+			[vars.fontWeight]: globalRefs.typography.h2.weight,
+			[vars.fontFamily]: globalRefs.typography.h2.font
+		},
+		h3: {
+			[vars.fontSize]: globalRefs.typography.h3.size,
+			[vars.fontWeight]: globalRefs.typography.h3.weight,
+			[vars.fontFamily]: globalRefs.typography.h3.font
+		},
+		subtitle1: {
+			[vars.fontSize]: globalRefs.typography.subtitle1.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle1.font
+		},
+		subtitle2: {
+			[vars.fontSize]: globalRefs.typography.subtitle2.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle2.font
+		},
+		body1: {
+			[vars.fontSize]: globalRefs.typography.body1.size,
+			[vars.fontWeight]: globalRefs.typography.body1.weight,
+			[vars.fontFamily]: globalRefs.typography.body1.font
+		},
+		body2: {
+			[vars.fontSize]: globalRefs.typography.body2.size,
+			[vars.fontWeight]: globalRefs.typography.body2.weight,
+			[vars.fontFamily]: globalRefs.typography.body2.font
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		},
+		error: {
+			[vars.color]: globalRefs.colors.error.main
+		},
+		success: {
+			[vars.color]: globalRefs.colors.success.main
+		}
+	},
+	textAlign: {
+		right: { [vars.textAlign]: 'right' },
+		left: { [vars.textAlign]: 'left' },
+		center: { [vars.textAlign]: 'center' }
+	},
+	_fullWidth: {
+		[vars.width]: '100%',
+		[vars.display]: 'block'
+	},
+	_italic: {
+		[vars.fontStyle]: 'italic'
+	}
+};
+
+export default text;

package/src/theme/globals.js

@@ -1,3 +1,4 @@
+import { getThemeRefs } from '../themeHelpers';
 import { genColors } from '../themeHelpers/processColors';
 
 export const colors = genColors({
@@ -12,21 +13,47 @@ export const colors = genColors({
 	error: 'red'
 });
 
+const fonts = {
+	font1: ['Roboto', 'sans-serif'],
+	font2: ['Oswald', 'serif']
+};
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
 const typography = {
 	h1: {
-		font: ['Courier New', 'Arial', 'sans-serif'],
-		weight: '700',
+		font: fontsRef.font1,
+		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '500',
+		font: fontsRef.font1,
+		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '300',
+		font: fontsRef.font1,
+		weight: '600',
 		size: '28px'
+	},
+	subtitle1: {
+		font: fontsRef.font2,
+		weight: '500',
+		size: '22px'
+	},
+	subtitle2: {
+		font: fontsRef.font2,
+		weight: '400',
+		size: '20px'
+	},
+	body1: {
+		font: fontsRef.font1,
+		weight: '300',
+		size: '16px'
+	},
+	body2: {
+		font: fontsRef.font1,
+		weight: '200',
+		size: '14px'
 	}
 };
 
@@ -51,20 +78,20 @@ const radius = {
 };
 
 const shadow = {
-		wide: {
-			sm: '0 2px 3px -0.5px',
-			md: '0 4px 6px -1px',
-			lg: '0 10px 15px -3px',
-			xl: '0 20px 25px -5px',
-			'2xl': '0 25px 50px -12px',
-		},
-		narrow: {
-			sm: '0 1px 2px -1px',
-			md: '0 2px 4px -2px',
-			lg: '0 4px 6px -4px',
-			xl: '0 8px 10px -6px',
-			'2xl': '0 16px 16px -8px',
-		}
+	wide: {
+		sm: '0 2px 3px -0.5px',
+		md: '0 4px 6px -1px',
+		lg: '0 10px 15px -3px',
+		xl: '0 20px 25px -5px',
+		'2xl': '0 25px 50px -12px'
+	},
+	narrow: {
+		sm: '0 1px 2px -1px',
+		md: '0 2px 4px -2px',
+		lg: '0 4px 6px -4px',
+		xl: '0 8px 10px -6px',
+		'2xl': '0 16px 16px -8px'
+	}
 };
 
 export default {
@@ -73,5 +100,6 @@ export default {
 	spacing,
 	border,
 	radius,
-	shadow
+	shadow,
+	fonts
 };