ELEMENTS-1672: Apply text-overflow and tooltip to multiple selected i…

…tems in nuxeo-selectivity

ui/widgets/nuxeo-selectivity.js

@@ -25,6 +25,8 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import {I18nBehavior} from "../nuxeo-i18n-behavior";
 import '@polymer/iron-icon/iron-icon.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import './nuxeo-tooltip.js';
 
 /**
  * @license
@@ -2439,7 +2441,7 @@ typedArrayTags[weakMapTag] = false;
             resultsHtml = this.selectivity.template('tagExists');
           } else if (!resultsHtml && !options.add) {
             resultsHtml = this.selectivity.template('noResults', { term: options.term });
-          } 
+          }
           if (resultsHtml) {
             this.resultsContainer.innerHTML = '';
             removeElement(this.$('.selectivity-loading'));
@@ -3428,10 +3430,35 @@ typedArrayTags[weakMapTag] = false;
               item,
             ),
           ));
-
+             
           this.input.parentNode.insertBefore(el, this.input);
+          const textElement = el.querySelector('.selectivity-multiple-selected-item.selectivity-text-container') 
+          const elementWidth = this._calculateElementWidth(textElement);
+          const containerElement = this._getHTMLRootNode(textElement)
+          const containerElementWidth = this._calculateElementWidth(containerElement)
+           if(elementWidth > 0 && elementWidth > containerElementWidth)   {
+            textElement.setAttribute('style', `max-width:${containerElementWidth}px`);
+           }
+        },
+
+        _getHTMLRootNode(element){
+          let currentElement = element;
+          const parentElement =  currentElement.closest(".selectivity-multiple-input-container")
+          return parentElement;
         },
 
+
+
+        _calculateElementWidth(element){
+          const currrentElement = getComputedStyle(element);
+          const paddingX = parseFloat(currrentElement.paddingLeft) + parseFloat(currrentElement.paddingRight);
+          const borderX = parseFloat(currrentElement.borderLeftWidth) + parseFloat(currrentElement.borderRightWidth);
+          const scrollBarWidth = element.offsetWidth - element.clientWidth;
+          const elementWidth = (element .offsetWidth  - paddingX - borderX - scrollBarWidth -2) ;
+          return elementWidth
+        },
+
+
         /**
      * @private
      */
@@ -6582,7 +6609,7 @@ typedArrayTags[weakMapTag] = false;
    * @demo demo/nuxeo-selectivity/index.html
    */
   class SelectivityElement
-    extends mixinBehaviors([I18nBehavior, IronFormElementBehavior, IronValidatableBehavior], Nuxeo.Element) {
+    extends mixinBehaviors([I18nBehavior, IronFormElementBehavior, IronValidatableBehavior, IronResizableBehavior], Nuxeo.Element) {
 
     static get is() {
       return 'nuxeo-selectivity';
@@ -7107,6 +7134,14 @@ typedArrayTags[weakMapTag] = false;
             height: 2px;
             background-color: var(--nuxeo-primary-color, #0066ff);
           }
+          .selectivity-text-container {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .multipleSelectedItemText {
+            display:inline-block;
+          }
         </style>
 
         <nuxeo-operation id="op" op="[[operation]]" enrichers="[[enrichers]]" headers="[[headers]]"></nuxeo-operation>
@@ -7170,10 +7205,17 @@ typedArrayTags[weakMapTag] = false;
 
           multipleSelectedItem: (opts) => {
             const extraClass = opts.highlighted ? ' highlighted' : '';
-            return `<span class="selectivity-multiple-selected-item${extraClass}"
+            const tooltipClass = this.readonly ? `multipleSelectedItemText`:''
+            const toolTipElement = this.readonly ? `<nuxeo-tooltip position="top" offset="0" animation-delay="0">
+            ${this.selectionFormatter(opts.item || opts)}
+            </nuxeo-tooltip>`:''
+            return (`<span class="${tooltipClass}"><span class="selectivity-multiple-selected-item${extraClass} selectivity-text-container"
               data-item-id="${escapeHTML(opts.id)}">${opts.removable ? 
                 `<a class="preserve-white-space selectivity-multiple-selected-item-remove"><span class="selectivity-remove" role="button" aria-label="${this.i18n('command.remove')}"></span></a>` 
-                : ``}${this.selectionFormatter(opts.item || opts)}</span>`
+                : ``}${this.selectionFormatter(opts.item || opts)}</span>
+                ${toolTipElement}
+                </span>
+                `)
           },
         },
       };
@@ -7264,6 +7306,7 @@ typedArrayTags[weakMapTag] = false;
       });
       this._visibilityObserver.observe(this);
       this._readonlyChanged();
+      this.addEventListener('iron-resize', this._resize);
     }
 
     disconnectedCallback() {
@@ -7273,9 +7316,16 @@ typedArrayTags[weakMapTag] = false;
       this._selectivity = null;
       this._visibilityObserver.unobserve(this);
       this._scrollParent.removeEventListener('scroll', this._updateDropdownPosition.bind(this));
+      this.removeEventListener('iron-resize', this._resize);
       super.disconnectedCallback();
     }
 
+    _resize() {
+      this._selectivity && this._selectivity.options.readOnly && 
+      this._selectivity._reset() && 
+      this._selectivity.rerenderSelection();
+    }
+
     _updateDropdownPosition() {
       if (this._selectivity) {
         this._selectivity.positionDropdown();