@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/components/grid/grid/grid.css

@@ -553,6 +553,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .container-base .file-icons-container yoo-icon {
   padding-left: var(--spacing-08, 0.5rem);
 }
+:host .container-base .progressbar-wrapper.widget yoo-progress-bar {
+  --progress-value-font-size: var(--font-size-14, 0.875rem);
+}
 :host .container-base .progressbar-wrapper:not(.widget) {
   margin: 0 var(--spacing-16, 1rem);
 }
@@ -2840,10 +2843,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   padding: 0 var(--spacing-16, 1rem);
 }
-:host(.web:not(.framed)) .body-container .item.item-ios,
-:host(.web:not(.framed)) .body-container .item.item-md,
-:host(.web:not(.framed)) .body-container .item-options-end,
-:host(.web:not(.framed)) .body-container yoo-ion-item {
+:host(.web:not(.framed)) .body-container:not(.card-image):not(.card-cell-image) .item.item-ios,
+:host(.web:not(.framed)) .body-container:not(.card-image):not(.card-cell-image) .item.item-md,
+:host(.web:not(.framed)) .body-container:not(.card-image):not(.card-cell-image) .item-options-end,
+:host(.web:not(.framed)) .body-container:not(.card-image):not(.card-cell-image) yoo-ion-item {
   min-height: unset;
   padding: 0;
 }
@@ -2998,7 +3001,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: 0;
   padding: 0;
 }
-:host(.framed) .empty-state-container .empty-state yoo-empty-state.with-button {
+:host(.framed) .empty-state-container .empty-state yoo-empty-state.large.with-button {
   flex: 50%;
   width: min(var(--empty-state-size-with-button, 50%), 12rem);
   height: min(var(--empty-state-size-with-button, 50%), 12rem);
@@ -3061,9 +3064,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-bottom: 0.4rem;
   }
 }
-:host(.framed) .frame-container .container.empty {
-  padding-bottom: 0.5rem;
-}
 :host(.framed) .frame-container .container .list-container,
 :host(.framed) .frame-container .container .grid-cell {
   display: flex;
@@ -3134,8 +3134,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.framed) .frame-container .frame-header .text-container {
   display: flex;
   flex: 1;
-  flex-direction: column;
   align-items: flex-start;
+  overflow: hidden;
 }
 :host(.framed) .frame-container .frame-header .text-container .heading {
   overflow: hidden;
@@ -3146,10 +3146,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-900, 900);
   font-size: var(--font-size-16, 1rem);
 }
-:host(.framed) .frame-container .frame-header .text-container .subheading {
-  color: var(--text-color, #807f83);
-  font-size: var(--font-size-12, 0.75rem);
-}
 :host(.framed) .bottom-overlay {
   position: absolute;
   bottom: 0;
@@ -3178,17 +3174,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   bottom: var(--spacing-08, 0.5rem);
 }
 
-:host(.framed.grid-cell-channels) .frame-container {
-  padding-bottom: 0;
+:host(.framed.two-columns) {
+  --empty-state-size: 100%;
 }
-:host(.framed.grid-cell-channels) .frame-container .container-base .grid-cell {
+:host(.framed.two-columns) .container {
   display: grid;
-  grid-auto-rows: min-content;
-  grid-gap: var(--spacing-02, 0.125rem) var(--spacing-16, 1rem);
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--spacing-16, 1rem);
+}
+:host(.framed.two-columns) .empty-state {
+  margin: 0;
+}
+:host(.framed.two-columns) .empty-state yoo-empty-state {
+  padding-top: var(--spacing-16, 1rem);
+}
+:host(.framed.two-columns) .entity-inner-container {
+  height: 100%;
+}
+:host(.framed.two-columns) .frame-container .container yoo-ion-list yoo-ion-item {
+  height: 100%;
+  padding: 0;
+  border: none;
 }
-:host(.framed.grid-cell-channels) .frame-container .container-base .grid-cell .entity-inner-container {
-  min-width: 0;
+:host(.framed.two-columns) .frame-header {
+  grid-column: 1/-1;
 }
 
 :host(.framed.waitliststats) .bottom-overlay {
@@ -3287,15 +3296,108 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--app-color, #5a30f4);
 }
 
+:host(.card-cell.channel:not(.empty)) .frame-container,
+:host(.card-cell.channels:not(.empty)) .frame-container,
+:host(.card-cell.contacts:not(.empty)) .frame-container,
+:host(.card-cell.locations:not(.empty)) .frame-container {
+  padding-bottom: 0;
+}
+
 :host(.card-cell-color) .grid-cell {
   display: grid !important;
   grid-template-columns: var(--grid-template-columns, repeat(2, minmax(0, 1fr)));
   gap: var(--grid-template-gap, var(--spacing-08, 0.5rem));
 }
 :host(.card-cell-color) .entity-inner-container {
+  width: 100%;
   height: 100%;
 }
 
+:host(.card-cell-color.small) .grid-cell {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+:host(.card-cell.channel) .frame-container .container-base .grid-cell,
+:host(.card-cell.channels) .frame-container .container-base .grid-cell,
+:host(.card-cell.contacts) .frame-container .container-base .grid-cell,
+:host(.card-cell.medium.locations) .frame-container .container-base .grid-cell {
+  display: grid;
+  grid-auto-rows: min-content;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+:host(.small) .empty-state .empty-state-details,
+:host(.medium) .empty-state .empty-state-details {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-08, 0.5rem);
+}
+
+:host(.card-cell.small.channel) yoo-empty-state,
+:host(.card-cell.small.channels) yoo-empty-state,
+:host(.card-cell.small.contacts) yoo-empty-state,
+:host(.card-cell.small.locations) yoo-empty-state,
+:host(.small.card-campaign) yoo-empty-state,
+:host(.small.card-feed-row) yoo-empty-state,
+:host(.small.card-inbox) yoo-empty-state {
+  display: none;
+}
+
+:host(.card-cell.medium.channel),
+:host(.card-cell.medium.channels),
+:host(.card-cell.medium.contacts),
+:host(.card-cell.medium.locations),
+:host(.medium.card-campaign),
+:host(.medium.card-calendar),
+:host(.medium.card-feed-row),
+:host(.medium.card-inbox) {
+  --empty-state-size: 100%;
+}
+:host(.card-cell.medium.channel) .empty-state,
+:host(.card-cell.medium.channels) .empty-state,
+:host(.card-cell.medium.contacts) .empty-state,
+:host(.card-cell.medium.locations) .empty-state,
+:host(.medium.card-campaign) .empty-state,
+:host(.medium.card-calendar) .empty-state,
+:host(.medium.card-feed-row) .empty-state,
+:host(.medium.card-inbox) .empty-state {
+  flex-direction: row;
+  margin: var(--spacing-08, 0.5rem) 0 0;
+}
+:host(.card-cell.medium.channel) .empty-state > *,
+:host(.card-cell.medium.channels) .empty-state > *,
+:host(.card-cell.medium.contacts) .empty-state > *,
+:host(.card-cell.medium.locations) .empty-state > *,
+:host(.medium.card-campaign) .empty-state > *,
+:host(.medium.card-calendar) .empty-state > *,
+:host(.medium.card-feed-row) .empty-state > *,
+:host(.medium.card-inbox) .empty-state > * {
+  flex: 1 !important;
+}
+
+:host(.card-cell.medium.channel) .frame-container .container-base .grid-cell,
+:host(.card-cell.medium.channels) .frame-container .container-base .grid-cell,
+:host(.card-cell.medium.contacts) .frame-container .container-base .grid-cell,
+:host(.card-cell.medium.locations) .frame-container .container-base .grid-cell {
+  align-content: center;
+}
+
+:host(.card-cell.channel) .frame-container .container-base .grid-cell,
+:host(.card-cell.channels) .frame-container .container-base .grid-cell {
+  grid-gap: var(--spacing-02, 0.125rem) var(--spacing-16, 1rem);
+}
+
+:host(.card-cell.contacts) .frame-container .container-base .grid-cell,
+:host(.card-cell.locations) .frame-container .container-base .grid-cell {
+  grid-gap: var(--spacing-16, 1rem);
+}
+
+:host(.card-cell-color:not(.framed.small)) .grid-cell {
+  display: grid !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-16, 1rem);
+}
+
 :host(.card-cell-image) .grid-cell {
   display: grid !important;
   gap: var(--spacing-08, 0.5rem);
@@ -3308,9 +3410,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --card-image-title-line-clamp: 4;
 }
 :host(.card-cell-image.inventories) .grid-cell {
+  grid-auto-rows: minmax(0px, 1fr);
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+:host(.card-cell-image.inventories.small) yoo-entity {
+  --card-image-title-line-clamp: 3;
+}
+:host(.card-cell-image.inventories.small) .grid-cell {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 :host(.card-cell-image.photos) yoo-entity {
   --card-image-border-radius: var(--border-radius-04, 0.25rem);
   --card-image-overlay: transparent;
@@ -3320,6 +3430,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: 0 var(--spacing-16, 1rem);
 }
 
+:host(.card-cell-image.photos.medium) .grid-cell {
+  margin: 0 calc(var(--spacing-08, 0.5rem) * -1);
+  padding: 0;
+}
+
 :host(.card-cell-image.community) yoo-entity {
   --card-image-border-radius: var(--border-radius-08, 0.5rem);
   --card-image-overlay: transparent;

package/dist/collection/components/grid/grid/grid.js

@@ -2287,14 +2287,14 @@ export class YooGridComponent {
       this.renderTotalHeader(),
       this.renderLinkHeader(),
       this.renderTabs(),
-      this.isFramed && (this.heading || this.subheading) ? (h("div", { class: "frame-header" },
+      this.isFramed && (this.heading) ? (h("div", { class: "frame-header" },
         h("div", { class: "row" },
           h("div", { class: "text-container", onClick: () => this.onHeadingClick() }, this.heading ? (this.isLoading && this.total <= 0 ? (h("yoo-card-placeholder", { displayType: this.displayType, entityType: this.entityType, header: this.progressCss })) : (h("span", { class: "heading" },
             title,
             this.total > 0 && !this.hideTotal && ` - ${this.formattedTotal}`))) : null),
           this.showSeeAll !== false && (h("div", { class: { 'icon-container': true, widget: this.isWidget }, onClick: () => this.onHeadingClick() }, translate('SEEALL'))),
-          this.isWidget && isWeb(this.host) && (h("div", { class: { 'icon-container': true }, onClick: (ev) => this.onWidgetEdit(ev) },
-            h("yoo-icon", { name: "more", size: "small", color: "stable" }))),
+          this.isWidget && (h("div", { class: { 'icon-container': true }, onClick: (ev) => this.onWidgetEdit(ev) },
+            h("yoo-icon", { name: "more", size: isWeb(this.host) ? 'small' : 'medium', color: "stable" }))),
           h("slot", { name: "header" })),
         this.renderProgressBar())) : this.forceHeading ? (h("div", { class: "header-container" },
         h("div", { class: "header-title" },
@@ -2387,9 +2387,14 @@ export class YooGridComponent {
       h("div", { class: "selected-text" }, `${selectedCount || 0} ${translate('SELECTED')}`),
       h("yoo-button", { animated: false, color: "app-color", fill: "transparent", size: isWeb(this.host) ? 'small' : 'medium', shape: "rectangular", onClick: () => this.onForceSelectAll(showClear) }, translate(showClear ? 'CLEAR' : 'SELECTALL'))));
   }
+  renderEmptyStateButton(customStyle) {
+    const buttonSize = isWeb(this.host) || (!this.extraClass || this.extraClass === 'large') ? 'large' : 'medium';
+    return (h("yoo-button", { class: { 'empty-button': true, expanded: customStyle }, size: buttonSize, color: "app-color", onClick: () => this.emptyStateHandler() }, translate(this.emptyStateButtonText)));
+  }
   renderEmptyState() {
+    const isLarge = !this.extraClass || this.extraClass === 'large';
     const type = this.emptyState || this.entityType || 'error';
-    const displayEmptyState = type && type !== 'none';
+    const displayEmptyState = type && type !== 'none' && !this.hideEmptyState;
     const header = translate(this.emptyStateHeader || EMPTYSTATE_TITLE_MAP[type]);
     const text = translate(this.emptyStateDescription || EMPTYSTATE_TEXT_MAP[type] || 'LISTEMPTY');
     const hasButton = !!this.emptyStateButtonText && !!this.emptyStateHandler && (!isOffline() || this.emptyAllowOfflineAction);
@@ -2399,9 +2404,11 @@ export class YooGridComponent {
       displayEmptyState && (h("div", { class: `empty-state-container ${this.extraClass}` },
         h("div", { class: { 'empty-state': true, padding: customStyle, ...getAppContext(this.host) } },
           this.emptyStateTextPosition === 'top' && [!!header && h("h4", null, header), h("div", null, text)],
-          this.emptyStateAnimated ? (h("yoo-lottie", { autoplay: true, loop: true, type: type })) : (h("yoo-empty-state", { class: { [this.displayType]: true, 'with-button': hasButton }, style: { height: this.isAutoComplete && !this.host.classList.contains('expanding-grid') && '5rem' }, type: type })),
-          this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
-          hasButton && (h("yoo-button", { class: { 'empty-button': true, expanded: customStyle }, size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => this.emptyStateHandler() }, translate(this.emptyStateButtonText)))))),
+          this.emptyStateAnimated ? (h("yoo-lottie", { autoplay: true, loop: true, type: type })) : (h("yoo-empty-state", { class: { [this.displayType]: true, [this.extraClass || 'large']: true, 'with-button': hasButton }, style: { height: this.isAutoComplete && !this.host.classList.contains('expanding-grid') && '5rem' }, type: type })),
+          h("div", { class: "empty-state-details" },
+            this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
+            hasButton && !isLarge && this.renderEmptyStateButton(customStyle)),
+          hasButton && isLarge && this.renderEmptyStateButton(customStyle)))),
       h("slot", { name: "after" })
     ];
   }
@@ -2592,7 +2599,8 @@ export class YooGridComponent {
           h("slot", { name: "header" }),
           h("div", { class: { 'grid-cell': this.displayType.includes('card-cell'), 'grid-media': this.displayType === 'card-media' } }, (_c = this.filteredItems) === null || _c === void 0 ? void 0 :
             _c.map((item, index) => this.renderEntity(item, null, index)),
-            !['card-cell-image', 'card-template'].includes(this.displayType) &&
+            !['card-cell-color', 'card-cell-image', 'card-template'].includes(this.displayType) &&
+              !['channel', 'channels', 'contacts', 'locations'].includes(this.entityType) &&
               !this.host.classList.contains('grid-cell-channels') &&
               range(6).map(() => (h("yoo-entity", { class: {
                   'empty-entity': true,
@@ -3949,23 +3957,6 @@ export class YooGridComponent {
       "attribute": "heading",
       "reflect": false
     },
-    "subheading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subheading",
-      "reflect": false
-    },
     "progress": {
       "type": "number",
       "mutable": false,

package/dist/collection/components/grid/gridstack/gridstack.js

@@ -358,7 +358,7 @@ export class YooGridstackComponent {
     ];
   }
   render() {
-    return h(Host, { class: { ...getAppContext(this.host) }, style: { padding: `${this.itemMargin}px; padding-top:0` } }, this.renderGridStack());
+    return h(Host, { class: { ...getAppContext(this.host) }, style: { padding: `${this.itemMargin}px`, paddingTop: '0' } }, this.renderGridStack());
   }
   static get is() { return "yoo-gridstack"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-learn/learning/card-course/row-compact/card-course-row-compact.js

@@ -19,12 +19,12 @@ export class YooCardCourseRowCompactComponent {
       h("yoo-img", { instant: image.instant, src: image.src }),
       h("div", { class: "information" },
         h("div", { class: "indicators" },
-          h("yoo-tag", { size: "extra-small" },
+          h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true },
             h("yoo-icon", { color: "app-color", name: "star", size: "extra-small", slot: "start" }),
             earnedPoints,
             "/",
             availablePoints),
-          h("yoo-tag", { size: "extra-small" },
+          h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true },
             h("yoo-icon", { color: "text-color", name: "lesson", size: "extra-small", slot: "start" }),
             finishedLessons,
             "/",

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -208,6 +208,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 100%;
   background-color: var(--light, #ffffff);
 }
+:host yoo-navbar {
+  background-color: var(--stable-light, #f1f1f1);
+}
 :host yoo-ion-scroll {
   display: flex;
   flex-direction: column;
@@ -302,14 +305,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   overflow: hidden;
   --border-radius: var(--border-radius-08, 0.5rem);
 }
+:host yoo-ion-scroll yoo-progress-recap,
 :host yoo-ion-scroll yoo-points-recap {
-  width: 90%;
-  max-width: 30rem;
-  padding: var(--spacing-08, 0.5rem);
-}
-:host yoo-ion-scroll yoo-progress-recap {
-  width: 90%;
+  display: block;
+  width: calc(100% - 2rem);
   max-width: 30rem;
+  margin: 0 auto;
   padding: var(--spacing-08, 0.5rem);
 }
 :host .wall {
@@ -322,6 +323,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-lottie {
   height: 12.5rem;
 }
+:host yoo-tag {
+  display: block;
+  margin: 0 auto;
+}
+:host main {
+  width: 100%;
+  padding-top: calc(var(--safe-area-inset-top) + var(--spacing-32, 2rem));
+}
 :host .answers {
   width: 100%;
   padding-bottom: var(--spacing-16, 1rem);

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.js

@@ -282,11 +282,12 @@ export class YooLessonQuestionResultComponent {
   }
   render() {
     return (h(Host, { class: this.resultType },
+      this.showHeader && this.renderHeader(),
       h("yoo-ion-scroll", { class: "relative", forceOverscroll: false },
         h("div", { class: "wall" }),
-        this.showHeader && this.renderHeader(),
-        h("yoo-lottie", { autoplay: this.autoPlayAnimation, ref: (el) => (this.lottieEl = el), type: this.lottieType }),
-        this.resultType === 'question' ? this.renderQuestionResult() : this.resultType === 'course' ? this.renderCourseResult() : this.renderLessonResult()),
+        h("main", null,
+          h("yoo-lottie", { autoplay: this.autoPlayAnimation, ref: (el) => (this.lottieEl = el), type: this.lottieType }),
+          this.resultType === 'question' ? this.renderQuestionResult() : this.resultType === 'course' ? this.renderCourseResult() : this.renderLessonResult())),
       this.renderFooter()));
   }
   static get is() { return "yoo-lesson-question-result"; }

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -1,4 +1,4 @@
-import { canParticipateTo, canPerformActionPlan, dateDiffInCalendarDays, dateFormat, fromToday, getAuthentication, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isMissionBookable, isPresent, isToday, pipes, translate, translateMulti } from '@shared/utils';
+import { canParticipateTo, canPerformActionPlan, dateFormat, fromToday, getAuthentication, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isMissionBookable, isPresent, isToday, pipes, translate, translateMulti } from '@shared/utils';
 import { compact, isNumber } from 'lodash-es';
 //#region ENTITIES
 function isMissionRequest(mission) {
@@ -401,13 +401,13 @@ export function getMissionStateTags(mission, session, includeUniqueKey, includeV
       progressClass: 'info'
     };
   }
-  else if (!mission.hasWorkflow && dateDiffInCalendarDays(new Date(), mission._ect) <= 1) {
-    tag = {
-      innerHTML: translate('YOOBICNEW'),
-      customColor: getCssColor('accent'),
-      progressClass: 'app-color-10'
-    };
-  }
+  //  else if (!mission.hasWorkflow && dateDiffInCalendarDays(new Date(), mission._ect) <= 1) {
+  //   tag = {
+  //     innerHTML: translate('YOOBICNEW'),
+  //     customColor: getCssColor('accent'),
+  //     progressClass: 'app-color-10'
+  //   };
+  // }
   if (tag) {
     tags.push(tag);
   }

package/dist/collection/feature-platform/app/widget-chart/widget-chart.css

@@ -201,15 +201,19 @@ 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 {
+  display: block;
+  height: 100%;
+}
 :host .outer-container {
   display: flex;
   box-sizing: border-box;
+  height: 100%;
   min-height: 22rem;
   max-height: 25rem;
   padding: var(--spacing-16, 1rem);
   background: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--web-kpi-shadow, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }
 :host .outer-container .left-column {
   width: 20rem;
@@ -269,11 +273,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   align-items: center;
 }
+:host .outer-container .title .widget-opts > * {
+  cursor: pointer;
+}
 :host .outer-container .title .widget-opts span {
-  color: var(--stable, #adadad);
+  color: var(--app-color, #5a30f4);
   white-space: nowrap;
   text-transform: none;
-  cursor: pointer;
 }
 :host .outer-container .title yoo-icon {
   margin-left: var(--spacing-08, 0.5rem);
@@ -312,16 +318,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: var(--spacing-16, 1rem);
 }
 
+:host(:not([is-widget])) .outer-container {
+  box-shadow: var(--web-kpi-shadow, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
+}
+
+:host(.small) .left-column,
 :host(.medium) .left-column {
   width: unset;
   border: none;
 }
+:host(.small) .outer-container,
 :host(.medium) .outer-container {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
+  justify-content: space-between;
   min-height: unset;
   max-height: unset;
 }
+:host(.small) .progress-container,
 :host(.medium) .progress-container {
   display: flex;
   flex-direction: row-reverse;
@@ -329,13 +341,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: space-between;
   width: 100%;
 }
-:host(.medium) .title {
-  grid-column: 1/-1;
-}
+:host(.small) .value,
 :host(.medium) .value {
-  align-self: center;
   margin: 0;
 }
+:host(.small) .value-container,
 :host(.medium) .value-container {
   flex-direction: column;
   align-items: start;
@@ -344,6 +354,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border: none;
 }
 
+:host(.small) .outer-container {
+  flex-direction: column;
+}
+
+:host(.medium) .outer-container {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+:host(.medium) .title {
+  grid-column: 1/-1;
+}
+:host(.medium) .value {
+  align-self: center;
+}
+
 :host(.large) .outer-container {
   height: 100%;
   min-height: initial;
@@ -351,12 +376,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-16, 1rem) 0 0;
 }
 :host(.large) .outer-container .right-column {
-  padding-left: var(--spacing-16, 1rem);
+  padding-left: 0;
   overflow: hidden;
 }
 :host(.large) .outer-container .right-column .title {
-  padding-right: var(--spacing-16, 1rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
+  padding: 0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem);
 }
 :host(.large) .outer-container .right-column .title .header {
   padding-right: var(--spacing-16, 1rem);

package/dist/collection/feature-platform/app/widget-chart/widget-chart.js

@@ -24,6 +24,9 @@ export class YooWidgetChartComponent {
     }
     return options;
   }
+  get isSmall() {
+    return this.size === 'small';
+  }
   get isMedium() {
     return this.size === 'medium';
   }
@@ -53,9 +56,8 @@ export class YooWidgetChartComponent {
         !this.isWidget && this.help && (h("yoo-tooltip", { hoverable: true, content: translate(this.help), placement: "bottom" },
           h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', name: "help", color: "stable" })))),
       this.isWidget && (h("div", { class: "widget-opts" },
-        h("span", { onClick: (ev) => this.onSeeAllClicked(ev) }, translate('SEEALL')),
-        isWeb(this.host) &&
-          h("yoo-icon", { name: "more", size: "small", color: "stable", onClick: (ev) => this.onWidgetEdit(ev) })))));
+        !this.isSmall && h("span", { onClick: (ev) => this.onSeeAllClicked(ev) }, translate('SEEALL')),
+        h("yoo-icon", { name: "more", size: isWeb(this.host) ? 'small' : 'medium', color: "stable", onClick: (ev) => this.onWidgetEdit(ev) })))));
   }
   renderValueContainer() {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -88,17 +90,17 @@ export class YooWidgetChartComponent {
   render() {
     return (h(Host, { class: { [this.size || '']: true } },
       h("div", { class: { 'outer-container': true, web: isWeb(this.host) } },
-        this.isMedium && this.renderTitle(),
-        (this.isMedium || this.isExtraLarge) && (h("div", { class: "left-column" },
+        (this.isSmall || this.isMedium) && this.renderTitle(),
+        !this.isLarge && (h("div", { class: "left-column" },
           this.isExtraLarge && this.renderTitle(),
           this.renderValueContainer(),
           this.isExtraLarge && h("div", { class: "items-container" }, this.renderData()))),
-        h("div", { class: "right-column" },
+        !this.isSmall && (h("div", { class: "right-column" },
           this.isExtraLarge && (h("yoo-form-autocomplete", { class: "inline", size: "medium", value: this.sort, values: ['30days', '6months', '1year'], displayType: "card-list", placeholder: translate('YOOBICSORT'), useTranslate: true, onInputChanged: (ev) => this.onSortChange(ev) })),
           this.isLarge && this.renderTitle(),
           this.isLarge && this.renderValueContainer(),
           h("div", { class: "chart" },
-            h("yoo-chart", { disableAnimation: true, config: this.chartOptions, emptyStateHeight: "6rem" }))))));
+            h("yoo-chart", { disableAnimation: true, config: this.chartOptions, emptyStateHeight: "6rem" })))))));
   }
   static get is() { return "yoo-widget-chart"; }
   static get encapsulation() { return "shadow"; }
@@ -259,7 +261,7 @@ export class YooWidgetChartComponent {
         "text": ""
       },
       "attribute": "is-widget",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get events() { return [{