Merge pull request #12 from williamtroup/1.1.0

1.1.0

README.md

@@ -2,15 +2,15 @@
 Select.js
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
-[![npm](https://img.shields.io/badge/npmjs-v1.0.0-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.0.0-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.1.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
 </h1>
 
 > <p align="center">A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!</p>
-> <p align="center">v1.0.0</p>
+> <p align="center">v1.1.0</p>
 <br />
 
 ![Select.js](docs/images/main.png)
@@ -20,15 +20,15 @@ Select.js
 
 <h1>What features does Select.js have?</h1>
 
-- Zero-dependencies and extremely lightweight!
-- Written in TypeScript, allowing greater support for React, Angular, and other libraries!
-- Maintains existing SELECT DOM element for FORM compatibility.
-- Easily select and de-select your list items, which are shown as tags!
-- Full API available via public functions.
-- Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
-- Full CSS theme support (using :root variables, with a default dark-mode theme).
-- Custom triggers for actions (when elements are rendered, selection is changed, etc).
-- Shortcut keys (click [here](docs/SHORTCUT_KEYS.md) to see the full list).
+- 😏 Zero-dependencies and extremely lightweight!
+- 🦾 Written in TypeScript, allowing greater support for React, Angular, and other libraries!
+- ✏️ Maintains existing SELECT DOM element for FORM compatibility, allowing easy editing.
+- ☑️ Easily select and de-select your list items, which are shown as tags!
+- 💻 Full API available via public functions.
+- 📱 Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
+- 🌈 Full CSS theme support (using :root variables, with a default dark-mode theme).
+- 🚀 Custom triggers for actions (when elements are rendered, selection is changed, etc).
+- 🔠 Shortcut keys (click [here](https://github.com/williamtroup/docs/SHORTCUT_KEYS.md) to see the full list).
 <br />
 <br />
 

README_NUGET.md

@@ -1,8 +1,8 @@
-# Select.js v1.0.0
+# Select.js v1.1.0
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
-[![npm](https://img.shields.io/badge/npmjs-v1.0.0-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.0.0-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.1.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
@@ -12,15 +12,15 @@
 
 ## What features does Select.js have?
 
-- Zero-dependencies and extremely lightweight!
-- Written in TypeScript, allowing greater support for React, Angular, and other libraries!
-- Maintains existing SELECT DOM element for FORM compatibility.
-- Easily select and de-select your list items, which are shown as tags!
-- Full API available via public functions.
-- Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
-- Full CSS theme support (using :root variables, with a default dark-mode theme).
-- Custom triggers for actions (when elements are rendered, selection is changed, etc).
-- Shortcut keys (click [here](https://github.com/williamtroup/docs/SHORTCUT_KEYS.md) to see the full list).
+- 😏 Zero-dependencies and extremely lightweight!
+- 🦾 Written in TypeScript, allowing greater support for React, Angular, and other libraries!
+- ✏️ Maintains existing SELECT DOM element for FORM compatibility, allowing easy editing.
+- ☑️ Easily select and de-select your list items, which are shown as tags!
+- 💻 Full API available via public functions.
+- 📱 Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
+- 🌈 Full CSS theme support (using :root variables, with a default dark-mode theme).
+- 🚀 Custom triggers for actions (when elements are rendered, selection is changed, etc).
+- 🔠 Shortcut keys (click [here](https://github.com/williamtroup/docs/SHORTCUT_KEYS.md) to see the full list).
 
 
 ## What browsers are supported?

dist/select.esm.js

@@ -21,14 +21,14 @@ var Is;
         return t(e) && typeof e === "function";
     }
     e.definedFunction = r;
-    function l(e) {
+    function s(e) {
         return t(e) && typeof e === "number";
     }
-    e.definedNumber = l;
-    function s(e) {
+    e.definedNumber = s;
+    function l(e) {
         return n(e) && e instanceof Array;
     }
-    e.definedArray = s;
+    e.definedArray = l;
 })(Is || (Is = {}));
 
 var Trigger;
@@ -155,21 +155,24 @@ var Binding;
             t.render = Default2.getBoolean(t.render, true);
             t.dropDownShowDelay = Default2.getNumber(t.dropDownShowDelay, 50);
             t.showDropDownButton = Default2.getBoolean(t.showDropDownButton, true);
+            t.showRemoveButtonOnLeft = Default2.getBoolean(t.showRemoveButtonOnLeft, false);
             t = i(t);
             t = r(t);
             return t;
         }
         t.get = o;
         function i(e) {
-            e.removeText = Default2.getString(e.removeText, "X");
-            e.noItemsSelectedText = Default2.getString(e.noItemsSelectedText, "There are no items selected");
+            e.text = Default2.getObject(e.text, {});
+            e.text.removeText = Default2.getString(e.text.removeText, "✖");
+            e.text.noItemsSelectedText = Default2.getString(e.text.noItemsSelectedText, "There are no items selected");
             return e;
         }
         function r(e) {
-            e.onRenderComplete = Default2.getFunction(e.onRenderComplete, null);
-            e.onSelectedItemsChanged = Default2.getFunction(e.onSelectedItemsChanged, null);
-            e.onDropDownShow = Default2.getFunction(e.onDropDownShow, null);
-            e.onDropDownHide = Default2.getFunction(e.onDropDownHide, null);
+            e.events = Default2.getObject(e.events, {});
+            e.events.onRenderComplete = Default2.getFunction(e.events.onRenderComplete, null);
+            e.events.onSelectedItemsChanged = Default2.getFunction(e.events.onSelectedItemsChanged, null);
+            e.events.onDropDownShow = Default2.getFunction(e.events.onDropDownShow, null);
+            e.events.onDropDownHide = Default2.getFunction(e.events.onDropDownHide, null);
             return e;
         }
     })(t = e.Options || (e.Options = {}));
@@ -212,17 +215,17 @@ var Config;
         if (Is.defined(t) && t.hasAttribute(Constants.SELECT_JS_ATTRIBUTE_NAME)) {
             const o = t.getAttribute(Constants.SELECT_JS_ATTRIBUTE_NAME);
             if (Is.definedString(o)) {
-                const l = Default2.getObjectFromString(o, e);
-                if (l.parsed && Is.definedObject(l.object)) {
-                    const e = Binding.Options.getForNewInstance(l.object, t);
+                const s = Default2.getObjectFromString(o, e);
+                if (s.parsed && Is.definedObject(s.object)) {
+                    const e = Binding.Options.getForNewInstance(s.object, t);
                     if (e.render) {
                         t.removeAttribute(Constants.SELECT_JS_ATTRIBUTE_NAME);
                         const n = i(t);
                         const o = r(n, t, e);
-                        s(o);
+                        l(o);
                         u(o, false);
-                        a(o);
-                        Trigger.customEvent(e.onRenderComplete, e._currentView.element);
+                        f(o);
+                        Trigger.customEvent(e.events.onRenderComplete, e._currentView.element);
                     }
                 } else {
                     if (!e.safeMode) {
@@ -256,46 +259,46 @@ var Config;
                 break;
             }
         }
-        const l = DomElement.create("div", "select-js");
+        const s = DomElement.create("div", "select-js");
         if (Is.defined(i)) {
-            t.insertBefore(l, i);
+            t.insertBefore(s, i);
         } else {
-            t.appendChild(l);
+            t.appendChild(s);
         }
         t.removeChild(e);
-        l.appendChild(e);
-        return l;
+        s.appendChild(e);
+        return s;
     }
     function r(e, n, o) {
         const i = DomElement.create("div", "control");
         e.appendChild(i);
         const r = DomElement.create("div", "drop-down");
         r.style.display = "none";
         e.appendChild(r);
-        const l = {
+        const s = {
             control: i,
             dropDown: r,
             select: n,
             bindingOptions: o,
             multiSelectEnabled: n.hasAttribute("multiple")
         };
         if (!o.showDropDownButton) {
-            i.onclick = () => f(l);
+            i.onclick = () => a(s);
         }
-        t.push(l);
-        return l;
+        t.push(s);
+        return s;
     }
-    function l(e) {
+    function s(e) {
         if (e.bindingOptions.showDropDownButton) {
-            const t = DomElement.create("div", "button");
+            const t = DomElement.create("div", "open-close-button");
             e.control.appendChild(t);
             if (p(e)) {
                 t.classList.add("button-open");
             }
-            t.onclick = () => f(e);
+            t.onclick = () => a(e);
         }
     }
-    function s(e) {
+    function l(e) {
         const t = e.select.options;
         const n = t.length;
         e.dropDown.innerHTML = "";
@@ -336,7 +339,7 @@ var Config;
         const o = n.length;
         let i = false;
         e.control.innerHTML = "";
-        l(e);
+        s(e);
         for (let t = 0; t < o; t++) {
             const o = n[t];
             if (o.selected) {
@@ -346,11 +349,11 @@ var Config;
         }
         if (!i) {
             const t = DomElement.create("div", "no-items-selected");
-            t.innerHTML = e.bindingOptions.noItemsSelectedText;
+            t.innerHTML = e.bindingOptions.text.noItemsSelectedText;
             e.control.appendChild(t);
         }
         if (t) {
-            Trigger.customEvent(e.bindingOptions.onSelectedItemsChanged, m(e));
+            Trigger.customEvent(e.bindingOptions.events.onSelectedItemsChanged, m(e));
         }
     }
     function d(e, t) {
@@ -360,30 +363,34 @@ var Config;
         o.innerHTML = e.select.options[t].text;
         n.appendChild(o);
         if (e.multiSelectEnabled) {
-            const o = DomElement.create("div", "remove");
-            o.innerHTML = e.bindingOptions.removeText;
-            n.appendChild(o);
-            o.onclick = n => {
+            const i = DomElement.create("div", "remove");
+            i.innerHTML = e.bindingOptions.text.removeText;
+            if (e.bindingOptions.showRemoveButtonOnLeft) {
+                n.insertBefore(i, o);
+            } else {
+                n.appendChild(i);
+            }
+            i.onclick = n => {
                 DomElement.cancelBubble(n);
                 e.select.options[t].selected = false;
                 g(e);
                 u(e);
             };
         }
     }
-    function a(e) {
+    function f(e) {
         const t = () => g(e);
         document.body.addEventListener("click", t);
         window.addEventListener("resize", t);
         window.addEventListener("click", t);
     }
-    function f(e) {
+    function a(e) {
         if (!p(e)) {
             setTimeout((function() {
                 e.dropDown.style.display = "block";
-                s(e);
+                l(e);
                 u(e, false);
-                Trigger.customEvent(e.bindingOptions.onDropDownShow);
+                Trigger.customEvent(e.bindingOptions.events.onDropDownShow);
             }), e.bindingOptions.dropDownShowDelay);
         } else {
             g(e);
@@ -393,7 +400,7 @@ var Config;
         if (e.dropDown !== null && e.dropDown.style.display !== "none") {
             e.dropDown.style.display = "none";
             u(e, false);
-            Trigger.customEvent(e.bindingOptions.onDropDownHide);
+            Trigger.customEvent(e.bindingOptions.events.onDropDownHide);
         }
     }
     function p(e) {
@@ -427,7 +434,7 @@ var Config;
             g(t[n]);
         }
     }
-    const S = {
+    const v = {
         setConfiguration: function(t) {
             if (Is.definedObject(t)) {
                 let n = false;
@@ -442,10 +449,10 @@ var Config;
                     e = Config.Options.get(o);
                 }
             }
-            return S;
+            return v;
         },
         getVersion: function() {
-            return "1.0.0";
+            return "1.1.0";
         }
     };
     (() => {
@@ -455,7 +462,7 @@ var Config;
             D();
         }));
         if (!Is.defined(window.$select)) {
-            window.$select = S;
+            window.$select = v;
         }
     })();
 })();//# sourceMappingURL=select.esm.js.map