com.github.fluorumlabs.disconnect.vaadin.TimePicker Maven / Gradle / Ivy
Show all versions of disconnect-vaadin Show documentation
package com.github.fluorumlabs.disconnect.vaadin;
import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.polymer.types.BooleanPropertyChangeEvent;
import com.github.fluorumlabs.disconnect.polymer.types.StringPropertyChangeEvent;
import com.github.fluorumlabs.disconnect.vaadin.elements.TimePickerElement;
import com.github.fluorumlabs.disconnect.vaadin.i18n.TimePickerI18n;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasControlStateMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasElementMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasThemableMixin;
import com.github.fluorumlabs.disconnect.zero.component.AbstractComponent;
import com.github.fluorumlabs.disconnect.zero.component.Component;
import com.github.fluorumlabs.disconnect.zero.component.HasComponents;
import com.github.fluorumlabs.disconnect.zero.component.HasStyle;
import com.github.fluorumlabs.disconnect.zero.observable.ObservableEvent;
import js.web.dom.Element;
import javax.annotation.Nullable;
/**
* <vaadin-time-picker> is a Web Component providing a time-selection field.
*
* <vaadin-time-picker></vaadin-time-picker>
*
* timePicker.value = '14:30';
*
* When the selected value is changed, a value-changed event is triggered.
*
* Styling
* The following custom properties are available for styling:
*
*
*
* Part name Description toggle-buttonThe toggle button
* See
* ThemableMixin – how to apply styles for shadow parts
*
* The following state attributes are available for styling:
*
*
*
* Attribute Description Part name disabledSet to a disabled time picker :host readonlySet to a read only time picker :host invalidSet when the element is invalid :host focusedSet when the element is focused :host focus-ringSet when the element is keyboard focused :host
* In addition to <vaadin-time-picker> itself, the following internal
* components are themable:
*
*
* <vaadin-time-picker-text-field>, see
* <vaadin-text-field> documentation
* for the text field parts.<vaadin-combo-box-light>, see
* <vaadin-combo-box> documentation
* for the combo box parts.
* Note: the theme attribute value set on <vaadin-time-picker> is
* propagated to the internal themable components listed above.
*/
@WebComponent
public class TimePicker extends AbstractComponent
implements HasElementMixin,
HasControlStateMixin,
HasThemableMixin,
HasStyle, HasComponents> {
public TimePicker() {
super(TimePickerElement.TAGNAME());
}
/**
* Focusable element used by vaadin-control-state-mixin
*/
public Element focusElement() {
return getNode().getFocusElement();
}
/**
* The name of this element.
*/
@Nullable
public String name() {
return getNode().getName();
}
/**
* The name of this element.
*/
public TimePicker name(String name) {
getNode().setName(name);
return this;
}
/**
* The time value for this element.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mm (default)hh:mm:sshh:mm:ss.fff
*/
@Nullable
public String value() {
return getNode().getValue();
}
/**
* The time value for this element.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mm (default)hh:mm:sshh:mm:ss.fff
*/
public TimePicker value(String value) {
getNode().setValue(value);
return this;
}
/**
* The label for this element.
*/
@Nullable
public String label() {
return getNode().getLabel();
}
/**
* The label for this element.
*/
public TimePicker label(String label) {
getNode().setLabel(label);
return this;
}
/**
* Set to true to mark the input as required.
*/
public boolean required() {
return getNode().isRequired();
}
/**
* Set to true to mark the input as required.
*/
public TimePicker required(boolean required) {
getNode().setRequired(required);
return this;
}
/**
* Set to true to disable this input.
*/
public boolean disabled() {
return getNode().isDisabled();
}
/**
* Set to true to disable this input.
*/
public TimePicker disabled(boolean disabled) {
getNode().setDisabled(disabled);
return this;
}
/**
* Set to true to prevent the user from entering invalid input.
*/
public boolean preventInvalidInput() {
return getNode().isPreventInvalidInput();
}
/**
* Set to true to prevent the user from entering invalid input.
*/
public TimePicker preventInvalidInput(boolean preventInvalidInput) {
getNode().setPreventInvalidInput(preventInvalidInput);
return this;
}
/**
* A pattern to validate the input with.
*/
@Nullable
public String pattern() {
return getNode().getPattern();
}
/**
* A pattern to validate the input with.
*/
public TimePicker pattern(String pattern) {
getNode().setPattern(pattern);
return this;
}
/**
* The error message to display when the input is invalid.
*/
@Nullable
public String errorMessage() {
return getNode().getErrorMessage();
}
/**
* The error message to display when the input is invalid.
*/
public TimePicker errorMessage(String errorMessage) {
getNode().setErrorMessage(errorMessage);
return this;
}
/**
* A placeholder string in addition to the label.
*/
@Nullable
public String placeholder() {
return getNode().getPlaceholder();
}
/**
* A placeholder string in addition to the label.
*/
public TimePicker placeholder(String placeholder) {
getNode().setPlaceholder(placeholder);
return this;
}
/**
* Set to true to prevent user picking a date or typing in the input.
*/
public boolean readonly() {
return getNode().isReadonly();
}
/**
* Set to true to prevent user picking a date or typing in the input.
*/
public TimePicker readonly(boolean readonly) {
getNode().setReadonly(readonly);
return this;
}
/**
* Set to true if the value is invalid.
*/
public boolean invalid() {
return getNode().isInvalid();
}
/**
* Set to true if the value is invalid.
*/
public TimePicker invalid(boolean invalid) {
getNode().setInvalid(invalid);
return this;
}
/**
* Minimum time allowed.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mmhh:mm:sshh:mm:ss.fff
*/
@Nullable
public String min() {
return getNode().getMin();
}
/**
* Minimum time allowed.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mmhh:mm:sshh:mm:ss.fff
*/
public TimePicker min(String min) {
getNode().setMin(min);
return this;
}
/**
* Maximum time allowed.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mmhh:mm:sshh:mm:ss.fff
*/
@Nullable
public String max() {
return getNode().getMax();
}
/**
* Maximum time allowed.
*
* Supported time formats are in ISO 8601:
*
*
* hh:mmhh:mm:sshh:mm:ss.fff
*/
public TimePicker max(String max) {
getNode().setMax(max);
return this;
}
/**
* Specifies the number of valid intervals in a day used for
* configuring the items displayed in the selection box.
*
* It also configures the precision of the value string. By default
* the component formats values as hh:mm but setting a step value
* lower than one minute or one second, format resolution changes to
* hh:mm:ss and hh:mm:ss.fff respectively.
*
* Unit must be set in seconds, and for correctly configuring intervals
* in the dropdown, it need to evenly divide a day.
*
* Note: it is possible to define step that is dividing an hour in inexact
* fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
* not recommended to use it for better UX experience.
*/
public double step() {
return getNode().getStep();
}
/**
* Specifies the number of valid intervals in a day used for
* configuring the items displayed in the selection box.
*
* It also configures the precision of the value string. By default
* the component formats values as hh:mm but setting a step value
* lower than one minute or one second, format resolution changes to
* hh:mm:ss and hh:mm:ss.fff respectively.
*
* Unit must be set in seconds, and for correctly configuring intervals
* in the dropdown, it need to evenly divide a day.
*
* Note: it is possible to define step that is dividing an hour in inexact
* fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
* not recommended to use it for better UX experience.
*/
public TimePicker step(double step) {
getNode().setStep(step);
return this;
}
/**
* Set to true to display the clear icon which clears the input.
*/
public boolean clearButtonVisible() {
return getNode().isClearButtonVisible();
}
/**
* Set to true to display the clear icon which clears the input.
*/
public TimePicker clearButtonVisible(boolean clearButtonVisible) {
getNode().setClearButtonVisible(clearButtonVisible);
return this;
}
/**
* The object used to localize this component.
* To change the default localization, replace the entire
* i18n object or just the property you want to modify.
*
* The object has the following JSON structure:
*
*
{
* // A function to format given `Object` as
* // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
* formatTime: (time) => {
* // returns a string representation of the given
* // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
* },
*
* // A function to parse the given text to an `Object` in the format
* // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
* // Must properly parse (at least) text
* // formatted by `formatTime`.
* parseTime: text => {
* // Parses a string in object/string that can be formatted by`formatTime`.
* }
*
* // Translation of the time selector icon button title.
* selector: 'Time selector',
*
* // Translation of the time selector clear button title.
* clear: 'Clear'
* }
*
*/
@Nullable
public TimePickerI18n i18n() {
return getNode().getI18n();
}
/**
* The object used to localize this component.
* To change the default localization, replace the entire
* i18n object or just the property you want to modify.
*
* The object has the following JSON structure:
*
*
{
* // A function to format given `Object` as
* // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
* formatTime: (time) => {
* // returns a string representation of the given
* // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
* },
*
* // A function to parse the given text to an `Object` in the format
* // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
* // Must properly parse (at least) text
* // formatted by `formatTime`.
* parseTime: text => {
* // Parses a string in object/string that can be formatted by`formatTime`.
* }
*
* // Translation of the time selector icon button title.
* selector: 'Time selector',
*
* // Translation of the time selector clear button title.
* clear: 'Clear'
* }
*
*/
public TimePicker i18n(TimePickerI18n i18n) {
getNode().setI18n(i18n);
return this;
}
/**
* Returns true if value is valid, and sets the invalid flag appropriately.
*
* @return True if the value is valid and sets the invalid flag appropriately
*/
public boolean validate() {
return getNode().validate();
}
/**
* Returns true if the current input value satisfies all constraints (if any)
*
* You can override the checkValidity method for custom validations.
*/
public boolean checkValidity() {
return getNode().checkValidity();
}
/**
* Fired when the value property changes.
*/
public ObservableEvent valueChangedEvent() {
return createEvent("value-changed");
}
/**
* Fired when the invalid property changes.
*/
public ObservableEvent invalidChangedEvent() {
return createEvent("invalid-changed");
}
}