@danielgindi/selectbox 2.0.26 → 2.0.27

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.26
+ * @danielgindi/selectbox 2.0.27
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -142,7 +142,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 /** */
 
 /** @type {DropList.Options} */
-let defaultOptions$1 = {
+const DefaultOptions$1 = {
     baseClassName: 'droplist',
 
     autoItemBlur: true,
@@ -201,7 +201,7 @@ class DropList {
      * @param {DropList.Options} options
      */
     constructor(options) {
-        const o = { ...defaultOptions$1 };
+        const o = { ...DefaultOptions$1 };
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)
@@ -3406,6 +3406,7 @@ const inputBackbufferCssProps = [
  * @property {string} [labelProp='label']
  * @property {string} [valueProp='value']
  * @property {string} [multiItemLabelProp='short_label']
+ * @property {'after'|'before'|'none'} [multiItemRemovePosition='after']
  * @property {number} [maxMultiItems] maximum number of multi items. The rest will get a single item to represent.
  * @property {function(count: number, items: DropList.ItemBase[]):string} [multiItemsRestLabelProvider] label for the item representing the rest of the items.
  * @property {DropList.ItemBase[]|null} [items] initial items
@@ -3428,7 +3429,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [closeListWhenLoading] whether we should close the list automatically when loading
  * @property {string[]} [clearInputWhen=['single_close','multi_select_single']] clear input box when closing the droplist or selecting <code>['single_close', 'multi_close', 'multi_select_single']</code>
  * */
-const defaultOptions = {
+const DefaultOptions = {
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
@@ -3455,6 +3456,7 @@ const defaultOptions = {
     labelProp: 'label',
     valueProp: 'value',
     multiItemLabelProp: 'short_label',
+    multiItemRemovePosition: 'after',
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
@@ -3513,7 +3515,7 @@ class SelectBox {
      * @param {SelectBox.Options} options
      */
     constructor(options) {
-        const o = { ...defaultOptions };
+        const o = { ...DefaultOptions };
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)
@@ -3551,6 +3553,7 @@ class SelectBox {
             labelProp: o.labelProp,
             valueProp: o.valueProp,
             multiItemLabelProp: o.multiItemLabelProp,
+            multiItemRemovePosition: o.multiItemRemovePosition,
 
             maxMultiItems: o.maxMultiItems,
             multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -4463,6 +4466,18 @@ class SelectBox {
     setMultiItemLabelProp(prop) {
         const p = this._p;
         p.multiItemLabelProp = prop;
+        this._scheduleSync('render_items');
+        return this;
+    }
+
+    /**
+     * @param {'before'|'after'|'none'} position
+     * @returns {SelectBox}
+     */
+    setMultiItemRemovePosition(position) {
+        const p = this._p;
+        p.multiItemRemovePosition = position;
+        this._scheduleSync('render_items');
         return this;
     }
 
@@ -6183,22 +6198,29 @@ class SelectBox {
         if (label === false)
             return null;
 
+        const elRemove = createElement('span', {
+            class: `${p.baseClassName}__item_remove`,
+            role: 'presentation',
+        });
+
         const itemEl = createElement('li',
             {
                 class: `${p.baseClassName}__item`,
                 tabindex: '0',
                 title: label,
             },
-            [
-                createElement('span', {
-                    class: `${p.baseClassName}__item_remove`,
-                    role: 'presentation',
-                }),
-            ],
         );
 
+        if (p.multiItemRemovePosition === 'before') {
+            itemEl.appendChild(elRemove);
+        }
+
         this._renderMultiItemContent(item, itemEl);
 
+        if (p.multiItemRemovePosition === 'after') {
+            itemEl.appendChild(elRemove);
+        }
+
         itemEl[ItemSymbol] = item;
 
         return itemEl;