@yoobic/yobi 8.3.1-9 → 8.3.3-0

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

@@ -497,7 +497,7 @@ export class YooFormCreatorBlockExpandableComponent {
     let conditionValues;
     switch (type) {
       case 'field':
-        conditionValues = condition.values ? condition.values : [condition.value];
+        conditionValues = condition.values ? condition.values : (condition.value ? [condition.value] : []);
         break;
       case 'tags':
         conditionValues = condition.tags;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -202,16 +202,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 :host h1, :host p {
   margin: 0;
 }
-:host yoo-navbar {
+:host yoo-navbar.device-preview, :host yoo-navbar.top-navbar {
   --bottom-shadow: 0;
 }
-:host yoo-navbar:not(.device-preview) {
+:host yoo-navbar.no-heading {
+  --top-container-min-height: auto;
+}
+:host yoo-navbar.top-navbar {
   --top-container-padding: 0;
   --center-padding: 0;
 }
@@ -219,12 +223,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   overflow: hidden;
   background: var(--light, #ffffff);
 }
 :host .outer-container.not-closable {
-  height: 100%;
+  flex: 1;
   border-top-left-radius: var(--border-radius-04, 0.25rem);
   border-top-right-radius: var(--border-radius-04, 0.25rem);
 }
@@ -370,12 +373,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
 }
 
+:host(.panel) > .outer-container {
+  padding-top: var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-16, 1rem);
+}
 :host(.panel) .outer-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: flex-start;
   width: 21.875rem;
-  padding: 0 var(--spacing-24, 1.5rem);
+  padding-right: var(--spacing-24, 1.5rem);
+  padding-left: var(--spacing-24, 1.5rem);
   background: var(--light, #ffffff);
   border-left: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   transition: 0.3s;

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

@@ -41,13 +41,13 @@ export class YooFormCreatorLivePreviewComponent {
   renderHeader() {
     var _a;
     return [
-      h("yoo-header", null,
-        h("yoo-navbar", null,
+      h("yoo-header", { class: "secondary" },
+        h("yoo-navbar", { class: { 'top-navbar': true, 'no-heading': this.hideHeading } },
           h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
             !this.hideHeading && h("div", { class: "heading" },
               this.mode === 'fullscreen' && this.renderFullscreenHeader(),
               this.mode === 'panel' && this.renderPanelHeader()),
-            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
+            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && !this.hidden && this.renderLanguageSelector(),
             this.showDevices && this.renderSubheader())))
     ];
   }
@@ -107,7 +107,7 @@ export class YooFormCreatorLivePreviewComponent {
   }
   render() {
     return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } },
-      !this.hideHeading && this.renderHeader(),
+      this.renderHeader(),
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
         this.renderContent(),
         !!this.logo && (h("div", { class: "image-container" },

package/dist/collection/components/form-creator/form-creator-overlay/form-creator-overlay.css

@@ -215,6 +215,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .overlay .overlay-background {
   z-index: -1;
+  margin-top: -1px;
+  margin-left: -2px;
   background: var(--dark, #000000);
   opacity: 0.8;
   position: absolute;
@@ -257,7 +259,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   right: 0;
   bottom: auto;
   left: 0;
-  height: 3.0625rem;
+  height: 3rem;
+  margin-left: 25.05rem;
   background: var(--dark, #000000);
   opacity: 0.8;
 }

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

@@ -1,5 +1,5 @@
 import { ALL_MOBILE_FORM_FIELDS, FormCreatorOptions, FormFieldType, ScoringCategory } from '@shared/interfaces';
-import { findField, generateUniqueKey, getCustomName, getUUID, isNullOrUndefined, isValueALegacyTranslationKey, isValueATranslationKey, showAlert, translate, translateMulti } from '@shared/utils';
+import { findField, generateUniqueKey, getCustomName, getUUID, isNullOrUndefined, isValueALegacyTranslationKey, isValueATranslationKey, showAlert, translate, translateMulti, truncateMarkdown } from '@shared/utils';
 import { cloneDeep, compact, get, isArray, isString, set } from 'lodash-es';
 import { isAnnotationEmpty } from '../../../utils/helpers/annotations-helpers';
 export const starRatingMaxDefault = 5;
@@ -1137,7 +1137,8 @@ export function addRow(items, { title, order, entity, location, path, slideIndex
   else if (isValueTooLong) {
     const valueRemovedHTML = (_a = entity === null || entity === void 0 ? void 0 : entity.title) === null || _a === void 0 ? void 0 : _a.replace(/(<([^>]+)>)/ig, '');
     const titleTranslation = (_b = items.find((t) => ('%' + t.key + '%' === (entity === null || entity === void 0 ? void 0 : entity.title) || '%' + t.key + '%' === valueRemovedHTML))) === null || _b === void 0 ? void 0 : _b.value;
-    errorMessages.push(`• ${lessonTitle ? `${translateMulti(lessonTitle)} -` : ''} ${translateMulti(location)} - ${translateMulti(titleTranslation || (entity === null || entity === void 0 ? void 0 : entity.title))} - ${path}`);
+    const titleTruncated = truncateMarkdown(translateMulti(titleTranslation || (entity === null || entity === void 0 ? void 0 : entity.title)), 50, '...');
+    errorMessages.push(`• ${lessonTitle ? `${translateMulti(lessonTitle)} -` : ''} ${translateMulti(location)} - ${titleTruncated} - ${path}`);
   }
   return hasBeenEdited;
 }

package/dist/collection/feature-communicate/chat/chat/chat.css

@@ -350,7 +350,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: var(--spacing-32, 2rem);
   height: var(--spacing-32, 2rem);
   padding-right: var(--spacing-16, 1rem);
-  --stroke-width-circle: var(--spacing-04, 0.25rem);
+  --stroke-width-circle: 6;
 }
 :host .heading-container {
   width: calc(100% - var(--logo-05, 3rem));

package/dist/collection/feature-learn/learning/card-course/column/card-course.js

@@ -36,8 +36,7 @@ export class YooCardCourseComponent {
       isSelfAssigned && !isFinished && !isOngoing && h("yoo-icon", { color: "app-color", name: "bookmark", size: iconSize }))))));
   }
   renderProgressBar() {
-    const progress = getCourseProgress(this.entry);
-    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: progress });
+    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: getCourseProgress(this.entry) });
   }
   renderCourseTitle(plan) {
     return [h("div", { class: "course-title" }, translateMulti(plan.title)), plan.description && h("div", { class: "course-description" }, translateMulti(plan.description))];
@@ -84,11 +83,7 @@ export class YooCardCourseComponent {
       return [this.renderProgressBar(), this.renderCourseLessonAndPointInfo(dueDate)];
     }
     else {
-      return [
-        this.renderEarnedCoursePoints(),
-        this.renderCourseLessonAndPointInfo(dueDate),
-        this.renderProgressBar()
-      ];
+      return [this.renderEarnedCoursePoints(), this.renderCourseLessonAndPointInfo(dueDate), this.renderProgressBar()];
     }
   }
   renderCourseContainer() {
@@ -98,9 +93,7 @@ export class YooCardCourseComponent {
     if (lessonsCount === 0) {
       lessonsCount = get(plan, 'lessonsCount', 0);
     }
-    return (h("div", { class: { 'content-container': true, 'profile-summary': this.profileSummary } }, this.profileSummary
-      ? [this.renderCourseContent(dueDate), this.renderCourseTitle(plan)]
-      : [this.renderCourseTitle(plan), this.renderCourseContent(dueDate)]));
+    return (h("div", { class: { 'content-container': true, 'profile-summary': this.profileSummary } }, this.profileSummary ? [this.renderCourseContent(dueDate), this.renderCourseTitle(plan)] : [this.renderCourseTitle(plan), this.renderCourseContent(dueDate)]));
   }
   render() {
     var _a;

package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.css

@@ -283,6 +283,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --svg-width: 1.8rem;
   --svg-height: 1.8rem;
   --progress-bar-color: var(--app-color, #5a30f4);
+  --stroke-width-circle: 2;
   padding: 0 var(--spacing-08, 0.5rem);
 }
 :host .card-container .content-container .footer .time-indicator .time-text {

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

@@ -226,22 +226,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --line-height: initial;
 }
 :host .outer-container .progress {
-  display: flex;
-  justify-content: space-between;
-}
-:host .outer-container .progress .quick-task-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }
-:host .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --svg-width: 1rem;
+:host .outer-container .progress yoo-progress-bar {
   --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate {
+:host .outer-container .progress yoo-truncate {
   margin: 0 var(--spacing-08, 0.5rem);
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate.app-color {
+:host .outer-container .progress yoo-truncate.app-color {
   color: var(--app-color, #5a30f4);
 }
 :host .outer-container .tags yoo-tag {

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

@@ -69,12 +69,11 @@ export class YooAnnouncementHeadingComponent {
     var _a, _b;
     const announcementProgress = getMissionProgress(this.announcement);
     const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
+    if (!this.isLayoutFeed && (announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
       return h("div", { class: "progress" },
-        h("div", { class: "quick-task-progress" },
-          h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
-          h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
-            h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max })))));
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
+        h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
     }
   }
   renderDueDate(dueDate) {

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css

@@ -253,8 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .content yoo-progress-bar {
   --font-size-16: var(--font-size-12, 0.75rem);
   --progress-bar-color: var(--app-color, #5a30f4);
-  --svg-width: 1rem;
-  --stroke-width-circle: 2;
+  --svg-width: var(--spacing-16, 1rem);
   margin: 0;
 }
 :host .outer-container .content .tags {

package/dist/collection/feature-operate/mission/healthscore/healthscore.css

@@ -319,7 +319,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: grid;
   grid-template-areas: "header header" "overview cards";
   grid-template-rows: auto 1fr;
-  grid-template-columns: calc(40% - var(--spacing-08)) 1fr;
+  grid-template-columns: calc(40% - var(--spacing-08, 0.5rem)) 1fr;
   align-items: center;
   background-color: var(--light, #ffffff);
 }
@@ -358,12 +358,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([display-mode=large]) .overview {
   position: relative;
-  display: inline-grid;
-  grid-template-columns: auto 1fr auto;
   align-items: baseline;
-  width: 100%;
+  width: calc(100% - var(--spacing-16, 1rem));
+  margin: 0 auto;
   text-align: center;
 }
+:host([display-mode=large]) .overview.with-indicators {
+  display: inline-grid;
+  grid-template-columns: auto 1fr auto;
+}
+:host([display-mode=large]) .overview:not(.with-indicators) yoo-progress-bar {
+  max-width: 85%;
+}
 :host([display-mode=large]) .overview .indicator {
   min-width: 2rem;
   padding: var(--spacing-08, 0.5rem);
@@ -382,7 +388,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([display-mode=large]) .overview yoo-progress-bar {
   --stroke-width-circle: 6;
-  --svg-width: calc(100% - var(--spacing-04));
   --progress-value-font-size: var(--font-size-54, 3.375rem);
 }
 :host([display-mode=large]) .overview yoo-progress-bar[metric=points].show-bar-points {
@@ -390,16 +395,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --trail-bar-display: block;
 }
 :host([display-mode=large]) .overview .sub-value {
-  bottom: var(--spacing-04, 0.25rem);
+  bottom: 0;
+  transform: translateY(50%);
 }
 :host([display-mode=large]) .subtitle {
+  margin: var(--spacing-16, 1rem) 0;
   color: var(--stable, #adadad);
   font-size: var(--font-size-16, 1rem);
   text-align: center;
 }
 :host([display-mode=large]) yoo-numbers-display {
   display: block;
-  width: calc(100% - var(--spacing-16));
+  width: calc(100% - var(--spacing-16, 1rem));
   margin: var(--spacing-16, 1rem);
 }
 :host([display-mode=large]) yoo-button {

package/dist/collection/feature-operate/mission/healthscore/healthscore.js

@@ -54,20 +54,21 @@ export class YooHealthscoreComponent {
     const subValue = (flipScoreDisplay ? [scoreDisplay, extraScore].reverse() : [scoreDisplay, extraScore]).join(' ');
     return (h("yoo-progress-bar", { shape: progressShape, class: { 'show-bar-points': hasMaxPoints }, animated: this.animated, value: globalScore, metric: globalScoreUnit, horizontalAlign: "center", allowNonAvailableValue: true, maxValue: globalMaxScore, numberDecimalAfterComaProgressValue: numberDecimalAfterComa, progressAnimationDuration: progressAnimationDelay }, isFinite(subScore) && h("span", { class: "sub-value" }, subValue)));
   }
-  renderIndicator(hasChanges, showIndicator, type) {
+  renderIndicator(hasChanges, type) {
     const isHigh = type === 'HIGH';
     const getIndicatorStyle = (color) => ({ 'change-indicator': true, [color]: hasChanges, 'dark': !hasChanges });
-    return h("section", { class: "indicator" }, showIndicator && h("span", { class: getIndicatorStyle(type === 'HIGH' ? 'success' : 'danger') }, hasChanges ? translate(`YOOBIC${type}`) : isHigh ? this.overviewProgressConfig.globalMaxScore : 0));
+    return h("section", { class: "indicator" },
+      h("span", { class: getIndicatorStyle(type === 'HIGH' ? 'success' : 'danger') }, hasChanges ? translate(`YOOBIC${type}`) : isHigh ? this.overviewProgressConfig.globalMaxScore : 0));
   }
   renderOverview() {
     const { helpDescriptionTK, change, globalMaxScore, globalScoreUnit } = this.overviewProgressConfig;
     const hasChanges = !!isFinite(change) && this.isLargeMode;
     const hasMaxPoints = isFinite(globalMaxScore) && globalScoreUnit === 'points';
     const showIndicator = hasChanges || hasMaxPoints;
-    return h("section", { class: "overview" },
-      this.renderIndicator(hasChanges, showIndicator, 'LOW'),
+    return h("section", { class: { overview: true, 'with-indicators': showIndicator } },
+      showIndicator && this.renderIndicator(hasChanges, 'LOW'),
       this.renderProgressOverview(hasMaxPoints),
-      this.renderIndicator(hasChanges, showIndicator, 'HIGH'),
+      showIndicator && this.renderIndicator(hasChanges, 'HIGH'),
       hasChanges && [
         helpDescriptionTK && this.renderHelpButton(),
         h("yoo-display-increment", { changeValue: change })

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

@@ -239,7 +239,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
 }
 :host .sub-heading .action-plan-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }

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

@@ -26,7 +26,7 @@ export class Tag {
     await this.dropToZone(this.zones.find(zone => zone.isTagsZone));
   }
   isTagOverlapping(zone) {
-    return Draggable.hitTest(this.element, zone.element.parentElement, zone.config.threshold || 0);
+    return Draggable.hitTest(this.element, zone.element, zone.config.threshold || 0);
   }
   createTagElement() {
     const { getColorTag, extraTagsClasses } = this.config;
@@ -53,7 +53,7 @@ export class Tag {
   }
   initDraggable() {
     const { hostElement } = this.zonesConfig;
-    const { clickToDrop, clickTagExtraAction, pressTagExtraAction, releaseTagExtraAction, resetTagExtraAction, dragTagExtraAction } = this.config || {};
+    const { clickToDrop, clickTagExtraAction, pressTagExtraAction, dragStartTagExtraAction, releaseTagExtraAction, resetTagExtraAction, dragTagExtraAction } = 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));
@@ -73,6 +73,9 @@ export class Tag {
           clickOnTag();
         }
       },
+      onDragStart: () => {
+        dragStartTagExtraAction === null || dragStartTagExtraAction === void 0 ? void 0 : dragStartTagExtraAction(this);
+      },
       onPress: () => {
         Tag.scale('up', this.element);
         pressTagExtraAction === null || pressTagExtraAction === void 0 ? void 0 : pressTagExtraAction(this);
@@ -80,15 +83,14 @@ export class Tag {
       onDrag: () => {
         this.zones.forEach(zone => {
           if (zone === null || zone === void 0 ? void 0 : zone.element) {
-            const { element } = zone;
             if (this.isTagOverlapping(zone) && !zone.isDropZoneFull) {
               this.element.color = this.config.getColorTag(this.value, zone.index);
-              if (!element.classList.contains('hit') && zone.id !== this.zone.id) {
-                element.classList.add('hit');
+              if (!zone.element.hasAttribute('hit') && zone.id !== this.zone.id) {
+                zone.element.setAttribute('hit', 'true');
               }
             }
-            else if (zone.hit) {
-              element.classList.remove('hit');
+            else if (!this.isTagOverlapping(zone)) {
+              zone.element.removeAttribute('hit');
             }
           }
         });
@@ -141,15 +143,15 @@ export class Tag {
   }
   static async scale(scaleType, element) {
     const isScaledDown = scaleType === 'down';
-    await gsapTo(element, .25, {
-      scale: isScaledDown ? 1 : 1.125,
+    await gsapTo(element, .2, {
+      scale: isScaledDown ? 1 : 1.065,
       zIndex: isScaledDown ? 'auto' : 200
     });
+    element.classList.toggle('active', !isScaledDown);
   }
-  static scaleUpDown(element, callback) {
-    this.scale('up', element).then(() => {
-      this.scale('down', element).then(() => callback === null || callback === void 0 ? void 0 : callback());
-    });
+  static async scaleUpDown(element) {
+    await this.scale('up', element);
+    await this.scale('down', element);
   }
   async release(fromReset = false) {
     if (!fromReset) {
@@ -158,7 +160,7 @@ export class Tag {
           this.lastZone = this.zone;
           this.zone = zone;
         }
-        this.zone.element.classList.remove('hit');
+        this.zone.element.removeAttribute('hit');
       });
     }
     this.addToZone();
@@ -197,26 +199,23 @@ export class Tags extends Dropzones {
     if (tag) {
       const { element, zone } = tag;
       tag.removeFromZone(zone);
-      if (zone.element.contains(element)) {
+      if (zone.element.contains(element) && zone.tagsCount) {
         element.color = 'danger';
-        Tag.scaleUpDown(element, () => {
-          zone.element.removeChild(element);
-          this.tags = this.tags.filter(t => t.id !== tag.id);
-        });
+        await Tag.scaleUpDown(element);
+        zone.element.removeChild(element);
+        this.tags = this.tags.filter(t => t.id !== tag.id);
       }
-      this.checkOverflowingTags();
       (_c = (_b = this.tagConfig).onTagDeleted) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
   }
   async addTagFromValue(value) {
+    var _a, _b;
     const newTag = new Tag(Object.assign(this.tagConfig, { extraTagsClasses: 'new' }), value, this.tagsZone, this.zonesConfig);
     this.tags.push(newTag);
     newTag.element.color = 'success';
-    Tag.scaleUpDown(newTag.element, () => {
-      var _a, _b;
-      (_b = (_a = this.tagConfig).onTagAdded) === null || _b === void 0 ? void 0 : _b.call(_a);
-      newTag.element.color = this.tagConfig.getColorTag(value, newTag.zone.index);
-    });
+    await Tag.scaleUpDown(newTag.element);
+    (_b = (_a = this.tagConfig).onTagAdded) === null || _b === void 0 ? void 0 : _b.call(_a);
+    newTag.element.color = this.tagConfig.getColorTag(value, newTag.zone.index);
   }
   async updateTags(opts) {
     let newValue;
@@ -224,8 +223,10 @@ export class Tags extends Dropzones {
     const { newValues, oldValues } = opts;
     const hasNewValue = (((newValues === null || newValues === void 0 ? void 0 : newValues.length) || 0) > ((oldValues === null || oldValues === void 0 ? void 0 : oldValues.length) || 0)) || hasDuplicates(oldValues);
     const hasDeletedValue = ((newValues === null || newValues === void 0 ? void 0 : newValues.length) || 0) < ((oldValues === null || oldValues === void 0 ? void 0 : oldValues.length) || 0);
+    const hasDuplicatedValues = hasDuplicates(newValues);
     hasNewValue && (newValue = getNewValue(oldValues, newValues));
     hasDeletedValue && (deletedValues = getDeletedValues(oldValues, newValues));
+    this.zonesConfig.tagZoneConfig.hasOverflow && (this.tagsZone.element.style.overflow = 'hidden');
     if (newValue) {
       this.addTagFromValue(newValue);
     }
@@ -237,14 +238,21 @@ export class Tags extends Dropzones {
         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 && tag.value !== newValue) {
+        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, () => tag.element.color = this.tagConfig.getColorTag(newValue, tag.zone.index));
+          Tag.scaleUpDown(tag.element).then(() => {
+            tag.element.color = this.tagConfig.getColorTag(newValue, tag.zone.index);
+          });
         }
       });
     }
+    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));
+    }
   }
   getElements(selector, containerElement) {
     var _a;
@@ -259,19 +267,16 @@ export class Tags extends Dropzones {
     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) {
-        this.hideOverflowingTagsInZone(zone.element);
+        zone.isTagsZone && (zone.element.style.removeProperty('overflow'));
+        this.hideOverflowingTagsInZone(zone.element, (te) => Tag.scaleUpDown(te));
       }
     });
   }
   async init() {
-    if (this === null || this === void 0 ? void 0 : this.tagConfig) {
+    if (this.tagConfig) {
       this.populate();
-      if (this.hostElement['animated'] && this.hostElement['isVisible'] && this.tagsZone) {
-        await this.animate();
-      }
-      else {
-        this.checkOverflowingTags();
-      }
+      this.setTagsZoneOverflow(true);
+      await this.animate();
     }
   }
   populate() {
@@ -285,30 +290,32 @@ export class Tags extends Dropzones {
   }
   async animate() {
     var _a, _b;
-    const elements = (_a = this.droppableTagElements) === null || _a === void 0 ? void 0 : _a.filter(e => e);
-    const hideOverflowingTag = (te) => this.hideOverflowingTagInZone(this.tagsZone.element, te);
-    const firstTagAnimationFinishedCB = () => { var _a, _b; return (_b = (_a = this.tagConfig).onFirstTagAnimationFinished) === null || _b === void 0 ? void 0 : _b.call(_a); };
-    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,
-      opacity: 0
-    }, {
-      x: 0,
-      opacity: 1,
-      stagger: {
-        each: .25,
-        onStart() {
-          const element = this.targets()[0];
-          if (element.id === firstElement.id) {
-            firstTagAnimationFinishedCB();
+    if (this.hostElement['animated'] && this.hostElement['isVisible'] && this.tagsZone) {
+      const elements = (_a = this.droppableTagElements) === null || _a === void 0 ? void 0 : _a.filter(e => e);
+      const { onFirstTagAnimationFinished, onTagsAnimationFinished } = this.tagConfig || {};
+      const hideOverflowingTag = (tagElement) => this.hideOverflowingTagInZone(this.tagsZone.element, tagElement, () => Tag.scaleUpDown(tagElement));
+      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,
+        opacity: 0
+      }, {
+        x: 0,
+        opacity: 1,
+        stagger: {
+          each: .25,
+          onStart() {
+            var _a, _b;
+            const element = (_a = this.targets()) === null || _a === void 0 ? void 0 : _a[0];
+            hideOverflowingTag(element);
+            if (element.id === firstElement.id) {
+              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)) {
+              onTagsAnimationFinished === null || onTagsAnimationFinished === void 0 ? void 0 : onTagsAnimationFinished();
+            }
           }
-          hideOverflowingTag(element);
         }
-      },
-      onComplete: () => {
-        var _a, _b;
-        (_b = (_a = this.tagConfig).onTagsAnimationFinished) === null || _b === void 0 ? void 0 : _b.call(_a);
-      }
-    });
+      });
+    }
   }
 }