@descope/web-components-ui 1.0.39 → 1.0.41

package/src/components/descope-container/Container.js

@@ -1,57 +1,63 @@
-import { getComponentName, createStyleMixin, draggableMixin, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
 
-export const componentName = getComponentName("container");
+export const componentName = getComponentName('container');
 
 class RawContainer extends HTMLElement {
-  static get componentName() {
-    return componentName
-  }
-  constructor() {
-    super();
-    const template = document.createElement('template');
-    template.innerHTML = `<slot></slot>`;
-
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    this.baseSelector = ':host > slot'
-  }
+	static get componentName() {
+		return componentName;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `<slot></slot>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
 }
 
 const Container = compose(
-  createStyleMixin({
-    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
-    mappings: {
-      'height': {},
-      'width': {},
-
-      'verticalPadding': [
-        { property: 'padding-top' },
-        { property: 'padding-bottom' }
-      ],
-      'horizontalPadding': [
-        { property: 'padding-left' },
-        { property: 'padding-right' }
-      ],
-
-      'display': {},
-      'flexDirection': {},
-      'justifyContent': {},
-      'alignItems': {},
-      'gap': {},
-
-      'backgroundColor': {},
-      'borderRadius': {},
-
-      'borderColor': {},
-      'borderStyle': {},
-      'borderWidth': {},
-
-      'boxShadow': {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-)(RawContainer)
-
-export default Container
+	createStyleMixin({
+		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+		mappings: {
+			height: {},
+			width: {},
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			display: {},
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+
+			backgroundColor: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawContainer);
+
+export default Container;

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

@@ -2,4 +2,4 @@ import Container, { componentName } from './Container';
 
 customElements.define(componentName, Container);
 
-export { Container }
+export { Container };

package/src/components/descope-date-picker/index.js

@@ -1,7 +1,13 @@
-import "@vaadin/date-picker";
-import { getComponentName, draggableMixin, createProxy, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import '@vaadin/date-picker';
+import {
+	getComponentName,
+	draggableMixin,
+	createProxy,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
 
-const componentName = getComponentName("date-picker");
+const componentName = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
@@ -9,12 +15,12 @@ const DatePicker = compose(
 )(
 	createProxy({
 		componentName,
-		slots: ["prefix", "suffix"],
-		wrappedEleName: "vaadin-date-picker",
-		style: ``,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
 	})
 );
 
 customElements.define(componentName, DatePicker);
 
-export { DatePicker }
+export { DatePicker };

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

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

@@ -0,0 +1,6 @@
+import '@vaadin/email-field';
+import EmailField, { componentName } from './EmailField';
+
+customElements.define(componentName, EmailField);
+
+export { EmailField };

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 };