@yoobic/yobi 8.2.0-7 → 8.2.0-8

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-11911d9b.js');
+const index = require('./index-9b4cc86d.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d82a50b9.js');
+require('./index-1c7eb28e.js');
 
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-11911d9b.js');
+const index$1 = require('./index-9b4cc86d.js');
 const lodash = require('./lodash-597bda6d.js');
 const annotationsHelpers = require('./annotations-helpers-45b1c2e4.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d82a50b9.js');
+require('./index-1c7eb28e.js');
 
 const zoomCss = ":host{overflow:hidden}:host([disabled]){cursor:default}:host([disabled]) ::slotted(*){-ms-touch-action:auto !important;touch-action:auto !important}";
 

package/dist/collection/collection-manifest.json

@@ -71,7 +71,7 @@
     "./components/2.molecules/refresher-content/refresher-content.js",
     "./components/2.molecules/reveal/reveal.js",
     "./components/2.molecules/scroll-to-button/scroll-to-button.js",
-    "./components/2.molecules/segment/segment.js",
+    "./components/2.molecules/segmented-control/segmented-control.js",
     "./components/2.molecules/slide/slide.js",
     "./components/2.molecules/slides/slides.js",
     "./components/2.molecules/text-sequence/text-sequence.js",

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%;
@@ -217,6 +218,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-02, 0.125rem) 0;
 }
 :host .segment-container .segment-content {
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -234,6 +236,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   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%;
   border-left: solid var(--border-width-02, 0.125rem) var(--dark-10, rgba(0, 0, 0, 0.1));
@@ -251,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);
 }
@@ -285,4 +287,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :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,10 +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), style: { width: `${100 / (this.values.length || 1)}%` } },
+        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: {
@@ -39,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-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": {
@@ -150,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 {
@@ -171,6 +202,7 @@ export class YooSegmentComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "initialIndex",
       "methodName": "onIndexUpdated"

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

@@ -228,8 +228,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
 }
-:host .outer-container .segment-container .segment,
-:host .outer-container .radio-container .segment {
+:host .outer-container .segment-container yoo-segmented-control,
+:host .outer-container .radio-container yoo-segmented-control {
   max-width: 18.75rem;
   margin-right: var(--spacing-16, 1rem);
 }

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

@@ -325,7 +325,7 @@ export class YooFormAudienceComponent {
     const index = this.targetValues.findIndex((v) => v.id === target);
     return this.enableTarget && h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: translate('AUDIENCETARGET') } },
       h("div", { class: "segment-container" },
-        h("yoo-segment", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
+        h("yoo-segmented-control", { readonly: this.readonly, values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
         this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
   }
   renderStoreTarget() {

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

@@ -4157,7 +4157,7 @@ export class YooFormDynamicComponent {
         break;
       case FormFieldType.segment:
         {
-          TagType = 'yoo-segment';
+          TagType = 'yoo-segmented-control';
           let initialIndex = 0;
           if (value) {
             initialIndex = field.values.findIndex((v) => v.id === value);

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

@@ -96,7 +96,7 @@ export class YooFormPermissionsComponent {
                 }
                 values.push({ label: `ROLE${role.toUpperCase()}` });
               });
-              element = document.createElement('yoo-segment');
+              element = document.createElement('yoo-segmented-control');
               element.values = values;
               element.initialIndex = selectedIndex;
               element.size = 'large';

package/dist/collection/components/grid/grid-calendar/grid-calendar.js

@@ -270,7 +270,7 @@ export class YooGridCalendarComponent {
         }
         : {
           datePicker: {
-            text: ((_a = translate('CALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
+            text: ((_a = translate('YOOBICCALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
             // icon: 'calendar',
             click: () => {
               this.showMobileCalendar = !this.showMobileCalendar;

package/dist/design-system/{camera-helpers-cba07d73.js → camera-helpers-9dd60aa7.js}

@@ -1,4 +1,4 @@
-import { c2 as cordova, c3 as IonicNativePlugin, ce as cordovaPropertyGet, cf as cordovaPropertySet, cg as registerPlugin, _ as getSession, ch as isIonic, d as isNativeMobile, ci as Device, e as isAndroid, v as isIOS, cj as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-0ca062eb.js';
+import { c2 as cordova, c3 as IonicNativePlugin, ce as cordovaPropertyGet, cf as cordovaPropertySet, cg as registerPlugin, _ as getSession, ch as isIonic, d as isNativeMobile, ci as Device, e as isAndroid, v as isIOS, cj as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-5e194889.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -205,7 +205,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-9eb0f25c.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-38cbb94f.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/design-system/{chat-helpers-f6246d60.js → chat-helpers-dca94274.js}

@@ -1,4 +1,4 @@
-import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-0ca062eb.js';
+import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-5e194889.js';
 import { a as isArray } from './lodash-494e728c.js';
 
 /**

package/dist/{esm/common-helpers-a2613dd7.js → design-system/common-helpers-98c37d9c.js}

@@ -1,4 +1,4 @@
-import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-0ca062eb.js';
+import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-5e194889.js';
 import { A as get } from './lodash-494e728c.js';
 
 function getDefaultModalAnimation() {