@stejnar/toolbar - npm Package Compare versions

Comparing version 1.0.3 to 2.0.4

index.d.ts

 export * from './lib/toolbar.module';
 export * from './lib/toolbar-item.component';
-export * from './lib/toolbar-tab.component'
 export * from './lib/toolbar.component';
 export * from './lib/toolbar-menu.component';

index.js

 exports.ToolbarModule = require('./lib/toolbar.module').ToolbarModule;
 exports.ToolbarComponent = require('./lib/toolbar.component').ToolbarComponent;
 exports.ToolbarItemComponent = require('./lib/toolbar-item.component').ToolbarItemComponent;
-exports.ToolbarTabComponent = require('./lib/toolbar-tab.component').ToolbarTabComponent;
 exports.ToolbarMenuComponent = require('./lib/toolbar-menu.component').ToolbarMenuComponent;

lib/toolbar-item.component.d.ts

@@ -0,3 +1,18 @@
+import { TabsService } from "@stejnar/tabs";
+import { Subscription } from "rxjs/Subscription";
+import { ToolbarGroup } from "./toolbar-group.component";
 export declare class ToolbarItem {
-    constructor();
+    private group;
+    private tabsService;
+    tabName: string;
+    text: string;
+    icon: string;
+    tab: string;
+    tabSub: Subscription;
+    active: boolean;
+    constructor(group: ToolbarGroup, tabsService: TabsService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private _unsubscribe();
+    private _setTab();
 }

lib/toolbar-item.component.js

@@ -13,5 +13,51 @@ "use strict";
 const core_1 = require("@angular/core");
+const tabs_1 = require("@stejnar/tabs");
+const toolbar_group_component_1 = require("./toolbar-group.component");
 let ToolbarItem = class ToolbarItem {
-    constructor() { }
+    constructor(group, tabsService) {
+        this.group = group;
+        this.tabsService = tabsService;
+    }
+    ngOnInit() {
+        if (this.tabName) {
+            this.tabSub = this.tabsService.registerStateProvider(this.group.tabProvider)
+                .subscribe((state) => {
+                this.active = state.current === this.tabName;
+            });
+        }
+    }
+    ngOnDestroy() {
+        try {
+            this._unsubscribe();
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    _unsubscribe() {
+        if (this.tabSub) {
+            this.tabSub.unsubscribe();
+        }
+        else if (!this.tabName) {
+            throw new Error("Can't unsubscribe of: " + this.tabSub);
+        }
+    }
+    _setTab() {
+        if (this.tabName) {
+            this.tabsService.setTab(this.group.tabProvider, this.tabName);
+        }
+    }
 };
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], ToolbarItem.prototype, "tabName", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], ToolbarItem.prototype, "text", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], ToolbarItem.prototype, "icon", void 0);
 ToolbarItem = __decorate([
@@ -21,66 +67,65 @@ core_1.Component({
         template: `
-        <li>
-            <ng-content></ng-content>
-        </li>
+        <span *ngIf="icon" [ngClass]="icon" aria-hidden="true"></span>
+        <span *ngIf="text" class="text">{{ text }}</span>
     `,
         styles: [`
-        :host > /deep/ .drop-input {
-            display : none;
+        :host {
+            display       : inline;
+            box-sizing    : border-box;
+            float         : left;
+            width         : auto;
+            height        : 100%;
+            padding       : 0 1em;
+            font-family   : "Droid Sans", sans-serif;
+            color         : #eee;
+            cursor        : pointer;
+            border-bottom : 3px solid transparent;
         }
-        /deep/ li {
+
+        :host:before {
+            content        : "";
+            display        : inline-block;
+            height         : 100%;
+            vertical-align : middle;
+        }
+
+        :host.active {
+            border-color : #eee;
+        }
+
+        :host:hover {
+            background-color : rgba(238, 238, 238, 0.1);
+        }
+
+        :host[disabled] {
+            color  : rgba(238, 238, 238, 0.25);
+            cursor : not-allowed;
+        }
+
+        span {
             display : inline-block;
-            float   : left;
-            height  : 100%;
-            padding : 0;
         }
-        /deep/ li > button {
-           display          : inline;
-           width            : auto;
-           height           : 4em;
-           margin           : 0;
-           padding          : 0;
-           color            : rgba(238, 238, 238, 1);
-           box-shadow       : none;
-           box-sizing       : border-box;
-           border-bottom    : 3px solid transparent;
-           background-color : #4e5566;
-       }
-        /deep/ li > button > p {
-           height    : 100%;
-           margin    : 0;
-           padding   : 0.8em;
-           font-size : 1.2em;
-       }
-        /deep/ li > button > p > span.text {
-           padding        : 0.2em;
-           font-size      : 1em;
-           vertical-align : middle;
-       }
-        /deep/ li > button > p > span.icon,
-        /deep/ li > button > p > span.glyphicon {
-           font-size      : 1.2em;
-           vertical-align : middle;
-       }
-        /deep/ li > button.active,
-        /deep/ li > button:focus.active {
-           border-bottom-color : rgba(238, 238, 238, 1);
-       }
-        /deep/ li > button:hover {
-           background-color : rgba(238, 238, 238, 0.1);
-       }
-        /deep/ li > button[disabled] {
-           color  : rgba(238, 238, 238, 0.25);
-           cursor : not-allowed;
-       }
-        li.seperator {
-            width       : 0;
-            height      : 2.4em !important;
-            margin      : 0.8em 5px;
-            border-left : 1px solid rgba(238, 238, 238, 0.25);
+
+        span.text {
+            padding        : 0 0 0 0.2em;
+            font-size      : 1em;
+            vertical-align : middle;
         }
-    `]
+
+        span.icon,
+        span.glyphicon {
+            font-size      : 1.2em;
+            vertical-align : middle;
+        }
+
+    `],
+        host: {
+            '[class.active]': 'active',
+            '(click)': '_setTab()'
+        }
     }),
-    __metadata("design:paramtypes", [])
+    __metadata("design:paramtypes", [toolbar_group_component_1.ToolbarGroup,
+        tabs_1.TabsService])
 ], ToolbarItem);
 exports.ToolbarItem = ToolbarItem;
 //# sourceMappingURL=toolbar-item.component.js.map

lib/toolbar.component.d.ts

@@ -1,3 +0,11 @@
-export declare class Toolbar {
-    constructor();
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { ToolbarGroup } from "./toolbar-group.component";
+export declare class Toolbar implements AfterViewInit {
+    private el;
+    groups: ToolbarGroup[];
+    private center;
+    private height;
+    constructor(el: ElementRef);
+    ngAfterViewInit(): void;
+    private _checkBounds();
 }

lib/toolbar.component.js

@@ -14,3 +14,23 @@ "use strict";
 let Toolbar = class Toolbar {
-    constructor() { }
+    constructor(el) {
+        this.el = el;
+        this.groups = [];
+        this.center = false;
+        this.height = 4;
+    }
+    ngAfterViewInit() {
+        setTimeout((_) => this._checkBounds());
+    }
+    _checkBounds() {
+        if (this.groups.length) {
+            let toolbarWidth = this.el.nativeElement.getBoundingClientRect().width;
+            let groupsWidth = 0;
+            let padding = 20 * (this.groups.length - 1);
+            for (let group of this.groups) {
+                groupsWidth += group.el.nativeElement.getBoundingClientRect().width;
+            }
+            this.center = groupsWidth + padding >= toolbarWidth;
+            this.height = this.center ? this.groups.length * 4 : 4;
+        }
+    }
 };
@@ -21,7 +41,3 @@ Toolbar = __decorate([
         template: `
-        <div class="toolbar">
-            <div class="container">
-                <ng-content></ng-content>
-            </div>
-        </div>
+        <ng-content></ng-content>
     `,
@@ -31,7 +47,4 @@ styles: [`
             display          : block;
-            position         : fixed;
-            top              : 4em;
-            left             : 0;
+            box-sizing       : border-box;
             width            : 100%;
-            height           : 4em;
             background-color : #4e5566;
@@ -41,10 +54,46 @@ box-shadow       : 2px 2px 5px rgba(34, 37, 44, 0.2);
 
-        :host > .container {
-            padding : 0;
+        /deep/
+        toolbar-group:first-child {
+            padding-left : 0;
         }
-    `]
+
+        /deep/
+        toolbar-group:last-child {
+            padding-right : 0;
+        }
+
+        :host.center {
+            text-align : center;
+        }
+
+        :host.center /deep/ toolbar-group:after {
+            display : none;
+        }
+
+        /deep/
+        toolbar-group:after {
+            content          : '';
+            display          : inline-block;
+            position         : relative;
+            float            : right;
+            width            : 2px;
+            height           : 3em;
+            margin           : .5em 0 .5em 10px;
+            background-color : #eee;
+        }
+
+        /deep/
+        toolbar-group:last-child:after {
+            display : none;
+        }
+    `],
+        host: {
+            '(window:resize)': '_checkBounds()',
+            '[class.center]': 'center',
+            '[style.height]': 'height + "em"'
+        }
     }),
-    __metadata("design:paramtypes", [])
+    __metadata("design:paramtypes", [core_1.ElementRef])
 ], Toolbar);
 exports.Toolbar = Toolbar;
 //# sourceMappingURL=toolbar.component.js.map

lib/toolbar.module.js

@@ -12,5 +12,4 @@ "use strict";
 const toolbar_component_1 = require("./toolbar.component");
-const toolbar_menu_component_1 = require("./toolbar-menu.component");
+const toolbar_group_component_1 = require("./toolbar-group.component");
 const toolbar_item_component_1 = require("./toolbar-item.component");
-const toolbar_tab_component_1 = require("./toolbar-tab.component");
 const tabs_1 = require("@stejnar/tabs");
@@ -26,6 +25,6 @@ let ToolbarModule = class ToolbarModule {
         declarations: [
-            toolbar_component_1.Toolbar, toolbar_menu_component_1.ToolbarMenu, toolbar_item_component_1.ToolbarItem, toolbar_tab_component_1.ToolbarTab
+            toolbar_component_1.Toolbar, toolbar_group_component_1.ToolbarGroup, toolbar_item_component_1.ToolbarItem
         ],
         exports: [
-            toolbar_component_1.Toolbar, toolbar_menu_component_1.ToolbarMenu, toolbar_item_component_1.ToolbarItem, toolbar_tab_component_1.ToolbarTab
+            toolbar_component_1.Toolbar, toolbar_group_component_1.ToolbarGroup, toolbar_item_component_1.ToolbarItem
         ]
@@ -32,0 +31,0 @@ })

package.json

 {
   "name": "@stejnar/toolbar",
-  "version": "1.0.3",
+  "version": "2.0.4",
   "description": "Angular component library",
   "scripts": {
-    "watch": "tsc -p src -w",
-    "build": "rm -rf lib && tsc -p src"
+    "clean": "gulp clean",
+    "watch:lib": "gulp watch:lib",
+    "copy:lib": "gulp copy:lib",
+    "build:example": "gulp build:example",
+    "build:lib": "tsc -p src",
+    "start": "concurrently --kill-others \"gulp serve\" \"gulp watch\""
   },
@@ -18,3 +22,3 @@ "author": "Armin Butkereit",
   },
-  "typings": "./toolbar.d.ts",
+  "typings": "./index.d.ts",
   "keywords": [
@@ -24,16 +28,38 @@ "angular2",
     "toolbar",
-    "tabs",
     "navigation"
   ],
+  "devDependencies": {
+    "@types/node": "^8.0.8",
+    "body-parser": "^1.17.2",
+    "concurrently": "^3.5.0",
+    "connect-livereload": "^0.6.0",
+    "core-js": "^2.4.1",
+    "express": "^4.15.3",
+    "gulp": "^3.9.1",
+    "gulp-less": "^3.3.2",
+    "gulp-live-server": "0.0.30",
+    "gulp-shell": "^0.6.3",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-tslint": "^8.1.1",
+    "gulp-typescript": "^3.2.0",
+    "http": "0.0.0",
+    "morgan": "^1.8.2",
+    "path": "^0.12.7",
+    "reflect-metadata": "^0.1.10",
+    "run-sequence": "^2.0.0",
+    "systemjs": "^0.20.14",
+    "ts-node": "^3.2.0",
+    "tslint": "^5.5.0",
+    "typescript": "^2.4.1"
+  },
   "dependencies": {
+    "@angular/common": "^4.2.6",
+    "@angular/compiler": "^4.2.6",
+    "@angular/core": "^4.2.6",
+    "@angular/platform-browser": "^4.2.6",
+    "@angular/platform-browser-dynamic": "^4.2.6",
+    "@stejnar/tabs": "^2.0.5",
     "rxjs": "^5.4.2",
-    "zone.js": "^0.7.8",
-    "@angular/animations": "^4.2.5",
-    "@angular/common": "^4.2.5",
-    "@angular/compiler": "^4.2.5",
-    "@angular/core": "^4.2.5",
-    "@angular/platform-browser": "^4.2.5",
-    "@angular/platform-browser-dynamic": "^4.2.5",
-    "@stejnar/tabs": "^1.0.2"
+    "zone.js": "^0.8.12"
   }
 }

README.md

 # @stejnar/toolbar
 
-Angular component library for reusable toolbars
+Angular component library for responsive toolbars.
 
+Features:
+1. Scaling, responds to window resize event
+2. Simple navigation implementation for @stejnar/tabs
+3. Semantic encapsulation with groups
+
+Build with lib-starter: https://github.com/Stejnar/lib-starter
+
 npm package: <br />
 https://www.npmjs.com/package/@stejnar/toolbar
 
+# Installation
+1. `$ npm install --save @stejnar/toolbar --production`
+2. Include in Webpack or SystemJS
+
 # Components
@@ -12,26 +23,68 @@
   ```<toolbar>```
-## 2. ToolbarMenu
-  ```<tab-menu float>```<br />
-  <b>@Input</b> float: string (left|right)
-## 3. ToolbarTab
-  ```<tab-tab title text icon>```<br />
-  <b>@Input</b> title: string<br />
-  <b>@Input</b> text: string<br />
-  <b>@Input</b> icon: string
+
+## 2. ToolbarGroup
+  ```<toolbar-group>```
+
+  **@Input** tabProvider: string
+  - Identifier of TabsComponent
+  - Optional, unless for use with TabsModule
+
 ## 4. ToolbarItem
-  ```<tab-item>```
+  ```<toolbar-item>```
+  
+  **@Input** tabName: string
+  - Identifier of TabComponent
+  - Optional, unless for use with TabsModule
 
+  **@Input** text: string
+  - Text to be displayed
+  - Optional
+
+  **@Input** icon: string
+  - Class for bootstrap, iconmoon etc icons
+  - Optional
+
 # Usage
+    <toolbar>
+        // To take advantage of TabsModule, add coresponding tab provider
+        <toolbar-group tabProvider="fruits">
+            // Apply clickhandler
+            <toolbar-item (click)="peach()"
+                          text="Peaches"
+                          icon="em em-peach">
+            </toolbar-item>
+            // For tab navigation, declare the coresponding tab name
+            <toolbar-item tabName="apples"
+                          text="Apples"
+                          icon="em em-apple">
+            </toolbar-item>
+        </toolbar-group>
+    </toolbar>
+#### Note:
+Wonder how to implement a navigation with @angular/router? <br />
+Just apply a click handler like that:
 
-```
-<toolbar>
-  <toolbar-menu>
-      <toolbar-tab title="Home" text="Home" icon="my-fancy-icon"></toolbar-tab>
-  </toolbar-menu>
-  <toolbar-menu>
-      <toolbar-item>
-        ...
-      </toolbar-item>
-  </toolbar-menu>
-</toolbar>
-```
+    click(e) {
+        router.navigateByUrl('/pat/to/route/', options);
+    }
+and bind it to *toolbar-item*.
+
+# Future Possibilities
+
+Any suggestions? Contact me or collaborate!<br />
+Send an e-mail to:<br />
[e-mail]
+
+# Demo
+
+1. Fork the git repository and clone it with:<br/>
+    ```
+    $ git clone https://github.com/Stejnar/stejnar-toolbar.git
+    ```
+2. Start the build process and go to localhost:<br/>
+    ```
+    $ cd stejnar-tabs-master
+    $ npm install
+    $ npm run build:example
+    $ npm start
+    ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20207

increased by10.76%

Dependency count

8

decreased by-11.11%

Number of lines in readme file

90

increased by143.24%

Worsened metrics

Dev dependency count

22

increased byInfinity%

Number of package files

17

decreased by-15%

Lines of code

330

decreased by-12.93%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@stejnar/tabs@2.0.5(transitive)

• - Removed@angular/animations@^4.2.5

• - Removed@angular/animations@4.4.7(transitive)

• - Removed@stejnar/tabs@1.0.12(transitive)

• Updated@angular/common@^4.2.6

• Updated@angular/compiler@^4.2.6

• Updated@angular/core@^4.2.6

• Updated@angular/platform-browser@^4.2.6

• Updated@angular/platform-browser-dynamic@^4.2.6

• Updated@stejnar/tabs@^2.0.5

• Updatedzone.js@^0.8.12