@yoobic/yobi 8.2.0-30 → 8.2.0-33

package/dist/cjs/yoo-truncate.cjs.entry.js

@@ -43,6 +43,7 @@ const YooTruncateComponent = class {
      * Used more icon instead of text as ellipsis button.
      */
     this.showEllipsisIcon = false;
+    this.ellipsisIconSize = 'small';
     /**
      * Alters how the <br> tag is handled for markdown
      */
@@ -64,7 +65,7 @@ const YooTruncateComponent = class {
       return `<span class="more-button"> ${this.collapsed ? `... ${index$1.translate('MORE2')}` : index$1.translate('VIEWLESS')}</span>`;
     };
     this.getMoreIconHtml = () => {
-      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="small" /></span>`;
+      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="${this.ellipsisIconSize}" /></span>`;
     };
   }
   onShowEllipsisButtonChanged() {

package/dist/collection/components/1.atoms/truncate/truncate.js

@@ -1,7 +1,3 @@
-/**
- * @name: Truncate
- * @author: Romain Panaget
- */
 import { debounce, parseMarkDown, translate, truncateMarkdown } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
@@ -35,6 +31,7 @@ export class YooTruncateComponent {
      * Used more icon instead of text as ellipsis button.
      */
     this.showEllipsisIcon = false;
+    this.ellipsisIconSize = 'small';
     /**
      * Alters how the <br> tag is handled for markdown
      */
@@ -56,7 +53,7 @@ export class YooTruncateComponent {
       return `<span class="more-button"> ${this.collapsed ? `... ${translate('MORE2')}` : translate('VIEWLESS')}</span>`;
     };
     this.getMoreIconHtml = () => {
-      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="small" /></span>`;
+      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="${this.ellipsisIconSize}" /></span>`;
     };
   }
   onShowEllipsisButtonChanged() {
@@ -253,6 +250,29 @@ export class YooTruncateComponent {
       "reflect": true,
       "defaultValue": "false"
     },
+    "ellipsisIconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TSize",
+        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+        "references": {
+          "TSize": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "ellipsis-icon-size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
     "content": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/2.molecules/profile-list/profile-list.js

@@ -121,10 +121,11 @@ export class YooProfileListComponent {
     }
   }
   renderTruncate(content, icon) {
+    const charLength = isWeb(this.host) ? 83 : 38;
     return (h("div", { class: "user-info-list" },
       h("div", { class: "start-container" },
         h("yoo-icon", { name: icon, color: "dark" }),
-        h("yoo-truncated-line", { content: content }))));
+        h("yoo-truncate", { content: content, maxLength: charLength, showEllipsisIcon: true, ellipsisIconSize: "medium" }))));
   }
   renderCollapsible(header, content) {
     return (h("yoo-collapsible", { hasArrowIcon: !!content.length, icon: "tag", iconColor: "dark", iconSize: "medium", slotHeader: true },

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

@@ -1,7 +1,7 @@
 import { isChromatic, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { setColorSVG } from '../../../../utils/helpers/common-helpers';
-import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
+import { hasWarnings, isSelected, onItemSelect, prepareChoice } from '../form-choice-helpers';
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceCardComponent {
   constructor() {
@@ -13,12 +13,6 @@ export class YooFormChoiceCardComponent {
     this.imgElements = [];
     this.choices = [];
   }
-  onValuesChanged(newValues, oldValues) {
-    updateValues(newValues, oldValues, this);
-  }
-  onValueChanged(newValue, oldValue) {
-    updateValue(newValue, oldValue, this);
-  }
   componentWillLoad() {
     var _a;
     prepareChoice(this);
@@ -60,7 +54,10 @@ export class YooFormChoiceCardComponent {
     return h("yoo-icon", { name: "check" });
   }
   renderSelect(item, index) {
-    const selected = isSelected(item.value || item.title, this.selection);
+    const selected = ((isSelected('true', this.selection) && index === 0) ||
+      (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 &&
@@ -424,11 +421,4 @@ export class YooFormChoiceCardComponent {
       }
     }]; }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
-      "propName": "value",
-      "methodName": "onValueChanged"
-    }]; }
 }

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

@@ -2490,6 +2490,9 @@ span.fr-img-caption.fr-view {
     page-break-before: avoid;
     page-break-inside: avoid;
   }
+  :host .inputs-container yoo-form-input-container.image {
+    --label-padding-top: 0 !important;
+  }
   :host .inputs-container yoo-form-capture {
     display: block;
     page-break-after: avoid;

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

@@ -3,6 +3,7 @@ import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } f
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
+import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormHotzonesComponent {
   constructor() {
@@ -17,6 +18,9 @@ export class YooFormHotzonesComponent {
     !this.imageSrc && forceUpdate(this);
     this.init();
   }
+  onHotzonesChanged() {
+    showWarningAlert(this.host, !!this.hotzones.find(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
+  }
   onIsVisibleChanged() {
     if (this.isVisible) {
       this.flipImage = true;
@@ -82,27 +86,26 @@ export class YooFormHotzonesComponent {
     return getMedia((await getFromOfflineStorage(this.image)), { forceCookieUrlParam: true });
   }
   async showZoneDetails(hotzone) {
+    var _a, _b, _c, _d;
     const { description, image } = hotzone || {};
     if (description || image) {
       await showModal('yoo-form-hotzones', { detailedView: true, selectedHotspot: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
       hotzone.revealed = true;
-      this.validity = this.hotzones.filter(h => h.revealed).length === this.hotzones.length;
-      !this.validity && forceUpdate(this);
     }
+    this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
+    !this.validity && forceUpdate(this);
   }
   renderZones() {
     var _a;
     return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {
-      const { x, y } = hotzone.style || {};
-      return h("div", { class: {
-          hotzone: true,
-          revealed: hotzone.revealed,
-          hidden: !this.readonly && this.isHotZones
-        }, style: {
+      const { style, revealed, description, image } = hotzone || {};
+      const { x, y } = style || {};
+      const isValid = !!(description || image);
+      return isValid && h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
           left: x,
           top: y,
           ...hotzone.style,
-          ...(!hotzone.revealed && !this.readonly && {
+          ...(!revealed && !this.readonly && {
             backgroundColor: this.hotzonesColor + '66',
             borderColor: this.hotzonesColor
           })
@@ -155,8 +158,14 @@ export class YooFormHotzonesComponent {
           this.renderZones()),
         h("section", { class: "flip-box-back" })));
   }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
+  }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
+    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } },
+      this.renderBanner(),
+      this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
   }
   static get is() { return "yoo-form-hotzones"; }
   static get encapsulation() { return "shadow"; }
@@ -427,6 +436,9 @@ export class YooFormHotzonesComponent {
   static get watchers() { return [{
       "propName": "image",
       "methodName": "onImageChanged"
+    }, {
+      "propName": "hotzones",
+      "methodName": "onHotzonesChanged"
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"

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

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  display: block;
   width: 100%;
 }
 :host #gallery {
@@ -277,6 +278,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web) .main-container .button {
   margin: auto;
+  padding: var(--spacing-16, 1rem);
 }
 
 :host([detailed-view]) {

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

@@ -30,7 +30,7 @@ export class YooFormImageCollectionComponent {
     openImageDetailFromRTE(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
   }
   async imageClicked(imagePair, index) {
-    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
     if (!this.images[index].revealed) {
       this.imagesRevealed += 1;
       this.images[index].revealed = true;

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

@@ -135,12 +135,12 @@ export class YooFormImageTaggingComponent {
       h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return h("yoo-banner", null,
+    return this.livePreview && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } },
-      this.livePreview && this.renderBanner(),
+      this.renderBanner(),
       this.renderImageContainer(),
       !this.readonly && this.renderInstruction(),
       !this.readonly && this.renderTagsZone()));

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

@@ -86,6 +86,7 @@ export class YooFormCreatorComponent {
     this.restrictionConditionSelectedTab = 0;
     this.expandedConditions = [];
     this.isPageReordering = false;
+    this.pagesReordered = false;
     this.onInsertPageAfterClicked = (event) => {
       if (event) {
         this.onAddNewPage(event.detail + 1);
@@ -104,12 +105,14 @@ export class YooFormCreatorComponent {
         this.removeOverlays();
       }
       else {
-        this.selectedPageIndex = event.detail;
-        this.pageHeaderClicked.emit(event.detail);
-        this.hasPageChanged = event.detail;
-        this.resetExpandableBlockReferences();
+        this.selectPage(event.detail);
+        this.pagesReordered = false;
       }
     };
+    this.onPageOrderChanged = (event) => {
+      this.selectPage(event.detail.indexTo);
+      this.pagesReordered = true;
+    };
     this.onDuplicatePageClicked = (event) => {
       var _a, _b, _c, _d;
       if (event) {
@@ -353,7 +356,12 @@ export class YooFormCreatorComponent {
           });
           this.currentExpandedBlockLocation = { slideIndex, itemIndex };
           this.expandedFieldName = event.detail.name || this.expandedFieldName;
-          this.scrollToField(itemIndex);
+          if (!this.pagesReordered) {
+            this.scrollToField(itemIndex);
+          }
+          else {
+            this.pagesReordered = false;
+          }
         }
         else if (!event.detail.expanded && this.currentExpandedBlockLocation && itemIndex === this.currentExpandedBlockLocation.itemIndex) {
           this.currentExpandedBlockLocation = null;
@@ -945,6 +953,12 @@ export class YooFormCreatorComponent {
     }
     this.shouldRenderLeftSelectionContent = true;
   }
+  selectPage(pageIndex) {
+    this.selectedPageIndex = pageIndex;
+    this.pageHeaderClicked.emit(pageIndex);
+    this.hasPageChanged = pageIndex;
+    this.resetExpandableBlockReferences();
+  }
   updateGlobalActions() {
     this.selectedMoveActions = setBlockSelection(this.itemList, null, (slideIndex, _itemIndex, itemId) => this.moveSelectedFields(itemId, slideIndex), {
       extraStartingItems: [
@@ -2126,7 +2140,7 @@ export class YooFormCreatorComponent {
         }
       ], iconPairLeft: ARROW_PAIR, showBottomBorder: true, forceEntryUpdate: true, allowMultipleSelection: true, onAccordionSelected: (event) => this.onPagesAccordionSelected(event) },
       h("div", { slot: "PAGES" },
-        h("yoo-form-creator-page-card-list", { scoringMode: isScoring(this.selectedLeftMenuOption) ? this.selectedScoring : null, missionSlides: this.currentSlides, selectedPageIndex: this.selectedPageIndex, onPageClicked: this.onPageClicked, onDuplicatePageClicked: this.onDuplicatePageClicked, onInsertPageAfterClicked: this.onInsertPageAfterClicked, onDeletePageClicked: this.onDeletePageClicked, onEditPageClicked: this.onEditPageClicked, onAddSiteTagRestrictionClicked: this.onAddSiteTagRestrictionClicked, onAddUserGroupRestrictionClicked: this.onAddUserGroupRestrictionClicked, onReorderEnded: () => {
+        h("yoo-form-creator-page-card-list", { scoringMode: isScoring(this.selectedLeftMenuOption) ? this.selectedScoring : null, missionSlides: this.currentSlides, selectedPageIndex: this.selectedPageIndex, onPageClicked: this.onPageClicked, onDuplicatePageClicked: this.onDuplicatePageClicked, onInsertPageAfterClicked: this.onInsertPageAfterClicked, onDeletePageClicked: this.onDeletePageClicked, onEditPageClicked: this.onEditPageClicked, onAddSiteTagRestrictionClicked: this.onAddSiteTagRestrictionClicked, onAddUserGroupRestrictionClicked: this.onAddUserGroupRestrictionClicked, onPageOrderChanged: this.onPageOrderChanged, onReorderEnded: () => {
             this.isPageReordering = false;
           }, onReorderStarted: () => {
             this.isPageReordering = true;
@@ -2324,7 +2338,7 @@ export class YooFormCreatorComponent {
   }
   renderLivePreview() {
     var _a;
-    return (h("yoo-form-creator-live-preview", { ref: (el) => (this.livePreviewElement = el), mode: "panel", showShare: this.showShare, onShared: (ev) => { ev.stopPropagation(); this.shared.emit(); }, hidden: this.isLivePreviewHidden, showDevices: false, missionDescriptionTitle: this.missDescDisplayTitle, onVisibilityToggled: () => (this.isLivePreviewHidden = !this.isLivePreviewHidden), availableLanguages: ((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) ? [...this.selectedLanguages, this.baseLanguage] : [], selectedLanguage: this.baseLanguage, onLanguageChanged: (ev) => this.onDisplayLanguageChanged(ev) },
+    return (h("yoo-form-creator-live-preview", { ref: (el) => (this.livePreviewElement = el), mode: "panel", showShare: this.showShare, onShared: (ev) => { ev.stopPropagation(); this.shared.emit(); }, hidden: this.isLivePreviewHidden, showDevices: false, missionDescriptionTitle: this.missDescDisplayTitle, onVisibilityToggled: () => (this.isLivePreviewHidden = !this.isLivePreviewHidden), availableLanguages: ((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) ? [...this.selectedLanguages, this.baseLanguage] : [], selectedLanguage: this.displayLanguage ? this.displayLanguage : this.baseLanguage, onLanguageChanged: (ev) => this.onDisplayLanguageChanged(ev) },
       h("div", { class: "slot-container", slot: "livePreview" },
         h("slot", { name: "livePreview" }))));
   }

package/dist/collection/components/form-creator/form-creator-card-list/page/form-creator-page-card-list.js

@@ -101,7 +101,6 @@ export class YooFormCreatorPageCardListComponent {
       const indexSlideTo = sortEvent.indexTo - 1 >= 0 ? sortEvent.indexTo - 1 : 0;
       this.pageOrderChanged.emit(sortEvent);
       this.pageCardsParentEl.slideTo(indexSlideTo);
-      this.pageClicked.emit(sortEvent.indexTo);
     };
   }
   renderPageCards() {

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -287,7 +287,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: var(--spacing-56, 3.5rem);
   margin: var(--spacing-08, 0.5rem) 0;
   font-size: var(--font-size-12, 0.75rem);
 }