@yoobic/yobi 8.2.0-5 → 8.2.0-52

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;
 }

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

@@ -1,85 +1,78 @@
-import { cleanupWKWebViewFilePath, findParent, getKeyToCache, setSecuredContent, translateMulti } from '@shared/utils';
+import { findParent, setSecuredContent, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { clamp, compact } from 'lodash-es';
-import { getFromLocalForage } from '../../../utils/cache';
-import { getAppContext, onRTEClick } from '../../../utils/helpers/common-helpers';
+import { getAppContext, openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooTextSequence {
   constructor() {
     this.animated = true;
     this.validity = false;
     this.currentIndex = 0;
-    this.currentYPosition = 0;
+    this.translateY = 0;
   }
   onValuesChanged() {
-    this.currentYPosition = 0;
+    this.translateY = 0;
     this.currentIndex = 0;
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
   onIsVisibleChanged() {
-    this.setComponentHeight();
-    this.initComponent();
+    this.isVisible && this.initSequenceHeight();
+  }
+  onModalAnimationFinished() {
+    this.isAnimationFinished && this.initSequenceHeight();
   }
   get wrapperElement() {
     return findParent(this.host, 'yoo-ion-scroll') || this.host;
   }
   get sequenceElements() {
+    var _a, _b;
+    return (_b = Array.from(((_a = this.sequencesContainerElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sequence')) || [])) === null || _b === void 0 ? void 0 : _b.filter(e => e);
+  }
+  get maxSequenceHeight() {
     var _a;
-    return (_a = Array.from(this.host.shadowRoot.querySelectorAll('.sequence') || [])) === null || _a === void 0 ? void 0 : _a.filter(e => e);
+    return ((_a = this.viewFinderElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (this.host.clientHeight / 2);
+  }
+  get sequenceValues() {
+    var _a, _b, _c;
+    return (_c = (_b = compact([(_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim(), ...(this.values || [])])) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.map(v => Array.isArray(v) ? v[0] : v);
   }
   componentWillRender() {
     this.wrapperElement && (this.wrapperElement.style.overflow = 'hidden');
   }
   componentDidLoad() {
-    this.initComponent();
-    this.setComponentHeight();
-  }
-  componentDidRender() {
-    this.setComponentHeight();
-  }
-  setComponentHeight() {
-    var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const { height } = this.host.getBoundingClientRect();
-      this.sequenceElements.forEach(e => {
-        e && height && (e.style.maxHeight = `${height * .5}px`);
-      });
-    }
-  }
-  initComponent() {
-    var _a;
-    (_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.forEach(async (e) => {
-      if (e === null || e === void 0 ? void 0 : e.querySelector('img')) {
-        const img = e.querySelector('img');
-        img.src = cleanupWKWebViewFilePath((await getFromLocalForage(getKeyToCache(img.src))) || img.src);
-      }
-    });
-  }
-  onRTEContentClick(ev, index) {
-    var _a;
-    onRTEClick(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    this.initSequenceHeight();
   }
-  clickArrow(direction) {
+  initSequenceHeight() {
     var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const GAP_INTER_SEQUENCES = 16;
-      this.currentIndex = clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (direction === 'top' ? -1 : 1), 0, this.sequenceElements.length - 1);
-      const textsHeight = this.sequenceElements.map(e => e.offsetHeight);
-      this.currentYPosition = 0 - (textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + textsHeight[this.currentIndex] / 2) - GAP_INTER_SEQUENCES * this.currentIndex;
+    if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
+      this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+      this.sequenceElements.forEach(e => e.classList.toggle('overflowing', e.scrollHeight > this.maxSequenceHeight));
       this.validity = this.currentIndex === this.sequenceElements.length - 1;
     }
   }
   renderSequences() {
-    var _a, _b;
-    return h("section", { id: "sequences", style: { transform: `translateY(${this.currentYPosition}px)` } }, (_b = (_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.map((v) => Array.isArray(v) ? v[0] : v)) === null || _b === void 0 ? void 0 : _b.map((text, index) => {
-      return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), ref: (el) => this.sequenceElements[index] = el, onClick: (ev) => this.onRTEContentClick(ev, index) });
-    }));
+    var _a;
+    return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
+      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), onClick: ev => { var _a; return openImageDetailFromRTE(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
+      })));
   }
   renderArrow(placement) {
     var _a;
     const isUp = placement === 'top';
-    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => this.clickArrow(placement) },
+    const clickArrow = () => {
+      var _a;
+      if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
+        const GAP_INTER_SEQUENCES = 16;
+        this.currentIndex = clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (isUp ? -1 : 1), 0, this.sequenceElements.length - 1);
+        const textsHeight = this.sequenceElements.map((e, i) => Math.round(e.offsetHeight * (i <= this.currentIndex ? 1 : .9)));
+        this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+        this.translateY = 0 - ((textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + GAP_INTER_SEQUENCES * this.currentIndex));
+        this.validity = this.currentIndex === this.sequenceElements.length - 1;
+      }
+    };
+    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => clickArrow() },
       h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
   renderOverlay(placement) {
@@ -171,7 +164,7 @@ export class YooTextSequence {
       "reflect": false,
       "defaultValue": "false"
     },
-    "livePreview": {
+    "isVisible": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -180,15 +173,15 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
-      "reflect": true
+      "attribute": "is-visible",
+      "reflect": false
     },
-    "isVisible": {
+    "isAnimationFinished": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -197,12 +190,12 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-visible",
+      "attribute": "is-animation-finished",
       "reflect": false
     }
   }; }
@@ -235,5 +228,8 @@ export class YooTextSequence {
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
+    }, {
+      "propName": "isAnimationFinished",
+      "methodName": "onModalAnimationFinished"
     }]; }
 }

package/dist/collection/components/3.organisms/audio-recorder/audio-recorder-dialog.js

@@ -173,7 +173,7 @@ export class YooAudioRecorderDialogComponent {
         h("div", { class: "inner-row-container" },
           h("span", null, translate('RECORDING')),
           h("span", { class: "stable" }, this.finalRecordingDuration)),
-        h("span", { class: "text" }, translate('TODAY'))),
+        h("span", { class: "text" }, translate('YOOBICTODAY'))),
       h("div", { class: "audio-container" },
         h("yoo-audio-player", { ref: el => { this.audioRef = el; }, class: "dark", src: cleanupWKWebViewFilePath(this.finalPath) })),
       h("yoo-button", { size: "large", onClick: () => { this.onRetryRecording(); }, color: "anthracite" },

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

@@ -2963,6 +2963,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: calc(100% - 20px);
 }
 
+:host(.responsive.notch-normal) .marvel-device {
+  box-sizing: border-box;
+}
+:host(.responsive.notch-normal) .marvel-device.iphone-x .notch {
+  left: 0;
+}
+
 :host(.responsive) {
   display: flex;
   align-items: center;

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

@@ -378,7 +378,7 @@ export class YooInputBarComponent {
     buttons.push({
       icon: 'camera',
       actionType: 'photo',
-      text: translate('PHOTO'),
+      text: translate('YOOBICPHOTO'),
       iconColor: 'app-color',
       description: translate('SENDAPHOTO'),
       handler: () => this.imageMobileHandler(ev)
@@ -401,7 +401,7 @@ export class YooInputBarComponent {
       buttons.push({
         icon: 'photo-library',
         iconColor: 'app-color',
-        text: translate('PHOTO'),
+        text: translate('YOOBICPHOTO'),
         description: translate('PICKFROMLIBRARYPHOTO'),
         handler: () => this.onImportPhotoFromLibrary()
       });
@@ -432,7 +432,7 @@ export class YooInputBarComponent {
       buttons.push({
         icon: 'file',
         iconColor: 'app-color',
-        text: isWeb(this.host) ? translate('DOCUMENTLIBRARY') : translate('DOCUMENT'),
+        text: isWeb(this.host) ? translate('DOCUMENTLIBRARY') : translate('YOOBICDOCUMENT'),
         description: translate('ADDAFILE'),
         handler: () => isWeb(this.host) ? this.addFileHandler() : this.fileMobileHandler(ev)
       });
@@ -733,10 +733,14 @@ export class YooInputBarComponent {
     }
   }
   async onActionClick(preventFocusAfter = false) {
-    var _a, _b;
+    var _a, _b, _c;
     this.onVibrate();
-    if (this.hasTextInside || (this.value && this.value !== '')) {
-      const safeContent = await sanitizeHTML(this.value);
+    let text = this.value;
+    if (this.formTextArea) {
+      text = await ((_a = this.formTextArea) === null || _a === void 0 ? void 0 : _a.getText()) || text;
+    }
+    if (this.hasTextInside || (text && text !== '')) {
+      const safeContent = await sanitizeHTML(text);
       this.sendText.emit(safeContent);
       this.value = null;
       if (this.formTextArea) {
@@ -751,10 +755,10 @@ export class YooInputBarComponent {
     else {
       this.onImportPhotoFromLibrary();
     }
-    if (((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.keepFocusAfterAction) && this.formTextArea && !preventFocusAfter) {
+    if (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.keepFocusAfterAction) && this.formTextArea && !preventFocusAfter) {
       this.formTextArea.setFocus();
     }
-    if (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.blurAfterAction) && this.formTextArea) {
+    if (((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.blurAfterAction) && this.formTextArea) {
       this.formTextArea.setBlur();
     }
   }
@@ -877,12 +881,12 @@ export class YooInputBarComponent {
   }
   renderSecondaryActions() {
     var _a;
-    const iconHandler = (action) => {
+    const iconHandler = (action, ev) => {
       this.onVibrate();
-      action.handler();
+      action.handler(ev);
     };
     return (((_a = this.secondaryActionSettings) === null || _a === void 0 ? void 0 : _a.secondaryActions) || []).map((action) => {
-      return h("yoo-icon", { name: action.icon, color: action.iconColor || 'stable-alt', size: action === null || action === void 0 ? void 0 : action.size, onClick: () => iconHandler(action) });
+      return h("yoo-icon", { name: action.icon, color: action.iconColor || 'stable-alt', size: action === null || action === void 0 ? void 0 : action.size, onClick: (ev) => iconHandler(action, ev) });
     });
   }
   renderFileInput() {

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.css

@@ -203,76 +203,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   display: block;
+  background: var(--light, #ffffff);
 }
-:host .top-container {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  padding: var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
+:host li {
+  break-inside: avoid;
+  padding: var(--spacing-02, 0.125rem) 0 var(--spacing-16, 1rem);
 }
-:host .top-container .input {
-  margin-right: var(--spacing-16, 1rem);
-}
-:host .container {
-  padding: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-}
-:host .container .section .items,
-:host .top-container .section .items {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 45% 45%;
-  padding-bottom: var(--spacing-16, 1rem);
-  white-space: nowrap;
-  row-gap: var(--spacing-16, 1rem);
+:host ul {
+  margin: 0;
+  padding: var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0;
+  column-count: 2;
   column-gap: var(--spacing-16, 1rem);
-}
-:host .container .section .items.single,
-:host .top-container .section .items.single {
-  grid-template-rows: auto;
-}
-:host .container .section .items.single::after,
-:host .top-container .section .items.single::after {
-  content: "";
-}
-:host .container .section .items.suggested,
-:host .top-container .section .items.suggested {
-  padding-bottom: unset;
-}
-:host .container .section .section-header,
-:host .top-container .section .section-header {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--spacing-16, 1rem) 0;
-}
-:host .container .section .section-header.empty,
-:host .top-container .section .section-header.empty {
-  padding-bottom: 0;
-}
-:host .container .section .section-header .section-title,
-:host .top-container .section .section-header .section-title {
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-  text-transform: uppercase;
-}
-:host .container .section .section-header .see-all,
-:host .top-container .section .section-header .see-all {
-  padding-right: var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-16, 1rem);
+  list-style: none;
 }
 :host yoo-card-list-color {
-  --title-padding-top: var(--spacing-08, 0.5rem);
-  --title-margin-bottom: 0;
   --card-border-radius: var(--border-radius-04, 0.25rem);
+  --subheading-line-clamp: 3 !important;
+  --title-margin-bottom: 0;
+  --title-padding-top: var(--spacing-08, 0.5rem);
 }
-:host .extended {
-  display: grid;
-  grid-template-rows: repeat(10, 5rem);
-  grid-template-columns: 1fr 1fr;
+:host yoo-form-input {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
-  column-gap: var(--spacing-16, 1rem);
-  row-gap: var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
-  border-top: solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem);
+  background: inherit;
+}
+:host yoo-form-input + ul {
+  padding-top: 0;
 }

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.js

@@ -1,63 +1,15 @@
 import { translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State } from '@stencil/core';
 export class YooMobileTabbarMoreComponent {
-  constructor() {
-    this.searchedItems = [];
-  }
-  componentWillLoad() {
-    this.retrievedItems = this.items;
-  }
-  watchItems() {
-    this.retrievedItems = this.items;
-  }
-  onSearchInputChanged(ev) {
-    const searchText = ev.toLowerCase();
-    this.searchedItems = this.items;
-    const searchResults = this.searchedItems.filter((item) => item.text.toLowerCase().includes(searchText));
-    return this.retrievedItems = [...searchResults];
-  }
-  onItemClick(item) {
-    this.itemClicked.emit({ item });
-  }
-  renderSearchInput() {
-    return (h("div", { class: "input" },
-      ' ',
-      h("yoo-form-input", { size: "large", class: "menu", "icon-prefix": "search", hideOptional: true, clearable: false, forceValueUpdate: true, placeholder: translate('SEARCHMODULES'), onInputChanged: (ev) => this.onSearchInputChanged(ev.detail) })));
-  }
-  renderItem(item) {
-    const color = 'app-color';
-    const entry = {
-      subHeading: item.text,
-      iconTopLeft: item.icon,
-      iconTopLeftColor: color
-    };
-    return (h("yoo-card-list-color", { onClick: () => this.onItemClick(item), entry: entry, notif: item.notif }));
-  }
-  renderSuggestedItems() {
-    var _a;
-    return (h("div", { class: "section" },
-      h("div", { class: "section-header" },
-        h("div", { class: "section-title" }, translate('SUGGESTED'))),
-      h("div", { class: "items single suggested", style: { 'grid-template-columns': `repeat(${this.recentItems.length}, 38%) 1px` } }, (_a = this.recentItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderItem(item)))));
-  }
-  renderItems() {
-    var _a, _b;
-    return (h("div", { class: "container" },
-      h("div", { class: "section" },
-        !(((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 10) && h("div", { class: "section-header empty" }, " "),
-        h("div", { class: { items: true } }, (_b = this.retrievedItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
-          return this.renderItem(item);
-        })))));
-  }
-  renderTopContainer() {
-    var _a;
-    return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 10 &&
-      h("div", { class: "top-container" }, this.renderSearchInput());
-  }
   render() {
-    return h(Host, null,
-      this.renderTopContainer(),
-      this.renderItems());
+    const items = this.items ? [...this.items.filter((_, index) => index % 2 === 0), ...this.items.filter((_, index) => index % 2 === 1)] : [];
+    return (h(Host, null,
+      items.length > 10 && (h("yoo-form-input", { size: "large", class: "menu", "icon-prefix": "search", hideOptional: true, clearable: false, forceValueUpdate: true, placeholder: translate('SEARCHMODULES'), onInputChanged: ({ detail }) => (this.search = detail) })),
+      h("ul", { hidden: !items.length }, items.map((item) => {
+        var _a;
+        return (h("li", { hidden: this.search && !((_a = item.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.search.toLowerCase())) },
+          h("yoo-card-list-color", { onClick: () => this.itemClicked.emit(item), entry: { subHeading: item.text, iconTopLeft: item.icon, iconTopLeftColor: 'app-color' }, notif: item.notif })));
+      }))));
   }
   static get is() { return "yoo-mobile-tabbar-more"; }
   static get encapsulation() { return "shadow"; }
@@ -68,26 +20,6 @@ export class YooMobileTabbarMoreComponent {
     "$": ["mobile-tabbar-more.css"]
   }; }
   static get properties() { return {
-    "recentItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IPage[]",
-        "resolved": "IPage[]",
-        "references": {
-          "IPage": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Most viewed menu items"
-      }
-    },
     "items": {
       "type": "unknown",
       "mutable": false,
@@ -110,7 +42,7 @@ export class YooMobileTabbarMoreComponent {
     }
   }; }
   static get states() { return {
-    "retrievedItems": {}
+    "search": {}
   }; }
   static get events() { return [{
       "method": "itemClicked",
@@ -123,8 +55,8 @@ export class YooMobileTabbarMoreComponent {
         "text": "When item clicked re routes to item page"
       },
       "complexType": {
-        "original": "{ item: IPage }",
-        "resolved": "{ item: IPage; }",
+        "original": "IPage",
+        "resolved": "IPage",
         "references": {
           "IPage": {
             "location": "import",
@@ -133,8 +65,4 @@ export class YooMobileTabbarMoreComponent {
         }
       }
     }]; }
-  static get watchers() { return [{
-      "propName": "items",
-      "methodName": "watchItems"
-    }]; }
 }