@yoobic/yobi 8.2.0-3 → 8.2.0-6

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

@@ -7661,8 +7661,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   width: 1px;
   height: 50%;
   top: calc(50% - 25%);
-  background-color: var(--stable-light, #f1f1f1);
-  background-color: var(--ag-header-column-separator-color, var(--stable-light, #f1f1f1));
+  background-color: transparent;
+  background-color: var(--ag-header-column-separator-color, transparent);
 }
 :host .ag-ltr .ag-header-cell::after, :host .ag-ltr .ag-header-group-cell::after {
   right: 0;
@@ -8531,6 +8531,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 }
 :host .ag-header {
   font-size: var(--font-size-16, 1rem);
+  border-bottom: none;
 }
 :host .ag-header .ag-header-cell.header-right .ag-header-cell-label {
   justify-content: flex-end;
@@ -8538,6 +8539,10 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 :host .ag-header .ag-header-cell.hidden .ag-header-cell-label {
   opacity: 0;
 }
+:host .ag-header .ag-header-cell-text {
+  font-weight: bold;
+  font-size: var(--font-size-14, 0.875rem);
+}
 :host .ag-header .ag-header-cell.hidden-force-menu .ag-header-cell-label {
   opacity: 0;
 }
@@ -8552,17 +8557,17 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 }
 :host .ag-icon.ag-icon-tree-closed,
 :host .ag-icon.ag-icon-tree-open {
-  color: var(--dark, #000000);
-  font-size: var(--font-size-32, 2rem) !important;
+  color: var(--text-color, #807f83);
+  font-size: var(--font-size-24, 1.5rem) !important;
 }
 :host .ag-ltr .ag-right-aligned-cell {
   justify-content: flex-end;
 }
 :host .ag-ltr .ag-row-group-leaf-indent {
-  margin-left: 2.8125rem;
+  margin-left: 1.4375rem;
 }
 :host .ag-rtl .ag-row-group-leaf-indent {
-  margin-right: 2.8125rem;
+  margin-right: 1.4375rem;
 }
 :host .ag-rtl .ag-right-aligned-cell {
   justify-content: flex-start;
@@ -8582,8 +8587,15 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 }
 :host .ag-group-contracted,
 :host .ag-group-expanded {
+  align-items: center;
   font-size: var(--font-size-20, 1.25rem) !important;
 }
+:host .ag-ltr .ag-row-drag,
+:host .ag-ltr .ag-selection-checkbox,
+:host .ag-ltr .ag-group-expanded,
+:host .ag-ltr .ag-group-contracted {
+  margin-right: 0;
+}
 :host .ag-cell-focus {
   border: none !important;
 }
@@ -8600,6 +8612,12 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   white-space: normal;
   text-overflow: ellipsis;
 }
+:host .ag-cell .yoo-tooltip {
+  overflow: hidden;
+}
+:host .ag-cell.no-overflow .ag-cell-wrapper {
+  overflow: hidden;
+}
 :host .ag-cell.centered > span {
   display: flex;
   align-items: center;
@@ -8636,7 +8654,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   margin-left: -0.0625rem;
 }
 :host .ag-cell .ag-group-child-count {
-  padding-left: var(--spacing-08, 0.5rem) !important;
+  margin-left: 0;
 }
 .text-center {
   text-align: center !important;
@@ -9035,10 +9053,6 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   background: transparent !important;
 }
 
-:host(.transparent:not(.readonly)) .ag-row-selected {
-  background: transparent !important;
-}
-
 :host(.no-border) .ag-header,
 :host(.no-border) .ag-root-wrapper,
 :host(.no-border) .ag-row:not(.ag-row-selected),

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -136,10 +136,13 @@ function tagsRenderer(params) {
   }
   return container; // tooltip; // ;
 }
-function truncateRenderer(params) {
+function truncateRenderer(params, extraHtml) {
   const tooltip = document.createElement('yoo-tooltip');
   tooltip.setAttribute('hoverable', 'true');
-  const content = (isArray(params.value) ? params.value.join(', ') : params.value) || '';
+  let content = (isArray(params.value) ? params.value.join(', ') : params.value) || '';
+  if (extraHtml) {
+    content = '<div style="white-space: nowrap;display:flex">' + extraHtml + '<span style="white-space: nowrap;flex:1;;overflow:hidden;text-overflow:ellipsis;">' + content + '</span></div>';
+  }
   tooltip.content = content;
   tooltip.placement = 'bottom';
   tooltip.delay = [1500, 0];
@@ -209,7 +212,7 @@ function numberWithVariationRenderer(params) {
   return retVal;
 }
 function numberRenderer(params) {
-  var _a, _b;
+  var _a;
   const factor = params.factor || 1;
   const precision = params.numberPrecision;
   let retVal = params.value;
@@ -241,9 +244,6 @@ function numberRenderer(params) {
   if (params.isExport) {
     return retVal.toString();
   }
-  if (((_b = params.data) === null || _b === void 0 ? void 0 : _b.fftype) === 'folder') {
-    return '-';
-  }
   if (params.icon) {
     return `<div class="top-container"><yoo-icon class="margin-right" name="${params.icon}" color="${params.color}"></yoo-icon><span>${retVal.toString()}</span></div>`;
   }
@@ -708,6 +708,18 @@ function pricecheckRenderer(params) {
   }
   return ret;
 }
+function folderIconRenderer(params) {
+  var _a, _b;
+  const folder = params.data;
+  let img;
+  if (folder.imgSrc || ((_a = folder.background) === null || _a === void 0 ? void 0 : _a._downloadURL)) {
+    img = `<yoo-img style="width:1.5rem; margin-right:0.5rem" src="${folder.imgSrc || ((_b = folder.background) === null || _b === void 0 ? void 0 : _b._downloadURL)}"></yoo-img>`;
+  }
+  else {
+    img = ` <yoo-avatar style="margin-right:0.5rem" size="small" icon="${folder.icon || 'folder'}" color="${folder.color || 'app-color'}"></yoo-avatar>`;
+  }
+  return truncateRenderer({ value: folder.name, maxLine: 1 }, img);
+}
 function buttonRenderer(params) {
   if (params.colDef && params.colDef.cellRendererParams) {
     const color = params.colDef.cellRendererParams.color || '';
@@ -813,7 +825,7 @@ function taskStatsRenderer(params) {
       ? `<div class="not-center-container">
               <yoo-tag color="stable-light">
                 <yoo-icon slot="start" size="small" name="mission" color="stable"></yoo-icon>
-              ${((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + translate('TASKS')}
+              ${((value === null || value === void 0 ? void 0 : value.countFinished) || 0) + ((value === null || value === void 0 ? void 0 : value.countClosed) || 0) + '/' + (value === null || value === void 0 ? void 0 : value.countTasks) + ' ' + translate('YOOBICACTIONS')}
               </yoo-tag>
             </div>`
       : null;
@@ -1069,7 +1081,7 @@ class MissionResultsRenderer {
     this.missionForm.formType = 'mission';
     let items = [];
     params.slides.forEach((s) => (items = [...items, ...s.items]));
-    this.missionForm.slides = [{ title: 'GENERAL', items }];
+    this.missionForm.slides = [{ title: 'YOOBICGENERAL', items }];
     this.missionForm.data = params.data;
     this.missionForm.showTabs = false;
     this.missionForm.showRecap = false;
@@ -1093,6 +1105,8 @@ class EntityRenderer {
   init(params) {
     var _a, _b, _c, _d, _e;
     const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.overflow = 'hidden';
     const entityType = params.entityType || params.collectionName;
     this.entity = document.createElement('yoo-entity');
     this.entity.classList.add('block', 'no-border');
@@ -1365,6 +1379,8 @@ export function getRenderer(renderer) {
       return progressbarRenderer;
     case 'pricecheckRenderer':
       return pricecheckRenderer;
+    case 'folderIconRenderer':
+      return folderIconRenderer;
     case 'campaignStatusRenderer':
       return campaignStatusRenderer;
     case 'missionStatusOnlyRenderer':

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

@@ -3585,7 +3585,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.web.files) .grid-cell yoo-entity.empty-entity {
-  width: 90px !important;
+  width: 6rem !important;
 }
 
 :host(.layout-01-list.web:not(.framed)) .container-base {
@@ -3786,6 +3786,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.tree) .container-base {
   flex: 1;
+  margin-left: 0 !important;
 }
 
 :host(.giphy) .grid-cell {
@@ -3898,10 +3899,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: 0;
 }
 
-:host(.tree.web) {
-  min-height: 600px;
-}
-
 :host(.card-sticky.mobile) .container-base.container-horizontal yoo-ion-scroll {
   min-height: 300px;
 }

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

@@ -461,6 +461,33 @@ export class YooGridComponent {
       }
     }, 300);
   }
+  async updateTreePath(route, purge = true) {
+    if (this.isTree()) {
+      this.gridApi.refreshServerSideStore({ route, purge });
+    }
+  }
+  async expandTreePath(routes) {
+    var _a;
+    if (this.isTree() && routes.length > 0) {
+      if (((_a = this.gridApi.getSelectedNodes()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        this.gridApi.getSelectedNodes().forEach((node) => this.gridApi.deselectNode(node));
+      }
+      this.expandPath(routes[0], routes.length === 1);
+      await new Promise(resolve => setTimeout(resolve, 500));
+      routes.shift();
+      await this.expandTreePath(routes);
+    }
+  }
+  expandPath(route, last) {
+    const node = this.gridApi.getRowNode(route);
+    if (last && node) {
+      node.setSelected(true, true, true);
+      this.gridApi.ensureNodeVisible(node, 'middle');
+    }
+    else {
+      node === null || node === void 0 ? void 0 : node.setExpanded(true);
+    }
+  }
   async disconnect() {
     this.disconnected = true;
   }
@@ -488,6 +515,11 @@ export class YooGridComponent {
       this.slidesOptions.spaceBetween = 0;
       this.slidesOptions.slidesPerView = 'auto';
     }
+    if (this.displayType === 'card-cell' && this.direction === 'horizontal') {
+      this.slidesOptions.slidesPerView = 10;
+      this.slidesOptions.spaceBetween = 0;
+      this.slidesOptions.slidesPerView = 'auto';
+    }
     if (!isWeb(this.host)) {
       this.setDisplayIcon();
     }
@@ -859,6 +891,7 @@ export class YooGridComponent {
     };
     if (this.isTree()) {
       this.finalGridConfig.groupDisplayType = 'custom';
+      this.finalGridConfig.serverSideStoreType = 'full';
       // this.finalGridConfig.groupSuppressAutoColumn = true;
     }
     this.finalGridConfig.rowModelType = this.finalGridConfig.rowModelType || 'serverSide';
@@ -1252,7 +1285,8 @@ export class YooGridComponent {
       !this.host.classList.contains('autocomplete-selection-mode') &&
       !this.host.classList.contains('form-choice') &&
       !this.host.classList.contains('force-select');
-    if (isWeb(this.host) &&
+    if (!this.disconnected &&
+      isWeb(this.host) &&
       checkBoxClick &&
       !this.host.classList.contains('autocomplete-selection-mode') &&
       !this.host.classList.contains('force-select') &&
@@ -1260,13 +1294,13 @@ export class YooGridComponent {
       this.multiple) {
       this.checked.emit(selection);
     }
-    else if (!blockEmit) {
+    else if (!this.disconnected && !blockEmit) {
       this.selected.emit(value);
     }
-    if (this.isAgGrid()) {
+    if (!this.disconnected && this.isAgGrid()) {
       this.updateGridSelectAllState(value);
     }
-    else {
+    else if (!this.disconnected) {
       this.setFormFieldValue();
     }
   }
@@ -1861,6 +1895,7 @@ export class YooGridComponent {
       renderEntityQueryBuilder && this.renderEntityQueryBuilder(actions),
       !renderEntityQueryBuilder && this.renderSearchInput(),
       isWeb(this.host) && !renderEntityQueryBuilder && h("span", { class: "flex" }),
+      isWeb(this.host) && !renderEntityQueryBuilder && this.renderDisplayMode(),
       isWeb(this.host) && !renderEntityQueryBuilder && this.renderRefresh(),
       !isWeb(this.host) && (h("yoo-items", { class: {
           // 'margin-left': !isWeb(this.host) && this.isToggleModeVisible(),
@@ -2295,7 +2330,7 @@ export class YooGridComponent {
           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.showSeeAll !== false && (h("div", { class: { 'icon-container': true, widget: this.isWidget }, onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))),
           this.isWidget && this.isHome && (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" })),
@@ -2305,7 +2340,7 @@ export class YooGridComponent {
             this.total > 0 || !this.hideHeadingIfEmpty ? title : null,
             !this.hideTotal && this.renderTotalNumber())),
         (this.entityType === 'courses' || this.entityType === 'plans' || this.entityType === 'courses-small') && this.renderDisplayMode(),
-        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container", onClick: () => this.onHeadingClick() }, translate('SEEALL'))))) : (this.renderProgressBar()),
+        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container", onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))))) : (this.renderProgressBar()),
       (this.gridIsExpanded && this.forceHideSearch) || this.isFramed || this.hideToolbar || (!renderSearchOrAutocomplete && !renderEntityTags) ? null : (h("yoo-navbar", { centerTitle: false, class: {
           'grid': !this.isAutoComplete,
           'card-inbox': (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('card-inbox'),
@@ -7757,6 +7792,47 @@ export class YooGridComponent {
         "tags": []
       }
     },
+    "updateTreePath": {
+      "complexType": {
+        "signature": "(route: string[], purge?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "expandTreePath": {
+      "complexType": {
+        "signature": "(routes: string[]) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "disconnect": {
       "complexType": {
         "signature": "() => Promise<void>",

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

@@ -575,7 +575,8 @@ export class YooGridCalendarComponent {
           h("yoo-collapsible", { class: "bold margin-top", collapsed: false, header: translate('EVENTATTENDANCE') }, this.eventStatuses.map((t) => {
             var _a;
             return h("yoo-form-checkbox", { class: "app-color", onClick: () => this.onToggleAttendance(t), value: !(((_a = this.hiddenStatuses) === null || _a === void 0 ? void 0 : _a.indexOf(t)) > 0), header: translate(ATTENDANCE_TRANSLATIONS[t]) });
-          })))));
+          })),
+        h("slot", { name: "more-filters" }))));
   }
   renderHeader(calendar, type) {
     if (calendar && !isWeb(this.host)) {

package/dist/collection/components/layout/layout-sections/layout-sections.css

@@ -0,0 +1,302 @@
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
+/* Single side border-radius */
+/* Text Direction - ltr / rtl
+$app-direction: multi | rtl | ltr | null (default)
+multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:host {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: var(--spacing-16, 1rem);
+  padding: 0;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+}
+.content::-webkit-scrollbar {
+  width: var(--spacing-04, 0.25rem);
+  height: var(--spacing-04, 0.25rem);
+}
+.content::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+.content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+.content:hover::-webkit-scrollbar-track {
+  background-color: var(--stable-light, #f1f1f1);
+}
+.content:hover::-webkit-scrollbar-thumb {
+  background: var(--stable, #adadad);
+}
+.content app-grid {
+  flex: initial;
+  height: 10rem;
+}
+.content .container {
+  flex: 1;
+  margin-bottom: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-16, 1rem);
+  padding-top: 0;
+  background-color: var(--light, #ffffff);
+}
+.content .container.alternate {
+  padding-top: var(--spacing-08, 0.5rem);
+  padding-bottom: 0;
+  background-color: var(--stable-ultralight, #fafafa);
+}
+.content .container ::slotted(*) {
+  display: block;
+  height: calc((100vh - 24rem) / 2);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-08, 0.5rem);
+  font-weight: bold;
+  font-size: var(--font-size-20, 1.25rem);
+}
+.title .flex {
+  flex: 1;
+}
+.title .see-all {
+  display: flex;
+  align-items: center;
+  color: var(--app-color, #5a30f4);
+  font-size: var(--font-size-14, 0.875rem);
+  cursor: pointer;
+}
+.title .see-all yoo-icon {
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
+:host(.bordered) .container {
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
+}
+
+:host(.small-font) .content .title {
+  font-size: var(--font-size-14, 0.875rem);
+}
+
+:host(.two-rows) .content .container ::slotted(*) {
+  height: calc((100vh - 16rem) / 2);
+}
+
+:host(.single-row) .content .container ::slotted(*) {
+  height: calc(100vh - 20rem);
+}
+
+:host(.mobile) .content .container.alternate {
+  flex: initial;
+}
+:host(.mobile) .content .container ::slotted(*) {
+  height: inherit;
+}