bromcom-ui 2.3.68 → 2.3.69

package/dist/cjs/bcm-datetime-picker.cjs.entry.js

@@ -0,0 +1,1270 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+require('./utils-60414768.js');
+const elementDragger = require('./element-dragger-4a91c708.js');
+const datetimeHelper = require('./datetime-helper-b4e6be8f.js');
+
+var Months;
+(function (Months) {
+  Months["january"] = "january";
+  Months["february"] = "february";
+  Months["march"] = "march";
+  Months["april"] = "april";
+  Months["may"] = "may";
+  Months["june"] = "june";
+  Months["july"] = "july";
+  Months["august"] = "august";
+  Months["september"] = "september";
+  Months["october"] = "october";
+  Months["november"] = "november";
+  Months["december"] = "december";
+})(Months || (Months = {}));
+var Days;
+(function (Days) {
+  Days["sunday"] = "sunday";
+  Days["monday"] = "monday";
+  Days["tuesday"] = "tuesday";
+  Days["wednesday"] = "wednesday";
+  Days["thursday"] = "thursday";
+  Days["friday"] = "friday";
+  Days["saturday"] = "saturday";
+})(Days || (Days = {}));
+/**
+ * 'type' prop predefined values
+ */
+var Types;
+(function (Types) {
+  Types["datetime"] = "datetime";
+  Types["range"] = "range";
+  Types["date"] = "date";
+  Types["time"] = "time";
+})(Types || (Types = {}));
+
+const datetimePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;position:relative;width:100%;max-width:256px;margin:0}:host(.full-width){max-width:100%}:host(.hidden){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc( 100% - 28px );z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .header .month-year{font-size:16px;line-height:24px}.date-container .header .month-year{display:flex;align-items:center}.date-container .header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .header .month{text-transform:capitalize}.date-container .header .year{padding-left:4px}.date-container .header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:calc(100% / 1);cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0)}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}";
+
+const stringify = JSON.stringify;
+const BcmDatetimePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.load = index.createEvent(this, "bcm-load", 7);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.id = null;
+    this.inputId = null;
+    this.emptyState = false;
+    this.initialized = false;
+    this.openExternal = false;
+    this.disabledDatesList = { min: null, max: null, dates: [] };
+    this.dayNumbers = [];
+    this.valueText = null;
+    this.dataIsValid = false;
+    this.optionViewportStyleAlignment = {};
+    /**
+     * Component Properties
+     */
+    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.alignment = 'left';
+    /**
+     * Component States
+     */
+    this.years = [];
+    this.hours = [];
+    this.minutes = [];
+    this.hasDateModule = false;
+    this.hasTimeModule = false;
+    this.error = false;
+    this.errorText = '';
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.id = (Math.random() * 4).toString(16).replace('.', '');
+    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, elementDragger.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, elementDragger.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, elementDragger.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) {
+      index.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({
+            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();
+    }
+    index.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(this.switchDDMM(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;
+      this.setDragSelection(target, this[target][nextChild], true, true);
+    });
+  }
+  /**
+   * @desc
+   */
+  createDragSelection(target, element, dragTriggerElement, strip, direction) {
+    const dragger = target + 'Dragger';
+    this[dragger] = new elementDragger.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, _d;
+    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) {
+      if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.value) != this.valueText) {
+        this.value = {
+          isValid: this.dataIsValid,
+          time: this.getTimeText(),
+          dateObject: {
+            hours: this.currentDate.hour,
+            minutes: this.currentDate.minute
+          },
+          value: this.valueText
+        };
+      }
+    }
+    if (this.type === Types.range) {
+      if (((_d = this.value) === null || _d === void 0 ? void 0 : _d.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 {
+          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.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);
+  }
+  /**
+  * @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;
+    }
+    this.setDragSelection('hours', this.currentDate.hour, true, true);
+    this.setDragSelection('minutes', this.currentDate.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;
+    this.setDragSelection('hours', this.hours[idx], true, true);
+  }
+  /**
+   * @desc
+   * @param idx
+   */
+  minuteClick(idx) {
+    if (this.minutesDragger.busy)
+      return;
+    this.setDragSelection('minutes', this.minutes[idx], true, true);
+  }
+  /**
+   * @desc
+   */
+  openPicker() {
+    if (this.disabled)
+      return;
+    this._open = true;
+    this.pickerAlignment();
+  }
+  pickerAlignment() {
+    this.optionViewportStyleAlignment = {};
+    var top = 0;
+    var eclientHeight = this.el.clientHeight;
+    var enoCaption = this.noCaption;
+    var innerHeight = window.innerHeight;
+    var pickerHeight = this.el.shadowRoot.getElementById("picker-vp-" + this.id).clientHeight;
+    if (this.el.parentNode['host'] != undefined && this.el.parentNode['host'].nodeName.toString().toLowerCase() == 'bcm-date-picker') {
+      top = document.querySelector('#' + this.el.parentNode['host'].id).getBoundingClientRect().top;
+    }
+    else {
+      top = document.querySelector('#' + this.el.id).getBoundingClientRect().top;
+    }
+    var elementBottom = innerHeight - top - (enoCaption ? eclientHeight : eclientHeight - 28);
+    if (pickerHeight > elementBottom) {
+      this.optionViewportStyleAlignment = {
+        'bottom': eclientHeight - 24 + "px",
+        'top': 'unset',
+        'box-shadow': '0px -1px 4px rgb(0 0 0 / 25%)'
+      };
+    }
+  }
+  /**
+   * @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) {
+    event.stopPropagation();
+  }
+  /**
+   * @desc
+   */
+  handleInputClear() {
+    this.selectedDate = null;
+    this.selectedEndDate = null;
+    this.emptyState = true;
+    this.renderDate = new Date();
+    this._open = false;
+    this.setValue(true);
+    this.setError();
+    this.getValueText();
+  }
+  /**
+   * @desc
+   */
+  handleInputFocus() {
+    this._open = true;
+    this.pickerAlignment();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWheel(event) {
+    event.preventDefault();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const target = event.target;
+    const classes = target.classList;
+    const tagName = target.tagName.toLowerCase();
+    /**
+     * @desc
+     */
+    const anotherDatePickerInput = () => {
+      const detect = path
+        && path[0]
+        && path[0].attributes
+        && path[0].attributes['bcm-internal-id']
+        && path[0].attributes['bcm-internal-id'].value;
+      return detect && path[0].attributes['bcm-internal-id'].value !== this.inputId;
+    };
+    const isNotbyClass = !classes.contains('sc-bcm-datetime-picker') &&
+      !classes.contains('sc-bcm-date-picker') &&
+      !classes.contains('sc-bcm-time-picker');
+    const isNotbyTagName = tagName !== 'bcm-datetime-picker' &&
+      tagName !== 'bcm-date-picker' &&
+      tagName !== 'bcm-time-picker';
+    if ((isNotbyClass && isNotbyTagName && !this.openExternal) || anotherDatePickerInput()) {
+      /* const rangeValidation = this.checkRangeValidation({ popupClosing: true })
+      
+      if (rangeValidation) */
+      this._open = false;
+    }
+    if (path
+      && path.filter((input) => input['id'] == "calender-icon")[0]
+      && path.filter((input) => input['id'] == this.inputId)[0] == undefined) {
+      this._open = false;
+    }
+    this.openExternal && (this.openExternal = false);
+  }
+  /**
+   * @desc
+   */
+  async open() {
+    this._open = true;
+    this.openExternal = true;
+    this.pickerAlignment();
+  }
+  /**
+   * @desc
+   */
+  async close() {
+    this._open = false;
+    this.openExternal = true;
+  }
+  /**
+   * @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}`;
+  }
+  /**
+   * @desc
+   * @param dateOrTime
+   */
+  async set(dateOrTime) {
+    const split = dateOrTime.toString().split('-');
+    var date = this.changeFormat(datetimeHelper.DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()));
+    if (split.length > 1) {
+      var date2 = this.changeFormat(datetimeHelper.DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime()));
+      date = date + "-" + date2;
+    }
+    this.setDataFromText(date, true, false);
+  }
+  async setClear() {
+    await this.handleInputClear();
+    await this.inputElement.setClear();
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  async getInput() {
+    return this.inputElement;
+  }
+  /**
+   * @desc
+   * @returns
+   */
+  async isValid() {
+    return this.getError();
+  }
+  async resetCaption() {
+    await this.inputElement.resetCaption();
+  }
+  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]);
+  }
+  render() {
+    const dayNumbersClasses = index$1.classnames('day-numbers');
+    const datetimePickerClasses = index$1.classnames('datetime-picker', 'alignment-' + this.alignment, {
+      'open': this._open,
+      'no-caption': this.noCaption,
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+      'full-width': this.fullWidth
+    });
+    const toggleClasses = index$1.classnames('toggle', {
+      disabled: this.disabled
+    });
+    return (index.h(index.Host, { class: hostClasses, "bcm-internal-id": this.inputId }, index.h("bcm-input", { ref: el => (this.inputElement = el), placeholder: 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, label: this.label, clearable: true, disableWatchValue: true, "on-bcm-focus": () => this.handleInputFocus(), "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
+      // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
+      noCaption: this.noCaption, caption: this.caption, captionType: this.captionType }, this.error && (index.h("bcm-tooltip", { slot: "suffix", placement: "top", message: this.errorText }, index.h("bcm-icon", {
+      // slot="suffix"
+      // title={this.errorText}
+      icon: "exclamation-circle", color: "red-6", size: 16
+    }))), index.h("span", { slot: "suffix", onClick: () => this.openPicker() }, index.h("bcm-icon", { id: "calender-icon", class: toggleClasses, icon: "calendar" }))), index.h("div", { id: "picker-vp-" + this.id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e), style: this.optionViewportStyleAlignment }, index.h("div", { class: "modules" }, this.hasDateModule && (index.h("div", { class: "date-container" }, index.h("div", { class: "header" }, index.h("span", null), index.h("div", { class: "month-year" }, index.h("button", { onClick: () => this.getPrevMonth() }, index.h("bcm-icon", { icon: "left" })), index.h("div", { class: "month-year-wrapper" }, index.h("span", { class: "month" }, this.getMonthText()), ",", index.h("span", { class: "year" }, this.date.getFullYear())), index.h("button", { onClick: () => this.getNextMonth() }, index.h("bcm-icon", { icon: "right" }))), index.h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), index.h("div", { class: "content" }, index.h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, index.h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => index.h("span", { onClick: () => this.yearClick(idx) }, year))), index.h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), index.h("div", { class: "days" }, index.h("div", { class: "day-labels" }, index.h("span", null, "Mo"), index.h("span", null, "Tu"), index.h("span", null, "We"), index.h("span", null, "Th"), index.h("span", null, "Fr"), index.h("span", null, "Sa"), index.h("span", null, "Su")), index.h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (index.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) }, index.h("span", { class: "number" }, day.day))))))))), this.hasTimeModule && (index.h("div", { class: "time-container" }, index.h("div", { class: "header" }, index.h("div", { class: "month-year" }, index.h("span", { class: "month" }, this.getTimeText())), index.h("span", { class: "now", onClick: () => this.setTime() }, "Now")), index.h("div", { class: "content" }, index.h("div", { class: "hours", ref: el => (this.hoursWrapperElement = el) }, index.h("div", { class: "items", ref: el => (this.hoursElement = el) }, this.hours.map((hour, idx) => index.h("span", { class: this.currentDate.hour === hour ? 'selected' : '', onClick: () => this.hourClick(idx) }, (hour < 10 && '0') + hour)))), index.h("div", { class: "minutes", ref: el => (this.minutesWrapperElement = el) }, index.h("div", { class: "items", ref: el => (this.minutesElement = el) }, this.minutes.map((minute, idx) => index.h("span", { class: this.currentDate.minute === minute ? 'selected' : '', onClick: () => this.minuteClick(idx) }, (minute < 10 && '0') + minute)))), index.h("div", { class: "select-strip", ref: el => (this.timeStripElement = el) }))))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "renderDate": ["renderDateChange"],
+    "_open": ["openChange"],
+    "value": ["valueChange"],
+    "disabledDates": ["disabledDatesChange"]
+  }; }
+};
+BcmDatetimePicker.style = datetimePickerCss;
+
+exports.bcm_datetime_picker = BcmDatetimePicker;