@yoobic/yobi 8.1.0-13 → 8.1.0-17

package/dist/collection/components/app/login/login.js

@@ -320,7 +320,7 @@ export class YooLoginComponent {
         h("div", { class: { footer: true, android: isAndroid() } }, this.renderFooter()))));
   }
   renderErrorBanner() {
-    return (h("yoo-banner", { id: "error-alert", animationName: "sticky_up", class: { 'top danger embedded centered header': true, android: isAndroid() }, text: this.error, closeable: !isIonic(this.host), link: !isIonic(this.host) ? 'NEEDHELP' : '', onAlertActionSelected: () => this.onAlertActionSelected(), onAlertClosed: () => this.onAlertClosed() }));
+    return (h("yoo-banner", { id: "error-alert", animationName: "sticky_up", class: { 'top danger embedded centered header': true, android: isAndroid() }, text: this.error, closable: !isIonic(this.host), link: !isIonic(this.host) ? 'NEEDHELP' : '', onAlertActionSelected: () => this.onAlertActionSelected(), onAlertClosed: () => this.onAlertClosed() }));
   }
   renderRightPanel() {
     let backStyle;

package/dist/collection/components/app-boost/lesson-detail/lesson-detail.css

@@ -894,7 +894,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .lesson-detail .heading-container yoo-form-dynamic {
   display: block;
-  margin-top: var(--spacing-24, 1.5rem);
 }
 
 :host(.mobile) hr {

package/dist/collection/components/app-boost/lesson-question-result/lesson-question-result.css

@@ -827,10 +827,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 12.5rem;
 }
 :host .answers {
-  width: 90%;
+  width: 100%;
   padding-bottom: var(--spacing-16, 1rem);
 }
 :host .answers .title {
-  padding: var(--spacing-08, 0.5rem) 0;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   font-size: var(--font-size-24, 1.5rem);
 }

package/dist/collection/components/app-operations/healthscore/healthscore.css

@@ -910,9 +910,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: min-content;
   margin: var(--spacing-16, 1rem) auto var(--spacing-32, 2rem);
 }
-:host([display-mode=large]) .cards-progress {
-  margin: 0 var(--spacing-16, 1rem);
-}
 :host([display-mode=large]) .cards-progress yoo-card-progress {
   margin: var(--spacing-16, 1rem) var(--spacing-04, 0.25rem);
 }

package/dist/collection/components/app-operations/mission-details/mission-details.css

@@ -875,7 +875,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .menu .menu-item .menu-right .mission-user .user {
   display: flex;
-  flex-wrap: wrap;
   grid-gap: var(--spacing-04, 0.25rem);
   align-items: flex-start;
   width: 100%;
@@ -894,11 +893,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: none;
 }
 :host .menu.pdf {
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  padding-bottom: 0;
-  padding-left: 0;
+  margin: 0;
+  padding: 0;
 }
 :host .menu.pdf .menu-item:not(:last-child) .menu-content {
   margin-bottom: var(--spacing-08, 0.5rem);
@@ -1043,7 +1039,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
 }
 :host(.mission-results-deprecated) .mission-results .content .menu {
-  margin-bottom: var(--spacing-24, 1.5rem);
+  margin-bottom: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-16, 1rem);
+  background: var(--light, #ffffff);
+  border-radius: var(--spacing-08, 0.5rem);
+}
+:host(.mission-results-deprecated) .mission-results .content .menu:not(.pdf) {
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }
 :host(.mission-results-deprecated) .mission-results.web .content .menu {
   margin: var(--spacing-16, 1rem) 0 var(--spacing-08, 0.5rem) 0;

package/dist/collection/components/app-operations/mission-details/mission-details.js

@@ -1,4 +1,4 @@
-import { dateFormat, fromToday, getAsyncExtraData, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isDateSame, isIonic, isOffline, isPresent, isToday, isWeb, pipes, translate, translateMulti } from '@shared/utils';
+import { dateFormat, fromToday, getAsyncExtraData, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isDateSame, isIonic, isPresent, isToday, isWeb, pipes, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { getMissionAddress, getMissionDueDate, getMissionPriority, getMissionTags, mapMissionToCardInboxEntry } from '../../../utils/helpers/missions-helpers';
@@ -40,7 +40,14 @@ export class YooMissionDetailsComponent {
     var _a;
     if (((_a = this.mission) === null || _a === void 0 ? void 0 : _a.type) === 'todo' && this.mission.originalMissionId) {
       return getAsyncExtraData({ type: 'entity-detail', params: { collectionName: 'missions', id: this.mission.originalMissionId } })
-        .then((mission) => (this.originalMission = mission))
+        .then((mission) => {
+        if (mission._id === this.mission.originalMissionId) {
+          this.originalMission = mission;
+        }
+        else {
+          this.originalMission = null;
+        }
+      })
         .catch(() => (this.originalMission = null));
     }
     this.originalMission = null;
@@ -61,6 +68,10 @@ export class YooMissionDetailsComponent {
     ev.stopPropagation();
     this.preview.emit();
   }
+  onAssign(ev) {
+    ev.stopPropagation();
+    this.assign.emit();
+  }
   renderExtraActions(user) {
     var _a;
     if (((_a = this.extraActions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -78,7 +89,7 @@ export class YooMissionDetailsComponent {
     var _a, _b, _c;
     if (((_b = (_a = this.mission.todo) === null || _a === void 0 ? void 0 : _a.field) === null || _b === void 0 ? void 0 : _b.name) && ((_c = this.mission.todo) === null || _c === void 0 ? void 0 : _c.fieldValue)) {
       return (h(Menu, { icon: "link", text: translate('LINKEDTO') },
-        h("yoo-form-dynamic", { class: "inline", slides: [{ title: 'GENERAL', items: [this.mission.todo.field] }], data: { [this.mission.todo.field.name]: { value: this.mission.todo.fieldValue, ...this.mission.todo.fieldExtra } }, forceReadonly: true, suffix: ".value", animated: false, showRecap: false })));
+        h("yoo-form-dynamic", { class: "inline", slides: [{ title: 'GENERAL', items: [this.mission.todo.field] }], data: { [this.mission.todo.field.name]: { value: this.mission.todo.fieldValue, ...this.mission.todo.fieldExtra } }, forceReadonly: true, suffix: ".value", animated: false, showRecap: false, onDataChanged: (ev) => ev.stopPropagation() })));
     }
   }
   renderGeoFence() {
@@ -236,6 +247,18 @@ export class YooMissionDetailsComponent {
         this.mission.validatedByUser && this.renderExtraActions(this.mission.validatedByUser)));
     }
   }
+  renderOriginalValidatedBy() {
+    if (this.mission.status !== 'finished' && !this.mission.skipValidation && this.mission.originalValidatedBy) {
+      const icon = 'validator';
+      const text = 'REPUBLISHBY';
+      return (h(Menu, { icon: icon, text: translate(text), extraClass: "mission-user", callback: () => this.selectValidator.emit() },
+        h("div", { class: "user" },
+          this.mission.originalValidatedByUser && h("yoo-avatar", { instant: this.instant, size: "small", user: this.mission.originalValidatedByUser }),
+          h("div", { class: "label dark" },
+            h("span", null, this.mission.originalValidatedByUser ? `${this.mission.originalValidatedByUser.firstName} ${this.mission.originalValidatedByUser.lastName}` : this.mission.originalValidatedBy))),
+        this.mission.originalValidatedByUser && this.renderExtraActions(this.mission.originalValidatedByUser)));
+    }
+  }
   renderValidatedReason(title, icon, comment) {
     if (this.showInformation && comment) {
       return (h(Menu, { icon: icon, text: translate(title) },
@@ -335,40 +358,59 @@ export class YooMissionDetailsComponent {
         h("yoo-card-inbox", { entry: entry })));
     }
   }
-  renderButtonFooter() {
-    let buttons;
-    if (this.isBookable || this.canParticipate) {
-      if (!this.mission.status && this.isBookable) {
-        buttons = [
-          { text: translate('PREVIEW'), size: isWeb(this.host) ? 'medium' : 'large', color: 'light', handler: (ev) => this.onPreview(ev) },
-          { text: translate('START'), size: isWeb(this.host) ? 'medium' : 'large', color: 'app-color', handler: (ev) => this.onBook('start', ev) }
-        ];
+  renderFooter() {
+    var _a, _b;
+    const buttons = [];
+    const size = (isWeb(this.host) ? 'medium' : 'large');
+    const buttonsConfig = {
+      assign: {
+        text: translate(this.mission.ownerRef ? 'REASSIGN' : 'ASSIGN'),
+        size,
+        handler: (ev) => this.onAssign(ev)
+      },
+      continue: {
+        text: translate('CONTINUE'),
+        size,
+        cssClass: 'continue',
+        handler: (ev) => this.onBook('continue', ev)
+      },
+      preview: {
+        text: translate('PREVIEW'),
+        size,
+        handler: (ev) => this.onPreview(ev)
+      },
+      start: {
+        text: translate('START'),
+        size,
+        handler: (ev) => this.onBook('start', ev)
+      },
+      unbook: {
+        text: translate('UNBOOK'),
+        size,
+        color: 'light',
+        cssClass: 'unbook',
+        handler: (ev) => this.onBook('unbook', ev)
       }
-      else {
-        buttons =
-          isOffline() || !this.isBookable
-            ? []
-            : [{ text: translate('UNBOOK'), size: isWeb(this.host) ? 'medium' : 'large', cssClass: 'unbook', color: 'light', handler: (ev) => this.onBook('unbook', ev) }];
-        buttons = [
-          ...buttons,
-          { text: translate('CONTINUE'), size: isWeb(this.host) ? 'medium' : 'large', cssClass: 'continue', color: 'app-color', handler: (ev) => this.onBook('continue', ev) }
-        ];
+    };
+    const lastIndex = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) - 1;
+    (_b = this.actions) === null || _b === void 0 ? void 0 : _b.forEach((item, index) => {
+      const config = buttonsConfig[item];
+      if (config) {
+        buttons.push({
+          ...buttonsConfig[item],
+          color: (index === lastIndex) ? 'app-color' : 'light'
+        });
       }
-    }
-    else {
-      buttons = [{ text: translate('PREVIEW'), size: isWeb(this.host) ? 'medium' : 'large', color: 'app-color', handler: (ev) => this.onPreview(ev) }];
-    }
-    if (buttons.length > 0) {
-      return h("yoo-form-footer", { buttons: buttons });
-    }
-    return null;
+    });
+    return !!buttons.length && h("yoo-form-footer", { buttons: buttons });
   }
   renderActionPlanDetails() {
     return (h("div", { class: 'mission-detail ' + (this.isMobile ? '' : 'web') },
       h("div", { class: "mission-content" },
         h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value && this.progress.value }),
         h("ul", { class: { menu: true, pdf: this.isPdf } },
-          this.renderValidatedReason('COMMENTS', 'comment', this.mission.originalUnvalidatedReason),
+          this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
+          this.renderOriginalValidatedBy(),
           this.renderLinkedTo(),
           this.renderPriority(),
           this.renderCategory(),
@@ -396,7 +438,8 @@ export class YooMissionDetailsComponent {
           h("div", { class: "mission-content" },
             h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value ? this.progress.value : null }),
             h("ul", { class: { menu: true, pdf: this.isPdf } },
-              this.renderValidatedReason('COMMENTS', 'comment', this.mission.originalUnvalidatedReason),
+              this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
+              this.renderOriginalValidatedBy(),
               this.renderGeoFence(),
               this.renderPriority(),
               this.renderCategory(),
@@ -421,7 +464,7 @@ export class YooMissionDetailsComponent {
             h("slot", null)),
           h("slot", { name: "end" }),
           h("div", { class: "scroll-spacer" }))),
-      this.renderButtonFooter()));
+      this.renderFooter()));
   }
   renderTodos() {
     var _a, _b;
@@ -448,10 +491,8 @@ export class YooMissionDetailsComponent {
   }
   renderResults() {
     var _a, _b, _c, _d;
-    const session = getSession();
     const excludedTabs = ['dueDate', 'category'];
-    const tags = getMissionTags(this.mission, session).filter((tag) => !excludedTabs.includes(tag._id));
-    const reasonSectionTitle = this.mission.validated ? 'COMMENTNOUN' : 'REASON';
+    const tags = getMissionTags(this.mission).filter((tag) => !excludedTabs.includes(tag._id));
     return (h("div", { class: { 'mission-results': true, pdf: this.isPdf, ...getAppContext(this.host) } },
       this.isPdf && (h("div", { class: "header-photo-container" },
         ((_b = (_a = this.mission) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.pdfHeaderPhoto) && h("yoo-img", { class: "header-photo", instant: this.instant, src: this.mission.description.pdfHeaderPhoto }),
@@ -462,12 +503,12 @@ export class YooMissionDetailsComponent {
       h("div", { class: "content" },
         !this.isPdf && this.showInformation && h("yoo-mission-heading", { isPdf: this.isPdf, mission: this.mission }),
         h("ul", { class: { menu: true, pdf: this.isPdf } },
+          this.renderValidatedReason(this.mission.validated === false ? 'REASON' : 'COMMENTNOUN', 'reason', this.mission.unvalidatedReason),
           this.renderPriority(),
           this.renderCategory(),
           this.renderDueDate(),
           this.renderFinishedBy(),
           this.renderValidatedBy(),
-          this.renderValidatedReason(reasonSectionTitle, 'reason', this.mission.unvalidatedReason),
           this.renderLocation(),
           this.renderAisle(),
           this.renderOriginalMission(),
@@ -477,7 +518,7 @@ export class YooMissionDetailsComponent {
           this.renderAudit(),
           this.renderTodos()),
         h("slot", null),
-        this.showScore && h("yoo-mission-score", { isPdf: this.isPdf, charts: this.charts, networkScore: this.networkScore }))));
+        this.showScore && h("yoo-mission-score", { class: "mission-detail", isPdf: this.isPdf, charts: this.charts, networkScore: this.networkScore }))));
   }
   render() {
     return (h(Host, { class: { 'mission-results-deprecated': this.isResult, 'mission-detail-deprecated': !this.isResult } },
@@ -821,59 +862,45 @@ export class YooMissionDetailsComponent {
       "attribute": "is-pdf",
       "reflect": false
     },
-    "extraActions": {
+    "actions": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "IEntityAction[]",
-        "resolved": "IEntityAction[]",
+        "original": "TMissionActionIds[]",
+        "resolved": "TMissionActionIds[]",
         "references": {
-          "IEntityAction": {
+          "TMissionActionIds": {
             "location": "import",
             "path": "@shared/interfaces"
           }
         }
       },
       "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "isBookable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "is-bookable",
-      "reflect": false
+      }
     },
-    "canParticipate": {
-      "type": "boolean",
+    "extraActions": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "IEntityAction[]",
+        "resolved": "IEntityAction[]",
+        "references": {
+          "IEntityAction": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "can-participate",
-      "reflect": false
+      }
     },
     "animated": {
       "type": "boolean",
@@ -945,6 +972,21 @@ export class YooMissionDetailsComponent {
         "resolved": "void",
         "references": {}
       }
+    }, {
+      "method": "assign",
+      "name": "assign",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "showUser",
       "name": "showUser",

package/dist/collection/components/app-operations/mission-heading/mission-heading.js

@@ -1,4 +1,4 @@
-import { canParticipate, canPerfomActionPlan, getAuthentication, getSession, isIonic, isMissionBookable, translate, translateMulti } from '@shared/utils';
+import { canParticipateTo, canPerformActionPlan, isIonic, isMissionBookable, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { getMissionTags } from '../../../utils/helpers/missions-helpers';
@@ -10,19 +10,16 @@ export class YooMissionHeadingComponent {
     this.isMobile = isIonic(this.host);
   }
   renderLock() {
-    const authentication = getAuthentication();
-    const session = getSession();
     const isActionPlan = this.mission.type === 'todo';
-    const isMissionLocked = !isActionPlan && !isMissionBookable(this.mission, authentication, session) && !canParticipate(this.mission, session);
-    const isActionPlanLocked = isActionPlan && !canPerfomActionPlan(this.mission, session) && !canParticipate(this.mission, session);
+    const isMissionLocked = !isActionPlan && !isMissionBookable(this.mission) && !canParticipateTo(this.mission);
+    const isActionPlanLocked = isActionPlan && !canPerformActionPlan(this.mission) && !canParticipateTo(this.mission);
     if ((!this.mission.status || this.mission.status === 'booked') && (isMissionLocked || isActionPlanLocked)) {
-      return h("yoo-banner", { mode: "card", class: "mission-locked", leftIcon: "lock", leftIconColor: "warning", heading: translate('MISSIONLOCKEDBANNER') });
+      return h("yoo-banner", { mode: "card", class: "warning-banner mission-locked", leftIcon: "lock", leftIconColor: "warning", heading: translate('MISSIONLOCKEDBANNER') });
     }
   }
   render() {
-    const session = getSession();
     const excludedTabs = ['dueDate', 'category'];
-    const tags = getMissionTags(this.mission, session).filter((tag) => !excludedTabs.includes(tag._id));
+    const tags = getMissionTags(this.mission).filter((tag) => !excludedTabs.includes(tag._id));
     return (h(Host, { class: getAppContext(this.host) },
       h("div", { class: { 'background-container': true, pdf: this.isPdf } },
         h("div", { class: "content-container" },

package/dist/collection/components/app-operations/mission-score/mission-score.css

@@ -730,4 +730,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   grid-template-columns: max-content 160px;
   align-items: flex-end;
   margin-bottom: var(--spacing-16, 1rem);
+}
+
+:host(.mission-detail) .mission-score-title {
+  margin: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+:host(.mission-detail) yoo-healthscore {
+  max-width: 100%;
+  margin: 0;
+  margin-bottom: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
+  background: var(--light, #ffffff);
+  border-radius: var(--spacing-08, 0.5rem);
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }

package/dist/collection/components/core/banner/banner.css

@@ -1008,33 +1008,45 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.update-banner) .outer-container,
-:host(.mission-locked) .outer-container {
+:host(.warning-banner) .outer-container {
   background-color: var(--energized-10, rgba(255, 192, 67, 0.1));
   box-shadow: none;
 }
 :host(.update-banner) .outer-container .content-container .body-container,
-:host(.mission-locked) .outer-container .content-container .body-container {
+:host(.warning-banner) .outer-container .content-container .body-container {
   padding-left: var(--spacing-08, 0.5rem);
 }
 :host(.update-banner) .outer-container .content-container .body-container .subtext-container,
-:host(.mission-locked) .outer-container .content-container .body-container .subtext-container {
+:host(.warning-banner) .outer-container .content-container .body-container .subtext-container {
   padding-bottom: 0;
   color: var(--stable, #adadad);
 }
 :host(.update-banner) .outer-container .content-container .button-container,
-:host(.mission-locked) .outer-container .content-container .button-container {
+:host(.warning-banner) .outer-container .content-container .button-container {
   display: flex;
 }
 :host(.update-banner) .outer-container .content-container.columns,
-:host(.mission-locked) .outer-container .content-container.columns {
+:host(.warning-banner) .outer-container .content-container.columns {
   justify-content: space-between;
 }
 :host(.update-banner) .outer-container .content-container.columns .button-container,
-:host(.mission-locked) .outer-container .content-container.columns .button-container {
+:host(.warning-banner) .outer-container .content-container.columns .button-container {
   width: auto;
   margin-left: 0;
 }
 
+:host(.field-invalids-banner) .outer-container {
+  align-items: center;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  text-align: left;
+  background-color: var(--warning, #ed6e33);
+}
+:host(.field-invalids-banner) .outer-container .content-container .body-container .text-container {
+  color: var(--light, #ffffff);
+  font-weight: normal;
+  font-size: var(--font-size-12, 0.75rem);
+}
+
 :host(.mission-locked) .outer-container {
   margin: 0px;
   background-color: var(--warning-10, rgba(237, 110, 51, 0.1));

package/dist/collection/components/core/banner/banner.js

@@ -1,9 +1,5 @@
-/**
- * @name: Banner
- * @author: ???
- */
 import { isIphoneX, isWeb, setAnimation, translate } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooBannerComponent {
   constructor() {
@@ -32,10 +28,10 @@ export class YooBannerComponent {
     this.onBannerButtonClicked = () => {
       this.bannerButtonClicked.emit(true);
     };
-    this.onDismissButtonClick = () => {
-      this.alertClosed.emit(true);
-      this.closed = true;
-    };
+  }
+  async close() {
+    this.alertClosed.emit(true);
+    this.closed = true;
   }
   componentDidLoad() {
     if (this.animationName) {
@@ -65,20 +61,20 @@ export class YooBannerComponent {
           }))),
       this.footerBtnText && (h("div", { class: "button-container" },
         h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText)))),
-      h("div", { class: "close-container" }, this.closeable ? (h("span", { class: "close", onClick: this.onDismissButtonClick },
+      h("div", { class: "close-container" }, this.closable ? (h("span", { class: "close", onClick: this.close },
         ' ',
         h("yoo-icon", { color: this.host.classList.contains('form-creator') ? 'stable' : 'light', name: this.host.classList.contains('form-creator') ? 'cross' : 'close' }))) : null)));
   }
   renderCardMode() {
-    const hasHeader = this.icon || this.closeable;
+    const hasHeader = this.icon || this.closable;
     const isUpdateBanner = this.host.classList.contains('update-banner');
     return (!this.closed && (h("div", { class: "outer-container" },
-      h("div", { class: "left-container" }, this.leftIcon && h("yoo-icon", { color: this.leftIconColor || 'app-color', name: this.leftIcon })),
-      h("div", { class: { 'content-container': true, 'columns': isWeb(this.host) && !this.closeable } },
+      h("div", { class: "left-container" }, this.leftIcon && h("yoo-icon", { color: this.leftIconColor || 'app-color', name: this.leftIcon, size: this.leftIconSize })),
+      h("div", { class: { 'content-container': true, 'columns': isWeb(this.host) && !this.closable } },
         hasHeader && h("div", { class: "header-container" },
           this.icon && (h("span", { class: "icon" },
             h("yoo-icon", { color: this.iconColor || 'app-color', name: this.icon }))),
-          this.closeable && (h("div", { class: "cross-container", onClick: this.onDismissButtonClick },
+          this.closable && (h("div", { class: "cross-container", onClick: this.close },
             h("yoo-icon", { name: "cross", color: "stable-alt" })))),
         h("div", { class: "body-container" },
           h("div", { class: "text-container" },
@@ -86,7 +82,9 @@ export class YooBannerComponent {
           h("div", { class: "subtext-container" },
             h("span", { class: "subtext-content" }, translate(this.text, { appName: this.currentApp })))),
         this.footerBtnText && (h("div", { class: "button-container" },
-          h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText.toUpperCase()))))))));
+          h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText.toUpperCase()))))),
+      h("div", { class: "right-container" },
+        h("slot", { name: "right" })))));
   }
   render() {
     return (h(Host, { class: {
@@ -121,7 +119,7 @@ export class YooBannerComponent {
       "attribute": "animation-name",
       "reflect": false
     },
-    "closeable": {
+    "closable": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -135,7 +133,7 @@ export class YooBannerComponent {
         "tags": [],
         "text": "If `true`, a close button will appear on the banner."
       },
-      "attribute": "closeable",
+      "attribute": "closable",
       "reflect": false
     },
     "currentApp": {
@@ -296,6 +294,28 @@ export class YooBannerComponent {
       "attribute": "left-icon-color",
       "reflect": false
     },
+    "leftIconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TIconSize",
+        "resolved": "\"extra-extra-extra-large\" | \"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+        "references": {
+          "TIconSize": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "left-icon-size",
+      "reflect": false
+    },
     "icon": {
       "type": "string",
       "mutable": false,
@@ -443,5 +463,23 @@ export class YooBannerComponent {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/core/toast/toast.css

@@ -1187,7 +1187,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.form-creator.warning) .outer-container {
-  width: 37.5rem;
   background: var(--warning, #ed6e33);
   border: none;
 }
@@ -1204,6 +1203,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-left: var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4));
 }
 
+:host(.form-creator.warning.web) .outer-container {
+  width: 37.5rem;
+}
+
 :host(.form-creator.warning.translate) {
   margin-top: var(--spacing-32, 2rem);
 }
@@ -1264,4 +1267,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.bg-energized) .outer-container .button-container .success, :host(.bg-energized) .outer-container .button-container .app-color {
   color: var(--light, #ffffff);
+}
+
+:host(.bg-warning) .outer-container {
+  background: var(--warning, #ed6e33);
+}
+:host(.bg-warning) .outer-container .text-container {
+  flex: 1;
+  color: var(--light, #ffffff);
+}
+:host(.bg-warning) .outer-container .button-container {
+  padding: 0 1rem;
+}
+:host(.bg-warning) .outer-container .button-container .energized {
+  color: var(--dark, #000000);
+}
+:host(.bg-warning) .outer-container .button-container .success, :host(.bg-warning) .outer-container .button-container .app-color {
+  color: var(--light, #ffffff);
 }