@descope/web-components-ui 1.0.55 → 1.0.57

package/src/componentsHelpers/createStyleMixin/index.js

@@ -3,107 +3,112 @@ 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];
+	(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);
 				}
+			}
 
-				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-/, '')
-					);
+			attributeChangedCallback(attrName, oldValue, newValue) {
+				super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-					if (value) style?.setProperty(varName, value);
-					else style?.removeProperty(varName);
+				if (styleAttributes.includes(attrName)) {
+					this.#updateAttrOverrideStyle(attrName, newValue);
 				}
-
-				#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)
-							}
-						});
-					}
+			}
+
+			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/index.js

@@ -1,5 +1,7 @@
 import './components/descope-button';
 import './components/descope-checkbox';
+import './components/descope-loader-linear';
+import './components/descope-loader-radial';
 import './components/descope-combo';
 import './components/descope-container';
 import './components/descope-date-picker';

package/src/theme/components/divider.js

@@ -18,6 +18,9 @@ const divider = {
 		[vars.flexDirection]: 'column',
 		[vars.minHeight]: '200px',
 		[vars.textWidth]: 'max-content'
+	},
+	_italic: {
+		[vars.fontStyle]: 'italic'
 	}
 };
 

package/src/theme/components/index.js

@@ -12,6 +12,7 @@ import text from './text';
 import link from './link';
 import divider from './divider';
 import passcode from './passcode';
+import { loaderRadial, loaderLinear } from './loader';
 
 export default {
 	button,
@@ -27,5 +28,7 @@ export default {
 	text,
 	link,
 	divider,
-	passcode
+	passcode,
+	loaderRadial,
+	loaderLinear
 };

package/src/theme/components/loader/index.js

@@ -0,0 +1,2 @@
+export { default as loaderLinear } from './loaderLinear';
+export { default as loaderRadial } from './loaderRadial';

package/src/theme/components/loader/loaderLinear.js

@@ -0,0 +1,49 @@
+import LoaderLinear from '../../../components/descope-loader-linear/LoaderLinear';
+import { getThemeRefs } from '../../../themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = LoaderLinear.cssVarList;
+
+const loaderLinear = {
+	[vars.display]: 'inline-block',
+	[vars.barColor]: globalRefs.colors.surface.contrast,
+	[vars.barWidth]: '20%',
+	[vars.surfaceColor]: globalRefs.colors.surface.main,
+	[vars.borderRadius]: '4px',
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.width]: '100%',
+	size: {
+		xs: {
+			[vars.height]: '6px'
+		},
+		sm: {
+			[vars.height]: '8px'
+		},
+		md: {
+			[vars.height]: '10px'
+		},
+		lg: {
+			[vars.height]: '12px'
+		},
+		xl: {
+			[vars.height]: '14px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars.barColor]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.barColor]: globalRefs.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars.display]: 'none'
+	}
+};
+
+export default loaderLinear;

package/src/theme/components/loader/loaderRadial.js

@@ -0,0 +1,62 @@
+import LoaderRadial from '../../../components/descope-loader-radial/LoaderRadial';
+import { getThemeRefs } from '../../../themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = LoaderRadial.cssVarList;
+
+const loaderRadial = {
+	[vars.display]: 'inline-block',
+	[vars.color]: globalRefs.colors.surface.contrast,
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.spinnerStyle]: 'solid',
+	[vars.spinnerWidth]: '4px',
+	[vars.spinnerRadius]: '50%',
+	[vars.spinnerTopColor]: 'currentColor',
+	[vars.spinnerBottomColor]: 'transparent',
+	[vars.spinnerRightColor]: 'currentColor',
+	[vars.spinnerLeftColor]: 'transparent',
+	size: {
+		xs: {
+			[vars.width]: '20px',
+			[vars.height]: '20px',
+			[vars.spinnerWidth]: '2px'
+		},
+		sm: {
+			[vars.width]: '30px',
+			[vars.height]: '30px',
+			[vars.spinnerWidth]: '3px'
+		},
+		md: {
+			[vars.width]: '40px',
+			[vars.height]: '40px',
+			[vars.spinnerWidth]: '4px'
+		},
+		lg: {
+			[vars.width]: '60px',
+			[vars.height]: '60px',
+			[vars.spinnerWidth]: '5px'
+		},
+		xl: {
+			[vars.width]: '80px',
+			[vars.height]: '80px',
+			[vars.spinnerWidth]: '6px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars.display]: 'none'
+	}
+};
+
+export default loaderRadial;

package/src/theme/components/textArea.js

@@ -15,10 +15,6 @@ const textArea = {
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
 
-	_borderOffset: {
-		[vars.outlineOffset]: '2px'
-	},
-
 	_bordered: {
 		[vars.borderColor]: globalRefs.colors.surface.main
 	},

package/src/theme/components/textField.js

@@ -45,10 +45,6 @@ export const textField = (vars) => ({
 	[vars.borderColor]: 'transparent',
 	[vars.borderRadius]: globalRefs.radius.sm,
 
-	_borderOffset: {
-		[vars.outlineOffset]: '2px'
-	},
-
 	_disabled: {
 		[vars.color]: globalRefs.colors.surface.dark,
 		[vars.placeholderColor]: globalRefs.colors.surface.light,

package/src/theme/globals.js

@@ -1,5 +1,6 @@
 import { getThemeRefs } from '../themeHelpers';
 import { genColors } from '../themeHelpers/processColors';
+import button from './components/button';
 
 export const colors = genColors({
 	surface: {