com.github.fluorumlabs.disconnect.vaadin.TextField Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation

Vaadin components bindings for Disconnect Zero

The newest version!

package com.github.fluorumlabs.disconnect.vaadin;

import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.vaadin.elements.TextFieldElement;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasTextFieldMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.ThemeVariant;
import com.github.fluorumlabs.disconnect.zero.component.*;
import js.extras.JsEnum;

import javax.annotation.Nullable;

/**
 * <vaadin-text-field> is a Web Component for text field control in forms.
 *
 * <vaadin-text-field label="First Name">
 * </vaadin-text-field>
 * 
 * Prefixes and suffixes
 * These are child elements of a <vaadin-text-field> that are displayed
 * inline with the input, before or after.
 * In order for an element to be considered as a prefix, it must have the slot
 * attribute set to prefix (and similarly for suffix).
 *
 * <vaadin-text-field label="Email address">
 *   <div slot="prefix">Sent to:</div>
 *   <div slot="suffix">@vaadin.com</div>
 * </vaadin-text-area>
 * 
 * Styling
 * The following custom properties are available for styling:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Custom property Description Default
--vaadin-text-field-default-width Set the default width of the input
 * field 12em
 * The following shadow DOM parts are available for styling:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Part name Description
label The label element
input-field The element that wraps prefix, value and suffix
value The text value element inside the input-field element
error-message The error message element
 * The following state attributes are available for styling:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Attribute Description Part name
disabled Set to a disabled text field :host
has-value Set when the element has a value :host
has-label Set when the element has a label :host
invalid Set when the element is invalid :host
input-prevented Temporarily set when invalid input is prevented :host
focused Set when the element is focused :host
focus-ring Set when the element is keyboard focused :host
readonly Set to a readonly text field :host
 * See
 * ThemableMixin – how to apply styles for shadow parts
 */
@WebComponent
public class TextField extends AbstractComponent
		implements HasTextFieldMixin,
		HasThemableMixin,
		HasSlots,
		HasStyle, HasComponents> {
	public TextField() {
		super(TextFieldElement.TAGNAME());
	}

	/**
	 * Identifies a list of pre-defined options to suggest to the user.
	 * The value must be the id of a  element in the same document.
	 */
	@Nullable
	public String list() {
		return getNode().getList();
	}

	/**
	 * Identifies a list of pre-defined options to suggest to the user.
	 * The value must be the id of a  element in the same document.
	 */
	public TextField list(String list) {
		getNode().setList(list);
		return this;
	}

	/**
	 * A regular expression that the value is checked against.
	 * The pattern must match the entire value, not just some subset.
	 */
	@Nullable
	public String pattern() {
		return getNode().getPattern();
	}

	/**
	 * A regular expression that the value is checked against.
	 * The pattern must match the entire value, not just some subset.
	 */
	public TextField pattern(String pattern) {
		getNode().setPattern(pattern);
		return this;
	}

	/**
	 * The text usually displayed in a tooltip popup when the mouse is over the field.
	 */
	@Nullable
	public String title() {
		return getNode().getTitle();
	}

	/**
	 * The text usually displayed in a tooltip popup when the mouse is over the field.
	 */
	public TextField title(String title) {
		getNode().setTitle(title);
		return this;
	}

	public HasSlots.Container prefixSlot() {
		return slotted("prefix");
	}

	public HasSlots.Container inputSlot() {
		return slotted("input");
	}

	public HasSlots.Container suffixSlot() {
		return slotted("suffix");
	}

	public abstract static class Variant extends ThemeVariant {
		public static final Variant SMALL = JsEnum.of("small");
		public static final Variant ALIGN_CENTER = JsEnum.of("align-center");
		public static final Variant ALIGN_RIGHT = JsEnum.of("align-right");
	}

}

Part name	Description
`label`	The label element
`input-field`	The element that wraps prefix, value and suffix
`value`	The text value element inside the `input-field` element
`error-message`	The error message element

Attribute	Description	Part name
`disabled`	Set to a disabled text field	:host
`has-value`	Set when the element has a value	:host
`has-label`	Set when the element has a label	:host
`invalid`	Set when the element is invalid	:host
`input-prevented`	Temporarily set when invalid input is prevented	:host
`focused`	Set when the element is focused	:host
`focus-ring`	Set when the element is keyboard focused	:host
`readonly`	Set to a readonly text field	:host