@danielgindi/selectbox 2.0.26 → 2.0.28

package/dist/lib.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.26
+ * @danielgindi/selectbox 2.0.28
  * git://github.com/danielgindi/selectbox.git
  */
 (function (global, factory) {
@@ -6367,7 +6367,7 @@
   /** */
 
   /** @type {DropList.Options} */
-  let defaultOptions$1 = {
+  const DefaultOptions$1 = {
     baseClassName: 'droplist',
 
     autoItemBlur: true,
@@ -6426,7 +6426,7 @@
      * @param {DropList.Options} options
      */
     constructor(options) {var _o$positionOptionsPro;
-      const o = _objectSpread2({}, defaultOptions$1);
+      const o = _objectSpread2({}, DefaultOptions$1);
 
       for (let [key, value] of Object.entries(/**@type Object*/options))
       if (value !== undefined)
@@ -9875,6 +9875,7 @@
    * @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
@@ -9893,6 +9894,7 @@
    * @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
@@ -9915,10 +9917,11 @@
    * @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: '',
@@ -9942,6 +9945,7 @@
     labelProp: 'label',
     valueProp: 'value',
     multiItemLabelProp: 'short_label',
+    multiItemRemovePosition: 'after',
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
@@ -10000,7 +10004,7 @@
      * @param {SelectBox.Options} options
      */
     constructor(options) {
-      const o = _objectSpread2({}, defaultOptions);
+      const o = _objectSpread2({}, DefaultOptions);
 
       for (let [key, value] of Object.entries(/**@type Object*/options))
       if (value !== undefined)
@@ -10016,6 +10020,7 @@
         listOptions: o.listOptions,
 
         disabled: !!o.disabled,
+        readonly: !!o.readonly,
         clearable: !!o.clearable,
         hasOpenIndicator: !!o.hasOpenIndicator,
         placeholder: o.placeholder,
@@ -10038,6 +10043,7 @@
         labelProp: o.labelProp,
         valueProp: o.valueProp,
         multiItemLabelProp: o.multiItemLabelProp,
+        multiItemRemovePosition: o.multiItemRemovePosition,
 
         maxMultiItems: o.maxMultiItems,
         multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -10097,6 +10103,7 @@
       p.multiItemEls = [];
 
       this.enable(!p.disabled);
+      this.setReadOnly(!p.readonly);
 
       this._setupDropdownMenu();
 
@@ -10323,6 +10330,32 @@
       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}
@@ -10950,6 +10983,18 @@
     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;
     }
 
@@ -11472,7 +11517,7 @@
             if (!Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item_remove"), evt.currentTarget))
             return;
 
-            if (p.disabled) return;
+            if (p.disabled || p.readonly) return;
 
             this._removeMultiItemFromEvent(
               /**@type Element*/
@@ -11525,6 +11570,7 @@
         if (p.hasOpenIndicator) {
           p.openIndicator = Dom.createElement('span', { class: "".concat(p.baseClassName, "__open_indicator") });
           p.el.appendChild(p.openIndicator);
+          p.el.classList.add("".concat(p.baseClassName, "__has_open_indicator"));
         } else {
           DomCompat.remove(p.openIndicator);
           delete p.openIndicator;
@@ -11839,7 +11885,7 @@
 
       setTimeout(() => {
         if (this[DestroyedSymbol]) return; // destroyed by event handler
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         this._trigger('search:blur');
 
@@ -11982,7 +12028,8 @@
           p.lastKeyAllowsNonTypeKeys &&
           !p.multi &&
           !dropList.hasFocusedItem() &&
-          !p.disabled)
+          !p.disabled &&
+          !p.readonly)
           {
             this.toggleList();
             evt.preventDefault();
@@ -11994,20 +12041,20 @@
       if (p.input) {
         p.sink.
         add(p.input, 'input.dropdown', () => {var _p$dropList9;
-          if (p.disabled) return;
+          if (p.disabled || p.readonly) return;
 
           p.filterTerm = p.input.value.trim();
           (_p$dropList9 = p.dropList) === null || _p$dropList9 === void 0 || _p$dropList9.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');
 
@@ -12024,7 +12071,7 @@
 
       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;
@@ -12033,7 +12080,7 @@
         if (currentTouchId) return;
         currentTouchId = evt.changedTouches[0].identifier;
 
-        if (this.isDisabled())
+        if (this.isDisabled() || this.isReadOnly())
         return;
 
         if (Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item,.").concat(p.baseClassName, "__clear"), p.el))
@@ -12473,7 +12520,7 @@
           p.el.classList.add("".concat(p.baseClassName, "__has_clear"));
 
           p.sink.add(p.clearButton, 'click', () => {
-            if (this.isDisabled()) return;
+            if (this.isDisabled() || this.isReadOnly()) return;
             this.clear();
           });
         }
@@ -12670,22 +12717,29 @@
       if (label === false)
       return null;
 
+      const elRemove = Dom.createElement('span', {
+        class: "".concat(p.baseClassName, "__item_remove"),
+        role: 'presentation'
+      });
+
       const itemEl = Dom.createElement('li',
       {
         class: "".concat(p.baseClassName, "__item"),
         tabindex: '0',
         title: label
-      },
-      [
-      Dom.createElement('span', {
-        class: "".concat(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;
@@ -13002,7 +13056,7 @@
     _handleMultiKeydown(event) {
       const p = this._p;
 
-      if (p.disabled) return;
+      if (p.disabled || p.readonly) return;
 
       const isRtl = getComputedStyle(p.el).direction === 'rtl';