@yoobic/yobi 8.7.3 → 8.7.4

package/dist/collection/feature-learn/learning/podium/podium.js

@@ -1,5 +1,5 @@
-import { Cloudinary, getCssColor, getUserDisplayName, isRTL, isWeb, updateSVGCustomColors } from '@shared/utils';
-import { getAssetPath, h, Host } from '@stencil/core';
+import { Cloudinary, getCssColor, getUserDisplayName, isRTL, isWeb } from '@shared/utils';
+import { getAssetPath, h } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
 const PODIUM_POSITION = [
   {
@@ -23,14 +23,7 @@ export class YooPodiumComponent {
     this.usersRanked = undefined;
   }
   onUsersRankedChanged(newUsers, oldUsers) {
-    const isSamePodium = this.isSamePodium(newUsers, oldUsers);
-    if (!isSamePodium) {
-      const svgElement = this.getSVGElement();
-      if (svgElement) {
-        this.onBeforeInjectSVG(svgElement);
-        this.onAfterInjectSVG(svgElement);
-      }
-    }
+    !this.isSamePodium(newUsers, oldUsers) && this.initElements();
   }
   isSamePodium(newUsers, oldUsers) {
     let isSamePodium = (newUsers === null || newUsers === void 0 ? void 0 : newUsers.length) === (oldUsers === null || oldUsers === void 0 ? void 0 : oldUsers.length);
@@ -43,95 +36,80 @@ export class YooPodiumComponent {
     }
     return isSamePodium;
   }
-  componentDidUpdate() {
-    const svgElement = this.getSVGElement();
-    if (svgElement) {
-      this.onAfterInjectSVG(svgElement);
+  componentDidLoad() {
+    this.init();
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    this.svgElement && ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeChild(this.svgElement));
+  }
+  async init() {
+    var _a;
+    if (this.host) {
+      const response = await fetch(getAssetPath('./assets/podium/leaderboard.svg'));
+      if (response.ok) {
+        const parser = new DOMParser();
+        this.svgElement = (_a = parser.parseFromString(await response.text(), 'image/svg+xml')) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        this.host.shadowRoot.appendChild(this.svgElement);
+        this.initElements();
+      }
     }
   }
-  getSVGElement() {
-    return this.image && (this.image.shadowRoot || this.image).querySelector('svg');
+  initElements() {
+    if (this.svgElement) {
+      this.initDataElements();
+      this.centerElements();
+    }
   }
   displayElement(element, showElement) {
-    if (element) {
-      if (showElement) {
-        element.setAttribute('style', 'display: block');
-      }
-      else {
-        element.setAttribute('style', 'display: none');
-      }
-    }
+    element.setAttribute('style', `display: ${showElement ? 'block' : 'none'}`);
   }
-  setUsername(prefixClass, svgElement, firstName) {
+  setUsername(prefixClass, firstName) {
     const MAX_USERNAME_LENGTH = 11;
-    const usernameTextElement = svgElement.querySelector(`#${prefixClass}_image_text`);
-    if (usernameTextElement && firstName) {
-      this.displayElement(usernameTextElement, true);
-      const usernameTspanElement = usernameTextElement.querySelector('tspan');
-      usernameTspanElement.style.fill = getCssColor('dark');
+    const usernameTextElement = this.svgElement.querySelector(`#${prefixClass}_image_text`);
+    if (firstName) {
+      const textElement = usernameTextElement.querySelector('text');
+      textElement.style.fill = getCssColor('dark');
       if (firstName.length >= MAX_USERNAME_LENGTH) {
         firstName = `${firstName.substring(0, MAX_USERNAME_LENGTH)}...`;
       }
-      if (usernameTspanElement) {
-        usernameTspanElement.textContent = firstName || '';
-      }
+      textElement.textContent = firstName || '';
     }
-    else {
-      this.displayElement(usernameTextElement, false);
+    this.displayElement(usernameTextElement, !!firstName);
+  }
+  centerUsername(prefixClass) {
+    const usernameTextElement = this.svgElement.querySelector(`#${prefixClass}_image_text`);
+    const imageAvatarContainerElement = this.svgElement.querySelector(`#${prefixClass}_avatar_image`);
+    const noImageAvatarContainerElement = this.svgElement.querySelector(`#${prefixClass}_avatar_no_image`);
+    const { width } = (imageAvatarContainerElement.style.display === 'none' ? noImageAvatarContainerElement : imageAvatarContainerElement).getBoundingClientRect();
+    if (usernameTextElement && (imageAvatarContainerElement || noImageAvatarContainerElement)) {
+      const usernameWidth = usernameTextElement.getBoundingClientRect().width;
+      const translateYValue = prefixClass === 'right' ? 60 : prefixClass === 'left' ? -28 : 10;
+      let translateXValue = (width - usernameWidth) / 2;
+      isRTL() && (translateXValue += usernameWidth);
+      usernameTextElement.setAttribute('transform', `translate(${translateXValue}, ${translateYValue})`);
     }
   }
-  centerUsername(prefixClass, svgElement) {
-    if (svgElement) {
-      let avatarWidth;
-      const usernameTextElement = svgElement.querySelector(`#${prefixClass}_image_text`);
-      const imageAvatarContainerElement = svgElement.querySelector(`#${prefixClass}_avatar_image`);
-      const noImageAvatarContainerElement = svgElement.querySelector(`#${prefixClass}_avatar_no_image`);
-      const isHidden = (element) => element.style.display === 'none';
-      if (isHidden(imageAvatarContainerElement)) {
-        avatarWidth = noImageAvatarContainerElement.getBoundingClientRect().width;
-      }
-      else {
-        avatarWidth = imageAvatarContainerElement.getBoundingClientRect().width;
-      }
-      if (usernameTextElement && (imageAvatarContainerElement || noImageAvatarContainerElement)) {
-        const usernameWidth = usernameTextElement.getBoundingClientRect().width;
-        const translateYValue = prefixClass === 'right' ? 60 : prefixClass === 'left' ? -28 : 10;
-        let translateXValue = (avatarWidth - usernameWidth) / 2;
-        isRTL() && (translateXValue += usernameWidth);
-        usernameTextElement.setAttribute('transform', `translate(${translateXValue}, ${translateYValue})`);
-      }
+  centerPoints(prefixClass, pointsTransform, points) {
+    const pointsContainerElement = this.svgElement.querySelector(`#${prefixClass}_points_container`);
+    const pointsElement = this.svgElement.querySelector(`#${prefixClass}_points`);
+    if (isNumber(points)) {
+      const pointLength = points.toString().length || 1;
+      const translateX = isRTL() ? 4 * (pointLength + 1) : 4 * (pointLength - 1);
+      pointsElement.setAttribute('transform', pointsTransform.replace('#tslX', `${prefixClass === 'right' ? (isRTL() ? -translateX : translateX) : isRTL() ? translateX : -translateX}`));
     }
+    this.displayElement(pointsContainerElement, isNumber(points));
   }
-  centerPoints(prefixClass, svgElement, pointsTransform, points) {
-    const pointsContainerElement = svgElement.querySelector(`#${prefixClass}_points_container`);
-    const pointsElement = svgElement.querySelector(`#${prefixClass}_points`);
-    if (pointsContainerElement && isNumber(points)) {
-      this.displayElement(pointsContainerElement, true);
-      if (pointsElement) {
-        const pointLength = points.toString().length || 1;
-        const translateX = isRTL() ? 4 * (pointLength + 1) : 4 * (pointLength - 1);
-        pointsElement.setAttribute('transform', pointsTransform.replace('#tslX', `${prefixClass === 'right'
-          ? isRTL() ? -translateX : translateX
-          : isRTL() ? translateX : -translateX}`));
-      }
-    }
-    else {
-      this.displayElement(pointsContainerElement, false);
-    }
-  }
-  setAvatar(prefixClass, svgElement, userRank) {
-    const imageElement = svgElement.querySelector(`#${prefixClass}_image`);
-    const imageAvatarContainerElement = svgElement.querySelector(`#${prefixClass}_avatar_image`);
-    const noImageAvatarContainerElement = svgElement.querySelector(`#${prefixClass}_avatar_no_image`);
+  setAvatar(prefixClass, userRank) {
+    const imageElement = this.svgElement.querySelector(`#${prefixClass}_image`);
+    const imageAvatarContainerElement = this.svgElement.querySelector(`#${prefixClass}_avatar_image`);
+    const noImageAvatarContainerElement = this.svgElement.querySelector(`#${prefixClass}_avatar_no_image`);
     if (userRank) {
       const user = userRank.user;
       if (user) {
         let image = user.imageData;
         if (image) {
-          image = new Cloudinary(image)
-            .crop('crop')
-            .aspectRatio(1, 1)
-            .getUrl();
+          image = new Cloudinary(image).crop('crop').aspectRatio(1, 1).getUrl();
           if (noImageAvatarContainerElement) {
             this.displayElement(noImageAvatarContainerElement, false);
           }
@@ -149,11 +127,11 @@ export class YooPodiumComponent {
             this.displayElement(imageAvatarContainerElement, false);
           }
           const getInitial = (value) => (value || '  ').length > 0 && (value || '  ').substring(0, 1).toString().toUpperCase();
-          const initialUsernameText = (get(user, 'firstName', false) && get(user, 'lastName', false)) ? `${getInitial(user.firstName)}${getInitial(user.lastName)}` : getInitial(user.username);
+          const initialUsernameText = get(user, 'firstName', false) && get(user, 'lastName', false) ? `${getInitial(user.firstName)}${getInitial(user.lastName)}` : getInitial(user.username);
           if (noImageAvatarContainerElement) {
             this.displayElement(noImageAvatarContainerElement, true);
-            isRTL() && (noImageAvatarContainerElement.setAttribute('style', 'direction: ltr')); //* direction: rtl does some weird stuff and is not needed
-            const textElement = noImageAvatarContainerElement.querySelector('tspan');
+            isRTL() && noImageAvatarContainerElement.setAttribute('style', 'direction: ltr'); //* direction: rtl does some weird stuff and is not needed
+            const textElement = noImageAvatarContainerElement.querySelector('text');
             textElement.textContent = initialUsernameText;
             noImageAvatarContainerElement.addEventListener('click', (ev) => {
               ev.stopImmediatePropagation();
@@ -168,75 +146,49 @@ export class YooPodiumComponent {
       this.displayElement(imageAvatarContainerElement, false);
     }
   }
-  setPoint(prefixClass, svgElement, nbrPoints) {
-    if (svgElement) {
-      const pointsTextElement = svgElement.querySelector(`#${prefixClass}_points`);
-      if (pointsTextElement && isNumber(nbrPoints)) {
-        this.displayElement(pointsTextElement, true);
-        const points = (Math.round(nbrPoints)).toString() || '0';
-        const pointsTspanElement = pointsTextElement.querySelector('tspan');
-        if (pointsTspanElement) {
-          pointsTspanElement.textContent = points;
-        }
-      }
-      else {
-        this.displayElement(pointsTextElement, false);
-      }
+  setPoint(prefixClass, nbrPoints) {
+    const pointsTextElement = this.svgElement.querySelector(`#${prefixClass}_points`);
+    if (isNumber(nbrPoints)) {
+      const pointsTspanElement = pointsTextElement.querySelector('tspan');
+      pointsTspanElement.textContent = Math.round(nbrPoints).toString() || '0';
     }
+    this.displayElement(pointsTextElement, isNumber(nbrPoints));
   }
   getUserOnPosition(position) {
-    if (!this.usersRanked || !this.usersRanked.length) {
-      return null;
-    }
-    return this.usersRanked.find((usersRanked) => usersRanked.rank === position);
+    var _a;
+    return (_a = this.usersRanked) === null || _a === void 0 ? void 0 : _a.find(({ rank }) => rank === position);
   }
   onAvatarClicked(rankedUser) {
     rankedUser && this.selected.emit(rankedUser.rank);
   }
-  onBeforeInjectSVG(svgElement) {
-    if (svgElement) {
-      isWeb(this.host) && svgElement.setAttribute('height', window.innerHeight.toString());
-      svgElement.style.width = '100%';
-      const mainSVGElement = svgElement.querySelector('#main-svg');
-      if (mainSVGElement) {
-        PODIUM_POSITION.forEach((posObj) => {
-          if (posObj) {
-            const prefixClass = posObj.prefix;
-            const userRank = this.getUserOnPosition(posObj.rank);
-            const user = userRank === null || userRank === void 0 ? void 0 : userRank.user;
-            const points = Math.round((userRank === null || userRank === void 0 ? void 0 : userRank.points) || 0);
-            const username = user ? getUserDisplayName(user) : null;
-            this.setUsername(prefixClass, svgElement, username);
-            this.setAvatar(prefixClass, svgElement, userRank);
-            this.setPoint(prefixClass, svgElement, points);
-          }
-        });
-      }
-      return svgElement;
-    }
-  }
-  onAfterInjectSVG(svgElement) {
-    if (svgElement) {
-      PODIUM_POSITION.forEach((posObj) => {
-        if (posObj) {
-          const prefixClass = posObj.prefix;
-          const userRank = this.getUserOnPosition(posObj.rank);
-          if (userRank) {
-            const points = Math.round((userRank === null || userRank === void 0 ? void 0 : userRank.points) || 0);
-            this.centerUsername(prefixClass, svgElement);
-            this.centerPoints(prefixClass, svgElement, posObj.pointsTransform, points);
-          }
-        }
+  initDataElements() {
+    isWeb(this.host) && this.svgElement.setAttribute('height', window.innerHeight.toString());
+    this.svgElement.style.width = '100%';
+    const mainSVGElement = this.svgElement.querySelector('#main-svg');
+    if (mainSVGElement) {
+      PODIUM_POSITION.forEach(({ prefix, rank }) => {
+        const userRank = this.getUserOnPosition(rank);
+        const user = userRank === null || userRank === void 0 ? void 0 : userRank.user;
+        const points = Math.round((userRank === null || userRank === void 0 ? void 0 : userRank.points) || 0);
+        const username = user ? getUserDisplayName(user) : null;
+        this.setUsername(prefix, username);
+        this.setAvatar(prefix, userRank);
+        this.setPoint(prefix, points);
       });
     }
-    return svgElement;
+  }
+  centerElements() {
+    PODIUM_POSITION.forEach(({ prefix, rank, pointsTransform }) => {
+      const prefixClass = prefix;
+      const userRank = this.getUserOnPosition(rank);
+      if (userRank) {
+        this.centerUsername(prefixClass);
+        this.centerPoints(prefixClass, pointsTransform, Math.round((userRank === null || userRank === void 0 ? void 0 : userRank.points) || 0));
+      }
+    });
   }
   render() {
-    return h(Host, null, h("div", { class: "podium-container" }, h("yoo-icon", { name: "badge-crown", color: "app-color", size: "medium" }), h("yoo-img", { ref: (el) => this.image = el, src: getAssetPath('./assets/podium/leaderboard.svg'), svgOptions: {
-        makeIdsUnique: false, beforeInject: (_, svg) => this.onBeforeInjectSVG(svg),
-        afterInject: (_, svg) => this.onAfterInjectSVG(svg),
-        afterLoad: (_, svgString) => updateSVGCustomColors(svgString)
-      } }), h("slot", null)));
+    return (h("yoo-icon", { name: "badge-crown", color: "app-color", size: "medium" }));
   }
   static get is() { return "yoo-podium"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -24,8 +24,7 @@ function isMissionDone(mission) {
   return mission.status === 'finished';
 }
 function isMissionWithoutValidation(mission) {
-  var _a;
-  return (_a = mission === null || mission === void 0 ? void 0 : mission.description) === null || _a === void 0 ? void 0 : _a.withoutValidation;
+  return mission === null || mission === void 0 ? void 0 : mission.withoutValidation;
 }
 function isMissionPendingOffline(mission, session) {
   var _a;

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

@@ -97,7 +97,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; canCreateAIContent: 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; canCreatePowerBI: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canDownloadFile: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canNotifyUsers: boolean; canPrintFiles: 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; canViewLearningPaths: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewModeration: 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; canViewLearningAnalytics: boolean; canViewYoobicScoreAnalytics: boolean; canViewUserActivityAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewShifts: 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; canCreateAIContent: boolean; canCreateAIContentWork: 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; canCreatePowerBI: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canDownloadFile: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canNotifyUsers: boolean; canPrintFiles: 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; canViewLearningPaths: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewModeration: 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; canViewLearningAnalytics: boolean; canViewYoobicScoreAnalytics: boolean; canViewUserActivityAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewShifts: 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/feature-platform/login/login/login.css

@@ -949,16 +949,10 @@ svg:not(:root) {
   .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
     display: none;
   }
-  .outer-login-container.focused .login-sub-title {
-    transform: scale(1.2) translateX(10%);
-  }
 }
 .outer-login-container.emulate-preview:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulate-preview.focused .login-sub-title {
-  transform: scale(1.2) translateX(10%);
-}
 
 .outer-login-container .sidepanel {
   margin-inline-end: var(--spacing-64, 4rem);

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

@@ -21,7 +21,9 @@ export function updateBounds(options) {
     };
     const getBaseInnerOffset = (axis) => {
       const offsetBound = `offset${axis === 'x' ? 'Left' : 'Top'}`;
-      return dragHandler[offsetBound] + getTransformInfos(dragHandlerZone)[axis === 'x' ? 'tsX' : 'tsY'] + (zonePosition !== 'static' ? dragHandlerZone[offsetBound] + mainElement[offsetBound] : 0);
+      return (dragHandler[offsetBound] +
+        getTransformInfos(dragHandlerZone)[axis === 'x' ? 'tsX' : 'tsY'] +
+        (zonePosition !== 'static' ? dragHandlerZone[offsetBound] + mainElement[offsetBound] : 0));
     };
     const getMin = (axis) => getBaseOuterOffset(axis) - getBaseInnerOffset(axis);
     const getMax = (axis) => {
@@ -29,24 +31,19 @@ export function updateBounds(options) {
       const innerOffset = getBaseInnerOffset(axis) + dragHandler[`offset${axis === 'x' ? 'Width' : 'Height'}`];
       return outerOffset - innerOffset;
     };
-    draggable.applyBounds({
-      maxY: getMax('y'),
-      maxX: getMax('x'),
-      minY: getMin('y'),
-      minX: getMin('x')
-    });
+    draggable.applyBounds({ maxY: getMax('y'), maxX: getMax('x'), minY: getMin('y'), minX: getMin('x') });
     draggable.update(true);
   }
 }
 function getComponentProps(hostElement) {
   const propsObject = {};
-  hostElement && COMPONENT_PROPS.forEach((prop) => propsObject[prop] = hostElement[prop]);
+  hostElement && COMPONENT_PROPS.forEach((prop) => (propsObject[prop] = hostElement[prop]));
   return propsObject;
 }
 async function scale(scaleType, element) {
   const SCALE_TAG_COEFF = 1.065;
   const isScaledDown = scaleType === 'down';
-  await gsapTo(element, .35, { scale: isScaledDown ? 1 : SCALE_TAG_COEFF });
+  await gsapTo(element, 0.35, { scale: isScaledDown ? 1 : SCALE_TAG_COEFF });
   element.classList.toggle('active', !isScaledDown);
 }
 export async function scaleUpDown(element) {
@@ -74,11 +71,11 @@ export class Dropzone {
     return this.element.hasAttribute('hit');
   }
   get tagsId() {
-    return this.tagElements.map(e => e.id) || [];
+    return this.tagElements.map((e) => e.id) || [];
   }
   get tagsLimit() {
     const answers = this.element.getRootNode()['host']['answer'] || {};
-    return !this.isTagsZone && (Array.isArray(answers === null || answers === void 0 ? void 0 : answers[this.index]) && answers[this.index].length) || 1;
+    return (!this.isTagsZone && Array.isArray(answers === null || answers === void 0 ? void 0 : answers[this.index]) && answers[this.index].length) || 1;
   }
   get isTagsZone() {
     var _a;
@@ -98,7 +95,7 @@ export class Dropzone {
         const zoneBR = this.element.getBoundingClientRect();
         const calculateTagZoneHeight = window.innerHeight - (zoneBR.top + footerHeight);
         if (calculateTagZoneHeight) {
-          this.element.style.height = `${calculateTagZoneHeight * .75}px`;
+          this.element.style.height = `${calculateTagZoneHeight * 0.75}px`;
         }
       }
     }
@@ -109,20 +106,20 @@ export class Dropzones {
     this.zonesConfig = zonesConfig;
   }
   get tagsZone() {
-    return Dropzones.getZones(this.zonesConfig).find(zone => zone.id === 'zone-tags');
+    return Dropzones.getZones(this.zonesConfig).find((zone) => zone.id === 'zone-tags');
   }
   setTagsZoneOverflow(set) {
     var _a, _b;
     const { element } = this.tagsZone || {};
     if (element && ((_b = (_a = this.zonesConfig) === null || _a === void 0 ? void 0 : _a.tagZoneConfig) === null || _b === void 0 ? void 0 : _b.hasOverflow)) {
-      set ? element.style.overflow = 'hidden' : element.style.removeProperty('overflow');
+      set ? (element.style.overflow = 'hidden') : element.style.removeProperty('overflow');
     }
   }
   async hideOverflowingTagInZone(zoneElement, tagElement, onShowTag) {
     const { tagZoneConfig } = this.zonesConfig || {};
     if (tagElement && zoneElement && tagZoneConfig.hasOverflow) {
       const zonePadding = Math.round(parseFloat(getComputedStyle(zoneElement).padding)) / 2;
-      const isTagOverflowing = tagElement.offsetTop >= (zoneElement.offsetTop + zoneElement.offsetHeight - zonePadding);
+      const isTagOverflowing = tagElement.offsetTop >= zoneElement.offsetTop + zoneElement.offsetHeight - zonePadding;
       if (isTagOverflowing) {
         tagElement.setAttribute('inactive', 'true');
       }
@@ -141,9 +138,9 @@ export class Dropzones {
   }
   static getZones(config) {
     const { tagZoneConfig, dropZoneConfig, hostElement } = config;
-    return (Array.from(hostElement.shadowRoot.querySelectorAll('.dropzone')) || [])
-      .sort((a, b) => a.id > b.id ? 1 : -1)
-      .map((e, i) => new Dropzone(e.id === 'zone-tags' ? tagZoneConfig : dropZoneConfig, e, i)) || [];
+    return ((Array.from(hostElement.shadowRoot.querySelectorAll('.dropzone')) || [])
+      .sort((a, b) => (a.id > b.id ? 1 : -1))
+      .map((e, i) => new Dropzone(e.id === 'zone-tags' ? tagZoneConfig : dropZoneConfig, e, i)) || []);
   }
 }
 export class Tag {
@@ -166,7 +163,7 @@ export class Tag {
     return Dropzones.getZones(this.zonesConfig);
   }
   async reset() {
-    await this.dropToZone(this.zones.find(zone => zone.isTagsZone));
+    await this.dropToZone(this.zones.find((zone) => zone.isTagsZone));
   }
   isTagOverlapping(zone) {
     return Draggable.hitTest(this.element, zone.element, zone.config.threshold || 0);
@@ -183,20 +180,17 @@ export class Tag {
       }
     }
   }
+  destroy() {
+    var _a;
+    (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.kill();
+  }
   createTagElement() {
     const { getColorTag, extraTagsClasses } = this.config;
     const { isTagsZone } = this.zone;
     const tagElement = document.createElement('yoo-tag');
     extraTagsClasses && tagElement.classList.add(extraTagsClasses);
-    !isTagsZone ? tagElement.classList.add('dropped') :
-      this.hostElement['animated'] && !tagElement.classList.contains('new') && (tagElement.style.opacity = '0');
-    return Object.assign(tagElement, {
-      id: this.id,
-      key: this.id,
-      innerHTML: translateMulti(this.value),
-      size: 'medium',
-      color: getColorTag(this.value, this.zone.index)
-    });
+    !isTagsZone ? tagElement.classList.add('dropped') : this.hostElement['animated'] && !tagElement.classList.contains('new') && (tagElement.style.opacity = '0');
+    return Object.assign(tagElement, { id: this.id, key: this.id, innerHTML: translateMulti(this.value), size: 'medium', color: getColorTag(this.value, this.zone.index) });
   }
   initDraggable() {
     let tagsZoneElements = [];
@@ -205,7 +199,7 @@ export class Tag {
     const { boundElement, clickToDrop, clickExtrasActions, pressExtrasActions, dragStartExtrasActions, resetExtrasActions, dragExtrasActions } = this.config || {};
     const clickOnTag = async () => {
       var _a;
-      const freeZones = this.zones.filter(zone => !(zone === null || zone === void 0 ? void 0 : zone.isTagsZone) && !(zone === null || zone === void 0 ? void 0 : zone.isDropZoneFull));
+      const freeZones = this.zones.filter((zone) => !(zone === null || zone === void 0 ? void 0 : zone.isTagsZone) && !(zone === null || zone === void 0 ? void 0 : zone.isDropZoneFull));
       if (!((_a = this.zone) === null || _a === void 0 ? void 0 : _a.isTagsZone)) {
         await this.reset();
         resetExtrasActions === null || resetExtrasActions === void 0 ? void 0 : resetExtrasActions(this);
@@ -237,15 +231,10 @@ export class Tag {
           if (scrollElement) {
             hostElement.style.height = `${scrollElement.getBoundingClientRect().top + scrollElement.offsetHeight - hostElement.getBoundingClientRect().top}px`;
           }
-          updateBounds({
-            draggable: this.draggable,
-            dragHandler: this.element,
-            dragHandlerZone: this.zone.element,
-            host: this.hostElement
-          });
+          updateBounds({ draggable: this.draggable, dragHandler: this.element, dragHandlerZone: this.zone.element, host: this.hostElement });
         },
         onDrag: () => {
-          this.zones.forEach(zone => {
+          this.zones.forEach((zone) => {
             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);
@@ -263,7 +252,7 @@ export class Tag {
           resetTransform(this.element);
           await this.release();
           if (scrollElement) {
-            await gsapTo(this.mainElement, .5, { scrollTo: 0, delay: .5 });
+            await gsapTo(this.mainElement, 0.5, { scrollTo: 0, delay: 0.5 });
             hostElement.style.removeProperty('height');
           }
           tagsZoneElements.forEach((element) => element.classList.remove('inverse-color'));
@@ -308,7 +297,7 @@ export class Tag {
   async release(fromReset = false) {
     var _a, _b;
     if (!fromReset) {
-      this.zones.forEach(zone => {
+      this.zones.forEach((zone) => {
         if (zone.hit && !zone.isDropZoneFull && zone.id !== this.zone.id) {
           this.lastZone = this.zone;
           this.zone = zone;
@@ -318,9 +307,7 @@ export class Tag {
     }
     this.addToZone();
     this.removeFromZone();
-    this.zones
-      .map(z => z.element)
-      .forEach(e => !e.firstChild && e.classList.remove('has-tag'));
+    this.zones.map((z) => z.element).forEach((e) => !e.firstChild && e.classList.remove('has-tag'));
     await this.element.componentOnReady();
     (_b = (_a = this.config).dragEndExtrasActions) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
@@ -341,7 +328,7 @@ export class Tags extends Dropzones {
   }
   get droppableTagElements() {
     var _a;
-    return ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.filter(element => element && element.parentElement.id === 'zone-tags')) || [];
+    return ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.filter((element) => element && element.parentElement.id === 'zone-tags')) || [];
   }
   get hostElement() {
     return this.zonesConfig.hostElement;
@@ -354,18 +341,22 @@ export class Tags extends Dropzones {
     if (this.tagConfig) {
       this.populate();
       if ((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.length) {
-        await Promise.all(this.tagElements.map(tagElement => tagElement.componentOnReady()));
+        await Promise.all(this.tagElements.map((tagElement) => tagElement.componentOnReady()));
         this.setTagsZoneOverflow(true);
         await this.animate();
-        new IntersectionObserver(entries => entries.forEach(({ isIntersecting }) => {
+        new IntersectionObserver((entries) => entries.forEach(({ isIntersecting }) => {
           isIntersecting && this.tags.forEach((tag) => tag.initDraggable());
         })).observe(this.tagElements[0]);
       }
     }
   }
+  destroy() {
+    var _a;
+    (_a = this.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => tag === null || tag === void 0 ? void 0 : tag.destroy());
+  }
   deleteTagFromValue(value) {
     var _a, _b, _c;
-    const tag = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.find(tag => tag.value === value);
+    const tag = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.find((tag) => tag.value === value);
     if (tag) {
       const { element, zone } = tag;
       tag.removeFromZone(zone);
@@ -391,8 +382,8 @@ export class Tags extends Dropzones {
       setTimeout(async () => {
         var _a;
         const formatValues = (values) => (values === null || values === void 0 ? void 0 : values.filter((e, i, a) => a.indexOf(e) === i)) || [];
-        formatValues(oldValues).forEach(v => this.deleteTagFromValue(v));
-        formatValues(newValues).forEach(v => this.addTagFromValue(v));
+        formatValues(oldValues).forEach((v) => this.deleteTagFromValue(v));
+        formatValues(newValues).forEach((v) => this.addTagFromValue(v));
         await Promise.all((_a = this.tagElements) === null || _a === void 0 ? void 0 : _a.map((tagElement) => tagElement === null || tagElement === void 0 ? void 0 : tagElement.componentOnReady()));
         this.checkOverflowingTags();
         resolve();
@@ -407,13 +398,13 @@ export class Tags extends Dropzones {
   }
   getDroppedValues() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.zones) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id.match(/[0-9]/g))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.index - b.index)) === null || _c === void 0 ? void 0 : _c.map(({ tagsId }) => tagsId)) === null || _d === void 0 ? void 0 : _d.map((tagsId) => tagsId.map((tagId) => { var _a; return (_a = this.tags.find(({ id }) => id === tagId)) === null || _a === void 0 ? void 0 : _a.value; }))) || [];
+    return (((_d = (_c = (_b = (_a = this.zones) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id.match(/[0-9]/g))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.index - b.index)) === null || _c === void 0 ? void 0 : _c.map(({ tagsId }) => tagsId)) === null || _d === void 0 ? void 0 : _d.map((tagsId) => tagsId.map((tagId) => { var _a; return (_a = this.tags.find(({ id }) => id === tagId)) === null || _a === void 0 ? void 0 : _a.value; }))) || []);
   }
   checkOverflowingTags() {
-    this.zones.forEach(zone => {
+    this.zones.forEach((zone) => {
       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'));
+        zone.isTagsZone && zone.element.style.removeProperty('overflow');
         this.hideOverflowingTagsInZone(zone.element, (tagId) => {
           const tag = this.tags.find(({ id }) => id === tagId);
           tag === null || tag === void 0 ? void 0 : tag.initDraggable();
@@ -427,26 +418,24 @@ export class Tags extends Dropzones {
     const tagValues = shuffled ? shuffle(values) : values;
     const getTag = (value, zi) => this.tags.push(new Tag(this.tagConfig, value, this.zones[zi], this.zonesConfig));
     value === null || value === void 0 ? void 0 : value.forEach((v, zoneIndex) => {
-      Array.isArray(v) ? v.forEach(value => getTag(value, zoneIndex)) : getTag(v, zoneIndex);
+      Array.isArray(v) ? v.forEach((value) => getTag(value, zoneIndex)) : getTag(v, zoneIndex);
     });
-    !readonly && ((_a = tagValues === null || tagValues === void 0 ? void 0 : tagValues.filter(v => { var _a; return !((_a = (value === null || value === void 0 ? void 0 : value.reduce((a, b) => a.concat(b), []))) === null || _a === void 0 ? void 0 : _a.includes(v)); })) === null || _a === void 0 ? void 0 : _a.forEach(v => getTag(v, this.zones.length - 1)));
+    !readonly && ((_a = tagValues === null || tagValues === void 0 ? void 0 : tagValues.filter((v) => { var _a; return !((_a = value === null || value === void 0 ? void 0 : value.reduce((a, b) => a.concat(b), [])) === null || _a === void 0 ? void 0 : _a.includes(v)); })) === null || _a === void 0 ? void 0 : _a.forEach((v) => getTag(v, this.zones.length - 1)));
   }
   async animate() {
     var _a;
     if (this.tagsZone && this.componentProps.animated && ((_a = this.droppableTagElements) === null || _a === void 0 ? void 0 : _a.length)) {
       const { hasOverflow } = this.zonesConfig.tagZoneConfig;
-      const elements = this.droppableTagElements.filter(e => !e.hasAttribute('inactive'));
+      const elements = this.droppableTagElements.filter((e) => !e.hasAttribute('inactive'));
       const { onFirstTagAnimationFinished, onTagsAnimationFinished } = this.tagConfig || {};
       const hideOverflowingTag = (tagElement) => this.hideOverflowingTagInZone(this.tagsZone.element, tagElement);
       const firstElement = elements === null || elements === void 0 ? void 0 : elements[0];
       hasOverflow && (this.tagsZone.element.style.overflow = 'hidden');
-      elements.forEach((element) => element.style.opacity = '0.25');
-      await gsapFromTo(elements, .5, {
-        scale: 0
-      }, {
+      elements.forEach((element) => (element.style.opacity = '0.25'));
+      await gsapFromTo(elements, 0.5, { scale: 0 }, {
         scale: 1,
         stagger: {
-          each: .2,
+          each: 0.2,
           onStart() {
             var _a;
             const element = (_a = this.targets()) === null || _a === void 0 ? void 0 : _a[0];

package/dist/collection/utils/helpers/annotations-helpers.js

@@ -92,7 +92,7 @@ export function isElementInsideContainer(elementBounds, containerBounds, accepta
 }
 export function calcCoordPercentage(containerBR, annotationEl, axis) {
   const annotationBR = annotationEl === null || annotationEl === void 0 ? void 0 : annotationEl.getBoundingClientRect();
-  return containerBR && annotationBR ? Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100) : 0;
+  return containerBR && annotationBR ? Math.round(Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100)) : 0;
 }
 export function getAnnotationElements(containerElement, type) {
   return Array.from((containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll(`.${type || 'pa'}`)) || []);