@yoobic/yobi 8.4.0-0 → 8.4.0-3

package/dist/cjs/{index-d2efcff1.js → index-505040aa.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-require('./index-32730381.js');
+require('./index-66c4a666.js');
 const lodash = require('./lodash-72d493b9.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-c3b45c50.js');
-const overlays = require('./overlays-f7624b4d.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-8cfc3387.js');
+const overlays = require('./overlays-bc0e1a98.js');
 
 class Dropzone {
   constructor(config, element, index) {
@@ -12,6 +12,9 @@ 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);
@@ -23,8 +26,7 @@ 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'] || {};
@@ -35,8 +37,7 @@ 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);
@@ -71,16 +72,11 @@ 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) {
@@ -98,20 +94,12 @@ class Dropzones {
 
 class Tag {
   constructor(config, value, zone, zonesConfig) {
-    var _a, _b;
     this.config = config;
     this.value = value;
     this.zone = zone;
     this.zonesConfig = zonesConfig;
     this.id = overlays.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);
@@ -122,13 +110,24 @@ class Tag {
   isTagOverlapping(zone) {
     return overlays.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: overlays.translateMulti(this.value),
@@ -136,14 +135,17 @@ 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;
@@ -180,9 +182,7 @@ 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');
@@ -198,19 +198,16 @@ 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);
         }
       }
     }
@@ -263,7 +260,8 @@ class Tag {
     this.zones
       .map(z => z.element)
       .forEach(e => !e.firstChild && e.classList.remove('has-tag'));
-    overlays.gsapSet(this.element, { x: 0, y: 0 });
+    await this.element.componentOnReady();
+    overlays.gsapSet(this.element, { x: this.droppedTagXPosition, y: 0 });
     Tag.scaleUpDown(this.element);
   }
 }
@@ -298,7 +296,7 @@ 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);
     }
@@ -323,31 +321,22 @@ class Tags extends Dropzones {
     hasDeletedValue && (deletedValues = draggableTagsHelpers.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) && !lodash.isEqual(newValues, oldValues) && !draggableTagsHelpers.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) && !lodash.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;
@@ -363,7 +352,7 @@ 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));
       }
     });
   }
@@ -374,19 +363,6 @@ class Tags extends Dropzones {
       await this.animate();
     }
   }
-  static prepareAutoScroll(hostElement) {
-    if ((hostElement === null || hostElement === void 0 ? void 0 : hostElement.shadowRoot) && overlays.isWeb() && !(hostElement === null || hostElement === void 0 ? void 0 : hostElement['readonly'])) {
-      const wrapperElement = overlays.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'];
@@ -402,6 +378,7 @@ 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 && draggableTagsHelpers.prepareAutoScroll(this.hostElement);
       const firstElement = elements === null || elements === void 0 ? void 0 : elements[0];
       overlays.gsapFromTo(elements, .75, {
         x: (_b = this.hostElement) === null || _b === void 0 ? void 0 : _b.clientWidth,
@@ -416,10 +393,10 @@ 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();
             }
           }
@@ -433,5 +410,4 @@ function initTags(tagConfig, zonesConfig) {
   return new Tags(tagConfig, zonesConfig);
 }
 
-exports.Tags = Tags;
 exports.initTags = initTags;

package/dist/cjs/{index-001d2377.js → index-5ecafe7a.js}

@@ -2153,7 +2153,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                     BUILD.shadowDom &&
                     BUILD.shadowDomShim &&
                     cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-                    style = await Promise.resolve().then(function () { return require('./shadow-css-156bae30.js'); }).then((m) => m.scopeCss(style, scopeId, false));
+                    style = await Promise.resolve().then(function () { return require('./shadow-css-2ffcf6b2.js'); }).then((m) => m.scopeCss(style, scopeId, false));
                 }
                 registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
                 endRegisterStyles();

package/dist/cjs/{index-32730381.js → index-66c4a666.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const overlays = require('./overlays-f7624b4d.js');
+const overlays = require('./overlays-bc0e1a98.js');
 const lodash = require('./lodash-72d493b9.js');
 
 function shiftSlidesToNext(activeSlideIndex, slides, cachedSlides = 1) {
@@ -4812,7 +4812,7 @@ const toOptions$1 = (options) => ({
   byminute: 0,
   bysecond: 0,
   freq: toFreq(options === null || options === void 0 ? void 0 : options.frequency),
-  interval: options === null || options === void 0 ? void 0 : options.interval,
+  interval: (options === null || options === void 0 ? void 0 : options.interval) || 1,
   ...((options === null || options === void 0 ? void 0 : options.frequency) === 'MONTH' ? toMonthOptions(options === null || options === void 0 ? void 0 : options.monthOptions) : (options === null || options === void 0 ? void 0 : options.frequency) === 'YOOBICWEEK' ? toWeekOptions(options === null || options === void 0 ? void 0 : options.weekOptions) : {})
 });
 

package/dist/cjs/{index-5790c953.js → index-8ab047fa.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-50ff0b20.js');
-require('./index-32730381.js');
+const index = require('./index-03502f1f.js');
+require('./index-66c4a666.js');
 const lodash = require('./lodash-72d493b9.js');
-const annotationsHelpers = require('./annotations-helpers-6cf88388.js');
-const overlays = require('./overlays-f7624b4d.js');
+const annotationsHelpers = require('./annotations-helpers-fb554cca.js');
+const overlays = require('./overlays-bc0e1a98.js');
 
 const starRatingMaxDefault = 5;
 function filterSequentialFields(fieldCondition) {

package/dist/cjs/index-aedee142.js

@@ -0,0 +1,4 @@
+'use strict';
+
+require('./overlays-bc0e1a98.js');
+