@descope/web-components-ui 1.0.38 → 1.0.40

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

@@ -0,0 +1,72 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { textFieldMappings } from '../descope-text-field/TextField';
+
+export const componentName = getComponentName('number-field');
+
+let overrides = ``;
+
+const NumberField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-number-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	vaadin-number-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-number-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-number-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-number-field input:-webkit-autofill,
+	vaadin-number-field input:-webkit-autofill::first-line,
+	vaadin-number-field input:-webkit-autofill:hover,
+	vaadin-number-field input:-webkit-autofill:active,
+	vaadin-number-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
+		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-number-field > label,
+	vaadin-number-field::part(input-field) {
+		cursor: pointer;
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-number-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+export default NumberField;

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

@@ -0,0 +1,6 @@
+import "@vaadin/number-field";
+import NumberField, { componentName } from "./NumberField";
+
+customElements.define(componentName, NumberField);
+
+export { NumberField };

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

@@ -0,0 +1,79 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { textFieldMappings } from '../descope-text-field/TextField';
+
+export const componentName = getComponentName('password-field');
+
+let overrides = ``;
+
+const PasswordField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings,
+			// todo: override cursor from lumo
+			revealCursor: [
+				{
+					selector: '::part(reveal-button)::before',
+					property: 'cursor'
+				}
+			]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-password-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	vaadin-password-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-password-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-password-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-password-field input:-webkit-autofill,
+	vaadin-password-field input:-webkit-autofill::first-line,
+	vaadin-password-field input:-webkit-autofill:hover,
+	vaadin-password-field input:-webkit-autofill:active,
+	vaadin-password-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
+		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-password-field > label,
+	vaadin-password-field::part(input-field) {
+		cursor: pointer;
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-password-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+export default PasswordField;

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

@@ -0,0 +1,6 @@
+import "@vaadin/password-field";
+import PasswordField, { componentName } from "./PasswordField";
+
+customElements.define(componentName, PasswordField);
+
+export { PasswordField };

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

@@ -0,0 +1,81 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+
+export const componentName = getComponentName('switch-toggle');
+
+let overrides = ``;
+
+const SwitchToggle = compose(
+	createStyleMixin({
+		mappings: {
+			width: {},
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	:host {
+		--margin: 7px;
+		--width: var(${SwitchToggle.cssVarList.width});
+		--height: calc(var(--width) / 2);
+		--radius: var(--height);
+		--knobSize: calc(var(--height) - 5px);
+		--bgColor: #fff;
+		--knobBgColor: #000;
+	}
+	vaadin-checkbox>label {
+		cursor: pointer;
+		border: 1px solid;
+		text-indent: -99999px;
+		display: block;
+		position: relative;			
+		width: var(--width);
+		height: var(--height);
+		background: var(--bgColor);
+		border-radius: var(--radius);
+	}
+	vaadin-checkbox>label::after {
+		content: '';
+		position: absolute;
+		transition: 0.3s;
+		top: var(--margin);
+		left: var(--margin);
+		width: var(--knobSize);
+		height: var(--knobSize);
+		background: var(--knobBgColor);
+		border-radius: var(--knobSize);
+	}
+	vaadin-checkbox::part(checkbox) {
+		height: 0;
+		width: 0;
+		visibility: hidden;
+	}
+	vaadin-checkbox[checked]>label::after {
+		transform: translateX(-100%);
+		left: calc(100% - var(--margin));
+	}
+	vaadin-checkbox[active]>label::after {
+		width: calc(var(--knobSize) + 15px);
+	}
+`;
+
+export default SwitchToggle;

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

@@ -0,0 +1,6 @@
+import "@vaadin/checkbox";
+import SwitchToggle, { componentName } from "./SwitchToggle";
+
+customElements.define(componentName, SwitchToggle);
+
+export { SwitchToggle };

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

@@ -0,0 +1,66 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+
+export const componentName = getComponentName('text-area');
+
+const selectors = {
+	label: '::part(label)',
+	input: ':not([disabled])::part(input-field)',
+	required: '::part(required-indicator)::after'
+};
+
+let overrides = ``;
+
+const TextArea = compose(
+	createStyleMixin({
+		mappings: {
+			resize: { selector: '> textarea' },
+			color: { selector: selectors.label },
+			cursor: {},
+			width: {},
+			backgroundColor: { selector: selectors.input },
+			borderWidth: { selector: selectors.input },
+			borderStyle: { selector: selectors.input },
+			borderColor: { selector: selectors.input },
+			borderRadius: { selector: selectors.input },
+			outline: { selector: selectors.input },
+			outlineOffset: { selector: selectors.input }
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-area',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	vaadin-text-area {
+		margin: 0;
+	}
+	vaadin-text-area > label,
+	vaadin-text-area::part(input-field) {
+		cursor: pointer;
+	}
+	vaadin-text-area[focused] input:focus {
+		cursor: text;
+	}
+	vaadin-text-area::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+	}	
+`;
+export default TextArea;

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

@@ -0,0 +1,6 @@
+import "@vaadin/text-area";
+import TextArea, { componentName } from "./TextArea";
+
+customElements.define(componentName, TextArea);
+
+export { TextArea };

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

@@ -1,35 +1,105 @@
-import { getComponentName, createStyleMixin, draggableMixin, createProxy, inputMixin, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 
-export const componentName = getComponentName("text-field")
+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' }
+};
 
 const TextField = compose(
-  createStyleMixin({
-    mappings: {
-      'placeholderColor': { selector: '> input:placeholder-shown', property: 'color' },
-      'color': {},
-      'borderColor': { selector: '::part(input-field)' },
-      'borderWidth': { selector: '::part(input-field)' },
-      'borderStyle': { selector: '::part(input-field)' },
-      'borderRadius': { selector: '::part(input-field)' },
-      'boxShadow': { selector: '::part(input-field)' },
-      'height': { selector: '::part(input-field)' },
-      'padding': { selector: '::part(input-field)' },
-      'backgroundColor': { selector: '::part(input-field)' },
-      'labelColor': { selector: '::part(label)', property: 'color' },
-    },
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
 )(
-  createProxy({
-    slots: ["prefix", "suffix"],
-    wrappedEleName: "vaadin-text-field",
-    style: ``,
-    excludeAttrsSync: ['tabindex'],
-    componentName
-  })
+	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
+export default TextField;

package/src/componentsHelpers/createProxy/index.js

@@ -1,12 +1,17 @@
-import { syncAttrs } from "./helpers";
-
-export const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
+import { syncAttrs } from './helpers';
 
+export const createProxy = ({
+	componentName,
+	wrappedEleName,
+	slots = [],
+	style,
+	excludeAttrsSync = []
+}) => {
 	const template = `
-		${style ? `<style id="create-proxy">${style}</style>` : ''}
+		<style id="create-proxy"></style>
 		<${wrappedEleName}>
 		<slot></slot>
-		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
+		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
 		</${wrappedEleName}>
 	`;
 
@@ -16,21 +21,23 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 		}
 
 		constructor() {
-			super().attachShadow({ mode: "open" }).innerHTML = template;
+			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.componentName = this.hostElement.tagName.toLowerCase()
-			this.baseSelector = wrappedEleName
+			this.componentName = this.hostElement.tagName.toLowerCase();
+			this.baseSelector = wrappedEleName;
+			this.shadowRoot.getElementById('create-proxy').innerHTML =
+				typeof style === 'function' ? style() : style;
 		}
 
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 				this.setAttribute('tabindex', '0');
-				
+
 				// we want to focus on the proxy element when focusing our WC
 				this.onfocus = (e) => {
-					this.proxyElement.focus()
-				}
+					this.proxyElement.focus();
+				};
 
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -40,15 +47,18 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 						this.removeAttribute('tabindex');
 						// We want to defer the action of setting the tab index back
 						// so it will happen after focusing the previous element
-						setTimeout(() => this.setAttribute('tabindex', '0'), 0)
+						setTimeout(() => this.setAttribute('tabindex', '0'), 0);
 					}
-				}
+				};
 
 				this.mouseoverCbRef = () => {
 					this.proxyElement.setAttribute('hover', '');
-					this.proxyElement.addEventListener('mouseleave', () =>
-						this.proxyElement.removeAttribute('hover'), { once: true })
-				}
+					this.proxyElement.addEventListener(
+						'mouseleave',
+						() => this.proxyElement.removeAttribute('hover'),
+						{ once: true }
+					);
+				};
 
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
 
@@ -60,7 +70,7 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 		}
 
 		disconnectedCallback() {
-			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef)
+			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
 		}
 
 		attributeChangedCallback() {

package/src/componentsHelpers/createStyleMixin/index.js

@@ -43,7 +43,7 @@ export const createStyleMixin = ({  mappings = {} }) => (superclass) => {
     #createComponentStyle() {
       const themeStyle = document.createElement('style');
       themeStyle.id = 'style-mixin-component'
-      themeStyle.innerHTML = createStyle(superclass.componentName, baseSelector, mappings)
+      themeStyle.innerHTML = createStyle(superclass.componentName, this.baseSelector, mappings)
       this.shadowRoot.prepend(themeStyle);
     }
 

package/src/componentsHelpers/index.js

@@ -1,12 +1,15 @@
-import { DESCOPE_PREFIX } from "../constants";
-import { kebabCaseJoin } from "../helpers";
+import { DESCOPE_PREFIX } from '../constants';
+import { kebabCaseJoin } from '../helpers';
 
-export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name)
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-export const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
+export const compose =
+	(...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
 
-export { createStyleMixin } from './createStyleMixin'
-export { draggableMixin } from './draggableMixin'
-export { createProxy } from './createProxy'
-export { inputMixin } from './inputMixin'
-export { componentNameValidationMixin } from './componentNameValidationMixin'
+export { createStyleMixin } from './createStyleMixin';
+export { draggableMixin } from './draggableMixin';
+export { createProxy } from './createProxy';
+export { inputMixin } from './inputMixin';
+export { componentNameValidationMixin } from './componentNameValidationMixin';

package/src/componentsHelpers/inputMixin.js

@@ -1,46 +1,47 @@
 export const inputMixin = (superclass) =>
-  class InputMixinClass extends superclass {
+	class InputMixinClass extends superclass {
 		static get formAssociated() {
 			return true;
 		}
-    
-    #internals
 
-    constructor() {
-      super();
+		#internals;
 
-      this.#internals = this.attachInternals();
+		constructor() {
+			super();
 
-      // this is needed in order to make sure the form input validation is working
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', 0);
-      }
-    }
-
-    formAssociatedCallback() {
-      this.setValidity?.();
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
-
-      // 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')
-      if (!input) throw Error('no input was found')
-
-      this.checkValidity = () => input.checkValidity()
-      this.reportValidity = () => input.reportValidity()
-      this.validity = input.validity
-
-      this.setValidity = () => {
-        this.#internals.setValidity(input.validity, input.validationMessage);
-      }
+			this.#internals = this.attachInternals();
+		}
 
-      input.oninput = () => {
-        this.value = input.value
-        this.setValidity()
-      }
+		formAssociatedCallback() {
+			this.setValidity?.();
+		}
 
-    }
-  }
+		connectedCallback() {
+			super.connectedCallback?.();
+
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				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');
+			if (!input) throw Error('no input was found');
+
+			this.checkValidity = () => input.checkValidity();
+			this.reportValidity = () => input.reportValidity();
+			this.validity = input.validity;
+
+			this.setValidity = () => {
+				this.#internals.setValidity(input.validity, input.validationMessage);
+			};
+
+			input.oninput = () => {
+				this.value = input.value;
+				this.setValidity();
+			};
+		}
+	};

package/src/index.js

@@ -1,9 +1,17 @@
 import "./components/descope-button";
 import "./components/descope-combo";
 import "./components/descope-text-field";
+import "./components/descope-number-field";
+import "./components/descope-email-field";
+import "./components/descope-password-field";
+import "./components/descope-text-area";
 import "./components/descope-date-picker";
 import "./components/descope-container";
 
-export { globalsThemeToStyle, componentsThemeToStyle, themeToStyle } from './themeHelpers'
-export { genColor } from './themeHelpers/processColors'
-export { default as defaultTheme } from './theme'
+export {
+	globalsThemeToStyle,
+	componentsThemeToStyle,
+	themeToStyle,
+} from "./themeHelpers";
+export { genColor } from "./themeHelpers/processColors";
+export { default as defaultTheme } from "./theme";