@yoobic/yobi 8.2.0-2 → 8.2.0-22

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -27,19 +27,7 @@ export class YooFormMissingWordComponent {
   onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
-      const hasDuplicateValues = hasDuplicates(newValues);
-      const newValuesLength = newValues === null || newValues === void 0 ? void 0 : newValues.map((v) => !isValueATranslationKey(v) && v.length);
-      if (hasDuplicateValues) {
-        const duplicateValue = getDuplicatedValue(newValues);
-        if (duplicateValue && this.values.length) {
-          const duplicateValueIndex = this.answer.lastIndexOf(duplicateValue);
-          this.sentence.replace(`[[${duplicateValueIndex}]]`, '');
-        }
-      }
-      const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > MAX_TAGS_CHARACTERS);
-      const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : '';
-      const showBanner = hasDuplicateValues || hasTooLongValues;
-      showWarningAlert(this.host, showBanner, bannerMessage);
+      this.showWarning();
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
     }
   }
@@ -106,8 +94,26 @@ export class YooFormMissingWordComponent {
   componentDidLoad() {
     this.initGame();
   }
+  showWarning() {
+    var _a, _b, _c;
+    const hasDuplicateValues = hasDuplicates(this.values);
+    if (hasDuplicateValues) {
+      const duplicateValue = getDuplicatedValue(this.values);
+      if (duplicateValue && this.values.length) {
+        const duplicateValueIndex = this.answer.lastIndexOf(duplicateValue);
+        this.sentence.replace(`[[${duplicateValueIndex}]]`, '');
+      }
+    }
+    const missingValues = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length) && !!((_b = this.values) === null || _b === void 0 ? void 0 : _b.length);
+    const newValuesLength = (_c = this.values) === null || _c === void 0 ? void 0 : _c.map((v) => !isValueATranslationKey(v) && v.length);
+    const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > MAX_TAGS_CHARACTERS);
+    const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : missingValues ? 'NOMISSINGVALUES' : '';
+    const showBanner = hasDuplicateValues || hasTooLongValues || missingValues;
+    showWarningAlert(this.host, showBanner, bannerMessage);
+  }
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
+    this.showWarning();
   }
   getColorTag(tagValue) {
     if (this.readonly && checkArray(this.value) && this.answer) {
@@ -126,14 +132,15 @@ export class YooFormMissingWordComponent {
     return -1;
   }
   renderInstructions() {
-    return h("p", null, translate(this.placeholder));
+    return h("p", { class: "instructions" }, translate(this.placeholder));
   }
   renderTagsZone() {
     return h("section", { class: "tags" },
       h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null);
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
   }
   renderSentence() {
     const sentence = this.isMatchingBrackets ? this.translatedSentence.split(' ') : this.translatedSentence.split(this.parenthesesRegexp.g);

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

@@ -1,4 +1,4 @@
-import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
+import { debounce, getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import Sortable from 'sortablejs';
@@ -31,6 +31,13 @@ export class YooFormMultiInputComponent {
     this.dragAndDropPendingEvent = null;
     this.dragAndDropPendingEventTimeout = null;
     this.sortables = [];
+    this.setValueAndEmitChanges = (value, skipValueAssignment = false) => {
+      if (!skipValueAssignment) {
+        this.value = value;
+      }
+      const finalValue = this.isSimpleArray ? this.value[0] : this.value;
+      setValueAndValidateInput(finalValue, this, false, true, true);
+    };
   }
   async reset(keys) {
     this.cells = this.getCells();
@@ -396,19 +403,13 @@ export class YooFormMultiInputComponent {
     if (this.reverseValueDimensions) {
       values = this.arrayTransposing(values);
     }
-    this.setValueAndEmitChanges(values);
+    // use debounce to prevent performance issue while typing
+    debounce(this.setValueAndEmitChanges.bind(this), 500)(values);
   }
   onTranslationValueUpdated(ev) {
     ev.stopPropagation();
     this.translationValueUpdated.emit(ev.detail);
   }
-  setValueAndEmitChanges(value, skipValueAssignment = false) {
-    if (!skipValueAssignment) {
-      this.value = value;
-    }
-    const finalValue = this.isSimpleArray ? this.value[0] : this.value;
-    setValueAndValidateInput(finalValue, this, false, true, true);
-  }
   isLinkedList() {
     return this.columns.some((c) => c.linkedRow);
   }

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

@@ -96,7 +96,7 @@ export class YooFormPermissionsComponent {
                 }
                 values.push({ label: `ROLE${role.toUpperCase()}` });
               });
-              element = document.createElement('yoo-segment');
+              element = document.createElement('yoo-segmented-control');
               element.values = values;
               element.initialIndex = selectedIndex;
               element.size = 'large';
@@ -108,7 +108,7 @@ export class YooFormPermissionsComponent {
           }
         },
         {
-          headerName: translate('ACTIONS'),
+          headerName: translate('YOOBICACTIONS'),
           headerClass: 'hidden-force-menu',
           sortable: false,
           suppressMovable: true,

package/dist/collection/components/form/form-phone-number/form-phone-number.css

@@ -206,10 +206,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
 }
 
-:host([size=small]) {
-  font-size: var(--font-size-12, 0.75rem);
-}
-
+:host([size=small]),
 :host([size=medium]) {
   font-size: var(--font-size-14, 0.875rem);
 }
@@ -223,62 +220,63 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: 0;
   transition: margin 500ms ease-out;
 }
-:host(:not([readonly])) .dialog {
-  position: absolute;
+:host(:not([readonly])) yoo-context-dialog {
   box-sizing: border-box;
   width: 100%;
   height: 16.5rem;
   margin: var(--spacing-08, 0.5rem) 0 0;
   overflow: auto;
-  background: var(--light, #ffffff);
-  border-radius: var(--border-radius-04, 0.25rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
-:host(:not([readonly])) .dialog hr {
+:host(:not([readonly])) yoo-context-dialog hr {
   width: 100%;
   height: 1px;
   margin: 0;
   background: var(--stable-light, #f1f1f1);
   border: none;
 }
+:host(:not([readonly])) yoo-context-dialog yoo-loader {
+  align-self: center;
+  justify-self: center;
+  height: 100%;
+}
 
 :host(:not([readonly])[expanded]) {
   margin-bottom: 17rem;
   transition: margin 500ms ease-in;
 }
 
-:host(:not([readonly])[size=small]) .dialog {
+:host(:not([readonly])[size=small]) yoo-context-dialog {
   top: 1.5rem;
 }
 
-:host(:not([readonly])[size=medium]) .dialog {
+:host(:not([readonly])[size=medium]) yoo-context-dialog {
   top: 2rem;
 }
 
-:host(:not([readonly])[size=large]) .dialog {
+:host(:not([readonly])[size=large]) yoo-context-dialog {
   top: 3rem;
 }
 
-:host(.web) .dialog {
+:host(.web) yoo-context-dialog {
   /* Track */
   /* Handle */
 }
-:host(.web) .dialog::-webkit-scrollbar {
+:host(.web) yoo-context-dialog::-webkit-scrollbar {
   width: var(--spacing-04, 0.25rem);
   height: var(--spacing-04, 0.25rem);
 }
-:host(.web) .dialog::-webkit-scrollbar-track {
+:host(.web) yoo-context-dialog::-webkit-scrollbar-track {
   background-color: transparent;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host(.web) .dialog::-webkit-scrollbar-thumb {
+:host(.web) yoo-context-dialog::-webkit-scrollbar-thumb {
   background-color: transparent;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host(.web) .dialog:hover::-webkit-scrollbar-track {
+:host(.web) yoo-context-dialog:hover::-webkit-scrollbar-track {
   background-color: var(--stable-light, #f1f1f1);
 }
-:host(.web) .dialog:hover::-webkit-scrollbar-thumb {
+:host(.web) yoo-context-dialog:hover::-webkit-scrollbar-thumb {
   background: var(--stable, #adadad);
 }
 

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

@@ -3,7 +3,7 @@ import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '
 import { formatIncompletePhoneNumber, getCountries, getCountryCallingCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js';
 import * as examples from 'libphonenumber-js/examples.mobile.json';
 import { getGeolocation } from '../../../utils/helpers/geolocation-helpers';
-import { Dialog, Error, Input, List, Search } from './parts';
+import { Error, Input, List, Search } from './parts';
 const getRegionalIndicatorSymbol = (letter) => String.fromCodePoint(0x1f1e6 - 65 + letter.toUpperCase().charCodeAt(0));
 const getCountryFlag = (country) => getRegionalIndicatorSymbol(country[0]) + getRegionalIndicatorSymbol(country[1]);
 export class YooFormPhoneNumberComponent {
@@ -32,6 +32,11 @@ export class YooFormPhoneNumberComponent {
      * If `true`, the user cannot edit the value.
      */
     this.readonly = false;
+    /**
+     * Whether to use geolocation (will remove loader)
+     */
+    this.useGeolocation = true;
+    this.isLoading = false;
   }
   get phoneNumber() {
     return this.value && parsePhoneNumberFromString(this.value);
@@ -58,7 +63,7 @@ export class YooFormPhoneNumberComponent {
       }))
         .sort((country1, country2) => country1.label.localeCompare(country2.label));
       this.options = this.countries;
-      getGeolocation().then(({ countryCode }) => (this.geolocation = this.countries.find(({ code }) => code === countryCode)));
+      this.updateGeolocation();
       this.updateInputStates();
     }
   }
@@ -82,6 +87,14 @@ export class YooFormPhoneNumberComponent {
       this.updateValue(phoneNumber);
     }
   }
+  updateGeolocation() {
+    if (this.useGeolocation) {
+      this.isLoading = true;
+      getGeolocation()
+        .then(({ countryCode }) => (this.geolocation = this.countries.find(({ code }) => code === countryCode)))
+        .finally(() => (this.isLoading = false));
+    }
+  }
   updateValue(phoneNumber) {
     var _a;
     const value = (_a = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.number) === null || _a === void 0 ? void 0 : _a.toString();
@@ -101,17 +114,20 @@ export class YooFormPhoneNumberComponent {
     var _a;
     const internationalNumber = this.readonly && ((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.formatInternational());
     return (h(Host, null,
-      this.readonly && h("yoo-link", { size: this.size, href: `tel:${internationalNumber}` }, internationalNumber),
+      !this.isLoading && this.readonly && h("yoo-link", { size: this.size, href: `tel:${internationalNumber}` }, internationalNumber),
       !this.readonly && [
-        h(Input, { clearable: this.clearable, country: this.selectedCountry, disabled: this.disabled, focusedOnce: this.focusedOnce, name: this.name, placeholder: this.placeholder || getExampleNumber(this.selectedCountry.code, examples).formatNational(), required: this.required, size: this.size, valid: this.valid, value: this.nationalNumber, onChange: (value) => (this.nationalNumber = value), onFocus: () => (this.focusedOnce = true), onToggleCountries: () => (this.expanded = !this.expanded) }),
+        h(Input, { isLoading: this.isLoading, clearable: this.clearable, country: this.selectedCountry, disabled: this.disabled, focusedOnce: this.focusedOnce, name: this.name, placeholder: this.placeholder || getExampleNumber(this.selectedCountry.code, examples).formatNational(), required: this.required, size: this.size, valid: this.valid, value: this.nationalNumber, onChange: (value) => (this.nationalNumber = value), onFocus: () => (this.focusedOnce = true), onToggleCountries: () => (this.expanded = !this.expanded) }),
         h(Error, { hidden: this.disabled || this.expanded || !this.focusedOnce || this.valid, message: translate('INCORRECTFORMAT') }),
-        h(Dialog, { hidden: !this.expanded },
-          h(Search, { disabled: this.disabled, size: this.size, onChange: (search) => (this.options = this.countries.filter((country) => country.toString().toLowerCase().includes(search.toLowerCase()))) }),
-          h("hr", null),
-          h(List, { geolocation: this.geolocation, options: this.options, value: this.selectedCountry, onChange: (country) => {
-              this.country = country;
-              this.expanded = false;
-            } }))
+        h("yoo-context-dialog", { hidden: !this.expanded, class: "absolute" }, this.isLoading
+          ? h("yoo-loader", { size: "extra-large" })
+          : [
+            h(Search, { disabled: this.disabled, size: this.size, onChange: (search) => (this.options = this.countries.filter((country) => country.toString().toLowerCase().includes(search.toLowerCase()))) }),
+            h("hr", null),
+            h(List, { options: this.options, value: this.selectedCountry, onChange: (country) => {
+                this.country = country;
+                this.expanded = false;
+              } })
+          ])
       ]));
   }
   static get is() { return "yoo-form-phone-number"; }
@@ -286,6 +302,24 @@ export class YooFormPhoneNumberComponent {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "useGeolocation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether to use geolocation (will remove loader)"
+      },
+      "attribute": "use-geolocation",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -293,7 +327,8 @@ export class YooFormPhoneNumberComponent {
     "focusedOnce": {},
     "geolocation": {},
     "nationalNumber": {},
-    "options": {}
+    "options": {},
+    "isLoading": {}
   }; }
   static get events() { return [{
       "method": "inputChanged",

package/dist/collection/components/form/form-phone-number/parts/index.js

@@ -1,4 +1,3 @@
-export * from './dialog';
 export * from './error';
 export * from './input';
 export * from './list';

package/dist/collection/components/form/form-phone-number/parts/input.js

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
-export const Input = ({ clearable, country, disabled, focusedOnce, name, placeholder, required, size, valid, value, onChange, onFocus, onToggleCountries }) => (h("div", { class: { input: true, invalid: focusedOnce && !valid } },
-  h("strong", { class: "clickable country-code", onClick: onToggleCountries },
-    country.flag,
-    " +",
-    country.callingCode),
+export const Input = ({ isLoading, clearable, country, disabled, focusedOnce, name, placeholder, required, size, valid, value, onChange, onFocus, onToggleCountries }) => (h("div", { class: { input: true, invalid: focusedOnce && !valid } },
+  h("strong", { class: "clickable country-code", onClick: onToggleCountries }, isLoading ? h("yoo-loader", { size: size === 'small'
+      ? 'extra-small'
+      : size === 'medium'
+        ? 'small'
+        : 'medium' }) : `${country.flag} +${country.callingCode}`),
   h("input", { disabled: disabled, name: name, placeholder: placeholder, required: required, type: "tel", value: value, onFocus: onFocus, onInput: (event) => onChange(event.target.value) }),
   clearable && (h("yoo-icon", { class: "clickable", name: "cross", hidden: !value, size: size === 'large' ? 'medium' : 'small', onMouseDown: (event) => event.preventDefault(), onClick: () => onChange(null) }))));

package/dist/collection/components/form/form-phone-number/parts/list.js

@@ -1,6 +1,4 @@
 import { h } from '@stencil/core';
 import { ListItem } from './list-item';
-const getOptions = (options, geolocation) => (geolocation ? options.filter((option) => option !== geolocation) : options);
-export const List = ({ geolocation, options, value, onChange }) => (h("ul", null,
-  geolocation && h(ListItem, { option: geolocation, onClick: () => geolocation !== value && onChange(geolocation) }),
-  getOptions(options, geolocation).map((option) => (h(ListItem, { option: option, onClick: () => option !== value && onChange(option) })))));
+const getOptions = (options, value) => (value ? options.filter((option) => option !== value) : options);
+export const List = ({ value, options, onChange }) => (h("ul", null, getOptions(options, value).map((option) => (h(ListItem, { option: option, onClick: () => onChange(option) })))));

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

@@ -141,7 +141,7 @@ export class YooFormPricecheckComponent {
           form.header = product.title;
           form.slides = [
             {
-              title: 'GENERAL',
+              title: 'YOOBICGENERAL',
               items: [
                 { name: 'product', readonly: true, type: FormFieldType.catalog, check: true },
                 {

package/dist/collection/components/form/form-radio/form-radio.css

@@ -438,7 +438,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   overflow: hidden;
   white-space: nowrap;
 }
-:host label yoo-tooltip {
+:host yoo-tooltip {
   padding-left: var(--spacing-08, 0.5rem);
 }
 

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

@@ -65,10 +65,10 @@ export class YooFormRadioComponent {
       h("slot", { name: (_a = this.options.findIndex((option) => this.value === option)) === null || _a === void 0 ? void 0 : _a.toString() }))) : ((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.map((option, index) => ({ option, id: index.toString() }))) === null || _c === void 0 ? void 0 : _c.map(({ option, id }, index) => (h("div", null,
       h("input", { checked: this.value === option, disabled: this.disabled, id: id, name: this.name, required: this.required, type: "radio", value: typeof option === 'boolean' ? option.toString() : option, onChange: this.onChange.bind(this, option) }),
       h("label", { htmlFor: id },
-        h("slot", { name: id }),
-        this.helpers && this.helpers[index] &&
-          h("yoo-tooltip", { hoverable: true, placement: "bottom", content: this.helpers[index] },
-            h("yoo-icon", { name: "info", color: "stable", size: "small" })))))));
+        h("slot", { name: id })),
+      this.helpers && this.helpers[index] &&
+        h("yoo-tooltip", { hoverable: true, placement: "bottom", content: this.helpers[index] },
+          h("yoo-icon", { name: "info", color: "stable", size: "small" }))))));
   }
   static get is() { return "yoo-form-radio"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-recap-step/form-recap-step.js

@@ -132,7 +132,7 @@ export class YooFormRecapStepComponent {
       "mutable": false,
       "complexType": {
         "original": "TIconName",
-        "resolved": "\"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"circle\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"",
+        "resolved": "\"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"",
         "references": {
           "TIconName": {
             "location": "import",

package/dist/collection/components/form/form-recurrence-preview/form-recurrence-preview.css

@@ -206,6 +206,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
   height: 100%;
   background-color: var(--light, #ffffff);
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }
 :host footer {
   display: flex;

package/dist/collection/components/form/form-recurrence-preview/form-recurrence-preview.js

@@ -1,5 +1,6 @@
-import { getNextRecurrences, guessCurrentTimezone, pipes, TIMEZONES, translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { closeModal, getNextRecurrences, guessCurrentTimezone, pipes, TIMEZONES, translate } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 const EmptyState = () => [h("yoo-empty-state", null), h("p", null, translate('LISTEMPTY'))];
 const Recurrences = ({ dates, label }) => (h("div", { class: "recurrences" },
   h("h1", null, translate(label)),
@@ -31,16 +32,17 @@ export class YooFormRecurrencePreviewComponent {
   }
   finish() {
     this.close.emit();
+    closeModal(null);
   }
   render() {
     const recurrences = getNextRecurrences(this.value, { max: this.max, timezone: this.timezone });
     const hasRecurrences = !!(recurrences === null || recurrences === void 0 ? void 0 : recurrences.length);
-    return (h(Host, null,
+    return (h(Host, { class: { ...getAppContext(this.host) } },
       h("header", null,
         h("yoo-navbar", null,
           h("yoo-items", { slot: "start" },
             h("yoo-button", { animated: true, color: "stable", fill: "transparent", rippleType: "unbounded", shape: "circular", onClick: () => this.finish() },
-              h("yoo-icon", { color: "stable", name: "left" }))),
+              h("yoo-icon", { color: "stable", name: "close" }))),
           h("yoo-truncate", null, translate('RECURRENCEPREVIEWTITLE')))),
       h("main", { class: { empty: !hasRecurrences } },
         hasRecurrences && h(Timezones, { value: this.timezone, values: TIMEZONES, onUpdate: (timezone) => (this.timezone = timezone) }),
@@ -133,4 +135,5 @@ export class YooFormRecurrencePreviewComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/form/form-signature-pad-dialog/form-signature-pad-dialog.js

@@ -68,7 +68,7 @@ export class YooFormSignaturePadDialogComponent {
         h("yoo-items", { slot: "start" },
           h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => closeModal(this.value) },
             h("yoo-icon", { name: "close" }))),
-        h("yoo-truncate", null, translate('SIGNATURE')),
+        h("yoo-truncate", null, translate('YOOBICSIGNATURE')),
         !this.readonly && (h("yoo-items", { slot: "end" },
           h("yoo-button", { color: "warning", fill: "transparent", animated: false, disabled: !this.hasContent, onClick: () => this.onClear() }, translate('DELETE')))))));
   }

package/dist/collection/components/form/form-star-rating/form-star-rating.css

@@ -270,8 +270,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 30px;
-  height: 30px;
+  min-width: 1.875rem;
+  height: 1.875rem;
   color: var(--dark, #000000);
   font-size: var(--font-size-14, 0.875rem);
   background: var(--stable-light, #f1f1f1);

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js

@@ -123,6 +123,7 @@ export class YooFormSwipeCardsComponent {
     if (!this.showInstructionView) {
       this.initDraggable();
     }
+    this.showWarnings();
   }
   updateCardsData() {
     if (this.hasDataChanged) {
@@ -149,7 +150,14 @@ export class YooFormSwipeCardsComponent {
     return (_a = this.cardsElements) === null || _a === void 0 ? void 0 : _a.find((cardElement) => (cardElement === null || cardElement === void 0 ? void 0 : cardElement.id) === id);
   }
   spyOnValuesChanged() {
-    if (this.hasTwoCategories && this.livePreview) {
+    this.showWarnings();
+  }
+  showWarnings() {
+    var _a;
+    if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && this.livePreview && !this.hasTwoCategories) {
+      showWarningAlert(this.host, true, 'NOTFULFILLEDCATEGORIES');
+    }
+    else if (this.hasTwoCategories && this.livePreview) {
       this.hasEmptyValues = !!this.numberEmptyItems.text || !!this.numberEmptyItems.image;
       this.hasDuplicatesValues = this.hasText && hasDuplicates(this.values);
       let showAlert = this.hasEmptyValues || this.hasDuplicatesValues;
@@ -414,7 +422,8 @@ export class YooFormSwipeCardsComponent {
     ]);
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null);
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, { ...(this.formHeight && { style: { height: `${this.formHeight}px` } }), class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly } },

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

@@ -382,7 +382,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

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

@@ -128,12 +128,12 @@ export class YooFormTaskComponent {
       : null;
   }
   renderReadonly() {
-    return (h("div", { class: { readonly: true, pdf: this.isPdf } }, this.value && this.value.length > 0 ? [this.hideTitle ? null : h("div", { class: "title" }, translate('ACTIONS')), this.renderTasks()] : null));
+    return (h("div", { class: { readonly: true, pdf: this.isPdf } }, this.value && this.value.length > 0 ? [this.hideTitle ? null : h("div", { class: "title" }, translate('YOOBICACTIONS')), this.renderTasks()] : null));
   }
   renderEditable() {
     var _a, _b, _c;
     return (h("div", { class: { 'outer-container': true, empty: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), pdf: this.isPdf } },
-      ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? h("div", { class: "title" }, translate('ACTIONS')) : null,
+      ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? h("div", { class: "title" }, translate('YOOBICACTIONS')) : null,
       this.renderTasks(),
       this.type === 'todo' || this.type === 'task' ? (h("div", { class: { newtask: true, nomargin: !((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) } },
         h("yoo-button", { color: "stable-light", onClick: () => this.onAddNewTask() },