@yoobic/yobi 8.6.0-3 → 8.6.0-5

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

@@ -3,10 +3,6 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { isEndSide } from '../../../utils/ionic/helpers';
 export class YooIonItemOptionsComponent {
   constructor() {
-    /**
-     * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
-     *
-     */
     this.side = 'end';
   }
   async fireSwipeEvent() {

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

@@ -7,12 +7,6 @@ const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
 export class YooIonItemSlidingComponent {
   constructor() {
-    this.itemSlidingType = ItemSlidingType.swipe;
-    /**
-     * If `true`, the user cannot interact with the sliding-item.
-     */
-    this.disabled = false;
-    this.state = 2 /* SlidingState.Disabled */;
     this.item = null;
     this.openAmount = 0;
     this.initialOpenAmount = 0;
@@ -20,6 +14,9 @@ export class YooIonItemSlidingComponent {
     this.optsWidthLeftSide = 0;
     this.sides = 0 /* ItemSide.None */;
     this.optsDirty = true;
+    this.itemSlidingType = ItemSlidingType.swipe;
+    this.disabled = false;
+    this.state = 2 /* SlidingState.Disabled */;
   }
   disabledChanged() {
     if (this.gesture) {

package/dist/collection/components/2.molecules/kpi-card/kpi-card.js

@@ -27,6 +27,11 @@ const KpiNumber = ({ type, value }) => {
 };
 export class YooKpiCardComponent {
   constructor() {
+    this.cardTitle = undefined;
+    this.emptyState = undefined;
+    this.kpiData = undefined;
+    this.hideEmptyState = undefined;
+    this.help = undefined;
     this.keepUndefinedValues = false;
   }
   render() {

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

@@ -2,10 +2,12 @@ import { isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
 export class YooLinksMenuComponent {
   constructor() {
-    this.clickEmitEnabled = true;
-    this.selectedIndex = 0;
     this.linkElements = [];
     this.previousIndex = this.selectedIndex;
+    this.items = undefined;
+    this.clickEmitEnabled = true;
+    this.profileSummary = undefined;
+    this.selectedIndex = 0;
   }
   emitClick(item, index) {
     if (item.handler && typeof item.handler === 'function') {

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

@@ -2,9 +2,7 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooIonListComponent {
   constructor() {
-    /**
-     * If true, the list will have margin around it and rounded corners. Defaults to `false`.
-     */
+    this.lines = undefined;
     this.inset = false;
   }
   /**

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

@@ -15,31 +15,6 @@ const LIFECYCLE_MAP = {
 };
 export class YooModalComponent {
   constructor() {
-    /**
-     * If set to true, the modal will show a right and left arrow,
-     * To be navigable, a modal must contain slides inside
-     */
-    this.navigable = false;
-    this.keyboardClose = true;
-    /**
-     * If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
-     */
-    this.enableBackdropDismiss = true;
-    /**
-     * If true, a backdrop will be displayed behind the modal. Defaults to `true`.
-     */
-    this.showBackdrop = true;
-    /**
-     * If true, the modal will animate. Defaults to `true`.
-     */
-    this.animated = true;
-    /**
-     * will determine if the modal is closable by a swipe action
-     */
-    this.swipeRightToClose = false;
-    this.displayFullscreenButton = true;
-    this.fullscreen = false;
-    this.dragEnabled = false;
     this.presented = false;
     this.hasPresented = false;
     this.arrowElements = [];
@@ -58,6 +33,28 @@ export class YooModalComponent {
         this.setFullscreen();
       }
     };
+    this.navigable = false;
+    this.waitForContentLoaded = undefined;
+    this.enterAnimation = undefined;
+    this.leaveAnimation = undefined;
+    this.overlayId = undefined;
+    this.delegate = undefined;
+    this.keyboardClose = true;
+    this.component = undefined;
+    this.componentProps = undefined;
+    this.componentInstance = undefined;
+    this.cssClass = undefined;
+    this.enableBackdropDismiss = true;
+    this.forceCustomAnimationOnWeb = undefined;
+    this.showBackdrop = true;
+    this.animated = true;
+    this.swipeRightToClose = false;
+    this.displayFullscreenButton = true;
+    this.watermarkLogo = undefined;
+    this.modalEnterAnimationDuration = undefined;
+    this.modalLeaveAnimationDuration = undefined;
+    this.fullscreen = false;
+    this.dragEnabled = false;
   }
   get customHeight() {
     var _a;
@@ -153,14 +150,14 @@ export class YooModalComponent {
    * Present the modal overlay after it has been created.
    */
   async present() {
-    var _a;
+    var _a, _b, _c;
     const getComponentTag = () => this.component instanceof HTMLElement && this.component.tagName;
     const isAutocompleteDialog = getComponentTag() === 'YOO-FORM-AUTOCOMPLETE-DIALOG';
     const isPhotoEditor = getComponentTag() === 'YOO-PHOTO-EDITOR';
-    const isHalfSize = this.componentProps.half;
-    const coeffHalf = 1 - (this.componentProps.coeffHalf || 0.5);
+    const isHalfSize = (_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half;
+    const coeffHalf = 1 - (((_b = this.componentProps) === null || _b === void 0 ? void 0 : _b.coeffHalf) || 0.5);
     this.modalYPosition = isHalfSize ? this.customHeight * coeffHalf : 0;
-    const isFromBottom = ((_a = this.finalEnterAnimation) === null || _a === void 0 ? void 0 : _a.includes('slideYEnterAnimation')) && this.component instanceof HTMLElement && !isAutocompleteDialog;
+    const isFromBottom = ((_c = this.finalEnterAnimation) === null || _c === void 0 ? void 0 : _c.includes('slideYEnterAnimation')) && this.component instanceof HTMLElement && !isAutocompleteDialog;
     const isContextMenu = this.isMode('context-menu') || this.isMode('language-selector');
     const allowScaleEffect = isWeb(this.host) && !this.isMode('quickview') && !this.isMode('transparent');
     const allowFadeInContent = (this.waitForContentLoaded || allowScaleEffect) && !isContextMenu && !this.isMode('no-fade-in');
@@ -410,12 +407,14 @@ export class YooModalComponent {
     return this.finalLeaveAnimation.includes(animationType);
   }
   clearFocusing() {
-    if (document.activeElement != document.body) {
-      document.activeElement.blur();
+    var _a;
+    if (document.activeElement !== document.body) {
+      (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
   }
   getModalHeight() {
-    switch (this.componentProps.height) {
+    var _a;
+    switch ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.height) {
       case 'small':
         return '33.33%';
       case 'medium':
@@ -435,7 +434,7 @@ export class YooModalComponent {
     return this.getModalDimension('height');
   }
   getModalDimension(name) {
-    if (/^[0-9]+([.][0-9]+)?(px|rem)$/.test(this.componentProps[name])) {
+    if (this.componentProps && /^[0-9]+([.][0-9]+)?(px|rem)$/.test(this.componentProps[name])) {
       return this.componentProps[name];
     }
   }
@@ -509,7 +508,7 @@ export class YooModalComponent {
     return (h("div", { ref: (el) => (this.dialogElement = el), role: "dialog", class: dialogClasses, style: dialogStyle }, isPreview && isProfilePreview && [h("div", { class: "fade-overlay top" }), h("div", { class: "fade-overlay bottom" })]));
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     const zIndexStyle = { zIndex: this.zIndexOverlay };
     return (h(Host, { style: zIndexStyle, "no-router": true, class: {
         ...createThemedClasses(undefined, 'modal'),
@@ -519,15 +518,15 @@ export class YooModalComponent {
         safari: isSafari(),
         offline: isOffline() && !isIphoneX(),
         'offline-iphone-x': isOffline() && isIphoneX(),
-        half: this.componentProps.half,
+        half: (_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half,
         'swipe-to-close': this.swipeRightToClose,
         navigable: this.navigable,
-        'webpart': (_a = getSession()) === null || _a === void 0 ? void 0 : _a.isWebPart
+        'webpart': (_b = getSession()) === null || _b === void 0 ? void 0 : _b.isWebPart
       } }, this.showBackdrop && (h("div", { ref: (el) => (this.overlay = el), class: "overlay", style: { 'z-index': this.zIndexOverlay }, onClick: (ev) => this.onOverlayDismissClick(ev) })), this.swipeRightToClose ? h("yoo-swipe-container", { onSwipedRight: () => this.closeModal() }, this.renderDialog()) : this.renderDialog(), isWeb(this.host) &&
       this.navigable &&
       ['left', 'right'].map((direction, index) => {
         return (h("div", { onClick: () => this.onArrowClick(direction), ref: (el) => (this.arrowElements[index] = el), style: zIndexStyle, class: `arrow-container ${direction}` }, h("yoo-icon", { size: "extra-large", color: "light", name: direction })));
-      }), this.componentProps && this.componentProps.half && this.renderHalfModal()));
+      }), ((_c = this.componentProps) === null || _c === void 0 ? void 0 : _c.half) && this.renderHalfModal()));
   }
   static get is() { return "yoo-modal"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/2.molecules/points-recap/points-recap.js

@@ -1,8 +1,13 @@
 import { h, Host } from '@stencil/core';
 export class YooPointsRecap {
   constructor() {
+    this.heading = undefined;
+    this.footer = undefined;
+    this.totalPoints = undefined;
+    this.items = undefined;
     this.showItemIcon = true;
     this.forceTotalPoints = false;
+    this.pointsUpdated = undefined;
   }
   onItemsUpdated() {
     this.updatePoints();

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

@@ -3,7 +3,17 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooProfileListComponent {
   constructor() {
+    this.config = undefined;
+    this.selectedTitle = undefined;
     this.isPreview = false;
+    this.recentItems = undefined;
+    this.heading = undefined;
+    this.user = undefined;
+    this.personalView = undefined;
+    this.hideEmails = undefined;
+    this.selectedIndex = undefined;
+    this.modalHost = undefined;
+    this.activeItem = undefined;
   }
   onModalHost() {
     var _a, _b;

package/dist/collection/components/2.molecules/profile-summary/profile-summary.js

@@ -4,8 +4,19 @@ import { isNumber } from 'lodash-es';
 import { showPhotoEditor } from '../../../utils/helpers/common-helpers';
 export class YooProfileSummaryComponent {
   constructor() {
+    this.isOnline = undefined;
     this.isPreview = false;
     this.isImpersonating = false;
+    this.leftHeaderButtons = undefined;
+    this.rightHeaderButtons = undefined;
+    this.modalHost = undefined;
+    this.user = undefined;
+    this.personalView = undefined;
+    this.canChatSingle = undefined;
+    this.canVideoCall = undefined;
+    this.canScan = undefined;
+    this.earnedPoints = undefined;
+    this.showUserActions = undefined;
   }
   onSendTextMessage() {
     var _a;

package/dist/collection/components/2.molecules/progress-recap/progress-recap.js

@@ -2,6 +2,13 @@ import { translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isNil } from 'lodash-es';
 export class YooProgressRecap {
+  constructor() {
+    this.heading = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.progress = undefined;
+    this.tooltip = undefined;
+  }
   renderTooltip() {
     return (h("yoo-tooltip", { placement: "top", content: translateMulti(this.tooltip) }, h("yoo-icon", { name: "help", size: "small", color: "stable" })));
   }

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

@@ -7,22 +7,14 @@ import { addKeyboardEventListener, closeModal, getAsyncExtraData, isNativeMobile
 import { h, Host } from '@stencil/core';
 export class YooRatingComponent {
   constructor() {
-    /**
-     * Navbar title value
-     */
     this.header = 'FEEDBACK';
-    /**
-     * Question for what rating is to be submitted for
-     */
     this.ratingQuestion = 'SATISFIEDWITHCOURSE';
-    /**
-     * Lottie animation for the rating screen
-     */
     this.feedbackLottie = 'rating';
-    /**
-     * Lottie animation once feedback submitted
-     */
     this.submittedLottie = 'thankyou';
+    this.courseId = undefined;
+    this.isValidRating = undefined;
+    this.isRatingSubmitted = undefined;
+    this.loading = undefined;
   }
   componentDidLoad() {
     getAsyncExtraData({ type: 'rating-dialog-opened' });

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

@@ -3,43 +3,15 @@ import { h, Host, writeTask } from '@stencil/core';
 import { createGesture } from '../../../utils/gesture';
 export class YooIonRefresherComponent {
   constructor() {
-    /**
-     * The minimum distance the user must pull down until the
-     * refresher will go into the `refreshing` state. Defaults to `60`.
-     */
+    this.appliedStyles = false;
+    this.didStart = false;
+    this.progress = 0;
     this.pullMin = 60;
-    /**
-     * The maximum distance of the pull until the refresher
-     * will automatically go into the `refreshing` state.
-     * Defaults to the result of `pullMin + 60`.
-     */
     this.pullMax = this.pullMin + 60;
-    /**
-     * Time it takes to close the refresher. Defaults to `280ms`.
-     */
     this.closeDuration = '280ms';
-    /**
-     * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`.
-     */
     this.snapbackDuration = '280ms';
-    /**
-     * If true, the refresher will be hidden. Defaults to `true`.
-     */
     this.disabled = false;
-    /**
-     * The current state which the refresher is in. The refresher's states include:
-     *
-     * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
-     * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
-     * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
-     * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
-     * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
-     * - `completing` - The `refreshing` state has finished and the refresher is closing itself. Once closed, the refresher will go back to the `inactive` state.
-     */
-    this.state = 1 /* RefresherState.Inactive */; // private was removed
-    this.appliedStyles = false;
-    this.didStart = false;
-    this.progress = 0;
+    this.state = 1 /* RefresherState.Inactive */;
   }
   disabledChanged() {
     if (this.gesture) {

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

@@ -1,9 +1,8 @@
 import { h, Host } from '@stencil/core';
 export class YooIonRefresherContentComponent {
   constructor() {
-    /**
-     * An animated spinner that shows when refreshing begins
-     */
+    this.pullingText = undefined;
+    this.refreshingText = undefined;
     this.refreshingSpinner = 'circles';
   }
   render() {

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

@@ -2,8 +2,10 @@ import { translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooRevealComponent {
   constructor() {
-    this.validity = false;
     this.cardElements = [];
+    this.values = undefined;
+    this.isVisible = undefined;
+    this.validity = false;
   }
   onVisibleChanged() {
     var _a;

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

@@ -5,12 +5,6 @@ const SCROLL_DISTANCE_TO_HIDE_TABBAR = 75;
 const SCROLL_DISTANCE_TO_SHOW_TABBAR = 5;
 export class YooIonScrollComponent {
   constructor() {
-    this.height = null;
-    //   /** If true, the component will emit scroll events. */
-    this.scrollEvents = false;
-    //   /** If true, the component will use horizontal scroll instead of vertical. */
-    this.horizontalMode = false;
-    this.slotName = null;
     this.isScrolling = false;
     this.lastScroll = 0;
     this.lastDeltaY = 0;
@@ -44,6 +38,12 @@ export class YooIonScrollComponent {
         //
       }
     };
+    this.height = null;
+    this.forceOverscroll = undefined;
+    this.scrollEvents = false;
+    this.showScrollbar = undefined;
+    this.horizontalMode = false;
+    this.slotName = null;
   }
   onScroll(ev) {
     const timeStamp = Date.now();

package/dist/collection/components/2.molecules/scroll-to-button/scroll-to-button.js

@@ -5,19 +5,17 @@
 import { h } from '@stencil/core';
 export class YooScrollToButtonComponent {
   constructor() {
-    /**
-      * Choose if the component should render after scrolling or directly
-    */
-    this.displayOnScroll = true;
-    /**
-      * Render the component when the minimum scroll distance is reached
-    */
-    this.minimumScrollDistance = 200;
     this.defaultButtonOptions = {
       color: 'stable-alt',
       shape: 'circular',
       size: 'large'
     };
+    this.options = undefined;
+    this.direction = undefined;
+    this.target = undefined;
+    this.displayOnScroll = true;
+    this.minimumScrollDistance = 200;
+    this.targetScrolledValue = undefined;
   }
   initEventListeners(oldTarget, newTarget) {
     if (oldTarget) {

package/dist/collection/components/2.molecules/segmented-control/segmented-control.js

@@ -3,8 +3,10 @@ import { h, Host } from '@stencil/core';
 export class YooSegmentedControlComponent {
   constructor() {
     this.values = [];
+    this.readonly = undefined;
     this.size = 'medium';
     this.initialIndex = 0;
+    this.maxWidth = undefined;
     this.animated = true;
     this.selectedIndex = this.initialIndex;
   }

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

@@ -6,38 +6,22 @@ import { EffectCards, EffectCoverflow, EffectCreative, EffectCube, EffectFade, E
 const waitForSlides = (el) => Promise.race(Array.from(el.querySelectorAll('yoo-ion-slide')).map((s) => s.componentOnReady()));
 export class YooIonSlidesComponent {
   constructor() {
-    /**
-     * If true, show the pagination. Defaults to `false`.
-     */
+    this.disconnected = false;
+    this.swiperReady = false;
+    this.swiper = new Promise((resolve) => {
+      this.readySwiper = resolve;
+    });
     this.pager = false;
-    /**
-     * If true, the navigation arrows will only be seen on hover
-     */
+    this.navigation = undefined;
     this.hoverNavigation = false;
-    /**
-     * The initial slide to open
-     */
     this.initialSlide = 0;
-    /**
-     * If true, navigation is possible using arrow keys
-     */
     this.allowKeyNavigation = true;
-    /**
-     * If true, show the scrollbar. Defaults to `false`.
-     */
     this.scrollbar = false;
-    /**
-     * Options to pass to the swiper instance.
-     * See http://idangero.us/swiper/api/ for valid options
-     */
-    this.options = {}; // SwiperOptions;  // TODO
+    this.hideNavigation = undefined;
+    this.options = {};
+    this.showNavigationArrows = undefined;
     this.isAtBeginningPosition = true;
     this.isAtEndPosition = false;
-    this.disconnected = false;
-    this.swiperReady = false;
-    this.swiper = new Promise((resolve) => {
-      this.readySwiper = resolve;
-    });
   }
   get slideElements() {
     return Array.from(this.el.querySelectorAll('yoo-ion-slide'));

package/dist/collection/components/2.molecules/text-sequence/text-sequence.js

@@ -4,10 +4,15 @@ import { clamp, compact } from 'lodash-es';
 import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooTextSequence {
   constructor() {
+    this.translateY = 0;
     this.animated = true;
+    this.heading = undefined;
+    this.values = undefined;
     this.validity = false;
+    this.isVisible = undefined;
+    this.isAnimationFinished = undefined;
     this.currentIndex = 0;
-    this.translateY = 0;
+    this.revealSequences = undefined;
   }
   onValuesChanged() {
     this.reinitSequences();

package/dist/collection/components/3.organisms/audio-recorder/audio-recorder-dialog.js

@@ -4,13 +4,14 @@ import AudioRecorder from 'audio-recorder-polyfill';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooAudioRecorderDialogComponent {
   constructor() {
-    /**
-     * Heading
-     */
-    this.heading = 'RECORD';
     // Web recorder params
     this.shouldStop = false;
     this.stopped = false;
+    this.heading = 'RECORD';
+    this.isSaving = undefined;
+    this.isRecording = undefined;
+    this.finalPath = undefined;
+    this.finalRecordingDuration = undefined;
   }
   onAudioDurationReady(ev) {
     if (ev && ev.detail >= 0) {

package/dist/collection/components/3.organisms/color-selector/color-selector.js

@@ -3,14 +3,11 @@ import { h, Host } from '@stencil/core';
 const COLORS = ['light', 'dark', 'accent', 'success', 'energized', 'warning', 'danger', 'info', 'app-color', 'wood'];
 export class YooColorSelectorComponent {
   constructor() {
-    /**
-     * Array of colors to show in the selector, the user will be able to pick amongst any of these
-     */
+    this.disablePicker = undefined;
     this.colors = COLORS;
-    /**
-     * Specify here the color among the palette to be ticked/selected
-     */
     this.selectedColor = COLORS[0];
+    this.pickedColor = undefined;
+    this.showPickedColor = undefined;
   }
   get isPickedColorSelected() {
     return this.selectedColor === this.pickedColor;

package/dist/collection/components/3.organisms/count-down/count-down.js

@@ -3,8 +3,8 @@ import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooCountDownComponent {
   constructor() {
-    this.start = 0;
     this.showGetReady = true;
+    this.start = 0;
   }
   componentDidLoad() {
     this.showGetReady = false;

package/dist/collection/components/3.organisms/date/date.js

@@ -6,14 +6,13 @@ import { pipes } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooDateComponent {
   constructor() {
-    /**
-     * The start time for the timer mode.
-     */
+    this.date = undefined;
     this.startTime = Date.now();
-    /**
-     * Display timer in minutes, hours or seconds.
-     */
+    this.timerMode = undefined;
+    this.timeAgo = undefined;
+    this.format = undefined;
     this.timerModeType = 'timer';
+    this.time = undefined;
   }
   async pauseTimer() {
     if (this.timerMode) {

package/dist/collection/components/3.organisms/device/device.js

@@ -3,7 +3,9 @@ import { debounce, findParent } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooDeviceComponent {
   constructor() {
+    this.scaledContainerSelector = undefined;
     this.resizeOnUpdate = false;
+    this.deviceEntry = undefined;
   }
   onDeviceEntry() {
     if (this.scaledContainerSelector) {

package/dist/collection/components/3.organisms/device-list/device-list.js

@@ -3,6 +3,10 @@ import { closeModal, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { uniq } from 'lodash-es';
 export class YooDeviceListComponent {
+  constructor() {
+    this.selectedDevice = undefined;
+    this.noWeb = undefined;
+  }
   componentWillLoad() {
     this.getDeviceCateogires();
   }

package/dist/collection/components/3.organisms/display-increment/display-increment.js

@@ -1,5 +1,9 @@
 import { h } from '@stencil/core';
 export class YooDisplayIncrementComponent {
+  constructor() {
+    this.changeValue = undefined;
+    this.changeUnitDisplay = undefined;
+  }
   render() {
     const isPositiveChange = this.changeValue > 0;
     const isNegativeChange = this.changeValue < 0;