/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import checkbox_default from "../checkbox/checkbox.js";
import { TOGGLE_SIZE } from "./defs.js";
import toggle_default$1 from "./toggle.scss.js";
import { html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
//#region src/components/toggle/toggle.ts
/**
* Copyright IBM Corp. 2019, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Basic toggle.
*
* @element cds-toggle
* @slot label-text - The label text.
* @slot checked-text - The text for the checked state.
* @slot unchecked-text - The text for the unchecked state.
* @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.
*/
let CDSToggle = class CDSToggle extends HostListenerMixin(checkbox_default) {
	constructor(..._args) {
		super(..._args);
		this.labelA = "On";
		this.hideLabel = false;
		this.readOnly = false;
		this.size = "";
		this.labelB = "Off";
		this._externalLabels = [];
		this._onExternalLabelClick = () => {
			this._checkboxNode?.focus();
			this._handleChange();
		};
	}
	/**
	* Handles `click` event on the `<button>` in the shadow DOM.
	*/
	_handleChange() {
		const { checked } = this._checkboxNode;
		if (this.disabled || this.readOnly) return;
		this.toggled = !checked;
		const { eventChange } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventChange, {
			bubbles: true,
			composed: true,
			detail: {
				checked: this.toggled,
				toggled: this.toggled
			}
		}));
	}
	_renderCheckmark() {
		if (this.size !== "sm" || this.readOnly == true) return;
		return html`
      <svg
        class="${"cds"}--toggle__check"
        width="6px"
        height="5px"
        viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
    `;
	}
	/**
	*
	* **Deprecated:** Use `toggled` instead.
	* The `checked` attribute will be removed in the next major version.
	*/
	get _checkedAttributeAlias() {
		return this.toggled;
	}
	set _checkedAttributeAlias(v) {
		this.toggled = v;
	}
	/**
	* Specify whether the control is toggled
	*/
	get toggled() {
		return this.checked;
	}
	set toggled(v) {
		const prev = this.checked;
		if (prev === v) return;
		this.checked = v;
		this.requestUpdate("toggled", prev);
		this.requestUpdate("_checkedAttributeAlias");
	}
	/**
	* Finds external toggle `<label>`s and attaches handlers.
	*/
	_attachExternalLabels() {
		const doc = this.ownerDocument || document;
		const found = this.id ? [...doc.querySelectorAll(`label[for="${this.id}"]`)] : [];
		this._externalLabels = Array.from(new Set(found));
		this._externalLabels.forEach((lbl) => {
			lbl.addEventListener("click", this._onExternalLabelClick);
		});
	}
	connectedCallback() {
		super.connectedCallback?.();
		this._attachExternalLabels();
	}
	disconnectedCallback() {
		super.disconnectedCallback?.();
		this._externalLabels.forEach((lbl) => lbl.removeEventListener("click", this._onExternalLabelClick));
	}
	render() {
		const { toggled, disabled, labelText, hideLabel, id, name, size, labelA, labelB, value, _handleChange: handleChange } = this;
		const inputClasses = classMap({
			[`cds--toggle__appearance`]: true,
			[`cds--toggle__appearance--${size}`]: size
		});
		const toggleClasses = classMap({
			[`cds--toggle__switch`]: true,
			[`cds--toggle__switch--checked`]: toggled
		});
		const labelTextClasses = classMap({
			[`cds--toggle__label-text`]: labelText,
			[`cds--visually-hidden`]: hideLabel
		});
		let stateText = "";
		if (hideLabel) stateText = labelText || "";
		else stateText = toggled ? labelA : labelB;
		const labelId = id ? `${id}_label` : void 0;
		const hasLabelText = (this.labelText ?? "") !== "";
		return html`
      <button
        class="${"cds"}--toggle__button"
        role="switch"
        type="button"
        aria-checked=${toggled}
        aria-labelledby=${ifDefined(this.ariaLabelledby ?? (hasLabelText && labelId))}
        .checked=${toggled}
        name="${ifDefined(name)}"
        value="${ifDefined(value)}"
        ?disabled=${disabled}
        id="${id}"
        @click=${handleChange}></button>
      <label for="${id}" class="${"cds"}--toggle__label">
        ${labelText ? html`<span class="${labelTextClasses}">${labelText}</span>` : null}
        <div class="${inputClasses}">
          <div class="${toggleClasses}">${this._renderCheckmark()}</div>
          <span class="${"cds"}--toggle__text" aria-hidden="true"
            >${stateText}</span
          >
        </div>
      </label>
    `;
	}
	/**
	* The name of the custom event fired after this changebox changes its toggled state.
	*/
	static get eventChange() {
		return `cds-toggle-changed`;
	}
	static {
		this.styles = toggle_default$1;
	}
};
__decorate([query("button")], CDSToggle.prototype, "_checkboxNode", void 0);
__decorate([property({
	type: Boolean,
	attribute: "checked",
	reflect: true
})], CDSToggle.prototype, "_checkedAttributeAlias", null);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSToggle.prototype, "toggled", null);
__decorate([property({
	type: String,
	attribute: "aria-labelledby"
})], CDSToggle.prototype, "ariaLabelledby", void 0);
__decorate([property({ attribute: "label-a" })], CDSToggle.prototype, "labelA", void 0);
__decorate([property({
	reflect: true,
	type: Boolean
})], CDSToggle.prototype, "hideLabel", void 0);
__decorate([property({
	reflect: true,
	attribute: "read-only",
	type: Boolean
})], CDSToggle.prototype, "readOnly", void 0);
__decorate([property({ reflect: true })], CDSToggle.prototype, "size", void 0);
__decorate([property({ attribute: "label-b" })], CDSToggle.prototype, "labelB", void 0);
CDSToggle = __decorate([carbonElement(`cds-toggle`)], CDSToggle);
var toggle_default = CDSToggle;
//#endregion
export { TOGGLE_SIZE, toggle_default as default };

//# sourceMappingURL=toggle.js.map