// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation, } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { NuiFormFieldControl } from "../form-field/public-api";
import * as i0 from "@angular/core";
/**
 * <example-url>./../examples/index.html#/switch</example-url>
 */
export class SwitchComponent {
    constructor() {
        /**
         * Input to set aria label text
         */
        this.ariaLabel = "Switch";
        this.valueChange = new EventEmitter();
    }
    toggle() {
        if (this.disabled) {
            return;
        }
        const toggledValue = !this.value;
        this.valueChange.emit(toggledValue);
        // this is here because of a bug in reactive forms,
        // that causes the UI not to update when a value is updated on the FormControl
        // https://github.com/angular/angular/issues/13792
        this.value = toggledValue;
        this.onChange(toggledValue);
        this.onTouched();
    }
    onChange(value) { }
    onTouched() { }
    writeValue(value) {
        if (value !== undefined) {
            this.value = !!value;
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    ngOnInit() {
        this.value = !!this.value;
    }
}
SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SwitchComponent, selector: "nui-switch", inputs: { value: "value", disabled: "disabled", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, providers: [
        {
            provide: NuiFormFieldControl,
            useExisting: forwardRef(() => SwitchComponent),
            multi: true,
        },
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SwitchComponent),
            multi: true,
        },
    ], ngImport: i0, template: "<div\n    class=\"nui-switch\"\n    [class.nui-switched]=\"value\"\n    [class.nui-disabled]=\"disabled\"\n    [attr.disabled]=\"disabled\"\n>\n    <div class=\"nui-switch__container\">\n        <div\n            class=\"nui-switch__bar\"\n            (click)=\"toggle()\"\n            (keyup.enter)=\"toggle()\"\n            (keyup.space)=\"toggle()\"\n            tabindex=\"{{ disabled ? -1 : 0 }}\"\n            role=\"checkbox\"\n            [attr.aria-checked]=\"value\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            <div class=\"nui-switch__on\">\n                <svg\n                    aria-hidden=\"true\"\n                    class=\"nui-switch__svg\"\n                    viewBox=\"0 0 7.1 6.7\"\n                >\n                    <polyline\n                        class=\"nui-switch__icon-on\"\n                        points=\"0.6,2.9 3.2,4.8 7.2,1.0 \"\n                    />\n                </svg>\n            </div>\n            <div class=\"nui-switch__thumb\">\n                <svg\n                    aria-hidden=\"true\"\n                    class=\"nui-switch__svg\"\n                    viewBox=\"0 0 7.1 6.7\"\n                ></svg>\n            </div>\n        </div>\n        <label class=\"nui-switch__label\">\n            <ng-content></ng-content>\n        </label>\n    </div>\n</div>\n", styles: [":host .nui-switch{-webkit-user-select:none;-o-user-select:none;user-select:none}:host .nui-switch[disabled=true]{cursor:default;pointer-events:none;opacity:.4;filter:alpha(opacity=40)}:host .nui-switch:focus{outline:none}:host .nui-switch.nui-switched .nui-switch__bar{background-color:var(--nui-color-on,#00a753)}:host .nui-switch.nui-switched .nui-switch__thumb{transform:translate(20px)}:host .nui-switch__container{display:inline-block}:host .nui-switch__label{margin:0 0 0 10px}:host .nui-switch__bar{cursor:pointer;height:20px;width:40px;border-radius:10px;background-color:var(--nui-color-off,#4d4d4d);position:relative;float:left;transition:background-color ease .3s}:host .nui-switch__bar:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}:host .nui-switch__on,:host .nui-switch__off,:host .nui-switch__thumb{width:14px;height:14px;text-align:center;position:relative;top:3px}:host .nui-switch__thumb{width:14px;height:14px;border-radius:10px;background-color:var(--nui-color-bg-light,#fff);position:absolute;left:3px;top:3px;transition:transform ease .3s}:host .nui-switch__svg{width:10px;height:10px;display:block;margin:1px 6px}:host .nui-switch__icon-on{fill:none;stroke:var(--nui-color-line-inverse,#fff);stroke-width:1;stroke-miterlimit:10}:host .nui-switch__icon-off{fill:none;stroke:var(--nui-color-line-inverse,#fff);stroke-width:1;stroke-miterlimit:10}:host .nui-switch__icon-thumb{fill:none;stroke:var(--nui-color-line-default,#d9d9d9);stroke-miterlimit:10}:host .nui-switch__label:focus{outline:none}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SwitchComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-switch", providers: [
                        {
                            provide: NuiFormFieldControl,
                            useExisting: forwardRef(() => SwitchComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SwitchComponent),
                            multi: true,
                        },
                    ], encapsulation: ViewEncapsulation.Emulated, template: "<div\n    class=\"nui-switch\"\n    [class.nui-switched]=\"value\"\n    [class.nui-disabled]=\"disabled\"\n    [attr.disabled]=\"disabled\"\n>\n    <div class=\"nui-switch__container\">\n        <div\n            class=\"nui-switch__bar\"\n            (click)=\"toggle()\"\n            (keyup.enter)=\"toggle()\"\n            (keyup.space)=\"toggle()\"\n            tabindex=\"{{ disabled ? -1 : 0 }}\"\n            role=\"checkbox\"\n            [attr.aria-checked]=\"value\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            <div class=\"nui-switch__on\">\n                <svg\n                    aria-hidden=\"true\"\n                    class=\"nui-switch__svg\"\n                    viewBox=\"0 0 7.1 6.7\"\n                >\n                    <polyline\n                        class=\"nui-switch__icon-on\"\n                        points=\"0.6,2.9 3.2,4.8 7.2,1.0 \"\n                    />\n                </svg>\n            </div>\n            <div class=\"nui-switch__thumb\">\n                <svg\n                    aria-hidden=\"true\"\n                    class=\"nui-switch__svg\"\n                    viewBox=\"0 0 7.1 6.7\"\n                ></svg>\n            </div>\n        </div>\n        <label class=\"nui-switch__label\">\n            <ng-content></ng-content>\n        </label>\n    </div>\n</div>\n", styles: [":host .nui-switch{-webkit-user-select:none;-o-user-select:none;user-select:none}:host .nui-switch[disabled=true]{cursor:default;pointer-events:none;opacity:.4;filter:alpha(opacity=40)}:host .nui-switch:focus{outline:none}:host .nui-switch.nui-switched .nui-switch__bar{background-color:var(--nui-color-on,#00a753)}:host .nui-switch.nui-switched .nui-switch__thumb{transform:translate(20px)}:host .nui-switch__container{display:inline-block}:host .nui-switch__label{margin:0 0 0 10px}:host .nui-switch__bar{cursor:pointer;height:20px;width:40px;border-radius:10px;background-color:var(--nui-color-off,#4d4d4d);position:relative;float:left;transition:background-color ease .3s}:host .nui-switch__bar:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}:host .nui-switch__on,:host .nui-switch__off,:host .nui-switch__thumb{width:14px;height:14px;text-align:center;position:relative;top:3px}:host .nui-switch__thumb{width:14px;height:14px;border-radius:10px;background-color:var(--nui-color-bg-light,#fff);position:absolute;left:3px;top:3px;transition:transform ease .3s}:host .nui-switch__svg{width:10px;height:10px;display:block;margin:1px 6px}:host .nui-switch__icon-on{fill:none;stroke:var(--nui-color-line-inverse,#fff);stroke-width:1;stroke-miterlimit:10}:host .nui-switch__icon-off{fill:none;stroke:var(--nui-color-line-inverse,#fff);stroke-width:1;stroke-miterlimit:10}:host .nui-switch__icon-thumb{fill:none;stroke:var(--nui-color-line-default,#d9d9d9);stroke-miterlimit:10}:host .nui-switch__label:focus{outline:none}\n"] }]
        }], propDecorators: { value: [{
                type: Input
            }], disabled: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 