@zeedhi/common 3.0.0 → 3.0.2

package/src/components/zd-time/time.ts

@@ -1,506 +1,528 @@
-import {
-  Config, FormatterParserProvider, I18n, dayjs, Mask,
-} from '@zeedhi/core';
+import { Config, FormatterParserProvider, I18n, Mask, dayjs } from '@zeedhi/core';
 import isUndefined from 'lodash.isundefined';
-import { ITime } from './interfaces';
+import { InputFactory } from '../zd-input/input-factory';
 import { TextInput } from '../zd-text-input/text-input';
+import { ITime } from './interfaces';
 import { TimeFormatSelector } from './time-format-selector';
-import { InputFactory } from '../zd-input/input-factory';
 
 /**
  * Base class for Time Picker component.
  */
 export class Time extends TextInput implements ITime {
-  /**
-   * Restricts which hours can be selected.
-   */
-  public allowedHours?: any[];
-
-  /**
-   * Restricts which minutes can be selected.
-   */
-  public allowedMinutes?: any[];
-
-  /**
-   * Restricts which seconds can be selected.
-   */
-  public allowedSeconds?: any[];
-
-  /**
-   * Input auto complete.
-   */
-  public autofill = false;
-
-  /**
-   * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
-   */
-  public timeFormat: string = Config.timeFormat || 'ampm'; // change props to pickerFormat
-
-  /**
-   * Forces 100% width.
-   */
-  public fullWidth = false;
-
-  /**
-   * Maximum allowed time.
-   */
-  public maxTime = '';
-
-  /**
-   * Minimum allowed time.
-   */
-  public minTime = '';
-
-  /**
-   * Allows changing hour/minute with mouse scroll.
-   */
-  public scrollable = false;
-
-  /**
-   * Shows the time picker.
-   */
-  public showTimePicker = false;
-
-  /**
-   * Toggles the use of seconds in picker.
-   */
-  public useSeconds = false;
-
-  /**
-   * Width of the picker.
-   */
-  public width: number | string = 290;
-
-  protected formatterFn = FormatterParserProvider.getFormatter('ZdTime');
-
-  protected parserFn = FormatterParserProvider.getParser('ZdTime');
-
-  private isoFormatValue = 'HH:mm';
-
-  private valueFormatInternal: string = Config.valueTimeFormat;
-
-  private displayFormatInternal: string = Config.displayTimeFormat;
-
-  /**
-   * Defines the time input format.
-   */
-  public inputFormat?: string = Config.timeInputFormat;
-
-  /**
-   * True when displayValue is valid
-   */
-  protected isDisplayValid = true;
-
-  protected initialMask?: string;
-
-  protected isSimpleDisplay!: boolean;
-
-  protected timeError = false;
-
-  /**
-   * Create a new Time Picker.
-   * @param props Time properties
-   */
-  constructor(props: ITime) {
-    super(props);
-    this.allowedHours = this.getInitValue('allowedHours', props.allowedHours, this.allowedHours);
-    this.allowedMinutes = this.getInitValue('allowedMinutes', props.allowedMinutes, this.allowedMinutes);
-    this.allowedSeconds = this.getInitValue('allowedSeconds', props.allowedSeconds, this.allowedSeconds);
-    this.timeFormat = this.getInitValue('timeFormat', props.timeFormat, this.timeFormat);
-    this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
-    this.maxTime = this.getInitValue('maxTime', props.maxTime, this.maxTime);
-    this.minTime = this.getInitValue('minTime', props.minTime, this.minTime);
-    this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
-    this.showTimePicker = this.getInitValue('showTimePicker', props.showTimePicker, this.showTimePicker);
-    this.useSeconds = this.getInitValue('useSeconds', props.useSeconds, this.useSeconds);
-    this.width = this.getInitValue('width', props.width, this.width);
-    this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-    this.timeValidation = this.timeValidation.bind(this);
-
-    this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormatInternal);
-    this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormatInternal);
-    this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
-
-    this.timeAllowedValidation = this.timeAllowedValidation.bind(this);
-    this.rules.push(this.timeValidation, this.timeAllowedValidation);
-    this.mask = this.getInitValue('mask', props.mask, undefined);
-
-    this.initialMask = this.getInitialMask();
-    this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
-  }
-
-  private getFormat(format: string, timeFormat: string) {
-    const timeFormatSelector = new TimeFormatSelector();
-    const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
-
-    return selectedFormat;
-  }
-
-  public get displayFormat() {
-    this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
-    return this.displayFormatInternal;
-  }
-
-  public set displayFormat(value: string) {
-    this.displayFormatInternal = value;
-  }
-
-  public get valueFormat() {
-    this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
-    return this.valueFormatInternal;
-  }
-
-  public set valueFormat(value: string) {
-    this.valueFormatInternal = value;
-  }
-
-  private get isoFormat() {
-    this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
-    return this.isoFormatValue;
-  }
-
-  private getInitialMask() {
-    if (isUndefined(this.mask)) {
-      this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
-    }
-
-    return this.mask;
-  }
-
-  public formatter(value: string): string { return this.formatterFn(value, this); }
-
-  public parser(value: string): any { return this.parserFn(value, this); }
-
-  /**
-   * Triggered when date is clicked.
-   * @param event
-   * @param element
-   */
-  public selectTime(time: string, event?: Event, element?: any) {
-    if (this.events.onSelectTime && typeof this.events.onSelectTime === 'function') {
-      this.events.onSelectTime({
-        time, event, element, component: this,
-      });
-    }
-  }
-
-  get displayValue() {
-    return this.internalDisplayValue;
-  }
-
-  set displayValue(newValue: string) {
-    this.timeError = false;
-    this.internalDisplayValue = newValue;
-    this.internalValue = this.parser(newValue);
-    this.value = this.internalValue; // forces value accessor to be called if necessary
-  }
-
-  /**
-   * Assign the updated mask to mask property
-   */
-  public updateMask() {
-    this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
-    this.mask = this.getUpdatedMask();
-    return this.mask;
-  }
-
-  /**
-   * Gets the updated masked, based on displayFormat if the initial mask is undefined
-   */
-  protected getUpdatedMask(): string {
-    if (isUndefined(this.initialMask)) {
-      return this.maskFormat(this.displayFormat);
-    }
-
-    return this.mask;
-  }
-
-  protected maskFormat(format: string) {
-    return format.replace(/[A-Za-z]/gi, '#');
-  }
-
-  public setTimeValue(displayValue: string) {
-    const lastValue = this.displayValue;
-    if (this.isValidTime(displayValue, this.displayFormat)) {
-      this.internalDisplayValue = displayValue;
-      this.internalValue = this.parser(displayValue);
-      this.timeError = false;
-      if (lastValue !== this.displayValue) this.change(this.value);
-    } else {
-      if (!displayValue) {
-        this.internalDisplayValue = displayValue;
-        this.internalValue = null;
-        if (lastValue !== this.displayValue) this.change(this.value);
-      }
-      this.timeError = !!displayValue;
-    }
-    this.value = this.internalValue; // forces value accessor to be called if necessary
-  }
-
-  public isValidTime(value: string, format: string | undefined, strict = true): boolean {
-    return dayjs(value, format, strict).isValid();
-  }
-
-  get isoValue() {
-    return this.formatISOTimeValue(this.value);
-  }
-
-  set isoValue(newValue: string) {
-    const lastValue = this.value;
-    this.timeError = false;
-    this.value = this.parseISOTimeValue(newValue);
-    if (lastValue !== this.value) this.change(this.value);
-  }
-
-  public formatISOTimeValue(value: string): string {
-    if (value && this.isValidTime(value, this.valueFormat)) {
-      return dayjs(value, this.valueFormat).format(this.isoFormat);
-    }
-    return '';
-  }
-
-  public parseISOTimeValue(value: string): any {
-    if (value && this.isValidTime(value, this.valueFormat)) {
-      return dayjs(value, this.isoFormat).format(this.valueFormat);
-    }
-    return null;
-  }
-
-  /**
- * Checks if a time format is simple.
- * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
- * @param format The format to be checked
- * @returns true if it is simple, false otherwise
- */
-  protected isSimpleFormat(format: string): boolean {
-    const simpleTokens = ['HH', 'mm', 'ss', 'hh', 'A', 'a', 'p', 'P'];
-    // remove the simple tokens from the string
-    const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
-    const chars = replaced.split('');
-    return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
-  }
-
-  public timeValidation(): boolean | string {
-    if (this.isValidTime(this.displayValue, this.displayFormat) || !this.displayValue) {
-      return true;
-    }
-    return I18n.translate('VALIDATION_INVALID_TIME');
-  }
-
-  public timeAllowedValidation(): boolean | string {
-    return !this.displayValue
-    || (
-      this.isValidTime(this.displayValue, this.displayFormat)
-      && this.isTimeAllowed()
-    )
-    || I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
-  }
-
-  public click(event?: Event, element?: any) {
-    const clickEvent = event || new MouseEvent('click');
-    super.click(clickEvent, element);
-    if (!clickEvent.defaultPrevented) {
-      this.showTimePicker = !this.showTimePicker;
-    }
-  }
-
-  public blur(event: Event, element: any) {
-    this.removeTimeMask();
-    this.setTimeValue(this.formatter(this.value));
-    super.blur(event, element);
-  }
-
-  public focus(event: Event, element: any) {
-    this.addTimeMask();
-    super.focus(event, element);
-  }
-
-  /**
-   * Add date mask
-   */
-  protected addTimeMask() {
-    if (!this.value) return;
-
-    this.mask = this.initialMask;
-    this.internalDisplayValue = dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
-  }
-
-  /**
-   * Removes the component mask if value is valid
-   */
-  protected removeTimeMask() {
-    if (
-      isUndefined(this.initialMask) || !this.value || this.timeError
-      || !this.isValidTime(this.value, this.valueFormat)
-    ) {
-      return;
-    }
-
-    this.mask = '';
-  }
-
-  /**
-   * Checks if value is valid according to valueFormat and if displayValue
-   * is true
-   */
-  public isFullyValid(value: string = this.value) {
-    return this.isValidTime(value, this.valueFormat, true) && this.isDisplayValid;
-  }
-
-  /**
-   * Last invalid value passed to formatter
-   */
-  // private lastInvalid: string = '';
-
-  public isTimeAllowed(value: string = this.value) {
-    return this.isSameOrAfterMin(value) && this.isSameOrBeforeMax(value)
-      && this.isHourAllowed(value) && this.isMinuteAllowed(value)
-      && this.isSecondAllowed(value);
-  }
-
-  public isSameOrAfterMin(value: string) {
-    if (!this.minTime) return true;
-
-    const min = dayjs(this.minTime, this.valueFormat);
-    return dayjs(value, this.valueFormat).isSame(min) || dayjs(value, this.valueFormat).isAfter(min);
-  }
-
-  public isSameOrBeforeMax(value: string) {
-    if (!this.maxTime) return true;
-
-    const max = dayjs(this.maxTime, this.valueFormat);
-    return dayjs(value, this.valueFormat).isSame(max) || dayjs(value, this.valueFormat).isBefore(max);
-  }
-
-  public isHourAllowed(value: string) {
-    if (!this.allowedHours) return true;
-
-    const hour = dayjs(value, this.valueFormat).hour();
-
-    return this.allowedHours.includes(hour);
-  }
-
-  public isMinuteAllowed(value: string) {
-    if (!this.allowedMinutes) return true;
-
-    const minute = dayjs(value, this.valueFormat).minute();
-
-    return this.allowedMinutes.includes(minute);
-  }
-
-  public isSecondAllowed(value: string) {
-    if (!this.allowedSeconds) return true;
-
-    const second = dayjs(value, this.valueFormat).second();
-
-    return this.allowedSeconds.includes(second);
-  }
-
-  public clear() {
-    this.value = null;
-    this.change(this.value);
-    if (typeof this.events?.onClear === 'function') {
-      this.events.onClear({
-        component: this,
-        value: this.value,
-      });
-    }
-  }
-  	/**
+	/**
+	 * Restricts which hours can be selected.
+	 */
+	public allowedHours?: any[];
+
+	/**
+	 * Restricts which minutes can be selected.
+	 */
+	public allowedMinutes?: any[];
+
+	/**
+	 * Restricts which seconds can be selected.
+	 */
+	public allowedSeconds?: any[];
+
+	/**
+	 * Input auto complete.
+	 */
+	public autofill = false;
+
+	/**
+	 * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
+	 */
+	public timeFormat: string = Config.timeFormat || 'ampm'; // change props to pickerFormat
+
+	/**
+	 * Forces 100% width.
+	 */
+	public fullWidth = false;
+
+	/**
+	 * Maximum allowed time.
+	 */
+	public maxTime = '';
+
+	/**
+	 * Minimum allowed time.
+	 */
+	public minTime = '';
+
+	/**
+	 * Allows changing hour/minute with mouse scroll.
+	 */
+	public scrollable = false;
+
+	/**
+	 * Shows the time picker.
+	 */
+	public showTimePicker = false;
+
+	/**
+	 * Toggles the use of seconds in picker.
+	 */
+	public useSeconds = false;
+
+	/**
+	 * Width of the picker.
+	 */
+	public width: number | string = 290;
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdTime');
+
+	protected parserFn = FormatterParserProvider.getParser('ZdTime');
+
+	private isoFormatValue = 'HH:mm';
+
+	private valueFormatInternal: string = Config.valueTimeFormat;
+
+	private displayFormatInternal: string = Config.displayTimeFormat;
+
+	/**
+	 * Defines the time input format.
+	 */
+	public inputFormat?: string = Config.timeInputFormat;
+
+	/**
+	 * True when displayValue is valid
+	 */
+	protected isDisplayValid = true;
+
+	protected initialMask?: string;
+
+	protected isSimpleDisplay!: boolean;
+
+	protected timeError = false;
+
+	/**
+	 * Create a new Time Picker.
+	 * @param props Time properties
+	 */
+	constructor(props: ITime) {
+		super(props);
+		this.allowedHours = this.getInitValue('allowedHours', props.allowedHours, this.allowedHours);
+		this.allowedMinutes = this.getInitValue('allowedMinutes', props.allowedMinutes, this.allowedMinutes);
+		this.allowedSeconds = this.getInitValue('allowedSeconds', props.allowedSeconds, this.allowedSeconds);
+		this.timeFormat = this.getInitValue('timeFormat', props.timeFormat, this.timeFormat);
+		this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
+		this.maxTime = this.getInitValue('maxTime', props.maxTime, this.maxTime);
+		this.minTime = this.getInitValue('minTime', props.minTime, this.minTime);
+		this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
+		this.showTimePicker = this.getInitValue('showTimePicker', props.showTimePicker, this.showTimePicker);
+		this.useSeconds = this.getInitValue('useSeconds', props.useSeconds, this.useSeconds);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
+		this.timeValidation = this.timeValidation.bind(this);
+
+		this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormatInternal);
+		this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormatInternal);
+		this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
+
+		this.timeAllowedValidation = this.timeAllowedValidation.bind(this);
+		this.rules.push(this.timeValidation, this.timeAllowedValidation);
+		this.mask = this.getInitValue('mask', props.mask, undefined);
+
+		this.initialMask = this.getInitialMask();
+		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+	}
+
+	private getFormat(format: string, timeFormat: string) {
+		const timeFormatSelector = new TimeFormatSelector();
+		const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
+
+		return selectedFormat;
+	}
+
+	public get displayFormat() {
+		this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
+		return this.displayFormatInternal;
+	}
+
+	public set displayFormat(value: string) {
+		this.displayFormatInternal = value;
+	}
+
+	public get valueFormat() {
+		this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
+		return this.valueFormatInternal;
+	}
+
+	public set valueFormat(value: string) {
+		this.valueFormatInternal = value;
+	}
+
+	private get isoFormat() {
+		this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
+		return this.isoFormatValue;
+	}
+
+	private getInitialMask() {
+		if (isUndefined(this.mask)) {
+			this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
+		}
+
+		return this.mask;
+	}
+
+	public formatter(value: string): string {
+		return this.formatterFn(value, this);
+	}
+
+	public parser(value: string): any {
+		return this.parserFn(value, this);
+	}
+
+	/**
+	 * Triggered when date is clicked.
+	 * @param event
+	 * @param element
+	 */
+	public selectTime(time: string, event?: Event, element?: any) {
+		if (this.events.onSelectTime && typeof this.events.onSelectTime === 'function') {
+			this.events.onSelectTime({
+				time,
+				event,
+				element,
+				component: this,
+			});
+		}
+	}
+
+	get displayValue() {
+		return this.internalDisplayValue;
+	}
+
+	set displayValue(newValue: string) {
+		this.timeError = false;
+		this.internalDisplayValue = newValue;
+		this.internalValue = this.parser(newValue);
+		this.value = this.internalValue; // forces value accessor to be called if necessary
+	}
+
+	/**
+	 * Assign the updated mask to mask property
+	 */
+	public updateMask() {
+		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+		this.mask = this.getUpdatedMask();
+		return this.mask;
+	}
+
+	/**
+	 * Gets the updated masked, based on displayFormat if the initial mask is undefined
+	 */
+	protected getUpdatedMask(): string {
+		if (isUndefined(this.initialMask)) {
+			return this.maskFormat(this.displayFormat);
+		}
+
+		return this.mask;
+	}
+
+	protected maskFormat(format: string) {
+		return format.replace(/[A-Za-z]/gi, '#');
+	}
+
+	public setTimeValue(displayValue: string) {
+		const lastValue = this.displayValue;
+		if (this.isValidTime(displayValue, this.displayFormat)) {
+			this.internalDisplayValue = displayValue;
+			this.internalValue = this.parser(displayValue);
+			this.timeError = false;
+			if (lastValue !== this.displayValue) this.change(this.value);
+		} else {
+			if (!displayValue) {
+				this.internalDisplayValue = displayValue;
+				this.internalValue = null;
+				if (lastValue !== this.displayValue) this.change(this.value);
+			}
+			this.timeError = !!displayValue;
+		}
+		this.value = this.internalValue; // forces value accessor to be called if necessary
+	}
+
+	public isValidTime(value: string, format: string | undefined, strict = true): boolean {
+		return dayjs(value, format, strict).isValid();
+	}
+
+	get isoValue() {
+		return this.formatISOTimeValue(this.value);
+	}
+
+	set isoValue(newValue: string) {
+		const lastValue = this.value;
+		this.timeError = false;
+		this.value = this.parseISOTimeValue(newValue);
+		if (lastValue !== this.value) this.change(this.value);
+	}
+
+	public formatISOTimeValue(value: string): string {
+		if (value && this.isValidTime(value, this.valueFormat)) {
+			return dayjs(value, this.valueFormat).format(this.isoFormat);
+		}
+		return '';
+	}
+
+	public parseISOTimeValue(value: string): any {
+		if (value && this.isValidTime(value, this.valueFormat)) {
+			return dayjs(value, this.isoFormat).format(this.valueFormat);
+		}
+		return null;
+	}
+
+	/**
+	 * Checks if a time format is simple.
+	 * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
+	 * @param format The format to be checked
+	 * @returns true if it is simple, false otherwise
+	 */
+	protected isSimpleFormat(format: string): boolean {
+		const simpleTokens = ['HH', 'mm', 'ss', 'hh', 'A', 'a', 'p', 'P'];
+		// remove the simple tokens from the string
+		const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
+		const chars = replaced.split('');
+		return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
+	}
+
+	public timeValidation(): boolean | string {
+		if (this.isValidTime(this.displayValue, this.displayFormat) || !this.displayValue) {
+			return true;
+		}
+		return I18n.translate('VALIDATION_INVALID_TIME');
+	}
+
+	public timeAllowedValidation(): boolean | string {
+		return (
+			!this.displayValue ||
+			(this.isValidTime(this.displayValue, this.displayFormat) && this.isTimeAllowed()) ||
+			I18n.translate('VALIDATION_TIME_NOT_ALLOWED')
+		);
+	}
+
+	public click(event?: Event, element?: any) {
+		const clickEvent = event || new MouseEvent('click');
+		super.click(clickEvent, element);
+		if (!clickEvent.defaultPrevented) {
+			this.showTimePicker = !this.showTimePicker;
+		}
+	}
+
+	public blur(event: Event, element: any) {
+		this.removeTimeMask();
+		this.setTimeValue(this.formatter(this.value));
+		super.blur(event, element);
+	}
+
+	public focus(event: Event, element: any) {
+		this.addTimeMask();
+		super.focus(event, element);
+	}
+
+	/**
+	 * Add date mask
+	 */
+	protected addTimeMask() {
+		if (!this.value) return;
+
+		this.mask = this.initialMask;
+		this.internalDisplayValue = dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
+	}
+
+	/**
+	 * Removes the component mask if value is valid
+	 */
+	protected removeTimeMask() {
+		if (
+			isUndefined(this.initialMask) ||
+			!this.value ||
+			this.timeError ||
+			!this.isValidTime(this.value, this.valueFormat)
+		) {
+			return;
+		}
+
+		this.mask = '';
+	}
+
+	/**
+	 * Checks if value is valid according to valueFormat and if displayValue
+	 * is true
+	 */
+	public isFullyValid(value: string = this.value) {
+		return this.isValidTime(value, this.valueFormat, true) && this.isDisplayValid;
+	}
+
+	/**
+	 * Last invalid value passed to formatter
+	 */
+	// private lastInvalid: string = '';
+
+	public isTimeAllowed(value: string = this.value) {
+		return (
+			this.isSameOrAfterMin(value) &&
+			this.isSameOrBeforeMax(value) &&
+			this.isHourAllowed(value) &&
+			this.isMinuteAllowed(value) &&
+			this.isSecondAllowed(value)
+		);
+	}
+
+	public isSameOrAfterMin(value: string) {
+		if (!this.minTime) return true;
+
+		const min = dayjs(this.minTime, this.valueFormat);
+		return dayjs(value, this.valueFormat).isSame(min) || dayjs(value, this.valueFormat).isAfter(min);
+	}
+
+	public isSameOrBeforeMax(value: string) {
+		if (!this.maxTime) return true;
+
+		const max = dayjs(this.maxTime, this.valueFormat);
+		return dayjs(value, this.valueFormat).isSame(max) || dayjs(value, this.valueFormat).isBefore(max);
+	}
+
+	public isHourAllowed(value: string) {
+		if (!this.allowedHours) return true;
+
+		const hour = dayjs(value, this.valueFormat).hour();
+
+		return this.allowedHours.includes(hour);
+	}
+
+	public isMinuteAllowed(value: string) {
+		if (!this.allowedMinutes) return true;
+
+		const minute = dayjs(value, this.valueFormat).minute();
+
+		return this.allowedMinutes.includes(minute);
+	}
+
+	public isSecondAllowed(value: string) {
+		if (!this.allowedSeconds) return true;
+
+		const second = dayjs(value, this.valueFormat).second();
+
+		return this.allowedSeconds.includes(second);
+	}
+
+	public clear() {
+		this.value = null;
+		this.change(this.value);
+		if (typeof this.events?.onClear === 'function') {
+			this.events.onClear({
+				component: this,
+				value: this.value,
+			});
+		}
+	}
+	/**
 	 * Converts a date format to a mask
 	 */
 	private toMask(format: string) {
 		return format.replace(/[A-Za-z]/gi, '#'); // .split('').map((char: string) => (char === '#' ? /\d/ : char));
 	}
 
-  public getMask() {
-    if (this.mask && !this.mask.includes('{{') && !this.mask.includes('}}')) {
-      if (this.isFocused) {
-        return this.toMask(this.displayFormat || '');
-      }
-    }
-    return '';
-  }
+	public getMask() {
+		if (this.mask && !this.mask.includes('{{') && !this.mask.includes('}}')) {
+			if (this.isFocused) {
+				return this.toMask(this.displayFormat || '');
+			}
+		}
+		return '';
+	}
 }
 
-FormatterParserProvider.registerFormatter('ZdTime', (value: string, {
-  valueFormat = Config.valueTimeFormat,
-  displayFormat = Config.displayTimeFormat,
-  inputFormat = Config.timeInputFormat,
-  timeFormat = Config.timeFormat || 'ampm',
-  useSeconds = false,
-  mask = '',
-  initialMask,
-  isSimpleDisplay = false,
-}: any = {}) => {
-  if (!value) {
-    return '';
-  }
-  const timeFormatSelector = new TimeFormatSelector();
-  const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
-  const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
-
-  const isTimeValid = dayjs(value, timeValueFormat, true).isValid();
-  if (!isTimeValid) {
-    return value;
-  }
-
-  if (mask && initialMask) {
-    if (inputFormat) {
-      return dayjs(value, timeValueFormat).format(inputFormat);
-    }
-
-    let valueToUnmask = value;
-    if (isSimpleDisplay) {
-      valueToUnmask = dayjs(value, timeValueFormat).format(timeDisplayFormat);
-    }
-
-    const unmasked = Mask.getValueWithoutMask(valueToUnmask);
-    const masked = Mask.getValueWithMask(unmasked, mask);
-    return masked;
-  }
-
-  return dayjs(value, timeValueFormat).format(timeDisplayFormat);
-});
-
-FormatterParserProvider.registerParser('ZdTime', (value: string, {
-  displayFormat = Config.displayTimeFormat,
-  valueFormat = Config.valueTimeFormat,
-  timeFormat = Config.timeFormat || 'ampm',
-  useSeconds = false,
-  mask = '',
-  initialMask,
-}: any = {}) => {
-  if (!value) {
-    return null;
-  }
-  const timeFormatSelector = new TimeFormatSelector();
-  const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
-  const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
-
-  if (dayjs(value, timeDisplayFormat, true).isValid()) {
-    return dayjs(value, timeDisplayFormat).format(timeValueFormat);
-  }
-
-  if (mask && Mask.checkMask(value, mask)) {
-    const unmasked = Mask.getValueWithoutMask(value);
-    let masked;
-
-    if (!initialMask) {
-      const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
-
-      masked = Mask.getValueWithMask(unmasked, displayFmtMask);
-    }
-
-    const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
-
-    masked = Mask.getValueWithMask(unmasked, timeFmtMask);
-
-    if (dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
-      return masked;
-    }
-  }
-  return value;
-});
+FormatterParserProvider.registerFormatter(
+	'ZdTime',
+	(
+		value: string,
+		{
+			valueFormat = Config.valueTimeFormat,
+			displayFormat = Config.displayTimeFormat,
+			inputFormat = Config.timeInputFormat,
+			timeFormat = Config.timeFormat || 'ampm',
+			useSeconds = false,
+			mask = '',
+			initialMask,
+			isSimpleDisplay = false,
+		}: any = {},
+	) => {
+		if (!value) {
+			return '';
+		}
+		const timeFormatSelector = new TimeFormatSelector();
+		const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+		const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+
+		const isTimeValid = dayjs(value, timeValueFormat, true).isValid();
+		if (!isTimeValid) {
+			return value;
+		}
+
+		if (mask && initialMask) {
+			if (inputFormat) {
+				return dayjs(value, timeValueFormat).format(inputFormat);
+			}
+
+			let valueToUnmask = value;
+			if (isSimpleDisplay) {
+				valueToUnmask = dayjs(value, timeValueFormat).format(timeDisplayFormat);
+			}
+
+			const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+			const masked = Mask.getValueWithMask(unmasked, mask);
+			return masked;
+		}
+
+		return dayjs(value, timeValueFormat).format(timeDisplayFormat);
+	},
+);
+
+FormatterParserProvider.registerParser(
+	'ZdTime',
+	(
+		value: string,
+		{
+			displayFormat = Config.displayTimeFormat,
+			valueFormat = Config.valueTimeFormat,
+			timeFormat = Config.timeFormat || 'ampm',
+			useSeconds = false,
+			mask = '',
+			initialMask,
+		}: any = {},
+	) => {
+		if (!value) {
+			return null;
+		}
+		const timeFormatSelector = new TimeFormatSelector();
+		const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+		const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+
+		if (dayjs(value, timeDisplayFormat, true).isValid()) {
+			return dayjs(value, timeDisplayFormat).format(timeValueFormat);
+		}
+
+		if (mask && Mask.checkMask(value, mask)) {
+			const unmasked = Mask.getValueWithoutMask(value);
+			let masked;
+
+			if (!initialMask) {
+				const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
+
+				masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+			}
+
+			const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
+
+			masked = Mask.getValueWithMask(unmasked, timeFmtMask);
+
+			if (dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
+				return masked;
+			}
+		}
+		return value;
+	},
+);
 
 InputFactory.register('ZdTime', Time);