feat(notification-panel): add new component (#78)

.vscode/settings.json

@@ -1 +1 @@
-{}
+{}

projects/ng-aquila/documentation/examples/examples-shared.module.ts

@@ -64,6 +64,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { NxToolbarModule } from '@aposin/ng-aquila/toolbar';
 import { NxTimefieldModule } from '@aposin/ng-aquila/timefield';
 import { NxSidepanelModule } from '@aposin/ng-aquila/sidepanel';
+import { NxNotificationPanelModule } from '@aposin/ng-aquila/notification-panel';
 import { NxSmallStageModule } from '@aposin/ng-aquila/small-stage';
 import { NxOverlayModule } from '@aposin/ng-aquila/overlay';
 
@@ -103,6 +104,7 @@ const EXPORTED_MODULES = [
   NxModalModule,
   NxMomentDateModule,
   NxNaturalLanguageFormModule,
+  NxNotificationPanelModule,
   NxNumberStepperModule,
   NxOverlayModule,
   NxPaginationModule,

projects/ng-aquila/documentation/examples/notification-panel-actions/notification-panel-actions-example.css

@@ -0,0 +1,4 @@
+.inline-delete {
+  display: flex;
+  justify-content: space-between;
+}

projects/ng-aquila/documentation/examples/notification-panel-actions/notification-panel-actions-example.html

@@ -0,0 +1,53 @@
+<button nxIconButton="small tertiary" class="nx-margin-0"
+  [nxNotificationPanelTriggerFor]="panel1" title="Notifications">
+  <nx-icon name="bell-o"></nx-icon>
+</button>
+
+<ng-template #panel1>
+  <nx-notification-panel>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3><button nxPlainButton="small" type="button">Mark all as read <nx-icon
+          name="check" class="nx-margin-left-2xs"></nx-icon></button>
+    </nx-notification-header>
+
+    <a nxNotificationPanelItem clickable="false" [attr.href]="null">
+      <nx-notification-item-metadata>
+        <nx-icon size="s" class="nx-margin-right-2xs" name="lock-o"
+          aria-hidden="true"></nx-icon>File lock release &middot; 16:53
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        The file you tried to edit (XY12345) is now available.
+      </nx-notification-item-content>
+      <nx-notification-item-actions>
+        <nx-link><a href="#file-link">Edit file</a></nx-link>
+        <button nxPlainButton="small" type="button" title="Delete">
+          <nx-icon name="trash-o" aria-hidden="true"></nx-icon>
+        </button>
+      </nx-notification-item-actions>
+    </a>
+    <div nxNotificationPanelItem clickable="false">
+      <nx-notification-item-metadata>
+        <nx-icon size="s" class="nx-margin-right-2xs" name="phone"
+          aria-hidden="true"></nx-icon>Callback &middot; 11:35
+      </nx-notification-item-metadata>
+      <nx-notification-item-content class="inline-delete">
+        Please call back James Erwin at 15:00
+        <button nxPlainButton="small" class="" type="button" title="Delete">
+          <nx-icon name="trash-o" aria-hidden="true"></nx-icon>
+        </button>
+      </nx-notification-item-content>
+    </div>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3>
+    </nx-notification-header>
+    <div nxNotificationPanelItem read clickable="false">
+      <nx-notification-item-metadata>Offers &middot; Yesterday
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Mary London - Note created
+      </nx-notification-item-content>
+    </div>
+  </nx-notification-panel>
+</ng-template>

projects/ng-aquila/documentation/examples/notification-panel-actions/notification-panel-actions-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Notification Panel
+*/
+@Component({
+  templateUrl: './notification-panel-actions-example.html',
+  styleUrls: ['./notification-panel-actions-example.css']
+})
+export class NotificationPanelActionsExampleComponent {
+}

projects/ng-aquila/documentation/examples/notification-panel-clickable/notification-panel-clickable-example.html

@@ -0,0 +1,40 @@
+<button nxIconButton="small tertiary" class="nx-margin-0"
+  [nxNotificationPanelTriggerFor]="panel1" title="Notifications">
+  <nx-icon name="bell-o"></nx-icon>
+</button>
+
+<ng-template #panel1>
+  <nx-notification-panel>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3><button nxPlainButton="small" type="button">Mark all as read <nx-icon
+          name="check" class="nx-margin-left-2xs"></nx-icon></button>
+    </nx-notification-header>
+
+    <a nxNotificationPanelItem routerLink="#clickable-notification1">
+      <nx-notification-item-metadata>Tasks &middot; 5 minutes ago
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Frank Loyd - created new offer
+      </nx-notification-item-content>
+    </a>
+    <a nxNotificationPanelItem routerLink="#clickable-notification2">
+      <nx-notification-item-metadata>Offers &middot; 11:45
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Susi Müller - Offer status has changed
+      </nx-notification-item-content>
+    </a>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3>
+    </nx-notification-header>
+    <a nxNotificationPanelItem read routerLink="#clickable-notification3">
+      <nx-notification-item-metadata>Offers &middot; Yesterday
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Mary London - Note created
+      </nx-notification-item-content>
+    </a>
+  </nx-notification-panel>
+</ng-template>

projects/ng-aquila/documentation/examples/notification-panel-clickable/notification-panel-clickable-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Notification Panel
+*/
+@Component({
+  templateUrl: './notification-panel-clickable-example.html',
+  styleUrls: ['./notification-panel-clickable-example.css']
+})
+export class NotificationPanelClickableExampleComponent {
+}

projects/ng-aquila/documentation/examples/notification-panel-mixed/notification-panel-mixed-example.html

@@ -0,0 +1,44 @@
+<button nxIconButton="small tertiary" class="nx-margin-0"
+  [nxNotificationPanelTriggerFor]="panel1" title="Notifications">
+  <nx-icon name="bell-o"></nx-icon>
+</button>
+
+<ng-template #panel1>
+  <nx-notification-panel>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3><button nxPlainButton="small" type="button">Mark all as read <nx-icon
+          name="check" class="nx-margin-left-2xs"></nx-icon></button>
+    </nx-notification-header>
+
+    <a nxNotificationPanelItem routerLink="#clickable-notification1">
+      <nx-notification-item-metadata>
+        <nx-icon size="s" class="nx-margin-right-2xs" name="lock-o"
+          aria-hidden="true"></nx-icon>File lock release &middot; 16:53
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        The file you tried to edit (XY12345) is now available.
+      </nx-notification-item-content>
+    </a>
+    <a nxNotificationPanelItem clickable="false" [routerLink]="null">
+      <nx-notification-item-metadata>
+        <nx-icon size="s" class="nx-margin-right-2xs" name="phone"
+          aria-hidden="true"></nx-icon>Callback &middot; 11:35
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Please call back James Erwin at 15:00
+      </nx-notification-item-content>
+    </a>
+    <nx-notification-header>
+      <h3 nxCopytext="large" class="nx-margin-0">Unread
+      </h3>
+    </nx-notification-header>
+    <div nxNotificationPanelItem read routerLink="#clickable-notification3">
+      <nx-notification-item-metadata>Offers &middot; Yesterday
+      </nx-notification-item-metadata>
+      <nx-notification-item-content>
+        Mary London - Note created
+      </nx-notification-item-content>
+    </div>
+  </nx-notification-panel>
+</ng-template>

projects/ng-aquila/documentation/examples/notification-panel-mixed/notification-panel-mixed-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Notification Panel
+*/
+@Component({
+  templateUrl: './notification-panel-mixed-example.html',
+  styleUrls: ['./notification-panel-mixed-example.css']
+})
+export class NotificationPanelMixedExampleComponent {
+}

projects/ng-aquila/src/notification-panel/notification-item/notification-item-slots.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+
+// tslint:disable-next-line:directive-selector
+@Directive({ selector: 'nx-notification-item-metadata' })
+export class NxNotificationItemMetadataDirective {}
+
+// tslint:disable-next-line:directive-selector
+@Directive({ selector: 'nx-notification-item-content' })
+export class NxNotificationItemContentDirective {}
+
+// tslint:disable-next-line:directive-selector
+@Directive({ selector: 'nx-notification-item-actions' })
+export class NxNotificationItemActionsDirective {}
+
+// tslint:disable-next-line:directive-selector
+@Directive({ selector: 'nx-notification-header' })
+export class NxNotificationItemHeaderDirective {}

projects/ng-aquila/src/notification-panel/notification-item/notification-item.component.html

@@ -0,0 +1,7 @@
+<ng-content select="nx-notification-item-metadata"></ng-content>
+
+<ng-content select="nx-notification-item-content"></ng-content>
+<ng-content></ng-content>
+
+<ng-content select="nx-notification-item-actions"></ng-content>
+

projects/ng-aquila/src/notification-panel/notification-item/notification-item.component.scss

@@ -0,0 +1,62 @@
+@import "../../shared-styles/index";
+:host {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--notification-panel-item-unread-background-color);
+    padding: 16px 24px;
+    margin: 0 -24px;
+    &.nx-notification-item--read {
+        background-color: var(--notification-panel-item-read-background-color);
+    }
+    &:focus {
+        outline: none;
+    }
+}
+
+:host-context([data-whatinput="keyboard"]):focus {
+    @include focus-style-inset;
+}
+
+::ng-deep {
+    nx-notification-item-metadata {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        margin-bottom: 4px;
+        display: flex;
+        align-items: center;
+    }
+    nx-notification-item-content {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+    }
+    nx-notification-item-actions {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        display: flex;
+        justify-content: space-between;
+        padding-top: 8px;
+    }
+}
+
+// Hover and active styles for clickable item
+:host(.nx-notification-item--clickable) {
+    cursor: pointer;
+    &:hover {
+        background-color: var(--notification-panel-item-unread-hover-background-color);
+    }
+    &:active {
+        background-color: var(--notification-panel-item-unread-active-background-color);
+    }
+    &.nx-notification-item--read {
+        &:hover {
+            background-color: var(--notification-panel-item-read-hover-background-color);
+        }
+        &:active {
+            background-color: var(-notification-panel-item-read-active-background-color);
+        }
+    }
+}

projects/ng-aquila/src/notification-panel/notification-item/notification-item.component.ts

@@ -0,0 +1,67 @@
+import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, Input } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'nx-notification-panel-item, [nxNotificationPanelItem]',
+  templateUrl: 'notification-item.component.html',
+  styleUrls: ['./notification-item.component.scss'],
+  host: {
+    '[class.nx-notification-item--read]': 'read',
+    '[class.nx-notification-item--clickable]': 'clickable',
+    'tabindex': '0',
+    '(focus)': 'focus()',
+    '(blur)': '_blur()'
+  }
+})
+
+export class NxNotificationPanelItemComponent implements FocusableOption {
+
+  private _read: boolean = false;
+  private _clickable: boolean = true;
+  private _hasFocus = false;
+
+  focused = new Subject<NxNotificationPanelItemComponent>();
+
+  @Input()
+  set read(value: boolean) {
+    this._read = coerceBooleanProperty(value);
+  }
+  get read() {
+    return this._read;
+  }
+
+  @Input()
+  set clickable(value: boolean) {
+    this._clickable = coerceBooleanProperty(value);
+  }
+  get clickable() {
+    return this._clickable;
+  }
+
+  constructor(private _elementRef: ElementRef) { }
+
+  focus(focusOrigin?: FocusOrigin) {
+    // the focus key manager calls this method with the focusOrigin
+    // property. if it is not set we know the focus comes from another source
+    // like the user using TAB to go through the list. Then we want to notify
+    // the focus manager about this change of focus.
+    if (typeof focusOrigin === 'undefined' && !this._hasFocus) {
+      this.focused.next(this);
+      this._hasFocus = true;
+    }
+
+    if (!this._hasFocus) {
+      this._elementRef.nativeElement.focus();
+      this._hasFocus = true;
+    }
+  }
+
+  _blur() {
+    this._hasFocus = false;
+  }
+
+  static ngAcceptInputType_read: BooleanInput;
+  static ngAcceptInputType_clickable: BooleanInput;
+}