diff --git a/ui/widgets/nuxeo-selectivity.js b/ui/widgets/nuxeo-selectivity.js
index 4f3f5ba693..3921e576c7 100644
--- a/ui/widgets/nuxeo-selectivity.js
+++ b/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,8 @@ 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 +3431,42 @@ typedArrayTags[weakMapTag] = false;
item,
),
));
-
+
this.input.parentNode.insertBefore(el, this.input);
+ const textElement = el.querySelector('.selectivity-multiple-selected-item.selectivity-text-container')
+ const containerElement = this._getHTMLRootNode(textElement)
+ let containerElementWidth = this._calculateElementWidth(containerElement)
+ const childNodes = Array.from(textElement.children);
+ const otherElementWidth = childNodes.reduce((totalWidth, currentValue) => {
+ if (currentValue !== this && !currentValue.shadowRoot) {
+ totalWidth += currentValue.offsetWidth;
+ }
+ return totalWidth;
+ }, 1);
+ containerElementWidth -= otherElementWidth ;
+ 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
*/
@@ -5756,7 +5791,6 @@ typedArrayTags[weakMapTag] = false;
newValue,
(data) => {
this._data = this.validateData(data);
-
if (options.triggerChange !== false) {
this.triggerChange();
}
@@ -6578,11 +6612,11 @@ typedArrayTags[weakMapTag] = false;
*
* @appliesMixin Polymer.IronFormElementBehavior
* @appliesMixin Polymer.IronValidatableBehavior
- * @memberof Nuxeo
+ * @memberof Nuxeo
* @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 +7141,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;
+ }
@@ -7170,10 +7212,16 @@ typedArrayTags[weakMapTag] = false;
multipleSelectedItem: (opts) => {
const extraClass = opts.highlighted ? ' highlighted' : '';
- return `
+ `)
},
},
};
@@ -7188,6 +7236,7 @@ typedArrayTags[weakMapTag] = false;
options.allowClear = !this.required && !this.multiple; // allowClear only works on single-value mode
}
+
if (this.data) {
options.items = this._wrap(this.data);
}
@@ -7264,8 +7313,12 @@ typedArrayTags[weakMapTag] = false;
});
this._visibilityObserver.observe(this);
this._readonlyChanged();
+ this.multiple && this._scrollParent.addEventListener('dialog-opened',this._reCalculateWidth.bind(this))
+ this.multiple && this.addEventListener('iron-resize', this._reCalculateWidth);
}
+
+
disconnectedCallback() {
this.$.input.removeEventListener('selectivity-change', this._updateSelectionHandler);
this._updateSelectionHandler = null;
@@ -7273,9 +7326,21 @@ typedArrayTags[weakMapTag] = false;
this._selectivity = null;
this._visibilityObserver.unobserve(this);
this._scrollParent.removeEventListener('scroll', this._updateDropdownPosition.bind(this));
+ this._scrollParent.removeEventListener('dialog-opened',this._reCalculateWidth.bind(this))
+ this.removeEventListener('iron-resize', this._resize);
super.disconnectedCallback();
}
+
+ _reCalculateWidth(){
+ setTimeout(() => {
+ this.multiple &&
+ this._selectivity &&
+ this._selectivity.rerenderSelection();
+ }, 0);
+
+ }
+
_updateDropdownPosition() {
if (this._selectivity) {
this._selectivity.positionDropdown();