bromcom-ui 2.7.37-rc.9 → 2.7.38-rc.0

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

@@ -4,11 +4,15 @@
  */
 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;
+  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 { h, forceUpdate, Host } from '@stencil/core';
 import { ElementDragger, DragDirections } from '../../../utils/element-dragger';
 import { Months, Days, Types } from './types';
 import cs from 'classnames';
@@ -29,9 +33,6 @@ export class BcmDatetimePicker {
     this.dayNumbers = [];
     this.valueText = null;
     this.dataIsValid = false;
-    /**
-     * Component Properties
-     */
     this._id = Generate.UID();
     this.date = new Date();
     this.endDate = null;
@@ -41,22 +42,28 @@ export class BcmDatetimePicker {
     this.value = null;
     this._open = false;
     this.hidden = false;
+    this.name = undefined;
     this.fullWidth = false;
     this.required = false;
+    this.label = undefined;
+    this.placeholder = undefined;
     this.minYear = 1900;
     this.maxYear = 2200;
     this.noCaption = false;
+    this.captionError = undefined;
     this.caption = '';
     this.captionType = 'default';
+    this.alignment = undefined;
     this.placement = Bcm.Placement['bottom-start'];
-    /**
-     * Component States
-     */
+    this.linkedComponent = undefined;
     this.years = [];
     this.hours = [];
     this.minutes = [];
     this.hasDateModule = false;
     this.hasTimeModule = false;
+    this.renderDate = undefined;
+    this.selectedDate = undefined;
+    this.selectedEndDate = undefined;
     this.error = false;
     this.errorText = '';
     this.tick = {};
@@ -1348,824 +1355,792 @@ export class BcmDatetimePicker {
     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) }))))))));
+    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"
+  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()"
       },
-      "attribute": "id",
-      "reflect": true,
-      "defaultValue": "Generate.UID()"
-    },
-    "date": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | Date",
-        "resolved": "Date | string",
-        "references": {
-          "Date": {
-            "location": "global"
+      "date": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | Date",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date",
+        "reflect": false,
+        "defaultValue": "new Date()"
       },
-      "attribute": "date",
-      "reflect": false,
-      "defaultValue": "new Date()"
-    },
-    "endDate": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | Date",
-        "resolved": "Date | string",
-        "references": {
-          "Date": {
-            "location": "global"
+      "endDate": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | Date",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "end-date",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "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"
+      "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": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "Types.datetime"
       },
-      "attribute": "max-year",
-      "reflect": false,
-      "defaultValue": "2200"
-    },
-    "noCaption": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabledDates": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disableddates",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "no-caption",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "captionError": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "_open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "caption-error",
-      "reflect": false
-    },
-    "caption": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "hidden": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "caption",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "captionType": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
-        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
+      "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": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "required": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "caption-type",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "alignment": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "placeholder": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "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"
-          }
-        }
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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"
       },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "Bcm.Placement['bottom-start']"
-    },
-    "linkedComponent": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "captionError": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
       },
-      "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": ""
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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'"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "bcmOpen",
-      "name": "bcm-open",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "alignment": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alignment",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "open": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "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"
+            }
           }
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "Bcm.Placement['bottom-start']"
       },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
+      "linkedComponent": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "linked-component",
+        "reflect": false
       }
-    },
-    "close": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  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>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<any>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }]
+        }
       },
-      "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"
-          }
+      "getValue": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }]
+        }
       },
-      "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"
-          }
+      "setDisabled": {
+        "complexType": {
+          "signature": "(disabled: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "disabled"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "param",
+              "text": ""
+            }, {
+              "name": "param",
+              "text": "disabled"
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }, {
-            "name": "param",
-            "text": "dateOrTime"
-          }]
-      }
-    },
-    "get": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "set": {
+        "complexType": {
+          "signature": "(dateOrTime: any) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "dateOrTime"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<any>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }, {
+              "name": "param",
+              "text": "dateOrTime"
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setClear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getInput": {
-      "complexType": {
-        "signature": "() => Promise<HTMLBcmOldInputElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "setClear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "HTMLBcmOldInputElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<HTMLBcmOldInputElement>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "isValid": {
-      "complexType": {
-        "signature": "() => Promise<{ valid: boolean; error: boolean; errorText: string; }>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "getInput": {
+        "complexType": {
+          "signature": "() => Promise<HTMLBcmOldInputElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLBcmOldInputElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLBcmOldInputElement>"
         },
-        "return": "Promise<{ valid: boolean; error: boolean; errorText: string; }>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }, {
-            "name": "returns",
-            "text": undefined
-          }]
-      }
-    },
-    "resetCaption": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "isValid": {
+        "complexType": {
+          "signature": "() => Promise<{ valid: boolean; error: boolean; errorText: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ valid: boolean; error: boolean; errorText: string; }>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "desc",
+              "text": undefined
+            }, {
+              "name": "returns",
+              "text": undefined
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "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": "scroll",
-      "method": "handleWheels",
-      "target": "document",
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "wheel",
-      "method": "handleWheels",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": "window",
-      "capture": true,
-      "passive": false
-    }]; }
+  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": "scroll",
+        "method": "handleWheels",
+        "target": "document",
+        "capture": true,
+        "passive": true
+      }, {
+        "name": "wheel",
+        "method": "handleWheels",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": true,
+        "passive": false
+      }];
+  }
 }
 __decorate([
   IsLoad()