Feat(message)/notifications

demo/src/app/components/page-content/page-content.component.css

@@ -23,7 +23,7 @@
     }
 }
 
-@media only screen and (max-width: 425px) {
+@media only screen and (max-width: 480px) {
     :host.ui.main.container {
         margin-left: 1em !important;
         margin-right: 1em !important;

demo/src/app/components/page-title/page-title.component.css

@@ -26,7 +26,7 @@
     }
 }
 
-@media only screen and (max-width: 425px) {
+@media only screen and (max-width: 480px) {
     :host.ui.masthead.segment {
         margin-bottom: 1em;
         padding: 1em;

demo/src/app/pages/collections/message/message.page.ts

@@ -11,7 +11,7 @@ const exampleStandardTemplate = `
 `;
 
 const exampleNoDismissTemplate = `
-<sui-message class="attached warning" [isDismissable]="false">
+<sui-message class="attached warning" [hasDismissButton]="false">
     <div class="header">
         Attached message!
     </div>
@@ -44,7 +44,7 @@ export class MessagePage {
             selector: "<sui-message>",
             properties: [
                 {
-                    name: "isDismissable",
+                    name: "hasDismissButton",
                     type: "boolean",
                     description: "Sets whether or not the message has a dismiss button.",
                     defaultValue: "true"
@@ -67,6 +67,11 @@ export class MessagePage {
                     name: "dismiss",
                     type: "void",
                     description: "Fires when the message is dismissed by the user."
+                },
+                {
+                    name: "click",
+                    type: "void",
+                    description: "Fires when the message is clicked by the user."
                 }
             ]
         }

demo/src/app/pages/development/test/test.page.html

@@ -7,6 +7,11 @@
 <demo-page-content>
     <h2 class="ui dividing header">Examples</h2>
     <div class="ui segment">
-
+        <button class="ui button" (click)="open()">open</button>
+        <button class="ui button" (click)="dismissAll()">dismiss all</button>
+        <br>
+        <br>
+        <br>
+        <sui-message-container [controller]="controller"></sui-message-container>
     </div>
 </demo-page-content>

demo/src/app/pages/development/test/test.page.ts

@@ -1,10 +1,29 @@
 import { Component, AfterViewInit, ViewChild, TemplateRef } from "@angular/core";
 import { FormControl, Validators } from "@angular/forms";
+import { MessageController, SuiMessageService, MessagePosition, MessageConfig, MessageState } from "ng2-semantic-ui";
 
 @Component({
     selector: "demo-page-test",
     templateUrl: "./test.page.html"
 })
 export class TestPage {
-    constructor() {}
+    public controller:MessageController;
+
+    constructor(private _messageService:SuiMessageService) {
+        this.controller = new MessageController();
+        this._messageService.position = MessagePosition.BottomRight;
+        this._messageService.isNewestOnTop = true;
+    }
+
+    public open():void {
+        const message = new MessageConfig(Date.now().toString(), MessageState.Default, "Header");
+        message.hasProgress = true;
+        this.controller.show(message);
+        this._messageService.show(message);
+    }
+
+    public dismissAll():void {
+        this.controller.dismissAll();
+        this._messageService.dismissAll();
+    }
 }

demo/src/app/pages/modules/accordion/accordion.page.html

@@ -5,7 +5,7 @@
     </div>
 </demo-page-title>
 <demo-page-content>
-    <sui-message class="warning" [isDismissable]="false">
+    <sui-message class="warning" [hasDismissButton]="false">
         <div class="header">Important Note</div>
         <p>
             The accordion depends on the Web Animations API, which requires a polyfill for full browser

demo/src/app/pages/modules/collapse/collapse.page.html

@@ -14,7 +14,7 @@ <h4 class="ui header">Collapse</h4>
         <example-collapse-standard result></example-collapse-standard>
     </demo-example>
 
-    <sui-message class="warning" [isDismissable]="false">
+    <sui-message class="warning" [hasDismissButton]="false">
         <div class="header">Important Note</div>
         <p>The collapse component uses the <a href="https://w3c.github.io/web-animations/">Web Animations API.</a></p>
         <p>

demo/src/app/pages/modules/datepicker/datepicker.page.html

@@ -5,7 +5,7 @@
     </div>
 </demo-page-title>
 <demo-page-content>
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Important Note</div>
         <p>
             The datepicker is a port of <a href="https://github.com/mdehoog/Semantic-UI-Calendar">Semantic-UI-Calendar</a>,
@@ -48,7 +48,7 @@ <h4 class="ui header">Min & Max</h4>
         <example-datepicker-min-max result></example-datepicker-min-max>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Timezones</div>
         <p>
             The datepicker will always return a <code>Date</code> object in the local timezone.
@@ -66,7 +66,7 @@ <h4 class="ui header">Mobile Fallback</h4>
         <example-datepicker-mobile-fallback result></example-datepicker-mobile-fallback>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Localization</div>
         <p>
             The datepicker has full localization support. Read the

demo/src/app/pages/modules/dropdown/dropdown.page.html

@@ -36,7 +36,7 @@ <h4 class="ui header">Versatility</h4>
         <example-dropdown-menu result></example-dropdown-menu>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Selection Dropdowns</div>
         <p>
             Looking for selection dropdowns? That functionality is in

demo/src/app/pages/modules/popup/popup.page.ts

@@ -198,7 +198,7 @@ export class PopupExampleTemplate {}
 })
 export class PopupExamplePlacement {
     @Input()
-    public position:string = "right bottom";
+    public position:string = "top right";
 }
 
 export const PopupPageComponents = [PopupPage, PopupExampleStandard, PopupExampleTemplate, PopupExamplePlacement];

demo/src/app/pages/modules/progress/progress.page.ts

@@ -91,6 +91,24 @@ export class ProgressPage {
                     type: "boolean",
                     description: "Sets whether or not the progress bar automatically turns green when <code>value == maximum</code>.",
                     defaultValue: "true"
+                },
+                {
+                    name: "transition",
+                    type: "number",
+                    description: "Sets the transition function used when transitioning between values.",
+                    defaultValue: "350"
+                },
+                {
+                    name: "transitionDuration",
+                    type: "number",
+                    description: "Sets the transition duration of the bar between values.",
+                    defaultValue: "350"
+                },
+                {
+                    name: "canCompletelyEmpty",
+                    type: "boolean",
+                    description: "Sets whether the progress bar can empty completely.",
+                    defaultValue: "false"
                 }
             ]
         }

demo/src/app/pages/modules/search/search.page.html

@@ -32,7 +32,7 @@ <h4 class="ui header">Template</h4>
         <example-search-template result></example-search-template>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Localization</div>
         <p>
             The search component has full localization support. Read the

demo/src/app/pages/modules/select/select.page.html

@@ -18,7 +18,7 @@ <h4 class="ui header">Selection</h4>
         </div>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Important Note</div>
         <p>
             The select component is unusual in the fact that it requires you to manually provide the options within.
@@ -87,7 +87,7 @@ <h4 class="ui header">Remote Lookup</h4>
         </div>
     </demo-example>
 
-    <sui-message class="info" [isDismissable]="false">
+    <sui-message class="info" [hasDismissButton]="false">
         <div class="header">Localization</div>
         <p>
             The select component has full localization support. Read the

src/collections/message/classes/active-message.ts

@@ -0,0 +1,40 @@
+import { MessageConfig } from "./message-config";
+import { ComponentRef } from "@angular/core";
+import { SuiMessage } from "../components/message";
+
+export abstract class SuiActiveMessage {
+    public abstract onClick(callback:() => void):SuiActiveMessage;
+    public abstract onDismiss(callback:() => void):SuiActiveMessage;
+
+    public abstract dismiss():void;
+}
+
+export class ActiveMessage implements SuiActiveMessage {
+    public config:MessageConfig;
+    public componentRef:ComponentRef<SuiMessage>;
+
+    public get component():SuiMessage {
+        return this.componentRef.instance;
+    }
+
+    constructor(config:MessageConfig, componentRef:ComponentRef<SuiMessage>) {
+        this.config = config;
+        this.componentRef = componentRef;
+
+        this.component.onDismiss.subscribe(() => this.componentRef.destroy());
+    }
+
+    public onClick(callback:() => void):ActiveMessage {
+        this.config.onClick.subscribe(() => callback());
+        return this;
+    }
+
+    public onDismiss(callback:() => void):ActiveMessage {
+        this.config.onDismiss.subscribe(() => callback());
+        return this;
+    }
+
+    public dismiss():void {
+        this.component.dismiss();
+    }
+}

src/collections/message/classes/message-config.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from "@angular/core";
+
+export type MessageState = "" | "info" | "success" | "warning" | "error";
+
+export const MessageState = {
+    Default: "" as MessageState,
+    Info: "info" as MessageState,
+    Success: "success" as MessageState,
+    Warning: "warning" as MessageState,
+    Error: "error" as MessageState
+};
+
+export class MessageConfig {
+    public text:string;
+    public header?:string;
+    public state:MessageState;
+
+    public timeout:number;
+    public extendedTimeout:number;
+
+    public hasDismissButton:boolean;
+    public hasProgress:boolean;
+
+    public transition:string;
+    public transitionInDuration:number;
+    public transitionOutDuration:number;
+
+    public onClick:EventEmitter<void>;
+    public onDismiss:EventEmitter<void>;
+
+    constructor(text:string, state:MessageState = MessageState.Default, header?:string) {
+        this.text = text;
+        this.state = state;
+        this.header = header;
+
+        this.timeout = 5000;
+        this.extendedTimeout = 1000;
+
+        this.hasDismissButton = true;
+        this.hasProgress = false;
+
+        this.transition = "fade";
+        this.transitionInDuration = 400;
+        this.transitionOutDuration = 1000;
+
+        this.onClick = new EventEmitter<void>();
+        this.onDismiss = new EventEmitter<void>();
+    }
+}

src/collections/message/classes/message-controller.ts

@@ -0,0 +1,44 @@
+import { MessageConfig } from "./message-config";
+import { SuiActiveMessage } from "./active-message";
+import { SuiMessageContainer } from "../components/message-container";
+
+export interface IMessageController {
+    maxShown:number;
+    isNewestOnTop:boolean;
+    show(config:MessageConfig):SuiActiveMessage;
+    dismissAll():void;
+}
+
+export class MessageController implements IMessageController {
+    private _container:SuiMessageContainer;
+
+    public maxShown:number;
+    public isNewestOnTop:boolean;
+
+    constructor() {
+        this.maxShown = 7;
+        this.isNewestOnTop = true;
+    }
+
+    public registerContainer(container:SuiMessageContainer):void {
+        this._container = container;
+    }
+
+    public show(config:MessageConfig):SuiActiveMessage {
+        this.throwContainerError();
+
+        return this._container.show(config, this.maxShown, this.isNewestOnTop);
+    }
+
+    public dismissAll():void {
+        this.throwContainerError();
+
+        return this._container.dismissAll();
+    }
+
+    private throwContainerError():void {
+        if (!this._container) {
+            throw new Error("You must pass this controller to a message container.");
+        }
+    }
+}