simple-icon-toggle
Version:
An Angular.io compatible slide toggle with an icon inside ;)
108 lines (102 loc) • 6.62 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '/core', '@angular/common'], factory) :
(factory((global['simple-icon-toggle'] = {}),global.ng.core,global.ng.common));
}(this, (function (exports,core,common) { 'use strict';
var SimpleIconToggleComponent = /** @class */ (function () {
function SimpleIconToggleComponent() {
this.isCheckedValue = false;
this.icon = 'notifications_active';
this.checked = false;
this.checkedChange = new core.EventEmitter();
}
Object.defineProperty(SimpleIconToggleComponent.prototype, "options", {
/**
* @return {?}
*/
get: function () {
return this.optionsValue;
},
/**
* @param {?} values
* @return {?}
*/
set: function (values) {
this.optionsValue = this.mergeObjects({
width: 125,
barColor: 'lightgreen',
spotColor: null,
iconColor: null
}, values);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SimpleIconToggleComponent.prototype.toggle = function () {
this.checked = !this.checked;
this.checkedChange.emit(this.checked);
};
/**
* @param {...?} args
* @return {?}
*/
SimpleIconToggleComponent.prototype.mergeObjects = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var /** @type {?} */ resObj = {};
for (var /** @type {?} */ i = 0; i < arguments.length; i += 1) {
var /** @type {?} */ obj = arguments[i], /** @type {?} */ keys = Object.keys(obj);
for (var /** @type {?} */ j = 0; j < keys.length; j += 1) {
resObj[keys[j]] = obj[keys[j]];
}
}
return resObj;
};
return SimpleIconToggleComponent;
}());
SimpleIconToggleComponent.decorators = [
{ type: core.Component, args: [{
selector: 'simple-icon-toggle',
template: "\n <div class=\"switch_container\" [ngStyle]=\"{'width':options.width + 'px'}\">\n <div class=\"aspect-ratio-space-external\"></div>\n <div class=\"switch\" (click)=\"toggle()\" [ngClass]=\"{'checked': checked}\">\n <div class=\"spot-container\">\n <div class=\"aspect-ratio-space\"></div>\n <div class=\"spot\" [ngStyle]=\"{'background-color': options.spotColor}\">\n <i [ngStyle]=\"{'font-size': ((42 * options.width) / 100) + 'px',\n 'line-height': ((58 * options.width) / 100) + 'px',\n 'color': options.iconColor != null ? options.iconColor : 'inherit'}\" class=\"material-icons icon\">{{ icon }}</i>\n </div>\n </div>\n <div class=\"slider\" [ngStyle]=\"{'background-color': checked ? options.barColor: '#ccc', 'border-radius': ((58 * options.width) / 100) + 'px' }\"></div>\n </div>\n </div>\n ",
styles: ["\n .switch_container {\n display: inline-block;\n position: relative;\n width: 60px;\n margin: 2px;\n }\n \n .switch {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: inline-block;\n width: 100%;\n height: 100%;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n /*text-align: center;*/\n }\n \n .icon {\n display: block;\n }\n\n .slider {\n margin: 5%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n -webkit-transition: .4s;\n transition: .4s;\n border-radius: 35px;\n background-color: #FFEBEE;\n }\n \n .spot-container {\n display: inline-block;\n position: absolute;\n width: 58%;\n text-align: center;\n }\n\n .aspect-ratio-space-external {\n margin-top: 60%;\n }\n\n .aspect-ratio-space {\n margin-top: 100%;\n }\n .spot {\n top:0;\n bottom: 0;\n right: 0;\n left: 0;\n background-color: red;\n -webkit-transition: .4s;\n transition: .4s;\n position: absolute;\n vertical-align: middle;\n -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.5);\n box-shadow: -1px 0 2px rgba(0,0,0,0.5);\n border-radius: 50%;\n z-index: 2;\n }\n \n .vertically-centered {\n vertical-align: middle;\n }\n \n .checked .slider {\n background-color: green;\n }\n \n .checked .spot {\n -webkit-transform: translateX(78%);\n transform: translateX(78%);\n }\n "]
},] },
];
/**
* @nocollapse
*/
SimpleIconToggleComponent.ctorParameters = function () { return []; };
SimpleIconToggleComponent.propDecorators = {
'icon': [{ type: core.Input, args: ['mat-icon',] },],
'options': [{ type: core.Input, args: ['options',] },],
'checked': [{ type: core.Input, args: ['checked',] },],
'checkedChange': [{ type: core.Output },],
};
var SimpleIconToggleModule = /** @class */ (function () {
function SimpleIconToggleModule() {
}
return SimpleIconToggleModule;
}());
SimpleIconToggleModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
providers: [],
declarations: [SimpleIconToggleComponent],
exports: [SimpleIconToggleComponent]
},] },
];
/**
* @nocollapse
*/
SimpleIconToggleModule.ctorParameters = function () { return []; };
exports.SimpleIconToggleModule = SimpleIconToggleModule;
exports.ɵa = SimpleIconToggleComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=simple-icon-toggle.umd.js.map