ngx-pluto/esm5/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>
 */
var NpSwitch = /** @class */ (function () {
    function NpSwitch(cdf) {
        this.cdf = cdf;
        /**
         * 是否禁用
         */
        this.isDisabled = false;
        /**
         * 是否必填 - 必填则有红色*号在标签前面；否则没有
         */
        this.isRequired = false;
        /**
         * 标签的方向，left在开关左方，right在开关右方
         */
        this.direction = "left";
        /**
         * 开关状态发生改变时触发事件
         */
        this.inputModelChange = new EventEmitter();
        this.emitChange = (/**
         * @param {?} _
         * @return {?}
         */
        function (_) { });
    }
    Object.defineProperty(NpSwitch.prototype, "ischecked", {
        get: /**
         * @return {?}
         */
        function () {
            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;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    NpSwitch.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        // 转换下传入的值
    };
    /**
     * @param {?} e
     * @return {?}
     */
    NpSwitch.prototype.onChange = /**
     * @param {?} e
     * @return {?}
     */
    function (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 {?}
     */
    NpSwitch.prototype.writeValue = /**
     * @param {?} obj
     * @return {?}
     */
    function (obj) {
        if (obj !== undefined) {
            this.val = obj;
            this.emitChange(this.val);
        }
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NpSwitch.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.emitChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NpSwitch.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (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 {?}
                             */
                            function () { 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 = function () { return [
        { 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 }]
    };
    return NpSwitch;
}());
export { NpSwitch };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXBsdXRvLyIsInNvdXJjZXMiOlsibGliL3N3aXRjaC9zd2l0Y2gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsS0FBSyxFQUFVLFVBQVUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pJLE9BQU8sRUFBRSxpQkFBaUIsRUFBd0IsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBT3pFO0lBMkNFLGtCQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjs7OztRQXJCakMsZUFBVSxHQUFHLEtBQUssQ0FBQzs7OztRQUVuQixlQUFVLEdBQUcsS0FBSyxDQUFDOzs7O1FBRW5CLGNBQVMsR0FBcUIsTUFBTSxDQUFDOzs7O1FBRXBDLHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFheEMsZUFBVTs7OztRQUFhLFVBQUMsQ0FBTSxJQUFPLENBQUMsRUFBQztJQUVELENBQUM7SUFkL0Msc0JBQUksK0JBQVM7Ozs7UUFBYjtZQUNFLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO2dCQUNyQyxJQUFJLElBQUksQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLFNBQVMsRUFBRTtvQkFDL0IsT0FBTyxJQUFJLENBQUM7aUJBQ2I7Z0JBQ0QsSUFBSSxJQUFJLENBQUMsR0FBRyxLQUFLLElBQUksQ0FBQyxVQUFVLEVBQUU7b0JBQ2hDLE9BQU8sS0FBSyxDQUFDO2lCQUNkO2FBQ0Y7aUJBQU07Z0JBQ0wsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQzthQUNoQztRQUNILENBQUM7OztPQUFBOzs7O0lBS0QsMkJBQVE7OztJQUFSO1FBQ0UsVUFBVTtJQUNaLENBQUM7Ozs7O0lBRUQsMkJBQVE7Ozs7SUFBUixVQUFTLENBQU07UUFDYixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDbkIsT0FBTztTQUNSO1FBRUQsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3BCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUVuQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbEIsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsVUFBVSxJQUFJLEtBQUssQ0FBQztZQUNwQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNyQyxPQUFPO1NBRVI7UUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNuQixJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ3JDLE9BQU87U0FDUjtJQUNILENBQUM7Ozs7O0lBRUQsNkJBQVU7Ozs7SUFBVixVQUFXLEdBQVE7UUFDakIsSUFBSSxHQUFHLEtBQUssU0FBUyxFQUFFO1lBQ3JCLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ2YsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDM0I7SUFDSCxDQUFDOzs7OztJQUVELG1DQUFnQjs7OztJQUFoQixVQUFpQixFQUFPO1FBQ3RCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7Ozs7O0lBRUQsb0NBQWlCOzs7O0lBQWpCLFVBQWtCLEVBQU8sSUFBVSxDQUFDOztnQkFuRnJDLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsV0FBVztvQkFDckIsb3JCQUEwQjtvQkFFMUIsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVTs7OzRCQUFDLGNBQU0sT0FBQSxRQUFRLEVBQVIsQ0FBUSxFQUFDOzRCQUN2QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFBQzs7aUJBQ0w7Ozs7Z0JBbkJpRSxpQkFBaUI7Ozt3QkF3QmhGLEtBQUs7NEJBRUwsS0FBSzs2QkFFTCxLQUFLOzZCQUVMLEtBQUs7NkJBRUwsS0FBSzs0QkFFTCxLQUFLO21DQUVMLE1BQU07O0lBd0RULGVBQUM7Q0FBQSxBQXBGRCxJQW9GQztTQXZFWSxRQUFROzs7SUFDbkIsdUJBQXNCOzs7OztJQUV0Qix5QkFBdUI7Ozs7O0lBRXZCLDZCQUF3Qjs7Ozs7SUFFeEIsOEJBQXlCOzs7OztJQUV6Qiw4QkFBNEI7Ozs7O0lBRTVCLDhCQUE0Qjs7Ozs7SUFFNUIsNkJBQThDOzs7OztJQUU5QyxvQ0FBZ0Q7Ozs7O0lBYWhELDhCQUErQzs7Ozs7SUFFbkMsdUJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgSW5wdXQsIE9uSW5pdCwgZm9yd2FyZFJlZiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SLCBDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbi8qKlxyXG4gKiDlvIDlhbNcclxuICogXHJcbiAqIDxleGFtcGxlLXVybD5odHRwczovL3N0YWNrYmxpdHouY29tL2VkaXQvbnAtc3dpdGNoLXNhbXBsZT9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50Lmh0bWw8L2V4YW1wbGUtdXJsPlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IGBucC1zd2l0Y2hgLFxyXG4gIHRlbXBsYXRlVXJsOiAnc3dpdGNoLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWydzd2l0Y2guc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOcFN3aXRjaCksXHJcbiAgICAgIG11bHRpOiB0cnVlLFxyXG4gICAgfV1cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBOcFN3aXRjaCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIHZhbDogc3RyaW5nIHwgYm9vbGVhbjtcclxuICAvKirmoIfnrb4gKi9cclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gIC8qKuW8gOWFs+S4uuaJk+W8gOeKtuaAgeaXtueahOWAvO+8jOm7mOiupOS4unRydWUgKi9cclxuICBASW5wdXQoKSB0cnVlVmFsdWU6IGFueTtcclxuICAvKirlvIDlhbPkuLrlhbPpl63nirbmgIHml7bnmoTlgLzvvIzpu5jorqTkuLpmYWxzZSAqL1xyXG4gIEBJbnB1dCgpIGZhbHNlVmFsdWU6IGFueTtcclxuICAvKirmmK/lkKbnpoHnlKggKi9cclxuICBASW5wdXQoKSBpc0Rpc2FibGVkID0gZmFsc2U7XHJcbiAgLyoq5piv5ZCm5b+F5aGrIC0g5b+F5aGr5YiZ5pyJ57qi6ImyKuWPt+WcqOagh+etvuWJjemdou+8m+WQpuWImeayoeaciSAqL1xyXG4gIEBJbnB1dCgpIGlzUmVxdWlyZWQgPSBmYWxzZTtcclxuICAvKirmoIfnrb7nmoTmlrnlkJHvvIxsZWZ05Zyo5byA5YWz5bem5pa577yMcmlnaHTlnKjlvIDlhbPlj7PmlrkgKi9cclxuICBASW5wdXQoKSBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgPSBcImxlZnRcIjtcclxuICAvKirlvIDlhbPnirbmgIHlj5HnlJ/mlLnlj5jml7bop6blj5Hkuovku7YgKi9cclxuICBAT3V0cHV0KCkgaW5wdXRNb2RlbENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBnZXQgaXNjaGVja2VkKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMudHJ1ZVZhbHVlIHx8IHRoaXMuZmFsc2VWYWx1ZSkge1xyXG4gICAgICBpZiAodGhpcy52YWwgPT09IHRoaXMudHJ1ZVZhbHVlKSB7XHJcbiAgICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICAgIH1cclxuICAgICAgaWYgKHRoaXMudmFsID09PSB0aGlzLmZhbHNlVmFsdWUpIHtcclxuICAgICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnZhbCA/IHRydWUgOiBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbiAgcHJpdmF0ZSBlbWl0Q2hhbmdlOiBGdW5jdGlvbiA9IChfOiBhbnkpID0+IHsgfTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZGY6IENoYW5nZURldGVjdG9yUmVmKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICAvLyDovazmjaLkuIvkvKDlhaXnmoTlgLxcclxuICB9XHJcblxyXG4gIG9uQ2hhbmdlKGU6IGFueSkge1xyXG4gICAgaWYgKHRoaXMuaXNEaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgIGUucHJldmVudERlZmF1bHQoKTtcclxuXHJcbiAgICBpZiAodGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLmZhbHNlVmFsdWUgfHwgZmFsc2U7XHJcbiAgICAgIHRoaXMuZW1pdENoYW5nZSh0aGlzLnZhbCk7XHJcbiAgICAgIHRoaXMuaW5wdXRNb2RlbENoYW5nZS5lbWl0KHRoaXMudmFsKTtcclxuICAgICAgcmV0dXJuO1xyXG5cclxuICAgIH1cclxuICAgIGlmICghdGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLnRydWVWYWx1ZSB8fCB0cnVlO1xyXG4gICAgICB0aGlzLmVtaXRDaGFuZ2UodGhpcy52YWwpO1xyXG4gICAgICB0aGlzLmlucHV0TW9kZWxDaGFuZ2UuZW1pdCh0aGlzLnZhbCk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcclxuICAgIGlmIChvYmogIT09IHVuZGVmaW5lZCkge1xyXG4gICAgICB0aGlzLnZhbCA9IG9iajtcclxuICAgICAgdGhpcy5lbWl0Q2hhbmdlKHRoaXMudmFsKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5lbWl0Q2hhbmdlID0gZm47XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7IH1cclxufVxyXG5cclxuXHJcbiJdfQ==