UNPKG

radh-ui

Version:

Stencil Component Starter

1 lines 4.6 kB
var __awaiter=this&&this.__awaiter||function(e,t,i,o){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function s(e){try{l(o.next(e))}catch(t){n(t)}}function a(e){try{l(o["throw"](e))}catch(t){n(t)}}function l(e){e.done?i(e.value):r(e.value).then(s,a)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,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(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;r=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(s[0]===6&&i.label<n[1]){i.label=n[1];n=s;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(s);break}if(n[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(a){s=[6,a];r=0}finally{o=n=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,i,o,r;return{setters:[function(e){t=e.r;i=e.c;o=e.h;r=e.g}],execute:function(){var n=":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;color:#0f273d;font-family:'Lato', sans-serif}h3{font-size:2.5rem;font-weight:bold}.swappy-radios label{display:block;position:relative;padding-left:4rem;margin-bottom:1.5rem;cursor:pointer;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#555}.swappy-radios label:hover input~.radio{opacity:0.8}.swappy-radios input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.swappy-radios input:checked~span{color:#ff4646;-webkit-transition:color .5s;transition:color .5s}.swappy-radios input:checked~.radio{background-color:#ff4646;opacity:1 !important}.swappy-radios input:checked~.radio::after{opacity:1}.swappy-radios .radio{position:absolute;top:0;left:0;height:2.5rem;width:2.5rem;background:#c9ded6}.swappy-radios .radio::after{display:block;content:'';position:absolute;opacity:0;top:0.75rem;left:0.75rem;width:1rem;height:1rem;background:#fff}";var s=function(){function e(e){t(this,e);this.nameRadios="options";this.labelRadios="Select An Option";this.optionsRadios=["Banana","Strawberry"];this.selectedOption=i(this,"selectedOption",7)}e.prototype.getSelectedRadio=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.selectRadio]}))}))};e.prototype.handleKeyDown=function(e){if(e.key==="ArrowUp"||e.key==="ArrowLeft"){e.preventDefault();if(this.selected===0){this.selected=this.radios.length-1}else{this.selected--}}if(e.key==="ArrowDown"||e.key==="ArrowRight"){e.preventDefault();if(this.selected===this.radios.length-1){this.selected=0}else{this.selected++}}};e.prototype.componentDidLoad=function(){this.radios=Array.from(this.elem.shadowRoot.querySelectorAll('input[type="radio"]'))};Object.defineProperty(e.prototype,"selected",{get:function(){return this.selectRadio},set:function(e){console.log("selected: "+e);if(isFinite(this.selected)){var t=this.radios[this.selected];t.tabIndex=-1;t.setAttribute("aria-checked","false")}var i=this.radios[e];i.tabIndex=0;i.focus();i.setAttribute("aria-checked","true");this.elem.setAttribute("selected",""+e);this.selectRadio=e},enumerable:false,configurable:true});e.prototype.onChangeRadio=function(e){this.selected=this.radios.indexOf(e.target);this.selectedOption.emit(this.selected)};e.prototype.render=function(){var e=this;return o("div",{class:"swappy-radios",role:"radiogroup","aria-labelledby":"swappy-radios-label"},o("h3",{id:"swappy-radios-label"},this.labelRadios),this.optionsRadios.map((function(t){console.log(t);return o("label",null,o("input",{type:"radio",name:e.nameRadios,"on-click":function(t){return e.onChangeRadio(t)}}),o("span",{class:"radio"}),o("span",null,t))})))};Object.defineProperty(e.prototype,"elem",{get:function(){return r(this)},enumerable:false,configurable:true});return e}();e("radh_swappy_radios",s);s.style=n}}}));