web-component-stencil-test/dist/esm/simple-button.entry.js

Stencil Component Starter

import { r as registerInstance, h } from './core-5eb8cfa4.js';

const SimpleButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Show number of clicks
         */
        this.showNbOfClick = false;
        /**
         * theme
         */
        this.theme = 'primary';
        /**
         * Number of clicks
         */
        this.nbOfClicks = 0;
        this.handleClick = () => {
            this.nbOfClicks += 1;
        };
    }
    validateTheme(newValue) {
        const themes = ['primary', 'secondary'];
        const themeIsValidate = themes.indexOf(newValue) > -1;
        if (!themeIsValidate) {
            throw new Error('theme: not a valide theme');
        }
    }
    componentWillLoad() {
        this.validateTheme(this.theme);
    }
    render() {
        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}`)));
    }
    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 { SimpleButton as simple_button };