@yoobic/yobi 8.1.0-110 → 8.1.0-113

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

@@ -83,7 +83,10 @@ export class YooActionSheetComponent {
       this.closeActionSheet(true);
     }
   }
-  onButtonClick(button) {
+  onButtonClick(button, ev) {
+    if (ev) {
+      ev.stopPropagation();
+    }
     this.onReady.then(() => {
       var _a;
       if (!button.disabled) {
@@ -95,7 +98,7 @@ export class YooActionSheetComponent {
           copyToClipboard(button.handler());
         }
         this.actionSelected.emit(button);
-        (_a = button.handler) === null || _a === void 0 ? void 0 : _a.call(button);
+        (_a = button.handler) === null || _a === void 0 ? void 0 : _a.call(button, ev);
         this.closeActionSheet();
       }
     });
@@ -137,7 +140,7 @@ export class YooActionSheetComponent {
         last: lastIndex && !(button.icon || description),
         [button.textClass || '']: true,
         [button.color || '']: true
-      }, onClick: () => this.onButtonClick(button), ref: (el) => (this.actionClickDivs[index] = el), onTouchStart: () => this.onItemTouchStart(this.actionClickDivs[index]), onTouchEnd: () => this.onItemTouchEnd(this.actionClickDivs[index]) },
+      }, onClick: (ev) => this.onButtonClick(button, ev), ref: (el) => (this.actionClickDivs[index] = el), onTouchStart: () => this.onItemTouchStart(this.actionClickDivs[index]), onTouchEnd: () => this.onItemTouchEnd(this.actionClickDivs[index]) },
       button.icon && this.renderButtonIcon(button),
       h("div", { class: { 'text-container': true, 'icon-no-description': button.icon && !hasDescription, 'icon-description': button.icon && hasDescription } },
         button.isBeta ? (h("span", null,

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

@@ -264,9 +264,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--value-font-size);
   line-height: var(--value-line-height);
   text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 :host .kpi-number span {
   display: flex;
@@ -314,6 +311,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-04, 0.25rem);
 }
 
+:host(:not(.vertical)) .kpi-number {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host(.vertical) .kpi-container {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 :host(:not(.content-only)) {
   --card-padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-16, 1rem);
 }

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

@@ -203,7 +203,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   display: block;
-  height: 100%;
   padding: var(--spacing-16, 1rem);
   background-color: var(--stable-light, #f1f1f1);
 }
@@ -252,9 +251,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transform: rotateX(-180deg);
 }
 
-:host(.web) {
-  padding: var(--spacing-24, 1.5rem);
-}
 :host(.web) .cards-container .card {
   cursor: pointer;
 }

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

@@ -32,6 +32,7 @@ export class YooIonSlidesComponent {
      */
     this.options = {}; // SwiperOptions;  // TODO
     this.isAtBeginningPosition = true;
+    this.isAtEndPosition = false;
     this.disconnected = false;
     this.swiperReady = false;
     this.swiper = new Promise((resolve) => {
@@ -111,7 +112,7 @@ export class YooIonSlidesComponent {
     const swiper = await this.getSwiper();
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     swiper.slideNext(speed, runCallbacks);
-    await this.showHideNavigationButtons();
+    await this.updateNavigationButtonsVisibility();
   }
   /**
    * Transition to the previous slide.
@@ -120,7 +121,7 @@ export class YooIonSlidesComponent {
     this.setSlidesOverflow(speed);
     const swiper = await this.getSwiper();
     swiper.slidePrev(speed, runCallbacks);
-    await this.showHideNavigationButtons();
+    await this.updateNavigationButtonsVisibility();
   }
   /**
    * Get the index of the active slide.
@@ -249,6 +250,7 @@ export class YooIonSlidesComponent {
     catch (e) {
       // do nothing;
     }
+    this.swiperInstance = null;
     this.swiper = new Promise((resolve) => {
       this.readySwiper = resolve;
     });
@@ -268,7 +270,7 @@ export class YooIonSlidesComponent {
       });
     });
   }
-  async showHideNavigationButtons() {
+  async updateNavigationButtonsVisibility() {
     if (isWeb(this.el) && this.swiperReady) {
       const index = await this.getActiveIndex();
       const length = await this.length();
@@ -290,6 +292,7 @@ export class YooIonSlidesComponent {
     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;
     }
   }
   async initSwiper() {
@@ -463,15 +466,13 @@ export class YooIonSlidesComponent {
       this.pager && h("div", { class: "swiper-pagination", ref: (el) => (this.paginationEl = el) }),
       this.showArrows && [
         !this.isAtBeginningPosition &&
-          h("div", { ref: (el) => (this.navigationPreviousEl = el), class: {
-              'swiper-button-prev': true,
-              hidden: this.initialSlide === 0
-            }, onClick: () => this.slidePrev() },
+          h("div", { ref: (el) => (this.navigationPreviousEl = el), class: "swiper-button-prev", onClick: () => this.slidePrev() },
             h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" },
               h("yoo-icon", { color: "dark", name: "left", size: "small" }))),
-        h("div", { ref: (el) => (this.navigationNextEl = el), class: "swiper-button-next", onClick: () => this.slideNext() },
-          h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" },
-            h("yoo-icon", { color: "dark", name: "right", size: "small" })))
+        !this.isAtEndPosition &&
+          h("div", { ref: (el) => (this.navigationNextEl = el), class: "swiper-button-next", onClick: () => this.slideNext() },
+            h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" },
+              h("yoo-icon", { color: "dark", name: "right", size: "small" })))
       ],
       this.scrollbar && h("div", { class: "swiper-scrollbar", ref: (el) => (this.scrollbarEl = el) })));
   }
@@ -629,7 +630,8 @@ export class YooIonSlidesComponent {
   }; }
   static get states() { return {
     "showNavigationArrows": {},
-    "isAtBeginningPosition": {}
+    "isAtBeginningPosition": {},
+    "isAtEndPosition": {}
   }; }
   static get events() { return [{
       "method": "ionSlidesDidLoad",

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

@@ -203,149 +203,77 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   position: relative;
+  display: block;
   height: 100%;
-}
-:host .container {
-  position: relative;
-  height: calc(100% - (3rem + (var(--border-width-01, 0.0625rem) * 2)) * 2);
   overflow: hidden;
 }
-:host .text-container {
+:host #sequences {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16, 1rem);
+  padding: 0 var(--spacing-16, 1rem);
   text-align: center;
+  transform: translateY(calc(-1 * var(--spacing-16, 1rem)));
 }
-:host .title {
-  font-size: var(--font-size-28);
-  opacity: 0;
-}
-:host .text {
-  padding-right: var(--spacing-08, 0.5rem);
-  padding-bottom: var(--spacing-16, 1rem);
-  padding-left: var(--spacing-08, 0.5rem);
-  overflow: initial;
+:host #sequences .sequence {
+  overflow: scroll;
+  color: var(--stable, #adadad);
   word-break: break-word;
-  opacity: 0;
+  transform: scale(0.9);
+}
+:host #sequences .sequence.active {
+  color: var(--dark, #000000);
+  transform: scale(1);
+}
+:host #sequences .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: 0;
+  height: 35%;
 }
-:host .overlay.top {
+:host .overlay[placement=top] {
   top: 0;
-  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 100%);
+  background: linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 65%);
 }
-:host .overlay.bottom {
+:host .overlay[placement=bottom] {
   bottom: 0;
-  background: linear-gradient(0deg, var(--light, #ffffff) 0%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%);
+  background: linear-gradient(0deg, var(--light, #ffffff) 35%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%);
 }
-:host .arrow-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+:host yoo-button {
+  position: absolute;
+  left: 50%;
+  z-index: 2;
   width: 5rem;
-  height: 3rem;
-  margin: auto;
-  border: solid var(--border-width-01, 0.0625rem) var(--stable-alt);
-  border-radius: var(--border-radius-08, 0.5rem);
+  transform: translateX(-50%);
+  transition: opacity 0.35s ease-in-out;
 }
-:host .arrow-button.up {
-  opacity: 0;
+:host yoo-button[placement=top] {
+  top: var(--spacing-16, 1rem);
 }
-:host .arrow-button:hover {
-  cursor: pointer;
+:host yoo-button[placement=bottom] {
+  bottom: var(--spacing-16, 1rem);
 }
-:host yoo-icon {
-  fill: var(--app-color, #5a30f4);
+:host yoo-button[hidden] {
+  opacity: 0;
 }
-
-:host(.web) .container {
-  max-height: 50vh;
+:host yoo-button yoo-icon {
+  fill: var(--app-color, #5a30f4);
 }
 
-:host(:not([animated])) .arrow-button.down {
-  opacity: 1;
+:host([live-preview]) .overlay,
+:host([live-preview]) yoo-button {
+  position: fixed;
 }
 
-:host([animated]) .text-container {
-  transition: all 300ms ease 0s;
-}
-:host([animated]) .text {
-  transition: all 300ms ease 0s;
-}
-:host([animated]) .arrow-button {
-  transition: all 300ms var(--ease-in-out-sine) 100ms;
-}
+:host([animated]) yoo-button,
+:host([animated]) #sequences,
+:host([animated]) .sequence,
 :host([animated]) .overlay {
   transition: all 300ms ease 0s;
-}
-
-:host([animated][openingTextAnimation]) .text.first {
-  animation-name: "fade-in";
-  animation-duration: 300ms;
-  animation-timing-function: var(--ease-out-sin);
-  animation-delay: 300ms;
-  animation-fill-mode: forwards;
-}
-:host([animated][openingTextAnimation]) .text.second {
-  animation-name: "fade-in-custom";
-  animation-duration: 300ms;
-  animation-timing-function: var(--ease-out-sin);
-  animation-delay: 400ms;
-  animation-fill-mode: forwards;
-}
-
-:host([animated][openingArrowAnimation]) .arrow-button.down {
-  animation-duration: 400ms;
-  animation-timing-function: var(--ease-out-quad);
-  animation-fill-mode: forwards;
-}
-
-:host([animated][isPreview]) .arrow-button.down {
-  transform: translateY(-45rem);
-}
-
-:host([animated][openingArrowAnimation][isPreview]) .arrow-button.down {
-  animation-name: "preview-sliding-from-top";
-}
-
-:host([animated]:not([isPreview])) .arrow-button.down {
-  transform: translateY(-100vh);
-}
-
-:host([animated][openingArrowAnimation]:not([isPreview])) .arrow-button.down {
-  animation-name: "sliding-from-top";
-}
-
-@keyframes sliding-from-top {
-  from {
-    transform: translateY(-100vh);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes preview-sliding-from-top {
-  from {
-    transform: translateY(-45rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fade-in-custom {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.4;
-  }
 }