ngx-pluto/esm5/lib/checkbox/checkbox.component.js

ngx-pluto组件库

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ViewEncapsulation, Input, Output, EventEmitter, forwardRef, ChangeDetectorRef } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
/**
 * 复选框
 *
 * <example-url>https://stackblitz.com/edit/np-checkbox-sample?embed=1&file=src/app/app.component.html</example-url>
 */
var NpCheckbox = /** @class */ (function () {
    function NpCheckbox(cdf) {
        this.cdf = cdf;
        /**
         * 是否禁用复选框
         */
        this.isDisabled = false;
        /**
         * 当复选框选中状态改变时，触发此事件
         */
        this.inputModelChange = new EventEmitter();
        this.emitChange = (/**
         * @param {?} _
         * @return {?}
         */
        function (_) { });
    }
    Object.defineProperty(NpCheckbox.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 {?}
     */
    NpCheckbox.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        // 转换下传入的值
        this.forbiddenColor = this.forbiddenColor !== undefined ? true : false;
    };
    /**
     * @param {?} e
     * @return {?}
     */
    NpCheckbox.prototype.onChange = /**
     * @param {?} e
     * @return {?}
     */
    function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (this.forbiddenColor || this.isDisabled) {
            return;
        }
        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 {?}
     */
    NpCheckbox.prototype.writeValue = /**
     * @param {?} obj
     * @return {?}
     */
    function (obj) {
        if (obj !== undefined) {
            this.val = obj;
            this.emitChange(this.val);
        }
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NpCheckbox.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.emitChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NpCheckbox.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) { };
    NpCheckbox.decorators = [
        { type: Component, args: [{
                    selector: "np-checkbox",
                    template: "<div class=\"np-checkbox-button-wrapper\" ngDefaultControl [(ngModel)]=\"val\" (click)=\"onChange($event)\"\r\n  [ngStyle]=\"{'cursor': (forbiddenColor || isDisabled)? 'not-allowed':'pointer'}\">\r\n  <span class=\"checkbox\" [class.checkbox-checked]=\"ischecked\"\r\n    [class.checkbox-forbiddenColor]=\"forbiddenColor || isDisabled\"></span>\r\n  <span class=\"input-helper\" [class.checkbox-forbiddenColor]=\"forbiddenColor || isDisabled\"></span>\r\n  <span style=\"line-height: 28px;\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</div>\r\n",
                    encapsulation: ViewEncapsulation.None,
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return NpCheckbox; })),
                            multi: true,
                        }
                    ],
                    styles: [".flex-wrap{display:flex}.col-flex{flex-direction:column}.row-flex{flex-direction:row}.middle-flex{justify-content: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}.backdrop-transparent{opacity:0}.np-checkbox-button-wrapper{font-size:14px;padding-left:25px;position:relative;font-weight:400;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:baseline}.np-checkbox-button-wrapper .checkbox{opacity:0;z-index:1;left:1px;top:1px;position:absolute;width:14px;height:14px;margin:0;display:block}.np-checkbox-button-wrapper .checkbox.checkbox-checked+span::after{position:absolute;content:'';width:12px;height:12px;top:1px;left:1px;border-radius:4px}.np-checkbox-button-wrapper span.input-helper{position:absolute;left:2px;top:6px;width:16px;height:16px;box-sizing:border-box}.np-checkbox-button-wrapper .checkbox+span.input-helper{border-radius:4px}"]
                }] }
    ];
    /** @nocollapse */
    NpCheckbox.ctorParameters = function () { return [
        { type: ChangeDetectorRef }
    ]; };
    NpCheckbox.propDecorators = {
        trueValue: [{ type: Input }],
        falseValue: [{ type: Input }],
        forbiddenColor: [{ type: Input }],
        isDisabled: [{ type: Input }],
        inputModelChange: [{ type: Output }]
    };
    return NpCheckbox;
}());
export { NpCheckbox };
if (false) {
    /** @type {?} */
    NpCheckbox.prototype.val;
    /**
     * 复选框选中后的值由默认布尔的true改为此值。
     * @type {?}
     */
    NpCheckbox.prototype.trueValue;
    /**
     * 复选框选中后的值由默认布尔的false改为此值。
     * @type {?}
     */
    NpCheckbox.prototype.falseValue;
    /**
     * 设置此变量后，复选框颜色变为灰色，类似禁用的颜色
     * @type {?}
     */
    NpCheckbox.prototype.forbiddenColor;
    /**
     * 是否禁用复选框
     * @type {?}
     */
    NpCheckbox.prototype.isDisabled;
    /**
     * 当复选框选中状态改变时，触发此事件
     * @type {?}
     */
    NpCheckbox.prototype.inputModelChange;
    /**
     * @type {?}
     * @private
     */
    NpCheckbox.prototype.emitChange;
    /**
     * @type {?}
     * @private
     */
    NpCheckbox.prototype.cdf;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXBsdXRvLyIsInNvdXJjZXMiOlsibGliL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBMkIsS0FBSyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUE0QixpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwTCxPQUFPLEVBQUUsaUJBQWlCLEVBQXdCLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQU96RTtJQXlDRSxvQkFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7Ozs7UUFuQmpDLGVBQVUsR0FBRyxLQUFLLENBQUM7Ozs7UUFFbEIscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQWV4QyxlQUFVOzs7O1FBQWEsVUFBQyxDQUFNLElBQU8sQ0FBQyxFQUFDO0lBRUQsQ0FBQztJQWYvQyxzQkFBSSxpQ0FBUzs7OztRQUFiO1lBQ0UsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7Z0JBQ3JDLElBQUksSUFBSSxDQUFDLEdBQUcsS0FBSyxJQUFJLENBQUMsU0FBUyxFQUFFO29CQUMvQixPQUFPLElBQUksQ0FBQztpQkFDYjtnQkFDRCxJQUFJLElBQUksQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLFVBQVUsRUFBRTtvQkFDaEMsT0FBTyxLQUFLLENBQUM7aUJBQ2Q7YUFDRjtpQkFBTTtnQkFDTCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO2FBQ2hDO1FBQ0gsQ0FBQzs7O09BQUE7Ozs7SUFNRCw2QkFBUTs7O0lBQVI7UUFDRSxVQUFVO1FBQ1YsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsY0FBYyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDekUsQ0FBQzs7Ozs7SUFFRCw2QkFBUTs7OztJQUFSLFVBQVMsQ0FBTTtRQUNiLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNwQixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDbkIsSUFBSSxJQUFJLENBQUMsY0FBYyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDMUMsT0FBTztTQUNSO1FBRUQsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxLQUFLLENBQUM7WUFDcEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDMUIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDckMsT0FBTztTQUNSO1FBRUQsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQztZQUNsQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNyQyxPQUFPO1NBQ1I7SUFDSCxDQUFDOzs7OztJQUVELCtCQUFVOzs7O0lBQVYsVUFBVyxHQUFRO1FBQ2pCLElBQUksR0FBRyxLQUFLLFNBQVMsRUFBRTtZQUNyQixJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztZQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxxQ0FBZ0I7Ozs7SUFBaEIsVUFBaUIsRUFBTztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDOzs7OztJQUVELHNDQUFpQjs7OztJQUFqQixVQUFrQixFQUFPLElBQVUsQ0FBQzs7Z0JBakZyQyxTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7b0JBQ3ZCLG9qQkFBc0M7b0JBRXRDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxTQUFTLEVBQUU7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVU7Ozs0QkFBQyxjQUFNLE9BQUEsVUFBVSxFQUFWLENBQVUsRUFBQzs0QkFDekMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQUM7O2lCQUNMOzs7O2dCQW5CMEksaUJBQWlCOzs7NEJBd0J6SixLQUFLOzZCQUVMLEtBQUs7aUNBRUwsS0FBSzs2QkFFTCxLQUFLO21DQUVMLE1BQU07O0lBMERULGlCQUFDO0NBQUEsQUFsRkQsSUFrRkM7U0FyRVksVUFBVTs7O0lBQ3JCLHlCQUFzQjs7Ozs7SUFFdEIsK0JBQXdCOzs7OztJQUV4QixnQ0FBeUI7Ozs7O0lBRXpCLG9DQUFpQzs7Ozs7SUFFakMsZ0NBQTRCOzs7OztJQUU1QixzQ0FBZ0Q7Ozs7O0lBZWhELGdDQUErQzs7Ozs7SUFFbkMseUJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIElucHV0LCBPbkluaXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBTaW1wbGVDaGFuZ2VzLCBPbkNoYW5nZXMsIENoYW5nZURldGVjdG9yUmVmIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IsIENvbnRyb2xWYWx1ZUFjY2Vzc29yIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XHJcblxyXG4vKipcclxuICog5aSN6YCJ5qGGXHJcbiAqIFxyXG4gKiA8ZXhhbXBsZS11cmw+aHR0cHM6Ly9zdGFja2JsaXR6LmNvbS9lZGl0L25wLWNoZWNrYm94LXNhbXBsZT9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50Lmh0bWw8L2V4YW1wbGUtdXJsPlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IGBucC1jaGVja2JveGAsXHJcbiAgdGVtcGxhdGVVcmw6ICdjaGVja2JveC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ2NoZWNrYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBwcm92aWRlcnM6IFtcclxuICAgIHtcclxuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5wQ2hlY2tib3gpLFxyXG4gICAgICBtdWx0aTogdHJ1ZSxcclxuICAgIH1dXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBDaGVja2JveCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIHZhbDogc3RyaW5nIHwgYm9vbGVhbjtcclxuICAvKirlpI3pgInmoYbpgInkuK3lkI7nmoTlgLznlLHpu5jorqTluIPlsJTnmoR0cnVl5pS55Li65q2k5YC844CCICovXHJcbiAgQElucHV0KCkgdHJ1ZVZhbHVlOiBhbnk7XHJcbiAgLyoq5aSN6YCJ5qGG6YCJ5Lit5ZCO55qE5YC855Sx6buY6K6k5biD5bCU55qEZmFsc2XmlLnkuLrmraTlgLzjgIIgKi9cclxuICBASW5wdXQoKSBmYWxzZVZhbHVlOiBhbnk7XHJcbiAgLyoq6K6+572u5q2k5Y+Y6YeP5ZCO77yM5aSN6YCJ5qGG6aKc6Imy5Y+Y5Li654Gw6Imy77yM57G75Ly856aB55So55qE6aKc6ImyICovXHJcbiAgQElucHV0KCkgZm9yYmlkZGVuQ29sb3I6IGJvb2xlYW47XHJcbiAgLyoq5piv5ZCm56aB55So5aSN6YCJ5qGGICovXHJcbiAgQElucHV0KCkgaXNEaXNhYmxlZCA9IGZhbHNlO1xyXG4gIC8qKuW9k+WkjemAieahhumAieS4reeKtuaAgeaUueWPmOaXtu+8jOinpuWPkeatpOS6i+S7tiAqL1xyXG4gIEBPdXRwdXQoKSBpbnB1dE1vZGVsQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBnZXQgaXNjaGVja2VkKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMudHJ1ZVZhbHVlIHx8IHRoaXMuZmFsc2VWYWx1ZSkge1xyXG4gICAgICBpZiAodGhpcy52YWwgPT09IHRoaXMudHJ1ZVZhbHVlKSB7XHJcbiAgICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICAgIH1cclxuICAgICAgaWYgKHRoaXMudmFsID09PSB0aGlzLmZhbHNlVmFsdWUpIHtcclxuICAgICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnZhbCA/IHRydWUgOiBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgZW1pdENoYW5nZTogRnVuY3Rpb24gPSAoXzogYW55KSA9PiB7IH07XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RmOiBDaGFuZ2VEZXRlY3RvclJlZikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgLy8g6L2s5o2i5LiL5Lyg5YWl55qE5YC8XHJcbiAgICB0aGlzLmZvcmJpZGRlbkNvbG9yID0gdGhpcy5mb3JiaWRkZW5Db2xvciAhPT0gdW5kZWZpbmVkID8gdHJ1ZSA6IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgb25DaGFuZ2UoZTogYW55KSB7XHJcbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgaWYgKHRoaXMuZm9yYmlkZGVuQ29sb3IgfHwgdGhpcy5pc0Rpc2FibGVkKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLmZhbHNlVmFsdWUgfHwgZmFsc2U7XHJcbiAgICAgIHRoaXMuZW1pdENoYW5nZSh0aGlzLnZhbCk7XHJcbiAgICAgIHRoaXMuaW5wdXRNb2RlbENoYW5nZS5lbWl0KHRoaXMudmFsKTtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICghdGhpcy5pc2NoZWNrZWQpIHtcclxuICAgICAgdGhpcy52YWwgPSB0aGlzLnRydWVWYWx1ZSB8fCB0cnVlO1xyXG4gICAgICB0aGlzLmVtaXRDaGFuZ2UodGhpcy52YWwpO1xyXG4gICAgICB0aGlzLmlucHV0TW9kZWxDaGFuZ2UuZW1pdCh0aGlzLnZhbCk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcclxuICAgIGlmIChvYmogIT09IHVuZGVmaW5lZCkge1xyXG4gICAgICB0aGlzLnZhbCA9IG9iajtcclxuICAgICAgdGhpcy5lbWl0Q2hhbmdlKHRoaXMudmFsKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5lbWl0Q2hhbmdlID0gZm47XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7IH1cclxufVxyXG5cclxuXHJcbiJdfQ==