/*!
 * KoliBri - The accessible HTML-Standard
 */
import { proxyCustomElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate } from './tslib.es6.js';
import { B as BaseWebComponent } from './variant-quote.js';
import { C as ClickButtonFC } from './component4.js';
import './common.js';
import './prop.validators.js';
import { l as labelProp } from './label2.js';
import { B as BaseController } from './base-controller.js';
import { c as createCtaRef, d as delegateFocus } from './element-interaction.js';

const clickButtonPropsConfig = {
    required: [labelProp],
};

class ClickButtonController extends BaseController {
    constructor(stateAccess) {
        super(stateAccess, clickButtonPropsConfig);
        this.handleClick = () => {
            console.log(this, 'button clicked');
        };
    }
    componentWillLoad(props) {
        const { label } = props;
        this.watchLabel(label);
    }
    watchLabel(value) {
        labelProp.apply(value, (v) => {
            this.setRenderProp('label', v);
        });
    }
}

const KolClickButton$1 = proxyCustomElement(class KolClickButton extends BaseWebComponent {
    constructor(registerHost) {
        super(false);
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.ctrl = new ClickButtonController(this.stateAccess);
        this.buttonRef = createCtaRef();
    }
    watchLabel(value) {
        this.ctrl.watchLabel(value);
    }
    async focus(options) { }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            label: this._label,
        });
    }
    render() {
        return (h(Host, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h(ClickButtonFC, { key: '3546de6fd6b08ff2c01efc46943cf26ce50252c4', label: this.ctrl.getRenderProp('label'), refButton: this.buttonRef, handleClick: this.ctrl.handleClick })));
    }
    static get watchers() { return {
        "_label": ["watchLabel"]
    }; }
}, [769, "kol-click-button", {
        "_label": [1],
        "focus": [64]
    }, undefined, {
        "_label": ["watchLabel"]
    }]);
__decorate([
    delegateFocus('buttonRef')
], KolClickButton$1.prototype, "focus", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-click-button"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-click-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolClickButton$1);
            }
            break;
    } });
}

const KolClickButton = KolClickButton$1;
const defineCustomElement = defineCustomElement$1;

export { KolClickButton, defineCustomElement };
//# sourceMappingURL=kol-click-button.js.map

//# sourceMappingURL=kol-click-button.js.map