@yoobic/yobi 8.2.0-2 → 8.2.0-20

package/dist/collection/components/2.molecules/context-menu-dialog/context-menu-dialog.css

@@ -466,7 +466,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.side-menu) {
   width: 12rem;
   margin-left: 10px;
-  background-color: #333333;
+  background-color: var(--anthracite, #1a1a1a);
   border-color: transparent;
   transform: inherit;
 }
@@ -476,7 +476,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 10px;
   height: 10px;
   margin-left: -6px;
-  background-color: #333333;
+  background-color: var(--anthracite, #1a1a1a);
   border: inherit;
   border-radius: 0px 0px 0px 0.1em;
   transform: rotate(45deg);

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/modal/modal.js

@@ -42,32 +42,19 @@ export class YooIonModalComponent {
     this.presented = false;
     this.hasPresented = false;
     this.arrowElements = [];
-    this.onKeyboardDidShow = () => {
+    this.onKeyboardDidShow = async (ev) => {
       var _a;
       if (!isWeb(this.host) && this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && !this.fullscreen) {
-        gsapTo(this.dialogElement, 0.5, {
-          y: 0,
-          height: window.innerHeight,
-          onComplete: () => {
-            this.modalYPosition = 0;
-            this.setFullscreen();
-          }
-        });
+        this.keyboardHeight = ev['keyboardHeight'];
+        await gsapTo(this.dialogElement, 0.5, { y: 0, height: window.innerHeight + this.keyboardHeight });
+        this.setFullscreen();
       }
     };
     this.onKeyboardDidHide = () => {
       var _a;
-      const height = this.dialogElement.style.height;
-      const finalHeight = `${window.innerHeight - this.modalYPosition}px`;
-      if (this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && this.fullscreen && height !== finalHeight && !isWeb(this.host)) {
-        gsapTo(this.dialogElement, 0, {
-          y: this.modalYPosition,
-          height: window.innerHeight,
-          onComplete: () => {
-            this.dialogElement.style.height = finalHeight;
-            this.setFullscreen(false);
-          }
-        });
+      if (!isWeb(this.host) && this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && this.fullscreen) {
+        this.keyboardHeight = 0;
+        this.setFullscreen();
       }
     };
   }
@@ -344,7 +331,7 @@ export class YooIonModalComponent {
     }
   }
   setModalRHeight() {
-    this.dialogElement.style.height = `${window.innerHeight - this.modalYPosition}px`;
+    this.dialogElement.style.height = `${(window.innerHeight + this.keyboardHeight) - this.modalYPosition}px`;
   }
   setArrowsStyle() {
     const slidesElement = this.host.querySelector('yoo-ion-slides');
@@ -395,7 +382,7 @@ export class YooIonModalComponent {
     this.host.classList.remove(modalClass[1]);
     this.dialogContentElement.classList.add(modalClass[0]);
     this.dialogContentElement.classList.remove(modalClass[1]);
-    const modalHeight = window.innerHeight;
+    const modalHeight = window.innerHeight + this.keyboardHeight;
     const newHeight = `${modalHeight}px`;
     if (setFullscreen) {
       this.dialogElement.style.height = newHeight;

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/profile-summary/profile-summary.css

@@ -210,6 +210,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .profile-user yoo-tag {
   margin-top: var(--spacing-08, 0.5rem);
 }
+:host .profile-user > yoo-avatar {
+  z-index: 11;
+}
 :host .profile-user .profile-details {
   text-align: center;
 }

package/dist/collection/components/2.molecules/progress-recap/progress-recap.js

@@ -7,7 +7,7 @@ export class YooProgressRecap {
       h("yoo-icon", { name: "help", size: "small", color: "stable" })));
   }
   renderProgressbar() {
-    return (h("yoo-progress-bar", { metric: "step", class: {
+    return (h("yoo-progress-bar", { metric: "step", maxValue: this.max, value: this.progress, class: {
         success: !isNil(this.min) || (!isNil(this.min) && this.progress >= this.min),
         danger: !isNil(this.min) && this.progress < this.min
       }, ...this.min && {
@@ -15,7 +15,7 @@ export class YooProgressRecap {
             text: `${translateMulti('YOOBICMIN')}: ${this.min}`,
             xPercent: (this.min / this.max) * 100
           }]
-      }, maxStep: this.max, currentStep: this.progress }));
+      } }));
   }
   render() {
     return (h(Host, null,

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

@@ -1167,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/2.molecules/text-sequence/text-sequence.css

@@ -203,31 +203,51 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
   height: 100%;
   overflow: hidden;
 }
-:host #sequences {
+:host #view-finder {
   position: relative;
+  width: 100%;
+  height: 50%;
+}
+:host #view-finder #sequences {
   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)));
+  width: 100%;
 }
-:host #sequences .sequence {
-  overflow: scroll;
+:host #view-finder .sequence {
+  display: grid;
+  height: var(--max-sequence-height);
+  padding: 0 var(--spacing-16, 1rem);
+  overflow: auto;
   color: var(--stable, #adadad);
+  text-align: center;
   word-break: break-word;
   transform: scale(0.9);
+  transition: all 500ms ease-in-out;
+}
+:host #view-finder .sequence:not(.overflowing) {
+  place-content: center;
+}
+:host #view-finder .sequence * {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: var(--spacing-08, 0.5rem) auto;
+  text-align: center;
 }
-:host #sequences .sequence.active {
+:host #view-finder .sequence::-webkit-scrollbar {
+  display: none;
+}
+:host #view-finder .sequence.active {
   color: var(--dark, #000000);
   transform: scale(1);
 }
-:host #sequences .sequence.title {
-  margin-top: 50%;
+:host #view-finder .sequence.title {
   font-weight: var(--font-weight-700, 700);
   font-size: var(--font-size-28, 1.75rem);
 }
@@ -267,14 +287,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--app-color, #5a30f4);
 }
 
-:host([live-preview]) #sequences,
-:host(.mobile) #sequences {
-  margin-top: 35%;
-}
-
 :host([animated]) yoo-button,
 :host([animated]) #sequences,
 :host([animated]) .sequence,
 :host([animated]) .overlay {
-  transition: all 300ms ease 0s;
+  transition: transform 300ms;
 }