@yoobic/yobi 8.2.0-2 → 8.2.0-5

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;
+}

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

@@ -0,0 +1,65 @@
+import { translate } from '@shared/utils';
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class YooLayoutSectionsComponent {
+  renderConfig(config) {
+    return h("div", { class: { container: true, alternate: config.isAlternate } },
+      h("div", { class: "title" },
+        translate(config.title),
+        h("div", { class: "flex" }),
+        config.showSeeAll && h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(config.seeAllType) },
+          translate('YOOBICSEEALL'),
+          h("yoo-icon", { color: "app-color", name: "right", size: "small" }))),
+      config.slotName && h("slot", { name: config.slotName }));
+  }
+  render() {
+    var _a;
+    return h(Host, null,
+      h("div", { class: "content" }, (_a = this.config) === null || _a === void 0 ? void 0 : _a.map((c) => this.renderConfig(c))));
+  }
+  static get is() { return "yoo-layout-sections"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["layout-sections.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["layout-sections.css"]
+  }; }
+  static get properties() { return {
+    "config": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ILayoutSectionConfig[]",
+        "resolved": "ILayoutSectionConfig<string>[]",
+        "references": {
+          "ILayoutSectionConfig": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "seeAllClicked",
+      "name": "seeAllClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,208 @@
+/* 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;
+}

package/dist/collection/components/layout/layout-tabs/layout-tabs.js

@@ -0,0 +1,129 @@
+import { translate } from '@shared/utils';
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class YooLayoutTabsComponent {
+  renderHeader() {
+    return !this.hideHeader && h("yoo-header", null,
+      h("yoo-navbar", null,
+        h("yoo-items", { slot: "start" },
+          h("slot", { name: "top-left" })),
+        h("yoo-truncate", null,
+          translate(this.header),
+          " ")));
+  }
+  renderTabs() {
+    return h("yoo-header", { class: "secondary" },
+      h("yoo-tabs", { tabs: this.tabs, initialIndex: this.selectedTabIndex, onTabSelected: (ev) => this.tabSelected.emit(ev.detail) }));
+  }
+  renderBody() {
+    return h("yoo-ion-content", { forceOverscroll: false, class: "bg-light" },
+      h("slot", { name: "content" }));
+  }
+  render() {
+    return h(Host, null,
+      this.renderHeader(),
+      this.renderTabs(),
+      this.renderBody());
+  }
+  static get is() { return "yoo-layout-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["layout-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["layout-tabs.css"]
+  }; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "hideHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-header",
+      "reflect": false
+    },
+    "tabs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ITab[]",
+        "resolved": "ITab[]",
+        "references": {
+          "ITab": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "selectedTabIndex": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-tab-index",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "tabSelected",
+      "name": "tabSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ITabSelectedEvent",
+        "resolved": "ITabSelectedEvent",
+        "references": {
+          "ITabSelectedEvent": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
+    }]; }
+}