@yoobic/yobi 8.4.0-1 → 8.4.0-4

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -306,7 +306,7 @@ export class YooEntityQueryBuilderComponent {
       const filteredFields = this.getFilterFields();
       if (filteredFields && filteredFields.length > 0) {
         const { slides, data } = filterRenderFormDynamic(filteredFields, ((_b = this.values) === null || _b === void 0 ? void 0 : _b.filters) || [], this.formFilter, null, null, true, null, !this.floating);
-        return (h("yoo-form-dynamic", { class: { floating: this.floating, inline: true, 'inline-narrow': this.floating, 'inline-row': !this.floating }, ref: (el) => (this.formFilter = el), formInputSize: this.floating ? 'small' : 'medium', animated: false, showRecap: false, scrollable: false, slides: slides, forceReadonly: this.readonly, data: data, hideOptional: true, onExtraDataChanged: (ev) => this.onAutocompleteChange(ev), onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev), onFormValidityChanged: (ev) => ev.stopImmediatePropagation(), onDataChanged: (ev) => ev.stopPropagation() }));
+        return (h("yoo-form-dynamic", { class: { floating: this.floating, inline: true, 'inline-narrow': this.floating, 'inline-row': !this.floating, 'overflow-visible': true }, ref: (el) => (this.formFilter = el), formInputSize: this.floating ? 'small' : 'medium', animated: false, showRecap: false, scrollable: false, slides: slides, forceReadonly: this.readonly, data: data, hideOptional: true, onExtraDataChanged: (ev) => this.onAutocompleteChange(ev), onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev), onFormValidityChanged: (ev) => ev.stopImmediatePropagation(), onDataChanged: (ev) => ev.stopPropagation() }));
       }
     }
   }
@@ -321,7 +321,7 @@ export class YooEntityQueryBuilderComponent {
           const contentButtons = this.getContextMenuButtons(index);
           const finalData = { ...data, operator: operatorValue };
           return [
-            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent fill-width", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
+            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent fill-width overflow-visible", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
               !this.readonly && isWeb(this.host) && h("yoo-context-menu", { contentButtons: contentButtons, placement: "below", slot: "end" },
                 h("yoo-button", { color: "app-color", class: "margin-right", shape: "square", size: this.size || 'medium' },
                   h("yoo-icon", { color: "light", name: "plus", class: "add", size: "small" }))),

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

@@ -186,7 +186,7 @@ export class YooEntitySearchFiltersComponent {
     const filteredFields = fields.filter((f) => filterIsAutocomplete(f) || filterIsRadio(f));
     if (filteredFields === null || filteredFields === void 0 ? void 0 : filteredFields.length) {
       const { slides, data } = filterRenderFormDynamic(filteredFields, this.filters, this.formAutocompletes);
-      return (h("yoo-form-dynamic", { class: "inline margin-top", ref: (el) => (this.formAutocompletes = el), animated: false, showRecap: false, slides: slides, data: data, hideOptional: true, onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev) }));
+      return (h("yoo-form-dynamic", { class: "inline margin-top overflow-visible", ref: (el) => (this.formAutocompletes = el), animated: false, showRecap: false, slides: slides, data: data, hideOptional: true, onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev) }));
     }
   }
   renderUl(field) {

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

@@ -1691,7 +1691,7 @@ export class YooFormAutocompleteComponent {
       "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\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"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\"",
+        "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\" | \"notes\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"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",
@@ -2004,7 +2004,7 @@ export class YooFormAutocompleteComponent {
       "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\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"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\"",
+        "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\" | \"notes\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"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-autocomplete-dialog/form-autocomplete-dialog.js

@@ -471,7 +471,7 @@ export class YooFormAutocompleteDialogComponent {
       "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\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"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\"",
+        "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\" | \"notes\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"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-categorize-words/form-categorize-words.css

@@ -220,7 +220,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   width: 100%;
   margin: 0 auto;
-  padding: var(--spacing-16, 1rem);
 }
 :host [placement] #counter {
   padding-left: var(--spacing-04, 0.25rem);
@@ -263,6 +262,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(:not([readonly])) [placement] {
   min-height: calc(var(--spacing-32, 2rem) * 5);
+  padding: var(--spacing-16, 1rem);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
@@ -285,10 +285,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--app-color-60, rgba(90, 48, 244, 0.6));
 }
 
-:host([readonly]) .drop-container:last-of-type {
+:host([readonly]) main {
+  display: grid;
+  grid-gap: var(--spacing-08, 0.5rem);
+}
+:host([readonly]) main [placement] {
+  padding: 0;
+}
+:host([readonly]) main .drop-container:last-of-type {
   margin-top: var(--spacing-16, 1rem);
 }
-:host([readonly]) #title {
+:host([readonly]) main #title {
   margin-bottom: var(--spacing-08, 0.5rem);
 }
 

package/dist/collection/components/form/form-categorize-words/form-categorize-words.js

@@ -7,13 +7,7 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 export class YooFormCategorizeWordsComponent {
   constructor() {
     this.animated = true;
-    /**
-     * Read-only mode : true if displayed within a quiz summary
-     */
     this.readonly = false;
-    /**
-     * Value previously given by user, mostly used in read-only mode
-     */
     this.value = null;
     this.counterElement = [];
   }
@@ -24,24 +18,32 @@ export class YooFormCategorizeWordsComponent {
   onRequireChanged() {
     this.validate();
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
       showWarningBanner(this.host, hasDuplicates(newValues));
-      (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
+      this.tags = await ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues }));
+      this.value = this.droppedValues;
     }
   }
   onIsVisibleChanged() {
     var _a;
     this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
   }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    this.validity = !this.required || isEqual((_a = this.value) === null || _a === void 0 ? void 0 : _a.map(v => v.length), (_b = this.answer) === null || _b === void 0 ? void 0 : _b.map(a => a.length));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
+  get droppedValues() {
+    var _a;
+    return ((_a = this.tags.getDroppedValues()) === null || _a === void 0 ? void 0 : _a.map(droppedValues => droppedValues.map(droppedValue => { var _a; return (_a = this.values) === null || _a === void 0 ? void 0 : _a.find(value => droppedValue === translateMulti(value)); }))) || [];
+  }
   get tagConfig() {
-    const onReleaseTag = () => {
-      this.tags.checkOverflowingTags();
-      this.value = this.tags.getDroppedValues()
-        .map(uas => uas.map(ua => this.values.find(v => ua === translateMulti(v))));
-      setValueAndValidateInput(this.value, this);
-    };
     const getColorTag = (tagValue, zoneIndex) => {
       if (this.readonly && this.value.length === this.answer.length) {
         const isCorrect = this.answer[zoneIndex].includes(tagValue);
@@ -51,40 +53,30 @@ export class YooFormCategorizeWordsComponent {
         return zoneIndex === 2 ? 'stable-light' : 'light';
       }
     };
+    const onReleaseTag = () => {
+      this.tags.checkOverflowingTags();
+      this.value = this.droppedValues;
+      setValueAndValidateInput(this.value, this);
+    };
     return {
       clickToDrop: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.revealCategories = true,
-      getColorTag: (tagValue, zoneIndex) => getColorTag(tagValue, zoneIndex),
-      releaseTagExtraAction: () => onReleaseTag(),
+      releaseTagExtraAction: onReleaseTag,
       pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
-      resetTagExtraAction: () => onReleaseTag()
+      resetTagExtraAction: onReleaseTag
     };
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => {
-      const isTagZone = zoneType === 'tagZone';
-      return {
-        hasOverflow: isTagZone
-      };
-    };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { hasOverflow: true },
+      dropZoneConfig: {}
     };
   }
-  async isValid() {
-    return this.validity;
-  }
   componentDidLoad() {
     this.initGame();
   }
-  validate() {
-    var _a, _b;
-    this.validity = !this.required || isEqual((_a = this.value) === null || _a === void 0 ? void 0 : _a.map(v => v.length), (_b = this.answer) === null || _b === void 0 ? void 0 : _b.map(a => a.length));
-    this.validityChanged.emit(this.validity);
-    return this.validity;
-  }
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
   }
@@ -162,7 +154,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Read-only mode : true if displayed within a quiz summary"
+        "text": ""
       },
       "attribute": "readonly",
       "reflect": true,
@@ -180,29 +172,30 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "true if the component is loaded within the preview mode in the course-creator"
+        "text": ""
       },
       "attribute": "live-preview",
       "reflect": true
     },
-    "categories": {
+    "value": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
+        "original": "string[][]",
+        "resolved": "string[][]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Categories (2 required)"
-      }
+        "text": ""
+      },
+      "defaultValue": "null"
     },
-    "required": {
+    "validity": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -214,7 +207,7 @@ export class YooFormCategorizeWordsComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "required",
+      "attribute": "validity",
       "reflect": false
     },
     "answer": {
@@ -229,28 +222,27 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Expected answer. Consisting of 2 arrays (matching categories order),\neach one containing all expected values for given category"
+        "text": ""
       }
     },
-    "value": {
+    "categories": {
       "type": "unknown",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Value previously given by user, mostly used in read-only mode"
-      },
-      "defaultValue": "null"
+        "text": ""
+      }
     },
-    "validity": {
+    "required": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -260,9 +252,9 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Used by parent component (`yoo-form-dynamic`)"
+        "text": ""
       },
-      "attribute": "validity",
+      "attribute": "required",
       "reflect": false
     },
     "values": {
@@ -277,7 +269,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Poll of words to categorize"
+        "text": ""
       }
     },
     "isVisible": {
@@ -292,7 +284,7 @@ export class YooFormCategorizeWordsComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set to true when the component is in the current visible slide"
+        "text": ""
       },
       "attribute": "is-visible",
       "reflect": false

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

@@ -319,7 +319,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  height: 100%;
 }
 :host yoo-banner {
   width: 100%;
@@ -346,7 +345,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
 }
 :host .text {
-  margin-top: var(--spacing-08, 0.5rem);
+  margin: var(--spacing-08, 0.5rem) 0;
   text-align: center;
   cursor: pointer;
 }
@@ -366,25 +365,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--app-color, #5a30f4);
 }
 
-:host([animated]) {
-  --image-choice-animation-delay-start: 0.3s;
-  --image-choice-animation-delay-step: 0.1s;
-  --choice-index: 0;
-}
-:host([animated]) .image-container {
-  transform: translateY(42rem);
-  animation-name: "slide-in-from-bottom";
+:host([animated]:not([readonly])) {
+  --image-index: 0;
+}
+:host([animated]:not([readonly])) .image-container {
+  transform: scale(0);
+  animation-name: scale;
   animation-duration: 400ms;
   animation-timing-function: var(--ease-out-quad);
-  animation-delay: calc(var(--image-choice-animation-delay-start) + var(--choice-index) * var(--image-choice-animation-delay-step));
+  animation-delay: calc(0.5s + var(--image-index) * 0.1s);
   animation-fill-mode: forwards;
 }
-@keyframes slide-in-from-bottom {
+@keyframes scale {
   from {
-    transform: translateY(42rem);
+    transform: scale(0);
   }
   to {
-    transform: translateY(0);
+    transform: scale(1);
   }
 }
 

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

@@ -42,7 +42,7 @@ export class YooFormChoiceImageComponent {
     const noValidation = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length);
     const isCorrect = this.answer.includes(item);
     const onOpenImage = () => showSlidesMedia(this.host, { items: this.values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--choice-index': index.toString() } : {} },
+    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--image-index': index.toString() } : {} },
       h("div", { class: { content: true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
         h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(item, this) }),
         !readonly && [

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

@@ -107,7 +107,7 @@ export class YooFormChoiceRadioComponent {
     }
     return [
       this.choices &&
-        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), onChecked: (ev) => this.onItemSelectRadio(ev.detail), hideHeader: true, isLocal: true, useTranslate: this.useTranslate, animated: false, valuesColor: this.valuesColor }),
+        h("yoo-grid", { class: "choice radio-button-choice", blockSelectionMode: true, items: valuesEntity, initialSelection: initialEntity, keepSelection: true, multiple: this.multiple, displayType: "card-list", disableSingleDeselection: this.disableSingleDeselection, onSelected: (ev) => this.onItemSelectRadio(ev.detail), onChecked: (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), onBlur: () => this.isTextareaFocused = false, value: this.textareaValue, onInput: (ev) => this.onInput(ev), onFocus: () => this.onTextAreaFocused() }))
@@ -259,6 +259,23 @@ export class YooFormChoiceRadioComponent {
         "text": ""
       }
     },
+    "disableSingleDeselection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disable-single-deselection",
+      "reflect": false
+    },
     "livePreview": {
       "type": "boolean",
       "mutable": false,

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

@@ -437,6 +437,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-04, 0.25rem);
   transition: height 750ms ease-in-out;
 }
+:host main[style*=height] {
+  overflow: hidden auto;
+}
 :host main.overflowing {
   overflow: hidden auto;
 }

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

@@ -87,18 +87,9 @@ export class YooFormConnectComponent {
     var _a;
     const GAP_PADDING = 8;
     const scrollElement = this.host.closest('yoo-ion-scroll');
-    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && scrollElement.scrollHeight > scrollElement.clientHeight) {
-      const setScrollableHeight = () => {
-        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
-        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
-        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
-        if (formHeight && tileHeight && !this.readonly) {
-          const numberItems = Math.max(this.values[0].length, this.values[1].length);
-          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
-          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
-          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight) - GAP_PADDING * 10}px`;
-        }
-      };
+    const formHeight = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.offsetHeight;
+    const fittedHeight = (this.draggableElements.reduce((acc, el) => (acc += (el.clientHeight + GAP_PADDING)), 0) + GAP_PADDING);
+    if (formHeight && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && fittedHeight > formHeight) {
       await new Promise(resolve => {
         setTimeout(() => {
           scrollElement.scrollTo({
@@ -108,7 +99,7 @@ export class YooFormConnectComponent {
           resolve();
         }, 1000);
       });
-      setScrollableHeight();
+      this.innerContainerElement.style.height = `${formHeight - GAP_PADDING * 2}px`;
     }
   }
   setDraggableObserver() {