feat(snack-bar): initial commit for snack-bar (#64)

.package.conf.yml

@@ -21,3 +21,4 @@ components:
   '@alyle/ui/drawer': drawer
   '@alyle/ui/badge': badge
   '@alyle/ui/field': field
+  '@alyle/ui/snack-bar': snack-bar

.prerender.conf.json

@@ -23,6 +23,7 @@
     "components/card",
     "components/typography",
     "components/badge",
-    "components/field"
+    "components/field",
+    "components/snack-bar"
   ]
 }

src/app/components/routes-app.service.ts

@@ -41,6 +41,7 @@ export class RoutesAppService {
           { route: 'card', name: 'Card' },
           { route: 'carousel', name: 'Carousel' },
           { route: 'checkbox', name: 'Checkbox' },
+          { route: 'snack-bar', name: 'SnackBar' },
           { route: 'drawer', name: 'Drawer' },
           { route: 'field', name: 'Field' },
           { route: 'icon-button', name: 'Icon button' },

src/app/docs/components/snack-bar-demo/basic-snack-bar/basic-snack-bar.component.html

@@ -0,0 +1,8 @@
+<button ly-button (click)="sb.open()">Show snack-bar</button>
+
+<ng-template ly-snack-bar #sb="lySnackBar" (afterDismissed)="afterDismissed($event)">
+  <span>Message</span>
+  <button ly-button color="accent" (click)="sb.dismiss()">
+    Dismiss
+  </button>
+</ng-template>

src/app/docs/components/snack-bar-demo/basic-snack-bar/basic-snack-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicSnackBarComponent } from './basic-snack-bar.component';
+
+describe('BasicSnackBarComponent', () => {
+  let component: BasicSnackBarComponent;
+  let fixture: ComponentFixture<BasicSnackBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BasicSnackBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicSnackBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/snack-bar-demo/basic-snack-bar/basic-snack-bar.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { LySnackBarDismiss } from 'lib/snack-bar/snack-bar';
+
+@Component({
+  selector: 'aui-basic-snack-bar',
+  templateUrl: './basic-snack-bar.component.html'
+})
+export class BasicSnackBarComponent {
+  afterDismissed(e: LySnackBarDismiss) {
+    console.log(e);
+  }
+}

src/app/docs/components/snack-bar-demo/basic-snack-bar/basic-snack-bar.module.spec.ts

@@ -0,0 +1,13 @@
+import { BasicSnackBarModule } from './basic-snack-bar.module';
+
+describe('BasicSnackBarModule', () => {
+  let basicSnackBarModule: BasicSnackBarModule;
+
+  beforeEach(() => {
+    basicSnackBarModule = new BasicSnackBarModule();
+  });
+
+  it('should create an instance', () => {
+    expect(basicSnackBarModule).toBeTruthy();
+  });
+});

src/app/docs/components/snack-bar-demo/basic-snack-bar/basic-snack-bar.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BasicSnackBarComponent } from './basic-snack-bar.component';
+import { LyButtonModule } from '@alyle/ui/button';
+import { LySnackBarModule } from '@alyle/ui/snack-bar';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LyButtonModule,
+    LySnackBarModule
+  ],
+  exports: [BasicSnackBarComponent],
+  declarations: [BasicSnackBarComponent]
+})
+export class BasicSnackBarModule { }

src/app/docs/components/snack-bar-demo/snack-bar-demo.component.html

@@ -0,0 +1,7 @@
+<p>
+  Snackbars provide brief messages at the bottom of the screen.
+</p>
+<h2 [lyTyp]="'display1'" gutter>Basic SnackBar</h2>
+<demo-view path="docs/components/snack-bar-demo/basic-snack-bar">
+  <aui-basic-snack-bar></aui-basic-snack-bar>
+</demo-view>

src/app/docs/components/snack-bar-demo/snack-bar-demo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnackBarDemoComponent } from './snack-bar-demo.component';
+
+describe('SnackBarDemoComponent', () => {
+  let component: SnackBarDemoComponent;
+  let fixture: ComponentFixture<SnackBarDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SnackBarDemoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SnackBarDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/snack-bar-demo/snack-bar-demo.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'aui-snack-bar-demo',
+  templateUrl: './snack-bar-demo.component.html'
+})
+export class SnackBarDemoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/docs/docs.module.ts

@@ -59,6 +59,9 @@ import { ResponsiveDemoComponent } from './layout/responsive/responsive-demo.com
 import { ResponsiveDemo01Module } from './layout/responsive/responsive-demo-01/responsive-demo-01.module';
 import { ResponsiveWithDsModule } from './layout/responsive/responsive-with-ds/responsive-with-ds.module';
 
+import { BasicSnackBarModule } from './components/snack-bar-demo/basic-snack-bar/basic-snack-bar.module';
+import { SnackBarDemoComponent } from './components/snack-bar-demo/snack-bar-demo.component';
+
 @NgModule({
   imports: [
     SharedModule,
@@ -96,7 +99,9 @@ import { ResponsiveWithDsModule } from './layout/responsive/responsive-with-ds/r
     BasicFieldModule,
     /** Checkbox */
     BasicCheckboxModule,
-    ComplexCheckboxModule
+    ComplexCheckboxModule,
+    /** SnackBar */
+    BasicSnackBarModule
   ],
   declarations: [
     ThemingComponent,
@@ -119,7 +124,9 @@ import { ResponsiveWithDsModule } from './layout/responsive/responsive-with-ds/r
     /** Field */
     FieldDemoComponent,
     /** Ckeckbox */
-    CheckboxDemoComponent
+    CheckboxDemoComponent,
+    /** SnackBar */
+    SnackBarDemoComponent
 
   ]
 })

src/app/docs/docs.routing.ts

@@ -11,6 +11,7 @@ import { BadgeDemoComponent } from '@docs/components/badge-demo/badge-demo.compo
 import { FieldDemoComponent } from '@docs/components/field-demo/field-demo.component';
 import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
 import { ResponsiveDemoComponent } from './layout/responsive/responsive-demo.component';
+import { SnackBarDemoComponent } from './components/snack-bar-demo/snack-bar-demo.component';
 
 const routes: Routes = [
   /** layout */
@@ -42,7 +43,8 @@ const routes: Routes = [
       { path: 'resizing-cropping-images', component: ResizingCroppingImagesDemoComponent },
       { path: 'badge', component: BadgeDemoComponent },
       { path: 'field', component: FieldDemoComponent },
-      { path: 'checkbox', component: CheckboxDemoComponent }
+      { path: 'checkbox', component: CheckboxDemoComponent },
+      { path: 'snack-bar', component: SnackBarDemoComponent }
     ]
   }
 ];

src/lib/menu/menu.ts

@@ -138,7 +138,7 @@ export class LyMenuTriggerFor implements OnDestroy {
       this._menuRef.detach();
     } else {
       const rect = this.targetPosition();
-      this._menuRef = this.overlay.create(this.lyMenuTriggerFor as TemplateRef<any>, {
+      this._menuRef = this.overlay.create(this.lyMenuTriggerFor, {
         $implicit: this
       }, {
         styles: {
@@ -148,7 +148,8 @@ export class LyMenuTriggerFor implements OnDestroy {
           bottom: null,
         },
         fnDestroy: this.detach.bind(this),
-        host: this.elementRef.nativeElement
+        host: this.elementRef.nativeElement,
+        backdrop: true
       });
     }
   }

src/lib/snack-bar/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/lib/snack-bar/public_api.ts

@@ -0,0 +1 @@
+export * from './snack-bar.module';

src/lib/snack-bar/snack-bar-ref.ts

@@ -0,0 +1,62 @@
+import { EventEmitter } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { OverlayFromTemplateRef, LyTheme2 } from '@alyle/ui';
+import { LySnackBarService } from './snack-bar.service';
+import { LySnackBarDismiss } from './snack-bar';
+
+const DEFAULT_DURATION = 6e3;
+/** @ignore */
+const STYLE_PRIORITY = -2;
+
+export class LySnackBarRef {
+  private _timer: any;
+  private _dismissedByAction = false;
+
+  /** Subject for notifying the user that the snack bar has been dismissed. */
+  private readonly _afterDismissed = new Subject<void>();
+
+  /** Gets an observable that is notified when the snack bar is finished closing. */
+  afterDismissed(): Observable<void> {
+    return this._afterDismissed.asObservable();
+  }
+  constructor(
+    private _snackBarService: LySnackBarService,
+    private _overlay: OverlayFromTemplateRef,
+    private _afterDismissedEventEmitter: EventEmitter<LySnackBarDismiss>,
+    duration: number,
+    private _theme: LyTheme2
+  ) {
+    this._timer = setTimeout(() => {
+      this.dismiss();
+    }, duration || DEFAULT_DURATION);
+  }
+
+  dismiss() {
+    const snackBar = this._overlay;
+    const timer = this._timer;
+    this._afterDismissedEventEmitter.emit({dismissedByAction: this._dismissedByAction});
+    this._afterDismissed.next();
+    this._afterDismissed.complete();
+    if (snackBar) {
+      if (timer) {
+        // clear previous timer
+        clearTimeout(timer);
+      }
+      this._theme.addStyle('SnackBar:close', ({
+        opacity: 0
+      }), snackBar.containerElement, undefined, STYLE_PRIORITY);
+      setTimeout(() => {
+        snackBar.destroy();
+      }, 350);
+      this._snackBarService._currentSnackBar = null;
+      this._overlay = null;
+    }
+  }
+  dismissWithAction() {
+    const snackBar = this._overlay;
+    if (snackBar) {
+      this._dismissedByAction = true;
+      this.dismiss();
+    }
+  }
+}

src/lib/snack-bar/snack-bar.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { LyOverlayModule } from '@alyle/ui';
+import { LySnackBar } from './snack-bar';
+
+@NgModule({
+  imports: [LyOverlayModule],
+  declarations: [LySnackBar],
+  exports: [LySnackBar]
+})
+export class LySnackBarModule {}

src/lib/snack-bar/snack-bar.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { LySnackBarRef } from './snack-bar-ref';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LySnackBarService {
+  _currentSnackBar: LySnackBarRef;
+}