bromcom-ui 2.9.0-rc.8 → 2.9.0

package/dist/collection/components/molecules/input-dropdown/input-dropdown.js

@@ -0,0 +1,751 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate } from "@bcm/template";
+import { Fragment, Host, forceUpdate, h } from "@stencil/core";
+import cs from "classnames";
+import { inputDropdownStyle } from "./input-dropdown.style";
+export class BcmInputDropdown {
+  constructor() {
+    this.handleKeyPress = e => {
+      var _a, _b;
+      if (((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) >= +this.maxCharacterLimit) {
+        e.preventDefault();
+        return;
+      }
+    };
+    this._id = Generate.UID();
+    this.value = undefined;
+    this.defaultValue = {};
+    this.lateKeys = "L";
+    this.maxCharacterLimit = 1;
+    this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.hideComment = false;
+    this.hideCaption = true;
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.data = [
+      { key: "/", value: "Present", color: "#00b050" },
+      { key: "B", value: "Educated off site (NOT dual registration)", color: "#ffc000" },
+      { key: "C", value: "Other authorised circumstance", color: "#ffc000" },
+      { key: "D", value: "Dual registration", color: "#0070c0" },
+      { key: "E", value: "Excluded", color: "#ff0000" },
+      { key: "F", value: "Free Study", color: "#ffc000" },
+      { key: "I", value: "Illness", color: "#ff0000" },
+      { key: "J", value: "Interview", color: "#ffc000" },
+      { key: "L", value: "Late before reg. closed", color: "#ffc000" },
+    ];
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.isOpenMenu = false;
+    this.invalid = false;
+  }
+  get overlayContainer() {
+    return document.getElementById("bcm-overlay-container");
+  }
+  get menuContent() {
+    var _a, _b;
+    return (_b = (_a = this.overlayContainer) === null || _a === void 0 ? void 0 : _a.querySelector("#" + `i-dropdown-menu-${this._id}`)) !== null && _b !== void 0 ? _b : this.el.querySelector("#" + `i-dropdown-menu-${this._id}`);
+  }
+  get keys() {
+    return this.lateKeys.toLocaleLowerCase().split(",");
+  }
+  get isLate() {
+    var _a, _b, _c, _d, _e, _f;
+    return (this.keys.includes((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase()) ||
+      ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.find(item => { var _a, _b, _c; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _d === void 0 ? void 0 : _d.isLate) ||
+      ((_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.find(item => { var _a, _b, _c; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _f === void 0 ? void 0 : _f.lateMin) > 0);
+  }
+  componentWillLoad() {
+    var _a, _b;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+    if (((_a = Object.keys(this.defaultValue)) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.watchDefaultValueHandler(this.defaultValue);
+    }
+    else {
+      this.value = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find(item => item.selected);
+    }
+  }
+  get commentContent() {
+    var _a, _b;
+    return (_b = (_a = this.overlayContainer) === null || _a === void 0 ? void 0 : _a.querySelector("#" + `i-dropdown-comment-${this._id}`)) !== null && _b !== void 0 ? _b : this.el.querySelector("#" + `i-dropdown-comment-${this._id}`);
+  }
+  clickListener(e) {
+    var _a, _b;
+    const isSelf = Generate.findEventPath(e, this.el);
+    const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isSelf && !isLinked && !this.keys.includes((_a = this.value) === null || _a === void 0 ? void 0 : _a.key)) {
+      (_b = this.commentContent) === null || _b === void 0 ? void 0 : _b.hide();
+      return;
+    }
+  }
+  watchDefaultValueHandler(newValue) {
+    var _a, _b;
+    if (newValue) {
+      this.value = (_a = this.data) === null || _a === void 0 ? void 0 : _a.find(item => { var _a, _b; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newValue.key) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+      this.data = this.data.map(data => {
+        if (data.key === (newValue === null || newValue === void 0 ? void 0 : newValue.key)) {
+          data = newValue;
+          data.selected = true;
+        }
+        else {
+          data.selected = false;
+        }
+        return data;
+      });
+      this.value = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find(item => item === null || item === void 0 ? void 0 : item.selected);
+      forceUpdate(this.el);
+    }
+  }
+  async set(data) {
+    this.data = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  async get() {
+    return this.value;
+  }
+  async setClear() {
+    this.value = null;
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.invalid = false;
+    return Promise.resolve();
+  }
+  onSelectItem(item) {
+    var _a;
+    this.invalid = false;
+    this.data = this.data.map(data => (Object.assign(Object.assign({}, data), { selected: data.key === item.key })));
+    this.value = (_a = this.data) === null || _a === void 0 ? void 0 : _a.find(item => item === null || item === void 0 ? void 0 : item.selected);
+    this.onChangeDropdown.emit(this.value);
+    this.change.emit();
+  }
+  async handleInput(e) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const value = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value;
+    this.isOpenMenu = true;
+    const maxLengthExceeded = (value === null || value === void 0 ? void 0 : value.length) >= +this.maxCharacterLimit;
+    if (maxLengthExceeded) {
+      const item = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find(item => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === value.toLowerCase(); });
+      if (item) {
+        await ((_c = this.menuContent) === null || _c === void 0 ? void 0 : _c.hide());
+        if (!(item === null || item === void 0 ? void 0 : item.hideComment)) {
+          (_d = this.commentContent) === null || _d === void 0 ? void 0 : _d.show();
+        }
+        this.onSelectItem(item);
+      }
+      else {
+        this.invalid = true;
+        this.value = e.target.value;
+        await ((_e = this.menuContent) === null || _e === void 0 ? void 0 : _e.show());
+        this._input.style.color = "#ff0000";
+      }
+    }
+    else {
+      (_f = this.commentContent) === null || _f === void 0 ? void 0 : _f.hide();
+      (_g = this.menuContent) === null || _g === void 0 ? void 0 : _g.hide();
+      this.value = null;
+      this._input.style.color = "#000000";
+      this.invalid = false;
+    }
+    this.change.emit();
+  }
+  onClickSave() {
+    var _a;
+    (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide();
+    this.data = this.data.map(data => (Object.assign(Object.assign({}, data), (data.key === this.value.key && {
+      lateMin: this.value.lateMin,
+      comment: this.value.comment,
+    }))));
+    forceUpdate(this.el);
+    this.onChangeDropdown.emit(this.value);
+    this.change.emit();
+  }
+  async onClick(item) {
+    var _a, _b;
+    if (!(item === null || item === void 0 ? void 0 : item.hideComment)) {
+      (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    await ((_b = this.menuContent) === null || _b === void 0 ? void 0 : _b.hide());
+    this.onSelectItem(item);
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    const { size, label, placeholder, required, disabled, readonly, _id, invalid, hideComment, noCaption, customErrorMessage, caption, captionType, captionError, hideCaption } = this;
+    const { base, inputArea, input, button, menu, menuItem, commentArea, disabledItem, content, selectedItem } = inputDropdownStyle({ size, invalid, hideComment, disabled });
+    const MenuTemplates = () => {
+      var _a;
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: menu() }, this.invalid && (h("li", { class: menuItem() + " tw-bg-red-100 hover:tw-bg-red-100" }, h("span", { class: "tw-text-red-900" }, h("i", { class: "far fa-exclamation-circle" })), h("span", null, "There is not mark you entered, please use"))), (_a = this.data) === null || _a === void 0 ? void 0 :
+        _a.map((item) => (h(Fragment, null, !(item === null || item === void 0 ? void 0 : item.disabled) ? (h("li", { class: (item === null || item === void 0 ? void 0 : item.selected) ? selectedItem() : menuItem(), onClick: () => this.onClick(item) }, h("span", null, item.key), " - ", h("span", null, item.value))) : (h("li", { class: disabledItem() }, h("span", null, item.key), " - ", h("span", null, item.value)))))))) : null));
+    };
+    const CommentTemplate = () => {
+      var _a, _b, _c;
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, "no-caption": true, autocomplete: false, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
+    };
+    return (h(Host, { class: base() }, label && h("bcm-label", { htmlFor: _id + "-dropdown-input", size: size, value: label, required: required }), h("div", { class: content() }, h("div", { class: inputArea() }, h("input", { id: _id + "-dropdown-input", class: input(), style: { color: (_a = this.value) === null || _a === void 0 ? void 0 : _a.color }, type: "text", tabIndex: -1, placeholder: placeholder, value: (_b = this.value) === null || _b === void 0 ? void 0 : _b.key, disabled: disabled, required: required, autoComplete: "off", readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el) }), h("button", { disabled: disabled, id: `i-dropdown-button-${_id}`, class: button(), onClick: () => (this.isOpenMenu = true) }, h("i", { class: "fas fa-chevron-down" })), h("bcm-linked", { "onBcm-open": ({ detail }) => { var _a; return detail && ((_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide()); }, class: "tw-mt-1", id: `i-dropdown-menu-${_id}`, "target-id": `i-dropdown-button-${_id}`, placement: "bottom-start" }, h(MenuTemplates, null)), h("bcm-linked", { id: `i-dropdown-comment-${_id}`, "target-id": _id, trigger: "custom", placement: "left" }, h(CommentTemplate, null))), !this.hideComment ? (h("span", { onClick: () => {
+        var _a, _b;
+        if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.key) {
+          this.isOpenMenu = true;
+          (_b = this.commentContent) === null || _b === void 0 ? void 0 : _b.show();
+        }
+      }, class: cs(((_c = this.value) === null || _c === void 0 ? void 0 : _c.comment) || ((_d = this.value) === null || _d === void 0 ? void 0 : _d.lateMin) > 0 ? "tw-text-slate-600" : "tw-text-slate-400", {
+        "tw-cursor-pointer": (_e = this.value) === null || _e === void 0 ? void 0 : _e.key,
+      }) }, h("i", { class: "fas fa-comment" }))) : null), !hideCaption && h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  }
+  static get is() { return "bcm-input-dropdown"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Bcm.InputDropdownData",
+          "resolved": "InputDropdownData",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "defaultValue": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      },
+      "lateKeys": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "late-keys",
+        "reflect": false,
+        "defaultValue": "\"L\""
+      },
+      "maxCharacterLimit": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-character-limit",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideComment": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-comment",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideCaption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-caption",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "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"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Bcm.InputDropdownData[]",
+          "resolved": "InputDropdownData[]",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[\n        { key: \"/\", value: \"Present\", color: \"#00b050\" },\n        { key: \"B\", value: \"Educated off site (NOT dual registration)\", color: \"#ffc000\" },\n        { key: \"C\", value: \"Other authorised circumstance\", color: \"#ffc000\" },\n        { key: \"D\", value: \"Dual registration\", color: \"#0070c0\" },\n        { key: \"E\", value: \"Excluded\", color: \"#ff0000\" },\n        { key: \"F\", value: \"Free Study\", color: \"#ffc000\" },\n        { key: \"I\", value: \"Illness\", color: \"#ff0000\" },\n        { key: \"J\", value: \"Interview\", color: \"#ffc000\" },\n        { key: \"L\", value: \"Late before reg. closed\", color: \"#ffc000\" },\n    ]"
+      },
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "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"
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "StatusTypes",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "StatusTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-type",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.default"
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "customErrorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-error-message",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "captionCache": {},
+      "captionTypeCache": {},
+      "isOpenMenu": {},
+      "invalid": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onChangeDropdown",
+        "name": "bcm-input-dropdown-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "set": {
+        "complexType": {
+          "signature": "(data: Bcm.InputDropdownData[]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<Bcm.InputDropdownData>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          },
+          "return": "Promise<InputDropdownData>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setClear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "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": "defaultValue",
+        "methodName": "watchDefaultValueHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}