@yoobic/yobi 8.6.42 → 8.6.43

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/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() {