@yoobic/yobi 8.2.0-0 → 8.2.0-11

package/dist/collection/components/2.molecules/item-divider/item-divider.css

@@ -206,6 +206,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --padding-end: 0px;
   --padding-top: 0px;
   --padding-bottom: 0px;
+  --divider-font-size: var(--font-size-18, 1.125rem);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   margin: 0;
@@ -251,10 +252,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: var(--spacing-04, 0.25rem);
   overflow: hidden;
   font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-18, 1.125rem);
+  font-size: var(--divider-font-size);
   text-overflow: ellipsis;
 }
 
-:host(.web) .item-divider-wrapper {
-  font-size: var(--font-size-16, 1rem);
+:host(.web) {
+  --divider-font-size: var(--font-size-16, 1rem);
 }

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

@@ -254,9 +254,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 1;
 }
 :host .kpi-container:not(:last-of-type) {
+  padding-right: var(--values-gap);
   border-right: var(--value-separator);
 }
 :host .kpi-container.hidden {
+  padding-right: 0;
   opacity: 0;
 }
 :host .kpi-number {

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

@@ -425,22 +425,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.quickview).has-footer.has-header .modal-wrapper {
   height: calc(100% - 6.5625rem);
 }
-:host(.quickview).quickview-right-panel.no-shadow .overlay {
+:host(.quickview).quickview-right-panel.no-shadow .overlay, :host(.quickview).quickview-left-panel.no-shadow .overlay {
   display: none;
 }
 :host(.quickview).quickview-right-panel.no-top .modal-wrapper,
-:host(.quickview).quickview-right-panel.no-top .overlay {
+:host(.quickview).quickview-right-panel.no-top .overlay, :host(.quickview).quickview-left-panel.no-top .modal-wrapper,
+:host(.quickview).quickview-left-panel.no-top .overlay {
   top: 0;
 }
-:host(.quickview).quickview-right-panel .overlay {
+:host(.quickview).quickview-right-panel .overlay, :host(.quickview).quickview-left-panel .overlay {
   top: 3.5rem;
 }
-:host(.quickview).quickview-right-panel .modal-wrapper {
+:host(.quickview).quickview-right-panel .modal-wrapper, :host(.quickview).quickview-left-panel .modal-wrapper {
   top: 3.5rem;
   width: 22.5rem;
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   border-left: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
+:host(.quickview).quickview-left-panel .modal-wrapper {
+  right: auto;
+  left: 0;
+  width: 24.5rem;
+}
 :host(.quickview) .modal-wrapper {
   top: 6.5rem;
   right: 0;
@@ -451,10 +457,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   top: 3.5625rem;
 }
 
+:host(.quickview-left-panel:not(.mobile)) .modal-wrapper,
 :host(.quickview-right-panel:not(.mobile)) .modal-wrapper,
 :host(.quickview:not(.mobile)) .modal-wrapper {
   position: fixed;
 }
+:host(.quickview-left-panel:not(.mobile)) .overlay,
 :host(.quickview-right-panel:not(.mobile)) .overlay,
 :host(.quickview:not(.mobile)) .overlay {
   position: fixed;

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

@@ -121,11 +121,10 @@ export class YooProfileListComponent {
     }
   }
   renderTruncate(content, icon) {
-    const charLength = isWeb(this.host) ? 83 : 38;
     return (h("div", { class: "user-info-list" },
       h("div", { class: "start-container" },
         h("yoo-icon", { name: icon, color: "dark" }),
-        h("yoo-truncate", { content: content, maxLength: charLength, showEllipsisIcon: true }))));
+        h("yoo-truncated-line", { content: content }))));
   }
   renderCollapsible(header, content) {
     return (h("yoo-collapsible", { hasArrowIcon: !!content.length, icon: "tag", iconColor: "dark", iconSize: "medium", slotHeader: true },
@@ -152,7 +151,7 @@ export class YooProfileListComponent {
       return (h("yoo-grid", { ...attrs },
         h("div", { slot: "header", class: "profile-summary" },
           h("div", { class: "title" }, ((_b = this.recentItems) === null || _b === void 0 ? void 0 : _b.length) + ' ' + translate('LATESTTENANTS')),
-          h("div", { class: "action", onClick: () => this.onSeeAllClicked() }, translate('SEEALL')))));
+          h("div", { class: "action", onClick: () => this.onSeeAllClicked() }, translate('YOOBICSEEALL')))));
     }
   }
   renderAdminLinks() {

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

@@ -202,59 +202,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: block;
-  padding: var(--spacing-16, 1rem);
-  background-color: var(--stable-light, #f1f1f1);
-}
-:host .cards-container {
-  display: grid;
-  gap: var(--spacing-16, 1rem);
-}
-:host .cards-container .card {
-  font-size: var(--font-size-20, 1.25rem);
-  background-color: transparent;
-  perspective: 62.5rem;
-}
-:host .cards-container .card .card-inner {
-  display: flex;
-  transform-style: preserve-3d;
-  transition: transform 0.8s;
-}
-:host .cards-container .card .card-inner .card-front,
-:host .cards-container .card .card-inner .card-back {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 100%;
-  min-height: 6.25rem;
+  flex-direction: column;
+  gap: var(--spacing-16, 1rem);
   padding: var(--spacing-16, 1rem);
-  text-align: center;
-  word-break: break-word;
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-:host .cards-container .card .card-inner .card-front {
-  color: var(--dark, #000000);
-  font-weight: var(--font-weigth-700);
-  background-color: var(--light, #ffffff);
-}
-:host .cards-container .card .card-inner .card-back {
-  color: var(--light, #ffffff);
-  font-size: var(--font-size-16, 1rem);
-  background-color: var(--app-color, #5a30f4);
-  transform: rotateX(-180deg) translate(-100%, 0);
-}
-:host .cards-container .card.revealed .card-inner {
-  transform: rotateX(-180deg);
-}
-
-:host(.web) .cards-container .card {
-  cursor: pointer;
-}
-:host(.web) .cards-container .card .card-front,
-:host(.web) .cards-container .card .card-back {
-  min-height: 5rem;
+  background-color: var(--stable-light, #f1f1f1);
 }

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

@@ -1,64 +1,32 @@
-/**
- * @name: yoo-reveal
- * @author: Renate Urdzina
- * Zeplin Link: https://zpl.io/V07QBZm, https://zpl.io/aXeA8zE
- */
-import { isWeb, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 export class YooRevealComponent {
   constructor() {
-    /**
-     * Validity is true once all cards revealed
-     * */
     this.validity = false;
-    this.cardsRevealed = 0;
-  }
-  onValuesChanged() {
-    this.cardsRevealed = 0;
-    this.revealedCardIndex = undefined;
+    this.cardElements = [];
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
-  updateValidity() {
-    const _validity = this.cardsRevealed === this.values.length;
-    if (this.validity !== _validity) {
-      this.validity = _validity;
-    }
-  }
-  updateClickedCards(index) {
-    if ((!this.values[index].clicked || this.values[index].clicked === false) && this.cardsRevealed !== this.values.length) {
-      this.values[index].clicked = true;
-      this.cardsRevealed = this.cardsRevealed + 1;
-    }
+  componentDidUpdate() {
+    var _a;
+    (_a = this.cardElements) === null || _a === void 0 ? void 0 : _a.forEach(e => e === null || e === void 0 ? void 0 : e.initCardSize());
   }
-  revealCard(card, index) {
-    if ((card === null || card === void 0 ? void 0 : card.revealed) === true) {
-      card.revealed = false;
-      this.revealedCardIndex = undefined;
-    }
-    else {
-      if (isFinite(this.revealedCardIndex)) {
-        this.values[this.revealedCardIndex].revealed = false;
-      }
-      this.updateClickedCards(index);
-      this.values[index].revealed = true;
-      this.revealedCardIndex = index;
-    }
-    this.updateValidity();
+  onCardRevealed(index) {
+    var _a, _b;
+    this.cardElements[index].setAttribute('checked', 'true');
+    (_b = (_a = this.cardElements) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id !== `card-${index}`)) === null || _b === void 0 ? void 0 : _b.forEach(card => card.revealed = false);
+    this.validity = this.cardElements.filter(card => card.getAttribute('checked')).length === this.cardElements.length;
   }
   renderCard(card, index) {
-    return (h("div", { class: { card: true, revealed: card === null || card === void 0 ? void 0 : card.revealed }, onClick: () => this.revealCard(card, index) },
-      h("div", { class: "card-inner" },
-        h("div", { class: "card-front" }, translateMulti(card === null || card === void 0 ? void 0 : card.frontside)),
-        h("div", { class: "card-back" }, translateMulti(card === null || card === void 0 ? void 0 : card.backside)))));
-  }
-  renderCards() {
-    var _a;
-    return h("div", { class: "cards-container" }, (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((card, index) => this.renderCard(card, index)));
+    const { frontside, backside } = card || {};
+    return h("yoo-flip-card", { id: `card-${index}`, ref: el => this.cardElements[index] = el, onCardRevealed: () => this.onCardRevealed(index) },
+      h("div", { slot: "front" }, translateMulti(frontside)),
+      h("div", { slot: "back" }, translateMulti(backside)));
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host) } }, this.values && this.renderCards());
+    var _a;
+    return h(Host, null, (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((card, index) => this.renderCard(card, index)));
   }
   static get is() { return "yoo-reveal"; }
   static get encapsulation() { return "shadow"; }
@@ -83,10 +51,10 @@ export class YooRevealComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Values that are passed from lesson creator"
+        "text": ""
       }
     },
     "validity": {
@@ -98,19 +66,16 @@ export class YooRevealComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Validity is true once all cards revealed"
+        "text": ""
       },
       "attribute": "validity",
       "reflect": false,
       "defaultValue": "false"
     }
   }; }
-  static get states() { return {
-    "revealedCardIndex": {}
-  }; }
   static get events() { return [{
       "method": "validityChanged",
       "name": "validityChanged",
@@ -119,7 +84,7 @@ export class YooRevealComponent {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "An event is triggered when all cards revealed"
+        "text": ""
       },
       "complexType": {
         "original": "boolean",
@@ -129,9 +94,6 @@ export class YooRevealComponent {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
       "propName": "validity",
       "methodName": "onValidityChanged"
     }]; }

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

@@ -58,7 +58,7 @@ export class YooScrollToButtonComponent {
       "mutable": false,
       "complexType": {
         "original": "Partial<IButton>",
-        "resolved": "{ actionType?: TActionType; icon?: TIconName; iconSize?: TIconSize; iconSlot?: TButtonSlot; text?: string; textClass?: string; iconColor?: TColor; iconOnlyColor?: TColor; isLoading?: boolean; cssClass?: string; subMenu?: IButton[]; separator?: boolean; href?: string; selected?: boolean; selectedFn?: (ev?: any) => boolean; isToggle?: boolean; hasDivider?: boolean; userItem?: IUser; notif?: string | number | boolean; handler?: (ev?: any) => any; isVisible?: (ev?: any) => boolean; value?: any; actionableIcon?: IButton; actionableIcons?: IButton[]; tooltip?: string; color?: TColor; size?: TSize; style?: { [key: string]: string; }; disabled?: boolean; badge?: IBadgeEntry; tagElements?: ITagElement; description?: string; fill?: TButtonFill; shape?: TButtonShape; animated?: boolean; rippleType?: TButtonRippleType; type?: TButtonType; path?: IRoute; forceModal?: boolean; module?: \"@app\" | \"@admin\" | \"@calendar\" | \"@campaign\" | \"@chat\" | \"@document\" | \"@edt\" | \"@feed\" | \"@incentive\" | \"@insight\" | \"@learning\" | \"@menu\" | \"@mission\" | \"@public\" | \"@question\" | \"@waitlist\"; enterAnimation?: string; leaveAnimation?: string; }",
+        "resolved": "{ actionType?: TActionType; icon?: TIconName; iconSize?: TIconSize; iconSlot?: TButtonSlot; text?: string; textClass?: string; iconColor?: TColor; iconOnlyColor?: TColor; isLoading?: boolean; cssClass?: string; subMenu?: IButton[]; separator?: boolean; href?: string; selected?: boolean; selectedFn?: (ev?: any) => boolean; isToggle?: boolean; hasDivider?: boolean; userItem?: IUser; notif?: string | number | boolean; handler?: (ev?: any) => any; isVisible?: (ev?: any) => boolean; value?: any; actionableIcon?: IButton; actionableIcons?: IButton[]; tooltip?: string; color?: TColor; size?: TSize; style?: { [key: string]: string; }; disabled?: boolean; badge?: IBadgeEntry; tagElements?: ITagElement; description?: string; fill?: TButtonFill; shape?: TButtonShape; animated?: boolean; rippleType?: TButtonRippleType; type?: TButtonType; path?: IRoute; forceModal?: boolean; module?: \"@app\" | \"@admin\" | \"@calendar\" | \"@campaign\" | \"@chat\" | \"@document\" | \"@edt\" | \"@feed\" | \"@incentive\" | \"@insight\" | \"@learning\" | \"@menu\" | \"@mission\" | \"@public\" | \"@question\" | \"@waitlist\"; enterAnimation?: string; leaveAnimation?: string; slotName?: string; }",
         "references": {
           "Partial": {
             "location": "global"

package/dist/collection/components/2.molecules/{segment/segment.css → segmented-control/segmented-control.css}

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  position: relative;
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -212,22 +213,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   width: 100%;
   margin: var(--spacing-02, 0.125rem) 0;
 }
 :host .segment-container .segment-content {
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   width: 100%;
   padding: var(--spacing-04, 0.25rem);
 }
 :host .segment-container .segment-content h3 {
+  box-sizing: border-box;
+  width: 100%;
   margin: 0;
   padding-left: var(--spacing-04, 0.25rem);
   color: var(--text-color, #807f83);
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-12, 0.75rem);
+  text-align: center;
+}
+:host .segment-container .segment-content input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
 }
 :host .segment-container .separator {
   height: 60%;
@@ -246,11 +258,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .segment-container:last-of-type .separator {
   display: none;
 }
-:host .segment-container.active {
-  background: var(--app-color, #5a30f4);
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-}
 :host .segment-container.active h3 {
   color: var(--light, #ffffff);
 }
@@ -270,6 +277,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 2rem;
 }
 
+:host([size=medium]) yoo-icon + yoo-truncated-line,
+:host([size=small]) yoo-icon + yoo-truncated-line {
+  width: calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-04, 0.25rem)));
+}
+
 :host([size=large]) .segment-container h3 {
   font-size: var(--font-size-14, 0.875rem);
+}
+:host([size=large]) .segment-container yoo-icon + yoo-truncated-line {
+  width: calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-04, 0.25rem)));
+}
+
+:host([animated]) .segment-content h3 {
+  transition: color 0.3s ease-in-out;
+}
+:host([animated]) .active-background {
+  transition: all 0.3s ease-in-out;
+}
+
+.active-background {
+  position: absolute;
+  height: 87%;
+  margin: var(--spacing-02, 0.125rem) 0;
+  background: var(--app-color, #5a30f4);
+  border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }

package/dist/collection/components/2.molecules/{segment/segment.js → segmented-control/segmented-control.js}

@@ -1,10 +1,11 @@
-import { translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-export class YooSegmentComponent {
+import { resizeObserve, translate } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+export class YooSegmentedControlComponent {
   constructor() {
     this.values = [];
     this.size = 'medium';
     this.initialIndex = 0;
+    this.animated = true;
     this.selectedIndex = this.initialIndex;
   }
   onIndexUpdated() {
@@ -14,8 +15,20 @@ export class YooSegmentComponent {
     var _a, _b;
     return ((_b = (_a = this.values[index]) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.length) > 0;
   }
-  onSegmentClick(index) {
+  componentDidLoad() {
+    resizeObserve(this.host, this.moveActiveBackground.bind(this));
+    this.moveActiveBackground();
+  }
+  moveActiveBackground() {
+    var _a, _b;
+    this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+    this.activeBackgroundEl.style.marginLeft = `${(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetLeft}px`;
+  }
+  onSegmentClick(ev, index) {
     if (!this.readonly) {
+      const target = ev.target;
+      this.activeElement = target.closest('.segment-container');
+      this.moveActiveBackground();
       this.selectedIndex = index;
       this.segmentSelected.emit(index);
     }
@@ -24,7 +37,7 @@ export class YooSegmentComponent {
     var _a;
     return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((value, index) => {
       if (value) {
-        return (h("div", { class: { 'segment-container': true, active: this.selectedIndex === index }, onClick: () => this.onSegmentClick(index) },
+        return (h("div", { class: { 'segment-container': true, active: this.selectedIndex === index }, onClick: (ev) => this.onSegmentClick(ev, index), ref: el => this.selectedIndex === index ? this.activeElement = el : '', style: { width: `${100 / (this.values.length || 1)}%` } },
           this.renderSegment(value, index),
           h("slot", { name: value.id }),
           h("div", { class: {
@@ -36,20 +49,23 @@ export class YooSegmentComponent {
   }
   renderSegment(value, index) {
     return (h("div", { class: "segment-content" },
+      h("input", { checked: this.selectedIndex === index, name: `${index}`, type: "radio", value: index }),
       value.icon && h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index === this.selectedIndex ? 'light' : 'stable' }),
-      value.label && h("yoo-truncate", null,
+      value.label && h("yoo-truncated-line", null,
         h("h3", null, translate(value.label)))));
   }
   render() {
-    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } }, this.renderSegments());
+    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } },
+      this.renderSegments(),
+      h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
   }
-  static get is() { return "yoo-segment"; }
+  static get is() { return "yoo-segmented-control"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["segment.scss"]
+    "$": ["segmented-control.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["segment.css"]
+    "$": ["segmented-control.css"]
   }; }
   static get properties() { return {
     "values": {
@@ -147,6 +163,24 @@ export class YooSegmentComponent {
       },
       "attribute": "max-width",
       "reflect": false
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -168,6 +202,7 @@ export class YooSegmentComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "initialIndex",
       "methodName": "onIndexUpdated"

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

@@ -214,6 +214,11 @@ yoo-ion-slide yoo-form-capture {
   max-width: 18rem;
 }
 
+.large-slide.card-cell {
+  min-width: initial;
+  max-width: 6rem;
+}
+
 .slide-zoom {
   display: block;
   width: 100%;

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

@@ -290,9 +290,9 @@ export class YooIonSlidesComponent {
   }
   async updateNavigationButtonsState() {
     if (this.showArrows) {
-      const swiperInstance = await this.getSwiperInstance();
-      this.isAtBeginningPosition = swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.isBeginning;
-      this.isAtEndPosition = swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.isEnd;
+      const { isBeginning, isEnd } = await this.getSwiperInstance() || {};
+      this.isAtBeginningPosition = isBeginning;
+      this.isAtEndPosition = isEnd;
     }
   }
   async initSwiper() {
@@ -421,28 +421,21 @@ export class YooIonSlidesComponent {
     // overwriting these
     const eventOptions = {
       on: {
-        init: () => {
-          setTimeout(() => {
-            this.ionSlidesDidLoad.emit();
-          }, 20);
-        },
+        init: () => setTimeout(() => this.ionSlidesDidLoad.emit(), 20),
         slideChangeTransitionStart: () => this.ionSlideWillChange.emit(),
-        slideChangeTransitionEnd: () => {
-          this.ionSlideDidChange.emit();
-          this.updateNavigationButtonsState(); // when click on arrows
-        },
+        slideChangeTransitionEnd: () => this.ionSlideDidChange.emit(),
         slideNextTransitionStart: () => this.ionSlideNextStart.emit(),
         slidePrevTransitionStart: () => this.ionSlidePrevStart.emit(),
         slideNextTransitionEnd: () => this.ionSlideNextEnd.emit(),
         slidePrevTransitionEnd: () => this.ionSlidePrevEnd.emit(),
         transitionStart: () => this.ionSlideTransitionStart.emit(),
-        transitionEnd: () => {
-          this.getSwiperInstance().then((swiperInstance) => {
-            if (swiperInstance.snapIndex !== this.currentSwipeIndex) {
-              this.ionSlideTransitionEnd.emit(swiperInstance.snapIndex);
-              this.currentSwipeIndex = swiperInstance.snapIndex;
-            }
-          });
+        transitionEnd: async () => {
+          this.updateNavigationButtonsState(); // when click on arrows
+          const { snapIndex } = await this.getSwiperInstance() || {};
+          if (snapIndex !== this.currentSwipeIndex) {
+            this.ionSlideTransitionEnd.emit(snapIndex);
+            this.currentSwipeIndex = snapIndex;
+          }
         },
         sliderMove: () => {
           this.ionSlideDrag.emit();
@@ -1174,7 +1167,7 @@ export class YooIonSlidesComponent {
             "path": "./swiper/swiper-interface"
           }
         },
-        "return": "Promise<SwiperInterface>"
+        "return": "Promise<Swiper>"
       },
       "docs": {
         "text": "",

package/dist/collection/components/2.molecules/slides/swiper/swiper-interface.js

@@ -1 +1 @@
-export { FreeMode, Grid, Swiper as SwiperInterface, SwiperOptions } from 'swiper/dist/swiper.esm';
+export { FreeMode, Grid, Swiper as SwiperInterface } from 'swiper';

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

@@ -1,3 +1,3 @@
-import { Autoplay, Pagination, Scrollbar, Swiper } from 'swiper/dist/swiper.esm';
+import { Autoplay, Pagination, Scrollbar, Swiper } from 'swiper';
 Swiper.use([Pagination, Autoplay, Scrollbar]);
 export { Swiper };

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

@@ -226,6 +226,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-12, 0.75rem);
   background: var(--stable-ultralight, #fafafa);
 }
-:host yoo-form-choice {
+:host yoo-form-choice-button,
+:host yoo-form-choice-chat,
+:host yoo-form-choice-card,
+:host yoo-form-choice-image,
+:host yoo-form-choice-radio {
   padding: 0 var(--spacing-16, 1rem);
 }

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

@@ -28,7 +28,7 @@ export class YooDeviceListComponent {
       const deviceTitles = devices.filter((device) => device.category === deviceCategory && (!this.noWeb || device.isWeb !== true)).map((_device) => _device.displayTitle);
       return [
         h("div", { class: "divider" }, translate(deviceCategory)),
-        h("yoo-form-choice", { type: "radio", value: ((_a = this.selectedDevice) === null || _a === void 0 ? void 0 : _a.displayTitle) || 'iPhone X', values: deviceTitles, onInputChanged: (ev) => this.onDeviceChanged(ev) })
+        h("yoo-form-choice-radio", { value: ((_a = this.selectedDevice) === null || _a === void 0 ? void 0 : _a.displayTitle) || 'iPhone X', values: deviceTitles, onInputChanged: (ev) => this.onDeviceChanged(ev) })
       ];
     });
   }

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

@@ -213,6 +213,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .invisible {
   display: none;
 }
+:host .gif-icon {
+  cursor: pointer;
+}
 :host yoo-links-preview {
   transform: translateY(100%);
   transition: transform 0.25s;
@@ -236,6 +239,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   padding: var(--padding-input-container);
 }
+:host .outer-container .input-container .capture-icon {
+  cursor: pointer;
+}
 :host .outer-container .input-container .input-bar-icon-container {
   display: flex;
   align-items: center;
@@ -250,6 +256,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--app-color, #5a30f4);
   font-weight: bold;
   white-space: nowrap;
+  cursor: pointer;
 }
 :host .outer-container .placeholder {
   position: absolute;