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

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 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 to cbp-theme

• We get roboto-font distribution improvements.

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

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

• 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.

• 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

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

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

We needed user to click Login to perform login.

In some cases user may be already logged in and the user details are readily available Sometimes the user is already logged in and we have the user details are available upfront. In this case we need to display the user details. This feature prepares for future SSO module while currently provides downstream applications to utilize the same mechanism.

How to Use

You can pass in 0 if your getUser() resolves to an immediate subject.

To upgrade from previous version;

npm i [email protected]

• Toggle Switch component #35

• Various Upgrades
• Requires upgrade to your Angular CLI to 1.6.3
• Match other versions

Fixes broken FESM5 build

Highlights

• Upgrade to Angular 5
• Upgrade to Material RC 5
• Upgrade to cbp-theme 1.8.1
• Upgrade to Angular-CLI 1.5.4

Upgrade Guide

• Upgrade global @angular/[email protected] and follow the upgrade guide.
• It is good idea to update your tslint, tsconfig.json etc. but these are optional. Be prepared for the new stricter tslint.
• Remove package-lock.json
• Nuke node_modules
• Update your package.json to match the versions. Ignore following listed packages not in your package.json

    "ngx-cbp-theme": "2.0.0",
    "@angular/animations": "5.0.3",
    "@angular/cli": "1.5.4",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/language-service": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@compodoc/compodoc": "1.0.4",
    "@types/jasmine": "2.8.2",
    "rxjs": "5.5.2",
     "@types/node": "8.0.53",
    "codelyzer": "4.0.1",

Following scripts below in your project root

npm cache clear --force
npm install @angular/[email protected] -g
npm install

Highlights

Major upgrade to @angular/[email protected]

• All md- prefixes changed to mat-. Breaking changes in carapace-parapet - version beta11
• cbp-root now starts enforcing mat- prefix.
• angular-cli upgraded to 1.4.5
• AOT build fixes and changes to reference/starter application my-app
• With this 1.0.0 all versions are locked going forward.

Upgrade Guide

• Upgrade global @angular/[email protected].
• Update all your dependency versions to package.json.
• Update version [email protected]
• npm cache verify
• npm-install
• Change your prefixes - otherwise you will run into lot of issues. To do this following the following guide:-

How to change prefixes ?

You can automatically update your projects with the angular-material-prefix-updater tool.

However their tool does not work in beta.12 it only works in beta.11. So here is the trick you can use:

• npm install @angular/[email protected]` i.e. go back to version 11 however don;t save this to package.json.
• Run their prefixer tool.
• Revert back to @angular/[email protected] or best is nuke node_modules and reinstall

Additional Notes

• If you were using mat-select/md-select you now need to encapsulate it inside mat-form-field. This is a major enhancement which allows adding mat-hint and other desirable benefits of mat-form-fields
• If you used md-icon change from fontawesome to fa - this registry is provided for you under CBPRootModule

<md-icon  fontSet="fontawesome" fontIcon="fa-print"></md-icon>

to

<md-icon  fontSet="fa" fontIcon="fa-print"></md-icon>

Adds Applications search and other minor fixes to cbp-header

AOT Build fixes

Refactoring code/functionality between cbp-header and cbp-app-header

• Introduced cbp-toolbar to contain the common functionality
• This essentially made md-toolbar non-essential. Removed by compensating for the Accessibility.
• Removed height adjustment hacks created for md-toolbar (64px->50px hacks)
• Adjusted Demo to reflect the change for app-header (no change to cbp-header).

Additional Enhancements

• app-header to be open up "hambruger" menu for mobile just as cbp-header
• Demo application now provides XS view of main and right toolbar navigations.