@yoobic/yobi 8.6.0-2 → 8.6.0-4

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -5,79 +5,25 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { DEFAULT_COLOR_THRESHOLDS, DEFAULT_SHAPES } from './progress-bar.constants';
 export class YooProgressBarComponent {
   constructor() {
-    /**
-     * Used to set custom colors based on custom range of percentage as following
-     * to 30% => var(--danger) || red || rgb(255, 0, 0) || #FF0000,
-     * to 70 => var(--warning) || etc ..
-     */
     this.colorsRepartition = DEFAULT_COLOR_THRESHOLDS;
-    /**
-     * If `true`, the user can see animations.
-     */
+    this.markers = undefined;
     this.animated = true;
-    /**
-     * Used for displaying the proper progressbar shape : can be a line or circle or a semi-circle
-     * This Prop is fundamental otherwise the component won't show
-     */
     this.shape = 'line';
-    /**
-     * This prop apply only for circle & semi-circle progress
-     * Set an angle from 0 to 360
-     * By default, the progress starts from an angle of 90, meaning from the top (eq 12h)
-     */
     this.angle = 90;
-    /**
-     * Used to set the proper unit for the value displayed with the progressbar
-     * the value comes by default in percentage but can be points, step or nothing to display
-     */
     this.metric = 'percentage';
-    /**
-     * Used to set the proper x-position of the value based on the progressbar
-     * the value can be either on the right or on the left of the bar
-     * or in center if in placed on the top or on the bottom of the bar
-     */
     this.horizontalAlign = 'right';
-    /**
-     * Used to set the proper y-position of the value based on the progressbar
-     * the value can be either on the top, the middle or the bottom of the bar
-     */
     this.verticalAlign = 'middle';
-    /**
-     * Used to either display a dynamic value color based on its value (if enabled)
-     * Do the same logic than for the percentProgressColorScheme property
-     */
     this.percentValueColorScheme = false;
-    /**
-     * Used to display or not null progress values
-     * If enabled, a null progress value will come to '-',
-     * if not it will be turn to 0
-     */
     this.allowNonAvailableValue = false;
-    /**
-     * This property allow to hide or not the value
-     */
+    this.maxValue = undefined;
     this.hideProgressValue = false;
-    /**
-     * This property will allow not to see the animation in case of a decreasing progress
-     */
     this.disableBackProgressAnimation = false;
-    /**
-     * This property will allow to receive a boolean type event once the progress has finished
-     */
     this.listenToCompleteProgress = false;
-    /**
-     * This property will allow to receive a number type event corresponding of the actual progress value
-     * in the progress animation
-     */
     this.listenToProgress = false;
-    /**
-     * This property allow to display a number of decimal after the coma in the progress value display
-     */
     this.numberDecimalAfterComaProgressValue = 0;
-    /**
-     * This property allows the progress to display as N/A when the progress is null
-     */
     this.displayNAValue = false;
+    this.progressAnimationDuration = undefined;
+    this.value = undefined;
   }
   onProgressAnimationDurationChanged() {
     this.setProgress();

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

@@ -7,10 +7,10 @@ import { translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooProgressLoaderComponent {
   constructor() {
-    /**
-     * If `true`, the user can see animations.
-     */
     this.animated = true;
+    this.progress = undefined;
+    this.logo = undefined;
+    this.progressBarClass = undefined;
   }
   render() {
     return h(Host, { class: { [`${this.progressBarClass}-color`]: true } }, h("div", { class: "progress-loader-container" }, h("div", { class: "logo-container" }, h("img", { src: this.logo, height: "75", alt: "YOOBIC Logo" })), h("div", { class: "progress-bar-container" }, h("yoo-progress-bar", { animated: this.animated, value: this.progress })), h("div", { class: "progress-text-container" }, h("span", { class: "progress-text" }, translate('LIVEUPDATEPROGRESS')))));

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

@@ -3,65 +3,25 @@ import { clamp, createGesture } from '../../../utils/gesture';
 import { debounceEvent } from '../../../utils/helpers/common-helpers';
 export class YooRangeComponent {
   constructor() {
-    /**
-     * Specify wether the slider should start the min from the left (international)
-     * or from the right.
-     */
+    this.didLoad = false;
+    this.noUpdate = false;
     this.direction = 'ltr';
-    /**
-     * Specify here wether the slider should render horizontally (x)
-     * or vertically (y)
-     */
     this.orientation = 'horizontal';
-    /**
-     * How long, in milliseconds, to wait to trigger the
-     * `valueChanged` event after each change in the range value.
-     * This also impacts form bindings such as `ngModel` or `v-model`.
-     */
     this.debounce = 0;
-    /**
-     * Minimum integer value of the range.
-     */
     this.min = 0;
-    /**
-     * Maximum integer value of the range.
-     */
     this.max = 100;
-    /**
-     * If `true`, a pin with integer value is shown when the knob
-     * is pressed. This prop will only work with the horizontal range
-     */
     this.pin = false;
-    /**
-     * If `true`, the knob snaps to tick marks evenly spaced based
-     * on the step property value.
-     */
     this.snaps = false;
-    /**
-     * Specifies the value granularity.
-     */
     this.step = 1;
-    /**
-     * If `true`, tick marks are displayed based on the step value.
-     * Only applies when `snaps` is `true`.
-     */
     this.ticks = false;
-    /**
-     * If `true`, the user cannot interact with the range.
-     */
+    this.ticksLabels = undefined;
     this.readonly = false;
-    /**
-     * If `true`, the user cannot interact with the range.
-     */
     this.disabled = false;
-    /**
-     * the value of the range.
-     */
     this.value = 0;
+    this.isVisible = undefined;
     this.ratioA = 0;
     this.ratioB = 0;
-    this.didLoad = false;
-    this.noUpdate = false;
+    this.pressedKnob = undefined;
   }
   onDebounceChanged() {
     this.valueChanged = debounceEvent(this.valueChanged, this.debounce);

package/dist/collection/components/1.atoms/ripple-effect/ripple-effect.js

@@ -1,9 +1,6 @@
 import { h, Host, readTask, writeTask } from '@stencil/core';
 export class YooRippleEffectComponent {
   constructor() {
-    /**
-     * Duration of ripple effect in milliseconds.
-     */
     this.duration = 1050;
   }
   /**

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();