@yoobic/yobi 8.2.0-0 → 8.2.0-3

package/dist/collection/components/1.atoms/flip-card/flip-card.css

@@ -0,0 +1,282 @@
+/* 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([flip-direction=vertical]) .back {
+  transform: rotateX(180deg);
+}
+
+:host([flip-direction=vertical][revealed]) .inner {
+  transform: rotateX(180deg);
+}
+
+:host([flip-direction=horizontal]) .back {
+  transform: rotateY(180deg);
+}
+
+:host([flip-direction=horizontal][revealed]) .inner {
+  transform: rotateY(180deg);
+}
+
+:host {
+  display: grid;
+  height: fit-content;
+}
+:host .card {
+  height: fit-content;
+  background-color: transparent;
+  perspective: 62.5rem;
+}
+:host .card .inner {
+  position: relative;
+  margin: 0 auto;
+  text-align: center;
+  transform-style: preserve-3d;
+  transition: height 0.6s, transform 0.6s;
+}
+:host .card .inner .front,
+:host .card .inner .back {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  cursor: pointer;
+  transition: height 0.6s;
+}
+
+:host([layout=card]) {
+  --front-card-background-color: var(--light, #ffffff);
+  --back-card-background-color: var(--app-color, #5a30f4);
+  --front-card-text-color: var(--dark, #000000);
+  --back-card-text-color: var(--light, #ffffff);
+}
+:host([layout=card]) .card {
+  transform: scale(0.95);
+  opacity: 0;
+  transition: transform 0.4s, opacity 0.3s;
+}
+:host([layout=card]) .card .inner {
+  width: 100%;
+  height: 100%;
+}
+:host([layout=card]) .card .inner .front,
+:host([layout=card]) .card .inner .back {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
+}
+:host([layout=card]) .card .inner .front {
+  color: var(--front-card-text-color);
+  background-color: var(--front-card-background-color);
+}
+:host([layout=card]) .card .inner .back {
+  color: var(--back-card-text-color);
+  background-color: var(--back-card-background-color);
+}
+:host([layout=card]) .card.loaded {
+  transform: scale(1);
+  opacity: 1;
+}

package/dist/collection/components/1.atoms/flip-card/flip-card.js

@@ -0,0 +1,144 @@
+import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
+export class YooFlipCardComponent {
+  constructor() {
+    this.flipDirection = 'vertical';
+    this.layout = 'card';
+  }
+  async initCardSize() {
+    var _a;
+    const isCardLayout = this.layout === 'card';
+    const cardInnerElement = this.cardElement.querySelector('.inner');
+    const slotContents = (_a = Array.from(cardInnerElement.querySelectorAll('slot'))) === null || _a === void 0 ? void 0 : _a.map(slot => { var _a, _b; return (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot)) === null || _b === void 0 ? void 0 : _b[0]; });
+    if ((slotContents === null || slotContents === void 0 ? void 0 : slotContents.length) == 2) {
+      const slotHeights = slotContents.map(slot => slot === null || slot === void 0 ? void 0 : slot.clientHeight);
+      const largestHeight = Math.round(slotHeights.sort((a, b) => a - b).reverse()[0]);
+      const subCardsElements = [cardInnerElement, ...Array.from(cardInnerElement.querySelectorAll('div'))];
+      subCardsElements.forEach(e => e && Object.assign(e.style, {
+        height: `${Math.max(largestHeight, isCardLayout && 80) + (isCardLayout ? 16 : 0)}px`
+      }));
+      !isCardLayout && Object.assign(cardInnerElement.style, { width: `${slotContents[0].clientWidth}px` });
+    }
+  }
+  componentDidLoad() {
+    this.initCardSize();
+  }
+  revealCard() {
+    this.revealed = !this.revealed;
+    this.cardRevealed.emit(this.revealed);
+  }
+  renderCard() {
+    return h("div", { class: { card: true, loaded: this.cardLoaded }, ref: el => this.cardElement = el, onClick: () => this.revealCard(), onTransitionEnd: () => this.cardLoaded = true },
+      h("div", { class: "inner" },
+        h("div", { class: "front" },
+          h("slot", { name: "front" })),
+        h("div", { class: "back" },
+          h("slot", { name: "back" }))));
+  }
+  render() {
+    return h(Host, null, this.renderCard());
+  }
+  static get is() { return "yoo-flip-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-card.css"]
+  }; }
+  static get properties() { return {
+    "flipDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'vertical' | 'horizontal'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-direction",
+      "reflect": true,
+      "defaultValue": "'vertical'"
+    },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'card' | 'unset'",
+        "resolved": "\"card\" | \"unset\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "layout",
+      "reflect": true,
+      "defaultValue": "'card'"
+    },
+    "revealed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "revealed",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "cardLoaded": {}
+  }; }
+  static get events() { return [{
+      "method": "cardRevealed",
+      "name": "cardRevealed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "initCardSize": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/1.atoms/loader/loader.css

@@ -261,6 +261,48 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   stroke: var(--warning, #ed6e33);
 }
 
+:host([size=extra-small]) svg {
+  width: var(--icon-size-01, 1rem);
+}
+:host([size=extra-small]) p {
+  font-size: var(--font-size-12, 0.75rem);
+}
+
+:host([size=small]) svg {
+  width: var(--icon-size-02, 1.5rem);
+}
+:host([size=small]) p {
+  font-size: var(--font-size-12, 0.75rem);
+}
+
+:host([size=medium]) svg {
+  width: var(--icon-size-03, 2rem);
+}
+:host([size=medium]) p {
+  font-size: var(--font-size-14, 0.875rem);
+}
+
+:host([size=large]) svg {
+  width: var(--icon-size-04, 3rem);
+}
+:host([size=large]) p {
+  font-size: var(--font-size-16, 1rem);
+}
+
+:host([size=extra-large]) svg {
+  width: var(--icon-size-05, 4rem);
+}
+:host([size=extra-large]) p {
+  font-size: var(--font-size-18, 1.125rem);
+}
+
+:host([size=extra-extra-large]) svg {
+  width: var(--icon-size-06, 5rem);
+}
+:host([size=extra-extra-large]) p {
+  font-size: var(--font-size-20, 1.25rem);
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -293,27 +335,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: none;
 }
 
-:host([size=small]) svg {
-  width: 1.5rem;
-}
-:host([size=small]) p {
-  font-size: var(--font-size-12, 0.75rem);
-}
-
-:host([size=medium]) svg {
-  width: 2rem;
-}
-:host([size=medium]) p {
-  font-size: var(--font-size-14, 0.875rem);
-}
-
-:host([size=large]) svg {
-  width: 3rem;
-}
-:host([size=large]) p {
-  font-size: var(--font-size-16, 1rem);
-}
-
 :host(.absolute) {
   position: absolute;
   top: 0;

package/dist/collection/components/1.atoms/loader/loader.js

@@ -80,10 +80,10 @@ export class YooLoaderComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "TBaseSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "original": "TSize",
+        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
         "references": {
-          "TBaseSize": {
+          "TSize": {
             "location": "import",
             "path": "@shared/interfaces"
           }

package/dist/collection/components/1.atoms/lottie/lottie.js

@@ -1,4 +1,4 @@
-import { translate } from '@shared/utils';
+import { isChromatic, translate } from '@shared/utils';
 import { Build, Component, Event, getAssetPath, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import lottie from 'lottie-web';
 export class YooLottieComponent {
@@ -7,6 +7,10 @@ export class YooLottieComponent {
      * If `true`, it plays the animation as soon as it is loaded.
      */
     this.autoplay = false;
+    /**
+     * Animation will start only if animated is `true`
+     */
+    this.animated = !isChromatic();
     /**
      * If `true`, the animation runs infinitely.
      * If a number, the animation runs for a specific amount of loops.
@@ -18,6 +22,30 @@ export class YooLottieComponent {
      */
     this.renderer = 'svg';
     this.shouldRenderPlaceholder = true;
+    this.stableFrames = {
+      builtin: 35,
+      chat: 290,
+      check: 35,
+      confetti: 50,
+      copy: 0,
+      dashboard: 140,
+      fail: 130,
+      feed: 515,
+      heart: 15,
+      learning: 300,
+      medal: 45,
+      notification: 245,
+      notquite: 45,
+      rating: 100,
+      reject: 55,
+      startfromscratch: 35,
+      thankyou: 100,
+      thumbsup: 100,
+      time: 25,
+      todo: 330,
+      transition: 0,
+      trophy: 70
+    };
     this.onDOMLoaded = () => {
       var _a, _b;
       if (this.initialFrame) {
@@ -97,6 +125,9 @@ export class YooLottieComponent {
     this.load();
   }
   connectedCallback() {
+    if (!this.animated) {
+      this.initialFrame = this.stableFrames[this.type];
+    }
     this.load();
   }
   disconnectedCallback() {
@@ -154,6 +185,24 @@ export class YooLottieComponent {
       "reflect": false,
       "defaultValue": "false"
     },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Animation will start only if animated is `true`"
+      },
+      "attribute": "animated",
+      "reflect": false,
+      "defaultValue": "!isChromatic()"
+    },
     "loop": {
       "type": "any",
       "mutable": false,

package/dist/collection/components/1.atoms/markdown/markdown.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;

package/dist/collection/components/1.atoms/truncate/truncate.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;