@yoobic/yobi 8.5.0-3 → 8.5.0-8

package/dist/collection/components/form/slides-media/slides-media.js

@@ -1,6 +1,6 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { capitalizeFirstLetter, closeModal, findParent, getAsyncExtraData, gsapTimeline, gsapTo, isAndroid, isImage, isImageUrl, isIphoneX, isNativeMobile, isPhotoEdited, isVideo, isWeb, pipes, showModal, showToast, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { isArray } from 'lodash-es';
 import { lockSwipes } from '../../../utils/helpers/common-helpers';
 import { parseEntityForCardMedia } from '../../../utils/helpers/entities-helpers';
@@ -370,9 +370,7 @@ export class YooSlidesMediaComponent {
     return [translate('DERIVEDFROM'), h("mark", null, ' "' + translateMulti(item.title) + '" ')];
   }
   renderImageTitle(item) {
-    return h("mark", null,
-      " ",
-      translateMulti(item.imageTitle));
+    return h("mark", null, " ", translateMulti(item.imageTitle));
   }
   onSlideDidChange(ev) {
     // This method gets called when an image is opened for an index !== 0
@@ -395,18 +393,13 @@ export class YooSlidesMediaComponent {
         transparent: true,
         'top-container': true,
         'fade-in': this.hideContainer
-      } },
-      h("yoo-navbar", { class: "gradient" },
-        h("yoo-items", { slot: "start" }, !this.hideCloseButton &&
-          h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded', onClick: () => closeModal(null) },
-            h("yoo-icon", { name: "close", color: "light" }))),
-        this.secondaryActions.length ? this.renderSecondaryActions() : [
-          item.type === 'image' &&
-            h("yoo-truncate", null, translate('GUIDELINES')),
-          h("yoo-items", { slot: "end" }, item.type === 'image' &&
-            h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded' },
-              h("yoo-icon", { name: "info", color: "light" })))
-        ])));
+      } }, h("yoo-navbar", { class: "gradient" }, h("yoo-items", { slot: "start" }, !this.hideCloseButton &&
+      h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded', onClick: () => closeModal(null) }, h("yoo-icon", { name: "close", color: "light" }))), this.secondaryActions.length ? this.renderSecondaryActions() : [
+      item.type === 'image' &&
+        h("yoo-truncate", null, translate('GUIDELINES')),
+      h("yoo-items", { slot: "end" }, item.type === 'image' &&
+        h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded' }, h("yoo-icon", { name: "info", color: "light" })))
+    ])));
   }
   renderSecondaryActions() {
     return (h("yoo-items", { slot: "end", spacing: 24 }, this.secondaryActions
@@ -427,60 +420,21 @@ export class YooSlidesMediaComponent {
         'bottom-container': true,
         'iphone-x': isIphoneX(),
         'fade-in': this.hideContainer
-      } },
-      item.user && this.renderUserInfo(item),
-      h("div", { class: "photo-information" },
-        item.missiondescription && this.renderMissionDescription(item),
-        !!title && [translate('YOOBICIN'), h("mark", null,
-            " ",
-            ' "' + translateMulti(title) + '" '), translate('MISSION')],
-        item.imageTitle && this.renderImageTitle(item)),
-      !!((_b = item === null || item === void 0 ? void 0 : item.tags) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: "tags" }, item.tags.map((tag) => `#${translateMulti(tag)}`)),
-      this.renderBottomContainerActionButtons(item)));
+      } }, item.user && this.renderUserInfo(item), h("div", { class: "photo-information" }, item.missiondescription && this.renderMissionDescription(item), !!title && [translate('YOOBICIN'), h("mark", null, " ", ' "' + translateMulti(title) + '" '), translate('MISSION')], item.imageTitle && this.renderImageTitle(item)), !!((_b = item === null || item === void 0 ? void 0 : item.tags) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: "tags" }, item.tags.map((tag) => `#${translateMulti(tag)}`)), this.renderBottomContainerActionButtons(item)));
   }
   renderHoverButtons(item) {
     const isPhoto = !item.type || item.isMulti || item.type === 'photo' || item.type === 'multiphotos';
-    return (!this.isReadonly && isWeb(this.host) && (h("div", { class: "hover-buttons", slot: "hover-actions" },
-      isPhoto && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('expand', ev) },
-        h("div", { class: "flex" },
-          h("yoo-icon", { name: "maximize" }),
-          h("span", null, translate('EXPAND'))))),
-      h("yoo-button", { onClick: (ev) => this.onActionButtonClick('tag', ev) },
-        h("div", { class: "flex" },
-          h("yoo-icon", { name: "tag" }),
-          h("span", null, translate('YOOBICTAG')))),
-      this.canFlag && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('flag', ev) },
-        h("div", { class: "flex" },
-          h("yoo-icon", { name: "flag" }),
-          h("span", null, item.flagged ? translate('UNFLAG') : translate('YOOBICFLAG'))))),
-      isPhoto && this.canAnnotate && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('pen', ev) },
-        h("div", { class: "flex" },
-          h("yoo-icon", { name: "photo-annotated" }),
-          h("span", null, translate('ANNOTATE'))))))));
+    return (!this.isReadonly && isWeb(this.host) && (h("div", { class: "hover-buttons", slot: "hover-actions" }, isPhoto && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('expand', ev) }, h("div", { class: "flex" }, h("yoo-icon", { name: "maximize" }), h("span", null, translate('EXPAND'))))), h("yoo-button", { onClick: (ev) => this.onActionButtonClick('tag', ev) }, h("div", { class: "flex" }, h("yoo-icon", { name: "tag" }), h("span", null, translate('YOOBICTAG')))), this.canFlag && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('flag', ev) }, h("div", { class: "flex" }, h("yoo-icon", { name: "flag" }), h("span", null, item.flagged ? translate('UNFLAG') : translate('YOOBICFLAG'))))), isPhoto && this.canAnnotate && (h("yoo-button", { onClick: (ev) => this.onActionButtonClick('pen', ev) }, h("div", { class: "flex" }, h("yoo-icon", { name: "photo-annotated" }), h("span", null, translate('ANNOTATE'))))))));
   }
   renderBottomContainerActionButtons(item) {
     const photoEdited = isPhotoEdited(item);
     // Will need to look into this code once all the permissions for this are fully settled,
     // Currently it has been made consistent between what is seen in the feed view of the photos
     // and when the slides-media open - canAnnotate and the readonly variable are toggled from the activity page
-    return !this.isReadonly ? (h("div", { class: "action-buttons" },
-      h("yoo-icon", { name: "flag", color: item.flagged ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('flag') }),
-      h("yoo-icon", { name: "tag", color: item.tags && item.tags.length > 0 ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('tag') }),
-      item.type !== 'video' ? (h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') })) : null)) : (this.canAnnotate && item.type !== 'video' && (h("div", { class: "action-buttons" },
-      h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') }))));
+    return !this.isReadonly ? (h("div", { class: "action-buttons" }, h("yoo-icon", { name: "flag", color: item.flagged ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('flag') }), h("yoo-icon", { name: "tag", color: item.tags && item.tags.length > 0 ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('tag') }), item.type !== 'video' ? (h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') })) : null)) : (this.canAnnotate && item.type !== 'video' && (h("div", { class: "action-buttons" }, h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') }))));
   }
   renderUserInfo(item) {
-    return (h("div", { class: "user-info" },
-      h("yoo-avatar", { user: item.user, size: "medium" }),
-      item && item.location && item.location.title ? (h("div", { class: "user-title" },
-        translate('YOOBICBY'),
-        h("mark", null, ' ' + item.userDisplayname + ' '),
-        translate('YOOBICAT'),
-        h("mark", null, ' ' + item.location.title),
-        item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null)) : (h("div", { class: "user-title" },
-        translate('YOOBICBY'),
-        h("mark", null, ' ' + item.userDisplayname + ' '),
-        item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null))));
+    return (h("div", { class: "user-info" }, h("yoo-avatar", { user: item.user, size: "medium" }), item && item.location && item.location.title ? (h("div", { class: "user-title" }, translate('YOOBICBY'), h("mark", null, ' ' + item.userDisplayname + ' '), translate('YOOBICAT'), h("mark", null, ' ' + item.location.title), item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null)) : (h("div", { class: "user-title" }, translate('YOOBICBY'), h("mark", null, ' ' + item.userDisplayname + ' '), item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null))));
   }
   renderVideoPlayer(item, index, controls = item.control || false) {
     const attrs = {
@@ -587,10 +541,7 @@ export class YooSlidesMediaComponent {
     const tagColor = searchMode ? 'app-color-10' : 'dark';
     return (_a = (tags || [])) === null || _a === void 0 ? void 0 : _a.map((tag, index) => {
       const translatedTag = translateMulti(tag);
-      return (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translatedTag },
-        h("yoo-tag", { onClosed: () => this.onUpdateSingleTag(photo, index, searchMode, tags), color: tagColor, closable: !searchMode },
-          translatedTag,
-          searchMode && h("yoo-icon", { onClick: () => this.onUpdateSingleTag(photo, index, searchMode, tags), slot: "end", name: "circle-plus", color: "app-color", size: "small" }))));
+      return (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translatedTag }, h("yoo-tag", { onClosed: () => this.onUpdateSingleTag(photo, index, searchMode, tags), color: tagColor, closable: !searchMode }, translatedTag, searchMode && h("yoo-icon", { onClick: () => this.onUpdateSingleTag(photo, index, searchMode, tags), slot: "end", name: "circle-plus", color: "app-color", size: "small" }))));
     });
   }
   renderList(photo, searchMode = false) {
@@ -606,33 +557,17 @@ export class YooSlidesMediaComponent {
       'badges-container': true,
       'max-height': searchMode
     };
-    return (h("div", { class: "current-tag-container" },
-      h("div", { class: "header" },
-        searchMode ? translate((_a = this.searchMode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : `${(tags || []).length} ${translate('YOOBICTAGS')}`,
-        h("yoo-icon", { name: "arrow-up", color: "stable" })),
-      h("div", { class: cssClass }, this.renderTags(photo, tags, searchMode))));
+    return (h("div", { class: "current-tag-container" }, h("div", { class: "header" }, searchMode ? translate((_a = this.searchMode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : `${(tags || []).length} ${translate('YOOBICTAGS')}`, h("yoo-icon", { name: "arrow-up", color: "stable" })), h("div", { class: cssClass }, this.renderTags(photo, tags, searchMode))));
   }
   renderTagContent(photo) {
     return (h("div", { ref: (el) => {
         this.tagContainerRef = el;
-      }, class: "tag-container" },
-      h("div", { class: "actions-container" },
-        h("yoo-form-input", { placeholder: translate('ENTERATAG'), onEnterPressed: (ev) => this.onEnterPressed(ev, photo), onInputChanged: (ev) => (this.currentText = (ev === null || ev === void 0 ? void 0 : ev.detail) || ''), value: this.currentText, class: "side-menu large", "icon-prefix": "search" }),
-        h("yoo-ion-content", null,
-          this.renderList(photo),
-          this.renderList(photo, true))),
-      h("div", { class: "button-container" },
-        h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, translate('YOOBICDONE')))));
+      }, class: "tag-container" }, h("div", { class: "actions-container" }, h("yoo-form-input", { placeholder: translate('ENTERATAG'), onEnterPressed: (ev) => this.onEnterPressed(ev, photo), onInputChanged: (ev) => (this.currentText = (ev === null || ev === void 0 ? void 0 : ev.detail) || ''), value: this.currentText, class: "side-menu large", "icon-prefix": "search" }), h("yoo-ion-content", null, this.renderList(photo), this.renderList(photo, true))), h("div", { class: "button-container" }, h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, translate('YOOBICDONE')))));
   }
   renderSlideContentByDisplayType(item, index) {
     const isTypeVideo = isVideo(this.getPhotoSrc(item));
     if (this.displayType === 'card-media' || item.type === 'audio') {
-      return (h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) },
-        h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } },
-          this.isImage(item) && this.renderPhotoEditor(item, index),
-          isTypeVideo && this.renderVideoPlayer(item, index, true)),
-        this.isTagging && h("div", { slot: "footer" }, this.renderTagContent(item)),
-        !this.isTagging && this.renderHoverButtons(item)));
+      return (h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) }, h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } }, this.isImage(item) && this.renderPhotoEditor(item, index), isTypeVideo && this.renderVideoPlayer(item, index, true)), this.isTagging && h("div", { slot: "footer" }, this.renderTagContent(item)), !this.isTagging && this.renderHoverButtons(item)));
     }
     else if (this.displayType === 'card-feed') {
       //TODO: update flow to open media detail for feeds
@@ -647,550 +582,559 @@ export class YooSlidesMediaComponent {
     else {
       return [
         item.type !== 'photo' && this.renderActionButtons(item),
-        h("div", { class: "content-container" },
-          item.type === 'video' || isTypeVideo ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index),
-          this.showBottomContainer && this.renderBottomContainer(item, index)),
+        h("div", { class: "content-container" }, item.type === 'video' || isTypeVideo ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index), this.showBottomContainer && this.renderBottomContainer(item, index)),
         (item.user || item.missiondescription || item.fieldTitle || item.tags) && h("div", { class: "toolbar-shadow-portrait" })
       ];
     }
   }
   renderInnerSwipeContent() {
-    return (h("div", { class: "slides-container" },
-      h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
-          var _a;
-          this.isImage(this.currentItem) && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips());
-          this.pauseMedia();
-        }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) },
-        this.isFirstLoad && h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }),
-        this.items.map((item, index) => {
-          return h("yoo-ion-slide", { class: { 'outside-navigation-arrows': isWeb(this.host) } }, this.shouldRenderSlideContent(index) && this.renderSlideContent(item, index));
-        }))));
+    return (h("div", { class: "slides-container" }, h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
+        var _a;
+        this.isImage(this.currentItem) && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips());
+        this.pauseMedia();
+      }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) }, this.isFirstLoad && h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }), this.items.map((item, index) => {
+      return h("yoo-ion-slide", { class: { 'outside-navigation-arrows': isWeb(this.host) } }, this.shouldRenderSlideContent(index) && this.renderSlideContent(item, index));
+    }))));
   }
   render() {
-    return (h(Host, { class: { [this.displayType || '']: true, tagging: this.isTagging } },
-      h("div", { class: "slides-media-container" },
-        h("yoo-swipe-container", { onSwipedDown: () => this.onSwipeDown() }, this.waitForModalLoaded ? h("yoo-loader", { class: "absolute", size: "large" }) : this.renderInnerSwipeContent()))));
+    return (h(Host, { class: { [this.displayType || '']: true, tagging: this.isTagging } }, h("div", { class: "slides-media-container" }, h("yoo-swipe-container", { onSwipedDown: () => this.onSwipeDown() }, this.waitForModalLoaded ? h("yoo-loader", { class: "absolute", size: "large" }) : this.renderInnerSwipeContent()))));
   }
   static get is() { return "yoo-slides-media"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["slides-media.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["slides-media.css"]
-  }; }
-  static get properties() { return {
-    "secondaryActions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton[] | IEntityAction[]",
-        "resolved": "IButton[] | IEntityAction[]",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IEntityAction": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["slides-media.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["slides-media.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "secondaryActions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IButton[] | IEntityAction[]",
+          "resolved": "IButton[] | IEntityAction[]",
+          "references": {
+            "IButton": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IEntityAction": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Secondary action, addition functionality passed to a readonly photo editor"
-      },
-      "defaultValue": "[]"
-    },
-    "canEditPhoto": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "can-edit-photo",
-      "reflect": false
-    },
-    "currentSlideIndex": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current-slide-index",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "items": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "items",
-      "reflect": false
-    },
-    "isReadonly": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "canAnnotate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Secondary action, addition functionality passed to a readonly photo editor"
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "can-annotate",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "canFlag": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "canEditPhoto": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "can-edit-photo",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "currentSlideIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-slide-index",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "can-flag",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "hideCloseButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "items": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "items",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isReadonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-readonly",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "hide-close-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showBottomContainer": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "canAnnotate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "can-annotate",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "canFlag": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "can-flag",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "show-bottom-container",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "isLight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "hideCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-close-button",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "showBottomContainer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-bottom-container",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "is-light",
-      "reflect": false
-    },
-    "waitForModalLoaded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isLight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-light",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "waitForModalLoaded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "wait-for-modal-loaded",
+        "reflect": false
       },
-      "attribute": "wait-for-modal-loaded",
-      "reflect": false
-    },
-    "submitPhotoEditorButton": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton",
-        "resolved": "IButton",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "submitPhotoEditorButton": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IButton",
+          "resolved": "IButton",
+          "references": {
+            "IButton": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Customise the tick button into a button with the text"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Customise the tick button into a button with the text"
-      }
-    },
-    "displayType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
-        "references": {
-          "CardType": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "displayType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CardType",
+          "resolved": "\"calendar\" | \"kanban\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"tree\"",
+          "references": {
+            "CardType": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "display-type",
-      "reflect": false
-    },
-    "isAnimationFinished": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-animation-finished",
-      "reflect": false
-    },
-    "allowOrientation": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display-type",
+        "reflect": false
       },
-      "attribute": "allow-orientation",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "currentIndex": {},
-    "hideContainer": {},
-    "searchMode": {},
-    "isFirstLoad": {},
-    "mostUsedTags": {},
-    "lastUsedTags": {},
-    "isTagging": {},
-    "currentText": {}
-  }; }
-  static get events() { return [{
-      "method": "openMission",
-      "name": "openMission",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isAnimationFinished": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-animation-finished",
+        "reflect": false
       },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
+      "allowOrientation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-orientation",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }, {
-      "method": "openStore",
-      "name": "openStore",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
+    };
+  }
+  static get states() {
+    return {
+      "currentIndex": {},
+      "hideContainer": {},
+      "searchMode": {},
+      "isFirstLoad": {},
+      "mostUsedTags": {},
+      "lastUsedTags": {},
+      "isTagging": {},
+      "currentText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "openMission",
+        "name": "openMission",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "userProfile",
-      "name": "userProfile",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      }, {
+        "method": "openStore",
+        "name": "openStore",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "link",
-      "name": "link",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "share",
-      "name": "share",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "flag",
-      "name": "flag",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      }, {
+        "method": "userProfile",
+        "name": "userProfile",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "tag",
-      "name": "tag",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+      }, {
+        "method": "link",
+        "name": "link",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         }
-      }
-    }, {
-      "method": "annotate",
-      "name": "annotate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IPhoto",
-        "resolved": "IPhoto",
-        "references": {
-          "IPhoto": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      }, {
+        "method": "share",
+        "name": "share",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "flag",
+        "name": "flag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "slideChanges",
-      "name": "slideChanges",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "updatePhoto": {
-      "complexType": {
-        "signature": "(photo: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "tag",
+        "name": "tag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "annotate",
+        "name": "annotate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "overlayDismiss": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "IPhoto",
+          "resolved": "IPhoto",
+          "references": {
+            "IPhoto": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "slideChanges",
+        "name": "slideChanges",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "updatePhoto": {
+        "complexType": {
+          "signature": "(photo: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "overlayDismiss": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "currentText",
-      "methodName": "onCurrentTextChanged"
-    }, {
-      "propName": "isTagging",
-      "methodName": "onTaggingChanges"
-    }]; }
-  static get listeners() { return [{
-      "name": "blockMoves",
-      "method": "handlePinchZoom",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "videoHeaderChanges",
-      "method": "onVideoPlayerInputChanged",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "currentText",
+        "methodName": "onCurrentTextChanged"
+      }, {
+        "propName": "isTagging",
+        "methodName": "onTaggingChanges"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "blockMoves",
+        "method": "handlePinchZoom",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "videoHeaderChanges",
+        "method": "onVideoPlayerInputChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }