import { r as registerInstance, g as getElement, h, d as Host } from './index-c0a4d8bd.js';

const pnChoiceButtonCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-choice-button{user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:flex;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #d3cecb;color:#005d92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;transition:box-shadow 0.1s, background 0.2s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#e0f8ff;color:#005d92;border-color:#005d92;box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#ffffff;color:#005d92}pn-choice-button>input:hover+label.pn-choice-button{background:#e0f8ff}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-choice-button>input:active+label.pn-choice-button{background:#8eddf9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#d3cecb}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8eddf9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8eddf9;border:0.1rem solid #00a0d6}";
const PnChoiceButtonStyle0 = pnChoiceButtonCss;

const PnChoiceButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.value = undefined;
        this.name = undefined;
        this.choiceid = undefined;
        this.type = 'checkbox';
        this.disabled = false;
        this.checked = false;
        this.indeterminate = false;
    }
    get hostElement() { return getElement(this); }
    handlechange() {
        this.indeterminate = false;
    }
    componentDidLoad() {
        this.checkAndSetIndeterminateState();
    }
    componentDidUpdate() {
        this.checkAndSetIndeterminateState();
    }
    checkAndSetIndeterminateState() {
        let checkbox = this.hostElement.querySelector(`#${this.choiceid}`);
        if (checkbox) {
            checkbox.indeterminate = this.indeterminate;
        }
    }
    render() {
        return (h(Host, { key: 'a1a97f024a1817a0833541650309056b8d4765ea' }, h("input", { key: '028965fc99719face3b99d28e64915a089f5f6f9', type: this.type, id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { key: '372c83ee394b81b038300bdc19f8cccd15f14e48', htmlFor: this.choiceid, class: "pn-choice-button" }, h("slot", { key: '92fd81e2908be7d4eebc81c5c3676340bb596cee' }))));
    }
};
PnChoiceButton.style = PnChoiceButtonStyle0;

export { PnChoiceButton as pn_choice_button };

//# sourceMappingURL=pn-choice-button.entry.js.map