import * as i0 from '@angular/core';
import { input, booleanAttribute, model, numberAttribute, output, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

class SlideToggleChange {
    source;
    checked;
    constructor(source, checked) {
        this.source = source;
        this.checked = checked;
    }
}
let nextId = 0;
class SlideToggle {
    _uniqueId = `ngs-slide-toggle-${nextId++}`;
    id = input(this._uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    labelPosition = input('after', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    hideIcon = input(false, { ...(ngDevMode ? { debugName: "hideIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
    change = output();
    toggleChange = output();
    _onChange = (_) => { };
    _onTouched = () => { };
    constructor() { }
    writeValue(value) {
        this.checked.set(!!value);
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(isDisabled);
    }
    toggle() {
        this.checked.update(checked => !checked);
        this._onChange(this.checked());
        this._emitChangeEvent();
    }
    _onInputClick(event) {
        event.stopPropagation();
        this.toggle();
        this.toggleChange.emit();
    }
    _emitChangeEvent() {
        this.change.emit(new SlideToggleChange(this, this.checked()));
    }
    _onInputBlur() {
        this._onTouched();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SlideToggle, isStandalone: true, selector: "ngs-slide-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change", toggleChange: "toggleChange" }, host: { properties: { "class.ngs-slide-toggle-checked": "checked()", "class.ngs-slide-toggle-disabled": "disabled()", "class.ngs-slide-toggle-label-before": "labelPosition() === \"before\"", "attr.id": "id()" }, classAttribute: "ngs-slide-toggle" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SlideToggle),
                multi: true
            }
        ], exportAs: ["ngsSlideToggle"], ngImport: i0, template: "<label class=\"ngs-slide-toggle-label\" [attr.for]=\"id() + '-input'\">\n  <div class=\"ngs-slide-toggle-bar\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"ngs-slide-toggle-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name()\"\n      [tabIndex]=\"tabIndex()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby()\"\n      [attr.aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"_onInputClick($event)\"\n      (blur)=\"_onInputBlur()\">\n    <div class=\"ngs-slide-toggle-thumb-container\">\n      <div class=\"ngs-slide-toggle-thumb\"></div>\n    </div>\n  </div>\n  <span class=\"ngs-slide-toggle-content\" [id]=\"id() + '-content'\">\n    <ng-content/>\n  </span>\n</label>\n", styles: [":host{--ngs-slide-toggle-width: 44px;--ngs-slide-toggle-height: 24px;--ngs-slide-toggle-thumb-size: 20px;--ngs-slide-toggle-bar-color: var(--ngs-color-surface-container-highest);--ngs-slide-toggle-bar-checked-color: var(--ngs-color-primary);--ngs-slide-toggle-thumb-color: var(--ngs-color-surface);--ngs-slide-toggle-thumb-checked-color: var(--ngs-color-on-primary);--ngs-slide-toggle-transition-duration: .2s;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host.ngs-slide-toggle-disabled{cursor:default;opacity:.5;pointer-events:none}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-label{flex-direction:row-reverse}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-content{margin-left:0;margin-right:8px}:host .ngs-slide-toggle-label{display:flex;align-items:center;cursor:inherit}:host .ngs-slide-toggle-bar{position:relative;width:var(--ngs-slide-toggle-width);height:var(--ngs-slide-toggle-height);background:var(--ngs-slide-toggle-bar-color);border-radius:calc(var(--ngs-slide-toggle-height) / 2);transition:background-color var(--ngs-slide-toggle-transition-duration) ease;flex-shrink:0}:host.ngs-slide-toggle-checked .ngs-slide-toggle-bar{background:var(--ngs-slide-toggle-bar-checked-color)}:host .ngs-slide-toggle-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-slide-toggle-thumb-container{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--ngs-slide-toggle-thumb-size);height:var(--ngs-slide-toggle-thumb-size);transition:left var(--ngs-slide-toggle-transition-duration) ease}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb-container{left:calc(100% - var(--ngs-slide-toggle-thumb-size) - 2px)}:host .ngs-slide-toggle-thumb{width:100%;height:100%;background:var(--ngs-slide-toggle-thumb-color);border-radius:50%;box-shadow:0 2px 4px #0003}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb{background:var(--ngs-slide-toggle-thumb-checked-color)}:host .ngs-slide-toggle-content{margin-left:8px;display:inline-block}:host .ngs-slide-toggle-content:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SlideToggle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-slide-toggle', exportAs: 'ngsSlideToggle', standalone: true, imports: [], host: {
                        'class': 'ngs-slide-toggle',
                        '[class.ngs-slide-toggle-checked]': 'checked()',
                        '[class.ngs-slide-toggle-disabled]': 'disabled()',
                        '[class.ngs-slide-toggle-label-before]': 'labelPosition() === "before"',
                        '[attr.id]': 'id()',
                    }, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SlideToggle),
                            multi: true
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ngs-slide-toggle-label\" [attr.for]=\"id() + '-input'\">\n  <div class=\"ngs-slide-toggle-bar\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"ngs-slide-toggle-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name()\"\n      [tabIndex]=\"tabIndex()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby()\"\n      [attr.aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"_onInputClick($event)\"\n      (blur)=\"_onInputBlur()\">\n    <div class=\"ngs-slide-toggle-thumb-container\">\n      <div class=\"ngs-slide-toggle-thumb\"></div>\n    </div>\n  </div>\n  <span class=\"ngs-slide-toggle-content\" [id]=\"id() + '-content'\">\n    <ng-content/>\n  </span>\n</label>\n", styles: [":host{--ngs-slide-toggle-width: 44px;--ngs-slide-toggle-height: 24px;--ngs-slide-toggle-thumb-size: 20px;--ngs-slide-toggle-bar-color: var(--ngs-color-surface-container-highest);--ngs-slide-toggle-bar-checked-color: var(--ngs-color-primary);--ngs-slide-toggle-thumb-color: var(--ngs-color-surface);--ngs-slide-toggle-thumb-checked-color: var(--ngs-color-on-primary);--ngs-slide-toggle-transition-duration: .2s;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host.ngs-slide-toggle-disabled{cursor:default;opacity:.5;pointer-events:none}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-label{flex-direction:row-reverse}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-content{margin-left:0;margin-right:8px}:host .ngs-slide-toggle-label{display:flex;align-items:center;cursor:inherit}:host .ngs-slide-toggle-bar{position:relative;width:var(--ngs-slide-toggle-width);height:var(--ngs-slide-toggle-height);background:var(--ngs-slide-toggle-bar-color);border-radius:calc(var(--ngs-slide-toggle-height) / 2);transition:background-color var(--ngs-slide-toggle-transition-duration) ease;flex-shrink:0}:host.ngs-slide-toggle-checked .ngs-slide-toggle-bar{background:var(--ngs-slide-toggle-bar-checked-color)}:host .ngs-slide-toggle-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-slide-toggle-thumb-container{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--ngs-slide-toggle-thumb-size);height:var(--ngs-slide-toggle-thumb-size);transition:left var(--ngs-slide-toggle-transition-duration) ease}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb-container{left:calc(100% - var(--ngs-slide-toggle-thumb-size) - 2px)}:host .ngs-slide-toggle-thumb{width:100%;height:100%;background:var(--ngs-slide-toggle-thumb-color);border-radius:50%;box-shadow:0 2px 4px #0003}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb{background:var(--ngs-slide-toggle-thumb-checked-color)}:host .ngs-slide-toggle-content{margin-left:8px;display:inline-block}:host .ngs-slide-toggle-content:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], change: [{ type: i0.Output, args: ["change"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SlideToggle, SlideToggleChange };
//# sourceMappingURL=ngstarter-ui-components-slide-toggle.mjs.map
