From 639b5afaff037b7a0321ce91eaa840b919de44b6 Mon Sep 17 00:00:00 2001
From: Zoltan Toth <ztoth@touchbistro.com>
Date: Sat, 23 Jul 2022 17:39:02 -0400
Subject: [PATCH] Support for disabled list items

---
 CHANGELOG.md                               | 6 ++++++
 dist/index.html                            | 2 +-
 dist/vanilla-js-dropdown.css               | 5 +++++
 dist/vanilla-js-dropdown.min.js            | 2 +-
 docs/index.html                            | 4 ++--
 docs/javascript/vanilla-js-dropdown.min.js | 2 +-
 docs/styles/vanilla-js-dropdown.css        | 5 +++++
 package.json                               | 2 +-
 src/index.pug                              | 2 +-
 src/styles/vanilla-js-dropdown.less        | 7 +++++++
 10 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a78c26a..28e58dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ---
 
+## [2.3.0] - 2022-07-23
+
+### Added
+
+1. Support for disabled list items
+
 ## [2.2.0] - 2019-04-13
 
 ### Added
diff --git a/dist/index.html b/dist/index.html
index d734997..f6c7f2c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,7 +15,7 @@
           <option value="crimson">Crimson</option>
         </optgroup>
         <optgroup label="Green colors"> 
-          <option value="chartreuse">Chartreuse</option>
+          <option value="chartreuse" disabled>Chartreuse</option>
           <option value="seagreen">SeaGreen</option>
           <option value="olive">Olive</option>
         </optgroup>
diff --git a/dist/vanilla-js-dropdown.css b/dist/vanilla-js-dropdown.css
index bfbe6a3..475aa68 100644
--- a/dist/vanilla-js-dropdown.css
+++ b/dist/vanilla-js-dropdown.css
@@ -60,6 +60,11 @@
 .js-Dropdown-list li.is-selected {
   background-color: #ffdfb6;
 }
+.js-Dropdown-list li.is-disabled {
+  background-color: #f5f5f5;
+  color: #a5a5a5;
+  cursor: not-allowed;
+}
 .js-Dropdown-optgroup {
   border-bottom: 1px solid #a5a5a5;
   color: #a5a5a5;
diff --git a/dist/vanilla-js-dropdown.min.js b/dist/vanilla-js-dropdown.min.js
index 7ed4817..a552e61 100644
--- a/dist/vanilla-js-dropdown.min.js
+++ b/dist/vanilla-js-dropdown.min.js
@@ -2,4 +2,4 @@
  * Vanilla JavaScript Dropdown v2.3.0
  * https://zoltantothcom.github.io/vanilla-js-dropdown
  */
- var CustomSelect=function(c){var a="string"==typeof c.elem?document.getElementById(c.elem):c.elem,m="boolean"==typeof c.bubbles,j="js-Dropdown-title",n="is-selected",o="is-disabled",p="is-open",d=a.getElementsByTagName("optgroup"),f=a.options,q=f.length,r=0,b=document.createElement("div");b.className="js-Dropdown",a.id&&(b.id="custom-"+a.id);var g=document.createElement("button");g.className=j,g.textContent=f[0].textContent;var h=document.createElement("ul");if(h.className="js-Dropdown-list",d.length)for(var e=0;e<d.length;e++){var i=document.createElement("div");i.innerText=d[e].label,i.classList.add("js-Dropdown-optgroup"),h.appendChild(i),s(d[e].getElementsByTagName("option"))}else s(f);function s(c){for(var b=0;b<c.length;b++){var d=document.createElement("li");d.innerText=c[b].textContent,d.setAttribute("data-value",c[b].value),d.setAttribute("data-index",r++),f[a.selectedIndex].textContent===c[b].textContent&&(d.classList.add(n),g.textContent=c[b].textContent),c[b].disabled&&d.classList.add(o),h.appendChild(d)}}function k(){h.classList.toggle(p)}function l(){h.classList.remove(p)}return b.appendChild(g),b.appendChild(h),b.addEventListener("click",function(e){e.preventDefault();var c=e.target;if(c.className===j&&k(),"LI"===c.tagName&&!c.classList.contains(o)){b.querySelector("."+j).innerText=c.innerText,a.options.selectedIndex=c.getAttribute("data-index");var f=m?new CustomEvent("change",{bubbles:!0}):new CustomEvent("change");a.dispatchEvent(f);for(var d=0;d<q;d++)h.querySelectorAll("li")[d].classList.remove(n);c.classList.add(n),l()}}),a.parentNode.insertBefore(b,a),a.style.display="none",document.addEventListener("click",function(a){b.contains(a.target)||l()}),{toggle:k,close:l,open:function(){h.classList.add(p)}}}
\ No newline at end of file
+var CustomSelect=function(e){var s="string"==typeof e.elem?document.getElementById(e.elem):e.elem,a="boolean"==typeof e.bubbles,o="js-Dropdown-title",l="is-selected",i="is-disabled",t="is-open",n=s.getElementsByTagName("optgroup"),d=s.options,c=d.length,r=0,u=document.createElement("div"),m=(u.className="js-Dropdown",s.id&&(u.id="custom-"+s.id),document.createElement("button")),p=(m.className=o,m.textContent=d[0].textContent,document.createElement("ul"));if(p.className="js-Dropdown-list",n.length)for(var g=0;g<n.length;g++){var v=document.createElement("div");v.innerText=n[g].label,v.classList.add("js-Dropdown-optgroup"),p.appendChild(v),f(n[g].getElementsByTagName("option"))}else f(d);function f(e){for(var t=0;t<e.length;t++){var n=document.createElement("li");n.innerText=e[t].textContent,n.setAttribute("data-value",e[t].value),n.setAttribute("data-index",r++),d[s.selectedIndex].textContent===e[t].textContent&&(n.classList.add(l),m.textContent=e[t].textContent),e[t].disabled&&n.classList.add(i),p.appendChild(n)}}function x(){p.classList.toggle(t)}function b(){p.classList.remove(t)}return u.appendChild(m),u.appendChild(p),u.addEventListener("click",function(e){e.preventDefault();e=e.target;e.className===o&&x();if("LI"===e.tagName&&!e.classList.contains(i)){u.querySelector("."+o).innerText=e.innerText,s.options.selectedIndex=e.getAttribute("data-index");var t=a?new CustomEvent("change",{bubbles:!0}):new CustomEvent("change");s.dispatchEvent(t);for(var n=0;n<c;n++)p.querySelectorAll("li")[n].classList.remove(l);e.classList.add(l),b()}}),s.parentNode.insertBefore(u,s),s.style.display="none",document.addEventListener("click",function(e){u.contains(e.target)||b()}),{toggle:x,close:b,open:function(){p.classList.add(t)}}};
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index c07bad7..9ed6ad6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -55,7 +55,7 @@ <h2>Demo</h2>
                     <option value="olive">Olive</option>
                 </optgroup>
                 <optgroup label="Blue colors">
-                    <option value="aqua">Aqua</option>
+                    <option value="aqua" disabled>Aqua</option>
                     <option value="steelblue">SteelBlue</option>
                     <option value="royalblue">RoyalBlue</option>
                 </optgroup>
@@ -101,7 +101,7 @@ <h2>Installation</h2>
         &lt;option value="olive">Olive&lt;/option>
     &lt;/optgroup>
     &lt;optgroup label="Blue colors">
-        &lt;option value="aqua">Aqua&lt;/option>
+        &lt;option value="aqua" disabled>Aqua&lt;/option>
         &lt;option value="steelblue">SteelBlue&lt;/option>
         &lt;option value="royalblue">RoyalBlue&lt;/option>
     &lt;/optgroup>
diff --git a/docs/javascript/vanilla-js-dropdown.min.js b/docs/javascript/vanilla-js-dropdown.min.js
index 7ed4817..a552e61 100644
--- a/docs/javascript/vanilla-js-dropdown.min.js
+++ b/docs/javascript/vanilla-js-dropdown.min.js
@@ -2,4 +2,4 @@
  * Vanilla JavaScript Dropdown v2.3.0
  * https://zoltantothcom.github.io/vanilla-js-dropdown
  */
- var CustomSelect=function(c){var a="string"==typeof c.elem?document.getElementById(c.elem):c.elem,m="boolean"==typeof c.bubbles,j="js-Dropdown-title",n="is-selected",o="is-disabled",p="is-open",d=a.getElementsByTagName("optgroup"),f=a.options,q=f.length,r=0,b=document.createElement("div");b.className="js-Dropdown",a.id&&(b.id="custom-"+a.id);var g=document.createElement("button");g.className=j,g.textContent=f[0].textContent;var h=document.createElement("ul");if(h.className="js-Dropdown-list",d.length)for(var e=0;e<d.length;e++){var i=document.createElement("div");i.innerText=d[e].label,i.classList.add("js-Dropdown-optgroup"),h.appendChild(i),s(d[e].getElementsByTagName("option"))}else s(f);function s(c){for(var b=0;b<c.length;b++){var d=document.createElement("li");d.innerText=c[b].textContent,d.setAttribute("data-value",c[b].value),d.setAttribute("data-index",r++),f[a.selectedIndex].textContent===c[b].textContent&&(d.classList.add(n),g.textContent=c[b].textContent),c[b].disabled&&d.classList.add(o),h.appendChild(d)}}function k(){h.classList.toggle(p)}function l(){h.classList.remove(p)}return b.appendChild(g),b.appendChild(h),b.addEventListener("click",function(e){e.preventDefault();var c=e.target;if(c.className===j&&k(),"LI"===c.tagName&&!c.classList.contains(o)){b.querySelector("."+j).innerText=c.innerText,a.options.selectedIndex=c.getAttribute("data-index");var f=m?new CustomEvent("change",{bubbles:!0}):new CustomEvent("change");a.dispatchEvent(f);for(var d=0;d<q;d++)h.querySelectorAll("li")[d].classList.remove(n);c.classList.add(n),l()}}),a.parentNode.insertBefore(b,a),a.style.display="none",document.addEventListener("click",function(a){b.contains(a.target)||l()}),{toggle:k,close:l,open:function(){h.classList.add(p)}}}
\ No newline at end of file
+var CustomSelect=function(e){var s="string"==typeof e.elem?document.getElementById(e.elem):e.elem,a="boolean"==typeof e.bubbles,o="js-Dropdown-title",l="is-selected",i="is-disabled",t="is-open",n=s.getElementsByTagName("optgroup"),d=s.options,c=d.length,r=0,u=document.createElement("div"),m=(u.className="js-Dropdown",s.id&&(u.id="custom-"+s.id),document.createElement("button")),p=(m.className=o,m.textContent=d[0].textContent,document.createElement("ul"));if(p.className="js-Dropdown-list",n.length)for(var g=0;g<n.length;g++){var v=document.createElement("div");v.innerText=n[g].label,v.classList.add("js-Dropdown-optgroup"),p.appendChild(v),f(n[g].getElementsByTagName("option"))}else f(d);function f(e){for(var t=0;t<e.length;t++){var n=document.createElement("li");n.innerText=e[t].textContent,n.setAttribute("data-value",e[t].value),n.setAttribute("data-index",r++),d[s.selectedIndex].textContent===e[t].textContent&&(n.classList.add(l),m.textContent=e[t].textContent),e[t].disabled&&n.classList.add(i),p.appendChild(n)}}function x(){p.classList.toggle(t)}function b(){p.classList.remove(t)}return u.appendChild(m),u.appendChild(p),u.addEventListener("click",function(e){e.preventDefault();e=e.target;e.className===o&&x();if("LI"===e.tagName&&!e.classList.contains(i)){u.querySelector("."+o).innerText=e.innerText,s.options.selectedIndex=e.getAttribute("data-index");var t=a?new CustomEvent("change",{bubbles:!0}):new CustomEvent("change");s.dispatchEvent(t);for(var n=0;n<c;n++)p.querySelectorAll("li")[n].classList.remove(l);e.classList.add(l),b()}}),s.parentNode.insertBefore(u,s),s.style.display="none",document.addEventListener("click",function(e){u.contains(e.target)||b()}),{toggle:x,close:b,open:function(){p.classList.add(t)}}};
\ No newline at end of file
diff --git a/docs/styles/vanilla-js-dropdown.css b/docs/styles/vanilla-js-dropdown.css
index bfbe6a3..475aa68 100644
--- a/docs/styles/vanilla-js-dropdown.css
+++ b/docs/styles/vanilla-js-dropdown.css
@@ -60,6 +60,11 @@
 .js-Dropdown-list li.is-selected {
   background-color: #ffdfb6;
 }
+.js-Dropdown-list li.is-disabled {
+  background-color: #f5f5f5;
+  color: #a5a5a5;
+  cursor: not-allowed;
+}
 .js-Dropdown-optgroup {
   border-bottom: 1px solid #a5a5a5;
   color: #a5a5a5;
diff --git a/package.json b/package.json
index 5c073f5..e7575b2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-js-dropdown",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Vanilla JavaScript Dropdown - a tiny (~700 bytes gzipped) select tag replacement with optgroups support.",
   "main": "index.js",
   "scripts": {
diff --git a/src/index.pug b/src/index.pug
index 05f3c45..6f7916c 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -16,7 +16,7 @@ html(lang="en")
                     option(value="salmon") Salmon
                     option(value="crimson") Crimson
                 optgroup(label="Green colors") 
-                    option(value="chartreuse") Chartreuse
+                    option(value="chartreuse" disabled) Chartreuse
                     option(value="seagreen") SeaGreen
                     option(value="olive") Olive
                 optgroup(label="Blue colors") 
diff --git a/src/styles/vanilla-js-dropdown.less b/src/styles/vanilla-js-dropdown.less
index d0ba25d..2f2421a 100644
--- a/src/styles/vanilla-js-dropdown.less
+++ b/src/styles/vanilla-js-dropdown.less
@@ -1,6 +1,7 @@
 @js-dropdown-back: #ffffff;
 @js-dropdown-border: #a5a5a5;
 @js-dropdown-selected: #ffdfb6;
+@js-dropdown-disabled: #f5f5f5;
 
 .js-Dropdown {
   display: inline-block;
@@ -69,6 +70,12 @@
     &.is-selected {
       background-color: @js-dropdown-selected;
     }
+
+    &.is-disabled {
+      background-color: @js-dropdown-disabled;
+      color: @js-dropdown-border;
+      cursor: not-allowed;
+    }
   }
 }