auto-resize-custom-select/docs/customSelect.min.js

Auto resize drop-down select elements to match the width of the selected option and customize it with CSS

/*!
auto-resize-custom-select v0.3.1
MIT (c) 2021 Jorge Moreno @alterebro (https://moro.es)
https://github.com/alterebro/auto-resize-custom-select#readme
*/
(function(){"use strict";function l(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function t(t,e){var r,n=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)),n}function c(n){for(var e=1;e<arguments.length;e++){var c=null!=arguments[e]?arguments[e]:{};e%2?t(Object(c),!0).forEach(function(e){var t,r;t=n,e=c[r=e],r in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(c)):t(Object(c)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(c,e))})}return n}this.customSelect=function(e){var t="string"==typeof e?{el:e}:e,i=c(c({},{el:"select",className:"custom-select",expandChar:"▾",width:!1,injectCSS:!0}),t);function s(e,t,r){var n;t.innerHTML=(n=e).options[n.options.selectedIndex].innerHTML,e.style.width=t.offsetWidth+r.offsetWidth+"px",e.style.height=t.offsetHeight+"px"}var r=document.querySelectorAll(i.el),n="custom-select-css-".concat(i.className);r.length&&null===document.querySelector("style#"+n)&&i.injectCSS&&(e=i.width?" width: ".concat(i.width," "):"",t=".".concat(i.className," { position: relative; display: inline-flex; align-items: center; ").concat(e,"} "),t+=".".concat(i.className," .selection { text-decoration: underline; flex: 1 1 auto; } "),t+=".".concat(i.className," .arrow:after { content: ' ").concat(i.expandChar,"' } "),t+=".".concat(i.className," select { all: revert; position: absolute; cursor: pointer; opacity: 0 } "),(e=document.createElement("style")).id=n,e.type="text/css",e.appendChild(document.createTextNode(t)),(t=document.getElementsByTagName("head")[0]).insertBefore(e,t.firstChild)),Array.from(r).forEach(function(e,t){var r,n=e,c=document.createElement("span");(r=c.classList).add.apply(r,l(e.classList)),c.classList.add(i.className);var a=document.createElement("span");a.classList.add("selection");var o=document.createElement("span");o.classList.add("arrow"),(e=n.classList).remove.apply(e,l(n.classList)),n.parentNode.insertBefore(c,n),c.appendChild(a),c.appendChild(o),c.appendChild(n),s(n,a,o),n.addEventListener("change",function(e){s(e.target,a,o)})})}}).call(this);