feat: angular 6 compatible

theoomoregbee · Oct 14, 2018 · 48c05cd · 48c05cd
1 parent 6c9113f
commit 48c05cd
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 45 deletions.
diff --git a/angular.json b/angular.json
@@ -8,7 +8,11 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "ng",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -23,7 +27,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -72,7 +76,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": [],
             "assets": [
@@ -127,6 +131,11 @@
       "sourceRoot": "projects/alert/src",
       "projectType": "library",
       "prefix": "ng",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
@@ -159,4 +168,4 @@
     }
   },
   "defaultProject": "ngAlert"
-}
+}
diff --git a/projects/alert/src/lib/alert.component.html b/projects/alert/src/lib/alert.component.html
@@ -0,0 +1,18 @@
+<div *ngIf="message" class="alert alert-{{message.type}}" [ngClass]="{padding:closeType===closeTypes.TIMES}">
+  <h5 *ngIf="message.title">{{message.title}}</h5>
+  <span [innerHTML]="message.message">
+  </span>
+
+  <button *ngFor="let button of message.buttons" class="{{button.css}}" (click)="button.action?button.action():true">
+    {{button.label}}
+  </button>
+
+  <button (click)="message=null" *ngIf="dismissable && closeType===closeTypes.TIMES" type="button" class="close" data-dismiss="alert"
+                                                                                                                 aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <p align="center" *ngIf="dismissable && closeType===closeTypes.NORMAL">
+  <a (click)="message=null">close</a>
+  </p>
+
+</div>
diff --git a/projects/alert/src/lib/alert.component.ts b/projects/alert/src/lib/alert.component.ts
@@ -1,19 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { IMessage, CloseType } from './interfaces';
 
 @Component({
   selector: 'ng-alert',
-  template: `
-    <p>
-      alert works!
-    </p>
-  `,
+  templateUrl: 'alert.component.html',
   styles: []
 })
-export class AlertComponent implements OnInit {
+export class NgAlertComponent {
 
-  constructor() { }
+  @Input() dismissable: boolean;
+  rawMessage: IMessage;
+  @Output() messageChange = new EventEmitter();
+  @Input() closeType: CloseType = CloseType.NORMAL;
+  closeTypes = CloseType;
 
-  ngOnInit() {
+  @Input()
+  get message(): IMessage {
+    return this.rawMessage;
   }
 
+  set message(value: IMessage) {
+    this.rawMessage = value;
+    this.messageChange.emit(this.rawMessage);
+  }
+
+
 }
diff --git a/projects/alert/src/lib/alert.module.ts b/projects/alert/src/lib/alert.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
-import { AlertComponent } from './alert.component';
+import {CommonModule} from '@angular/common';
+import { NgAlertComponent } from './alert.component';
 
 @NgModule({
   imports: [
+    CommonModule
   ],
-  declarations: [AlertComponent],
-  exports: [AlertComponent]
+  declarations: [NgAlertComponent],
+  exports: [NgAlertComponent]
 })
-export class AlertModule { }
+export class NgAlertModule { }
diff --git a/projects/alert/src/lib/alert.service.ts b/projects/alert/src/lib/alert.service.ts
@@ -1,9 +1,26 @@
 import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { IMessage } from './interfaces';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AlertService {
-
+export class NgAlertService {
+  private _messageSource = new Subject<IMessage>();
   constructor() { }
+
+  /**
+   * this returns our alert message source
+   */
+  getSource() {
+    return this._messageSource;
+  }
+
+  /**
+   * push our message to our alert
+   * @param message type IMessage to be pushed to our listeners/subscribers
+   */
+  push(message: IMessage) {
+    this._messageSource.next(message);
+  }
 }
diff --git a/projects/alert/src/lib/interfaces.ts b/projects/alert/src/lib/interfaces.ts
@@ -0,0 +1,21 @@
+export enum MessageType {
+  success = 'success',
+    error = 'error',
+    info = 'info',
+    warning = 'warning'
+}
+
+export interface IMessage {
+  type: MessageType;
+  message: string;
+  title?: string;
+  buttons?: Array<{
+    label: string,
+    action?: Function,
+    css?: string
+  }>;
+}
+
+export enum CloseType {
+  TIMES, NORMAL
+}
diff --git a/projects/alert/src/public_api.ts b/projects/alert/src/public_api.ts
@@ -2,6 +2,7 @@
  * Public API Surface of alert
  */
 
+export * from './lib/interfaces';
 export * from './lib/alert.service';
 export * from './lib/alert.component';
 export * from './lib/alert.module';
diff --git a/projects/alert/style.scss b/projects/alert/style.scss
@@ -0,0 +1,96 @@
+/* APP LEVEL ALERT and Normal ALERT, check alert component css for more  */
+.alert-app-level {
+    position: fixed;
+    width: 100%;
+    z-index: 9001; 
+    text-align: center
+}
+
+.alert {
+    position: relative;
+    padding: .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    /* text-align: justify; */
+    font-size: 13px;
+    font-weight: 400; 
+    letter-spacing: 0.5px;
+}
+
+.alert-app-level .alert {
+    border-radius: 0px
+}
+
+.alert .close {
+    float: right;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5;
+}
+
+.alert button.close {
+    padding: 0;
+    background: 0 0;
+    border: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    -moz-appearance: none;
+}
+
+.alert.padding {
+    padding: 20px
+}
+
+.alert-dismissible .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .75rem 1.25rem;
+    color: inherit;
+}
+
+/* END APP LEVEL ALERT  */
+
+
+
+/*  http://getbootstrap.com/docs/4.0/components/alerts/ */
+
+.alert-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba;
+}
+
+.alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}
+
+.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+
+.alert-error {
+    color: #721c24;
+    background-color: #f8d7da; 
+    border-color: #f5c6cb; 
+}
+
+.fade {
+    opacity: 0;
+    transition: opacity .15s linear;
+}
+
+.fade.show {
+    opacity: 1;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,20 +1,36 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<div style="padding: 20px;">
+
+
+  <!--The content below is only a placeholder and can be replaced.-->
+  <h2>When you have an alert in a tight or small width screens</h2>
+  <ng-alert [(message)]="message" [dismissable]="true"></ng-alert>
+
+  <h2>When you want the close button to be times</h2>
+  <ng-alert [(message)]="message" [dismissable]="true" [closeType]="closeTypes.TIMES"></ng-alert>
+
+  <h2>Message Types</h2>
+  <p>
+  <button (click)="showMessage('Sample message from click info', messageTypes.info)">Show Message Info</button>
+  <button (click)="showMessage('Sample message alert from click warning', messageTypes.warning)">Show Message Warning</button>
+  <button (click)="showMessage('Sample message alert from click success', messageTypes.success)">Show Message Success</button>
+  <button (click)="showMessage('Sample message alert from click error', messageTypes.error)">Show Message Error</button>
+  </p>
 
+  <h2>With Title </h2>
+  <ng-alert [(message)]="message2" [dismissable]="true" [closeType]="closeTypes.TIMES"></ng-alert>
+
+  <h2>App Level Alert --> which means you want all your errors to be at one central location, usually the top of your app</h2>
+  <p>
+  Just simply place the
+  <code>ng-alert</code> at the top of your page and use the exposed interface.
+  <br>
+  <button (click)="showMessage('Sample message alert from click')">Show Message</button>
+  <button (click)="showConfirmation('<b>Are you sure!</b> you want to do this')">Show Confirmation</button>
+  </p>
+
+  <h2>Supports HTML content</h2>
+  <p>
+  <button (click)="showMessage('<b>Sample</b> bold <ul> <l1>message</li> <li>alert</li> <li>from click</li>')">Show Message HTML</button>
+  </p>
+
+</div>