@descope/web-components-ui 1.0.45 → 1.0.47

package/src/componentsHelpers/inputMixin.js

@@ -1,3 +1,15 @@
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return target[property] = v
+		},
+		get: function () {
+			return target[property]
+		},
+		configurable: true
+	});
+}
+
 export const inputMixin = (superclass) =>
 	class InputMixinClass extends superclass {
 		static get formAssociated() {
@@ -17,6 +29,7 @@ export const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector)
 			super.connectedCallback?.();
 
 			// this is needed in order to make sure the form input validation is working
@@ -24,13 +37,15 @@ export const inputMixin = (superclass) =>
 				this.setAttribute('tabindex', 0);
 			}
 
-			// vaadin does not expose all those validation attributes so we need to take it from the input
-			// https://github.com/vaadin/web-components/issues/1177
 			const input =
-				this.proxyElement.querySelector('input') ||
-				this.proxyElement.querySelector('textarea');
+				this.baseEle.querySelector('input') ||
+				this.baseEle.querySelector('textarea');
 			if (!input) throw Error('no input was found');
 
+			// sync properties
+			propertyObserver(this, input, 'value')
+			this.setSelectionRange = input.setSelectionRange.bind(input)
+
 			this.checkValidity = () => input.checkValidity();
 			this.reportValidity = () => input.reportValidity();
 			this.validity = input.validity;

package/src/dev/index.js

@@ -1,7 +1,2 @@
-import theme from '../theme';
-import { themeToStyle } from '../themeHelpers';
-
-// this file is used for exposing stuff to the dev env only
-
-export const getDefaultThemeStyles = (themeName) =>
-	themeToStyle(theme, themeName);
+export {default as defaultTheme} from '../theme';
+export { themeToStyle } from '../themeHelpers';

package/src/theme/components/index.js

@@ -7,6 +7,7 @@ import textArea from './textArea';
 import checkbox from './checkbox';
 import switchToggle from './switchToggle';
 import container from './container';
+import logo from './logo';
 
 export default {
 	button,
@@ -17,5 +18,6 @@ export default {
 	textArea,
 	checkbox,
 	switchToggle,
-	container
+	container,
+	logo
 };

package/src/theme/components/logo.js

@@ -0,0 +1,9 @@
+import Logo from "../../components/descope-logo/Logo";
+
+const vars = Logo.cssVarList
+
+const logo = {
+	[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+};
+
+export default logo;

package/src/theme/components/input.js

@@ -1,106 +0,0 @@
-import {
-	getComponentName,
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	inputMixin,
-	compose,
-	componentNameValidationMixin
-} from '../../componentsHelpers';
-import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-
-export const componentName = getComponentName('text-field');
-
-const selectors = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown'
-};
-
-let overrides = ``;
-
-export const textFieldMappings = {
-	color: { selector: selectors.input },
-	backgroundColor: { selector: selectors.input },
-	width: [matchHostStyle()],
-	color: { selector: selectors.input },
-	borderColor: [
-		{ selector: selectors.input },
-		{ selector: selectors.readOnlyInput }
-	],
-	borderWidth: [
-		{ selector: selectors.input },
-		{ selector: selectors.readOnlyInput }
-	],
-	borderStyle: [
-		{ selector: selectors.input },
-		{ selector: selectors.readOnlyInput }
-	],
-	borderRadius: { selector: selectors.input },
-	boxShadow: { selector: selectors.input },
-	fontSize: {},
-	height: { selector: selectors.input },
-	padding: { selector: selectors.input },
-	outline: { selector: selectors.input },
-	outlineOffset: { selector: selectors.input },
-
-	placeholderColor: { selector: selectors.placeholder, property: 'color' }
-	// borderWidthReadOnly: [borderWidth('[readonly]::part(input-field)::after')]
-};
-
-const TextField = compose(
-	createStyleMixin({
-		mappings: textFieldMappings
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
-);
-
-overrides = `
-	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 input:-webkit-autofill,
-	vaadin-text-field input:-webkit-autofill::first-line,
-	vaadin-text-field input:-webkit-autofill:hover,
-	vaadin-text-field input:-webkit-autofill:active,
-	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextField.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		cursor: pointer;
-		color: var(${TextField.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(${TextField.cssVarList.color});
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
-export default TextField;