@yoobic/yobi 8.2.0-1 → 8.2.0-10

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();
     }
@@ -707,7 +739,8 @@ export class YooGridComponent {
       });
     }
   }
-  updateGridConfig() {
+  async updateGridConfig() {
+    var _a;
     this.finalGridConfig = {
       ...this.gridConfig,
       treeData: this.isTree(),
@@ -719,16 +752,16 @@ export class YooGridComponent {
         return params.data[this.idAttributeName || '_id'];
       },
       onGridReady: (params) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
-        if (this.gridState && this.gridState.columnState && this.gridState.columnState.length > 0 && !this.disconnected) {
+        if (((_b = (_a = this.gridState) === null || _a === void 0 ? void 0 : _a.columnState) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.disconnected) {
           this.columnApi.applyColumnState({ state: this.gridState.columnState, applyOrder: true });
         }
         if (this.gridApi.destroyCalled) {
           return;
         }
-        this.isEmptyAgGrid = !this.disconnected && ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getDisplayedRowCount()) <= 0;
+        this.isEmptyAgGrid = !this.disconnected && ((_c = this.gridApi) === null || _c === void 0 ? void 0 : _c.getDisplayedRowCount()) <= 0;
         if (!this.isLocal && !this.disconnected) {
           this.gridApi.setServerSideDatasource({
             getRows: (p) => {
@@ -801,13 +834,13 @@ export class YooGridComponent {
           });
         }
         else if (!this.disconnected) {
-          this.isEmptyAgGrid = !(((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0);
+          this.isEmptyAgGrid = !(((_d = this.items) === null || _d === void 0 ? void 0 : _d.length) > 0);
           this.gridApi.setRowData(this.items);
         }
       },
       onRowClicked: (event) => {
-        var _a, _b;
-        if (event.node && event.node.data && !this.disconnected && (((_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getEditingCells()) === null || _b === void 0 ? void 0 : _b.length) || 0) === 0 && !this.disableRowClick) {
+        var _a, _b, _c;
+        if (((_a = event.node) === null || _a === void 0 ? void 0 : _a.data) && !this.disconnected && (((_c = (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.getEditingCells()) === null || _c === void 0 ? void 0 : _c.length) || 0) === 0 && !this.disableRowClick) {
           this.onItemSelect(event.node.data, false);
         }
       },
@@ -835,7 +868,6 @@ export class YooGridComponent {
         this.setFormFieldValue();
       },
       onFirstDataRendered: () => {
-        // params
         setTimeout(() => {
           if (this.sizeColumnsToFit && !this.disconnected) {
             this.gridApi.sizeColumnsToFit();
@@ -850,7 +882,9 @@ export class YooGridComponent {
           return [];
         }
       },
-      isServerSideGroup: this.isTree() ? (item) => !(item && (item.isLeaf)) : null,
+      isServerSideGroup: this.isTree() ? (item) => {
+        return !(item === null || item === void 0 ? void 0 : item.isLeaf);
+      } : null,
       getServerSideGroupKey: this.isTree()
         ? (dataItem) => {
           return dataItem._id;
@@ -859,13 +893,13 @@ export class YooGridComponent {
     };
     if (this.isTree()) {
       this.finalGridConfig.groupDisplayType = 'custom';
-      // this.finalGridConfig.groupSuppressAutoColumn = true;
+      this.finalGridConfig.serverSideStoreType = 'full';
     }
     this.finalGridConfig.rowModelType = this.finalGridConfig.rowModelType || 'serverSide';
     if (this.gridDomLayout) {
       this.finalGridConfig.domLayout = this.gridDomLayout;
     }
-    if (this.finalGridConfig && this.finalGridConfig.columnDefs) {
+    if ((_a = this.finalGridConfig) === null || _a === void 0 ? void 0 : _a.columnDefs) {
       const selectionColumn = this.finalGridConfig.columnDefs.find((c) => c.checkboxSelection === true || c.checkboxSelection === false);
       if (selectionColumn) {
         selectionColumn.hide = !this.isSelectionMode;
@@ -957,16 +991,19 @@ export class YooGridComponent {
         const ids = compact((_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((s) => s === null || s === void 0 ? void 0 : s._id));
         if (ids.length > 0) {
           this.isLoading = true;
-          getAsyncExtraData({ type: 'get-by-ids', params: { collectionName: this.collectionName, ids } }).then((ret) => {
+          getAsyncExtraData({ type: 'get-by-ids', params: { collectionName: this.collectionName, ids, sorts: [{ colId: 'title', sort: 'asc' }] } }).then((ret) => {
             this.items = ret || [];
             if (this.isAgGrid()) {
               if (this.isLocal) {
                 this.gridApi.setRowData(this.items);
               }
               else {
+                this.gridApi.setRowData([]);
                 this.gridApi.setServerSideDatasource({
                   getRows: (p) => {
-                    p.success({ rowData: this.items, rowCount: this.items.length });
+                    const items = this.items.slice(p.request.startRow || 0, p.request.endRow);
+                    p.success({ rowData: items, rowCount: this.items.length });
+                    this.updateGridSelectAllState();
                   }
                 });
               }
@@ -1249,7 +1286,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') &&
@@ -1257,13 +1295,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();
     }
   }
@@ -1858,6 +1896,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(),
@@ -2292,7 +2331,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" })),
@@ -2302,7 +2341,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'),
@@ -2605,7 +2644,7 @@ export class YooGridComponent {
                   [this.displayType]: !!this.displayType,
                   [this.entityType]: !!this.entityType
                 } }))),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           h("slot", { name: "quickactions" }),
           h("slot", { name: "before" }),
           this.renderInfiniteScroll(),
@@ -2657,7 +2696,7 @@ export class YooGridComponent {
               var _a;
               return this.renderEntityItems(header, index, index === array.length - 1 ? (_a = this.filteredItems) === null || _a === void 0 ? void 0 : _a.length : array[index + 1].index, header.index);
             }),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           this.renderInfiniteScroll(),
           this.renderScrollSpacer(),
           h("slot", { name: "quickactions" }))
@@ -2681,7 +2720,7 @@ export class YooGridComponent {
                 ? this.renderItemWithMore(item, index)
                 : this.renderItemSliding(item, index === this.getItems().length - 1 && (index > 1 || this.isFramed), index))
               : this.getItems().map((item, index) => this.renderItem(item, index)),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           h("slot", { name: "quickactions" }))),
         !this.isSelectedToggleView && !this.host.classList.contains('live-preview-dropdown') && this.renderInfiniteScroll(),
         h("slot", { name: "after" }),
@@ -2823,14 +2862,14 @@ export class YooGridComponent {
         }
       } },
       h("yoo-ion-item", { lines: "none", class: { [this.displayType]: true, 'selected': this.isSelected(item), 'overflow-visible': this.secondaryActionsDropdown, 'no-padding': (_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('no-padding-item') } }, this.renderEntity(item, isLast, index)),
-      (actions && actions.length > 0 && !this.secondaryActionsDropdown) || (isWeb(this.host) && this.keepSelection) ? (h("yoo-ion-item-options", { ref: (el) => (this.itemOptions[itemSlidingId] = el), onMouseEnter: () => { var _a, _b; return (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('hovered'); }, onMouseLeave: () => {
+      ((actions === null || actions === void 0 ? void 0 : actions.length) > 0 && !this.secondaryActionsDropdown) || (isWeb(this.host) && this.keepSelection) ? (h("yoo-ion-item-options", { ref: (el) => (this.itemOptions[itemSlidingId] = el), onMouseEnter: () => { var _a, _b; return (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('hovered'); }, onMouseLeave: () => {
           var _a, _b;
           if (!this.blockUnhoveer[itemSlidingId]) {
             (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('hovered');
           }
         } },
         h("div", { class: { 'options-container': true, 'force-opacity': this.isSelectionMode || this.keepSelection, visible: this.displayActionsOnCard, web: isWeb(this.host) }, onClick: () => this.onItemSelect(item) },
-          !isWeb(this.host) && actions && actions.slice(0, hasMoreButton ? 2 : actions.length).map((action) => action && this.renderMobileItemOptionButtons(action, item)),
+          !isWeb(this.host) && (actions === null || actions === void 0 ? void 0 : actions.slice(0, hasMoreButton ? 2 : actions.length).map((action) => action && this.renderMobileItemOptionButtons(action, item))),
           !isWeb(this.host) && actions && hasMoreButton && (h("button", { class: "bg-stable-light", onClick: (ev) => {
               ev.stopPropagation();
               this.presentActionSheet(actions.slice(2), item);
@@ -3002,7 +3041,7 @@ export class YooGridComponent {
           'check-unselected-left': ((this.host.classList.contains('radio-button-choice') && !this.isSelected(item)) || (this.multiple && !this.isSelected(item))) &&
             this.showGlobalActions &&
             this.isSelectionMode,
-          'child': item && (item.isChild || !!(item === null || item === void 0 ? void 0 : item.parentRef)),
+          'child': item && (item.isChild || (!!item.parentRef && item.folderType !== 'article')),
           'last': isLast,
           'form-choice': this.host.classList.contains('form-choice'),
           'framed': this.isFramed,
@@ -7754,6 +7793,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>",
@@ -7769,6 +7849,30 @@ export class YooGridComponent {
         "text": "",
         "tags": []
       }
+    },
+    "updateGridConfig": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "IEntity": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          },
+          "CellValueChangedEvent": {
+            "location": "import",
+            "path": "@ag-grid-enterprise/all-modules"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -270,7 +270,7 @@ export class YooGridCalendarComponent {
         }
         : {
           datePicker: {
-            text: ((_a = translate('CALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
+            text: ((_a = translate('YOOBICCALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
             // icon: 'calendar',
             click: () => {
               this.showMobileCalendar = !this.showMobileCalendar;
@@ -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;
+}