@yoobic/yobi 8.4.0-2 → 8.4.0-5

package/dist/collection/components/1.atoms/tag/tag.css

@@ -542,6 +542,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--light, #ffffff);
 }
 
+:host([color=warning-10]:not([no-background])) .outer-container {
+  color: var(--warning, #ed6e33);
+  background-color: var(--warning-10, rgba(237, 110, 51, 0.1));
+}
+:host([color=warning-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)) {
+  fill: var(--warning, #ed6e33);
+}
+:host([color=warning-10]:not([no-background])) .outer-container yoo-icon:not(.custom) {
+  fill: var(--warning, #ed6e33);
+}
+
+:host([color=warning-20]:not([no-background])) .outer-container {
+  color: var(--warning, #ed6e33);
+  background-color: var(--warning-20, rgba(237, 110, 51, 0.2));
+}
+:host([color=warning-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)) {
+  fill: var(--warning, #ed6e33);
+}
+:host([color=warning-20]:not([no-background])) .outer-container yoo-icon:not(.custom) {
+  fill: var(--warning, #ed6e33);
+}
+
 :host {
   --padding: var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);
   --background-color: unset;
@@ -733,6 +755,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--danger, #d44333);
 }
 
+:host([color=warning][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)), :host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)) {
+  fill: var(--warning, #ed6e33);
+}
+:host([color=warning][no-background]) .outer-container, :host([no-background]) .outer-container {
+  color: var(--warning, #ed6e33);
+  background-color: transparent;
+}
+:host([color=warning][no-background]) .outer-container yoo-icon:not(.custom), :host([no-background]) .outer-container yoo-icon:not(.custom) {
+  fill: var(--warning, #ed6e33);
+}
+
 :host([color=dark][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)), :host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)) {
   fill: var(--dark, #000000);
 }
@@ -885,4 +918,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([color=info].inverse-color).solid yoo-icon {
   fill: info;
+}
+
+:host([color=warning].inverse-color) .outer-container {
+  color: var(--warning, #ed6e33);
+  background: var(--warning-20, rgba(237, 110, 51, 0.2));
+}
+:host([color=warning].inverse-color) .outer-container yoo-icon {
+  fill: var(--warning, #ed6e33) !important;
+}
+:host([color=warning].inverse-color).solid yoo-icon {
+  fill: warning;
 }

package/dist/collection/components/1.atoms/truncate/truncate.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */

package/dist/collection/components/2.molecules/action-sheet-controller/action-sheet-controller.js

@@ -1,5 +1,5 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
+import { createOverlay, dismissOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
 export class YooIonActionSheetControllerComponent {
   constructor() {
     this.actionSheets = new Map();
@@ -63,13 +63,6 @@ export class YooIonActionSheetControllerComponent {
   async dismiss(data, role, actionSheetId = -1) {
     return dismissOverlay(data, role, this.actionSheets, actionSheetId, 'YOO-ACTION-SHEET');
   }
-  /**
-   * Gets the most recently opened action sheet overlay.
-   * @type method
-   */
-  async getTop() {
-    return getTopOverlay(this.actionSheets);
-  }
   static get is() { return "yoo-action-sheet-controller"; }
   static get methods() { return {
     "closeLastOpened": {
@@ -172,28 +165,6 @@ export class YooIonActionSheetControllerComponent {
             "text": "method"
           }]
       }
-    },
-    "getTop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLYooActionSheetElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLYooActionSheetElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLYooActionSheetElement>"
-      },
-      "docs": {
-        "text": "Gets the most recently opened action sheet overlay.",
-        "tags": [{
-            "name": "type",
-            "text": "method"
-          }]
-      }
     }
   }; }
   static get listeners() { return [{

package/dist/collection/components/2.molecules/alert-controller/alert-controller.js

@@ -1,5 +1,5 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
+import { createOverlay, dismissOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
 export class YooIonAlertControllerComponent {
   constructor() {
     this.alerts = new Map();
@@ -53,12 +53,6 @@ export class YooIonAlertControllerComponent {
   async dismiss(data, role, alertId = -1) {
     return dismissOverlay(data, role, this.alerts, alertId, 'YOO-ALERT');
   }
-  /**
-   * Get the most recently opened alert overlay.
-   */
-  async getTop() {
-    return getTopOverlay(this.alerts);
-  }
   static get is() { return "yoo-ion-alert-controller"; }
   static get methods() { return {
     "closeLastOpened": {
@@ -149,25 +143,6 @@ export class YooIonAlertControllerComponent {
         "text": "Dismiss the open alert overlay.",
         "tags": []
       }
-    },
-    "getTop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLYooAlertElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLYooAlertElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLYooAlertElement>"
-      },
-      "docs": {
-        "text": "Get the most recently opened alert overlay.",
-        "tags": []
-      }
     }
   }; }
   static get listeners() { return [{

package/dist/collection/components/2.molecules/modal/modal.js

@@ -570,7 +570,7 @@ export class YooIonModalComponent {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Compoentn will wait for content to loaded before showing the modal"
+        "text": "Component will wait for content to loaded before showing the modal"
       },
       "attribute": "wait-for-content-loaded",
       "reflect": false

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -1,5 +1,5 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
+import { createOverlay, dismissOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
 export class YooIonModalControllerComponent {
   constructor() {
     this.modals = new Map();
@@ -61,12 +61,6 @@ export class YooIonModalControllerComponent {
   async dismiss(data, role, modalId = -1) {
     return dismissOverlay(data, role, this.modals, modalId, 'YOO-ION-MODAL');
   }
-  /**
-   * Get the most recently opened modal overlay.
-   */
-  async getTop() {
-    return getTopOverlay(this.modals);
-  }
   /**
    * Update order of modal.
    */
@@ -166,25 +160,6 @@ export class YooIonModalControllerComponent {
         "tags": []
       }
     },
-    "getTop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLYooModalElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLYooModalElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLYooModalElement>"
-      },
-      "docs": {
-        "text": "Get the most recently opened modal overlay.",
-        "tags": []
-      }
-    },
     "updateOverlayId": {
       "complexType": {
         "signature": "(overlayId: number, prevId: number) => Promise<void>",

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

@@ -222,18 +222,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host #view-finder .sequence {
   display: grid;
+  max-width: 75%;
   height: var(--max-sequence-height);
+  margin: 0 auto;
   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;
+  transition: all 0.2s ease-in-out;
 }
 :host #view-finder .sequence:not(.overflowing) {
   place-content: center;
 }
+:host #view-finder .sequence img {
+  display: block;
+}
 :host #view-finder .sequence * {
   box-sizing: border-box;
   max-width: 100%;
@@ -260,11 +265,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .overlay[placement=top] {
   top: 0;
-  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 35%);
+  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 50%);
 }
 :host .overlay[placement=bottom] {
   bottom: 0;
-  background: linear-gradient(0deg, var(--light, #ffffff) 35%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%);
+  background: linear-gradient(0deg, var(--light, #ffffff) 50%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%);
 }
 :host yoo-button {
   position: absolute;
@@ -275,21 +280,44 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: opacity 0.35s ease-in-out;
 }
 :host yoo-button[placement=top] {
-  top: var(--spacing-16, 1rem);
+  top: 0;
 }
 :host yoo-button[placement=bottom] {
   bottom: var(--spacing-16, 1rem);
 }
 :host yoo-button[hidden] {
-  opacity: 0;
+  opacity: var(--spacing-16, 1rem);
 }
 :host yoo-button yoo-icon {
   fill: var(--app-color, #5a30f4);
 }
 
-:host([animated]) yoo-button,
-:host([animated]) #sequences,
+@keyframes scale-up {
+  from {
+    transform: translateX(-50%) scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) scale(1);
+    opacity: 1;
+  }
+}
+:host([animated]) #sequences {
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+:host([animated]) #sequences[hidden] {
+  opacity: 0;
+}
+:host([animated]) yoo-button {
+  transform: translateX(-50%) scale(0);
+  opacity: 0;
+  transition: transform 1s ease-in-out, opacity 0.25s ease-in-out;
+  animation-name: scale-up;
+  animation-duration: 0.25s;
+  animation-delay: 0.75s;
+  animation-fill-mode: forwards;
+}
 :host([animated]) .sequence,
 :host([animated]) .overlay {
-  transition: transform 300ms;
+  transition: transform 0.25s;
 }

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

@@ -1,7 +1,7 @@
-import { findParent, setSecuredContent, translateMulti } from '@shared/utils';
+import { setSecuredContent, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { clamp, compact } from 'lodash-es';
-import { getAppContext, openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
+import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooTextSequence {
   constructor() {
     this.animated = true;
@@ -17,13 +17,13 @@ export class YooTextSequence {
     this.validityChanged.emit(this.validity);
   }
   onIsVisibleChanged() {
-    this.isVisible && this.initSequenceHeight();
+    this.isVisible && this.initSequencesHeight();
   }
   onModalAnimationFinished() {
-    this.isAnimationFinished && this.initSequenceHeight();
+    this.isAnimationFinished && this.initSequencesHeight();
   }
-  get wrapperElement() {
-    return findParent(this.host, 'yoo-ion-scroll') || this.host;
+  onRevealSequencesChanged() {
+    this.initSequencesHeight();
   }
   get sequenceElements() {
     var _a, _b;
@@ -37,18 +37,18 @@ export class YooTextSequence {
     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');
+  componentWillLoad() {
+    this.revealSequences = !this.animated;
   }
   componentDidLoad() {
-    this.initSequenceHeight();
+    this.initSequencesHeight();
   }
-  componentDidRender() {
-    this.initSequenceHeight();
+  componentDidUpdate() {
+    this.initSequencesHeight();
   }
-  initSequenceHeight() {
+  initSequencesHeight() {
     var _a;
-    if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
+    if (this.revealSequences && ((_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;
@@ -57,7 +57,7 @@ export class YooTextSequence {
   renderSequences() {
     var _a;
     return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
-      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, onTransitionEnd: () => this.initSequenceHeight(), style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+      h("div", { hidden: !this.revealSequences, 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.host, this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
       })));
   }
@@ -75,7 +75,7 @@ export class YooTextSequence {
         this.validity = this.currentIndex === this.sequenceElements.length - 1;
       }
     };
-    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() },
+    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), ...(!isUp && this.animated && { onanimationend: () => this.revealSequences = true }), onClick: () => clickArrow() },
       h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
   renderOverlay(placement) {
@@ -85,7 +85,7 @@ export class YooTextSequence {
     return [this.renderArrow(placement), this.renderOverlay(placement)];
   }
   render() {
-    return h(Host, { class: { ...getAppContext(this.host) } },
+    return h(Host, null,
       this.renderPart('top'),
       this.renderSequences(),
       this.renderPart('bottom'));
@@ -99,6 +99,24 @@ export class YooTextSequence {
     "$": ["text-sequence.css"]
   }; }
   static get properties() { return {
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
+    },
     "heading": {
       "type": "string",
       "mutable": false,
@@ -131,24 +149,6 @@ export class YooTextSequence {
         "text": ""
       }
     },
-    "animated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
-    },
     "validity": {
       "type": "boolean",
       "mutable": true,
@@ -203,7 +203,8 @@ export class YooTextSequence {
     }
   }; }
   static get states() { return {
-    "currentIndex": {}
+    "currentIndex": {},
+    "revealSequences": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",
@@ -234,5 +235,8 @@ export class YooTextSequence {
     }, {
       "propName": "isAnimationFinished",
       "methodName": "onModalAnimationFinished"
+    }, {
+      "propName": "revealSequences",
+      "methodName": "onRevealSequencesChanged"
     }]; }
 }

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -1,5 +1,5 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
+import { createOverlay, dismissOverlay, removeLastOverlay } from '../../../utils/ionic/overlays';
 export class YooIonToastControllerComponent {
   constructor() {
     this.toasts = new Map();
@@ -53,12 +53,6 @@ export class YooIonToastControllerComponent {
   async dismiss(data, role, toastId = -1) {
     return dismissOverlay(data, role, this.toasts, toastId, 'YOO-TOAST');
   }
-  /**
-   * Get the most recently opened toast overlay.
-   */
-  async getTop() {
-    return getTopOverlay(this.toasts);
-  }
   static get is() { return "yoo-ion-toast-controller"; }
   static get methods() { return {
     "closeLastOpened": {
@@ -149,25 +143,6 @@ export class YooIonToastControllerComponent {
         "text": "Dismiss the open toast overlay.",
         "tags": []
       }
-    },
-    "getTop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLYooToastElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLYooToastElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLYooToastElement>"
-      },
-      "docs": {
-        "text": "Get the most recently opened toast overlay.",
-        "tags": []
-      }
     }
   }; }
   static get listeners() { return [{

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

@@ -15,7 +15,7 @@
  * https://zpl.io/25yLEEj
  */
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
+import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { capitalize, cloneDeep, isEqual, isFunction } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
@@ -334,16 +334,10 @@ export class YooPhotoEditorComponent {
     };
   }
   get maxViewport() {
-    const getMaxBound = (boundType) => {
-      var _a, _b;
-      return this.host[`client${boundType}`] ||
-        ((_a = this.wrapperElement) === null || _a === void 0 ? void 0 : _a[`client${boundType}`]) ||
-        (!this.isPreview ? (_b = this.host.closest('.modal-wrapper')) === null || _b === void 0 ? void 0 : _b[`client${boundType}`] : 0) ||
-        window[`inner${boundType}`];
-    };
+    const { width, height } = getMaxViewPortImage(this.host, this.isPreview);
     return {
-      width: getMaxBound('Width'),
-      height: getMaxBound('Height') - (!this.isPreview && this.navbarVisiblity !== 'disabled' ? 112 : 0)
+      width,
+      height: height - (!this.isPreview && this.navbarVisiblity !== 'disabled' ? 112 : 0)
     };
   }
   get maxImageSize() {

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

@@ -1,5 +1,5 @@
 import { FeedPostType, FormFieldType } from '@shared/interfaces';
-import { canAccessReadReceipt, changeExtension, changeHexOpacity, compareAsc, dateFormat, fileHasIcon, fromNow, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCssColor, getCurrentLanguage, getDashboardTags, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcFromFeed, getPlanDueDate, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, isCampaignActive, isCampaignAnnouncement, isCampaignAnnouncementByUser, isImage, isMedia, isPhotoEdited, isPlanInFuture, isPresent, isSameDate, isVideo, isWeb, mapKpiData, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showModal, toButton, translate, translateMulti } from '@shared/utils';
+import { canAccessReadReceipt, changeExtension, changeHexOpacity, compareAsc, dateFormat, fileHasIcon, fromNow, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCssColor, getCurrentLanguage, getDashboardTags, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcFromFeed, getPlanDueDate, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, isCampaignActive, isCampaignAnnouncementByUser, isCampaignFeed, isCampaignTodo, isImage, isMedia, isPhotoEdited, isPlanInFuture, isPresent, isSameDate, isVideo, isWeb, mapKpiData, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showModal, toButton, translate, translateMulti } from '@shared/utils';
 import { dispatchCustomEvent, getAsyncExtraData, getMediaSrcAndType, getMobileFieldIcon, groupsResolver, isCloudinaryLink, parseMarkDown } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop } from '@stencil/core';
 import { compact, get, isArray, isFunction, isNil, isNumber, isString, keys, partition, size } from 'lodash-es';
@@ -873,14 +873,15 @@ export class YooEntityComponent {
     }
     else if (this.entityType === 'missiondescriptions') {
       const campaign = this.item;
-      const isAnnouncement = isCampaignAnnouncement(campaign);
+      const isAnnouncement = isCampaignTodo(campaign);
+      const isFeed = isCampaignFeed(campaign);
       const tagElements = getCampaignStateTags(campaign, this.isAutocompleteSelected() || this.isGridCell);
       const processIcon = ((_q = campaign.processIcon) === null || _q === void 0 ? void 0 : _q.substring(0, 3)) === 'yo-' ? campaign.processIcon.substring(3, campaign.processIcon.length) : campaign === null || campaign === void 0 ? void 0 : campaign.processIcon;
-      const campaignIcon = isAnnouncement ? 'mission' : campaign.hasWorkflow ? 'workflow' : campaign.type === 'kanban' ? null : processIcon ? processIcon : campaign.icon ? null : campaign.background ? null : 'action-plan';
+      const campaignIcon = isFeed ? 'request' : isAnnouncement ? 'mission' : campaign.hasWorkflow ? 'workflow' : campaign.type === 'kanban' ? null : processIcon ? processIcon : campaign.icon ? null : campaign.background ? null : 'action-plan';
       if (processIcon && campaign.type === 'service') {
         delete campaign.background;
       }
-      const iconColor = isAnnouncement ? (((_r = campaign.category) === null || _r === void 0 ? void 0 : _r.color) || 'success') : (campaign.color || (campaign.hasWorkflow ? 'accent' : 'app-color'));
+      const iconColor = isFeed ? 'warning' : isAnnouncement ? (((_r = campaign.category) === null || _r === void 0 ? void 0 : _r.color) || 'success') : (campaign.color || (campaign.hasWorkflow ? 'accent' : 'app-color'));
       entry = {
         heading: translateMulti(campaign.title),
         subheadings: (isWeb(this.host) && campaign.type !== 'kanban') || this.isAutocompleteSelected() ? null : [translateMulti(campaign.text)],
@@ -2546,13 +2547,13 @@ export class YooEntityComponent {
     var _a, _b;
     if (this.entityType === 'missiondescriptions') {
       const campaign = this.item;
+      const isFeed = isCampaignFeed(campaign);
       const isAnnouncementByUser = isCampaignAnnouncementByUser(campaign);
       // when the campaign-card is displayed into a grid (like into the page of the campaigns), we use this property to align all displayed KPIs on the right
       const keepUndefinedValues = this.extraClass === 'grid-card-campaign';
       const { campaignStats, category, title: heading } = campaign;
-      const { completionRate: completion, complianceRate: compliance, finishedMissionsCount: completed, storesCount: locations, usersCount: users } = campaignStats || {};
       const { color: categoryColor, title: categoryTitle } = category || {};
-      return (h("yoo-card-campaign", { active: isCampaignActive(campaign), category: translate(categoryTitle), categoryColor: categoryColor, completed: completed, completion: completion, compliance: (campaign.skipValidation || campaign.withoutValidation) ? null : compliance, heading: translateMulti(heading), locations: campaign.skipLocation || isAnnouncementByUser ? null : locations, users: isAnnouncementByUser ? users : null, keepUndefinedValues: keepUndefinedValues }));
+      return (h("yoo-card-campaign", { active: isCampaignActive(campaign), heading: translateMulti(heading), keepUndefinedValues: keepUndefinedValues, category: isFeed ? null : translate(categoryTitle), categoryColor: isFeed ? null : categoryColor, completed: isFeed ? null : campaignStats.finishedMissionsCount, completion: isFeed ? null : campaignStats.completionRate, compliance: (isFeed || campaign.skipValidation || campaign.withoutValidation) ? null : campaignStats.complianceRate, locations: campaign.skipLocation || isAnnouncementByUser || isFeed ? null : campaignStats.storesCount, users: isFeed || !isAnnouncementByUser ? null : campaignStats.usersCount, isFeed: isFeed, views: isFeed ? campaignStats.viewsCount : null, likes: isFeed ? campaignStats.likesCount : null, comments: isFeed ? campaignStats.commentsCount : null, reposts: isFeed ? campaignStats.repostsCount : null, audienceShare: isFeed ? campaignStats.audienceShare : null }));
     }
     else if (this.entityType === 'feeds') {
       return (h("yoo-card-campaign", { class: (_a = this.extraClass) !== null && _a !== void 0 ? _a : '', createHandler: this.item.createHandler, available: this.item.availableCount, heading: this.item.heading, isEmpty: this.item.isEmpty, isService: this.item.isService }));

package/dist/collection/components/form/form-categorize-words/form-categorize-words.css

@@ -220,7 +220,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   width: 100%;
   margin: 0 auto;
-  padding: var(--spacing-16, 1rem);
 }
 :host [placement] #counter {
   padding-left: var(--spacing-04, 0.25rem);
@@ -263,6 +262,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(:not([readonly])) [placement] {
   min-height: calc(var(--spacing-32, 2rem) * 5);
+  padding: var(--spacing-16, 1rem);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
@@ -285,10 +285,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--app-color-60, rgba(90, 48, 244, 0.6));
 }
 
-:host([readonly]) .drop-container:last-of-type {
+:host([readonly]) main {
+  display: grid;
+  grid-gap: var(--spacing-08, 0.5rem);
+}
+:host([readonly]) main [placement] {
+  padding: 0;
+}
+:host([readonly]) main .drop-container:last-of-type {
   margin-top: var(--spacing-16, 1rem);
 }
-:host([readonly]) #title {
+:host([readonly]) main #title {
   margin-bottom: var(--spacing-08, 0.5rem);
 }