@yoobic/yobi 8.5.0-3 → 8.5.0-8

package/dist/collection/components/3.organisms/input-bar/input-bar.js

@@ -4,7 +4,7 @@ import { MediaCapture } from '@awesome-cordova-plugins/media-capture';
 import { IOSFilePicker } from '@ionic-native/file-picker/ngx';
 import { IFileUploadAcceptMode, MessageInput, MessageType } from '@shared/interfaces';
 import { addFilePrefix, closeModal, debounce, getAsyncExtraData, getMediaType, getModalAnimation, getSession, getUserDisplayName, gsapTo, hasWebCam, hideKeyboard, isAndroid, isBase64, isImage, isIOS, isMedia, isNativeMobile, isNullOrUndefined, isVideo, isWeb, keepAwake, moveToImageDirectory, read, replaceAndGetAllLinks, showActionSheet, showAlert, showModal, translate, vibrateHapticMedium } from '@shared/utils';
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { compact, isArray, isNumber } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
 import { getAppContext, sanitizeHTML, showPhotoEditor } from '../../../utils/helpers/common-helpers';
@@ -842,28 +842,25 @@ export class YooInputBarComponent {
       invisible: this.hasTextInside
     };
     const showSecondaryAction = !this.focused && ((_d = (_c = this.secondaryActionSettings) === null || _c === void 0 ? void 0 : _c.secondaryActions) === null || _d === void 0 ? void 0 : _d.length) > 0;
-    return (h("div", { class: inputBarContainerClass },
-      defaultType.map((item) => {
-        var _a;
-        const shouldTriggerPressAction = (item === null || item === void 0 ? void 0 : item.type) === MessageInput.audio && isAndroid();
-        return (this.isInputTypeAllowed(item.type) && (h("yoo-button", { onClick: item.handler, onTouchEnd: () => {
-            if (shouldTriggerPressAction) {
-              clearTimeout(pressTimer);
-              return false;
-            }
-          }, onTouchStart: () => {
-            if (shouldTriggerPressAction) {
-              pressTimer = setTimeout(() => {
-                showActionSheet([
-                  { text: translate('YOOBICRECORDEROPTION'), handler: () => this.onWebRecorder() },
-                  { text: translate('YOOBICNATIVERECORDEROPTION'), handler: () => this.onNativeRecorder() }
-                ]);
-              }, 4000);
-            }
-          }, fill: "transparent", shape: "circular", rippleType: "unbounded" },
-          h("yoo-icon", { name: item.name, color: item.color, size: (_a = this.secondaryActionSettings) === null || _a === void 0 ? void 0 : _a.secondaryIconSize }))));
-      }),
-      showSecondaryAction && this.renderSecondaryActions()));
+    return (h("div", { class: inputBarContainerClass }, defaultType.map((item) => {
+      var _a;
+      const shouldTriggerPressAction = (item === null || item === void 0 ? void 0 : item.type) === MessageInput.audio && isAndroid();
+      return (this.isInputTypeAllowed(item.type) && (h("yoo-button", { onClick: item.handler, onTouchEnd: () => {
+          if (shouldTriggerPressAction) {
+            clearTimeout(pressTimer);
+            return false;
+          }
+        }, onTouchStart: () => {
+          if (shouldTriggerPressAction) {
+            pressTimer = setTimeout(() => {
+              showActionSheet([
+                { text: translate('YOOBICRECORDEROPTION'), handler: () => this.onWebRecorder() },
+                { text: translate('YOOBICNATIVERECORDEROPTION'), handler: () => this.onNativeRecorder() }
+              ]);
+            }, 4000);
+          }
+        }, fill: "transparent", shape: "circular", rippleType: "unbounded" }, h("yoo-icon", { name: item.name, color: item.color, size: (_a = this.secondaryActionSettings) === null || _a === void 0 ? void 0 : _a.secondaryIconSize }))));
+    }), showSecondaryAction && this.renderSecondaryActions()));
   }
   renderInputBarActions() {
     const actionClass = {
@@ -900,9 +897,7 @@ export class YooInputBarComponent {
   }
   renderTextarea() {
     var _a, _b, _c, _d;
-    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionConfigs: this.mentionConfigs, mentionFitMaxRows: true, maxRows: 5, disableInput: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.disableInput, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.otherIds, mentions: (_d = this.advancedOptions) === null || _d === void 0 ? void 0 : _d.mentions, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') },
-      !this.hasTextInside && (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder))),
-      this.isInputTypeAllowed(MessageInput.gif) && this.renderGifIcon()));
+    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionConfigs: this.mentionConfigs, mentionFitMaxRows: true, maxRows: 5, disableInput: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.disableInput, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.otherIds, mentions: (_d = this.advancedOptions) === null || _d === void 0 ? void 0 : _d.mentions, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') }, !this.hasTextInside && (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder))), this.isInputTypeAllowed(MessageInput.gif) && this.renderGifIcon()));
   }
   renderCaptureIcon() {
     var _a, _b, _c, _d, _e, _f;
@@ -936,8 +931,7 @@ export class YooInputBarComponent {
           }
         }
       };
-      return (h("div", { class: "capture-icon", ref: (el) => (this.capturIconEl = el), onMouseDown: (ev) => captureHandler(ev) },
-        h("yoo-tag", { ...badgeConfig })));
+      return (h("div", { class: "capture-icon", ref: (el) => (this.capturIconEl = el), onMouseDown: (ev) => captureHandler(ev) }, h("yoo-tag", { ...badgeConfig })));
     }
   }
   renderQuickReaction() {
@@ -945,11 +939,9 @@ export class YooInputBarComponent {
         'quick-reaction-overlay': true,
         hide: !this.focused,
         web: isWeb(this.host)
-      }, onMouseDown: (ev) => this.onReactionContainerClick(ev) },
-      h("div", { class: "reaction-title" }, translate('QUICKREACTIONS')),
-      h("div", { class: "reactions-container" }, this.quickReactions.map((reaction) => {
-        return (h("div", { class: "reaction", onMouseDown: (ev) => this.onReactionClick(ev, reaction), innerHTML: reaction }));
-      }))));
+      }, onMouseDown: (ev) => this.onReactionContainerClick(ev) }, h("div", { class: "reaction-title" }, translate('QUICKREACTIONS')), h("div", { class: "reactions-container" }, this.quickReactions.map((reaction) => {
+      return (h("div", { class: "reaction", onMouseDown: (ev) => this.onReactionClick(ev, reaction), innerHTML: reaction }));
+    }))));
   }
   renderPlaceholder() {
     return (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder)));
@@ -958,15 +950,11 @@ export class YooInputBarComponent {
     var _a;
     const currentTab = (((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.extraBottomDialogTab) || [])[this.currentTabIndex];
     const invisible = (currentTab === null || currentTab === void 0 ? void 0 : currentTab.value) !== value;
-    return (h("div", { class: { invisible, 'slot-grid': true } },
-      h("slot", { name: value })));
+    return (h("div", { class: { invisible, 'slot-grid': true } }, h("slot", { name: value })));
   }
   renderBottomDialog() {
     var _a, _b;
-    return (h("div", { class: "bottom-dialog-container", ref: (el) => (this.bottomDialogRef = el) },
-      h("yoo-header", { class: "secondary" },
-        h("yoo-tabs", { tabs: ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.extraBottomDialogTab) || [], ref: (el) => (this.tabRef = el), onTabSelected: (ev) => this.onTabSelected(ev) })),
-      (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.extraBottomDialogTab) || []).map((tab) => this.renderBottomDialogInnerContent(tab === null || tab === void 0 ? void 0 : tab.value))));
+    return (h("div", { class: "bottom-dialog-container", ref: (el) => (this.bottomDialogRef = el) }, h("yoo-header", { class: "secondary" }, h("yoo-tabs", { tabs: ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.extraBottomDialogTab) || [], ref: (el) => (this.tabRef = el), onTabSelected: (ev) => this.onTabSelected(ev) })), (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.extraBottomDialogTab) || []).map((tab) => this.renderBottomDialogInnerContent(tab === null || tab === void 0 ? void 0 : tab.value))));
   }
   renderTopIndication() {
     var _a, _b, _c;
@@ -974,18 +962,10 @@ export class YooInputBarComponent {
       'indications-container': true,
       active: this.hasTopIndication()
     };
-    return (h("div", { class: indicationClass },
-      h("span", { class: "indications-inner" },
-        ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.topIndication) && h("span", null, translate(this.advancedOptions.topIndication)),
-        !((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.topIndication) && ((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.replyToUser) && (h("span", null,
-          translate('REPLY_TO') + ' ',
-          h("span", { class: "user-indication" }, getUserDisplayName(this.advancedOptions.replyToUser))))),
-      h("span", { class: "close-reply", onClick: () => this.onCloseReplyMode() },
-        h("yoo-icon", { name: "close", color: "dark" }))));
+    return (h("div", { class: indicationClass }, h("span", { class: "indications-inner" }, ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.topIndication) && h("span", null, translate(this.advancedOptions.topIndication)), !((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.topIndication) && ((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.replyToUser) && (h("span", null, translate('REPLY_TO') + ' ', h("span", { class: "user-indication" }, getUserDisplayName(this.advancedOptions.replyToUser))))), h("span", { class: "close-reply", onClick: () => this.onCloseReplyMode() }, h("yoo-icon", { name: "close", color: "dark" }))));
   }
   renderReplyMessage() {
-    return (h("div", { class: "reply-message-container" },
-      h("yoo-chat-message-preview", { message: this.replyChatMessage, onDismissReplyClicked: (ev) => this.onDismissReplyClicked(ev) })));
+    return (h("div", { class: "reply-message-container" }, h("yoo-chat-message-preview", { message: this.replyChatMessage, onDismissReplyClicked: (ev) => this.onDismissReplyClicked(ev) })));
   }
   renderUrlPreview() {
     var _a;
@@ -999,501 +979,505 @@ export class YooInputBarComponent {
       : [];
     const showCaptureIcon = !!allowInputs.length || ((_b = this.captureIconSettings) === null || _b === void 0 ? void 0 : _b.avatar);
     const showQuickReaction = !!((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.showQuickReaction);
-    return (h(Host, { class: { ...getAppContext(this.host), expanded: this.showBottomDialog } },
-      this.renderUrlPreview(),
-      this.replyChatMessage && this.renderReplyMessage(),
-      h("div", { class: {
-          'outer-container': true,
-          focused: this.focused,
-          'has-text': this.hasTextInside,
-          replying: this.hasTopIndication()
-        } },
-        this.renderTopIndication(),
-        h("div", { class: "input-container" },
-          showCaptureIcon && this.renderCaptureIcon(),
-          this.renderTextarea(),
-          this.renderInputBarActions()),
-        showBottomDialog && this.renderBottomDialog()),
-      showQuickReaction && this.renderQuickReaction()));
+    return (h(Host, { class: { ...getAppContext(this.host), expanded: this.showBottomDialog } }, this.renderUrlPreview(), this.replyChatMessage && this.renderReplyMessage(), h("div", { class: {
+        'outer-container': true,
+        focused: this.focused,
+        'has-text': this.hasTextInside,
+        replying: this.hasTopIndication()
+      } }, this.renderTopIndication(), h("div", { class: "input-container" }, showCaptureIcon && this.renderCaptureIcon(), this.renderTextarea(), this.renderInputBarActions()), showBottomDialog && this.renderBottomDialog()), showQuickReaction && this.renderQuickReaction()));
   }
   static get is() { return "yoo-input-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input-bar.css"]
-  }; }
-  static get properties() { return {
-    "captureIconSettings": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IInputBarCaptureSettings",
-        "resolved": "IInputBarCaptureSettings",
-        "references": {
-          "IInputBarCaptureSettings": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "captureIconSettings": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IInputBarCaptureSettings",
+          "resolved": "IInputBarCaptureSettings",
+          "references": {
+            "IInputBarCaptureSettings": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Left icon of the input bar, can be an avatar/icon"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Left icon of the input bar, can be an avatar/icon"
+        },
+        "defaultValue": "{\n    icon: 'plus'\n  }"
       },
-      "defaultValue": "{\n    icon: 'plus'\n  }"
-    },
-    "secondaryActionSettings": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IInputBarSecondarySettings",
-        "resolved": "IInputBarSecondarySettings",
-        "references": {
-          "IInputBarSecondarySettings": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "secondaryActionSettings": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IInputBarSecondarySettings",
+          "resolved": "IInputBarSecondarySettings",
+          "references": {
+            "IInputBarSecondarySettings": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "{\n    allowInput: {\n      [MessageInput.audio]: false,\n      [MessageInput.video]: true,\n      [MessageInput.gif]: true,\n      [MessageInput.gallery]: true,\n      [MessageInput.camera]: true\n    }\n  }"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Initial value"
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{\n    allowInput: {\n      [MessageInput.audio]: false,\n      [MessageInput.video]: true,\n      [MessageInput.gif]: true,\n      [MessageInput.gallery]: true,\n      [MessageInput.camera]: true\n    }\n  }"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Initial placeholder"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Initial value"
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "'ADDCOMMENT'"
-    },
-    "actionText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Initial placeholder"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "'ADDCOMMENT'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Send action text"
+      "actionText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Send action text"
+        },
+        "attribute": "action-text",
+        "reflect": false,
+        "defaultValue": "'YOOBICSEND'"
       },
-      "attribute": "action-text",
-      "reflect": false,
-      "defaultValue": "'YOOBICSEND'"
-    },
-    "advancedOptions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IInputBarAdvancedOptions",
-        "resolved": "IInputBarAdvancedOptions",
-        "references": {
-          "IInputBarAdvancedOptions": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "advancedOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IInputBarAdvancedOptions",
+          "resolved": "IInputBarAdvancedOptions",
+          "references": {
+            "IInputBarAdvancedOptions": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adavanced options to handle complex logic such as mentions,"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adavanced options to handle complex logic such as mentions,"
-      }
-    },
-    "mentionConfigs": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{ type: string, id: string }",
-        "resolved": "{ type: string; id: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "focused": {},
-    "fileCaptureSettings": {},
-    "showBottomDialog": {},
-    "currentTabIndex": {},
-    "screenWidth": {},
-    "hasTextInside": {},
-    "replyChatMessage": {}
-  }; }
-  static get events() { return [{
-      "method": "sendAttachment",
-      "name": "sendAttachment",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "sendText",
-      "name": "sendText",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "mediaInput",
-      "name": "mediaInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IChatInputParams",
-        "resolved": "IChatInputParams",
-        "references": {
-          "IChatInputParams": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+      "mentionConfigs": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ type: string, id: string }",
+          "resolved": "{ type: string; id: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       }
-    }, {
-      "method": "urlPreviewAdded",
-      "name": "urlPreviewAdded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "audioRecording",
-      "name": "audioRecording",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "replyCancelled",
-      "name": "replyCancelled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "isTyping",
-      "name": "isTyping",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "bottomDialogToggled",
-      "name": "bottomDialogToggled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "browseLibrary",
-      "name": "browseLibrary",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "iconClicked",
-      "name": "iconClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "mediaLoading",
-      "name": "mediaLoading",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "dismissReplyClicked",
-      "name": "dismissReplyClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "focusInputField": {
-      "complexType": {
-        "signature": "(hasText?: boolean, focusAfterUpdate?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "focused": {},
+      "fileCaptureSettings": {},
+      "showBottomDialog": {},
+      "currentTabIndex": {},
+      "screenWidth": {},
+      "hasTextInside": {},
+      "replyChatMessage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sendAttachment",
+        "name": "sendAttachment",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "blurInputField": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "sendText",
+        "name": "sendText",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "mediaInput",
+        "name": "mediaInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IChatInputParams",
+          "resolved": "IChatInputParams",
+          "references": {
+            "IChatInputParams": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "urlPreviewAdded",
+        "name": "urlPreviewAdded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "audioRecording",
+        "name": "audioRecording",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "replyCancelled",
+        "name": "replyCancelled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "isTyping",
+        "name": "isTyping",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "inputBlurred",
+        "name": "inputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "inputFocused",
+        "name": "inputFocused",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "bottomDialogToggled",
+        "name": "bottomDialogToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "browseLibrary",
+        "name": "browseLibrary",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "iconClicked",
+        "name": "iconClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "mediaLoading",
+        "name": "mediaLoading",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "dismissReplyClicked",
+        "name": "dismissReplyClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "focusInputField": {
+        "complexType": {
+          "signature": "(hasText?: boolean, focusAfterUpdate?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateValueAndFocus": {
-      "complexType": {
-        "signature": "(value: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "blurInputField": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onToggleBottomDialog": {
-      "complexType": {
-        "signature": "(completeHandler?: (ev?: any) => any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "updateValueAndFocus": {
+        "complexType": {
+          "signature": "(value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateReplyChatMessage": {
-      "complexType": {
-        "signature": "(chatMessage: IChatMessage) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "onToggleBottomDialog": {
+        "complexType": {
+          "signature": "(completeHandler?: (ev?: any) => any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "IChatMessage": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "updateReplyChatMessage": {
+        "complexType": {
+          "signature": "(chatMessage: IChatMessage) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IChatMessage": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "hideBottomDialog",
-      "method": "onHideBottomDialog",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keyboardDidHide",
-      "method": "onKeyboardDidHide",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "hideBottomDialog",
+        "method": "onHideBottomDialog",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keyboardDidHide",
+        "method": "onKeyboardDidHide",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }