@yoobic/yobi 8.6.0-3 → 8.6.0-5

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

@@ -4,38 +4,6 @@ import { isBoolean, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooTabsComponent {
   constructor() {
-    /**
-     * Tabs array.
-     */
-    this.tabs = [];
-    /**
-     * Boolean which enables the editable mode.
-     */
-    this.isEditable = false;
-    /**
-     * If false, disables automatic scrolling into view when switching between tabs
-     */
-    this.autoScroll = true;
-    /**
-     * Editable options button array.
-     */
-    this.editableOptions = () => [];
-    /**
-     * Extra tabs array in editable mode.
-     */
-    this.extraTabs = [];
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    this.disabled = false;
-    /**
-     * Enable ripple click effect
-     */
-    this.rippleEffect = true;
-    /**
-     * Initial index when the tabs is loaded.
-     */
-    this.initialIndex = 0;
     this.currentIndex = 0;
     this.tabElements = [];
     this.notifElements = [];
@@ -55,6 +23,17 @@ export class YooTabsComponent {
       this.openedTabs[index] = true;
       this.setTab(index);
     };
+    this.tabs = [];
+    this.isEditable = false;
+    this.autoScroll = true;
+    this.vertical = undefined;
+    this.editableOptions = () => [];
+    this.extraTabs = [];
+    this.disabled = false;
+    this.rippleEffect = true;
+    this.initialIndex = 0;
+    this.showBadges = undefined;
+    this.tabOpenedIndicator = undefined;
   }
   onInitialIndexChanged(newIndex) {
     this.setTab(newIndex);

package/dist/collection/components/1.atoms/tabs-slides/tabs-slides.js

@@ -1,14 +1,6 @@
 import { h, Host, readTask, writeTask } from '@stencil/core';
 export class YooTabsSlidesComponent {
   constructor() {
-    /**
-     * Tabs array.
-     */
-    this.tabs = [];
-    /**
-     * Initial index when the tabs is loaded.
-     */
-    this.initialIndex = 0;
     this.currentIndex = 0;
     this.tabElements = [];
     this.tabClicked = (index) => {
@@ -24,6 +16,8 @@ export class YooTabsSlidesComponent {
       }
       this.setTab(index);
     };
+    this.tabs = [];
+    this.initialIndex = 0;
   }
   /**
    * Navigates to a tab programmatically

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

@@ -8,16 +8,16 @@ import { h } from '@stencil/core';
 import { changeRgbOpacity } from '../../../utils/helpers/color-helpers';
 export class YooTagComponent {
   constructor() {
-    /**
-     * Set the size of the tag, can select between small and medium.
-     *
-     * If icon is set, then can change the size to large and extra large as well
-     */
+    this.closable = undefined;
     this.size = 'small';
-    /**
-     * To use as text/icon color instead of the default value, when a custom color has been defined
-     */
+    this.color = undefined;
+    this.icon = undefined;
+    this.noBackground = undefined;
+    this.iconOnlySize = undefined;
+    this.iconOnlyColor = undefined;
+    this.customColor = undefined;
     this.customColorOpacity = 0.1;
+    this.textCustomColor = undefined;
   }
   onClose() {
     this.closed.emit(true);

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

@@ -1,6 +1,11 @@
 import { h, Host } from '@stencil/core';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 export class YooTextComponent {
+  constructor() {
+    this.extraConversion = undefined;
+    this.content = undefined;
+    this.safeContent = undefined;
+  }
   async componentWillRender() {
     await this.sanitizeContent();
   }

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

@@ -10,39 +10,27 @@ import tippy, { roundArrow } from 'tippy.js';
 import { focusContentEditable } from '../../../utils/helpers/form-input-helpers';
 export class YooTooltipComponent {
   constructor() {
-    /**
-     * Set this props to be able to retrieve the role of the tooltip for the closing tooltip logic
-     */
+    this.tippyInstance = null;
+    this.hideOnClick = undefined;
+    this.extraButtons = undefined;
     this.name = '';
-    /**
-     * This prop will check whether a user is a publsiher
-     */
+    this.maxCharacters = undefined;
     this.isPublisher = false;
-    /**
-     * Set to true to display tooltip when the component is created
-     */
+    this.clickable = undefined;
     this.showOnCreate = false;
-    /**
-     * This props set the maxwidth of the tooltip content, from 0 to 1
-     */
     this.coeffMaxWidth = 0.8;
-    /**
-     * This prop will check whether the tooltip refers to requesting access
-     */
+    this.maxWidth = undefined;
+    this.hoverable = undefined;
+    this.delay = undefined;
+    this.color = undefined;
+    this.size = undefined;
     this.requestAccess = false;
-    /**
-     * This prop will force the editable tooltip to be in editable mode even if there is content
-     */
+    this.owner = undefined;
     this.forceEditable = false;
-    /**
-     * This props specify where the tooltip will be displayed : top, right, bottom, left
-     */
     this.placement = 'auto';
-    /**
-     * Set this props to true to make the content editable
-     */
     this.editable = false;
-    this.tippyInstance = null;
+    this.content = undefined;
+    this.isReadonly = undefined;
   }
   async getInstance() {
     return this.tippyInstance || this.configureTooltip();

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

@@ -3,43 +3,6 @@ import { h, Host } from '@stencil/core';
 import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooTruncateComponent {
   constructor() {
-    /**
-     * Controls collapsed state;
-     */
-    this.collapsed = true;
-    /**
-     * Controls the length of the truncated text.
-     * By default this is the length in characters unless `byWords = true`.
-     */
-    this.maxLength = 150;
-    /**
-     * Controls the truncation strategy.
-     * If `true`, the `maxLength` will be a length in words.
-     * If `false`, the `maxLength` will be a length in characters.
-     */
-    this.byWords = false;
-    /**
-     * Piece of string placed at the end of a truncated text.
-     * Can be an html string.
-     */
-    this.ellipsis = '...';
-    /**
-     * Controls the visibility of the ellipsis button.
-     */
-    this.showEllipsisButton = false;
-    /**
-     * Used more icon instead of text as ellipsis button.
-     */
-    this.showEllipsisIcon = false;
-    this.ellipsisIconSize = 'small';
-    /**
-     * Alters how the <br> tag is handled for markdown
-     */
-    this.replaceBreakWithClosed = false;
-    /**
-    * Controls the visibility of the ellipsis button.
-    */
-    this.showEllipsisButtonInternal = false;
     this.toggleCollapse = (e) => {
       e.stopPropagation();
       this.collapsed = !this.collapsed;
@@ -55,6 +18,17 @@ export class YooTruncateComponent {
     this.getMoreIconHtml = () => {
       return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="${this.ellipsisIconSize}" /></span>`;
     };
+    this.collapsed = true;
+    this.maxLength = 150;
+    this.byWords = false;
+    this.ellipsis = '...';
+    this.showEllipsisButton = false;
+    this.showEllipsisIcon = false;
+    this.ellipsisIconSize = 'small';
+    this.content = undefined;
+    this.replaceBreakWithClosed = false;
+    this.forceMoreButtonDisplayContent = undefined;
+    this.showEllipsisButtonInternal = false;
   }
   onShowEllipsisButtonChanged() {
     this.showEllipsisButtonInternal = this.showEllipsisButton;

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

@@ -7,12 +7,6 @@ import { h, Host } from '@stencil/core';
 //* - When not using @prop content, can only hold one child inside <slot />
 export class YooTruncatedLineComponent {
   constructor() {
-    // Whether or not to render tooltip or just truncate
-    this.withTooltip = true;
-    // Placement on where the tooltip should pop up
-    this.tooltipPlacement = 'auto';
-    // Full text content to be truncated / tooltip
-    this.content = '';
     this.renderContentWithTooltip = () => {
       return (h("yoo-tooltip", { ref: (el) => this.tooltipElement = el, content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
     };
@@ -24,6 +18,9 @@ export class YooTruncatedLineComponent {
         this.tooltipElement.toggleHoverable(isEnabled);
       }
     };
+    this.withTooltip = true;
+    this.tooltipPlacement = 'auto';
+    this.content = '';
   }
   componentDidLoad() {
     this.contentElement && this.toggleTooltip(isTruncated(this.contentElement));

package/dist/collection/components/2.molecules/accordion/accordion.js

@@ -5,38 +5,21 @@ import { getButton } from '../../../utils/button.factory';
 import { execHandlerAndStopEvent } from '../../../utils/helpers/common-helpers';
 export class YooAccordionComponent {
   constructor() {
-    /**
-     * Set to false to disable animation transition in the component
-     */
+    this.accordionContentContainers = [];
+    this.accordionSelectors = [];
+    this.shouldAnimateAfterReRender = false;
     this.animated = !isChromatic();
-    /**
-     * adds a search filter to the master title
-     */
+    this.masterTitle = undefined;
     this.masterSearch = false;
-    /**
-     * Enable or disable multiple selection
-     */
     this.allowMultipleSelection = false;
-    /**
-     * If true, each item will have a border bottom of 0.0625rem
-     */
+    this.iconPairLeft = undefined;
+    this.iconPairRight = undefined;
     this.showBottomBorder = false;
-    /**
-     * If set to true, this variable will force the accordion to update itself if there is a change in the entries variable
-     */
+    this.isSubMenu = undefined;
     this.forceEntryUpdate = false;
-    /**
-     * If set to true, there will be no effect when clicking the accordion titles. The accordion will remain in the same state
-     */
     this.disabled = false;
-    /**
-     * Entries are the strings that will populate each row of the accordion
-     */
     this.entries = [];
     this.items = [];
-    this.accordionContentContainers = [];
-    this.accordionSelectors = [];
-    this.shouldAnimateAfterReRender = false;
   }
   onTitlesChange() {
     const newTitle = this.entries.findIndex((item, index) => { var _a; return (item === null || item === void 0 ? void 0 : item.title) && ((_a = this.items[index]) === null || _a === void 0 ? void 0 : _a.title) && item.title !== this.items[index].title; });

package/dist/collection/components/2.molecules/action-sheet/action-sheet.js

@@ -19,18 +19,6 @@ const LIFECYCLE_MAP = {
 };
 export class YooActionSheetComponent {
   constructor() {
-    /**
-     * A array of buttons to populate the action sheet.
-     */
-    this.buttons = [];
-    /**
-     * Used, along with the z-index of the action sheet to ensure the action sheet always on top of other items on screen.
-     */
-    this.overlayId = 0;
-    /**
-     * If ```false```, the action sheet can/will be closed and not shown.
-     */
-    this.preventOverlayClick = false;
     this.actionClickDivs = [];
     this.preventDefault = (e) => {
       try {
@@ -42,6 +30,14 @@ export class YooActionSheetComponent {
     };
     this.DEFAULT_ANIMATION = 'slide_down';
     this.onReady = Promise.resolve();
+    this.heading = undefined;
+    this.buttons = [];
+    this.cssClass = undefined;
+    this.animated = undefined;
+    this.keyboardClose = undefined;
+    this.overlayId = 0;
+    this.preventOverlayClick = false;
+    this.outerDiv = undefined;
   }
   lifecycle(modalEvent) {
     lifecycleEvents(modalEvent, this.usersElement, LIFECYCLE_MAP);

package/dist/collection/components/2.molecules/alert/alert.js

@@ -12,6 +12,21 @@ const LIFECYCLE_MAP = {
 export class YooAlertComponent {
   constructor() {
     this.ICON_COLORS = ['app-color', 'warning', 'danger', 'success'];
+    this.header = undefined;
+    this.message = undefined;
+    this.link = undefined;
+    this.actionButton = undefined;
+    this.buttons = undefined;
+    this.rename = undefined;
+    this.icon = undefined;
+    this.cssClass = undefined;
+    this.img = undefined;
+    this.renameValue = undefined;
+    this.badge = undefined;
+    this.footer = undefined;
+    this.animated = undefined;
+    this.keyboardClose = undefined;
+    this.overlayId = undefined;
   }
   lifecycle(modalEvent) {
     if ((modalEvent === null || modalEvent === void 0 ? void 0 : modalEvent.type) === 'ionAlertDidPresent') {

package/dist/collection/components/2.molecules/audio-player/audio-player.js

@@ -3,24 +3,15 @@ import { h, Host } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 export class YooAudioPlayerComponent {
   constructor() {
-    /**
-     * Disable state
-     */
     this.disabled = false;
-    /**
-     * Set to true to play the audio on load
-     */
     this.preload = 'metadata';
-    /**
-     * Set to true to display the duration/current time of the audio
-     */
+    this.boost = undefined;
     this.displayTimeOnly = false;
-    /**
-     * Reinit the player when being within in a slide
-     */
     this.isVisible = false;
+    this.src = undefined;
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
+    this.duration = undefined;
   }
   onVisibilityChanged() {
     this.pause();

package/dist/collection/components/2.molecules/banner/banner.js

@@ -2,10 +2,14 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooBannerComponent {
   constructor() {
-    /**
-     * Size of the banner
-     */
+    this.leftIcon = undefined;
+    this.closable = undefined;
+    this.closeIcon = undefined;
+    this.fill = undefined;
     this.size = 'medium';
+    this.link = undefined;
+    this.linkText = undefined;
+    this.target = undefined;
     this.closed = false;
   }
   async close(event) {

package/dist/collection/components/2.molecules/buttons-list/buttons-list.js

@@ -4,6 +4,9 @@
  */
 import { h } from '@stencil/core';
 export class YooButtonsListComponent {
+  constructor() {
+    this.buttons = undefined;
+  }
   showButton(button) {
     if (!button.isVisible) {
       return true;

package/dist/collection/components/2.molecules/calendar/calendar.js

@@ -5,12 +5,6 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 const MONTHS_TO_ADD = 3;
 export class YooCalendarComponent {
   constructor() {
-    this.displayMode = 'month';
-    this.markers = [];
-    this.modernDatePicker = false;
-    this.isRange = false;
-    this.size = 'medium';
-    this.slideChanged = true;
     this.weekdays = getWeekDays();
     this.renderedMonths = [-1, 0, 1];
     this.initialSlide = 1;
@@ -31,6 +25,22 @@ export class YooCalendarComponent {
         value: 'month'
       }
     ];
+    this.displayMode = 'month';
+    this.markers = [];
+    this.isDatePicker = undefined;
+    this.modernDatePicker = false;
+    this.maxDate = undefined;
+    this.minDate = undefined;
+    this.isRange = false;
+    this.dateRange = undefined;
+    this.size = 'medium';
+    this.activeDay = undefined;
+    this.closingDays = undefined;
+    this.showDone = undefined;
+    this.slideChanged = true;
+    this.activeDayState = undefined;
+    this.rangeLowerBound = undefined;
+    this.rangeUpperBound = undefined;
   }
   get isMonthDisplay() {
     return this.displayMode === 'month';

package/dist/collection/components/2.molecules/content/content.js

@@ -2,31 +2,13 @@ import { findParent, isForceScrollbar } from '@shared/utils';
 import { forceUpdate, h, Host, readTask } from '@stencil/core';
 export class YooIonContentComponent {
   constructor() {
-    // mode!: Mode;
-    // @Prop() color?: Color;
-    /**
-     * Set the initial scroll top position.
-     * The content must be scrollable (`scrollEnabled` set to `true`).
-     */
+    this.cTop = -1;
+    this.cBottom = -1;
     this.initialScrollTop = 0;
-    /**
-     * If true, the content will scroll behind the headers
-     * and footers. This effect can easily be seen by setting the toolbar
-     * to transparent.
-     */
     this.fullscreen = false;
-    /**
-     * By default `ion-content` uses an `ion-scroll` under the hood to implement scrolling,
-     * if you want to disable the content scrolling for a given page, set this property to `false`.
-     */
+    this.forceOverscroll = undefined;
     this.scrollEnabled = true;
-    /**
-     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-     * and start listening from (ionScroll), set this property to `true`.
-     */
     this.scrollEvents = false;
-    this.cTop = -1;
-    this.cBottom = -1;
   }
   onNavChanged() {
     this.resize();

package/dist/collection/components/2.molecules/context-menu/context-menu.js

@@ -3,28 +3,21 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooContextMenuComponent {
   constructor() {
-    /**
-     * Property used to control where the context menu will show. The options are 'below' & 'above'.
-     */
-    this.placement = 'below';
-    /**
-     * If ```true```, the user will be able to select multiple items in the menu.
-     */
-    this.multipleSelection = false;
-    /**
-     * Display the context menu dialog on hover if true.
-     * Display it on click if false.
-     */
-    this.hoverMode = false;
-    /**
-     * Show an arrow cursor to the specified position.
-     */
-    this.cursorPosition = 'none';
     this.onClick = (event) => {
       if (!this.hoverMode && !this.disabled) {
         showContextMenu(event, this.baseContextMenuProps);
       }
     };
+    this.hostSelector = undefined;
+    this.contentButtons = undefined;
+    this.placement = 'below';
+    this.dialogTitle = undefined;
+    this.subDialogTitle = undefined;
+    this.multipleSelection = false;
+    this.tooltipContent = undefined;
+    this.disabled = undefined;
+    this.hoverMode = false;
+    this.cursorPosition = 'none';
   }
   get contextMenuDialogElement() {
     return document.querySelector('yoo-context-menu-dialog');

package/dist/collection/components/2.molecules/context-menu-dialog/context-menu-dialog.css

@@ -220,7 +220,7 @@ svg:not(:root) {
   justify-content: center;
   min-width: var(--width-dropdown-content);
   max-width: var(--max-width-dropdown-content);
-  font-size: var(--font-size-16, 1rem);
+  font-size: var(--font-size-14, 0.875rem);
   background: var(--light, #ffffff);
   border: solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);
   border-radius: var(--border-radius-04, 0.25rem);
@@ -606,4 +606,8 @@ svg:not(:root) {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+
+:host(.font-large) {
+  font-size: var(--font-size-16, 1rem);
 }

package/dist/collection/components/2.molecules/context-menu-dialog/context-menu-dialog.js

@@ -4,17 +4,12 @@ import { isFunction } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooContextMenuDialogComponent {
   constructor() {
-    /**
-     * If ```false```, the user will not be allowed to select multiple buttons.
-     */
+    this.contentButtons = undefined;
     this.multipleSelection = false;
-    /**
-    * Array of items when the component is loaded.
-    */
+    this.dialogTitle = undefined;
+    this.subDialogTitle = undefined;
+    this.xPosition = undefined;
     this.initialSelectedItems = [];
-    /**
-    * Show an arrow cursor to the specified position.
-    */
     this.cursorPosition = 'none';
     this.selectedItems = [];
   }

package/dist/collection/components/2.molecules/course-info-card/course-info-card.js

@@ -2,6 +2,9 @@ import { translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooCourseInfoCardComponent {
+  constructor() {
+    this.learningPlan = undefined;
+  }
   get courseKpis() {
     const kpisToDisplay = {
       users: 'number',

package/dist/collection/components/2.molecules/infinite-scroll/infinite-scroll.js

@@ -2,14 +2,14 @@ import { findParent } from '@shared/utils';
 import { h, Host, readTask, writeTask } from '@stencil/core';
 export class YooIonInfiniteScrollComponent {
   constructor() {
-    this.position = 'bottom';
-    this.threshold = '15%';
-    this.disabled = false;
-    this.isLoading = false;
     this.thrPx = 0;
     this.thrPc = 0;
     this.didFire = false;
     this.isBusy = false;
+    this.position = 'bottom';
+    this.threshold = '15%';
+    this.disabled = false;
+    this.isLoading = false;
   }
   /**
    * The threshold distance from the bottom

package/dist/collection/components/2.molecules/infinite-scroll-content/infinite-scroll-content.js

@@ -2,10 +2,8 @@ import { isWeb } from '@shared/utils';
 import { h } from '@stencil/core';
 export class YooInfiniteScrollContentComponent {
   constructor() {
-    /**
-     * An animated SVG spinner that shows while loading.
-     */
     this.loadingSpinner = true;
+    this.loadingText = undefined;
   }
   render() {
     return (h("div", { class: "infinite-loading" }, this.loadingSpinner && h("yoo-loader", { size: isWeb(this.host) ? 'small' : 'medium' }), this.loadingText && (h("div", { class: "infinite-loading-text", innerHTML: this.loadingText }))));

package/dist/collection/components/2.molecules/item/item.js

@@ -4,26 +4,19 @@ import { getAppContext, querySelectorAllDeep } from '../../../utils/helpers/comm
 import { createColorClasses, hostContext } from '../../../utils/ionic/theme';
 export class YooIonItemComponent {
   constructor() {
-    /**
-     * The mode determines which platform styles to use.
-     * Possible values are: `"ios"` or `"md"`.
-     */
-    /**
-     * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`.
-     */
-    this.button = false;
-    /**
-     * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`.
-     */
-    this.detailIcon = 'ios-arrow-forward';
-    /**
-     * If true, the user cannot interact with the item. Defaults to `false`.
-     */
-    this.disabled = false;
     this.itemStyles = {};
     this.onTouchStart = () => addTapped(this.outerDiv, this.el);
     this.onTouchEnd = () => removeTapped(this.outerDiv, this.el);
     this.onTouchMove = () => removeTapped(this.outerDiv, this.el);
+    this.color = undefined;
+    this.button = false;
+    this.detail = undefined;
+    this.detailIcon = 'ios-arrow-forward';
+    this.disabled = false;
+    this.href = undefined;
+    this.lines = undefined;
+    this.state = undefined;
+    this.routerDirection = undefined;
   }
   itemStyle(ev) {
     ev.stopPropagation();

package/dist/collection/components/2.molecules/item-divider/item-divider.js

@@ -3,6 +3,9 @@ import { h, Host } from '@stencil/core';
 import { querySelectorAllDeep } from '../../../utils/helpers/common-helpers';
 import { createColorClasses } from '../../../utils/ionic/theme';
 export class YooIonItemDividerComponent {
+  constructor() {
+    this.color = undefined;
+  }
   componentDidLoad() {
     // Change the button size to small for each button in the item
     // unless the size is explicitly set