'use client';
import { __decorate } from 'tslib';
import { html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import SgdsElement from '../../base/sgds-element.js';
import { defaultValue } from '../../utils/defaultvalue.js';
import genId from '../../utils/generateId.js';
import { watch } from '../../utils/watch.js';
import { HasSlotController } from '../../utils/slot.js';
import css_248z from '../../styles/form-label.js';
import css_248z$1 from './switch.js';

/**
 * @summary Switch component is used to toggle on and off or yes or no action.
 *
 * @slot default - The default label of switch on the right side of the switch
 * @slot leftLabel - The label on the left side of the switch
 *
 * @event sgds-change - Emitted when the checked state changes.
 *
 */
class SgdsSwitch extends SgdsElement {
    constructor() {
        super(...arguments);
        /** The size of the switch. By default, it is small size */
        this.size = "md";
        /** When enabled, icon appears in the switch */
        this.icon = false;
        /** Draws the switch in a checked state. */
        this.checked = false;
        /** Disables the switch (so the user can't check / uncheck it). */
        this.disabled = false;
        /** Used only for SSR to indicate the presence of the `default` slot. */
        this.hasDefaultSlot = false;
        /** Used only for SSR to indicate the presence of the `leftLabel` slot. */
        this.hasLeftLabelSlot = false;
        /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
        this.defaultChecked = false;
        /** @internal */
        this.hasSlotController = new HasSlotController(this, "[default]", "leftLabel");
        /** @internal For Id/For pair of the HTML form control and label. */
        this._inputId = genId("switch");
    }
    updated() {
        if (!this.hasDefaultSlot)
            this.hasDefaultSlot = this.hasSlotController.test("[default]");
        if (!this.hasLeftLabelSlot)
            this.hasLeftLabelSlot = this.hasSlotController.test("leftLabel");
    }
    /** Simulates a click on the switch. */
    click() {
        this.input.click();
    }
    /** Sets focus on the switch. */
    focus(options) {
        this.input.focus(options);
    }
    /** Removes focus from the switch. */
    blur() {
        this.input.blur();
    }
    _handleChange() {
        this.checked = !this.checked;
        this.emit("sgds-change", { detail: { checked: this.checked } });
    }
    _handleKeyDown(event) {
        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
        if (event.key === "Enter" && !hasModifier) {
            this.click();
        }
    }
    /** @internal */
    _handleDisabledChange() {
        // Disabled form controls are always valid, so we need to recheck validity when the state changes
        this.input.disabled = this.disabled;
    }
    render() {
        const noLabel = !this.hasDefaultSlot && !this.hasLeftLabelSlot;
        return html `
      <div class="form-check">
        <label
          for="${this._inputId}"
          class=${classMap({
            "form-check-label": true,
            "left-label": true,
            "d-none": this.hasDefaultSlot || noLabel
        })}
        >
          <slot name="leftLabel"></slot>
        </label>
        <input
          class=${classMap({
            "form-check-input": true
        })}
          type="checkbox"
          id=${this._inputId}
          ?checked=${this.checked}
          ?disabled=${this.disabled}
          aria-disabled=${this.disabled ? "true" : "false"}
          aria-checked=${this.checked ? "true" : "false"}
          @change=${this._handleChange}
          @keydown=${this._handleKeyDown}
        />
        <label
          for="${this._inputId}"
          class=${classMap({
            "form-check-label": true,
            "d-none": this.hasLeftLabelSlot || noLabel
        })}
        >
          <slot></slot>
        </label>
      </div>
    `;
    }
}
SgdsSwitch.styles = [...SgdsElement.styles, css_248z, css_248z$1];
__decorate([
    property({ reflect: true, type: String })
], SgdsSwitch.prototype, "size", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], SgdsSwitch.prototype, "icon", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsSwitch.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsSwitch.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean })
], SgdsSwitch.prototype, "hasDefaultSlot", void 0);
__decorate([
    property({ type: Boolean })
], SgdsSwitch.prototype, "hasLeftLabelSlot", void 0);
__decorate([
    defaultValue("checked")
], SgdsSwitch.prototype, "defaultChecked", void 0);
__decorate([
    query('input[type="checkbox"]')
], SgdsSwitch.prototype, "input", void 0);
__decorate([
    watch("disabled", { waitUntilFirstUpdate: true })
], SgdsSwitch.prototype, "_handleDisabledChange", null);

export { SgdsSwitch, SgdsSwitch as default };
//# sourceMappingURL=sgds-switch.js.map
