@descope/web-components-ui 1.0.98 → 1.0.100

package/dist/index.esm.js

@@ -308,6 +308,10 @@ const createStyleMixin =
 				this.#styleAttributes = Object.keys(mappings).map((key) =>
 					kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
 				);
+
+				this.#createMappingStyle();
+				this.#createComponentTheme();
+				this.#createOverridesStyle();
 			}
 
 			get componentTheme() {
@@ -378,15 +382,8 @@ const createStyleMixin =
 			init() {
 				super.init?.();
 				if (this.shadowRoot.isConnected) {
-
 					this.#addClassName(superclass.componentName);
 
-					// TODO: we should do everything we can on the constructor
-					// when dragging & dropping these styles are created over & over
-					this.#createMappingStyle();
-					this.#createComponentTheme();
-					this.#createOverridesStyle();
-
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
 					observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
 				}
@@ -423,22 +420,24 @@ const draggableMixin = (superclass) =>
 			}
 		}
 
-		get #isDraggable() {
+		get isDraggable() {
 			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
 		}
 
 		init() {
-
 			// because we are delegating the focus from the outer component, 
 			// the D&D is not working well in the page editor
 			// in order to solve it we are making the inner component focusable on mouse down
 			// and removing it on complete
 			this.addEventListener('mousedown', (e) => {
-				if (this.#isDraggable) {
+				if (this.isDraggable) {
+					const prevTabIndex = this.baseElement.getAttribute('tabindex');
 					this.baseElement.setAttribute('tabindex', '-1');
 
 					const onComplete = () => {
-						this.baseElement.removeAttribute('tabindex');
+						prevTabIndex ?
+							this.baseElement.setAttribute('tabindex', prevTabIndex) :
+							this.baseElement.removeAttribute('tabindex');
 
 						e.target.removeEventListener('mouseup', onComplete);
 						e.target.removeEventListener('dragend', onComplete);
@@ -701,7 +700,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
   }
 
   #setValidity() {
-    const validity = this.getValidity();
+    const validity = this.isReadOnly ? {} : this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
   }
 
@@ -742,6 +741,10 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
   }
 
+  get isReadOnly() {
+    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+  }
+
   get pattern() {
     return this.getAttribute('pattern')
   }
@@ -879,7 +882,7 @@ const proxyInputMixin = (superclass) =>
 				this.#dispatchChange();
 			});
 
-			this.addEventListener('blur', () => {
+			this.#inputElement.addEventListener('blur', () => {
 				if (!this.checkValidity()) {
 					this.setAttribute('invalid', 'true');
 					this.#handleErrorMessage();
@@ -989,25 +992,6 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
   }
 };
 
-const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
-
-  init() {
-    ['focus', 'blur'].forEach(event => {
-      this.addEventListener(event, (e) => {
-        if (this.isReadOnly) {
-          e.stopImmediatePropagation();
-          e.preventDefault();
-        }
-      }, true);
-    });
-
-    super.init?.();
-  }
-};
-
 const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
   init() {
     this.#blockNativeEvents();
@@ -1190,7 +1174,6 @@ customElements.define(componentName$o, Button);
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
   changeMixin,
-  readOnlyMixin,
   normalizeBooleanAttributesMixin,
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
@@ -1999,7 +1982,6 @@ const componentName$d = getComponentName('link');
 class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
 	constructor() {
 		super();
-		document.createElement('template');
 
 		this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
@@ -2033,7 +2015,7 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
 }
 
 const selectors = {
-	host: { selector: () => 'host' },
+	host: { selector: () => ':host' },
 	anchor: {},
 	wrapper: {selector: () => ':host > div'},
 	text: { selector: () => Text.componentName }
@@ -2507,8 +2489,8 @@ const customMixin$2 = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedValidDigitField } = {
-	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
+const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
+	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -2535,7 +2517,10 @@ const Passcode = compose(
 			textAlign: { ...digitField, property: textVars$1.textAlign },
 			caretColor: { ...digitField, property: textVars$1.caretColor },
 			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedValidDigitFieldBorderColor: { ...focusedValidDigitField, property: textVars$1.borderColor }
+			focusedDigitFieldBorderColor: [
+				{ ...focusedDigitField, property: textVars$1.borderColor },
+				{ ...focusedDigitField, property: textVars$1.outlineColor }
+			]
 		},
 	}),
 	draggableMixin,
@@ -2620,6 +2605,38 @@ customElements.define(componentName$a, PasscodeInternal);
 
 customElements.define(componentName$8, Passcode);
 
+const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
+	get isReadOnly() {
+		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+	}
+
+	init() {
+		// there is an issue in Chrome that input field with type password cannot be D&D
+		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
+		// and return the original type when done
+		this.addEventListener('mousedown', (e) => {
+			if (this.isDraggable & this.isReadOnly) {
+				const inputEle = this.baseElement.querySelector('input');
+
+				const prevType = inputEle.getAttribute('type');
+				inputEle.setAttribute('type', 'text');
+
+				const onComplete = () => {
+					inputEle.setAttribute('type', prevType);
+
+					e.target.removeEventListener('mouseup', onComplete);
+					e.target.removeEventListener('dragend', onComplete);
+				};
+
+				e.target.addEventListener('mouseup', onComplete, { once: true });
+				e.target.addEventListener('dragend', onComplete, { once: true });
+			}
+		});
+
+		super.init?.();
+	}
+};
+
 const componentName$7 = getComponentName('password-field');
 
 const {
@@ -2645,6 +2662,7 @@ const {
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
+			width: { selector: host$4 },
 			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
 			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
@@ -2666,35 +2684,49 @@ const PasswordField = compose(
 				{ ...label$3, property: 'cursor' },
 				{ ...requiredIndicator$2, property: 'cursor' }
 			],
+			outlineColor: { ...inputWrapper$1 },
+			outlineStyle: { ...inputWrapper$1 },
+			outlineWidth: [
+				{ ...inputWrapper$1 },
+				// we need to make sure there is enough space for the outline
+				{ property: 'padding' }
+			],
+			backgroundColor: inputWrapper$1
 		}
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	passwordDraggableMixin
 )(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
 		style: `
 			:host {
-				display: inline-block;
+				display: inline-flex;
 			}
 			vaadin-password-field {
 				width: 100%;
-				padding: 0;
 			}
 			vaadin-password-field > input {
 				min-height: 0;
 			}
-			vaadin-password-field::part(input-field) {
-				background: transparent;
+
+			vaadin-password-field[readonly] > input:placeholder-shown {
+				opacity: 1;
 			}
+
 			vaadin-password-field::part(input-field)::after {
 				opacity: 0;
 			}	
 			vaadin-password-field::before {
 				height: initial;
 			}
+
+			vaadin-password-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$7
@@ -5383,6 +5415,11 @@ const passwordField = {
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
 	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
+	[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
+
+	[vars$e.outlineWidth]: '2px',
+	[vars$e.outlineStyle]: 'solid',
+	[vars$e.outlineColor]: 'transparent',
 
 	[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
 	[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
@@ -5424,11 +5461,16 @@ const passwordField = {
 		[vars$e.width]: '100%'
 	},
 
+	_focused: {
+		[vars$e.outlineColor]: globalRefs$d.colors.surface.main
+	},
+
 	_invalid: {
 		[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
 		[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
 		[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
+		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main,
+		[vars$e.outlineColor]: globalRefs$d.colors.error.main,
 	},
 };
 
@@ -5910,12 +5952,13 @@ const globalRefs$5 = getThemeRefs(globals);
 const passcode = {
 	[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
 	[vars$5.outlineWidth]: '2px',
-	[vars$5.outlineColor]: globalRefs$5.colors.primary.main,
+	[vars$5.outlineColor]: 'transparent',
 	[vars$5.padding]: '0',
 	[vars$5.textAlign]: 'center',
 	[vars$5.borderColor]: 'transparent',
 	[vars$5.digitsGap]: '4px',
-	[vars$5.focusedValidDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
+	[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
+	[vars$5.color]: globalRefs$5.colors.surface.contrast,
 
 	_hideCursor: {
 		[vars$5.caretColor]: 'transparent',
@@ -5936,7 +5979,7 @@ const passcode = {
 	_invalid: {
 		[vars$5.borderColor]: globalRefs$5.colors.error.main,
 		[vars$5.color]: globalRefs$5.colors.error.main,
-		[vars$5.outlineColor]: globalRefs$5.colors.error.light,
+		[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.error.light,
 	},
 };