@vaadin/field-base 25.3.0-rc1 → 25.4.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.3.0-rc1",
+  "version": "25.4.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-rc1",
-    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/a11y-base": "25.4.0-alpha1",
+    "@vaadin/component-base": "25.4.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-rc1",
-    "@vaadin/input-container": "25.3.0-rc1",
-    "@vaadin/test-runner-commands": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.4.0-alpha1",
+    "@vaadin/input-container": "25.4.0-alpha1",
+    "@vaadin/test-runner-commands": "25.4.0-alpha1",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
+  "gitHead": "be38ec1866e96508f3f4591f95c949ef55903a34"
 }

package/src/input-control-mixin.d.ts

@@ -76,4 +76,11 @@ export declare class InputControlMixinClass {
    * The text usually displayed in a tooltip popup when the mouse is over the field.
    */
   title: string;
+
+  /**
+   * Returns true when pasted, dropped or inserted text passes `allowedCharPattern`.
+   * Only called while the pattern is set. Override to accept text that the raw
+   * pattern test would reject.
+   */
+  protected _shouldAcceptText(text: string): boolean;
 }

package/src/input-control-mixin.js

@@ -186,6 +186,18 @@ export const InputControlMixin = (superclass) =>
       });
     }
 
+    /**
+     * Returns true when pasted, dropped or inserted text passes `allowedCharPattern`.
+     * Only called while the pattern is set. Override to accept text that the raw
+     * pattern test would reject.
+     * @param {string} text
+     * @return {boolean}
+     * @protected
+     */
+    _shouldAcceptText(text) {
+      return this.__allowedTextRegExp.test(text);
+    }
+
     /** @private */
     __shouldAcceptKey(event) {
       return (
@@ -201,7 +213,7 @@ export const InputControlMixin = (superclass) =>
     _onPaste(e) {
       if (this.allowedCharPattern) {
         const pastedText = e.clipboardData.getData('text');
-        if (!this.__allowedTextRegExp.test(pastedText)) {
+        if (!this._shouldAcceptText(pastedText)) {
           e.preventDefault();
           this._markInputPrevented();
         }
@@ -212,7 +224,7 @@ export const InputControlMixin = (superclass) =>
     _onDrop(e) {
       if (this.allowedCharPattern) {
         const draggedText = e.dataTransfer.getData('text');
-        if (!this.__allowedTextRegExp.test(draggedText)) {
+        if (!this._shouldAcceptText(draggedText)) {
           e.preventDefault();
           this._markInputPrevented();
         }
@@ -225,7 +237,7 @@ export const InputControlMixin = (superclass) =>
       // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
       // because it seems to be the only way to detect and prevent specific keys on mobile devices.
       // See https://github.com/vaadin/vaadin-text-field/issues/429
-      if (this.allowedCharPattern && e.data && !this.__allowedTextRegExp.test(e.data)) {
+      if (this.allowedCharPattern && e.data && !this._shouldAcceptText(e.data)) {
         e.preventDefault();
         this._markInputPrevented();
       }

package/src/styles/checkable-base-styles.js

@@ -24,6 +24,10 @@ export const checkable = (part, propName = part) => css`
     column-gap: 0;
   }
 
+  :host([data-form-layout-has-labels-aside]) {
+    padding-inline-start: calc(var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing));
+  }
+
   [part='${unsafeCSS(part)}'],
   ::slotted(input),
   [part='label'],
@@ -64,6 +68,7 @@ export const checkable = (part, propName = part) => css`
   /* Baseline vertical alignment */
   :host::before {
     grid-row: 1;
+    grid-column: 1;
     margin: 0;
     padding: 0;
     border: 0;

package/src/styles/field-base-styles.d.ts

@@ -6,3 +6,5 @@
 import type { CSSResult } from 'lit';
 
 export const field: CSSResult;
+
+export const fieldLabelAside: CSSResult;

package/src/styles/field-base-styles.js

@@ -14,15 +14,19 @@ export const field = css`
     --_has-helper: ;
     --_no-error: initial;
     --_has-error: ;
+    --_rows-after-input: ;
     --_gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
     --_gap-s: round(var(--_gap) / 3, 2px);
     display: inline-grid;
     grid-template:
-      'label' auto var(--_helper-above-field, 'helper' auto) 'baseline' 0 'input' 1fr var(
-        --_helper-below-field,
-        'helper' auto
-      )
-      'error' auto / 100%;
+      '                           label' auto
+      var(--_helper-above-field, 'helper' auto)
+      '                           baseline' 0
+      '                           input' 1fr
+      var(--_rows-after-input)
+      var(--_helper-below-field, 'helper' auto)
+      '                           error' auto
+      / 100%;
     height: fit-content;
     outline: none;
     cursor: default;
@@ -52,7 +56,7 @@ export const field = css`
   /* Baseline alignment guide */
   :host::before {
     content: '\\2003' / '';
-    grid-column: 1;
+    grid-column: baseline;
     grid-row: 1 / baseline;
     align-self: end;
     font-size: var(--vaadin-input-field-value-font-size, inherit);
@@ -195,3 +199,39 @@ export const field = css`
     }
   }
 `;
+
+export const fieldLabelAside = css`
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) {
+    --_label-aside-width: 0px;
+    --_label-aside-gap: 0px;
+
+    grid-template:
+      var(--_helper-above-field, '.     helper' auto)
+      '                           .     baseline' 0
+      '                           label input' 1fr
+      var(--_rows-after-input)
+      var(--_helper-below-field, 'label helper' auto)
+      '                           label error' auto
+      / var(--_label-aside-width) minmax(0, 1fr);
+    column-gap: var(--_label-aside-gap);
+  }
+
+  :host(:is([theme~='label-aside'][has-label], [data-form-layout-has-labels-aside])) {
+    --_label-aside-width: var(--vaadin-input-field-label-aside-width, auto);
+    --_label-aside-gap: var(--vaadin-input-field-label-aside-gap, 1em);
+  }
+
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='label'] {
+    width: auto;
+    min-width: auto;
+    align-self: baseline;
+    margin-bottom: 0;
+    text-align: var(--vaadin-input-field-label-aside-text-align, inherit);
+  }
+
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='input-field'],
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='group-field'],
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='input-fields'] {
+    align-self: baseline;
+  }
+`;

package/src/styles/group-base-styles.js

@@ -26,4 +26,9 @@ export const group = css`
     padding-block: var(--vaadin-padding-block-container);
     border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;
   }
+
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='group-field'] {
+    padding-block-start: var(--vaadin-padding-block-container);
+    border-block-start: var(--vaadin-input-field-border-width, 1px) solid transparent;
+  }
 `;

package/src/styles/input-field-shared-styles.js

@@ -4,6 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { button } from './button-base-styles.js';
-import { field } from './field-base-styles.js';
+import { field, fieldLabelAside } from './field-base-styles.js';
 
-export const inputFieldShared = [field, button];
+export const inputFieldShared = [field, fieldLabelAside, button];