import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-1db051ba.js';
import { N as NativeValidationStrategy } from './native-validation-strategy-a4373eb1.js';

let toggleId = 0;
const Toggle = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inputId = `anj-tg-${toggleId++}`;
        /**
         * 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();
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjChange = createEvent(this, "anjChange", 7);
    }
    handleChange(checked) {
        this.anjChange.emit({
            checked,
            value: this.value
        });
    }
    /**
     * 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.checkValidity();
    }
    render() {
        return (h(Host, { class: { 'anj-focused': this.focused } }, h("label", { class: "anj-label", htmlFor: this.inputId }, h("div", { class: "anj-toggle" }, h("input", { 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 }), h("span", { class: "anj-slide" }), h("span", { class: "anj-indicator" })), h("slot", null))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "checked": ["handleChange"]
    }; }
    static get style() { return ".sc-anj-toggle-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}\n.sc-anj-toggle-h, .sc-anj-toggle-h::before, .sc-anj-toggle-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-toggle-h:focus, .sc-anj-toggle-h:active, .sc-anj-toggle-h *.sc-anj-toggle:focus, .sc-anj-toggle-h *.sc-anj-toggle:active {\n  outline: none;\n}\n.sc-anj-toggle-h .anj-hidden-control.sc-anj-toggle {\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-toggle-h {\n    display: block;\n    margin-bottom: 0.5rem;\n  }\n}\n[stacked].sc-anj-toggle-h {\n  display: block;\n  margin-bottom: 0.5rem;\n}\n.anj-focused.sc-anj-toggle-h .anj-slide.sc-anj-toggle {\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-toggle-h .anj-slide.sc-anj-toggle {\n  background-color: var(--anj-light);\n  border-color: var(--anj-border-dark);\n}\n[checked].sc-anj-toggle-h .anj-indicator.sc-anj-toggle {\n  background-color: var(--anj-highlight);\n  -webkit-box-shadow: 0 0 0.3rem var(--anj-neutral);\n  box-shadow: 0 0 0.3rem var(--anj-neutral);\n  -webkit-transform: translateX(1.2rem);\n  transform: translateX(1.2rem);\n}\n[invalid].sc-anj-toggle-h {\n  color: var(--anj-danger);\n}\n[invalid].sc-anj-toggle-h .anj-slide.sc-anj-toggle {\n  border-color: var(--anj-danger);\n}\n[invalid].sc-anj-toggle-h .anj-indicator.sc-anj-toggle {\n  background-color: var(--anj-danger);\n  border-color: var(--anj-danger);\n}\n[invalid].sc-anj-toggle-h .anj-indicator.sc-anj-toggle:hover {\n  -webkit-box-shadow: 0 0 0.3rem var(--anj-danger);\n  box-shadow: 0 0 0.3rem var(--anj-danger);\n}\n[invalid].anj-focused.sc-anj-toggle-h .anj-slide.sc-anj-toggle {\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-toggle-h {\n  color: var(--anj-neutral);\n}\n[disabled].sc-anj-toggle-h .anj-indicator.sc-anj-toggle {\n  background-color: var(--anj-background);\n  border: none;\n  -webkit-box-shadow: 0 0 0.2rem var(--anj-neutral-light);\n  box-shadow: 0 0 0.2rem var(--anj-neutral-light);\n}\n[disabled].sc-anj-toggle-h .anj-slide.sc-anj-toggle {\n  background-color: var(--anj-background);\n  border: solid 1px;\n  border-color: var(--anj-border-dark);\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n[disabled][checked].sc-anj-toggle-h .anj-indicator.sc-anj-toggle {\n  background-color: var(--anj-neutral-light);\n  -webkit-transform: translateX(1.2rem);\n  transform: translateX(1.2rem);\n}\n.sc-anj-toggle-h .anj-label.sc-anj-toggle {\n  display: inline-block;\n  line-height: 1.1rem;\n  margin-bottom: 0;\n  padding-left: 2.75rem;\n  position: relative;\n  -webkit-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n.sc-anj-toggle-h .anj-indicator.sc-anj-toggle {\n  background-color: var(--anj-light);\n  border-radius: 1.5rem;\n  -webkit-box-shadow: 0 0 0.3rem var(--anj-shadow);\n  box-shadow: 0 0 0.3rem var(--anj-shadow);\n  content: \"\";\n  cursor: pointer;\n  display: inline-block;\n  line-height: 1.1rem;\n  height: 1.1rem;\n  left: 0;\n  width: 1.1rem;\n  position: absolute;\n  -webkit-transition: 0.2s ease;\n  transition: 0.2s ease;\n}\n.sc-anj-toggle-h .anj-indicator.sc-anj-toggle:hover {\n  -webkit-box-shadow: 0 0 0.3rem var(--anj-highlight);\n  box-shadow: 0 0 0.3rem var(--anj-highlight);\n}\n.sc-anj-toggle-h .anj-slide.sc-anj-toggle {\n  background-color: var(--anj-light);\n  border: solid;\n  border-color: var(--anj-border-dark);\n  border-radius: 1.5rem;\n  border-width: 1px;\n  bottom: 0;\n  cursor: pointer;\n  left: 0;\n  margin-top: 1px;\n  margin-bottom: 1px;\n  position: absolute;\n  right: 0;\n  -webkit-transition: border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.3s ease, box-shadow 0.2s ease;\n  transition: border-color 0.3s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  top: 0;\n}\n.sc-anj-toggle-h .anj-toggle.sc-anj-toggle {\n  display: inline-block;\n  height: 1.1rem;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 2.25rem;\n}"; }
};

export { Toggle as anj_toggle };
