@yoobic/yobi 8.2.0-0 → 8.2.0-3

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

@@ -34,6 +34,7 @@ export class YooFormAudienceComponent {
         value: 'saved'
       }
     ];
+    this.refreshConfig = false;
   }
   componentWillLoad() {
     var _a;
@@ -108,6 +109,7 @@ export class YooFormAudienceComponent {
       this.value.storesQuery = {};
       this.value.usersQuery = {};
     }
+    this.refreshConfig = true;
     this.updateValue(true);
     this.showPreviewGrid = false;
     setTimeout(() => {
@@ -420,7 +422,14 @@ export class YooFormAudienceComponent {
       }
     }
     return (this.showPreviewGrid || type === 'manual') && h("div", { class: "preview-grid" },
-      h("yoo-grid", { ref: (el) => this.gridUsers = el, collectionName: "user", displayType: "card-grid", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
+      h("yoo-grid", { ref: (el) => {
+          var _a;
+          this.gridUsers = el;
+          if (this.refreshConfig) {
+            (_a = this.gridUsers) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
+            this.refreshConfig = false;
+          }
+        }, collectionName: "user", displayType: "card-grid", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
   }
   renderStoresGridHeader() {
     var _a, _b, _c, _d;
@@ -451,7 +460,14 @@ export class YooFormAudienceComponent {
       }
     }
     return (this.showPreviewGrid || type === 'manual') && h("div", { class: "preview-grid" },
-      h("yoo-grid", { ref: (el) => this.gridStores = el, collectionName: "locations", displayType: "card-grid", model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
+      h("yoo-grid", { ref: (el) => {
+          var _a;
+          this.gridStores = el;
+          if (this.refreshConfig) {
+            (_a = this.gridStores) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
+            this.refreshConfig = false;
+          }
+        }, collectionName: "locations", displayType: "card-grid", model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
   }
   renderTabsGridHeader() {
     var _a, _b, _c;

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

@@ -380,6 +380,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-left: var(--spacing-16, 1rem);
   color: var(--app-color, #5a30f4);
   text-align: right;
+  cursor: pointer;
 }
 :host .outer-container .multiple .capture-status .status {
   width: 100%;
@@ -483,6 +484,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .multiple .top-action-container .right-action {
   width: 100%;
   color: var(--app-color, #5a30f4);
+  cursor: pointer;
 }
 :host .outer-container .multiple .top-action-container .left-action {
   text-align: left;

package/dist/collection/components/form/form-dynamic/form-dynamic.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 */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;

package/dist/collection/components/form/form-input-container/form-input-container.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 */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;

package/dist/collection/components/form/form-phone-number/form-phone-number.css

@@ -206,10 +206,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
 }
 
-:host([size=small]) {
-  font-size: var(--font-size-12, 0.75rem);
-}
-
+:host([size=small]),
 :host([size=medium]) {
   font-size: var(--font-size-14, 0.875rem);
 }
@@ -223,62 +220,63 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: 0;
   transition: margin 500ms ease-out;
 }
-:host(:not([readonly])) .dialog {
-  position: absolute;
+:host(:not([readonly])) yoo-context-dialog {
   box-sizing: border-box;
   width: 100%;
   height: 16.5rem;
   margin: var(--spacing-08, 0.5rem) 0 0;
   overflow: auto;
-  background: var(--light, #ffffff);
-  border-radius: var(--border-radius-04, 0.25rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
-:host(:not([readonly])) .dialog hr {
+:host(:not([readonly])) yoo-context-dialog hr {
   width: 100%;
   height: 1px;
   margin: 0;
   background: var(--stable-light, #f1f1f1);
   border: none;
 }
+:host(:not([readonly])) yoo-context-dialog yoo-loader {
+  align-self: center;
+  justify-self: center;
+  height: 100%;
+}
 
 :host(:not([readonly])[expanded]) {
   margin-bottom: 17rem;
   transition: margin 500ms ease-in;
 }
 
-:host(:not([readonly])[size=small]) .dialog {
+:host(:not([readonly])[size=small]) yoo-context-dialog {
   top: 1.5rem;
 }
 
-:host(:not([readonly])[size=medium]) .dialog {
+:host(:not([readonly])[size=medium]) yoo-context-dialog {
   top: 2rem;
 }
 
-:host(:not([readonly])[size=large]) .dialog {
+:host(:not([readonly])[size=large]) yoo-context-dialog {
   top: 3rem;
 }
 
-:host(.web) .dialog {
+:host(.web) yoo-context-dialog {
   /* Track */
   /* Handle */
 }
-:host(.web) .dialog::-webkit-scrollbar {
+:host(.web) yoo-context-dialog::-webkit-scrollbar {
   width: var(--spacing-04, 0.25rem);
   height: var(--spacing-04, 0.25rem);
 }
-:host(.web) .dialog::-webkit-scrollbar-track {
+:host(.web) yoo-context-dialog::-webkit-scrollbar-track {
   background-color: transparent;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host(.web) .dialog::-webkit-scrollbar-thumb {
+:host(.web) yoo-context-dialog::-webkit-scrollbar-thumb {
   background-color: transparent;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host(.web) .dialog:hover::-webkit-scrollbar-track {
+:host(.web) yoo-context-dialog:hover::-webkit-scrollbar-track {
   background-color: var(--stable-light, #f1f1f1);
 }
-:host(.web) .dialog:hover::-webkit-scrollbar-thumb {
+:host(.web) yoo-context-dialog:hover::-webkit-scrollbar-thumb {
   background: var(--stable, #adadad);
 }
 

package/dist/collection/components/form/form-phone-number/form-phone-number.js

@@ -3,7 +3,7 @@ import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '
 import { formatIncompletePhoneNumber, getCountries, getCountryCallingCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js';
 import * as examples from 'libphonenumber-js/examples.mobile.json';
 import { getGeolocation } from '../../../utils/helpers/geolocation-helpers';
-import { Dialog, Error, Input, List, Search } from './parts';
+import { Error, Input, List, Search } from './parts';
 const getRegionalIndicatorSymbol = (letter) => String.fromCodePoint(0x1f1e6 - 65 + letter.toUpperCase().charCodeAt(0));
 const getCountryFlag = (country) => getRegionalIndicatorSymbol(country[0]) + getRegionalIndicatorSymbol(country[1]);
 export class YooFormPhoneNumberComponent {
@@ -32,6 +32,11 @@ export class YooFormPhoneNumberComponent {
      * If `true`, the user cannot edit the value.
      */
     this.readonly = false;
+    /**
+     * Whether to use geolocation (will remove loader)
+     */
+    this.useGeolocation = true;
+    this.isLoading = false;
   }
   get phoneNumber() {
     return this.value && parsePhoneNumberFromString(this.value);
@@ -58,7 +63,7 @@ export class YooFormPhoneNumberComponent {
       }))
         .sort((country1, country2) => country1.label.localeCompare(country2.label));
       this.options = this.countries;
-      getGeolocation().then(({ countryCode }) => (this.geolocation = this.countries.find(({ code }) => code === countryCode)));
+      this.updateGeolocation();
       this.updateInputStates();
     }
   }
@@ -82,6 +87,14 @@ export class YooFormPhoneNumberComponent {
       this.updateValue(phoneNumber);
     }
   }
+  updateGeolocation() {
+    if (this.useGeolocation) {
+      this.isLoading = true;
+      getGeolocation()
+        .then(({ countryCode }) => (this.geolocation = this.countries.find(({ code }) => code === countryCode)))
+        .finally(() => (this.isLoading = false));
+    }
+  }
   updateValue(phoneNumber) {
     var _a;
     const value = (_a = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.number) === null || _a === void 0 ? void 0 : _a.toString();
@@ -101,17 +114,20 @@ export class YooFormPhoneNumberComponent {
     var _a;
     const internationalNumber = this.readonly && ((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.formatInternational());
     return (h(Host, null,
-      this.readonly && h("yoo-link", { size: this.size, href: `tel:${internationalNumber}` }, internationalNumber),
+      !this.isLoading && this.readonly && h("yoo-link", { size: this.size, href: `tel:${internationalNumber}` }, internationalNumber),
       !this.readonly && [
-        h(Input, { clearable: this.clearable, country: this.selectedCountry, disabled: this.disabled, focusedOnce: this.focusedOnce, name: this.name, placeholder: this.placeholder || getExampleNumber(this.selectedCountry.code, examples).formatNational(), required: this.required, size: this.size, valid: this.valid, value: this.nationalNumber, onChange: (value) => (this.nationalNumber = value), onFocus: () => (this.focusedOnce = true), onToggleCountries: () => (this.expanded = !this.expanded) }),
+        h(Input, { isLoading: this.isLoading, clearable: this.clearable, country: this.selectedCountry, disabled: this.disabled, focusedOnce: this.focusedOnce, name: this.name, placeholder: this.placeholder || getExampleNumber(this.selectedCountry.code, examples).formatNational(), required: this.required, size: this.size, valid: this.valid, value: this.nationalNumber, onChange: (value) => (this.nationalNumber = value), onFocus: () => (this.focusedOnce = true), onToggleCountries: () => (this.expanded = !this.expanded) }),
         h(Error, { hidden: this.disabled || this.expanded || !this.focusedOnce || this.valid, message: translate('INCORRECTFORMAT') }),
-        h(Dialog, { hidden: !this.expanded },
-          h(Search, { disabled: this.disabled, size: this.size, onChange: (search) => (this.options = this.countries.filter((country) => country.toString().toLowerCase().includes(search.toLowerCase()))) }),
-          h("hr", null),
-          h(List, { geolocation: this.geolocation, options: this.options, value: this.selectedCountry, onChange: (country) => {
-              this.country = country;
-              this.expanded = false;
-            } }))
+        h("yoo-context-dialog", { hidden: !this.expanded, class: "absolute" }, this.isLoading
+          ? h("yoo-loader", { size: "extra-large" })
+          : [
+            h(Search, { disabled: this.disabled, size: this.size, onChange: (search) => (this.options = this.countries.filter((country) => country.toString().toLowerCase().includes(search.toLowerCase()))) }),
+            h("hr", null),
+            h(List, { options: this.options, value: this.selectedCountry, onChange: (country) => {
+                this.country = country;
+                this.expanded = false;
+              } })
+          ])
       ]));
   }
   static get is() { return "yoo-form-phone-number"; }
@@ -286,6 +302,24 @@ export class YooFormPhoneNumberComponent {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "useGeolocation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether to use geolocation (will remove loader)"
+      },
+      "attribute": "use-geolocation",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -293,7 +327,8 @@ export class YooFormPhoneNumberComponent {
     "focusedOnce": {},
     "geolocation": {},
     "nationalNumber": {},
-    "options": {}
+    "options": {},
+    "isLoading": {}
   }; }
   static get events() { return [{
       "method": "inputChanged",

package/dist/collection/components/form/form-phone-number/parts/index.js

@@ -1,4 +1,3 @@
-export * from './dialog';
 export * from './error';
 export * from './input';
 export * from './list';

package/dist/collection/components/form/form-phone-number/parts/input.js

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
-export const Input = ({ clearable, country, disabled, focusedOnce, name, placeholder, required, size, valid, value, onChange, onFocus, onToggleCountries }) => (h("div", { class: { input: true, invalid: focusedOnce && !valid } },
-  h("strong", { class: "clickable country-code", onClick: onToggleCountries },
-    country.flag,
-    " +",
-    country.callingCode),
+export const Input = ({ isLoading, clearable, country, disabled, focusedOnce, name, placeholder, required, size, valid, value, onChange, onFocus, onToggleCountries }) => (h("div", { class: { input: true, invalid: focusedOnce && !valid } },
+  h("strong", { class: "clickable country-code", onClick: onToggleCountries }, isLoading ? h("yoo-loader", { size: size === 'small'
+      ? 'extra-small'
+      : size === 'medium'
+        ? 'small'
+        : 'medium' }) : `${country.flag} +${country.callingCode}`),
   h("input", { disabled: disabled, name: name, placeholder: placeholder, required: required, type: "tel", value: value, onFocus: onFocus, onInput: (event) => onChange(event.target.value) }),
   clearable && (h("yoo-icon", { class: "clickable", name: "cross", hidden: !value, size: size === 'large' ? 'medium' : 'small', onMouseDown: (event) => event.preventDefault(), onClick: () => onChange(null) }))));

package/dist/collection/components/form/form-phone-number/parts/list.js

@@ -1,6 +1,4 @@
 import { h } from '@stencil/core';
 import { ListItem } from './list-item';
-const getOptions = (options, geolocation) => (geolocation ? options.filter((option) => option !== geolocation) : options);
-export const List = ({ geolocation, options, value, onChange }) => (h("ul", null,
-  geolocation && h(ListItem, { option: geolocation, onClick: () => geolocation !== value && onChange(geolocation) }),
-  getOptions(options, geolocation).map((option) => (h(ListItem, { option: option, onClick: () => option !== value && onChange(option) })))));
+const getOptions = (options, value) => (value ? options.filter((option) => option !== value) : options);
+export const List = ({ value, options, onChange }) => (h("ul", null, getOptions(options, value).map((option) => (h(ListItem, { option: option, onClick: () => onChange(option) })))));

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -57,6 +57,7 @@ import { destroyMountPoints, generateRandomMountElementId, initShadowMountPoints
 export class YooFormTextEditorComponent {
   constructor() {
     this.validators = [];
+    this.placeholder = 'TYPESOMETHING';
     this.linkPreviews = [];
     this.formatAmpersandSymbol = false;
     this.allowLinkPreview = false;
@@ -211,7 +212,7 @@ export class YooFormTextEditorComponent {
     return {
       key: 'vYA6mB4F4H5B3H4A10dNSWXf1h1MDb1CF1PLPFf1C1EESFKVlA3C11A8D6D2C4E4G2C3H3==',
       theme: 'royal',
-      placeholder: translate(this.placeholder),
+      placeholderText: translate(this.placeholder),
       toolbarSticky: false,
       requestHeaders: { Authorization: 'Bearer ' + (session === null || session === void 0 ? void 0 : session.token) },
       heightMax: this.isFullscreen ? '100%' : this.maxHeight || 500,
@@ -905,7 +906,8 @@ export class YooFormTextEditorComponent {
         "text": ""
       },
       "attribute": "placeholder",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'TYPESOMETHING'"
     },
     "minHeight": {
       "type": "number",

package/dist/collection/components/form/slides-media/slides-media.js

@@ -96,6 +96,7 @@ export class YooSlidesMediaComponent {
   }
   disconnectedCallback() {
     this.resetCordovaChanges();
+    this.pauseMedia();
   }
   get currentItem() {
     return this.items && isArray(this.items) && this.items.length && isFinite(this.currentIndex) && this.items[this.currentIndex];
@@ -124,6 +125,12 @@ export class YooSlidesMediaComponent {
       ScreenOrientation.lock(orientation);
     }
   }
+  pauseMedia() {
+    var _a, _b, _c;
+    const { type } = this.currentItem || {};
+    type === 'audio' && ((_b = (_a = this.cardMediaElements) === null || _a === void 0 ? void 0 : _a[this.currentIndex]) === null || _b === void 0 ? void 0 : _b.pauseAudioPlayer());
+    type === 'video' && ((_c = this.videoPlayerElement) === null || _c === void 0 ? void 0 : _c.pauseVideo());
+  }
   showPhotoDetailView() {
     var _a, _b, _c;
     if (this.currentItem && this.displayType && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.isReadonly)) {
@@ -280,10 +287,11 @@ export class YooSlidesMediaComponent {
       photoEditorElement.initResizeObserver();
       const switchToPreview = () => {
         this.isReadonly = false;
+        const { validated, flagged, tags } = this.currentItem || {};
         Object.assign(cardMediaElement, {
-          validated: this.currentItem.validated,
-          flagged: this.currentItem.flagged,
-          tags: this.currentItem.tags,
+          validated,
+          flagged,
+          tags,
           annotated: isPhotoEdited(this.currentItem)
         });
         actionButtonContainer.style.display = 'block';
@@ -291,12 +299,13 @@ export class YooSlidesMediaComponent {
       const switchToPreviewAnimation = async () => {
         const timeline = await gsapTimeline();
         const tl = timeline({
-          paused: true, onComplete() {
+          paused: true, onComplete: () => {
             photoEditorElement.isReadonly = true;
             photoEditorElement.hasBackButton = false;
             photoEditorElement.closeHandler = () => closeModal(null);
             photoEditorElement.prepareImageSize();
             switchToPreview();
+            forceUpdate(this);
           }
         });
         tl.to(mainElement, .75, { width: 560 });
@@ -363,7 +372,7 @@ export class YooSlidesMediaComponent {
   renderImageTitle(item) {
     return h("mark", null,
       " ",
-      item.imageTitle);
+      translateMulti(item.imageTitle));
   }
   onSlideDidChange(ev) {
     // This method gets called when an image is opened for an index !== 0
@@ -424,7 +433,7 @@ export class YooSlidesMediaComponent {
         item.missiondescription && this.renderMissionDescription(item),
         !!title && [translate('YOOBICIN'), h("mark", null,
             " ",
-            ' "' + title + '" '), translate('MISSION')],
+            ' "' + translateMulti(title) + '" '), translate('MISSION')],
         item.imageTitle && this.renderImageTitle(item)),
       !!((_b = item === null || item === void 0 ? void 0 : item.tags) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: "tags" }, item.tags.map((tag) => `#${translateMulti(tag)}`)),
       this.renderBottomContainerActionButtons(item)));
@@ -473,12 +482,13 @@ export class YooSlidesMediaComponent {
         h("mark", null, ' ' + item.userDisplayname + ' '),
         item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null))));
   }
-  renderVideoPlayer(item, controls = item.control || false) {
+  renderVideoPlayer(item, index, controls = item.control || false) {
     const attrs = {
       videoPlayerCoreParameters: {
         source: (item.value || item._downloadURL || '').split(',')[0],
         controls,
         fullscreen: true,
+        autoplay: this.currentIndex === index,
         noSwiping: true
       },
       modalOptions: {
@@ -486,7 +496,7 @@ export class YooSlidesMediaComponent {
         modalMode: true
       }
     };
-    return h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerEl = el), ...attrs });
+    return h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerElement = el), ...attrs });
   }
   renderPhotoEditor(item, index) {
     var _a, _b, _c, _d;
@@ -615,12 +625,12 @@ export class YooSlidesMediaComponent {
         h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, translate('YOOBICDONE')))));
   }
   renderSlideContentByDisplayType(item, index) {
-    const video = isVideo(this.getPhotoSrc(item));
+    const isTypeVideo = isVideo(this.getPhotoSrc(item));
     if (this.displayType === 'card-media' || item.type === 'audio') {
       return (h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) },
-        h("div", { slot: "main", class: { 'content-container': true, video } },
+        h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } },
           this.isImage(item) && this.renderPhotoEditor(item, index),
-          video && this.renderVideoPlayer(item, true)),
+          isTypeVideo && this.renderVideoPlayer(item, index, true)),
         this.isTagging && h("div", { slot: "footer" }, this.renderTagContent(item)),
         !this.isTagging && this.renderHoverButtons(item)));
     }
@@ -637,7 +647,7 @@ export class YooSlidesMediaComponent {
       return [
         item.type !== 'photo' && this.renderActionButtons(item),
         h("div", { class: "content-container" },
-          item.type === 'video' ? this.renderVideoPlayer(item) : this.renderPhotoEditor(item, index),
+          item.type === 'video' ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index),
           this.showBottomContainer && this.renderBottomContainer(item, index)),
         (item.user || item.missiondescription || item.fieldTitle || item.tags) && h("div", { class: "toolbar-shadow-portrait" })
       ];
@@ -645,7 +655,11 @@ export class YooSlidesMediaComponent {
   }
   renderInnerSwipeContent() {
     return (h("div", { class: "slides-container" },
-      h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideDrag: () => { var _a; return (_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips(); }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) },
+      h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
+          var _a;
+          this.isImage(this.currentItem) && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips());
+          this.pauseMedia();
+        }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) },
         this.isFirstLoad && h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }),
         this.items.map((item, index) => {
           return h("yoo-ion-slide", { class: { 'outside-navigation-arrows': isWeb(this.host) } }, this.shouldRenderSlideContent(index) && this.renderSlideContent(item, index));

package/dist/collection/components/grid/grid/grid.css

@@ -751,9 +751,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host yoo-ion-item-divider {
   --padding-start: var(--item-divider-padding-start);
+  --divider-font-size: var(--item-divider-font-size);
   color: var(--dark, #000000);
   font-weight: var(--font-weight-400, 400);
-  font-size: var(--item-divider-font-size);
+  font-size: var(--divider-font-size);
 }
 :host yoo-ion-item-divider .count {
   margin-left: var(--spacing-04, 0.25rem);
@@ -761,6 +762,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-ion-item-divider .divider-inner {
   display: flex;
   align-items: center;
+  color: var(--text-color, #807f83);
 }
 :host .card-list-color.web yoo-ion-item-divider {
   --padding-start: 0;
@@ -863,18 +865,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .body-container.card-inbox yoo-ion-item-divider, :host .body-container.card-inbox-ongoing yoo-ion-item-divider {
   margin-bottom: var(--spacing-08, 0.5rem);
-  padding-top: 0;
 }
 :host .body-container.card-inbox yoo-ion-item-divider.first, :host .body-container.card-inbox-ongoing yoo-ion-item-divider.first {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
 }
-:host .body-container.card-inbox yoo-ion-item-divider .divider-inner, :host .body-container.card-inbox-ongoing yoo-ion-item-divider .divider-inner {
-  padding: 0;
-  color: var(--text-color, #807f83);
-  font-size: var(--font-size-14, 0.875rem);
-}
 :host .body-container.card-inbox .sub-item-container, :host .body-container.card-inbox-ongoing .sub-item-container {
   display: flex;
   flex-direction: column;
@@ -2462,6 +2458,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.web) ::slotted(.missions-page.grid-extra-opts[slot=before-scroll]) {
   margin-left: 0 !important;
 }
+:host(.web) .sub-item-container .relative {
+  position: relative;
+}
+:host(.web) .sub-item-container yoo-icon.position {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  right: auto;
+  bottom: auto;
+  left: 0rem;
+  padding-right: var(--spacing-04, 0.25rem);
+}
 
 :host(.form-grid) yoo-ion-item.selected {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
@@ -4063,9 +4070,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-04, 0.25rem);
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
-:host(.card-list.calendarEvents) yoo-ion-item-divider .divider-inner {
-  font-size: var(--font-size-14, 0.875rem);
-}
 
 :host(.course-live-preview.web) .container-base {
   margin-right: var(--spacing-16, 1rem);
@@ -4154,17 +4158,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);
 }
 
-:host(.form-grid.web.local) .relative {
-  position: relative;
-}
-:host(.form-grid.web.local) yoo-icon.position {
-  position: absolute;
-  top: calc(50% - 0.75rem);
-  right: auto;
-  bottom: auto;
-  left: 0rem;
-  padding-right: var(--spacing-04, 0.25rem);
-}
 :host(.form-grid.web.local) yoo-ion-item-divider {
   --padding-start: 0;
 }
@@ -4189,6 +4182,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   left: auto;
   padding-right: var(--spacing-08, 0.5rem);
 }
+:host(.form-grid.web.local.charttype) yoo-icon.position[name=circle] {
+  display: none;
+}
 
 :host(.web.autocomplete-selection-mode.empty-tags) .container-base .empty-new-tag {
   justify-content: space-evenly;