@yoobic/yobi 8.6.41 → 8.6.43

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

@@ -187,6 +187,22 @@ const YooEntityComponent = class {
       this.host.classList.remove('context-menu-open');
     }
   }
+  onCardFileClicked() {
+    if (index$1.isIOS() && index$1.getExtension(this.item) === 'pdf' && index$1.isNativeMobile()) {
+      index$1.showDocumentDownloadOptions(this.item, [
+        {
+          text: index$1.translate('YOOBICVIEW'),
+          cssClass: index$1.isWeb(this.host) ? 'bg-dark-hover' : 'bg-dark light',
+          handler: () => {
+            this.onShowDocumentDialog();
+          }
+        }
+      ]);
+    }
+    else {
+      this.onShowDocumentDialog();
+    }
+  }
   onShowDocumentDialog() {
     var _a, _b;
     const modal = document.createElement('yoo-form-document-dialog');
@@ -393,7 +409,7 @@ const YooEntityComponent = class {
     if (this.entityType === 'filesPdf' && this.item._downloadURL) {
       return index.h("a", { href: this.item._downloadURL, target: "_blank" }, index.h("yoo-card-file", { class: "document autocomplete feed isPdf", file: this.item }));
     }
-    return index.h("yoo-card-file", { onClick: () => this.onShowDocumentDialog(), class: "document autocomplete feed", file: this.item });
+    return index.h("yoo-card-file", { onClick: () => this.onCardFileClicked(), class: "document autocomplete feed", file: this.item });
   }
   renderCardRecommendation() {
     const isLesson = this.item.type && this.item.type === 'lesson';

package/dist/cjs/yoo-form-dynamic.cjs.entry.js

@@ -2101,9 +2101,9 @@ const YooFormDynamicComponent = class {
     this.lockSlideSwipe(this.activeIndex);
   }
   onKeyboardWillShow(ev) {
-    var _a;
     !this.isKeyboardStateLocked && !index$1.isKeyboardResizeModeInactive() && index$1.disableKeyboardResize();
-    (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
+    const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+    footer === null || footer === void 0 ? void 0 : footer.classList.add('hide');
     const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
     if (scroll && !(scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
       scroll.classList.add('keyboard-open');
@@ -2128,6 +2128,8 @@ const YooFormDynamicComponent = class {
       this.scrollToField(this.focusedField, true, ev.keyboardHeight);
     }
     if (index$1.isAndroid()) {
+      const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+      footer === null || footer === void 0 ? void 0 : footer.classList.add('hide');
       const ANDROID_WINDOW_RESIZE = 1000;
       setTimeout(() => {
         this.windowHasFinishedResizing = true;
@@ -2139,7 +2141,6 @@ const YooFormDynamicComponent = class {
     }
   }
   onKeyboardWillHide() {
-    var _a;
     this.keyboardHeight = 0;
     const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
     if (scrollSpacer) {
@@ -2148,7 +2149,8 @@ const YooFormDynamicComponent = class {
     if (!index$1.isAndroid() && !this.isInline()) {
       this.setScrollSpacerHeight(100);
     }
-    (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
+    const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+    footer.classList.contains('hide') && (footer === null || footer === void 0 ? void 0 : footer.classList.remove('hide'));
     const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
     if (scroll && scroll.classList.contains('keyboard-open')) {
       scroll.classList.remove('keyboard-open');
@@ -2174,12 +2176,12 @@ const YooFormDynamicComponent = class {
     if (!field) {
       return;
     }
-    const FIELD_LABEL_HEIGHT = 65;
+    const FIELD_LABEL_HEIGHT = (index$1.isWeb(this.host) ? 65 : 32) * -1;
     const elementPosition = field.getBoundingClientRect().top;
     const formElement = this.getElementFromCurrentSlide('form');
     if (formElement) {
       const topFormPosition = formElement.getBoundingClientRect().top;
-      const scrollDistance = elementPosition - topFormPosition - FIELD_LABEL_HEIGHT;
+      const scrollDistance = elementPosition - topFormPosition + FIELD_LABEL_HEIGHT;
       let doNotScroll = this.currentScrollPosition === 0 && scrollDistance < 0 && !this.isInline();
       if (keyboardHeight) {
         // Checks if the field will be hidden by the keyboard
@@ -4263,6 +4265,7 @@ const YooFormDynamicComponent = class {
           TagType = 'yoo-form-document';
           const document = (field.type === index.FormFieldType.document || field.type === index.FormFieldType.podcast ? field.document : field.image) || (lodash.isObject(value) ? value : null);
           extraAttrs = {
+            showActionSheet: index$1.getExtension(document) === 'pdf' && index$1.isIOS() && index$1.isNativeMobile(),
             allowOrientation: this.isLesson(),
             type: field.type === index.FormFieldType.document || field.type === index.FormFieldType.podcast ? 'document' : 'image',
             mode: field.mode,

package/dist/cjs/yoo-form-input.cjs.entry.js

@@ -106,6 +106,7 @@ const YooFormInputComponent = class {
     this.fireInputChangeEvent = true;
     this.allowDecimals = true;
     this.format = 'input';
+    this.contentEventListeners = {};
     this.inputType = undefined;
     this.remainingCharacters = undefined;
     this.checkboxParams = null;
@@ -469,12 +470,12 @@ const YooFormInputComponent = class {
           placeholderlabel: this.placeholdertolabel,
           valid: this.uiValidation.valid && this.validity,
           invalid: this.uiValidation.invalid && this.validity === false && !this.inputReloaded
-        } }, this.finalIconPrefix && this.hasIconPrefix && (index.h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, index.h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))), (_a = this.buttonsPrefix) === null || _a === void 0 ? void 0 :
+        } }, this.finalIconPrefix && this.hasIconPrefix && (index.h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null), ...this.contentEventListeners }, index.h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))), (_a = this.buttonsPrefix) === null || _a === void 0 ? void 0 :
         _a.map((button) => (button && index.h("div", { class: "icon-prefix", onClick: () => button.handler() }, index.h("yoo-icon", { name: button.icon, size: this.getIconSize() })))), index.h("input", { type: this.inputType, readOnly: this.disableInputTyping, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? index$1.translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => formInputHelpers.onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => (this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation()), onFocus: () => !this.disableFocus && formInputHelpers.onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
           last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
           'hide-value': (_b = this.checkboxParams) === null || _b === void 0 ? void 0 : _b.value,
           'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
-        }, disabled: this.disabled, value: this.localValue }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && index.h("div", { class: "warning-icon" }), (hasValue && !lodash.isNil(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
+        }, disabled: this.disabled, value: this.localValue, ...this.contentEventListeners }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && index.h("div", { class: "warning-icon" }), (hasValue && !lodash.isNil(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
         (this.uiValidation.invalid && this.validity === false && !this.inputReloaded && (index.h("div", { class: 'valid-icon ' + (this.validity ? 'valid' : 'invalid' + (this.clearable && hasValue && this.type === 'password' && this.showPasswordToggle ? '' : ' last')) }, index.h("yoo-icon", { color: this.validity ? 'app-color' : 'danger', name: this.validity ? 'check' : 'rejected', size: this.getIconSize() })))), this.type === 'password' && this.showPasswordToggle && (index.h("div", { class: 'icon-suffix-focus' + (this.clearable && hasValue ? '' : ' last'), onClick: this.onShowPassword.bind(this) }, hasValue && index.h("yoo-icon", { size: this.getIconSize(), name: "eye", color: this.inputType === 'password' ? 'stable-alt' : 'light' }))), this.clearable && !((_c = this.checkboxParams) === null || _c === void 0 ? void 0 : _c.value) && (index.h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, index.h("yoo-icon", { size: this.getIconSize(), name: "cross" }))), this.iconSuffix && (index.h("div", { class: "icon-suffix-focus", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, index.h("yoo-icon", { name: this.iconSuffix, size: this.getIconSize() }))), (_d = this.inlineActions) === null || _d === void 0 ? void 0 :
         _d.map((action) => {
           const { handler, iconColor, icon, tooltip } = action || {};

package/dist/cjs/yoo-form-number-picker.cjs.entry.js

@@ -158,9 +158,6 @@ const YooFormNumberPickerComponent = class {
     ev.stopPropagation();
     ev.preventDefault();
     this.updateValidity();
-    if (index$1.isNativeMobile()) {
-      index$1.Keyboard.hide();
-    }
     this.showContainerDialog();
   }
   onInputBlurred() {
@@ -211,7 +208,7 @@ const YooFormNumberPickerComponent = class {
       ];
     }
     else {
-      return (index.h("div", { class: "outer-container" }, index.h("yoo-form-input", { step: this.stepAmount, size: this.size, disabled: this.disabled, type: "number", forceValueUpdate: true, value: this.selection ? this.selection : this.value, clearable: this.clearable && !this.disabled, required: this.required, readonly: this.readonly, validity: this.validity, onIconClicked: (ev) => this.onClearIconClicked(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => ev.stopPropagation() })));
+      return (index.h("div", { class: "outer-container" }, index.h("yoo-form-input", { step: this.stepAmount, size: this.size, disabled: this.disabled, type: "number", forceValueUpdate: true, value: this.selection ? this.selection : this.value, clearable: this.clearable && !this.disabled, required: this.required, readonly: this.readonly, validity: this.validity, onIconClicked: (ev) => this.onClearIconClicked(ev), disableFocus: !index$1.isWeb(this.host), onInputFocused: (ev) => this.onInputFocused(ev), contentEventListeners: index$1.isWeb(this.host) ? {} : { onTouchStart: (ev) => this.onInputFocused(ev) }, onValidityChanged: (ev) => ev.stopPropagation() })));
     }
   }
   render() {

package/dist/collection/components/entities/entity/entity.js

@@ -1,5 +1,5 @@
 import { FeedPostType, FormFieldType } from '@shared/interfaces';
-import { changeExtension, changeHexOpacity, compareAsc, dateFormat, dispatchCustomEvent, fileHasIcon, fromNow, getAsyncExtraData, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCourseFinishedItemsCount, getCssColor, getCurrentLanguage, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcAndType, getMediaSrcFromFeed, getMobileFieldIcon, getPlanDueDate, getPlanTotalItemsCount, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, groupsResolver, isCampaignActive, isCampaignAnnouncementByUser, isCampaignFeed, isCampaignTodo, isCloudinaryLink, isImage, isMedia, isPhotoEdited, isPlanInFuture, isSameDate, isVideo, isWeb, mapKpiData, parseMarkDown, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showModal, toButton, translate, translateMulti } from '@shared/utils';
+import { changeExtension, changeHexOpacity, compareAsc, dateFormat, dispatchCustomEvent, fileHasIcon, fromNow, getAsyncExtraData, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCourseFinishedItemsCount, getCssColor, getCurrentLanguage, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getExtension, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcAndType, getMediaSrcFromFeed, getMobileFieldIcon, getPlanDueDate, getPlanTotalItemsCount, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, groupsResolver, isCampaignActive, isCampaignAnnouncementByUser, isCampaignFeed, isCampaignTodo, isCloudinaryLink, isImage, isIOS, isMedia, isNativeMobile, isPhotoEdited, isPlanInFuture, isSameDate, isVideo, isWeb, mapKpiData, parseMarkDown, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showDocumentDownloadOptions, showModal, toButton, translate, translateMulti } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getIncentiveStatusBadgeSettings } from '@yobi/feature-learn/incentive/helpers/incentive-helpers';
 import { getCampaignStateTags, getCampaignTemplateTags, getMissionDataStateTags, getProductBatchDateTag, getProductBatchProgressColor, getWaitlistVisitTags } from '@yobi/feature-operate/campaign/helpers/operation-helpers';
@@ -125,6 +125,22 @@ export class YooEntityComponent {
       this.host.classList.remove('context-menu-open');
     }
   }
+  onCardFileClicked() {
+    if (isIOS() && getExtension(this.item) === 'pdf' && isNativeMobile()) {
+      showDocumentDownloadOptions(this.item, [
+        {
+          text: translate('YOOBICVIEW'),
+          cssClass: isWeb(this.host) ? 'bg-dark-hover' : 'bg-dark light',
+          handler: () => {
+            this.onShowDocumentDialog();
+          }
+        }
+      ]);
+    }
+    else {
+      this.onShowDocumentDialog();
+    }
+  }
   onShowDocumentDialog() {
     var _a, _b;
     const modal = document.createElement('yoo-form-document-dialog');
@@ -331,7 +347,7 @@ export class YooEntityComponent {
     if (this.entityType === 'filesPdf' && this.item._downloadURL) {
       return h("a", { href: this.item._downloadURL, target: "_blank" }, h("yoo-card-file", { class: "document autocomplete feed isPdf", file: this.item }));
     }
-    return h("yoo-card-file", { onClick: () => this.onShowDocumentDialog(), class: "document autocomplete feed", file: this.item });
+    return h("yoo-card-file", { onClick: () => this.onCardFileClicked(), class: "document autocomplete feed", file: this.item });
   }
   renderCardRecommendation() {
     const isLesson = this.item.type && this.item.type === 'lesson';

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

@@ -1,5 +1,5 @@
 import { FormFieldType, IncentivePartType, QUIZZ_COMPONENTS_FORM_FIELDS } from '@shared/interfaces';
-import { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, enableKeyboardResize, evalInContext, extractTextFromStringHTML, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getFieldReplacement, getFieldValue, getModalAnimation, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isPhotoOrMultiPhotosField, isQuiz, isSafari, isSamsung, isTimedQuiz, isTranslationKey, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, sanitizeInputValue, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
+import { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, enableKeyboardResize, evalInContext, extractTextFromStringHTML, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getExtension, getFieldReplacement, getFieldValue, getModalAnimation, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isPhotoOrMultiPhotosField, isQuiz, isSafari, isSamsung, isTimedQuiz, isTranslationKey, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, sanitizeInputValue, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getMissionStatusIconName } from '@yobi/feature-operate/campaign/helpers/operation-helpers';
 import { getActiveElementShadow, getAppContext, lockSwipes, querySelectorAllDeep, querySelectorDeep } from '@yobi/utils/helpers/common-helpers';
@@ -1890,9 +1890,9 @@ export class YooFormDynamicComponent {
     this.lockSlideSwipe(this.activeIndex);
   }
   onKeyboardWillShow(ev) {
-    var _a;
     !this.isKeyboardStateLocked && !isKeyboardResizeModeInactive() && disableKeyboardResize();
-    (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
+    const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+    footer === null || footer === void 0 ? void 0 : footer.classList.add('hide');
     const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
     if (scroll && !(scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
       scroll.classList.add('keyboard-open');
@@ -1917,6 +1917,8 @@ export class YooFormDynamicComponent {
       this.scrollToField(this.focusedField, true, ev.keyboardHeight);
     }
     if (isAndroid()) {
+      const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+      footer === null || footer === void 0 ? void 0 : footer.classList.add('hide');
       const ANDROID_WINDOW_RESIZE = 1000;
       setTimeout(() => {
         this.windowHasFinishedResizing = true;
@@ -1928,7 +1930,6 @@ export class YooFormDynamicComponent {
     }
   }
   onKeyboardWillHide() {
-    var _a;
     this.keyboardHeight = 0;
     const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
     if (scrollSpacer) {
@@ -1937,7 +1938,8 @@ export class YooFormDynamicComponent {
     if (!isAndroid() && !this.isInline()) {
       this.setScrollSpacerHeight(100);
     }
-    (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
+    const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+    footer.classList.contains('hide') && (footer === null || footer === void 0 ? void 0 : footer.classList.remove('hide'));
     const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
     if (scroll && scroll.classList.contains('keyboard-open')) {
       scroll.classList.remove('keyboard-open');
@@ -1963,12 +1965,12 @@ export class YooFormDynamicComponent {
     if (!field) {
       return;
     }
-    const FIELD_LABEL_HEIGHT = 65;
+    const FIELD_LABEL_HEIGHT = (isWeb(this.host) ? 65 : 32) * -1;
     const elementPosition = field.getBoundingClientRect().top;
     const formElement = this.getElementFromCurrentSlide('form');
     if (formElement) {
       const topFormPosition = formElement.getBoundingClientRect().top;
-      const scrollDistance = elementPosition - topFormPosition - FIELD_LABEL_HEIGHT;
+      const scrollDistance = elementPosition - topFormPosition + FIELD_LABEL_HEIGHT;
       let doNotScroll = this.currentScrollPosition === 0 && scrollDistance < 0 && !this.isInline();
       if (keyboardHeight) {
         // Checks if the field will be hidden by the keyboard
@@ -4052,6 +4054,7 @@ export class YooFormDynamicComponent {
           TagType = 'yoo-form-document';
           const document = (field.type === FormFieldType.document || field.type === FormFieldType.podcast ? field.document : field.image) || (isObject(value) ? value : null);
           extraAttrs = {
+            showActionSheet: getExtension(document) === 'pdf' && isIOS() && isNativeMobile(),
             allowOrientation: this.isLesson(),
             type: field.type === FormFieldType.document || field.type === FormFieldType.podcast ? 'document' : 'image',
             mode: field.mode,

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

@@ -83,6 +83,7 @@ export class YooFormInputComponent {
     this.fireInputChangeEvent = true;
     this.allowDecimals = true;
     this.format = 'input';
+    this.contentEventListeners = {};
     this.inputType = undefined;
     this.remainingCharacters = undefined;
     this.checkboxParams = null;
@@ -446,12 +447,12 @@ export class YooFormInputComponent {
           placeholderlabel: this.placeholdertolabel,
           valid: this.uiValidation.valid && this.validity,
           invalid: this.uiValidation.invalid && this.validity === false && !this.inputReloaded
-        } }, this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))), (_a = this.buttonsPrefix) === null || _a === void 0 ? void 0 :
+        } }, this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null), ...this.contentEventListeners }, h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))), (_a = this.buttonsPrefix) === null || _a === void 0 ? void 0 :
         _a.map((button) => (button && h("div", { class: "icon-prefix", onClick: () => button.handler() }, h("yoo-icon", { name: button.icon, size: this.getIconSize() })))), h("input", { type: this.inputType, readOnly: this.disableInputTyping, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => (this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation()), onFocus: () => !this.disableFocus && onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
           last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
           'hide-value': (_b = this.checkboxParams) === null || _b === void 0 ? void 0 : _b.value,
           'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
-        }, disabled: this.disabled, value: this.localValue }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && h("div", { class: "warning-icon" }), (hasValue && !isNil(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
+        }, disabled: this.disabled, value: this.localValue, ...this.contentEventListeners }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && h("div", { class: "warning-icon" }), (hasValue && !isNil(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
         (this.uiValidation.invalid && this.validity === false && !this.inputReloaded && (h("div", { class: 'valid-icon ' + (this.validity ? 'valid' : 'invalid' + (this.clearable && hasValue && this.type === 'password' && this.showPasswordToggle ? '' : ' last')) }, h("yoo-icon", { color: this.validity ? 'app-color' : 'danger', name: this.validity ? 'check' : 'rejected', size: this.getIconSize() })))), this.type === 'password' && this.showPasswordToggle && (h("div", { class: 'icon-suffix-focus' + (this.clearable && hasValue ? '' : ' last'), onClick: this.onShowPassword.bind(this) }, hasValue && h("yoo-icon", { size: this.getIconSize(), name: "eye", color: this.inputType === 'password' ? 'stable-alt' : 'light' }))), this.clearable && !((_c = this.checkboxParams) === null || _c === void 0 ? void 0 : _c.value) && (h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, h("yoo-icon", { size: this.getIconSize(), name: "cross" }))), this.iconSuffix && (h("div", { class: "icon-suffix-focus", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, h("yoo-icon", { name: this.iconSuffix, size: this.getIconSize() }))), (_d = this.inlineActions) === null || _d === void 0 ? void 0 :
         _d.map((action) => {
           const { handler, iconColor, icon, tooltip } = action || {};
@@ -1536,6 +1537,22 @@ export class YooFormInputComponent {
         "attribute": "format",
         "reflect": true,
         "defaultValue": "'input'"
+      },
+      "contentEventListeners": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key: string]: (event: any) => void }",
+          "resolved": "{ [key: string]: (event: any) => void; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
       }
     };
   }

package/dist/collection/components/form/form-number-picker/form-number-picker.js

@@ -1,5 +1,4 @@
-import { Keyboard } from '@capacitor/keyboard';
-import { getCssColor, isNativeMobile, isWeb, showModal, translate } from '@shared/utils';
+import { getCssColor, isWeb, showModal, translate } from '@shared/utils';
 import { h } from '@stencil/core';
 import { isFinite, range } from 'lodash-es';
 export class YooFormNumberPickerComponent {
@@ -147,9 +146,6 @@ export class YooFormNumberPickerComponent {
     ev.stopPropagation();
     ev.preventDefault();
     this.updateValidity();
-    if (isNativeMobile()) {
-      Keyboard.hide();
-    }
     this.showContainerDialog();
   }
   onInputBlurred() {
@@ -200,7 +196,7 @@ export class YooFormNumberPickerComponent {
       ];
     }
     else {
-      return (h("div", { class: "outer-container" }, h("yoo-form-input", { step: this.stepAmount, size: this.size, disabled: this.disabled, type: "number", forceValueUpdate: true, value: this.selection ? this.selection : this.value, clearable: this.clearable && !this.disabled, required: this.required, readonly: this.readonly, validity: this.validity, onIconClicked: (ev) => this.onClearIconClicked(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => ev.stopPropagation() })));
+      return (h("div", { class: "outer-container" }, h("yoo-form-input", { step: this.stepAmount, size: this.size, disabled: this.disabled, type: "number", forceValueUpdate: true, value: this.selection ? this.selection : this.value, clearable: this.clearable && !this.disabled, required: this.required, readonly: this.readonly, validity: this.validity, onIconClicked: (ev) => this.onClearIconClicked(ev), disableFocus: !isWeb(this.host), onInputFocused: (ev) => this.onInputFocused(ev), contentEventListeners: isWeb(this.host) ? {} : { onTouchStart: (ev) => this.onInputFocused(ev) }, onValidityChanged: (ev) => ev.stopPropagation() })));
     }
   }
   render() {

package/dist/design-system/{annotations-helpers-b6b32782.js → annotations-helpers-d7ee62e7.js}

@@ -1,4 +1,4 @@
-import { b6 as getUUID } from './index-4aeec191.js';
+import { b6 as getUUID } from './index-c8528bb9.js';
 
 function isAnnotationEmpty(annotation) {
   return !(annotation === null || annotation === void 0 ? void 0 : annotation.text);

package/dist/design-system/{button.factory-2d798ff2.js → button.factory-4e6508f4.js}

@@ -1,4 +1,4 @@
-import { a0 as translateMulti } from './index-4aeec191.js';
+import { a0 as translateMulti } from './index-c8528bb9.js';
 import { h } from './index-2cf5b950.js';
 
 const getButton = (button) => {

package/dist/design-system/{camera-helpers-328f0451.js → camera-helpers-50110600.js}

@@ -1,4 +1,4 @@
-import { ct as cordova, cu as AwesomeCordovaNativePlugin, cv as cordovaPropertyGet, cw as cordovaPropertySet, cx as registerPlugin, a6 as getSession, cy as getDeviceModel, cz as getDevicePlatform, cA as isIonic, b as isNativeMobile, c as isAndroid, E as isIOS, r as getMediaDevices, x as showModal, w as getModalAnimation, y as isWeb } from './index-4aeec191.js';
+import { ct as cordova, cu as AwesomeCordovaNativePlugin, cv as cordovaPropertyGet, cw as cordovaPropertySet, cx as registerPlugin, a6 as getSession, cy as getDeviceModel, cz as getDevicePlatform, cA as isIonic, b as isNativeMobile, c as isAndroid, E as isIOS, r as getMediaDevices, x as showModal, w as getModalAnimation, y as isWeb } from './index-c8528bb9.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -248,7 +248,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-be735a2d.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-ce9d15f4.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/{esm/chat-helpers-f491baf4.js → design-system/chat-helpers-a0e0f5e7.js}

@@ -1,4 +1,4 @@
-import { t as translate, ap as isFile, aq as replaceAtTagToMentionTag, ar as replaceAllLinks, a0 as translateMulti } from './index-4aeec191.js';
+import { t as translate, ap as isFile, aq as replaceAtTagToMentionTag, ar as replaceAllLinks, a0 as translateMulti } from './index-c8528bb9.js';
 import { c as isArray } from './lodash-cd4a9ba3.js';
 
 /**

package/dist/design-system/{common-helpers-ada063d7.js → common-helpers-dec92aa1.js}

@@ -1,4 +1,4 @@
-import { w as getModalAnimation, t as translate, x as showModal, y as isWeb, z as debounce, A as querySelectorDeep$1, b as isNativeMobile, S as ScreenOrientation, B as findDevice, C as isRTL, D as isIphoneX, d as isIpadPro, f as isTablet, a as isFullScreenFalse, E as isIOS, c as isAndroid, F as setAnimation, G as animations, H as getCssColor, Y as YOOBICON_ENTITIES_MAP, I as startOf, J as isDateBefore, K as dateDiffInCalendarDays, L as isDateAfter, M as getAsyncExtraData, N as findParent, O as isNativeFilePath, v as cleanupWKWebViewFilePath, P as Cloudinary, Q as getProtocol, R as CloudinaryGradientLayer } from './index-4aeec191.js';
+import { w as getModalAnimation, t as translate, x as showModal, y as isWeb, z as debounce, A as querySelectorDeep$1, b as isNativeMobile, S as ScreenOrientation, B as findDevice, C as isRTL, D as isIphoneX, d as isIpadPro, f as isTablet, a as isFullScreenFalse, E as isIOS, c as isAndroid, F as setAnimation, G as animations, H as getCssColor, Y as YOOBICON_ENTITIES_MAP, I as startOf, J as isDateBefore, K as dateDiffInCalendarDays, L as isDateAfter, M as getAsyncExtraData, N as findParent, O as isNativeFilePath, v as cleanupWKWebViewFilePath, P as Cloudinary, Q as getProtocol, R as CloudinaryGradientLayer } from './index-c8528bb9.js';
 import { E as get } from './lodash-cd4a9ba3.js';
 
 function getDefaultModalAnimation(host) {