@yoobic/yobi 8.3.0-9 → 8.3.0

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

@@ -1,4 +1,5 @@
-import { disableKeyboardResize, dismiss, Draggable, fadeScaleAnimation, findParent, getDialogPosition, getModalAnimation, getSession, gsapSet, gsapTo, isAnimationsDisabled, isFullScreenFalse, isIOS, isIphoneX, isNativeMobile, isOffline, isSafari, isWeb, present } from '@shared/utils';
+import { FullscreenImportantModalClass } from '@shared/interfaces';
+import { dismiss, Draggable, fadeScaleAnimation, findParent, getDialogPosition, getModalAnimation, getSession, gsapSet, gsapTo, isAnimationsDisabled, isFullScreenFalse, isIphoneX, isOffline, isSafari, isWeb, MODAL_BASE_ZINDEX, present } from '@shared/utils';
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from '@stencil/core';
 import { debounce, inRange } from 'lodash-es';
 import { getAppContext, lifecycleEvents, querySelectorDeep } from '../../../utils/helpers/common-helpers';
@@ -70,7 +71,7 @@ export class YooIonModalComponent {
   }
   get zIndexOverlay() {
     var _a;
-    return (20000 + (((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.overlayId) || this.overlayId || 0)).toString();
+    return (MODAL_BASE_ZINDEX + (((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.overlayId) || this.overlayId || 0)).toString();
   }
   onDismiss(ev) {
     ev.stopPropagation();
@@ -132,7 +133,7 @@ export class YooIonModalComponent {
     const { x, y } = this.dialogElement.getBoundingClientRect();
     if (this.dialogElement) {
       if (!isFullScreen) {
-        this.dialogElement.classList.remove('full-screen-important');
+        this.dialogElement.classList.remove(FullscreenImportantModalClass);
       }
       return gsapTo(this.dialogElement, 0.25, {
         width: isFullScreen ? '100%' : modalWidth || 'auto',
@@ -145,7 +146,7 @@ export class YooIonModalComponent {
         y: isFullScreen ? 0 : y
       }).then(() => {
         if (isFullScreen) {
-          this.dialogElement.classList.add('full-screen-important');
+          this.dialogElement.classList.add(FullscreenImportantModalClass);
         }
       });
     }
@@ -246,9 +247,6 @@ export class YooIonModalComponent {
     if (this.resizeListener) {
       window.removeEventListener('resize', this.resizeListener);
     }
-    if (isNativeMobile() && isIOS()) {
-      disableKeyboardResize();
-    }
     return dismiss(this, data, role, overlayDismiss, () => {
       const coeffHalf = 1 - (this.componentProps.coeffHalf || 0.5);
       return modalAnimationFactory(this.finalLeaveAnimation, this.elementToAnimate, {
@@ -683,15 +681,14 @@ export class YooIonModalComponent {
       "defaultValue": "true"
     },
     "component": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ComponentRef",
-        "resolved": "(() => HTMLElement) | HTMLElement | string",
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
         "references": {
-          "ComponentRef": {
-            "location": "import",
-            "path": "@shared/utils"
+          "HTMLElement": {
+            "location": "global"
           }
         }
       },
@@ -700,9 +697,7 @@ export class YooIonModalComponent {
       "docs": {
         "tags": [],
         "text": "The component to display inside of the modal."
-      },
-      "attribute": "component",
-      "reflect": false
+      }
     },
     "componentProps": {
       "type": "unknown",

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

@@ -4,10 +4,30 @@ export class YooIonModalControllerComponent {
   constructor() {
     this.modals = new Map();
     this.topOverlayID = 0;
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
+    }
   }
   modalWillPresent(ev) {
-    this.modals.set(ev.target.overlayId, ev.target);
-    this.topOverlayID = ev.target.overlayId;
+    var _a, _b, _c, _d, _e;
+    if (ev.target.nodeName === 'YOO-ION-MODAL') {
+      this.modals.set(ev.target.overlayId, ev.target);
+      this.topOverlayID = ev.target.overlayId;
+    }
+    else {
+      this.modals.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+      this.topOverlayID = (_e = (_d = ev.composedPath()) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.overlayId;
+    }
   }
   modalWillDismiss(ev) {
     this.modals.delete(ev.target.overlayId);
@@ -32,7 +52,7 @@ export class YooIonModalControllerComponent {
    * Create a modal overlay with modal options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-ion-modal'), opts, opts.host);
+    return createOverlay(document.createElement('yoo-ion-modal'), opts, this.device || opts.host);
   }
   /**
    * Dismiss the open modal overlay.
@@ -188,6 +208,24 @@ export class YooIonModalControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",
       "target": "body",

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

@@ -2,6 +2,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 export class YooPointsRecap {
   constructor() {
     this.showItemIcon = true;
+    this.forceTotalPoints = false;
   }
   onItemsUpdated() {
     this.updatePoints();
@@ -27,8 +28,8 @@ export class YooPointsRecap {
       return 'success';
     }
   }
-  getItemIconAttr(points) {
-    if (points <= 0) {
+  getItemIconAttr(isCorrect) {
+    if (!isCorrect) {
       return { name: 'close', color: 'danger' };
     }
     else {
@@ -38,7 +39,7 @@ export class YooPointsRecap {
   renderTitle(title) {
     var _a, _b;
     const titleClass = `item ${((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.heading ? 'heading' : this.footer && 'footer' : 'content'}`;
-    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length)) ? this.totalPoints : this.totalItemsPoints;
+    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) || this.forceTotalPoints) ? this.totalPoints : this.totalItemsPoints;
     const tagColor = this.getTagColor(points);
     return (h("div", { class: "row" },
       this.footer && this.renderSeparator(),
@@ -58,7 +59,7 @@ export class YooPointsRecap {
   renderItem(item, index) {
     var _a;
     const tagColor = this.getTagColor(item.points);
-    const itemIcon = this.getItemIconAttr(item.points);
+    const itemIcon = this.getItemIconAttr(item.isCorrect);
     return (h("div", { class: "row" },
       h("div", { class: "item content" },
         h("div", { class: "sub-item" },
@@ -182,6 +183,24 @@ export class YooPointsRecap {
       "attribute": "show-item-icon",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "forceTotalPoints": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "force-total-points",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -1,5 +1,4 @@
-import { TapticEngine } from '@ionic-native/taptic-engine';
-import { findParent, isIOS, isNativeMobile } from '@shared/utils';
+import { findParent, isIOS, isNativeMobile, vibrateHapticMedium } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch, writeTask } from '@stencil/core';
 import { createGesture } from '../../../utils/gesture';
 export class YooIonRefresherComponent {
@@ -234,11 +233,9 @@ export class YooIonRefresherComponent {
       this.cancel();
     }
   }
-  beginRefresh() {
+  async beginRefresh() {
     if (isNativeMobile() && isIOS()) {
-      TapticEngine.impact({
-        style: 'medium'
-      });
+      await vibrateHapticMedium();
     }
     // assumes we're already back in a zone
     // they pulled down far enough, so it's ready to refresh

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

@@ -36,7 +36,14 @@ export class YooIonScrollComponent {
       isScrolling: true
     };
     this.queued = false;
-    this.preventDefault = (e) => e.preventDefault();
+    this.preventDefault = (e) => {
+      try {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+      }
+      catch (e) {
+        //
+      }
+    };
   }
   onScroll(ev) {
     const timeStamp = Date.now();
@@ -193,7 +200,7 @@ export class YooIonScrollComponent {
   componentDidLoad() {
     if (!Build.isServer) {
       if (this.el && this.el.classList.contains('horizontal') && isWeb(this.el)) {
-        this.el.addEventListener('mousewheel', this.preventDefault, false);
+        this.el.addEventListener('mousewheel', this.preventDefault, { passive: true });
       }
     }
   }
@@ -202,7 +209,7 @@ export class YooIonScrollComponent {
       clearInterval(this.watchDog);
     }
     if (this.el && this.el.classList.contains('horizontal') && isWeb(this.el)) {
-      this.el.removeEventListener('mousewheel', this.preventDefault, false);
+      this.el.removeEventListener('mousewheel', this.preventDefault);
     }
   }
   disableYScroll(disable) {

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

@@ -58,7 +58,7 @@ export class YooScrollToButtonComponent {
       "mutable": false,
       "complexType": {
         "original": "Partial<IButton>",
-        "resolved": "{ actionType?: TActionType; icon?: TIconName; iconSize?: TIconSize; iconSlot?: TButtonSlot; text?: string; textClass?: string; iconColor?: TColor; iconOnlyColor?: TColor; isLoading?: boolean; cssClass?: string; subMenu?: IButton[]; separator?: boolean; href?: string; selected?: boolean; selectedFn?: (ev?: any) => boolean; isToggle?: boolean; hasDivider?: boolean; userItem?: IUser; notif?: string | number | boolean; handler?: (ev?: any) => any; isVisible?: (ev?: any) => boolean; value?: any; actionableIcon?: IButton; actionableIcons?: IButton[]; tooltip?: string; color?: TColor; size?: TSize; style?: { [key: string]: string; }; disabled?: boolean; badge?: IBadgeEntry; tagElements?: ITagElement; description?: string; fill?: TButtonFill; shape?: TButtonShape; animated?: boolean; rippleType?: TButtonRippleType; type?: TButtonType; path?: IRoute; forceModal?: boolean; module?: \"@app\" | \"@admin\" | \"@calendar\" | \"@campaign\" | \"@chat\" | \"@document\" | \"@edt\" | \"@feed\" | \"@incentive\" | \"@insight\" | \"@learning\" | \"@menu\" | \"@mission\" | \"@public\" | \"@question\" | \"@waitlist\"; enterAnimation?: string; leaveAnimation?: string; slotName?: string; }",
+        "resolved": "{ actionType?: TActionType; icon?: \"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"; iconSize?: TIconSize; iconSlot?: TButtonSlot; text?: string; textClass?: string; iconColor?: TColor; iconOnlyColor?: TColor; isLoading?: boolean; cssClass?: string; subMenu?: IButton[]; separator?: boolean; href?: string; selected?: boolean; selectedFn?: (ev?: any) => boolean; isToggle?: boolean; hasDivider?: boolean; userItem?: IUser; notif?: string | number | boolean; handler?: (ev?: any) => any; isVisible?: (ev?: any) => boolean; value?: any; actionableIcon?: IButton; actionableIcons?: IButton[]; tooltip?: string; color?: TColor; size?: TSize; style?: { [key: string]: string; }; disabled?: boolean; badge?: IBadgeEntry; tagElements?: ITagElement; description?: string; fill?: TButtonFill; shape?: TButtonShape; animated?: boolean; rippleType?: TButtonRippleType; type?: TButtonType; path?: IRoute; forceModal?: boolean; module?: \"@app\" | \"@admin\" | \"@calendar\" | \"@campaign\" | \"@chat\" | \"@document\" | \"@edt\" | \"@feed\" | \"@incentive\" | \"@insight\" | \"@journey\" | \"@learning\" | \"@menu\" | \"@mission\" | \"@public\" | \"@question\" | \"@waitlist\"; enterAnimation?: string; leaveAnimation?: string; slotName?: string; isBeta?: boolean; }",
         "references": {
           "Partial": {
             "location": "global"

package/dist/collection/components/2.molecules/slide/slide.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /**
- * Swiper 8.2.4
+ * Swiper 8.3.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -210,7 +210,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
  *
  * Released under the MIT License
  *
- * Released on: June 13, 2022
+ * Released on: July 13, 2022
  */
 @font-face {
   font-family: "swiper-icons";

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /**
- * Swiper 8.2.4
+ * Swiper 8.3.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -210,7 +210,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
  *
  * Released under the MIT License
  *
- * Released on: June 13, 2022
+ * Released on: July 13, 2022
  */
 @font-face {
   font-family: "swiper-icons";

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

@@ -101,8 +101,14 @@ export class YooIonSlidesComponent {
    * Transition to the specified slide.
    */
   async slideTo(index, speed, runCallbacks) {
+    var _a;
     const swiper = await this.getSwiper();
-    swiper.slideTo(index, speed, runCallbacks);
+    if (index >= ((_a = swiper.slides) === null || _a === void 0 ? void 0 : _a.length)) {
+      swiper.once('slidesLengthChange', () => swiper.slideTo(index, speed, runCallbacks));
+    }
+    else {
+      swiper.slideTo(index, speed, runCallbacks);
+    }
   }
   /**
    * Transition to the next slide.

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

@@ -260,7 +260,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .overlay[placement=top] {
   top: 0;
-  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 65%);
+  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 35%);
 }
 :host .overlay[placement=bottom] {
   bottom: 0;

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

@@ -43,6 +43,9 @@ export class YooTextSequence {
   componentDidLoad() {
     this.initSequenceHeight();
   }
+  componentDidRender() {
+    this.initSequenceHeight();
+  }
   initSequenceHeight() {
     var _a;
     if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
@@ -54,7 +57,7 @@ export class YooTextSequence {
   renderSequences() {
     var _a;
     return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
-      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, onTransitionEnd: () => this.initSequenceHeight(), style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
         return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), onClick: ev => { var _a; return openImageDetailFromRTE(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
       })));
   }

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -3,9 +3,28 @@ import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from
 export class YooIonToastControllerComponent {
   constructor() {
     this.toasts = new Map();
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
+    }
   }
   toastWillPresent(ev) {
-    this.toasts.set(ev.target.overlayId, ev.target);
+    var _a, _b, _c;
+    if (ev.target.nodeName === 'YOO-TOAST') {
+      this.toasts.set(ev.target.overlayId, ev.target);
+    }
+    else {
+      this.toasts.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+    }
   }
   toastWillDismiss(ev) {
     this.toasts.delete(ev.target.overlayId);
@@ -25,7 +44,7 @@ export class YooIonToastControllerComponent {
    * Create a toast overlay with toast options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-toast'), opts);
+    return createOverlay(document.createElement('yoo-toast'), opts, this.device);
   }
   /**
    * Dismiss the open toast overlay.
@@ -151,6 +170,24 @@ export class YooIonToastControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",
       "target": "body",

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

@@ -3075,4 +3075,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.iphone-x.simple) .inner-shadow {
   box-shadow: none;
+}
+
+:host(.iphone-x) {
+  --safe-area-inset-top: var(--spacing-32, 2rem);
 }

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

@@ -1,6 +1,6 @@
 import { devices } from '@shared/interfaces';
 import { debounce, findParent } from '@shared/utils';
-import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 export class YooDeviceComponent {
   constructor() {
     this.resizeOnUpdate = false;
@@ -23,6 +23,7 @@ export class YooDeviceComponent {
       window.addEventListener('resize', this.resizeListener);
       this.resize();
     }
+    this.deviceCreated.emit(this.host);
   }
   componentDidUpdate() {
     if (this.resizeOnUpdate) {
@@ -31,6 +32,7 @@ export class YooDeviceComponent {
   }
   disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
+    document.body.dispatchEvent(new CustomEvent('deviceDestroyed', { detail: this.host }));
   }
   resize() {
     const parent = findParent(this.host, this.scaledContainerSelector);
@@ -117,7 +119,7 @@ export class YooDeviceComponent {
     ];
   }
   render() {
-    return (h(Host, { class: { [this.deviceEntry.device]: true } },
+    return (h(Host, { class: { [this.deviceEntry.device]: true, 'mobile': this.deviceEntry.device !== 'macbook', 'web': this.deviceEntry.device === 'macbook' } },
       h("div", { class: {
           'marvel-device': true,
           [this.deviceEntry.device]: true,
@@ -189,6 +191,26 @@ export class YooDeviceComponent {
       }
     }
   }; }
+  static get events() { return [{
+      "method": "deviceCreated",
+      "name": "deviceCreated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLYooDeviceElement",
+        "resolved": "HTMLYooDeviceElement",
+        "references": {
+          "HTMLYooDeviceElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "deviceEntry",

package/dist/collection/components/3.organisms/input-bar/input-bar.js

@@ -1,10 +1,9 @@
-import { MediaType, PictureSourceType } from '@ionic-native/camera';
-import { File as _File } from '@ionic-native/file';
+import { MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera';
+import { File as _File } from '@awesome-cordova-plugins/file';
+import { MediaCapture } from '@awesome-cordova-plugins/media-capture';
 import { IOSFilePicker } from '@ionic-native/file-picker/ngx';
-import { MediaCapture } from '@ionic-native/media-capture';
-import { TapticEngine } from '@ionic-native/taptic-engine';
 import { IFileUploadAcceptMode, MessageInput, MessageType } from '@shared/interfaces';
-import { addFilePrefix, closeModal, debounce, getAsyncExtraData, getMediaType, getModalAnimation, getSession, getUserDisplayName, gsapTo, hasWebCam, hideKeyboard, isAndroid, isBase64, isImage, isIOS, isMedia, isNativeMobile, isNullOrUndefined, isVideo, isWeb, keepAwake, moveToImageDirectory, read, replaceAndGetAllLinks, showActionSheet, showAlert, showModal, translate } from '@shared/utils';
+import { addFilePrefix, closeModal, debounce, getAsyncExtraData, getMediaType, getModalAnimation, getSession, getUserDisplayName, gsapTo, hasWebCam, hideKeyboard, isAndroid, isBase64, isImage, isIOS, isMedia, isNativeMobile, isNullOrUndefined, isVideo, isWeb, keepAwake, moveToImageDirectory, read, replaceAndGetAllLinks, showActionSheet, showAlert, showModal, translate, vibrateHapticMedium } from '@shared/utils';
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from '@stencil/core';
 import { compact, isArray, isNumber } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
@@ -725,11 +724,9 @@ export class YooInputBarComponent {
       await this.onWebRecorder();
     }
   }
-  onVibrate() {
+  async onVibrate() {
     if (isNativeMobile() && isIOS()) {
-      TapticEngine.impact({
-        style: 'medium'
-      });
+      await vibrateHapticMedium();
     }
   }
   async onActionClick(preventFocusAfter = false) {
@@ -903,7 +900,7 @@ export class YooInputBarComponent {
   }
   renderTextarea() {
     var _a, _b, _c;
-    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionFitMaxRows: true, maxRows: 5, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.otherIds, mentions: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.mentions, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') },
+    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionConfigs: this.mentionConfigs, mentionFitMaxRows: true, maxRows: 5, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.otherIds, mentions: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.mentions, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') },
       !this.hasTextInside && (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder))),
       this.isInputTypeAllowed(MessageInput.gif) && this.renderGifIcon()));
   }
@@ -1142,6 +1139,21 @@ export class YooInputBarComponent {
         "tags": [],
         "text": "Adavanced options to handle complex logic such as mentions,"
       }
+    },
+    "mentionConfigs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ type: string, id: string }",
+        "resolved": "{ type: string; id: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -14,9 +14,8 @@
  * https://zpl.io/29o9ekw
  * https://zpl.io/25yLEEj
  */
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
-import { TapticEngine } from '@ionic-native/taptic-engine';
-import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate } from '@shared/utils';
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
+import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { capitalize, cloneDeep, isEqual, isFunction } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
@@ -630,9 +629,7 @@ export class YooPhotoEditorComponent {
         this.activeAnnotation = updateAnnotationLocal(this.activeAnnotation, Object.assign({ transform: { current: coords } }, isDeleting && { isDeleted: true, isFocused: false }));
         if (isDeleting) {
           if (isNativeMobile()) {
-            TapticEngine.impact({
-              style: 'medium'
-            });
+            await vibrateHapticMedium();
           }
           this.switchMode();
         }