@yoobic/yobi 8.2.0-41 → 8.2.0-45

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.css

@@ -203,76 +203,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   display: block;
+  background: var(--light, #ffffff);
 }
-:host .top-container {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  padding: var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
+:host li {
+  break-inside: avoid;
+  padding: var(--spacing-02, 0.125rem) 0 var(--spacing-16, 1rem);
 }
-:host .top-container .input {
-  margin-right: var(--spacing-16, 1rem);
-}
-:host .container {
-  padding: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-}
-:host .container .section .items,
-:host .top-container .section .items {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 45% 45%;
-  padding-bottom: var(--spacing-16, 1rem);
-  white-space: nowrap;
-  row-gap: var(--spacing-16, 1rem);
+:host ul {
+  margin: 0;
+  padding: var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0;
+  column-count: 2;
   column-gap: var(--spacing-16, 1rem);
-}
-:host .container .section .items.single,
-:host .top-container .section .items.single {
-  grid-template-rows: auto;
-}
-:host .container .section .items.single::after,
-:host .top-container .section .items.single::after {
-  content: "";
-}
-:host .container .section .items.suggested,
-:host .top-container .section .items.suggested {
-  padding-bottom: unset;
-}
-:host .container .section .section-header,
-:host .top-container .section .section-header {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--spacing-16, 1rem) 0;
-}
-:host .container .section .section-header.empty,
-:host .top-container .section .section-header.empty {
-  padding-bottom: 0;
-}
-:host .container .section .section-header .section-title,
-:host .top-container .section .section-header .section-title {
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-  text-transform: uppercase;
-}
-:host .container .section .section-header .see-all,
-:host .top-container .section .section-header .see-all {
-  padding-right: var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-16, 1rem);
+  list-style: none;
 }
 :host yoo-card-list-color {
-  --title-padding-top: var(--spacing-08, 0.5rem);
-  --title-margin-bottom: 0;
   --card-border-radius: var(--border-radius-04, 0.25rem);
+  --subheading-line-clamp: 3 !important;
+  --title-margin-bottom: 0;
+  --title-padding-top: var(--spacing-08, 0.5rem);
 }
-:host .extended {
-  display: grid;
-  grid-template-rows: repeat(10, 5rem);
-  grid-template-columns: 1fr 1fr;
+:host yoo-form-input {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
-  column-gap: var(--spacing-16, 1rem);
-  row-gap: var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
-  border-top: solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem);
+  background: inherit;
+}
+:host yoo-form-input + ul {
+  padding-top: 0;
 }

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.js

@@ -1,63 +1,15 @@
 import { translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State } from '@stencil/core';
 export class YooMobileTabbarMoreComponent {
-  constructor() {
-    this.searchedItems = [];
-  }
-  componentWillLoad() {
-    this.retrievedItems = this.items;
-  }
-  watchItems() {
-    this.retrievedItems = this.items;
-  }
-  onSearchInputChanged(ev) {
-    const searchText = ev.toLowerCase();
-    this.searchedItems = this.items;
-    const searchResults = this.searchedItems.filter((item) => item.text.toLowerCase().includes(searchText));
-    return this.retrievedItems = [...searchResults];
-  }
-  onItemClick(item) {
-    this.itemClicked.emit({ item });
-  }
-  renderSearchInput() {
-    return (h("div", { class: "input" },
-      ' ',
-      h("yoo-form-input", { size: "large", class: "menu", "icon-prefix": "search", hideOptional: true, clearable: false, forceValueUpdate: true, placeholder: translate('SEARCHMODULES'), onInputChanged: (ev) => this.onSearchInputChanged(ev.detail) })));
-  }
-  renderItem(item) {
-    const color = 'app-color';
-    const entry = {
-      subHeading: item.text,
-      iconTopLeft: item.icon,
-      iconTopLeftColor: color
-    };
-    return (h("yoo-card-list-color", { onClick: () => this.onItemClick(item), entry: entry, notif: item.notif }));
-  }
-  renderSuggestedItems() {
-    var _a;
-    return (h("div", { class: "section" },
-      h("div", { class: "section-header" },
-        h("div", { class: "section-title" }, translate('SUGGESTED'))),
-      h("div", { class: "items single suggested", style: { 'grid-template-columns': `repeat(${this.recentItems.length}, 38%) 1px` } }, (_a = this.recentItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderItem(item)))));
-  }
-  renderItems() {
-    var _a, _b;
-    return (h("div", { class: "container" },
-      h("div", { class: "section" },
-        !(((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 10) && h("div", { class: "section-header empty" }, " "),
-        h("div", { class: { items: true } }, (_b = this.retrievedItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
-          return this.renderItem(item);
-        })))));
-  }
-  renderTopContainer() {
-    var _a;
-    return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 10 &&
-      h("div", { class: "top-container" }, this.renderSearchInput());
-  }
   render() {
-    return h(Host, null,
-      this.renderTopContainer(),
-      this.renderItems());
+    const items = this.items ? [...this.items.filter((_, index) => index % 2 === 0), ...this.items.filter((_, index) => index % 2 === 1)] : [];
+    return (h(Host, null,
+      items.length > 10 && (h("yoo-form-input", { size: "large", class: "menu", "icon-prefix": "search", hideOptional: true, clearable: false, forceValueUpdate: true, placeholder: translate('SEARCHMODULES'), onInputChanged: ({ detail }) => (this.search = detail) })),
+      h("ul", { hidden: !items.length }, items.map((item) => {
+        var _a;
+        return (h("li", { hidden: this.search && !((_a = item.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.search.toLowerCase())) },
+          h("yoo-card-list-color", { onClick: () => this.itemClicked.emit(item), entry: { subHeading: item.text, iconTopLeft: item.icon, iconTopLeftColor: 'app-color' }, notif: item.notif })));
+      }))));
   }
   static get is() { return "yoo-mobile-tabbar-more"; }
   static get encapsulation() { return "shadow"; }
@@ -68,26 +20,6 @@ export class YooMobileTabbarMoreComponent {
     "$": ["mobile-tabbar-more.css"]
   }; }
   static get properties() { return {
-    "recentItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IPage[]",
-        "resolved": "IPage[]",
-        "references": {
-          "IPage": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Most viewed menu items"
-      }
-    },
     "items": {
       "type": "unknown",
       "mutable": false,
@@ -110,7 +42,7 @@ export class YooMobileTabbarMoreComponent {
     }
   }; }
   static get states() { return {
-    "retrievedItems": {}
+    "search": {}
   }; }
   static get events() { return [{
       "method": "itemClicked",
@@ -123,8 +55,8 @@ export class YooMobileTabbarMoreComponent {
         "text": "When item clicked re routes to item page"
       },
       "complexType": {
-        "original": "{ item: IPage }",
-        "resolved": "{ item: IPage; }",
+        "original": "IPage",
+        "resolved": "IPage",
         "references": {
           "IPage": {
             "location": "import",
@@ -133,8 +65,4 @@ export class YooMobileTabbarMoreComponent {
         }
       }
     }]; }
-  static get watchers() { return [{
-      "propName": "items",
-      "methodName": "watchItems"
-    }]; }
 }

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -212,26 +212,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host p {
   margin: 0;
 }
-:host p.multi-truncated {
-  overflow: hidden;
-}
-@supports (display: -webkit-box) {
-  :host p.multi-truncated {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-}
-:host p:not(.multi-truncated) {
-  overflow: hidden;
-}
-@supports (display: -webkit-box) {
-  :host p:not(.multi-truncated) {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-}
 :host yoo-tooltip {
   height: 100%;
 }
@@ -289,14 +269,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --progress-value-color: var(--success, #3aa76d);
 }
 :host .outer-container .subheading-container {
+  overflow: hidden;
   padding-top: var(--title-padding-top);
   color: var(--dark, #000000);
   text-align: left;
 }
+@supports (display: -webkit-box) {
+  :host .outer-container .subheading-container {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--subheading-line-clamp);
+    -webkit-box-orient: vertical;
+  }
+}
 :host .outer-container .subheading-container-description {
+  overflow: hidden;
   color: var(--stable, #adadad);
   text-align: left;
 }
+@supports (display: -webkit-box) {
+  :host .outer-container .subheading-container-description {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--subheading-description-line-clamp);
+    -webkit-box-orient: vertical;
+  }
+}
 :host .outer-container .subheading-container-description .flex {
   display: flex;
   flex-wrap: nowrap;

package/dist/collection/components/entities/card-list/color/card-list-color.js

@@ -1,5 +1,5 @@
 import { isWeb, translate, translateMulti } from '@shared/utils';
-import { Component, Element, h, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
 import { isFinite } from 'lodash-es';
 export class YooCardListColorComponent {
   constructor() {
@@ -23,12 +23,12 @@ export class YooCardListColorComponent {
         this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {
-    const { subHeading, subHeadingDescription } = this.entry;
-    return subHeading && h("p", { class: { 'subheading-container': true, 'multi-truncated': !subHeadingDescription }, innerHTML: translateMulti(subHeading) });
+    const { subHeading } = this.entry;
+    return subHeading && h("p", { class: "subheading-container", innerHTML: translateMulti(subHeading) });
   }
   renderSubHeaderDescription() {
-    const { subHeading, subHeadingDescription } = this.entry;
-    return subHeadingDescription && h("p", { class: { 'subheading-container-description': true, 'multi-truncated': !subHeading }, innerHTML: translateMulti(subHeadingDescription) });
+    const { subHeadingDescription } = this.entry;
+    return subHeadingDescription && h("p", { class: "subheading-container-description", innerHTML: translateMulti(subHeadingDescription) });
   }
   renderProgress() {
     const { progress } = this.entry;
@@ -46,9 +46,12 @@ export class YooCardListColorComponent {
       h("yoo-img", { src: imgSrc }))));
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     const TagType = ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.tooltip) ? 'yoo-tooltip' : 'Fragment';
-    return (this.entry && (h(TagType, { hoverable: isWeb(this.host), placement: "bottom", content: translate(this.entry.tooltip) },
+    return (h(Host, { style: {
+        ...(((_b = this.entry) === null || _b === void 0 ? void 0 : _b.subHeading) && { '--subheading-line-clamp': this.entry.subHeadingDescription ? '1' : '2' }),
+        ...(((_c = this.entry) === null || _c === void 0 ? void 0 : _c.subHeadingDescription) && { '--subheading-description-line-clamp': this.entry.subHeading ? '1' : '2' })
+      } }, this.entry && (h(TagType, { hoverable: isWeb(this.host), placement: "bottom", content: translate(this.entry.tooltip) },
       h("div", { class: { 'outer-container': true, 'has-image': !!this.entry.imgSrc } },
         h("div", null,
           this.renderHeader(),
@@ -56,7 +59,7 @@ export class YooCardListColorComponent {
           this.renderSubHeader(),
           this.renderSubHeaderDescription(),
           this.renderImage()),
-        this.renderTags()))));
+        this.renderTags())))));
   }
   static get is() { return "yoo-card-list-color"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/entities/entity/entity.js

@@ -264,8 +264,15 @@ export class YooEntityComponent {
       return h("yoo-card-calendar", { heading: this.item.title, color: color, type: this.item.type, attendance: this.item.participantStatus, dueDate: date });
     }
     else if (this.item.type === 'courses') {
+      const startDate = new Date(this.item.startDate);
       const endDate = new Date(this.item.endDate);
-      const dueDate = +endDate - 24 * 3600 * 1000;
+      const allDayInMinutes = 1410; // 23.5 hours
+      const isCourseDayOrLess = (endDate.getDate() - startDate.getDate() <= 1);
+      const courseDurationInMinutes = endDate.getHours() * 60 + endDate.getMinutes() - startDate.getHours() * 60 + startDate.getMinutes();
+      let dueDate = +endDate - 24 * 3600 * 1000;
+      if (courseDurationInMinutes < allDayInMinutes && isCourseDayOrLess) {
+        dueDate = +endDate - 12 * 3600 * 1000; // If course less than 23.5 hours dueDate calculation
+      }
       const date = dateFormat(dueDate, 'DD/MM/YYYY hh:mm');
       return h("yoo-card-calendar", { heading: this.item.title, color: color, type: this.item.type, dueDate: date });
     }

package/dist/collection/components/form/form-dynamic/form-dynamic.css

@@ -946,6 +946,8 @@ span.fr-img-caption.fr-view {
 }
 :host yoo-ion-slides yoo-ion-scroll.with-footer {
   bottom: var(--footer-height);
+}
+:host yoo-ion-slides yoo-ion-scroll.with-footer.keyboard-open {
   min-height: 100%;
 }
 :host yoo-form-recap-step.last {

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -43,21 +43,27 @@ export class YooFormDynamicComponent {
     this.containsRenderComponent = false;
     this.hasTimerStarted = false;
     this.dirtyFields = [];
-    this.onKeyboardWillShow = debounce((event) => {
+    this.onKeyboardWillShow = (event) => {
       var _a;
-      if (event && !isAndroid() && !this.isInline()) {
-        const scrollSpacerHeight = event.keyboardHeight;
-        this.setScrollSpacerHeight(scrollSpacerHeight);
-      }
-      const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
-      if (scrollSpacer) {
-        scrollSpacer.classList.remove('bottom-bar');
-      }
       (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
-      if (isAndroid()) {
-        this.windowHasFinishedResizing = false;
+      const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
+      if (scroll && !(scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
+        scroll.classList.add('keyboard-open');
       }
-    }, 500);
+      debounce(() => {
+        if (event && !isAndroid() && !this.isInline()) {
+          const scrollSpacerHeight = event.keyboardHeight;
+          this.setScrollSpacerHeight(scrollSpacerHeight);
+        }
+        const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
+        if (scrollSpacer) {
+          scrollSpacer.classList.remove('bottom-bar');
+        }
+        if (isAndroid()) {
+          this.windowHasFinishedResizing = false;
+        }
+      }, 500);
+    };
     this.slidesOptions = {
       autoplay: false,
       pagination: {
@@ -165,8 +171,9 @@ export class YooFormDynamicComponent {
     }
   }
   async setScrollSpacerHeight(height) {
+    var _a;
     const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
-    if (scrollSpacer && scrollSpacer.classList && scrollSpacer.classList.contains('scroll-spacer') && !this.isInlineRow()) {
+    if (((_a = scrollSpacer === null || scrollSpacer === void 0 ? void 0 : scrollSpacer.classList) === null || _a === void 0 ? void 0 : _a.contains('scroll-spacer')) && !this.isInlineRow()) {
       scrollSpacer.setAttribute('style', `height: ${height}px !important;`);
     }
   }
@@ -1803,6 +1810,10 @@ export class YooFormDynamicComponent {
       this.setScrollSpacerHeight(100);
     }
     (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
+    const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
+    if (scroll && (scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
+      scroll.classList.remove('keyboard-open');
+    }
   }
   onHideTabbar(ev) {
     if (getSession().isExternal || isWeb(this.host)) {

package/dist/collection/components/form/form-hotzones/form-hotzones.js

@@ -1,7 +1,7 @@
 import { closeModal, Draggable, getMedia, gsapTo, isPointInsidePlan, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
-import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
+import { calcCoordPercentage } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -58,15 +58,19 @@ export class YooFormHotzonesComponent {
   initDraggableTarget() {
     const dragEndAction = async () => {
       const containerBound = this.imageElement.getBoundingClientRect();
-      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2)) {
+      if (!this.isElementCenterInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2)) {
         this.resetTarget();
       }
       else {
-        const getTargetPosition = (axis) => calcCoordPercentage(containerBound, this.targetElement, axis);
+        const getTargetCenterPosition = (axis) => {
+          const targetBound = this.targetElement.getBoundingClientRect();
+          const offsetPercentage = ((targetBound[axis === 'x' ? 'width' : 'height'] / 2) / containerBound[axis === 'x' ? 'width' : 'height']) * 100;
+          return calcCoordPercentage(containerBound, this.targetElement, axis) + offsetPercentage;
+        };
         this.validity = true;
         this.value = {
-          x: getTargetPosition('x'),
-          y: getTargetPosition('y')
+          x: getTargetCenterPosition('x'),
+          y: getTargetCenterPosition('y')
         };
         if (!this.livePreview) {
           setValueAndValidateInput(this.value, this);
@@ -95,6 +99,20 @@ export class YooFormHotzonesComponent {
     this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
     !this.validity && forceUpdate(this);
   }
+  isElementCenterInsideContainer(elementBounds, containerBounds, acceptationThreshold = 0) {
+    if (elementBounds && containerBounds) {
+      const { top, left, bottom, right } = containerBounds;
+      const point = {
+        x: elementBounds.x + (elementBounds.width / 2),
+        y: elementBounds.y + (elementBounds.height / 2)
+      };
+      return ((point.y >= top - acceptationThreshold) &&
+        (point.y <= bottom + acceptationThreshold) &&
+        (point.x >= left - acceptationThreshold) &&
+        (point.x <= right + acceptationThreshold));
+    }
+    return false;
+  }
   renderZones() {
     var _a;
     return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {

package/dist/collection/components/form/form-input/form-input.js

@@ -684,7 +684,7 @@ export class YooFormInputComponent {
     },
     "step": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -1,3 +1,16 @@
+/**
+ * @name: Form Multi Input
+ * @author: Ondrej, Cam
+ * https://zpl.io/2jMp8px
+ * https://zpl.io/VqY169Y
+ * https://zpl.io/2GAnzx4
+ * https://zpl.io/beKgAym
+ * https://zpl.io/a7QlRqM
+ * https://zpl.io/VQQELZA
+ * https://zpl.io/ameOEz9
+ * https://zpl.io/29KpyAW
+ */
+import { FormFieldType } from '@shared/interfaces';
 import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
@@ -537,7 +550,7 @@ export class YooFormMultiInputComponent {
         ]));
     }
     if (renderTextInput) {
-      const field = { title: label };
+      const field = { title: label, type: FormFieldType.text };
       if (cell.column.help) {
         field.help = translate(cell.column.help);
       }

package/dist/collection/components/form/form-number-picker-dialog/form-number-picker-dialog.css

@@ -214,6 +214,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .content yoo-ion-scroll {
   top: auto;
+  z-index: 20008;
   height: 100%;
   transition: 0.3s;
 }

package/dist/collection/components/form/form-ranking/form-ranking.js

@@ -222,7 +222,7 @@ export class YooFormRankingComponent {
   }
   render() {
     const values = this.readonly ? this.value : this.values;
-    return ((values === null || values === void 0 ? void 0 : values.length) && (h(Host, { class: getAppContext(this.host) },
+    return (!!(values === null || values === void 0 ? void 0 : values.length) && (h(Host, { class: getAppContext(this.host) },
       h("div", { class: "outer-container", ref: (el) => (this.outerContainerElement = el) }, values.map((value, index) => this.renderItem(value, index))))));
   }
   static get is() { return "yoo-form-ranking"; }

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -475,7 +475,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
-  will-change: transform;
 }
 :host #stack .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);

package/dist/collection/components/map/map-gl/map-gl.js

@@ -101,7 +101,12 @@ export class YooMapGlComponent {
   disconnectedCallback() {
     this.isDestroyed = true;
     if (this.map) {
-      this.map.remove();
+      try {
+        this.map.remove();
+      }
+      catch (e) {
+        //
+      }
     }
   }
   onToggleFilterGroup(event) {

package/dist/collection/components/map/map-js/map-js.js

@@ -71,7 +71,12 @@ export class YooMapJsComponent {
   disconnectedCallback() {
     this.isDestroyed = true;
     if (this.map) {
-      this.map.remove();
+      try {
+        this.map.remove();
+      }
+      catch (e) {
+        //
+      }
     }
   }
   onToggleFilterGroup(event) {

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -770,7 +770,8 @@ export class YooCardFeedComponent {
       }, scaledUpHeightPortraitOnly: true, instant: true, mediaDimension: ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaDimension) ? (_b = this.entry) === null || _b === void 0 ? void 0 : _b.mediaDimension[this.currentSlideIndex] : null, scaledUpInHeight: true, scaledUp: true, src: src }));
   }
   renderMainView() {
-    const mediaSrc = this.entry.mediaSrc[this.currentSlideIndex] || this.entry.mediaSrc[0];
+    var _a, _b;
+    const mediaSrc = ((_a = this.entry.mediaSrc) === null || _a === void 0 ? void 0 : _a[this.currentSlideIndex]) || ((_b = this.entry.mediaSrc) === null || _b === void 0 ? void 0 : _b[0]);
     const isTypeVideo = isVideo(mediaSrc);
     return (h("div", { class: "main-view-container" }, isTypeVideo ? this.renderVideo(mediaSrc) : this.renderMainViewImage(mediaSrc)));
   }
@@ -783,7 +784,8 @@ export class YooCardFeedComponent {
         ((_a = this.entry.mediaSrc) === null || _a === void 0 ? void 0 : _a.length) > 1 && this.renderThumbnailView()),
       h("div", { class: "right-container" },
         this.renderDetailViewHeader(),
-        h("yoo-ion-content", null, this.renderContent()))
+        h("yoo-ion-content", null, this.renderContent()),
+        h("slot", { name: "bottom" }))
     ];
   }
   renderSharedFeed() {

package/dist/collection/feature-communicate/feed/community-detail/community-detail.css

@@ -263,14 +263,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .top-container .information-container .description-container yoo-button {
   padding: 0 1rem;
 }
-:host .outer-container .tab-container {
-  position: relative;
+:host .outer-container .tab-outer-container {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 20rem;
+  height: 100%;
   background: var(--light, #ffffff);
   border-left: 0.0625rem solid var(--stable-40, rgba(173, 173, 173, 0.4));
   transition: 0.3s;
 }
+:host .outer-container .tab-outer-container.collapsed {
+  width: 0;
+  min-width: var(--spacing-48, 3rem) !important;
+}
+:host .outer-container .tab-outer-container:not(.collapsed) {
+  min-width: 15rem;
+}
+:host .outer-container .tab-container {
+  position: relative;
+  width: 100%;
+}
 :host .outer-container .tab-container .collapsible-icon-container {
   position: absolute;
   top: 0.5rem;
@@ -280,14 +293,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   z-index: 10;
   cursor: pointer;
 }
-:host .outer-container .tab-container.collapsed {
-  width: 0;
-  min-width: 48px !important;
-}
-:host .outer-container .tab-container:not(.collapsed) {
-  flex: 1 1 15rem;
-  min-width: 15rem;
-}
 :host .outer-container .bottom-container {
   display: flex;
   height: 100%;