select-pure - npm Package Compare versions

Comparing version 2.0.0-alpha.8 to 2.0.0-alpha.9

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [2.0.0-alpha.9](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.0.0-alpha.8...select-pure@2.0.0-alpha.9) (2021-04-28)
+
+
+### Bug Fixes
+
+* **readme:** fix build size badges ([f005aa6](https://github.com/dudyn5ky1/select-pure/commit/f005aa683704bb7b057b0e260ebd252b712c94de))
+
+
+### Features
+
+* **multiple:** add multiselect functionality ([d7d559e](https://github.com/dudyn5ky1/select-pure/commit/d7d559e7349172fbcfee0af9e5d1f520743abd8b))
+
+
+
+
+
 # [2.0.0-alpha.8](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.0.0-alpha.7...select-pure@2.0.0-alpha.8) (2021-04-27)
@@ -8,0 +24,0 @@

dist/index.js

@@ -1,1 +0,1 @@
-const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,t=(e,t,s=null)=>{for(;t!==s;){const s=t.nextSibling;e.removeChild(t),t=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,i=`\x3c!--${s}--\x3e`,n=new RegExp(`${s}|${i}`);class r{constructor(e,t){this.parts=[],this.element=t;const i=[],r=[],a=document.createTreeWalker(t.content,133,null,!1);let h=0,c=-1,p=0;const{strings:u,values:{length:m}}=e;for(;p<m;){const e=a.nextNode();if(null!==e){if(c++,1===e.nodeType){if(e.hasAttributes()){const t=e.attributes,{length:s}=t;let i=0;for(let e=0;e<s;e++)o(t[e].name,"$lit$")&&i++;for(;i-- >0;){const t=u[p],s=d.exec(t)[2],i=s.toLowerCase()+"$lit$",r=e.getAttribute(i);e.removeAttribute(i);const o=r.split(n);this.parts.push({type:"attribute",index:c,name:s,strings:o}),p+=o.length-1}}"TEMPLATE"===e.tagName&&(r.push(e),a.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(s)>=0){const s=e.parentNode,r=t.split(n),a=r.length-1;for(let t=0;t<a;t++){let i,n=r[t];if(""===n)i=l();else{const e=d.exec(n);null!==e&&o(e[2],"$lit$")&&(n=n.slice(0,e.index)+e[1]+e[2].slice(0,-"$lit$".length)+e[3]),i=document.createTextNode(n)}s.insertBefore(i,e),this.parts.push({type:"node",index:++c})}""===r[a]?(s.insertBefore(l(),e),i.push(e)):e.data=r[a],p+=a}}else if(8===e.nodeType)if(e.data===s){const t=e.parentNode;null!==e.previousSibling&&c!==h||(c++,t.insertBefore(l(),e)),h=c,this.parts.push({type:"node",index:c}),null===e.nextSibling?e.data="":(i.push(e),c--),p++}else{let t=-1;for(;-1!==(t=e.data.indexOf(s,t+1));)this.parts.push({type:"node",index:-1}),p++}}else a.currentNode=r.pop()}for(const e of i)e.parentNode.removeChild(e)}}const o=(e,t)=>{const s=e.length-t.length;return s>=0&&e.slice(s)===t},a=e=>-1!==e.index,l=()=>document.createComment(""),d=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function h(e,t){const{element:{content:s},parts:i}=e,n=document.createTreeWalker(s,133,null,!1);let r=p(i),o=i[r],a=-1,l=0;const d=[];let h=null;for(;n.nextNode();){a++;const e=n.currentNode;for(e.previousSibling===h&&(h=null),t.has(e)&&(d.push(e),null===h&&(h=e)),null!==h&&l++;void 0!==o&&o.index===a;)o.index=null!==h?-1:o.index-l,r=p(i,r),o=i[r]}d.forEach((e=>e.parentNode.removeChild(e)))}const c=e=>{let t=11===e.nodeType?0:1;const s=document.createTreeWalker(e,133,null,!1);for(;s.nextNode();)t++;return t},p=(e,t=-1)=>{for(let s=t+1;s<e.length;s++){const t=e[s];if(a(t))return s}return-1};const u=new WeakMap,m=e=>"function"==typeof e&&u.has(e),f={},v={};class g{constructor(e,t,s){this.__parts=[],this.template=e,this.processor=t,this.options=s}update(e){let t=0;for(const s of this.__parts)void 0!==s&&s.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],i=this.template.parts,n=document.createTreeWalker(t,133,null,!1);let r,o=0,l=0,d=n.nextNode();for(;o<i.length;)if(r=i[o],a(r)){for(;l<r.index;)l++,"TEMPLATE"===d.nodeName&&(s.push(d),n.currentNode=d.content),null===(d=n.nextNode())&&(n.currentNode=s.pop(),d=n.nextNode());if("node"===r.type){const e=this.processor.handleTextExpression(this.options);e.insertAfterNode(d.previousSibling),this.__parts.push(e)}else this.__parts.push(...this.processor.handleAttributeExpressions(d,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return e&&(document.adoptNode(t),customElements.upgrade(t)),t}}const y=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:e=>e}),b=` ${s} `;class _{constructor(e,t,s,i){this.strings=e,this.values=t,this.type=s,this.processor=i}getHTML(){const e=this.strings.length-1;let t="",n=!1;for(let r=0;r<e;r++){const e=this.strings[r],o=e.lastIndexOf("\x3c!--");n=(o>-1||n)&&-1===e.indexOf("--\x3e",o+1);const a=d.exec(e);t+=null===a?e+(n?b:i):e.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");let t=this.getHTML();return void 0!==y&&(t=y.createHTML(t)),e.innerHTML=t,e}}const S=e=>null===e||!("object"==typeof e||"function"==typeof e),w=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class x{constructor(e,t,s){this.dirty=!0,this.element=e,this.name=t,this.strings=s,this.parts=[];for(let e=0;e<s.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new P(this)}_getValue(){const e=this.strings,t=e.length-1,s=this.parts;if(1===t&&""===e[0]&&""===e[1]){const e=s[0].value;if("symbol"==typeof e)return String(e);if("string"==typeof e||!w(e))return e}let i="";for(let n=0;n<t;n++){i+=e[n];const t=s[n];if(void 0!==t){const e=t.value;if(S(e)||!w(e))i+="string"==typeof e?e:String(e);else for(const t of e)i+="string"==typeof t?t:String(t)}}return i+=e[t],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class P{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===f||S(e)&&e===this.value||(this.value=e,m(e)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const e=this.value;this.value=f,e(this)}this.value!==f&&this.committer.commit()}}class N{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(l()),this.endNode=e.appendChild(l())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=l()),e.__insert(this.endNode=l())}insertAfterPart(e){e.__insert(this.startNode=l()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}const e=this.__pendingValue;e!==f&&(S(e)?e!==this.value&&this.__commitText(e):e instanceof _?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):w(e)?this.__commitIterable(e):e===v?(this.value=v,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,s="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=s:this.__commitNode(document.createTextNode(s)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof g&&this.value.template===t)this.value.update(e.values);else{const s=new g(t,e.processor,this.options),i=s._clone();s.update(e.values),this.__commitNode(i),this.value=s}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let s,i=0;for(const n of e)s=t[i],void 0===s&&(s=new N(this.options),t.push(s),0===i?s.appendIntoPart(this):s.insertAfterPart(t[i-1])),s.setValue(n),s.commit(),i++;i<t.length&&(t.length=i,this.clear(s&&s.endNode))}clear(e=this.startNode){t(this.startNode.parentNode,e.nextSibling,this.endNode)}}class C{constructor(e,t,s){if(this.value=void 0,this.__pendingValue=void 0,2!==s.length||""!==s[0]||""!==s[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=s}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}if(this.__pendingValue===f)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=f}}class A extends x{constructor(e,t,s){super(e,t,s),this.single=2===s.length&&""===s[0]&&""===s[1]}_createPart(){return new E(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class E extends P{}let T=!1;(()=>{try{const e={get capture(){return T=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class k{constructor(e,t,s){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=s,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}if(this.__pendingValue===f)return;const e=this.__pendingValue,t=this.value,s=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),i=null!=e&&(null==t||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),i&&(this.__options=O(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=f}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const O=e=>e&&(T?{capture:e.capture,passive:e.passive,once:e.once}:e.capture);function V(e){let t=$.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},$.set(e.type,t));let i=t.stringsArray.get(e.strings);if(void 0!==i)return i;const n=e.strings.join(s);return i=t.keyString.get(n),void 0===i&&(i=new r(e,e.getTemplateElement()),t.keyString.set(n,i)),t.stringsArray.set(e.strings,i),i}const $=new Map,U=new WeakMap;const I=new class{handleAttributeExpressions(e,t,s,i){const n=t[0];if("."===n){return new A(e,t.slice(1),s).parts}if("@"===n)return[new k(e,t.slice(1),i.eventContext)];if("?"===n)return[new C(e,t.slice(1),s)];return new x(e,t,s).parts}handleTextExpression(e){return new N(e)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.3.0");const R=(e,...t)=>new _(e,t,"html",I),M=(e,t)=>`${e}--${t}`;let z=!0;void 0===window.ShadyCSS?z=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),z=!1);const j=e=>t=>{const i=M(t.type,e);let n=$.get(i);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},$.set(i,n));let o=n.stringsArray.get(t.strings);if(void 0!==o)return o;const a=t.strings.join(s);if(o=n.keyString.get(a),void 0===o){const s=t.getTemplateElement();z&&window.ShadyCSS.prepareTemplateDom(s,e),o=new r(t,s),n.keyString.set(a,o)}return n.stringsArray.set(t.strings,o),o},q=["html","svg"],L=new Set,F=(e,t,s)=>{L.add(e);const i=s?s.element:document.createElement("template"),n=t.querySelectorAll("style"),{length:r}=n;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(i,e);const o=document.createElement("style");for(let e=0;e<r;e++){const t=n[e];t.parentNode.removeChild(t),o.textContent+=t.textContent}(e=>{q.forEach((t=>{const s=$.get(M(t,e));void 0!==s&&s.keyString.forEach((e=>{const{element:{content:t}}=e,s=new Set;Array.from(t.querySelectorAll("style")).forEach((e=>{s.add(e)})),h(e,s)}))}))})(e);const a=i.content;s?function(e,t,s=null){const{element:{content:i},parts:n}=e;if(null==s)return void i.appendChild(t);const r=document.createTreeWalker(i,133,null,!1);let o=p(n),a=0,l=-1;for(;r.nextNode();)for(l++,r.currentNode===s&&(a=c(t),s.parentNode.insertBefore(t,s));-1!==o&&n[o].index===l;){if(a>0){for(;-1!==o;)n[o].index+=a,o=p(n,o);return}o=p(n,o)}}(s,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(i,e);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)t.insertBefore(l.cloneNode(!0),t.firstChild);else if(s){a.insertBefore(o,a.firstChild);const e=new Set;e.add(o),h(s,e)}};window.JSCompiler_renameProperty=(e,t)=>e;const B={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},H=(e,t)=>t!==e&&(t==t||e==e),W={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:H};class D extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach(((t,s)=>{const i=this._attributeNameForProperty(s,t);void 0!==i&&(this._attributeToPropertyMap.set(i,s),e.push(i))})),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach(((e,t)=>this._classProperties.set(t,e)))}}static createProperty(e,t=W){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const s="symbol"==typeof e?Symbol():`__${e}`,i=this.getPropertyDescriptor(e,s,t);void 0!==i&&Object.defineProperty(this.prototype,e,i)}static getPropertyDescriptor(e,t,s){return{get(){return this[t]},set(i){const n=this[e];this[t]=i,this.requestUpdateInternal(e,n,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||W}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty("finalized")||e.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const s of t)this.createProperty(s,e[s])}}static _attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,s=H){return s(e,t)}static _propertyValueFromAttribute(e,t){const s=t.type,i=t.converter||B,n="function"==typeof i?i:i.fromAttribute;return n?n(e,s):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const s=t.type,i=t.converter;return(i&&i.toAttribute||B.toAttribute)(e,s)}initialize(){this._updateState=0,this._updatePromise=new Promise((e=>this._enableUpdatingResolver=e)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((e,t)=>this[t]=e)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,s){t!==s&&this._attributeToProperty(e,s)}_propertyToAttribute(e,t,s=W){const i=this.constructor,n=i._attributeNameForProperty(e,s);if(void 0!==n){const e=i._propertyValueToAttribute(t,s);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(n):this.setAttribute(n,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const s=this.constructor,i=s._attributeToPropertyMap.get(e);if(void 0!==i){const e=s.getPropertyOptions(i);this._updateState=16|this._updateState,this[i]=s._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}requestUpdateInternal(e,t,s){let i=!0;if(void 0!==e){const n=this.constructor;s=s||n.getPropertyOptions(e),n._valueHasChanged(this[e],t,s.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==s.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,s))):i=!1}!this._hasRequestedUpdate&&i&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this.requestUpdateInternal(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((e,t)=>this._propertyToAttribute(t,this[t],e))),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}D.finalized=!0;const J=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,K=Symbol();class G{constructor(e,t){if(t!==K)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(J?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const Q=(e,...t)=>{const s=t.reduce(((t,s,i)=>t+(e=>{if(e instanceof G)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+e[i+1]),e[0]);return new G(s,K)};(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const X={};class Y extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),i=[];s.forEach((e=>i.unshift(e))),this._styles=i}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!J){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new G(String(t),K)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?J?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==X&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return X}}Y.finalized=!0,Y.render=(e,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=U.has(s),o=z&&11===s.nodeType&&!!s.host,a=o&&!L.has(n),l=a?document.createDocumentFragment():s;if(((e,s,i)=>{let n=U.get(s);void 0===n&&(t(s,s.firstChild),U.set(s,n=new N(Object.assign({templateFactory:V},i))),n.appendInto(s)),n.setValue(e),n.commit()})(e,l,Object.assign({templateFactory:j(n)},i)),a){const e=U.get(l);U.delete(l);const i=e.value instanceof g?e.value.template:void 0;F(n,l,i),t(s,s.firstChild),s.appendChild(l),U.set(s,e)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Z=13,ee=9;customElements.define("select-pure",class extends Y{static get styles(){return Q`.select-wrapper{position:relative}.select-wrapper:hover .select{z-index:2}.select{bottom:0;display:flex;flex-wrap:wrap;left:0;position:absolute;right:0;top:0;width:var(--select-width,100%)}.label:focus{outline:var(--select-outline,2px solid #e3e3e3)}.label:after{border-bottom:1px solid var(--color,#000);border-right:1px solid var(--color,#000);box-sizing:border-box;content:"";display:block;height:10px;margin-top:-2px;transform:rotate(45deg);transition:.2s ease-in-out;width:10px}.label.visible:after{margin-bottom:-4px;margin-top:0;transform:rotate(225deg)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;opacity:0;z-index:1}.label,select{align-items:center;background-color:var(--background-color,#fff);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);justify-content:space-between;padding:var(--padding,0 10px);width:100%}.dropdown{background-color:var(--border-color,#000);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);display:none;flex-direction:column;gap:var(--border-width,1px);justify-content:space-between;max-height:calc(var(--select-height,44px) * 4 + var(--border-width,1px) * 3);overflow-y:scroll;position:absolute;top:calc(var(--select-height,44px) + var(--dropdown-gap,0px));width:calc(100% - var(--border-width,1px) * 2);z-index:var(--dropdown-z-index,2)}.dropdown.visible{display:flex}.disabled{background-color:var(--disabled-background-color,#bdc3c7);color:var(--disabled-color,#ecf0f1);cursor:default}`}static get properties(){return{options:{type:Array},visible:{type:Boolean},selectedOption:{type:Object},disabled:{type:Boolean},value:{type:String},name:{type:String},formName:{type:String},id:{type:String}}}constructor(){super(),this.close=this.close.bind(this),this.onSelect=this.onSelect.bind(this),this.processOptions=this.processOptions.bind(this),this.watchNativeSelect=this.watchNativeSelect.bind(this),this.processForm=this.processForm.bind(this),this.options=[],this.visible=!1,this.selectedOption={},this.disabled=null!==this.getAttribute("disabled"),this.name=this.getAttribute("name"),this.id=this.getAttribute("id"),this.formName=this.name||this.id,this.value=null}firstUpdated(){this.processOptions(),this.watchNativeSelect(),this.processForm()}get selectedIndex(){return this.nativeSelect.selectedIndex}set selectedIndex(e){this.onSelect(this.options[e].value)}open(){this.disabled||(document.body.removeEventListener("click",this.close),this.visible=!0,setTimeout((()=>{document.body.addEventListener("click",this.close)})))}close(){this.visible=!1,document.body.removeEventListener("click",this.close)}enable(){this.disabled=!1}disable(){this.disabled=!0}processForm(){this.form=this.closest("form"),this.form&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}watchNativeSelect(){this.nativeSelect.addEventListener("change",(()=>{this.selectedIndex=this.nativeSelect.selectedIndex}))}processOptions(){this.nativeSelect=this.shadowRoot.querySelector("select");const e=this.querySelectorAll("option-pure");for(let t=0;t<e.length;t++){const{value:s,label:i,select:n,unselect:r,selected:o,hidden:a,disabled:l}=e[t].getOption();this.options.push({label:i,value:s,select:n,unselect:r,hidden:a,disabled:l}),o&&(this.selectedOption=e[t],this.nativeSelect.selectedIndex=t),e[t].onSelect=this.onSelect,t!==e.length-1||this.selectedOption.value||(this.selectedOption=e[0],e[0].select(),this.nativeSelect.selectedIndex=t)}}onSelect(e){for(let t=0;t<this.options.length;t++){const s=this.options[t];s.value!==e?s.unselect():this.selectOption(s,t)}if(this.form){this.hiddenInput.value=this.value;const e=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(e)}this.visible=!1}selectOption(e,t){this.selectedOption=e,this.value=e.value,e.select(),this.nativeSelect.selectedIndex=t,this.afterSelect()}afterSelect(){this.dispatchEvent(new Event("change"))}renderOptions(){return this.options.map((({value:e,label:t,hidden:s,disabled:i})=>{const n=this.selectedOption.value===e;return R`<option value="${e}" ?selected="${n}" ?hidden="${s}" ?disabled="${i}">${t}</option>`}))}handleKeyPress(e){e.which!==Z&&e.which!==ee||this.open()}render(){const e=["label"];return this.disabled&&e.push("disabled"),this.visible&&e.push("visible"),R`<div class="select-wrapper"><select ?disabled="${this.disabled}" name="${this.name}" id="${this.id}">${this.renderOptions()}</select><div class="select"><div class="${e.join(" ")}" @click="${this.visible?this.close:this.open}" @keydown="${this.handleKeyPress}" tabindex="0">${this.selectedOption.label}</div><div class="dropdown${this.visible?" visible":""}"><slot></slot></div></div></div>`}}),customElements.define("option-pure",class extends Y{static get styles(){return Q`.option{align-items:center;background-color:var(--background-color,#fff);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);height:var(--select-height,44px);justify-content:flex-start;padding:var(--padding,0 10px);width:100%}.option:focus,.option:not(.disabled):not(.selected):hover{background-color:var(--hover-background-color,#e3e3e3);color:var(--hover-color,#000)}.selected{background-color:var(--selected-background-color,#e3e3e3);color:var(--selected-color,#000)}.disabled{background-color:var(--disabled-background-color,#e3e3e3);color:var(--disabled-color,#000);cursor:default}`}static get properties(){return{selected:{type:Boolean},label:{type:String},value:{type:String},disabled:{type:Boolean}}}constructor(){super(),this.onClick=this.onClick.bind(this),this.select=this.select.bind(this),this.unselect=this.unselect.bind(this),this.getOption=this.getOption.bind(this),this.label=this.textContent||this.getAttribute("label"),this.value=this.getAttribute("value"),this.selected=null!==this.getAttribute("selected"),this.disabled=null!==this.getAttribute("disabled")}getOption(){return{label:this.label,value:this.value,select:this.select,unselect:this.unselect,selected:this.selected,disabled:this.disabled}}select(){this.selected=!0}unselect(){this.selected=!1}onClick(e){this.onSelect&&!this.disabled?this.onSelect(this.value):e.stopPropagation()}handleKeyPress(e){e.which===Z&&this.onClick()}render(){const e=["option"];return this.selected&&e.push("selected"),this.disabled&&e.push("disabled"),R`<div class="${e.join(" ")}" @click="${this.onClick}" @keydown="${this.handleKeyPress}" tabindex="0">${this.label}</div>`}});
+const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,t=(e,t,s=null)=>{for(;t!==s;){const s=t.nextSibling;e.removeChild(t),t=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,i=`\x3c!--${s}--\x3e`,n=new RegExp(`${s}|${i}`);class r{constructor(e,t){this.parts=[],this.element=t;const i=[],r=[],a=document.createTreeWalker(t.content,133,null,!1);let c=0,h=-1,p=0;const{strings:u,values:{length:m}}=e;for(;p<m;){const e=a.nextNode();if(null!==e){if(h++,1===e.nodeType){if(e.hasAttributes()){const t=e.attributes,{length:s}=t;let i=0;for(let e=0;e<s;e++)o(t[e].name,"$lit$")&&i++;for(;i-- >0;){const t=u[p],s=d.exec(t)[2],i=s.toLowerCase()+"$lit$",r=e.getAttribute(i);e.removeAttribute(i);const o=r.split(n);this.parts.push({type:"attribute",index:h,name:s,strings:o}),p+=o.length-1}}"TEMPLATE"===e.tagName&&(r.push(e),a.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(s)>=0){const s=e.parentNode,r=t.split(n),a=r.length-1;for(let t=0;t<a;t++){let i,n=r[t];if(""===n)i=l();else{const e=d.exec(n);null!==e&&o(e[2],"$lit$")&&(n=n.slice(0,e.index)+e[1]+e[2].slice(0,-"$lit$".length)+e[3]),i=document.createTextNode(n)}s.insertBefore(i,e),this.parts.push({type:"node",index:++h})}""===r[a]?(s.insertBefore(l(),e),i.push(e)):e.data=r[a],p+=a}}else if(8===e.nodeType)if(e.data===s){const t=e.parentNode;null!==e.previousSibling&&h!==c||(h++,t.insertBefore(l(),e)),c=h,this.parts.push({type:"node",index:h}),null===e.nextSibling?e.data="":(i.push(e),h--),p++}else{let t=-1;for(;-1!==(t=e.data.indexOf(s,t+1));)this.parts.push({type:"node",index:-1}),p++}}else a.currentNode=r.pop()}for(const e of i)e.parentNode.removeChild(e)}}const o=(e,t)=>{const s=e.length-t.length;return s>=0&&e.slice(s)===t},a=e=>-1!==e.index,l=()=>document.createComment(""),d=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function c(e,t){const{element:{content:s},parts:i}=e,n=document.createTreeWalker(s,133,null,!1);let r=p(i),o=i[r],a=-1,l=0;const d=[];let c=null;for(;n.nextNode();){a++;const e=n.currentNode;for(e.previousSibling===c&&(c=null),t.has(e)&&(d.push(e),null===c&&(c=e)),null!==c&&l++;void 0!==o&&o.index===a;)o.index=null!==c?-1:o.index-l,r=p(i,r),o=i[r]}d.forEach((e=>e.parentNode.removeChild(e)))}const h=e=>{let t=11===e.nodeType?0:1;const s=document.createTreeWalker(e,133,null,!1);for(;s.nextNode();)t++;return t},p=(e,t=-1)=>{for(let s=t+1;s<e.length;s++){const t=e[s];if(a(t))return s}return-1};const u=new WeakMap,m=e=>"function"==typeof e&&u.has(e),v={},f={};class g{constructor(e,t,s){this.__parts=[],this.template=e,this.processor=t,this.options=s}update(e){let t=0;for(const s of this.__parts)void 0!==s&&s.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],i=this.template.parts,n=document.createTreeWalker(t,133,null,!1);let r,o=0,l=0,d=n.nextNode();for(;o<i.length;)if(r=i[o],a(r)){for(;l<r.index;)l++,"TEMPLATE"===d.nodeName&&(s.push(d),n.currentNode=d.content),null===(d=n.nextNode())&&(n.currentNode=s.pop(),d=n.nextNode());if("node"===r.type){const e=this.processor.handleTextExpression(this.options);e.insertAfterNode(d.previousSibling),this.__parts.push(e)}else this.__parts.push(...this.processor.handleAttributeExpressions(d,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return e&&(document.adoptNode(t),customElements.upgrade(t)),t}}const b=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:e=>e}),y=` ${s} `;class _{constructor(e,t,s,i){this.strings=e,this.values=t,this.type=s,this.processor=i}getHTML(){const e=this.strings.length-1;let t="",n=!1;for(let r=0;r<e;r++){const e=this.strings[r],o=e.lastIndexOf("\x3c!--");n=(o>-1||n)&&-1===e.indexOf("--\x3e",o+1);const a=d.exec(e);t+=null===a?e+(n?y:i):e.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");let t=this.getHTML();return void 0!==b&&(t=b.createHTML(t)),e.innerHTML=t,e}}const S=e=>null===e||!("object"==typeof e||"function"==typeof e),w=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class x{constructor(e,t,s){this.dirty=!0,this.element=e,this.name=t,this.strings=s,this.parts=[];for(let e=0;e<s.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new P(this)}_getValue(){const e=this.strings,t=e.length-1,s=this.parts;if(1===t&&""===e[0]&&""===e[1]){const e=s[0].value;if("symbol"==typeof e)return String(e);if("string"==typeof e||!w(e))return e}let i="";for(let n=0;n<t;n++){i+=e[n];const t=s[n];if(void 0!==t){const e=t.value;if(S(e)||!w(e))i+="string"==typeof e?e:String(e);else for(const t of e)i+="string"==typeof t?t:String(t)}}return i+=e[t],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class P{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===v||S(e)&&e===this.value||(this.value=e,m(e)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const e=this.value;this.value=v,e(this)}this.value!==v&&this.committer.commit()}}class C{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(l()),this.endNode=e.appendChild(l())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=l()),e.__insert(this.endNode=l())}insertAfterPart(e){e.__insert(this.startNode=l()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=v,e(this)}const e=this.__pendingValue;e!==v&&(S(e)?e!==this.value&&this.__commitText(e):e instanceof _?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):w(e)?this.__commitIterable(e):e===f?(this.value=f,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,s="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=s:this.__commitNode(document.createTextNode(s)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof g&&this.value.template===t)this.value.update(e.values);else{const s=new g(t,e.processor,this.options),i=s._clone();s.update(e.values),this.__commitNode(i),this.value=s}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let s,i=0;for(const n of e)s=t[i],void 0===s&&(s=new C(this.options),t.push(s),0===i?s.appendIntoPart(this):s.insertAfterPart(t[i-1])),s.setValue(n),s.commit(),i++;i<t.length&&(t.length=i,this.clear(s&&s.endNode))}clear(e=this.startNode){t(this.startNode.parentNode,e.nextSibling,this.endNode)}}class N{constructor(e,t,s){if(this.value=void 0,this.__pendingValue=void 0,2!==s.length||""!==s[0]||""!==s[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=s}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=v,e(this)}if(this.__pendingValue===v)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=v}}class A extends x{constructor(e,t,s){super(e,t,s),this.single=2===s.length&&""===s[0]&&""===s[1]}_createPart(){return new O(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class O extends P{}let k=!1;(()=>{try{const e={get capture(){return k=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class E{constructor(e,t,s){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=s,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=v,e(this)}if(this.__pendingValue===v)return;const e=this.__pendingValue,t=this.value,s=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),i=null!=e&&(null==t||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),i&&(this.__options=T(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=v}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const T=e=>e&&(k?{capture:e.capture,passive:e.passive,once:e.once}:e.capture);function V(e){let t=$.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},$.set(e.type,t));let i=t.stringsArray.get(e.strings);if(void 0!==i)return i;const n=e.strings.join(s);return i=t.keyString.get(n),void 0===i&&(i=new r(e,e.getTemplateElement()),t.keyString.set(n,i)),t.stringsArray.set(e.strings,i),i}const $=new Map,U=new WeakMap;const I=new class{handleAttributeExpressions(e,t,s,i){const n=t[0];if("."===n){return new A(e,t.slice(1),s).parts}if("@"===n)return[new E(e,t.slice(1),i.eventContext)];if("?"===n)return[new N(e,t.slice(1),s)];return new x(e,t,s).parts}handleTextExpression(e){return new C(e)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.3.0");const R=(e,...t)=>new _(e,t,"html",I),M=(e,t)=>`${e}--${t}`;let z=!0;void 0===window.ShadyCSS?z=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),z=!1);const L=e=>t=>{const i=M(t.type,e);let n=$.get(i);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},$.set(i,n));let o=n.stringsArray.get(t.strings);if(void 0!==o)return o;const a=t.strings.join(s);if(o=n.keyString.get(a),void 0===o){const s=t.getTemplateElement();z&&window.ShadyCSS.prepareTemplateDom(s,e),o=new r(t,s),n.keyString.set(a,o)}return n.stringsArray.set(t.strings,o),o},j=["html","svg"],q=new Set,F=(e,t,s)=>{q.add(e);const i=s?s.element:document.createElement("template"),n=t.querySelectorAll("style"),{length:r}=n;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(i,e);const o=document.createElement("style");for(let e=0;e<r;e++){const t=n[e];t.parentNode.removeChild(t),o.textContent+=t.textContent}(e=>{j.forEach((t=>{const s=$.get(M(t,e));void 0!==s&&s.keyString.forEach((e=>{const{element:{content:t}}=e,s=new Set;Array.from(t.querySelectorAll("style")).forEach((e=>{s.add(e)})),c(e,s)}))}))})(e);const a=i.content;s?function(e,t,s=null){const{element:{content:i},parts:n}=e;if(null==s)return void i.appendChild(t);const r=document.createTreeWalker(i,133,null,!1);let o=p(n),a=0,l=-1;for(;r.nextNode();)for(l++,r.currentNode===s&&(a=h(t),s.parentNode.insertBefore(t,s));-1!==o&&n[o].index===l;){if(a>0){for(;-1!==o;)n[o].index+=a,o=p(n,o);return}o=p(n,o)}}(s,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(i,e);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)t.insertBefore(l.cloneNode(!0),t.firstChild);else if(s){a.insertBefore(o,a.firstChild);const e=new Set;e.add(o),c(s,e)}};window.JSCompiler_renameProperty=(e,t)=>e;const B={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},H=(e,t)=>t!==e&&(t==t||e==e),W={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:H};class D extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach(((t,s)=>{const i=this._attributeNameForProperty(s,t);void 0!==i&&(this._attributeToPropertyMap.set(i,s),e.push(i))})),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach(((e,t)=>this._classProperties.set(t,e)))}}static createProperty(e,t=W){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const s="symbol"==typeof e?Symbol():`__${e}`,i=this.getPropertyDescriptor(e,s,t);void 0!==i&&Object.defineProperty(this.prototype,e,i)}static getPropertyDescriptor(e,t,s){return{get(){return this[t]},set(i){const n=this[e];this[t]=i,this.requestUpdateInternal(e,n,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||W}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty("finalized")||e.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const s of t)this.createProperty(s,e[s])}}static _attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,s=H){return s(e,t)}static _propertyValueFromAttribute(e,t){const s=t.type,i=t.converter||B,n="function"==typeof i?i:i.fromAttribute;return n?n(e,s):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const s=t.type,i=t.converter;return(i&&i.toAttribute||B.toAttribute)(e,s)}initialize(){this._updateState=0,this._updatePromise=new Promise((e=>this._enableUpdatingResolver=e)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((e,t)=>this[t]=e)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,s){t!==s&&this._attributeToProperty(e,s)}_propertyToAttribute(e,t,s=W){const i=this.constructor,n=i._attributeNameForProperty(e,s);if(void 0!==n){const e=i._propertyValueToAttribute(t,s);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(n):this.setAttribute(n,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const s=this.constructor,i=s._attributeToPropertyMap.get(e);if(void 0!==i){const e=s.getPropertyOptions(i);this._updateState=16|this._updateState,this[i]=s._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}requestUpdateInternal(e,t,s){let i=!0;if(void 0!==e){const n=this.constructor;s=s||n.getPropertyOptions(e),n._valueHasChanged(this[e],t,s.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==s.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,s))):i=!1}!this._hasRequestedUpdate&&i&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this.requestUpdateInternal(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((e,t)=>this._propertyToAttribute(t,this[t],e))),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}D.finalized=!0;const J=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,K=Symbol();class G{constructor(e,t){if(t!==K)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(J?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const Q=(e,...t)=>{const s=t.reduce(((t,s,i)=>t+(e=>{if(e instanceof G)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+e[i+1]),e[0]);return new G(s,K)};(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const X={};class Y extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,s)=>e.reduceRight(((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e)),s),s=t(e,new Set),i=[];s.forEach((e=>i.unshift(e))),this._styles=i}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map((e=>{if(e instanceof CSSStyleSheet&&!J){const t=Array.prototype.slice.call(e.cssRules).reduce(((e,t)=>e+t.cssText),"");return new G(String(t),K)}return e}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?J?this.renderRoot.adoptedStyleSheets=e.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map((e=>e.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==X&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)})))}render(){return X}}Y.finalized=!0,Y.render=(e,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=U.has(s),o=z&&11===s.nodeType&&!!s.host,a=o&&!q.has(n),l=a?document.createDocumentFragment():s;if(((e,s,i)=>{let n=U.get(s);void 0===n&&(t(s,s.firstChild),U.set(s,n=new C(Object.assign({templateFactory:V},i))),n.appendInto(s)),n.setValue(e),n.commit()})(e,l,Object.assign({templateFactory:L(n)},i)),a){const e=U.get(l);U.delete(l);const i=e.value instanceof g?e.value.template:void 0;F(n,l,i),t(s,s.firstChild),s.appendChild(l),U.set(s,e)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Z=13,ee=9;const te=new WeakMap,se=(ie=e=>t=>{const s=te.get(t);if(void 0===e&&t instanceof P){if(void 0!==s||!te.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==s&&t.setValue(e);te.set(t,e)},(...e)=>{const t=ie(...e);return u.set(t,!0),t});var ie;customElements.define("select-pure",class extends Y{static get styles(){return Q`.select-wrapper{position:relative}.select-wrapper:hover .select{z-index:2}.select{bottom:0;display:flex;flex-wrap:wrap;left:0;position:absolute;right:0;top:0;width:var(--select-width,100%)}.label:focus{outline:var(--select-outline,2px solid #e3e3e3)}.label:after{border-bottom:1px solid var(--color,#000);border-right:1px solid var(--color,#000);box-sizing:border-box;content:"";display:block;height:10px;margin-top:-2px;transform:rotate(45deg);transition:.2s ease-in-out;width:10px}.label.visible:after{margin-bottom:-4px;margin-top:0;transform:rotate(225deg)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;opacity:0;z-index:1}.label,select{align-items:center;background-color:var(--background-color,#fff);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);min-height:var(--select-height,44px);justify-content:space-between;padding:var(--padding,0 10px);width:100%}.dropdown{background-color:var(--border-color,#000);border-radius:var(--border-radius,4px);border:var(--border-width,1px) solid var(--border-color,#000);display:none;flex-direction:column;gap:var(--border-width,1px);justify-content:space-between;max-height:calc(var(--select-height,44px) * 4 + var(--border-width,1px) * 3);overflow-y:scroll;position:absolute;top:calc(var(--select-height,44px) + var(--dropdown-gap,0px));width:calc(100% - var(--border-width,1px) * 2);z-index:var(--dropdown-z-index,2)}.dropdown.visible{display:flex}.disabled{background-color:var(--disabled-background-color,#bdc3c7);color:var(--disabled-color,#ecf0f1);cursor:default}.multi-selected{background-color:var(--selected-background-color,#e3e3e3);border-radius:var(--border-radius,4px);color:var(--selected-color,#000);display:flex;gap:8px;justify-content:space-between;padding:2px 4px}.multi-selected-wrapper{display:flex;flex-wrap:wrap;gap:4px;width:calc(100% - 30px)}.cross:after{content:'\\00d7';display:inline-block;height:100%;text-align:center;width:12px}`}static get properties(){return{options:{type:Array},visible:{type:Boolean},selectedOption:{type:Object},_selectedOptions:{type:Array},disabled:{type:Boolean},value:{type:String},values:{type:Array},name:{type:String},formName:{type:String},id:{type:String},multiple:{type:Boolean},defaultLabel:{type:String}}}constructor(){super(),this.close=this.close.bind(this),this.onSelect=this.onSelect.bind(this),this.processOptions=this.processOptions.bind(this),this.watchNativeSelect=this.watchNativeSelect.bind(this),this.processForm=this.processForm.bind(this),this.options=[],this.visible=!1,this.selectedOption={},this._selectedOptions=[],this.disabled=null!==this.getAttribute("disabled"),this.multiple=null!==this.getAttribute("multiple"),this.name=this.getAttribute("name"),this.id=this.getAttribute("id"),this.formName=this.name||this.id,this.value=null,this.values=[],this.defaultLabel=this.getAttribute("default-label")}firstUpdated(){this.processOptions(),this.watchNativeSelect(),this.processForm()}open(){this.disabled||(document.body.removeEventListener("click",this.close),this.visible=!0,setTimeout((()=>{document.body.addEventListener("click",this.close)})))}close(){this.visible=!1,document.body.removeEventListener("click",this.close)}enable(){this.disabled=!1}disable(){this.disabled=!0}get selectedIndex(){return this.nativeSelect.selectedIndex}set selectedIndex(e){this.onSelect(this.options[e].value)}get selectedOptions(){return this.nativeSelect.selectedOptions}processForm(){this.form=this.closest("form"),this.form&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}watchNativeSelect(){this.nativeSelect.addEventListener("change",(()=>{this.selectedIndex=this.nativeSelect.selectedIndex}))}processOptions(){this.nativeSelect=this.shadowRoot.querySelector("select");const e=this.querySelectorAll("option-pure");for(let t=0;t<e.length;t++){const{value:s,label:i,select:n,unselect:r,selected:o,hidden:a,disabled:l}=e[t].getOption();this.options.push({label:i,value:s,select:n,unselect:r,hidden:a,disabled:l}),o&&this.selectOption(e[t],t,!0),e[t].onSelect=this.onSelect,t!==e.length-1||this.selectedOption.value||this.multiple||this.selectOption(e[0],0,!0)}}onSelect(e){for(let t=0;t<this.options.length;t++){const s=this.options[t];s.value!==e?this.multiple||s.unselect():this.selectOption(s,t)}this.visible=!1}selectOption(e,t,s){if(this.multiple){const t=this._selectedOptions.find((({value:t})=>t===e.value));if(t){const s=this._selectedOptions.indexOf(t);this.values.splice(s,1),this._selectedOptions.splice(s,1),e.unselect()}else this.values.push(e.value),this._selectedOptions.push(e),e.select();this.requestUpdate()}else this.selectedOption=e,this.value=e.value,e.select();if(this.form){this.hiddenInput.value=this.multiple?this.values:this.value;const e=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(e)}s||this.afterSelect()}afterSelect(){this.dispatchEvent(new Event("change"))}handleKeyPress(e){e.which!==Z&&e.which!==ee||this.open()}onCrossClick(e,t){e.stopPropagation(),this.onSelect(t)}renderOptions(){return this.options.map((({value:e,label:t,hidden:s,disabled:i})=>{let n=this.selectedOption.value===e;return this.multiple&&(n=this._selectedOptions.find((t=>t.value===e))),R`<option value="${e}" ?selected="${n}" ?hidden="${s}" ?disabled="${i}">${t}</option>`}))}renderLabel(){return this.multiple&&this._selectedOptions.length?R`<div class="multi-selected-wrapper">${this._selectedOptions.map((({label:e,value:t})=>R`<span class="multi-selected">${e} <span class="cross" @click="${e=>this.onCrossClick(e,t)}"></span></span>`))}</div>`:this.selectedOption.label||this.defaultLabel}render(){const e=["label"];return this.disabled&&e.push("disabled"),this.visible&&e.push("visible"),R`<div class="select-wrapper"><select ?disabled="${this.disabled}" ?multiple="${this.multiple}" name="${se(this.name||void 0)}" id="${se(this.id||void 0)}" size="1">${this.renderOptions()}</select><div class="select"><div class="${e.join(" ")}" @click="${this.visible?this.close:this.open}" @keydown="${this.handleKeyPress}" tabindex="0">${this.renderLabel()}</div><div class="dropdown${this.visible?" visible":""}"><slot></slot></div></div></div>`}}),customElements.define("option-pure",class extends Y{static get styles(){return Q`.option{align-items:center;background-color:var(--background-color,#fff);box-sizing:border-box;color:var(--color,#000);cursor:pointer;display:flex;font-family:var(--font-family,inherit);font-size:var(--font-size,14px);font-weight:var(--font-weight,400);height:var(--select-height,44px);height:var(--select-height,44px);justify-content:flex-start;padding:var(--padding,0 10px);width:100%}.option:focus,.option:not(.disabled):not(.selected):hover{background-color:var(--hover-background-color,#e3e3e3);color:var(--hover-color,#000)}.selected{background-color:var(--selected-background-color,#e3e3e3);color:var(--selected-color,#000)}.disabled{background-color:var(--disabled-background-color,#e3e3e3);color:var(--disabled-color,#000);cursor:default}`}static get properties(){return{selected:{type:Boolean},label:{type:String},value:{type:String},disabled:{type:Boolean}}}constructor(){super(),this.onClick=this.onClick.bind(this),this.select=this.select.bind(this),this.unselect=this.unselect.bind(this),this.getOption=this.getOption.bind(this),this.label=this.textContent||this.getAttribute("label"),this.value=this.getAttribute("value"),this.selected=null!==this.getAttribute("selected"),this.disabled=null!==this.getAttribute("disabled")}getOption(){return{label:this.label,value:this.value,select:this.select,unselect:this.unselect,selected:this.selected,disabled:this.disabled}}select(){this.selected=!0}unselect(){this.selected=!1}onClick(e){this.onSelect&&!this.disabled?this.onSelect(this.value):e.stopPropagation()}handleKeyPress(e){e.which===Z&&this.onClick()}render(){const e=["option"];return this.selected&&e.push("selected"),this.disabled&&e.push("disabled"),R`<div class="${e.join(" ")}" @click="${this.onClick}" @keydown="${this.handleKeyPress}" tabindex="0">${this.label}</div>`}});

package.json

 {
   "name": "select-pure",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.9",
   "description": "Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient",
@@ -27,3 +27,6 @@ "author": {
     "litelement",
-    "lit-element"
+    "lit-element",
+    "multiple",
+    "multiselect",
+    "dropdown"
   ],
@@ -30,0 +33,0 @@ "files": [

README.md

 # Custom JavaScript `<select>` component. Easy-to-use, accessible, mobile friendly and super efficient.
 
 [![npm version](https://img.shields.io/npm/v/select-pure.svg)](https://www.npmjs.com/package/select-pure)
-[![gzip size](http://img.badgesize.io/https://unpkg.com/select-pure/dist/bundle.min.js?compression=gzip&label=gzip)](https://unpkg.com/select-pure/dist/bundle.min.js)
-[![brotli size](http://img.badgesize.io/https://unpkg.com/select-pure/dist/bundle.min.js?compression=brotli&label=brotli)](https://unpkg.com/select-pure/dist/bundle.min.js)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/select-pure/dist/index.js?compression=gzip&label=gzip)](https://unpkg.com/select-pure/dist/index.js)
+[![brotli size](http://img.badgesize.io/https://unpkg.com/select-pure/dist/index.js?compression=brotli&label=brotli)](https://unpkg.com/select-pure/dist/index.js)
 [![npm](https://img.shields.io/npm/dm/select-pure.svg)](https://www.npmjs.com/package/select-pure)
@@ -12,3 +12,3 @@ [![Build Status](https://travis-ci.org/dudyn5ky1/select-pure.svg?branch=master)](https://travis-ci.org/dudyn5ky1/select-pure)
 
-SelectPure is a Web Component (Custom Element) which makes it super use and customize. Main goal is to use extended API of the native HTML `<select>` element and provide additional features, like autocomplete, custom styling and many more. The package itself is stable to be used, however, if you've found any issues, please report them [here](https://github.com/dudyn5ky1/select-pure/issues) or create a PR of your own.
+SelectPure is a Web Component (Custom Element) which makes it super easy to use and customize. Main goal is to use extended API of the native HTML `<select>` element and provide additional features, like autocomplete, custom styling and many more. The package itself is stable to be used, however, if you've found any issues, please report them [here](https://github.com/dudyn5ky1/select-pure/issues) or create a PR of your own.
 
@@ -21,7 +21,16 @@ If you want to use older version, please refer to this [README](./README-v1.md).
 
-`yarn add select-pure` or `npm i select-pure --save`
+```bash
+yarn add select-pure
+```
+or
 
+```bash
+npm i select-pure --save
+```
+
 then include it in your JavaScript file
 
-`import 'select-pure';`
+```javascript
+import 'select-pure';
+```
 
@@ -32,2 +41,3 @@ and use in the similar way as you would use a native HTML `<select>`.
 <select-pure name="country" id="country">
+  <option-pure value="" disabled hidden>-- Please select a country --</option-pure>
   <option-pure value="UA">Ukraine</option-pure>
@@ -34,0 +44,0 @@ <option-pure value="PL">Poland</option-pure>

src/components/Select.js

 import { css, LitElement, html } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
 
@@ -65,3 +66,3 @@ import { KEYS } from "./constants";
         font-weight: var(--font-weight, 400);
-        height: var(--select-height, 44px);
+        min-height: var(--select-height, 44px);
         justify-content: space-between;
@@ -94,2 +95,24 @@ padding: var(--padding, 0 10px);
       }
+      .multi-selected {
+        background-color: var(--selected-background-color, #e3e3e3);
+        border-radius: var(--border-radius, 4px);
+        color: var(--selected-color, #000);
+        display: flex;
+        gap: 8px;
+        justify-content: space-between;
+        padding: 2px 4px;
+      }
+      .multi-selected-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        width: calc(100% - 30px);
+      }
+      .cross:after {
+        content: '\\00d7';
+        display: inline-block;
+        height: 100%;
+        text-align: center;
+        width: 12px;
+      }
     `;
@@ -109,2 +132,5 @@ }
       },
+      _selectedOptions: {
+        type: Array,
+      },
       disabled: {
@@ -116,2 +142,5 @@ type: Boolean,
       },
+      values: {
+        type: Array,
+      },
       name: {
@@ -126,2 +155,8 @@ type: String,
       },
+      multiple: {
+        type: Boolean,
+      },
+      defaultLabel: {
+        type: String,
+      },
     };
@@ -144,3 +179,5 @@ }
     this.selectedOption = {};
+    this._selectedOptions = [];
     this.disabled = this.getAttribute("disabled") !== null;
+    this.multiple = this.getAttribute("multiple") !== null;
     this.name = this.getAttribute("name");
@@ -150,4 +187,8 @@ this.id = this.getAttribute("id");
     this.value = null;
+    this.values = [];
+    this.defaultLabel = this.getAttribute("default-label");
   }
 
+  // lifecycle
+
   firstUpdated() {
@@ -159,12 +200,3 @@ this.processOptions();
 
-  // public
-
-  get selectedIndex() {
-    return this.nativeSelect.selectedIndex;
-  }
-
-  set selectedIndex(index) {
-    this.onSelect(this.options[index].value);
-  }
-
+  // public methods
   open() {
@@ -195,4 +227,17 @@ if (this.disabled) {
 
-  // private methods
+  // public properties
+  get selectedIndex() {
+    return this.nativeSelect.selectedIndex;
+  }
 
+  set selectedIndex(index) {
+    this.onSelect(this.options[index].value);
+  }
+
+  get selectedOptions() {
+    return this.nativeSelect.selectedOptions;
+  }
+
+  // internal methods
+
   processForm() {
@@ -229,11 +274,8 @@ this.form = this.closest("form");
       if (selected) {
-        this.selectedOption = options[i];
-        this.nativeSelect.selectedIndex = i;
+        this.selectOption(options[i], i, true);
       }
       options[i].onSelect = this.onSelect;
 
-      if (i === options.length - 1 && !this.selectedOption.value) {
-        this.selectedOption = options[0];
-        options[0].select();
-        this.nativeSelect.selectedIndex = i;
+      if (i === options.length - 1 && !this.selectedOption.value && !this.multiple) {
+        this.selectOption(options[0], 0, true);
       }
@@ -250,17 +292,36 @@ }
       }
-      option.unselect();
+      if (!this.multiple) {
+        option.unselect();
+      }
     }
+    this.visible = false;
+  }
+
+  selectOption(option, index, isInitialRender) {
+    if (this.multiple) {
+      const isSelected = this._selectedOptions.find(({ value }) => value === option.value);
+      if (isSelected) {
+        const selectedIndex = this._selectedOptions.indexOf(isSelected);
+        this.values.splice(selectedIndex, 1);
+        this._selectedOptions.splice(selectedIndex, 1);
+        option.unselect();
+      } else {
+        this.values.push(option.value);
+        this._selectedOptions.push(option);
+        option.select();
+      }
+      this.requestUpdate();
+    } else {
+      this.selectedOption = option;
+      this.value = option.value;
+      option.select();
+    }
     if (this.form) {
-      this.hiddenInput.value = this.value;
+      this.hiddenInput.value = this.multiple ? this.values : this.value;
       const event = new Event("change", { bubbles: true });
       this.hiddenInput.dispatchEvent(event);
     }
-    this.visible = false;
-  }
-
-  selectOption(option, index) {
-    this.selectedOption = option;
-    this.value = option.value;
-    option.select();
-    this.nativeSelect.selectedIndex = index;
+    if (isInitialRender) {
+      return;
+    }
     this.afterSelect();
@@ -273,5 +334,21 @@ }
 
+  handleKeyPress(event) {
+    if (event.which === KEYS.ENTER || event.which === KEYS.TAB) {
+      this.open();
+    }
+  }
+
+  onCrossClick(event, value) {
+    event.stopPropagation();
+    this.onSelect(value);
+  }
+
+  // internal render methods
+
   renderOptions() {
     return this.options.map(({ value, label, hidden, disabled }) => {
-      const isSelected = this.selectedOption.value === value;
+      let isSelected = this.selectedOption.value === value;
+      if (this.multiple) {
+        isSelected = this._selectedOptions.find(option => option.value === value);
+      }
       return html`
@@ -290,6 +367,17 @@ <option
 
-  handleKeyPress(event) {
-    if (event.which === KEYS.ENTER || event.which === KEYS.TAB) {
-      this.open();
+  renderLabel() {
+    if (this.multiple && this._selectedOptions.length) {
+      return html`
+        <div class="multi-selected-wrapper">
+          ${this._selectedOptions.map(({ label, value }) => html`
+              <span class="multi-selected">
+                ${label}
+                <span class="cross" @click=${event => this.onCrossClick(event, value)}></span>
+              </span>
+          `)}
+        </div>
+      `;
     }
+
+    return this.selectedOption.label || this.defaultLabel;
   }
@@ -307,3 +395,9 @@
       <div class="select-wrapper">
-        <select ?disabled=${this.disabled} name="${this.name}" id=${this.id}>
+        <select
+          ?disabled=${this.disabled}
+          ?multiple=${this.multiple}
+          name="${ifDefined(this.name || undefined)}"
+          id=${ifDefined(this.id || undefined)}
+          size="1"
+        >
           ${this.renderOptions()}
@@ -319,3 +413,3 @@ </select>
           >
-            ${this.selectedOption.label}
+            ${this.renderLabel()}
           </div>
@@ -322,0 +416,0 @@ <div class="dropdown${this.visible ? " visible" : ""}">

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55640

increased by9.64%

Lines of code

693

increased by16.08%

Number of lines in readme file

150

increased by7.14%

No dependency changes