@yoobic/yobi 8.7.2 → 8.7.4

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

@@ -98,12 +98,6 @@ export class YooIonScrollComponent {
       this.isActive = false;
     }
   }
-  onDisableYScroll() {
-    this.disableYScroll(true);
-  }
-  onEnableYScroll() {
-    this.disableYScroll(false);
-  }
   onAutoscroll(ev) {
     ev.stopPropagation();
     const duration = ev.detail.duration || 1000;
@@ -205,16 +199,9 @@ export class YooIonScrollComponent {
       this.el.removeEventListener('mousewheel', this.preventDefault);
     }
   }
-  disableYScroll(disable) {
-    if (this.el) {
-      this.el.style.overflowY = disable ? 'hidden' : 'auto';
-    }
-  }
   onScrollStart() {
     this.isScrolling = true;
-    this.ionScrollStart.emit({
-      isScrolling: true
-    });
+    this.ionScrollStart.emit({ isScrolling: true });
     if (this.watchDog) {
       clearInterval(this.watchDog);
     }
@@ -229,9 +216,7 @@ export class YooIonScrollComponent {
     clearInterval(this.watchDog);
     this.watchDog = null;
     this.isScrolling = false;
-    this.ionScrollEnd.emit({
-      isScrolling: false
-    });
+    this.ionScrollEnd.emit({ isScrolling: false });
   }
   render() {
     return (h(Host, { class: {
@@ -288,7 +273,7 @@ export class YooIonScrollComponent {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionScroll, nothing will change.\nNote, the does not disable the system bounce on iOS. That is an OS level setting."
         },
         "attribute": "force-overscroll",
         "reflect": false
@@ -305,7 +290,7 @@ export class YooIonScrollComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "If true, the component will emit scroll events."
         },
         "attribute": "scroll-events",
         "reflect": false,
@@ -323,7 +308,7 @@ export class YooIonScrollComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "If true, the component will show scrollbar."
         },
         "attribute": "show-scrollbar",
         "reflect": false
@@ -340,7 +325,7 @@ export class YooIonScrollComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "If true, the component will use horizontal scroll instead of vertical."
         },
         "attribute": "horizontal-mode",
         "reflect": false,
@@ -375,7 +360,7 @@ export class YooIonScrollComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the scroll has started."
         },
         "complexType": {
           "original": "IScrollBaseDetail",
@@ -395,7 +380,7 @@ export class YooIonScrollComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted while scrolling. This event is disabled by default.\nLook at the property: `scrollEvents`"
         },
         "complexType": {
           "original": "IScrollDetail",
@@ -430,7 +415,7 @@ export class YooIonScrollComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the scroll has ended."
         },
         "complexType": {
           "original": "IScrollBaseDetail",
@@ -505,7 +490,7 @@ export class YooIonScrollComponent {
       },
       "scrollByPoint": {
         "complexType": {
-          "signature": "(x: number, y: number, duration: number) => Promise<any>",
+          "signature": "(x: number, y: number, duration: number) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -521,7 +506,7 @@ export class YooIonScrollComponent {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "Scroll by a specified X/Y distance in the component",
@@ -597,18 +582,6 @@ export class YooIonScrollComponent {
         "target": undefined,
         "capture": false,
         "passive": true
-      }, {
-        "name": "dragStarted",
-        "method": "onDisableYScroll",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "dragEnded",
-        "method": "onEnableYScroll",
-        "target": undefined,
-        "capture": false,
-        "passive": false
       }, {
         "name": "autoscroll",
         "method": "onAutoscroll",

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

@@ -52,15 +52,13 @@ export class YooIonSlidesComponent {
       this.update();
     }
   }
-  async onBlockMoves(ev) {
+  async onBlockMoves({ detail }) {
     const swiper = await this.getSwiper();
-    const shouldLock = ev === null || ev === void 0 ? void 0 : ev.detail;
+    const shouldLock = detail;
     if (swiper) {
-      const { allowSlideNext, allowSlidePrev } = swiper;
       swiper.allowSlideNext = !shouldLock;
       swiper.allowSlidePrev = !shouldLock;
       swiper.allowTouchMove = !shouldLock;
-      Object.assign(swiper, { allowSlideNext, allowSlidePrev });
     }
   }
   onMouseEnter() {

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

@@ -237,6 +237,7 @@ svg:not(:root) {
   text-align: center;
   word-break: break-word;
   transform: scale(0.9);
+  opacity: 0;
 }
 :host #view-finder .sequence:not(.overflowing) {
   place-content: center;
@@ -256,26 +257,12 @@ svg:not(:root) {
 :host #view-finder .sequence.active {
   color: var(--dark, #000000);
   transform: scale(1);
+  opacity: 1;
 }
 :host #view-finder .sequence.title {
   font-weight: var(--font-weight-700, 700);
   font-size: var(--font-size-28, 1.75rem);
 }
-:host .overlay {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 35%;
-}
-:host .overlay[placement=top] {
-  top: 0;
-  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 50%);
-}
-:host .overlay[placement=bottom] {
-  bottom: 0;
-  background: linear-gradient(0deg, var(--light, #ffffff) 50%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%);
-}
 :host yoo-button {
   position: absolute;
   left: 50%;
@@ -284,7 +271,7 @@ svg:not(:root) {
   transform: translateX(-50%);
 }
 :host yoo-button[placement=top] {
-  top: 0;
+  top: var(--spacing-16, 1rem);
 }
 :host yoo-button[placement=bottom] {
   bottom: var(--spacing-16, 1rem);
@@ -321,7 +308,6 @@ svg:not(:root) {
   animation-delay: 0.75s;
   animation-fill-mode: forwards;
 }
-:host([animated]) .sequence,
-:host([animated]) .overlay {
-  transition: transform 0.25s;
+:host([animated]) .sequence {
+  transition: opacity 0.5s, transform 0.25s;
 }

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

@@ -89,14 +89,8 @@ export class YooTextSequenceComponent {
     };
     return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), ...(!isUp && this.animated && { onanimationend: () => this.revealSequences = true }), onClick: () => clickArrow() }, h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
-  renderOverlay(placement) {
-    return h("section", { class: "overlay", ...{ placement } });
-  }
-  renderPart(placement) {
-    return [this.renderArrow(placement), this.renderOverlay(placement)];
-  }
   render() {
-    return h(Host, null, this.renderPart('top'), this.renderSequences(), this.renderPart('bottom'));
+    return h(Host, null, this.renderArrow('top'), this.renderSequences(), this.renderArrow('bottom'));
   }
   static get is() { return "yoo-text-sequence"; }
   static get encapsulation() { return "shadow"; }

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

@@ -166,12 +166,6 @@ export class YooIonToastControllerComponent {
         "target": "body",
         "capture": false,
         "passive": false
-      }, {
-        "name": "ionToastDidUnload",
-        "method": "toastWillDismiss",
-        "target": "body",
-        "capture": false,
-        "passive": false
       }, {
         "name": "keyup",
         "method": "escapeKeyUp",

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

@@ -937,7 +937,7 @@ export class YooInputBarComponent {
   }
   renderTextarea() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", size: this.host.classList.contains('small') ? 'small' : null, resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionFitMaxRows: true, maxRows: 5, disableInput: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.disableInput, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.otherIds, mentions: (_d = this.advancedOptions) === null || _d === void 0 ? void 0 : _d.mentions, mentionItems: (_f = (_e = this.advancedOptions) === null || _e === void 0 ? void 0 : _e.mentionUsers) === null || _f === void 0 ? void 0 : _f.map((user) => ({ _id: user._id, avatar: user, text: getUserDisplayName(user) })), followCursor: (_g = this.advancedOptions) === null || _g === void 0 ? void 0 : _g.shouldNotFetchMentionData, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onFetchData: (ev) => this.onFetchUsersData(ev), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') }, !this.hasTextInside && (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder))), this.isInputTypeAllowed(MessageInput.gif) && this.renderGifIcon()));
+    return (h("yoo-form-text-area", { ref: (el) => (this.formTextArea = el), class: "input-bar", size: this.host.classList.contains('small') ? 'small' : null, disableKeyboardResizing: true, resizable: "both", value: this.value, initialRows: 1, allowMention: (_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.allowMention, mentionFitMaxRows: true, maxRows: 5, disableInput: (_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.disableInput, allowCustomInput: true, disableEnter: isWeb(this.host), otherIds: (_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.otherIds, mentions: (_d = this.advancedOptions) === null || _d === void 0 ? void 0 : _d.mentions, mentionItems: (_f = (_e = this.advancedOptions) === null || _e === void 0 ? void 0 : _e.mentionUsers) === null || _f === void 0 ? void 0 : _f.map((user) => ({ _id: user._id, avatar: user, text: getUserDisplayName(user) })), followCursor: (_g = this.advancedOptions) === null || _g === void 0 ? void 0 : _g.shouldNotFetchMentionData, onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onInputChanged: (ev) => this.onInput(ev), onEnterPressed: (ev) => isWeb(this.host) && ev.detail && this.onActionClick(), onFetchData: (ev) => this.onFetchUsersData(ev), onClick: () => isWeb(this.host) && this.sendAttachment.emit('') }, !this.hasTextInside && (h("div", { slot: "placeholder", class: "placeholder" }, translate(this.placeholder))), this.isInputTypeAllowed(MessageInput.gif) && this.renderGifIcon()));
   }
   renderCaptureIcon() {
     var _a, _b, _c, _d, _e, _f;

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.css

@@ -211,7 +211,7 @@ svg:not(:root) {
 }
 :host li {
   break-inside: avoid;
-  padding: var(--spacing-02, 0.125rem) 0 var(--spacing-16, 1rem);
+  padding: var(--spacing-02, 0.125rem) var(--spacing-02, 0.125rem) var(--spacing-16, 1rem);
 }
 :host ul {
   margin: 0;
@@ -221,7 +221,6 @@ svg:not(:root) {
   list-style: none;
 }
 :host yoo-card-list-color {
-  --card-border-radius: var(--border-radius-04, 0.25rem);
   --subheading-line-clamp: 3 !important;
   --title-margin-bottom: 0;
   --title-padding-top: var(--spacing-08, 0.5rem);

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.js

@@ -9,7 +9,7 @@ export class YooMobileTabbarMoreComponent {
     const items = this.items ? [...this.items.filter((_, index) => index % 2 === 0), ...this.items.filter((_, index) => index % 2 === 1)] : [];
     return (h(Host, null, items.length > 10 && (h("yoo-form-input", { size: "large", class: "menu search", "icon-prefix": "search", hideOptional: true, clearable: false, forceValueUpdate: true, placeholder: translate('SEARCHMODULES'), onInputChanged: ({ detail }) => (this.search = detail) })), h("ul", { hidden: !items.length }, items.map((item) => {
       var _a;
-      return (h("li", { hidden: this.search && !((_a = item.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.search.toLowerCase())) }, h("yoo-card-list-color", { onClick: () => this.itemClicked.emit(item), entry: { items: [{ placement: 'header', subheading: item.text, icons: [{ place: 'left', name: item.icon, color: 'app-color' }] }] }, notif: item.notif })));
+      return (h("li", { hidden: this.search && !((_a = item.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.search.toLowerCase())) }, h("yoo-card-list-color", { onClick: () => this.itemClicked.emit(item), entry: { items: [{ placement: 'header', subheading: item.text, icons: [{ place: 'left', name: item.icon, color: 'app-color', size: 'large' }] }] }, notif: item.notif })));
     }))));
   }
   static get is() { return "yoo-mobile-tabbar-more"; }

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

@@ -15,7 +15,7 @@
  * https://zpl.io/25yLEEj
  */
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getResizedImageSize, gsapFrom, gsapSet, gsapTo, isBase64, isIOS, isOffline, isWeb, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate } from '@shared/utils';
+import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getResizedImageSize, gsapFrom, gsapSet, gsapTo, isBase64, isIOS, isIpad, isOffline, isWeb, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { createBaseAnnotation, getElement, isAnnotationDeleted, isAnnotationEmpty, isAnnotationFocused, isAnnotationValid, isElementInsideContainer } from '@yobi/utils/helpers/annotations-helpers';
 import { cloudinary, getAppContext, getPointerCoordinates, getTransformInfos } from '@yobi/utils/helpers/common-helpers';
@@ -345,7 +345,7 @@ export class YooPhotoEditorComponent {
     };
   }
   get maxImageSize() {
-    const COEFF_RESIZE = 3;
+    const COEFF_RESIZE = isIpad() ? 2 : 3;
     const { width, height } = this.maxViewport;
     return {
       width: COEFF_RESIZE * width,

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

@@ -1,5 +1,5 @@
 import { Device } from '@awesome-cordova-plugins/device';
-import { Cloudinary, debounce, getClosestImageRatio, getExtension, getMedia, getVideoPoster, intersectionObserve, isCloudinaryLink, isVideo, isWeb, pipes } from '@shared/utils';
+import { Cloudinary, debounce, getClosestImageRatio, getExtension, getMedia, getVideoPoster, intersectionObserve, isCloudinaryLink, isSamsung, isVideo, isWeb, pipes } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getFromOfflineStorage } from '@yobi/utils/cache/local-forage';
 import { getAppContext, querySelectorDeep } from '@yobi/utils/helpers/common-helpers';
@@ -156,7 +156,7 @@ export class YooVideoPlayerVideojsComponent {
   async componentWillLoad() {
     var _a;
     this.source = await getFromOfflineStorage(this.source);
-    this.source = getMedia(this.source, { forceCookieUrlParam: true, transform: (_a = Device === null || Device === void 0 ? void 0 : Device.manufacturer) === null || _a === void 0 ? void 0 : _a.includes('HONOR') });
+    this.source = getMedia(this.source, { forceCookieUrlParam: true, transform: ((_a = Device === null || Device === void 0 ? void 0 : Device.manufacturer) === null || _a === void 0 ? void 0 : _a.includes('HONOR')) || isSamsung(), width: isSamsung() ? 2048 : null });
     this.fallbackSrc = getFallbackSource(this.source);
     this.currentFallbackSrcIndex = 0;
   }

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -243,6 +243,7 @@ svg:not(:root) {
   --align-items: normal;
   --justify-content: start;
   --min-height: 3rem;
+  --card-background: var(--light, #ffffff);
   --card-border-radius: var(--border-radius-08, 0.5rem);
   --card-border: none;
   --card-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
@@ -251,10 +252,9 @@ svg:not(:root) {
   --header-display: grid;
   --heading-right-icon-placement: 0;
   --top-padding: 0;
-  --heading-font-weight: normal;
-  --heading-font-size: var(--font-size-16, 1rem);
-  --heading-margin: 0
-  // Concat props
+  --heading-font-weight: var(--card-heading-font-weight, normal);
+  --heading-font-size: var(--card-heading-font-size, var(--font-size-16, 1rem));
+  --heading-margin: 0;
   --heading-line-clamp: 2;
   --subheading-line-clamp: 2;
   --subheading-description-line-clamp: 3;
@@ -285,7 +285,7 @@ svg:not(:root) {
   margin-bottom: var(--title-margin-bottom);
   padding: var(--top-padding) var(--spacing-16, 1rem) var(--top-padding);
   color: var(--dark, #000000);
-  background: var(--light, #ffffff);
+  background: var(--card-background);
   border: var(--card-border);
   border-radius: var(--card-border-radius);
   box-shadow: var(--card-shadow);

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

@@ -1,6 +1,7 @@
 import { isWeb, translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isFinite } from 'lodash-es';
+const OuterContainer = ({ tooltip, web }, children) => tooltip ? (h("yoo-tooltip", { class: "outer-container", content: tooltip, hoverable: web, placement: "bottom" }, children)) : (h("div", { class: "outer-container" }, children));
 export class YooCardListColorComponent {
   constructor() {
     this.entry = undefined;
@@ -9,7 +10,7 @@ export class YooCardListColorComponent {
   }
   renderBlock(entry) {
     const { icons, heading, tagElements, tagDefaultSize, subheading, subHeadingDescription, progress, imgSrc, color, placement } = entry;
-    return (h("div", { class: placement || 'header', style: placement === 'header' ? { fill: color } : {} }, !!icons && icons.map((icon) => this.renderIcon(icon)), !!(tagElements === null || tagElements === void 0 ? void 0 : tagElements.length) && this.renderTags(tagElements), (entry === null || entry === void 0 ? void 0 : entry.placement) === 'body' && !(tagElements === null || tagElements === void 0 ? void 0 : tagElements.length) && h("div", { class: "tags-container" }, h("yoo-tag", { class: "tags-placeholder", size: tagDefaultSize || 'small' })), !!heading && this.renderTextBlock('heading', heading), !!progress && this.renderProgress(progress), !!subheading && this.renderTextBlock('subheading', subheading), !!subHeadingDescription && this.renderTextBlock('subheading-description', subHeadingDescription), !!imgSrc && this.renderImage(imgSrc)));
+    return (h("div", { class: placement || 'header', style: placement === 'header' ? { fill: color } : {} }, !!icons && icons.map((icon) => this.renderIcon(icon)), !!(tagElements === null || tagElements === void 0 ? void 0 : tagElements.length) && this.renderTags(tagElements), (entry === null || entry === void 0 ? void 0 : entry.placement) === 'body' && !(tagElements === null || tagElements === void 0 ? void 0 : tagElements.length) && (h("div", { class: "tags-container" }, h("yoo-tag", { class: "tags-placeholder", size: tagDefaultSize || 'small' }))), !!heading && this.renderTextBlock('heading', heading), !!progress && this.renderProgress(progress), !!subheading && this.renderTextBlock('subheading', subheading), !!subHeadingDescription && this.renderTextBlock('subheading-description', subHeadingDescription), !!imgSrc && this.renderImage(imgSrc)));
   }
   renderIcon(icon) {
     const { place, name, size, color, customColor } = icon;
@@ -29,9 +30,8 @@ export class YooCardListColorComponent {
     return (imgSrc && (h("div", { class: "image-container" }, h("yoo-img", { src: imgSrc }))));
   }
   render() {
-    var _a, _b, _c, _d, _e;
-    const TagType = ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.tooltip) ? 'yoo-tooltip' : 'Fragment';
-    return (h(Host, { dir: document.dir, class: { 'has-image': !!((_c = (_b = this.entry) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.find(({ imgSrc }) => imgSrc)) } }, this.entry && (h(TagType, { hoverable: isWeb(this.host), placement: "bottom", content: translate(this.entry.tooltip), class: "outer-container" }, (_e = (_d = this.entry) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.map((item) => this.renderBlock(item))))));
+    var _a, _b, _c, _d;
+    return (h(Host, { dir: document.dir, class: { 'has-image': !!((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.find(({ imgSrc }) => imgSrc)) } }, this.entry && (h(OuterContainer, { tooltip: translate(this.entry.tooltip), web: isWeb(this.host) }, (_d = (_c = this.entry) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.map((item) => this.renderBlock(item))))));
   }
   static get is() { return "yoo-card-list-color"; }
   static get encapsulation() { return "shadow"; }
@@ -56,7 +56,7 @@ export class YooCardListColorComponent {
           "references": {
             "ICardListColorEntry": {
               "location": "import",
-              "path": "./types"
+              "path": "@shared/interfaces"
             }
           }
         },