import { Component, EventEmitter, forwardRef, HostListener, Input, Output, TemplateRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-devui/utils";
export class ToggleComponent {
    constructor() {
        this.content = '';
        this.size = '';
        this.change = new EventEmitter();
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (v) => { };
    }
    get customTemplate() {
        const result = this.checked ? this.checkedContent : this.uncheckedContent;
        if (result instanceof TemplateRef) {
            this.content = '';
            return result;
        }
        else {
            this.content = result || '';
            return null;
        }
    }
    set checked(v) {
        this._checked = v === true;
    }
    get checked() {
        return this._checked;
    }
    set disabled(v) {
        this._disabled = v === true;
    }
    get disabled() {
        return this._disabled;
    }
    onToggle() {
        if (this.disabled) {
            return;
        }
        this.canChange().then((change) => {
            if (!change) {
                return;
            }
            this.checked = !this.checked;
            this.change.emit(this.checked);
            this.onChangeCallback(this.checked);
            this.onTouchedCallback();
        });
    }
    canChange() {
        let changeResult = Promise.resolve(true);
        if (this.beforeChange) {
            const result = this.beforeChange(this.checked);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
    writeValue(obj) {
        if (obj !== this.checked) {
            this.checked = !!obj;
        }
    }
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
}
ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ToggleComponent, selector: "d-toggle", inputs: { size: "size", color: "color", beforeChange: "beforeChange", checkedContent: "checkedContent", uncheckedContent: "uncheckedContent", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "click": "onToggle()" } }, providers: [{
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ToggleComponent),
            multi: true
        }], exportAs: ["toggle"], ngImport: i0, template: "<span\n  class=\"devui-toggle {{ size ? 'devui-toggle-' + size : '' }}\"\n  [ngClass]=\"{ 'devui-checked': checked, 'devui-disabled': disabled }\"\n  [style.background]=\"checked && !disabled ? color : ''\"\n  [style.border-color]=\"checked && !disabled ? color : ''\"\n>\n  <span class=\"devui-toggle-inner-wrapper\">\n    <ng-template [ngTemplateOutlet]=\"customTemplate || defaultTemplate\"></ng-template>\n  </span>\n  <small></small>\n</span>\n\n<ng-template #defaultTemplate>\n  <div class=\"devui-toggle-inner\" [innerHTML]=\"content | safe: 'html'\"></div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.devui-toggle{width:36px;height:18px;border-radius:100px;border-radius:var(--devui-border-radius-full, 100px);background:#d7d8da;background:var(--devui-line, #d7d8da);border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0;cursor:pointer;transition:.3s cubic-bezier(.645,.045,.355,1) all;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle:not(.devui-checked):hover{border-color:#d7d8da;border-color:var(--devui-line, #d7d8da)}.devui-toggle:active{border-color:#344899;border-color:var(--devui-brand-active-focus, #344899)}.devui-toggle.devui-checked:hover{border-color:#526ecc;border-color:var(--devui-brand-active, #526ecc)}.devui-toggle .devui-toggle-inner-wrapper{display:inline-block;width:100%;height:100%;padding-left:16px;font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-toggle .devui-toggle-inner-wrapper .devui-toggle-inner{width:100%;height:100%;text-align:center;color:#fff;color:var(--devui-light-text, #ffffff)}.devui-toggle.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:16px}.devui-toggle small{width:16px;height:16px;background:#ffffff;background:var(--devui-light-text, #ffffff);border-radius:100px;border-radius:var(--devui-border-radius-full, 100px);position:absolute;top:1px;left:1px;transition:.3s cubic-bezier(.645,.045,.355,1) all;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle.devui-checked small{left:19px}.devui-toggle.devui-toggle-lg{width:58px;height:30px}.devui-toggle.devui-toggle-lg .devui-toggle-inner-wrapper{padding-left:28px;font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-toggle.devui-toggle-lg.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:28px}.devui-toggle.devui-toggle-lg small{width:28px;height:28px;top:1px;left:1px}.devui-toggle.devui-toggle-lg.devui-checked small{background:#ffffff;background:var(--devui-light-text, #ffffff);left:29px}.devui-toggle.devui-toggle-sm{width:30px;height:14px}.devui-toggle.devui-toggle-sm .devui-toggle-inner-wrapper{padding-left:12px;font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-toggle.devui-toggle-sm.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:12px}.devui-toggle.devui-toggle-sm small{width:12px;height:12px;position:absolute}.devui-toggle.devui-toggle-sm.devui-checked small{left:17px}.devui-toggle.devui-checked{background:#5e7ce0;background:var(--devui-brand, #5e7ce0);border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0)}.devui-toggle.devui-checked:hover{background:#526ecc;background:var(--devui-brand-active, #526ecc);border-color:#526ecc;border-color:var(--devui-brand-active, #526ecc)}.devui-toggle.devui-checked:active{background:#344899;background:var(--devui-brand-active-focus, #344899);border-color:#344899;border-color:var(--devui-brand-active-focus, #344899)}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active,.devui-toggle.devui-disabled.devui-checked{cursor:not-allowed}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active{background-color:#dfe1e6;background-color:var(--devui-disabled-line, #dfe1e6);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-toggle.devui-disabled small,.devui-toggle.devui-disabled:hover small,.devui-toggle.devui-disabled:active small{background-color:#f5f5f5;background-color:var(--devui-unavailable, #f5f5f5)}.devui-toggle.devui-disabled.devui-checked{background-color:#beccfa;background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:#beccfa;border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-toggle.devui-disabled.devui-checked small{background-color:#fff;background-color:var(--devui-light-text, #ffffff)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SafePipe, name: "safe" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-toggle', exportAs: 'toggle', providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ToggleComponent),
                            multi: true
                        }], preserveWhitespaces: false, template: "<span\n  class=\"devui-toggle {{ size ? 'devui-toggle-' + size : '' }}\"\n  [ngClass]=\"{ 'devui-checked': checked, 'devui-disabled': disabled }\"\n  [style.background]=\"checked && !disabled ? color : ''\"\n  [style.border-color]=\"checked && !disabled ? color : ''\"\n>\n  <span class=\"devui-toggle-inner-wrapper\">\n    <ng-template [ngTemplateOutlet]=\"customTemplate || defaultTemplate\"></ng-template>\n  </span>\n  <small></small>\n</span>\n\n<ng-template #defaultTemplate>\n  <div class=\"devui-toggle-inner\" [innerHTML]=\"content | safe: 'html'\"></div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.devui-toggle{width:36px;height:18px;border-radius:100px;border-radius:var(--devui-border-radius-full, 100px);background:#d7d8da;background:var(--devui-line, #d7d8da);border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0;cursor:pointer;transition:.3s cubic-bezier(.645,.045,.355,1) all;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle:not(.devui-checked):hover{border-color:#d7d8da;border-color:var(--devui-line, #d7d8da)}.devui-toggle:active{border-color:#344899;border-color:var(--devui-brand-active-focus, #344899)}.devui-toggle.devui-checked:hover{border-color:#526ecc;border-color:var(--devui-brand-active, #526ecc)}.devui-toggle .devui-toggle-inner-wrapper{display:inline-block;width:100%;height:100%;padding-left:16px;font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-toggle .devui-toggle-inner-wrapper .devui-toggle-inner{width:100%;height:100%;text-align:center;color:#fff;color:var(--devui-light-text, #ffffff)}.devui-toggle.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:16px}.devui-toggle small{width:16px;height:16px;background:#ffffff;background:var(--devui-light-text, #ffffff);border-radius:100px;border-radius:var(--devui-border-radius-full, 100px);position:absolute;top:1px;left:1px;transition:.3s cubic-bezier(.645,.045,.355,1) all;transition:var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all}.devui-toggle.devui-checked small{left:19px}.devui-toggle.devui-toggle-lg{width:58px;height:30px}.devui-toggle.devui-toggle-lg .devui-toggle-inner-wrapper{padding-left:28px;font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-toggle.devui-toggle-lg.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:28px}.devui-toggle.devui-toggle-lg small{width:28px;height:28px;top:1px;left:1px}.devui-toggle.devui-toggle-lg.devui-checked small{background:#ffffff;background:var(--devui-light-text, #ffffff);left:29px}.devui-toggle.devui-toggle-sm{width:30px;height:14px}.devui-toggle.devui-toggle-sm .devui-toggle-inner-wrapper{padding-left:12px;font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-toggle.devui-toggle-sm.devui-checked .devui-toggle-inner-wrapper{padding-left:0;padding-left:initial;padding-right:12px}.devui-toggle.devui-toggle-sm small{width:12px;height:12px;position:absolute}.devui-toggle.devui-toggle-sm.devui-checked small{left:17px}.devui-toggle.devui-checked{background:#5e7ce0;background:var(--devui-brand, #5e7ce0);border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0)}.devui-toggle.devui-checked:hover{background:#526ecc;background:var(--devui-brand-active, #526ecc);border-color:#526ecc;border-color:var(--devui-brand-active, #526ecc)}.devui-toggle.devui-checked:active{background:#344899;background:var(--devui-brand-active-focus, #344899);border-color:#344899;border-color:var(--devui-brand-active-focus, #344899)}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active,.devui-toggle.devui-disabled.devui-checked{cursor:not-allowed}.devui-toggle.devui-disabled,.devui-toggle.devui-disabled:hover,.devui-toggle.devui-disabled:active{background-color:#dfe1e6;background-color:var(--devui-disabled-line, #dfe1e6);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-toggle.devui-disabled small,.devui-toggle.devui-disabled:hover small,.devui-toggle.devui-disabled:active small{background-color:#f5f5f5;background-color:var(--devui-unavailable, #f5f5f5)}.devui-toggle.devui-disabled.devui-checked{background-color:#beccfa;background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:#beccfa;border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-toggle.devui-disabled.devui-checked small{background-color:#fff;background-color:var(--devui-light-text, #ffffff)}\n"] }]
        }], propDecorators: { size: [{
                type: Input
            }], color: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], checkedContent: [{
                type: Input
            }], uncheckedContent: [{
                type: Input
            }], checked: [{
                type: Input
            }], disabled: [{
                type: Input
            }], change: [{
                type: Output
            }], onToggle: [{
                type: HostListener,
                args: ['click']
            }] } });
//# sourceMappingURL=data:application/json;base64, 