bromcom-ui 2.7.36-rc.11 → 2.7.36-rc.12-0

package/dist/collection/components/organism/datetime-picker/datetime-picker.js

@@ -1,2166 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Prop, h, State, Watch, Element, forceUpdate, Host, Method, Listen, Event } from '@stencil/core';
-import { ElementDragger, DragDirections } from '../../../utils/element-dragger';
-import { Months, Days, Types } from './types';
-import cs from 'classnames';
-import { DateTimeHelper } from '../../../helper/datetime-helper';
-import { delay } from '../../../utils/utils';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { getPlacement, setPosition } from '../../../utils/popover-placement';
-import { LabelTemplate } from '../../../templates/label-template';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-const stringify = JSON.stringify;
-export class BcmDatetimePicker {
-  constructor() {
-    this.inputId = null;
-    this.emptyState = false;
-    this.initialized = false;
-    this.disabledDatesList = { min: null, max: null, dates: [] };
-    this.dayNumbers = [];
-    this.valueText = null;
-    this.dataIsValid = false;
-    /**
-     * Component Properties
-     */
-    this._id = Generate.UID();
-    this.date = new Date();
-    this.endDate = null;
-    this.type = Types.datetime;
-    this.disabled = false;
-    this.disabledDates = '';
-    this.value = null;
-    this._open = false;
-    this.hidden = false;
-    this.fullWidth = false;
-    this.required = false;
-    this.minYear = 1900;
-    this.maxYear = 2200;
-    this.noCaption = false;
-    this.caption = '';
-    this.captionType = 'default';
-    this.placement = Bcm.Placement['bottom-start'];
-    /**
-     * Component States
-     */
-    this.years = [];
-    this.hours = [];
-    this.minutes = [];
-    this.hasDateModule = false;
-    this.hasTimeModule = false;
-    this.error = false;
-    this.errorText = '';
-    this.tick = {};
-  }
-  markForCheck() {
-    this.tick = Generate.UID();
-  }
-  openChanged() {
-    this.bcmOpen.emit(this._open);
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    this.inputId = 'picker-input-' + this._id;
-    this.hasDateModule = this.type === Types.datetime
-      || this.type === Types.date
-      || this.type === Types.range;
-    this.hasTimeModule = this.type === Types.datetime
-      || this.type === Types.time;
-    this.prepareDisabledDates();
-    this.setData();
-    // Generate year, hour, minute sequences
-    // #
-    if (!this.initialized) {
-      for (let i = this.minYear; i <= this.maxYear; i++)
-        this.years.push(i);
-      for (let i = 0; i <= 23; i++)
-        this.hours.push(i);
-      for (let i = 0; i <= 59; i++)
-        this.minutes.push(i);
-      this.load.emit();
-    }
-    this.initialized = true;
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentDidRender() {
-    // Create years selection
-    // #
-    if (this.hasDateModule && !this.yearsDragger) {
-      this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
-      this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
-      this.setDragSelection('years', this.currentDate.year);
-    }
-    // Create hours selection
-    // #
-    if (this.hasTimeModule && !this.hoursDragger) {
-      this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
-      this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
-      this.setDragSelection('hours', this.currentDate.hour);
-    }
-    // Create minutes selection
-    // #
-    if (this.hasTimeModule && !this.minutesDragger) {
-      this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
-      this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
-      this.setDragSelection('minutes', this.currentDate.minute);
-    }
-  }
-  /**
-   * @desc
-   * @param newValue
-   */
-  renderDateChange() {
-    if (!this.initialized)
-      return;
-    this.setData();
-    this.hasDateModule && this.setDragSelection('years', this.currentDate.year);
-  }
-  /**
-   * @desc
-   * @param newValue
-   */
-  openChange(newValue) {
-    if (newValue) {
-      this.calculateLocation();
-      // Create years selection
-      // #
-      if (this.hasDateModule) {
-        this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
-        this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
-        this.setDragSelection('years', this.currentDate.year);
-      }
-      // Create hours selection
-      // #
-      if (this.hasTimeModule) {
-        this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
-        this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
-        this.setDragSelection('hours', this.currentDate.hour, true);
-      }
-      // Create minutes selection
-      // #
-      if (this.hasTimeModule) {
-        this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
-        this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
-        this.setDragSelection('minutes', this.currentDate.minute, true);
-      }
-      this.markForCheck();
-      forceUpdate(this.el);
-    }
-  }
-  /**
-   * @desc
-   * @param newValue
-   */
-  valueChange(newValue, oldValue) {
-    const errorObject1 = { isValid: false, value: this.valueText };
-    const errorObject2 = { isValid: false, value: this.inputElement.value };
-    if (!newValue) {
-      this.change.emit();
-      return;
-    }
-    if (this.type !== Types.range && this.error) {
-      this.change.emit(errorObject2);
-      return;
-    }
-    try {
-      if ((oldValue && stringify(newValue.dateObject) !== stringify(oldValue.dateObject)) || (!oldValue && newValue)) {
-        if (this.type === Types.date || this.type === Types.datetime) {
-          this.change.emit(newValue);
-        }
-        if (this.type === Types.time) {
-          this.change.emit(newValue);
-          // this.change.emit({
-          //     time: newValue.time,
-          //     timeObject: newValue.dateObject
-          // })
-        }
-        if (this.type === Types.range) {
-          const dateObject = newValue.dateObject;
-          if (dateObject.start.date && dateObject.end.date) {
-            if (newValue.isValid) {
-              this.change.emit({
-                isValid: newValue.isValid,
-                value: newValue.value,
-                start: dateObject.start,
-                end: dateObject.end
-              });
-            }
-          }
-          else {
-            this.change.emit(errorObject1);
-          }
-        }
-      }
-    }
-    catch (exception) { }
-  }
-  /**
-   * @desc
-   * @param newValue -
-   */
-  disabledDatesChange(newValue) {
-    if (newValue) {
-      this.prepareDisabledDates();
-    }
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  stringToDate(date) {
-    const isDate = !!date.getMonth;
-    if (!isDate) {
-      return new Date(Date.parse(this.switchDDMM(date)));
-    }
-    return date;
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  dateToString(date) {
-    if (!(date instanceof Date))
-      return false;
-  }
-  /**
-  *
-  * @param str
-  */
-  switchDDMM(str) {
-    if (!str)
-      return;
-    const parts = str.split('/');
-    if (str.indexOf('/') === -1 || parts.length !== 3)
-      return str;
-    return `${parts[1]}/${parts[0]}/${parts[2]}`;
-  }
-  /**
-  * @desc
-  */
-  setData() {
-    this.date = this.stringToDate(this.date);
-    if (!this.initialized && !this.renderDate) {
-      this.renderDate = this.date && this.date || new Date();
-    }
-    if (!this.initialized && this.endDate) {
-      this.selectedEndDate = this.stringToDate(this.endDate);
-      //this.currentEndDate = this.createDateObject(this.selectedEndDate)
-    }
-    const date = this.renderDate;
-    this.currentDate = this.createDateObject(date);
-    // Calculate days in current
-    // month
-    this.dayNumbers = this.getMonthDayNumbers(date).map(day => {
-      return {
-        day,
-        thisMonth: true,
-        isWeekend: this.getDayIsWeekend(date, day),
-        today: this.getIsCurrentDate(date, day),
-        date: this.getTargetDayDate(date, day)
-      };
-    });
-    // Add prev month days to
-    // empty columns
-    if (this.currentDate.year > this.minYear) {
-      let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month - 1, 1));
-      let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth).reverse();
-      let max = this.currentDate.monthFirstDay;
-      for (let i = 1; i < (max === 0 ? 7 : max); i++) {
-        const day = targetMonthDayNumbers[i - 1];
-        this.dayNumbers.unshift({
-          day,
-          prevMonth: true,
-          isWeekend: this.getDayIsWeekend(targetMonth, day),
-          date: this.getTargetDayDate(targetMonth, day)
-        });
-      }
-    }
-    // Add next month days to
-    // rest of columns
-    if (this.currentDate.year < this.maxYear) {
-      let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month + 1));
-      let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth);
-      let max = 42 - this.dayNumbers.length;
-      for (let i = 0; i < max; i++) {
-        const day = targetMonthDayNumbers[i];
-        this.dayNumbers.push({
-          day,
-          nextMonth: true,
-          isWeekend: this.getDayIsWeekend(targetMonth, day),
-          date: this.getTargetDayDate(targetMonth, day)
-        });
-      }
-    }
-    if (!this.emptyState) {
-      this.valueText = this.getValueText();
-    }
-    forceUpdate(this.el);
-  }
-  /**
-   * @desc
-   */
-  prepareDisabledDates() {
-    if (!this.disabledDates)
-      return;
-    let disabledDatesData = null;
-    if (typeof this.disabledDates === 'string') {
-      try {
-        disabledDatesData = JSON.parse(this.disabledDates);
-      }
-      catch (e) {
-        return;
-      }
-    }
-    else
-      disabledDatesData = this.disabledDates;
-    // Convert dates to list
-    // #
-    if (disabledDatesData.dates && disabledDatesData.dates.length && !!disabledDatesData.dates.length) {
-      const disabledDates = disabledDatesData.dates.map(date => {
-        const tempDate = new Date(date);
-        if (tempDate.toString().toLowerCase() === 'invalid date')
-          return null;
-        else
-          return tempDate;
-      }).filter(date => date);
-      this.disabledDatesList.dates = disabledDates;
-    }
-    // Get min & max range
-    // #
-    if (disabledDatesData.min &&
-      disabledDatesData.max && (disabledDatesData.min.getTime() > disabledDatesData.max.getTime() ||
-      disabledDatesData.max.getTime() < disabledDatesData.min.getTime())) {
-      return;
-    }
-    if (disabledDatesData.min && disabledDatesData.min instanceof Date) {
-      this.disabledDatesList.min = new Date(disabledDatesData.min.toDateString());
-    }
-    else {
-      delete this.disabledDatesList.min;
-    }
-    if (disabledDatesData.max && disabledDatesData.max instanceof Date) {
-      this.disabledDatesList.max = new Date(disabledDatesData.max.toDateString());
-    }
-    else {
-      delete this.disabledDatesList.max;
-    }
-    const value = this.inputElement.value;
-    value && this.setDataFromText(value);
-  }
-  /**
-   *
-   * @param target
-   * @param wheelTriggerElement
-   * @param strip
-   */
-  createWheelChange(target, wheelTriggerElement, strip) {
-    /**
-     * [ Mouse Event: wheel ]
-     */
-    wheelTriggerElement.addEventListener('wheel', (event) => {
-      const moveDown = event.deltaY > 0;
-      const dragger = this[target + 'Dragger'];
-      const draggerOffsetY = dragger.getOffset().top;
-      const childIdx = this.getTargetChildByDragPosition({ y: draggerOffsetY }, strip);
-      let nextChild = moveDown ? childIdx + 1 : childIdx - 1;
-      // Array bounds check
-      // #
-      nextChild < 0
-        ? (nextChild = 0) : typeof this[target][nextChild] === 'undefined'
-        ? (nextChild = this[target].length - 1) : nextChild;
-      if (this.type == "time" && !this.selectedDate) {
-        this.setTime();
-      }
-      this.setDragSelection(target, this[target][nextChild], true, true);
-    });
-  }
-  /**
-   * @desc
-   */
-  createDragSelection(target, element, dragTriggerElement, strip, direction) {
-    const dragger = target + 'Dragger';
-    this[dragger] = new ElementDragger({
-      target: element,
-      trigger: dragTriggerElement,
-      direction: direction,
-      useTransform: true,
-      limit: {
-        y: {
-          max: strip.offsetTop - (strip.offsetHeight / 2),
-          min: (element.offsetHeight - (strip.offsetTop + strip.offsetHeight / 2)) * -1
-        }
-      }
-    });
-    /**
-     * [ ElementDragger Event: end ]
-     */
-    this[dragger].on('end', (pos) => {
-      const childIdx = this.getTargetChildByDragPosition(pos, strip);
-      // Select target child when dragging
-      // end
-      this.selectTargetChildByDragIdx(childIdx, strip, this[dragger]);
-      // Set target value
-      // #
-      this.setDragSelection(target, this[target][childIdx], false);
-    });
-  }
-  /**
-   * @desc Calculates which child in center of strip
-   * for drag areas
-   */
-  getTargetChildByDragPosition({ y }, strip) {
-    const stripHeight = strip.offsetHeight;
-    const stripCenter = stripHeight / 2;
-    const stripTriggerY = strip.offsetTop - (stripCenter);
-    const childY = -(y - stripTriggerY - (stripCenter));
-    return Math.floor(childY / stripHeight);
-  }
-  /**
-   * @esc
-   * @param target
-   * @param childIdx
-   */
-  selectTargetChildByDragIdx(childIdx, strip, dragger, anim = true) {
-    const y = ((strip.offsetHeight / 2) + strip.offsetTop) - ((childIdx + 1) * (strip.offsetHeight));
-    dragger.setPosition({ y, anim });
-  }
-  /**
-   * @desc
-   * @param year
-   */
-  setDragSelection(target, value, scroll = true, anim = false) {
-    // if (!value) return
-    const childIdx = this[target].findIndex((itemValue) => itemValue === value);
-    scroll && this.selectTargetChildByDragIdx(childIdx, this[target === 'years' ? target + 'StripElement' : 'timeStripElement'], this[target + 'Dragger'], anim);
-    switch (target) {
-      case 'years':
-        this.date.setFullYear(value);
-        break;
-      case 'hours':
-        this.date.setHours(value);
-        break;
-      case 'minutes':
-        this.date.setMinutes(value);
-        break;
-    }
-    this.renderDate = this.date;
-    this.setData();
-    if (this.selectedDate) {
-      this.setValue();
-    }
-  }
-  /**
-   * @desc
-   * @returns
-   */
-  getHours12() {
-    const hours = (this.date.getHours() + 24) % 12 || 12;
-    return hours > 12 ? hours - 12 : hours;
-  }
-  /**
-   * @desc
-   * @param date
-   * @param excludeTime -
-   */
-  createDateObject(date, { excludeTime = false, exactMonthNumber = false } = {}) {
-    const dateYear = date.getFullYear();
-    const year = dateYear >= this.maxYear
-      ? this.maxYear : dateYear <= this.minYear
-      ? this.minYear : dateYear;
-    return Object.assign(Object.assign({ year, day: date.getDate(), month: date.getMonth() + (exactMonthNumber ? 1 : 0), dayOfWeek: date.getDay(), monthFirstDay: new Date(new Date(date).setDate(1)).getDay() }, !excludeTime && { hour: date.getHours() }), !excludeTime && { minute: date.getMinutes() });
-  }
-  /**
-   * @desc
-   * @param max
-   */
-  generateDaysArrayFromMax(max) {
-    return Array.from(Array(max + 1).keys()).slice(1);
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  getMonthDayNumbers(date) {
-    const totalDays = this.getDaysInMonth(date.getMonth(), date.getFullYear());
-    return this.generateDaysArrayFromMax(totalDays);
-  }
-  /**
-   * @desc
-   * @param date
-   * @param day
-   */
-  getTargetDayDate(date, day) {
-    return new Date(new Date(date).setDate(day));
-  }
-  /**
-   * @desc
-   * @param date
-   * @param day
-   */
-  getDayIsWeekend(date, day) {
-    const dayOfWeek = new Date(new Date(date).setDate(day)).getDay();
-    return (dayOfWeek === 6) || (dayOfWeek === 0);
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  getClock(date) {
-    date = date || new Date();
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
-    const seconds = date.getSeconds();
-    const milis = date.getMilliseconds();
-    return { hours, minutes, seconds, milis };
-  }
-  /**
-   * @desc
-   */
-  setValue(reset) {
-    var _a, _b, _c;
-    const date = new Date(this.date.setHours(Number(this.currentDate.hour), Number(this.currentDate.minute)));
-    if (reset) {
-      this.value = null;
-      return;
-    }
-    this.dataIsValid = true;
-    if (this.type === Types.datetime) {
-      const dateObject = Object.assign({}, this.currentDate);
-      dateObject.month += 1;
-      if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.value) != this.valueText) {
-        this.value = {
-          isValid: this.dataIsValid,
-          date: date,
-          timestamp: date.getTime(),
-          dateObject,
-          value: this.valueText
-        };
-      }
-    }
-    if (this.type === Types.date) {
-      const dateObject = Object.assign({}, this.currentDate);
-      delete dateObject.hour;
-      delete dateObject.minute;
-      dateObject.month += 1;
-      if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) != this.valueText) {
-        this.value = {
-          isValid: this.dataIsValid,
-          date,
-          timestamp: date.getTime(),
-          dateObject,
-          value: this.valueText
-        };
-      }
-    }
-    if (this.type === Types.time) {
-      const getTimeText = this.getTimeText();
-      const dateObject = Object.assign({}, this.currentDate);
-      dateObject.month += 1;
-      this.value = {
-        isValid: this.dataIsValid,
-        date: date,
-        timestamp: date.getTime(),
-        time: getTimeText,
-        dateObject,
-        timeObject: {
-          hours: this.currentDate.hour,
-          minutes: this.currentDate.minute
-        },
-        value: getTimeText
-      };
-      this.inputElement.value = getTimeText;
-    }
-    if (this.type === Types.range) {
-      if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.value) != this.valueText) {
-        this.value = {
-          isValid: this.dataIsValid,
-          dateObject: {
-            start: Object.assign({}, this.selectedDate && {
-              date: this.selectedDate,
-              timestamp: this.selectedDate.getTime(),
-              detail: this.createDateObject(this.selectedDate, {
-                excludeTime: true,
-                exactMonthNumber: true
-              })
-            }),
-            end: Object.assign({}, this.selectedEndDate && {
-              date: this.selectedEndDate,
-              timestamp: this.selectedEndDate.getTime(),
-              detail: this.createDateObject(this.selectedEndDate, {
-                excludeTime: true,
-                exactMonthNumber: true
-              })
-            })
-          },
-          value: this.valueText
-        };
-      }
-    }
-  }
-  /**
-   * @desc
-   * @param month
-   */
-  setMonth(month) {
-    this.renderDate.setDate(1);
-    this.renderDate = new Date(this.renderDate.setMonth(month));
-    this.setDragSelection('years', this.currentDate.year);
-  }
-  /**
-   * @desc
-   * @param popupClosing -
-   */
-  checkRangeValidation({ popupClosing = false } = {}) {
-    if (this.type !== Types.range)
-      return true;
-    const errorText = 'date range invalid';
-    if (popupClosing && (!this.selectedDate || this.selectedDate && !this.selectedEndDate)) {
-      this.setError(true, errorText);
-      return false;
-    }
-    if (!popupClosing) {
-      this.setError(false);
-      return true;
-    }
-    return true;
-  }
-  /**
-   * @desc
-   * @param value
-   * @param max
-   * @returns
-   */
-  pad(value, max) {
-    return value < max ? '0' : '';
-  }
-  /**
-   * @desc
-   * @returns
-   */
-  isInputClearable() {
-    if (this.inputElement && this.inputElement.value) {
-      return true;
-    }
-    return false;
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  isDisabledDate(date) {
-    if (!!this.disabledDatesList.dates.map(d => this.isSameDate(d, date)).filter(d => d).length)
-      return true;
-    if (this.disabledDatesList.min) {
-      const minDate = new Date(this.disabledDatesList.min);
-      if (minDate && minDate.getTime() > date.getTime())
-        return true;
-    }
-    if (this.disabledDatesList.max) {
-      const maxDate = new Date(this.disabledDatesList.max);
-      if (maxDate && new Date(maxDate.setDate(maxDate.getDate() + 1)).getTime() < date.getTime())
-        return true;
-    }
-  }
-  /**
-  * @desc
-  * @param date
-  */
-  setDate(date, isUserSelect, notClosePicker = false) {
-    const isRange = this.type === Types.range;
-    const isEndSelect = !!this.selectedEndDate;
-    // Check disabled date
-    // #
-    if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(date)) {
-      return;
-    }
-    this.emptyState = false;
-    if (!isRange || (isRange && !isEndSelect)) {
-      this.date = new Date(date.setHours(this.currentDate.hour, this.currentDate.minute));
-    }
-    isRange && this.checkRangeValidation();
-    if (isRange && this.selectedDate && this.selectedEndDate) {
-      this.selectedDate = null;
-      this.selectedEndDate = null;
-    }
-    if (isUserSelect) {
-      const newDate = new Date(date);
-      !isRange
-        ? this.selectedDate = newDate
-        : !this.selectedDate
-          ? this.selectedDate = newDate
-          : this.selectedDate.getTime() > newDate.getTime()
-            ? (this.selectedEndDate = this.selectedDate) && (this.selectedDate = newDate)
-            : this.selectedEndDate = newDate;
-      !isRange && (this._open = notClosePicker);
-      this.renderDate = this.date;
-      this.valueText = this.getValueText();
-      this.setValue();
-      const splitText = this.valueText.split('/');
-      const newValue = this.valueText ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
-      this.inputElement.value = newValue;
-    }
-  }
-  setDataFromText(text, updateData = false, openPicker = true) {
-    let update = false;
-    let errorState = '';
-    const parsed = this.parse(text);
-    if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(parsed.date)) {
-      parsed.dateIsValid = false;
-      errorState = 'disabled-date';
-    }
-    // Check mode datetime
-    // #
-    if (this.type === Types.datetime && parsed.dateIsValid && parsed.timeIsValid) {
-      updateData && this.setDate(parsed.date, true, openPicker);
-      updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
-      update = true;
-    }
-    // Check mode date
-    // #
-    if (this.type === Types.date && parsed.dateIsValid) {
-      updateData && this.setDate(parsed.date, true, openPicker);
-      update = true;
-    }
-    // Check mode time
-    // #
-    if (this.type === Types.time && parsed.timeIsValid) {
-      updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
-      update = true;
-    }
-    // Check mode range
-    // #
-    if (this.type === Types.range) {
-      if (parsed.dateIsValid && !this.selectedDate) {
-        updateData && this.setDate(parsed.date, true, openPicker);
-        update = true;
-      }
-      if (parsed.date2IsValid && !this.selectedEndDate) {
-        updateData && this.setDate(parsed.date2, true, openPicker);
-        update = true;
-      }
-      if (this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
-        if (this.isSameDate(parsed.date2, this.selectedEndDate) && !this.isSameDate(parsed.date, this.selectedDate)) {
-          this.selectedDate = null;
-          updateData && this.setDate(parsed.date, true, openPicker);
-          update = true;
-        }
-        if (this.isSameDate(parsed.date, this.selectedDate) && !this.isSameDate(parsed.date2, this.selectedEndDate)) {
-          this.selectedEndDate = null;
-          updateData && this.setDate(parsed.date2, true, openPicker);
-          update = true;
-        }
-      }
-      if (this.selectedDate && this.selectedEndDate && !parsed.rangeIsValid && updateData) {
-        this.selectedDate = null;
-        this.selectedEndDate = null;
-      }
-    }
-    // Fix: render warning
-    if (update) {
-      if (updateData) {
-        this.renderDate = this.date;
-      }
-      this.setError(false);
-    }
-    else {
-      if (this.type === Types.range && this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
-        this.setError(false);
-      }
-      else {
-        if (errorState) {
-          this.setError(true, (errorState === 'disabled-date' && 'selected date is not allowed'));
-        }
-        else {
-          if (text) {
-            this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
-              (this.type === Types.range && 'invalid date range') ||
-              (this.type === Types.date && 'invalid date') ||
-              (this.type === Types.time && 'invalid time'));
-          }
-          this.setValue(true);
-        }
-      }
-      const splitText = text.split('/');
-      const newValue = text && !this.error ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
-      this.inputElement.value = newValue;
-    }
-  }
-  /**
-   * @desc
-   */
-  setDateToday() {
-    const date = new Date();
-    if (this.type === Types.range) {
-      this.selectedDate = null;
-      this.selectedEndDate = null;
-    }
-    this.setDate(date, true, false);
-  }
-  HourContentDblClick(e) {
-    const getPath = Generate.findEventPathWithNodeName(e, 'SPAN');
-    if (getPath && getPath.classList.contains('selected')) {
-      this.setValue();
-      this._open = false;
-    }
-  }
-  /**
-  * @desc
-  */
-  setTime(hours, minutes) {
-    this.renderDate = new Date(this.date.setHours(Number(hours || this.getClock().hours), Number(minutes || this.getClock().minutes)));
-    if (this.type === Types.time) {
-      this.selectedDate = this.date;
-    }
-    const hour = this.currentDate.hour || new Date().getHours();
-    const minute = this.currentDate.minute || new Date().getMinutes();
-    this.setDragSelection('hours', hour, true, true);
-    this.setDragSelection('minutes', minute, true, true);
-  }
-  /**
-   * @desc
-   * @param state
-   * @param error
-   */
-  setError(state = false, error = '') {
-    this.error = state;
-    this.errorText = !state ? '' : error;
-  }
-  /**
-   * @desc
-   */
-  getError() {
-    const { error, errorText } = this;
-    return { valid: !error, error, errorText };
-  }
-  /**
-   * @desc
-   * @param month
-   * @param year
-   */
-  getDaysInMonth(month, year) {
-    return new Date(year, month + 1, 0).getDate();
-  }
-  /**
-   * @desc
-   * @param date
-   * @param day
-   * @returns
-   */
-  getIsCurrentDate(date, day) {
-    const today = new Date();
-    return today.getDate() === day
-      && today.getMonth() === date.getMonth()
-      && today.getFullYear() === date.getFullYear();
-  }
-  /**
-   * @desc
-   * @param date1
-   * @param date2
-   */
-  isSameDate(date1, date2) {
-    return (date1.getFullYear() === date2.getFullYear() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getDate() === date2.getDate());
-  }
-  /**
-   * @desc
-   * @param date
-   * @returns
-   */
-  getSelected(date, endDate = false) {
-    const selectPart = endDate ? 'EndDate' : 'Date';
-    const targetDate = new Date(this['selected' + selectPart]);
-    const year = targetDate.getFullYear();
-    const month = targetDate.getMonth();
-    const day = targetDate.getDate();
-    const isSelected = date.getDate() === day
-      && date.getMonth() === month
-      && date.getFullYear() === year;
-    return isSelected;
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  getDateIsInRange(date) {
-    if (this.type !== Types.range || (!this.selectedDate || !this.selectedEndDate))
-      return;
-    const current = date.getTime();
-    const start = this.selectedDate.getTime();
-    const end = this.selectedEndDate.getTime();
-    return current > start && current < end;
-  }
-  /**
-   * @desc
-   */
-  getMonthText() {
-    return Object.values(Months)[this.renderDate.getMonth()];
-  }
-  /**
-   * @desc
-   */
-  getCurrentDateText() {
-    const dayText = Object.values(Days)[this.currentDate.dayOfWeek];
-    const monthText = Object.values(Months)[this.currentDate.month];
-    const text = `${dayText}, ${this.currentDate.day}th ${monthText} ${this.currentDate.year}`;
-    return text;
-  }
-  /**
-  * @desc
-  * @returns
-  */
-  getTimeText() {
-    const { hour, minute } = this.currentDate;
-    return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`;
-  }
-  /**
-   *
-   */
-  getValueText() {
-    if (!this.selectedDate)
-      return '';
-    const selectedDate = this.selectedDate;
-    const year = selectedDate.getFullYear();
-    const day = selectedDate.getDate();
-    const baseMonth = selectedDate.getMonth();
-    const month = baseMonth + 1;
-    let text = '';
-    if (this.type === Types.date || this.type === Types.datetime) {
-      text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
-    }
-    if (this.type === Types.time) {
-      text = this.getTimeText();
-    }
-    if (this.type === Types.datetime) {
-      text = `${text} ${this.getTimeText()}`;
-    }
-    if (this.type === Types.range) {
-      text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
-    }
-    if (this.type === Types.range && this.selectedEndDate) {
-      const endDate = this.selectedEndDate;
-      const endYear = endDate.getFullYear();
-      const endDay = endDate.getDate();
-      const endBaseMonth = endDate.getMonth();
-      const endMonth = endBaseMonth + 1;
-      text += `-${endDay < 10 ? '0' + endDay : endDay}/${endMonth < 10 ? '0' + endMonth : endMonth}/${endYear}`;
-    }
-    this.setDataFromText(text);
-    return text;
-  }
-  /**
-   * @desc
-   * @param dateStr
-   */
-  parse(dateStr) {
-    const sections = dateStr.split(this.type === Types.range ? '-' : ' ');
-    // const sections: Array<string> = dateStr.split("-")
-    const sectionDate = this.switchDDMM(sections[0]);
-    const sectionDate2 = this.switchDDMM(sections[1]);
-    const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
-    const date = new Date(sectionDate);
-    const date2 = new Date(sectionDate2);
-    const dateCheck = date.toString().toLowerCase() !== 'invalid date';
-    const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
-    const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
-    const regDateCheck = regDate.test(sectionDate);
-    const regDateCheck2 = regDate.test(sectionDate2);
-    const regTime = /\b([01][0-9]|2[0-3]):([0-5][0-9])\b/;
-    const regTimeCheck = regTime.test(sectionTime);
-    const dateIsValid = dateCheck && regDateCheck;
-    const date2IsValid = dateCheck2 && regDateCheck2;
-    const timeSections = regTimeCheck ? sectionTime.split(':') : '';
-    return {
-      date,
-      date2,
-      timeSections,
-      dateIsValid,
-      date2IsValid,
-      rangeIsValid: dateIsValid && date2IsValid,
-      timeIsValid: regTimeCheck
-    };
-  }
-  /**
-   * @desc
-   */
-  getPrevMonth() {
-    this.setMonth(this.renderDate.getMonth() - 1);
-  }
-  /**
-   * @desc
-   */
-  getNextMonth() {
-    this.setMonth(this.renderDate.getMonth() + 1);
-  }
-  /**
-   * @desc
-   * @param idx
-   */
-  yearClick(idx) {
-    if (this.yearsDragger.busy)
-      return;
-    this.setDragSelection('years', this.years[idx], true, true);
-  }
-  /**
-   * @desc
-   * @param idx
-   */
-  hourClick(idx) {
-    if (this.hoursDragger.busy)
-      return;
-    if (!this.selectedDate) {
-      this.setTime();
-    }
-    this.setDragSelection('hours', this.hours[idx], true, true);
-  }
-  /**
-   * @desc
-   * @param idx
-   */
-  minuteClick(idx) {
-    if (this.minutesDragger.busy)
-      return;
-    if (!this.selectedDate) {
-      this.setTime();
-    }
-    this.setDragSelection('minutes', this.minutes[idx], true, true);
-  }
-  /**
-   * @desc
-   */
-  openPicker() {
-    if (this.disabled)
-      return;
-    !this._open && (this._open = true);
-  }
-  /**
-   * @desc
-   * @param date
-   */
-  handleDayNumber(date) {
-    if (this.type === Types.range
-      && this.selectedDate
-      && !this.selectedEndDate
-      && this.isSameDate(this.selectedDate, date))
-      return;
-    this.setDate(date, true);
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  handleInputInput(value) {
-    this.setDataFromText(value, true);
-  }
-  /**
-   * @desc
-   * @param event -
-   */
-  handleInputChange(event) {
-    this.setDataFromText(this.inputElement.value, true, false);
-    event.stopPropagation();
-  }
-  /**
-   * @desc
-   */
-  async handleInputClear() {
-    this.selectedDate = null;
-    this.selectedEndDate = null;
-    this.emptyState = true;
-    this.renderDate = new Date();
-    this._open = false;
-    this.setValue(true);
-    this.setError();
-    this.getValueText();
-    await this.inputElement.setClear();
-    await delay(10);
-    return Promise.resolve();
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleWheel(event) {
-    event.preventDefault();
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleWindowClick(event) {
-    if (this._open) {
-      const list = document.getElementById(`picker-vp-${this._id}`);
-      const isClickInside = Generate.findEventPath(event, this.el);
-      const isClickList = list ? (Generate.findEventPath(event, list)) : false;
-      if (!isClickInside && !isClickList) {
-        this._open = false;
-      }
-    }
-  }
-  openToggle() {
-    if (this.disabled)
-      return;
-    this._open = !this._open;
-  }
-  /**
-   * @desc
-   */
-  async open() {
-    await delay(50);
-    this.openToggle();
-  }
-  /**
-   * @desc
-   */
-  async close() {
-    this._open = false;
-  }
-  /**
-   * @desc
-   */
-  async getValue() {
-    return this.value;
-  }
-  /**
-   * @param
-   * @param disabled
-   */
-  async setDisabled(disabled) {
-    this.disabled = disabled;
-  }
-  changeFormat(date, reverseDay = false) {
-    if (!date)
-      return;
-    const pad = (n) => n < 10 ? `0${n}` : n;
-    const day = pad(new Date(date).getDate());
-    const month = pad(new Date(date).getMonth() + 1);
-    const year = new Date(date).getFullYear();
-    const hours = pad(new Date(date).getHours());
-    const minutes = pad(new Date(date).getMinutes());
-    if (this.type == "range" || this.type == "date") {
-      return reverseDay ? `${month}/${day}/${year}` : `${day}/${month}/${year}`;
-    }
-    return reverseDay ? `${month}/${day}/${year} ${hours}:${minutes}` : `${day}/${month}/${year} ${hours}:${minutes}`;
-  }
-  isTime(value) {
-    return /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(value);
-  }
-  getHHMM(date) {
-    if (!date)
-      return;
-    const pad = (n) => n < 10 ? `0${n}` : n;
-    const hours = pad(new Date(date).getHours());
-    const minutes = pad(new Date(date).getMinutes());
-    return `${hours}:${minutes}`;
-  }
-  /**
-   * @desc
-   * @param dateOrTime
-   */
-  async set(dateOrTime) {
-    if (dateOrTime) {
-      if (typeof dateOrTime === "number") {
-        dateOrTime = new Date(dateOrTime);
-      }
-      if (this.type == "time") {
-        let time = dateOrTime;
-        if (!this.isTime(dateOrTime)) {
-          time = this.getHHMM(dateOrTime);
-        }
-        this.setDataFromText(time, true, false);
-      }
-      else {
-        const split = dateOrTime.toString().split('-');
-        const parseDate0 = Date.parse(split[0]);
-        if (split[0] && !isNaN(parseDate0)) {
-          var date = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()));
-          if (split[1] && !isNaN(Date.parse(split[1]))) {
-            var date2 = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime()));
-            date = date + "-" + date2;
-          }
-          this.setDataFromText(date, true, false);
-        }
-        else {
-          this.setDataFromText('', true, false);
-        }
-      }
-    }
-    else {
-      this.setClear();
-    }
-  }
-  async get() {
-    var _a;
-    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
-  }
-  async setClear() {
-    await this.handleInputClear();
-    return Promise.resolve();
-  }
-  /**
-   * @desc
-   */
-  async getInput() {
-    return this.inputElement;
-  }
-  /**
-   * @desc
-   * @returns
-   */
-  async isValid() {
-    return this.getError();
-  }
-  async resetCaption() {
-    await delay(10);
-    await this.inputElement.resetCaption();
-    this.captionType = 'default';
-    this.captionError = null;
-    await delay(10);
-    return Promise.resolve();
-  }
-  addZeroBefore(n) {
-    return (n < 10 ? '0' : '') + n;
-  }
-  formatDate(date, format) {
-    const map = {
-      mm: this.addZeroBefore(date.getMonth() + 1),
-      dd: this.addZeroBefore(date.getDate()),
-      yyyy: this.addZeroBefore(date.getFullYear()),
-      hh: this.addZeroBefore(date.getHours()),
-      mi: this.addZeroBefore(date.getMinutes()),
-    };
-    return format.replace(/mm|dd|yyyy|hh|mi/gi, matched => map[matched]);
-  }
-  handleResize() {
-    this.calculateLocation();
-  }
-  handleWheels(event) {
-    if (this._open) {
-      const list = document.querySelector(`#picker-vp-${this._id}`);
-      const isClickInside = list && Generate.findEventPath(event, list);
-      if (isClickInside) {
-        this.calculateLocation();
-      }
-      else {
-        this._open = false;
-      }
-    }
-  }
-  componentDidLoad() {
-    const picker = this.el.shadowRoot.querySelector(`#picker-vp-${this._id}`);
-    //move to body
-    if (picker) {
-      document.body.appendChild(picker);
-      this.calculateLocation();
-    }
-  }
-  disconnectedCallback() {
-    this.el.innerHTML = '';
-    const pickerBox = document.getElementById(`picker-vp-${this._id}`);
-    if (pickerBox) {
-      pickerBox.remove();
-    }
-  }
-  async calculateLocation() {
-    const pickerBox = document.getElementById(`picker-vp-${this._id}`);
-    const placementArray = this.placement.split('-');
-    if (this.alignment) {
-      this.placement = placementArray[0] + (this.alignment == "right" ? "-end" : "-start");
-    }
-    var placement = this.placement;
-    const targetElementId = this.linkedComponent ? this.linkedComponent : this._id;
-    const target = document.getElementById(targetElementId);
-    if (target) {
-      const targetElement = this.linkedComponent ? target : target.shadowRoot.querySelector(`#picker-input-${this._id}`) || target.shadowRoot.querySelector("bcm-datetime-picker").shadowRoot.querySelector(`#picker-input-${this._id}`);
-      if (pickerBox && targetElement) {
-        getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
-        await delay(10);
-        let pos = setPosition(placement, targetElement);
-        let captionAreaHeight = this.noCaption ? 0 : 20;
-        let labelAreaHeight = 0;
-        // if (this.fullWidth) {
-        //     pickerBox.style.width = targetElement.offsetWidth + 'px';
-        // }
-        getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
-        await delay(10);
-        pos = setPosition(placement, targetElement);
-        if (this.linkedComponent) {
-          pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight : pos[0]) + 'px';
-        }
-        else {
-          pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
-        }
-        switch (placement.split('-')[1]) {
-          case "start":
-            pickerBox.style.left = pos[1] + 'px';
-            break;
-          case "center":
-            pickerBox.style.left = pos[1] - pickerBox.offsetWidth / 2 + 'px';
-            break;
-          case "end":
-            pickerBox.style.left = pos[1] - pickerBox.offsetWidth + 'px';
-            break;
-          default:
-            break;
-        }
-        pickerBox.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
-      }
-    }
-  }
-  handleKeyDown(ev) {
-    const keycode = ev.keyCode || ev.which;
-    if (keycode === Bcm.KeyCode.escape) {
-      if (this._open) {
-        this._open = false;
-        ev.preventDefault();
-        ev.stopPropagation();
-        ev.stopImmediatePropagation();
-        this.markForCheck();
-      }
-    }
-  }
-  render() {
-    const dayNumbersClasses = cs('day-numbers');
-    const datetimePickerClasses = cs('datetime-picker', 'datetime-picker-wrapper', {
-      'open': this._open,
-      'no-caption': this.noCaption,
-    });
-    const hostClasses = cs(this.hidden ? 'hidden' : null, {
-      'full-width': this.fullWidth,
-      'linked-component': this.linkedComponent,
-    });
-    const toggleClasses = cs('toggle', {
-      disabled: this.disabled
-    });
-    const clockIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>`;
-    const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
-    const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
-    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId },
-      this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() },
-        h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))),
-      h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: true, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e), 
-        // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
-        noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType },
-        this.error && (h("span", { slot: "suffix" },
-          h("bcm-tooltip", { placement: "top", message: this.errorText, trigger: "hover" },
-            h("bcm-icon", { 
-              // slot="suffix"
-              // title={this.errorText}
-              icon: "far fa-exclamation-circle" })))),
-        h("span", { slot: "suffix", onClick: () => this.openPicker() },
-          h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))),
-      h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) },
-        h("div", { class: "modules" },
-          this.hasDateModule && (h("div", { class: "date-container" },
-            h("div", { class: "bcm-datetime-picker__header" },
-              h("span", null),
-              h("div", { class: "month-year" },
-                h("button", { onClick: () => this.getPrevMonth() },
-                  h("bcm-icon", { icon: "far fa-chevron-left" })),
-                h("div", { class: "month-year-wrapper" },
-                  h("span", { class: "month" }, this.getMonthText()),
-                  ",",
-                  h("span", { class: "year" }, this.date.getFullYear())),
-                h("button", { onClick: () => this.getNextMonth() },
-                  h("bcm-icon", { icon: "far fa-chevron-right" }))),
-              h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")),
-            h("div", { class: "bcm-datetime-picker__content" },
-              h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) },
-                h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))),
-                h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })),
-              h("div", { class: "days" },
-                h("div", { class: "day-labels" },
-                  h("span", null, "Mo"),
-                  h("span", null, "Tu"),
-                  h("span", null, "We"),
-                  h("span", null, "Th"),
-                  h("span", null, "Fr"),
-                  h("span", null, "Sa"),
-                  h("span", null, "Su")),
-                h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
-                    'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
-                    'not-this-month': !day.thisMonth,
-                    'is-weekend': day.isWeekend,
-                    'today': day.today,
-                    'selected': this.getSelected(day.date),
-                    'selected-start': this.getSelected(day.date) && this.selectedEndDate && this.type === Types.range,
-                    'selected-end': this.getSelected(day.date, true) && this.type === Types.range,
-                    'range': this.getDateIsInRange(day.date) && this.type === Types.range
-                  }, onClick: () => this.handleDayNumber(day.date) },
-                  h("span", { class: "number" }, day.day))))))))),
-          this.hasTimeModule && (h("div", { class: "time-container" },
-            h("div", { class: "bcm-datetime-picker__header" },
-              h("div", { class: "month-year" },
-                h("span", { class: "month" }, this.getTimeText())),
-              h("span", { class: "now", onClick: () => { this.setTime(), this.type == "time" && (this._open = false); } }, "Now")),
-            h("div", { class: "bcm-datetime-picker__content", onDblClick: (e) => { this.HourContentDblClick(e); } },
-              h("div", { class: "hours", ref: el => (this.hoursWrapperElement = el) },
-                h("div", { class: "items", ref: el => (this.hoursElement = el) }, this.hours.map((hour, idx) => h("span", { class: this.currentDate.hour === hour ? 'selected' : '', onClick: () => this.hourClick(idx) }, (hour < 10 && '0') + hour)))),
-              h("div", { class: "minutes", ref: el => (this.minutesWrapperElement = el) },
-                h("div", { class: "items", ref: el => (this.minutesElement = el) }, this.minutes.map((minute, idx) => h("span", { class: this.currentDate.minute === minute ? 'selected' : '', onClick: () => this.minuteClick(idx) }, (minute < 10 && '0') + minute)))),
-              h("div", { class: "select-strip", ref: el => (this.timeStripElement = el) }))))))));
-  }
-  static get is() { return "bcm-datetime-picker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["datetime-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["datetime-picker.css"]
-  }; }
-  static get properties() { return {
-    "_id": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Component Properties"
-      },
-      "attribute": "id",
-      "reflect": true,
-      "defaultValue": "Generate.UID()"
-    },
-    "date": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | Date",
-        "resolved": "Date | string",
-        "references": {
-          "Date": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "date",
-      "reflect": false,
-      "defaultValue": "new Date()"
-    },
-    "endDate": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | Date",
-        "resolved": "Date | string",
-        "references": {
-          "Date": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "end-date",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "type": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Type",
-        "resolved": "\"date\" | \"datetime\" | \"range\" | \"time\"",
-        "references": {
-          "Type": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "Types.datetime"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabledDates": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disableddates",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "_open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "minYear": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min-year",
-      "reflect": false,
-      "defaultValue": "1900"
-    },
-    "maxYear": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-year",
-      "reflect": false,
-      "defaultValue": "2200"
-    },
-    "noCaption": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-caption",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "captionError": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-error",
-      "reflect": false
-    },
-    "caption": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "captionType": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
-        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-type",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "alignment": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "alignment",
-      "reflect": false
-    },
-    "placement": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "PlacementTypes",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "PlacementTypes": {
-            "location": "import",
-            "path": "../../../models/bcm-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "Bcm.Placement['bottom-start']"
-    },
-    "linkedComponent": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "linked-component",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "years": {},
-    "hours": {},
-    "minutes": {},
-    "hasDateModule": {},
-    "hasTimeModule": {},
-    "renderDate": {},
-    "selectedDate": {},
-    "selectedEndDate": {},
-    "error": {},
-    "errorText": {},
-    "tick": {}
-  }; }
-  static get events() { return [{
-      "method": "load",
-      "name": "bcm-load",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "bcmOpen",
-      "name": "bcm-open",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "open": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "close": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "setDisabled": {
-      "complexType": {
-        "signature": "(disabled: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "disabled"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "param",
-            "text": ""
-          }, {
-            "name": "param",
-            "text": "disabled"
-          }]
-      }
-    },
-    "set": {
-      "complexType": {
-        "signature": "(dateOrTime: any) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "dateOrTime"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }, {
-            "name": "param",
-            "text": "dateOrTime"
-          }]
-      }
-    },
-    "get": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setClear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getInput": {
-      "complexType": {
-        "signature": "() => Promise<HTMLBcmOldInputElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLBcmOldInputElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLBcmOldInputElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "isValid": {
-      "complexType": {
-        "signature": "() => Promise<{ valid: boolean; error: boolean; errorText: string; }>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<{ valid: boolean; error: boolean; errorText: string; }>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }, {
-            "name": "returns",
-            "text": undefined
-          }]
-      }
-    },
-    "resetCaption": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "_open",
-      "methodName": "openChanged"
-    }, {
-      "propName": "renderDate",
-      "methodName": "renderDateChange"
-    }, {
-      "propName": "_open",
-      "methodName": "openChange"
-    }, {
-      "propName": "value",
-      "methodName": "valueChange"
-    }, {
-      "propName": "disabledDates",
-      "methodName": "disabledDatesChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleWindowClick",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "wheel",
-      "method": "handleWheels",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": "window",
-      "capture": true,
-      "passive": false
-    }]; }
-}
-__decorate([
-  IsLoad()
-], BcmDatetimePicker.prototype, "el", void 0);