'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-b7b9d752.js');
const nativeValidationStrategy = require('./native-validation-strategy-ac2fa47e.js');

let checkId = 0;
const Checkbox = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.inputId = `anj-cb-${checkId++}`;
        /**
         * Is it checked
         */
        this.checked = false;
        /**
         * Make the control read only
         */
        this.disabled = false;
        /**
         * The input name name
         */
        this.name = this.inputId;
        /**
         * @internal
         * The validation strategy to use
         */
        this.validationStrategy = new nativeValidationStrategy.NativeValidationStrategy();
        this.anjBlur = core.createEvent(this, "anjBlur", 7);
        this.anjChange = core.createEvent(this, "anjChange", 7);
    }
    handleChange(checked) {
        this.anjChange.emit({
            checked,
            value: this.value
        });
    }
    onIndeterminate() {
        this.nativeCheck.indeterminate = this.indeterminate;
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        this.nativeCheck.checkValidity();
        return this.validationStrategy.onValidChange(this.element, this.nativeCheck);
    }
    onChange() {
        this.checked = !this.checked;
        return this.validationStrategy.onValidChange(this.element, this.nativeCheck);
    }
    onFocus() {
        this.focused = true;
    }
    async onBlur() {
        this.focused = false;
        this.anjBlur.emit();
        return this.validationStrategy.onTouched(this.element);
    }
    render() {
        const path = this.indeterminate ? 'M19 13H5v-2h14v2z' : 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
        return (core.h(core.Host, { class: { 'anj-focused': this.focused } }, core.h("label", { class: "anj-label", htmlFor: this.inputId }, core.h("input", { "aria-label": this.ariaLabel || this.element.textContent, id: this.inputId, type: "checkbox", class: "anj-hidden-control", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, onChange: () => this.onChange(), onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), onClick: e => e.stopPropagation(), onInvalid: () => this.validationStrategy.onValidChange(this.element, this.nativeCheck), ref: (r) => this.nativeCheck = r }), core.h("span", { class: "anj-indicator" }, core.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, core.h("path", { d: path }))), !this.solo ? core.h("span", { class: "anj-inner-label" }, core.h("slot", null)) : undefined)));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "checked": ["handleChange"],
        "indeterminate": ["onIndeterminate"]
    }; }
    static get style() { return ".sc-anj-checkbox-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  height: 1rem;\n}\n.sc-anj-checkbox-h, .sc-anj-checkbox-h::before, .sc-anj-checkbox-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-checkbox-h:focus, .sc-anj-checkbox-h:active, .sc-anj-checkbox-h *.sc-anj-checkbox:focus, .sc-anj-checkbox-h *.sc-anj-checkbox:active {\n  outline: none;\n}\n.sc-anj-checkbox-h .anj-hidden-control.sc-anj-checkbox {\n  clip: rect(0 0 0 0);\n  height: 0;\n  left: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\n\@media (max-width: 575.98px) {\n  .sc-anj-checkbox-h {\n    display: block;\n    margin-bottom: 0.5rem;\n  }\n}\n[solo].sc-anj-checkbox-h .anj-label.sc-anj-checkbox {\n  padding-left: 1rem;\n}\n[stacked].sc-anj-checkbox-h {\n  display: block;\n  margin-bottom: 0.5rem;\n  margin-right: 0;\n}\n.anj-focused.sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  border-color: var(--anj-highlight);\n  -webkit-box-shadow: 0 0 0 0.25rem rgba(18, 105, 186, 0.25);\n  box-shadow: 0 0 0 0.25rem rgba(18, 105, 186, 0.25);\n}\n[checked].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  background-color: var(--anj-highlight);\n  border-color: var(--anj-highlight);\n}\n[checked].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox svg.sc-anj-checkbox {\n  opacity: 1;\n  width: 1.125rem;\n}\n[invalid].sc-anj-checkbox-h {\n  color: var(--anj-danger);\n}\n[invalid].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  border-color: var(--anj-danger);\n}\n[invalid].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox svg.sc-anj-checkbox {\n  width: 0;\n}\n[invalid].anj-focused.sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  -webkit-box-shadow: 0 0 0 0.25rem rgba(165, 44, 44, 0.25);\n  box-shadow: 0 0 0 0.25rem rgba(165, 44, 44, 0.25);\n}\n[disabled].sc-anj-checkbox-h {\n  color: var(--anj-neutral);\n}\n[disabled].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  background-color: var(--anj-background);\n}\n[disabled][checked].sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  border: 1px solid var(--anj-neutral-light);\n  background-color: var(--anj-neutral-light);\n}\n.sc-anj-checkbox-h .anj-label.sc-anj-checkbox {\n  display: inline-block;\n  line-height: 1rem;\n  margin-bottom: 0;\n  padding-left: 1.5rem;\n  position: relative;\n  -webkit-transition: background-color 0.2s ease;\n  transition: background-color 0.2s ease;\n}\n.sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox {\n  border: 1px solid var(--anj-border-dark);\n  border-radius: 0.15rem;\n  display: inline-block;\n  height: 1rem;\n  left: 0;\n  line-height: 1;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  -webkit-transition: background-color 0.2s ease, border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  width: 1rem;\n}\n.sc-anj-checkbox-h .anj-indicator.sc-anj-checkbox svg.sc-anj-checkbox {\n  fill: var(--anj-light);\n  display: inline-block;\n  height: 1.125rem;\n  left: -2px;\n  opacity: 0;\n  overflow: hidden;\n  position: relative;\n  top: -2px;\n  -webkit-transition: width 0.4s ease;\n  transition: width 0.4s ease;\n  width: 0;\n}"; }
};

exports.anj_checkbox = Checkbox;
