import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as assignDescription, P as PdsLabel, m as messageId } from './pds-label.js';

const pdsSwitchCss = ":host{--background-color:var(--pine-color-neutral-grey-400);--background-color-checked:var(--pine-color-neutral-charcoal-400);--background-color-checked-hover:var(--pine-color-neutral-charcoal-400);--background-color-disabled:var(--pine-color-neutral-grey-300);--background-color-hover:var(--pine-color-neutral-grey-500);--input-border-radius:var(--pine-border-radius-lg);--input-height:20px;--input-width:36px;--input-toggle-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--input-toggle-color:var(--pine-color-base-white);--input-toggle-offset:2px;--input-toggle-size:calc(var(--input-height) - (var(--input-toggle-offset) * 2));--label-gap-size:12px;--label-line-height:var(--pine-line-height-md);--message-spacing-block:var(--pine-spacing-xxs);--message-spacing-inline:calc(var(--input-width) + var(--label-gap-size));--message-text-color:var(--pine-color-neutral-charcoal-200);--outline-color-focus:var(--pine-color-primary-200);--outline-color-focus-error:var(--pine-color-red-200);--text-color-default:var(--pine-color-neutral-charcoal-400);--text-color-disabled:var(--pine-color-neutral-grey-500);--text-color-error:var(--pine-color-red-300);--transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--text-color-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--text-color-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--text-color-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:0 0 0 4px var(--outline-color-focus-error);box-shadow:0 0 0 4px var(--outline-color-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background-color);border:0;border-radius:var(--input-border-radius);cursor:pointer;display:inline-block;height:var(--input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--transition-timing);transition:var(--transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--input-width)}input::after{background:var(--input-toggle-color);border-radius:50%;-webkit-box-shadow:var(--input-toggle-box-shadow);box-shadow:var(--input-toggle-box-shadow);content:\"\";display:block;height:var(--input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--transition-timing);transition:-webkit-transform var(--transition-timing);transition:transform var(--transition-timing);transition:transform var(--transition-timing), -webkit-transform var(--transition-timing);width:var(--input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--label-line-height);-webkit-margin-start:var(--label-gap-size);margin-inline-start:var(--label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--message-text-color);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--message-spacing-inline);margin-inline-start:var(--message-spacing-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--message-spacing-block);margin-block-start:var(--message-spacing-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--background-color-disabled);cursor:not-allowed}input:disabled~label{color:var(--text-color-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--background-color-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:0 0 0 4px var(--outline-color-focus);box-shadow:0 0 0 4px var(--outline-color-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--background-color-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--background-color-checked-hover)}";
const PdsSwitchStyle0 = pdsSwitchCss;

const PdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PdsSwitch extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.pdsSwitchChange = createEvent(this, "pdsSwitchChange", 7);
        this.onSwitchUpdate = (e) => {
            if (this.disabled)
                return;
            this.pdsSwitchChange.emit(e);
        };
        /**
         * Generate switch classes
         */
        this.switchClassNames = () => {
            let switchClasses = `pds-switch`;
            if (this.invalid === true) {
                switchClasses += " pds-switch--error";
            }
            if (this.helperMessage !== undefined) {
                switchClasses += " pds-switch--message";
            }
            return switchClasses;
        };
        this.componentId = undefined;
        this.checked = false;
        this.disabled = false;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = false;
        this.label = undefined;
        this.name = undefined;
        this.required = false;
        this.type = 'checkbox';
        this.value = undefined;
    }
    render() {
        return (h(Host, { key: '6235c2f551bedc84b014c5c1d62d1890453f7a5c', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'f64395640bc974b7109da695343c50c5ab6d24be', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), h(PdsLabel, { key: 'd70d0965a079e0e86e6f261a4d01241fc6f3646f', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
            h("div", { class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            h("div", { class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
    }
    get el() { return this; }
    static get style() { return PdsSwitchStyle0; }
}, [1, "pds-switch", {
        "componentId": [1, "component-id"],
        "checked": [4],
        "disabled": [4],
        "errorMessage": [1, "error-message"],
        "helperMessage": [1, "helper-message"],
        "invalid": [4],
        "label": [1],
        "name": [1],
        "required": [4],
        "type": [1],
        "value": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-switch"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-switch":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsSwitch$1);
            }
            break;
    } });
}

const PdsSwitch = PdsSwitch$1;
const defineCustomElement = defineCustomElement$1;

export { PdsSwitch, defineCustomElement };

//# sourceMappingURL=pds-switch.js.map