select-pure - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1-alpha.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [2.1.1-alpha.0](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.1.0...select-pure@2.1.1-alpha.0) (2021-07-01)
+
+
+### Bug Fixes
+
+* **select-pure:** fix multiple renderred hidden inputs ([c0d995d](https://github.com/dudyn5ky1/select-pure/commit/c0d995d29cf5a2055e79c82f046c12b867bdefe9)), closes [#41](https://github.com/dudyn5ky1/select-pure/issues/41)
+
+
+
+
+
 # [2.1.0](https://github.com/dudyn5ky1/select-pure/compare/select-pure@2.0.1...select-pure@2.1.0) (2021-05-11)
@@ -8,0 +19,0 @@

dist/index.js

@@ -1,1 +0,1 @@
-var t,e,i,s;const o=globalThis.trustedTypes,n=o?o.createPolicy("lit-html",{createHTML:t=>t}):void 0,l=`lit$${(Math.random()+"").slice(9)}$`,r="?"+l,h=`<${r}>`,a=document,d=(t="")=>a.createComment(t),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,p=Array.isArray,u=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,b=/>/g,f=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,g=/'/g,m=/"/g,y=/^(?:script|style|textarea)$/i,x=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),w=Symbol.for("lit-noChange"),S=Symbol.for("lit-nothing"),k=new WeakMap,_=a.createTreeWalker(a,129,null,!1);class O{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let a=0,c=0;const p=t.length-1,x=this.parts,[w,S]=((t,e)=>{const i=t.length-1,s=[];let o,r=2===e?"<svg>":"",a=u;for(let e=0;e<i;e++){const i=t[e];let n,d,c=-1,p=0;for(;p<i.length&&(a.lastIndex=p,d=a.exec(i),null!==d);)p=a.lastIndex,a===u?"!--"===d[1]?a=v:void 0!==d[1]?a=b:void 0!==d[2]?(y.test(d[2])&&(o=RegExp("</"+d[2],"g")),a=f):void 0!==d[3]&&(a=f):a===f?">"===d[0]?(a=null!=o?o:u,c=-1):void 0===d[1]?c=-2:(c=a.lastIndex-d[2].length,n=d[1],a=void 0===d[3]?f:'"'===d[3]?m:g):a===m||a===g?a=f:a===v||a===b?a=u:(a=f,o=void 0);const x=a===f&&t[e+1].startsWith("/>")?" ":"";r+=a===u?i+h:c>=0?(s.push(n),i.slice(0,c)+"$lit$"+i.slice(c)+l+x):i+l+(-2===c?(s.push(void 0),e):x)}const d=r+(t[i]||"<?>")+(2===e?"</svg>":"");return[void 0!==n?n.createHTML(d):d,s]})(t,e);if(this.el=O.createElement(w,i),_.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=_.nextNode())&&x.length<p;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(l)){const i=S[c++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(l),e=/([.?@])?(.*)/.exec(i);x.push({type:1,index:a,name:e[2],strings:t,ctor:"."===e[1]?E:"?"===e[1]?U:"@"===e[1]?R:P})}else x.push({type:6,index:a})}for(const e of t)s.removeAttribute(e)}if(y.test(s.tagName)){const t=s.textContent.split(l),e=t.length-1;if(e>0){s.textContent=o?o.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],d()),_.nextNode(),x.push({type:2,index:++a});s.append(t[e],d())}}}else if(8===s.nodeType)if(s.data===r)x.push({type:2,index:a});else{let t=-1;for(;-1!==(t=s.data.indexOf(l,t+1));)x.push({type:7,index:a}),t+=l.length-1}a++}}static createElement(t,e){const i=a.createElement("template");return i.innerHTML=t,i}}function $(t,e,i=t,s){var o,n,l,r;if(e===w)return e;let h=void 0!==s?null===(o=i.Σi)||void 0===o?void 0:o[s]:i.Σo;const a=c(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(n=null==h?void 0:h.O)||void 0===n||n.call(h,!1),void 0===a?h=void 0:(h=new a(t),h.T(t,i,s)),void 0!==s?(null!==(l=(r=i).Σi)&&void 0!==l?l:r.Σi=[])[s]=h:i.Σo=h),void 0!==h&&(e=$(t,h.S(t,e.values),h,s)),e}class C{constructor(t,e){this.l=[],this.N=void 0,this.D=t,this.M=e}u(t){var e;const{el:{content:i},parts:s}=this.D,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:a).importNode(i,!0);_.currentNode=o;let n=_.nextNode(),l=0,r=0,h=s[0];for(;void 0!==h;){if(l===h.index){let e;2===h.type?e=new A(n,n.nextSibling,this,t):1===h.type?e=new h.ctor(n,h.name,h.strings,this,t):6===h.type&&(e=new L(n,this,t)),this.l.push(e),h=s[++r]}l!==(null==h?void 0:h.index)&&(n=_.nextNode(),l++)}return o}v(t){let e=0;for(const i of this.l)void 0!==i&&(void 0!==i.strings?(i.I(t,i,e),e+=i.strings.length-2):i.I(t[e])),e++}}class A{constructor(t,e,i,s){this.type=2,this.N=void 0,this.A=t,this.B=e,this.M=i,this.options=s}setConnected(t){var e;null===(e=this.P)||void 0===e||e.call(this,t)}get parentNode(){return this.A.parentNode}get startNode(){return this.A}get endNode(){return this.B}I(t,e=this){t=$(this,t,e),c(t)?t===S||null==t||""===t?(this.H!==S&&this.R(),this.H=S):t!==this.H&&t!==w&&this.m(t):void 0!==t._$litType$?this._(t):void 0!==t.nodeType?this.$(t):(t=>{var e;return p(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.g(t):this.m(t)}k(t,e=this.B){return this.A.parentNode.insertBefore(t,e)}$(t){this.H!==t&&(this.R(),this.H=this.k(t))}m(t){const e=this.A.nextSibling;null!==e&&3===e.nodeType&&(null===this.B?null===e.nextSibling:e===this.B.previousSibling)?e.data=t:this.$(a.createTextNode(t)),this.H=t}_(t){var e;const{values:i,_$litType$:s}=t,o="number"==typeof s?this.C(t):(void 0===s.el&&(s.el=O.createElement(s.h,this.options)),s);if((null===(e=this.H)||void 0===e?void 0:e.D)===o)this.H.v(i);else{const t=new C(o,this),e=t.u(this.options);t.v(i),this.$(e),this.H=t}}C(t){let e=k.get(t.strings);return void 0===e&&k.set(t.strings,e=new O(t)),e}g(t){p(this.H)||(this.H=[],this.R());const e=this.H;let i,s=0;for(const o of t)s===e.length?e.push(i=new A(this.k(d()),this.k(d()),this,this.options)):i=e[s],i.I(o),s++;s<e.length&&(this.R(i&&i.B.nextSibling,s),e.length=s)}R(t=this.A.nextSibling,e){var i;for(null===(i=this.P)||void 0===i||i.call(this,!1,!0,e);t&&t!==this.B;){const e=t.nextSibling;t.remove(),t=e}}}class P{constructor(t,e,i,s,o){this.type=1,this.H=S,this.N=void 0,this.V=void 0,this.element=t,this.name=e,this.M=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this.H=Array(i.length-1).fill(S),this.strings=i):this.H=S}get tagName(){return this.element.tagName}I(t,e=this,i,s){const o=this.strings;let n=!1;if(void 0===o)t=$(this,t,e,0),n=!c(t)||t!==this.H&&t!==w,n&&(this.H=t);else{const s=t;let l,r;for(t=o[0],l=0;l<o.length-1;l++)r=$(this,s[i+l],e,l),r===w&&(r=this.H[l]),n||(n=!c(r)||r!==this.H[l]),r===S?t=S:t!==S&&(t+=(null!=r?r:"")+o[l+1]),this.H[l]=r}n&&!s&&this.W(t)}W(t){t===S?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class E extends P{constructor(){super(...arguments),this.type=3}W(t){this.element[this.name]=t===S?void 0:t}}class U extends P{constructor(){super(...arguments),this.type=4}W(t){t&&t!==S?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class R extends P{constructor(){super(...arguments),this.type=5}I(t,e=this){var i;if((t=null!==(i=$(this,t,e,0))&&void 0!==i?i:S)===w)return;const s=this.H,o=t===S&&s!==S||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==S&&(s===S||o);o&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this.H=t}handleEvent(t){var e,i;"function"==typeof this.H?this.H.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this.H.handleEvent(t)}}class L{constructor(t,e,i){this.element=t,this.type=6,this.N=void 0,this.V=void 0,this.M=e,this.options=i}I(t){$(this,t)}}null===(e=(t=globalThis).litHtmlPlatformSupport)||void 0===e||e.call(t,O,A),(null!==(i=(s=globalThis).litHtmlVersions)&&void 0!==i?i:s.litHtmlVersions=[]).push("2.0.0-rc.2");const N=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,H=Symbol();class z{constructor(t,e){if(e!==H)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return N&&void 0===this.t&&(this.t=new CSSStyleSheet,this.t.replaceSync(this.cssText)),this.t}toString(){return this.cssText}}const T=new Map,I=(t,...e)=>{const i=e.reduce(((e,i,s)=>e+(t=>{if(t instanceof z)return t.cssText;if("number"==typeof t)return t;throw Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(i)+t[s+1]),t[0]);let s=T.get(i);return void 0===s&&T.set(i,s=new z(i,H)),s},j=(t,e)=>{N?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style");i.textContent=e.cssText,t.appendChild(i)}))},M=N?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new z(t+"",H))(e)})(t):t;var B,D,V,W;const q={toAttribute(t,e){switch(e){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},K=(t,e)=>e!==t&&(e==e||t==t),F={attribute:!0,type:String,converter:q,reflect:!1,hasChanged:K};class J extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πl=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πh=null,this.u()}static addInitializer(t){var e;null!==(e=this.v)&&void 0!==e||(this.v=[]),this.v.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this.Πp(i,e);void 0!==s&&(this.Πm.set(s,i),t.push(s))})),t}static createProperty(t,e=F){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||F}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πm=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(M(t))}else void 0!==t&&e.push(M(t));return e}static"Πp"(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this.Πg=new Promise((t=>this.enableUpdating=t)),this.L=new Map,this.Π_(),this.requestUpdate(),null===(t=this.constructor.v)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this.ΠU)&&void 0!==e?e:this.ΠU=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this.ΠU)||void 0===e||e.splice(this.ΠU.indexOf(t)>>>0,1)}"Π_"(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this.Πi.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return j(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)})),this.Πl&&(this.Πl(),this.Πo=this.Πl=void 0)}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)})),this.Πo=new Promise((t=>this.Πl=t))}attributeChangedCallback(t,e,i){this.K(t,i)}"Πj"(t,e,i=F){var s,o;const n=this.constructor.Πp(t,i);if(void 0!==n&&!0===i.reflect){const l=(null!==(o=null===(s=i.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==o?o:q.toAttribute)(e,i.type);this.Πh=t,null==l?this.removeAttribute(n):this.setAttribute(n,l),this.Πh=null}}K(t,e){var i,s,o;const n=this.constructor,l=n.Πm.get(t);if(void 0!==l&&this.Πh!==l){const t=n.getPropertyOptions(l),r=t.converter,h=null!==(o=null!==(s=null===(i=r)||void 0===i?void 0:i.fromAttribute)&&void 0!==s?s:"function"==typeof r?r:null)&&void 0!==o?o:q.fromAttribute;this.Πh=l,this[l]=h(e,t.type),this.Πh=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||K)(this[t],e)?(this.L.has(t)||this.L.set(t,e),!0===i.reflect&&this.Πh!==t&&(void 0===this.Πk&&(this.Πk=new Map),this.Πk.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this.Πg=this.Πq())}async"Πq"(){this.isUpdatePending=!0;try{for(await this.Πg;this.Πo;)await this.Πo}catch(t){Promise.reject(t)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach(((t,e)=>this[e]=t)),this.Πi=void 0);let e=!1;const i=this.L;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this.Π$()}catch(t){throw e=!1,this.Π$(),t}e&&this.E(i)}willUpdate(t){}E(t){var e;null===(e=this.ΠU)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}"Π$"(){this.L=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πg}shouldUpdate(t){return!0}update(t){void 0!==this.Πk&&(this.Πk.forEach(((t,e)=>this.Πj(e,this[e],t))),this.Πk=void 0),this.Π$()}updated(t){}firstUpdated(t){}}var Z,G,Q,X,Y,tt;J.finalized=!0,J.shadowRootOptions={mode:"open"},null===(D=(B=globalThis).reactiveElementPlatformSupport)||void 0===D||D.call(B,{ReactiveElement:J}),(null!==(V=(W=globalThis).reactiveElementVersions)&&void 0!==V?V:W.reactiveElementVersions=[]).push("1.0.0-rc.1"),(null!==(Z=(tt=globalThis).litElementVersions)&&void 0!==Z?Z:tt.litElementVersions=[]).push("3.0.0-rc.1");class et extends J{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();super.update(t),this.Φt=((t,e,i)=>{var s,o;const n=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new A(e.insertBefore(d(),t),t,void 0,i)}return l.I(t),l})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return w}}et.finalized=!0,et._$litElement$=!0,null===(Q=(G=globalThis).litElementHydrateSupport)||void 0===Q||Q.call(G,{LitElement:et}),null===(Y=(X=globalThis).litElementPlatformSupport)||void 0===Y||Y.call(X,{LitElement:et});const it=t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:s}=e;return{kind:i,elements:s,finisher(e){window.customElements.define(t,e)}}})(t,e),st=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function ot(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):st(t,e)}const nt=t=>null!=t?t:S,lt=13,rt=9;var ht=function(t,e,i,s){var o,n=arguments.length,l=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l};let at=class extends et{constructor(){super(),this._selected=!1,this._disabled=!1,this._hidden=!1,this._value="",this._label="",this.optionIndex=-1,this.onClick=this.onClick.bind(this),this.select=this.select.bind(this),this.unselect=this.unselect.bind(this),this.getOption=this.getOption.bind(this)}static get styles(){return I`.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:not(.disabled):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}`}connectedCallback(){super.connectedCallback(),this._selected=null!==this.getAttribute("selected"),this._disabled=null!==this.getAttribute("disabled"),this._hidden=null!==this.getAttribute("hidden"),this._value=this.getAttribute("value")||"",this.processLabel(),this.onReady&&this.onReady(this.getOption(),this.optionIndex)}getOption(){return{label:this._label,value:this._value,select:this.select,unselect:this.unselect,selected:this._selected,disabled:this._disabled,hidden:this._hidden}}select(){this._selected=!0,this.setAttribute("selected","")}unselect(){this._selected=!1,this.removeAttribute("selected")}setOnReadyCallback(t,e){this.onReady=t,this.optionIndex=e}setOnSelectCallback(t){this.onSelect=t}processLabel(){this.textContent?this._label=this.textContent:this.getAttribute("label")&&(this._label=this.getAttribute("label")||"")}onClick(t){t.stopPropagation(),this.onSelect&&!this._disabled&&this.onSelect(this._value)}handleKeyPress(t){t.which===lt&&this.onClick(t)}render(){const t=["option"];return this._selected&&t.push("selected"),this._disabled&&t.push("disabled"),x`<div class="${t.join(" ")}" @click="${this.onClick}" @keydown="${this.handleKeyPress}" tabindex="${nt(this._disabled?void 0:"0")}"><slot hidden @slotchange="${this.processLabel}"></slot>${this._label}</div>`}};ht([ot()],at.prototype,"_selected",void 0),ht([ot()],at.prototype,"_disabled",void 0),ht([ot()],at.prototype,"_hidden",void 0),ht([ot()],at.prototype,"_value",void 0),ht([ot()],at.prototype,"_label",void 0),ht([ot()],at.prototype,"optionIndex",void 0),at=ht([it("option-pure")],at);var dt=function(t,e,i,s){var o,n=arguments.length,l=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l};const ct=()=>{},pt={label:"",value:"",select:ct,unselect:ct,disabled:!1,hidden:!1,selected:!1};let ut=class extends et{constructor(){super(),this.options=[],this.visible=!1,this.selectedOption=pt,this._selectedOptions=[],this.disabled=null!==this.getAttribute("disabled"),this._multiple=!1,this.name=this.getAttribute("name")||"",this._id="",this.formName="",this.value="",this.values=[],this.defaultLabel="",this._optionsLength=-1,this.nativeSelect=null,this.form=null,this.hiddenInput=null,this.close=this.close.bind(this),this.onSelect=this.onSelect.bind(this),this.processOptions=this.processOptions.bind(this),this.processForm=this.processForm.bind(this),this.removeEventListeners=this.removeEventListeners.bind(this)}static get styles(){return I`.select-wrapper{position:relative}.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}select[multiple]{z-index:0}.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%;z-index:1}@media only screen and (hover:none) and (pointer:coarse){select{z-index:2}}.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;z-index:100}.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}`}connectedCallback(){super.connectedCallback(),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.defaultLabel=this.getAttribute("default-label")||""}open(){this.disabled||(this.visible=!0,this.removeEventListeners(),document.body.addEventListener("click",this.close,!0))}close(t){t&&this.contains(t.target)||(this.visible=!1,this.removeEventListeners())}enable(){this.disabled=!1}disable(){this.disabled=!0}get selectedIndex(){var t;return null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedIndex}set selectedIndex(t){(t||0===t)&&this.onSelect(this.options[t].value)}get selectedOptions(){var t;return null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedOptions}removeEventListeners(){document.body.removeEventListener("click",this.close)}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))}handleNativeSelectChange(){var t;this.selectedIndex=null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedIndex}processOptions(){this.nativeSelect=this.shadowRoot.querySelector("select");const t=this.querySelectorAll("option-pure");this._optionsLength=t.length;for(let e=0;e<t.length;e++){const i=t[e];i.setOnSelectCallback(this.onSelect),this.options[e]=i.getOption(),this.options[e].selected&&this.onSelect(this.options[e].value),e!==this._optionsLength-1||this.selectedOption.value||this._multiple||this.selectOption(this.options[0],!0)}this.processForm()}onSelect(t){for(let e=0;e<this.options.length;e++){const i=this.options[e];i.value!==t?this._multiple||i.unselect():this.selectOption(i)}this._multiple||this.close()}selectOption(t,e){if(this._multiple){const e=this._selectedOptions.find((({value:e})=>e===t.value));if(e){const i=this._selectedOptions.indexOf(e);this.values.splice(i,1),this._selectedOptions.splice(i,1),t.unselect()}else this.values.push(t.value),this._selectedOptions.push(t),t.select();this.requestUpdate()}else this.selectedOption=t,this.value=t.value,t.select();if(this.form&&this.hiddenInput){this.hiddenInput.value=this._multiple?this.values.join(","):this.value;const t=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(t)}e||this.afterSelect()}afterSelect(){this.dispatchEvent(new Event("change"))}handleKeyPress(t){t.which!==lt&&t.which!==rt||this.open()}onCrossClick(t,e){t.stopPropagation(),this.onSelect(e)}renderNativeOptions(){return this.options.map((({value:t,label:e,hidden:i,disabled:s})=>{let o=this.selectedOption.value===t;return this._multiple&&(o=Boolean(this._selectedOptions.find((e=>e.value===t)))),x`<option value="${t}" ?selected="${o}" ?hidden="${i}" ?disabled="${s}">${e}</option>`}))}renderLabel(){return this._multiple&&this._selectedOptions.length?x`<div class="multi-selected-wrapper">${this._selectedOptions.map((({label:t,value:e})=>x`<span class="multi-selected">${t} <span class="cross" @click="${t=>this.onCrossClick(t,e)}"></span></span>`))}</div>`:this.selectedOption.label||this.defaultLabel}render(){const t=["label"];return this.disabled&&t.push("disabled"),this.visible&&t.push("visible"),x`<div class="select-wrapper"><select @change="${this.handleNativeSelectChange}" ?disabled="${this.disabled}" ?multiple="${this._multiple}" name="${nt(this.name||void 0)}" id="${nt(this.id||void 0)}" size="1">${this.renderNativeOptions()}</select><div class="select"><div class="${t.join(" ")}" @click="${this.visible?this.close:this.open}" @keydown="${this.handleKeyPress}" tabindex="0">${this.renderLabel()}</div><div class="dropdown${this.visible?" visible":""}"><slot @slotchange="${this.processOptions}"></slot></div></div></div>`}};dt([ot()],ut.prototype,"options",void 0),dt([ot()],ut.prototype,"visible",void 0),dt([ot()],ut.prototype,"selectedOption",void 0),dt([ot()],ut.prototype,"_selectedOptions",void 0),dt([ot()],ut.prototype,"disabled",void 0),dt([ot()],ut.prototype,"_multiple",void 0),dt([ot()],ut.prototype,"name",void 0),dt([ot()],ut.prototype,"_id",void 0),dt([ot()],ut.prototype,"formName",void 0),dt([ot()],ut.prototype,"value",void 0),dt([ot()],ut.prototype,"values",void 0),dt([ot()],ut.prototype,"defaultLabel",void 0),dt([ot()],ut.prototype,"_optionsLength",void 0),ut=dt([it("select-pure")],ut);
+function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(e,i,s){var o=s.value;if("function"!=typeof o)throw new TypeError("@boundMethod decorator can only be applied to methods not: ".concat(t(o)));var n=!1;return{configurable:!0,get:function(){if(n||this===e.prototype||this.hasOwnProperty(i)||"function"!=typeof o)return o;var t=o.bind(this);return n=!0,Object.defineProperty(this,i,{configurable:!0,get:function(){return t},set:function(t){o=t,delete this[i]}}),n=!1,t},set:function(t){o=t}}}var i,s,o,n;const l=globalThis.trustedTypes,r=l?l.createPolicy("lit-html",{createHTML:t=>t}):void 0,a=`lit$${(Math.random()+"").slice(9)}$`,d="?"+a,h=`<${d}>`,c=document,p=(t="")=>c.createComment(t),u=t=>null===t||"object"!=typeof t&&"function"!=typeof t,v=Array.isArray,f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,b=/-->/g,y=/>/g,g=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,m=/'/g,S=/"/g,x=/^(?:script|style|textarea)$/i,w=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),O=Symbol.for("lit-noChange"),k=Symbol.for("lit-nothing"),C=new WeakMap,$=c.createTreeWalker(c,129,null,!1);class P{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,n=0;const c=t.length-1,u=this.parts,[v,w]=((t,e)=>{const i=t.length-1,s=[];let o,n=2===e?"<svg>":"",l=f;for(let e=0;e<i;e++){const i=t[e];let r,d,c=-1,p=0;for(;p<i.length&&(l.lastIndex=p,d=l.exec(i),null!==d);)p=l.lastIndex,l===f?"!--"===d[1]?l=b:void 0!==d[1]?l=y:void 0!==d[2]?(x.test(d[2])&&(o=RegExp("</"+d[2],"g")),l=g):void 0!==d[3]&&(l=g):l===g?">"===d[0]?(l=null!=o?o:f,c=-1):void 0===d[1]?c=-2:(c=l.lastIndex-d[2].length,r=d[1],l=void 0===d[3]?g:'"'===d[3]?S:m):l===S||l===m?l=g:l===b||l===y?l=f:(l=g,o=void 0);const u=l===g&&t[e+1].startsWith("/>")?" ":"";n+=l===f?i+h:c>=0?(s.push(r),i.slice(0,c)+"$lit$"+i.slice(c)+a+u):i+a+(-2===c?(s.push(void 0),e):u)}const d=n+(t[i]||"<?>")+(2===e?"</svg>":"");return[void 0!==r?r.createHTML(d):d,s]})(t,e);if(this.el=P.createElement(v,i),$.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=$.nextNode())&&u.length<c;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(a)){const i=w[n++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(a),e=/([.?@])?(.*)/.exec(i);u.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?R:"?"===e[1]?N:"@"===e[1]?L:I})}else u.push({type:6,index:o})}for(const e of t)s.removeAttribute(e)}if(x.test(s.tagName)){const t=s.textContent.split(a),e=t.length-1;if(e>0){s.textContent=l?l.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],p()),$.nextNode(),u.push({type:2,index:++o});s.append(t[e],p())}}}else if(8===s.nodeType)if(s.data===d)u.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(a,t+1));)u.push({type:7,index:o}),t+=a.length-1}o++}}static createElement(t,e){const i=c.createElement("template");return i.innerHTML=t,i}}function E(t,e,i=t,s){var o,n,l,r;if(e===O)return e;let a=void 0!==s?null===(o=i.Σi)||void 0===o?void 0:o[s]:i.Σo;const d=u(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==d&&(null===(n=null==a?void 0:a.O)||void 0===n||n.call(a,!1),void 0===d?a=void 0:(a=new d(t),a.T(t,i,s)),void 0!==s?(null!==(l=(r=i).Σi)&&void 0!==l?l:r.Σi=[])[s]=a:i.Σo=a),void 0!==a&&(e=E(t,a.S(t,e.values),a,s)),e}class H{constructor(t,e){this.l=[],this.N=void 0,this.D=t,this.M=e}u(t){var e;const{el:{content:i},parts:s}=this.D,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:c).importNode(i,!0);$.currentNode=o;let n=$.nextNode(),l=0,r=0,a=s[0];for(;void 0!==a;){if(l===a.index){let e;2===a.type?e=new A(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new U(n,this,t)),this.l.push(e),a=s[++r]}l!==(null==a?void 0:a.index)&&(n=$.nextNode(),l++)}return o}v(t){let e=0;for(const i of this.l)void 0!==i&&(void 0!==i.strings?(i.I(t,i,e),e+=i.strings.length-2):i.I(t[e])),e++}}class A{constructor(t,e,i,s){this.type=2,this.N=void 0,this.A=t,this.B=e,this.M=i,this.options=s}setConnected(t){var e;null===(e=this.P)||void 0===e||e.call(this,t)}get parentNode(){return this.A.parentNode}get startNode(){return this.A}get endNode(){return this.B}I(t,e=this){t=E(this,t,e),u(t)?t===k||null==t||""===t?(this.H!==k&&this.R(),this.H=k):t!==this.H&&t!==O&&this.m(t):void 0!==t._$litType$?this._(t):void 0!==t.nodeType?this.$(t):(t=>{var e;return v(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.g(t):this.m(t)}k(t,e=this.B){return this.A.parentNode.insertBefore(t,e)}$(t){this.H!==t&&(this.R(),this.H=this.k(t))}m(t){const e=this.A.nextSibling;null!==e&&3===e.nodeType&&(null===this.B?null===e.nextSibling:e===this.B.previousSibling)?e.data=t:this.$(c.createTextNode(t)),this.H=t}_(t){var e;const{values:i,_$litType$:s}=t,o="number"==typeof s?this.C(t):(void 0===s.el&&(s.el=P.createElement(s.h,this.options)),s);if((null===(e=this.H)||void 0===e?void 0:e.D)===o)this.H.v(i);else{const t=new H(o,this),e=t.u(this.options);t.v(i),this.$(e),this.H=t}}C(t){let e=C.get(t.strings);return void 0===e&&C.set(t.strings,e=new P(t)),e}g(t){v(this.H)||(this.H=[],this.R());const e=this.H;let i,s=0;for(const o of t)s===e.length?e.push(i=new A(this.k(p()),this.k(p()),this,this.options)):i=e[s],i.I(o),s++;s<e.length&&(this.R(i&&i.B.nextSibling,s),e.length=s)}R(t=this.A.nextSibling,e){var i;for(null===(i=this.P)||void 0===i||i.call(this,!1,!0,e);t&&t!==this.B;){const e=t.nextSibling;t.remove(),t=e}}}class I{constructor(t,e,i,s,o){this.type=1,this.H=k,this.N=void 0,this.V=void 0,this.element=t,this.name=e,this.M=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this.H=Array(i.length-1).fill(k),this.strings=i):this.H=k}get tagName(){return this.element.tagName}I(t,e=this,i,s){const o=this.strings;let n=!1;if(void 0===o)t=E(this,t,e,0),n=!u(t)||t!==this.H&&t!==O,n&&(this.H=t);else{const s=t;let l,r;for(t=o[0],l=0;l<o.length-1;l++)r=E(this,s[i+l],e,l),r===O&&(r=this.H[l]),n||(n=!u(r)||r!==this.H[l]),r===k?t=k:t!==k&&(t+=(null!=r?r:"")+o[l+1]),this.H[l]=r}n&&!s&&this.W(t)}W(t){t===k?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class R extends I{constructor(){super(...arguments),this.type=3}W(t){this.element[this.name]=t===k?void 0:t}}class N extends I{constructor(){super(...arguments),this.type=4}W(t){t&&t!==k?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class L extends I{constructor(){super(...arguments),this.type=5}I(t,e=this){var i;if((t=null!==(i=E(this,t,e,0))&&void 0!==i?i:k)===O)return;const s=this.H,o=t===k&&s!==k||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==k&&(s===k||o);o&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this.H=t}handleEvent(t){var e,i;"function"==typeof this.H?this.H.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this.H.handleEvent(t)}}class U{constructor(t,e,i){this.element=t,this.type=6,this.N=void 0,this.V=void 0,this.M=e,this.options=i}I(t){E(this,t)}}null===(s=(i=globalThis).litHtmlPlatformSupport)||void 0===s||s.call(i,P,A),(null!==(o=(n=globalThis).litHtmlVersions)&&void 0!==o?o:n.litHtmlVersions=[]).push("2.0.0-rc.3");const z=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,M=Symbol();class T{constructor(t,e){if(e!==M)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return z&&void 0===this.t&&(this.t=new CSSStyleSheet,this.t.replaceSync(this.cssText)),this.t}toString(){return this.cssText}}const V=new Map,_=t=>{let e=V.get(t);return void 0===e&&V.set(t,e=new T(t,M)),e},D=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(t instanceof T)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return _(i)},j=(t,e)=>{z?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style");i.textContent=e.cssText,t.appendChild(i)}))},B=z?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>_("string"==typeof t?t:t+""))(e)})(t):t;var q,W,K,F;const J={toAttribute(t,e){switch(e){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},Z=(t,e)=>e!==t&&(e==e||t==t),G={attribute:!0,type:String,converter:J,reflect:!1,hasChanged:Z};class Q extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πl=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πh=null,this.u()}static addInitializer(t){var e;null!==(e=this.v)&&void 0!==e||(this.v=[]),this.v.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this.Πp(i,e);void 0!==s&&(this.Πm.set(s,i),t.push(s))})),t}static createProperty(t,e=G){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||G}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πm=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(B(t))}else void 0!==t&&e.push(B(t));return e}static"Πp"(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this.Πg=new Promise((t=>this.enableUpdating=t)),this.L=new Map,this.Π_(),this.requestUpdate(),null===(t=this.constructor.v)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this.ΠU)&&void 0!==e?e:this.ΠU=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this.ΠU)||void 0===e||e.splice(this.ΠU.indexOf(t)>>>0,1)}"Π_"(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this.Πi.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return j(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)})),this.Πl&&(this.Πl(),this.Πo=this.Πl=void 0)}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)})),this.Πo=new Promise((t=>this.Πl=t))}attributeChangedCallback(t,e,i){this.K(t,i)}"Πj"(t,e,i=G){var s,o;const n=this.constructor.Πp(t,i);if(void 0!==n&&!0===i.reflect){const l=(null!==(o=null===(s=i.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==o?o:J.toAttribute)(e,i.type);this.Πh=t,null==l?this.removeAttribute(n):this.setAttribute(n,l),this.Πh=null}}K(t,e){var i,s,o;const n=this.constructor,l=n.Πm.get(t);if(void 0!==l&&this.Πh!==l){const t=n.getPropertyOptions(l),r=t.converter,a=null!==(o=null!==(s=null===(i=r)||void 0===i?void 0:i.fromAttribute)&&void 0!==s?s:"function"==typeof r?r:null)&&void 0!==o?o:J.fromAttribute;this.Πh=l,this[l]=a(e,t.type),this.Πh=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||Z)(this[t],e)?(this.L.has(t)||this.L.set(t,e),!0===i.reflect&&this.Πh!==t&&(void 0===this.Πk&&(this.Πk=new Map),this.Πk.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this.Πg=this.Πq())}async"Πq"(){this.isUpdatePending=!0;try{for(await this.Πg;this.Πo;)await this.Πo}catch(t){Promise.reject(t)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach(((t,e)=>this[e]=t)),this.Πi=void 0);let e=!1;const i=this.L;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this.Π$()}catch(t){throw e=!1,this.Π$(),t}e&&this.E(i)}willUpdate(t){}E(t){var e;null===(e=this.ΠU)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}"Π$"(){this.L=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πg}shouldUpdate(t){return!0}update(t){void 0!==this.Πk&&(this.Πk.forEach(((t,e)=>this.Πj(e,this[e],t))),this.Πk=void 0),this.Π$()}updated(t){}firstUpdated(t){}}var X,Y,tt,et,it,st;Q.finalized=!0,Q.elementProperties=new Map,Q.elementStyles=[],Q.shadowRootOptions={mode:"open"},null===(W=(q=globalThis).reactiveElementPlatformSupport)||void 0===W||W.call(q,{ReactiveElement:Q}),(null!==(K=(F=globalThis).reactiveElementVersions)&&void 0!==K?K:F.reactiveElementVersions=[]).push("1.0.0-rc.2"),(null!==(X=(st=globalThis).litElementVersions)&&void 0!==X?X:st.litElementVersions=[]).push("3.0.0-rc.2");class ot extends Q{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();super.update(t),this.Φt=((t,e,i)=>{var s,o;const n=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new A(e.insertBefore(p(),t),t,void 0,i)}return l.I(t),l})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return O}}ot.finalized=!0,ot._$litElement$=!0,null===(tt=(Y=globalThis).litElementHydrateSupport)||void 0===tt||tt.call(Y,{LitElement:ot}),null===(it=(et=globalThis).litElementPlatformSupport)||void 0===it||it.call(et,{LitElement:ot});const nt=t=>null!=t?t:k,lt=t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:s}=e;return{kind:i,elements:s,finisher(e){window.customElements.define(t,e)}}})(t,e),rt=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function at(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):rt(t,e)}const dt="Enter",ht="Tab",ct=()=>{},pt={label:"",value:"",select:ct,unselect:ct,disabled:!1,hidden:!1,selected:!1},ut=D`.select-wrapper{position:relative}.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}select[multiple]{z-index:0}.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%;z-index:1}@media only screen and (hover:none) and (pointer:coarse){select{z-index:2}}.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;z-index:100}.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}`,vt=D`.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:not(.disabled):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}`;var ft=function(t,e,i,s){var o,n=arguments.length,l=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l};let bt=class extends ot{constructor(){super(...arguments),this.isSelected=!1,this.isDisabled=!1,this.isHidden=!1,this.optionValue="",this.displayedLabel="",this.optionIndex=-1}static get styles(){return vt}connectedCallback(){super.connectedCallback(),this.isSelected=null!==this.getAttribute("selected"),this.isDisabled=null!==this.getAttribute("disabled"),this.isHidden=null!==this.getAttribute("hidden"),this.optionValue=this.getAttribute("value")||"",this.assignDisplayedLabel(),this.fireOnReadyCallback()}getOption(){return{label:this.displayedLabel,value:this.optionValue,select:this.select,unselect:this.unselect,selected:this.isSelected,disabled:this.isDisabled,hidden:this.isHidden}}select(){this.isSelected=!0,this.setAttribute("selected","")}unselect(){this.isSelected=!1,this.removeAttribute("selected")}setOnReadyCallback(t,e){this.onReady=t,this.optionIndex=e}setOnSelectCallback(t){this.onSelect=t}render(){const t=["option"];return this.isSelected&&t.push("selected"),this.isDisabled&&t.push("disabled"),w`<div class="${t.join(" ")}" @click="${this.fireOnSelectCallback}" @keydown="${this.fireOnSelectIfEnterPressed}" tabindex="${nt(this.isDisabled?void 0:"0")}"><slot hidden @slotchange="${this.assignDisplayedLabel}"></slot>${this.displayedLabel}</div>`}assignDisplayedLabel(){this.textContent?this.displayedLabel=this.textContent:this.getAttribute("label")&&(this.displayedLabel=this.getAttribute("label")||"")}fireOnReadyCallback(){this.onReady&&this.onReady(this.getOption(),this.optionIndex)}fireOnSelectCallback(t){t.stopPropagation(),this.onSelect&&!this.isDisabled&&this.onSelect(this.optionValue)}fireOnSelectIfEnterPressed(t){t.key===dt&&this.fireOnSelectCallback(t)}};ft([at()],bt.prototype,"isSelected",void 0),ft([at()],bt.prototype,"isDisabled",void 0),ft([at()],bt.prototype,"isHidden",void 0),ft([at()],bt.prototype,"optionValue",void 0),ft([at()],bt.prototype,"displayedLabel",void 0),ft([at()],bt.prototype,"optionIndex",void 0),ft([e],bt.prototype,"getOption",null),ft([e],bt.prototype,"select",null),ft([e],bt.prototype,"unselect",null),ft([e],bt.prototype,"fireOnReadyCallback",null),bt=ft([lt("option-pure")],bt);var yt=function(t,e,i,s){var o,n=arguments.length,l=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l};let gt=class extends ot{constructor(){super(...arguments),this.options=[],this.visible=!1,this.selectedOption=pt,this._selectedOptions=[],this.disabled=!1,this.isMultipleSelect=!1,this.name="",this._id="",this.formName="",this.value="",this.values=[],this.defaultLabel="",this.totalRenderedChildOptions=-1,this.form=null,this.hiddenInput=null}static get styles(){return ut}connectedCallback(){super.connectedCallback(),this.disabled=null!==this.getAttribute("disabled"),this.isMultipleSelect=null!==this.getAttribute("multiple"),this.name=this.getAttribute("name")||"",this._id=this.getAttribute("id")||"",this.formName=this.name||this.id,this.defaultLabel=this.getAttribute("default-label")||""}open(){this.disabled||(this.visible=!0,this.removeEventListeners(),document.body.addEventListener("click",this.close,!0))}close(t){t&&this.contains(t.target)||(this.visible=!1,this.removeEventListeners())}enable(){this.disabled=!1}disable(){this.disabled=!0}get selectedIndex(){var t;return null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedIndex}set selectedIndex(t){(t||0===t)&&this.selectOptionByValue(this.options[t].value)}get selectedOptions(){var t;return null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedOptions}render(){const t=["label"];return this.disabled&&t.push("disabled"),this.visible&&t.push("visible"),w`<div class="select-wrapper"><select @change="${this.handleNativeSelectChange}" ?disabled="${this.disabled}" ?multiple="${this.isMultipleSelect}" name="${nt(this.name||void 0)}" id="${nt(this.id||void 0)}" size="1">${this.getNativeOptionsHtml()}</select><div class="select"><div class="${t.join(" ")}" @click="${this.visible?this.close:this.open}" @keydown="${this.openDropdownIfProperKeyIsPressed}" tabindex="0">${this.getDisplayedLabel()}</div><div class="dropdown${this.visible?" visible":""}"><slot @slotchange="${this.initializeSelect}"></slot></div></div></div>`}handleNativeSelectChange(){var t;this.selectedIndex=null===(t=this.nativeSelect)||void 0===t?void 0:t.selectedIndex}getNativeOptionsHtml(){return this.options.map(this.getSingleNativeOptionHtml)}getSingleNativeOptionHtml({value:t,label:e,hidden:i,disabled:s}){return w`<option value="${t}" ?selected="${this.isOptionSelected(t)}" ?hidden="${i}" ?disabled="${s}">${e}</option>`}isOptionSelected(t){let e=this.selectedOption.value===t;return this.isMultipleSelect&&(e=Boolean(this._selectedOptions.find((e=>e.value===t)))),e}openDropdownIfProperKeyIsPressed(t){t.key!==dt&&t.key!==ht||this.open()}getDisplayedLabel(){return this.isMultipleSelect&&this._selectedOptions.length?this.getMultiSelectLabelHtml():this.selectedOption.label||this.defaultLabel}getMultiSelectLabelHtml(){return w`<div class="multi-selected-wrapper">${this._selectedOptions.map(this.getMultiSelectSelectedOptionHtml)}</div>`}getMultiSelectSelectedOptionHtml({label:t,value:e}){return w`<span class="multi-selected">${t} <span class="cross" @click="${t=>this.fireOnSelectCallback(t,e)}"></span></span>`}fireOnSelectCallback(t,e){t.stopPropagation(),this.selectOptionByValue(e)}initializeSelect(){this.processChildOptions(),this.selectDefaultOptionIfNoneSelected(),this.appendHiddenInputToClosestForm()}processChildOptions(){const t=this.querySelectorAll("option-pure");this.totalRenderedChildOptions=t.length;for(let e=0;e<t.length;e++)this.initializeSingleOption(t[e],e)}selectDefaultOptionIfNoneSelected(){!this.selectedOption.value&&!this.isMultipleSelect&&this.options.length&&this.selectOptionByValue(this.options[0].value)}initializeSingleOption(t,e){t.setOnSelectCallback(this.selectOptionByValue),this.options[e]=t.getOption(),this.options[e].selected&&this.selectOptionByValue(this.options[e].value)}removeEventListeners(){document.body.removeEventListener("click",this.close)}appendHiddenInputToClosestForm(){this.form=this.closest("form"),this.form&&!this.hiddenInput&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}unselectAllOptions(){for(let t=0;t<this.options.length;t++)this.options[t].unselect()}selectOptionByValue(t){const e=this.options.find((({value:e})=>e===t));e&&this.setSelectValue(e)}setSelectValue(t){this.isMultipleSelect?this.setMultiSelectValue(t):this.setSingleSelectValue(t),this.updateHiddenInputInForm(),this.dispatchChangeEvent()}dispatchChangeEvent(){this.dispatchEvent(new Event("change"))}setMultiSelectValue(t){const e=this._selectedOptions.indexOf(t);-1!==e?(this.values.splice(e,1),this._selectedOptions.splice(e,1),t.unselect()):(this.values.push(t.value),this._selectedOptions.push(t),t.select()),this.requestUpdate()}setSingleSelectValue(t){this.unselectAllOptions(),this.close(),this.selectedOption=t,this.value=t.value,t.select()}updateHiddenInputInForm(){if(!this.form||!this.hiddenInput)return;this.hiddenInput.value=this.isMultipleSelect?this.values.join(","):this.value;const t=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(t)}};yt([at()],gt.prototype,"options",void 0),yt([at()],gt.prototype,"visible",void 0),yt([at()],gt.prototype,"selectedOption",void 0),yt([at()],gt.prototype,"_selectedOptions",void 0),yt([at()],gt.prototype,"disabled",void 0),yt([at()],gt.prototype,"isMultipleSelect",void 0),yt([at()],gt.prototype,"name",void 0),yt([at()],gt.prototype,"_id",void 0),yt([at()],gt.prototype,"formName",void 0),yt([at()],gt.prototype,"value",void 0),yt([at()],gt.prototype,"values",void 0),yt([at()],gt.prototype,"defaultLabel",void 0),yt([at()],gt.prototype,"totalRenderedChildOptions",void 0),yt([function(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s){const s=null!==(o=i.originalKey)&&void 0!==o?o:i.key,n=null!=e?{kind:"method",placement:"prototype",key:s,descriptor:e(i.key)}:{...i,key:s};return null!=t&&(n.finisher=function(e){t(e,s)}),n}{const o=i.constructor;void 0!==e&&Object.defineProperty(i,s,e(s)),null==t||t(o,s)}})({descriptor:i=>{const s={get(){var e;return null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t)},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof i?Symbol():"__"+i;s.get=function(){var i;return void 0===this[e]&&(this[e]=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(t)),this[e]}}return s}})}("select")],gt.prototype,"nativeSelect",void 0),yt([e],gt.prototype,"close",null),yt([e],gt.prototype,"getSingleNativeOptionHtml",null),yt([e],gt.prototype,"getMultiSelectLabelHtml",null),yt([e],gt.prototype,"getMultiSelectSelectedOptionHtml",null),yt([e],gt.prototype,"initializeSelect",null),yt([e],gt.prototype,"initializeSingleOption",null),yt([e],gt.prototype,"removeEventListeners",null),yt([e],gt.prototype,"appendHiddenInputToClosestForm",null),yt([e],gt.prototype,"selectOptionByValue",null),gt=yt([lt("select-pure")],gt);

lib/components/__tests__/Option.spec.js

 import "./../Option";
+import { KEYS } from "./../../constants";
 describe("Option component", () => {
@@ -44,2 +45,17 @@ describe("render", () => {
     });
+    describe("keyboard interactions", () => {
+        it("sellects by pressing enter", async () => {
+            var _a;
+            document.body.innerHTML = "<option-pure value='UA' label='Ukraine'></option-pure>";
+            const option = document.body.querySelector("option-pure");
+            const mockedOnSelect = jest.fn();
+            option.setOnSelectCallback(mockedOnSelect);
+            await option.updateComplete;
+            const optionDiv = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option");
+            expect(mockedOnSelect).not.toHaveBeenCalled();
+            optionDiv === null || optionDiv === void 0 ? void 0 : optionDiv.dispatchEvent(new KeyboardEvent("keydown", { key: KEYS.ENTER }));
+            expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+            expect(mockedOnSelect).toHaveBeenCalledWith("UA");
+        });
+    });
     describe("callbacks", () => {
@@ -46,0 +62,0 @@ it("fires onSelect callback", async () => {

lib/components/Option.d.ts

 import { LitElement } from "lit";
 export declare class OptionPure extends LitElement {
     static get styles(): import("lit").CSSResultGroup;
-    _selected: boolean;
-    _disabled: boolean;
-    _hidden: boolean;
-    _value: string;
-    _label: string;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isHidden: boolean;
+    optionValue: string;
+    displayedLabel: string;
     optionIndex: number;
     private onSelect?;
     private onReady?;
-    constructor();
     connectedCallback(): void;
@@ -25,9 +24,10 @@ getOption(): {
     unselect(): void;
-    setOnReadyCallback(callback: Function, index: number): void;
+    setOnReadyCallback(onReadyCallback: Function, optionIndex: number): void;
     setOnSelectCallback(callback: Function): void;
-    private processLabel;
-    private onClick;
-    private handleKeyPress;
     render(): import("lit-html").TemplateResult<1>;
+    private assignDisplayedLabel;
+    private fireOnReadyCallback;
+    private fireOnSelectCallback;
+    private fireOnSelectIfEnterPressed;
 }
 //# sourceMappingURL=Option.d.ts.map

lib/components/Option.js

@@ -7,89 +7,53 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { css, LitElement, html } from "lit";
+import { boundMethod } from "autobind-decorator";
+import { LitElement, html } from "lit";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
-import { ifDefined } from "lit-html/directives/if-defined.js";
-import { KEYS } from "./constants";
+import { KEYS } from "./../constants";
+import { optionStyles } from "./../styles";
 let OptionPure = class OptionPure extends LitElement {
     constructor() {
-        super();
-        this._selected = false;
-        this._disabled = false;
-        this._hidden = false;
-        this._value = "";
-        this._label = "";
+        super(...arguments);
+        this.isSelected = false;
+        this.isDisabled = false;
+        this.isHidden = false;
+        this.optionValue = "";
+        this.displayedLabel = "";
         this.optionIndex = -1;
-        // bindings
-        this.onClick = this.onClick.bind(this);
-        this.select = this.select.bind(this);
-        this.unselect = this.unselect.bind(this);
-        this.getOption = this.getOption.bind(this);
     }
     static get styles() {
-        return css `
-      .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:not(.disabled):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;
-      }
-    `;
+        return optionStyles;
     }
     connectedCallback() {
         super.connectedCallback();
-        // set properties
-        this._selected = this.getAttribute("selected") !== null;
-        this._disabled = this.getAttribute("disabled") !== null;
-        this._hidden = this.getAttribute("hidden") !== null;
-        this._value = this.getAttribute("value") || "";
-        this.processLabel();
-        if (this.onReady) {
-            this.onReady(this.getOption(), this.optionIndex);
-        }
+        this.isSelected = this.getAttribute("selected") !== null;
+        this.isDisabled = this.getAttribute("disabled") !== null;
+        this.isHidden = this.getAttribute("hidden") !== null;
+        this.optionValue = this.getAttribute("value") || "";
+        this.assignDisplayedLabel();
+        this.fireOnReadyCallback();
     }
     getOption() {
         return {
-            label: this._label,
-            value: this._value,
+            label: this.displayedLabel,
+            value: this.optionValue,
             select: this.select,
             unselect: this.unselect,
-            selected: this._selected,
-            disabled: this._disabled,
-            hidden: this._hidden,
+            selected: this.isSelected,
+            disabled: this.isDisabled,
+            hidden: this.isHidden,
         };
     }
     select() {
-        this._selected = true;
+        this.isSelected = true;
         this.setAttribute("selected", "");
     }
     unselect() {
-        this._selected = false;
+        this.isSelected = false;
         this.removeAttribute("selected");
     }
-    setOnReadyCallback(callback, index) {
-        this.onReady = callback;
-        this.optionIndex = index;
+    setOnReadyCallback(onReadyCallback, optionIndex) {
+        this.onReady = onReadyCallback;
+        this.optionIndex = optionIndex;
     }
@@ -99,42 +63,48 @@ setOnSelectCallback(callback) {
     }
-    processLabel() {
+    render() {
+        const optionWrapperClassNames = ["option"];
+        if (this.isSelected) {
+            optionWrapperClassNames.push("selected");
+        }
+        if (this.isDisabled) {
+            optionWrapperClassNames.push("disabled");
+        }
+        return html `
+      <div
+        class="${optionWrapperClassNames.join(" ")}"
+        @click=${this.fireOnSelectCallback}
+        @keydown="${this.fireOnSelectIfEnterPressed}"
+        tabindex="${ifDefined(this.isDisabled ? undefined : "0")}"
+      >
+        <slot hidden @slotchange=${this.assignDisplayedLabel}></slot>
+        ${this.displayedLabel}
+      </div>
+    `;
+    }
+    assignDisplayedLabel() {
         if (this.textContent) {
-            this._label = this.textContent;
+            this.displayedLabel = this.textContent;
             return;
         }
         if (this.getAttribute("label")) {
-            this._label = this.getAttribute("label") || "";
+            this.displayedLabel = this.getAttribute("label") || "";
         }
     }
-    onClick(event) {
-        event.stopPropagation();
-        if (!this.onSelect || this._disabled) {
+    fireOnReadyCallback() {
+        if (!this.onReady) {
             return;
         }
-        this.onSelect(this._value);
+        this.onReady(this.getOption(), this.optionIndex);
     }
-    handleKeyPress(event) {
-        if (event.which === KEYS.ENTER) {
-            this.onClick(event);
+    fireOnSelectCallback(optionClickEvent) {
+        optionClickEvent.stopPropagation();
+        if (!this.onSelect || this.isDisabled) {
+            return;
         }
+        this.onSelect(this.optionValue);
     }
-    render() {
-        const classNames = ["option"];
-        if (this._selected) {
-            classNames.push("selected");
+    fireOnSelectIfEnterPressed(keyboardKeydownEvent) {
+        if (keyboardKeydownEvent.key === KEYS.ENTER) {
+            this.fireOnSelectCallback(keyboardKeydownEvent);
         }
-        if (this._disabled) {
-            classNames.push("disabled");
-        }
-        return html `
-      <div
-        class="${classNames.join(" ")}"
-        @click=${this.onClick}
-        @keydown="${this.handleKeyPress}"
-        tabindex="${ifDefined(this._disabled ? undefined : "0")}"
-      >
-        <slot hidden @slotchange=${this.processLabel}></slot>
-        ${this._label}
-      </div>
-    `;
     }
@@ -144,18 +114,30 @@ };
     property()
-], OptionPure.prototype, "_selected", void 0);
+], OptionPure.prototype, "isSelected", void 0);
 __decorate([
     property()
-], OptionPure.prototype, "_disabled", void 0);
+], OptionPure.prototype, "isDisabled", void 0);
 __decorate([
     property()
-], OptionPure.prototype, "_hidden", void 0);
+], OptionPure.prototype, "isHidden", void 0);
 __decorate([
     property()
-], OptionPure.prototype, "_value", void 0);
+], OptionPure.prototype, "optionValue", void 0);
 __decorate([
     property()
-], OptionPure.prototype, "_label", void 0);
+], OptionPure.prototype, "displayedLabel", void 0);
 __decorate([
     property()
 ], OptionPure.prototype, "optionIndex", void 0);
+__decorate([
+    boundMethod
+], OptionPure.prototype, "getOption", null);
+__decorate([
+    boundMethod
+], OptionPure.prototype, "select", null);
+__decorate([
+    boundMethod
+], OptionPure.prototype, "unselect", null);
+__decorate([
+    boundMethod
+], OptionPure.prototype, "fireOnReadyCallback", null);
 OptionPure = __decorate([
@@ -162,0 +144,0 @@ customElement("option-pure")

lib/components/Select.d.ts

@@ -10,3 +10,3 @@ import { LitElement } from "lit";
     disabled: boolean;
-    _multiple: boolean;
+    isMultipleSelect: boolean;
     name: string;
@@ -18,7 +18,6 @@ _id: string;
     defaultLabel: string;
-    _optionsLength: number;
-    private nativeSelect;
+    totalRenderedChildOptions: number;
+    nativeSelect: HTMLSelectElement;
     private form;
     private hiddenInput;
-    constructor();
     connectedCallback(): void;
@@ -30,17 +29,28 @@ open(): void;
     get selectedIndex(): number | undefined;
-    set selectedIndex(index: number | undefined);
-    get selectedOptions(): HTMLCollectionOf<HTMLOptionElement> | undefined;
+    set selectedIndex(newSelectedIndex: number | undefined);
+    get selectedOptions(): HTMLCollectionOf<HTMLOptionElement>;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleNativeSelectChange;
+    private getNativeOptionsHtml;
+    private getSingleNativeOptionHtml;
+    private isOptionSelected;
+    private openDropdownIfProperKeyIsPressed;
+    private getDisplayedLabel;
+    private getMultiSelectLabelHtml;
+    private getMultiSelectSelectedOptionHtml;
+    private fireOnSelectCallback;
+    private initializeSelect;
+    private processChildOptions;
+    private selectDefaultOptionIfNoneSelected;
+    private initializeSingleOption;
     private removeEventListeners;
-    private processForm;
-    private handleNativeSelectChange;
-    private processOptions;
-    private onSelect;
-    private selectOption;
-    private afterSelect;
-    private handleKeyPress;
-    private onCrossClick;
-    private renderNativeOptions;
-    private renderLabel;
-    render(): import("lit-html").TemplateResult<1>;
+    private appendHiddenInputToClosestForm;
+    private unselectAllOptions;
+    private selectOptionByValue;
+    private setSelectValue;
+    private dispatchChangeEvent;
+    private setMultiSelectValue;
+    private setSingleSelectValue;
+    private updateHiddenInputInForm;
 }
 //# sourceMappingURL=Select.d.ts.map

lib/components/Select.js

@@ -7,21 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { css, LitElement, html } from "lit";
+import { boundMethod } from "autobind-decorator";
+import { LitElement, html } from "lit";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
-import { KEYS } from "./constants";
-// eslint-disable-next-line
-const noop = () => { };
-const defaultOption = {
-    label: "",
-    value: "",
-    select: noop,
-    unselect: noop,
-    disabled: false,
-    hidden: false,
-    selected: false,
-};
+import { query } from "lit/decorators/query.js";
+import { KEYS, defaultOption } from "./../constants";
+import { selectStyles } from "./../styles";
 let SelectPure = class SelectPure extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.options = [];
@@ -31,5 +23,5 @@ this.visible = false;
         this._selectedOptions = [];
-        this.disabled = this.getAttribute("disabled") !== null;
-        this._multiple = false;
-        this.name = this.getAttribute("name") || "";
+        this.disabled = false;
+        this.isMultipleSelect = false;
+        this.name = "";
         this._id = "";
@@ -40,135 +32,13 @@ this.formName = "";
         this.defaultLabel = "";
-        this._optionsLength = -1;
-        this.nativeSelect = null;
+        this.totalRenderedChildOptions = -1;
         this.form = null;
         this.hiddenInput = null;
-        // bindings
-        this.close = this.close.bind(this);
-        this.onSelect = this.onSelect.bind(this);
-        this.processOptions = this.processOptions.bind(this);
-        this.processForm = this.processForm.bind(this);
-        this.removeEventListeners = this.removeEventListeners.bind(this);
     }
     static get styles() {
-        return css `
-      .select-wrapper {
-        position: relative;
-      }
-      .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: 0.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;
-      }
-      select[multiple] {
-        z-index: 0;
-      }
-      select,
-      .label {
-        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%;
-        z-index: 1;
-      }
-      @media only screen and (hover: none) and (pointer: coarse){
-        select {
-          z-index: 2;
-        }
-      }
-      .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;
-        z-index: 100;
-      }
-      .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;
-      }
-    `;
+        return selectStyles;
     }
     connectedCallback() {
         super.connectedCallback();
-        // set properties
         this.disabled = this.getAttribute("disabled") !== null;
-        this._multiple = this.getAttribute("multiple") !== null;
+        this.isMultipleSelect = this.getAttribute("multiple") !== null;
         this.name = this.getAttribute("name") || "";
@@ -205,7 +75,7 @@ this._id = this.getAttribute("id") || "";
     }
-    set selectedIndex(index) {
-        if (!index && index !== 0) {
+    set selectedIndex(newSelectedIndex) {
+        if (!newSelectedIndex && newSelectedIndex !== 0) {
             return;
         }
-        this.onSelect(this.options[index].value);
+        this.selectOptionByValue(this.options[newSelectedIndex].value);
     }
@@ -216,128 +86,2 @@ get selectedOptions() {
     }
-    removeEventListeners() {
-        document.body.removeEventListener("click", this.close);
-    }
-    processForm() {
-        this.form = this.closest("form");
-        if (!this.form) {
-            return;
-        }
-        this.hiddenInput = document.createElement("input");
-        this.hiddenInput.setAttribute("type", "hidden");
-        this.hiddenInput.setAttribute("name", this.formName);
-        this.form.appendChild(this.hiddenInput);
-    }
-    handleNativeSelectChange() {
-        var _a;
-        this.selectedIndex = (_a = this.nativeSelect) === null || _a === void 0 ? void 0 : _a.selectedIndex;
-    }
-    processOptions() {
-        // @ts-ignore
-        this.nativeSelect = this.shadowRoot.querySelector("select");
-        const options = this.querySelectorAll("option-pure");
-        this._optionsLength = options.length;
-        for (let i = 0; i < options.length; i++) {
-            const currentOption = options[i];
-            currentOption.setOnSelectCallback(this.onSelect);
-            this.options[i] = currentOption.getOption();
-            if (this.options[i].selected) {
-                this.onSelect(this.options[i].value);
-            }
-            if (i === this._optionsLength - 1 && !this.selectedOption.value && !this._multiple) {
-                this.selectOption(this.options[0], true);
-            }
-        }
-        this.processForm();
-    }
-    onSelect(optionValue) {
-        for (let i = 0; i < this.options.length; i++) {
-            const option = this.options[i];
-            if (option.value === optionValue) {
-                this.selectOption(option);
-                continue;
-            }
-            if (!this._multiple) {
-                option.unselect();
-            }
-        }
-        if (!this._multiple) {
-            this.close();
-        }
-    }
-    selectOption(option, 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) {
-            this.hiddenInput.value = this._multiple ? this.values.join(",") : this.value;
-            const event = new Event("change", { bubbles: true });
-            this.hiddenInput.dispatchEvent(event);
-        }
-        if (isInitialRender) {
-            return;
-        }
-        this.afterSelect();
-    }
-    afterSelect() {
-        this.dispatchEvent(new Event("change"));
-    }
-    handleKeyPress(event) {
-        if (event.which === KEYS.ENTER || event.which === KEYS.TAB) {
-            this.open();
-        }
-    }
-    onCrossClick(event, value) {
-        event.stopPropagation();
-        this.onSelect(value);
-    }
-    renderNativeOptions() {
-        return this.options.map(({ value, label, hidden, disabled }) => {
-            let isSelected = this.selectedOption.value === value;
-            if (this._multiple) {
-                isSelected = Boolean(this._selectedOptions.find(option => option.value === value));
-            }
-            return html `
-        <option
-          value=${value}
-          ?selected=${isSelected}
-          ?hidden=${hidden}
-          ?disabled=${disabled}
-        >
-          ${label}
-        </option>
-      `;
-        });
-    }
-    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;
-    }
     render() {
@@ -356,3 +100,3 @@ const labelClassNames = ["label"];
           ?disabled=${this.disabled}
-          ?multiple=${this._multiple}
+          ?multiple=${this.isMultipleSelect}
           name="${ifDefined(this.name || undefined)}"
@@ -362,5 +106,4 @@ id=${ifDefined(this.id || undefined)}
         >
-          ${this.renderNativeOptions()}
+          ${this.getNativeOptionsHtml()}
         </select>
-
         <div class="select">
@@ -370,9 +113,9 @@ <div
             @click="${this.visible ? this.close : this.open}"
-            @keydown="${this.handleKeyPress}"
+            @keydown="${this.openDropdownIfProperKeyIsPressed}"
             tabindex="0"
           >
-            ${this.renderLabel()}
+            ${this.getDisplayedLabel()}
           </div>
           <div class="dropdown${this.visible ? " visible" : ""}">
-            <slot @slotchange=${this.processOptions}></slot>
+            <slot @slotchange=${this.initializeSelect}></slot>
           </div>
@@ -383,2 +126,155 @@ </div>
     }
+    handleNativeSelectChange() {
+        var _a;
+        this.selectedIndex = (_a = this.nativeSelect) === null || _a === void 0 ? void 0 : _a.selectedIndex;
+    }
+    getNativeOptionsHtml() {
+        return this.options.map(this.getSingleNativeOptionHtml);
+    }
+    getSingleNativeOptionHtml({ value, label, hidden, disabled }) {
+        return html `
+      <option
+        value=${value}
+        ?selected=${this.isOptionSelected(value)}
+        ?hidden=${hidden}
+        ?disabled=${disabled}
+      >
+        ${label}
+      </option>
+    `;
+    }
+    isOptionSelected(value) {
+        let isOptionSelected = this.selectedOption.value === value;
+        if (this.isMultipleSelect) {
+            isOptionSelected = Boolean(this._selectedOptions.find(option => option.value === value));
+        }
+        return isOptionSelected;
+    }
+    openDropdownIfProperKeyIsPressed(event) {
+        if (event.key === KEYS.ENTER || event.key === KEYS.TAB) {
+            this.open();
+        }
+    }
+    getDisplayedLabel() {
+        if (this.isMultipleSelect && this._selectedOptions.length) {
+            return this.getMultiSelectLabelHtml();
+        }
+        return this.selectedOption.label || this.defaultLabel;
+    }
+    getMultiSelectLabelHtml() {
+        return html `
+      <div class="multi-selected-wrapper">
+        ${this._selectedOptions.map(this.getMultiSelectSelectedOptionHtml)}
+      </div>
+    `;
+    }
+    getMultiSelectSelectedOptionHtml({ label, value }) {
+        return html `
+      <span class="multi-selected">
+        ${label}
+        <span
+          class="cross"
+          @click=${(event) => this.fireOnSelectCallback(event, value)}
+        >
+        </span>
+      </span>
+    `;
+    }
+    fireOnSelectCallback(event, value) {
+        event.stopPropagation();
+        this.selectOptionByValue(value);
+    }
+    initializeSelect() {
+        this.processChildOptions();
+        this.selectDefaultOptionIfNoneSelected();
+        this.appendHiddenInputToClosestForm();
+    }
+    processChildOptions() {
+        const options = this.querySelectorAll("option-pure");
+        this.totalRenderedChildOptions = options.length;
+        for (let i = 0; i < options.length; i++) {
+            this.initializeSingleOption(options[i], i);
+        }
+    }
+    selectDefaultOptionIfNoneSelected() {
+        const shouldSelectDefaultOption = !this.selectedOption.value && !this.isMultipleSelect && this.options.length;
+        if (shouldSelectDefaultOption) {
+            this.selectOptionByValue(this.options[0].value);
+        }
+    }
+    initializeSingleOption(optionElement, optionIndex) {
+        optionElement.setOnSelectCallback(this.selectOptionByValue);
+        this.options[optionIndex] = optionElement.getOption();
+        if (this.options[optionIndex].selected) {
+            this.selectOptionByValue(this.options[optionIndex].value);
+        }
+    }
+    removeEventListeners() {
+        document.body.removeEventListener("click", this.close);
+    }
+    appendHiddenInputToClosestForm() {
+        this.form = this.closest("form");
+        if (!this.form || this.hiddenInput) {
+            return;
+        }
+        this.hiddenInput = document.createElement("input");
+        this.hiddenInput.setAttribute("type", "hidden");
+        this.hiddenInput.setAttribute("name", this.formName);
+        this.form.appendChild(this.hiddenInput);
+    }
+    unselectAllOptions() {
+        for (let i = 0; i < this.options.length; i++) {
+            this.options[i].unselect();
+        }
+    }
+    selectOptionByValue(newOptionValue) {
+        const option = this.options.find(({ value }) => value === newOptionValue);
+        if (!option) {
+            return;
+        }
+        this.setSelectValue(option);
+    }
+    setSelectValue(optionToBeSelected) {
+        if (this.isMultipleSelect) {
+            this.setMultiSelectValue(optionToBeSelected);
+        }
+        else {
+            this.setSingleSelectValue(optionToBeSelected);
+        }
+        this.updateHiddenInputInForm();
+        this.dispatchChangeEvent();
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new Event("change"));
+    }
+    setMultiSelectValue(optionToBeSelected) {
+        const indexInSelectedOptions = this._selectedOptions.indexOf(optionToBeSelected);
+        const isAlreadySelected = indexInSelectedOptions !== -1;
+        if (isAlreadySelected) {
+            this.values.splice(indexInSelectedOptions, 1);
+            this._selectedOptions.splice(indexInSelectedOptions, 1);
+            optionToBeSelected.unselect();
+        }
+        else {
+            this.values.push(optionToBeSelected.value);
+            this._selectedOptions.push(optionToBeSelected);
+            optionToBeSelected.select();
+        }
+        this.requestUpdate();
+    }
+    setSingleSelectValue(optionToBeSelected) {
+        this.unselectAllOptions();
+        this.close();
+        this.selectedOption = optionToBeSelected;
+        this.value = optionToBeSelected.value;
+        optionToBeSelected.select();
+    }
+    updateHiddenInputInForm() {
+        if (!this.form || !this.hiddenInput) {
+            return;
+        }
+        this.hiddenInput.value = this.isMultipleSelect ? this.values.join(",") : this.value;
+        const event = new Event("change", { bubbles: true });
+        this.hiddenInput.dispatchEvent(event);
+    }
 };
@@ -402,3 +298,3 @@ __decorate([
     property()
-], SelectPure.prototype, "_multiple", void 0);
+], SelectPure.prototype, "isMultipleSelect", void 0);
 __decorate([
@@ -424,3 +320,33 @@ property()
     property()
-], SelectPure.prototype, "_optionsLength", void 0);
+], SelectPure.prototype, "totalRenderedChildOptions", void 0);
+__decorate([
+    query("select")
+], SelectPure.prototype, "nativeSelect", void 0);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "close", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "getSingleNativeOptionHtml", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "getMultiSelectLabelHtml", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "getMultiSelectSelectedOptionHtml", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "initializeSelect", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "initializeSingleOption", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "removeEventListeners", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "appendHiddenInputToClosestForm", null);
+__decorate([
+    boundMethod
+], SelectPure.prototype, "selectOptionByValue", null);
 SelectPure = __decorate([
@@ -427,0 +353,0 @@ customElement("select-pure")

package.json

 {
   "name": "select-pure",
-  "version": "2.1.0",
+  "version": "2.1.1-alpha.0",
   "description": "Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient",
@@ -48,2 +48,3 @@ "author": {
   "dependencies": {
+    "autobind-decorator": "^2.4.0",
     "lit": "^2.0.0-rc.1"
@@ -50,0 +51,0 @@ },

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

189239

increased by14.13%

Number of package files

89

increased by67.92%

Lines of code

1725

increased by14.24%

Worsened metrics

Dependency count

2

increased by100%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedautobind-decorator@^2.4.0

• + Addedautobind-decorator@2.4.0(transitive)