@yoobic/yobi 8.4.0-2 → 8.4.0-3

package/dist/collection/feature-communicate/feed/card-feed/components/sub-cards.js

@@ -1,5 +1,5 @@
 import { EventType } from '@shared/interfaces';
-import { dateFormat, getCssColor, replaceAllLinks, translate, translateMulti } from '@shared/utils';
+import { dateFormat, getCssColor, isCampaignFeed, replaceAllLinks, translate, translateMulti } from '@shared/utils';
 import { h } from '@stencil/core';
 import { cloneDeep } from 'lodash-es';
 import { execHandlerAndStopEvent } from '../../../../utils/helpers/common-helpers';
@@ -7,7 +7,7 @@ import { EventAttendance } from './events';
 export const CardAnnouncement = ({ configs }) => {
   const announcementMission = cloneDeep(configs.missionDescription);
   announcementMission.description = announcementMission; // needed to display some infos into the mission-todo-page component, as it gets them from the description of the mission
-  return (h("yoo-announcement-heading", { announcement: announcementMission, viewAllHandler: configs.viewAllHandler, layout: "feed" }));
+  return (h("yoo-announcement-heading", { class: { 'overlay': isCampaignFeed(announcementMission) }, announcement: announcementMission, viewAllHandler: configs.viewAllHandler, layout: "feed" }));
 };
 export const CardCampaign = ({ configs }) => {
   return (h("div", { class: "campaign-container" },

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -1,4 +1,4 @@
-import { closeModal, getAsyncExtraData, getPermissions, getSession, getUserDisplayName, hasAttachment, intersectionObserve, isCampaignAnnouncement, isFieldWithNoValue, isIntersectionObserverSupported, isMedia, isNullOrUndefined, isVideo, isWeb, parseMarkDown, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, setSecuredContent, showActionSheet, translate, translateMulti } from '@shared/utils';
+import { closeModal, getAsyncExtraData, getPermissions, getSession, getUserDisplayName, hasAttachment, intersectionObserve, isCampaignFeed, isCampaignTodo, isFieldWithNoValue, isIntersectionObserverSupported, isMedia, isNullOrUndefined, isVideo, isWeb, parseMarkDown, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, setSecuredContent, showActionSheet, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { isEmpty } from 'lodash-es';
 import { getButton } from '../../../../utils/button.factory';
@@ -665,7 +665,7 @@ export class YooCardFeedComponent {
    * view using css (flex order) because re-render of the component will cause the component to flicker
    */
   renderDynamic(item) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (!item) {
       return null;
     }
@@ -711,7 +711,7 @@ export class YooCardFeedComponent {
       case 'shared-event':
         return this.entry.eventConfigs && this.renderSharedEvent(this.entry.eventConfigs);
       case 'shared-campaign': {
-        const isAnnouncement = isCampaignAnnouncement((_f = this.entry.campaignConfigs) === null || _f === void 0 ? void 0 : _f.missionDescription);
+        const isAnnouncement = isCampaignTodo((_f = this.entry.campaignConfigs) === null || _f === void 0 ? void 0 : _f.missionDescription) || isCampaignFeed((_g = this.entry.campaignConfigs) === null || _g === void 0 ? void 0 : _g.missionDescription);
         return this.entry.campaignConfigs && (isAnnouncement ? this.renderCardAnnouncement() : this.renderCardCampaign());
       }
       case 'shared-incentive':

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

@@ -324,7 +324,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-04, 0.25rem) 0;
 }
 :host .answers {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  padding: var(--spacing-08, 0.5rem) 0;
 }
 :host .answers .title {
   padding-bottom: var(--spacing-08, 0.5rem);
@@ -346,6 +346,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.mobile) main {
   margin-top: var(--safe-area-inset-top);
 }
-:host(.mobile) main > * {
+:host(.mobile) main > *:not(.answers) {
   text-align: center;
 }

package/dist/collection/feature-operate/campaign/card-campaign/card-campaign.js

@@ -26,13 +26,20 @@ export class YooCardCampaignComponent {
     return this.keepUndefinedValues && !isPresent(this[kpiName]);
   }
   get kpis() {
-    const kpis = compact([
-      (isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations') ? { title: translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
-      (isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users') ? { title: translate('USERS'), type: 'number', value: this.users } : undefined,
-      (isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed') ? { title: translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
-      (isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available') ? { title: translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
-      (isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion') ? { title: translate('COMPLETION'), type: 'percent', value: isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
-      (isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance') ? { title: translate('COMPLIANCE'), type: 'percent', value: isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
+    const kpis = !this.isFeed ? compact([
+      ((isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations')) ? { title: translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
+      ((isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users')) ? { title: translate('USERS'), type: 'number', value: this.users } : undefined,
+      ((isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed')) ? { title: translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
+      ((isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available')) ? { title: translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
+      ((isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion')) ? { title: translate('COMPLETION'), type: 'percent', value: isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
+      ((isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance')) ? { title: translate('COMPLIANCE'), type: 'percent', value: isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
+      ...this.extraKpis || []
+    ]) : compact([
+      ((isPresent(this.views) && this.views >= 0) || this.keepUndefinedKpi('views')) ? { title: translate('VIEWS'), type: 'number', value: this.views } : undefined,
+      ((isPresent(this.likes) && this.likes >= 0) || this.keepUndefinedKpi('likes')) ? { title: translate('LIKES'), type: 'number', value: this.likes } : undefined,
+      ((isPresent(this.comments) && this.comments >= 0) || this.keepUndefinedKpi('comments')) ? { title: translate('NUMBEROFCOMMENTS'), type: 'number', value: this.comments } : undefined,
+      ((isPresent(this.reposts) && this.reposts >= 0) || this.keepUndefinedKpi('reposts')) ? { title: translate('YOOBICNUMBEROFREPOSTS'), type: 'number', value: this.reposts } : undefined,
+      ((isPresent(this.audienceShare) && this.audienceShare >= 0) || this.keepUndefinedKpi('audienceShare')) ? { title: translate('YOOBICAUDIENCESHARE'), type: 'percent', value: isPresent(this.audienceShare) ? +(this.audienceShare * 100).toFixed(0) : undefined } : undefined,
       ...this.extraKpis || []
     ]);
     if (this.keepUndefinedValues) {
@@ -321,6 +328,108 @@ export class YooCardCampaignComponent {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isFeed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-feed",
+      "reflect": false
+    },
+    "views": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "views",
+      "reflect": false
+    },
+    "likes": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "likes",
+      "reflect": false
+    },
+    "comments": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "comments",
+      "reflect": false
+    },
+    "reposts": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reposts",
+      "reflect": false
+    },
+    "audienceShare": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "audience-share",
+      "reflect": false
+    },
     "keepUndefinedValues": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -133,7 +133,7 @@ export class YooDetailBarComponent {
       h("div", { class: "section-title" },
         translate('YOOBICGENERAL'),
         this.isArchived && h("yoo-tag", { color: "dark", size: "small" }, translate('PAUSEDCAMPAIGN'))),
-      this.type !== 'todo' && h("div", { class: "sub-section" },
+      this.type !== 'todo' && this.type !== 'feed' && h("div", { class: "sub-section" },
         h("div", null, (_a = this.slides) === null || _a === void 0 ? void 0 :
           _a.length,
           " ",
@@ -148,7 +148,7 @@ export class YooDetailBarComponent {
           " ",
           translate('YOOBICFIELDS')))),
       h("div", { class: "action-container" },
-        h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
+        this.type !== 'feed' && h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
           h("yoo-icon", { slot: "start", name: "play", size: "small" }),
           translate('PREVIEW')),
         this.isCourse && (h("yoo-button", { color: "light", size: "small", onClick: () => this.onSharePreview() },
@@ -167,7 +167,7 @@ export class YooDetailBarComponent {
       this.image && (h("div", { class: "sub-section" },
         h("yoo-img", { src: this.image }))),
       this.description && this.renderTruncateContent('DESCRIPTION', this.description),
-      this.type && this.renderContent('YOOBICTYPE', translate((this.type === 'todo' ? 'CAMPAIGN' : '') + ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toUpperCase()))),
+      this.type && this.renderContent('YOOBICTYPE', translate((this.type === 'todo' || this.type === 'feed' ? 'CAMPAIGN' : '') + ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toUpperCase()))),
       this.type === 'mission' && this.campaign.recurrenceType && this.renderContent('RECURRENCE', translate('CAMPAIGN' + this.campaign.recurrenceType.toUpperCase())),
       this.renderLanguage(),
       this.renderTeamsAndRoles('teams'),
@@ -191,7 +191,7 @@ export class YooDetailBarComponent {
       this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YOOBICYES' : 'YOOBICNO') : '-'),
       this.period && this.period !== '-' && this.renderContent('PERIOD', this.period),
       this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YOOBICYES' : 'YOOBICNO'),
-      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
+      this.progressiveLessons !== null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
       this.category && this.renderContent('CATEGORY', this.category),
       havePoints &&
         this.renderContent('POINTS', h("yoo-tag", { color: "app-color" },

package/dist/collection/feature-operate/campaign/helpers/operation-helpers.js

@@ -22,7 +22,13 @@ export function getCampaignTemplateTags(template) {
       iconOnlySize: 'medium'
     });
   }
-  if ((_a = template.type) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
+  if (template.type === 'feed') {
+    retVal.push({
+      innerHTML: translate('CAMPAIGNFEED'),
+      color: template.active ? 'warning' : 'warning-10'
+    });
+  }
+  else if ((_a = template.type) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
     retVal.push({
       innerHTML: translate(template.type === 'todo' ? 'CAMPAIGNTODO' : template.type.toUpperCase()),
       color: template.active ? 'app-color-10' : 'text-color-10'
@@ -346,7 +352,19 @@ export function getCampaignStateTags(campaign, removeStats) {
       iconOnlySize: 'medium'
     });
   }
-  if ((_b = campaign.type) === null || _b === void 0 ? void 0 : _b.toUpperCase) {
+  if (campaign.type === 'feed') {
+    retVal.push({
+      innerHTML: translate('CAMPAIGNFEED'),
+      color: campaign.active ? 'warning' : 'warning-10'
+    });
+    if ((campaign === null || campaign === void 0 ? void 0 : campaign.originalRef) || (campaign === null || campaign === void 0 ? void 0 : campaign.parentRef)) {
+      retVal.push({
+        innerHTML: translate('FORWARD'),
+        color: 'dark'
+      });
+    }
+  }
+  else if ((_b = campaign.type) === null || _b === void 0 ? void 0 : _b.toUpperCase) {
     retVal.push({
       innerHTML: translate(campaign.type === 'todo' ? 'CAMPAIGNTODO' : campaign.type.toUpperCase()),
       color: campaign.active ? 'app-color-10' : 'text-color-10'

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -213,6 +213,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16, 1rem);
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
   color: var(--announcement-color);
   background-color: var(--announcement-background-color);
@@ -290,7 +291,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-16, 1rem);
   background-color: var(--announcement-color);
 }
+:host(.feed) .description {
+  padding-top: var(--spacing-16, 1rem);
+}
 
 :host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar {
   --svg-width: 1.5rem;
+}
+
+:host(.overlay) .outer-container {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 11%, var(--dark-60, rgba(0, 0, 0, 0.6)));
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -12,6 +12,10 @@ export class YooAnnouncementHeadingComponent {
     var _a;
     return getCssColor(((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.backgroundColor) || 'stable-light');
   }
+  get isFeed() {
+    var _a;
+    return ((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.type) === 'feed';
+  }
   get color() {
     var _a;
     return getCssColor(((_a = this.getAnnouncement()) === null || _a === void 0 ? void 0 : _a.color) || 'dark');
@@ -99,7 +103,7 @@ export class YooAnnouncementHeadingComponent {
   renderContent() {
     const dueDate = getMissionDueDate(this.announcement);
     return (h("div", { class: "outer-container" },
-      this.isLayoutFeed && this.renderTag(translate('ANNOUNCEMENT'), 'request', this.color, getCssColor('light'), 1),
+      this.isLayoutFeed && this.renderTag(translate(this.isFeed ? 'YOOBICMESSAGES' : 'ANNOUNCEMENT'), 'request', this.color, getCssColor('light'), 1),
       this.isLayoutFeed && h("div", { class: "details" }, this.renderContentDetails()),
       !this.isLayoutFeed && this.renderContentDetails(),
       !this.isLayoutFeed && dueDate && [

package/dist/collection/feature-operate/mission/workflow-state/workflow-state.js

@@ -12,7 +12,7 @@ export class YooWorkflowStateComponent {
       } },
       h("div", { class: "header" },
         h("div", { class: "title" }, translateMulti(step.title)),
-        (isActive || (history === null || history === void 0 ? void 0 : history.state)) && h("div", { class: "detail" }, translate('DETAILS'))),
+        (isActive || (history === null || history === void 0 ? void 0 : history.state)) && h("div", { class: "detail" }, translate('YOOBICDETAILS'))),
       step.type === 'parallel' &&
         (
         // this.state?.stepId === step._id &&

package/dist/collection/feature-operate/waitlist/waitlist-location-start/waitlist-location-start.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */

package/dist/collection/feature-platform/app/app/app.js

@@ -83,7 +83,7 @@ export class YooAppComponent {
       "mutable": false,
       "complexType": {
         "original": "IAppPermissions",
-        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
+        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
         "references": {
           "IAppPermissions": {
             "location": "import",

package/dist/collection/utils/draggables/tags.js

@@ -1,23 +1,15 @@
-import { Draggable, findParent, getUUID, gsapFromTo, gsapSet, gsapTo, isWeb, translateMulti } from '@shared/utils';
+import { Draggable, getUUID, gsapFromTo, gsapSet, gsapTo, translateMulti } from '@shared/utils';
 import { isEqual } from 'lodash-es';
-import { getDeletedValues, getNewValue, hasDuplicates } from '../helpers/draggable-tags-helpers';
+import { getDeletedValues, getNewValue, hasDuplicates, prepareAutoScroll } from '../helpers/draggable-tags-helpers';
 import { Dropzones } from './zones';
 export class Tag {
   constructor(config, value, zone, zonesConfig) {
-    var _a, _b;
     this.config = config;
     this.value = value;
     this.zone = zone;
     this.zonesConfig = zonesConfig;
     this.id = getUUID();
-    this.lastZone = this.zone;
-    if ((_a = this.zone) === null || _a === void 0 ? void 0 : _a.element.id) {
-      this.element = this.createTagElement();
-      this.initDraggable();
-      if ((_b = this.zone.tagsId) === null || _b === void 0 ? void 0 : _b.includes(this.id)) {
-        this.zone.tagsId.push(this.id);
-      }
-    }
+    this.initTag();
   }
   get zones() {
     return Dropzones.getZones(this.zonesConfig);
@@ -28,13 +20,24 @@ export class Tag {
   isTagOverlapping(zone) {
     return Draggable.hitTest(this.element, zone.element, zone.config.threshold || 0);
   }
+  initTag() {
+    this.lastZone = this.zone;
+    const { element, tagsId } = this.zone || {};
+    if (element.id) {
+      this.element = this.createTagElement();
+      this.initDraggable();
+      this.release();
+      if (tagsId === null || tagsId === void 0 ? void 0 : tagsId.includes(this.id)) {
+        tagsId.push(this.id);
+      }
+    }
+  }
   createTagElement() {
     const { getColorTag, extraTagsClasses } = this.config;
-    const { isTagsZone, element } = this.zone;
     const tagElement = document.createElement('yoo-tag');
     extraTagsClasses && tagElement.classList.add(extraTagsClasses);
-    !isTagsZone && tagElement.classList.add('dropped');
-    Object.assign(tagElement, {
+    !this.zone.isTagsZone && tagElement.classList.add('dropped');
+    return Object.assign(tagElement, {
       id: this.id,
       key: this.id,
       innerHTML: translateMulti(this.value),
@@ -42,14 +45,17 @@ export class Tag {
       darkTheme: false,
       color: getColorTag(this.value, this.zone.index)
     });
-    element[isTagsZone ? 'prepend' : 'appendChild'](tagElement);
-    if (!isTagsZone) {
-      element.classList.add('has-tag');
-    }
-    if (this.zone.isDropZoneFull) {
-      element.classList.add('completed');
+  }
+  get droppedTagXPosition() {
+    const hostWidth = this.zonesConfig.hostElement.offsetWidth;
+    const tagWidth = this.element.offsetWidth;
+    const { offsetLeft, offsetWidth } = this.zone.element;
+    const zoneOffset = Math.min(offsetLeft, hostWidth - offsetLeft - offsetWidth);
+    if (this.config.dragAndScroll && !this.zone.isTagsZone && zoneOffset < tagWidth / 2 - offsetWidth / 2) {
+      const isLeft = offsetLeft < hostWidth * .5;
+      return (tagWidth / 2 - (zoneOffset + offsetWidth / 2)) * (isLeft ? 1 : -1);
     }
-    return tagElement;
+    return 0;
   }
   initDraggable() {
     const { hostElement } = this.zonesConfig;
@@ -86,9 +92,7 @@ export class Tag {
           if (zone === null || zone === void 0 ? void 0 : zone.element) {
             if (this.isTagOverlapping(zone) && !zone.isDropZoneFull) {
               this.element.color = this.config.getColorTag(this.value, zone.index);
-              if (!zone.element.hasAttribute('hit') && zone.id !== this.zone.id) {
-                zone.element.setAttribute('hit', 'true');
-              }
+              zone.element.setAttribute('hit', 'true');
             }
             else if (!this.isTagOverlapping(zone)) {
               zone.element.removeAttribute('hit');
@@ -104,19 +108,16 @@ export class Tag {
     });
   }
   addToZone(zone) {
-    const { tagsId, element, isDropZoneFull, isTagsZone, index } = zone || this.zone || {};
+    zone = zone || this.zone;
+    const { tagsId, element, isDropZoneFull, isTagsZone, index } = zone || {};
     const tagColor = this.config.getColorTag(this.value, index);
     if (this.element && element && !isDropZoneFull && !tagsId.includes(this.id)) {
       tagsId.unshift(this.id);
       if (!element.contains(this.element)) {
         element[isTagsZone ? 'prepend' : 'appendChild'](this.element);
         if (!isTagsZone) {
-          if (!element.classList.contains('has-tag') && (zone || this.zone).tagsCount > 0) {
-            element.classList.add('has-tag');
-          }
-          if ((zone || this.zone).isDropZoneFull) {
-            !element.classList.contains('completed') && element.classList.add('completed');
-          }
+          element.classList.toggle('has-tag', zone.tagsCount > 0);
+          element.classList.toggle('completed', zone.isDropZoneFull);
         }
       }
     }
@@ -169,7 +170,8 @@ export class Tag {
     this.zones
       .map(z => z.element)
       .forEach(e => !e.firstChild && e.classList.remove('has-tag'));
-    gsapSet(this.element, { x: 0, y: 0 });
+    await this.element.componentOnReady();
+    gsapSet(this.element, { x: this.droppedTagXPosition, y: 0 });
     Tag.scaleUpDown(this.element);
   }
 }
@@ -204,7 +206,7 @@ export class Tags extends Dropzones {
         element.color = 'danger';
         await Tag.scaleUpDown(element);
         zone.element.removeChild(element);
-        this.tags = this.tags.filter(t => t.id !== tag.id);
+        this.tags = this.tags.filter(({ id }) => id !== tag.id);
       }
       (_c = (_b = this.tagConfig).onTagDeleted) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
@@ -229,31 +231,22 @@ export class Tags extends Dropzones {
     hasDeletedValue && (deletedValues = getDeletedValues(oldValues, newValues));
     this.zonesConfig.tagZoneConfig.hasOverflow && (this.tagsZone.element.style.overflow = 'hidden');
     if (newValue) {
-      this.addTagFromValue(newValue);
+      await this.addTagFromValue(newValue);
     }
     else if (deletedValues === null || deletedValues === void 0 ? void 0 : deletedValues.length) {
-      deletedValues.forEach(v => this.deleteTagFromValue(v));
+      await Promise.all(deletedValues.map(v => this.deleteTagFromValue(v)));
     }
-    else if ((newValues === null || newValues === void 0 ? void 0 : newValues.length) === (oldValues === null || oldValues === void 0 ? void 0 : oldValues.length) && !isEqual(newValues, oldValues) && !hasDuplicates(newValues)) {
-      oldValues.forEach((ov, i) => {
-        var _a;
-        const tag = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.find(t => t.value === ov);
-        const newValue = newValues[i];
-        if ((tag === null || tag === void 0 ? void 0 : tag.value) !== newValue) {
-          tag.element.color = 'warning';
-          tag.element.textContent = newValue;
-          tag.value = newValue;
-          Tag.scaleUpDown(tag.element).then(() => {
-            tag.element.color = this.tagConfig.getColorTag(newValue, tag.zone.index);
-          });
-        }
-      });
+    else if ((newValues === null || newValues === void 0 ? void 0 : newValues.length) === (oldValues === null || oldValues === void 0 ? void 0 : oldValues.length) && !isEqual(newValues, oldValues) && !hasDuplicatedValues) {
+      oldValues.forEach((value) => this.deleteTagFromValue(value));
+      await Promise.all(newValues.map((value) => this.addTagFromValue(value)));
     }
     else if (hasDuplicatedValues) {
       const formateValues = (values) => (values === null || values === void 0 ? void 0 : values.filter((e, i, a) => a.indexOf(e) === i)) || [];
-      await Promise.all(formateValues(oldValues).map(v => this.deleteTagFromValue(v)));
-      formateValues(newValues).forEach(v => this.addTagFromValue(v));
+      formateValues(oldValues).forEach(v => this.deleteTagFromValue(v));
+      await Promise.all(formateValues(newValues).map(v => this.addTagFromValue(v)));
     }
+    this.checkOverflowingTags();
+    return this;
   }
   getElements(selector, containerElement) {
     var _a;
@@ -269,7 +262,7 @@ export class Tags extends Dropzones {
       var _a;
       if ((_a = zone === null || zone === void 0 ? void 0 : zone.config) === null || _a === void 0 ? void 0 : _a.hasOverflow) {
         zone.isTagsZone && (zone.element.style.removeProperty('overflow'));
-        this.hideOverflowingTagsInZone(zone.element, (te) => Tag.scaleUpDown(te));
+        this.hideOverflowingTagsInZone(zone.element, (tagElement) => Tag.scaleUpDown(tagElement));
       }
     });
   }
@@ -280,19 +273,6 @@ export class Tags extends Dropzones {
       await this.animate();
     }
   }
-  static prepareAutoScroll(hostElement) {
-    if ((hostElement === null || hostElement === void 0 ? void 0 : hostElement.shadowRoot) && isWeb() && !(hostElement === null || hostElement === void 0 ? void 0 : hostElement['readonly'])) {
-      const wrapperElement = findParent(hostElement, 'yoo-form-input-container');
-      const mainElement = hostElement.shadowRoot.querySelector('main');
-      if (wrapperElement && mainElement) {
-        const { height } = wrapperElement.getBoundingClientRect();
-        height && Object.assign(mainElement.style, {
-          maxHeight: `${Math.floor(height - 16) - 32}px`,
-          overflowY: 'auto'
-        });
-      }
-    }
-  }
   populate() {
     var _a, _b, _c, _d, _e, _f;
     const userAnswers = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a['value'];
@@ -308,6 +288,7 @@ export class Tags extends Dropzones {
       const elements = (_a = this.droppableTagElements) === null || _a === void 0 ? void 0 : _a.filter(e => e);
       const { dragAndScroll, onFirstTagAnimationFinished, onTagsAnimationFinished } = this.tagConfig || {};
       const hideOverflowingTag = (tagElement) => this.hideOverflowingTagInZone(this.tagsZone.element, tagElement, () => Tag.scaleUpDown(tagElement));
+      const setupAutoScroll = () => dragAndScroll && prepareAutoScroll(this.hostElement);
       const firstElement = elements === null || elements === void 0 ? void 0 : elements[0];
       gsapFromTo(elements, .75, {
         x: (_b = this.hostElement) === null || _b === void 0 ? void 0 : _b.clientWidth,
@@ -322,10 +303,10 @@ export class Tags extends Dropzones {
             const element = (_a = this.targets()) === null || _a === void 0 ? void 0 : _a[0];
             hideOverflowingTag(element);
             if (element.id === firstElement.id) {
-              dragAndScroll && Tags.prepareAutoScroll(this.hostElement);
               onFirstTagAnimationFinished === null || onFirstTagAnimationFinished === void 0 ? void 0 : onFirstTagAnimationFinished();
             }
             if (element.id === ((_b = elements === null || elements === void 0 ? void 0 : elements[(elements === null || elements === void 0 ? void 0 : elements.length) - 1]) === null || _b === void 0 ? void 0 : _b.id)) {
+              setupAutoScroll();
               onTagsAnimationFinished === null || onTagsAnimationFinished === void 0 ? void 0 : onTagsAnimationFinished();
             }
           }

package/dist/collection/utils/draggables/zones.js

@@ -5,6 +5,9 @@ export class Dropzone {
     this.index = index;
     this.initTagZone();
   }
+  get tagElements() {
+    return Array.from(this.element.querySelectorAll('yoo-tag')) || [];
+  }
   get colorClass() {
     const { colorClass } = this.config || {};
     return ((colorClass === null || colorClass === void 0 ? void 0 : colorClass[this.index]) || colorClass);
@@ -16,8 +19,7 @@ export class Dropzone {
     return this.element.hasAttribute('hit');
   }
   get tagsId() {
-    var _a;
-    return ((_a = Array.from(this.element.querySelectorAll('yoo-tag'))) === null || _a === void 0 ? void 0 : _a.map(e => e.id)) || [];
+    return this.tagElements.map(e => e.id) || [];
   }
   get tagsLimit() {
     const answers = this.element.getRootNode()['host']['answer'] || {};
@@ -28,8 +30,7 @@ export class Dropzone {
     return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.id) === 'zone-tags';
   }
   get tagsCount() {
-    var _a, _b;
-    return ((_b = Array.from(((_a = this.element) === null || _a === void 0 ? void 0 : _a.querySelectorAll('yoo-tag')) || [])) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    return this.tagElements.length || 0;
   }
   get isDropZoneFull() {
     return !this.isTagsZone && this.tagsCount === (this.tagsLimit || 1);
@@ -64,16 +65,11 @@ export class Dropzones {
   }
   async hideOverflowingTagInZone(zoneElement, tagElement, onShowTag) {
     if (tagElement && zoneElement) {
-      const zoneBR = zoneElement.getBoundingClientRect();
-      const tagBR = tagElement.getBoundingClientRect();
-      const hasBounding = !!(top && zoneBR.top && zoneBR.height);
-      if (hasBounding && (tagBR.top >= (zoneBR.top + zoneBR.height))) {
-        tagElement.style.visibility = 'hidden';
-      }
-      else if (tagElement.style.visibility === 'hidden') {
-        tagElement.style.visibility = 'visible';
-        await (onShowTag === null || onShowTag === void 0 ? void 0 : onShowTag(tagElement));
-      }
+      const zoneTop = zoneElement.offsetTop;
+      const zoneHeight = zoneElement.offsetHeight;
+      const isTagOverflowing = !!zoneTop && !!zoneHeight && (tagElement.offsetTop >= (zoneTop + zoneHeight));
+      isTagOverflowing ? tagElement.style.visibility = 'hidden' : tagElement.style.removeProperty('visibility');
+      await (onShowTag === null || onShowTag === void 0 ? void 0 : onShowTag(tagElement));
     }
   }
   hideOverflowingTagsInZone(zoneElement, onShowTag) {