radh-ui
Version:
Stencil Component Starter
1 lines • 5.46 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,n,i){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function s(e){try{l(i.next(e))}catch(t){r(t)}}function a(e){try{l(i["throw"](e))}catch(t){r(t)}}function l(e){e.done?n(e.value):o(e.value).then(s,a)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,o,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(r=s[0]&2?o["return"]:s[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;if(o=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;o=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){n.label=s[1];break}if(s[0]===6&&n.label<r[1]){n.label=r[1];r=s;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(s);break}if(r[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(a){s=[6,a];o=0}finally{i=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-72e8199d.system.js"],(function(e){"use strict";var t,n,i,o;return{setters:[function(e){t=e.r;n=e.c;i=e.h;o=e.g}],execute:function(){var r='radh-autocomplete{font-family:"Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin-top:60px}.autocomplete{position:relative;width:130px}.autocomplete-results{padding:0;margin:0;border:1px solid #eeeeee;height:120px;overflow:auto;width:100%}.autocomplete-result{list-style:none;text-align:left;padding:4px 2px;cursor:pointer}.autocomplete-result.is-active,.autocomplete-result:hover{background-color:#4aae9b;color:white}';var s=function(){function e(e){t(this,e);this.results=[];this.search="";this.isLoading=false;this.arrowCounter=0;this.activedescendant="";this.valueSelected=n(this,"valueSelected",7)}e.prototype.itemsChanged=function(e){if(e){this.innerItems=JSON.parse(e);this.isLoading=false}};e.prototype.onChange=function(e){this.search=e.target?e.target.value:null;if(this.isAsync){this.isLoading=true}else{this.filterResults();this.isOpen=true}};e.prototype.componentWillLoad=function(){this.innerItems=JSON.parse(this.items);this.closeOptions()};e.prototype.componentDidLoad=function(){document.addEventListener("click",this.handleClickOutside)};e.prototype.componentDidUnload=function(){document.removeEventListener("click",this.handleClickOutside)};e.prototype.filterResults=function(){var e=this;this.results=this.innerItems.filter((function(t){return t.toLowerCase().indexOf(e.search.toLowerCase())>-1}))};e.prototype.setResult=function(e){this.search=e;this.isOpen=false;this.valueSelected.emit(this.search)};e.prototype.closeOptions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.isOpen=false;this.arrowCounter=-1;return[2]}))}))};e.prototype.onArrow=function(e){if(this.isOpen){if(e.which===38){if(this.arrowCounter>0){this.arrowCounter=this.arrowCounter-1;this.setActiveDescendent()}}else if(e.which===40){if(this.arrowCounter<this.results.length){this.arrowCounter=this.arrowCounter+1;this.setActiveDescendent()}}}};e.prototype.onKeyPress=function(e){if(e.which===13){this.search=this.results[this.arrowCounter];this.setResult(this.search);this.isOpen=false;this.arrowCounter=-1}};e.prototype.handleClickOutside=function(){var e=document.querySelector("radh-autocomplete");e.componentOnReady().then((function(){e.closeOptions()}))};e.prototype.isSelected=function(e){return e===this.arrowCounter};e.prototype.setActiveDescendent=function(){this.activedescendant=this.getId(this.arrowCounter)};e.prototype.getId=function(e){return"result-option-"+e};e.prototype.render=function(){var e=this;if(this.items){return i("div",{class:"autocomplete",role:"combobox","aria-expanded":this.isOpen?"true":"false"},i("label",{htmlFor:this.labelBy,"aria-label":this.labelBy},this.label),i("input",{type:"text",id:this.labelBy,onInput:function(t){return e.onChange(t)},onKeyPress:function(t){return e.onKeyPress(t)},onKeyDown:function(t){return e.onArrow(t)},"aria-multiline":"false",role:"searchbox","aria-autocomplete":"list","aria-controls":"autocomplete-results","aria-activedescendant":this.activedescendant,"aria-labelledby":this.labelBy,value:this.search,title:"Elige la fruta",autocomplete:"off"}),this.isOpen?i("ul",{id:"autocomplete-results",class:"autocomplete-results",role:"listbox"},this.isLoading?i("li",{class:"loading"},"Loading results"):i("span",null,this.results.map((function(t,n){return i("li",{key:n,onClick:function(){return e.setResult(t)},role:"option",id:e.getId(n),"aria-selected":e.isSelected(n),class:"autocomplete-result"+(e.isSelected(n)?" is-active":"")},t)})))):i("span",null))}};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{items:["itemsChanged"]}},enumerable:false,configurable:true});return e}();e("radh_autocomplete",s);s.style=r}}}));