bromcom-ui 2.9.0-rc.1 → 2.9.0-rc.11

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

@@ -0,0 +1,698 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate, StringHelper } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate } from "@bcm/template";
+import { delay, pluralize } from "@bcm/utils";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+class InputDropdownData {
+}
+export class InputDropdown {
+  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.onClickSave = () => {
+      const lateMin = +this.lateMinutes;
+      if (lateMin > 0) {
+        this.value = Object.assign(Object.assign({}, this.value), { late: lateMin });
+        this.onChangeDropdown.emit(this.value);
+        this.onCloseLateContent();
+      }
+    };
+    this._id = Generate.UID();
+    this.value = undefined;
+    this.defaultValue = undefined;
+    this.lateKey = "L";
+    this.maxCharacterLimit = 1;
+    this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.fullWidth = false;
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.componentIsActive = 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: "#ff0000" },
+      { 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.invalid = false;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.activeSaveButton = true;
+    this.lateMinutes = 0;
+  }
+  get content() {
+    return document.getElementById(this._id + "-input-dropdown-main-content");
+  }
+  get lateContent() {
+    return document.getElementById(this._id + "-input-dropdown-late-content");
+  }
+  get isLate() {
+    return () => { var _a; return StringHelper.lowercase((_a = this.value) === null || _a === void 0 ? void 0 : _a.key) == StringHelper.lowercase(this.lateKey); };
+  }
+  onCloseMainContent() {
+    this.content && this.content.hide();
+  }
+  onCloseLateContent() {
+    this.lateContent && this.lateContent.hide();
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillLoad() {
+    if (this.defaultValue) {
+      this.value = {
+        key: this.defaultValue,
+      };
+    }
+  }
+  async set(data) {
+    this.data = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  async get() {
+    return this.value;
+  }
+  async setClear() {
+    this.value = "";
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.invalid = false;
+    return Promise.resolve();
+  }
+  clickListener(e) {
+    var _a, _b;
+    const isSelf = Generate.findEventPath(e, this.el);
+    const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isSelf && !isLinked && ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.toLowerCase()) != this.lateKey.toLowerCase()) {
+      this.onCloseLateContent();
+      return;
+    }
+  }
+  async handleInput(e) {
+    var _a, _b, _c, _d;
+    const value = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value;
+    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) {
+        this.value = item;
+        this._input.style.color = item.color;
+        this.invalid = false;
+        if (this.isLate()) {
+          (_c = this.lateContent) === null || _c === void 0 ? void 0 : _c.show();
+          await delay(60);
+          document.querySelector("#" + this._id + "-input-dropdown-late-content-input input").focus();
+        }
+        else {
+          (_d = this.lateContent) === null || _d === void 0 ? void 0 : _d.hide();
+        }
+        this.onChangeDropdown.emit(item);
+      }
+      else {
+        this.value = e.target.value;
+        this.content && this.content.show();
+        this._input.style.color = "#ff0000";
+        this.invalid = true;
+      }
+    }
+    else {
+      this.onCloseMainContent();
+      this.value = null;
+      this._input.style.color = "#000000";
+      this.invalid = false;
+    }
+    this.change.emit();
+  }
+  async onClick(item) {
+    var _a, _b;
+    this.value = item;
+    this.invalid = false;
+    this._input.style.color = item.color;
+    this.onCloseMainContent();
+    if (this.isLate()) {
+      (_a = this.lateContent) === null || _a === void 0 ? void 0 : _a.show();
+      await delay(60);
+      document.querySelector("#" + this._id + "-input-dropdown-late-content-input input").focus();
+    }
+    else {
+      (_b = this.lateContent) === null || _b === void 0 ? void 0 : _b.hide();
+    }
+    this.onChangeDropdown.emit(item);
+    this.change.emit();
+  }
+  render() {
+    const { label, size, noCaption, captionType, captionError, caption, required, invalid, disabled, readonly, value, fullWidth, lateMinutes } = this;
+    const color = invalid || captionType === "error" ? "red" : "primary";
+    const theme = Generate.getTwColor({ color });
+    const iconSizes = {
+      [Bcm.Size.small]: "tw-text-2",
+      [Bcm.Size.medium]: "tw-text-3 ",
+      [Bcm.Size.large]: "tw-text-4 ",
+    }[size];
+    const fontSizes = {
+      [Bcm.Size.small]: "tw-text-2",
+      [Bcm.Size.medium]: "tw-text-3",
+      [Bcm.Size.large]: "tw-text-4",
+    }[size];
+    const isError = invalid || captionType === "error";
+    const RenderMainContent = () => {
+      var _a;
+      return (h("bcm-linked", { id: this._id + "-input-dropdown-main-content", "target-id": this._id + "-dropdown-input-button", placement: "bottom-end" }, this.componentIsActive ? (h("div", { class: `tw-mt-1 tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-2 tw-overflow-auto tw-bg-white tw-p-3  tw-font-sans tw-text-3 tw-text-slate-700 ${fontSizes}` }, this.invalid && (h("li", { class: cs("tw-flex tw-w-full tw-flex-row tw-items-center tw-gap-3 tw-rounded  tw-bg-red-100 tw-px-4 tw-py-2") }, h("span", { class: "tw-text-red-900" }, h("i", { class: iconSizes + " 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 => {
+          var _a;
+          return (h("li", { onClick: () => this.onClick(item), class: cs("tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 hover:tw-bg-blue-100", {
+              "tw-bg-primary-200": ((_a = this.value) === null || _a === void 0 ? void 0 : _a.key) == item.key,
+            }) }, h("span", null, " ", item.key), " - ", h("span", null, item.value)));
+        }))) : null));
+    };
+    const RenderLateContent = () => {
+      var _a;
+      return (h("bcm-linked", { id: this._id + "-input-dropdown-late-content", "target-id": this._id, trigger: "custom", placement: "right", "onBcm-open": ({ detail }) => {
+          var _a;
+          if (detail) {
+            (_a = this.el.querySelector("#" + this._id + "-input-dropdown-late-content-input")) === null || _a === void 0 ? void 0 : _a.onBcmFocus();
+          }
+          else {
+            this._input.focus();
+          }
+        } }, this.componentIsActive ? (h("div", { class: "tw-flex tw-h-fit tw-w-full !tw-min-w-[288px] tw-flex-col tw-items-start tw-gap-4 tw-rounded tw-p-4 tw-shadow-2" }, h("div", { class: "tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-gap-3" }, h("header", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-between" }, h("div", { class: "tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-2" }, h("i", { class: "tw-text-size-4 fas fa-clock tw-text-amber-600" }), h("bcm-label", { class: "!tw-mb-0", size: "large", value: "Minutes Late", required: true })), h("div", { class: " tw-flex tw-h-4 tw-w-4 tw-flex-row tw-items-center tw-justify-center", onClick: () => this.onCloseLateContent() }, h("i", { class: "tw-text-size-4 fas fa-times tw-text-slate-600" }))), h("bcm-input", { id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, "no-caption": true, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.late, placeholder: "Enter Minus Late", required: true, "onBcm-change": (e) => (this.lateMinutes = +e.detail), onKeyDown: e => {
+          if (e.key === "Enter") {
+            this.onClickSave();
+          }
+        } })), h("section", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end" }, h("bcm-button", { size: "small", variant: "save", color: "blue", disabled: +lateMinutes < 1, onClick: () => this.onClickSave() }, "Save")))) : null));
+    };
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-inputs bcm-input-dropdown tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-gap-1", {
+        "tw-max-w-[86px]": size == Bcm.Size.small,
+        "tw-max-w-[92px]": size == Bcm.Size.medium,
+        "tw-max-w-[108px]": !fullWidth,
+        "tw-max-w-none": fullWidth,
+      }), onClick: () => (this.componentIsActive = true), onFocus: () => (this._input.focus(), (this.componentIsActive = true)) }, label && h("bcm-label", { htmlFor: this._id + "-dropdown-input", size: size, value: label, required: required }), h("div", { "aria-disabled": disabled ? "true" : "false", "aria-readonly": readonly ? "true" : "false", "aria-invalid": isError ? "true" : "false", tabIndex: disabled || readonly ? -1 : 0, onFocus: () => (this._input.focus(), (this.componentIsActive = true)), style: Object.assign({}, theme), class: cs("tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-between tw-rounded tw-border tw-border-solid tw-border-slate-300 tw-font-medium", "aria-disabled:tw-cursor-not-allowed aria-disabled:tw-bg-slate-100", "aria-readonly:tw-cursor-text aria-readonly:tw-bg-slate-100", "aria-invalid:tw-border-default-600 aria-invalid:tw-bg-default-50", {
+        "tw-h-6 tw-pr-0.5 tw-py-0.5 tw-pl-1 tw-gap-1": size == Bcm.Size.small,
+        "tw-h-7 tw-pr-0.5 tw-py-0.5 tw-pl-2 tw-gap-2": size == Bcm.Size.medium,
+        "tw-h-10 tw-pr-[4px] tw-py-1 tw-pl-3 tw-gap-3": size == Bcm.Size.large,
+        "hover:tw-border-default-600 hover:tw-bg-default-50": !disabled && !readonly && !isError,
+        "tw-outline-none focus:tw-ring-2 focus:tw-ring-default-400": !disabled && !readonly && !isError,
+      }) }, h("div", { class: " tw-flex tw-w-full tw-min-w-[42px] tw-flex-row tw-items-center tw-justify-center" }, value && (value === null || value === void 0 ? void 0 : value.late) && (h("bcm-tooltip", { message: `${lateMinutes} ${pluralize("Minute", lateMinutes)} Late`, trigger: "hover" }, h("i", { class: iconSizes + " fas fa-clock", onClick: () => this.lateContent.show() }))), captionType == Bcm.Status.error && h("i", { class: iconSizes + " tw-text-default-500" + " fas fa-exclamation-circle" }), h("input", { class: cs("tw-font-sans", "tw-h-full tw-w-full tw-bg-transparent tw-text-center tw-font-semibold !tw-uppercase tw-outline-none ", "disabled:tw-cursor-not-allowed disabled:tw-text-slate-400", "readonly:tw-text-slate-700 readonly:tw-cursor-text", `${fontSizes}`), id: this._id + "-dropdown-input", type: "text", tabIndex: -1, disabled: disabled, placeholder: this.placeholder, value: value === null || value === void 0 ? void 0 : value.key, required: this.required, readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el), onFocus: () => this._input.select() })), h("button", { id: this._id + "-dropdown-input-button", class: cs("dropdown-input-button", "tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1 tw-rounded tw-outline-none", "tw-border tw-border-solid tw-border-slate-300 tw-bg-slate-50 tw-font-medium tw-text-slate-600", "hover:tw-border-slate-400 hover:tw-bg-slate-200", "tw-min-w-[32px]", "tw-cursor-pointer", "disabled:tw-cursor-not-allowed disabled:tw-text-slate-400", "readonly:tw-text-slate-700 readonly:tw-cursor-text", {
+        "tw-h-[18px] tw-text-1 tw-leading-none": size == Bcm.Size.small,
+        "tw-h-[22px] tw-text-2": size == Bcm.Size.medium,
+        "tw-h-[30px] tw-text-2": size == Bcm.Size.large,
+      }), "aria-label": "dropdown", "aria-haspopup": "true", "aria-expanded": "false", disabled: disabled || readonly, tabIndex: -1 }, h("i", { class: "fas fa-chevron-down" })), h(RenderMainContent, null), h(RenderLateContent, null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.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": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "lateKey": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "late-key",
+        "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
+      },
+      "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"
+      },
+      "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": false,
+        "complexType": {
+          "original": "InputDropdownData[]",
+          "resolved": "InputDropdownData[]",
+          "references": {
+            "InputDropdownData": {
+              "location": "global"
+            }
+          }
+        },
+        "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: \"#ff0000\" },\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 {
+      "componentIsActive": {},
+      "invalid": {},
+      "captionCache": {},
+      "captionTypeCache": {},
+      "activeSaveButton": {},
+      "lateMinutes": {}
+    };
+  }
+  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: InputDropdownData[]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "InputDropdownData": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setClear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "resetCaption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}