ngx-ui-switch/fesm2022/ngx-ui-switch.mjs

switch button for angular4

import * as i0 from '@angular/core';
import { InjectionToken, forwardRef, EventEmitter, Component, Inject, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

const UI_SWITCH_OPTIONS = new InjectionToken('UI_SWITCH_OPTIONS');

const UI_SWITCH_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => UiSwitchComponent),
    multi: true,
};
class UiSwitchComponent {
    cdr;
    _checked;
    _disabled;
    _reverse;
    _loading;
    _beforeChange;
    size;
    color;
    switchOffColor;
    switchColor;
    defaultBgColor;
    defaultBoColor;
    checkedLabel;
    uncheckedLabel;
    checkedTextColor;
    uncheckedTextColor;
    beforeChange;
    ariaLabel;
    set checked(v) {
        this._checked = v !== false;
    }
    get checked() {
        return this._checked;
    }
    set disabled(v) {
        this._disabled = v !== false;
    }
    get disabled() {
        return this._disabled;
    }
    set reverse(v) {
        this._reverse = v !== false;
    }
    get reverse() {
        return this._reverse;
    }
    set loading(v) {
        this._loading = v !== false;
    }
    get loading() {
        return this._loading;
    }
    /**
     * Emits changed value
     */
    // eslint-disable-next-line @angular-eslint/no-output-native
    change = new EventEmitter();
    /**
     * Emits DOM event
     */
    changeEvent = new EventEmitter();
    /**
     * Emits changed value
     */
    valueChange = new EventEmitter();
    constructor(config = {}, cdr) {
        this.cdr = cdr;
        this.size = (config && config.size) || 'medium';
        this.color = config && config.color;
        this.switchOffColor = config && config.switchOffColor;
        this.switchColor = config && config.switchColor;
        this.defaultBgColor = config && config.defaultBgColor;
        this.defaultBoColor = config && config.defaultBoColor;
        this.checkedLabel = config && config.checkedLabel;
        this.uncheckedLabel = config && config.uncheckedLabel;
        this.checkedTextColor = config && config.checkedTextColor;
        this.uncheckedTextColor = config && config.uncheckedTextColor;
    }
    getColor(flag = '') {
        if (flag === 'borderColor') {
            return this.defaultBoColor;
        }
        if (flag === 'switchColor') {
            if (this.reverse) {
                return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
            }
            return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
        }
        if (flag === 'checkedTextColor') {
            return this.reverse ? this.uncheckedTextColor : this.checkedTextColor;
        }
        if (flag === 'uncheckedTextColor') {
            return this.reverse ? this.checkedTextColor : this.uncheckedTextColor;
        }
        if (this.reverse) {
            return !this.checked ? this.color : this.defaultBgColor;
        }
        return this.checked ? this.color : this.defaultBgColor;
    }
    getLabelClass(labelType) {
        const checked = labelType === (this.reverse ? 'unchecked' : 'checked');
        return checked ? 'switch-label-checked' : 'switch-label-unchecked';
    }
    onClick(event) {
        if (this.disabled) {
            return;
        }
        this.checked = !this.checked;
        // Component events
        this.change.emit(this.checked);
        this.valueChange.emit(this.checked);
        this.changeEvent.emit(event);
        // value accessor callbacks
        this.onChangeCallback(this.checked);
        this.onTouchedCallback(this.checked);
        this.cdr.markForCheck();
    }
    onToggle(event) {
        if (this.disabled) {
            return;
        }
        if (this.beforeChange) {
            this._beforeChange = this.beforeChange.subscribe((confirm) => {
                if (confirm) {
                    this.onClick(event);
                }
            });
        }
        else {
            this.onClick(event);
        }
    }
    writeValue(obj) {
        if (obj !== this.checked) {
            this.checked = !!obj;
        }
        // Added as part of #243 when change detection OnPush is set for the
        // hosting component
        // https://github.com/webcat12345/ngx-ui-switch/issues/243
        if (this.cdr) {
            this.cdr.markForCheck();
        }
    }
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onTouchedCallback = (v) => { };
    onChangeCallback = (v) => { };
    ngOnDestroy() {
        if (this._beforeChange) {
            this._beforeChange.unsubscribe();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchComponent, deps: [{ token: UI_SWITCH_OPTIONS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UiSwitchComponent, selector: "ui-switch", inputs: { size: "size", color: "color", switchOffColor: "switchOffColor", switchColor: "switchColor", defaultBgColor: "defaultBgColor", defaultBoColor: "defaultBoColor", checkedLabel: "checkedLabel", uncheckedLabel: "uncheckedLabel", checkedTextColor: "checkedTextColor", uncheckedTextColor: "uncheckedTextColor", beforeChange: "beforeChange", ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", reverse: "reverse", loading: "loading" }, outputs: { change: "change", changeEvent: "changeEvent", valueChange: "valueChange" }, host: { listeners: { "click": "onToggle($event)" } }, providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"switch\"\n  role=\"switch\"\n  [attr.aria-checked]=\"reverse ? !checked : checked\"\n  [attr.aria-label]=\"ariaLabel\"\n  [class.checked]=\"reverse ? !checked : checked\"\n  [class.disabled]=\"disabled\"\n  [class.loading]=\"loading\"\n  [class.switch-large]=\"size === 'large'\"\n  [class.switch-medium]=\"size === 'medium'\"\n  [class.switch-small]=\"size === 'small'\"\n  [style.background-color]=\"getColor()\"\n  [style.border-color]=\"getColor('borderColor')\"\n>\n  <label class=\"switch-pane\" *ngIf=\"checkedLabel || uncheckedLabel\">\n    <span\n      [attr.aria-label]=\"this.checkedLabel\"\n      [class]=\"getLabelClass('checked')\"\n      [style.color]=\"getColor('checkedTextColor')\"\n      >{{ this.checkedLabel }}</span\n    >\n    <span\n      [attr.aria-label]=\"this.uncheckedLabel\"\n      [class]=\"getLabelClass('unchecked')\"\n      [style.color]=\"getColor('uncheckedTextColor')\"\n      >{{ this.uncheckedLabel }}</span\n    >\n  </label>\n  <small [style.background]=\"getColor('switchColor')\">\n    <ng-content></ng-content>\n  </small>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ui-switch', providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR], template: "<button\n  type=\"button\"\n  class=\"switch\"\n  role=\"switch\"\n  [attr.aria-checked]=\"reverse ? !checked : checked\"\n  [attr.aria-label]=\"ariaLabel\"\n  [class.checked]=\"reverse ? !checked : checked\"\n  [class.disabled]=\"disabled\"\n  [class.loading]=\"loading\"\n  [class.switch-large]=\"size === 'large'\"\n  [class.switch-medium]=\"size === 'medium'\"\n  [class.switch-small]=\"size === 'small'\"\n  [style.background-color]=\"getColor()\"\n  [style.border-color]=\"getColor('borderColor')\"\n>\n  <label class=\"switch-pane\" *ngIf=\"checkedLabel || uncheckedLabel\">\n    <span\n      [attr.aria-label]=\"this.checkedLabel\"\n      [class]=\"getLabelClass('checked')\"\n      [style.color]=\"getColor('checkedTextColor')\"\n      >{{ this.checkedLabel }}</span\n    >\n    <span\n      [attr.aria-label]=\"this.uncheckedLabel\"\n      [class]=\"getLabelClass('unchecked')\"\n      [style.color]=\"getColor('uncheckedTextColor')\"\n      >{{ this.uncheckedLabel }}</span\n    >\n  </label>\n  <small [style.background]=\"getColor('switchColor')\">\n    <ng-content></ng-content>\n  </small>\n</button>\n" }]
        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [UI_SWITCH_OPTIONS]
                }, {
                    type: Optional
                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
                type: Input
            }], color: [{
                type: Input
            }], switchOffColor: [{
                type: Input
            }], switchColor: [{
                type: Input
            }], defaultBgColor: [{
                type: Input
            }], defaultBoColor: [{
                type: Input
            }], checkedLabel: [{
                type: Input
            }], uncheckedLabel: [{
                type: Input
            }], checkedTextColor: [{
                type: Input
            }], uncheckedTextColor: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], checked: [{
                type: Input
            }], disabled: [{
                type: Input
            }], reverse: [{
                type: Input
            }], loading: [{
                type: Input
            }], change: [{
                type: Output
            }], changeEvent: [{
                type: Output
            }], valueChange: [{
                type: Output
            }], onToggle: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class UiSwitchModule {
    static forRoot(config) {
        return {
            ngModule: UiSwitchModule,
            providers: [{ provide: UI_SWITCH_OPTIONS, useValue: config || {} }],
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchModule, declarations: [UiSwitchComponent], imports: [CommonModule, FormsModule], exports: [FormsModule, UiSwitchComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchModule, imports: [CommonModule, FormsModule, FormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiSwitchModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [UiSwitchComponent],
                    imports: [CommonModule, FormsModule],
                    exports: [FormsModule, UiSwitchComponent],
                }]
        }] });

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

export { UiSwitchComponent, UiSwitchModule };
//# sourceMappingURL=ngx-ui-switch.mjs.map