@descope/web-components-ui 1.0.111 → 1.0.113

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

@@ -1,4 +1,4 @@
-import LoaderLinearClass, { componentName } from './LoaderLinear';
+import { componentName, LoaderLinearClass } from './LoaderLinearClass';
 
 customElements.define(componentName, LoaderLinearClass);
 

package/src/components/descope-loader-radial/{LoaderRadial.js → LoaderRadialClass.js}

@@ -32,7 +32,7 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
 	}
 }
 
-const LoaderRadialClass = compose(
+export const LoaderRadialClass = compose(
 	createStyleMixin({
 		mappings: {
 			display: {},
@@ -54,5 +54,3 @@ const LoaderRadialClass = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(RawLoaderRadial);
-
-export default LoaderRadialClass;

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

@@ -1,4 +1,4 @@
-import LoaderRadialClass, { componentName } from './LoaderRadial';
+import { componentName, LoaderRadialClass } from './LoaderRadialClass';
 
 customElements.define(componentName, LoaderRadialClass);
 

package/src/components/descope-logo/{Logo.js → LogoClass.js}

@@ -24,7 +24,7 @@ class RawLogo extends createBaseClass({ componentName, baseSelector: ':host > di
 	}
 }
 
-const LogoClass = compose(
+export const LogoClass = compose(
 	createStyleMixin({
 		mappings: {
 			height: { selector: () => ':host' },
@@ -53,5 +53,3 @@ style = `
 	pointer-events: none
 }
 `;
-
-export default LogoClass;

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

@@ -1,4 +1,4 @@
-import LogoClass, { componentName } from './Logo';
+import { componentName, LogoClass } from './LogoClass';
 
 customElements.define(componentName, LogoClass);
 

package/src/components/descope-new-password/{NewPassword.js → NewPasswordClass.js}

@@ -7,7 +7,7 @@ import {
 	createProxy,
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
-import PasswordFieldClass from '../descope-password-field/PasswordField';
+import { PasswordFieldClass } from '../descope-password-field/PasswordFieldClass';
 
 export const componentName = getComponentName('new-password');
 
@@ -57,7 +57,8 @@ const { host, internalInputsWrapper } = {
 	host: { selector: () => ':host' },
 	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
 }
-const NewPasswordClass = compose(
+
+export const NewPasswordClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
@@ -129,5 +130,3 @@ const overrides = `
 		height: initial;
 	}
 `;
-
-export default NewPasswordClass;

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -1,6 +1,6 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { observeAttributes } from '../../../helpers/componentHelpers';
-import NewPasswordClass from '../NewPassword';
+import { NewPasswordClass } from '../NewPasswordClass';
 import { componentName } from './componentName';
 
 const passwordAttrPrefixRegex = /^password-/

package/src/components/descope-new-password/index.js

@@ -1,4 +1,4 @@
-import NewPasswordClass, { componentName } from './NewPassword';
+import { componentName, NewPasswordClass } from './NewPasswordClass';
 import '../descope-text-field'
 import '../descope-password-field'
 import './descope-new-password-internal'

package/src/components/descope-number-field/{NumberField.js → NumberFieldClass.js}

@@ -13,7 +13,7 @@ export const componentName = getComponentName('number-field');
 
 let overrides = ``;
 
-const NumberFieldClass = compose(
+export const NumberFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			...textFieldMappings
@@ -68,5 +68,3 @@ overrides = `
 		border: 0 solid;
 	}
 `;
-
-export default NumberFieldClass;

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

@@ -1,5 +1,5 @@
 import '@vaadin/number-field';
-import NumberFieldClass, { componentName } from './NumberField';
+import { componentName, NumberFieldClass } from './NumberFieldClass';
 
 customElements.define(componentName, NumberFieldClass);
 

package/src/components/descope-passcode/{Passcode.js → PasscodeClass.js}

@@ -7,7 +7,7 @@ import {
 } from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
-import TextFieldClass from '../descope-text-field/TextField'
+import { TextFieldClass } from '../descope-text-field/TextFieldClass'
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
@@ -73,7 +73,7 @@ const { digitField, label, requiredIndicator, internalWrapper, focusedDigitField
 
 const textVars = TextFieldClass.cssVarList
 
-const PasscodeClass = compose(
+export const PasscodeClass = compose(
 	createStyleMixin({
 		mappings: {
 			...restTextFieldMappings,

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

@@ -1,4 +1,4 @@
-import PasscodeClass, { componentName } from './Passcode';
+import { componentName, PasscodeClass } from './PasscodeClass';
 import '../descope-text-field'
 import './descope-passcode-internal'
 

package/src/components/descope-password-field/{PasswordField.js → PasswordFieldClass.js}

@@ -33,7 +33,7 @@ const {
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 }
 
-const PasswordFieldClass = compose(
+export const PasswordFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host,
@@ -121,5 +121,3 @@ const PasswordFieldClass = compose(
 		componentName
 	})
 );
-
-export default PasswordFieldClass;

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

@@ -1,5 +1,5 @@
 import '@vaadin/password-field';
-import PasswordFieldClass, { componentName } from './PasswordField';
+import { componentName, PasswordFieldClass } from './PasswordFieldClass';
 
 customElements.define(componentName, PasswordFieldClass);
 

package/src/components/descope-phone-field/{PhoneField.js → PhoneFieldClass.js}

@@ -7,8 +7,8 @@ import {
 	draggableMixin,
 	proxyInputMixin
 } from '../../mixins';
-import TextFieldClass from '../descope-text-field/TextField';
-import ComboBoxClass from '../descope-combo-box/ComboBox';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
 import CountryCodes from './CountryCodes';
 
 const textVars = TextFieldClass.cssVarList;
@@ -75,7 +75,7 @@ const {
 	separator: { selector: 'descope-phone-field-internal .separator' }
 };
 
-const PhoneFieldClass = compose(
+export const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [

package/src/components/descope-phone-field/index.js

@@ -2,7 +2,7 @@ import './descope-phone-field-internal';
 import '../descope-combo-box';
 import '../descope-text-field';
 
-import PhoneFieldClass, { componentName } from './PhoneField';
+import { componentName, PhoneFieldClass } from './PhoneFieldClass';
 
 customElements.define(componentName, PhoneFieldClass);
 

package/src/components/descope-text/{Text.js → TextClass.js}

@@ -28,7 +28,7 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
 	}
 }
 
-const TextClass = compose(
+export const TextClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontFamily: {},
@@ -50,5 +50,3 @@ const TextClass = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(RawText);
-
-export default TextClass;

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

@@ -1,4 +1,5 @@
-import TextClass, { componentName } from './Text';
+import { componentName, TextClass } from './TextClass';
 
 customElements.define(componentName, TextClass);
+
 export { TextClass };

package/src/components/descope-text-area/{TextArea.js → TextAreaClass.js}

@@ -28,7 +28,7 @@ const {
 
 let overrides = ``;
 
-const TextAreaClass = compose(
+export const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [host, textArea],
@@ -88,4 +88,3 @@ overrides = `
 		opacity: 1;
 	}
 `;
-export default TextAreaClass;

package/src/components/descope-text-area/index.js

@@ -1,5 +1,5 @@
 import '@vaadin/text-area';
-import TextAreaClass, { componentName } from './TextArea';
+import { componentName, TextAreaClass } from './TextAreaClass';
 
 customElements.define(componentName, TextAreaClass);
 

package/src/components/descope-text-field/{TextField.js → TextFieldClass.js}

@@ -5,7 +5,7 @@ import {
 	proxyInputMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import textFieldMappings from '../descope-text-field/textFieldMappings';
+import textFieldMappings from './textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
@@ -35,7 +35,7 @@ const customMixin = (superclass) =>
 		}
 	}
 
-const TextFieldClass = compose(
+export const TextFieldClass = compose(
 	createStyleMixin({
 		mappings: textFieldMappings
 	}),
@@ -102,5 +102,3 @@ overrides = `
 		height: unset;
 	}
 `;
-
-export default TextFieldClass;

package/src/components/descope-text-field/index.js

@@ -1,5 +1,5 @@
 import '@vaadin/text-field';
-import TextFieldClass, { componentName } from './TextField';
+import { componentName, TextFieldClass } from './TextFieldClass';
 
 customElements.define(componentName, TextFieldClass);
 

package/src/index.cjs.js

@@ -1,3 +1,4 @@
-// CJS is used by screen-renderer-service, we cannot load vaadin there,
+// CJS is used by screen-renderer-service, we cannot export client stuff here (e.g. HTMLElement),
 // so we are exporting only the css generation stuff
 export * from './helpers/themeHelpers';
+export * from './helpers/themeHelpers/colorsHelpers';

package/src/theme/components/button.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
-import ButtonClass, { componentName } from '../../components/descope-button/Button';
+import { componentName, ButtonClass } from '../../components/descope-button/ButtonClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = ButtonClass.cssVarList;

package/src/theme/components/checkbox.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import CheckboxClass from '../../components/boolean-fields/descope-checkbox/Checkbox';
+import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = CheckboxClass.cssVarList;

package/src/theme/components/comboBox.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import ComboBoxClass from '../../components/descope-combo-box/ComboBox';
+import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/container.js

@@ -1,6 +1,6 @@
 import globals from "../globals";
 import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
-import ContainerClass from "../../components/descope-container/Container";
+import { ContainerClass, componentName } from "../../components/descope-container/ContainerClass";
 
 const globalRefs = getThemeRefs(globals);
 
@@ -23,7 +23,7 @@ const [helperTheme, helperRefs, helperVars] =
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, ContainerClass.componentName)
+	}, componentName)
 
 const container = {
 	...helperTheme,

package/src/theme/components/divider.js

@@ -1,4 +1,4 @@
-import DividerClass, { componentName } from '../../components/descope-divider/Divider';
+import { componentName, DividerClass } from '../../components/descope-divider/DividerClass';
 import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
 import globals from '../globals';
 

package/src/theme/components/emailField.js

@@ -1,4 +1,4 @@
-import EmailFieldClass from '../../components/descope-email-field/EmailField';
+import { EmailFieldClass } from '../../components/descope-email-field/EmailFieldClass';
 import { textField } from './textField';
 
 const emailField = {

package/src/theme/components/image.js

@@ -1,4 +1,4 @@
-import ImageClass from "../../components/descope-image/Image";
+import { ImageClass } from "../../components/descope-image/ImageClass";
 
 const vars = ImageClass.cssVarList
 

package/src/theme/components/link.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import LinkClass from '../../components/descope-link/Link';
+import { LinkClass } from '../../components/descope-link/LinkClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = LinkClass.cssVarList;

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

@@ -1,4 +1,4 @@
-import LoaderLinearClass from '../../../components/descope-loader-linear/LoaderLinear';
+import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 

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

@@ -1,4 +1,4 @@
-import LoaderRadialClass from '../../../components/descope-loader-radial/LoaderRadial';
+import { LoaderRadialClass } from '../../../components/descope-loader-radial/LoaderRadialClass';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 

package/src/theme/components/logo.js

@@ -1,4 +1,4 @@
-import LogoClass from "../../components/descope-logo/Logo";
+import { LogoClass } from "../../components/descope-logo/LogoClass";
 
 const vars = LogoClass.cssVarList
 

package/src/theme/components/newPassword.js

@@ -1,4 +1,4 @@
-import NewPasswordClass from '../../components/descope-new-password/NewPassword';
+import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
 
 const vars = NewPasswordClass.cssVarList;
 

package/src/theme/components/numberField.js

@@ -1,4 +1,4 @@
-import NumberFieldClass from '../../components/descope-number-field/NumberField';
+import { NumberFieldClass } from '../../components/descope-number-field/NumberFieldClass';
 import { textField } from './textField';
 
 const numberField = {

package/src/theme/components/passcode.js

@@ -1,4 +1,4 @@
-import PasscodeClass from '../../components/descope-passcode/Passcode';
+import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import globals from '../globals';
 

package/src/theme/components/passwordField.js

@@ -1,4 +1,4 @@
-import PasswordFieldClass from '../../components/descope-password-field/PasswordField';
+import { PasswordFieldClass } from '../../components/descope-password-field/PasswordFieldClass';
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 

package/src/theme/components/phoneField.js

@@ -1,5 +1,5 @@
 import globals from '../globals';
-import PhoneFieldClass from '../../components/descope-phone-field/PhoneField';
+import { PhoneFieldClass } from '../../components/descope-phone-field/PhoneFieldClass';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/switchToggle.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import SwitchToggleClass from '../../components/boolean-fields/descope-switch-toggle/SwitchToggle';
+import { SwitchToggleClass } from '../../components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';

package/src/theme/components/text.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import TextClass from '../../components/descope-text/Text';
+import { TextClass } from '../../components/descope-text/TextClass';
 
 const globalRefs = getThemeRefs(globals);
 

package/src/theme/components/textArea.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import TextAreaClass from '../../components/descope-text-area/TextArea';
+import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextAreaClass.cssVarList;

package/src/theme/components/textField.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import TextFieldClass from '../../components/descope-text-field/TextField';
+import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
 
 const globalRefs = getThemeRefs(globals);
 

package/dist/umd/890.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[890],{7890:(t,e,r)=>{r.d(e,{f:()=>i,Z:()=>b});var o=r(9241),n=r(2061);const i=(0,r(4567).iY)("password-field"),{host:a,inputWrapper:d,inputElement:p,inputElementPlaceholder:l,revealButton:s,revealButtonIcon:u,revealButtonIconOutline:c,label:h,requiredIndicator:y}={host:{selector:()=>":host"},inputWrapper:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButton:{selector:"vaadin-password-field-button"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},revealButtonIconOutline:{selector:()=>"vaadin-password-field-button[focus-ring]"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"}},b=(0,n.qC)((0,o.yk)({mappings:{width:a,wrapperBorderStyle:{...d,property:"border-style"},wrapperBorderWidth:{...d,property:"border-width"},wrapperBorderColor:{...d,property:"border-color"},wrapperBorderRadius:{...d,property:"border-radius"},revealButtonOutlineBoxShadow:[{...c,property:"box-shadow"}],labelTextColor:[{...h,property:"color"},{...y,property:"color"}],inputTextColor:[{...p,property:"color"},{...u,property:"color"}],placeholderTextColor:{...l,property:"color"},fontSize:[{},a],height:d,padding:d,pointerCursor:[{...s,property:"cursor"},{...h,property:"cursor"},{...y,property:"cursor"}],outlineColor:d,outlineStyle:d,outlineWidth:[d,{property:"padding"}],backgroundColor:d}}),o.e4,o.dj,o.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const o=t=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",o),t.target.removeEventListener("dragend",o)};t.target.addEventListener("mouseup",o,{once:!0}),t.target.addEventListener("dragend",o,{once:!0})}})),super.init?.()}}))((0,o.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:'\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmin-width: 10em;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\t\n\t\t\tvaadin-password-field[required]::part(required-indicator)::after {\n\t\t\t\tcontent: "*";\n\t\t\t}\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t',excludeAttrsSync:["tabindex"],componentName:i}))}}]);