web-component-stencil-test
Version:
Stencil Component Starter
1 lines • 1.15 kB
JavaScript
import{r as t,h as s}from"./p-f88fdf74.js";const e=class{constructor(s){t(this,s),this.showNbOfClick=!1,this.theme="primary",this.nbOfClicks=0,this.handleClick=()=>{this.nbOfClicks+=1}}validateTheme(t){if(!(["primary","secondary"].indexOf(t)>-1))throw new Error("theme: not a valide theme")}componentWillLoad(){this.validateTheme(this.theme)}render(){return s("button",{class:`simple-button ${this.theme}`,onClick:this.handleClick},s("span",{class:"label"},s("slot",null)),this.showNbOfClick&&this.nbOfClicks>0&&s("span",{class:"nb-of-clicks"},` - ${this.nbOfClicks}`))}static get watchers(){return{theme:["validateTheme"]}}static get style(){return".simple-button{background:inherit;border:none;color:inherit;cursor:pointer;display:inline-block;font-family:sans-serif;font-size:1rem;padding:1rem 2rem;margin:0;text-align:center;text-decoration:none;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;-webkit-appearance:none;-moz-appearance:none}.primary{background:#0069ed;color:#fff}.primary:hover{background:#4396fc}.secondary{background:#715aff;color:#fff}.secondary:hover{background:#8a78ff}"}};export{e as simple_button};