Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ng2-sidebar

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-sidebar - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

1

lib/close.directive.d.ts
import { EventEmitter } from '@angular/core';
export declare class CloseSidebar {
clicked: EventEmitter<null>;
_onClick(): void;
}

3

lib/sidebar.component.d.ts

@@ -27,3 +27,2 @@ import { AfterContentInit, AnimationTransitionEvent, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

private _closeDirectives;
private _visibleSidebarState;
private _onClickOutsideAttached;

@@ -47,4 +46,2 @@ private _focusableElementsString;

private _onClickOutside(e);
private _animationStarted(e);
private _animationDone(e);
}

14

lib/sidebar.component.js

@@ -66,5 +66,11 @@ "use strict";

};
Sidebar.prototype._animationStarted = function (e) {
this.onAnimationStarted.emit(e);
};
Sidebar.prototype._animationDone = function (e) {
this.onAnimationDone.emit(e);
};
Sidebar.prototype._setVisibleSidebarState = function () {
this._visibleSidebarState = this.open ?
this.animate ? 'expanded--animate' : 'expanded' :
(this.animate ? 'expanded--animate' : 'expanded') :
"collapsed--" + this.position;

@@ -150,8 +156,2 @@ };

};
Sidebar.prototype._animationStarted = function (e) {
this.onAnimationStarted.emit(e);
};
Sidebar.prototype._animationDone = function (e) {
this.onAnimationDone.emit(e);
};
Sidebar.decorators = [

@@ -158,0 +158,0 @@ { type: core_1.Component, args: [{

2

lib/sidebar.component.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":1,"metadata":{"SIDEBAR_POSITION":{"Left":"left","Right":"right","Top":"top","Bottom":"bottom"},"Sidebar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-sidebar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"template":"\n <aside #sidebar\n [@visibleSidebarState]=\"_visibleSidebarState\"\n (@visibleSidebarState.start)=\"_animationStarted($event)\"\n (@visibleSidebarState.done)=\"_animationDone($event)\"\n role=\"complementary\"\n [attr.aria-hidden]=\"!open\"\n [attr.aria-label]=\"ariaLabel\"\n class=\"ng2-sidebar ng2-sidebar--{{position}}\"\n [class.ng2-sidebar--style]=\"defaultStyles\"\n [ngClass]=\"sidebarClass\">\n <ng-content></ng-content>\n </aside>\n\n <div *ngIf=\"showOverlay\"\n aria-hidden=\"true\"\n class=\"ng2-sidebar__overlay\"\n [class.ng2-sidebar__overlay--style]=\"open && defaultStyles\"\n [ngClass]=\"overlayClass\"></div>\n ","styles":["\n .ng2-sidebar {\n overflow: auto;\n pointer-events: none;\n position: fixed;\n z-index: 99999999;\n }\n\n .ng2-sidebar--left {\n bottom: 0;\n left: 0;\n top: 0;\n }\n\n .ng2-sidebar--right {\n bottom: 0;\n right: 0;\n top: 0;\n }\n\n .ng2-sidebar--top {\n left: 0;\n right: 0;\n top: 0;\n }\n\n .ng2-sidebar--bottom {\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n .ng2-sidebar--style {\n background: #fff;\n box-shadow: 0 0 2.5em rgba(85, 85, 85, 0.5);\n }\n\n .ng2-sidebar__overlay {\n height: 100%;\n left: 0;\n pointer-events: none;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999998;\n }\n\n .ng2-sidebar__overlay--style {\n background: #000;\n opacity: 0.75;\n }\n "],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["visibleSidebarState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"none","pointerEvents":"auto","willChange":"initial"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["expanded--animate",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"none","pointerEvents":"auto","willChange":"initial"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--left",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--top",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--bottom",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["expanded--animate <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.3s cubic-bezier(0, 0, 0.3, 1)"]}]}]]}]}]}],"members":{"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"openChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnClickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"defaultStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sidebarClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trapFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAnimationStarted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAnimationDone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_elSidebar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sidebar"]}]}],"_closeDirectives":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./close.directive","name":"CloseSidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}]],"parameters":[null]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_setVisibleSidebarState":[{"__symbolic":"method"}],"_open":[{"__symbolic":"method"}],"_close":[{"__symbolic":"method"}],"_manualClose":[{"__symbolic":"method"}],"_setFocusToFirstItem":[{"__symbolic":"method"}],"_trapFocus":[{"__symbolic":"method"}],"_setFocused":[{"__symbolic":"method"}],"_initCloseOnClickOutside":[{"__symbolic":"method"}],"_destroyCloseOnClickOutside":[{"__symbolic":"method"}],"_onClickOutside":[{"__symbolic":"method"}],"_animationStarted":[{"__symbolic":"method"}],"_animationDone":[{"__symbolic":"method"}]}}}}
{"__symbolic":"module","version":1,"metadata":{"SIDEBAR_POSITION":{"Left":"left","Right":"right","Top":"top","Bottom":"bottom"},"Sidebar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-sidebar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"template":"\n <aside #sidebar\n [@visibleSidebarState]=\"_visibleSidebarState\"\n (@visibleSidebarState.start)=\"_animationStarted($event)\"\n (@visibleSidebarState.done)=\"_animationDone($event)\"\n role=\"complementary\"\n [attr.aria-hidden]=\"!open\"\n [attr.aria-label]=\"ariaLabel\"\n class=\"ng2-sidebar ng2-sidebar--{{position}}\"\n [class.ng2-sidebar--style]=\"defaultStyles\"\n [ngClass]=\"sidebarClass\">\n <ng-content></ng-content>\n </aside>\n\n <div *ngIf=\"showOverlay\"\n aria-hidden=\"true\"\n class=\"ng2-sidebar__overlay\"\n [class.ng2-sidebar__overlay--style]=\"open && defaultStyles\"\n [ngClass]=\"overlayClass\"></div>\n ","styles":["\n .ng2-sidebar {\n overflow: auto;\n pointer-events: none;\n position: fixed;\n z-index: 99999999;\n }\n\n .ng2-sidebar--left {\n bottom: 0;\n left: 0;\n top: 0;\n }\n\n .ng2-sidebar--right {\n bottom: 0;\n right: 0;\n top: 0;\n }\n\n .ng2-sidebar--top {\n left: 0;\n right: 0;\n top: 0;\n }\n\n .ng2-sidebar--bottom {\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n .ng2-sidebar--style {\n background: #fff;\n box-shadow: 0 0 2.5em rgba(85, 85, 85, 0.5);\n }\n\n .ng2-sidebar__overlay {\n height: 100%;\n left: 0;\n pointer-events: none;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999998;\n }\n\n .ng2-sidebar__overlay--style {\n background: #000;\n opacity: 0.75;\n }\n "],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["visibleSidebarState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"none","pointerEvents":"auto","willChange":"initial"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["expanded--animate",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"none","pointerEvents":"auto","willChange":"initial"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--left",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--top",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["collapsed--bottom",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(110%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["expanded--animate <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.3s cubic-bezier(0, 0, 0.3, 1)"]}]}]]}]}]}],"members":{"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"openChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnClickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"defaultStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sidebarClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trapFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAnimationStarted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAnimationDone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_elSidebar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sidebar"]}]}],"_closeDirectives":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./close.directive","name":"CloseSidebar"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}]],"parameters":[null]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_animationStarted":[{"__symbolic":"method"}],"_animationDone":[{"__symbolic":"method"}],"_setVisibleSidebarState":[{"__symbolic":"method"}],"_open":[{"__symbolic":"method"}],"_close":[{"__symbolic":"method"}],"_manualClose":[{"__symbolic":"method"}],"_setFocusToFirstItem":[{"__symbolic":"method"}],"_trapFocus":[{"__symbolic":"method"}],"_setFocused":[{"__symbolic":"method"}],"_initCloseOnClickOutside":[{"__symbolic":"method"}],"_destroyCloseOnClickOutside":[{"__symbolic":"method"}],"_onClickOutside":[{"__symbolic":"method"}]}}}}

17

package.json
{
"name": "ng2-sidebar",
"version": "1.6.1",
"version": "1.6.2",
"description": "A sidebar component for Angular 2.",

@@ -39,13 +39,12 @@ "repository": {

"devDependencies": {
"@angular/common": "^2.0.2",
"@angular/compiler": "^2.0.2",
"@angular/compiler-cli": "^0.6.4",
"@angular/core": "^2.0.2",
"@angular/platform-browser": "^2.0.2",
"@angular/platform-server": "^2.0.2",
"@angular/common": "^2.1.2",
"@angular/compiler": "^2.1.2",
"@angular/compiler-cli": "^2.1.2",
"@angular/core": "^2.1.2",
"@angular/platform-browser": "^2.1.2",
"rxjs": "5.0.0-beta.12",
"tslint": "^3.15.1",
"typescript": "^2.0.3",
"zone.js": "^0.6.25"
"typescript": "^2.0.6",
"zone.js": "^0.6.26"
}
}

26

README.md

@@ -16,3 +16,23 @@ # ng2-sidebar

### SystemJS configuration
If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:
```js
var map = {
// ...
'ng2-sidebar': 'node_modules/ng2-sidebar',
// ...
};
var packages = {
// ...
'ng2-sidebar': {
main: 'lib/index',
defaultExtension: 'js'
},
// ...
};
```
## Usage

@@ -33,2 +53,4 @@

If you're using it in a feature module, you may need to add it as an import in that module as well.
In your component, simply use the directive in your template:

@@ -70,3 +92,7 @@

### Browser support
Note that this component uses Angular 2's [animation system](https://angular.io/docs/ts/latest/guide/animations.html), which relies on the Web Animations API. Unforunately, there is only [partial support](http://caniuse.com/#feat=web-animation) for this API in Firefox, Chrome, and Opera, so it's recommended to use [the web-animations.js polyfill](https://github.com/web-animations/web-animations-js) for support in other browsers.
### Options

@@ -73,0 +99,0 @@

1

src/close.directive.ts

@@ -7,2 +7,3 @@ import { Directive, EventEmitter, HostListener, Output } from '@angular/core';

/** @internal */
@HostListener('click')

@@ -9,0 +10,0 @@ _onClick() {

38

src/sidebar.component.ts

@@ -147,2 +147,5 @@ import {

/** @internal */
_visibleSidebarState: string;
@ViewChild('sidebar')

@@ -154,4 +157,2 @@ private _elSidebar: ElementRef;

private _visibleSidebarState: string;
private _onClickOutsideAttached: boolean = false;

@@ -208,5 +209,22 @@

// Animation callbacks
// ==============================================================================================
/** @internal */
_animationStarted(e: AnimationTransitionEvent) {
this.onAnimationStarted.emit(e);
}
/** @internal */
_animationDone(e: AnimationTransitionEvent) {
this.onAnimationDone.emit(e);
}
// Sidebar toggling
// ==============================================================================================
private _setVisibleSidebarState() {
this._visibleSidebarState = this.open ?
this.animate ? 'expanded--animate' : 'expanded' :
(this.animate ? 'expanded--animate' : 'expanded') :
`collapsed--${this.position}`;

@@ -321,16 +339,2 @@ }

}
// Animation callbacks
// ==============================================================================================
// tslint:disable-next-line:no-unused-variable
private _animationStarted(e: AnimationTransitionEvent) {
this.onAnimationStarted.emit(e);
}
// tslint:disable-next-line:no-unused-variable
private _animationDone(e: AnimationTransitionEvent) {
this.onAnimationDone.emit(e);
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc