ngx-pluto/esm2015/lib/switch/switch.js

ngx-pluto组件库

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ViewEncapsulation, Input, forwardRef, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
 * 开关
 *
 * <example-url>https://stackblitz.com/edit/np-switch-sample?embed=1&file=src/app/app.component.html</example-url>
 */
export class NpSwitch {
    /**
     * @param {?} cdf
     */
    constructor(cdf) {
        this.cdf = cdf;
        /**
         * 是否禁用
         */
        this.isDisabled = false;
        /**
         * 是否必填 - 必填则有红色*号在标签前面；否则没有
         */
        this.isRequired = false;
        /**
         * 标签的方向，left在开关左方，right在开关右方
         */
        this.direction = "left";
        /**
         * 开关状态发生改变时触发事件
         */
        this.inputModelChange = new EventEmitter();
        this.emitChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
    }
    /**
     * @return {?}
     */
    get ischecked() {
        if (this.trueValue || this.falseValue) {
            if (this.val === this.trueValue) {
                return true;
            }
            if (this.val === this.falseValue) {
                return false;
            }
        }
        else {
            return this.val ? true : false;
        }
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        // 转换下传入的值
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onChange(e) {
        if (this.isDisabled) {
            return;
        }
        e.stopPropagation();
        e.preventDefault();
        if (this.ischecked) {
            this.val = this.falseValue || false;
            this.emitChange(this.val);
            this.inputModelChange.emit(this.val);
            return;
        }
        if (!this.ischecked) {
            this.val = this.trueValue || true;
            this.emitChange(this.val);
            this.inputModelChange.emit(this.val);
            return;
        }
    }
    /**
     * @param {?} obj
     * @return {?}
     */
    writeValue(obj) {
        if (obj !== undefined) {
            this.val = obj;
            this.emitChange(this.val);
        }
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.emitChange = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) { }
}
NpSwitch.decorators = [
    { type: Component, args: [{
                selector: `np-switch`,
                template: "<div ngDefaultControl [(ngModel)]=\"val\" class=\"np-switch-wrapper flex-wrap row-flex\" (click)=\"onChange($event)\"\r\n  [ngStyle]=\"{'flex-direction': direction==='right'?'row-reverse':'row', 'cursor': isDisabled ? 'not-allowed' : 'pointer'}\">\r\n  <div class=\"flex-wrap col-flex\" *ngIf=\"label\">\r\n    <label for=\"np-switch\" class=\"np-switch-lbl\">\r\n      <span class=\"form-required\" *ngIf=\"isRequired\">*</span>\r\n      {{ label }}\r\n    </label>\r\n  </div>\r\n  <div class=\"flex-wrap col-flex switch-container\">\r\n    <span class=\"switch switch-anim\" [ngClass]=\"{'checked': ischecked, 'disabled': isDisabled}\">\r\n    </span>\r\n  </div>\r\n</div>\r\n",
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => NpSwitch)),
                        multi: true,
                    }
                ],
                styles: [".backdrop-transparent{opacity:0}.flex-wrap{display:flex}.wrap{flex-wrap:wrap}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content:center;align-items:center}.space-between{justify-content:space-between;align-items:center}.align-center{align-items:center}.np-row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.np-column{display:flex;flex-direction:column;flex-basis:100%;flex:1}.np-switch-wrapper{align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.np-switch-wrapper .np-switch-lbl{width:80px;margin-right:20px;text-align:right;font-size:13px;font-weight:700;height:34px;line-height:34px}.np-switch-wrapper .switch-container{position:relative}.np-switch-wrapper .switch-container .switch{box-sizing:content-box;width:55px;height:25px;position:relative;border-radius:15px;background-clip:content-box;display:inline-block;-webkit-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}.np-switch-wrapper .switch-container .switch:before{content:'';width:25px!important;height:25px!important;position:absolute;top:0!important;left:0!important;border-radius:15px}.np-switch-wrapper .switch-container .switch.checked:before{left:30.4px!important;position:absolute;top:0;content:''}.np-switch-wrapper .switch-container .switch.switch-animbg{transition:background-color .4s}.np-switch-wrapper .switch-container .switch.switch-animbg:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-animbg:checked{transition:border-color .4s,background-color .4s}.np-switch-wrapper .switch-container .switch.switch-animbg:checked:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-anim{transition:border .4s cubic-bezier(0,0,0,1),box-shadow .4s cubic-bezier(0,0,0,1)}.np-switch-wrapper .switch-container .switch.switch-anim:before{transition:left .3s}.np-switch-wrapper .switch-container .switch.switch-anim.checked{transition:border .4s,box-shadow .4s,background-color 1.2s}.np-switch-wrapper .switch-container .switch.switch-anim.checked:before{transition:left .3s}"]
            }] }
];
/** @nocollapse */
NpSwitch.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
NpSwitch.propDecorators = {
    label: [{ type: Input }],
    trueValue: [{ type: Input }],
    falseValue: [{ type: Input }],
    isDisabled: [{ type: Input }],
    isRequired: [{ type: Input }],
    direction: [{ type: Input }],
    inputModelChange: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    NpSwitch.prototype.val;
    /**
     * 标签
     * @type {?}
     */
    NpSwitch.prototype.label;
    /**
     * 开关为打开状态时的值，默认为true
     * @type {?}
     */
    NpSwitch.prototype.trueValue;
    /**
     * 开关为关闭状态时的值，默认为false
     * @type {?}
     */
    NpSwitch.prototype.falseValue;
    /**
     * 是否禁用
     * @type {?}
     */
    NpSwitch.prototype.isDisabled;
    /**
     * 是否必填 - 必填则有红色*号在标签前面；否则没有
     * @type {?}
     */
    NpSwitch.prototype.isRequired;
    /**
     * 标签的方向，left在开关左方，right在开关右方
     * @type {?}
     */
    NpSwitch.prototype.direction;
    /**
     * 开关状态发生改变时触发事件
     * @type {?}
     */
    NpSwitch.prototype.inputModelChange;
    /**
     * @type {?}
     * @private
     */
    NpSwitch.prototype.emitChange;
    /**
     * @type {?}
     * @private
     */
    NpSwitch.prototype.cdf;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXBsdXRvLyIsInNvdXJjZXMiOlsibGliL3N3aXRjaC9zd2l0Y2gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsS0FBSyxFQUFVLFVBQVUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pJLE9BQU8sRUFBRSxpQkFBaUIsRUFBd0IsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBb0J6RSxNQUFNLE9BQU8sUUFBUTs7OztJQThCbkIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7Ozs7UUFyQmpDLGVBQVUsR0FBRyxLQUFLLENBQUM7Ozs7UUFFbkIsZUFBVSxHQUFHLEtBQUssQ0FBQzs7OztRQUVuQixjQUFTLEdBQXFCLE1BQU0sQ0FBQzs7OztRQUVwQyxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBYXhDLGVBQVU7Ozs7UUFBYSxDQUFDLENBQU0sRUFBRSxFQUFFLEdBQUcsQ0FBQyxFQUFDO0lBRUQsQ0FBQzs7OztJQWQvQyxJQUFJLFNBQVM7UUFDWCxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNyQyxJQUFJLElBQUksQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDL0IsT0FBTyxJQUFJLENBQUM7YUFDYjtZQUNELElBQUksSUFBSSxDQUFDLEdBQUcsS0FBSyxJQUFJLENBQUMsVUFBVSxFQUFFO2dCQUNoQyxPQUFPLEtBQUssQ0FBQzthQUNkO1NBQ0Y7YUFBTTtZQUNMLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7U0FDaEM7SUFDSCxDQUFDOzs7O0lBS0QsUUFBUTtRQUNOLFVBQVU7SUFDWixDQUFDOzs7OztJQUVELFFBQVEsQ0FBQyxDQUFNO1FBQ2IsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLE9BQU87U0FDUjtRQUVELENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNwQixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFbkIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxLQUFLLENBQUM7WUFDcEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDckMsT0FBTztTQUVSO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQztZQUNsQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNyQyxPQUFPO1NBQ1I7SUFDSCxDQUFDOzs7OztJQUVELFVBQVUsQ0FBQyxHQUFRO1FBQ2pCLElBQUksR0FBRyxLQUFLLFNBQVMsRUFBRTtZQUNyQixJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztZQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7Ozs7O0lBRUQsaUJBQWlCLENBQUMsRUFBTyxJQUFVLENBQUM7OztZQW5GckMsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQixvckJBQTBCO2dCQUUxQixhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtnQkFDckMsU0FBUyxFQUFFO29CQUNUO3dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxVQUFVOzs7d0JBQUMsR0FBRyxFQUFFLENBQUMsUUFBUSxFQUFDO3dCQUN2QyxLQUFLLEVBQUUsSUFBSTtxQkFDWjtpQkFBQzs7YUFDTDs7OztZQW5CaUUsaUJBQWlCOzs7b0JBd0JoRixLQUFLO3dCQUVMLEtBQUs7eUJBRUwsS0FBSzt5QkFFTCxLQUFLO3lCQUVMLEtBQUs7d0JBRUwsS0FBSzsrQkFFTCxNQUFNOzs7O0lBZFAsdUJBQXNCOzs7OztJQUV0Qix5QkFBdUI7Ozs7O0lBRXZCLDZCQUF3Qjs7Ozs7SUFFeEIsOEJBQXlCOzs7OztJQUV6Qiw4QkFBNEI7Ozs7O0lBRTVCLDhCQUE0Qjs7Ozs7SUFFNUIsNkJBQThDOzs7OztJQUU5QyxvQ0FBZ0Q7Ozs7O0lBYWhELDhCQUErQzs7Ozs7SUFFbkMsdUJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgSW5wdXQsIE9uSW5pdCwgZm9yd2FyZFJlZiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SLCBDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbi8qKlxyXG4gKiDlvIDlhbNcclxuICogXHJcbiAqIDxleGFtcGxlLXVybD5odHRwczovL3N0YWNrYmxpdHouY29tL2VkaXQvbnAtc3dpdGNoLXNhbXBsZT9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50Lmh0bWw8L2V4YW1wbGUtdXJsPlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IGBucC1zd2l0Y2hgLFxyXG4gIHRlbXBsYXRlVXJsOiAnc3dpdGNoLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWydzd2l0Y2guc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOcFN3aXRjaCksXHJcbiAgICAgIG11bHRpOiB0cnVlLFxyXG4gICAgfV1cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBOcFN3aXRjaCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIHZhbDogc3RyaW5nIHwgYm9vbGVhbjtcclxuICAvKirmoIfnrb4gKi9cclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIC8qKuW8gOWFs+S4uuaJk+W8gOeKtuaAgeaXtueahOWAvO+8jOm7mOiupOS4unRydWUgKi9cclxuICBASW5wdXQoKSB0cnVlVmFsdWU6IGFueTtcclxuICAvKirlvIDlhbPkuLrlhbPpl63nirbmgIHml7bnmoTlgLzvvIzpu5jorqTkuLpmYWxzZSAqL1xyXG4gIEBJbnB1dCgpIGZhbHNlVmFsdWU6IGFueTtcclxuICAvKirmmK/lkKbnpoHnlKggKi9cclxuICBASW5wdXQoKSBpc0Rpc2FibGVkID0gZmFsc2U7XHJcbiAgLyoq5piv5ZCm5b+F5aGrIC0g5b+F5aGr5YiZ5pyJ57qi6ImyKuWPt+WcqOagh+etvuWJjemdou+8m+WQpuWImeayoeaciSAqL1xyXG4gIEBJbnB1dCgpIGlzUmVxdWlyZWQgPSBmYWxzZTtcclxuICAvKirmoIfnrb7nmoTmlrnlkJHvvIxsZWZ05Zyo5byA5YWz5bem5pa577yMcmlnaHTlnKjlvIDlhbPlj7PmlrkgKi9cclxuICBASW5wdXQoKSBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgPSBcImxlZnRcIjtcclxuICAvKirlvIDlhbPnirbmgIHlj5HnlJ/mlLnlj5jml7bop6blj5Hkuovku7YgKi9cclxuICBAT3V0cHV0KCkgaW5wdXRNb2RlbENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBnZXQgaXNjaGVja2VkKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMudHJ1ZVZhbHVlIHx8IHRoaXMuZmFsc2VWYWx1ZSkge1xyXG4gICAgICBpZiAodGhpcy52YWwgPT09IHRoaXMudHJ1ZVZhbHVlKSB7XHJcbiAgICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICAgIH1cclxuICAgICAgaWYgKHRoaXMudmFsID09PSB0aGlzLmZhbHNlVmFsdWUpIHtcclxuICAgICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnZhbCA/IHRydWUgOiBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbiAgcHJpdmF0ZSBlbWl0Q2hhbmdlOiBGdW5jdGlvbiA9IChfOiBhbnkpID0+IHsgfTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZGY6IENoYW5nZURldGVjdG9yUmVmKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICAvLyDovazmjaLkuIvkvKDlhaXnmoTlgLxcclxuICB9XHJcblxyXG4gIG9uQ2hhbmdlKGU6IGFueSkge1xyXG4gICAgaWYgKHRoaXMuaXNEaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgIGUucHJldmVudERlZmF1bHQoKTtcclxuXHJcbiAgICBpZiAodGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLmZhbHNlVmFsdWUgfHwgZmFsc2U7XHJcbiAgICAgIHRoaXMuZW1pdENoYW5nZSh0aGlzLnZhbCk7XHJcbiAgICAgIHRoaXMuaW5wdXRNb2RlbENoYW5nZS5lbWl0KHRoaXMudmFsKTtcclxuICAgICAgcmV0dXJuO1xyXG5cclxuICAgIH1cclxuICAgIGlmICghdGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLnRydWVWYWx1ZSB8fCB0cnVlO1xyXG4gICAgICB0aGlzLmVtaXRDaGFuZ2UodGhpcy52YWwpO1xyXG4gICAgICB0aGlzLmlucHV0TW9kZWxDaGFuZ2UuZW1pdCh0aGlzLnZhbCk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcclxuICAgIGlmIChvYmogIT09IHVuZGVmaW5lZCkge1xyXG4gICAgICB0aGlzLnZhbCA9IG9iajtcclxuICAgICAgdGhpcy5lbWl0Q2hhbmdlKHRoaXMudmFsKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5lbWl0Q2hhbmdlID0gZm47XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7IH1cclxufVxyXG5cclxuXHJcbiJdfQ==