import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { FormCheckboxVariation } from "./form-checkbox-variation.enum";
import { FormCheckboxValidation } from "./form-checkbox-validation.enum";
import { FormCheckboxLayout } from "./form-checkbox-layout.enum";
/**
 * @enums FormCheckboxValidation - form-checkbox-validation.enum.ts
 * @enums FormCheckboxVariation - form-checkbox-variation.enum.ts
 * @swedishName Kryssruta
 */
export class FormCheckbox {
    constructor() {
        this.dirty = false;
        this.touched = false;
        this.afInputRef = undefined;
        this.afLabel = undefined;
        this.afVariation = FormCheckboxVariation.PRIMARY;
        this.afLayout = FormCheckboxLayout.INLINE;
        this.afIndeterminate = false;
        this.afName = undefined;
        this.checked = undefined;
        this.afChecked = undefined;
        this.afId = randomIdGenerator('digi-form-checkbox');
        this.afRequired = undefined;
        this.value = undefined;
        this.afValue = undefined;
        this.afValidation = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaLabel = undefined;
        this.afDescription = undefined;
        this.afAriaDescribedby = undefined;
        this.afAutofocus = undefined;
        this.afTabIndex = undefined;
    }
    onCheckedChanged(checked) {
        this.afChecked = checked;
    }
    onAfCheckedChanged(checked) {
        this.checked = checked;
    }
    /**
     * Hämta en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the input element. Handy for setting focus programmatically.
     */
    async afMGetFormControlElement() {
        return this._input;
    }
    componentWillLoad() {
        this.value = this.afValue;
        this.afChecked
            ? (this.checked = this.afChecked)
            : (this.afChecked = this.checked);
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    get cssModifiers() {
        return {
            'digi-form-checkbox--error': this.afValidation === FormCheckboxValidation.ERROR,
            'digi-form-checkbox--warning': this.afValidation === FormCheckboxValidation.WARNING,
            'digi-form-checkbox--primary': this.afVariation === FormCheckboxVariation.PRIMARY,
            'digi-form-checkbox--secondary': this.afVariation === FormCheckboxVariation.SECONDARY,
            'digi-form-checkbox--indeterminate': this.afIndeterminate,
            [`digi-form-checkbox--layout-${this.afLayout}`]: !!this.afLayout
        };
    }
    blurHandler(e) {
        if (!this.touched) {
            this.afOnTouched.emit(e);
            this.touched = true;
        }
        this.afOnBlur.emit(e);
    }
    changeHandler(e) {
        this.checked = this.afChecked = e.target.checked;
        this.afOnChange.emit(e);
    }
    focusHandler(e) {
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    inputHandler(e) {
        if (!this.dirty) {
            this.afOnDirty.emit(e);
            this.dirty = true;
        }
        this.afOnInput.emit(e);
    }
    render() {
        return (h("div", { key: '991ac437cb149487dbafa067d0a453322bc92039', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '3be3281e632a73de89c19bf900bdfaf0407b976b', class: "digi-form-checkbox__input", ref: (el) => {
                var _a;
                this._input = el;
                (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
            }, tabIndex: this.afTabIndex, onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": !this.afAriaDescribedby && !this.afDescription
                ? null
                : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                ? 'true'
                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '71959598b2e5b3ab3b53e8ff0746d21ce1d1ff43', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'edd3fdfd546f0f635e4db1cd75f47c582f743a23', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '58cc0348c18b4adf345e6fa2314101ee656c652b', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
    }
    static get is() { return "digi-form-checkbox"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "afInputRef": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(ref: HTMLInputElement) => void",
                    "resolved": "(ref: HTMLInputElement) => void",
                    "references": {
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Reference for input"
                        }],
                    "text": "Referens till input"
                },
                "getter": false,
                "setter": false
            },
            "afLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The label text"
                        }],
                    "text": "Texten till labelelementet"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-label",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormCheckboxVariation",
                    "resolved": "FormCheckboxVariation.PRIMARY | FormCheckboxVariation.SECONDARY",
                    "references": {
                        "FormCheckboxVariation": {
                            "location": "import",
                            "path": "./form-checkbox-variation.enum",
                            "id": "src/components/_form/form-checkbox/form-checkbox-variation.enum.ts::FormCheckboxVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set checkbox variation."
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'primary' eller 'secondary'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "FormCheckboxVariation.PRIMARY"
            },
            "afLayout": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormCheckboxLayout",
                    "resolved": "FormCheckboxLayout.BLOCK | FormCheckboxLayout.INLINE",
                    "references": {
                        "FormCheckboxLayout": {
                            "location": "import",
                            "path": "./form-checkbox-layout.enum",
                            "id": "src/components/_form/form-checkbox/form-checkbox-layout.enum.ts::FormCheckboxLayout"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set checkbox layout."
                        }],
                    "text": "S\u00E4tter layouten."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-layout",
                "reflect": false,
                "defaultValue": "FormCheckboxLayout.INLINE"
            },
            "afIndeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set indeterminate property."
                        }],
                    "text": "S\u00E4tter property 'indeterminate' p\u00E5 inputelementet."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-indeterminate",
                "reflect": false,
                "defaultValue": "false"
            },
            "afName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input name attribute"
                        }],
                    "text": "S\u00E4tter attributet 'name'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-name",
                "reflect": false
            },
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Internal mirror of afChecked. Used by Angular Reactive Forms (ControlValueAccessor).\nDo not use directly \u2014 use afChecked instead."
                        }, {
                            "name": "ignore",
                            "text": undefined
                        }],
                    "text": "Intern spegling av afChecked. Anv\u00E4nds av Angular Reactive Forms (ControlValueAccessor)\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afChecked ist\u00E4llet."
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": false
            },
            "afChecked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input checked attribute"
                        }],
                    "text": "S\u00E4tter attributet 'checked'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-checked",
                "reflect": false
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-form-checkbox')"
            },
            "afRequired": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input required attribute"
                        }],
                    "text": "S\u00E4tter attributet 'required'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-required",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Internal mirror of afValue. \nDo not use directly \u2014 use afValue instead."
                        }, {
                            "name": "ignore",
                            "text": undefined
                        }],
                    "text": "Intern spegling av afValue. \nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            },
            "afValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input value attribute"
                        }],
                    "text": "S\u00E4tter attributet 'value'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-value",
                "reflect": false
            },
            "afValidation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FormCheckboxValidation",
                    "resolved": "FormCheckboxValidation.ERROR | FormCheckboxValidation.WARNING",
                    "references": {
                        "FormCheckboxValidation": {
                            "location": "import",
                            "path": "./form-checkbox-validation.enum",
                            "id": "src/components/_form/form-checkbox/form-checkbox-validation.enum.ts::FormCheckboxValidation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set input validation. Can be 'error', 'warning', or nothing."
                        }],
                    "text": "S\u00E4tter valideringsstatus. Kan vara 'error', 'varning', eller ingenting."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation",
                "reflect": false
            },
            "afAriaLabelledby": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-labelledby attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-labelledby'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-labelledby",
                "reflect": false
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-label attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-label'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Additional description text"
                        }],
                    "text": "Ytterligare beskrivande text"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-description",
                "reflect": false
            },
            "afAriaDescribedby": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-describedby attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-describedby'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-describedby",
                "reflect": false
            },
            "afAutofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input autofocus attribute"
                        }],
                    "text": "S\u00E4tter attributet 'autofocus'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-autofocus",
                "reflect": false
            },
            "afTabIndex": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "TODO"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-tab-index",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "dirty": {},
            "touched": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnChange",
                "name": "afOnChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The input element's 'onchange' event."
                        }],
                    "text": "Inputelementets 'onchange'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnBlur",
                "name": "afOnBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The input element's 'onblur' event."
                        }],
                    "text": "Inputelementets 'onblur'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnFocus",
                "name": "afOnFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The input element's 'onfocus' event."
                        }],
                    "text": "Inputelementets 'onfocus'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnFocusout",
                "name": "afOnFocusout",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The input element's 'onfocusout' event."
                        }],
                    "text": "Inputelementets 'onfocusout'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnInput",
                "name": "afOnInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The input element's 'oninput' event."
                        }],
                    "text": "Inputelementets 'oninput'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnDirty",
                "name": "afOnDirty",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "First time the input element receives an input"
                        }],
                    "text": "Sker vid inputf\u00E4ltets f\u00F6rsta 'oninput'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnTouched",
                "name": "afOnTouched",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "First time the input element is blurred"
                        }],
                    "text": "Sker vid inputf\u00E4ltets f\u00F6rsta 'onblur'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMGetFormControlElement": {
                "complexType": {
                    "signature": "() => Promise<HTMLInputElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    },
                    "return": "Promise<HTMLInputElement>"
                },
                "docs": {
                    "text": "H\u00E4mta en referens till inputelementet. Bra f\u00F6r att t.ex. s\u00E4tta fokus programmatiskt.",
                    "tags": [{
                            "name": "en",
                            "text": "Returns a reference to the input element. Handy for setting focus programmatically."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "onCheckedChanged"
            }, {
                "propName": "afChecked",
                "methodName": "onAfCheckedChanged"
            }];
    }
}
