import { h, Host } from "@stencil/core";
/**
 * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed
 * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check
 * box for UI displays e.g. dialog boxes.
 *
 * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
 * handler. Sample usage:
 *
 * ```ts
 * <verdocs-checkbox
 *    value="on"
 *    name="thingEnabled"
 *    checked={this.thingEnabled}
 *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}
 * />
 * ```
 */
export class VerdocsCheckbox {
    constructor() {
        /**
         * Whether the radio button is currently selected.
         */
        this.checked = false;
        /**
         * HTML form field name for the input.
         */
        this.name = '';
        /**
         * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be
         * repositioned with CSS.
         */
        this.label = '';
        /**
         * Value to track with the input. Value is not used internally by this component but is sometimes useful to set
         * because it can be retrieved in event handlers via e.target.value. This can be used to identify which
         * checkbox was clicked in a checkbox group.
         */
        this.value = '';
        /**
         * Style of checkbox to render. Use 'dark' when rendering on a dark background.
         */
        this.theme = 'light';
        /**
         * Size of checkbox to render.
         */
        this.size = 'normal';
        /**
         * If set, the button will still be displayed but not selectable.
         */
        this.disabled = false;
    }
    render() {
        return (h(Host, { key: '28188f0522b460d6aa8744cc7d5c0498a53d4955', class: { disabled: this.disabled, [this.theme]: true, [this.size]: true } }, h("label", { key: '8a7d1c1480b5d102aa90f213f249fef9b69522be' }, h("input", { key: '87e8e03b06658349e583915205510c523d9bfec1', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: '307ccba611b5b935a5f40eca326e0176b939c1ed' }, this.label))));
    }
    static get is() { return "verdocs-checkbox"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "attribute": "checked",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the radio button is currently selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "HTML form field name for the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\nrepositioned with CSS."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Value to track with the input. Value is not used internally by this component but is sometimes useful to set\nbecause it can be retrieved in event handlers via e.target.value. This can be used to identify which\ncheckbox was clicked in a checkbox group."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "'light' | 'dark'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Style of checkbox to render. Use 'dark' when rendering on a dark background."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'light'"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'normal' | 'small'",
                    "resolved": "\"normal\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of checkbox to render."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'normal'"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the button will still be displayed but not selectable."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
}
//# sourceMappingURL=verdocs-checkbox.js.map
