feel-ui - npm Package Compare versions

Comparing version 0.2.8 to 0.3.0

feel-ui.d.ts

@@ -0,1 +1,2 @@
+/// <reference path="node_modules/angular2/typings/browser.d.ts" />
 import { ButtonComponent } from "./src/button";
@@ -2,0 +3,0 @@ import { MenuBar } from "./src/menu-bar";

feel-ui.js

@@ -6,5 +6,6 @@ (function (factory) {
     else if (typeof define === 'function' && define.amd) {
-        define(["require", "exports", "./src/button", "./src/menu-bar", "./src/menu-panel", "./src/input", "./src/notification-provider", "./src/table", "./src/slider", "./src/checkbox"], factory);
+        define(["require", "exports", "./src/button", "./src/menu-bar", "./src/menu-panel", "./src/input", "./src/notification-provider", "./src/table", "./src/slider", "./src/checkbox", "./src/toggle-button", "./src/toggle-button-group"], factory);
     }
 })(function (require, exports) {
+    "use strict";
     var button_1 = require("./src/button");
@@ -23,6 +24,10 @@ exports.ButtonComponent = button_1.ButtonComponent;
     var slider_1 = require("./src/slider");
-    exports.Slider = slider_1.Slider;
+    exports.SliderComponent = slider_1.SliderComponent;
     var checkbox_1 = require("./src/checkbox");
-    exports.Checkbox = checkbox_1.Checkbox;
+    exports.CheckboxComponent = checkbox_1.CheckboxComponent;
+    var toggle_button_1 = require("./src/toggle-button");
+    exports.ToggleButtonComponent = toggle_button_1.ToggleButtonComponent;
+    var toggle_button_group_1 = require("./src/toggle-button-group");
+    exports.ToggleButtonGroupComponent = toggle_button_group_1.ToggleButtonGroupComponent;
 });
 //# sourceMappingURL=feel-ui.js.map

feel-ui.ts

@@ -7,7 +7,11 @@ import { ButtonComponent } from "./src/button";
 import { TableComponent } from "./src/table";
-import { Slider } from "./src/slider";
-import { Checkbox } from "./src/checkbox";
+import { SliderComponent } from "./src/slider";
+import { CheckboxComponent } from "./src/checkbox";
+import { ToggleButtonComponent } from "./src/toggle-button";
+import { ToggleButtonGroupComponent } from "./src/toggle-button-group";
 
 export {
    ButtonComponent,
+   ToggleButtonComponent,
+   ToggleButtonGroupComponent,
    MenuBar,
@@ -18,4 +22,4 @@ MenuPanel,
    TableComponent,
-   Slider,
-   Checkbox
+   SliderComponent,
+   CheckboxComponent
 };

package.json

 {
   "name": "feel-ui",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/feel-ui.js",

src/button.d.ts

 export declare class ButtonComponent {
-    type: string;
-    primary: boolean;
     flat: boolean;
     text: string;
 }

src/button.js

@@ -45,3 +45,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 selector: "feel-button",
-                template: "<button [type]=type [ngClass]=\"{ 'btn-flat': flat, 'btn-primary': primary }\" >{{text}}</button>"
+                template: "<button [type]=type [ngClass]=\"{ 'btn-flat': flat, 'btn-raised': !flat, 'btn-primary': primary }\" >{{text}}</button>"
             }), 
@@ -48,0 +48,0 @@ __metadata('design:paramtypes', [])

src/button.ts

@@ -7,3 +7,3 @@ import { Component, Input} from "angular2/core";
     selector: "feel-button",
-    template: `<button [type]=type [ngClass]=\"{ 'btn-flat': flat, 'btn-primary': primary }\" >{{text}}</button>`
+    template: `<button [type]=type [ngClass]=\"{ 'btn-flat': flat, 'btn-raised': !flat, 'btn-primary': primary }\" >{{text}}</button>`
 })
@@ -10,0 +10,0 @@ export class ButtonComponent {

src/checkbox.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,10 +19,11 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
     var common_1 = require("angular2/common");
-    var Checkbox = (function () {
-        function Checkbox() {
+    var CheckboxComponent = (function () {
+        function CheckboxComponent() {
             this.tabIndex = 0;
             this.checkedChange = new core_1.EventEmitter();
         }
-        Checkbox.prototype._onKeyPress = function (event) {
+        CheckboxComponent.prototype._onKeyPress = function (event) {
             if (event.charCode === 13 || event.charCode === 32) {
@@ -29,3 +33,3 @@ this._toggleClicked();
         };
-        Checkbox.prototype._toggleClicked = function () {
+        CheckboxComponent.prototype._toggleClicked = function () {
             if (!this.disabled) {
@@ -37,24 +41,35 @@ this.checked = !this.checked;
         __decorate([
-            core_1.HostBinding("tabindex")
-        ], Checkbox.prototype, "tabIndex", void 0);
+            core_1.HostBinding("tabindex"), 
+            __metadata('design:type', Object)
+        ], CheckboxComponent.prototype, "tabIndex", void 0);
         __decorate([
-            core_1.Input()
-        ], Checkbox.prototype, "checked", void 0);
+            core_1.Input(), 
+            __metadata('design:type', Boolean)
+        ], CheckboxComponent.prototype, "checked", void 0);
         __decorate([
-            core_1.Output()
-        ], Checkbox.prototype, "checkedChange", void 0);
+            core_1.Output(), 
+            __metadata('design:type', Object)
+        ], CheckboxComponent.prototype, "checkedChange", void 0);
         __decorate([
-            core_1.Input()
-        ], Checkbox.prototype, "label", void 0);
+            core_1.Input(), 
+            __metadata('design:type', String)
+        ], CheckboxComponent.prototype, "label", void 0);
         __decorate([
             core_1.Input(),
-            core_1.HostBinding("attr.disabled")
-        ], Checkbox.prototype, "disabled", void 0);
+            core_1.HostBinding("attr.disabled"), 
+            __metadata('design:type', Boolean)
+        ], CheckboxComponent.prototype, "disabled", void 0);
         __decorate([
-            core_1.HostListener("keypress", ["$event"])
-        ], Checkbox.prototype, "_onKeyPress", null);
+            core_1.HostListener("keypress", ["$event"]), 
+            __metadata('design:type', Function), 
+            __metadata('design:paramtypes', [KeyboardEvent]), 
+            __metadata('design:returntype', void 0)
+        ], CheckboxComponent.prototype, "_onKeyPress", null);
         __decorate([
-            core_1.HostListener("click")
-        ], Checkbox.prototype, "_toggleClicked", null);
-        Checkbox = __decorate([
+            core_1.HostListener("click"), 
+            __metadata('design:type', Function), 
+            __metadata('design:paramtypes', []), 
+            __metadata('design:returntype', void 0)
+        ], CheckboxComponent.prototype, "_toggleClicked", null);
+        CheckboxComponent = __decorate([
             core_1.Component({
@@ -64,8 +79,9 @@ directives: [common_1.NgClass],
                 template: "<svg [ngClass]=\"{ 'checked': checked }\" width=\"20px\" height=\"20px\">\n                  <rect x=\"1\" y=\"1\" width=\"16px\" height=\"16px\"></rect>\n                  <path d=\"M 4 6 l 6 6 l 12 -12\"></path>\n               </svg>\n               <label>{{label}}</label>"
-            })
-        ], Checkbox);
-        return Checkbox;
-    })();
-    exports.Checkbox = Checkbox;
+            }), 
+            __metadata('design:paramtypes', [])
+        ], CheckboxComponent);
+        return CheckboxComponent;
+    }());
+    exports.CheckboxComponent = CheckboxComponent;
 });
 //# sourceMappingURL=checkbox.js.map

src/checkbox.ts

@@ -13,3 +13,3 @@ import { Component, Input, HostListener, HostBinding, EventEmitter, Output } from "angular2/core";
 })
-export class Checkbox {
+export class CheckboxComponent {
 
@@ -16,0 +16,0 @@ @HostBinding("tabindex")

src/feel.js

@@ -0,1 +1,29 @@
+System.register(["./button", "./menu-bar", "./menu-panel", "./input"], function(exports_1) {
+    "use strict";
+    return {
+        setters:[
+            function (button_1_1) {
+                exports_1({
+                    "ButtonComponent": button_1_1["ButtonComponent"]
+                });
+            },
+            function (menu_bar_1_1) {
+                exports_1({
+                    "MenuBar": menu_bar_1_1["MenuBar"]
+                });
+            },
+            function (menu_panel_1_1) {
+                exports_1({
+                    "MenuPanel": menu_panel_1_1["MenuPanel"]
+                });
+            },
+            function (input_1_1) {
+                exports_1({
+                    "InputComponent": input_1_1["InputComponent"]
+                });
+            }],
+        execute: function() {
+        }
+    }
+});
 //# sourceMappingURL=feel.js.map

src/input.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,2 +19,3 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
@@ -36,15 +40,20 @@ var common_1 = require("angular2/common");
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', String)
         ], InputComponent.prototype, "label", void 0);
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', String)
         ], InputComponent.prototype, "value", void 0);
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', Boolean)
         ], InputComponent.prototype, "multiline", void 0);
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', String)
         ], InputComponent.prototype, "type", void 0);
         __decorate([
-            core_1.Output()
+            core_1.Output(), 
+            __metadata('design:type', Object)
         ], InputComponent.prototype, "valueChange", void 0);
@@ -56,8 +65,9 @@ InputComponent = __decorate([
                 template: "<label>{{label}}</label>\n               <textarea *ngIf=\"multiline\" [ngModel]=value (ngModelChange)=\"onInput($event)\" [rows]=_rows></textarea>\n               <input *ngIf=\"!multiline\" [type]=type [ngModel]=value (ngModelChange)=\"onInput($event)\" />"
-            })
+            }), 
+            __metadata('design:paramtypes', [])
         ], InputComponent);
         return InputComponent;
-    })();
+    }());
     exports.InputComponent = InputComponent;
 });
 //# sourceMappingURL=input.js.map

src/menu-bar.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,2 +19,3 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
@@ -31,3 +35,4 @@ var button_1 = require("./button");
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', String)
         ], MenuBar.prototype, "title", void 0);
@@ -39,8 +44,9 @@ MenuBar = __decorate([
                 template: "<feel-button [text]=\"'M'\" (click)=toggleMenuPanel()></feel-button>\n               <div class=\"title\">\n                <h1>{{title}}</h1>\n                </div>\n               <feel-menu-panel [open]=\"isMenuOpen\" (close)=\"onMenuClose()\"></feel-menu-panel>"
-            })
+            }), 
+            __metadata('design:paramtypes', [])
         ], MenuBar);
         return MenuBar;
-    })();
+    }());
     exports.MenuBar = MenuBar;
 });
 //# sourceMappingURL=menu-bar.js.map

src/menu-panel.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,2 +19,3 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
@@ -30,3 +34,4 @@ var common_1 = require("angular2/common");
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', Boolean)
         ], MenuPanel.prototype, "open", void 0);
@@ -39,8 +44,9 @@ MenuPanel = __decorate([
                 template: "<div [ngClass]=\"{ 'show': open }\" >\n                  <div class=\"menu-title\">\n                    <h1>Menu</h1>\n                    <feel-button [text]=\"'X'\" (click)=closeMenuPanel()></feel-button>\n                  </div>\n                  <div class=\"menu-options\">\n                    <a [routerLink]=\"['/Home']\"><div class=\"menu-item\">Home</div></a>\n                    <a [routerLink]=\"['/Buttons']\"><div class=\"menu-item\">Button</div></a>\n                    <a [routerLink]=\"['/Input']\"><div class=\"menu-item\">Input</div></a>\n                    <a [routerLink]=\"['/Notifications']\"><div class=\"menu-item\">Notifications</div></a>\n                    <a [routerLink]=\"['/Table']\"><div class=\"menu-item\">Table</div></a>\n                    <a [routerLink]=\"['/Slider']\"><div class=\"menu-item\">Slider</div></a>\n                    <a [routerLink]=\"['/Checkbox']\"><div class=\"menu-item\">Checkbox</div></a>\n                  </div>\n               </div>"
-            })
+            }), 
+            __metadata('design:paramtypes', [])
         ], MenuPanel);
         return MenuPanel;
-    })();
+    }());
     exports.MenuPanel = MenuPanel;
 });
 //# sourceMappingURL=menu-panel.js.map

src/notification-provider.js

@@ -9,2 +9,3 @@ (function (factory) {
 })(function (require, exports) {
+    "use strict";
     var NotificationProvider = (function () {
@@ -43,5 +44,5 @@ function NotificationProvider() {
         return NotificationProvider;
-    })();
+    }());
     exports.NotificationProvider = NotificationProvider;
 });
 //# sourceMappingURL=notification-provider.js.map

src/pipes/sort-pipe.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,2 +19,3 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require('angular2/core');
@@ -45,8 +49,9 @@ var SortPipe = (function () {
                 pure: false
-            })
+            }), 
+            __metadata('design:paramtypes', [])
         ], SortPipe);
         return SortPipe;
-    })();
+    }());
     exports.SortPipe = SortPipe;
 });
 //# sourceMappingURL=sort-pipe.js.map

src/slider.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,5 +19,6 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
-    var Slider = (function () {
-        function Slider() {
+    var SliderComponent = (function () {
+        function SliderComponent() {
             this.valueChange = new core_1.EventEmitter();
@@ -24,9 +28,9 @@ this._offset = "20%";
         }
-        Slider.prototype._getOffset = function () {
+        SliderComponent.prototype._getOffset = function () {
             return this._offset;
         };
-        Slider.prototype._calculateOffset = function () {
+        SliderComponent.prototype._calculateOffset = function () {
             this._offset = ((this.value / this.maximum) * 100).toString() + "%";
         };
-        Slider.prototype._startDrag = function (event) {
+        SliderComponent.prototype._startDrag = function (event) {
             this._buttonElement = event.target;
@@ -36,3 +40,3 @@ document.onmouseup = this._stopDrag.bind(this);
         };
-        Slider.prototype._handleDrag = function (event) {
+        SliderComponent.prototype._handleDrag = function (event) {
             var element = this._buttonElement;
@@ -57,7 +61,6 @@ var offsetTotal = this._buttonElement.offsetLeft;
             this._buttonElement.style.left = this._offset;
-            //console.log(this.value);
             event.preventDefault();
             this.valueChange.next(this.value);
         };
-        Slider.prototype._stopDrag = function () {
+        SliderComponent.prototype._stopDrag = function () {
             document.onmouseup = null;
@@ -67,11 +70,14 @@ document.onmousemove = null;
         __decorate([
-            core_1.Input()
-        ], Slider.prototype, "value", void 0);
+            core_1.Input(), 
+            __metadata('design:type', Number)
+        ], SliderComponent.prototype, "value", void 0);
         __decorate([
-            core_1.Output()
-        ], Slider.prototype, "valueChange", void 0);
+            core_1.Output(), 
+            __metadata('design:type', Object)
+        ], SliderComponent.prototype, "valueChange", void 0);
         __decorate([
-            core_1.Input()
-        ], Slider.prototype, "maximum", void 0);
-        Slider = __decorate([
+            core_1.Input(), 
+            __metadata('design:type', Number)
+        ], SliderComponent.prototype, "maximum", void 0);
+        SliderComponent = __decorate([
             core_1.Component({
@@ -81,8 +87,9 @@ directives: [],
                 template: "<div class=\"slider-track\">\n                  <div class=\"slider-button\" [style.left]=\"_getOffset()\" (mousedown)=\"_startDrag($event)\"></div>\n               </div>"
-            })
-        ], Slider);
-        return Slider;
-    })();
-    exports.Slider = Slider;
+            }), 
+            __metadata('design:paramtypes', [])
+        ], SliderComponent);
+        return SliderComponent;
+    }());
+    exports.SliderComponent = SliderComponent;
 });
 //# sourceMappingURL=slider.js.map

src/slider.ts

@@ -10,3 +10,3 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from "angular2/core";
 })
-export class Slider {
+export class SliderComponent {
 
@@ -13,0 +13,0 @@ @Input()

src/table.js

@@ -7,2 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 (function (factory) {
@@ -16,2 +19,3 @@ if (typeof module === 'object' && typeof module.exports === 'object') {
 })(function (require, exports) {
+    "use strict";
     var core_1 = require("angular2/core");
@@ -35,6 +39,8 @@ var common_1 = require("angular2/common");
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', Array)
         ], TableComponent.prototype, "data", void 0);
         __decorate([
-            core_1.Input()
+            core_1.Input(), 
+            __metadata('design:type', Array)
         ], TableComponent.prototype, "columns", void 0);
@@ -46,10 +52,10 @@ TableComponent = __decorate([
                 pipes: [sort_pipe_1.SortPipe],
-                //changeDetection: ChangeDetectionStrategy.OnPush,
                 template: "<table>\n                  <thead>\n                     <th *ngFor=\"#column of columns\" (click)=addSort(column.propertyName)>\n                        <span>{{ column.propertyName }}</span>\n                        <span [ngClass]=\"{\n                                            'ascending': sortItems[0] === column.propertyName,\n                                            'descending': sortItems[0] === '-' + column.propertyName,\n                                            'sort-icon': true\n                                          }\" ></span>\n                     </th>\n                  </thead>\n                  <tbody>\n                     <tr *ngFor=\"#dataItem of data | sort: sortOrder\">\n                        <td *ngFor=\"#column of columns\">{{ dataItem[column.propertyName] }}</td>\n                     </tr>\n                  </tbody>\n               </table>"
-            })
+            }), 
+            __metadata('design:paramtypes', [])
         ], TableComponent);
         return TableComponent;
-    })();
+    }());
     exports.TableComponent = TableComponent;
 });
 //# sourceMappingURL=table.js.map

tsconfig.json

@@ -33,3 +33,5 @@ {
         "./src/slider.ts",
-        "./src/table.ts"
+        "./src/table.ts",
+        "./src/toggle-button-group.ts",
+        "./src/toggle-button.ts"
     ],
@@ -36,0 +38,0 @@ "atom": {

typings.json

@@ -0,0 +0,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181964

increased by56.06%

Number of package files

97

increased by56.45%

Lines of code

2876

increased by71.8%

No dependency changes