@danielgindi/selectbox 2.0.26 → 2.0.28

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.26
+ * @danielgindi/selectbox 2.0.28
  * 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)
@@ -3388,6 +3388,7 @@ const inputBackbufferCssProps = [
  * @property {string|string[]} [additionalClasses]
  * @property {'ltr'|'rtl'|'auto'} [direction='auto']
  * @property {boolean} [disabled=false] Should start as disabled?
+ * @property {boolean} [readonly=false] Should start as readonly?
  * @property {boolean} [clearable=true] Has clear button?
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
@@ -3406,6 +3407,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,10 +3430,11 @@ 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,
+    readonly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -3455,6 +3458,7 @@ const defaultOptions = {
     labelProp: 'label',
     valueProp: 'value',
     multiItemLabelProp: 'short_label',
+    multiItemRemovePosition: 'after',
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
@@ -3513,7 +3517,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)
@@ -3529,6 +3533,7 @@ class SelectBox {
             listOptions: o.listOptions,
 
             disabled: !!o.disabled,
+            readonly: !!o.readonly,
             clearable: !!o.clearable,
             hasOpenIndicator: !!o.hasOpenIndicator,
             placeholder: o.placeholder,
@@ -3551,6 +3556,7 @@ class SelectBox {
             labelProp: o.labelProp,
             valueProp: o.valueProp,
             multiItemLabelProp: o.multiItemLabelProp,
+            multiItemRemovePosition: o.multiItemRemovePosition,
 
             maxMultiItems: o.maxMultiItems,
             multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -3610,6 +3616,7 @@ class SelectBox {
         p.multiItemEls = [];
 
         this.enable(!p.disabled);
+        this.setReadOnly(!p.readonly);
 
         this._setupDropdownMenu();
 
@@ -3836,6 +3843,32 @@ class SelectBox {
         return this._p.disabled;
     }
 
+    /**
+     * Sets read only mode
+     * @param {boolean=true} readonly Should the control be read only?
+     * @returns {SelectBox}
+     */
+    setReadOnly(readonly) {
+        const p = this._p;
+
+        if (readonly === undefined) {
+            readonly = true;
+        }
+        p.readonly = !readonly;
+        p.el.setAttribute('aria-readonly', p.readonly.toString());
+        p.input.readonly = !!p.readonly;
+
+        return this;
+    }
+
+    /**
+     * Is the control enabled?
+     * @returns {boolean}
+     */
+    isReadOnly() {
+        return !this._p.readonly;
+    }
+
     /**
      * @param {string|string[]} classes
      * @returns {SelectBox}
@@ -4463,6 +4496,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;
     }
 
@@ -4985,7 +5030,7 @@ class SelectBox {
                         if (!closestUntil(evt.target, `.${p.baseClassName}__item_remove`, evt.currentTarget))
                             return;
 
-                        if (p.disabled) return;
+                        if (p.disabled || p.readonly) return;
 
                         this._removeMultiItemFromEvent(
                             /**@type Element*/
@@ -5038,6 +5083,7 @@ class SelectBox {
             if (p.hasOpenIndicator) {
                 p.openIndicator = createElement('span', { class: `${p.baseClassName}__open_indicator` });
                 p.el.appendChild(p.openIndicator);
+                p.el.classList.add(`${p.baseClassName}__has_open_indicator`);
             } else {
                 remove(p.openIndicator);
                 delete p.openIndicator;
@@ -5352,7 +5398,7 @@ class SelectBox {
 
         setTimeout(() => {
             if (this[DestroyedSymbol]) return; // destroyed by event handler
-            if (p.disabled) return;
+            if (p.disabled || p.readonly) return;
 
             this._trigger('search:blur');
 
@@ -5495,7 +5541,8 @@ class SelectBox {
                         p.lastKeyAllowsNonTypeKeys &&
                         !p.multi &&
                         !dropList.hasFocusedItem() &&
-                        !p.disabled
+                        !p.disabled &&
+                        !p.readonly
                     )) {
                         this.toggleList();
                         evt.preventDefault();
@@ -5507,20 +5554,20 @@ class SelectBox {
         if (p.input) {
             p.sink
                 .add(p.input, 'input.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     p.filterTerm = p.input.value.trim();
                     p.dropList?.setSearchTerm(p.filterTerm, true);
                 })
                 .add(p.input, 'click.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     if (!p.multi && p.searchable) {
                         this.openList();
                     }
                 })
                 .add(p.input, 'focus.dropdown', () => {
-                    if (p.disabled) return;
+                    if (p.disabled || p.readonly) return;
 
                     this._trigger('search:focus');
 
@@ -5537,7 +5584,7 @@ class SelectBox {
 
         p.sink
             .add(p.el, 'mousedown.dropdown', () => {
-                if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled) {
+                if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readonly) {
                     this.toggleList();
                 }
                 avoidToggleFromClick = false;
@@ -5546,7 +5593,7 @@ class SelectBox {
                 if (currentTouchId) return;
                 currentTouchId = evt.changedTouches[0].identifier;
 
-                if (this.isDisabled())
+                if (this.isDisabled() || this.isReadOnly())
                     return;
 
                 if (closestUntil(evt.target, `.${p.baseClassName}__item,.${p.baseClassName}__clear`, p.el))
@@ -5986,7 +6033,7 @@ class SelectBox {
                 p.el.classList.add(`${p.baseClassName}__has_clear`);
 
                 p.sink.add(p.clearButton, 'click', () => {
-                    if (this.isDisabled()) return;
+                    if (this.isDisabled() || this.isReadOnly()) return;
                     this.clear();
                 });
             }
@@ -6183,22 +6230,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;
@@ -6515,7 +6569,7 @@ class SelectBox {
     _handleMultiKeydown(event) {
         const p = this._p;
 
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         const isRtl = getComputedStyle(p.el).direction === 'rtl';