web-component-stencil-test
Version:
Stencil Component Starter
52 lines (51 loc) • 2.18 kB
JavaScript
import { r as registerInstance, h } from './core-5eb8cfa4.js';
var SimpleButton = /** @class */ (function () {
function SimpleButton(hostRef) {
var _this = this;
registerInstance(this, hostRef);
/**
* Show number of clicks
*/
this.showNbOfClick = false;
/**
* theme
*/
this.theme = 'primary';
/**
* Number of clicks
*/
this.nbOfClicks = 0;
this.handleClick = function () {
_this.nbOfClicks += 1;
};
}
SimpleButton.prototype.validateTheme = function (newValue) {
var themes = ['primary', 'secondary'];
var themeIsValidate = themes.indexOf(newValue) > -1;
if (!themeIsValidate) {
throw new Error('theme: not a valide theme');
}
};
SimpleButton.prototype.componentWillLoad = function () {
this.validateTheme(this.theme);
};
SimpleButton.prototype.render = function () {
return h("button", { class: "simple-button " + this.theme, onClick: this.handleClick }, h("span", { class: "label" }, h("slot", null)), this.showNbOfClick && this.nbOfClicks > 0 && (h("span", { class: "nb-of-clicks" }, " - " + this.nbOfClicks)));
};
Object.defineProperty(SimpleButton, "watchers", {
get: function () {
return {
"theme": ["validateTheme"]
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(SimpleButton, "style", {
get: function () { 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}"; },
enumerable: true,
configurable: true
});
return SimpleButton;
}());
export { SimpleButton as simple_button };