@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/components/2.molecules/text-sequence/text-sequence.js

@@ -1,285 +1,88 @@
-import { cleanupWKWebViewFilePath, getKeyToCache, resizeObserve, setSecuredContent, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { compact } from 'lodash-es';
+import { cleanupWKWebViewFilePath, findParent, getKeyToCache, setSecuredContent, translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { clamp, compact } from 'lodash-es';
 import { getFromLocalForage } from '../../../utils/cache';
 export class YooTextSequence {
   constructor() {
     this.animated = true;
     this.validity = false;
-    this.step = 0;
-    this.texts = [];
-    this.textsElement = [];
-    this.validityUpdated = false;
-    this.MIN_OVERLAY_HEIGHT = 5;
-    this.CURRENT_TEXT_OPACITY = 1;
-    this.OUTER_TEXT_OPACITY = 0.4;
-    this.resizeDebounce = async () => {
-      if (!this.isFirstLoadAnimation && this.containerElement.offsetHeight !== 0) {
-        await this.resetTextSequence();
-      }
-      if (this.isFirstLoadAnimation && this.containerElement.offsetHeight !== 0 && this.animated) {
-        await this.triggerOpeningAnimation();
-      }
-      if (!this.isFirstLoadAnimation && this.containerElement.offsetHeight === 0 && this.animated) {
-        await this.resetOpeningAnimation();
-      }
-    };
-    this.onTextSequenceSizeChanged = async () => {
-      const isHeightResize = this.containerHeight !== this.containerElement.offsetHeight;
-      if (isHeightResize && !this.validityUpdated) {
-        this.containerHeight = this.containerElement.offsetHeight;
-        clearTimeout(this.timeOutId);
-        this.timeOutId = setTimeout(this.resizeDebounce, 250);
-      }
-      if (this.validityUpdated) {
-        this.validityUpdated = false;
-      }
-    };
-  }
-  onValuesChanged() {
-    this.mergeTexts();
+    this.currentIndex = 0;
+    this.sequenceElements = [];
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
+  onIsVisibleChanged() {
+    this.setComponentHeight();
+    this.initComponent();
+  }
+  get wrapperElement() {
+    return findParent(this.host, 'yoo-ion-scroll') || this.host;
+  }
   componentWillLoad() {
-    this.isFirstLoadAnimation = this.animated;
-    this.mergeTexts();
+    this.wrapperElement && (this.wrapperElement.style.overflow = 'hidden');
   }
   componentDidLoad() {
-    var _a;
-    this.textSequenceResizeWatch();
-    (_a = this.textsElement) === null || _a === void 0 ? void 0 : _a.forEach(async (e) => {
-      if (e === null || e === void 0 ? void 0 : e.querySelector('img')) {
-        const img = e.querySelector('img');
-        img.src = cleanupWKWebViewFilePath((await getFromLocalForage(getKeyToCache(img.src))) || img.src);
-      }
-    });
+    this.initComponent();
+    this.setComponentHeight();
   }
   componentDidRender() {
-    if (!this.isFirstLoadAnimation) {
-      this.updateTextsScrollPosition();
-      this.cleanTextElements();
-      this.refreshTextSequence();
-    }
+    this.setComponentHeight();
   }
-  textSequenceResizeWatch() {
-    resizeObserve(this.containerElement, this.onTextSequenceSizeChanged);
-  }
-  mergeTexts() {
+  setComponentHeight() {
     var _a;
-    if (this.values) {
-      this.texts = compact([this.heading, ...this.values]);
-      this.texts = (_a = this.texts) === null || _a === void 0 ? void 0 : _a.map((v) => Array.isArray(v) ? v[0] : v);
-    }
-  }
-  isFirstStep() {
-    return this.step === 0;
-  }
-  isLastStep() {
-    return this.step === this.texts.length - 1;
-  }
-  isCurrentStep(step) {
-    return this.step === step;
-  }
-  isTextOverflow(text) {
-    return text.offsetHeight > this.containerElement.offsetHeight;
-  }
-  refreshTextSequence() {
-    if (this.containerElement.offsetHeight > 0) {
-      let textPosition = this.containerElement.offsetHeight / 2;
-      this.textsElement.map((textElement, index) => {
-        if (textElement) {
-          this.updateTextHeight(textElement);
-          if (this.isCurrentStep(index)) {
-            this.currentTextOverflowElement = this.isTextOverflow(textElement) ? textElement : null;
-            this.updateOverlayHeight(textElement);
-          }
-          textPosition = this.getUpdatedTextPosition(textPosition, textElement, index);
-          this.updateTextOpacity(textElement, index);
-        }
-      });
-      this.updateTextPosition(textPosition);
-      this.updateArrowsDisplay();
-      this.updateValidity();
-    }
-  }
-  getUpdatedTextPosition(textPosition, textElement, textStep) {
-    if (textStep < this.step) {
-      textPosition = textPosition - textElement.offsetHeight;
-    }
-    if (this.isCurrentStep(textStep)) {
-      if (this.isTextOverflow(textElement)) {
-        textPosition = textPosition - this.containerElement.offsetHeight / 2;
-      }
-      else {
-        textPosition = textPosition - textElement.offsetHeight / 2;
-      }
-    }
-    return textPosition;
-  }
-  updateTextPosition(height) {
-    this.textContainerElement.style.transform = 'translateY(' + height + 'px)';
-  }
-  updateOverlayHeight(textElement) {
-    const heightRelatedToTextSize = (this.containerElement.offsetHeight - textElement.offsetHeight) / 2;
-    const height = this.isTextOverflow(textElement) ? this.MIN_OVERLAY_HEIGHT : heightRelatedToTextSize;
-    this.overlayTopElement.style.height = height + 'px';
-    this.overlayBottomElement.style.height = height + 'px';
-  }
-  updateTextOpacity(textElement, index) {
-    if (!this.isFirstLoadAnimation) {
-      switch (this.step) {
-        case index - 1:
-          textElement.style.setProperty('opacity', this.OUTER_TEXT_OPACITY, 'important');
-          break;
-        case index:
-          textElement.style.setProperty('opacity', this.CURRENT_TEXT_OPACITY, 'important');
-          break;
-        case index + 1:
-          textElement.style.setProperty('opacity', this.OUTER_TEXT_OPACITY, 'important');
-          break;
-        default:
-          textElement.style.opacity = 0;
-      }
-    }
-  }
-  updateValidity() {
-    if (!this.validity && this.isLastStep()) {
-      this.validity = true;
-      this.validityUpdated = true;
-    }
-  }
-  updateArrowsDisplay() {
-    if (this.isFirstStep() || this.textsElement.length === 0) {
-      this.displayElement(this.arrowUpElement, 'hidden', 0);
-    }
-    else {
-      this.displayElement(this.arrowUpElement, 'visible', 1);
-    }
-    if (this.isLastStep() || this.textsElement.length === 0) {
-      this.displayElement(this.arrowDownElement, 'hidden', 0);
-    }
-    else {
-      this.displayElement(this.arrowDownElement, 'visible', 1);
+    if (((_a = this.wrapperElement) === null || _a === void 0 ? void 0 : _a.clientHeight) && !this.locker) {
+      this.locker = true;
+      const overlayHeight = this.host.shadowRoot.querySelector('.overlay').clientHeight;
+      const { top, height } = this.wrapperElement.getBoundingClientRect();
+      this.host.style.height = `${height - (this.livePreview ? 0 : top)}px`;
+      this.sequenceElements.forEach(e => e.style.maxHeight = `${height - overlayHeight * .65 * 2}px`);
+      this.sequencesContainerElement.firstChild.style.marginTop = `${this.host.clientHeight / 2}px`;
     }
   }
-  displayElement(element, visibility, opacity) {
-    element.style.visibility = visibility;
-    element.style.opacity = opacity;
-  }
-  updateTextHeight(textElement) {
-    if (this.isTextOverflow(textElement)) {
-      textElement.style.height = this.containerElement.offsetHeight + 'px';
-      textElement.style.overflow = 'scroll';
-    }
-    else {
-      textElement.style.height = 'fit-content';
-      textElement.style.overflow = 'auto';
-    }
-  }
-  setCurrentTextScrollToBeginning() {
-    if (this.currentTextOverflowElement) {
-      this.currentTextOverflowElement.scrollTop = 0;
-    }
-  }
-  setCurrentTextScrollToEnd() {
-    if (this.currentTextOverflowElement) {
-      this.currentTextOverflowElement.scrollTop = this.currentTextOverflowElement.scrollHeight;
-    }
-  }
-  updateTextsScrollPosition() {
-    this.textsElement.map((text, index) => {
-      if (text && this.isTextOverflow(text)) {
-        text.scrollTop = index < this.step ? text.scrollHeight : text.scrollTop = 0;
+  initComponent() {
+    var _a;
+    (_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.forEach(async (e) => {
+      if (e === null || e === void 0 ? void 0 : e.querySelector('img')) {
+        const img = e.querySelector('img');
+        img.src = cleanupWKWebViewFilePath((await getFromLocalForage(getKeyToCache(img.src))) || img.src);
       }
     });
   }
-  relocateUserToNonEmptyText() {
-    const isUserOnLastText = this.isLastStep() && this.step !== 0;
-    if (isUserOnLastText) {
-      this.step = this.step - 1;
-    }
-  }
-  removeEmptyTextElements() {
-    this.textsElement = this.textsElement.filter(Boolean);
-  }
-  cleanTextElements() {
-    const isNumberOfTextUpdated = this.textsElement.length !== this.texts.length;
-    if (isNumberOfTextUpdated) {
-      this.relocateUserToNonEmptyText();
-      this.removeEmptyTextElements();
-    }
-  }
-  hideTextElements() {
-    this.textsElement.map((textElement) => {
-      textElement.style.setProperty('opacity', '0');
-    });
-  }
   clickArrow(direction) {
-    if (direction === 'up' && !this.isFirstStep() && this.textsElement.length !== 0) {
-      this.step = this.step - 1;
-      this.setCurrentTextScrollToBeginning();
-    }
-    else if (direction === 'down' && !this.isLastStep() && this.textsElement.length !== 0) {
-      this.step = this.step + 1;
-      if (this.step === 1)
-        this.host.removeAttribute('openingTextAnimation');
-      this.setCurrentTextScrollToEnd();
-    }
-    this.refreshTextSequence();
-  }
-  async triggerOpeningAnimation() {
-    await this.refreshTextSequence();
-    this.host.setAttribute('openingTextAnimation', 'true');
-    this.host.setAttribute('openingArrowAnimation', 'true');
-    this.isFirstLoadAnimation = false;
-  }
-  async resetOpeningAnimation() {
-    this.step = 0;
-    this.displayElement(this.arrowUpElement, 'hidden', 0);
-    await this.hideTextElements();
-    this.host.removeAttribute('openingTextAnimation');
-    this.host.removeAttribute('openingArrowAnimation');
-    this.isFirstLoadAnimation = true;
-  }
-  async resetTextSequence() {
-    this.step = 0;
-    await this.updateTextsScrollPosition();
-    await this.refreshTextSequence();
-  }
-  renderValue(text, index) {
-    let textClass = 'text';
-    if (this.heading && text && index === 0) {
-      textClass += ' title';
-    }
-    if (text && index === 0) {
-      textClass += ' first';
-    }
-    if (text && index === 1) {
-      textClass += ' second';
-    }
-    return (h("div", { class: textClass, innerHTML: setSecuredContent(translateMulti(text)), ref: (el) => this.textsElement[index] = el }));
+    var _a;
+    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
+      const GAP_INTER_SEQUENCES = 16;
+      this.currentIndex = clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (direction === 'top' ? -1 : 1), 0, this.sequenceElements.length - 1);
+      const textsHeight = this.sequenceElements.map(e => e.offsetHeight);
+      const tsY = 0 - (textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + textsHeight[this.currentIndex] / 2) - GAP_INTER_SEQUENCES * this.currentIndex;
+      this.sequencesContainerElement.style.transform = `translateY(${tsY}px)`;
+      this.validity = this.currentIndex === this.sequenceElements.length - 1;
+    }
+  }
+  renderSequences() {
+    var _a, _b;
+    return h("section", { id: "sequences", ref: el => this.sequencesContainerElement = el }, (_b = (_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.map((v) => Array.isArray(v) ? v[0] : v)) === null || _b === void 0 ? void 0 : _b.map((text, index) => {
+      return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), ref: (el) => this.sequenceElements[index] = el });
+    }));
+  }
+  renderArrow(placement) {
+    var _a;
+    const isUp = placement === 'top';
+    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => this.clickArrow(placement) },
+      h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
-  renderArrow(direction) {
-    const classList = `arrow-button ${direction}`;
-    const initArrowElement = (direction, el) => direction === 'up' ? this.arrowUpElement = el : this.arrowDownElement = el;
-    const icon = direction === 'up' ? 'big-arrow-up' : 'big-arrow-down';
-    return (h("div", { class: classList, onClick: () => this.clickArrow(direction), ref: (el) => initArrowElement(direction, el) },
-      h("yoo-icon", { size: "small", name: icon })));
+  renderOverlay(placement) {
+    return h("section", { class: "overlay", ...{ placement } });
   }
-  renderTextSequence() {
-    return (h("div", { class: "container", ref: (el) => (this.containerElement = el) },
-      h("div", { class: "text-container", ref: (el) => (this.textContainerElement = el) }, this.texts && this.texts.map((text, index) => this.renderValue(text, index))),
-      h("div", { class: "overlay top", ref: (el) => (this.overlayTopElement = el) }),
-      h("div", { class: "overlay bottom", ref: (el) => (this.overlayBottomElement = el) })));
+  renderPart(placement) {
+    return [this.renderArrow(placement), this.renderOverlay(placement)];
   }
   render() {
-    return (h(Host, { class: { ...getAppContext(this.host) } },
-      this.renderArrow('up'),
-      this.renderTextSequence(),
-      this.renderArrow('down')));
+    return h(Host, null,
+      this.renderPart('top'),
+      this.renderSequences(),
+      this.renderPart('bottom'));
   }
   static get is() { return "yoo-text-sequence"; }
   static get encapsulation() { return "shadow"; }
@@ -299,7 +102,7 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -316,7 +119,7 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -331,7 +134,7 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -349,7 +152,7 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -357,8 +160,45 @@ export class YooTextSequence {
       "attribute": "validity",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "livePreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "live-preview",
+      "reflect": true
+    },
+    "isVisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-visible",
+      "reflect": false
     }
   }; }
+  static get states() { return {
+    "currentIndex": {}
+  }; }
   static get events() { return [{
       "method": "validityChanged",
       "name": "validityChanged",
@@ -377,10 +217,10 @@ export class YooTextSequence {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
       "propName": "validity",
       "methodName": "onValidityChanged"
+    }, {
+      "propName": "isVisible",
+      "methodName": "onIsVisibleChanged"
     }]; }
 }

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

@@ -598,7 +598,7 @@ export class YooInputBarComponent {
     else {
       this.mediaLoading.emit(true);
       let requireUpload = false;
-      let promise = () => { var _a; return getAsyncExtraData({ type: 'file-upload', params: { file: ev.target.files[0], origin: ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.origin) === 'chat' || 'all' } }); };
+      let promise = () => { var _a; return getAsyncExtraData({ type: 'file-upload', params: { file: ev.target.files[0], origin: ((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.origin) || 'all' } }); };
       if ([MessageType.photo, MessageType.video].includes(this.fileCaptureSettings.type) && ((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.origin) === 'chat') {
         let parseData = ev.target.files[0];
         if (isImage(parseData)) {
@@ -614,6 +614,8 @@ export class YooInputBarComponent {
         const type = ((_d = this.fileCaptureSettings) === null || _d === void 0 ? void 0 : _d.type) || MessageType.document;
         const preventAnnotation = ((_e = this.fileCaptureSettings) === null || _e === void 0 ? void 0 : _e.preventAnnotation) || false;
         this.onHandleMediaInput(ret[0], type, requireUpload, preventAnnotation);
+        this.fileInput.value = null;
+        this.fileInput.files = null;
       }
       this.mediaLoading.emit(false);
     }

package/dist/collection/components/3.organisms/photo-editor/photo-editor.helpers.js

@@ -1,11 +1,8 @@
 import { convertSvgToBase64, Draggable, getContrastColor, getCssColor, getCurrentLanguage, getMedia, getSession, getUUID, gsapTo, scaleUpAnimation, showModal } from '@shared/utils';
 import { inRange, isFinite } from 'lodash-es';
-import { getAnnotationPositionStyle, getElement, isAnnotationValid } from '../../../utils/helpers/annotations-helpers';
+import { calcCoordPercentage, getAnnotationPositionStyle, getBound, getElement, isAnnotationValid } from '../../../utils/helpers/annotations-helpers';
 import { getDotToolTipElement, setDotEditable, showDotTooltip } from '../../../utils/helpers/draggable-dots-helpers';
 import { ANIMATION_DELAY, INIT_COORDS, SLIDER_THRESHOLD } from './photo-editor.constants';
-function getBound(axis) {
-  return axis === 'x' ? 'width' : 'height';
-}
 function getAbsoluteAnnotationPosition(element, containerBounds) {
   const getAbsolutePosition = (axis) => (containerBounds[getBound(axis)] * (parseFloat(element.style[axis === 'x' ? 'left' : 'top']) || 0)) / 100;
   return {
@@ -35,10 +32,6 @@ export function getPredefinedTexts() {
     return translation[getCurrentLanguage()] || [];
   })) || [];
 }
-export function calcCoordPercentage(containerBR, annotationEl, axis) {
-  const annotationBR = annotationEl === null || annotationEl === void 0 ? void 0 : annotationEl.getBoundingClientRect();
-  return containerBR && annotationBR ? Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100) : 0;
-}
 export function formatAnnotationForExport(annotation, containerElement) {
   if (annotation && containerElement) {
     const containerBounds = containerElement.getBoundingClientRect();

package/dist/collection/components/3.organisms/video-player/videoplayer-youtube/videoplayer-youtube.js

@@ -27,25 +27,21 @@ export class YooVideoPlayerYoutubeComponent {
    */
   onSourceChange(newSource) {
     var _a;
-    if ((_a = this.player) === null || _a === void 0 ? void 0 : _a.loadVideoById) {
-      this.player.loadVideoById(getYoutubeId(newSource));
-    }
+    (_a = this.player) === null || _a === void 0 ? void 0 : _a.loadVideoById(getYoutubeId(newSource));
   }
   /**
    * Will pause the video
    */
   async pauseVideo() {
-    if (this.player && this.player.pauseVideo) {
-      this.player.pauseVideo();
-    }
+    var _a;
+    (_a = this.player) === null || _a === void 0 ? void 0 : _a.pauseVideo();
   }
   /**
    * Will play the video
    */
   async playVideo() {
-    if (this.player && this.player.playVideo) {
-      return this.player.playVideo();
-    }
+    var _a;
+    return (_a = this.player) === null || _a === void 0 ? void 0 : _a.playVideo();
   }
   /**
    * Return the current time of the video
@@ -61,10 +57,9 @@ export class YooVideoPlayerYoutubeComponent {
    * Update the current time of video, will auto play the time is updated
    */
   async updateCurrentTime(time) {
+    var _a;
     this.playVideo();
-    if (this.player && this.player.seekTo) {
-      this.player.seekTo(time);
-    }
+    (_a = this.player) === null || _a === void 0 ? void 0 : _a.seekTo(time);
   }
   /**
    * Will play the video in fullscreen mode
@@ -84,9 +79,9 @@ export class YooVideoPlayerYoutubeComponent {
   onInitYoutubePlayer() {
     getYoutubeIFrameAPI().then((youtube) => {
       if (youtube && youtube.Player) {
-        this.player = new youtube.Player(this.youtubeEl, {
+        this.player = new youtube.Player(this.youtubeElement, {
           videoId: getYoutubeId(this.source),
-          height: this.youtubeContainer.clientHeight,
+          height: this.youtubeContainerElement.clientHeight,
           playerVars: {
             fs: this.fullscreen,
             rel: 0,
@@ -122,11 +117,8 @@ export class YooVideoPlayerYoutubeComponent {
   }
   render() {
     return (h(Host, { class: { played: this.played } },
-      h("div", { class: {
-          'yt-container': true,
-          'error': this.hasError
-        }, ref: (el) => this.youtubeContainer = el },
-        h("div", { ref: (el) => this.youtubeEl = el, class: "yt-player" }))));
+      h("div", { class: { 'yt-container': true, error: this.hasError }, ref: (el) => this.youtubeContainerElement = el },
+        h("div", { ref: (el) => this.youtubeElement = el, class: "yt-player" }))));
   }
   static get is() { return "yoo-videoplayer-youtube"; }
   static get encapsulation() { return "shadow"; }

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

@@ -348,40 +348,84 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: 0;
 }
 
-:host(:not(.horizontal)) .outer-container {
-  box-sizing: border-box;
-  height: 100%;
-}
-
-:host([size=medium]) .outer-container .heading-container {
-  font-weight: normal;
-  font-size: var(--font-size-16, 1rem);
-}
-
-:host([size=small]) .outer-container {
+:host(.horizontal[size=small]) .outer-container {
   width: 9rem;
   max-width: 9rem;
   min-height: 3rem;
   padding: var(--spacing-08, 0.5rem);
 }
-:host([size=small]) .outer-container .heading-container {
+:host(.horizontal[size=small]) .outer-container .heading-container {
   font-weight: normal;
   font-size: var(--font-size-14, 0.875rem);
 }
 
+:host(.horizontal[size=medium]) .outer-container .heading-container {
+  font-weight: normal;
+  font-size: var(--font-size-16, 1rem);
+}
+
+:host(:not(.horizontal)) .outer-container {
+  box-sizing: border-box;
+  height: 100%;
+}
+
 :host(.card-list) .outer-container {
   margin-bottom: 0;
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
   border-radius: 0;
 }
 
+:host(.dashboards) .outer-container,
 :host(.missiondescriptions) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
+  border: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   box-shadow: none;
 }
+:host(.dashboards) .outer-container .heading-container,
+:host(.missiondescriptions) .outer-container .heading-container {
+  font-weight: normal;
+}
+:host(.dashboards) .outer-container .heading-container .heading,
 :host(.missiondescriptions) .outer-container .heading-container .heading {
+  overflow: hidden;
+  white-space: unset;
   text-align: left;
 }
+@supports (display: -webkit-box) {
+  :host(.dashboards) .outer-container .heading-container .heading,
+:host(.missiondescriptions) .outer-container .heading-container .heading {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+:host(.dashboards.cell) .outer-container,
+:host(.missiondescriptions.cell) .outer-container {
+  justify-content: center;
+  padding: 0 var(--spacing-16, 1rem);
+}
+:host(.dashboards.cell) .outer-container .heading-container,
+:host(.missiondescriptions.cell) .outer-container .heading-container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--spacing-08, 0.5rem);
+}
+:host(.dashboards.cell) .outer-container .heading-container .heading,
+:host(.missiondescriptions.cell) .outer-container .heading-container .heading {
+  grid-column-start: 1;
+  grid-column-end: 3;
+}
+:host(.dashboards.cell) .outer-container .heading-container .icon-right,
+:host(.missiondescriptions.cell) .outer-container .heading-container .icon-right {
+  grid-row: 1;
+  grid-column: 2;
+}
+:host(.dashboards.cell) .outer-container .heading-container .icon-left,
+:host(.dashboards.cell) .outer-container .heading-container .icon-right,
+:host(.missiondescriptions.cell) .outer-container .heading-container .icon-left,
+:host(.missiondescriptions.cell) .outer-container .heading-container .icon-right {
+  margin: 0;
+}
 
 :host(.missiondescriptions.framed) .outer-container {
   margin-bottom: 0;
@@ -392,6 +436,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: none;
 }
 
+@media (max-width: 370px) {
+  :host(.dashboards.framed) .outer-container .heading-container .heading,
+:host(.missiondescriptions.framed) .outer-container .heading-container .heading {
+    overflow: hidden;
+  }
+  @supports (display: -webkit-box) {
+    :host(.dashboards.framed) .outer-container .heading-container .heading,
+:host(.missiondescriptions.framed) .outer-container .heading-container .heading {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
 :host(.campaigntypes) .outer-container,
 :host(.missiondescriptiontemplates) .outer-container {
   position: relative;