@descope/web-components-ui 1.0.62 → 1.0.63

package/src/components/descope-divider/Divider.js

@@ -1,14 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
-import Text from '../descope-text/Text';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends DescopeBaseClass {
@@ -17,33 +14,51 @@ class RawDivider extends DescopeBaseClass {
 	}
 	constructor() {
 		super();
+
 		const template = document.createElement('template');
 		template.innerHTML = `
 			<style>
 				:host > div {
 					display: flex;
 					height: 100%;
+					width: 100%;
 				}
 				:host > div::before,
 				:host > div::after {
 					content: '';
 					flex-grow: 1;
-					width: 100%;
 				}
-				::slotted(*) {
+
+				descope-text {
 					flex-grow: 0;
 					flex-shrink: 0;
 				}
+
+				:host(:empty) descope-text {
+					display: none;
+				}
+
+				:host([vertical="true"]) div {
+					width: fit-content;
+				}
+
 			</style>
 			<div>
-				<slot></slot>
-				<slot name="text"></slot>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
 			</div>
 		`;
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
 		this.baseSelector = ':host > div';
+
+		this.textComponent = this.shadowRoot.querySelector('descope-text');
+
+		forwardAttrs(this, this.textComponent, {
+			includeAttrs: ['mode', 'variant', 'italic']
+		})
 	}
 }
 
@@ -51,39 +66,29 @@ const selectors = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
-	slotted: { selector: () => '::slotted(*)' }
+	text: { selector: 'descope-text' },
+	host: { selector: () => ':host' },
 };
 
-const { root, before, after, slotted } = selectors;
+const { root, before, after, text, host } = selectors;
 
 const Divider = compose(
-	enforceNestingElementsStylesMixin({
-		nestingElementTagName: 'descope-text',
-		nestingElementDestSlotName: 'text',
-		forwardAttrOptions: {
-			includeAttrs: ['mode', 'variant'],
-			excludeAttrs: []
-		}
-	}),
 	createStyleMixin({
 		mappings: {
+			maxTextWidth: { ...text, property: 'max-width' },
 			minHeight: root,
 			alignItems: root,
 			alignSelf: root,
 			flexDirection: root,
-			padding: slotted,
-			width: matchHostStyle(),
-			height: [before, after],
+			textPadding: {...text, property: 'padding'},
+			width: host,
+			padding: host,
 			backgroundColor: [before, after],
 			opacity: [before, after],
-			textWidth: { ...slotted, property: 'width' }
+			textWidth: { ...text, property: 'width' },
+			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
+			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
 		},
-		nestedMappings: {
-			fontStyle: {
-				selector: Text.componentName,
-				property: Text.cssVarList.fontStyle
-			}
-		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin

package/src/components/descope-email-field/EmailField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('email-field');
 

package/src/components/descope-link/Link.js

@@ -1,16 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
-	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { forwardAttrs } from '../../componentsHelpers/createProxy/helpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
-import { hoverableMixin } from '../../componentsHelpers/hoverableMixin';
+	componentNameValidationMixin,
+	hoverableMixin
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import Text from '../descope-text/Text';
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('link');
 class RawLink extends DescopeBaseClass {
@@ -32,7 +29,9 @@ class RawLink extends DescopeBaseClass {
 		</style>
 		<div>
 			<a>
-				<slot name="text"></slot>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
 			</a>
 		</div>
 		`;
@@ -40,47 +39,40 @@ class RawLink extends DescopeBaseClass {
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
-		forwardAttrs(this.shadowRoot.host, this.shadowRoot.querySelector('a'), {
+		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
 			includeAttrs: ['href', 'target', 'tooltip'],
 			mapAttrs: {
 				tooltip: 'title'
 			}
 		});
 
+		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+			includeAttrs: ['mode', 'variant'],
+		});
+
 		this.baseSelector = ':host > div';
 	}
 }
 
 const selectors = {
-	anchor: { selector: '> a' }
+	host: { selector: () => 'host' },
+	anchor: { selector: '> a' },
+	text: { selector: Text.componentName }
 };
 
-const { anchor } = selectors;
+const { anchor, text, host } = selectors;
 
 const Link = compose(
-	enforceNestingElementsStylesMixin({
-		nestingElementTagName: 'descope-text',
-		nestingElementDestSlotName: 'text',
-		forwardAttrOptions: {
-			includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
-		}
-	}),
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: host,
 			textAlign: {},
-			color: anchor,
+			color: [anchor, { ...text, property: Text.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
 			borderBottomStyle: anchor,
 			borderBottomColor: anchor
 		},
-		nestedMappings: {
-			color: {
-				selector: Text.componentName,
-				property: Text.cssVarList.color
-			}
-		}
 	}),
 	hoverableMixin(anchor.selector),
 	draggableMixin,

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

@@ -1,12 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('loader-linear');
 
@@ -25,6 +24,7 @@ class RawLoaderLinear extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-block
 				}
 				div::after {
 					content: '';
@@ -32,6 +32,10 @@ class RawLoaderLinear extends DescopeBaseClass {
 					position: absolute;
 					left: 0;
 				}
+
+				:host > div {
+					width: 100%;
+				}
 			</style>
 			<div></div>
 		`;
@@ -45,16 +49,17 @@ class RawLoaderLinear extends DescopeBaseClass {
 
 const selectors = {
 	root: {},
-	after: { selector: '::after' }
+	after: { selector: '::after' },
+	host: { selector: () => ':host' }
 };
 
-const { root, after } = selectors;
+const { root, after, host } = selectors;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root,
-			width: matchHostStyle(root),
+			width: host,
 			height: [root, after],
 			borderRadius: [root, after],
 			surfaceColor: [{ property: 'background-color' }],

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

@@ -1,12 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('loader-radial');
 
@@ -25,6 +24,7 @@ class RawLoaderRadial extends DescopeBaseClass {
 				}
 				:host {
 					position: relative;
+					display: inline-flex;
 				}
 				:host > div {
 					animation-name: spin;
@@ -44,7 +44,7 @@ const LoaderRadial = compose(
 	createStyleMixin({
 		mappings: {
 			display: {},
-			width: matchHostStyle({}),
+			width: {},
 			height: {},
 			spinnerWidth: { property: 'border-width' },
 			spinnerStyle: { property: 'border-style' },

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

@@ -1,11 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('logo');
 
@@ -47,7 +47,7 @@ const Logo = compose(
 
 style = `
 :host {
-	display: inline-block;
+	display: inline-flex;
 }
 :host > div {
 	display: inline-block;

package/src/components/descope-number-field/NumberField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('number-field');
 

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

@@ -1,18 +1,17 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
-export const componentName = getComponentName('passcode');
-import TextField from '../descope-text-field/TextField';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
-import { forwardAttrs } from '../../componentsHelpers/createProxy/helpers';
+import TextField from '../descope-text-field/TextField'
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('passcode');
 
 const customMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -29,28 +28,21 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-      <${descopeInternalComponentName} 
-        bordered="true" 
-        name="code" 
-        tabindex="0"
-        slot="input"
-      ></${descopeInternalComponentName}>
-      `;
+			<${descopeInternalComponentName} 
+				bordered="true" 
+				name="code" 
+				tabindex="-1"
+				slot="input"
+			></${descopeInternalComponentName}>
+			`;
 
-			// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
-			const slotEle = Object.assign(document.createElement('slot'), {
-				name: 'input',
-				slot: 'input',
-				part: 'input'
-			});
-			this.proxyElement.appendChild(slotEle);
+			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.shadowRoot.host.appendChild(template.content.cloneNode(true));
-			this.inputElement = this.querySelector(descopeInternalComponentName);
+			this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] })
 
@@ -64,17 +56,21 @@ const customMixin = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
+const { digitField, label, requiredIndicator } = {
+	digitField: { selector: () => TextField.componentName },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
+}
+
+const textVars = TextField.cssVarList
+
 const Passcode = compose(
 	createStyleMixin({
 		mappings: {
-			...restTextFieldMappings
+			...restTextFieldMappings,
+			borderColor: { ...digitField, property: textVars.borderColor },
+			color: [restTextFieldMappings.color, label, requiredIndicator],
 		},
-		nestedMappings: {
-			borderColor: {
-				selector: TextField.componentName,
-				property: TextField.cssVarList.borderColor
-			}
-		}
 	}),
 	draggableMixin,
 	proxyInputMixin,
@@ -87,60 +83,45 @@ const Passcode = compose(
 		style: () => `
     :host {
       --vaadin-field-default-width: auto;
+			display: inline-block;
     }
-
-    ::slotted([slot='input']) {
+    descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;
       gap: 2px;
       align-items: center;
       padding: 0;
     }
-
     vaadin-text-field::part(input-field) {
       background-color: transparent;
       padding: 0;
+			overflow: hidden;
     }
-
-    ${overrides}
+		vaadin-text-field {
+			margin: 0;
+			padding: 0;
+		}
+		vaadin-text-field[readonly] > input:placeholder-shown {
+			opacity: 1;
+		}
+		vaadin-text-field > label,
+		vaadin-text-field::part(input-field) {
+			cursor: pointer;
+		}
+		vaadin-text-field::part(input-field):focus {
+			cursor: text;
+		}
+		vaadin-text-field[required]::part(required-indicator)::after {
+			font-size: "12px";
+			content: "*";
+		}
+		vaadin-text-field[readonly]::part(input-field)::after {
+			border: 0 solid;
+		}
     `,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
 
-const overrides = `
-	:host {
-		display: inline-block;
-	}
-
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		cursor: pointer;
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
 export default Passcode;

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

@@ -1,5 +1,5 @@
 import BaseInputClass from '../../../baseClasses/BaseInputClass';
-import { getComponentName } from '../../../componentsHelpers';
+import { getComponentName } from '../../../helpers/componentHelpers';
 import { getSanitizedCharacters, focusElement } from './helpers';
 
 export const componentName = getComponentName('passcode-internal');

package/src/components/descope-password-field/PasswordField.js

@@ -1,13 +1,13 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
+} from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('password-field');
 

package/src/components/descope-switch-toggle/SwitchToggle.js

@@ -1,13 +1,12 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
 	createProxy,
 	proxyInputMixin,
-	compose,
 	componentNameValidationMixin,
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('switch-toggle');
 
@@ -16,7 +15,7 @@ let overrides = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
+			width: {selector: () => ':host'},
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -47,6 +46,9 @@ overrides = `
 		--bgColor: #fff;
 		--knobBgColor: #000;
 	}
+	vaadin-checkbox : {
+		width: 100%;
+	}
 	vaadin-checkbox>label {
 		cursor: pointer;
 		border: 1px solid;
@@ -73,6 +75,7 @@ overrides = `
 		height: 0;
 		width: 0;
 		visibility: hidden;
+		margin: 0;
 	}
 	vaadin-checkbox[checked]>label::after {
 		transform: translateX(-100%);

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

@@ -1,12 +1,11 @@
 import {
-	getComponentName,
 	createStyleMixin,
 	draggableMixin,
-	compose,
 	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+} from '../../mixins';
 import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text');
 
@@ -17,7 +16,18 @@ class RawText extends DescopeBaseClass {
 	constructor() {
 		super();
 		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
+		template.innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -34,7 +44,7 @@ const Text = compose(
 			fontStyle: {},
 			fontSize: {},
 			fontWeight: {},
-			width: {},
+			width: { selector: () => ':host' },
 			color: {},
 			letterSpacing: {},
 			textShadow: {},
@@ -42,9 +52,8 @@ const Text = compose(
 			borderStyle: {},
 			borderColor: {},
 			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
-		}
+			textAlign: {},
+		},
 	}),
 	draggableMixin,
 	componentNameValidationMixin