@yoobic/yobi 8.6.0-3 → 8.6.0-4

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

@@ -7,58 +7,38 @@ import { isOffline, isRTL, isWeb, pipes, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooAvatarComponent {
   constructor() {
-    /**
-     * Optional prop for changing icon color.
-     */
+    this.fallbackIconSizes = {
+      'extra-small': 'extra-small',
+      'small': 'extra-small',
+      'medium': 'small',
+      'large': 'small',
+      'extra-large': 'medium',
+      'extra-extra-large': 'large'
+    };
     this.color = 'stable';
-    /**
-     * Defines the shape of the avatar.
-     */
     this.frame = 'circle';
-    /**
-     * If ```true```, the user is currently live broadcasting and is able to view now. It presents a live indicator over the avatar.
-     */
     this.hasLiveVideo = false;
-    /**
-     * If ```true```, the user was perviously live broadcasting and the live broadcast is available to watch. Shows a small red square with a white triangle inside.
-     */
     this.hasRecordedVideo = false;
-    /**
-     * If ```true```, the user has a live story available to view. It generates a green ring around the avatar.
-     */
     this.hasStoryToView = false;
-    /**
-     * If ```true```, the user has a viewed live story. It generates a grey ring around the avatar.
-     */
     this.hasViewedStory = false;
-    /**
-     * Whether the image should be displayed instantly or not.
-     */
+    this.icon = undefined;
+    this.iconSize = undefined;
+    this.iconText = undefined;
+    this.imgSrc = undefined;
     this.instant = false;
-    /**
-     * If ```true```, a yellow badge with a star in the top right of an avatar.
-     */
+    this.isOnline = undefined;
     this.isVip = false;
-    /**
-     * Sizes the avatar container.
-     */
+    this.notificationCount = undefined;
+    this.overflowCount = undefined;
     this.size = 'large';
-    /**
-     * If ```true```, it makes a red dot appear in the top left of the avatar.
-     */
+    this.user = undefined;
     this.vipNotification = false;
-    /**
-     * Cloudinary tranform to apply to image
-     */
+    this.tooltip = undefined;
+    this.hasNotifications = undefined;
+    this.valuesColor = undefined;
+    this.contained = undefined;
+    this.showBorder = undefined;
     this.cloudinaryOptions = {};
-    this.fallbackIconSizes = {
-      'extra-small': 'extra-small',
-      'small': 'extra-small',
-      'medium': 'small',
-      'large': 'small',
-      'extra-large': 'medium',
-      'extra-extra-large': 'large'
-    };
   }
   get hasImageData() {
     var _a;

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

@@ -9,40 +9,16 @@ import { getUserDisplayName, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooAvatarsComponent {
   constructor() {
-    /**
-     * Defines the maximum number of avatars to show before overflowing.
-     * @property {maxDisplay}
-     * @type number
-     * @default 10
-     */
+    this.users = undefined;
+    this.colors = undefined;
     this.maxDisplay = 10;
-    /**
-     * Mandatory prop that is used to size the avatar container. The different avatars sizes are 'extra-small', 'small', 'medium' and 'large'.
-     * @property {size}
-     * @type TSize
-     * @default medium
-     */
     this.size = 'medium';
-    /**
-     * Mandatory prop for defining the shape how the avatars will be displayed. The shapes you can use are 'grid', 'stack', 'list', or 'name'. 'list' will take the users array and print the avatar with the user's name next to it. 'name' will take a user and print the first name below the avatar.
-     * @property {layout}
-     * @type TAvatarsLayout
-     * @default grid
-     */
     this.layout = 'grid';
-    /**
-     * If ```true```, passes the user display name into each avatar.
-     * @property {withTooltip}
-     * @type boolean
-     * @default false
-     */
+    this.isOnline = undefined;
+    this.concatCount = undefined;
     this.withTooltip = false;
-    /**
-     * Whether the images should be displayed instantly or not (for Chromatic for example).
-     * @property {instant}
-     * @type boolean
-     * @default false
-     */
+    this.showMore = undefined;
+    this.showBorder = undefined;
     this.instant = false;
   }
   getTooltip(user) {

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

@@ -6,23 +6,10 @@
 import { h, Host } from '@stencil/core';
 export class YooBadgeComponent {
   constructor() {
-    /**
-     * Choose between extra-small and small sizes, for a dot can also select an extra-extra-small that is 2 x 2px
-     */
+    this.text = undefined;
     this.size = 'extra-small';
-    /**
-     * Choose between circle, oval and dot shapes
-     * All badges that have more than 2 characters will be oval
-     * Dot shape cannot have any text inside
-     */
     this.shape = 'circle';
-    /**
-     * Defines badge color, by default is set to danger
-     */
     this.color = 'danger';
-    /**
-     * When set to true hides the badge
-     */
     this.inactive = false;
   }
   componentWillLoad() {

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

@@ -3,25 +3,12 @@ import { forceUpdate, h } from '@stencil/core';
 import { compact, isString } from 'lodash-es';
 export class YooBreadcrumbsComponent {
   constructor() {
-    /**
-     * Set the separator between each items
-     */
     this.separator = '/';
-    /**
-     * Set the maximum number of item to display
-     */
     this.maxVisibleItems = 3;
-    /**
-     * Set to true to show the home icon
-     */
+    this.maxLengthItems = undefined;
     this.showHome = false;
-    /**
-     * Set to false to display long texts
-     */
+    this.homeName = undefined;
     this.truncate = true;
-    /**
-     * Set the path where the current file/folder is located
-     */
     this.items = [];
   }
   async forceUpdate() {

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

@@ -8,40 +8,14 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooButtonComponent {
   constructor() {
-    /**
-     * Color to use from the palette.
-     * For more information on colors, see [theming](https://design.yoobic.com/d/0thDzyUFNm97/product#/guidelines/color).
-     */
     this.color = 'light';
-    /**
-     * Type.
-     */
     this.type = 'button';
-    /**
-     * Size.
-     */
     this.size = 'medium';
-    /**
-     * Shape.
-     */
     this.shape = 'rectangular';
-    /**
-     * Property used to control the transparency of the background.
-     */
     this.fill = 'solid';
-    /**
-     * Controls at which point the ripple point occurs:
-     * - If `bounded` the ripple will occur depending on location of click.
-     * - If `unbounded` ripple will be centered.
-     */
     this.rippleType = 'bounded';
-    /**
-     * If `true`, the user can see animations (hover, ripple).
-     */
     this.animated = false;
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
+    this.customColor = undefined;
     this.disabled = false;
   }
   onClick(event) {

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

@@ -2,10 +2,6 @@ import { isRTL, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooCollapsibleComponent {
   constructor() {
-    this.header = '';
-    this.collapsed = true;
-    this.iconSize = 'small';
-    this.hasArrowIcon = true;
     this.showContent = false;
     this.toggleContent = () => {
       var _a, _b;
@@ -44,6 +40,19 @@ export class YooCollapsibleComponent {
         this.outerContainer.firstChild.firstChild.innerText = translate(this.showContent ? 'YOOBICLESS' : 'YOOBICMORE');
       }
     };
+    this.header = '';
+    this.icon = undefined;
+    this.useButton = undefined;
+    this.iconColor = undefined;
+    this.arrowColor = undefined;
+    this.isPdf = undefined;
+    this.collapsed = true;
+    this.iconSize = 'small';
+    this.hasArrowIcon = true;
+    this.toggleWithArrowOnly = undefined;
+    this.isDeletable = undefined;
+    this.size = undefined;
+    this.slotHeader = undefined;
   }
   deleteItem(ev) {
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();

package/dist/collection/components/1.atoms/empty-state/empty-state.js

@@ -1,6 +1,10 @@
 import { EMPTYSTATE_MAP } from '@shared/interfaces';
 import { getAssetPath, h } from '@stencil/core';
 export class YooEmptyStateComponent {
+  constructor() {
+    this.type = undefined;
+    this.content = undefined;
+  }
   async load() {
     const type = EMPTYSTATE_MAP[this.type] || 'error';
     const path = getAssetPath(`./assets/empty-state/${type}.svg`);

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

@@ -6,14 +6,9 @@ import { translate } from '@shared/utils';
 import { getAssetPath, h } from '@stencil/core';
 export class YooFlagComponent {
   constructor() {
-    /**
-     *  Country code
-     */
     this.country = 'GB';
-    /**
-     *  Select flag shape, either 'rectangular' | 'circle' | 'square'
-     */
     this.shape = 'square';
+    this.hasShadow = undefined;
   }
   get code() {
     return this.country.toLowerCase() === 'en' ? 'gb' : this.country.toLowerCase();

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

@@ -3,6 +3,8 @@ export class YooFlipCardComponent {
   constructor() {
     this.flipDirection = 'vertical';
     this.layout = 'card';
+    this.revealed = undefined;
+    this.cardLoaded = undefined;
   }
   async initCardSize() {
     var _a;

package/dist/collection/components/1.atoms/icon/assets/symbol-defs.svg

@@ -396,6 +396,9 @@
 <symbol id="icon-boost" viewBox="0 0 32 32">
 <path d="M16.011 22.862c2.466 0 4.466-2.031 4.466-4.537s-1.999-4.537-4.466-4.537c-0.868 0-1.802 0.294-2.803 0.881v-6.673c0.036-0.012 1.688-0.339 2.792-0.339 5.891 0 10.667 4.852 10.667 10.838s-4.776 10.838-10.667 10.838c-5.856 0-10.61-4.795-10.666-10.731-0-0.014-0-0.029-0-0.044v-15.892h0.409c3.203 0 5.799 2.61 5.799 5.83v9.916c0.052 2.465 2.033 4.45 4.47 4.45z"></path>
 </symbol>
+<symbol id="icon-pen" viewBox="0 0 32 32">
+<path d="M28 26.072c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333h24zM24.68 2.672c1.092-0.057 2.157 0.35 2.933 1.12 0.774 0.813 1.159 1.922 1.053 3.040-0.061 1.099-0.538 2.133-1.333 2.893v0l-11.827 11.84-0.070 0.057c-0.049 0.035-0.101 0.065-0.157 0.090v0l-0.24 0.133-5.333 1.56c-0.124 0.019-0.25 0.019-0.373 0-0.429 0.017-0.84-0.173-1.104-0.511s-0.35-0.783-0.229-1.195v0l1.667-5.44 0.060-0.123 0.073-0.117c0.036-0.083 0.086-0.16 0.147-0.227v0l11.84-11.787c0.76-0.796 1.795-1.272 2.893-1.333z"></path>
+</symbol>
 <symbol id="icon-brush" viewBox="0 0 32 32">
 <path d="M28 26.072c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333h24zM24.68 2.672c1.092-0.057 2.157 0.35 2.933 1.12 0.774 0.813 1.159 1.922 1.053 3.040-0.061 1.099-0.538 2.133-1.333 2.893v0l-11.827 11.84-0.070 0.057c-0.049 0.035-0.101 0.065-0.157 0.090v0l-0.24 0.133-5.333 1.56c-0.124 0.019-0.25 0.019-0.373 0-0.429 0.017-0.84-0.173-1.104-0.511s-0.35-0.783-0.229-1.195v0l1.667-5.44 0.060-0.123 0.073-0.117c0.036-0.083 0.086-0.16 0.147-0.227v0l11.84-11.787c0.76-0.796 1.795-1.272 2.893-1.333z"></path>
 </symbol>
@@ -855,9 +858,6 @@
 <symbol id="icon-pause" viewBox="0 0 32 32">
 <path d="M16 2.667c-7.36 0-13.333 5.973-13.333 13.333s5.973 13.333 13.333 13.333c7.36 0 13.333-5.973 13.333-13.333s-5.973-13.333-13.333-13.333zM18.667 21.333c-0.736 0-1.333-0.597-1.333-1.333v-8c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333v8c0 0.736-0.597 1.333-1.333 1.333zM13.333 21.333c-0.736 0-1.333-0.597-1.333-1.333v-8c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333v8c0 0.736-0.597 1.333-1.333 1.333z"></path>
 </symbol>
-<symbol id="icon-pen" viewBox="0 0 32 32">
-<path d="M6.643 20.567c0.103 0 0.199 0.031 0.279 0.085l0.074 0.061 4.286 4.291c0.091 0.091 0.146 0.216 0.146 0.354 0 0.185-0.1 0.346-0.251 0.433l-0.096 0.043-6.422 2.142c-0.047 0.016-0.101 0.025-0.156 0.025-0.139 0-0.265-0.056-0.356-0.146s-0.146-0.216-0.146-0.354l0.007-0.083 0.019-0.076 2.141-6.428c0.068-0.203 0.254-0.346 0.476-0.346zM19.235 7.858c0.102 0 0.198 0.030 0.278 0.082l0.075 0.059 4.281 4.287c0.090 0.090 0.146 0.216 0.146 0.354 0 0.104-0.031 0.2-0.085 0.28l-0.061 0.074-10.346 10.245c-0.090 0.090-0.215 0.146-0.353 0.146-0.104 0-0.199-0.031-0.279-0.085l-0.074-0.061-4.282-4.286c-0.090-0.090-0.146-0.216-0.146-0.354 0-0.104 0.031-0.2 0.085-0.28l0.061-0.074 10.346-10.247c0.092-0.087 0.218-0.141 0.354-0.141zM24.476 4c0.968 0 1.847 0.381 2.495 1 0.636 0.639 1.029 1.521 1.029 2.495s-0.393 1.856-1.029 2.495v0l-0.714 0.718c-0.090 0.090-0.215 0.146-0.353 0.146s-0.263-0.056-0.353-0.146v0l-4.28-4.286c-0.090-0.090-0.146-0.216-0.146-0.354s0.056-0.263 0.146-0.354v0l0.711-0.713c0.649-0.621 1.528-1.002 2.496-1.002z"></path>
-</symbol>
 <symbol id="icon-personal-development" viewBox="0 0 32 32">
 <path d="M4.303 23.34c0.415 0.001 0.814-0.151 1.116-0.425l7.172-6.474c0.213-0.194 0.549-0.19 0.756 0.011l2.412 2.323c1.508 1.385 3.88 1.385 5.388 0l4.038-3.886c0.051-0.049 0.12-0.077 0.192-0.077s0.141 0.028 0.192 0.077l1.912 1.834c0.204 0.196 0.481 0.305 0.769 0.305 0.601-0.001 1.088-0.469 1.089-1.047v-6.26c-0.001-0.579-0.488-1.047-1.089-1.047h-6.53c-0.442-0.002-0.841 0.254-1.010 0.648s-0.073 0.846 0.241 1.145l1.919 1.847c0.051 0.049 0.080 0.116 0.080 0.186s-0.029 0.136-0.080 0.185l-4.032 3.882c-0.213 0.203-0.557 0.203-0.77 0l-2.413-2.323c-1.447-1.407-3.797-1.447-5.294-0.089l-7.174 6.469c-0.487 0.441-0.645 1.124-0.399 1.722s0.846 0.992 1.515 0.994v0.002z"></path>
 </symbol>
@@ -1219,7 +1219,7 @@
 <path d="M21.439 2.996c1.145 0.106 1.981 1.129 1.882 2.281l-0.329 3.706h2.609c1.154 0 2.080 0.947 2.080 2.104s-0.926 2.104-2.080 2.104h-2.983l-0.498 5.607h2.414c1.154 0 2.080 0.947 2.080 2.104s-0.926 2.104-2.080 2.104h-2.788l-0.363 4.083c-0.096 1.080-0.991 1.915-2.072 1.915-0.589-0-1.15-0.253-1.543-0.693-0.389-0.436-0.58-1.015-0.528-1.599l0.329-3.706h-4.383l-0.362 4.073c-0.059 0.75-0.51 1.413-1.187 1.735-0.683 0.326-1.487 0.251-2.1-0.194-0.605-0.439-0.93-1.171-0.858-1.908l0.329-3.706h-2.609c-1.154 0-2.080-0.947-2.080-2.104s0.926-2.104 2.080-2.104h2.983l0.498-5.607h-2.414c-1.154 0-2.080-0.947-2.080-2.104s0.926-2.104 2.080-2.104h2.788l0.363-4.085c0.105-1.152 1.113-2.008 2.261-1.902 1.145 0.106 1.981 1.129 1.882 2.281l-0.329 3.706h4.383l0.363-4.085c0.105-1.152 1.113-2.008 2.261-1.902zM19.548 12.176h-6.418l-0.678 7.634h6.418l0.678-7.634z"></path>
 </symbol>
 <symbol id="icon-condition" viewBox="0 0 32 32">
-<path d="M20.852 29.024c-0.398 0.331-0.951 0.402-1.42 0.182s-0.767-0.691-0.767-1.209v-2.666h-9.333c-3.682 0-6.666-2.985-6.666-6.666v-13.332c0-1.473 1.194-2.666 2.666-2.666h2.666c1.473 0 2.666 1.194 2.666 2.666v11.999h7.999v-2.666c-0.001-0.518 0.298-0.989 0.767-1.209s1.022-0.149 1.42 0.182l6.773 5.64c0.611 0.507 0.965 1.259 0.965 2.053s-0.354 1.547-0.965 2.053l-6.773 5.64z"></path>
+<path d="M6.673 4.667l-0.007 14.627c0 0.184 0.149 0.333 0.333 0.333h13c0.184 0 0.333-0.149 0.333-0.333v-4c-0.003-0.542 0.322-1.031 0.822-1.239s1.077-0.092 1.458 0.293l6.333 6.333c0.252 0.25 0.394 0.591 0.394 0.947s-0.142 0.696-0.394 0.947l-6.373 6.36c-0.249 0.254-0.59 0.399-0.947 0.4-0.736 0-1.333-0.597-1.333-1.333v-4c0.011-0.089-0.013-0.178-0.069-0.248s-0.136-0.115-0.225-0.125h-14.053c-1.812 0-3.28-1.468-3.28-3.28l0.007-15.68c0-1.105 0.896-2 2.001-2s1.999 0.895 1.999 1.999c0 0 0 0.001 0 0.001z"></path>
 </symbol>
 <symbol id="icon-restriction" viewBox="0 0 32 32">
 <path d="M21.899 8.738v5.358c0 0.3-0.247 0.544-0.551 0.544s-0.551-0.244-0.551-0.544v-8.688c0-0.912-0.74-1.652-1.652-1.652s-1.652 0.74-1.652 1.652v7.6c0 0.3-0.247 0.544-0.551 0.544s-0.551-0.244-0.551-0.544v-8.688c0-0.912-0.74-1.652-1.652-1.652s-1.652 0.74-1.652 1.652v8.688c0 0.3-0.247 0.544-0.551 0.544s-0.551-0.244-0.551-0.544v-6.511c0-0.912-0.74-1.652-1.652-1.652s-1.652 0.74-1.652 1.652v11.954l-2.23-3.016c-0.661-1.007-1.95-1.344-2.895-0.767-0.942 0.59-1.175 1.876-0.523 2.88 0 0 3.597 5.38 5.129 7.683s4.016 4.104 8.66 4.104c7.689 0 8.508-5.912 8.508-7.662 0-4.311 0-8.622 0-12.933 0-0.948-0.769-1.717-1.717-1.717s-1.717 0.769-1.717 1.717z"></path>

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

@@ -710,7 +710,7 @@ export const icons = [
   {
     name: 'condition',
     paths: [
-      'M20.852 29.024c-0.398 0.331-0.951 0.402-1.42 0.182s-0.767-0.691-0.767-1.209v-2.666h-9.333c-3.682 0-6.666-2.985-6.666-6.666v-13.332c0-1.473 1.194-2.666 2.666-2.666h2.666c1.473 0 2.666 1.194 2.666 2.666v11.999h7.999v-2.666c-0.001-0.518 0.298-0.989 0.767-1.209s1.022-0.149 1.42 0.182l6.773 5.64c0.611 0.507 0.965 1.259 0.965 2.053s-0.354 1.547-0.965 2.053l-6.773 5.64z'
+      'M6.673 4.667l-0.007 14.627c0 0.184 0.149 0.333 0.333 0.333h13c0.184 0 0.333-0.149 0.333-0.333v-4c-0.003-0.542 0.322-1.031 0.822-1.239s1.077-0.092 1.458 0.293l6.333 6.333c0.252 0.25 0.394 0.591 0.394 0.947s-0.142 0.696-0.394 0.947l-6.373 6.36c-0.249 0.254-0.59 0.399-0.947 0.4-0.736 0-1.333-0.597-1.333-1.333v-4c0.011-0.089-0.013-0.178-0.069-0.248s-0.136-0.115-0.225-0.125h-14.053c-1.812 0-3.28-1.468-3.28-3.28l0.007-15.68c0-1.105 0.896-2 2.001-2s1.999 0.895 1.999 1.999c0 0 0 0.001 0 0.001z'
     ]
   },
   {
@@ -2156,7 +2156,7 @@ export const icons = [
   {
     name: 'pen',
     paths: [
-      'M6.643 20.567c0.103 0 0.199 0.031 0.279 0.085l0.074 0.061 4.286 4.291c0.091 0.091 0.146 0.216 0.146 0.354 0 0.185-0.1 0.346-0.251 0.433l-0.096 0.043-6.422 2.142c-0.047 0.016-0.101 0.025-0.156 0.025-0.139 0-0.265-0.056-0.356-0.146s-0.146-0.216-0.146-0.354l0.007-0.083 0.019-0.076 2.141-6.428c0.068-0.203 0.254-0.346 0.476-0.346zM19.235 7.858c0.102 0 0.198 0.030 0.278 0.082l0.075 0.059 4.281 4.287c0.090 0.090 0.146 0.216 0.146 0.354 0 0.104-0.031 0.2-0.085 0.28l-0.061 0.074-10.346 10.245c-0.090 0.090-0.215 0.146-0.353 0.146-0.104 0-0.199-0.031-0.279-0.085l-0.074-0.061-4.282-4.286c-0.090-0.090-0.146-0.216-0.146-0.354 0-0.104 0.031-0.2 0.085-0.28l0.061-0.074 10.346-10.247c0.092-0.087 0.218-0.141 0.354-0.141zM24.476 4c0.968 0 1.847 0.381 2.495 1 0.636 0.639 1.029 1.521 1.029 2.495s-0.393 1.856-1.029 2.495v0l-0.714 0.718c-0.090 0.090-0.215 0.146-0.353 0.146s-0.263-0.056-0.353-0.146v0l-4.28-4.286c-0.090-0.090-0.146-0.216-0.146-0.354s0.056-0.263 0.146-0.354v0l0.711-0.713c0.649-0.621 1.528-1.002 2.496-1.002z'
+      'M28 26.072c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333h24zM24.68 2.672c1.092-0.057 2.157 0.35 2.933 1.12 0.774 0.813 1.159 1.922 1.053 3.040-0.061 1.099-0.538 2.133-1.333 2.893v0l-11.827 11.84-0.070 0.057c-0.049 0.035-0.101 0.065-0.157 0.090v0l-0.24 0.133-5.333 1.56c-0.124 0.019-0.25 0.019-0.373 0-0.429 0.017-0.84-0.173-1.104-0.511s-0.35-0.783-0.229-1.195v0l1.667-5.44 0.060-0.123 0.073-0.117c0.036-0.083 0.086-0.16 0.147-0.227v0l11.84-11.787c0.76-0.796 1.795-1.272 2.893-1.333z'
     ]
   },
   {

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

@@ -3,10 +3,10 @@ import { h, Host } from '@stencil/core';
 import { icons } from './collection';
 export class YooIconComponent {
   constructor() {
-    /**
-     * Defines the icon size
-     */
     this.size = 'medium';
+    this.name = undefined;
+    this.color = undefined;
+    this.customColor = undefined;
   }
   render() {
     var _a, _b, _c;

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

@@ -9,68 +9,27 @@ import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 import { cloudinary } from '../../../utils/helpers/common-helpers';
 export class YooImgComponent {
   constructor() {
-    /**
-     * set to true here to prevent from uploading to cloudinary
-     */
     this.allowCloudinary = true;
-    /**
-     * disable the aspect ratio calculation to leave the css doing instead
-     */
     this.disableAspectRatioCalc = false;
-    /**
-     * specify accepted image ratio, default to square, landscape, pano, protrait ..
-     */
     this.scaledUpRatios = [1, 1.33, 0.75, 3];
-    /**
-     * Options passed to the URL source.
-     *
-     * This property only applies for Cloudinary URL source.
-     */
+    this.mediaDimension = undefined;
     this.cloudinaryOptions = {};
-    /**
-     * If `true` and for `default` type, the CSS `object-fit` is set to `contain`, `cover` otherwise.
-     * If `true` and for `background` type, the CSS `background-size` is set to `contain`, `cover` otherwise.
-     */
     this.contained = false;
-    /**
-     * If `true`, it wont take the clientWidth of the component into account
-     *
-     */
+    this.fallbackIcon = undefined;
     this.ignoreWidth = false;
-    /**
-     * If `true`, it wont take the clientHeight of the component into account
-     *
-     */
     this.ignoreHeight = false;
-    /**
-     * If `true`, it entirely fits the parent while it preserves its aspect ratio.
-     *
-     * This property only applies for `default` type.
-     */
     this.scaledUp = false;
-    /**
-     * Options passed to the injected SVG.
-     * For more information, see [SVG options](https://github.com/iconfu/svg-inject#options).
-     *
-     * This property only applies for `default` type and SVG source.
-     */
+    this.scaledUpInWidth = undefined;
+    this.scaledUpHeightPortraitOnly = undefined;
+    this.scaledUpInHeight = undefined;
     this.svgOptions = {};
-    /**
-     * If `true`, it displays a grayish overlay, and the image is still slightly visible.
-     * For `background` type, it does not cover the slot.
-     */
     this.disabled = false;
-    /**
-     * If `true`, it loads the `src` file instantly.
-     */
     this.instant = false;
-    /**
-     * If `default`, it uses the standard `img` tag.
-     * If `background`, it uses a `div` along with a CSS `background-image`.
-     */
+    this.src = undefined;
     this.type = 'default';
+    this.url = undefined;
     this.loading = false;
-    // if the current image is zoom or not
+    this.imageHeightLowerThanContainer = undefined;
     this.zoomed = false;
   }
   get hasCloudinaryOptions() {

package/dist/collection/components/1.atoms/info-text/info-text.js

@@ -4,6 +4,10 @@
  */
 import { h } from '@stencil/core';
 export class YooInfoTextComponent {
+  constructor() {
+    this.text = undefined;
+    this.icon = undefined;
+  }
   render() {
     return h("div", { class: "outer-container" }, this.icon && h("yoo-icon", { name: this.icon, size: "small", color: "stable" }), this.text || '');
   }

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

@@ -1,13 +1,7 @@
 import { h } from '@stencil/core';
 export class YooItemsComponent {
   constructor() {
-    /**
-     * Flow.
-     */
     this.flow = 'column';
-    /**
-     * Spacing between each item.
-     */
     this.spacing = 8;
   }
   render() {

package/dist/collection/components/1.atoms/line-state/line-state.js

@@ -7,6 +7,9 @@ export class YooLineState {
       'finished': { iconName: 'check', iconColor: 'app-color', topLineColor: 'app-color', bottomLineColor: 'app-color' },
       'locked': { iconName: 'lock', iconColor: 'stable', topLineColor: 'stable', bottomLineColor: 'stable' }
     };
+    this.state = undefined;
+    this.previousState = undefined;
+    this.nextState = undefined;
   }
   componentWillRender() {
     this.state && this.initLineState();

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

@@ -1,14 +1,11 @@
 import { h } from '@stencil/core';
 export class YooLinkComponent {
   constructor() {
-    /**
-     *  If true, the user cannot click on the link
-     */
+    this.href = undefined;
     this.disabled = false;
-    /**
-     * Size of the link (small | medium | large)
-     */
+    this.rel = undefined;
     this.size = 'medium';
+    this.target = undefined;
   }
   render() {
     return (h("a", { href: this.href, rel: this.rel, target: this.target }, h("slot", { name: "start" }), h("yoo-truncate", { id: "text" }, h("slot", null))));

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

@@ -2,19 +2,11 @@ import { translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooLoaderComponent {
   constructor() {
-    /**
-     * If `true`, it spins.
-     */
     this.animated = true;
-    /**
-     * Color to use from the palette.
-     * For more information on colors, see [theming](https://design.yoobic.com/d/0thDzyUFNm97/product#/guidelines/color).
-     */
     this.color = 'app-color';
-    /**
-     * Size.
-     */
     this.size = 'medium';
+    this.hideIcon = undefined;
+    this.text = undefined;
   }
   render() {
     var _a;

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

@@ -3,25 +3,6 @@ import { Build, getAssetPath, h, Host } from '@stencil/core';
 import lottie from 'lottie-web';
 export class YooLottieComponent {
   constructor() {
-    /**
-     * 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.
-     */
-    this.loop = false;
-    /**
-     * Renderer to use for the animation.
-     * For more information, see [Lottie Features](https://github.com/airbnb/lottie-web/wiki/Features).
-     */
-    this.renderer = 'svg';
-    this.shouldRenderPlaceholder = true;
     this.stableFrames = {
       areamanager: 50,
       battle: 50,
@@ -88,6 +69,13 @@ export class YooLottieComponent {
       }
       this.loaded.emit();
     };
+    this.autoplay = false;
+    this.animated = !isChromatic();
+    this.loop = false;
+    this.renderer = 'svg';
+    this.type = undefined;
+    this.initialFrame = undefined;
+    this.shouldRenderPlaceholder = true;
   }
   handleAutoplayChange() {
     this.initialFrame = null;

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

@@ -4,13 +4,10 @@ import { getFromLocalForage } from '../../../utils/cache/localForage';
 import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooMarkdownComponent {
   constructor() {
+    this.treatedContent = this.content;
     this.linkPreviews = [];
-    /**
-     * The markdown content to display inside the component
-     */
     this.content = '';
     this.isVisible = true;
-    this.treatedContent = this.content;
   }
   onContentChanged() {
     this.treatedContent = this.content;

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

@@ -4,17 +4,8 @@ import { getAppContext, querySelectorDeep } from '../../../utils/helpers/common-
 import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
 export class YooNavbarComponent {
   constructor() {
-    /**
-     * If `true` the title will be centered.
-     */
     this.centerTitle = true;
-    /**
-     * If `true` the navbar will have an extra height for the user to swipe up
-     */
     this.swipeable = false;
-    /**
-     * If `true`, CSS grid will be used.
-     */
     this.grid = false;
   }
   resetCenterStyles() {