@yoobic/yobi 8.5.0-71 → 8.5.0-72

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

@@ -62,6 +62,7 @@ const YooFormAutocompleteComponent = class {
     this.currentPage = 0;
     this.maxPage = 0;
     this.infiniteScrollDisabled = false;
+    this.onInputContainerClickedDebounce = lodash.debounce(this.onInputContainerClicked, 500, { leading: true, trailing: false }).bind(this);
   }
   get iconSize() {
     return ['small', 'medium'].includes(this.size) ? 'small' : 'medium';
@@ -999,7 +1000,7 @@ const YooFormAutocompleteComponent = class {
     const minValuesForSearch = 4;
     const hasValue = !index$1.isNullOrUndefined(this.value) && (!lodash.isArray(this.value) || this.value.length > 0);
     const dynamicOrdering = this.dynamicOrdering !== false;
-    return (index.h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, index.h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClicked() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (index.h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (index.h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), index$1.isWeb(this.host) && (index.h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, index.h("div", { class: "scroll-container" }, index.h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (index.h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
+    return (index.h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, index.h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClickedDebounce() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (index.h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (index.h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), index$1.isWeb(this.host) && (index.h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, index.h("div", { class: "scroll-container" }, index.h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (index.h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
         'no-margin no-text-break autocomplete autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag,
         'expanding-grid': true,

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

@@ -142,10 +142,8 @@ function getRecapButton(host, validity, showPreview, isPreview, previewHandler,
     });
   }
   else {
-    const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = index$1.isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
-      text: index$1.translate(buttonText),
+      text: index$1.translate(index$1.isWeb(host) ? 'YOOBICNEXT' : isPreview ? 'STARTPREVIEWING' : 'START'),
       color: 'app-color',
       size: index$1.isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()

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

@@ -1,7 +1,7 @@
 import { FormFieldType } from '@shared/interfaces';
 import { findParent, getAsyncExtraData, getModalAnimation, getRandomFileName, groupsResolver, isImage, isIonic, isNullOrUndefined, isPresent, isValid, isWeb, MONGODB_ID_REGEX, resizeImage, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
-import { compact, isArray, isNumber, isString, uniq } from 'lodash-es';
+import { compact, debounce, isArray, isNumber, isString, uniq } from 'lodash-es';
 import { execHandlerAndStopEvent, getAppContext, showImageCropper } from '../../../utils/helpers/common-helpers';
 import { getFormBottomPosition, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 const AUTOCOMPLETE_DROPDOWN_HEIGHT = 272;
@@ -41,6 +41,7 @@ export class YooFormAutocompleteComponent {
     this.currentPage = 0;
     this.maxPage = 0;
     this.infiniteScrollDisabled = false;
+    this.onInputContainerClickedDebounce = debounce(this.onInputContainerClicked, 500, { leading: true, trailing: false }).bind(this);
   }
   get iconSize() {
     return ['small', 'medium'].includes(this.size) ? 'small' : 'medium';
@@ -978,7 +979,7 @@ export class YooFormAutocompleteComponent {
     const minValuesForSearch = 4;
     const hasValue = !isNullOrUndefined(this.value) && (!isArray(this.value) || this.value.length > 0);
     const dynamicOrdering = this.dynamicOrdering !== false;
-    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClicked() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
+    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClickedDebounce() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
         'no-margin no-text-break autocomplete autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag,
         'expanding-grid': true,

package/dist/collection/components/form/form-dynamic/{helpers/index.js → helpers.js}

@@ -130,10 +130,8 @@ export function getRecapButton(host, validity, showPreview, isPreview, previewHa
     });
   }
   else {
-    const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
-      text: translate(buttonText),
+      text: translate(isWeb(host) ? 'YOOBICNEXT' : isPreview ? 'STARTPREVIEWING' : 'START'),
       color: 'app-color',
       size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()

package/dist/design-system/yoo-form-autocomplete.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-a6a92b3d.js';
 import { c as FormFieldType } from './index-604330b3.js';
 import './index-4c89561a.js';
-import { i as isArray, n as compact, l as uniq, p as isString, a as isNumber } from './lodash-777f91de.js';
+import { $ as debounce, i as isArray, n as compact, l as uniq, p as isString, a as isNumber } from './lodash-777f91de.js';
 import { i as showImageCropper, h as execHandlerAndStopEvent, g as getAppContext } from './common-helpers-df7fce97.js';
 import { s as setValidator, f as getFormBottomPosition, a as setValueAndValidateInput } from './form-input-helpers-4d6eb8fd.js';
 import { k as isNullOrUndefined, aM as isPresent, aj as showAlert, t as translate, cC as isIonic, X as findParent, W as getAsyncExtraData, H as isWeb, G as showModal, F as getModalAnimation, f2 as isValid, am as isImage, f3 as resizeImage, f4 as getRandomFileName, eC as MONGODB_ID_REGEX, a3 as translateMulti, e3 as groupsResolver } from './index-d4f56653.js';
@@ -58,6 +58,7 @@ const YooFormAutocompleteComponent = class {
     this.currentPage = 0;
     this.maxPage = 0;
     this.infiniteScrollDisabled = false;
+    this.onInputContainerClickedDebounce = debounce(this.onInputContainerClicked, 500, { leading: true, trailing: false }).bind(this);
   }
   get iconSize() {
     return ['small', 'medium'].includes(this.size) ? 'small' : 'medium';
@@ -995,7 +996,7 @@ const YooFormAutocompleteComponent = class {
     const minValuesForSearch = 4;
     const hasValue = !isNullOrUndefined(this.value) && (!isArray(this.value) || this.value.length > 0);
     const dynamicOrdering = this.dynamicOrdering !== false;
-    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClicked() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
+    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClickedDebounce() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
         'no-margin no-text-break autocomplete autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag,
         'expanding-grid': true,

package/dist/design-system/yoo-form-dynamic.entry.js

@@ -138,10 +138,8 @@ function getRecapButton(host, validity, showPreview, isPreview, previewHandler,
     });
   }
   else {
-    const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
-      text: translate(buttonText),
+      text: translate(isWeb(host) ? 'YOOBICNEXT' : isPreview ? 'STARTPREVIEWING' : 'START'),
       color: 'app-color',
       size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()

package/dist/esm/yoo-form-autocomplete.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-a6a92b3d.js';
 import { c as FormFieldType } from './index-604330b3.js';
 import './index-4c89561a.js';
-import { i as isArray, n as compact, l as uniq, p as isString, a as isNumber } from './lodash-777f91de.js';
+import { $ as debounce, i as isArray, n as compact, l as uniq, p as isString, a as isNumber } from './lodash-777f91de.js';
 import { i as showImageCropper, h as execHandlerAndStopEvent, g as getAppContext } from './common-helpers-df7fce97.js';
 import { s as setValidator, f as getFormBottomPosition, a as setValueAndValidateInput } from './form-input-helpers-4d6eb8fd.js';
 import { k as isNullOrUndefined, aM as isPresent, aj as showAlert, t as translate, cC as isIonic, X as findParent, W as getAsyncExtraData, H as isWeb, G as showModal, F as getModalAnimation, f2 as isValid, am as isImage, f3 as resizeImage, f4 as getRandomFileName, eC as MONGODB_ID_REGEX, a3 as translateMulti, e3 as groupsResolver } from './index-d4f56653.js';
@@ -58,6 +58,7 @@ const YooFormAutocompleteComponent = class {
     this.currentPage = 0;
     this.maxPage = 0;
     this.infiniteScrollDisabled = false;
+    this.onInputContainerClickedDebounce = debounce(this.onInputContainerClicked, 500, { leading: true, trailing: false }).bind(this);
   }
   get iconSize() {
     return ['small', 'medium'].includes(this.size) ? 'small' : 'medium';
@@ -995,7 +996,7 @@ const YooFormAutocompleteComponent = class {
     const minValuesForSearch = 4;
     const hasValue = !isNullOrUndefined(this.value) && (!isArray(this.value) || this.value.length > 0);
     const dynamicOrdering = this.dynamicOrdering !== false;
-    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClicked() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
+    return (h("div", { class: { 'outer-container': true, columns: !!(this.allowCreate || (this.allowEdit && this.collectionName)) }, ref: (el) => (this.outerContainer = el) }, h("div", { ref: (el) => (this.inputContainer = el), class: { 'action-click input-container': true, multiple: this.isMultiple() }, onClick: () => this.onInputContainerClickedDebounce() }, this.renderSelectedContent()), this.allowEdit && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onEdit(), disabled: !hasValue }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: "pen" }))), this.allowCreate && this.collectionName && (h("yoo-button", { size: this.size || 'medium', onClick: () => this.onCreate() }, h("yoo-icon", { size: this.size === 'large' ? 'medium' : 'small', name: this.allowCreateIcon || 'plus' }))), isWeb(this.host) && (h("div", { ref: (el) => (this.itemsContainer = el), class: "items-container down animated fadeIn" }, h("div", { class: "scroll-container" }, h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() }, this.showDropdownContent && (h("yoo-grid", { ref: (el) => (this.webGrid = el), class: {
         'no-margin no-text-break autocomplete autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag,
         'expanding-grid': true,

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

@@ -138,10 +138,8 @@ function getRecapButton(host, validity, showPreview, isPreview, previewHandler,
     });
   }
   else {
-    const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
-      text: translate(buttonText),
+      text: translate(isWeb(host) ? 'YOOBICNEXT' : isPreview ? 'STARTPREVIEWING' : 'START'),
       color: 'app-color',
       size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()

package/dist/types/components/form/form-autocomplete/form-autocomplete.d.ts

@@ -139,6 +139,7 @@ export declare class YooFormAutocompleteComponent implements IFormAutocomplete<a
   private fileUploader;
   private fileUploaderData;
   private infiniteScrollDisabled;
+  private onInputContainerClickedDebounce;
   private get iconSize();
   onWebAutocompleteOpened(): Promise<void>;
   onNameChange(): Promise<void>;

package/dist/types/components/form/form-dynamic/{helpers/index.d.ts → helpers.d.ts}

@@ -1,5 +1,5 @@
 import { FormFieldType, IButton, IFormField, ISlide, TBaseSize } from '@shared/interfaces';
-import { IFormDynamicFieldState } from '../types';
+import { IFormDynamicFieldState } from './types';
 export declare function getFieldState(field: IFormField, fieldsState: {
   [key: string]: IFormDynamicFieldState;
 }): IFormDynamicFieldState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.5.0-71",
+  "version": "8.5.0-72",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",