@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/collection/components/2.molecules/slides/slides.js

@@ -2,7 +2,7 @@ import { isNullOrUndefined, isWeb } from '@shared/utils';
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { createThemedClasses } from '../../../utils/ionic/theme';
-import { FreeMode, Grid } from './swiper/swiper-interface';
+import { EffectCards, EffectCoverflow, EffectCreative, EffectCube, EffectFade, EffectFlip, FreeMode, Grid } from './swiper/swiper-interface';
 const waitForSlides = (el) => Promise.race(Array.from(el.querySelectorAll('yoo-ion-slide')).map((s) => s.componentOnReady()));
 export class YooIonSlidesComponent {
   constructor() {
@@ -314,7 +314,16 @@ export class YooIonSlidesComponent {
   }
   normalizeOptions() {
     const swiperOptions = {
-      modules: [Grid, FreeMode],
+      modules: [
+        EffectCards,
+        EffectCoverflow,
+        EffectCreative,
+        EffectCube,
+        EffectFade,
+        EffectFlip,
+        Grid,
+        FreeMode
+      ],
       effect: 'slide',
       direction: 'horizontal',
       initialSlide: this.initialSlide,

package/dist/collection/components/2.molecules/slides/swiper/swiper-interface.js

@@ -1 +1 @@
-export { FreeMode, Grid, Swiper as SwiperInterface } from 'swiper';
+export { EffectCards, EffectCoverflow, EffectCreative, EffectCube, EffectFade, EffectFlip, FreeMode, Grid, Swiper as SwiperInterface } from 'swiper';

package/dist/collection/components/entities/entity-search-sorts/entity-search-sorts.js

@@ -98,7 +98,7 @@ export class YooEntitySearchSortsComponent {
     return (h(Host, { class: getAppContext(this.host) },
       h("div", { class: "outer-container" },
         this.header && this.hasSorts() ? h("div", { class: "heading" }, translate(this.header)) : null,
-        this.fields ? (h("ul", { class: "menu" }, this.renderFields())) : null)));
+        this.fields ? h("ul", { class: "menu" }, this.renderFields()) : null)));
   }
   static get is() { return "yoo-entity-search-sorts"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1638,9 +1638,14 @@ export class YooFormAutocompleteComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "TEmptyState",
+        "resolved": "\"calendar\" | \"kanban\" | \"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"user\" | \"visit\" | \"admin\" | \"allowcamera\" | \"allstores\" | \"analytics\" | \"archived\" | \"areamanager\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"campaignfilters\" | \"category\" | \"channel\" | \"communities\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"custommodels\" | \"dashboard\" | \"empty\" | \"enrol\" | \"error\" | \"fielduser\" | \"generic_chart\" | \"geocoding\" | \"geofilters\" | \"goto\" | \"hierarchy\" | \"hq\" | \"incentives\" | \"inventory\" | \"location\" | \"locationtypes\" | \"magic-link\" | \"newsletter\" | \"nodata\" | \"notification\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"pharmaone\" | \"photo\" | \"photosplaceholder\" | \"plans\" | \"recurring\" | \"reject\" | \"requestraised\" | \"role\" | \"score\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"storemanager\" | \"subscription\" | \"team\" | \"template\" | \"todo\" | \"todoold\" | \"translations\" | \"trial\" | \"videocall\" | \"waiting\" | \"welcomeuser\" | \"wiki\" | \"aclRole\" | \"answers\" | \"barcodealert\" | \"blog\" | \"briefcase\" | \"emailblocked\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memo\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"missionstovalidate\" | \"podium\" | \"productbatch\" | \"products\" | \"service\" | \"tenants\" | \"userranks\" | \"usertrial\" | \"users\" | \"widgetcourses\" | \"wikis\" | \"none\"",
+        "references": {
+          "TEmptyState": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,

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

@@ -360,7 +360,7 @@ export class YooFormAutocompleteDialogComponent {
         'expanded-grid': true,
         'no-margin autocomplete': isWeb(this.host),
         'autocomplete-selection-mode': true
-      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: !this.forceHideSearch, forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.gridIsExpanded, showFilters: this.gridIsExpanded, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), gridExtraOptions: this.gridExtraOptions, secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
+      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: !this.forceHideSearch, forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: (this.emptyState || this.entityType), tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.gridIsExpanded, showFilters: this.gridIsExpanded, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), gridExtraOptions: this.gridExtraOptions, secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
   }
   renderGrid() {
     var _a, _b;
@@ -371,7 +371,7 @@ export class YooFormAutocompleteDialogComponent {
         'no-margin autocomplete': isWeb(this.host),
         'autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag
-      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: this.tag || this.showSearchOrTags(), forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, onGridExpanded: () => this.onExpandGrid(), initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.model, showFilters: !this.tag && !this.hideTags && !this.isLocal && !isWeb(this.host) && this.showSearchOrTags(), onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
+      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: this.tag || this.showSearchOrTags(), forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, onGridExpanded: () => this.onExpandGrid(), initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: (this.emptyState || this.entityType), tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.model, showFilters: !this.tag && !this.hideTags && !this.isLocal && !isWeb(this.host) && this.showSearchOrTags(), onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
   }
   renderMobileContent() {
     return (h("div", { class: "outer-container" },
@@ -630,9 +630,14 @@ export class YooFormAutocompleteDialogComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "TEmptyState",
+        "resolved": "\"calendar\" | \"kanban\" | \"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"user\" | \"visit\" | \"admin\" | \"allowcamera\" | \"allstores\" | \"analytics\" | \"archived\" | \"areamanager\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"campaignfilters\" | \"category\" | \"channel\" | \"communities\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"custommodels\" | \"dashboard\" | \"empty\" | \"enrol\" | \"error\" | \"fielduser\" | \"generic_chart\" | \"geocoding\" | \"geofilters\" | \"goto\" | \"hierarchy\" | \"hq\" | \"incentives\" | \"inventory\" | \"location\" | \"locationtypes\" | \"magic-link\" | \"newsletter\" | \"nodata\" | \"notification\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"pharmaone\" | \"photo\" | \"photosplaceholder\" | \"plans\" | \"recurring\" | \"reject\" | \"requestraised\" | \"role\" | \"score\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"storemanager\" | \"subscription\" | \"team\" | \"template\" | \"todo\" | \"todoold\" | \"translations\" | \"trial\" | \"videocall\" | \"waiting\" | \"welcomeuser\" | \"wiki\" | \"aclRole\" | \"answers\" | \"barcodealert\" | \"blog\" | \"briefcase\" | \"emailblocked\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memo\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"missionstovalidate\" | \"podium\" | \"productbatch\" | \"products\" | \"service\" | \"tenants\" | \"userranks\" | \"usertrial\" | \"users\" | \"widgetcourses\" | \"wikis\" | \"none\"",
+        "references": {
+          "TEmptyState": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/form/form-choice/button/form-choice-button.js

@@ -1,5 +1,6 @@
 import { translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { isString } from 'highcharts';
 import { getColor, hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceButtonComponent {
@@ -25,13 +26,16 @@ export class YooFormChoiceButtonComponent {
   }
   renderButton() {
     return this.choices && h("section", { id: "buttons" }, this.choices.map((item) => {
+      var _a, _b;
       const { icon, _id, value, title } = item || {};
-      const choiceValue = (_id || value || title || item || '');
-      const text = (title || _id || value || item || '');
-      return (h("yoo-button", { color: isSelected(choiceValue, this.selection) ? this.getBackgroundColor(choiceValue) : 'light', customColor: getColor(choiceValue, this.valuesColor, this.selection), size: this.size || 'large', onClick: () => onItemSelect(choiceValue, this) },
-        icon &&
-          h("yoo-icon", { slot: "start", color: isSelected(choiceValue, this.selection) ? 'light' : 'dark', name: icon, size: this.size || 'large' }),
-        this.useTranslate ? translate(text === null || text === void 0 ? void 0 : text.toUpperCase()) : translateMulti(text)));
+      const choiceValue = (isString(item) ? item : (_id || value || title));
+      const text = (isString(item) ? item : (title || _id || value));
+      const iconToDisplay = icon || ((_b = (_a = this.valuesIcon) === null || _a === void 0 ? void 0 : _a.find(valueIcon => text === valueIcon.key)) === null || _b === void 0 ? void 0 : _b.value.icon);
+      return (!!text &&
+        h("yoo-button", { color: isSelected(choiceValue, this.selection) ? this.getBackgroundColor(choiceValue) : 'light', customColor: getColor(choiceValue, this.valuesColor, this.selection), size: this.size || 'large', onClick: () => onItemSelect(choiceValue, this) },
+          iconToDisplay &&
+            h("yoo-icon", { slot: "start", color: isSelected(choiceValue, this.selection) ? 'light' : 'dark', name: iconToDisplay, size: this.size || 'large' }),
+          this.useTranslate ? translate(text === null || text === void 0 ? void 0 : text.toUpperCase()) : translateMulti(text)));
     }));
   }
   getBackgroundColor(value) {
@@ -189,6 +193,26 @@ export class YooFormChoiceButtonComponent {
         "text": ""
       }
     },
+    "valuesIcon": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{key: string, value: {icon: TIconName, title: string}}[]",
+        "resolved": "{ key: string; value: { icon: TIconName; title: string; }; }[]",
+        "references": {
+          "TIconName": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
     "livePreview": {
       "type": "boolean",
       "mutable": false,
@@ -241,23 +265,6 @@ export class YooFormChoiceButtonComponent {
       "attribute": "selected",
       "reflect": false
     },
-    "customEvent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-event",
-      "reflect": false
-    },
     "description": {
       "type": "string",
       "mutable": false,
@@ -279,12 +286,12 @@ export class YooFormChoiceButtonComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "IFormChoiceValue[]",
-        "resolved": "IFormChoiceValue[]",
+        "original": "(IFormChoiceValue | string)[]",
+        "resolved": "(string | IFormChoiceValue)[]",
         "references": {
           "IFormChoiceValue": {
             "location": "import",
-            "path": "@shared/interfaces"
+            "path": "../../../../interfaces"
           }
         }
       },
@@ -377,21 +384,6 @@ export class YooFormChoiceButtonComponent {
         "resolved": "any",
         "references": {}
       }
-    }, {
-      "method": "choiceSelected",
-      "name": "choiceSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/components/form/form-choice/card/form-choice-card.js

@@ -58,12 +58,13 @@ export class YooFormChoiceCardComponent {
       (isSelected('false', this.selection) && index === 0) ||
       isSelected(item.value || item.title, this.selection) ||
       isSelected(item || item.title, this.selection));
-    return (h("div", { class: { 'select': true, selected }, style: { ...(this.maxWidth > 0 && { maxWidth: `${this.maxWidth}px` }) }, onClick: () => onItemSelect(item.value || item.title, this) },
-      this.renderCardContent(item, selected, index),
-      !item.image &&
-        !item.lottie &&
-        !item.hideCheckbox &&
-        this.renderCheckContainer()));
+    return (((item === null || item === void 0 ? void 0 : item.icon) || (item === null || item === void 0 ? void 0 : item.lottie) || (item === null || item === void 0 ? void 0 : item.image) || (item === null || item === void 0 ? void 0 : item.description) || (item === null || item === void 0 ? void 0 : item.title)) &&
+      h("div", { class: { 'select': true, selected }, style: { ...(this.maxWidth > 0 && { maxWidth: `${this.maxWidth}px` }) }, onClick: () => this.customEvent ? this.choiceSelected.emit(item.value || item.title) : onItemSelect(item.value || item.title, this) },
+        this.renderCardContent(item, selected, index),
+        !item.image &&
+          !item.lottie &&
+          !item.hideCheckbox &&
+          this.renderCheckContainer()));
   }
   renderCardGrid() {
     return (h("section", { class: { 'card-grid': true, selected: this.selected } }, this.choices && this.choices.map((item, index) => this.renderSelect(item, index))));
@@ -76,7 +77,7 @@ export class YooFormChoiceCardComponent {
     var _a, _b, _c;
     const hasImage = !this.readonly && (!!((_a = this.choices[0]) === null || _a === void 0 ? void 0 : _a.image) || !!((_b = this.choices[0]) === null || _b === void 0 ? void 0 : _b.lottie));
     return (h(Host, { class: { 'has-checkmark': !hasImage, 'has-image': hasImage, 'has-one': !this.readonly && ((_c = this.choices) === null || _c === void 0 ? void 0 : _c.length) === 1 } }, this.readonly ?
-      h(ReadonlyCard, { value: this.value, valuesColor: this.valuesColor, classNames: "card" }) : [
+      h(ReadonlyCard, { value: this.value, values: this.values, valuesColor: this.valuesColor, classNames: "card" }) : [
       this.renderBanner(),
       this.renderCardGrid()
     ]));
@@ -311,7 +312,7 @@ export class YooFormChoiceCardComponent {
         "references": {
           "IFormChoiceValue": {
             "location": "import",
-            "path": "@shared/interfaces"
+            "path": "../../../../interfaces"
           }
         }
       },

package/dist/collection/components/form/form-choice/chat/form-choice-chat.js

@@ -34,7 +34,8 @@ export class YooFormChoiceChatComponent {
         !this.description && h("div", { class: "title" }, translate('THECLIENTASKS')),
         h("yoo-chat-message", { class: "radius", animation: this.animated ? 'loading' : null, message: getMessage({ content: translateMulti(this.sentence), isAlternate: false }) }),
         h("div", { class: "title alternate" }, translate('WHATSTHECORRECTRESPONSE')), (_a = this.choices) === null || _a === void 0 ? void 0 :
-        _a.map((value, index, s) => (h("yoo-chat-message", { class: { choice: true, radius: true, selected: isSelected(value, this.selection) }, style: this.animated ? { '--choice-index': index.toString() } : {}, message: getMessage({ content: value, isFirst: !index, isLast: index === s.length - 1, isAlternate: true }), onClick: () => onItemSelect(value, this) }))));
+        _a.map((value, index, s) => (value &&
+          h("yoo-chat-message", { class: { choice: true, radius: true, selected: isSelected(value, this.selection) }, style: this.animated ? { '--choice-index': index.toString() } : {}, message: getMessage({ content: value, isFirst: !index, isLast: index === s.length - 1, isAlternate: true }), onClick: () => onItemSelect(value, this) }))));
   }
   renderBanner() {
     return this.livePreview && h("yoo-banner", null,
@@ -292,23 +293,6 @@ export class YooFormChoiceChatComponent {
       "attribute": "selected",
       "reflect": false
     },
-    "customEvent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-event",
-      "reflect": false
-    },
     "values": {
       "type": "unknown",
       "mutable": false,
@@ -414,21 +398,6 @@ export class YooFormChoiceChatComponent {
         "resolved": "any",
         "references": {}
       }
-    }, {
-      "method": "choiceSelected",
-      "name": "choiceSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/components/form/form-choice/form-choice-helpers.js

@@ -2,19 +2,21 @@ import { isNullOrUndefined } from '@shared/utils';
 import { compact, findIndex, isEqual, shuffle } from 'lodash-es';
 import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
+import { YooFormChoiceCardComponent } from './card/form-choice-card';
 export function isSelected(item, selection) {
   const tmpSelection = [].concat(selection);
   const index = findIndex(tmpSelection, (s) => isEqual(item, s));
   return index >= 0;
 }
 export function onItemSelect(item, choiceElement, preventSetValue = false) {
-  if (choiceElement.customEvent) {
+  if (choiceElement instanceof YooFormChoiceCardComponent && choiceElement.customEvent) {
     choiceElement.choiceSelected.emit(item);
   }
   else if (!choiceElement.readonly) {
     const index = choiceElement.selection.indexOf(item);
     if (choiceElement.multiple) {
-      choiceElement.selection = index < 0 ? [...choiceElement.selection, item] : [...choiceElement.selection.slice(0, index), ...choiceElement.selection.slice(index + 1)];
+      choiceElement.selection =
+        index < 0 ? [...choiceElement.selection, item] : [...choiceElement.selection.slice(0, index), ...choiceElement.selection.slice(index + 1)];
     }
     else {
       choiceElement.selection = index < 0 ? [item] : [];

package/dist/collection/components/form/form-choice/image/form-choice-image.js

@@ -245,7 +245,7 @@ export class YooFormChoiceImageComponent {
         "references": {
           "IFormChoiceValue": {
             "location": "import",
-            "path": "@shared/interfaces"
+            "path": "../../../../interfaces"
           }
         }
       },
@@ -274,23 +274,6 @@ export class YooFormChoiceImageComponent {
       "attribute": "selected",
       "reflect": false
     },
-    "customEvent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-event",
-      "reflect": false
-    },
     "description": {
       "type": "string",
       "mutable": false,
@@ -317,7 +300,7 @@ export class YooFormChoiceImageComponent {
         "references": {
           "IFormChoiceValue": {
             "location": "import",
-            "path": "@shared/interfaces"
+            "path": "../../../../interfaces"
           }
         }
       },
@@ -338,7 +321,7 @@ export class YooFormChoiceImageComponent {
         "references": {
           "IFormChoiceValue": {
             "location": "import",
-            "path": "@shared/interfaces"
+            "path": "../../../../interfaces"
           }
         }
       },
@@ -413,21 +396,6 @@ export class YooFormChoiceImageComponent {
         "resolved": "any",
         "references": {}
       }
-    }, {
-      "method": "choiceSelected",
-      "name": "choiceSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/components/form/form-choice/radio/form-choice-radio.js

@@ -1,4 +1,4 @@
-import { translate, translateMulti } from '@shared/utils';
+import { isNullOrUndefined, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { compact, isString } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../../utils/helpers/form-input-helpers';
@@ -11,6 +11,7 @@ export class YooFormChoiceRadioComponent {
     this.shuffled = false;
     this.answer = [];
     this.values = [];
+    this.showOther = this.canShowOther;
     this.selection = [];
     this.choices = [];
   }
@@ -18,19 +19,25 @@ export class YooFormChoiceRadioComponent {
     updateValues(newValues, oldValues, this);
   }
   onValueChange(newValue, oldValue) {
-    updateValue(newValue, oldValue, this, (v) => this.onItemSelectRadio(v, true, true));
+    updateValue(newValue, oldValue, this, (v) => this.onItemSelectRadio(v, true));
   }
   get valuesWithOther() {
     return [...this.choices].concat(compact([this.allowOther && !this.multiple && translate('OTHER')]));
   }
+  get canShowOther() {
+    return this.allowOther && !isNullOrUndefined(this.value) && this.values && !this.values.includes(this.value);
+  }
   componentWillLoad() {
     var _a;
     prepareChoice(this);
-    this.textareaValue = !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) && this.value;
+    this.textareaValue = !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) && (this.value || '');
   }
   componentDidLoad() {
     hasWarnings(this.values, this);
-    this.updateShowOther(true);
+    this.focusTextArea();
+  }
+  componentDidUpdate() {
+    this.focusTextArea();
   }
   convertToEntities(values) {
     return values.map((value) => ({ _id: value, title: translateMulti(value) }));
@@ -38,19 +45,9 @@ export class YooFormChoiceRadioComponent {
   convertToChoiceFormat(valuesEntity) {
     return valuesEntity.map(({ _id }) => _id);
   }
-  setShowOther(value, didLoad) {
-    this.showOther = value;
-    // wait for the textarea to be presented
-    setTimeout(() => {
-      // prevent focus on did load otherwise mutiple focus on form-choice will be fired
-      if (this.showOther && this.textareaRef && !didLoad) {
-        this.textareaRef.focus();
-      }
-    }, 50);
-  }
-  updateShowOther(didLoad) {
-    if (this.allowOther && this.value && this.choices && !this.choices.includes(this.value)) {
-      this.setShowOther(true, didLoad);
+  focusTextArea() {
+    if (this.showOther && this.textareaRef) {
+      this.textareaRef.focus();
     }
   }
   onInput(ev) {
@@ -59,32 +56,32 @@ export class YooFormChoiceRadioComponent {
     this.textareaValue = ev.target.value;
     this.selection = [this.textareaValue];
     setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
-    this.updateShowOther();
   }
-  onItemSelectRadio(item, preventSetValue = false, onValueChange = false) {
-    if (item === null && !onValueChange) {
-      onItemSelect(item, this);
-    }
-    else if (this.multiple && !onValueChange) {
+  onItemSelectRadio(item, preventSetValue = false) {
+    var _a;
+    if (this.multiple && !preventSetValue) {
       this.selection = this.convertToChoiceFormat(item);
       setValueAndValidateInput(this.selection, this);
     }
     else {
-      const itemVal = isString(item) ? item : item._id;
-      if (!this.customEvent && itemVal === translate('OTHER')) {
-        this.value = null;
-        this.selection = [];
-        if (!this.showOther)
-          this.setShowOther(true);
+      const itemVal = isString(item) || isNullOrUndefined(item) ? item : item._id;
+      if (itemVal === translate('OTHER')) {
+        this.showOther = true;
+        if (this.textareaValue !== this.value) {
+          this.selection = [this.textareaValue];
+          setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+        }
       }
-      else {
-        onItemSelect(itemVal, this, preventSetValue);
-        if (this.showOther)
-          this.setShowOther(false);
+      else if (!preventSetValue && !this.isTextareaFocused) {
+        this.showOther = false;
+        if (itemVal !== this.value) {
+          onItemSelect(itemVal, this, preventSetValue);
+        }
       }
     }
   }
   onTextAreaFocused() {
+    this.isTextareaFocused = true;
     this.inputFocused.emit({ host: this.textareaRef });
   }
   renderRadio() {
@@ -101,7 +98,7 @@ export class YooFormChoiceRadioComponent {
         h("yoo-grid", { class: "choice radio-button-choice", blockSelectionMode: true, items: valuesEntity, initialSelection: initialEntity, keepSelection: true, multiple: this.multiple, displayType: "card-list", onSelected: (ev) => this.onItemSelectRadio(ev.detail), hideHeader: true, isLocal: true, useTranslate: this.useTranslate, animated: false, valuesColor: this.valuesColor }),
       this.showOther &&
         h("div", { class: "input-zone" },
-          h("textarea", { ref: (el) => (this.textareaRef = el), value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))
+          h("textarea", { ref: (el) => (this.textareaRef = el), onBlur: () => this.isTextareaFocused = false, value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))
     ];
   }
   renderBanner() {
@@ -318,23 +315,6 @@ export class YooFormChoiceRadioComponent {
       "attribute": "selected",
       "reflect": false
     },
-    "customEvent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "custom-event",
-      "reflect": false
-    },
     "description": {
       "type": "string",
       "mutable": false,
@@ -454,21 +434,6 @@ export class YooFormChoiceRadioComponent {
         "resolved": "any",
         "references": {}
       }
-    }, {
-      "method": "choiceSelected",
-      "name": "choiceSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/components/form/form-choice/readonly-card/readonly-card.js

@@ -1,11 +1,13 @@
 import { translateMulti } from '@shared/utils';
 import { h } from '@stencil/core';
+import { isString } from 'highcharts';
 export const ReadonlyCard = ({ value, values, answer, valuesColor, classNames }) => {
+  var _a;
   const classes = typeof classNames === 'string' ? classNames : Object.keys(classNames).join(' ');
-  return h("div", { class: { [classes]: !!classes, 'readonly-card': true } }, (!!value && (Array.isArray(value) ? value : [value])).map((val) => {
-    var _a, _b;
+  return h("div", { class: { [classes]: !!classes, 'readonly-card': true } }, !!value && ((_a = (Array.isArray(value) ? value : [value])) === null || _a === void 0 ? void 0 : _a.map((val) => {
+    var _a, _b, _c;
     const isCorrect = answer === null || answer === void 0 ? void 0 : answer.includes(val);
-    const title = (_a = values === null || values === void 0 ? void 0 : values.find((v) => (v === null || v === void 0 ? void 0 : v.value) === val)) === null || _a === void 0 ? void 0 : _a.title;
-    return h("div", { class: { text: true, valid: answer && isCorrect, invalid: answer && !isCorrect }, style: { color: (_b = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find(e => e.key === val)) === null || _b === void 0 ? void 0 : _b.value }, innerHTML: translateMulti(title || val) });
-  }));
+    const title = (_b = (_a = values) === null || _a === void 0 ? void 0 : _a.find((v) => !isString(v) && (v === null || v === void 0 ? void 0 : v.value) === val)) === null || _b === void 0 ? void 0 : _b.title;
+    return h("div", { class: { text: true, valid: answer && isCorrect, invalid: answer && !isCorrect }, style: { color: (_c = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find(e => e.key === val)) === null || _c === void 0 ? void 0 : _c.value }, innerHTML: translateMulti(title || val) });
+  })));
 };