@yoobic/yobi 8.3.0 → 8.3.1-10

package/dist/cjs/yoo-widget-small-size.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
-const overlays = require('./overlays-84cc9992.js');
+require('./index-49d083a4.js');
+const overlays = require('./overlays-0cf588e0.js');
 require('./lodash-72d493b9.js');
-require('./index-f6133645.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const widgetSmallSizeCss = ":host{--end-grid-gap:var(--spacing-08, 0.5rem);--end-content-color:var(--dark, #000000);--end-content-font-size:var(--font-size-48, 3rem);--end-content-font-weight:var(--font-weight-900, 900);--end-sub-content-color:var(--dark, #000000);--end-sub-content-font-size:var(--font-size-14, 0.875rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:100%;padding:var(--spacing-16, 1rem)}:host .title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .title span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-flex-positive:1;flex-grow:1;color:var(--dark, #000000);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-16, 1rem)}:host .title yoo-icon{cursor:pointer}:host ::slotted(.centered){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .end{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-gap:var(--end-grid-gap);overflow:hidden}:host .end ::slotted([slot=end-content]){color:var(--end-content-color);font-weight:var(--end-content-font-weight);font-size:var(--end-content-font-size);line-height:var(--end-content-font-size)}:host .end ::slotted([slot=end-sub-content]){color:var(--end-sub-content-color);font-size:var(--end-sub-content-font-size)}";

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
+require('./index-49d083a4.js');
 const lodash = require('./lodash-72d493b9.js');
-const overlays = require('./overlays-84cc9992.js');
-require('./index-f6133645.js');
+const overlays = require('./overlays-0cf588e0.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const widgetTabCss = ":host p{margin:0;margin-block:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-progress-bar{--svg-fill:none;--progress-value-font-weight:var(--font-weight-900, 900);--progress-value-font-size:var(--font-size-36, 2.25rem);-ms-flex-item-align:center;align-self:center;width:6rem;margin:var(--spacing-08, 0.5rem)}:host yoo-progress-bar.has-status{--progress-bar-color:var(--light, #ffffff);--trail-bar-color:var(--light-20, rgba(255, 255, 255, 0.2));--progress-value-color:var(--light, #ffffff)}:host yoo-progress-bar:not(.has-status){--progress-bar-color:var(--app-color, #5a30f4);--trail-bar-color:var(--app-color-20, rgba(90, 48, 244, 0.2));--progress-value-color:var(--app-color, #5a30f4)}:host yoo-progress-bar:not([metric=percentage]){--progress-value-font-size:var(--font-size-54, 3.375rem);--progress-bar-display:none;--trail-bar-display:none}:host yoo-tooltip{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host .value{padding:var(--spacing-16, 1rem);font-weight:bold;font-size:var(--font-size-36, 2.25rem);text-align:center}:host .arrow-container{z-index:1;display:-ms-flexbox;display:flex;width:0;height:0;margin:var(--spacing-08, 0.5rem) auto 0;padding-top:var(--spacing-04, 0.25rem);border-right:0.75rem solid transparent;border-bottom:0.625rem solid var(--light, #ffffff);border-left:0.75rem solid transparent}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-04, 0.25rem);border-radius:var(--border-radius-04, 0.25rem)}:host([disabled]) .outer-container{color:var(--stable-light, #f1f1f1);background:var(--stable, #adadad);cursor:no-drop;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([disabled])) .outer-container{cursor:pointer}:host([is-active]:not([disabled])) .outer-container{color:var(--light, #ffffff);background:var(--app-color, #5a30f4);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([disabled]):not([is-active])) .arrow-container{visibility:hidden}:host(:not([disabled]):not([is-active])) .outer-container{color:var(--app-color, #5a30f4);background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host(.medium) .value{font-size:var(--font-size-28, 1.75rem)}";

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
-const overlays = require('./overlays-84cc9992.js');
+require('./index-49d083a4.js');
+const overlays = require('./overlays-0cf588e0.js');
 require('./lodash-72d493b9.js');
-require('./index-f6133645.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const widgetTileCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:100%;color:var(--dark, #000000);background-color:var(--stable-light, #f1f1f1);border-radius:0.5rem;cursor:pointer}:host .outer-container.hasPhoto{color:var(--light, #ffffff)}:host .outer-container.hasPhoto .tile-text{text-align:center}:host .outer-container .image{background-position:center;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:rgba(0, 0, 0, 0.15);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container yoo-icon{position:absolute;top:0.5rem;left:0.5rem}:host .outer-container .tile-text{position:absolute;right:0.5rem;bottom:0.5rem;left:0.5rem;z-index:2;margin:auto;font-weight:bold;font-size:var(--font-size-16, 1rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.layout4x3) .outer-container yoo-icon{display:none}";

package/dist/cjs/yoo-workflow-state-dialog.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
-const overlays = require('./overlays-84cc9992.js');
+require('./index-49d083a4.js');
+const overlays = require('./overlays-0cf588e0.js');
 require('./lodash-72d493b9.js');
-require('./index-f6133645.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const workflowStateDialogCss = ":host{width:100%}:host .content{padding:var(--spacing-16, 1rem)}:host .info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .info-container.no-margin{margin-bottom:0}:host .info-container.no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host .info-container .title{margin-bottom:var(--spacing-04, 0.25rem)}:host .info-container .user{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}:host .info-container yoo-avatar,:host .info-container .user-name{margin-right:var(--spacing-08, 0.5rem)}:host .info-container .comments{-ms-flex:1;flex:1;margin-left:var(--spacing-32, 2rem);color:var(--dark, #000000)}";

package/dist/cjs/yoo-workflow-state.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
+require('./index-49d083a4.js');
 const lodash = require('./lodash-72d493b9.js');
-const overlays = require('./overlays-84cc9992.js');
-require('./index-f6133645.js');
+const overlays = require('./overlays-0cf588e0.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const workflowStateCss = ":host{width:100%}:host .menu{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;padding:0;list-style:none}:host .menu .menu-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .menu .menu-item:not(:last-child) .menu-content{margin-bottom:var(--spacing-24, 1.5rem)}:host .menu .menu-item .menu-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}:host .menu .menu-item .menu-left.with-dot{width:2rem;margin-left:0.0313rem}:host .menu .menu-item .menu-left .menu-icon{z-index:2;width:1.875rem;height:1.875rem;text-align:center}:host .menu .menu-item .menu-left .menu-icon.menu-dot{width:1rem;height:1rem}:host .menu .menu-item .menu-left .menu-icon yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.875rem;height:1.875rem;padding:0;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);line-height:1.875rem;background-color:var(--app-color, #5a30f4);border-radius:50%}:host .menu .menu-item .menu-left .menu-icon yoo-icon.dark{background-color:var(--dark, #000000)}:host .menu .menu-item .menu-left .menu-icon yoo-icon.info{background-color:var(--info, #d84c96)}:host .menu .menu-item .menu-left .menu-icon yoo-icon.danger{background-color:var(--danger, #d44333)}:host .menu .menu-item .menu-left .border{width:0.0625rem;height:100%;background-color:var(--stable-alt, #d0d0d0)}:host .menu .menu-item .menu-left .border.border-pre{height:2.5rem}:host .menu .menu-item .menu-left .border.border-pre.last{height:1rem}:host .menu .menu-item .menu-left .border.dark{background-color:var(--dark, #000000)}:host .menu .menu-item .menu-left .border.danger{background-color:var(--danger, #d44333)}:host .menu .menu-item .menu-left .border.info{background-color:var(--info, #d84c96)}:host .menu .menu-item .menu-right{width:100%;margin-left:var(--spacing-08, 0.5rem);overflow:hidden}:host .menu .menu-item .menu-right .menu-title{font-weight:bold;line-height:1}:host .menu .menu-item .menu-right .menu-content{color:var(--text-color, #807f83)}:host .menu .menu-item .menu-right .menu-content.menu-chart{margin-bottom:0}:host .menu .menu-item .menu-right .menu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .menu .menu-item .menu-right .menu-content span{margin-right:0.5rem}:host .menu .menu-item .menu-right .menu-content yoo-avatar{margin-right:0.3125rem}:host .menu .menu-item .menu-right .menu-content .font-medium{font-size:var(--font-size-14, 0.875rem)}:host .menu .menu-item .menu-right .menu-content .font-small{font-size:var(--font-size-12, 0.75rem)}:host .menu .menu-item .menu-right .menu-content .dark{color:var(--dark, #000000)}:host .menu .menu-item .menu-right .menu-content .success{color:var(--success, #3aa76d)}:host .menu .menu-item .menu-right .menu-content .danger{color:var(--danger, #d44333)}:host .menu .menu-item .menu-right .menu-content .text-color{color:var(--text-color, #807f83)}:host .menu .menu-item .menu-right .menu-content table{width:100%;table-layout:fixed}:host .menu .menu-item .menu-right .menu-content table td{overflow:hidden;text-overflow:ellipsis}:host .menu .dot{width:0.25rem;height:0.25rem;margin:0 0.125rem;border:var(--border-width-04, 0.25rem) solid var(--stable, #adadad);border-radius:50%}:host .menu .menu-content .step{margin-bottom:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);padding-top:var(--spacing-08, 0.5rem);background-color:var(--stable-light, #f1f1f1);border-radius:0.25rem}:host .menu .menu-content .step.completed{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step.rejected{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step.active{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .menu .menu-content .step .header .title{-ms-flex:1;flex:1;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-16, 1rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:capitalize}:host .menu .menu-content .step .header .detail{opacity:0.8}:host .menu .menu-content .step .comments .header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .menu .menu-content .step .substeps-container{margin-top:var(--spacing-08, 0.5rem);margin-left:var(--spacing-08, 0.5rem)}:host .menu .menu-content .step .substeps-container .substep{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .menu .menu-content .step .substeps-container .substep yoo-icon,:host .menu .menu-content .step .substeps-container .substep .dot{margin-right:var(--spacing-08, 0.5rem)}";

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
+require('./index-49d083a4.js');
 const lodash = require('./lodash-72d493b9.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-64d74f0b.js');
-const index$3 = require('./index-8d4dcb5e.js');
-const index$1 = require('./index-e3c540c6.js');
+const commonHelpers = require('./common-helpers-ab740e35.js');
+const index$3 = require('./index-7252f9bf.js');
+const index$1 = require('./index-65296b89.js');
 const index$2 = require('./index-9c56868f.js');
-const overlays = require('./overlays-84cc9992.js');
-require('./index-f6133645.js');
+const overlays = require('./overlays-0cf588e0.js');
+require('./index-50ff0b20.js');
 require('./annotations-helpers-6cf88388.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-const overlays = require('./overlays-84cc9992.js');
-require('./index-88e7e681.js');
+const overlays = require('./overlays-0cf588e0.js');
+require('./index-49d083a4.js');
 require('./lodash-72d493b9.js');
-require('./index-f6133645.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e1afd31.js');
-require('./index-88e7e681.js');
+require('./index-49d083a4.js');
 const lodash = require('./lodash-72d493b9.js');
 const annotationsHelpers = require('./annotations-helpers-6cf88388.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
-const overlays = require('./overlays-84cc9992.js');
+const overlays = require('./overlays-0cf588e0.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-f6133645.js');
+require('./index-50ff0b20.js');
 
 const zoomCss = ":host{overflow:hidden}:host([disabled]){cursor:default}:host([disabled]) ::slotted(*){-ms-touch-action:auto !important;touch-action:auto !important}";
 

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

@@ -24,7 +24,7 @@ export class YooMarkdownComponent {
       e.stopPropagation();
       e.stopImmediatePropagation();
       e.preventDefault();
-      openImageDetailFromRTE(this.contentDiv, targetElement.src);
+      openImageDetailFromRTE(this.host, this.contentDiv, targetElement.src);
     }
   }
   async setContent() {

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

@@ -207,7 +207,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --bottom-container-padding: 0;
   --bottom-shadow: 0 0.0625rem 0 0 var(--stable-light, #f1f1f1);
   --center-padding: 0 var(--spacing-16, 1rem);
-  --flex-safe-area: var(--safe-area-inset-top);
   --center-display: flex;
   --background-color: var(--light-10, rgba(255, 255, 255, 0.1));
   z-index: 10;
@@ -409,10 +408,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--bottom-container-padding);
 }
 
-:host(.flex-safe-area) .outer-container {
-  padding-top: var(--flex-safe-area);
-}
-
 :host(.autocomplete) {
   height: 2rem;
   padding-top: var(--spacing-04, 0.25rem);

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

@@ -12,7 +12,7 @@ export class YooIonActionSheetControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -208,11 +208,11 @@ export class YooIonActionSheetControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionActionSheetWillPresent",
       "method": "actionSheetWillPresent",

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

@@ -12,7 +12,7 @@ export class YooIonAlertControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -182,11 +182,11 @@ export class YooIonAlertControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionAlertWillPresent",
       "method": "alertWillPresent",

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

@@ -506,6 +506,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: inherit;
 }
 
+:host(.half) {
+  --safe-area-inset-top: 0;
+}
 :host(.half) .modal-wrapper {
   border-radius: var(--border-radius-16, 1rem) var(--border-radius-16, 1rem) 0 0;
 }

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

@@ -1,5 +1,5 @@
 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 { dismiss, Draggable, fadeScaleAnimation, findDevice, getDialogPosition, getModalAnimation, getSession, gsapSet, gsapTo, isAnimationsDisabled, 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';
@@ -60,14 +60,8 @@ export class YooIonModalComponent {
     };
   }
   get customHeight() {
-    if (isFullScreenFalse()) {
-      const yooDevice = findParent(this.host, 'yoo-device');
-      if (yooDevice) {
-        const yooDeviceContent = yooDevice.querySelector('.device-content');
-        return yooDeviceContent.clientHeight || window.innerHeight;
-      }
-    }
-    return window.innerHeight;
+    var _a;
+    return ((_a = findDevice(this.host)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.screen').clientHeight) || window.innerHeight;
   }
   get zIndexOverlay() {
     var _a;
@@ -302,8 +296,8 @@ export class YooIonModalComponent {
     }
   }
   componentWillLoad() {
-    this.finalEnterAnimation = this.enterAnimation || getModalAnimation('Enter', 'X', true);
-    this.finalLeaveAnimation = this.leaveAnimation || getModalAnimation('Leave', 'X', true);
+    this.finalEnterAnimation = this.enterAnimation || getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true });
+    this.finalLeaveAnimation = this.leaveAnimation || getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true });
     this.clearFocusing();
   }
   componentDidLoad() {
@@ -359,7 +353,7 @@ export class YooIonModalComponent {
     if (this.componentProps.hostElement) {
       const hostElement = this.componentProps.hostElement;
       const hostBoundings = hostElement.getBoundingClientRect();
-      const { height, left, top, placement } = getDialogPosition(hostBoundings, 'below', this.dialogElement, ((_b = (_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.dialogContentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || hostBoundings.width);
+      const { height, left, top, placement } = getDialogPosition(hostElement, 'below', this.dialogElement, ((_b = (_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.dialogContentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || hostBoundings.width);
       this.dialogElement.style.margin = '0';
       if (document.dir === 'rtl') {
         this.dialogElement.style.right = 'unset';

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

@@ -13,7 +13,7 @@ export class YooIonModalControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
     }
@@ -220,11 +220,11 @@ export class YooIonModalControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",

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

@@ -31,7 +31,7 @@ export class YooProfileSummaryComponent {
     var _a;
     if ((_a = this.user) === null || _a === void 0 ? void 0 : _a.imageData) {
       const imgSrc = this.user.imageData;
-      showPhotoEditor({
+      showPhotoEditor(this.host, {
         src: this.user.imageData,
         extraActions: getDownloadAction(imgSrc)
       });

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

@@ -88,7 +88,7 @@ export class YooRatingComponent {
         disabled: !this.isValidRating || !this.courseId,
         handler: () => this.onSubmitClick()
       }];
-    return (h("yoo-form-footer", { class: "rating", buttons: button }));
+    return (h("yoo-form-footer", { class: "rating relative", buttons: button }));
   }
   renderEditable() {
     return [

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.3.1
+ * Swiper 8.3.2
  * 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: July 13, 2022
+ * Released on: July 26, 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.3.1
+ * Swiper 8.3.2
  * 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: July 13, 2022
+ * Released on: July 26, 2022
  */
 @font-face {
   font-family: "swiper-icons";

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

@@ -58,7 +58,7 @@ export class YooTextSequence {
     var _a;
     return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
       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']); } });
+        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.host, this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
       })));
   }
   renderArrow(placement) {

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

@@ -12,7 +12,7 @@ export class YooIonToastControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -182,11 +182,11 @@ export class YooIonToastControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",

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

@@ -349,7 +349,7 @@ export class YooInputBarComponent {
       if ((devices === null || devices === void 0 ? void 0 : devices.length) > 0) {
         let webcam = document.createElement('yoo-form-capture-webcam-dialog');
         webcam.device = devices[0];
-        const ret = await showModal(webcam, {}, '', getModalAnimation('Enter', 'X', true), getModalAnimation('Leave', 'X', true), true);
+        const ret = await showModal(webcam, {}, '', getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true);
         if (ret === null || ret === void 0 ? void 0 : ret.data) {
           await this.onHandleMediaInput(ret.data, MessageType.photo);
         }
@@ -638,7 +638,7 @@ export class YooInputBarComponent {
       });
     };
     if (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.allowAnnotation) && type === MessageType.photo && !preventAnnotation && (isArray(mediaData) ? mediaData.length === 1 : mediaData)) {
-      showPhotoEditor({
+      showPhotoEditor(this.host, {
         src: mediaSrc,
         showSaveInitial: true,
         isReadonly: false,
@@ -684,7 +684,7 @@ export class YooInputBarComponent {
     showAlert(translate('AUDIO'), [translate('YOOBICOK')], translate('NOAUDIO'));
   }
   async onWebRecorder() {
-    const ret = await showAudioRecorder();
+    const ret = await showAudioRecorder(this.host);
     if (ret === null || ret === void 0 ? void 0 : ret.data) {
       return this.onHandleMediaInput(ret.data, MessageType.audio);
     }

package/dist/collection/components/3.organisms/video-player/videoplayer-videojs/videoplayer-videojs.js

@@ -353,10 +353,6 @@ export class YooVideoPlayerVideojsComponent {
     }
   }
   onVideoJSError() {
-    var _a;
-    if (this.currentFallbackSrcIndex === 0 && !((_a = this.source) === null || _a === void 0 ? void 0 : _a.includes('q_auto:eco'))) {
-      this.currentFallbackSrcIndex++;
-    }
     if (this.currentFallbackSrcIndex < this.fallbackSrc.length) {
       this.onFixSource(this.fallbackSrc[this.currentFallbackSrcIndex]);
       this.currentFallbackSrcIndex++;

package/dist/collection/components/entities/card-list/collapsible/card-list-collapsible.js

@@ -21,7 +21,7 @@ export class YooCardListCollapsibleComponent {
       h("yoo-kpi-card", { hideEmptyState: true, class: "content-only", kpiData: kpis })));
   }
   imageClicked(imagePath) {
-    showPhotoEditor({ src: imagePath });
+    showPhotoEditor(this.host, { src: imagePath });
   }
   onListCollapsed(ev) {
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();

package/dist/collection/components/entities/card-list/default/card-list.js

@@ -52,7 +52,7 @@ export class YooCardListComponent {
           }
         }
       ];
-      showPhotoEditor({ src: imagePath, isReadonly: true, extraActions });
+      showPhotoEditor(this.host, { src: imagePath, isReadonly: true, extraActions });
     }
   }
   hasUsersInline() {

package/dist/collection/components/form/camera-preview-dialog/camera-preview-dialog.js

@@ -159,7 +159,7 @@ export class YooCameraPreviewDialogComponent {
     }
   }
   onImageClick(index) {
-    showSlidesMedia({
+    showSlidesMedia(this.host, {
       isReadonly: true,
       currentSlideIndex: index,
       items: this.listviewItems.map((v) => ({ value: v }))

package/dist/collection/components/form/form-autocomplete/form-autocomplete.js

@@ -674,7 +674,7 @@ export class YooFormAutocompleteComponent {
     else if (isWeb(this.host)) {
       modalOptions = Object.assign(modalOptions, { hostElement: this.outerContainer, dialogContentElement: this.dialog });
     }
-    const ret = await showModal(this.dialog, modalOptions, isWeb(this.host) && !isExpanding ? 'context-menu' : isExpanding ? ' visible-overflow' : null, getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), true, false, null, this.collectionName === 'giphy' ? './assets/logo/giphy.png' : null);
+    const ret = await showModal(this.dialog, modalOptions, isWeb(this.host) && !isExpanding ? 'context-menu' : isExpanding ? ' visible-overflow' : null, getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true, false, null, this.collectionName === 'giphy' ? './assets/logo/giphy.png' : null);
     if (ret && !ret.overlayDismiss && !isWeb(this.host)) {
       await this.setValue(ret.data);
     }
@@ -746,7 +746,7 @@ export class YooFormAutocompleteComponent {
       if (isValid(file)) {
         if (isImage(file)) {
           if (this.crop) {
-            promise = showImageCropper({ file }).then((retVal) => retVal);
+            promise = showImageCropper(this.host, { file }).then((retVal) => retVal);
           }
           else {
             promise = resizeImage(file, this.maxWidth, this.maxHeight).then(f => this.preventUpload ? f : { data: f });

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -149,7 +149,7 @@ export class YooFormAutocompleteDialogComponent {
   }
   onExpandGrid() {
     this.gridIsExpanded = true;
-    showModal(this.host, { height: 'medium' }, 'visible-overflow ', getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), true).then(() => {
+    showModal(this.host, { height: 'medium' }, 'visible-overflow ', getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true).then(() => {
       var _a;
       (_a = document.querySelector('yoo-ion-modal:last-child')) === null || _a === void 0 ? void 0 : _a.remove();
       this.gridIsExpanded = false;

package/dist/collection/components/form/form-capture/form-capture.js

@@ -528,7 +528,7 @@ export class YooFormCaptureComponent {
   }
   async captureAudio(index) {
     if (isAndroid()) {
-      const ret = await showAudioRecorder();
+      const ret = await showAudioRecorder(this.host);
       if (ret && ret.data) {
         return this.processMediaData(ret.data, index);
       }
@@ -776,7 +776,7 @@ export class YooFormCaptureComponent {
   }
   async onOpenCropper(file) {
     var _a;
-    return (_a = (await showImageCropper({ file, upload: true, maintainQuality: true, ...this.cropperOptions || {} }))) === null || _a === void 0 ? void 0 : _a.data;
+    return (_a = (await showImageCropper(this.host, { file, upload: true, maintainQuality: true, ...this.cropperOptions || {} }))) === null || _a === void 0 ? void 0 : _a.data;
   }
   clearPhotoEdit(index) {
     var _a, _b;
@@ -830,7 +830,7 @@ export class YooFormCaptureComponent {
         }
       }
     ];
-    showPhotoEditor({
+    showPhotoEditor(this.host, {
       isReadonly: forceReadonly || !this.allowAnnotate,
       src: isMultipleData ? this.extraData[index].stitch || imgSrc : imgSrc,
       annotations: isMultipleData ? this.extraData[index].annotations : (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.annotations,
@@ -893,7 +893,7 @@ export class YooFormCaptureComponent {
     photoEditorParams.src = isMultiple ? ((_a = this.extraData[index]) === null || _a === void 0 ? void 0 : _a.stitch) || imgSrc : imgSrc;
     photoEditorParams.drawings = isMultiple ? (_b = this.extraData[index]) === null || _b === void 0 ? void 0 : _b.drawings : (_c = this.extraData) === null || _c === void 0 ? void 0 : _c.drawings;
     photoEditorParams.annotations = isMultiple ? (_d = this.extraData[index]) === null || _d === void 0 ? void 0 : _d.annotations : (_e = this.extraData) === null || _e === void 0 ? void 0 : _e.annotations;
-    showPhotoEditor(photoEditorParams).then((res) => this.onAfterAnnotate(index, res));
+    showPhotoEditor(this.host, photoEditorParams).then((res) => this.onAfterAnnotate(index, res));
   }
   onAfterAnnotate(index, retVal) {
     if (retVal) {
@@ -1326,7 +1326,7 @@ export class YooFormCaptureComponent {
       this.openGallery(index);
     }
     else if (this.value && isArray(this.value) && !!this.value.length) {
-      showSlidesMedia({
+      showSlidesMedia(this.host, {
         isReadonly: true,
         currentSlideIndex: index,
         items: this.value.map((v, valueIndex) => {

package/dist/collection/components/form/form-carousel/form-carousel.js

@@ -101,7 +101,7 @@ export class YooFormCarouselComponent {
   showPhotoDialog(ev) {
     if (this.allowPreview) {
       ev.stopPropagation();
-      showSlidesMedia({
+      showSlidesMedia(this.host, {
         isReadonly: true,
         currentSlideIndex: this.currentActiveIndex,
         allowOrientation: this.allowOrientation,

package/dist/collection/components/form/form-catalog/form-catalog.js

@@ -242,7 +242,7 @@ export class YooFormCatalogComponent {
   onOpenCatalogDialog(product) {
     this.dialog = document.createElement('yoo-form-catalog-dialog');
     this.dialog.product = product;
-    showModal(this.dialog, { half: false }, null, getModalAnimation('Enter', 'X'), getModalAnimation('Leave', 'X'), true).then(() => {
+    showModal(this.dialog, { half: false }, null, getModalAnimation('Enter', 'X', { host: this.host }), getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
       this.dialog = null;
     });
   }

package/dist/collection/components/form/form-catalog-dialog/form-catalog-dialog.js

@@ -23,7 +23,7 @@ export class YooFormCatalogDialogComponent {
     if ((_a = this.product) === null || _a === void 0 ? void 0 : _a.image) {
       const imgSrc = this.product.image._downloadURL;
       const imgName = this.product.image._filename;
-      showPhotoEditor({
+      showPhotoEditor(this.host, {
         src: imgSrc,
         hasBackButton: true,
         description: imgName,

package/dist/collection/components/form/form-choice/card/form-choice-card.css

@@ -330,7 +330,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --card-width: 8rem;
   --item-spacing: var(--spacing-16, 1rem);
   width: 100%;
-  height: 100%;
 }
 :host yoo-banner {
   height: 0;

package/dist/collection/components/form/form-choice/image/form-choice-image.js

@@ -34,7 +34,7 @@ export class YooFormChoiceImageComponent {
     const answer = [].concat(this.answer).map(a => { var _a; return (_a = a.text) !== null && _a !== void 0 ? _a : a; });
     const noValidation = !((answer === null || answer === void 0 ? void 0 : answer.length) > 0);
     const isCorrect = answer.includes(text);
-    const onOpenImage = (values, index) => showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
+    const onOpenImage = (values, index) => showSlidesMedia(this.host, { items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
     return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
       h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
         h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(text, this) }),

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -226,7 +226,7 @@ export class YooFormDateTimeComponent {
       this.dialog.style.height = 'auto';
       showModal(this.dialog, null, this.updateModalCssClass(), this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
         if (this.dialog) {
-          const { placement } = getDialogPosition(this.outerContainer.getBoundingClientRect(), 'below', this.dialog, width);
+          const { placement } = getDialogPosition(this.outerContainer, 'below', this.dialog, width);
           const maxDialogHeight = placement === 'above' ? top : window.innerHeight - (top + height);
           this.dialog.style.transition = 'all 750ms';
           this.dialog.style.maxHeight = `${maxDialogHeight}px`;
@@ -235,7 +235,7 @@ export class YooFormDateTimeComponent {
       }).then(onClose);
     }
     else {
-      showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), true, false).then(onClose);
+      showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true, false).then(onClose);
     }
   }
   onDateChanged(event) {