@yoobic/yobi 8.3.0-9 → 8.3.0

package/dist/collection/components/form/form-todo-list-task/form-todo-list-task.js

@@ -1,700 +0,0 @@
-import { closeModal, dateAdd, dateFormat, findParent, fromNow, getAsyncExtraData, getDialogPosition, getHours, getMinutes, getUserDisplayName, isFullScreenFalse, isNativeMobile, isWeb, setDateHours, setDateMinutes, showModal, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State } from '@stencil/core';
-import { isArray } from 'lodash-es';
-import { TodoListMode } from '../../../interfaces/form-field/form-field.instance';
-import { setValidator } from '../../../utils/helpers/form-input-helpers';
-export class YooFormTodoListTaskComponent {
-  constructor() {
-    this.mode = TodoListMode.none;
-    this.isEditedNoteState = false;
-    this.isDescriptionToggledState = false;
-    this.isValidState = false;
-  }
-  get isAnnouncementMode() {
-    return this.mode === TodoListMode.announcement;
-  }
-  handleClickOutside(event) {
-    if (this.calendarDialogHTMLElement && !event.composedPath().includes(this.calendarDialogHTMLElement)) {
-      closeModal(null, this.calendarDialogHTMLElement);
-    }
-  }
-  async onOpenCalendar(ev) {
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    this.calendarDialogHTMLElement = document.createElement('div');
-    showModal(this.calendarDialogHTMLElement, null, this.getCalendarModalCssClass(), this.getCalendarModalAnimation('Enter'), this.getCalendarModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
-      var _a;
-      if (this.calendarDialogHTMLElement) {
-        const modalHostYPosition = ((_a = findParent(this.host, 'yoo-ion-modal')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) || 0;
-        const inputFieldDimensions = this.textAreaHTMLElement.getBoundingClientRect();
-        const { left, top } = getDialogPosition(inputFieldDimensions, 'below', this.calendarDialogHTMLElement, inputFieldDimensions.width);
-        this.calendarDialogHTMLElement.style.left = `${isFullScreenFalse() ? 16 : left}px`;
-        this.calendarDialogHTMLElement.style.top = `${top - (isFullScreenFalse() ? modalHostYPosition : 0)}px`;
-        this.calendarDialogHTMLElement.style.width = `${inputFieldDimensions.width}px`;
-        this.calendarDialogHTMLElement.style.position = 'absolute';
-        this.calendarDialogHTMLElement.style.boxShadow = 'var(--web-shadow)';
-        this.calendarDialogHTMLElement.style.paddingTop = 'var(--spacing-16)';
-        this.calendarDialogHTMLElement.style.marginTop = 'var(--spacing-08)';
-        this.calendarDialogHTMLElement.style.backgroundColor = 'var(--light)';
-        this.calendarDialogHTMLElement.style.height = 'auto';
-        this.calendarDialogHTMLElement.appendChild(this.calendar);
-        this.calendarDialogHTMLElement.appendChild(this.time);
-      }
-    }).then(() => {
-      this.calendarDialogHTMLElement = null;
-    });
-  }
-  async onToggleDescription(ev) {
-    var _a;
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    if (this.isDescriptionToggledState) {
-      this.descriptionBk = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value;
-      this.value.description = null;
-    }
-    else {
-      this.value.description = { value: this.descriptionBk };
-      this.descriptionBk = null;
-    }
-    this.isDescriptionToggledState = !this.isDescriptionToggledState;
-  }
-  async onToggleImageRequired(ev) {
-    var _a;
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    this.value.isphotorequired = { value: !((_a = this.value.isphotorequired) === null || _a === void 0 ? void 0 : _a.value) };
-    this.dataChanged.emit(this.value);
-    forceUpdate(this);
-  }
-  async onAssignUser(ev) {
-    var _a, _b;
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    const initialSelection = ((_a = this.value.user) === null || _a === void 0 ? void 0 : _a.value) ? [(_b = this.value.user) === null || _b === void 0 ? void 0 : _b.value] : [];
-    return getAsyncExtraData({ type: 'user-selection', params: { initialSelection, required: false, multiple: false, locations: this.locations } }).then((res) => {
-      var _a, _b;
-      if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a._id) {
-        this.value.user = { value: res === null || res === void 0 ? void 0 : res.data };
-      }
-      else if (isArray(res === null || res === void 0 ? void 0 : res.data) && ((_b = res.data) === null || _b === void 0 ? void 0 : _b.length)) {
-        this.value.user = { value: res.data[0] };
-      }
-      else {
-        this.value.user = null;
-      }
-      this.dataChanged.emit(this.value);
-      forceUpdate(this);
-    });
-  }
-  componentWillLoad() {
-    var _a, _b;
-    this.isDescriptionToggledState = !!((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim());
-    setValidator(this);
-  }
-  validate() {
-    var _a, _b;
-    const validity = !!((_b = (_a = this.value.text) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim().length);
-    this.isValidState = validity;
-    if (!this.validity || this.validity !== validity) {
-      this.validity = validity;
-      this.validityChanged.emit(this.validity);
-    }
-    return this.validity;
-  }
-  get time() {
-    var _a;
-    const time = document.createElement('yoo-form-time');
-    time.style.setProperty('--spacing', 'var(--spacing-04)');
-    time.value = (_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value;
-    time.type = 'datetime';
-    time.addEventListener('inputChanged', (ev) => this.onSchedule(ev, ev.detail, true));
-    time.addEventListener('amPmToggled', (ev) => this.onAmPmToggled(ev));
-    return time;
-  }
-  get calendar() {
-    var _a;
-    const calendar = document.createElement('yoo-calendar');
-    calendar.isDatePicker = true;
-    calendar.activeDay = ((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value) || dateAdd(new Date(), 'd', 1);
-    calendar.classList.add('calendar-picker', 'datetime');
-    calendar.addEventListener('dateChanged', (ev) => { var _a; return this.onSchedule(ev, (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.date); });
-    return calendar;
-  }
-  getCalendarModalAnimation(enterLeave) {
-    return (this.calendarDialogHTMLElement ? `fade${enterLeave}Animation` : `slideY${enterLeave}ExpandAnimation`);
-  }
-  getCalendarModalCssClass() {
-    return !isWeb(this.host) && !isNativeMobile() ? 'context-menu emulate-calendar' : 'context-menu';
-  }
-  onAmPmToggled(ev) {
-    const isAM = (ev === null || ev === void 0 ? void 0 : ev.detail) === 'AM';
-    const isPM = (ev === null || ev === void 0 ? void 0 : ev.detail) === 'PM';
-    if (isAM || isPM) {
-      this.value.duedate.value = dateAdd(this.value.duedate.value, 'h', isAM ? -12 : 12);
-      this.dataChanged.emit(this.value);
-      forceUpdate(this);
-    }
-  }
-  onSchedule(ev, date, isTime) {
-    var _a, _b;
-    ev.stopPropagation();
-    if (date) {
-      const hours = isTime ? getHours(date) : getHours((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value);
-      const minutes = isTime ? getMinutes(date) : getMinutes((_b = this.value.duedate) === null || _b === void 0 ? void 0 : _b.value);
-      if (!isTime) {
-        this.value.duedate = { value: date };
-      }
-      this.value.duedate.value = setDateHours(this.value.duedate.value, hours);
-      this.value.duedate.value = setDateMinutes(this.value.duedate.value, minutes);
-      this.dataChanged.emit(this.value);
-      forceUpdate(this);
-    }
-  }
-  onTaskCompletedStateChange(ev) {
-    var _a;
-    ev.stopPropagation();
-    if (!this.readonly && !this.isCompleteLocked && !this.isTaskEdited) {
-      this.value.finished = { value: !((_a = this.value.finished) === null || _a === void 0 ? void 0 : _a.value) };
-      this.dataChanged.emit(this.value);
-      forceUpdate(this);
-      this.setTaskComplete.emit(this.value);
-      this.onSave();
-    }
-  }
-  onEditTitle(ev) {
-    var _a;
-    ev.stopPropagation();
-    this.value.text = { value: (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.trim() };
-    this.dataChanged.emit(this.value);
-    this.validate();
-  }
-  onEditDescription(ev) {
-    var _a;
-    ev.stopPropagation();
-    this.value.description = { value: (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.trim() };
-    this.dataChanged.emit(this.value);
-  }
-  onClearSchedule(ev) {
-    ev.stopPropagation();
-    this.value.duedate = null;
-    this.dataChanged.emit(this.value);
-    forceUpdate(this);
-  }
-  onSave(ev) {
-    var _a, _b;
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    this.isEditedNoteState = false;
-    this.isDescriptionToggledState = !!((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim());
-    if (this.translatedValue) {
-      this.translationValueUpdated.emit(this.translatedValue);
-      this.localTranslatedValue = this.translatedValue.value;
-      this.translatedValue = null;
-    }
-    this.saveTask.emit(this.value);
-  }
-  onCancel(ev) {
-    var _a, _b;
-    ev.stopPropagation();
-    this.isEditedNoteState = false;
-    this.isDescriptionToggledState = !!((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim());
-    this.cancelTask.emit(this.value);
-  }
-  renderTaskActions() {
-    var _a;
-    return (!this.readonly &&
-      !this.isTaskEdited && (h("div", { class: "actions primary" }, !!((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) && (h("yoo-context-menu", { contentButtons: this.actions, placement: "below" },
-      h("yoo-button", { size: "small", shape: "square", fill: "transparent", color: "stable" },
-        h("yoo-icon", { size: "small", name: "more", color: "stable" })))))));
-  }
-  renderTaskDetails() {
-    var _a, _b, _c, _d, _e, _f;
-    const Tag = !this.isTaskEdited ? 'div' : 'yoo-form-input-container';
-    return (h("div", { class: { 'task-details': true, edited: this.isTaskEdited } },
-      (this.isDescriptionToggledState || ((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim())) && (h("div", { class: { 'task-note': true, readonly: !this.isTaskEdited } },
-        h(Tag, { field: { title: !this.isTaskEdited ? '' : 'DESCRIPTION', hideOptional: !this.isTaskEdited } },
-          h("yoo-form-text-area", { value: (_c = this.value.description) === null || _c === void 0 ? void 0 : _c.value, onInputChanged: (ev) => this.onEditDescription(ev), readonly: !this.isTaskEdited, onValidityChanged: (ev) => ev.stopPropagation(), size: isWeb(this.host) ? 'medium' : 'large', translations: this.translations, onTranslationValueUpdated: (ev) => {
-              ev.stopPropagation();
-              this.translatedValue = ev.detail;
-            } })))),
-      ((_d = this.value.duedate) === null || _d === void 0 ? void 0 : _d.value) && (h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onClearSchedule(ev) },
-        h("yoo-icon", { slot: "start", name: "calendar", color: "app-color", size: "small" }),
-        translate('YOOBICDUEAT', { date: fromNow(this.value.duedate.value), time: dateFormat(this.value.duedate.value, 'HH:mm') }))),
-      ((_e = this.value.isphotorequired) === null || _e === void 0 ? void 0 : _e.value) && (h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onToggleImageRequired(ev) },
-        h("yoo-icon", { slot: "start", name: "image", color: "app-color", size: "small" }),
-        translate('MANDATORYPHOTO'))),
-      ((_f = this.value.user) === null || _f === void 0 ? void 0 : _f.value) && (h("span", { class: "user" },
-        h("yoo-avatar", { user: this.value.user.value, size: "small" }),
-        h("span", null, getUserDisplayName(this.value.user.value))))));
-  }
-  renderTask() {
-    var _a, _b, _c, _d;
-    const completeHandler = (ev) => this.onTaskCompletedStateChange(ev); // 'this.readonly' value is checked into 'onTaskCompletedStateChange'
-    const editHandler = !this.readonly && !this.isTaskEdited ? () => this.editTask.emit(this.value) : null;
-    return [
-      !this.isTaskEdited && (h("div", { class: "task-title" },
-        h("div", { class: "title" },
-          h("yoo-icon", { name: ((_a = this.value.finished) === null || _a === void 0 ? void 0 : _a.value) ? 'check' : 'circle', color: "app-color", class: { strict: this.readonly || this.isCompleteLocked }, onClick: completeHandler }),
-          h("div", { class: { done: (_b = this.value.finished) === null || _b === void 0 ? void 0 : _b.value }, onClick: editHandler }, translateMulti(this.localTranslatedValue || ((_c = this.value.text) === null || _c === void 0 ? void 0 : _c.value)))),
-        this.renderTaskActions())),
-      this.isTaskEdited && (h("yoo-form-input-container", { field: { title: 'TITLE' }, hideOptional: true },
-        ' ',
-        h("yoo-form-text-area", { ref: (el) => (this.textAreaHTMLElement = el), size: isWeb(this.host) ? 'medium' : 'large', initialRows: 1, maxRows: 3, resizable: "none", placeholder: this.placeholder, value: (_d = this.value.text) === null || _d === void 0 ? void 0 : _d.value, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSave(ev), translations: this.translations, onTranslationValueUpdated: (ev) => {
-            ev.stopPropagation();
-            this.translatedValue = ev.detail;
-          } }))),
-      this.renderTaskDetails()
-    ];
-  }
-  renderActionsWeb() {
-    var _a, _b, _c, _d;
-    return (h("div", { class: "actions all-web" },
-      h("div", { class: "actions primary spaced-btn-right" },
-        h("yoo-button", { fill: "solid", color: "app-color", disabled: !this.isValidState, onClick: (ev) => this.onSave(ev) }, this.saveBtnText),
-        h("yoo-button", { class: "cancel", shape: "circular", fill: "transparent", color: "stable", onClick: (ev) => this.onCancel(ev) },
-          h("yoo-icon", { name: "close", color: "stable" }))),
-      h("div", { class: "actions" },
-        !this.isAnnouncementMode && h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onOpenCalendar(ev) },
-          h("yoo-icon", { name: "calendar", color: ((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value) ? 'app-color' : 'stable' })),
-        !this.isAnnouncementMode && h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onToggleDescription(ev) },
-          h("yoo-icon", { name: "align-left", color: this.isDescriptionToggledState ? 'app-color' : 'stable' })),
-        h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onToggleImageRequired(ev) },
-          h("yoo-icon", { name: "image", color: ((_b = this.value.isphotorequired) === null || _b === void 0 ? void 0 : _b.value) ? 'app-color' : 'stable' })),
-        ((_c = this.locations) === null || _c === void 0 ? void 0 : _c.length) === 1 && h("yoo-button", { shape: "square", fill: "transparent", size: "medium", color: "stable", onClick: (ev) => this.onAssignUser(ev) }, ((_d = this.value.user) === null || _d === void 0 ? void 0 : _d.value) ? h("yoo-avatar", { user: this.value.user.value, size: "small" }) : h("yoo-icon", { name: "assign" })))));
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: { task: true, web: isWeb(this.host), editable: !this.readonly && !this.isTaskEdited } }, this.renderTask()),
-      isWeb(this.host) && this.isTaskEdited && this.renderActionsWeb()));
-  }
-  static get is() { return "yoo-form-todo-list-task"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-todo-list-task.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-todo-list-task.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "actions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton[]",
-        "resolved": "IButton[]",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "saveBtnText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "save-btn-text",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
-    },
-    "isCompleteLocked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-complete-locked",
-      "reflect": false
-    },
-    "isTaskEdited": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-task-edited",
-      "reflect": false
-    },
-    "locations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ILocation[]",
-        "resolved": "ILocation[]",
-        "references": {
-          "ILocation": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TodoListMode",
-        "resolved": "TodoListMode.announcement | TodoListMode.kanban | TodoListMode.none",
-        "references": {
-          "TodoListMode": {
-            "location": "import",
-            "path": "../../../interfaces/form-field/form-field.instance"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "TodoListMode.none"
-    },
-    "translations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ITranslation[]",
-        "resolved": "ITranslation[]",
-        "references": {
-          "ITranslation": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "isEditedNoteState": {},
-    "isDescriptionToggledState": {},
-    "isValidState": {}
-  }; }
-  static get events() { return [{
-      "method": "editTask",
-      "name": "editTask",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "setTaskComplete",
-      "name": "setTaskComplete",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "saveTask",
-      "name": "saveTask",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "cancelTask",
-      "name": "cancelTask",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "dataChanged",
-      "name": "dataChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ITodoTask",
-        "resolved": "ITodoTask",
-        "references": {
-          "ITodoTask": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "translationValueUpdated",
-      "name": "translationValueUpdated",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ key: string; value: string }",
-        "resolved": "{ key: string; value: string; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "onOpenCalendar": {
-      "complexType": {
-        "signature": "(ev?: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onToggleDescription": {
-      "complexType": {
-        "signature": "(ev?: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onToggleImageRequired": {
-      "complexType": {
-        "signature": "(ev?: MouseEvent | CustomEvent<boolean>) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          },
-          "CustomEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onAssignUser": {
-      "complexType": {
-        "signature": "(ev?: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClickOutside",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}