@descope/web-components-ui 1.0.106 → 1.0.108

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+declare module '@descope/web-components-ui';
+
+export {
+	globalsThemeToStyle,
+	createComponentsTheme,
+	themeToStyle,
+	componentsThemeManager
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
+export { default as defaultTheme } from './theme';
+
+export { ButtonClass } from './src/components/descope-button';
+export { CheckboxClass } from './src/components/boolean-fields/descope-checkbox';
+export { SwitchToggleClass } from './src/components/boolean-fields/descope-switch-toggle';
+export { LoaderLinearClass } from './src/components/descope-loader-linear';
+export { LoaderRadialClass } from './src/components/descope-loader-radial';
+export { ContainerClass } from './src/components/descope-container';
+export { DividerClass } from './src/components/descope-divider';
+export { EmailFieldClass } from './src/components/descope-email-field';
+export { LinkClass } from './src/components/descope-link';
+export { LogoClass } from './src/components/descope-logo';
+export { NumberFieldClass } from './src/components/descope-number-field';
+export { PasscodeClass } from './src/components/descope-passcode';
+export { PasswordFieldClass } from './src/components/descope-password-field';
+export { TextClass } from './src/components/descope-text';
+export { TextAreaClass } from './src/components/descope-text-area';
+export { TextFieldClass } from './src/components/descope-text-field';
+export { ImageClass } from './src/components/descope-image';
+export { PhoneFieldClass } from './src/components/descope-phone-field';
+export { NewPasswordClass } from './src/components/descope-new-password';
+
+export type FontFamilies = Record<string, any>;
+export type FontFamily = Record<string, any>;
+export type TypographyVariants = keyof Theme['globals']['typography'];
+export type VariantsList = Array<TypographyVariants>;
+
+export type FontDef = {
+	label: string;
+	url: string;
+	family: string[];
+};
+
+export type Theme = {
+	globals: {
+		colors: Record<string, string>;
+		fonts: Record<string, any>;
+		typography: Record<string, any>;
+		shadow: Record<string, string>;
+		spacing: Record<string, string>;
+	};
+	components: {
+		button: Record<string, string>;
+		textField: Record<string, string>;
+		logo: Record<string, string>;
+		container: Record<string, string>;
+		link: Record<string, string>;
+		button: Record<string, string>;
+		text: Record<string, string>;
+	};
+};

package/dist/index.esm.js

@@ -1136,7 +1136,7 @@ const { host: host$a, label: label$7 } = {
 	label: { selector: '::part(label)' },
 };
 
-const Button = compose(
+const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
 			color: {},
@@ -1206,7 +1206,7 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$n, Button);
+customElements.define(componentName$n, ButtonClass);
 
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
@@ -1393,7 +1393,7 @@ const {
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
 };
 
-const Checkbox = compose(
+const CheckboxClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$9,
@@ -1465,7 +1465,7 @@ const Checkbox = compose(
 
 customElements.define(componentName$m, BooleanInputInternal);
 
-customElements.define(componentName$l, Checkbox);
+customElements.define(componentName$l, CheckboxClass);
 
 const componentName$k = getComponentName('switch-toggle');
 
@@ -1487,7 +1487,7 @@ const {
 	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
 };
 
-const SwitchToggle = compose(
+const SwitchToggleClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$8,
@@ -1578,7 +1578,7 @@ const SwitchToggle = compose(
 	})
 );
 
-customElements.define(componentName$k, SwitchToggle);
+customElements.define(componentName$k, SwitchToggleClass);
 
 const componentName$j = getComponentName('loader-linear');
 
@@ -1623,7 +1623,7 @@ const selectors$3 = {
 
 const { root: root$1, after: after$1, host: host$7 } = selectors$3;
 
-const LoaderLinear = compose(
+const LoaderLinearClass = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
@@ -1642,7 +1642,7 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$j, LoaderLinear);
+customElements.define(componentName$j, LoaderLinearClass);
 
 const componentName$i = getComponentName('loader-radial');
 
@@ -1669,7 +1669,7 @@ class RawLoaderRadial extends createBaseClass({ componentName: componentName$i,
 	}
 }
 
-const LoaderRadial = compose(
+const LoaderRadialClass = compose(
 	createStyleMixin({
 		mappings: {
 			display: {},
@@ -1692,7 +1692,7 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$i, LoaderRadial);
+customElements.define(componentName$i, LoaderRadialClass);
 
 const componentName$h = getComponentName('container');
 
@@ -1818,7 +1818,7 @@ const selectors$2 = {
 
 const { root, before, after, text: text$2, host: host$6 } = selectors$2;
 
-const Divider = compose(
+const DividerClass = compose(
 	createStyleMixin({
 		mappings: {
 			maxTextWidth: { ...text$2, property: 'max-width' },
@@ -1861,7 +1861,7 @@ class RawText extends createBaseClass({ componentName: componentName$f, baseSele
 	}
 }
 
-const Text = compose(
+const TextClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontFamily: {},
@@ -1884,9 +1884,9 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$f, Text);
+customElements.define(componentName$f, TextClass);
 
-customElements.define(componentName$g, Divider);
+customElements.define(componentName$g, DividerClass);
 
 const selectors$1 = {
 	label: '::part(label)',
@@ -1940,7 +1940,7 @@ const componentName$e = getComponentName('email-field');
 
 let overrides$4 = ``;
 
-const EmailField = compose(
+const EmailFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			...textFieldMappings
@@ -2000,7 +2000,7 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$e, EmailField);
+customElements.define(componentName$e, EmailFieldClass);
 
 const componentName$d = getComponentName('link');
 class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
@@ -2041,18 +2041,18 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
 const selectors = {
 	host: { selector: () => ':host' },
 	anchor: {},
-	wrapper: {selector: () => ':host > div'},
-	text: { selector: () => Text.componentName }
+	wrapper: { selector: () => ':host > div' },
+	text: { selector: () => TextClass.componentName }
 };
 
 const { anchor, text: text$1, host: host$5, wrapper } = selectors;
 
-const Link = compose(
+const LinkClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$5,
 			textAlign: wrapper,
-			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
+			color: [anchor, { ...text$1, property: TextClass.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
 			borderBottomStyle: anchor,
@@ -2063,7 +2063,7 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$d, Link);
+customElements.define(componentName$d, LinkClass);
 
 const componentName$c = getComponentName('logo');
 
@@ -2082,13 +2082,13 @@ class RawLogo extends createBaseClass({ componentName: componentName$c, baseSele
 	}
 }
 
-const Logo = compose(
+const LogoClass = compose(
 	createStyleMixin({
 		mappings: {
-			height: {},
-			width: {},
-			url: {},
-			fallbackUrl: {}
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+			fallbackUrl: { property: 'content' },
+			url: { property: 'content' },
 		}
 	}),
 	draggableMixin,
@@ -2102,19 +2102,23 @@ style = `
 :host > div {
 	display: inline-block;
 	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	margin: auto;
 }
 :host([draggable="true"]) > div {
 	pointer-events: none
 }
 `;
 
-customElements.define(componentName$c, Logo);
+customElements.define(componentName$c, LogoClass);
 
 const componentName$b = getComponentName('number-field');
 
 let overrides$3 = ``;
 
-const NumberField = compose(
+const NumberFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			...textFieldMappings
@@ -2170,7 +2174,7 @@ overrides$3 = `
 	}
 `;
 
-customElements.define(componentName$b, NumberField);
+customElements.define(componentName$b, NumberFieldClass);
 
 const focusElement = (ele) => {
 	ele?.focus();
@@ -2397,7 +2401,7 @@ const customMixin$3 = (superclass) =>
 		}
 	};
 
-const TextField = compose(
+const TextFieldClass = compose(
 	createStyleMixin({
 		mappings: textFieldMappings
 	}),
@@ -2472,7 +2476,7 @@ const observedAttributes$1 = [
 ];
 
 const customMixin$2 = (superclass) =>
-	class PasscodeClass extends superclass {
+	class PasscodeMixinClass extends superclass {
 		static get observedAttributes() {
 			return observedAttributes$1.concat(superclass.observedAttributes || []);
 		}
@@ -2518,16 +2522,16 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
 const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
-	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
-	digitField: { selector: () => TextField.componentName },
+	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+	digitField: { selector: () => TextFieldClass.componentName },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
 };
 
-const textVars$1 = TextField.cssVarList;
+const textVars$1 = TextFieldClass.cssVarList;
 
-const Passcode = compose(
+const PasscodeClass = compose(
 	createStyleMixin({
 		mappings: {
 			...restTextFieldMappings,
@@ -2627,11 +2631,11 @@ const Passcode = compose(
 	})
 );
 
-customElements.define(componentName$9, TextField);
+customElements.define(componentName$9, TextFieldClass);
 
 customElements.define(componentName$a, PasscodeInternal);
 
-customElements.define(componentName$8, Passcode);
+customElements.define(componentName$8, PasscodeClass);
 
 const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
 	get isReadOnly() {
@@ -2690,7 +2694,7 @@ const {
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
-const PasswordField = compose(
+const PasswordFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$4,
@@ -2779,7 +2783,7 @@ const PasswordField = compose(
 	})
 );
 
-customElements.define(componentName$7, PasswordField);
+customElements.define(componentName$7, PasswordFieldClass);
 
 const componentName$6 = getComponentName('text-area');
 
@@ -2801,7 +2805,7 @@ const {
 
 let overrides$1 = ``;
 
-const TextArea = compose(
+const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [host$3, textArea$1],
@@ -2862,7 +2866,7 @@ overrides$1 = `
 	}
 `;
 
-customElements.define(componentName$6, TextArea);
+customElements.define(componentName$6, TextAreaClass);
 
 const observedAttributes = ['src', 'alt'];
 
@@ -2891,14 +2895,14 @@ class RawImage extends BaseClass {
 	`;
 	}
 
-	connectedCallback(){
+	connectedCallback() {
 		super.connectedCallback?.();
 
-		forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
+		forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
 	}
 }
 
-const Image = compose(
+const ImageClass = compose(
 	createStyleMixin({
 		mappings: {
 			height: { selector: () => ':host' },
@@ -2908,7 +2912,7 @@ const Image = compose(
 	draggableMixin,
 )(RawImage);
 
-customElements.define(componentName$5, Image);
+customElements.define(componentName$5, ImageClass);
 
 const componentName$4 = getComponentName('combo-box');
 
@@ -2982,7 +2986,7 @@ const {
 // 	selected: { selector: () => '::slotted([selected])' }
 // }
 
-const ComboBox = compose(
+const ComboBoxClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$2,
@@ -3074,7 +3078,7 @@ const ComboBox = compose(
 	})
 );
 
-customElements.define(componentName$4, ComboBox);
+customElements.define(componentName$4, ComboBoxClass);
 
 var CountryCodes = [
 	{
@@ -4505,13 +4509,13 @@ class PhoneFieldInternal extends BaseInputClass$1 {
 
 customElements.define(componentName$3, PhoneFieldInternal);
 
-const textVars = TextField.cssVarList;
-const comboVars = ComboBox.cssVarList;
+const textVars = TextFieldClass.cssVarList;
+const comboVars = ComboBoxClass.cssVarList;
 
 const componentName$2 = getComponentName('phone-field');
 
 const customMixin$1 = (superclass) =>
-	class PhoneFieldClass extends superclass {
+	class PhoneFieldMixinClass extends superclass {
 		static get CountryCodes() {
 			return CountryCodes;
 		}
@@ -4569,18 +4573,18 @@ const {
 	separator: { selector: 'descope-phone-field-internal .separator' }
 };
 
-const PhoneField = compose(
+const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
 				host$1, inputWrapper,
 				{
-					selector: TextField.componentName,
-					property: TextField.cssVarList.fontSize
+					selector: TextFieldClass.componentName,
+					property: TextFieldClass.cssVarList.fontSize
 				},
 				{
-					selector: ComboBox.componentName,
-					property: ComboBox.cssVarList.fontSize
+					selector: ComboBoxClass.componentName,
+					property: ComboBoxClass.cssVarList.fontSize
 				}
 			],
 
@@ -4709,7 +4713,7 @@ const PhoneField = compose(
 	})
 );
 
-customElements.define(componentName$2, PhoneField);
+customElements.define(componentName$2, PhoneFieldClass);
 
 const componentName$1 = getComponentName('new-password-internal');
 
@@ -4761,14 +4765,14 @@ const { host, internalInputsWrapper } = {
 	host: { selector: () => ':host' },
 	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
 };
-const NewPassword = compose(
+const NewPasswordClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
 				host,
 				{
-					selector: PasswordField.componentName,
-					property: PasswordField.cssVarList.fontSize
+					selector: PasswordFieldClass.componentName,
+					property: PasswordFieldClass.cssVarList.fontSize
 				}
 			],
 			componentWidth: { ...host, property: 'width' },
@@ -4948,7 +4952,7 @@ class NewPasswordInternal extends BaseInputClass {
 			const styleTag = document.createElement('style');
 			styleTag.innerHTML = `
 				:host::part(required-indicator)::after {
-					content: var(${NewPassword.cssVarList.requiredContent});
+					content: var(${NewPasswordClass.cssVarList.requiredContent});
 				}
 				`;
 			input?.shadowRoot.appendChild(styleTag);
@@ -5022,7 +5026,7 @@ class NewPasswordInternal extends BaseInputClass {
 
 customElements.define(componentName$1, NewPasswordInternal);
 
-customElements.define(componentName, NewPassword);
+customElements.define(componentName, NewPasswordClass);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -5355,7 +5359,7 @@ var globals = {
 };
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$g = Button.cssVarList;
+const vars$g = ButtonClass.cssVarList;
 
 const mode = {
 	primary: globalRefs$e.colors.primary,
@@ -5439,7 +5443,7 @@ const button = {
 
 const globalRefs$d = getThemeRefs(globals);
 
-const vars$f = TextField.cssVarList;
+const vars$f = TextFieldClass.cssVarList;
 
 const textField = (vars) => ({
 	[vars.padding]: '0 1em',
@@ -5509,7 +5513,7 @@ var textField$1 = textField(vars$f);
 
 const globalRefs$c = getThemeRefs(globals);
 
-const vars$e = PasswordField.cssVarList;
+const vars$e = PasswordFieldClass.cssVarList;
 
 const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
@@ -5575,15 +5579,15 @@ const passwordField = {
 };
 
 const numberField = {
-	...textField(NumberField.cssVarList)
+	...textField(NumberFieldClass.cssVarList)
 };
 
 const emailField = {
-	...textField(EmailField.cssVarList)
+	...textField(EmailFieldClass.cssVarList)
 };
 
 const globalRefs$b = getThemeRefs(globals);
-const vars$d = TextArea.cssVarList;
+const vars$d = TextAreaClass.cssVarList;
 
 const textArea = {
 	[vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
@@ -5632,7 +5636,7 @@ const textArea = {
 };
 
 const globalRefs$a = getThemeRefs(globals);
-const vars$c = Checkbox.cssVarList;
+const vars$c = CheckboxClass.cssVarList;
 
 const checkbox = {
 	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
@@ -5695,7 +5699,7 @@ const checkboxHeight = '1.25em';
 const trackBorderWidth = '2px';
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$b = SwitchToggle.cssVarList;
+const vars$b = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
     size: {
@@ -5875,16 +5879,15 @@ const container = {
 	}
 };
 
-const vars$9 = Logo.cssVarList;
+const vars$9 = LogoClass.cssVarList;
 
 const logo = {
-	[vars$9.width]: '100%',
-	[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$9.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
 };
 
 const globalRefs$7 = getThemeRefs(globals);
 
-const vars$8 = Text.cssVarList;
+const vars$8 = TextClass.cssVarList;
 
 const text = {
 	[vars$8.lineHeight]: '1em',
@@ -5961,7 +5964,7 @@ const text = {
 };
 
 const globalRefs$6 = getThemeRefs(globals);
-const vars$7 = Link.cssVarList;
+const vars$7 = LinkClass.cssVarList;
 
 const link = {
 	[vars$7.cursor]: 'pointer',
@@ -6014,7 +6017,7 @@ const link = {
 
 const globalRefs$5 = getThemeRefs(globals);
 
-const vars$6 = Divider.cssVarList;
+const vars$6 = DividerClass.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
@@ -6043,7 +6046,7 @@ const divider = {
 	}
 };
 
-const vars$5 = Passcode.cssVarList;
+const vars$5 = PasscodeClass.cssVarList;
 const globalRefs$4 = getThemeRefs(globals);
 
 const passcode = {
@@ -6082,7 +6085,7 @@ const passcode = {
 
 const globalRefs$3 = getThemeRefs(globals);
 
-const vars$4 = LoaderLinear.cssVarList;
+const vars$4 = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
 	[vars$4.display]: 'inline-block',
@@ -6126,7 +6129,7 @@ const loaderLinear = {
 
 const globalRefs$2 = getThemeRefs(globals);
 
-const vars$3 = LoaderRadial.cssVarList;
+const vars$3 = LoaderRadialClass.cssVarList;
 
 const loaderRadial = {
 	[vars$3.display]: 'inline-block',
@@ -6183,7 +6186,7 @@ const loaderRadial = {
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = ComboBox.cssVarList;
+const vars$2 = ComboBoxClass.cssVarList;
 
 const comboBox = {
 	[vars$2.borderColor]: globalRefs$1.colors.surface.main,
@@ -6231,12 +6234,12 @@ const comboBox = {
 	// [vars.overlayBorder]: `2px solid red`,
 };
 
-Image.cssVarList;
+ImageClass.cssVarList;
 
 const image = {};
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = PhoneField.cssVarList;
+const vars$1 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
 	[vars$1.wrapperBorderStyle]: 'solid',
@@ -6300,7 +6303,7 @@ const phoneField = {
 	// }
 };
 
-const vars = NewPassword.cssVarList;
+const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
 	[vars.inputsGap]: '1em',
@@ -6357,5 +6360,5 @@ var components = {
 
 var index = { globals, components };
 
-export { Button, Checkbox, Container, Divider, EmailField, Image, Link, LoaderLinear, LoaderRadial, Logo, NewPassword, NumberField, Passcode, PasswordField, PhoneField, SwitchToggle, Text, TextArea, TextField, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
+export { ButtonClass, CheckboxClass, Container as ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
 //# sourceMappingURL=index.esm.js.map