├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── example
├── dist
│ ├── bundle.js
│ ├── bundle.js.map
│ ├── polyfills.js
│ ├── polyfills.js.map
│ ├── vendor.js
│ └── vendor.js.map
├── main.ts
├── polyfills.ts
├── src
│ ├── app.component.ts
│ ├── app.html
│ └── app.module.ts
└── vendor.ts
├── index.html
├── logo.png
├── package.json
├── src
├── index.ts
└── ui-switch.component.ts
├── tsconfig.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | dist/
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | example/
3 | node_modules/
4 | .gitignore
5 | index.html
6 | tsconfig.json
7 | webpack.config.js
8 | logo.png
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 YangYang Yu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Description
2 |
3 | This is a simple iOS 7 style switch component for Angular2.
4 |
5 | 
6 |
7 | Inspired by [switchery](https://github.com/abpetkov/switchery) - in angular2.
8 |
9 | # Installation
10 |
11 | ```bash
12 | npm install angular2-ui-switch --save
13 | ```
14 |
15 | # Usage
16 |
17 | ```javascript
18 | import { UiSwitchModule } from 'angular2-ui-switch'
19 | import { AppComponent } from './app.component';
20 |
21 | @NgModule({
22 | imports: [BrowserModule, FormsModule, UiSwitchModule],
23 | declarations: [AppComponent],
24 | bootstrap: [AppComponent]
25 | })
26 | export class AppModule {
27 | }
28 | ```
29 |
30 | ```html
31 |
32 | ```
33 |
34 | # Two way binding
35 |
36 | ```html
37 |
38 | ```
39 |
40 | # Params
41 |
42 | ### checked
43 |
44 | > type: *boolean*
45 |
46 | > default: false
47 |
48 | ```html
49 |
50 |
51 | ```
52 |
53 | ### disabled
54 |
55 | > type: *boolean*
56 |
57 | > default: false
58 |
59 | ```html
60 |
61 |
62 | ```
63 |
64 | ### change
65 |
66 | > type: *event*
67 |
68 | > default: noop
69 |
70 | ```html
71 |
72 | ```
73 |
74 | ### size
75 |
76 | > type: *string*
77 |
78 | > default: medium
79 |
80 | ```html
81 |
82 |
83 | ```
84 |
85 | ### reverse
86 |
87 | > type: *boolean*
88 |
89 | > default: false
90 |
91 | ```html
92 |
93 | ```
94 |
95 | ### color
96 |
97 | > type: *string*
98 |
99 | > default: rgb(100, 189, 99)
100 |
101 | ```html
102 |
103 | ```
104 |
105 | ### switchColor
106 |
107 | > type: *string*
108 |
109 | > default: #fff
110 |
111 |
112 | ```html
113 |
114 | ```
115 |
116 | # License
117 | MIT
118 |
--------------------------------------------------------------------------------
/example/dist/bundle.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([0],{0:function(e,t,n){"use strict";var i=n(1),o=n(23);i.platformBrowserDynamic().bootstrapModule(o.AppModule)},23:function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,c=arguments.length,s=c<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(c<3?o(s):c>3?o(t,n,s):o(t,n))||s);return c>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=n(3),s=n(21),r=n(24),l=n(28),h=n(30),a=function(){function e(){}return e=i([c.NgModule({imports:[s.BrowserModule,r.FormsModule,l.UiSwitchModule],declarations:[h.AppComponent],bootstrap:[h.AppComponent]}),o("design:paramtypes",[])],e)}();t.AppModule=a},28:function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,c=arguments.length,s=c<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(c<3?o(s):c>3?o(t,n,s):o(t,n))||s);return c>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=n(3),s=n(29),r=function(){function e(){}return e=i([c.NgModule({declarations:[s.UiSwitchComponent],exports:[s.UiSwitchComponent]}),o("design:paramtypes",[])],e)}();t.UiSwitchModule=r},29:function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,c=arguments.length,s=c<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(c<3?o(s):c>3?o(t,n,s):o(t,n))||s);return c>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=n(3),s=n(24),r={provide:s.NG_VALUE_ACCESSOR,useExisting:c.forwardRef(function(){return l}),multi:!0},l=function(){function e(){this.onTouchedCallback=function(e){},this.onChangeCallback=function(e){},this.size="medium",this.change=new c.EventEmitter,this.color="rgb(100, 189, 99)",this.switchOffColor="",this.switchColor="#fff",this.defaultBgColor="#fff",this.defaultBoColor="#dfdfdf"}return Object.defineProperty(e.prototype,"checked",{get:function(){return this._checked},set:function(e){this._checked=e!==!1},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled},set:function(e){this._disabled=e!==!1},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"reverse",{get:function(){return this._reverse},set:function(e){this._reverse=e!==!1},enumerable:!0,configurable:!0}),e.prototype.getColor=function(e){return"borderColor"===e?this.defaultBoColor:"switchColor"===e?this.reverse?this.checked?this.switchOffColor||this.switchColor:this.switchColor:this.checked?this.switchColor:this.switchOffColor||this.switchColor:this.reverse?this.checked?this.defaultBgColor:this.color:this.checked?this.color:this.defaultBgColor},e.prototype.onToggle=function(){this.disabled||(this.checked=!this.checked,this.change.emit(this.checked),this.onChangeCallback(this.checked),this.onTouchedCallback(this.checked))},e.prototype.writeValue=function(e){e!==this.checked&&(this.checked=!!e)},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},i([c.Input(),o("design:type",Boolean),o("design:paramtypes",[Boolean])],e.prototype,"checked",null),i([c.Input(),o("design:type",Boolean),o("design:paramtypes",[Boolean])],e.prototype,"disabled",null),i([c.Input(),o("design:type",Boolean),o("design:paramtypes",[Boolean])],e.prototype,"reverse",null),i([c.Input(),o("design:type",String)],e.prototype,"size",void 0),i([c.Output(),o("design:type",Object)],e.prototype,"change",void 0),i([c.Input(),o("design:type",String)],e.prototype,"color",void 0),i([c.Input(),o("design:type",String)],e.prototype,"switchOffColor",void 0),i([c.Input(),o("design:type",String)],e.prototype,"switchColor",void 0),i([c.HostListener("click"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onToggle",null),e=i([c.Component({selector:"ui-switch",template:'\n \n \n \n \n ',styles:["\n .switch {\n background: #f00;\n border: 1px solid #dfdfdf;\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n overflow: visible;\n padding: 0;\n margin: 0; \n cursor: pointer;\n box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;\n transition: 0.3s ease-out all;\n -webkit-transition: 0.3s ease-out all;\n } \n\n small {\n border-radius: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); \n position: absolute;\n top: 0;\n left: 0;\n transition: 0.3s ease-out all;\n -webkit-transition: 0.3s ease-out all;\n }\n\n .switch-large {\n width: 66px;\n height: 40px;\n border-radius: 40px;\n }\n\n .switch-large small {\n width: 40px;\n height: 40px;\n }\n\n .switch-medium {\n width: 50px;\n height: 30px;\n border-radius: 30px;\n }\n\n .switch-medium small {\n width: 30px;\n height: 30px;\n }\n\n .switch-small {\n width: 33px;\n height: 20px;\n border-radius: 20px;\n }\n\n .switch-small small {\n width: 20px;\n height: 20px;\n }\n\n .checked {\n background: rgb(100, 189, 99);\n border-color: rgb(100, 189, 99);\n }\n\n .switch-large.checked small {\n left: 26px;\n }\n\n .switch-medium.checked small {\n left: 20px;\n }\n\n .switch-small.checked small {\n left: 13px;\n }\n\n .disabled {\n opacity: .50;\n cursor: not-allowed;\n }\n "],providers:[r]}),o("design:paramtypes",[])],e)}();t.UiSwitchComponent=l},30:function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,c=arguments.length,s=c<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(c<3?o(s):c>3?o(t,n,s):o(t,n))||s);return c>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=n(3),s=function(){function e(){this.enable=!0,this.count=0}return e.prototype.ngOnInit=function(){},e.prototype.onSubmit=function(){},e.prototype.onChange=function(){this.count++},e=i([c.Component({selector:"app",template:n(31)}),o("design:paramtypes",[])],e)}();t.AppComponent=s},31:function(e,t){e.exports='checked
\n\n \n \n
\n\ndisabled
\n\n \n \n
\n\ntwo way binding
\n\n {{enable}}\n
\n\nchange
\n\n change count {{count}}\n
\n\nsize
\n\n \n \n \n
\n\nreverse
\n\n \n
\n\ncolor
\n\n \n \n \n
\n\nswitchColor
\n\n \n \n
'}});
2 | //# sourceMappingURL=bundle.js.map
--------------------------------------------------------------------------------
/example/dist/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///bundle.js","webpack:///./example/main.ts","webpack:///./example/src/app.module.ts","webpack:///./src/index.ts","webpack:///./src/ui-switch.component.ts","webpack:///./example/src/app.component.ts","webpack:///./example/src/app.html"],"names":["webpackJsonp","0","module","exports","__webpack_require__","platform_browser_dynamic_1","app_module_1","platformBrowserDynamic","bootstrapModule","AppModule","23","__decorate","this","decorators","target","key","desc","d","c","arguments","length","r","Object","getOwnPropertyDescriptor","Reflect","decorate","i","defineProperty","__metadata","k","v","metadata","core_1","platform_browser_1","forms_1","src_1","app_component_1","NgModule","imports","BrowserModule","FormsModule","UiSwitchModule","declarations","AppComponent","bootstrap","28","ui_switch_component_1","UiSwitchComponent","29","UI_SWITCH_CONTROL_VALUE_ACCESSOR","provide","NG_VALUE_ACCESSOR","useExisting","forwardRef","multi","onTouchedCallback","onChangeCallback","size","change","EventEmitter","color","switchOffColor","switchColor","defaultBgColor","defaultBoColor","prototype","get","_checked","set","enumerable","configurable","_disabled","_reverse","getColor","flag","reverse","checked","onToggle","disabled","emit","writeValue","obj","registerOnChange","fn","registerOnTouched","Input","Boolean","String","Output","HostListener","Function","Component","selector","template","styles","providers","30","enable","count","ngOnInit","onSubmit","onChange","31"],"mappings":"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","file":"bundle.js","sourcesContent":["webpackJsonp([0],{\n\n/***/ 0:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar platform_browser_dynamic_1 = __webpack_require__(1);\n\tvar app_module_1 = __webpack_require__(23);\n\tplatform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);\n\n\n/***/ },\n\n/***/ 23:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n\t var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n\t if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n\t else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n\t return c > 3 && r && Object.defineProperty(target, key, r), r;\n\t};\n\tvar __metadata = (this && this.__metadata) || function (k, v) {\n\t if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n\t};\n\tvar core_1 = __webpack_require__(3);\n\tvar platform_browser_1 = __webpack_require__(21);\n\tvar forms_1 = __webpack_require__(24);\n\tvar src_1 = __webpack_require__(28);\n\tvar app_component_1 = __webpack_require__(30);\n\tvar AppModule = (function () {\n\t function AppModule() {\n\t }\n\t AppModule = __decorate([\n\t core_1.NgModule({\n\t imports: [platform_browser_1.BrowserModule, forms_1.FormsModule, src_1.UiSwitchModule],\n\t declarations: [app_component_1.AppComponent],\n\t bootstrap: [app_component_1.AppComponent]\n\t }), \n\t __metadata('design:paramtypes', [])\n\t ], AppModule);\n\t return AppModule;\n\t}());\n\texports.AppModule = AppModule;\n\n\n/***/ },\n\n/***/ 28:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n\t var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n\t if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n\t else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n\t return c > 3 && r && Object.defineProperty(target, key, r), r;\n\t};\n\tvar __metadata = (this && this.__metadata) || function (k, v) {\n\t if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n\t};\n\tvar core_1 = __webpack_require__(3);\n\tvar ui_switch_component_1 = __webpack_require__(29);\n\tvar UiSwitchModule = (function () {\n\t function UiSwitchModule() {\n\t }\n\t UiSwitchModule = __decorate([\n\t core_1.NgModule({\n\t declarations: [ui_switch_component_1.UiSwitchComponent],\n\t exports: [ui_switch_component_1.UiSwitchComponent]\n\t }), \n\t __metadata('design:paramtypes', [])\n\t ], UiSwitchModule);\n\t return UiSwitchModule;\n\t}());\n\texports.UiSwitchModule = UiSwitchModule;\n\n\n/***/ },\n\n/***/ 29:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n\t var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n\t if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n\t else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n\t return c > 3 && r && Object.defineProperty(target, key, r), r;\n\t};\n\tvar __metadata = (this && this.__metadata) || function (k, v) {\n\t if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n\t};\n\tvar core_1 = __webpack_require__(3);\n\tvar forms_1 = __webpack_require__(24);\n\tvar UI_SWITCH_CONTROL_VALUE_ACCESSOR = {\n\t provide: forms_1.NG_VALUE_ACCESSOR,\n\t useExisting: core_1.forwardRef(function () { return UiSwitchComponent; }),\n\t multi: true\n\t};\n\tvar UiSwitchComponent = (function () {\n\t function UiSwitchComponent() {\n\t this.onTouchedCallback = function (v) {\n\t };\n\t this.onChangeCallback = function (v) {\n\t };\n\t this.size = 'medium';\n\t this.change = new core_1.EventEmitter();\n\t this.color = 'rgb(100, 189, 99)';\n\t this.switchOffColor = '';\n\t this.switchColor = '#fff';\n\t this.defaultBgColor = '#fff';\n\t this.defaultBoColor = '#dfdfdf';\n\t }\n\t Object.defineProperty(UiSwitchComponent.prototype, \"checked\", {\n\t get: function () {\n\t return this._checked;\n\t },\n\t set: function (v) {\n\t this._checked = v !== false;\n\t },\n\t enumerable: true,\n\t configurable: true\n\t });\n\t Object.defineProperty(UiSwitchComponent.prototype, \"disabled\", {\n\t get: function () {\n\t return this._disabled;\n\t },\n\t set: function (v) {\n\t this._disabled = v !== false;\n\t },\n\t enumerable: true,\n\t configurable: true\n\t });\n\t ;\n\t Object.defineProperty(UiSwitchComponent.prototype, \"reverse\", {\n\t get: function () {\n\t return this._reverse;\n\t },\n\t set: function (v) {\n\t this._reverse = v !== false;\n\t },\n\t enumerable: true,\n\t configurable: true\n\t });\n\t ;\n\t UiSwitchComponent.prototype.getColor = function (flag) {\n\t if (flag === 'borderColor')\n\t return this.defaultBoColor;\n\t if (flag === 'switchColor') {\n\t if (this.reverse)\n\t return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;\n\t return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;\n\t }\n\t if (this.reverse)\n\t return !this.checked ? this.color : this.defaultBgColor;\n\t return this.checked ? this.color : this.defaultBgColor;\n\t };\n\t UiSwitchComponent.prototype.onToggle = function () {\n\t if (this.disabled)\n\t return;\n\t this.checked = !this.checked;\n\t this.change.emit(this.checked);\n\t this.onChangeCallback(this.checked);\n\t this.onTouchedCallback(this.checked);\n\t };\n\t UiSwitchComponent.prototype.writeValue = function (obj) {\n\t if (obj !== this.checked) {\n\t this.checked = !!obj;\n\t }\n\t };\n\t UiSwitchComponent.prototype.registerOnChange = function (fn) {\n\t this.onChangeCallback = fn;\n\t };\n\t UiSwitchComponent.prototype.registerOnTouched = function (fn) {\n\t this.onTouchedCallback = fn;\n\t };\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', Boolean), \n\t __metadata('design:paramtypes', [Boolean])\n\t ], UiSwitchComponent.prototype, \"checked\", null);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', Boolean), \n\t __metadata('design:paramtypes', [Boolean])\n\t ], UiSwitchComponent.prototype, \"disabled\", null);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', Boolean), \n\t __metadata('design:paramtypes', [Boolean])\n\t ], UiSwitchComponent.prototype, \"reverse\", null);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', String)\n\t ], UiSwitchComponent.prototype, \"size\", void 0);\n\t __decorate([\n\t core_1.Output(), \n\t __metadata('design:type', Object)\n\t ], UiSwitchComponent.prototype, \"change\", void 0);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', String)\n\t ], UiSwitchComponent.prototype, \"color\", void 0);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', String)\n\t ], UiSwitchComponent.prototype, \"switchOffColor\", void 0);\n\t __decorate([\n\t core_1.Input(), \n\t __metadata('design:type', String)\n\t ], UiSwitchComponent.prototype, \"switchColor\", void 0);\n\t __decorate([\n\t core_1.HostListener('click'), \n\t __metadata('design:type', Function), \n\t __metadata('design:paramtypes', []), \n\t __metadata('design:returntype', void 0)\n\t ], UiSwitchComponent.prototype, \"onToggle\", null);\n\t UiSwitchComponent = __decorate([\n\t core_1.Component({\n\t selector: 'ui-switch',\n\t template: \"\\n \\n \\n \\n \\n \",\n\t styles: [\"\\n .switch {\\n background: #f00;\\n border: 1px solid #dfdfdf;\\n position: relative;\\n display: inline-block;\\n box-sizing: content-box;\\n overflow: visible;\\n padding: 0;\\n margin: 0; \\n cursor: pointer;\\n box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;\\n transition: 0.3s ease-out all;\\n -webkit-transition: 0.3s ease-out all;\\n } \\n\\n small {\\n border-radius: 100%;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); \\n position: absolute;\\n top: 0;\\n left: 0;\\n transition: 0.3s ease-out all;\\n -webkit-transition: 0.3s ease-out all;\\n }\\n\\n .switch-large {\\n width: 66px;\\n height: 40px;\\n border-radius: 40px;\\n }\\n\\n .switch-large small {\\n width: 40px;\\n height: 40px;\\n }\\n\\n .switch-medium {\\n width: 50px;\\n height: 30px;\\n border-radius: 30px;\\n }\\n\\n .switch-medium small {\\n width: 30px;\\n height: 30px;\\n }\\n\\n .switch-small {\\n width: 33px;\\n height: 20px;\\n border-radius: 20px;\\n }\\n\\n .switch-small small {\\n width: 20px;\\n height: 20px;\\n }\\n\\n .checked {\\n background: rgb(100, 189, 99);\\n border-color: rgb(100, 189, 99);\\n }\\n\\n .switch-large.checked small {\\n left: 26px;\\n }\\n\\n .switch-medium.checked small {\\n left: 20px;\\n }\\n\\n .switch-small.checked small {\\n left: 13px;\\n }\\n\\n .disabled {\\n opacity: .50;\\n cursor: not-allowed;\\n }\\n \"],\n\t providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR]\n\t }), \n\t __metadata('design:paramtypes', [])\n\t ], UiSwitchComponent);\n\t return UiSwitchComponent;\n\t}());\n\texports.UiSwitchComponent = UiSwitchComponent;\n\n\n/***/ },\n\n/***/ 30:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n\t var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n\t if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n\t else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n\t return c > 3 && r && Object.defineProperty(target, key, r), r;\n\t};\n\tvar __metadata = (this && this.__metadata) || function (k, v) {\n\t if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);\n\t};\n\tvar core_1 = __webpack_require__(3);\n\tvar AppComponent = (function () {\n\t function AppComponent() {\n\t this.enable = true;\n\t this.count = 0;\n\t }\n\t AppComponent.prototype.ngOnInit = function () {\n\t };\n\t AppComponent.prototype.onSubmit = function () {\n\t };\n\t AppComponent.prototype.onChange = function () {\n\t this.count++;\n\t };\n\t AppComponent = __decorate([\n\t core_1.Component({\n\t selector: 'app',\n\t template: __webpack_require__(31)\n\t }), \n\t __metadata('design:paramtypes', [])\n\t ], AppComponent);\n\t return AppComponent;\n\t}());\n\texports.AppComponent = AppComponent;\n\n\n/***/ },\n\n/***/ 31:\n/***/ function(module, exports) {\n\n\tmodule.exports = \"checked
\\n\\n \\n \\n
\\n\\ndisabled
\\n\\n \\n \\n
\\n\\ntwo way binding
\\n\\n {{enable}}\\n
\\n\\nchange
\\n\\n change count {{count}}\\n
\\n\\nsize
\\n\\n \\n \\n \\n
\\n\\nreverse
\\n\\n \\n
\\n\\ncolor
\\n\\n \\n \\n \\n
\\n\\nswitchColor
\\n\\n \\n \\n
\"\n\n/***/ }\n\n});\n\n\n/** WEBPACK FOOTER **\n ** bundle.js\n **/","import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './src/app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n\n\n/** WEBPACK FOOTER **\n ** ./example/main.ts\n **/","import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\n\nimport { UiSwitchModule } from '../../src'\nimport { AppComponent } from './app.component';\n\n@NgModule({\n imports: [BrowserModule, FormsModule, UiSwitchModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n\n\n/** WEBPACK FOOTER **\n ** ./example/src/app.module.ts\n **/","import { NgModule } from '@angular/core';\n\nimport { UiSwitchComponent } from './ui-switch.component';\n\n@NgModule({\n declarations: [UiSwitchComponent],\n exports: [UiSwitchComponent]\n})\nexport class UiSwitchModule {\n}\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.ts\n **/","import { Component, Input, Output, EventEmitter, HostListener, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\n\nconst UI_SWITCH_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => UiSwitchComponent),\n multi: true\n};\n\n@Component({\n selector: 'ui-switch',\n template: `\n \n \n \n \n `,\n styles: [`\n .switch {\n background: #f00;\n border: 1px solid #dfdfdf;\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n overflow: visible;\n padding: 0;\n margin: 0; \n cursor: pointer;\n box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;\n transition: 0.3s ease-out all;\n -webkit-transition: 0.3s ease-out all;\n } \n\n small {\n border-radius: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); \n position: absolute;\n top: 0;\n left: 0;\n transition: 0.3s ease-out all;\n -webkit-transition: 0.3s ease-out all;\n }\n\n .switch-large {\n width: 66px;\n height: 40px;\n border-radius: 40px;\n }\n\n .switch-large small {\n width: 40px;\n height: 40px;\n }\n\n .switch-medium {\n width: 50px;\n height: 30px;\n border-radius: 30px;\n }\n\n .switch-medium small {\n width: 30px;\n height: 30px;\n }\n\n .switch-small {\n width: 33px;\n height: 20px;\n border-radius: 20px;\n }\n\n .switch-small small {\n width: 20px;\n height: 20px;\n }\n\n .checked {\n background: rgb(100, 189, 99);\n border-color: rgb(100, 189, 99);\n }\n\n .switch-large.checked small {\n left: 26px;\n }\n\n .switch-medium.checked small {\n left: 20px;\n }\n\n .switch-small.checked small {\n left: 13px;\n }\n\n .disabled {\n opacity: .50;\n cursor: not-allowed;\n }\n `],\n providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR]\n})\nexport class UiSwitchComponent implements ControlValueAccessor {\n private onTouchedCallback = (v: any) => {\n };\n private onChangeCallback = (v: any) => {\n };\n\n private _checked: boolean;\n private _disabled: boolean;\n private _reverse: boolean;\n\n @Input() set checked(v: boolean) {\n this._checked = v !== false;\n }\n\n get checked() {\n return this._checked;\n }\n\n @Input() set disabled(v: boolean) {\n this._disabled = v !== false;\n };\n\n get disabled() {\n return this._disabled;\n }\n\n @Input() set reverse(v: boolean) {\n this._reverse = v !== false;\n };\n\n get reverse() {\n return this._reverse;\n }\n\n @Input() size: string = 'medium';\n @Output() change = new EventEmitter();\n @Input() color: string = 'rgb(100, 189, 99)';\n @Input() switchOffColor: string = '';\n @Input() switchColor: string = '#fff';\n defaultBgColor: string = '#fff';\n defaultBoColor: string = '#dfdfdf';\n\n getColor(flag) {\n if (flag === 'borderColor') return this.defaultBoColor;\n if (flag === 'switchColor') {\n if (this.reverse) return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;\n return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;\n }\n if (this.reverse) return !this.checked ? this.color : this.defaultBgColor;\n return this.checked ? this.color : this.defaultBgColor;\n }\n\n @HostListener('click')\n onToggle() {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.change.emit(this.checked);\n this.onChangeCallback(this.checked);\n this.onTouchedCallback(this.checked);\n }\n\n writeValue(obj: any): void {\n if (obj !== this.checked) {\n this.checked = !!obj;\n }\n }\n\n registerOnChange(fn: any) {\n this.onChangeCallback = fn;\n }\n\n registerOnTouched(fn: any) {\n this.onTouchedCallback = fn;\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/ui-switch.component.ts\n **/","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app',\n template: require('./app.html')\n})\nexport class AppComponent implements OnInit {\n enable: boolean = true;\n count: number = 0;\n\n constructor() {\n }\n\n ngOnInit() {\n\n }\n\n onSubmit() {\n }\n\n onChange() {\n this.count++;\n }\n}\n\n\n/** WEBPACK FOOTER **\n ** ./example/src/app.component.ts\n **/","module.exports = \"checked
\\n\\n \\n \\n
\\n\\ndisabled
\\n\\n \\n \\n
\\n\\ntwo way binding
\\n\\n {{enable}}\\n
\\n\\nchange
\\n\\n change count {{count}}\\n
\\n\\nsize
\\n\\n \\n \\n \\n
\\n\\nreverse
\\n\\n \\n
\\n\\ncolor
\\n\\n \\n \\n \\n
\\n\\nswitchColor
\\n\\n \\n \\n
\"\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./example/src/app.html\n ** module id = 31\n ** module chunks = 0\n **/"],"sourceRoot":""}
--------------------------------------------------------------------------------
/example/dist/polyfills.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(i,a){for(var u,c,s=0,l=[];s0)return!0;var o=U.get(t);return o["delete"](n),o.size>0||(U["delete"](t),!0)}function p(e,t){for(var n=e.length-1;n>=0;--n){var r=e[n],o=r(t);if(!b(o)){if(!O(o))throw new TypeError;t=o}}return t}function h(e,t,n,r){for(var o=e.length-1;o>=0;--o){var i=e[o],a=i(t,n,r);if(!b(a)){if(!D(a))throw new TypeError;r=a}}return r}function d(e,t,n){for(var r=e.length-1;r>=0;--r){var o=e[r];o(t,n)}}function y(e,t,n){var r=U.get(e);if(!r){if(!n)return;r=new N,U.set(e,r)}var o=r.get(t);if(!o){if(!n)return;o=new N,r.set(t,o)}return o}function v(e,t,n){var r=g(e,t,n);if(r)return!0;var o=P(t);return null!==o&&v(e,o,n)}function g(e,t,n){var r=y(t,n,!1);return void 0!==r&&Boolean(r.has(e))}function k(e,t,n){var r=g(e,t,n);if(r)return w(e,t,n);var o=P(t);return null!==o?k(e,o,n):void 0}function w(e,t,n){var r=y(t,n,!1);return void 0===r?void 0:r.get(e)}function _(e,t,n,r){var o=y(n,r,!0);o.set(e,t)}function m(e,t){var n=T(e,t),r=P(e);if(null===r)return n;var o=m(r,t);if(o.length<=0)return n;if(n.length<=0)return o;for(var i=new K,a=0;a=0},t.prototype.get=function(e){var t=this._find(e,!1);return t>=0?this._values[t]:void 0},t.prototype.set=function(e,t){var n=this._find(e,!0);return this._values[n]=t,this},t.prototype["delete"]=function(t){var n=this._find(t,!1);if(n>=0){for(var r=this._keys.length,o=n+1;o=0;n--)"function"==typeof e[n]&&(e[n]=Zone.current.wrap(e[n],t+"_"+n));return e}function r(e,t){for(var r=e.constructor.name,o=function(o){var i=t[o],a=e[i];a&&(e[i]=function(e){return function(){return e.apply(this,n(arguments,r+"."+i))}}(a))},i=0;i1?new t(e,n):new t(e),a=Object.getOwnPropertyDescriptor(o,"onmessage");return a&&a.configurable===!1?(r=Object.create(o),["addEventListener","removeEventListener","send","close"].forEach(function(e){r[e]=function(){return o[e].apply(o,arguments)}})):r=o,i(r,["close","error","message","open"]),r};for(var n in t)e.WebSocket[n]=t[n]}function T(e){if(!Z){var t="undefined"!=typeof WebSocket;b()?(M&&i(HTMLElement.prototype,N),i(XMLHttpRequest.prototype,null),"undefined"!=typeof IDBIndex&&(i(IDBIndex.prototype,null),i(IDBRequest.prototype,null),i(IDBOpenDBRequest.prototype,null),i(IDBDatabase.prototype,null),i(IDBTransaction.prototype,null),i(IDBCursor.prototype,null)),t&&i(WebSocket.prototype,null)):(E(),f("XMLHttpRequest"),t&&m(e))}}function b(){if(M&&!Object.getOwnPropertyDescriptor(HTMLElement.prototype,"onclick")&&"undefined"!=typeof Element){var e=Object.getOwnPropertyDescriptor(Element.prototype,"onclick");if(e&&!e.configurable)return!1}Object.defineProperty(XMLHttpRequest.prototype,"onreadystatechange",{get:function(){return!0}});var t=new XMLHttpRequest,n=!!t.onreadystatechange;return Object.defineProperty(XMLHttpRequest.prototype,"onreadystatechange",{}),n}function E(){for(var e=function(e){var t=N[e],n="on"+t;document.addEventListener(t,function(e){var t,r,o=e.target;for(r=o?o.constructor.name+"."+n:"unknown."+n;o;)o[n]&&!o[n][K]&&(t=Zone.current.wrap(o[n],r),t[K]=o[n],o[n]=t),o=o.parentElement},!0)},t=0;t",this._properties=t&&t.properties||{},this._zoneDelegate=new y(this,this._parent&&this._parent._zoneDelegate,t)}return n.assertZonePatched=function(){if(e.Promise!==I)throw new Error("Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)")},Object.defineProperty(n,"current",{get:function(){return _},enumerable:!0,configurable:!0}),Object.defineProperty(n,"currentTask",{get:function(){return m},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"parent",{get:function(){return this._parent},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"name",{get:function(){return this._name},enumerable:!0,configurable:!0}),n.prototype.get=function(e){var t=this.getZoneWith(e);if(t)return t._properties[e]},n.prototype.getZoneWith=function(e){for(var t=this;t;){if(t._properties.hasOwnProperty(e))return t;t=t._parent}return null},n.prototype.fork=function(e){if(!e)throw new Error("ZoneSpec required!");return this._zoneDelegate.fork(this,e)},n.prototype.wrap=function(e,t){if("function"!=typeof e)throw new Error("Expecting function got: "+e);var n=this._zoneDelegate.intercept(this,e,t),r=this;return function(){return r.runGuarded(n,this,arguments,t)}},n.prototype.run=function(e,t,n,r){void 0===t&&(t=null),void 0===n&&(n=null),void 0===r&&(r=null);var o=_;_=this;try{return this._zoneDelegate.invoke(this,e,t,n,r)}finally{_=o}},n.prototype.runGuarded=function(e,t,n,r){void 0===t&&(t=null),void 0===n&&(n=null),void 0===r&&(r=null);var o=_;_=this;try{try{return this._zoneDelegate.invoke(this,e,t,n,r)}catch(i){if(this._zoneDelegate.handleError(this,i))throw i}}finally{_=o}},n.prototype.runTask=function(e,t,n){if(e.runCount++,e.zone!=this)throw new Error("A task can only be run in the zone which created it! (Creation: "+e.zone.name+"; Execution: "+this.name+")");var r=m;m=e;var o=_;_=this;try{"macroTask"==e.type&&e.data&&!e.data.isPeriodic&&(e.cancelFn=null);try{return this._zoneDelegate.invokeTask(this,e,t,n)}catch(i){if(this._zoneDelegate.handleError(this,i))throw i}}finally{_=o,m=r}},n.prototype.scheduleMicroTask=function(e,t,n,r){return this._zoneDelegate.scheduleTask(this,new v("microTask",this,e,t,n,r,null))},n.prototype.scheduleMacroTask=function(e,t,n,r,o){return this._zoneDelegate.scheduleTask(this,new v("macroTask",this,e,t,n,r,o))},n.prototype.scheduleEventTask=function(e,t,n,r,o){return this._zoneDelegate.scheduleTask(this,new v("eventTask",this,e,t,n,r,o))},n.prototype.cancelTask=function(e){var t=this._zoneDelegate.cancelTask(this,e);return e.runCount=-1,e.cancelFn=null,t},n.__symbol__=t,n}(),y=function(){function e(e,t,n){this._taskCounts={microTask:0,macroTask:0,eventTask:0},this.zone=e,this._parentDelegate=t,this._forkZS=n&&(n&&n.onFork?n:t._forkZS),this._forkDlgt=n&&(n.onFork?t:t._forkDlgt),this._interceptZS=n&&(n.onIntercept?n:t._interceptZS),this._interceptDlgt=n&&(n.onIntercept?t:t._interceptDlgt),this._invokeZS=n&&(n.onInvoke?n:t._invokeZS),this._invokeDlgt=n&&(n.onInvoke?t:t._invokeDlgt),this._handleErrorZS=n&&(n.onHandleError?n:t._handleErrorZS),this._handleErrorDlgt=n&&(n.onHandleError?t:t._handleErrorDlgt),this._scheduleTaskZS=n&&(n.onScheduleTask?n:t._scheduleTaskZS),this._scheduleTaskDlgt=n&&(n.onScheduleTask?t:t._scheduleTaskDlgt),this._invokeTaskZS=n&&(n.onInvokeTask?n:t._invokeTaskZS),this._invokeTaskDlgt=n&&(n.onInvokeTask?t:t._invokeTaskDlgt),this._cancelTaskZS=n&&(n.onCancelTask?n:t._cancelTaskZS),this._cancelTaskDlgt=n&&(n.onCancelTask?t:t._cancelTaskDlgt),this._hasTaskZS=n&&(n.onHasTask?n:t._hasTaskZS),this._hasTaskDlgt=n&&(n.onHasTask?t:t._hasTaskDlgt)}return e.prototype.fork=function(e,t){return this._forkZS?this._forkZS.onFork(this._forkDlgt,this.zone,e,t):new d(e,t)},e.prototype.intercept=function(e,t,n){return this._interceptZS?this._interceptZS.onIntercept(this._interceptDlgt,this.zone,e,t,n):t},e.prototype.invoke=function(e,t,n,r,o){return this._invokeZS?this._invokeZS.onInvoke(this._invokeDlgt,this.zone,e,t,n,r,o):t.apply(n,r)},e.prototype.handleError=function(e,t){return!this._handleErrorZS||this._handleErrorZS.onHandleError(this._handleErrorDlgt,this.zone,e,t)},e.prototype.scheduleTask=function(e,t){try{if(this._scheduleTaskZS)return this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt,this.zone,e,t);if(t.scheduleFn)t.scheduleFn(t);else{if("microTask"!=t.type)throw new Error("Task is missing scheduleFn.");r(t)}return t}finally{e==this.zone&&this._updateTaskCount(t.type,1)}},e.prototype.invokeTask=function(e,t,n,r){try{return this._invokeTaskZS?this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt,this.zone,e,t,n,r):t.callback.apply(n,r)}finally{e!=this.zone||"eventTask"==t.type||t.data&&t.data.isPeriodic||this._updateTaskCount(t.type,-1)}},e.prototype.cancelTask=function(e,t){var n;if(this._cancelTaskZS)n=this._cancelTaskZS.onCancelTask(this._cancelTaskDlgt,this.zone,e,t);else{if(!t.cancelFn)throw new Error("Task does not support cancellation, or is already canceled.");n=t.cancelFn(t)}return e==this.zone&&this._updateTaskCount(t.type,-1),n},e.prototype.hasTask=function(e,t){return this._hasTaskZS&&this._hasTaskZS.onHasTask(this._hasTaskDlgt,this.zone,e,t)},e.prototype._updateTaskCount=function(e,t){var n=this._taskCounts,r=n[e],o=n[e]=r+t;if(o<0)throw new Error("More tasks executed then were scheduled.");if(0==r||0==o){var i={microTask:n.microTask>0,macroTask:n.macroTask>0,eventTask:n.eventTask>0,change:e};try{this.hasTask(this.zone,i)}finally{this._parentDelegate&&this._parentDelegate._updateTaskCount(e,t)}}},e}(),v=function(){function e(e,t,n,r,o,a,u){this.runCount=0,this.type=e,this.zone=t,this.source=n,this.data=o,this.scheduleFn=a,this.cancelFn=u,this.callback=r;var c=this;this.invoke=function(){D++;try{return t.runTask(c,this,arguments)}finally{1==D&&i(),D--}}}return e.prototype.toString=function(){return this.data&&"undefined"!=typeof this.data.handleId?this.data.handleId:this.toString()},e}(),g=t("setTimeout"),k=t("Promise"),w=t("then"),_=new d(null,null),m=null,T=[],b=!1,E=[],D=0,O=t("state"),S=t("value"),j="Promise.then",P=null,Z=!0,M=!1,z=0,I=function(){function e(t){var n=this;if(!(n instanceof e))throw new Error("Must be an instanceof Promise.");n[O]=P,n[S]=[];try{t&&t(s(n,Z),s(n,M))}catch(r){l(n,!1,r)}}return e.resolve=function(e){return l(new this(null),Z,e)},e.reject=function(e){return l(new this(null),M,e)},e.race=function(e){function t(e){i&&(i=r(e))}function n(e){i&&(i=o(e))}for(var r,o,i=new this(function(e,t){r=e,o=t}),u=0,c=e;u1)for(var n=1;nchecked
2 |
3 |
4 |
5 |
6 |
7 | disabled
8 |
9 |
10 |
11 |
12 |
13 | two way binding
14 |
15 | {{enable}}
16 |
17 |
18 | change
19 |
20 | change count {{count}}
21 |
22 |
23 | size
24 |
25 |
26 |
27 |
28 |
29 |
30 | reverse
31 |
32 |
33 |
34 |
35 | color
36 |
37 |
38 |
39 |
40 |
41 |
42 | switchColor
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/example/src/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { UiSwitchModule } from '../../src'
6 | import { AppComponent } from './app.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule, FormsModule, UiSwitchModule],
10 | declarations: [AppComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule {
14 | }
--------------------------------------------------------------------------------
/example/vendor.ts:
--------------------------------------------------------------------------------
1 | import '@angular/platform-browser';
2 | import '@angular/platform-browser-dynamic';
3 | import '@angular/core';
4 | import '@angular/compiler';
5 | import '@angular/common';
6 | import '@angular/http';
7 | import '@angular/forms';
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular2 Ui Switch
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuyang041060120/angular2-ui-switch/f7ad0b4dff1cc842089f9241e553e92d147b3574/logo.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-ui-switch",
3 | "version": "1.2.0",
4 | "description": "switch button for angular2",
5 | "main": "dist/index.js",
6 | "typings": "dist/index.d.ts",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1",
9 | "dev": "webpack-dev-server --port 4000 --config webpack.config.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base",
10 | "example": "webpack --config webpack.config.js --inline --progress --profile --colors --display-error-details --display-cached --content-base",
11 | "tsc": "tsc --rootDir src --outDir dist --declaration",
12 | "prebuild": "rimraf dist",
13 | "build": "npm run tsc",
14 | "prepublish": "npm run build"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/yuyang041060120/angular2-ui-switch.git"
19 | },
20 | "author": "yuyangyang",
21 | "license": "MIT",
22 | "keywords": [
23 | "angular2",
24 | "uiswitch",
25 | "switch",
26 | "ui"
27 | ],
28 | "dependencies": {},
29 | "devDependencies": {
30 | "@angular/common": "2.0.0",
31 | "@angular/compiler": "2.0.0",
32 | "@angular/core": "2.0.0",
33 | "@angular/forms": "2.0.0",
34 | "@angular/http": "2.0.0",
35 | "@angular/platform-browser": "2.0.0",
36 | "@angular/platform-browser-dynamic": "2.0.0",
37 | "@types/jasmine": "^2.2.29",
38 | "@types/node": "^4.0.29",
39 | "glob": "^7.1.0",
40 | "raw-loader": "^0.5.1",
41 | "reflect-metadata": "^0.1.3",
42 | "rimraf": "^2.5.4",
43 | "rxjs": "5.0.0-beta.12",
44 | "ts-loader": "^0.8.2",
45 | "typescript": "^2.0.0-beta",
46 | "webpack": "^1.13.1",
47 | "webpack-dev-server": "^1.14.1",
48 | "zone.js": "^0.6.12"
49 | },
50 | "bugs": {
51 | "url": "https://github.com/yuyang041060120/angular2-ui-switch/issues"
52 | },
53 | "homepage": "https://github.com/yuyang041060120/angular2-ui-switch#readme"
54 | }
55 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { UiSwitchComponent } from './ui-switch.component';
4 |
5 | @NgModule({
6 | declarations: [UiSwitchComponent],
7 | exports: [UiSwitchComponent]
8 | })
9 | export class UiSwitchModule {
10 | }
--------------------------------------------------------------------------------
/src/ui-switch.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter, HostListener, forwardRef } from '@angular/core';
2 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
3 |
4 | const UI_SWITCH_CONTROL_VALUE_ACCESSOR: any = {
5 | provide: NG_VALUE_ACCESSOR,
6 | useExisting: forwardRef(() => UiSwitchComponent),
7 | multi: true
8 | };
9 |
10 | @Component({
11 | selector: 'ui-switch',
12 | template: `
13 |
22 |
23 |
24 |
25 | `,
26 | styles: [`
27 | .switch {
28 | background: #f00;
29 | border: 1px solid #dfdfdf;
30 | position: relative;
31 | display: inline-block;
32 | box-sizing: content-box;
33 | overflow: visible;
34 | padding: 0;
35 | margin: 0;
36 | cursor: pointer;
37 | box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
38 | transition: 0.3s ease-out all;
39 | -webkit-transition: 0.3s ease-out all;
40 | }
41 |
42 | small {
43 | border-radius: 100%;
44 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
45 | position: absolute;
46 | top: 0;
47 | left: 0;
48 | transition: 0.3s ease-out all;
49 | -webkit-transition: 0.3s ease-out all;
50 | }
51 |
52 | .switch-large {
53 | width: 66px;
54 | height: 40px;
55 | border-radius: 40px;
56 | }
57 |
58 | .switch-large small {
59 | width: 40px;
60 | height: 40px;
61 | }
62 |
63 | .switch-medium {
64 | width: 50px;
65 | height: 30px;
66 | border-radius: 30px;
67 | }
68 |
69 | .switch-medium small {
70 | width: 30px;
71 | height: 30px;
72 | }
73 |
74 | .switch-small {
75 | width: 33px;
76 | height: 20px;
77 | border-radius: 20px;
78 | }
79 |
80 | .switch-small small {
81 | width: 20px;
82 | height: 20px;
83 | }
84 |
85 | .checked {
86 | background: rgb(100, 189, 99);
87 | border-color: rgb(100, 189, 99);
88 | }
89 |
90 | .switch-large.checked small {
91 | left: 26px;
92 | }
93 |
94 | .switch-medium.checked small {
95 | left: 20px;
96 | }
97 |
98 | .switch-small.checked small {
99 | left: 13px;
100 | }
101 |
102 | .disabled {
103 | opacity: .50;
104 | cursor: not-allowed;
105 | }
106 | `],
107 | providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR]
108 | })
109 | export class UiSwitchComponent implements ControlValueAccessor {
110 | private onTouchedCallback = (v: any) => {
111 | };
112 | private onChangeCallback = (v: any) => {
113 | };
114 |
115 | private _checked: boolean;
116 | private _disabled: boolean;
117 | private _reverse: boolean;
118 |
119 | @Input() set checked(v: boolean) {
120 | this._checked = v !== false;
121 | }
122 |
123 | get checked() {
124 | return this._checked;
125 | }
126 |
127 | @Input() set disabled(v: boolean) {
128 | this._disabled = v !== false;
129 | };
130 |
131 | get disabled() {
132 | return this._disabled;
133 | }
134 |
135 | @Input() set reverse(v: boolean) {
136 | this._reverse = v !== false;
137 | };
138 |
139 | get reverse() {
140 | return this._reverse;
141 | }
142 |
143 | @Input() size: string = 'medium';
144 | @Output() change = new EventEmitter();
145 | @Input() color: string = 'rgb(100, 189, 99)';
146 | @Input() switchOffColor: string = '';
147 | @Input() switchColor: string = '#fff';
148 | defaultBgColor: string = '#fff';
149 | defaultBoColor: string = '#dfdfdf';
150 |
151 | getColor(flag) {
152 | if (flag === 'borderColor') return this.defaultBoColor;
153 | if (flag === 'switchColor') {
154 | if (this.reverse) return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
155 | return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
156 | }
157 | if (this.reverse) return !this.checked ? this.color : this.defaultBgColor;
158 | return this.checked ? this.color : this.defaultBgColor;
159 | }
160 |
161 | @HostListener('click')
162 | onToggle() {
163 | if (this.disabled) return;
164 | this.checked = !this.checked;
165 | this.change.emit(this.checked);
166 | this.onChangeCallback(this.checked);
167 | this.onTouchedCallback(this.checked);
168 | }
169 |
170 | writeValue(obj: any): void {
171 | if (obj !== this.checked) {
172 | this.checked = !!obj;
173 | }
174 | }
175 |
176 | registerOnChange(fn: any) {
177 | this.onChangeCallback = fn;
178 | }
179 |
180 | registerOnTouched(fn: any) {
181 | this.onTouchedCallback = fn;
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "outDir": "dist",
11 | "rootDir": "src",
12 | "declaration": true,
13 | "lib": [
14 | "es6",
15 | "dom"
16 | ],
17 | "types": [
18 | "node",
19 | "jasmine"
20 | ],
21 | "noImplicitAny": false
22 | },
23 | "include": [
24 | "src/**/*.ts"
25 | ],
26 | "exclude": [
27 | "node_modules",
28 | "example"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
2 | const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
3 |
4 | module.exports = {
5 | entry: {
6 | main: './example/main',
7 | vendor: './example/vendor',
8 | polyfills: './example/polyfills'
9 | },
10 | devtool: 'source-map',
11 | output: {
12 | path: './example/dist',
13 | filename: 'bundle.js',
14 | publicPath: '/angular2-ui-switch/example/dist/'
15 | },
16 | resolve: {
17 | extensions: ['', '.ts', '.js']
18 | },
19 | module: {
20 | loaders: [
21 | {
22 | test: /\.ts$/,
23 | exclude: /\.d\.ts$/,
24 | loader: 'ts'
25 | },
26 | {
27 | test: /\.html$/,
28 | loader: 'raw'
29 | }
30 | ]
31 | },
32 | plugins: [
33 | new UglifyJsPlugin({
34 | compress: {
35 | warnings: false
36 | },
37 | comments: false
38 | }),
39 | new CommonsChunkPlugin({
40 | names: ['vendor', 'polyfills'],
41 | filename: '[name].js'
42 | })
43 | ]
44 | };
--------------------------------------------------------------------------------