@zeedhi/common 1.112.0 → 3.0.0

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

@@ -0,0 +1,506 @@
+import {
+  Config, FormatterParserProvider, I18n, dayjs, Mask,
+} from '@zeedhi/core';
+import isUndefined from 'lodash.isundefined';
+import { ITime } from './interfaces';
+import { TextInput } from '../zd-text-input/text-input';
+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,
+      });
+    }
+  }
+  	/**
+	 * 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 '';
+  }
+}
+
+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);

package/src/components/zd-toggleable/interfaces.ts

@@ -0,0 +1,8 @@
+import { IInput } from '../zd-input/interfaces';
+
+export type StateType = boolean | string | number | null | object;
+
+export interface IToggleable extends IInput {
+	falseValue?: StateType;
+	trueValue?: StateType;
+}

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

@@ -0,0 +1,37 @@
+import { Input } from '../zd-input/input';
+import { IToggleable, StateType } from './interfaces';
+
+/**
+ * Base class for Toggleable inputs.
+ */
+export class Toggleable extends Input implements IToggleable {
+	/**
+	 * Value for falsy state
+	 */
+	public falseValue: StateType = false;
+
+	/**
+	 * Value for truthy state
+	 */
+	public trueValue: StateType = true;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Toggleable input.
+	 * @param props Toggleable properties
+	 */
+	constructor(props: IToggleable) {
+		super(props);
+		this.falseValue = this.getInitValue('falseValue', props.falseValue, this.falseValue);
+		this.trueValue = this.getInitValue('trueValue', props.trueValue, this.trueValue);
+		this.createAccessors();
+	}
+
+	public toggleValue() {
+		if (this.value === this.trueValue) {
+			this.value = this.falseValue;
+		} else {
+			this.value = this.trueValue;
+		}
+	}
+}

package/src/components/zd-tooltip/interfaces.ts

@@ -0,0 +1,20 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Tooltip } from './tooltip';
+
+export type ITooltipEvent = IEventParam<Tooltip>;
+
+export interface ITooltip extends IComponentRender {
+	bottom?: boolean;
+	disabled?: boolean;
+	label?: string;
+	left?: boolean;
+	maxWidth?: number | string;
+	minWidth?: number | string;
+	nudge?: number | string;
+	openOnClick?: boolean;
+	openOnFocus?: boolean;
+	openOnHover?: boolean;
+	right?: boolean;
+	top?: boolean;
+}

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

@@ -0,0 +1,85 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { ITooltip } from './interfaces';
+
+/**
+ * Base class for Tooltip component.
+ */
+export class Tooltip extends ComponentRender implements ITooltip {
+	/**
+	 * Aligns the component towards the bottom
+	 */
+	public bottom = false;
+
+	/**
+	 * Disables the tooltip
+	 */
+	public disabled = false;
+
+	public label = '';
+
+	/**
+	 * Aligns the component towards the left
+	 */
+	public left = false;
+
+	/**
+	 * Sets the maximum width for the content
+	 */
+	public maxWidth?: number | string = undefined;
+
+	/**
+	 * Sets the minimum width for the content
+	 */
+	public minWidth?: number | string = undefined;
+
+	/**
+	 * Nudge the content
+	 */
+	public nudge: number | string = 10;
+
+	/**
+	 * Open the tooltip on activator click
+	 */
+	public openOnClick = false;
+
+	/**
+	 * Open the tooltip on activator focus
+	 */
+	public openOnFocus = true;
+
+	/**
+	 * Open the tooltip on activator hover
+	 */
+	public openOnHover = true;
+
+	/**
+	 * Nudge the content to the top
+	 */
+	public right = false;
+
+	/**
+	 * Nudge the content to the top
+	 */
+	public top = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Tooltip
+	 * @param props Tooltip definition
+	 */
+	constructor(props: ITooltip) {
+		super(props);
+		this.bottom = this.getInitValue('bottom', props.bottom, this.bottom);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.left = this.getInitValue('left', props.left, this.left);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
+		this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+		this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
+		this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
+		this.right = this.getInitValue('right', props.right, this.right);
+		this.top = this.getInitValue('top', props.top, this.top);
+	}
+}