@yoobic/yobi 8.2.0-19 → 8.2.0-21

package/dist/cjs/yoo-web-menu.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
-const commonHelpers = require('./common-helpers-a2ad0acf.js');
+const index$1 = require('./index-bc221b8a.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-webcam.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-welcome-banner.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
-const commonHelpers = require('./common-helpers-a2ad0acf.js');
+const index$1 = require('./index-bc221b8a.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-chart.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-small-size.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-workflow-state-dialog.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-workflow-state.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-a2ad0acf.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
 const index$4 = require('./index-1016fbe6.js');
-const index$2 = require('./index-0d98c58d.js');
+const index$2 = require('./index-daa45932.js');
 const index$3 = require('./index-9c56868f.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-6450e9bd.js');
+const index = require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-6450e9bd.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 const annotationsHelpers = require('./annotations-helpers-45b1c2e4.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');

package/dist/collection/components/1.atoms/markdown/markdown.js

@@ -1,7 +1,7 @@
 import { cleanupWKWebViewFilePath, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Method, Prop, Watch } from '@stencil/core';
 import { getFromLocalForage } from '../../../utils/cache/localForage';
-import { onRTEClick } from '../../../utils/helpers/common-helpers';
+import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooMarkdownComponent {
   constructor() {
     this.linkPreviews = [];
@@ -24,7 +24,7 @@ export class YooMarkdownComponent {
       e.stopPropagation();
       e.stopImmediatePropagation();
       e.preventDefault();
-      onRTEClick(this.contentDiv, targetElement.src);
+      openImageDetailFromRTE(this.contentDiv, targetElement.src);
     }
   }
   async setContent() {

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

@@ -203,31 +203,51 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
   height: 100%;
   overflow: hidden;
 }
-:host #sequences {
+:host #view-finder {
   position: relative;
+  width: 100%;
+  height: 50%;
+}
+:host #view-finder #sequences {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16, 1rem);
-  padding: 0 var(--spacing-16, 1rem);
-  text-align: center;
-  transform: translateY(calc(-1 * var(--spacing-16, 1rem)));
+  width: 100%;
 }
-:host #sequences .sequence {
-  overflow: scroll;
+:host #view-finder .sequence {
+  display: grid;
+  height: var(--max-sequence-height);
+  padding: 0 var(--spacing-16, 1rem);
+  overflow: auto;
   color: var(--stable, #adadad);
+  text-align: center;
   word-break: break-word;
   transform: scale(0.9);
+  transition: all 500ms ease-in-out;
+}
+:host #view-finder .sequence:not(.overflowing) {
+  place-content: center;
+}
+:host #view-finder .sequence * {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: var(--spacing-08, 0.5rem) auto;
+  text-align: center;
 }
-:host #sequences .sequence.active {
+:host #view-finder .sequence::-webkit-scrollbar {
+  display: none;
+}
+:host #view-finder .sequence.active {
   color: var(--dark, #000000);
   transform: scale(1);
 }
-:host #sequences .sequence.title {
-  margin-top: 50%;
+:host #view-finder .sequence.title {
   font-weight: var(--font-weight-700, 700);
   font-size: var(--font-size-28, 1.75rem);
 }
@@ -267,14 +287,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--app-color, #5a30f4);
 }
 
-:host([live-preview]) #sequences,
-:host(.mobile) #sequences {
-  margin-top: 35%;
-}
-
 :host([animated]) yoo-button,
 :host([animated]) #sequences,
 :host([animated]) .sequence,
 :host([animated]) .overlay {
-  transition: all 300ms ease 0s;
+  transition: transform 300ms;
 }

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

@@ -1,85 +1,81 @@
-import { cleanupWKWebViewFilePath, findParent, getKeyToCache, setSecuredContent, translateMulti } from '@shared/utils';
+import { findParent, 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';
-import { getAppContext, onRTEClick } from '../../../utils/helpers/common-helpers';
+import { getAppContext, openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooTextSequence {
   constructor() {
     this.animated = true;
     this.validity = false;
     this.currentIndex = 0;
-    this.currentYPosition = 0;
+    this.translateY = 0;
   }
   onValuesChanged() {
-    this.currentYPosition = 0;
+    this.translateY = 0;
     this.currentIndex = 0;
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
   onIsVisibleChanged() {
-    this.setComponentHeight();
-    this.initComponent();
+    this.isVisible && this.initSequenceHeight();
+  }
+  onModalAnimationFinished() {
+    this.isAnimationFinished && this.initSequenceHeight();
   }
   get wrapperElement() {
     return findParent(this.host, 'yoo-ion-scroll') || this.host;
   }
   get sequenceElements() {
+    var _a, _b;
+    return (_b = Array.from(((_a = this.sequencesContainerElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sequence')) || [])) === null || _b === void 0 ? void 0 : _b.filter(e => e);
+  }
+  get maxSequenceHeight() {
     var _a;
-    return (_a = Array.from(this.host.shadowRoot.querySelectorAll('.sequence') || [])) === null || _a === void 0 ? void 0 : _a.filter(e => e);
+    return ((_a = this.viewFinderElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (this.host.clientHeight / 2);
+  }
+  get sequenceValues() {
+    var _a, _b, _c;
+    return (_c = (_b = compact([(_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim(), ...(this.values || [])])) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.map(v => Array.isArray(v) ? v[0] : v);
   }
   componentWillRender() {
     this.wrapperElement && (this.wrapperElement.style.overflow = 'hidden');
   }
   componentDidLoad() {
-    this.initComponent();
-    this.setComponentHeight();
+    this.initSequenceHeight();
   }
   componentDidRender() {
-    this.setComponentHeight();
-  }
-  setComponentHeight() {
-    var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const { height } = this.host.getBoundingClientRect();
-      this.sequenceElements.forEach(e => {
-        e && height && (e.style.maxHeight = `${height * .5}px`);
-      });
-    }
+    this.initSequenceHeight();
   }
-  initComponent() {
+  initSequenceHeight() {
     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);
-      }
-    });
-  }
-  onRTEContentClick(ev, index) {
-    var _a;
-    onRTEClick(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
-  }
-  clickArrow(direction) {
-    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);
-      this.currentYPosition = 0 - (textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + textsHeight[this.currentIndex] / 2) - GAP_INTER_SEQUENCES * this.currentIndex;
+    if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
+      this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+      this.sequenceElements.forEach(e => e.classList.toggle('overflowing', e.scrollHeight > this.maxSequenceHeight));
       this.validity = this.currentIndex === this.sequenceElements.length - 1;
     }
   }
   renderSequences() {
-    var _a, _b;
-    return h("section", { id: "sequences", style: { transform: `translateY(${this.currentYPosition}px)` } }, (_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, onClick: (ev) => this.onRTEContentClick(ev, index) });
-    }));
+    var _a;
+    return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
+      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), onClick: ev => { var _a; return openImageDetailFromRTE(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
+      })));
   }
   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) },
+    const clickArrow = () => {
+      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')) + (isUp ? -1 : 1), 0, this.sequenceElements.length - 1);
+        const textsHeight = this.sequenceElements.map((e, i) => Math.round(e.offsetHeight * (i <= this.currentIndex ? 1 : .9)));
+        this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+        this.translateY = 0 - ((textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + GAP_INTER_SEQUENCES * this.currentIndex));
+        this.initSequenceHeight();
+      }
+    };
+    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => clickArrow() },
       h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
   renderOverlay(placement) {
@@ -171,7 +167,7 @@ export class YooTextSequence {
       "reflect": false,
       "defaultValue": "false"
     },
-    "livePreview": {
+    "isVisible": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -180,15 +176,15 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
-      "reflect": true
+      "attribute": "is-visible",
+      "reflect": false
     },
-    "isVisible": {
+    "isAnimationFinished": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -197,12 +193,12 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-visible",
+      "attribute": "is-animation-finished",
       "reflect": false
     }
   }; }
@@ -235,5 +231,8 @@ export class YooTextSequence {
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
+    }, {
+      "propName": "isAnimationFinished",
+      "methodName": "onModalAnimationFinished"
     }]; }
 }

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

@@ -42,7 +42,9 @@ export class YooFormCatalogComponent {
             this.value = {};
           }
         }
-        this.addProducts(ev.detail);
+        if (!isWeb(this.host)) {
+          this.addProducts(ev.detail);
+        }
       }
     }
   }
@@ -302,7 +304,7 @@ export class YooFormCatalogComponent {
   }
   renderEditable() {
     return (h("div", { class: "outer-container" },
-      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: true, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
+      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: false, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
       !this.disableScanner && h("div", { class: "or" }, translate('YOOBICOR')),
       !this.disableScanner && h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: translate('SCANPRODUCTTOBASKET'), hideValue: true }),
       !this.selectorMode && this.notFoundError ? h("div", { class: "error", innerHTML: this.notFoundError }) : null,

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

@@ -4416,7 +4416,8 @@ export class YooFormDynamicComponent {
           heading: field.heading,
           values: field.values,
           livePreview: this.isLessonPreview(),
-          isVisible: this.isCurrentSlide(slideIndex)
+          isVisible: this.isCurrentSlide(slideIndex),
+          isAnimationFinished: this.isAnimationFinished
         };
         break;
       case FormFieldType.feedpreview:

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

@@ -1,7 +1,7 @@
 import { closeModal, getMedia, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache';
-import { onRTEClick } from '../../../utils/helpers/common-helpers';
+import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooFormImageCollectionComponent {
   constructor() {
     this.animated = true;
@@ -27,7 +27,7 @@ export class YooFormImageCollectionComponent {
   }
   onRTEContentClick(ev) {
     var _a;
-    onRTEClick(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    openImageDetailFromRTE(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
   }
   async imageClicked(imagePair, index) {
     await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -1098,7 +1098,9 @@ span.fr-img-caption.fr-view {
   height: 100%;
 }
 :host(.textsequence) .top-container .content-container ::slotted(yoo-text-sequence) {
+  max-width: 40rem;
   height: 100%;
+  margin: 0 auto;
 }
 
 :host(.mobile) .content-container .removable {

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

@@ -3,7 +3,7 @@ import { debounce, getKeyToCache, getMedia, getURLs, isFieldWithNoValue, isNativ
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State } from '@stencil/core';
 import { isNumber } from 'lodash-es';
 import { getFromLocalForage } from '../../../utils/cache';
-import { getAppContext, getConfig, onRTEClick, querySelectorDeep } from '../../../utils/helpers/common-helpers';
+import { getAppContext, getConfig, openImageDetailFromRTE, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooFormInputContainerComponent {
   constructor() {
     this.animated = true;
@@ -256,7 +256,7 @@ export class YooFormInputContainerComponent {
   }
   onRTEContentClick(ev) {
     var _a;
-    onRTEClick(this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    openImageDetailFromRTE(this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
     this.headerClicked.emit();
   }
   renderDescription() {

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

@@ -2,7 +2,7 @@ import { closeModal, getAsyncExtraData, getPermissions, getSession, getUserDispl
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { isEmpty } from 'lodash-es';
 import { getButton } from '../../../../utils/button.factory';
-import { execHandlerAndStopEvent, getAppContext, showSlidesMedia } from '../../../../utils/helpers/common-helpers';
+import { execHandlerAndStopEvent, getAppContext, openImageDetailFromRTE } from '../../../../utils/helpers/common-helpers';
 import { EventActions } from '../components/events';
 import { CardAnnouncement, CardCampaign, CardEvent, CardIncentive } from '../components/sub-cards';
 export class YooCardFeedComponent {
@@ -99,13 +99,6 @@ export class YooCardFeedComponent {
     var _a, _b;
     return ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b._id) === getSession().userId;
   }
-  onRTEContentClick() {
-    var _a;
-    const items = ((_a = Array.from(this.textElement.querySelectorAll('img'))) === null || _a === void 0 ? void 0 : _a.map((e) => ({ value: e.src }))) || [];
-    if (items === null || items === void 0 ? void 0 : items.length) {
-      showSlidesMedia({ items, isTagging: false, isReadonly: true, canAnnotate: false });
-    }
-  }
   onMediaClicked(ev) {
     if (!this.previewMode && this.host.classList.contains('shared-feed')) {
       this.sharedMediaClicked.emit(true);
@@ -205,7 +198,7 @@ export class YooCardFeedComponent {
     var _a;
     const preventNewLine = (_a = this.entry.description) === null || _a === void 0 ? void 0 : _a.includes('name="slide"');
     const content = parseMarkDown(replaceAllLinks(this.entry.description, preventNewLine), true);
-    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: () => this.onRTEContentClick(), innerHTML: content }) :
+    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: (ev) => { var _a; return openImageDetailFromRTE(this.textElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, innerHTML: content }) :
       h("yoo-truncate", { class: "card-feeds", maxLength: 20, byWords: true, replaceBreakWithClosed: true, showEllipsisButton: !this.isBlog(), onContentToggled: (ev) => this.viewMoreToggled.emit(ev.detail), content: replaceAllLinks(this.entry.description, preventNewLine) });
   }
   renderEntryDescription() {

package/dist/collection/feature-learn/learning/card-menu/card-menu.css

@@ -201,27 +201,51 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
+:host {
+  --counter-color: var(--dark, #000000);
+  --icon-color: var(--dark, #000000);
+  --icon-background-color: transparent;
+  --icon-margin-left: 0;
+  --icon-border-radius: 0;
+  --icon-padding: 0;
+  --arrow-margin: 0 0 0 var(--spacing-08, 0.5rem);
+  --container-box-shadow: 0;
+  --container-padding-bottom: 0.4rem;
+  --container-border-radius: 0;
+  --title-padding: 0;
+}
 :host .outer-container {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-bottom: 0.4rem;
+  padding-bottom: var(--container-padding-bottom);
   overflow: hidden;
   white-space: nowrap;
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
+  border-radius: var(--container-border-radius);
+  box-shadow: var(--container-box-shadow);
 }
 :host .outer-container .title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   flex: 1;
+  padding: var(--title-padding);
   color: var(--dark, #000000);
 }
 :host .outer-container yoo-icon.start {
-  margin-right: 0.5rem;
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: var(--icon-margin-left);
+  padding: var(--icon-padding);
+  background-color: var(--icon-background-color);
+  border-radius: var(--icon-border-radius);
+  fill: var(--icon-color);
 }
 :host .outer-container yoo-icon.end {
-  margin-left: var(--spacing-08, 0.5rem);
+  margin: var(--arrow-margin);
+}
+:host .outer-container .counter {
+  color: var(--counter-color);
 }
 
 :host(.web.selected) .outer-container {