Angular Upgrade 7.2

Catch-up with Angular, Material, rxjs, CLI and minor barrel fixes.

Angular 7 Upgrade

Upgrade to Angular 7

Release upgrades to angular 7 and upgrade to Material 7.

Improvements and fixes

• #66 Make CBP Header click action configurable
• #65 App Menu, User Menu remains open when CBP Header shrinks

Upgrade Guide

• First upgrade your projects to Angular 7 following https://angular.io/guide/updating
• Then

rimraf node_modules
npm install --save ngx-cbp-theme@~7

#or 
yarn add ngx-cbp-theme@~7

CBP Header Fix

CBP Header Fixes

• #66 CBP Header click goes navigates to a URL defined by Applications Directory URL
• #65 App Menu closing on scroll shrink of CBP Header
• Other minor API simplifications
  • CBPNotification constructor - pass message type , message etc.

Minor Breaking changes

Simplification of some components to templates or use of lightweight ng-content selectors using classes instead of components/directives will cause following changes:-

• If you used <cbp-app-title> in the past replace it with <div class="cbp-app-title">
• If you used <cbp-app-main-nav> in the past replace it with <div class="cbp-app-main-nav">
• If you used <cbp-app-right-nav> in the past replace it with <div class="cbp-app-right-nav">

Upgrade cbp-theme & Typescript

Upgrade to cbp-theme

• We get roboto-font distribution improvements.

Angular 6 Upgrade

Upgrades CLI, RxJS, Material to version 6.x

Upgrade Guide + Tips & Tricks

These are breaking changes. Please follow the following high level steps to upgrade your project to Angular 6.

• First upgrade your project to Angular 6 as per their migration guide.

npm uninstall @angular/cli
// note: don't use --save-dev flag
npm install @angular/cli@^6  
ng update @angular/cli
ng update @angular/core
ng update rxjs

• Material must be upgraded separately

Update package.json only with @angular/material, @angular/cdk version 5.2.5 and then perform:-

ng update @angular/material

This will apply material schematics

• Update ngx-cbp-theme

npm install @angular/material@latest

• Removing rxjs-compat
  Follow official RxJS 5 to 6 Migration Guide

Break Fixes

• #53 material tabindex imported incorrectly causing build failures downstream
• demo toggle buttons correction

Actionable System Notifications

• New component to create CBP Theme styled toast notifications.
• Notifications can be created using as simple as calling CBPNotificationsService.notify(notification: CBPNotification) passing in textual message and type type?: 'success' | 'danger' | 'warning' | 'info';
• You can also project your markup by passing your TemplateRef as shown below and in e.g. DemoNotificationsComponent.notifyWarning

    @ViewChild('warnNotification') warnNotificationRef: TemplateRef<any>;

    notifyWarning() {
        this.snoozingNotification = new CBPNotification();
        this.snoozingNotification.type = 'warning';
        this.snoozingNotification.content = this.warnNotificationRef;
        this.notificationService.notify(this.snoozingNotification);
    }

• Provided actions in the template will get the the local.
• CBPNotificationsService.snooze(notification: CBPNotification, wakeUpAfter = 5000) can snooze a notification and it will reappear after the wake up time is elapsed.
• Notification can be programmatically closed by calling close() on the notification object.
• CBPNotification.isOpen(): Observable<boolean> to observe if open.
• BREAKING cbp-toggle-switch now accepts projection of ngModel instead of isOn property.

Towards Kitchensink

• fix app header brand width
• user package version for Kitchensink App version
• Demo is now called Kitchensink
• cbp-toggle-button change detection OnPush projecting isOn input without ngModel

v2.2.0

• Mobile mode App header menu positioning fix
• Allows granular event from CBP Header
• Allows programmatic suspending scroll shrink

Configurable cbp-header

Make cbp-header configurable

• Header state is made observable in a service to reflect CBPToolbarState
  • When header is scrolled up: scrolledState: up | initial
  • When header menu is clicked - hasToolbarMenu: boolean
  • When header expands - toolbarIsExpanded: boolean
• Allows explicitly excluding certain parts of the header

    <cbp-header [cbpAppsMenuExclude]="true" [cbpFeedbackLinkExclude]="true">
        <cbp-feedback-link (click)="myFeedbackAction()"></cbp-feedback-link>
        <cbp-user-menu>
            <div class="mat-menu-item" (click)="myPreferences()" cbp-user-menu-item>Preferences</div>
        </cbp-user-menu>
    </cbp-header>

Upgrade Notes

npm upgrade to 2.1.4 version