simple-icon-toggle/bundles/simple-icon-toggle.umd.min.js

An Angular.io compatible slide toggle with an icon inside ;)

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],t):t(n["simple-icon-toggle"]={},n.ng.core,n.ng.common)}(this,function(n,t,e){"use strict";var o=function(){function n(){this.isCheckedValue=!1,this.icon="notifications_active",this.checked=!1,this.checkedChange=new t.EventEmitter}return Object.defineProperty(n.prototype,"options",{get:function(){return this.optionsValue},set:function(n){this.optionsValue=this.mergeObjects({width:125,barColor:"lightgreen",spotColor:null,iconColor:null},n)},enumerable:!0,configurable:!0}),n.prototype.toggle=function(){this.checked=!this.checked,this.checkedChange.emit(this.checked)},n.prototype.mergeObjects=function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];for(var e={},o=0;o<arguments.length;o+=1)for(var i=arguments[o],r=Object.keys(i),s=0;s<r.length;s+=1)e[r[s]]=i[r[s]];return e},n}();o.decorators=[{type:t.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    "]}]}],o.ctorParameters=function(){return[]},o.propDecorators={icon:[{type:t.Input,args:["mat-icon"]}],options:[{type:t.Input,args:["options"]}],checked:[{type:t.Input,args:["checked"]}],checkedChange:[{type:t.Output}]};var i=function r(){};i.decorators=[{type:t.NgModule,args:[{imports:[e.CommonModule],providers:[],declarations:[o],exports:[o]}]}],i.ctorParameters=function(){return[]},n.SimpleIconToggleModule=i,n.ɵa=o,Object.defineProperty(n,"__esModule",{value:!0})});
//# sourceMappingURL=simple-icon-toggle.umd.min.js.map