@ngx-tiny/switch-input
Version:
   • 5.53 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('@ngx-tiny/switch-input', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(global = global || self, factory((global['ngx-tiny'] = global['ngx-tiny'] || {}, global['ngx-tiny']['switch-input'] = {}), global.ng.core, global.ng.forms, global.ng.common));
}(this, (function (exports, core, forms, common) { 'use strict';
var instanceId = 0;
var NgxSwitchInputComponent = /** @class */ (function () {
function NgxSwitchInputComponent() {
this.instanceId = "ngx-switch-input-" + instanceId++;
// tslint:disable-next-line:no-input-rename
this._value = false;
this.valueChange = new core.EventEmitter();
this.onChange = function (_value) { };
this.onTouched = function () { };
}
Object.defineProperty(NgxSwitchInputComponent.prototype, "value", {
get: function () {
return this._value;
},
set: function (val) {
this._value = val;
this.onChange(val);
this.onTouched();
this.valueChange.emit(val);
},
enumerable: false,
configurable: true
});
NgxSwitchInputComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NgxSwitchInputComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
NgxSwitchInputComponent.prototype.writeValue = function (value) {
if (value !== this.value) {
this.value = value;
}
};
NgxSwitchInputComponent.prototype.switch = function () {
this.value = !this.value;
};
return NgxSwitchInputComponent;
}());
NgxSwitchInputComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-switch-input',
template: "<label [for]=\"instanceId\" class=\"ngx-switch-input\">\r\n <span *ngIf=\"label\" class=\"ngx-switch-input-label\">{{label}}</span>\r\n <div class=\"ngx-switch-input-wrap\" [ngClass]=\"{ 'ngx-switch-input-checked': value }\">\r\n <input type=\"checkbox\" [id]=\"instanceId\" class=\"ngx-switch-input-input\" [checked]=\"value\" (change)=\"switch()\" [attr.aria-label]=\"label\">\r\n <span class=\"ngx-switch-input-background\"></span>\r\n <span class=\"ngx-switch-input-handle\"></span>\r\n </div>\r\n</label>",
changeDetection: core.ChangeDetectionStrategy.Default,
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return NgxSwitchInputComponent; }),
multi: true
}
],
encapsulation: core.ViewEncapsulation.None,
styles: ["ngx-switch-input{display:inline-block}.ngx-switch-input{padding:5px 0}.ngx-switch-input-wrap{cursor:pointer;display:inline-block;overflow:visible;padding:1px 0;position:relative;vertical-align:top}.ngx-switch-input-label{cursor:pointer;display:inline-block;font-size:15px;padding-right:5px;padding-top:5px}.ngx-switch-input-handle{background:#fff;border-radius:100%;height:16px;left:3px;position:absolute;top:6px;transition:left .15s ease-out;width:16px}.ngx-switch-input-input{left:0;opacity:0;position:absolute;top:0}.ngx-switch-input-background{background:#ccc;border-radius:15px;display:block;font-size:16px;font-weight:400;height:26px;position:relative;text-transform:uppercase;transition:.15s ease-out;transition-property:opacity background;width:45px}.ngx-switch-input-background:after,.ngx-switch-input-background:before{line-height:1;margin-top:-7px;position:absolute;top:50%;transition:inherit}.ngx-switch-input-checked .ngx-switch-input-background{background:#3d3d3d}.ngx-switch-input-checked .ngx-switch-input-background:before{opacity:0}.ngx-switch-input-checked .ngx-switch-input-background:after{opacity:1}.ngx-switch-input-checked .ngx-switch-input-handle{left:25px}"]
},] }
];
NgxSwitchInputComponent.propDecorators = {
label: [{ type: core.Input }],
_value: [{ type: core.Input, args: ['value',] }],
valueChange: [{ type: core.Output }]
};
var NgxSwitchInputModule = /** @class */ (function () {
function NgxSwitchInputModule() {
}
return NgxSwitchInputModule;
}());
NgxSwitchInputModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
declarations: [NgxSwitchInputComponent],
exports: [NgxSwitchInputComponent]
},] }
];
/*
* Public API Surface of ngx-switch-input
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxSwitchInputComponent = NgxSwitchInputComponent;
exports.NgxSwitchInputModule = NgxSwitchInputModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-tiny-switch-input.umd.js.map