bromcom-ui 2.3.62 → 2.3.63

package/dist/{bromcom-ui/bcm-datetime-picker.entry.js → collection/components/organism/datetime-picker/datetime-picker.js}

@@ -1,53 +1,11 @@
-import { r as registerInstance, e as createEvent, j as forceUpdate, h, f as Host, g as getElement } from './index-9dbea026.js';
-import { c as classnames } from './index-43956e3c.js';
-import './utils-1feb01eb.js';
-import { D as DragDirections, E as ElementDragger } from './element-dragger-e40f0410.js';
-import { D as DateTimeHelper } from './datetime-helper-c373f888.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}";
-
+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';
 const stringify = JSON.stringify;
-const BcmDatetimePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.load = createEvent(this, "bcm-load", 7);
-    this.change = createEvent(this, "bcm-change", 7);
+export class BcmDatetimePicker {
+  constructor() {
     this.id = null;
     this.inputId = null;
     this.emptyState = false;
@@ -682,7 +640,8 @@ const BcmDatetimePicker = class {
       this.renderDate = this.date;
       this.valueText = this.getValueText();
       this.setValue();
-      this.inputElement.value == "" && (this.inputElement.value = this.valueText);
+      const splitText = this.valueText.split('/');
+      this.inputElement.value = this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2]));
     }
   }
   setDataFromText(text, updateData = false, openPicker = true) {
@@ -763,7 +722,8 @@ const BcmDatetimePicker = class {
           this.setValue(true);
         }
       }
-      this.inputElement.value == "" && (this.inputElement.value = text);
+      const splitText = text.split('/');
+      this.inputElement.value = this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2]));
     }
   }
   /**
@@ -1142,19 +1102,19 @@ const BcmDatetimePicker = class {
   async setDisabled(disabled) {
     this.disabled = disabled;
   }
-  changeFormat(date) {
+  changeFormat(date, reverseDay = false) {
     if (!date)
       return;
     const pad = (n) => n < 10 ? `0${n}` : n;
-    const day = new Date(date).getDate();
-    const month = new Date(date).getMonth() + 1;
+    const day = pad(new Date(date).getDate());
+    const month = pad(new Date(date).getMonth() + 1);
     const year = new Date(date).getFullYear();
-    const hours = new Date(date).getHours();
-    const minutes = new Date(date).getMinutes();
+    const hours = pad(new Date(date).getHours());
+    const minutes = pad(new Date(date).getMinutes());
     if (this.type == "range" || this.type == "date") {
-      return `${day}/${month}/${year}`;
+      return reverseDay ? `${month}/${day}/${year}` : `${day}/${month}/${year}`;
     }
-    return `${day}/${month}/${year} ${pad(hours)}:${pad(minutes)}`;
+    return reverseDay ? `${month}/${day}/${year} ${hours}:${minutes}` : `${day}/${month}/${year} ${hours}:${minutes}`;
   }
   /**
    * @desc
@@ -1222,40 +1182,678 @@ const BcmDatetimePicker = class {
     return format.replace(/mm|dd|yyyy|hh|mi/gi, matched => map[matched]);
   }
   render() {
-    const dayNumbersClasses = classnames('day-numbers');
-    const datetimePickerClasses = classnames('datetime-picker', 'alignment-' + this.alignment, {
+    const dayNumbersClasses = cs('day-numbers');
+    const datetimePickerClasses = cs('datetime-picker', 'alignment-' + this.alignment, {
       'open': this._open,
       'no-caption': this.noCaption,
     });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+    const hostClasses = cs(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth
     });
-    const toggleClasses = classnames('toggle', {
+    const toggleClasses = cs('toggle', {
       disabled: this.disabled
     });
-    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, 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) => this.handleInputInput(e.detail), noCaption: this.noCaption, caption: this.caption, captionType: this.captionType }, this.error && (h("bcm-tooltip", { slot: "suffix", placement: "top", message: this.errorText }, h("bcm-icon", {
-      // slot="suffix"
-      // title={this.errorText}
-      icon: "exclamation-circle", color: "red-6", size: 16
-    }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("bcm-icon", { id: "calender-icon", class: toggleClasses, icon: "calendar" }))), h("div", { id: "picker-vp-" + this.id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e), style: this.optionViewportStyleAlignment }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "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: "right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "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: "header" }, h("div", { class: "month-year" }, h("span", { class: "month" }, this.getTimeText())), h("span", { class: "now", onClick: () => this.setTime() }, "Now")), h("div", { class: "content" }, 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) }))))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "renderDate": ["renderDateChange"],
-    "_open": ["openChange"],
-    "value": ["valueChange"],
-    "disabledDates": ["disabledDatesChange"]
+    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId },
+      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) => this.handleInputInput(e.detail), noCaption: this.noCaption, caption: this.caption, captionType: this.captionType },
+        this.error && (h("bcm-tooltip", { slot: "suffix", placement: "top", message: this.errorText },
+          h("bcm-icon", { 
+            // slot="suffix"
+            // title={this.errorText}
+            icon: "exclamation-circle", color: "red-6", size: 16 }))),
+        h("span", { slot: "suffix", onClick: () => this.openPicker() },
+          h("bcm-icon", { id: "calender-icon", class: toggleClasses, icon: "calendar" }))),
+      h("div", { id: "picker-vp-" + this.id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e), style: this.optionViewportStyleAlignment },
+        h("div", { class: "modules" },
+          this.hasDateModule && (h("div", { class: "date-container" },
+            h("div", { class: "header" },
+              h("span", null),
+              h("div", { class: "month-year" },
+                h("button", { onClick: () => this.getPrevMonth() },
+                  h("bcm-icon", { icon: "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: "right" }))),
+              h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")),
+            h("div", { class: "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: "header" },
+              h("div", { class: "month-year" },
+                h("span", { class: "month" }, this.getTimeText())),
+              h("span", { class: "now", onClick: () => this.setTime() }, "Now")),
+            h("div", { class: "content" },
+              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"]
   }; }
-};
-BcmDatetimePicker.style = datetimePickerCss;
-
-export { BcmDatetimePicker as bcm_datetime_picker };
+  static get styleUrls() { return {
+    "$": ["datetime-picker.css"]
+  }; }
+  static get properties() { return {
+    "date": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Date",
+        "resolved": "Date | string",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component Properties"
+      },
+      "attribute": "date",
+      "reflect": false,
+      "defaultValue": "new Date()"
+    },
+    "endDate": {
+      "type": "string",
+      "mutable": false,
+      "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": false,
+      "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": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabledDates": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disableddates",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "_open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": true
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "minYear": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-year",
+      "reflect": false,
+      "defaultValue": "1900"
+    },
+    "maxYear": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-year",
+      "reflect": false,
+      "defaultValue": "2200"
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "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": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right' | 'default'",
+        "resolved": "\"default\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "'left'"
+    }
+  }; }
+  static get states() { return {
+    "years": {},
+    "hours": {},
+    "minutes": {},
+    "hasDateModule": {},
+    "hasTimeModule": {},
+    "renderDate": {},
+    "selectedDate": {},
+    "selectedEndDate": {},
+    "error": {},
+    "errorText": {}
+  }; }
+  static get events() { return [{
+      "method": "load",
+      "name": "bcm-load",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "desc"
+          }],
+        "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": {}
+      }
+    }]; }
+  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": [{
+                "text": "disabled",
+                "name": "param"
+              }],
+            "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": [{
+                "text": "dateOrTime",
+                "name": "param"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }, {
+            "name": "param",
+            "text": "dateOrTime"
+          }]
+      }
+    },
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getInput": {
+      "complexType": {
+        "signature": "() => Promise<HTMLBcmInputElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLBcmInputElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLBcmInputElement>"
+      },
+      "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": "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
+    }]; }
+}